/* Copyright (c) 2024-2026 Kilotronic LLC. All rights reserved. */
/**
* Shared styles for host and player UIs.
*
* Loaded by both host.html and play.html via .
* Contains CSS custom properties, reset, and component styles used by the
* shared rendering functions in game-core.js.
*/
/* Self-hosted brand fonts (woff2 vendored in /shared/fonts). Bricolage = display
(headings/wordmark via --font-display); Inter = body/UI (via --font-body). */
@font-face {
font-family: "Bricolage Grotesque";
src: url("/shared/fonts/bricolage-grotesque-800.woff2") format("woff2");
font-weight: 800;
font-style: normal;
font-display: swap;
}
/* One variable face covering every weight the UI asks for (400 body, 500/600
emphasis). It was previously declared as three single-weight faces at three
URLs — but Inter ships as ONE variable font (fvar axis wght 100-900), so those
three files were byte-identical and the browser downloaded the same 48 KB more
than once. The weight RANGE is what lets it instance any weight in between. */
@font-face {
font-family: "Inter";
src: url("/shared/fonts/inter-variable.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* A real italic cut, not a synthesized one. Inter shipped normal-only, so every
`font-style: italic` rule (the prompt-composer placeholder, the undone-play
feedback line) made the engine skew the roman itself — and a synthetic
oblique's ink leans outside the text run's advance box, which Safari then
clips (placeholder rendered as "Typ"). Drawn glyphs stay inside their box. */
@font-face {
font-family: "Inter";
src: url("/shared/fonts/inter-italic-400.woff2") format("woff2");
font-weight: 400;
font-style: italic;
font-display: swap;
}
/* Card/prompt face: used ONLY for the content the room reads (deck cards + the
hero prompt), so that surface reads as its own object against the all-sans
chrome. Scoped behind --font-card so the face is a one-line swap. */
@font-face {
font-family: "Averia Serif Libre";
src: url("/shared/fonts/averia-serif-libre-700.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* Material Symbols Rounded subsets (Apache-2.0), built by
scripts/subset_material_symbols.py:
- Filled (FILL=1/wght=600/opsz=20): 7 controller-chip + 4 feedback + 3 host
- Outline (FILL=0/wght=500/opsz=20): 4 feedback glyphs (ghost state)
Shared (menu-strategy 2026-07-30) so both apps can render icon glyphs
without duplicating the font. */
@font-face {
font-family: "Material Symbols Rounded";
font-style: normal;
font-weight: 600;
font-display: block;
src: url("/shared/fonts/MaterialSymbolsRounded-Filled.woff2") format("woff2");
}
@font-face {
font-family: "Material Symbols Rounded Outline";
font-style: normal;
font-weight: 500;
font-display: block;
src: url("/shared/fonts/MaterialSymbolsRounded-Outline.woff2") format("woff2");
}
/* Inline Material Symbol glyph for scattered chrome (host audio-unlock button,
finale eyebrow, time's-up confirmation; player hamburger menu). Inherits
the surrounding font-size and color so it scales with its context; the raw
codepoint is emitted with ligatures off. */
.ms-icon {
font-family: "Material Symbols Rounded";
font-weight: normal;
font-feature-settings: "liga" 0;
-webkit-font-smoothing: antialiased;
line-height: 1;
vertical-align: -0.15em;
}
/* Reset */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Form controls don't inherit font-family from the UA stylesheet — without this
they fall back to the browser default (Arial), so buttons/inputs would break
away from the brand type. */
button,
input,
textarea,
select {
font-family: inherit;
}
/* Placeholder text, every field, one rule. Dimmed and italic so a hint is never
read as a value already entered (playtest: "not clear the placeholder is a
placeholder").
This lived in play.css as a lone `.active-input` rule, which styled one of the
app's six placeholder fields — the join code/name inputs, the host feedback
textarea and the auth phone/code inputs kept the UA default: upright, and a
different grey in every browser. Styling the pseudo-element rather than a class
means a newly added field inherits the treatment instead of needing its own rule.
Typeface needs no declaration here: ::placeholder inherits from its field, and
the reset above already pulls form controls onto the brand face.
opacity: 1 because Firefox dims placeholders on top of the author colour. */
/* [hidden] must beat any component's display value, on BOTH surfaces. The UA
stylesheet sets `[hidden] { display: none }`, but ANY author rule with a
display wins on specificity — so the moment a control family declares
`display: inline-flex`, every `[hidden]` member of it silently un-hides.
That is not hypothetical: it shipped the glyph-button family and turned the
host's hidden card-flag button visible, caught by e2e, not by any unit test
(2026-08-01). This lived in play.css only, which is why the host had no
cover; it belongs where both apps load it. */
[hidden] {
display: none !important;
}
input::placeholder,
textarea::placeholder {
color: var(--text-dim);
font-style: italic;
opacity: 1;
}
/* Color palette and design tokens */
:root {
/* The one full-width CTA cap (ui-style.md Width: full-width is `width:100%`
capped, centered). It was previously the literal 320px repeated in three
places and scoped to #auth-buttons / #phone-auth / #collecting-panel, which
is how the config CTA (480px) and the shared tertiary ghost (432px) escaped
it. One token, applied on the buttons themselves.
Lives HERE rather than in host.css because its consumer `.btn--stack` is a
shared component, and the player app loads shared.css but never host.css —
so a player-app `.btn--stack` resolved `var(--cta-max)` to nothing, which
makes the whole max-width declaration invalid and falls back to `none`. An
unresolved token fails silently and looks like a layout bug, which is
exactly how it reached review (2026-08-16). */
--cta-max: 320px;
/* Phase-5 in-app tokens, bridged to the Spraoi brand (see ui/shared/tokens.css).
In-app theme is Neutral Charcoal: near-hue-neutral warm-dark surfaces, cream
text, exact coral accent, Bricolage display + Inter body. (Was dark plum — the
brand ink #2b1a2e promoted to every surface read "too purple" against the warm
brand; charcoal lets the coral/amber accents carry the color.) Token names are
unchanged so all consumers re-skin automatically. */
--bg-1: #211d1a; /* raised charcoal panel */
--bg-2: #141110; /* darkest charcoal — app background */
--surface: #262220; /* charcoal card */
/* Tells the UA every native control (scrollbars, form-field chrome,
autofill) should render in its dark variant — this file previously
declared none, so those rendered light against the charcoal app (audit
§6, 2026-08-08). Every page that loads this file inherits dark
(host/play/recap/admin/info); landing.css overrides this back to
`light` at :root (via `:root:has(body.landing)` — color-scheme is read
off the root element, so a body-scoped override alone would not take
effect) for landing, the only page that is light-themed. */
color-scheme: dark;
--text: var(--color-surface); /* cream #faf4ea */
--text-dim: #cdc3b8; /* warm muted cream — 9.0:1+ on the charcoal surfaces */
--accent: var(--color-accent); /* coral #ff5e3a */
--glow-blur: 34px;
/* Radius scale — the corner values hardcoded ~35x across host.css/play.css
(4px / 6px / 8px), formalized so a future rescale is a one-line edit
instead of a find-and-replace. --radius-btn/-card predate this scale;
kept as-is (they already have a single source of truth each). */
--radius-xs: 4px; /* compact rows/chips (menu item, avatar dropdown rows) */
/* Small boxes that are NOT buttons: text inputs, message/error panels, the
intro way-badge, and the .hw-btn keycap depiction. Was --radius-btn-sm,
when radius was a function of button size; that rule died with the
`--dialog` tier (2026-08-01) but the value kept seven users, so it is
renamed to what it actually is rather than deleted. */
--radius-sm: 6px;
--radius-md: 8px; /* standalone inputs/cards/buttons (mostly play.css) */
--radius-btn: 14px;
--radius-card: 16px;
/* FLOATING OVERLAY — a control that floats OVER content rather than sitting
in the layout: the enable-sound chip and the collapsed party-code chip.
Formalized as a family radius by the button survey's role layer (§5,
owner-confirmed 2026-08-20) rather than left as one control's one-off,
which is what it had been. 999px, not the box's exact half-height:
border-radius clamps to half the box on each axis, so it reads as "fully
round" at any height instead of silently reverting to a less-rounded
rectangle when the content grows. */
--radius-pill: 999px;
--shadow-card: 0 2px 12px rgba(0, 0, 0, 0.4); /* floating chip/toast/cue */
--shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.5); /* larger popover (account sheet) */
--font: var(--font-body); /* Inter */
/* Content face for deck cards + hero prompts (the words players read). Swap
this single token to retheme card/prompt content. */
--font-card: "Averia Serif Libre", Georgia, serif;
--font-card-weight: 700;
/* Button action colors — three-tier language matching the physical smiley
controller caps (see ui/shared/controller-profiles.js). Tier 1 game verbs are
colored (softened ~15% sat off the old neon, AA-verified on charcoal); Tier 2
equipment (timer + dice) share amber as a matched pair, told apart by icon;
Tier 3 navigation (back + menu) share warm gray. All hold a dark glyph
(--clr-on-accent) at >=6.4:1. Dice reads --c-timer in host.css so the amber
pair stays in sync. */
--c-proceed: #5c9df2; /* verb: go */
--c-positive: #66d685; /* verb: yes */
--c-negative: #f36b82; /* verb: no */
--c-timer: #eaa24a; /* equipment: timer + dice (amber pair) */
--c-back: #a59d94; /* nav: back + menu (warm gray pair) */
--c-menu: #a59d94;
/* Dark glyph on coral/amber accent fills (composer +, hw-btn labels).
Aliases --bg-2 — identical contrast on coral (6.19:1) to the old private
near-black. Keeps a semantic name so call sites read as "ink on fill,"
not "page background," without minting a near-black twin of --bg-2. Not
marketing --color-on-accent (white on light brand). */
--clr-on-accent: var(--bg-2);
/* Legacy aliases — kept for shared components not yet migrated */
--bg-card: var(--surface);
--text-muted: #b4a99e; /* warm muted cream — AA (>=4.5:1) on --bg-2 and --surface */
--accent-active: #e0492a; /* darker coral press state */
--border: #38322e; /* charcoal border */
--clr-scored: var(--c-proceed);
--clr-passed: var(--c-timer);
--clr-expired: var(--c-negative);
/* Frozen header timer bar (engine pause: menu pause, round transition) —
inert warm gray so a paused countdown never reads as live (game-core.js
timerBarColor's paused branch references this token). */
--clr-timer-paused: var(--c-back);
/* SCRIM DEPTH LADDER — every "dim the background" fill in the app, named so
the four depths read as a deliberate scale instead of unlabeled magic
numbers scattered through host.css. Values are unchanged from what they
replace; this only names them. */
--scrim-subtle: rgba(0, 0, 0, 0.3); /* #engine-warming badge backdrop */
--scrim-roll: rgba(0, 0, 0, 0.55); /* dice-roll overlay dim */
--scrim: rgba(0, 0, 0, 0.6); /* overlay-backdrop dim, shared host + player */
--scrim-cover: rgba(0, 0, 0, 0.95); /* menu turn-cover: opaque word-cover */
/* The "chosen" fill on a selectable card/choice control — .game-card.selected
and .choice-card:has(input:checked) declared this identically. */
--selected-fill: color-mix(in srgb, var(--accent) 10%, var(--surface));
/* Solid-fill destructive button (delete-account confirm, `.btn--danger`).
Distinct from --c-negative, which is tuned for text-on-dark contrast, not
a filled button with white label text — --c-negative there reads too
pale. */
--c-danger-fill: #b91c1c;
--c-danger-fill-hover: #dc2626;
/* Connection-banner / offline warning fill — amber, not the timer equipment
amber (--c-timer), which is tuned for icons on charcoal. */
--clr-warning-amber: #b45309;
/* Join-QR ink and paper. This is the one element in a dark console that stays
LIGHT: phone cameras assume dark modules on a light field, so an inverted QR
fails outright on some scanners. The QR is therefore brand-TINTED, not
brand-inverted — the brand's own light pair, plum ink on cream (14.9:1)
instead of black-on-white (21:1), a difference no scanner can notice.
Coral and marigold are 2.8:1 and 1.5:1 on cream, below even the 3:1 floor,
so they never touch a module: brand accent rides the card ring only, outside
the quiet zone. Holds up across every brand theme (14.2:1 worst case). */
--qr-dark: var(--color-ink);
--qr-light: var(--color-surface);
}
body {
font-family: var(--font);
background: var(--bg-2);
color: var(--text);
}
/* ── Beta badge ─────────────────────────────────────────────────────────
Quiet "BETA" pill beside the Spraoi wordmark on entry screens (host
sign-in + header, player join). Spraoi is in public beta; the pill is
persistent and decorative. Deliberately NOT rendered during active
gameplay — the in-game session header stays clean. Sized in `em` so it
tracks whatever heading it sits on.
The pill HANGS off the wordmark's right instead of sharing its inline
run (owner, 2026-08-02 playtest: the pill pushed "Spraoi" ~34px left of
true center on the sign-in wall). Mechanism: the .beta-badge-slot wrapper
is a zero-width inline-block, so the heading centers as if the pill were
absent, while the pill overflows visibly to the right. A wrapper rather
than position:absolute because the player join badge is a flex item — an
abs child's static position in a centered flex row is mid-row, not
after-the-title. */
.beta-badge-slot {
display: inline-block;
width: 0;
white-space: nowrap;
overflow: visible;
}
.beta-badge {
display: inline-block;
margin-left: 0.4em;
padding: 0.15em 0.45em;
border-radius: var(--radius-xs);
background: color-mix(in srgb, var(--accent) 18%, transparent);
color: var(--accent);
font-family: var(--font);
font-size: 0.42em;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1;
vertical-align: super;
}
/* Player join heading: the h1 carries data-i18n (its textContent is rewritten
on translate, so it can't hold a child span). The badge is a sibling in a
centered baseline row instead. */
.screen-title {
display: flex;
justify-content: center;
align-items: baseline;
/* No gap: the badge slot is zero-width, so any gap between h1 and slot
would shift the title off center by gap/2. The pill's spacing comes
from its own margin-left, which overflows the slot and costs nothing. */
gap: 0;
margin-bottom: 1.5rem;
}
.screen-title h1 {
margin-bottom: 0;
}
.screen-title .beta-badge {
font-size: 0.55rem;
vertical-align: baseline;
}
/* ── Button system ──────────────────────────────────────────────────────
Reusable base + role variants for host's setup/recap CTAs and overlay-
dialog buttons (see ui/web/host/host.html for consumers). `.btn` owns the
SKIN every button shares — a CENTERED label (so a full-width button can
never left-align its text against an empty half, the party-code-modal
Continue bug class), one radius token, focus ring, cursor, font,
transition; `.btn--` owns only the fill/border/color (`--primary` /
`--secondary` / `--neutral` / `--surface` / `--danger`). Every size tier
is retired now (`--lg` and `--dialog` — #1740, 2026-08-01; `--sm` —
2026-08-02, CSS dedup train): a button is the one standard 44px/r14 shape,
dialog or not, compact or not. Each
button's genuine per-instance SIZE/layout (extra padding, width, margin)
stays a thin modifier in the consuming surface's own CSS — sizes are
deliberately different (hero Start vs quiet Back), so the system unifies
the drift-prone skin without flattening the hierarchy. Specialized
input-affordance families (gameplay .cta-chip, hardware .hw-btn, gamepad
.gp-btn, keycap .hint-btn) are intentionally NOT part of this system. The
`.overlay-card button` element-selector safety net (host.css) was retired
once every overlay button carried an explicit role class (app-unification
Phase 2A Task 11, 2026-07-30). */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
border: none;
border-radius: var(--radius-btn);
/* Default size = the setup primary (intro Continue / collecting Start). */
min-height: 44px;
/* rem, so a raised OS text size grows the label and the padding around it;
the 44px floor deliberately stays px — see the unit note in ui-style.md. */
padding: 0.625rem 1.125rem;
font-family: var(--font);
font-size: 1.125rem;
cursor: pointer;
transition:
background 0.1s,
border-color 0.1s,
filter 0.1s;
}
.btn:disabled {
opacity: 0.35;
cursor: default;
}
/* Controller/keyboard selection ring (toggled by OverlayFactory). */
.btn.focused {
outline: 2px solid var(--text);
outline-offset: 2px;
}
/* Primary — solid coral CTA. Dark text on coral is 7.17:1 (AA). */
.btn--primary {
background: var(--accent);
color: var(--bg-2);
font-weight: 700;
}
.btn--primary:hover:not(:disabled),
.btn--primary:active {
filter: brightness(1.1);
}
/* The one exception to "Disabled — one model" (ui-style.md), and the reason
it exists: `.btn:disabled`'s opacity dim fades the fill and the label
together, which is harmless for a light label on a dark ground but fatal
here — the primary's label is dark INK chosen for bright coral, so the
pair converges on the page colour at 1.74:1 (measured; guarded by
disabled-contrast.test.js). The host reading "Waiting for words" on the
collecting screen could not read it (button survey 2026-08-19, §5 finding
c). So dim the FILL instead of the element: still unmistakably the coral
primary, still obviously inert, and the label comes back at 8.4:1. */
/* Literal first, mix second — and the literal is not decoration. Moving the
dim off `opacity` (supported everywhere) onto `color-mix()` means a browser
without it discards the fill as invalid at computed-value time and keeps
the rest of the block, `opacity: 1` included: the button would fall back to
its ENABLED fill at full strength and look live while being inert. Every
other color-mix() in this file degrades to "no tint"; this is the one whose
absence inverts the signal. disabled-contrast.test.js pins the pair to the
same colour so they cannot drift. */
.btn--primary:disabled {
opacity: 1;
color: var(--text);
background: #723729;
background: color-mix(in srgb, var(--accent) 35%, var(--surface));
}
/* Same defect, same cure, swept the same day: #fff on --c-danger-fill dimmed
to 0.35 composites to 2.48:1 — and `#delete-confirm-submit` ships disabled
until the operator types their identifier, so that unreadable state is the
whole time the account-deletion dialog is on screen. */
.btn--danger:disabled {
opacity: 1;
color: var(--text);
background: #59201f;
background: color-mix(in srgb, var(--c-danger-fill) 35%, var(--surface));
}
/* Secondary — the ONE cancel/back/dismiss-button treatment: a filled neutral
surface with a light label, sharing its proceed's box.
This is the button survey's keystone (2026-08-19 §5). Three overlapping
neutral classes used to split this role — `--secondary` (1.5px accent
outline), `--surface` (this fill) and `--neutral` (transparent `--text-dim`
outline) — so no one owned "the cancel look" and the same word wore three
of them: a bright full-white outline (Keep Timer), a near-invisible one
(Cancel, the Rules Done) and a dark chip (Back to Games). Outline is what
produced both the too-loud and the too-quiet case, because an outline's
weight is set by its stroke colour rather than by the role; a filled peer
cannot out-shout its primary when it shares the box and only the fill
differs. `--surface` and `--neutral` therefore retire into this one class
(btn-role-guard.test.js pins both the treatment and their absence).
The fill is a RAISED neutral, not `--surface` itself. `--surface` is the
card/dialog ground (`--bg-card`), so a `--surface` button sitting on a card
measured 1.000:1 against it with a `--bg-1` hairline at 1.061:1 — a "fill"
that is not a fill, which is how `#intro-back-btn` and the profile actions
read as captions rather than controls (measured in the running app,
2026-08-20). Lifting it 15% toward `--text` gives 1.58:1 on a card and
1.89:1 on the page ground, so the same one treatment reads on both. Literal
first, mix second: a browser without `color-mix()` drops the invalid
declaration and keeps the literal rather than falling through to no fill.
No border: the primary it pairs with has none, and "same box" is the whole
point — the tone does the delineating.
`:active` as well as `:hover`, and both LIGHTEN. Touch has no hover, and the
retired `--surface` darkened toward `--bg-1`, which on the page ground moved
the button toward its background — hover made it recede. */
.btn--secondary {
background: #46423e;
background: color-mix(in srgb, var(--text) 15%, var(--surface));
color: var(--text);
}
.btn--secondary:hover:not(:disabled),
.btn--secondary:active {
background: #55504c;
background: color-mix(in srgb, var(--text) 22%, var(--surface));
}
/* Same defect as `--primary`/`--danger` above, pre-empted: now that this role
is filled, `.btn:disabled`'s opacity dim fades fill and label together and
composites the pair to 2.7:1. Dim the FILL instead. No control ships
disabled in this role today — the guard exists because the failure is
silent, which is exactly how it reached production on the primary. */
.btn--secondary:disabled {
opacity: 1;
color: var(--text);
background: #332f2c;
background: color-mix(in srgb, var(--text) 6%, var(--surface));
}
/* Danger — the destructive confirm (delete-account submit). */
.btn--danger {
background: var(--c-danger-fill);
color: #fff;
}
.btn--danger:hover:not(:disabled) {
background: var(--c-danger-fill-hover);
}
/* Stack — a button in a STACKED column takes full width, capped (ui-style.md
Width: "auto width in a row, full-width in a stacked column"). Declared
three times over host.css (the collecting panel's actions, the config
launch CTA, the intro panel's actions) with an 8px/10px margin-top drift
between them — unified on 10px (owner call, 2026-08-02). Depends on
`--cta-max`, defined in this file's own `:root` — it moved here from
host.css when the player app became a user of this class, because an
unresolved custom property drops the cap silently. */
.btn--stack {
display: flex;
width: 100%;
max-width: var(--cta-max);
margin: 10px auto 0;
}
/* Detail rows (region-renderers.js _renderDetailLeaf, etc.) */
.detail-row {
margin: 1px 0;
}
.detail-scores {
margin: 4px 0;
}
/* Feedback toast animation. Was two mounts (host.js's region-payload toast
and play.js's own game-core.js mount, each with its own wrapper class);
docs/todo.md "One feedback dedup key" retired play.js's legacy mount, so
`.region-toast`/`.region-toast--linger` (moved here from host.css — they
are no longer host-only) are now the one wrapper both apps mount via
region-renderers.js's shared mountRegionFeedback. */
@keyframes feedback-fade {
0% {
opacity: 0;
}
15% {
opacity: 1;
}
70% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.region-toast {
animation: feedback-fade 1.5s ease-out forwards;
}
/* Turn-over beats (lingering/concluded) hold the toast up longer so the next
team never sees the previous team's confirmation before their turn starts
(owner decision 2026-08-01) — host.js-only today (play.js's mount omits
`linger`; see its call site comment for why). */
/* Turn-over beats (lingering/concluded) hold the toast up longer so the next
team never sees the previous team's confirmation before their turn starts
(owner decision 2026-08-01). The toast names the concluding word and then
gets out of the way; the SCREEN outlives it by design (20s linger, owner
2026-08-03), so this is deliberately much shorter than the hold rather than
matched to it. Keep in sync with _TOAST_LINGER_DURATION_MS in
region-renderers.js, which stands in for animationend under reduced motion. */
.region-toast--linger {
animation-duration: 5s;
}
/* Each semantic feedback color is declared ONCE, on renderPlayConfirmation's
own inner — the wrapper
(.region-toast, or a bare inline row) never re-applies it. */
.play-confirmation.detail-feedback-scored {
color: var(--clr-scored);
}
.play-confirmation.detail-feedback-passed {
color: var(--clr-passed);
}
.play-confirmation.detail-feedback-expired {
color: var(--clr-expired);
}
.play-confirmation.detail-feedback-undone,
.play-confirmation.detail-feedback-recycled {
color: var(--text-muted);
font-style: italic;
}
/* Score rows (renderPlayerScoreboardHtml) */
.score-row {
display: flex;
justify-content: space-between;
padding: 0.7rem 1rem;
margin-bottom: 0.3rem;
border-radius: var(--radius-xs);
background: var(--bg-card);
}
.score-row.active-team {
border-left: 3px solid var(--accent);
background: color-mix(in srgb, var(--accent) 20%, var(--surface));
}
.team-name {
font-weight: 500;
}
.team-score {
font-weight: 700;
font-size: 1.2rem;
}
/* Game-over display (renderGameOverHtml) */
.game-over-winner {
font-size: 1.5rem;
font-weight: 700;
color: var(--accent);
margin-bottom: 0.5rem;
}
.game-over-label {
font-size: 0.9rem;
color: var(--text-muted);
margin-bottom: 0.5rem;
}
/* Timer (renderPlayerTimerHtml) */
.timer-text {
font-size: 1.8rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.timer-text.ok {
color: var(--clr-scored);
}
.timer-text.warn {
color: var(--clr-passed);
}
.timer-text.expired {
color: var(--clr-expired);
}
.timer-bar {
height: 4px;
border-radius: 2px;
margin-top: 4px;
transition: width 0.2s linear;
}
#connection-banner {
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 6px;
text-align: center;
font-size: 0.85rem;
font-weight: 600;
background: var(--clr-warning-amber);
color: white; /* functionally white on amber warning bg: ~5:1 AA; --text drops to ~4.42:1 */
z-index: 100;
display: none;
}
#connection-banner.visible {
display: block;
}
/* Reduced-motion accessibility */
@media (prefers-reduced-motion: reduce) {
:root {
--glow-blur: 0;
}
/* Default-safe suppression: EVERY animated element finishes instantly
unless a more specific rule opts it into a bespoke treatment (a class
selector beats `*` at equal !important; `animation: none` shorthand
zeroes animation-name, which this duration-only rule can't resurrect).
Instant-finish rather than `animation: none` so `fill-mode: forwards`
end-states still apply — a fade-out completes (element ends hidden)
instead of freezing at its from-state. Before this rule, suppression
was an enumerated per-feature list (host.css reduced-motion blocks), so
a NEW animation silently kept running for reduced-motion users; now it
is suppressed by default.
Caveats: (1) `animation-delay` is untouched — a delayed animation
waits, then finishes instantly. (2) This author-!important rule BEATS
inline styles: JS-driven motion that must survive reduced motion
(functional time cues like #linger-bar's drain) must set its inline
style with priority "important" and say why. */
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
/* feedback-fade's 100% keyframe fades back to opacity:0 — an instant
single iteration would leave the turn's score/pass/undo confirmation
invisible right when it should read. Force it to hold at full opacity
instead. This selector used to also carry play.js's own legacy toast
class (retired by docs/todo.md "One feedback dedup key" — both apps
mount through the one shared wrapper now). */
.region-toast,
.region-toast--linger {
animation: none !important;
opacity: 1 !important;
}
}
/* Higher-contrast palette when the user requests more contrast (OS "Increase
contrast" / Safari "prefers-contrast"). Pulls dim and muted text up toward the
primary text color and brightens borders so card and zone boundaries stay
legible. Shared tokens, so both host and player inherit it. */
@media (prefers-contrast: more) {
:root {
/* Phase-5 tokens: text-dim already 10.8:1 vs --bg-2; raise further for
non-default backgrounds (--surface, --bg-1) where contrast is tighter */
--text-dim: #d8cfc4;
/* Coral already passes AA vs --bg-2; boost for surface bg */
--accent: #ff9478;
/* An operator who asked the OS for more contrast gets the maximum-
scannability QR and the brand tint deferred: 21:1 instead of 14.9:1. */
--qr-dark: #000000;
--qr-light: #ffffff;
/* Legacy aliases */
--text-muted: #cbc4ba;
--border: #7d756c;
}
/* Strengthen the focus indicator for keyboard operators. */
:focus-visible {
outline: 3px solid var(--text);
outline-offset: 2px;
}
}
/* Card slot panel (renderCardSlotHtml) — primary content for freeform
card-browse games (Categories, Fill in the Blanks). Shared by host + player. */
.card-panel {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1rem 1.25rem;
border-radius: var(--radius-card);
background: var(--surface);
text-align: left;
/* Lets the panel shrink below its content's natural height when the
.headline-fit flex ancestor genuinely doesn't have room for it (a tall
.card-list on a short/landscape viewport) instead of overflowing past
#phone-headline's overflow:hidden clip. A flex item's default min-height
is its content size, which is exactly the floor that needs to give here;
.card-panel-fill's own min-height below still wins where it applies. */
min-height: 0;
}
.card-label {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-dim);
}
.card-content-text {
font-family: var(--font-card);
font-size: clamp(1.5rem, 6vw, 3rem);
font-weight: var(--font-card-weight);
text-align: center;
}
/* Fill-in-the-blank slot: the renderer replaces runs of underscores with this,
so the blank reads as a deliberate coral fill-in rule rather than serif
underscores. Width scales with the (FitText-driven) font size via em. */
.card-blank {
display: inline-block;
width: 1.6em;
height: 0.08em;
/* In fill mode this span is a FLEX ITEM of .card-panel-fill
.card-content-text, so the default flex-shrink: 1 let it absorb the line's
overflow and the rule collapsed to 0-2px at phone widths — the blank IS
the prompt, so the card then read as "butter" instead of "_____ butter".
Desktop hid it: at 1280px the row has slack and nothing shrinks. Pin the
width so the phrase (which FitText is already sizing to the box) gives way
instead of the rule. Assumes ONE blank per phrase, which is what the 615
shipped cards have: two pinned blanks could together outrun the row, and
#phone-headline's overflow:hidden would clip rather than degrade. */
flex-shrink: 0;
margin: 0 0.12em;
/* Sit the fill-in rule near the text baseline — a line you'd write the answer
on — rather than floating mid-x-height. A rounded bar (not a border) so the
ends are gently rounded. */
vertical-align: baseline;
/* Pencil-line grey, not the coral accent (owner, 2026-08-16: "The orange +
white on black looks too much like the Blank Slate commercial game"). This
is a trade-dress concern, not a taste one, so the replacement has to leave
the orange family entirely — Marigold would not clear it. --text-dim reads
as the ruled line you would actually write an answer on, which is what the
mark is imitating anyway, and the accent stays reserved for things the
player can act on. */
background: var(--text-dim);
border-radius: 0.06em;
transform: translateY(0.04em);
}
/* Inline wrapper for a fill-mode phrase. Exists purely to give `.card-blank` an
inline formatting context to sit in: its parent `.card-content-text` is a
flex container in fill mode, and a flex item ignores `vertical-align`
outright. Carries no styling of its own — the phrase's type comes from
`.card-content-text`, and FitText still measures and scales that element. */
.card-phrase {
display: inline;
}
/* Fill mode (Fill in the Blanks phrase, Categories list): the card IS the
gameplay surface on phone. The panel grows to fill its parent; FitB's host
post-render hook scales .card-content-text via FitText. The clamp size above
is the floor while measuring; FitText overrides it on the host for string
content. Player surfaces also benefit from the centered layout. */
.card-panel-fill {
flex: 1;
align-items: center;
justify-content: center;
text-align: center;
/* min-height keeps the panel reasonably tall even when its parent is a
loose column — the FITB phone view sets the parent to grow, but this is
a defensive floor so the renderer doesn't collapse on misc layouts. */
min-height: 240px;
}
.card-panel-fill .card-content-text {
width: 100%;
/* Long unbroken pseudo-words ("supercalifragilistic_____") need the same
emergency wrap FitText's headline path uses. */
overflow-wrap: break-word;
/* Take exactly the column space the footer leaves, and centre the phrase in
it. The footer is a REAL in-flow row now, so fitting the phrase to the
whole panel would oversize it by the footer's height and the text would
bleed over the number; the host fits the phrase to THIS box instead. */
flex: 1 1 0;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
}
/* Single column, tight rows (2026-08-04): every card-list consumer is a
phone in someone's hand, host and player alike — there is no larger
display to spend width on, so the prior 2-column layout only bought
overflow on a narrow viewport (a two-digit marker like "10." could step
past its column edge, and a long item like "Things in a Classroom" forced
the row wide). One column keeps every item flush left. Item text no longer
sets or inherits a bold weight either — bolding all 12 rows left nothing
for the eye to land on. */
.card-list {
margin: 0;
/* The marker sits INSIDE the item box (not the padding gutter) so a
two-digit marker never steps past the list's left edge. */
padding-left: 0;
list-style-position: inside;
display: flex;
flex-direction: column;
gap: 0.15rem;
font-size: clamp(0.8rem, 3.5vw, 0.95rem);
font-weight: 400;
line-height: 1.25;
/* A 12-item list is content to scan, not a headline — opt out of the
host's inherited --font-display (Bricolage Grotesque, for short chrome
titles) the same way .card-content-text opts into its own face above.
The grotesque display face still reads heavy at 400, which is what made
"unbolded" not look unbolded on the host. */
font-family: var(--font-body);
/* Safety net, not the common case: #phone-headline clips (overflow:hidden)
and nothing rescues this list if it doesn't fit — the host's
shrink-to-fit sets px directly on the ancestor .headline-fit, and this
rule's own font-size doesn't inherit that (same as .card-label and
.card-label beside it, which has the same gap). flex:1 + min-height:0
make the list (not a vh guess) absorb whatever space .card-panel's flex
column actually has left after .card-label/.card-foot, at any viewport;
overflow-y:auto keeps every row reachable by scroll on a short/landscape
viewport (measured failing case: 390x480) instead of silently losing
rows 7-12 to the ancestor's clip — the same tradeoff #collecting-zone
already makes for its action buttons. 12 tight rows fit every normal
portrait phone (measured down to 375x667) with room to spare, so the
scroll never engages there. */
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
/* Categories list under fill: parent .card-panel-fill centres FitB's phrase
(align-items + text-align). Without this, the list shrinks to content
width (~half the panel on phone) and centres each row. Same width:100%
override .card-content-text already has; left align for scanable rows.
Declared AFTER .card-list so extractRuleBlock(".card-list {") still
hits the base rule (indexOf would otherwise match this selector first). */
.card-panel-fill .card-list {
width: 100%;
text-align: left;
align-self: stretch;
}
/* The desktop-host font-size ceiling for this list lives in host.css, not
here — .card-list is truly shared (region-renderers.js ships in both the
host and player manifests), so a wide-viewport override in THIS file would
also apply to the player app, which is never opened at a 700px+ viewport
in practice but would make the "host-only" framing structurally false.
Keeping it host.css-scoped makes that claim actually true, not just
measured-true-so-far. See host.css's own comment at the override for the
full reasoning (the clamp below is phone-primary; the vw term never
reaches its cap on a desktop host). */
.card-list li::marker {
/* De-emphasized relative to the item text: the number is a locator, not
content — --text-dim is the same muted token .card-label uses for
secondary text. */
color: var(--text-dim);
font-size: 0.9em;
}
/* The card's footer row — the host's rating thumbs, mounted into
.card-foot-fb. In flow at the panel's bottom edge: the rating is about this
card, so it belongs to the card and moves with it. `margin-top: auto` pins
it to the bottom of a taller panel without any measurement. The padding is
the thumbs' own breathing room and is reserved before host.js moves the row
in, so the panel does not reflow as the thumbs arrive. */
.card-foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
margin-top: auto;
padding-top: 0.5rem;
}
/* Mount point for the host's rating thumbs (#card-feedback-row is moved in
here every commit). Empty — and so zero-width — on every other surface. */
.card-foot-fb {
display: flex;
align-items: center;
}
/* .card-foot-num is gone (owner, 2026-08-16). The row survives as the thumbs
mount. NOT because the status region's "N of M" is the same fact — it is
not: that is the DRAW count and this was the browse position, and they part
company the moment you press Previous. See game-render.js's footer comment
for the measurement and docs/todo.md for the gap it leaves. */
/* Screen-reader only content */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
/* Both spellings on purpose: clip-path is the modern one, `clip` the
deprecated-but-universally-supported fallback older engines still honor.
This class is what the Orca screen-reader tests read, so it keeps belt and
braces rather than trading reach for tidiness. */
/* stylelint-disable-next-line property-no-deprecated */
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ── Site footer ──────────────────────────────────────────────────────
The single canonical footer (, ui/shared/site-footer.js):
one line — Spraoi by Kilotronic · Terms · Privacy. The brand and links
spans flow inline (~210px total, comfortable at a 320px viewport) and wrap
between words if a container is narrower. Base style is a centered, muted
block; each surface positions it via its own container rule. */
site-footer {
display: block;
text-align: center;
font-size: 0.75rem;
line-height: 1.6;
opacity: 0.5;
}
site-footer a {
color: inherit;
}
/* Matches kilotronic.com's own wordmark face (ui-monospace stack, roman —
the site never sets it italic) rather than borrowing the app's brand font. */
.site-footer__brand-link {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-style: normal;
}
/* ── Overlay backdrop + dialog card ──────────────────────────────────────
Shared chrome for every modal in both apps: host's menu/undo/timer/resume/
scoreboard/etc AND the player's in-game menu, leave-confirm, and profile
dialog all ride the same `.overlay-backdrop`/`.overlay-dialog` classes.
Each surface keeps its own per-dialog size deltas (min/max-width) as a thin
override alongside these rules.
Every modal is a native