/* 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 {
/* 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 */
--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;
--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 (#14110f)
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;
/* Legacy aliases — kept for shared components not yet migrated */
--bg-primary: var(--bg-1);
--bg-card: var(--surface);
--bg-input: var(--surface);
--text-primary: var(--text);
--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 */
--border-accent: var(--surface);
--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;
/* 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` / `--ghost` / `--surface` / `--danger`) and
`--sm` sets the one remaining compact size tier (`--lg` and `--dialog`
were both retired — #1740, 2026-08-01 — a dialog button is a standard
44px/r14 button now, same as every other non-gameplay control). 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;
padding: 10px 18px;
font-family: var(--font);
font-size: 18px;
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);
}
/* Secondary — accent-outlined (Share). */
.btn--secondary {
background: var(--surface);
border: 1.5px solid var(--accent);
color: var(--accent);
font-weight: 600;
}
.btn--secondary:active {
background: color-mix(in srgb, var(--accent) 15%, var(--surface));
}
/* Neutral — muted transparent outline (config Back, Add my entries). */
.btn--neutral {
background: transparent;
border: 1px solid var(--text-dim);
color: var(--text-dim);
}
.btn--neutral:active {
background: color-mix(in srgb, var(--text-dim) 15%, var(--surface));
}
/* Surface — the filled neutral dismiss/secondary inside overlay dialogs (as
opposed to --neutral's transparent outline used on the setup screens). */
.btn--surface {
background: var(--surface);
border: 1px solid var(--bg-1);
color: var(--text);
}
.btn--surface:hover {
background: var(--bg-1);
}
/* 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`, currently defined only in host.css's `:root` block; a future
player-app user of this class needs that token in scope too. */
.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 {
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: #b45309; /* amber warning; deliberate semantic one-off — no amber token */
color: white; /* functionally white on amber warning bg (#b45309): ~5:1 AA; --text (#f3ecff) 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;
--border-accent: #4a78b0;
}
/* 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;
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;
background: var(--accent);
border-radius: 0.06em;
transform: translateY(0.04em);
}
/* Fill mode (Fill in the Blanks): the phrase IS the gameplay surface — readable
across the room. The panel grows to fill its parent, and the host's
post-render hook scales .card-content-text via FitText to the panel's content
area. The clamp size above is the floor while measuring; FitText overrides
it on the host. 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-foot-num beside it, which have 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;
}
.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/.card-foot-num
use for secondary text. */
color: var(--text-dim);
font-size: 0.9em;
}
/* The card's footer row — draw-order number, plus the host's rating thumbs
mounted into .card-foot-fb. In flow at the panel's bottom edge: it is card
metadata, 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. */
.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 {
font-size: 0.9rem;
font-weight: 700;
color: var(--text-dim);
}
/* 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