/* /fun/ — the game page. Loaded after ../play/brand.css (the synced brand
 * stylesheet — never edit that copy here), so every colour is a brand token
 * except the game's own signal colours below, which have a job to do: GO has
 * to be unmistakably green and nothing else on the page may be.
 *
 * Mobile-first: base rules are the phone; wider layouts are added with
 * min-width queries only. */

:root {
    --go:       #16a34a;  /* the only green on the page */
    --stop:     #dc2626;
    --amber:    #ff9f1c;
    --violet:   #7b2ff7;
    --teal-sig: #2ec4b6;
}

.fun__main {
    max-width: 1060px;
    padding-top: clamp(28px, 5vw, 56px);
    padding-bottom: clamp(48px, 7vw, 88px);
}

/* ---- hero ---- */

.fun__hero { text-align: center; margin-bottom: clamp(20px, 3vw, 32px); }
.fun__hero .eyebrow { display: block; margin-bottom: 6px; }
.fun__h1 {
    margin: 0;
    font-size: clamp(2.6rem, 9vw, 4.4rem);
    line-height: 1;
    font-weight: 800;
}
.fun__sub { margin: 10px 0 0; color: var(--muted); font-weight: 700; }
.fun__intro { margin: 14px auto 0; max-width: 46ch; }

/* A preview (Puzzle Creator's Play button): says nothing will be saved. */
.fun__preview {
    margin: 0 auto 18px;
    max-width: 60ch;
    padding: 10px 14px;
    border: 2px dashed var(--amber);
    border-radius: 12px;
    text-align: center;
    font-size: .95rem;
}

/* ---- layout: game, then board; side by side on a wide screen ---- */

.fun__layout { display: grid; gap: 20px; }
@media (min-width: 900px) {
    .fun__layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
}

/* ---- the game card ---- */

.game {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 18px 10px;
    position: relative;
    overflow: hidden;
}
.game::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: var(--rainbow);
}
@media (min-width: 560px) { .game { padding: 26px; } }

/* The hidden attribute must beat any component's own display rule (the
   result badge is inline-block, and showed as an empty pill without this). */
.fun [hidden] { display: none !important; }

/* intro */
.game__tagline {
    margin: 4px 0 14px;
    text-align: center;
    font-family: var(--font-hand);
    font-size: 1.7rem;
    color: var(--berry);
}
.rules { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.rules__item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    background: var(--paper-2);
    border-radius: var(--r-md);
    line-height: 1.45;
}
.rules__icon { font-size: 1.25rem; line-height: 1.2; flex: 0 0 auto; }
.game__start, .game__again {
    min-height: 60px;
    font-size: 1.35rem;
    letter-spacing: .04em;
}
.game__best { margin: 14px 0 0; text-align: center; font-weight: 700; }
.game__best strong { color: var(--berry); }
.game__hint { margin: 10px 0 0; text-align: center; color: var(--muted); font-size: .9rem; }
.game__error {
    margin: 14px 0 0;
    padding: 10px 14px;
    border-radius: var(--r-sm);
    background: var(--berry-tint);
    color: var(--berry-dark);
    font-weight: 700;
    text-align: center;
}

/* ---- the HUD ---- */

.hud {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
}
.hud strong { color: var(--ink); }
.hud__streak {
    padding: 0 10px;
    border-radius: var(--r-pill);
    background: var(--paper-2);
    transition: background .2s ease, color .2s ease;
}
.hud__streak.is-hot { background: var(--berry); color: #fff; }

/* ---- the stage: the whole tap target ---- */

.stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: clamp(280px, 52vh, 460px);
    padding: 20px;
    border-radius: var(--r-lg);
    background: var(--plum);
    color: var(--on-plum);
    text-align: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    outline: none;
}
.stage__text {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2.6rem, 12vw, 5.6rem);
    line-height: 1;
    letter-spacing: -.01em;
}
.stage__sub {
    min-height: 1.4em;
    font-weight: 800;
    font-size: clamp(1rem, 3.6vw, 1.3rem);
    letter-spacing: .04em;
    opacity: .9;
}

/* Signals change instantly — a fade would blur the moment being timed. */
.stage.is-intro   { background: var(--plum-2); }
.stage.is-wait    { background: var(--plum); }
.stage.is-wait .stage__text { animation: fun-breathe 1.6s ease-in-out infinite; }
.stage.is-go      { background: var(--go); color: #fff; }
.stage.is-stop    { background: var(--stop); color: #fff; }
.stage.is-amber   { background: var(--amber); color: var(--ink); }
.stage.is-violet  { background: var(--violet); color: #fff; }
.stage.is-teal    { background: var(--teal-sig); color: var(--ink); }
/* Green WORDS on the dark screen: the screen did not turn green. */
.stage.is-ghost   { background: var(--plum); color: #4ade80; }

.stage.is-verdict { background: var(--plum-2); }
.stage.is-verdict .stage__text { font-size: clamp(2.2rem, 10vw, 4.4rem); }
.stage.is-hit .stage__text { color: var(--yellow); }
.stage.is-bad { animation: fun-shake .35s ease; }
.stage.is-bad .stage__text { color: #ff8a8a; }
.stage.is-meh .stage__text { color: var(--on-plum-soft); }

@keyframes fun-breathe { 50% { opacity: .55; } }
@keyframes fun-shake {
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}
@media (prefers-reduced-motion: reduce) {
    .stage.is-wait .stage__text, .stage.is-bad { animation: none; }
}

/* ---- Higher or Lower: Chaos Edition ----
 * The panel is not one tap target here: two cards and two buttons on a light
 * ground. Mobile-first — the cards sit side by side even on a phone, because
 * "this one against that one" is the whole game. */

.stage--hl {
    background: var(--paper-2);
    color: var(--ink);
    cursor: default;
    padding: 12px;
    align-items: stretch;
    justify-content: flex-start;
    text-align: center;
}
.hl { display: flex; flex-direction: column; gap: 10px; }
.hl__top { min-height: 34px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; }
.hl__event, .hl__shield {
    margin: 0;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    font-size: .88rem;
    font-weight: 700;
}
.hl__event strong { font-weight: 900; letter-spacing: .04em; margin-right: 4px; }
.hl[data-event="lightning"] .hl__event { background: var(--yellow); color: var(--ink); animation: fun-pulse .8s ease-in-out infinite; }
.hl[data-event="swap"] .hl__event      { background: var(--violet); color: #fff; }
.hl[data-event="shield"] .hl__event    { background: var(--teal-deep); color: #fff; }
.hl__shield { background: var(--card); border: 1px solid var(--teal-deep); color: var(--teal-deep); }
@keyframes fun-pulse { 50% { transform: scale(1.04); } }

.hl__cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: 6px;
}
.hl__vs {
    align-self: center;
    font-family: var(--font-hand);
    font-size: 1.5rem;
    color: var(--berry);
}
.hl__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-height: 200px;
    padding: 12px 8px;
    background: var(--card);
    border: 2px solid var(--line);
    border-radius: var(--r-md);
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.hl__card--known { border-color: var(--teal); }
.hl__card--next  { border-style: dashed; border-color: var(--berry); }
.hl__cat { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hl__emoji { font-size: 2.2rem; line-height: 1.1; }
.hl__label { font-weight: 700; font-size: .92rem; line-height: 1.3; flex: 1; }
.hl__value {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.5rem, 6.5vw, 2.4rem);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.hl__card--next .hl__value { color: var(--berry); }
.hl__unit { font-size: .82rem; color: var(--ink-soft); min-height: 1.2em; }

.hl__card.is-revealed { animation: fun-flip .35s ease; }
.hl__card.is-hit     { border-style: solid; border-color: var(--go); background: #ecfdf3; }
.hl__card.is-hit .hl__value { color: var(--go); }
.hl__card.is-wrong,
.hl__card.is-timeout { border-style: solid; border-color: var(--stop); background: #fef2f2; }
.hl__card.is-wrong .hl__value,
.hl__card.is-timeout .hl__value { color: var(--stop); }
.hl__card.is-saved   { border-style: solid; border-color: var(--teal-deep); background: #effcf9; }
@keyframes fun-flip { 0% { transform: rotateY(90deg); } 100% { transform: none; } }

.hl__timer { height: 8px; border-radius: var(--r-pill); background: var(--paper-3); overflow: hidden; }
.hl__timer-fill { display: block; height: 100%; width: 100%; background: var(--berry); }
.hl__timer.is-low .hl__timer-fill { background: var(--stop); }

.hl__prompt { margin: 0; font-size: 1rem; }
.hl__prompt strong { color: var(--berry); }

.hl__buttons { display: flex; gap: 10px; }
.hl__buttons.is-swapped { flex-direction: row-reverse; }
.hl__btn {
    flex: 1;
    min-height: 64px;
    border: 0;
    border-radius: var(--r-md);
    font: inherit;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.2rem, 5vw, 1.6rem);
    letter-spacing: .02em;
    color: #fff;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform .1s ease, opacity .2s ease, box-shadow .2s ease;
}
.hl__btn--higher { background: var(--teal-deep); }
.hl__btn--lower  { background: var(--berry); }
.hl__btn:active:not(:disabled) { transform: scale(.97); }
.hl__btn:disabled { opacity: .45; cursor: default; }
.hl__btn.is-truth { opacity: 1; box-shadow: 0 0 0 4px var(--yellow); }
.hl__btn.is-picked:not(.is-truth) { opacity: .8; text-decoration: line-through; }

.hl__verdict { margin: 0; min-height: 1.5em; font-weight: 900; font-size: 1.05rem; }
.hl__verdict.is-hit { color: var(--go); }
.hl__verdict.is-wrong, .hl__verdict.is-timeout { color: var(--stop); }
.hl__verdict.is-saved { color: var(--teal-deep); }

@media (min-width: 560px) {
    .stage--hl { padding: 18px; }
    .hl__cards { gap: 12px; }
    .hl__card { min-height: 230px; padding: 16px 12px; }
    .hl__emoji { font-size: 2.8rem; }
    .hl__label { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .hl[data-event="lightning"] .hl__event, .hl__card.is-revealed { animation: none; }
}

/* ---- Memory Heist ----
 * A vault: the plum panel with gold trim. The loot sits in ONE row whatever
 * the count, because "4th from the left" and "side by side" have to mean one
 * thing — a wrapped row would make item 5 and 6 neighbours that do not look
 * it. The emoji shrink to fit (container query units) instead. */

.stage--mh {
    background: var(--plum);
    color: var(--on-plum);
    cursor: default;
    padding: 14px 5px;
    align-items: stretch;
    justify-content: flex-start;
    box-shadow: inset 0 0 0 3px rgba(255, 228, 94, .35);
}
.mh { display: flex; flex-direction: column; gap: 12px; }
.mh__banner {
    margin: 0;
    min-height: 1.5em;
    text-align: center;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .9rem;
    color: var(--yellow);
}
.mh[data-phase="intro"] .mh__banner { font-size: 1.05rem; padding-top: 24%; }
.mh__row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
    gap: 3px;
    container-type: inline-size;
}
.mh__slot {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 228, 94, .25);
}
.mh__loot {
    /* Fit the row: large for four items, still legible for ten. */
    font-size: min(2.8rem, calc(66cqi / var(--n, 5)));  /* an emoji glyph is ~1.3× its font size wide */
    line-height: 1;
}
.mh__slot.is-sealed { background: rgba(255, 255, 255, .03); }
.mh__slot.is-sealed .mh__loot { opacity: .45; filter: grayscale(1); }
.mh__slot.is-answer { background: var(--yellow); border-color: var(--yellow); }
.mh[data-phase="look"] .mh__slot { animation: fun-pop .25s ease both; }
@keyframes fun-pop { from { transform: scale(.6); opacity: 0; } }

.mh__timer { height: 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .12); overflow: hidden; }
.mh__timer-fill { display: block; height: 100%; width: 100%; background: var(--yellow); }
.mh__timer.is-low .mh__timer-fill { background: #ff8a8a; }
.mh[data-phase="intro"] .mh__timer, .mh[data-phase="reveal"] .mh__timer { visibility: hidden; }

.mh__question {
    margin: 0;
    min-height: 1.4em;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.15rem, 4.6vw, 1.5rem);
    line-height: 1.25;
    color: #fff;
}
.mh__options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mh__opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    position: relative;
    min-height: 76px;
    padding: 8px 6px;
    border: 2px solid transparent;
    border-radius: var(--r-md);
    background: var(--card);
    color: var(--ink);
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform .1s ease, background .2s ease, border-color .2s ease;
}
.mh__opt:active:not(:disabled) { transform: scale(.97); }
.mh__opt:disabled { cursor: default; }
.mh__opt-e { font-size: 1.9rem; line-height: 1.1; }
.mh__options.is-pairs .mh__opt-e { font-size: 1.6rem; letter-spacing: .1em; }
.mh__opt-t { font-weight: 700; font-size: .85rem; }
.mh__key {
    position: absolute;
    top: 5px;
    left: 8px;
    font-size: .72rem;
    font-weight: 800;
    color: var(--muted);
}
.mh__opt.is-right { background: #ecfdf3; border-color: var(--go); }
.mh__opt.is-wrong { background: #fef2f2; border-color: var(--stop); opacity: .85; }
.mh__verdict { margin: 0; min-height: 1.5em; text-align: center; font-weight: 900; font-size: 1.05rem; }
.mh__verdict.is-hit { color: #4ade80; }
.mh__verdict.is-wrong, .mh__verdict.is-timeout { color: #ff8a8a; }

@media (min-width: 560px) {
    .stage--mh { padding: 20px 18px; }
    .mh__row { gap: 8px; }
    .mh__opt { min-height: 88px; }
    .mh__opt-e { font-size: 2.3rem; }
}
@media (prefers-reduced-motion: reduce) {
    .mh[data-phase="look"] .mh__slot { animation: none; }
}

/* ---- DNA Match ----
 * A crime lab: the plum panel, the two samples as dark gel images, stacked
 * like the puzzle-book page on a phone and side by side when the stage is
 * wide enough to keep each one readable. The samples are hidden while the
 * call is made — "a screen with two buttons" — so it is memory, not a
 * side-by-side stare. */

.stage--dm {
    background: var(--plum);
    color: var(--on-plum);
    cursor: default;
    padding: 14px 8px;
    align-items: stretch;
    justify-content: flex-start;
}
.dm { display: flex; flex-direction: column; gap: 10px; container-type: inline-size; }
.dm__banner {
    margin: 0;
    min-height: 1.5em;
    text-align: center;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .9rem;
    color: var(--yellow);
}
.dm[data-phase="intro"] .dm__banner { font-size: 1.05rem; padding-top: 24%; }
.dm[data-phase="ask"] .dm__banner {
    padding-top: 10%;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 7vw, 2.4rem);
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
}
.dm__pair { display: grid; grid-template-columns: 1fr; gap: 8px; }
/* Stacked, both samples have to fit on one screen at once: each is capped
 * at about a third of the viewport's height (the gel is 400 × 240). */
.dm__sample { margin: 0 auto; width: 100%; max-width: calc(31vh * 400 / 240); }
@container (min-width: 600px) {
    .dm__pair { grid-template-columns: 1fr 1fr; }
    .dm__sample { max-width: none; }
}
.dm__sample figcaption {
    margin: 0 0 3px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--on-plum-soft);
    text-align: left;
}
.dm__gel svg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-sm);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
}
.dm[data-phase="intro"] .dm__pair,
.dm[data-phase="ask"] .dm__pair { display: none; }
.dm[data-phase="look"] .dm__gel svg { animation: fun-pop .2s ease both; }
.dm__spot { animation: dm-blink .5s ease-in-out 3 alternate; }
@keyframes dm-blink { from { opacity: .25; } }

.dm__timer { height: 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .12); overflow: hidden; }
.dm__timer-fill { display: block; height: 100%; width: 100%; background: var(--yellow); }
.dm__timer.is-low .dm__timer-fill { background: #ff8a8a; }
.dm[data-phase="intro"] .dm__timer, .dm[data-phase="reveal"] .dm__timer { visibility: hidden; }

.dm__calls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dm[data-phase="intro"] .dm__calls, .dm[data-phase="look"] .dm__calls { display: none; }
.dm__call {
    position: relative;
    min-height: 96px;
    padding: 10px 6px;
    border: 3px solid transparent;
    border-radius: var(--r-md);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.4rem, 6vw, 2rem);
    letter-spacing: .02em;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform .1s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}
.dm__call--match { background: var(--go); color: #fff; }
.dm__call--not { background: var(--stop); color: #fff; }
.dm__call:active:not(:disabled) { transform: scale(.97); }
.dm__call:disabled { cursor: default; }
.dm[data-phase="reveal"] .dm__call { min-height: 52px; font-size: 1.15rem; opacity: .35; }
.dm[data-phase="reveal"] .dm__call.is-right { opacity: 1; border-color: var(--yellow); }
.dm[data-phase="reveal"] .dm__call.is-wrong { opacity: .75; text-decoration: line-through; }
.dm__key {
    position: absolute;
    top: 6px;
    left: 9px;
    font-family: var(--font-body, inherit);
    font-size: .72rem;
    font-weight: 800;
    opacity: .75;
}
.dm[data-phase="reveal"] .dm__key { display: none; }
.dm__verdict { margin: 0; min-height: 1.5em; text-align: center; font-weight: 900; font-size: 1.05rem; }
.dm__verdict.is-hit { color: #4ade80; }
.dm__verdict.is-wrong, .dm__verdict.is-timeout { color: #ff8a8a; }

@media (min-width: 560px) {
    .stage--dm { padding: 18px 16px; }
    .dm__call { min-height: 120px; }
}
@media (prefers-reduced-motion: reduce) {
    .dm[data-phase="look"] .dm__gel svg, .dm__spot { animation: none; }
}

/* ---- Eavesdropping ----
 * A stakeout: the plum panel with the conversation as chat bubbles, one crook
 * on each side. The bubbles are plain while they are read — lighting up the
 * numbers would tell the player what to memorise — and only the replay after
 * a conversation's last question marks every fact (yellow) and strikes
 * through what was misheard. Options are full-width rows rather than a 2x2
 * because the claims ("4th floor · 2nd door on the left") are sentences. */

.stage--ed {
    background: var(--plum);
    color: var(--on-plum);
    cursor: default;
    padding: 14px 8px;
    align-items: stretch;
    justify-content: flex-start;
}
.ed { display: flex; flex-direction: column; gap: 10px; }
.ed__banner {
    margin: 0;
    min-height: 1.5em;
    text-align: center;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .9rem;
    color: var(--yellow);
}
.ed[data-phase="intro"] .ed__banner { font-size: 1.05rem; padding-top: 24%; }

.ed__chat { display: flex; flex-direction: column; gap: 8px; min-height: 2em; }
.ed[data-phase="intro"] .ed__chat:empty { display: none; }
.ed__line { display: flex; flex-direction: column; align-items: flex-start; max-width: 88%; }
.ed__line--b { align-self: flex-end; align-items: flex-end; }
.ed__who {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--on-plum-soft);
    margin: 0 10px 2px;
}
.ed__bubble {
    display: block;
    padding: 9px 14px;
    border-radius: 18px 18px 18px 4px;
    background: var(--card);
    color: var(--ink);
    font-weight: 700;
    font-size: clamp(1.05rem, 4.4vw, 1.3rem);
    line-height: 1.35;
}
.ed__line--b .ed__bubble { border-radius: 18px 18px 4px 18px; background: var(--yellow); }
.ed[data-phase="listen"] .ed__line { animation: fun-pop .2s ease both; }
.ed[data-phase="listen"] .ed__line:nth-child(2) { animation-delay: .05s; }
.ed[data-phase="listen"] .ed__line:nth-child(3) { animation-delay: .1s; }
.ed__fact { background: #ffe45e; color: var(--ink); border-radius: 4px; padding: 0 3px; }
.ed__line--b .ed__fact { background: #fff; }
.ed__fact.is-misheard { background: transparent; color: var(--stop); text-decoration: line-through; text-decoration-thickness: 2px; }
.ed__gone {
    padding: 18px 10px;
    text-align: center;
    font-weight: 800;
    color: var(--on-plum-soft);
    border: 2px dashed rgba(255, 255, 255, .18);
    border-radius: var(--r-md);
}
.ed__gone span { font-size: 1.6rem; vertical-align: middle; margin-right: 4px; }

.ed__timer { height: 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .12); overflow: hidden; }
.ed__timer-fill { display: block; height: 100%; width: 100%; background: var(--yellow); }
.ed__timer.is-low .ed__timer-fill { background: #ff8a8a; }
.ed[data-phase="intro"] .ed__timer,
.ed[data-phase="lead"] .ed__timer,
.ed[data-phase="reveal"] .ed__timer,
.ed[data-phase="replay"] .ed__timer { visibility: hidden; }

.ed__question {
    margin: 0;
    min-height: 1.4em;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.2rem, 5vw, 1.55rem);
    line-height: 1.2;
    color: #fff;
}
.ed[data-phase="lead"] .ed__question { animation: fun-pop .2s ease both; }
.ed__options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ed__options.is-long { grid-template-columns: 1fr; gap: 6px; }
.ed__opt {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 8px 10px 8px 30px;
    border: 2px solid transparent;
    border-radius: var(--r-md);
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-weight: 800;
    font-size: 1.02rem;
    line-height: 1.2;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform .1s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}
.ed__options.is-long .ed__opt { min-height: 46px; justify-content: flex-start; text-align: left; font-size: .98rem; }
.ed__opt:active:not(:disabled) { transform: scale(.98); }
.ed__opt:disabled { cursor: default; }
.ed[data-phase="lead"] .ed__opt { opacity: .45; }
.ed__key {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    font-size: .78rem;
    font-weight: 900;
    color: var(--muted);
}
.ed__opt.is-right { background: #ecfdf3; border-color: var(--go); }
.ed__opt.is-wrong { background: #fef2f2; border-color: var(--stop); opacity: .85; }
.ed__verdict { margin: 0; min-height: 1.5em; text-align: center; font-weight: 900; font-size: 1.05rem; }
.ed__verdict.is-hit { color: #4ade80; }
.ed__verdict.is-wrong, .ed__verdict.is-timeout { color: #ff8a8a; }
.ed[data-phase="replay"] .ed__verdict { display: none; }

@media (min-width: 560px) {
    .stage--ed { padding: 20px 18px; }
    .ed__opt { min-height: 66px; }
}
@media (prefers-reduced-motion: reduce) {
    .ed[data-phase="listen"] .ed__line, .ed[data-phase="lead"] .ed__question { animation: none; }
}

/* ---- round pips ---- */

.pips {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;   /* one pip per round, however many rounds */
    gap: 4px;
}
.pip {
    height: 10px;
    border-radius: var(--r-pill);
    background: var(--paper-3);
}
.pip.is-hit    { background: var(--go); }
.pip.is-held   { background: var(--teal-deep); }
.pip.is-early  { background: var(--stop); }
.pip.is-gotcha { background: var(--berry); }
.pip.is-miss   { background: var(--muted); }
.pip.is-saved   { background: var(--teal-deep); }
.pip.is-wrong   { background: var(--stop); }
.pip.is-timeout { background: var(--muted); }
.pips--result { margin: 18px 0; }
.pips--result .pip { height: 14px; cursor: help; }

.game__quit {
    display: block;
    margin: 14px auto 0;
    padding: 10px 14px;
    background: none;
    border: 0;
    color: var(--muted);
    font: inherit;
    font-size: .92rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

/* While a run is on, keep the sticky header from covering the panel on a
   short phone screen. */
body.is-playing .site-header { position: static; }

/* ---- results ---- */

#resultScreen { text-align: center; }
.result__label {
    margin: 6px 0 0;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--berry);
    font-size: .85rem;
}
.result__score {
    margin: 2px 0 6px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(3.4rem, 15vw, 6rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.result__badge {
    display: inline-block;
    margin: 0 0 12px;
    padding: 6px 14px;
    border-radius: var(--r-pill);
    background: var(--yellow);
    color: var(--ink);
    font-weight: 900;
    letter-spacing: .06em;
    font-size: .9rem;
}
.result__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 8px 0 0;
}
@media (min-width: 560px) { .result__stats { grid-template-columns: repeat(4, 1fr); } }
.result__stats div {
    padding: 10px 8px;
    background: var(--paper-2);
    border-radius: var(--r-md);
}
.result__stats dt { font-size: .78rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.result__stats dd { margin: 2px 0 0; font-weight: 900; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.result__rank { margin: 0 0 16px; font-size: 1.08rem; }
.result__rank strong { color: var(--berry); }

.save {
    margin: 0 auto 8px;
    max-width: 360px;
    padding: 16px;
    border: 2px dashed var(--berry);
    border-radius: var(--r-md);
    background: var(--berry-tint);
}
.save__label { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; margin-bottom: 10px; }
.save__row { display: flex; gap: 10px; justify-content: center; }
.save__input {
    width: 5.2em;
    min-height: 52px;
    padding: 6px 10px;
    border: 2px solid var(--ink);
    border-radius: var(--r-sm);
    background: #fff;
    color: var(--ink);
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 1.7rem;   /* ≥16px, so iOS does not zoom */
    font-weight: 800;
    letter-spacing: .25em;
    text-align: center;
    text-transform: uppercase;
}
.save__btn { min-height: 52px; }
.save__help { margin: 8px 0 0; font-size: .85rem; color: var(--ink-soft); }
.save__msg { min-height: 1.4em; margin: 6px 0 12px; font-weight: 700; }
.save__msg.is-ok { color: var(--teal-deep); }
.save__msg.is-err { color: var(--berry-dark); }

.result__actions { display: grid; gap: 10px; }
@media (min-width: 560px) {
    .result__actions { grid-template-columns: 1fr 1fr; }
    .result__actions .game__again { grid-column: 1 / -1; }
}
.result__actions .btn { min-height: 48px; justify-content: center; }

/* ---- leaderboard ---- */

.board {
    background: var(--plum);
    color: var(--on-plum);
    border-radius: var(--r-lg);
    padding: 22px 18px;
    position: relative;
    overflow: hidden;
}
.board::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: var(--rainbow);
}
.board__h { margin: 0; color: var(--on-plum); font-size: 1.6rem; }
.board__meta { margin: 4px 0 14px; color: var(--on-plum-soft); font-size: .92rem; }
.board__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.board__row {
    display: grid;
    grid-template-columns: 2.2em 3.4em 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .04);
    font-variant-numeric: tabular-nums;
}
.board__row:nth-child(1) { background: rgba(255, 228, 94, .16); }
.board__row.is-me { outline: 2px solid var(--yellow); }
.board__rank { text-align: center; font-weight: 900; color: var(--on-plum-soft); }
.board__who {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--yellow);
}
.board__score { font-weight: 900; font-size: 1.1rem; text-align: right; }
.board__avg { color: var(--on-plum-soft); font-size: .8rem; text-align: right; min-width: 4.5em; }
.board__empty { color: var(--on-plum-soft); padding: 10px 0; }
.board__note { margin: 14px 0 0; color: var(--on-plum-soft); font-size: .82rem; }

/* ---- how scoring works ---- */

.how {
    margin-top: 20px;
    padding: 14px 18px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}
.how__toggle {
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    min-height: 32px;
}
.how__list { margin: 12px 0 4px; padding-left: 1.2em; display: grid; gap: 6px; line-height: 1.5; }

/* ---- the Patreon brag band ---- */

.brag {
    margin-top: 24px;
    padding: clamp(28px, 5vw, 44px) clamp(20px, 4vw, 40px);
    text-align: center;
    background: var(--plum);
    color: var(--on-plum);
    border-radius: var(--r-lg);
    position: relative;
    overflow: hidden;
}
.brag::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: var(--rainbow);
}
.brag__h { margin: 0 0 10px; color: var(--on-plum); font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.brag__pitch { margin: 0 auto 22px; max-width: 44ch; color: var(--on-plum-soft); font-size: 1.05rem; }

/* The brand mark goes home, so on a phone the text link is dropped and the
   Patreon button keeps the bar to one row (as on /play/). */
@media (max-width: 559px) {
    .fun .nav-links.solo a:not(.btn) { display: none; }
}

/* ---- the members' access gate (index.php, when the edition has a code) ----
   A fixed overlay over the page; the game underneath never loads while it
   shows, so the blur is only decoration. */

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.fun.is-locked { overflow: hidden; }
.fun.is-locked .fun__main { filter: blur(6px); pointer-events: none; user-select: none; }
.gate {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(36, 17, 47, .72);
    overflow-y: auto;
}
.gate__card {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 30px 22px 24px;
    background: var(--card, #fff);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
    overflow: hidden;
}
.gate__card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: var(--rainbow);
}
.gate__card .eyebrow { display: block; margin-bottom: 6px; }
.gate__h { margin: 0 0 8px; font-size: clamp(1.5rem, 5vw, 1.9rem); }
.gate__lede { margin: 0 0 18px; color: var(--muted); }
.gate__form { display: grid; gap: 10px; }
.gate__input {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 10px 14px;
    font: inherit;
    font-size: 1.3rem;          /* ≥16px so iOS doesn't zoom */
    font-weight: 800;
    letter-spacing: .18em;
    text-align: center;
    text-transform: uppercase;
    border: 2px solid var(--line);
    border-radius: var(--r-md);
    background: #fff;
    color: var(--ink);
}
.gate__input:focus { outline: none; border-color: var(--berry); }
.gate__input[aria-invalid="true"] { border-color: var(--berry); }
.gate__btn { min-height: 48px; white-space: nowrap; }
.gate__err { margin: 10px 0 0; color: var(--berry); font-weight: 700; }
.gate__join { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.gate__join-h { margin: 0 0 4px; font-weight: 800; }
.gate__join-p { margin: 0 0 14px; color: var(--muted); font-size: .95rem; }
.gate__patreon { min-height: 44px; }
@media (min-width: 560px) {
    .gate__form { grid-template-columns: 1fr auto; }
    .gate__card { padding: 36px 32px 28px; }
}