/* Game-specific styles on top of the kit tokens (--rr-*). */
  :root {
    --bg-1: #1a1210;
    --bg-2: #2b1a14;
    --ink: #f3e9e2;
    --ink-dim: #c9b8ad;
    --rock: #a4452c;
    --rock-hot: #d9603c;
    --go: #2fa84f;
    --go-glow: rgba(47, 168, 79, 0.35);
    --amber: #e8a13a;
    --panel: #241813;
    --panel-line: rgba(243, 233, 226, 0.12);
    --radius: 18px;
  }

  /* Game UI: no text selection, no double-tap zoom, no tap flash. */
  .game-shell {
    user-select: none;
    -webkit-user-select: none;
    background:
      radial-gradient(1200px 700px at 80% -10%, rgba(217, 96, 60, 0.16), transparent 60%),
      radial-gradient(900px 600px at 10% 110%, rgba(164, 69, 44, 0.12), transparent 55%),
      linear-gradient(160deg, var(--bg-1), var(--bg-2));
  }

  .game-scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--rr-space-3);
    /* Keep the Restart row clear of the home indicator and landscape notch. */
    padding-right: calc(var(--rr-space-4) + var(--rr-inset-right));
    padding-bottom: calc(var(--rr-space-4) + var(--rr-inset-bottom));
    padding-left: calc(var(--rr-space-4) + var(--rr-inset-left));
  }
  .game-scroll > * {
    width: 100%;
    max-width: 640px;
  }

  header { text-align: center; }

  h1 {
    font-size: clamp(1.8rem, 6vw, 2.6rem);
    letter-spacing: 0.04em;
    font-weight: 800;
  }
  h1 .dot { color: var(--rock-hot); }

  .tagline {
    color: var(--ink-dim);
    font-size: clamp(0.9rem, 2.6vw, 1.05rem);
    margin-top: 4px;
  }

  /* The reaction stage: one big clickable panel. Flex-grows to fill the
     screen. On 'done' the summary swaps in and fills the same space. */
  #stage {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--panel-line);
    border-radius: var(--radius);
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    outline: none;
    touch-action: manipulation; /* no double-tap zoom on the stage */
    transition: background-color 120ms ease, box-shadow 120ms ease;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  }
  #stage:focus-visible {
    box-shadow: 0 0 0 3px var(--rock-hot), 0 18px 50px rgba(0, 0, 0, 0.45);
  }

  #stage.waiting {
    background: linear-gradient(170deg, #8f2f24, #6d2018);
    animation: pulse-red 1s ease-in-out infinite;
  }
  #stage.go {
    background: linear-gradient(170deg, #35b95c, #1f7a3a);
    box-shadow: 0 0 70px var(--go-glow), 0 18px 50px rgba(0, 0, 0, 0.45);
  }
  #stage.early {
    background: linear-gradient(170deg, #b06a1e, #7c4310);
  }
  #stage.result {
    background: linear-gradient(170deg, #2c4a63, #1c3142);
  }

  @keyframes pulse-red {
    0%, 100% { box-shadow: 0 0 0 rgba(217, 96, 60, 0.0), 0 18px 50px rgba(0, 0, 0, 0.45); }
    50%      { box-shadow: 0 0 46px rgba(217, 96, 60, 0.45), 0 18px 50px rgba(0, 0, 0, 0.45); }
  }

  #round-label {
    position: absolute;
    top: 14px;
    left: 0;
    right: 0;
    color: rgba(243, 233, 226, 0.72);
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  #state-text {
    font-size: clamp(1.3rem, 5vw, 1.9rem);
    font-weight: 700;
    padding: 0 18px;
  }

  #readout {
    font-size: clamp(2.6rem, 12vw, 4.2rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    min-height: 1.2em;
    color: var(--ink);
  }
  #readout .unit { font-size: 0.45em; font-weight: 600; color: var(--ink-dim); }

  /* T571: Restart moved out of the header bar into this row under the stage. */
  .foot-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--rr-space-2) var(--rr-space-4);
  }
  .foot-row .btn { min-height: 44px; padding: 0 var(--rr-space-4); }

  #hint {
    color: var(--ink-dim);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-align: center;
  }
  #hint kbd {
    font-family: inherit;
    background: rgba(243, 233, 226, 0.1);
    border: 1px solid var(--panel-line);
    border-bottom-width: 2px;
    border-radius: 6px;
    padding: 1px 7px;
  }

  /* Summary panel: on 'done' it swaps with the stage and fills the same
     space, so the fixed shell never scrolls. Compact enough for 360x640. */
  #summary {
    flex: 1 1 auto;
    min-height: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--panel-line);
    border-radius: var(--radius);
    background: rgba(36, 24, 19, 0.7);
    padding: 14px 16px;
    text-align: center;
  }
  #summary.visible { display: flex; }

  #summary h2 { font-size: 1.1rem; letter-spacing: 0.05em; }

  .score-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 420px;
    margin-bottom: 6px;
  }
  .score-cell {
    background: rgba(243, 233, 226, 0.05);
    border-radius: 10px;
    padding: 8px 6px;
  }
  .score-cell .k {
    display: block;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 2px;
  }
  .score-cell .v {
    font-size: clamp(1.2rem, 5vw, 1.6rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
  }
  .score-cell .v small { font-size: 0.5em; font-weight: 600; color: var(--ink-dim); }

  #verdict { font-size: 0.95rem; margin-bottom: 4px; }
  #best-ever { font-size: 0.85rem; color: var(--ink-dim); margin-bottom: 8px; }

  .btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }