/* ---------- DESIGN TOKENS (2026-08-27) ----------
13 values replace 41 of the 92 colours style.css used to hold, for 0 variables.
2 colours changed value on purpose; the other 11 are exactly what was already there:
--text-muted #9a9ab0 -> #cacae1 APCA Lc 48 -> 75
--text-faint #7a7a95 -> #b0b0cd APCA Lc 32 -> 60
Everything else that moved is a near-duplicate merging into the colour it was already imitating,
and every one of those merges came out of a measurement (CIE Lab dE inside its role's limit),
never a list somebody typed. scripts/palette/tokens.json holds the map and the dE for each.
Contrast is APCA (Lc), not WCAG: WCAG 2.x overstates contrast for dark pairs badly enough that a
"passing" ratio can be unreadable. Body text sits at Lc 93, read-me text at 75, labels at 60.
Labels (.meta-label, .sa-detail, .etab .cnt) deliberately take --text-faint, NOT --text-muted:
lifting them to the same step as the value made "Migratory Echoes" sink into its own annotations.
A label is meant to be skipped; an explanation is meant to be read.
Add a colour here, not inline. That is the whole point.
------------------------------------------------------------ */
:root {
--bg: #090810;
--bg-lift: #1c1a31; /* the far end of the ground wash, at the 1.23:1 measured off his reference */
--surface: #282731;
--surface-raised: #35343f;
--border: #70707e;
--border-subtle: #474754;
--text: #d8d8e1;
--text-muted: #9d9ca5;
--text-faint: #8e8e96;
/* ⛔ SHAPE: SQUARE. His call 2026-09-08 — "so maybe try the square and some pattern like the
lobby one first", with /lobby-design.html as the reference for the whole system.
⚠ ONE LEVER ON PURPOSE: he said "try", so every border-radius on the site reads this token and
going back to soft is one line, not a second sweep. The --r-4/--r-8 scale in the generated
block below is kept because scripts/geom/build-geometry.mjs still names it. */
--r: 0;
/* ⛔ ELEVATION IS LIGHTNESS, NOT SHADOW — measured, not stylistic. On a near-black ground a shadow
is a dark thing on a dark thing: he could not see the four-step shadow scale at all, and he was
right. Each step is WHITE OVER THE GROUND at a fixed percentage (Material's dark-theme rule,
and what /lobby-design.html was built on):
--l0 #090810 0% the page itself (identical to --bg; named so the ladder reads as one)
--l1 #15141c 5% a resting block
--l2 #1d1c23 8% a raised block — ready, focused
--l3 #26262d 12% a FIELD. ⚠ A field is LIGHTER than what holds it, never sunk: "sunk" is a
light-mode idea and inverts on a dark ground.
⚠ --rule is a HAIRLINE, not a surface. Area is not in the contrast formula, so a value solved
to be seen as a 1px line is not the same value as a plane. */
--l0: #090810;
--l1: #15141c;
--l2: #1d1c23;
--l3: #26262d;
--rule: #24232c;
/* ⛔ THESE LIVE IN THE HAND-WRITTEN :root, NOT IN THE GENERATED BLOCK BELOW, AND THAT COST AN HOUR.
They were first written beside --r-4, which is INSIDE the block scripts/geom/apply-geometry.mjs
replaces on every run — so the next run deleted all six. Nothing errored: an undefined var()
makes its declaration invalid at computed-value time, so `background: var(--l2)` silently
became transparent and the settings panel rendered with no surface at all. ⚠ CSS HAS NO SYNTAX
ERRORS; only the screenshot showed it. */
--accent: #6364fe;
--special-fill: #9460b8;
--bad-fill: #c44f55;
--warn-fill: #ab6602;
--good-fill: #1d8742;
/* NAMED, NOT NEW (2026-09-25 cleanup): values the sheet already typed by hand in several places, each given one name.
Same values — nothing on screen changes. */
--hover-fill: #3b3a47; /* a control's hover plane */
--accent-hover: #8c8dff; /* an openable name under the pointer */
--on-tile: #0b0a12; /* the letter on an avatar tile */
--crown: #d9a63c; /* the host crown */
--accent-check: #52598f; /* native checkbox / range accent-color */
--accent-fill: #6265ed; /* the accent as a PLANE — white on it is 4.5:1 */
/* RESULT TINTS — one strength everywhere (his colour pass 4b, 2026-09-25): a row or seat washed with a result.
The history rows, the round's artist rows and the ready lobby seat all read these; hover is one fixed step up. */
--good-tint: rgba(29, 135, 66, .20);
--bad-tint: rgba(196, 79, 85, .20);
--good-tint-hover: rgba(29, 135, 66, .36);
--bad-tint-hover: rgba(196, 79, 85, .36);
--good: #06ff79;
--warn: #fc9800;
--bad: #fd0444;
--special: #b728fe;
}
/* ── The geometry scale ──────────────────────────────────────────────────────────────────────
ONE VALUE PER AXIS, and it is a standing rule, not a refactor: a page that invents its own
length is a bug. Generated by scripts/geom/build-geometry.mjs and applied by
scripts/geom/apply-geometry.mjs, which reverts rather than warns when the file disagrees
with the map. Before: 31 font sizes · 12 radii · 11 tracking values · 28 spacing values.
Type is a 1.2 scale anchored at 15px (fs-1=12px · fs-2=15px · fs-3=18px · fs-4=22px · fs-5=26px · fs-6=31px · fs-7=37px · fs-8=45px · fs-9=54px) — anchored there, not at 16,
because the mass of the app sits at 14.4px and anchoring at 16 would have shrunk it to 13px,
against his own report that 0.9rem reads too small.
⚠ Four em font-sizes and one glyph tracking value are deliberately NOT on the scale; they are
sized against their parent, not the root, and geometry.json names each one. */
:root {
/* type — ratio 1.2, anchored at 15px */
--fs-1: 0.75rem;
--fs-2: 0.9375rem;
--fs-3: 1.125rem;
--fs-4: 1.375rem;
--fs-5: 1.625rem;
--fs-6: 1.9375rem;
--fs-7: 2.3125rem;
--fs-8: 2.8125rem;
--fs-9: 3.375rem;
/* radius — one corner style, repeated */
--r-4: 4px;
--r-8: 8px;
--r-pill: 999px;
/* space — the 8-point grid, its half and its quarter */
--sp-2: 2px;
--sp-4: 4px;
--sp-8: 8px;
--sp-12: 12px;
--sp-16: 16px;
--sp-24: 24px;
--sp-32: 32px;
--sp-48: 48px;
--sp-64: 64px;
/* line-height — solid is a single-line control whose height comes from padding */
--lh-solid: 1;
--lh-ui: 1.35;
--lh-prose: 1.5;
/* tracking — four steps, clustered from what the approved lobby actually uses */
--track-tight: 0.02em;
--track-caps: 0.06em;
--track-wide: 0.1em;
--track-wider: 0.18em;
}
/* ---------- THE SITE FONTS ----------
Loaded from Google Fonts by a in every page's — `test/sitefont.test.js` fails if a
page forgets it, and a page that forgets it renders in the fallback and looks ALMOST right.
⛔ `font-synthesis: none` SHIPS WITH THIS AND IS NOT DECORATION. Without it the browser FAKES a
weight it was not given by smearing the nearest one, which is the distortion he was shown by
accident while comparing faces. Synthesis off means a missing weight renders as a real weight.
⚠ `system-ui` stays behind every stack, so a page renders in the OS font rather than in Times if
Google Fonts is unreachable.
⚠ Superseded 2026-09-08: this file used to carry Mitr as the single site font, plus a pinned
@font-face that remapped its 200 file onto weight 400 for the Thai unicode-range. Both are gone —
see the role block below for why Prompt makes that machinery unnecessary. */
/* ⛔ FOUR TYPE ROLES, PROVISIONAL — decided by him on /game-face.html over 2026-09-08, and marked
provisional because the last of them was chosen without a use pass. His words per role:
--font-display Bebas Neue "Display is also bebas" — buttons, labels, chrome
--font-numbers Bebas Neue "if tighter works then bebas" — scores, the 5/8 count, the countdown
--font-names Teko "Teko wins" — song title, card and scoreboard names
--font-body Prompt "let's try going with prompt" — credits, artists, everything read
⚠ THREE FAMILIES, THREE JOBS. One face doing every job is the clearest slop signal in type; the
separation IS the design. Verified on the real screen: exactly Bebas Neue, Teko and Prompt appear.
✅ THE MITR @font-face HACK IS GONE, and that is the point of Prompt. It used to remap Mitr's 200
file onto weight 400 for the Thai unicode-range so English and Thai matched in weight. Prompt
draws BOTH scripts itself, so there is no handover to patch — no unicode-range, no remap, no
per-character fallback anywhere in the body stack.
⚠ Prompt stays last in the display and names stacks, where it IS the Thai fallback: Bebas Neue and
Teko have no Thai glyphs, so a Thai title falls through to Prompt per character. Drop it from
those stacks and every Thai character in a name loses its face.
⚠ ITS WEIGHT THERE IS 500, MEASURED: stem width over letter height is the only cross-script measure
of thickness that works — Teko 600 is 22.7%, Prompt 500 is 23.6%, Prompt 400 is 19.1% and reads
visibly lighter than the Latin beside it.
⛔ NEITHER BEBAS NOR TEKO HAS FIXED-WIDTH DIGITS. Bebas advances `1` at 10.58 against `8` at 15.81
(34.2% spread). Any number that changes IN PLACE — the countdown, a live score, the 5/8 count —
must be laid out one digit per fixed-width cell, or the line shifts as it ticks.
⛔ AND NUMBERS TAKE PROPORTIONAL FIGURES: `font-variant-numeric: proportional-nums` is what closed
the gap he reported in Bebas `11` (80px -> 58.2px). ⚠ Set BOTH that and `font-feature-settings`
— `font-variant-numeric` BEATS `font-feature-settings` for the same feature, so setting only the
low-level property does nothing wherever `tabular-nums` is already declared. */
:root { color-scheme: dark; font-family: Mitr, system-ui, sans-serif; font-synthesis: none;
/* ⛔ TYPE FACES SETTLED 2026-09-18/19 (his calls): labels/tags = Bebas, big titles = Kanit
(dual-script — draws Thai where Teko couldn't), text = Mitr, numbers = Bebas. Sizes are a
later pass. Song NAMES are text, so those elements use --font-body — see the overrides below. */
--font-display: 'Bebas Neue', 'Arial Narrow', Mitr, sans-serif;
--font-numbers: 'Bebas Neue', 'Arial Narrow', Mitr, sans-serif;
--font-names: Kanit, system-ui, sans-serif;
--font-body: Mitr, system-ui, sans-serif; }
/* The `hidden` attribute is only a UA rule (display:none), so ANY author `display:` on the same
element silently beats it and the element stays on screen while the code believes it is gone.
That is exactly what happened to the /add YouTube preview card (.yt-preview is display:flex).
One defensive rule so `el.hidden = true` means hidden everywhere. */
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); }
/* ── THE GROUND WASH ─────────────────────────────────────────────────────────────────────────────
Aur, 2026-09-04, pointing at a game panel he likes: "maybe try doing the main colors/gradiant
based on this?" MEASURED off that image rather than eyeballed (scripts/palette/reference.json):
its four corners span 1.232:1 — brightest bottom-left, near-black bottom-right. That is a
vignette you feel, not a gradient you see, and its smallness is what keeps it clear of the
refusal list. `--bg-lift` is solved to that exact ratio, and carries more chroma than `--bg`
because the reference does too: its lit corner is chroma 0.055 against the dark corner 0.022.
⚠ A FIXED PSEUDO-ELEMENT, not `background-attachment: fixed`. That property renders against the
DOCUMENT box on iOS Safari rather than the viewport, so on a long /list it would stretch the
wash over thousands of pixels and read as a flat tint. A fixed layer is viewport-sized
everywhere and costs no scroll repaint.
⚠ `z-index: -1` puts it behind the page content but still ABOVE body own background, which is
why `body` keeps its flat `--bg` — that is the fallback if this layer is ever suppressed. */
/* ⛔ TWO SOURCES, NOT ONE, AND HIS REFERENCE HAS BOTH (Aur, 2026-09-04: "the gradiant only grouped
in the bottom left ... idk how to make the top right doesn't feels plain"). One radial left the
whole top-right at flat --bg. His four measured corners are NOT one glow — bottom-left Y 0.0121,
top-left 0.0088, top-right 0.0027, bottom-right 0.0004 — a bright bottom-left AND a lit top-left,
falling away to the right. So: the source he has, plus the top-left one he also has, weaker.
⚠ AND BOTH REACH FURTHER THAN HIS DO. His reference is a 1012x716 panel; this is a 1920x1080
screen, so the same relative geometry leaves a far larger flat region. The radii are widened
until nothing is more than one source away — which is what stops the top-right reading as plain
without lifting the whole page, the failure he named in the same breath ("making the screen too
bright and bland").
⚠ `color-mix` for the weaker source rather than a second token: it is the SAME colour at less
strength, and a token would invite it to drift into being a different one. */
/* ⛔ DIMMED ~45% — his 06:44 on the round ("wash. but still a little too bright"), and DESIGN.md makes the
round's ground every page's ground: the lit corner is --bg-lift mixed 55% back toward --bg. */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(150% 120% at 12% 112%, color-mix(in oklab, var(--bg-lift) 55%, var(--bg)) 0%, transparent 58%),
radial-gradient(130% 110% at 2% -12%, color-mix(in oklab, color-mix(in oklab, var(--bg-lift) 55%, var(--bg)) 62%, var(--bg)) 0%, transparent 55%),
var(--bg); }
#app { max-width: 560px; margin: 0 auto; padding: 16px; }
h1 { font-size: var(--fs-4); letter-spacing: var(--track-caps); }
/* Headings default to 700 in every UA and the display faces are single-weight — so without this the browser
would ask for a weight that is not there. `font-synthesis: none` above makes that fall back to the
real 600 rather than a smeared fake, and this line makes it deliberate instead of a fallback. */
h1, h2, h3 { font-weight: 600; }
/* ⛔ A FORM CONTROL DOES NOT INHERIT `font-family` — the UA stylesheet sets its own and that beats
anything the page inherits. This block set a `font-size` on `button` and never a family, so before
the site-font change EVERY button in RMQ rendered in the browser's default form font (measured: the
line-up buttons computed to `Arial` on Windows) while the text beside it was system-ui. Without
these `inherit`s the site font simply would not reach any button, input, select or textarea. */
button, input, select, textarea { font-family: inherit; }
button { background: var(--surface-raised); color: inherit; border: 1px solid var(--border); border-radius: var(--r); padding: var(--sp-12) var(--sp-16); font-size: var(--fs-2); cursor: pointer; }
/* ⛔ A FILLED BUTTON TAKES --accent-fill, NEVER --accent, AND IT NEEDS ITS OWN TEXT COLOUR.
`--accent` is solved to be READ ON the dark ground; as a plane it is bright, and `color: inherit`
then puts near-white text on it — "+ Create profile" came out pale-on-pale in the first screenshot
of the new palette. `--accent-fill` is the other half of the pair, solved so #fff on it is exactly
4.5:1. Two tokens, because one colour genuinely cannot do both jobs. */
button.primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--text); }
.players { list-style: none; padding: 0; }
.players li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border-subtle); }
.players li.dc { opacity: 0.4; }
/* ── The lobby / loading seat CARDS (his call 2026-09-06: "try making it a card") ──────────────────
Still ul.players > li, because main.js patchPlayers replaces the board BY THAT SELECTOR. `.pcards`
is what turns the rows into cards, so the old flat list is one class away if it ever has to come
back. The grid is auto-fill rather than a fixed count: four friends and ten both have to look
deliberate, and at 375px it collapses to one column on its own. */
.players.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
gap: var(--sp-8); margin: 12px 0; }
.players.pcards li { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto;
column-gap: var(--sp-8); align-items: center; padding: var(--sp-8); border: 1px solid var(--surface-raised);
border-bottom: 1px solid var(--surface-raised); border-radius: var(--r);
background: var(--surface); position: relative; }
.players.pcards .pav { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: var(--r);
position: relative; overflow: hidden; display: flex; align-items: center;
justify-content: center; font-size: var(--fs-3); font-weight: 500; color: var(--bg); }
.players.pcards .pav > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.players.pcards .pav.haspic { color: transparent; }
.players.pcards .sname { grid-column: 2; grid-row: 1; font-weight: 500; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; }
.players.pcards .shost { color: var(--text-muted); margin-right: 4px; }
.players.pcards .ssub { grid-column: 2; grid-row: 2; font-size: var(--fs-1); color: var(--text-muted); }
/* ⛔ THE EMPTY-LIST WARNING KEEPS ITS OWN COLOUR. It used to be the words "no songs yet" in a plain
row; on a card it still has to be the thing you notice BEFORE starting, or a friend contributes
nothing to the draw and nobody finds out until the songs are all his. */
.players.pcards .ssub.none { color: var(--warn); }
.players.pcards .badge { grid-column: 3; grid-row: 1; color: var(--accent); }
.players.pcards .score { grid-column: 3; grid-row: 2; font-variant-numeric: tabular-nums; }
.players.pcards li.isready { border-color: var(--accent); }
.players.pcards li.spect { opacity: 0.62; }
/* host controls stay out of the way until wanted. ⚠ On touch there is no hover, so they are always
shown there — the same rule .artist-fix-hint had to learn, and add-check A10 is its guard. */
.players.pcards .sacts { grid-column: 3; grid-row: 1 / span 2; display: flex; gap: 4px; align-self: center; }
@media (hover: hover) { .players.pcards .sacts { visibility: hidden; }
.players.pcards li:hover .sacts { visibility: visible; } }
.players.pcards .sacts button { padding: var(--sp-2) var(--sp-8); font-size: var(--fs-1); }
.badge { color: var(--good); }
.kick { background: none; border: 0; color: #ed898e; cursor: pointer; font-size: 0.95em; padding: 0 4px; margin-left: var(--sp-8); line-height: 1; }
.kick:hover { color: #ee8a80; }
/* give-host ★ — sits left of the kick ✕, muted until hovered so the row stays calm (it is rarer
than kick and far less destructive, so it must not shout) */
.givehost { background: none; border: 0; color: var(--text-faint); cursor: pointer; font-size: 0.95em; padding: 0 4px; margin-left: var(--sp-8); line-height: 1; }
.givehost:hover { color: #c9a043; }
.settings { display: grid; gap: 8px; margin-top: 12px; }
.settings label { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
/* ⛔ ONE WIDTH FOR EVERYTHING WAS WRONG IN BOTH DIRECTIONS (Aur, 2026-08-29, with a screenshot:
"number boxes are too long. why texts don't even have enough space to show full text").
90px is far more than a two-digit number needs and far less than `Random start point` or
`Song / Artist (S/A)` needs, so the numbers looked like text fields and the menus were clipped
mid-word. They are different controls answering different questions and they get different room:
a number box sized to its digits, a menu sized to its longest option and allowed to grow. */
.settings input, .settings select { background: var(--surface); color: inherit; border: 1px solid var(--border); border-radius: var(--r); padding: var(--sp-8); }
.settings input[type=number] { width: 5.5ch; text-align: center; font-variant-numeric: tabular-nums; }
.settings select { min-width: 12ch; max-width: 60%; }
.settings .hint { color: var(--text-muted); font-size: var(--fs-1); margin: -4px 0 0; }
.guessbox { position: relative; margin-top: 12px; }
.guessbox input { width: 100%; box-sizing: border-box; font-size: var(--fs-3); padding: var(--sp-12); background: var(--surface); color: inherit; border: 1px solid var(--border); border-radius: var(--r); }
/* z-index above the edge vote/settings tabs (40) so the open dropdown is never covered by them while
typing — the tabs sit at mid-screen on mobile and used to overlap the suggestion list. */
.dropdown { list-style: none; margin: 4px 0 0; padding: 0; position: absolute; width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); max-height: 40vh; overflow-y: auto; z-index: 45; }
/* Closing a dropdown empties the
but leaves it in the DOM — and a bordered box with no rows
still paints its 2px border, a hairline hanging under the search box (Aur's use-pass, /add).
:empty is exact here: replaceChildren() leaves no child nodes at all, not even whitespace. */
.dropdown:empty { display: none; }
.dropdown li { padding: var(--sp-8) var(--sp-12); cursor: pointer; }
.dropdown li:hover { background: #95a0f222; } /* faint: just "mouse is over this" */
/* the arrow-key selection is stronger + has a left accent bar, so it can't be mistaken for hover (d1) */
.dropdown li.active { background: #95a0f255; box-shadow: inset 3px 0 0 #646cad; }
.picked { color: var(--good); }
/* ADR-0006 S/A readout: the two verdict lines under the box. Never counts/totals. The confirmed
chips that used to sit here are gone (use-pass 2026-07-20) — each line names its own confirm. */
.sa-readout { margin-top: var(--sp-12); }
.sa-readout .sa-line { margin: 2px 0; font-size: var(--fs-3); }
.sa-readout .sa-line.done { color: var(--good); }
.answer-meta p { margin: 2px 0; }
.right { color: var(--good); } .wrong { color: var(--bad); }
/* S/A half-answer: amber, between the green tick and the red miss — it scored 0.5, and it must not
read as either extreme. The verdict breakdown beside it is quieter than the name it follows. */
.partial { color: #c9a043; }
.sa-detail { color: var(--text-faint); font-size: 0.85em; }
#volume { position: fixed; top: 12px; right: 12px; display: flex; align-items: center; gap: var(--sp-8); z-index: 3; opacity: 0.85; }
#mute { background: none; border: none; padding: 2px 4px; font-size: var(--fs-2); cursor: pointer; }
#conn { position: fixed; top: 0; left: 0; right: 0; background: #852030; color: var(--text); text-align: center; padding: var(--sp-8); z-index: 4; }
.warn { color: var(--warn); font-size: var(--fs-2); }
button.minor { margin-top: var(--sp-12); padding: var(--sp-8) var(--sp-16); font-size: var(--fs-2); }
.row.danger { margin-top: var(--sp-32); border-top: 1px solid #7e6d6d; padding-top: 12px; opacity: 0.8; }
button.minor { margin-left: 8px; }
/* ---------- LEFT-EDGE VOTE TABS (spec C) ---------- */
/* Skip / Return sit fixed to the left screen edge (vertically centred) so they show identically in
guessing AND reveal regardless of the guess box; collapsed = count pill only, hover/focus (desktop)
or touch (see the (hover:none) rule below) reveals the label. z-index below the settings drawer/
modals (spec A) but above the game. */
/* --edge-y is set by main.js from visualViewport = the centre of what is NOT covered by the on-screen
keyboard, in layout-viewport px (position:fixed measures against the layout viewport, which the
keyboard does not shrink). Unset — no visualViewport, or a page that doesn't set it — falls back to
plain 50%, i.e. exactly the old behaviour. */
.edge-left { position: fixed; left: 0; top: var(--edge-y, 50%); transform: translateY(-50%); z-index: 40;
display: flex; flex-direction: column; gap: var(--sp-12); transition: top .18s ease; }
/* ⛔ ON THE NEW GAME SCREEN, SKIP/RETURN ARE A ROW ON EVERY POINTER — his call 2026-09-06: "idc about
mobile … and it's skip has its own row fine? how would that overlap with anything?" The touch
layout below already did exactly this; this is the same treatment given to the desktop, which is
what the game-ui mockup drew and what stops there being two Skips.
⚠ It REVERSES the desktop half of "Skip is a fixed left-edge tab", and it is safe for the reason
the touch fix was: a control in normal flow cannot cover the answer box, so the whole overlay
problem (pressable vs covering, three bugs in a week) simply does not arise. "Never restore the
fixed overlay" is honoured, not bent — this moves FURTHER from the overlay, not back toward it.
⚠ Scoped to #app.gameflow. Any screen still drawing these tabs outside the new round keeps today's
behaviour, so nothing untested changes. */
#app.gameflow .edge-left { position: static; transform: none; flex-direction: row;
justify-content: center; gap: 0; margin: 0 0 var(--sp-12); border: 1px solid var(--border);
border-radius: var(--r); overflow: hidden; }
#app.gameflow .edge-left .etab { flex: 1 1 0; justify-content: center; border: 0; border-radius: var(--r);
box-shadow: none; }
#app.gameflow .edge-left .etab + .etab { border-left: 1px solid var(--border); }
/* ⛔ THE SHORT LABEL, and G8 is why. It measures `.labs` and refuses a strip whose words are
suppressed — "a segmented strip with the labels still suppressed is the old icon-nub row wearing a
border". My first attempt showed the LONG label instead (there is room on a desktop row) and G8 went
red for exactly the right reason. Two arguments settle it the same way: the mockup draws "» Skip",
and variant B is his pick with these words. **The test was left alone; the change was wrong.** */
#app.gameflow .edge-left .etab .lab { display: none; }
#app.gameflow .edge-left .etab .labs { display: inline; }
.etab { display: flex; align-items: center; gap: var(--sp-8); background: var(--surface); border: 1px solid var(--border);
border-left: 0; border-radius: var(--r); padding: var(--sp-12) var(--sp-16) var(--sp-12) var(--sp-12); margin: 0; cursor: pointer;
color: var(--text); box-shadow: 2px 2px 12px rgba(0,0,0,.35); font-size: var(--fs-2);
transition: border-color .18s, background .18s; }
.etab .ico { font-size: var(--fs-3); line-height: 1; }
.etab .lab { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
transition: max-width .22s ease, opacity .18s; }
.etab:focus-visible .lab { max-width: 160px; opacity: 1; }
/* the TOUCH label (variant B) — hidden everywhere except the touch block below, where it replaces
`.lab`. Desktop never shows both; see edgeTab() in render.js for why there are two. */
.etab .labs { display: none; white-space: nowrap; }
.etab .cnt { font-variant-numeric: tabular-nums; color: var(--text-faint); font-size: var(--fs-1);
background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); padding: var(--sp-2) var(--sp-8); }
.etab.skip.voted { border-color: var(--good); background: #1d3a25; } /* green once you've voted (#6) */
.etab.skip.voted .cnt { color: #90ad90; }
.etab.ret.voted { border-color: #926667; background: #271d1d; } /* reddish voted feedback */
.etab.ret.voted .cnt { color: #c99a9a; }
.etab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Hover ONLY where a pointer can really hover. On a touch screen :hover latches after a tap and
stays until you tap somewhere else — so un-voting left the skip button still green, and the label
stayed expanded, until you tapped elsewhere (Aur's iPad, 2026-07-27). The voted/unvoted colours
below are class-driven and unaffected; this is purely the pointer-feedback layer. */
@media (hover: hover) {
.etab:hover .lab { max-width: 160px; opacity: 1; }
.etab.skip:hover { border-color: var(--good); background: #16241a; }
.etab.ret:hover { border-color: #926667; background: #271d1d; }
}
/* touch devices have no hover → keep the tabs as compact icon (+count) nubs, NOT expanded labels:
the labels sat at mid-screen and overlapped the guess dropdown on a phone. A tap still votes/opens
(the whole nub is the button); the icon + count carry the meaning. */
@media (hover: none) {
.etab { padding: var(--sp-12) var(--sp-12); }
.etab .lab { max-width: 0; opacity: 0; }
/* ON TOUCH, SKIP/RETURN LEAVE THE FIXED OVERLAY AND JOIN THE PAGE (2026-07-27, the end of a
week-long series). A fixed mid-screen overlay cannot satisfy both of Aur's requirements at once:
it must be pressable, and it must not cover the answer box ("player can't see their typed
answers"). Every previous fix traded one for the other — hide it and you can't press it, show it
and it covers the box, and iPadOS gives no visualViewport signal to move it by. In normal flow
both are true unconditionally: the tabs occupy their own row ABOVE the guess box (that is their
DOM order in render()), so they cover nothing, they scroll into view with the focused input, and
they are always pressable. No focus events, no viewport maths, no device-specific behaviour.
Desktop keeps the fixed edge tabs — there is room there, and hover reveals the labels. */
.edge-left { position: static; transform: none; flex-direction: row; justify-content: center;
margin: 12px 0 4px; }
/* VARIANT B — ONE SEGMENTED CONTROL (Aur's pick, 2026-08-25, from /game-mockup.html?v=b). The two
votes are one decision with two halves — end this round early, end this game early — so they read
as one control rather than two loose chips floating above the answer box. Full width makes both
halves thumb-sized. He rejected A (the same row as two separate labelled chips) as looking buggy:
two differently-sized pills, centred, with a gap between them.
⚠ The strip owns the border; the segments must not, or the shared edge doubles. The voted colours
(.etab.skip.voted etc.) still apply — on touch they read as a FILLED HALF rather than a coloured
outline, which is the one thing this changes about the vote feedback. */
.edge-left { gap: 0; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.edge-left .etab { flex: 1 1 0; justify-content: center; border: 0; border-radius: var(--r);
box-shadow: none; padding: var(--sp-12) var(--sp-12); }
.edge-left .etab + .etab { border-left: 1px solid var(--border); }
/* the words come back. They were hidden ONLY because the row was a fixed overlay covering the guess
dropdown; in normal flow they cover nothing, and "Skip · 2/4" needs no learning where a bare ⏭
nub does. `.lab` stays hidden — `.labs` carries the short form that fits a half-width segment. */
.edge-left .etab .labs { display: inline; }
}
/* ---------- RIGHT-EDGE TABS (📜 history above ⚙ settings; mirror of the left vote tabs) ---------- */
.edge-right { position: fixed; right: 0; top: var(--edge-y, 50%); transform: translateY(-50%); z-index: 40;
display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-12); transition: top .18s ease; }
/* mirror of .etab: flush to the RIGHT edge, rounded on the left, label expands leftward (row-reverse) */
.edge-right .etab { border-left: 1px solid var(--border); border-right: 0; border-radius: var(--r);
padding: var(--sp-12) var(--sp-12) var(--sp-12) var(--sp-16); box-shadow: -2px 2px 12px rgba(0,0,0,.35); flex-direction: row-reverse; }
.edge-right .etab.open { border-color: #646cad; background: var(--bg); } /* accent when its panel is open */
/* MOBILE overlap: the keyboard used to cover these tabs, and the fix was to HIDE them while the guess
box had focus (`#app.typing`, and `:focus-within` before that). Deleted 2026-07-27 — three separate
bugs came out of that one idea, all of the same shape: a control that hides itself cannot be
pressed, and every version found a new way to hide at the wrong moment (the tap-eating
:focus-within, then auto-focus hiding them from the first frame of a round, then iPadOS's "hide
keyboard" key not blurring, which stuck them off for good). They now MOVE instead — see --edge-y
above and edgeCenterY in render.js. Nothing about them is focus-driven any more. */
/* ---------- SETTINGS DRAWER (spec A) ---------- */
/* right-side drawer over a dim (not blurred) backdrop, so the game stays legible while you flip a
toggle mid-round. z-index above the edge tabs (40) and game chrome. */
.drawer-back { position: fixed; inset: 0; z-index: 60; background: rgba(6,6,12,.5); }
.drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(370px, 90vw); z-index: 61;
background: var(--surface); border-left: 1px solid var(--border); box-shadow: -18px 0 50px rgba(0,0,0,.45);
padding: var(--sp-24) var(--sp-24); overflow-y: auto; box-sizing: border-box; }
/* animate ONLY on open (.opening), never on the re-renders a toggle triggers — else the panel
re-slides in on every interaction ("recalls" itself) */
.drawer-back.opening { animation: drawer-fade .15s ease; }
.drawer.opening { animation: drawer-slide .2s ease; }
@keyframes drawer-fade { from { opacity: 0; } }
@keyframes drawer-slide { from { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .drawer.opening, .drawer-back.opening { animation: none; } }
.set-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.set-head h2 { margin: 0; font-size: var(--fs-3); letter-spacing: var(--track-caps); text-transform: uppercase; }
.set-head-actions { display: flex; align-items: center; gap: 4px; }
.set-x { background: none; border: 0; color: var(--text-muted); font-size: var(--fs-5); line-height: 1; cursor: pointer; padding: 0 4px; }
.set-x:hover { color: var(--text); }
/* jump to the sibling right-drawer (settings ↔ history) without closing first */
.set-swap { background: none; border: 1px solid var(--border); border-radius: var(--r); color: var(--text-muted);
font-size: var(--fs-2); line-height: 1; cursor: pointer; padding: var(--sp-4) var(--sp-8); }
.set-sub { color: var(--text-faint); font-size: var(--fs-1); margin: 0 0 var(--sp-8); }
.set-group { font-size: var(--fs-1); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-faint);
margin: var(--sp-24) 0 var(--sp-2); display: flex; align-items: center; gap: 8px; }
.set-group::after { content: ''; flex: 1; height: 1px; background: var(--surface-raised); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); padding: 12px 0; }
.set-row + .set-row { border-top: 1px solid var(--border-subtle); }
.set-row .lbl { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.set-row .lbl b { font-weight: 600; font-size: var(--fs-2); }
.set-row .lbl small { color: var(--text-muted); font-size: var(--fs-1); line-height: var(--lh-ui); }
/* pill toggle — green "on" matches RMQ's ready/skip-voted green.
⛔ THE KNOB AND THE TRACK MUST NEVER BE THE SAME COLOUR, and this is a fix, not a preference
(Aur, 2026-09-05: "the button has no knob/indicator which side it's on"). It shipped correct in
4d6ce82 — a light grey knob #8a8aa3 on a dark #2b2b3d track — and the 13-token palette sweep
(f1409ca) mapped BOTH of them to var(--surface-raised). Two colours that were deliberately
different became one token, so the knob was invisible whenever the switch was off: the only thing
saying on-vs-off was the track going green, and a switch with no knob does not read as a switch.
⚠ THIS IS A DIFFERENT FAILURE FROM "a token solved for one role is wrong in another" — nothing
here is wrong for its role. The sweep MERGED two roles that had to stay apart, and a merge is
invisible in the diff (both lines just read `var(--surface-raised)`). --text-muted is the nearest
token to the original #8a8aa3 and keeps the palette closed. test/switchknob.test.js pins it. */
.sw { width: 46px; height: 27px; border-radius: var(--r); background: var(--surface-raised); border: 1px solid var(--border);
position: relative; cursor: pointer; flex: none; padding: 0; margin: 0; transition: background .18s, border-color .18s; }
.sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 21px; height: 21px;
border-radius: var(--r); background: var(--text-muted); transition: transform .18s, background .18s; }
.sw.on { background: #1d3a25; border-color: var(--good); }
.sw.on::after { transform: translateX(19px); background: var(--good); }
.sw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .sw, .sw::after { transition: none; } }
.vol { display: flex; align-items: center; gap: var(--sp-12); flex: 1; justify-content: flex-end; }
.vol input[type=range] { width: 130px; accent-color: var(--accent); }
/* the 📜 history drawer reuses the settings drawer shell but is WIDER — it holds a table you read.
The table keeps its own scroll region (sticky headers), sized to fill the drawer under the header. */
/* ── stickers: the picker drawer, the carried sticker, and the green/red zones ─────────────────────
The drawer reuses the settings shell, so a third right panel needed no new furniture.
⛔ NARROWER THAN THE HISTORY DRAWER, and that is his phone answer applied everywhere: "just make it
have less column". Fewer columns was never about bigger buttons — it was so the panel stops
covering the cards you are aiming at, which is the whole reason a picker on a phone was in doubt.
The cell stays put and the count follows the width, so the panel is narrow on every screen. */
.stk-drawer { width: min(320px, 92vw); }
.stk-head { margin: var(--sp-12) 0 var(--sp-8); }
.stk-q { width: 100%; }
/* ⛔ THE TILE IS DOUBLED — his call 2026-09-07: "make the emoji x4 (x2 both w and h)". 44 -> 88
is exactly twice in each direction, so the tile is four times the area.
⚠ THE GLYPH ITSELF SITS AT THE TOP OF THE TYPE SCALE (--fs-6, 31px) rather than at a literal 44px:
the scale is a closed set of six steps and test/visualsystem.test.js refuses any font-size that is
not one of them. Doubling the glyph exactly would mean ADDING a seventh step, which is a change to
the design system rather than to this panel — flagged to him rather than done quietly. */
.stk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
gap: var(--sp-4); max-height: calc(100dvh - 220px); overflow-y: auto; }
/* ⛔ EVERY TILE IS THE SAME SQUARE, WHATEVER IS IN IT. His report 2026-09-07: the `+` tile "isn't the
emoji square size yet — oh it's only when no emoji there yet", which is the whole diagnosis in his
own words. The tile had no height of its own, so the grid ROW was sized by its tallest item: beside
emoji at --fs-4 the `+` inherited a correct-looking row, and alone in the grid it set its own,
smaller one at --fs-3. `aspect-ratio` makes the tile square against the column instead, so nothing
depends on what happens to be next to it. */
.stk-item { font-size: var(--fs-6); line-height: var(--lh-ui); padding: var(--sp-4) 0; background: transparent;
border: 1px solid transparent; border-radius: var(--r); cursor: pointer; color: var(--text);
aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.stk-item:hover:not(:disabled) { background: var(--surface-raised); }
.stk-item:disabled { opacity: 0.35; cursor: default; }
.stk-cust img { width: 52px; height: 52px; object-fit: cover; border-radius: var(--r); display: block; margin: 0 auto; }
.stk-empty { color: var(--text-muted); font-size: var(--fs-1); margin: var(--sp-8) 0; }
.stk-bal { color: var(--accent); }
/* the upload tile — dashed, so it reads as "add" rather than as a sticker you could throw */
.stk-up { border: 1px dashed var(--border); color: var(--text-muted); font-size: var(--fs-3); }
/* The lobby's manage tile. ⛔ NOT A BUTTON — nothing is picked up outside a round, so the tile itself
does nothing and the only action is the ✕. `position: relative` is what the ✕ hangs off. */
.stk-manage { position: relative; cursor: default; }
.stk-del { position: absolute; top: 0; right: 0; margin: 0; padding: 0 var(--sp-4); line-height: var(--lh-ui);
background: var(--surface-raised); color: var(--text-muted); border: 1px solid var(--border);
border-radius: var(--r); cursor: pointer; font-size: var(--fs-1); }
.stk-del:hover { color: var(--bad); border-color: var(--bad); }
/* the balance pill on the tab, in the same slot the vote tabs put their count */
.etab.stk .cnt { color: var(--accent); }
/* the sticker riding the cursor. `position: fixed` on , so a rerender mid-carry cannot take it
away, and pointer-events: none so it never eats the click that drops it. */
#stk-carry { position: fixed; display: none; pointer-events: none; z-index: 1000;
font-size: var(--fs-8); transform: translate(-50%, -50%);
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)); }
#stk-carry img { width: 54px; height: 54px; object-fit: contain; border-radius: var(--r); display: block; }
#stk-carry.no { opacity: 0.4; }
/* ⛔ HIS RULE MADE VISIBLE: green where it can land, red where it cannot. The alternative was the
clamp doing it silently, which reads to the player as "I missed" — the outline teaches instead. */
/* ⛔ RED ONLY — his call 2026-09-07: "make it consistent … are we gonna make it no feedback(not
showing green) or showing red when not placeable?" Green on every card was noise, because almost
everywhere IS placeable; the only thing worth saying is where it will NOT go. So: no mark at rest,
red over the answer box. */
body.carrying .pcard { cursor: none; }
body.carrying .pcard.nozone { outline: 2px solid var(--bad); outline-offset: 1px; }
/* landed stickers. The layer is absolute inside the card, which is why .pcard is position: relative —
and it takes no pointer events, so a sticker can never block the card's own controls. */
.pcard { position: relative; }
/* ⛔ ABOVE EVERYTHING ON THE CARD, INCLUDING THE PICTURE. A sticker dropped on somebody's face
vanished — the avatar is a positioned, overflow-hidden box, so it painted over the layer. He hit
it immediately: "placing on pfp make it disappear (it went under it)". */
.pstk { position: absolute; inset: 0; pointer-events: none; overflow: hidden;
border-radius: var(--r); z-index: 5; }
.pstk-one { position: absolute; transform: translate(-50%, -50%); font-size: var(--fs-5); line-height: 1; }
.pstk-one img { width: 28px; height: 28px; object-fit: cover; border-radius: var(--r); display: block; }
.history-drawer { width: min(560px, 96vw); }
/* the resize grip on the drawer's LEFT edge — its only free edge, since it is docked right at full
height. ⚠ Wider than it looks: 4px of visible line inside a 10px hit area, because a 4px target is
a miss on a trackpad. `touch-action: none` or a drag on a touchscreen scrolls the panel instead. */
.drawer-grip { position: absolute; left: 0; top: 0; width: 10px; height: 100%; cursor: ew-resize;
touch-action: none; z-index: 2; }
.drawer-grip::after { content: ''; position: absolute; left: 3px; top: 0; width: 2px; height: 100%;
background: transparent; transition: background .15s; }
.drawer-grip:hover::after, body.resizing-drawer .drawer-grip::after { background: var(--accent); }
/* while dragging, nothing else on the page should select or hover */
.history-drawer { position: fixed; }
.history-drawer .history { margin: 12px 0 0; border: 0; border-radius: var(--r); }
.history-drawer .history-scroll { max-height: calc(100dvh - 150px); }
#volume input { width: 110px; accent-color: var(--accent); }
/* ⛔ HIDDEN BY DEFAULT, SHOWN ONLY IN A ROOM. It used to be visible in the markup and hidden by a
class that JS adds, so every refresh FLASHED it before the script ran — his report: "the volume
button is still appears during refresh". A control that must not appear yet cannot start visible;
the default has to be the safe state, and `body.inroom` is added by connect(). */
#volume { display: none; }
body.inroom #volume { display: flex; }
/* ⛔ AND NOT IN THE LOBBY — his call, carried by /lobby-design.html: nothing plays there, so the
slider asks for a level you cannot hear. It belongs to the round, where sound exists.
⚠ `body.inroom` is the wrong axis for this on its own: you are in the room the whole time. The
question is whether anything is AUDIBLE, and only the phase answers that. */
body.inroom:has(#app.lobby) #volume { display: none; }
/* ⛔ AND NOT ON THE END SCREEN — his spec for it is one sentence: "only the count down and no other
button" (2026-09-06). The song is over, so there is nothing left to set a level for.
⚠ IT WAS ALSO A COLLISION, not only a rule: `#volume` is fixed at top-right and the count tab is
in normal flow, so on a 391px phone the two overlapped by 85 x 22 px and the countdown read
through the word "Mute" (measured 2026-09-09). `#app.lobby` is NOT set on this screen — the end
screen is `#app.gameflow` with `.endview` inside it, which is why the lobby rule above misses it. */
body.inroom:has(#app.gameflow .gs.endview) #volume { display: none; }
/* the room-password gate as a full-screen takeover (index/list/library replaceChildren #app then
mount the box) — a centered, readable card for PC; /add's inline re-auth box keeps the base look */
/* ⛔ SURFACE 0 of the visual-system conversion (2026-09-08) — the first screen anyone ever sees,
and the cheapest possible proof the system works before a game screen depends on it.
⚠ FOUR ELEMENTS, and it stays four. "Plain" is fixed by the type system, not by adding to it. */
/* ═══ ENTRY SCREENS — the name box and the password gate share one shape ══════════════════════
⛔ THE NAME BOX IS THE ONE ALMOST EVERYONE SEES. A device that already has the room password
skips the gate, so `.passbox` is a first-visit-only screen and `#app.entry` is the real front
door. It carried NO class until 2026-09-08 and inherited generic styles.
⚠ His report on the old one: "the screen is way too small". #app is a 560px column, so a short
form sat marooned in a corner of a 1600px window. The entry screens leave that column: they
centre in the viewport and set their own width. */
#app.entry { max-width: none; width: 100%; box-sizing: border-box; min-height: 78vh; display: flex; flex-direction: column;
justify-content: center; align-items: center; padding: 0 var(--sp-24); }
#app.entry > * { width: min(520px, 100%); }
#app.entry h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-8);
letter-spacing: var(--track-caps); text-transform: uppercase;
margin: 0 0 var(--sp-24); line-height: var(--lh-solid); }
#app.entry .row { flex-wrap: nowrap; gap: var(--sp-8); align-items: stretch; }
/* a field is LIGHTER than its ground and carries no permanent outline — the edge appears on focus */
#app.entry input { flex: 1; min-width: 0; font-size: var(--fs-3); padding: var(--sp-12) var(--sp-16);
box-sizing: border-box; background: var(--l3); color: inherit;
border: 0; border-bottom: 2px solid var(--text-faint); border-radius: var(--r); }
/* the round's field: an underline, and the accent on focus (a box outline is a second edge) */
#app.entry input:focus, #app.entry input:focus-visible { outline: none; border-bottom-color: var(--accent); }
/* the one primary action on the screen, and the only accent fill on it */
#app.entry button { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-3);
letter-spacing: var(--track-caps); text-transform: uppercase; border-radius: var(--r);
border: 0; padding: var(--sp-12) var(--sp-24); margin: 0; display: flex; align-items: center; }
#app.entry .warn { font-size: var(--fs-2); margin-top: var(--sp-16); }
/* the escape hatch is a tertiary action: text, not a second button competing with Play */
#app.entry a { color: var(--text-muted); font-size: var(--fs-2); text-decoration: none; }
#app.entry a:hover { color: var(--text); text-decoration: underline; }
#app.entry > p { margin: var(--sp-24) 0 0; }
/* the entry is a fixed frame like every other page: no reserved scrollbar lane (it put the box 7.5px left of centre) */
html:has(#app.entry) { scrollbar-gutter: auto; overflow: clip; }
/* a message never pushes the screen: its line is always there (type-your-name entry, 2026-09-24) */
#app.entry .whomsg { min-height: 1.5em; }
/* the suggestions (his pick "3", 2026-09-24): a list that FLOATS under the name box — solid, never pushing the screen —
holding only the players whose names match what is typed, then "New player" for a name nobody has */
#app .enbox { position: relative; flex: 1; min-width: 0; display: flex; }
#app .enbox > input { width: 100%; }
#app .ensug { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin: var(--sp-4) 0 0; padding: 0; list-style: none;
background: var(--l3); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
#app .ensug:empty { display: none; }
#app .ensug li { display: flex; align-items: center; gap: var(--sp-12); height: 48px; padding: 0 var(--sp-12) 0 var(--sp-8); cursor: pointer; }
#app .ensug li + li { box-shadow: inset 0 1px 0 var(--rule); }
#app .ensug li.on { background: color-mix(in srgb, var(--l3) 80%, white 20%); }
#app .ensug .entile { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; position: relative;
overflow: hidden; font-family: var(--font-display); font-size: var(--fs-3); color: #fff; }
#app .ensug .entile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#app .ensug .enname { font-family: var(--font-names); font-weight: 500; font-size: var(--fs-3); min-width: 0; overflow-wrap: anywhere; }
#app .ensug .enlab { font-family: var(--font-display); font-size: var(--fs-2); letter-spacing: var(--track-wider); text-transform: uppercase;
color: var(--text-faint); width: 96px; flex: none; padding-left: var(--sp-4); }
#app > .passbox { margin-top: 16vh; text-align: left; max-width: 520px; margin-left: auto; /* the name box's width: one shape */
margin-right: auto; }
/* the heading is the DISPLAY face — this is the one line on the screen that is a title, not language */
#app > .passbox h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-7);
letter-spacing: var(--track-caps); text-transform: uppercase;
margin: 0 0 var(--sp-24); line-height: var(--lh-solid); }
#app > .passbox .row { flex-wrap: nowrap; gap: var(--sp-8); align-items: stretch; }
/* ⛔ A FIELD IS LIGHTER THAN ITS GROUND AND CARRIES NO PERMANENT OUTLINE. On a dark ground "sunk"
is the direction that makes a control vanish; the edge appears on focus, where it does a job. */
#app > .passbox input { flex: 1; font-size: var(--fs-3); padding: var(--sp-12) var(--sp-16);
box-sizing: border-box; background: var(--l3); color: inherit;
border: 0; border-bottom: 2px solid var(--text-faint); border-radius: var(--r); }
/* the round's FIELD (the port, 2026-09-23): an underline, the accent on focus — never a second box edge */
#app > .passbox input:focus, #app > .passbox input:focus-visible { outline: none; border-bottom-color: var(--accent); }
/* the one primary action on the screen, so it is the only accent fill on it */
#app > .passbox button { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-3);
letter-spacing: var(--track-caps); text-transform: uppercase;
padding: var(--sp-12) var(--sp-24); border-radius: var(--r); border: 0; margin: 0;
display: flex; align-items: center; }
#app > .passbox .warn { font-size: var(--fs-2); margin-top: var(--sp-16); }
.timerbar { height: 6px; background: var(--surface-raised); border-radius: var(--r); overflow: hidden; margin: 2px 0; }
/* #3 Extra Guess Time: the extra window's own bar (amber, audio off) + its label */
.timerbar.extra .fill { background: var(--warn); }
.timer-label { font-size: var(--fs-1); margin: var(--sp-4) 0 var(--sp-2); }
.timer-label.muted { color: var(--text-muted); }
.timer-label.extra { color: var(--warn); font-weight: 600; }
a { color: #95a0f2; }
/* ⛔ `min-width: 0` IS LOAD-BEARING, NOT TIDINESS. The UA stylesheet gives every