/* Fashion Show — only what base.css does not already give us. The camera block (.cam*) is the same
   shape as /hunt: both camera games ship their own copy rather than pushing it into base.css, which
   every non-camera activity would then have to download. */

/* ---- the camera stage (shared shape with /hunt) --------------------------------------------- */
.cam {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--r16);
  overflow: hidden;
  background: #EDEFF3;
  box-shadow: var(--shadow-1);
}
.cam__video, .cam__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cam__video.is-mirrored { transform: scaleX(-1); }
.cam__video.is-behind { visibility: hidden; }
.cam__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.cam__flash.is-on { animation: cam-flash 420ms ease-out; }
@keyframes cam-flash { 0% { opacity: .9; } 100% { opacity: 0; } }
.cam__err {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
  background: var(--paper-raised);
  color: var(--ink-soft);
  font-size: 14px;
}

/* ---- DESIGN ---------------------------------------------------------------------------------- */
.fa-eyebrow { font-family: var(--mono); letter-spacing: .12em; }
.fa-brief { margin: 2px 0 10px; text-align: center; text-wrap: balance; }
.fa-twist {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px dashed var(--ink-faint);
  border-radius: 999px;
  margin-bottom: 12px;
}
.fa-twist__k {
  font-size: 11px;
  letter-spacing: .12em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
}
.fa-twist__v { font-weight: 700; font-size: 14px; }
/* Deliberately small: DESIGN has to hold the brief, the twist, the camera, the chips AND the box on
   one phone screen, and the photograph is a record of the look rather than the thing being edited. */
.fa-stage { width: min(70%, 240px); margin: 0 auto; }
.fa-camnote, .fa-secret { text-align: center; }
.fa-chips__k { margin-top: 8px; }
.fa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  max-height: 92px;
  overflow-y: auto;
  width: 100%;
}
.fa-chip { border: 1px solid var(--line); background: var(--paper-raised); cursor: pointer; font-size: 12px; }
.fa-chip:hover:not(:disabled) { border-color: var(--ink-faint); }
.fa-chip:disabled { opacity: .45; cursor: default; }
.fa-look { width: 100%; }
.fa-waiting { text-align: center; color: var(--ink-soft); font-size: 14px; }

/* ---- RUNWAY ------------------------------------------------------------------------------------ */
/* `.meta` is styled under `.play` in base.css; the runway is not a play scene, so it repeats the row. */
.fa-runway .meta { display: flex; gap: 14px; align-items: center; justify-content: center; font: 700 13px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.fa-verdict { margin-bottom: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; }
.fa-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.fa-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r16);
  background: var(--paper-raised);
  box-shadow: var(--shadow-1);
  position: relative;
}
.fa-card.pink { border-color: var(--pink); }
.fa-card.blue { border-color: var(--blue); }
.fa-card.is-win { box-shadow: var(--shadow-2); }
.fa-card__crown { position: absolute; top: 10px; right: 12px; font-size: 22px; }
.fa-card__photo { aspect-ratio: 3 / 4; border-radius: var(--r8); overflow: hidden; background: #EDEFF3; }
.fa-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.fa-card__name { font-weight: 800; }
.fa-card__look { font-size: 14px; color: var(--ink-soft); }
.fa-card__look.is-empty { font-style: italic; color: var(--ink-faint); }
.fa-card__row { display: flex; align-items: baseline; gap: 8px; }
.fa-card__score { font-size: 40px; font-weight: 800; line-height: 1; }
.fa-card__badge { font-size: 12px; color: var(--ink-soft); }
.fa-card__standout {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: var(--r8);
  background: var(--paper);
  font-size: 13px;
}
.fa-card__standout__k { font-size: 10px; letter-spacing: .12em; color: var(--ink-faint); }
.fa-card__note { font-size: 13px; font-style: italic; color: var(--ink-soft); }

.fa-vote__wrap { display: grid; gap: 10px; justify-items: center; margin: 12px 0; text-align: center; }
.fa-vote__row { display: grid; gap: 6px; justify-items: center; }
.fa-vote__q { font-weight: 800; }
.fa-vote__clock { font-size: 13px; color: var(--ink-soft); }
.fa-line { text-align: center; font-style: italic; color: var(--ink-soft); }
.fa-next { margin-top: 12px; }

/* ---- RESULT -------------------------------------------------------------------------------------- */
.fa-result__emoji { font-size: 52px; line-height: 1; }
.fa-result__h { margin: 4px 0; text-align: center; }
.fa-result__band { margin-bottom: 12px; color: var(--ink-soft); text-align: center; }
.fa-board { display: grid; gap: 6px; width: 100%; max-width: 420px; }
.fa-board__row { border: 1px solid var(--line); border-radius: var(--r8); padding: 10px 14px; gap: 12px; }
.fa-board__row.pink { border-color: var(--pink); }
.fa-board__row.blue { border-color: var(--blue); }
.fa-board__pts { margin-left: auto; font-weight: 800; }
.fa-sheet { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; width: 100%; max-width: 440px; margin: 14px 0 4px; }
.fa-sheet__cell { width: 68px; aspect-ratio: 3 / 4; border-radius: var(--r4); overflow: hidden; background: #EDEFF3; border: 2px solid transparent; }
.fa-sheet__cell.pink { background: var(--pink-tint); }
.fa-sheet__cell.blue { background: var(--blue-tint); }
.fa-sheet__cell.is-win { border-color: var(--yellow); }
.fa-sheet__cell img { width: 100%; height: 100%; object-fit: cover; }
.fa-looks { width: 100%; }
.fa-busy { text-align: center; }
.fa-rounds { text-align: center; }

@media (max-width: 520px) {
  .fa-cards { grid-template-columns: 1fr; }
  .fa-card__photo { aspect-ratio: 4 / 3; }
}