/* ============================================================
   GAME PAGE
   Spot the Misleading Chart — intro, play, reveal, end screens.
   ============================================================ */

@layer pages {

  .game-main {
    padding-top: 80px;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
  }

  /* Only the active screen is visible */
  .game-screen { display: block; flex: 1; }
  .game-screen[hidden] { display: none; }

  .game-screen__inner {
    padding-block: clamp(4rem, 12vh, 8rem);
    max-width: var(--content-max);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    align-items: flex-start;
    text-align: left;
  }

  /* ==================================================
     TITLE (shared between intro and end)
     ================================================== */
  .game-title {
    font-size: clamp(2.5rem, 8vw, 5.5rem);
    line-height: 1.02;
    letter-spacing: var(--track-tight);
    text-transform: uppercase;
    margin: 0;
    max-width: 14ch;
  }

  .game-lede {
    color: var(--mid);
    font-size: 1.0625rem;
    line-height: 1.55;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    max-width: 52ch;
  }
  .game-lede p { margin: 0; }

  .game-start { margin-top: var(--s-3); }

  /* ==================================================
     HUD
     ================================================== */
  .game-hud {
    padding-top: clamp(3rem, 10vh, 6rem);
    padding-bottom: var(--s-4);
    max-width: var(--content-max);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: var(--s-4);
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .game-hud__round,
  .game-hud__score { color: var(--mid); margin: 0; }

  .game-hud__dots {
    display: flex;
    gap: 6px;
    margin-left: auto;
  }
  .game-hud__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--line);
    transition: background var(--t-fast) var(--ease);
  }
  .game-hud__dot.is-correct { background: oklch(0.65 0.14 145); }
  .game-hud__dot.is-wrong   { background: oklch(0.65 0.18 25); }
  .game-hud__dot.is-current {
    background: var(--fg);
    transform: scale(1.4);
  }

  /* ==================================================
     ROUND
     ================================================== */
  .game-round {
    max-width: var(--content-max);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    padding-bottom: var(--section);
  }
  .game-round__question {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    max-width: 36ch;
  }

  /* ==================================================
     CHOICES (two chart cards, side by side)
     ================================================== */
  .game-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem, 2.5vw, 2rem);
  }
  .game-choice {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: clamp(1.25rem, 2vw, 2rem);
    text-align: left;
    border: 1px solid var(--line);
    background: transparent;
    cursor: pointer;
    transition:
      border-color var(--t-fast) var(--ease),
      background var(--t-fast) var(--ease),
      transform var(--t-fast) var(--ease);
  }
  .game-choice:hover {
    border-color: var(--fg);
    transform: translateY(-2px);
  }
  .game-choice:disabled {
    cursor: default;
    transform: none;
  }
  .game-choice.is-picked { border-color: var(--fg); }
  .game-choice.is-right  { border-color: oklch(0.62 0.14 145); background: oklch(from var(--fg) l c h / 0.02); }
  .game-choice.is-wrong  { border-color: oklch(0.62 0.18 25); opacity: 0.6; }

  .game-choice__label { margin: 0; color: var(--mid); }
  .game-choice__chart { width: 100%; aspect-ratio: 4 / 3; }
  .game-choice__chart svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  @media (max-width: 720px) {
    .game-choices { grid-template-columns: 1fr; }
    .game-choice__chart { aspect-ratio: 3 / 2; }
  }

  /* ==================================================
     REVEAL
     ================================================== */
  .game-reveal {
    margin-top: var(--s-4);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    animation: revealIn 0.4s var(--ease) both;
  }
  /* Force hidden attribute to win over .game-reveal display */
  .game-reveal[hidden] { display: none !important; }
  @keyframes revealIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .game-reveal__verdict {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
  }
  .game-reveal__badge {
    align-self: flex-start;
    font-size: 0.75rem;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--mid);
  }
  .game-reveal__badge.is-correct {
    border-color: oklch(0.62 0.14 145);
    color: oklch(0.45 0.12 145);
  }
  .game-reveal__badge.is-wrong {
    border-color: oklch(0.62 0.18 25);
    color: oklch(0.45 0.16 25);
  }
  :root.dark .game-reveal__badge.is-correct { color: oklch(0.75 0.14 145); }
  :root.dark .game-reveal__badge.is-wrong   { color: oklch(0.75 0.16 25); }

  .game-reveal__statement {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    line-height: 1.3;
    letter-spacing: -0.005em;
    max-width: 44ch;
  }
  .game-reveal__explainer {
    color: var(--mid);
    line-height: 1.6;
    max-width: 60ch;
  }
  .game-reveal__next { align-self: flex-start; margin-top: var(--s-2); }

  /* ==================================================
     END
     ================================================== */
  .game-end__best {
    color: var(--mid);
    margin-top: var(--s-2);
  }
  .game-end__actions {
    display: flex;
    gap: var(--s-3);
    margin-top: var(--s-3);
    flex-wrap: wrap;
  }

  /* ==================================================
     Reduced motion
     ================================================== */
  @media (prefers-reduced-motion: reduce) {
    .game-reveal { animation: none; }
    .game-choice:hover { transform: none; }
  }
}