/* Mobile-first and fluid. Most players arrive from a Discord link on a
phone, so the board is built to fit whatever viewport it lands in: its
eight attribute columns are `1fr` tracks, not fixed widths, and every
size that depends on them (row height, portrait, type, gaps) is a
clamp() that scales with the viewport between a phone floor and the
63rem desktop ceiling. Nothing scrolls sideways at any width — the
three breakpoints below only change *what a cell says* (name, full
value, or short code) and where the guess bar docks, never whether the
board fits. (The character column was pinned as a safety net until
2026-08-06; the sticky never engaged and its backing was visible, so
it went — see the note above `.cell.character`.)
Implements docs/design.md ("Guild Ledger"). The rules in §7 of that
document are load-bearing — read it before adding a shadow, a
gradient, a second accent colour or a new animation. */
/* Self-hosted, so the first painted frame already has the real
typeface. Google Fonts forced a choice between two visible glitches:
a render-blocking third-party stylesheet (nothing paints until two
extra origins answer, and module scripts can't run either) or a
non-blocking one (the page paints in the fallback stack and visibly
re-flows when the font lands, on every load, cache or not). Same
origin plus in each page's avoids both.
Variable, latin subset only — Japanese names fall back to the OS's
CJK fonts either way, as they always have. Files came from Google's
own css2 endpoint; re-download them, don't try to generate them. */
@font-face {
font-family: "Source Serif 4";
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url("fonts/source-serif-4-latin-var.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("fonts/manrope-latin-var.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
:root {
/* colour — light (default). Warm: a parchment page with a lifted
paper-white surface on it, warm ink, and a terracotta accent. Every
pair below is measured, not estimated. */
--bg: oklch(94% 0.018 80); /* warm parchment, the page itself */
--bg-raised: oklch(98% 0.012 80); /* dossier, cells, dropdown */
--ink: oklch(26% 0.02 55); /* body text */
--muted: oklch(50% 0.03 60); /* secondary text */
--line: oklch(84% 0.025 75); /* hairline borders (structural, not text) */
--line-inset: oklch(88% 0.02 78); /* softer interior hairline, between list rows on a filled surface */
--bg-sunken: oklch(96% 0.015 80); /* one step below --bg-raised: pills, sheet rows */
--radius-pill: 99px;
--accent: oklch(58% 0.135 40); /* terracotta, the one accent */
--accent-ink: oklch(98% 0.01 80); /* text on --accent */
/* verdict colours — saturated, each paired with a non-colour channel. */
--hit: oklch(62% 0.15 148); /* exact match */
--hit-ink: oklch(20% 0.05 150);
--partial: oklch(78% 0.135 85); /* partial match */
--partial-ink: oklch(28% 0.06 70);
--miss: oklch(87% 0.018 75); /* no match, dark enough to read against the page without a border */
/* The verdict green as *text* — `--hit` is a fill and too light to
read on the parchment, `--hit-ink` is the near-black meant to sit
on top of that fill. This is the third member of the same family,
for the one-line confirmations ("Copied", "Syncing") that are
saying yes rather than colouring a tile. Not a second accent: same
hue as every solved cell on the board. */
--ok-text: oklch(42% 0.09 150);
/* A real red, unlike anything else in the palette — deliberately off
the terracotta/green family every other token in this file shares,
since a validation error ("that username is taken") is not a game
verdict and shouldn't borrow the board's own colour language.
Still paired with a non-colour channel wherever it's used (the
alert-triangle icon, a shake), never colour alone. */
--error: oklch(52% 0.19 25);
--error-ink: oklch(98% 0.01 25); /* text on a filled --error surface */
/* The game's own red "!" disc (game_assets.py's UI_GLYPHS), shown
beside error messages. A §7 client-art carve-out like the
lock/win/lose/clear marks -- its red already matches the site's
`--error`, which is kept off the board's terracotta/green language
on purpose. Set as a `background-image`, not a font glyph: the
self-hosted faces are a latin subset, so "▲"/"⚠" would silently
fall back to whatever the device has. */
--icon-alert: url("data/sprites/ui/icon-alert.webp");
/* type — Source Serif 4 (display) and Manrope (UI), self-hosted from
site/fonts/ (see the @font-face rules above). Each stack keeps its
OS fallback and a matching CJK companion for Japanese names. */
--font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic",
"Noto Sans CJK JP", Arial, sans-serif;
--font-display: "Source Serif 4", Georgia, "Iowan Old Style",
"Times New Roman", "Hiragino Mincho ProN", "Yu Mincho",
"Noto Serif CJK JP", serif;
--step--1: 0.8rem;
--step-0: 1rem;
--step-1: 1.25rem;
--step-2: 1.5625rem;
--step-3: 1.953rem;
/* spacing (4px base) */
--sp-1: 0.25rem;
--sp-2: 0.5rem;
--sp-3: 0.75rem;
--sp-4: 1rem;
--sp-5: 1.25rem; /* the result card's own block inset */
--sp-6: 1.5rem;
--sp-8: 2rem;
/* radii — restrained on purpose, nothing pill-shaped */
--radius-sm: 0.5rem; /* inputs, buttons, board cells, cards */
--radius-md: 0.75rem; /* dropdown, result card */
--border: 1px solid var(--line);
/* the only shadow in the system: real elevation for a floating layer */
--shadow-float: 0 4px 14px oklch(30% 0.03 60 / 12%);
--dur-base: 180ms;
--dur-rise: 300ms; /* the result card and its scrim arriving */
--dur-flip: 620ms;
--flip-stagger: 150ms; /* mirrored in main.js — see REVEAL_MS */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-flip: cubic-bezier(0.45, 0, 0.35, 1);
/* Board metrics. Every one of these is fluid: the upper bound is the
desktop value and is reached at a 63rem (1008px) viewport, where the
page stops widening; the lower bound is what a 360px phone gets.
There is no `--cell` any more — the eight attribute columns divide
whatever is left of the board after the character column, so the
board is exactly as wide as the page at every size. */
--char-col: clamp(7.5rem, 15vw, 9.5rem);
--char-img: clamp(2.2rem, 6vw, 2.7rem);
--row-h: clamp(2.75rem, 8.25vw, 5.2rem);
--gap: clamp(0.15rem, 0.635vw, 0.4rem);
--cell-pad: clamp(1px, 0.4vw, 4px);
--cell-font: clamp(0.6rem, 1.49vw, 0.94rem);
--head-font: clamp(0.5rem, 1.35vw, 0.85rem);
/* Sized to sit above the value without crowding it: a tile is
--row-h tall, and this plus a line of --cell-font plus the gap has
to fit inside that at every width the two are shown together. The
narrow-screen override is in the 40rem block, where the mark is
alone in the tile and can afford to be bigger. */
--cell-icon: clamp(1.05rem, 2.6vw, 1.75rem);
/* Strength of the world-map wash behind the page — see `body::before`.
Trial value; the dark theme overrides it. */
--map-opacity: 0.2;
/* The page gutter, as tokens rather than literals, because the header
bar has to cancel them exactly to run edge to edge — see `.site-bar`.
Two places reading one value beats two places agreeing by accident.
`--pad-top` is overridden on `.game-page` at the phone breakpoint. */
--pad-x: clamp(0.5rem, 1.6vw, 1rem);
--pad-top: var(--sp-4);
}
/* Dark is opt-in, not OS-driven: light is the default for every visitor,
and this only applies once the toggle button (js/main.js) sets
data-theme on the root, restored from localStorage on repeat visits. */
:root[data-theme="dark"] {
/* Warm dusk, not soot: a dark clay slate that keeps the verdict
fills as saturated as they are in daylight. */
--bg: oklch(21% 0.018 55);
--bg-raised: oklch(27% 0.02 55);
--ink: oklch(93% 0.014 75);
--muted: oklch(70% 0.025 65);
--line: oklch(38% 0.025 55);
--line-inset: oklch(33% 0.02 55);
--bg-sunken: oklch(24% 0.02 55);
--accent: oklch(72% 0.13 45);
--accent-ink: oklch(16% 0.02 45);
--hit: oklch(66% 0.15 148);
--hit-ink: oklch(18% 0.05 150);
--partial: oklch(78% 0.13 85);
--partial-ink: oklch(26% 0.06 70);
--miss: oklch(37% 0.018 55);
--ok-text: oklch(80% 0.11 150);
--error: oklch(68% 0.19 25);
--error-ink: oklch(18% 0.03 25);
--shadow-float: 0 4px 16px oklch(0% 0 0 / 45%);
/* Lower than daylight: the map is a bright painting, and at the light
theme's strength it lifts the whole slate and greys it out. */
--map-opacity: 0.08;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
/* Side padding shrinks with the viewport: on a 360px phone the 1rem
desktop gutter is two thirds of an attribute column. */
padding: var(--pad-top) var(--pad-x) var(--sp-8);
background: var(--bg);
color: var(--ink);
font: var(--step-0) / 1.5 var(--font-ui);
min-height: 100vh;
/* A column, so the footer (its direct child on the picker; main's, on
a game page) can be pushed to the bottom of a short page instead of
trailing the content wherever that happens to end — see `footer`'s
own `margin-top: auto` below. Content taller than the viewport still
scrolls the ordinary way; nothing here locks or clips it. */
display: flex;
flex-direction: column;
}
/* Set by each page's own inline head script (before this file even
loads) when the saved site language is Japanese -- js/lang.js's
wireSiteLang() removes the class the moment it has applied that
language to the page's static strings, so this only ever covers the
gap between first paint and that module script actually running.
Without it, a returning JP reader saw every static string in English
for that whole gap, which on a page whose own script waits on a data
fetch first (daily.html, trivia.html, endless.html) was long enough
to be a real, reported flash -- not a same-tick formality. Hiding
the body rather than something narrower: the strings live all over
the page, and there is no single container that would cover them all
without also catching the "Loading…" spinner itself, which needs to
stay invisible for exactly as long as everything else does. */
html.lang-pending body {
visibility: hidden;
}
/* The world map as a wash behind the page. Tried and kept, 2026-08-06
(owner's call, after looking at it in a real browser). To pull it out,
delete this rule and the two `--map-opacity` declarations — nothing
else refers to it.
Fixed rather than scrolling, so it reads as a surface the page sits on
instead of a long image going past. `cover`, not `contain`: the map is
square and the viewport almost never is, so `contain` leaves the
image's own edges standing on the page as two hard vertical seams
against bare parchment. Covering crops the continent — on a phone,
down to a strip that is texture rather than geography — which is the
better trade for something meant to sit behind the text.
Opacity is a token per theme, since it needs different strength on
parchment than on slate, and is the first thing to reach for if this
fights the board. Sits behind everything and takes no clicks. */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
background: url("data/sprites/scenes/world-map.webp") center / cover
no-repeat;
opacity: var(--map-opacity);
pointer-events: none;
}
/* Wide enough that the eight attribute columns fit without scrolling on
a desktop; the reading-width sections below set their own narrower
measures. */
main {
max-width: 63rem; /* the board's natural width is ~62.3rem — see docs/design.md §4 */
margin: 0 auto;
position: relative; /* anchors .page-loader while characters.json loads */
}
/* A game page's footer lives inside `main` (the picker's is a sibling of
it), so `main` needs to be the flex column its own footer is pushed to
the bottom of. `flex: 1` claims the body's leftover height; nothing
here clips or locks it the way the ≤30rem tier below does, so this
keeps working the same way once that tier's own rules take over. */
.game-page main {
display: flex;
flex-direction: column;
/* `1 1 auto`, not the `1` shorthand: a 0 flex-basis let this clip its
own content instead of growing with it — opening the how-to panel
pinned main to the space free at load and let the panel spill past
it uncounted, so the page never gained the scroll height to reach
the overflow. `auto` sizes from content first and only grows into
leftover room after, which is what "taller than the viewport keeps
working" needs. */
flex: 1 1 auto;
}
/* Covers the guess box / board / result stack until js/main.js (or
endless-main.js) finishes its first fetch and render — those sections
exist in the markup immediately but sit empty until then, which read
as a broken page rather than a loading one. Removed via the `hidden`
attribute once state is ready; see docs/design.md §6. */
.page-loader {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sp-3);
min-height: 16rem;
background: var(--bg);
color: var(--muted);
font-size: var(--step--1);
}
.page-loader[hidden] {
display: none;
}
/* The same cover, holding a failed load instead of a pending one --
js/page-loader.js's showLoadError(). */
.page-loader-error {
max-width: 26rem;
text-align: center;
color: var(--ink);
}
.loader-bar {
width: 8rem;
height: 3px;
background: var(--line);
overflow: hidden;
position: relative;
}
.loader-bar::after {
content: "";
position: absolute;
inset: 0;
width: 40%;
background: var(--accent);
animation: loader-sweep 1.1s var(--ease-out) infinite;
}
@media (prefers-reduced-motion: reduce) {
.loader-bar::after {
animation: none;
width: 100%;
}
}
@keyframes loader-sweep {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(350%);
}
}
/* Theme toggle + Account, the same pair and the same `.icon-button`
sizing the game pages' `.site-bar-actions` groups in their header bar
— index.html used to have one gear button opening a settings sheet
that held both as a toggle-row and embedded forms; now it has the
same two direct controls every other page does, and nothing left to
put in a sheet. Lives inside `.site-header`'s own flex row on a
desktop-width page — it used to be a separate `.theme-row` centred
above the header on its own, which read as a stray floating control
rather than a page-level one: `body` is a flex column for the sticky
footer, which makes any direct child sized by `margin: 0 auto` alone
shrink to its own content rather than the 34rem the header's
border-bottom actually draws, so the row and the header centred
independently at two different widths and never lined up. One flex
row fixed that by construction. `margin-left: auto` is what pushes
the group to the row's own right edge; the ≤30rem override below
replaces that with fixed positioning instead, for a different reason
— see there. */
.site-header-actions {
display: flex;
align-items: center;
gap: var(--sp-2);
margin-left: auto;
}
/* ---- the game pages' header bar ------------------------------------
One bar in place of the three stacked rows the game pages used to
open with (a theme row, a Daily/Endless nav, and a masthead). It runs
edge to edge by cancelling the page gutter with its own negative
margins — hence `--pad-x`/`--pad-top` being tokens: the two rules have
to agree exactly or the bar sits inset by a hairline.
index.html and 404.html keep the plain `.site-header` above instead:
neither is a game, neither has a mode to switch or an issue number to
carry, and the picker *is* the mode list. */
/* The space under the bar is a clamp, not `--sp-4`, because the masthead
this replaced was putting ~150px between the top of the page and the
guess box and a flat 16px read as jammed against the rule. It scales
with the viewport like the board metrics do — a narrow screen is
usually one with less vertical room to spend, and at the phone
breakpoint the guess box has left the top of the page entirely, so the
floor is what a docked layout wants anyway. */
/* Three tracks, not a flex row, so the mode tabs sit on the *page's*
centre line rather than in the middle of whatever is left over. As a
flex row with auto margins the tabs were centred between the wordmark
and the icon buttons, and the wordmark is the wider of the two — at
1280px that put them 111px left of centre, which is exactly as
off-centre as it looked. Equal `1fr` cheeks fix the middle track to
the centre whatever the two sides weigh; `minmax(0, …)` lets a cheek
shrink under its own content instead of shoving the tabs across, the
same way the flex row's `min-width: 0` did.
The tracks are positional, so the phone block — which hides the tabs
and shows the Home button, three items either way — restates them. */
.site-bar {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: stretch;
gap: var(--sp-3);
min-height: 3.5rem;
/* No bottom margin since 2026-08-10: `.issue-strip` sits flush under
the bar and carries the space down to the playfield. */
margin: calc(-1 * var(--pad-top)) calc(-1 * var(--pad-x)) 0;
padding: 0 var(--pad-x);
background: var(--bg-raised);
border-bottom: 2px solid var(--ink);
}
/* Phone only: with the mode tabs gone there is nothing else pointing
back at the picker, so the way out gets a real target of its own
rather than relying on the wordmark being a link. Above the phone
breakpoint the two tabs make it redundant. */
.site-bar-home {
display: none;
flex: none;
align-self: center;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border: var(--border);
border-radius: var(--radius-sm);
background: var(--bg);
}
/* Bigger than it looks: `home.webp` is 91×79, so `contain` fits it to
the *width* of this box and the mark it paints is a ratio shorter.
At 1.375rem that was 22×19 adrift in a 44px button — the glyph read
as an afterthought rather than the target. 1.875rem paints ~30×26,
which is 60px of source on a 2x screen against 91 available, so it is
still being drawn down rather than blown up (see state.md's note on
the position badge). The button keeps its 44px hit area either way;
only the mark inside it grows. */
.site-bar-home img {
width: 1.875rem;
height: 1.875rem;
object-fit: contain;
}
/* `justify-self` so the link is only as wide as the words in it: its
track is a whole cheek of the bar, and a stretched anchor would make
half the header a silent link back to the picker. */
.site-bar-mark {
display: flex;
align-items: center;
justify-self: start;
gap: var(--sp-2);
min-width: 0;
color: var(--ink);
text-decoration: none;
}
.site-bar-text {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
/* The site's own mark at the head of the bar, shown from 52rem up. The
tabs are centred on the *page*, so the wordmark's cheek is only ever
half the bar less the tabs, and the mark runs out of room there. Below
30rem the Home button has this slot anyway — a phone needs the way
back to the picker more than it needs a logo. */
/* Height-bound for the same reason as `.site-mark`. This one also
spends the bar's fixed left budget — see the note above — so a wider
mark costs the wordmark room; at 125×102 it draws ~55px. Still under
the 2x ceiling (3.1875rem) below. The show breakpoint is 52rem rather
than the board's unrelated 46rem: at this size the wordmark and tab
labels collide below ~830px, 94px above where 46rem would show it. */
.site-bar-icon {
display: none;
flex: none;
width: auto;
height: 2.875rem;
}
@media (min-width: 52rem) {
.site-bar-icon {
display: block;
}
}
.site-bar-title {
font-family: var(--font-display);
font-size: clamp(1.125rem, 3.4vw, 1.375rem);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.01em;
}
/* DRAFT (2026-08-10) — the issue line as a band of its own, between the
bar and the playfield, replacing the 13px subline under the wordmark.
Why it moved rather than grew: the bar's three tracks put the tabs on
the page's centre line, so the wordmark's cheek is a fixed budget
already shared with the mark, and the subline could only ever be as
loud as the leftovers allowed. Given the full width it needs no
budget from anyone, and the same three-track trick puts the issue
number itself on the page's centre line.
The three read as one line, centred together: pinned to the band's
two edges they were a screen's width apart on a desktop, which reads
as three unrelated labels rather than one heading. The number takes
the display face because it is what names the puzzle — the mode is
already a lit tab a few pixels above, and the date is context. The
phone block below spreads them instead, where the width is short
enough that the edges are still one line and the middle track buys
the number the room it needs. */
.issue-strip {
display: flex;
align-items: baseline;
justify-content: center;
gap: var(--sp-3);
margin: 0 calc(-1 * var(--pad-x)) clamp(var(--sp-4), 4.5vw, 3rem);
padding: var(--sp-2) var(--pad-x);
border-bottom: var(--border);
background: var(--bg-raised);
}
.issue-mode,
.issue-date {
font-size: 0.8125rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
color: var(--muted);
}
/* Tabular so a ticking round or a rolling date never jogs the centre
track sideways. The "No."/"Round" label stays text; only the digits
after it are the game's own gold coin-style numeral sprites
(2026-08-19, a design.md §7 carve-out like the result/lock/clear marks
— glossy and shadowed on purpose, not flattened to the palette). The
span carries the real "No. 9" as an aria-label since the digit images
are decorative (empty alt) and the number would otherwise be
invisible to a screen reader. */
.issue-number {
display: inline-flex;
align-items: flex-end;
font-family: var(--font-display);
font-size: clamp(1.125rem, 3.4vw, 1.5rem);
font-weight: 600;
font-variant-numeric: tabular-nums;
line-height: 1.05;
white-space: nowrap;
color: var(--ink);
}
.issue-digit {
height: clamp(1.375rem, 4vw, 1.75rem);
width: auto;
margin-left: 0.1875rem;
}
/* The bar's middle track, so it is centred on the page rather than on
the space between its neighbours. The current mode is an inset rule in
--accent, not a filled tab: a border is not a fill, so §7's one accent
fill stays with the Guess/Share button. */
.site-bar-nav {
display: flex;
align-items: stretch;
}
.site-bar-nav a {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: 0 clamp(0.5rem, 2.2vw, 1.375rem);
color: var(--muted);
text-decoration: none;
font: 600 var(--step--1) / 1.2 var(--font-ui);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.site-bar-nav a:hover {
color: var(--ink);
}
.site-bar-nav a[aria-current="page"] {
color: var(--ink);
font-weight: 700;
box-shadow: inset 0 -3px 0 var(--accent);
}
.site-bar-nav img {
width: 1.375rem;
height: 1.375rem;
object-fit: contain;
}
/* The other mode's live state — the round an Endless run is sitting on,
so the tab is worth glancing at rather than being pure navigation.
Written by an inline script during parsing, like the issue number. */
.site-bar-badge {
padding: 2px 6px;
border-radius: var(--radius-sm);
background: var(--miss);
color: var(--ink);
font-size: 0.625rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: 0.04em;
}
.site-bar-badge[hidden] {
display: none;
}
/* The day's modes as one group; Endless, which has no calendar, stands
apart across a divider in a menu of its own. */
.site-bar-nav-group {
display: flex;
align-items: stretch;
}
.site-bar-nav-divider {
align-self: center;
width: 1px;
height: 1.625rem;
margin: 0 clamp(0.5rem, 2.2vw, 0.875rem);
background: var(--line);
}
/* A popover with no scrim -- js/mode-nav.js closes it on
Escape and outside click. */
.endless-menu {
position: relative;
display: flex;
align-self: center;
}
.endless-menu-trigger {
display: flex;
align-items: center;
gap: var(--sp-2);
height: 2.25rem;
padding: 0 clamp(0.5rem, 2.2vw, 1rem);
color: var(--muted);
cursor: pointer;
font: 600 var(--step--1) / 1.2 var(--font-ui);
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
list-style: none;
}
.endless-menu-trigger::-webkit-details-marker {
display: none;
}
.endless-menu-trigger:hover,
.endless-menu[open] .endless-menu-trigger,
.endless-menu-trigger[data-current] {
color: var(--ink);
}
.endless-menu-trigger[data-current] {
box-shadow: inset 0 -3px 0 var(--accent);
}
.endless-menu-trigger img {
width: 1.375rem;
height: 1.375rem;
object-fit: contain;
}
/* On an endless page the trigger carries the current mode's own mark
(quest for Stats, story-press for Trivia) beside the tower, so the
collapsed nav says which endless run you're in, not just "Endless".
Smaller than the tower -- it's the qualifier, not the subject -- and
nudged in tight so the two read as one unit. */
.endless-menu-mode-icon.endless-menu-mode-icon {
width: 1rem;
height: 1rem;
margin-left: calc(-1 * var(--sp-1));
}
.endless-menu-caret {
width: 0.6rem;
height: 0.6rem;
color: var(--muted);
}
.endless-menu-panel {
position: absolute;
top: calc(100% + 3px);
left: 0;
z-index: 40;
min-width: 12rem;
padding: var(--sp-1);
background: var(--bg-raised);
border: var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-float);
}
.endless-menu-panel a {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3);
border-radius: var(--radius-sm);
color: var(--ink);
text-decoration: none;
font: 600 var(--step--1) / 1.2 var(--font-ui);
letter-spacing: normal;
text-transform: none;
}
.endless-menu-panel a:hover {
background: var(--bg-sunken);
color: var(--ink);
}
.endless-menu-panel a[aria-current="page"] {
box-shadow: inset 0 -3px 0 var(--accent);
}
.endless-menu-panel img {
width: 1.25rem;
height: 1.25rem;
object-fit: contain;
}
.endless-menu-item-name {
flex: 1;
}
.endless-menu-panel .site-bar-badge {
margin-left: auto;
}
/* Between the phone breakpoint (where the whole nav goes) and roughly
where the site mark reappears, the bar runs tight -- drop the Endless
trigger's label to its tower mark (and, on an endless page, its mode
mark). `data-i18n-aria` carries the name for a screen reader. */
@media (max-width: 58rem) {
.endless-menu-trigger > span[data-i18n] {
display: none;
}
}
/* Tighter still: drop the day-mode link labels to their icons too. The
links keep `data-i18n-aria` for a screen reader. */
@media (max-width: 47rem) {
.site-bar-nav-group > a > span {
display: none;
}
}
/* Language, theme and the overflow menu — three icon-sized controls that
fit one row at every width. Account, How to play, What's new and Send
feedback live in the menu (`.header-menu` below). */
.site-bar-actions {
display: flex;
align-items: center;
justify-self: end;
gap: var(--sp-2);
}
/* Square icon buttons, quiet like the text toggle they replace: a
persistent control shouldn't compete with the one accent-filled action
on screen. 2.75rem keeps §7's 44px hit area at every width. */
.icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
min-height: 0;
padding: 0;
border: var(--border);
border-radius: var(--radius-sm);
background: var(--bg);
color: var(--ink);
}
.icon-button:hover {
border-color: var(--ink);
background: var(--bg);
}
/* The how-to sprite, sized to sit at the same weight as the Home mark
beside it. `help.webp` is 53×52, so 1.625rem is 52 device pixels of a
53-pixel source at 2x — the most this asset has to give, and the
ceiling on how far this can go. */
.icon-button img {
width: 1.625rem;
height: 1.625rem;
object-fit: contain;
}
/* The current language's short code (applyButton() in js/lang.js). */
.lang-glyph {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.75rem;
padding: 0.1rem 0.35rem;
border-radius: var(--radius-sm);
background: var(--bg-sunken);
color: var(--muted);
font: 700 0.6875rem/1 var(--font-ui);
letter-spacing: 0.04em;
}
.lang-toggle .lang-glyph {
min-width: 0;
padding: 0;
background: none;
color: var(--ink);
font-size: 0.75rem;
}
/* The header overflow menu: a popover behind the game's own
menu mark, holding Account, How to play, What's new and Send
feedback. Language and theme keep their own buttons beside it.
Same no-scrim open/close recipe as `.endless-menu`
(js/header-menu.js). */
.header-menu {
position: relative;
display: flex;
align-self: center;
}
.header-menu-trigger {
position: relative;
list-style: none;
cursor: pointer;
}
.header-menu-trigger::-webkit-details-marker {
display: none;
}
.header-menu[open] .header-menu-trigger {
border-color: var(--ink);
}
/* Something in the menu is unread (a new changelog entry). Cleared once
the changelog page is opened -- js/whatsnew.js. */
.header-menu-dot {
position: absolute;
top: 0.3rem;
right: 0.3rem;
width: 0.45rem;
height: 0.45rem;
border-radius: 50%;
background: var(--accent);
}
.header-menu-dot[hidden] {
display: none;
}
.header-menu-panel {
position: absolute;
top: calc(100% + 4px);
right: 0;
z-index: 40;
min-width: 14rem;
padding: var(--sp-1);
background: var(--bg-raised);
border: var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-float);
}
.header-menu-item {
display: flex;
align-items: center;
gap: var(--sp-2);
width: 100%;
min-height: 0;
padding: var(--sp-2) var(--sp-3);
border: 0;
border-radius: var(--radius-sm);
background: none;
color: var(--ink);
text-decoration: none;
font: 600 var(--step--1) / 1.2 var(--font-ui);
text-align: left;
cursor: pointer;
}
.header-menu-item:hover,
.header-menu-item:active {
background: var(--bg-sunken);
color: var(--ink);
}
.header-menu-item > img {
flex: none;
width: 1.25rem;
height: 1.25rem;
object-fit: contain;
}
.header-menu-label {
flex: 1;
}
/* The accent count pill on "What's new". */
.header-menu-badge {
flex: none;
min-width: 1.15rem;
height: 1.15rem;
padding: 0 0.3rem;
border-radius: 999px;
background: var(--accent);
color: var(--bg-raised);
font: 700 0.6875rem / 1.15rem var(--font-ui);
text-align: center;
}
.header-menu-badge[hidden] {
display: none;
}
/* A half-filled circle for the theme toggle, built from a bordered ring
and a solid half rather than the two-stop linear-gradient the mockup
used — §7 bans gradients outright and this needs no exemption to say
the same thing. Inherits `color`, so it flips with the theme.
Grown with the two sprites either side of it, but not to their size:
this is a solid shape and they are line art with air in them, so
matching it to their box would have it out-weigh them. 1.25rem
against their ~1.65rem of painted mark reads level. */
.theme-glyph {
position: relative;
display: block;
width: 1.25rem;
height: 1.25rem;
border: 2px solid currentColor;
border-radius: 50%;
overflow: hidden;
}
.theme-glyph::before {
content: "";
position: absolute;
inset: 0 50% 0 0;
background: currentColor;
}
/* A masthead, not a hero: the mark, then the name and its line, with a
rule under them, the way a catalogue page opens. `center` rather than
the `baseline` it aligned on until 2026-08-09 — baseline was for two
text children, and the first child is a picture now. */
.site-header {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-2) var(--sp-4);
/* `width: 100%` alongside `max-width`, not `max-width` alone: `body`
being a flex column (see `.theme-toggle`'s comment) means a bare
`width: auto` here sizes this flex item to its own content instead
of stretching out to the cap, which left no free space on the row
for `.theme-toggle`'s `margin-left: auto` to push against. */
width: 100%;
max-width: 34rem;
margin: 0 auto var(--sp-6);
padding-bottom: var(--sp-2);
border-bottom: 2px solid var(--ink);
}
/* The picker's copy of the mark in the game pages' header bar, a size up
because it stands beside a `--step-3` headline rather than inside a
56px rule. The placeholder is 102px tall, so 2x runs out at 3.1875rem
— this sits right at that ceiling, as large as it goes before a 2x
screen starts upscaling it. See the note in index.html. */
/* Height-bound, not boxed. A square box with `contain` fits whichever
dimension runs out first, so the mark's rendered size depended on
whether the art happened to be portrait or landscape: the 78×89
resting mark filled all 2.75rem of height, and swapping in the 125×102
pressed one made it 18% shorter without a line of CSS changing. Set
the height, let the width follow, and the mark is as tall as it is
told to be whatever shape the art is. */
.site-mark {
flex: none;
width: auto;
height: 3.1875rem;
}
/* `flex: 1` (grow/shrink/basis 0%), not the default `0 1 auto` a bare
flex item gets: with `width`/`flex-basis` auto, a flex container's
line-wrap decision uses the item's own *unwrapped* preferred width,
not whatever it would shrink to once siblings are accounted for --
invisible in English, where the tagline's one-line width (`Guess the
Princess Connect! Re:Dive character`, ~284px at this font) already
fits the header's 34rem cap alongside the mark and the three header
buttons, but the Japanese tagline's one-line width (~322px, this
being denser CJK text, not a shorter string) doesn't -- so the whole
`.site-header-actions` group got pushed onto its own line under the
mark and title instead of sitting beside them, only in Japanese, at
every width from here up (the header's own `max-width` never grows
past 34rem, so a wider viewport never rescues it). Basis 0% is what
stops the item from claiming that unwrapped width in the first
place: it now takes only the row's actual leftover space and wraps
its own text inside that, the same fix already scoped to the ≤30rem
breakpoint below for a different reason (there, `.site-header-actions`
also switches to `position: fixed`) -- `min-width: 0` alongside it is
what lets it shrink below the tagline's longest unbreakable run
rather than being floored there. */
.masthead {
min-width: 0;
flex: 1;
}
.site-header h1 {
margin: 0;
font-family: var(--font-display);
font-size: var(--step-3);
font-weight: 600;
line-height: 1;
letter-spacing: -0.01em;
color: var(--ink);
}
.site-header h1 a {
color: inherit;
text-decoration: none;
}
.tagline {
margin: var(--sp-1) 0 0;
color: var(--muted);
font-size: var(--step--1);
}
/* ---- mode picker (index.html landing page) ------------------------- */
/* Two sections. "Today" is a 2x2 grid of quiet cards; "Any time" holds
the calendar-free Endless runs as a ruled index list. */
.landing-section {
max-width: 40rem;
margin: 0 auto;
}
.landing-section + .landing-section {
margin-top: var(--sp-6);
}
.landing-section-head {
display: flex;
align-items: center;
gap: var(--sp-3);
margin-bottom: var(--sp-3);
}
.landing-section-label {
font: 700 0.6875rem/1.2 var(--font-ui);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
white-space: nowrap;
}
.landing-section-rule {
flex: 1;
height: 1px;
background: var(--line);
}
/* The Endless section head's own tower mark, inline with its label. */
.landing-section-icon {
flex: none;
width: 1.5rem;
height: 1.5rem;
object-fit: contain;
}
.landing-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-4);
}
@media (min-width: 34rem) {
.landing-grid {
grid-template-columns: 1fr 1fr;
/* All four tiles the same size -- the two placeholder cards grow to
match the real ones' row rather than sitting short beneath them. */
grid-auto-rows: 1fr;
}
}
/* A quiet card, not an accent-filled one -- several on screen at once
would break the one-accent-fill rule (docs/design.md section 7), so
the accent shows only as a hover/focus border, the same way the mode
nav's current-page rule uses it. */
.mode-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--sp-2);
padding: var(--sp-4);
border: var(--border);
border-radius: var(--radius-md);
background: var(--bg-raised);
color: var(--ink);
text-decoration: none;
}
.mode-card:hover,
.mode-card:focus-visible {
border-color: var(--accent);
}
/* The mode's mark and its name on one baseline. The image is the game's
own art for the idea, read as decoration -- the
names the mode,
so the image is alt="". */
.mode-card-head {
display: flex;
align-items: center;
gap: var(--sp-3);
}
/* Boxed rather than sized by height: the icons have opposite proportions
(quest is 125x77, the tower 100x130) and matching heights would make
the wide one twice the visual weight. `contain` in a square gives them
the same footprint. */
.mode-card-icon {
flex: none;
width: 3.5rem;
height: 3.5rem;
object-fit: contain;
}
.mode-card h2 {
margin: 0;
font-family: var(--font-display);
font-size: var(--step-2);
font-weight: 600;
}
.mode-card p {
margin: 0;
color: var(--muted);
font-size: var(--step--1);
}
/* Today's state -- the reason a returning player gets something for
landing here. Beats the plain `.mode-card p` rule above. */
.mode-card .mode-card-status {
color: var(--ink);
font-weight: 600;
}
.mode-card .mode-card-countdown {
font-variant-numeric: tabular-nums;
}
.mode-card-cta {
margin-top: auto;
padding-top: var(--sp-2);
color: var(--accent);
font-weight: 600;
font-size: var(--step--1);
}
/* The game's own "NEW" starburst badge (game_assets.py's UI_GLYPHS),
sitting beside the mode's name while the mode is new. Section 7
client-art carve-out, same family as the CLEAR/WIN/LOSE marks
(docs/decisions/0033-lock-win-lose-clear-marks-added.md). */
.mode-card-badge-new {
flex: none;
height: 2rem;
width: auto;
margin-left: var(--sp-1);
}
/* The client's own achievement stamp (game_assets.py's UI_GLYPHS),
pinned to the card's bottom-right corner. Shown once today's puzzle
for this mode is finished, win or lose -- it marks "you've done
today's one," not a verdict. Section 7 client-art carve-out, see
docs/decisions/0033-lock-win-lose-clear-marks-added.md. */
.mode-card-clear {
position: absolute;
right: var(--sp-3);
bottom: var(--sp-3);
height: 3.5rem;
width: auto;
transform: rotate(-10deg);
}
.mode-card-clear[hidden] {
display: none;
}
/* The two not-yet-built modes. Inert -- a
, not a link -- so the
pointer cursor and hover border that promise a destination are
dropped; the fourth ("???") tile is also knocked back so it reads as
a held slot. */
.mode-card-placeholder {
cursor: default;
}
.mode-card-placeholder:hover {
border-color: var(--line);
}
.mode-card .mode-card-placeholder-note {
color: var(--muted);
font-weight: 400;
}
.mode-card-mystery {
opacity: 0.7;
}
/* The fourth tile has no real icon -- a bordered "???" box the size of
a real mode mark stands in. */
.mode-card-mystery .mode-card-icon {
display: flex;
align-items: center;
justify-content: center;
border: var(--border);
border-radius: var(--radius-sm);
background: var(--bg-sunken);
color: var(--muted);
font: 700 var(--step-0) / 1 var(--font-ui);
}
/* Endless runs as a ruled index list, not a second grid -- an appendix
to the day's puzzles above. Each row carries its own side padding (not
the panel's) so a hover fill runs the full width; `overflow: hidden`
clips that fill to the panel's rounded corners on the end rows. */
.endless-panel {
border: var(--border);
border-radius: var(--radius-md);
background: var(--bg-raised);
overflow: hidden;
}
.endless-list {
display: flex;
flex-direction: column;
}
.endless-row {
display: flex;
align-items: center;
gap: var(--sp-4);
min-height: 3.75rem;
padding: var(--sp-3) var(--sp-5);
border-bottom: 1px solid var(--line);
color: var(--ink);
text-decoration: none;
}
.endless-row:last-child {
border-bottom: 0;
}
.endless-row:hover,
.endless-row:focus-visible {
background: var(--bg-sunken);
}
.endless-row-icon {
flex: none;
width: 2rem;
height: 2rem;
object-fit: contain;
}
.endless-row-name {
min-width: 5.5rem;
font-family: var(--font-display);
font-size: var(--step-1);
font-weight: 600;
}
/* Round/streak as a compact stat pair -- a serif number over a small
uppercase label, the same treatment the result card's streak callout
uses. Pushed to the right of the row, just left of the CTA. The
"No run yet" state keeps this box but fills it with a bare muted
string (its only child is then a text node, which the flex layout
handles fine). */
.endless-row-state {
display: flex;
align-items: center;
gap: var(--sp-4);
margin-left: auto;
color: var(--muted);
font-size: var(--step-0);
}
.endless-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
line-height: 1;
}
.endless-stat + .endless-stat {
padding-left: var(--sp-4);
border-left: 1px solid var(--line-inset);
}
.endless-stat-value {
font-family: var(--font-display);
font-size: var(--step-1);
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--ink);
}
.endless-stat-label {
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--muted);
}
.endless-row-cta {
flex: none;
margin-left: var(--sp-5);
color: var(--accent);
font-weight: 600;
font-size: var(--step-0);
}
/* Trial: the game's arrow sprite (common_icon_arrow, parked in site/img/
for now) after the picker's forward CTAs and the Endless result
card's "Next character" button, in place of a trailing "→" the
self-hosted latin-subset font can't render. Kept off design.md §7's
flat-glyph rule as a test only -- drop this block and restore the
" →" in the strings if it doesn't sit right. */
.mode-card-cta::after,
.endless-row-cta::after,
button#next-button.result-primary::after {
content: "";
display: inline-block;
width: 0.62em;
height: 1.05em;
margin-left: 0.35em;
vertical-align: -0.16em;
background: url("img/arrow.webp") center / contain no-repeat;
}
/* Smaller icon, tighter padding at 30rem and under -- the phone width
this no longer shares with the 2-up desktop grid. Descriptions run
however many lines their text needs (no clamp). */
@media (max-width: 30rem) {
.landing-grid {
margin-top: var(--sp-3);
}
.landing-section + .landing-section {
margin-top: var(--sp-3);
}
.landing-section-head {
margin-bottom: var(--sp-1);
}
.mode-card {
gap: var(--sp-1);
padding: var(--sp-3);
}
.mode-card-icon {
width: 2.5rem;
height: 2.5rem;
}
.mode-card h2 {
font-size: var(--step-1);
}
.mode-card-cta {
padding-top: 1px;
}
.endless-row {
gap: var(--sp-3);
min-height: 3.25rem;
padding-left: var(--sp-4);
padding-right: var(--sp-4);
}
.endless-row-icon {
width: 1.75rem;
height: 1.75rem;
}
.endless-row-name {
min-width: 4.5rem;
font-size: var(--step-0);
}
.endless-row-state {
gap: var(--sp-3);
}
.endless-stat + .endless-stat {
padding-left: var(--sp-3);
}
.endless-stat-value {
font-size: var(--step-0);
}
.endless-row-cta {
margin-left: var(--sp-3);
}
}
/* ---- guess box ---------------------------------------------------- */
.guess-box {
position: relative;
max-width: 30rem; /* holds its own against the wider board below it */
margin: 0 auto var(--sp-6);
}
.input-row {
display: flex;
gap: var(--sp-2);
}
#guess-input {
flex: 1;
min-width: 0;
min-height: 2.75rem;
padding: var(--sp-2) var(--sp-3);
border: var(--border);
border-radius: var(--radius-sm);
background: var(--bg-raised);
color: var(--ink);
font: var(--step-1) / 1.2 var(--font-ui);
}
/* `.button-quiet` is in this selector, not just in its own rule below,
because it has to work on an `` as well as a `