/* ============================================================
   Spot the Fake — game styles
   ============================================================ */

:root {
  /* warm parchment overrides (same as commute/joyride) */
  --paper:      #f6f1e4;
  --paper-deep: #ede5ce;
  --hairline:   #c8b890;
  --tile-shadow: #8a7455;
  --ink:        #1a1410;
  --ink-soft:   #5a4a3a;
  --ink-faint:  #9a8a7a;
  --panel:      #faf7f0;
  --jade:       oklch(54% 0.15 155);
  --jade-deep:  oklch(40% 0.13 155);
  --jade-soft:  oklch(93% 0.05 155);
  --font-display: 'Abril Fatface', serif;
  --font-ui: 'Work Sans', sans-serif;
  /* accent */
  --stf:      oklch(55% 0.18 290);
  --stf-deep: oklch(40% 0.16 290);
  --stf-soft: oklch(92% 0.06 290);
}

body {
  background: var(--paper-deep);
  -webkit-tap-highlight-color: transparent;
}

/* The bar wears the game's colour. Every other game page does this — Rush is
   the model — and without it this page sat under the site's default green
   while everything below it was purple. Size and layout stay in shared.css;
   only the colour is the game's to set. */
.site-header {
  background: var(--stf);
  border-bottom: 4px solid var(--stf-deep);
  box-shadow: 0 4px 0 var(--stf-deep);
}
.site-header .brand-seal { background: var(--stf-deep); }

/* The primary button carries the accent too — shared.css defaults it to the
   site's jade, which left a green button on an otherwise purple page. */
#screen-intro .btn-primary,
#screen-game .btn-primary,
#screen-result .btn-primary { background: var(--stf); }
#screen-intro .btn-primary:hover,
#screen-game .btn-primary:hover,
#screen-result .btn-primary:hover { background: var(--stf-deep); }

.screen { display: block; }
.screen.hidden { display: none; }

.app {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 0 48px;
}

/* ============================================================
   Intro body
   ============================================================ */
/* Rush's intro shape: one bordered panel holding the day, the lead, a working
   miniature of the loop, the steps and the button — no coloured hero band
   repeating the name the header already carries. */
.intro-body {
  max-width: 520px;
  margin: 24px auto 40px;
  background: var(--panel);
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.intro-date {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  margin: 0;
}

.intro-desc {
  max-width: 24rem;
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.6;
  text-align: center;
}

.intro-preview { width: 100%; max-width: 24rem; }

.intro-how-to-play {
  width: 100%;
  max-width: 24rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.intro-how-label {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}
.intro-steps { display: flex; flex-direction: column; gap: 7px; }
.intro-step { display: flex; align-items: flex-start; gap: 10px; }
.intro-step-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
  background: var(--stf);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.intro-step-text { font-size: 0.84rem; color: var(--ink-soft); line-height: 1.5; }

/* Shown instead of a silent replay when the day is already finished. */
.intro-prev {
  width: 100%;
  max-width: 24rem;
  border-left: 3px solid var(--stf);
  background: var(--stf-soft);
  border-radius: 0 5px 5px 0;
  padding: 10px 14px;
  text-align: center;
}
.intro-prev.hidden { display: none; }
.intro-prev-title { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 3px; }
.intro-prev-line  { font-size: 0.88rem; color: var(--ink-soft); }
.intro-tomorrow {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-faint);
  text-align: center;
}

/* ============================================================
/* ============================================================
   Tiles (shared rendering base)
   ============================================================ */
.tile {
  position: relative;
  background: transparent;
  border: none;
  border-radius: 5px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
  padding: 3px 2px;
}
.tile-img {
  flex: 1;
  width: 100%;
  min-height: 0;
  object-fit: contain;
  pointer-events: none;
  display: block;
}
.tile-num-label {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-size: 8px;
  font-weight: 800;
  background: rgba(255,255,255,0.96);
  border-radius: 3px;
  padding: 1px 3px;
  line-height: 1.4;
  color: #111;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  font-family: system-ui, -apple-system, sans-serif;
}
.tile-id { font-size: 0.7rem; font-weight: 700; color: var(--ink-soft); }

.tile.suit-joker { filter: drop-shadow(0 0 3px #c8a840); }

/* ============================================================
   Intro: difficulty picker
   ============================================================ */
.deal-btn-wrap { margin-top: 8px; }

/* ============================================================
   Game & result screen wrappers
   ============================================================ */
.pointer-none { pointer-events: none; }

/* Wide enough that fourteen tiles fit one row at a readable size, the way the
   Charleston lays a hand out. The result screen stays narrow — it is reading. */
.game-inner {
  padding: 20px 16px;
  max-width: 760px;
  margin: 0 auto;
}
.result-inner {
  padding: 20px 16px;
  max-width: 520px;
  margin: 0 auto;
}

/* ============================================================
   Game screen
   ============================================================ */
/* Where the game's own title bar used to sit. A full-width coloured band
   carrying the game's name directly under the site header read as a second
   header — the same words, louder, in a colour the site header never takes.
   What is actually needed here is the round's position, so that is all this
   row carries; the accent lives in the dots instead. */
.stf-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1.5px solid var(--hairline);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}

.game-prompt {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 16px;
  text-align: center;
}

/* ============================================================
   Hand cards (A / B / C)
   ============================================================ */
.hand-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.hand-card {
  background: var(--panel);
  border: 2.5px solid var(--hairline);
  border-radius: 12px;
  padding: 16px 18px 14px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  position: relative;
}
.hand-card:hover { border-color: var(--stf); }
.hand-card.selected {
  border-color: var(--stf);
  box-shadow: 3px 3px 0 var(--stf);
  background: var(--stf-soft);
}
.hand-card.correct {
  border-color: var(--jade);
  background: oklch(95% 0.04 155);
  box-shadow: 3px 3px 0 var(--jade);
}
.hand-card.wrong {
  border-color: oklch(55% 0.18 25);
  background: oklch(96% 0.04 25);
  box-shadow: 3px 3px 0 oklch(55% 0.18 25);
}
/* Missed it. Red belongs to the pick that was wrong, and only there — marking
   the answer red too left two red cards and nothing saying which was which.
   The fake is simply drawn heavier: it is the answer, not the mistake. */
.hand-card.revealed-fake {
  border-color: var(--ink);
  background: var(--panel);
  box-shadow: 3px 3px 0 var(--ink);
}
/* Found it: the same card is the player's own pick, so it reads as the right
   answer, not as the mistake. */
.hand-card.revealed-found {
  border-color: var(--jade);
  background: oklch(95% 0.04 155);
  box-shadow: 3px 3px 0 var(--jade);
}
.hand-card.pointer-none { pointer-events: none; }

.hand-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--paper-deep);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--ink);
  margin-bottom: 10px;
  flex-shrink: 0;
}
.hand-card.selected .hand-letter {
  background: var(--stf);
  border-color: var(--stf-deep);
  color: #fff;
}
.hand-card.correct .hand-letter,
.hand-card.revealed-found .hand-letter {
  background: var(--jade);
  border-color: var(--jade-deep);
  color: #fff;
}
.hand-card.revealed-fake .hand-letter {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.hand-card.wrong .hand-letter {
  background: oklch(55% 0.18 25);
  border-color: oklch(42% 0.16 25);
  color: #fff;
}

/* ============================================================
   Hands, drawn as tiles — every level
   ============================================================ */
.stf-hand-name {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin-bottom: 8px;
}

/* One row, always. Fourteen tiles at their natural width overflow the card, so
   rather than wrapping they flex down to whatever fits and hold their shape
   through aspect-ratio — the way the Charleston draws a full hand. The gap
   between groups stays wider than the gap inside one, because the shape of the
   groups is what you are reading. */
.stf-tile-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: clamp(4px, 1.1vw, 11px);
}

/* Each group takes a share of the row proportional to how many tiles it holds,
   so every tile comes out the same width and the fourteen always land inside
   the card. Equal flex per group was the old bug — it sized a tile by how many
   were beside it (41px in a three, 32px in a four, same hand). A fixed width
   was the next bug: it did not know how wide the card was, so the row ran ~50px
   past the panel edge. --n is set inline by the renderer. */
.tile-group {
  flex-grow: var(--n, 1);
  flex-shrink: 1;
  flex-basis: 0;
  min-width: 0;
  display: flex;
  gap: 2px;
}

/* Every tile the same size, whatever group it is in. Letting the groups share
   the row equally sized a tile by how many were beside it — a three-tile group
   drew at 41px next to a four-tile group at 32px, in the same hand.

   Sized off the viewport rather than a percentage: a percentage resolves
   against the group, which has no width of its own, so it collapsed to 4px.
   The clamp keeps all fourteen plus their gaps inside the card at every width
   this game is played at. */
.stf-tile {
  flex: 1 1 0;
  min-width: 0;            /* let it shrink past the artwork's own width */
  width: auto;
  max-width: 54px;         /* never larger than the artwork */
  height: auto;
  aspect-ratio: 60 / 78;
  border-radius: 4px;
  position: relative;
  container-type: inline-size;
}
.stf-tile .tile-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.stf-tile .tile-num-label {
  position: absolute;
  bottom: 1px;
  right: 1px;
  font-size: 7px;
  line-height: 1;
  font-weight: 700;
  padding: 1px 2px;
}

.stf-hand-note {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-style: italic;
}

/* Highlighted "wrong" tile in hard mode reveal */
.tile-wrong {
  outline: 2.5px solid oklch(55% 0.18 25);
  outline-offset: 1px;
  border-radius: 4px;
}

/* ============================================================
   Submit button area
   ============================================================ */
.submit-area {
  text-align: center;
}

/* ============================================================
   Result screen
   ============================================================ */
.result-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  margin-top: 24px;
}
.result-actions .btn { width: 100%; max-width: 360px; text-align: center; }

/* ============================================================
   Responsive
   ============================================================ */
/* Hard mode: always stack vertically regardless of screen width */
.hand-cards.stacked,
.hand-cards.stacked .hand-card { flex: none; width: 100%; }

@media (min-width: 640px) {
  .hand-cards:not(.stacked) {
    flex-direction: row;
  }
  .hand-cards:not(.stacked) .hand-card {
    flex: 1;
  }
  .result-actions {
    flex-direction: row;
    justify-content: center;
  }
}

/* ============================================================
   Round progress, reveal and summary
   ============================================================ */
.stf-dots { display: inline-flex; gap: 6px; align-items: center; }
.stf-dot {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid var(--hairline); background: transparent;
}
.stf-dot.current { background: var(--stf); border-color: var(--stf-deep); }
.stf-dot.hit     { background: var(--jade); border-color: var(--jade-deep); }
.stf-dot.miss    { background: var(--hairline); border-color: var(--hairline); }
.stf-dots.big { justify-content: center; margin: 10px 0 4px; }
.stf-dots.big .stf-dot { width: 12px; height: 12px; border-color: var(--hairline); }
.stf-dots.big .stf-dot.miss { background: var(--hairline); border-color: var(--hairline); }

/* The answer lands under the hands rather than on a screen of its own, so the
   round carries on without a trip through a result page. */
.stf-reveal {
  border-radius: 10px; padding: 13px 16px; margin: 4px 0 14px;
  border-left: 3px solid var(--jade); background: var(--jade-soft);
}
.stf-reveal.miss { border-left-color: var(--stf); background: var(--paper-deep); }
.stf-reveal.hidden { display: none; }
.reveal-verdict { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 4px; }
.reveal-explain { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.55; }

/* The round's three answers, kept after the score. The explanation is the
   teaching, and it used to appear for a few seconds between questions and then
   be gone for good. */
.stf-recap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 18px;
  border-top: 1.5px solid var(--hairline);
}
.recap-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--hairline);
}
.recap-row:last-child { border-bottom: none; }
.recap-mark { font-size: 0.8rem; line-height: 1.5; flex-shrink: 0; }
.recap-mark.hit  { color: var(--jade); }
.recap-mark.miss { color: var(--ink-faint); }
.recap-body { min-width: 0; }
.recap-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.recap-q {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}
.recap-verdict { font-size: 0.88rem; font-weight: 700; color: var(--ink); }
.recap-why { font-size: 0.84rem; color: var(--ink-soft); line-height: 1.55; }

.stf-summary { text-align: center; padding: 28px 20px 18px; }
.summary-score { font-family: var(--font-display); font-size: 3rem; line-height: 1; }
.summary-label { font-size: 0.95rem; color: var(--ink-soft); margin-top: 6px; }

/* On a phone the one-row rule has to give. Fourteen tiles across 320px of card
   leaves 15px each, which is smaller than the artwork can carry — so the row
   wraps and the tiles get big enough to read instead. The Charleston's hand
   makes the same trade at the same width. */
@media (max-width: 640px) {
  .stf-tile-row { flex-wrap: wrap; row-gap: 6px; }
  .tile-group { flex: 0 0 auto; }
  .stf-tile { flex: 0 0 auto; width: clamp(30px, 10.5vw, 46px); }
}