/* 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) */
--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 */
/* 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-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);
--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);
--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;
}
/* 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 */
}
/* 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;
}
.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%);
}
}
/* The one control on the page that isn't --accent: a persistent toggle
would compete with the accent's "single actionable thing" job if it
were filled the same way the Guess button is, so it stays a quiet
outline button instead. */
.theme-row {
display: flex;
justify-content: flex-end;
gap: var(--sp-2);
max-width: 34rem;
margin: 0 auto var(--sp-2);
}
.theme-toggle {
display: inline-flex;
align-items: center;
min-height: 2.25rem;
padding: var(--sp-1) var(--sp-3);
border: var(--border);
border-radius: var(--radius-sm);
background: var(--bg-raised);
color: var(--muted);
font: 600 var(--step--1) / 1.2 var(--font-ui);
text-decoration: none;
}
.theme-toggle:hover {
color: var(--ink);
border-color: var(--ink);
}
/* ---- 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 `.theme-row` + `.site-header` above:
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. */
.site-bar {
display: flex;
align-items: stretch;
gap: var(--sp-3);
min-height: 3.5rem;
margin: calc(-1 * var(--pad-top)) calc(-1 * var(--pad-x))
clamp(var(--sp-4), 4.5vw, 3rem);
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);
}
.site-bar-home img {
width: 1.375rem;
height: 1.375rem;
object-fit: contain;
}
.site-bar-mark {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
color: var(--ink);
text-decoration: none;
}
.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;
}
/* Which mode this is, in words. Redundant beside the tabs, and the only
thing naming the mode once they're gone — so it appears exactly where
they don't. Static markup rather than a JS-written string: it never
changes, and a width is not something a script should be deciding. */
.site-bar-mode {
display: none;
}
/* The issue number, which used to be its own `.day-label` row. Kept
tabular so a ticking round or a date doesn't jitter the wordmark. */
.site-bar-sub {
font-size: clamp(0.6rem, 1.9vw, 0.66rem);
font-variant-numeric: tabular-nums;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
color: var(--muted);
}
/* Centred between the wordmark and the icon buttons. The current mode is
an inset rule in --accent rather than a filled tab, same reasoning as
the nav it replaces: 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;
margin: 0 auto;
}
.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;
}
.site-bar-actions {
display: flex;
align-items: center;
gap: var(--sp-2);
margin-left: auto;
}
/* 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);
}
.icon-button img {
width: 1.25rem;
height: 1.25rem;
object-fit: contain;
}
/* 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. */
.theme-glyph {
position: relative;
display: block;
width: 0.95rem;
height: 0.95rem;
border: 1.5px 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: name and issue number on one baseline with a
rule under them, the way a catalogue page opens. */
.site-header {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-2) var(--sp-4);
max-width: 34rem;
margin: 0 auto var(--sp-6);
padding-bottom: var(--sp-2);
border-bottom: 2px solid var(--ink);
}
.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) ------------------------- */
.mode-picker {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-4);
max-width: 40rem;
margin: var(--sp-6) auto 0;
}
@media (min-width: 34rem) {
.mode-picker {
grid-template-columns: 1fr 1fr;
}
}
/* A quiet card, not an accent-filled one — two of these on screen at
once would break the one-accent-fill rule (docs/design.md §7), so the
accent only shows up as a border on hover/focus, the same way the
mode-nav's current-page rule uses it. */
.mode-card {
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. Quest for Daily, Luna
Tower for Endless — both are the game's own art for those ideas, and
both are read as decoration: the `
` beside each one is what
names the mode, so the images are `alt=""`. */
.mode-card-head {
display: flex;
align-items: center;
gap: var(--sp-3);
}
/* Boxed rather than sized by height: the two icons have opposite
proportions (quest is 125x77, the tower 100x130) and matching their
heights would make the wide one twice the visual weight of the tall
one. `contain` inside a square gives them the same footprint.
3.5rem rather than something smaller because the tower is the game's
own mode-list icon and carries that much detail — at 44px it
collapsed into a blue smudge. */
.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/this run's state — the reason a returning player gets
something for landing here instead of it being a pure detour.
Specificity has to beat 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);
}
/* ---- 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 `