/* Game layout (T5). The look (fonts, colors, panels, buttons, chips, tiers, scoreboard) is the
   T1 brand kit in tokens.css; this file only arranges the screens and adds the few game-only
   bits, reading tokens.css vars. T6 owns the final polish. */

[hidden] { display: none !important; }
#app { max-width: var(--col, 480px); margin: 0 auto; }
body[data-screen="play"] { overflow: hidden; overscroll-behavior: none; }

/* engine/toast.js toggles .show; tokens.css styles .is-shown */
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- intro ---------- */
/* Top padding clears the mute button (absolute, top right) so it never sits on the card's corner. */
#intro { min-height: 100dvh; display: flex; align-items: center; padding: 58px 10px 16px; }
.intro-card { width: 100%; text-align: center; padding: 24px 14px 16px; }
.intro-day { margin: 4px 0 16px; }
.how-to { text-align: left; margin: 0 0 18px; padding-left: 26px; font-size: var(--t-body, 20px); line-height: 1.15; }
.how-to li { margin-bottom: 8px; }
.how-to em { font-style: normal; color: var(--c-accent); }
.intro-streak { margin: 10px 0 0; min-height: 1em; }

/* ---------- a play: scoreboard -> prompt -> field -> input, sized to the visual viewport ---------- */
#play {
  display: flex; flex-direction: column;
  height: var(--app-h, 100dvh); overflow: hidden auto;
}
#play .scorebar { flex: none; margin-bottom: 8px; }
#sb-clock { min-width: 4ch; }
#play .clockbar { flex: none; margin: 0 6px 6px; }
#sb-clock.is-ot { color: var(--c-text); }
#sb-clock.is-urgent { color: var(--c-accent-2); animation: fb-blink 1s steps(2) infinite; }
#sb-clock.is-spiked, .play-clock.is-spiked { color: var(--c-accent-3); }
.clockbar.is-spiked::before { background: var(--c-accent-3); animation: fb-blink 0.5s steps(2) infinite; }
#play .answer .spike-btn { flex: none; padding-left: 10px; padding-right: 10px; min-width: 4.2em; }
#play .answer .spike-btn.is-used { opacity: .45; }
#sb-togo { font-size: var(--t-body-l, 25px); }
/* The play clock (30s per prompt): top right of the prompt card, plus the bar under the scoreboard. */
#play .prompt-card__meta { right: var(--s3); justify-content: space-between; align-items: center; }
.play-clock { background: var(--c-outline); padding: 2px 6px 0; box-shadow: 0 0 0 2px var(--c-panel-edge); }
.play-clock { font-family: var(--f-body); font-size: var(--t-body-l, 25px); line-height: 1; color: var(--c-text); font-variant-numeric: tabular-nums; }
.play-clock.is-urgent { color: var(--c-accent-2); animation: fb-blink 1s steps(2) infinite; }
#play .prompt-card { flex: none; margin: 14px 6px 10px; padding: 18px 12px 10px; }
#play .prompt-card__text { font-size: var(--t-body-l, 25px); }
#play .prompt-card__sub { margin-top: 4px; }

/* The field is a fixed-height strip (Pete, 2026-10-15): it doesn't grow or shrink when the
   keyboard opens or closes, which was distracting. 220px fits above the keyboard on a normal
   phone; only a very short viewport (small phone with the keyboard up) squeezes it, never below
   140px. Spare height goes below, to the input / reveal area. */
.field-wrap { flex: 0 1 220px; height: 220px; min-height: 140px; position: relative; overflow: hidden;
  background: var(--c-field-1, #2f9e3f); margin: 0 0 4px;
  box-shadow: 0 -2px 0 0 var(--c-panel-edge), 0 2px 0 0 var(--c-panel-edge), 0 -4px 0 0 var(--c-outline), 0 4px 0 0 var(--c-outline); }
.field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }

/* Mute: a small icon button on the intro (top right) and over the field's crowd band. */
.intro-top { position: absolute; top: calc(6px + env(safe-area-inset-top)); right: 8px; z-index: 2; }
#intro { position: relative; }
.mute-btn--field { position: absolute; top: 4px; right: 4px; margin: 4px; width: 34px; height: 34px; z-index: 2;
  background: color-mix(in srgb, var(--c-panel) 85%, transparent); }
.mute-btn--field svg { width: 18px; height: 15px; }

.answer-area { flex: 1 0 auto; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
#play .answer { margin: 6px 6px 8px; }
#play .answer .input { min-height: 48px; }
/* type=search only so iOS Safari skips its contact AutoFill (name/email) bar; look like a plain box */
#answer::-webkit-search-decoration, #answer::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
#play .answer .btn { min-height: 48px; }
.answer .input.nudge { animation: fb-shake 240ms steps(4) 1; }
/* 320px phones: slimmer Snap/Spike so the answer box keeps ~150px for a name. */
@media (max-width: 359px) {
  #play .answer { gap: 4px; }
  #play .answer .btn { padding-left: 8px; padding-right: 8px; letter-spacing: 0.04em; }
  #play .answer .spike-btn { min-width: 0; padding-left: 6px; padding-right: 6px; }
}
/* Dark backing: red on palette A's royal blue was barely legible. */
#miss-hint { margin: 0 6px 4px; padding: 5px 8px 3px; line-height: 1.3; overflow-wrap: anywhere; background: var(--c-outline); }
#confirm-bubble { cursor: pointer; margin: 12px 6px 6px; padding: 8px 12px 6px; }
#confirm-bubble .bubble__v { font-size: var(--t-body-l, 25px); overflow-wrap: anywhere; }

/* The tier ladder: anchored to the bottom of the input/reveal area, only where there's room. */
.answer-area { display: flex; flex-direction: column; }
.ladder { margin-top: auto; padding: 14px 4px 4px; text-align: center; }
.ladder__k { margin-bottom: 6px; }
.ladder__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 2px; }
.ladder .tier { margin: 4px; }
.ladder .tier.is-off { opacity: .4; }
.ladder .tier.is-hit { outline: 2px solid var(--c-text); outline-offset: 3px; }
@media (max-height: 779px) { .ladder { display: none; } }

.reveal { margin: 8px 6px 10px; padding: 12px 12px 4px; text-align: center; }
.rv-tier .tier { margin: 4px 4px 4px 26px; }
.rv-tier .tier:not(.tier--pissmissile) { margin-left: 4px; }
.rv-detail { margin: 8px 0 6px; line-height: 1.1; overflow-wrap: anywhere; }

/* Short screens (keyboard open, iPhone SE): tighten the chrome so the field keeps its 140px. */
@media (max-height: 700px) {
  #play .scorebar { padding-top: 4px; padding-bottom: 4px; margin-bottom: 6px; }
  #play .scorebar__clock { font-size: var(--t-prompt, 30px); }
  #play .prompt-card { margin: 12px 6px 8px; padding: 14px 10px 6px; }
  #play .prompt-card__sub { display: none; }
  #play .prompt-card.prompt-card--final .prompt-card__sub { display: block; }
}

/* ---------- results ---------- */
#results { padding: 16px 10px 28px; }
.results .tier--sm { margin: 2px 2px 2px 0; }
.results__a .rr-you { color: var(--c-text-dim); }
.share-fallback { margin: 4px 6px 8px; width: calc(100% - 12px); min-height: 84px; resize: none; padding-top: 8px; }
/* The fallback (selected for copying) and the answer box (selected after a miss): keep the selected text readable (Chrome drew it black on navy). */
.share-fallback::selection, #answer::selection { background: var(--c-accent); color: var(--c-accent-ink); }

.answer-list { padding-top: 20px; }
.al-tabs { display: flex; width: calc(100% - 12px); }
.al-tabs > button { flex: 1; min-height: 40px; padding: 0; }
.al-tabs > button[data-tier="pissmissile"]:not([aria-pressed="true"]) { color: var(--c-accent); }
.al-prompt { margin: 10px 4px 6px; font-size: var(--t-body-l, 25px); line-height: 1; overflow-wrap: anywhere; }
.al-you { display: block; margin-top: 4px; font-size: var(--t-body, 20px); color: var(--c-text-dim); }
.al-search { margin: 6px 6px 8px; width: calc(100% - 12px); min-height: 44px; }
.al-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.al-chips .tier { cursor: pointer; appearance: none; border: 0; }
.al-chips .tier[aria-pressed="true"] { outline: 2px solid var(--c-text); outline-offset: 2px; }
.al-chips .tier:disabled { opacity: .35; cursor: default; }
.al-status { margin: 8px 6px 4px; min-height: 1em; }
.al-list { list-style: none; margin: 0 2px; padding: 0; max-height: 380px; overflow-y: auto; }
.al-item { display: flex; gap: 8px; align-items: center; padding: 6px 6px 4px; font-size: var(--t-body, 20px); line-height: 1; border-top: 2px solid var(--c-outline); }
.al-item:nth-child(odd) { background: var(--c-panel-2); }
.al-item.mine { background: var(--c-accent); color: var(--c-accent-ink); }
.al-emoji { flex: none; width: 1.3em; text-align: center; font-family: system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; font-size: 15px; }
.al-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.al-pct { flex: none; color: inherit; opacity: .75; font-variant-numeric: tabular-nums; }
.res-foot { text-align: center; margin: 12px 0 0; }
.intro-mode { margin-top: 10px; }
.results__foot .btn + .btn { margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  .answer .input.nudge { animation: none; }
}

.results__score[data-result="win"] { color: var(--c-accent); }
.results__score[data-result="loss"] { color: var(--c-accent-2); }
.results__line { width: 100%; margin: 4px 0 6px; text-align: center; }

/* "2 Minute Drill" is too wide for one line between the stars on a phone: let it wrap, balanced. */
.intro-card .wordmark__name { min-width: 0; text-align: center; text-wrap: balance; line-height: 1.1; }
.results__stats { flex-wrap: wrap; }
#res-score { font-size: var(--t-num, 56px); }