/* =====================================================================================================================
Provenance design system — "Atlas & Label" templates/shared/tokens.css
Paper and ink, an engraved atlas, museum wall labels, one accent per game. Light is the hero; dark is "the gallery
after hours". Docs + live style guide: redteam/design/system/README.md, styleguide.html.
Usage: (no data-theme ⇒ follow the OS)
(quoted in real pages)
Pages put their own CSS in `@layer page { … }` (declared last below) or unlayered — both override everything here.
===================================================================================================================== */
@layer reset, tokens, base, components, motion, utilities, page;
/* @font-face:begin (generated by scripts/make_brand_assets.py fonts — do not edit by hand) */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 600; font-display: swap;
src: url("/assets/newsreader-latin.3064ed42.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-0107, U+010C-0113, U+0116-011B, U+011E-011F, U+012A-012B, U+0130-0131, U+0141-0144, U+0147-0148, U+014C-014D, U+0150-0153, U+0158-015B, U+015E-0165, U+016A-016B, U+016E-0171, U+0179-017E, U+0218-021B, U+02BC, U+02C6, U+02DA, U+02DC, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2116, U+2122, U+2212, U+2248, U+2264-2265; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 600; font-display: swap;
src: url("/assets/newsreader-latin-ext.4e25996f.woff2") format("woff2"); unicode-range: U+0108-010B, U+0114-0115, U+011C-011D, U+0120-0129, U+012C-012F, U+0134-0140, U+0145-0146, U+014A-014B, U+014E-014F, U+0154-0157, U+015C-015D, U+0166-0169, U+016C-016D, U+0172-0178, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01C4-01CC, U+01E6-01E7, U+01EA-01EB, U+01FA-0217, U+022A-022D, U+0230-0233, U+0237, U+0259, U+02B9-02BA, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0300-0304, U+0306-030C, U+030F, U+0311-0312, U+031B, U+0323-0324, U+0326-0328, U+032E, U+0331, U+0335, U+1E80-1E85, U+1E9E, U+1EA0-1EF9, U+20A1, U+20A3-20A4, U+20A6-20A7, U+20A9, U+20AB, U+20AD, U+20B1-20B2, U+20B5, U+20B9-20BA, U+20BC-20BD; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400 600; font-display: swap;
src: url("/assets/newsreader-italic-latin.b72c09b0.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-0107, U+010C-0113, U+0116-011B, U+011E-011F, U+012A-012B, U+0130-0131, U+0141-0144, U+0147-0148, U+014C-014D, U+0150-0153, U+0158-015B, U+015E-0165, U+016A-016B, U+016E-0171, U+0179-017E, U+0218-021B, U+02BC, U+02C6, U+02DA, U+02DC, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2116, U+2122, U+2212, U+2248, U+2264-2265; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400 600; font-display: swap;
src: url("/assets/newsreader-italic-latin-ext.a55ca00e.woff2") format("woff2"); unicode-range: U+0108-010B, U+0114-0115, U+011C-011D, U+0120-0129, U+012C-012F, U+0134-0140, U+0145-0146, U+014A-014B, U+014E-014F, U+0154-0157, U+015C-015D, U+0166-0169, U+016C-016D, U+0172-0178, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01C4-01CC, U+01E6-01E7, U+01EA-01EB, U+01FA-0217, U+022A-022D, U+0230-0233, U+0237, U+0259, U+02B9-02BA, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0300-0304, U+0306-030C, U+030F, U+0311-0312, U+031B, U+0323-0324, U+0326-0328, U+032E, U+0331, U+0335, U+1E80-1E85, U+1E9E, U+1EA0-1EF9, U+20A1, U+20A3-20A4, U+20A6-20A7, U+20A9, U+20AB, U+20AD, U+20B1-20B2, U+20B5, U+20B9-20BA, U+20BC-20BD; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 500 700; font-display: swap;
src: url("/assets/intertight-latin.d73c892f.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-0107, U+010C-0113, U+0116-011B, U+011E-011F, U+012A-012B, U+0130-0131, U+0141-0144, U+0147-0148, U+014C-014D, U+0150-0153, U+0158-015B, U+015E-0165, U+016A-016B, U+016E-0171, U+0179-017E, U+0218-021B, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2009-200A, U+2010-2015, U+2018-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2103, U+2116, U+2122, U+2160-216F, U+2190-2193, U+2196-2199, U+2212, U+2248, U+2264-2265; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 500 700; font-display: swap;
src: url("/assets/intertight-latin-ext.17ea86a0.woff2") format("woff2"); unicode-range: U+0108-010B, U+0114-0115, U+011C-011D, U+0120-0129, U+012C-012F, U+0132-0140, U+0145-0146, U+014A-014B, U+014E-014F, U+0154-0157, U+015C-015D, U+0166-0169, U+016C-016D, U+0172-0178, U+017F-01C3, U+01C5-0217, U+021C-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-0308, U+030A-031E, U+0321-036F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20BF, U+2113, U+2C7C, U+2C7F, U+A7FF; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 600; font-display: swap;
src: url("/assets/intertight-latin.d73c892f.woff2") format("woff2"); unicode-range: U+02BB, U+2009-200A, U+2011-2012, U+2015, U+201B, U+2103, U+2160-216F, U+2190-2193, U+2196-2199; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 600; font-display: swap;
src: url("/assets/intertight-latin-ext.17ea86a0.woff2") format("woff2"); unicode-range: U+0132-0133, U+017F-018E, U+0190-0191, U+0193-019F, U+01A2-01AE, U+01B1-01C3, U+01CD-01E5, U+01E8-01E9, U+01EC-01F9, U+021C-0229, U+022E-022F, U+0234-0236, U+0238-0258, U+025A-02B8, U+02BD-02C5, U+02C8-02D7, U+02DE-02FF, U+0305, U+030D-030E, U+0310, U+0313-031A, U+031C-031E, U+0321-0322, U+0325, U+0329-032D, U+032F-0330, U+0332-0334, U+0336-036F, U+1E00-1E7F, U+1E86-1E9D, U+1E9F, U+1EFA-1EFF, U+20A0, U+20A2, U+20A5, U+20A8, U+20AA, U+20AE-20B0, U+20B3-20B4, U+20B6-20B8, U+20BB, U+20BE-20BF, U+2113, U+2C7C, U+2C7F, U+A7FF; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400 600; font-display: swap;
src: url("/assets/intertight-latin.d73c892f.woff2") format("woff2"); unicode-range: U+02BB, U+2009-200A, U+2011-2012, U+2015, U+201B, U+2103, U+2160-216F, U+2190-2193, U+2196-2199; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400 600; font-display: swap;
src: url("/assets/intertight-latin-ext.17ea86a0.woff2") format("woff2"); unicode-range: U+0132-0133, U+017F-018E, U+0190-0191, U+0193-019F, U+01A2-01AE, U+01B1-01C3, U+01CD-01E5, U+01E8-01E9, U+01EC-01F9, U+021C-0229, U+022E-022F, U+0234-0236, U+0238-0258, U+025A-02B8, U+02BD-02C5, U+02C8-02D7, U+02DE-02FF, U+0305, U+030D-030E, U+0310, U+0313-031A, U+031C-031E, U+0321-0322, U+0325, U+0329-032D, U+032F-0330, U+0332-0334, U+0336-036F, U+1E00-1E7F, U+1E86-1E9D, U+1E9F, U+1EFA-1EFF, U+20A0, U+20A2, U+20A5, U+20A8, U+20AA, U+20AE-20B0, U+20B3-20B4, U+20B6-20B8, U+20BB, U+20BE-20BF, U+2113, U+2C7C, U+2C7F, U+A7FF; }
@font-face { font-family: "Newsreader Fallback"; src: local("Times New Roman"), local("Liberation Serif"), local("Tinos"), local("Times");
size-adjust: 100.53%; ascent-override: 73.11%; descent-override: 26.36%; line-gap-override: 0%; }
@font-face { font-family: "Inter Tight Fallback"; src: local("Arial"), local("Liberation Sans"), local("Arimo"), local("Helvetica");
size-adjust: 98.66%; ascent-override: 98.19%; descent-override: 24.45%; line-gap-override: 0%; }
/* @font-face:end */
/* R21: a metric-matched fallback for Newsreader ITALIC (the roman one above is generated): italic set in Times/Liberation
Serif Italic at 92 % occupies the same line boxes as Newsreader Italic, so the H1 accent no longer shifts on swap. */
@font-face { font-family: "Newsreader Fallback"; font-style: italic;
src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Liberation Serif Italic"), local("LiberationSerif-Italic"), local("Tinos Italic"), local("Times Italic"), local("Times-Italic");
size-adjust: 92.08%; ascent-override: 79.82%; descent-override: 28.78%; line-gap-override: 0%; }
/* ---------------------------------------------------------------------------------------------------------------------
TOKENS
--------------------------------------------------------------------------------------------------------------------- */
@layer tokens {
/* 1 ─ theme-independent scales ------------------------------------------------------------------------------------ */
:root {
/* type families */
--font-serif: "Newsreader", "Newsreader Fallback", ui-serif, Georgia, "Times New Roman", serif;
--font-sans: "Inter Tight", "Inter Tight Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--font-num: var(--font-sans);
--num-features: "tnum" 1, "lnum" 1;
/* fluid type scale: phone (360px) → desktop (1280px); rem intercepts keep 200 % text zoom honest */
--fs-display-xl: clamp(2.75rem, 2.2606rem + 2.1739vw, 4rem); /* 44 → 64 */
--lh-display-xl: 1.07;
--fs-display: clamp(1.75rem, 1.5543rem + 0.8696vw, 2.25rem); /* 28 → 36 */
--lh-display: 1.18;
--fs-title: clamp(1.3125rem, 1.2391rem + 0.3261vw, 1.5rem); /* 21 → 24 */
--lh-title: 1.25;
--fs-body-l: clamp(1.0625rem, 1.0380rem + 0.1087vw, 1.125rem); /* 17 → 18 */
--lh-body-l: 1.55;
--fs-body: 1rem; /* 16 */
--lh-body: 1.5;
--fs-ui: 0.9375rem; /* 15 (16 on touch, below) */
--lh-ui: 1.25rem;
--fs-eyebrow: 0.75rem; /* 12 — the only uppercase role */
--lh-eyebrow: 1rem;
--tr-eyebrow: 0.06em;
--fs-micro: 0.75rem; /* 12 (13 on touch) */
--lh-micro: 1rem;
--fs-score: clamp(1.25rem, 1.0543rem + 0.8696vw, 1.75rem); /* 20 → 28 */
--fs-hero-num: clamp(3.5rem, 2.5217rem + 4.3478vw, 6rem); /* 56 → 96, results total */
/* spacing — 4-pt base */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px;
--gutter: clamp(16px, 2.5vw, 32px);
--w-game: 1200px;
--w-read: 720px;
--w-measure: 62ch;
--appbar-h: 56px;
/* radius */
--r-control: 8px; --r-card: 12px; --r-sheet: 16px; --r-tag: 4px; --r-photo: 4px; --r-label: 0; --r-round: 999px;
/* sizing */
--control-h: 48px;
--control-h-sm: 36px;
--hit: 44px;
--icon: 20px;
--pip: 32px;
--thumb: 28px;
--track: 6px;
/* motion — durations */
--dur-press: 120ms;
--dur-state: 200ms;
--dur-stamp: 220ms;
--dur-spring: 240ms;
--dur-panel: 320ms;
--dur-draw: 500ms;
--dur-map: 600ms;
--dur-count: 800ms;
--dur-sweep: 900ms;
--dur-fade: 150ms; /* reduced-motion crossfade */
--stagger: 40ms; /* wall-label line fill-in */
/* motion — easings */
--ease-out: cubic-bezier(.22, 1, .36, 1); /* travel: map flights, sheets, panels */
--ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* arrivals: pin drop, stamp, pop — things land */
--ease-standard: cubic-bezier(.2, 0, 0, 1); /* state changes: hover, colour */
--ease-in-out: cubic-bezier(.65, 0, .35, 1); /* sweeps, loops */
--ease-in: cubic-bezier(.5, 0, .75, 0); /* exits */
/* z-index */
--z-map-ui: 10; --z-appbar: 20; --z-sheet: 30; --z-popover: 40; --z-dialog: 50; --z-toast: 60;
}
@media (pointer: coarse) {
:root { --fs-ui: 1rem; --fs-micro: 0.8125rem; --lh-micro: 1.0625rem; --control-h: 52px; }
}
/* 2 ─ per-game raw values (both themes). Accent RGB triplets give alpha tints without color-mix(). ---------------- */
:root, [data-game="objects"] {
--g-accent-l: #1E6B5C; --g-accent-rgb-l: 30 107 92; --g-accent-hover-l: #1C6557; --g-accent-press-l: #1A5E51; --g-on-accent-l: #FFFFFF;
--g-accent-d: #6CC2AE; --g-accent-rgb-d: 108 194 174; --g-accent-hover-d: #7AC8B6; --g-accent-press-d: #86CDBC; --g-on-accent-d: #0B1A16;
--g-bg-d: #101413; --g-surface-d: #181D1C; --g-surface-2-d: #212726; --g-rule-d: #2C3331; --g-rule-strong-d: #75716A;
--g-ink-d: #EEE9DF; --g-ink-2-d: #B5AFA3; --g-ink-3-d: #948E84;
--g-sea-d: #0A1215; --g-land-d: #3C4141; --g-coast-d: #7F8C88; --g-sea-label-d: #5E7478;
--g-name: "Objects";
}
[data-game="music"] {
--g-accent-l: #A8361F; --g-accent-rgb-l: 168 54 31; --g-accent-hover-l: #9E331D; --g-accent-press-l: #94301B; --g-on-accent-l: #FFFFFF;
--g-accent-d: #F08060; --g-accent-rgb-d: 240 128 96; --g-accent-hover-d: #F18769; --g-accent-press-d: #F28E72; --g-on-accent-d: #1F0D08;
--g-bg-d: #121015; --g-surface-d: #1B1820; --g-surface-2-d: #25212A; --g-rule-d: #322D37; --g-rule-strong-d: #77707A;
--g-ink-d: #EFE9E4; --g-ink-2-d: #B8AFAA; --g-ink-3-d: #928A86;
--g-sea-d: #0D0A10; --g-land-d: #463A40; --g-coast-d: #8F8289; --g-sea-label-d: #6F6478;
--g-name: "Music";
}
/* 3 ─ LIGHT (hero). Re-declared on every [data-game]/[data-theme] element so nested previews resolve correctly. ---- */
:root, [data-theme="light"], [data-game] {
color-scheme: light;
--bg: #F3EEE4; /* paper */
--surface: #FBF8F2;
--surface-2: #ECE6DA;
--rule: #DDD5C7; /* hairlines, dividers (decorative) */
--rule-strong: #857D70; /* input/control outlines: ≥ 3:1 on bg/surface */
--ink: #1B1A17; /* 15.1:1 on bg */
--ink-2: #4A463F; /* 8.1:1 */
--ink-3: #6B655B; /* 5.0:1 (4.65 on surface-2) */
--inverse-bg: #1B1A17;
--inverse-ink: #F3EEE4;
--accent: var(--g-accent-l);
--accent-rgb: var(--g-accent-rgb-l);
--accent-hover: var(--g-accent-hover-l);
--accent-press: var(--g-accent-press-l);
--on-accent: var(--g-on-accent-l);
--accent-text: var(--g-accent-l); /* accent as text: ≥ 5.1:1 on bg, surface, surface-2 */
--lightbox: #E7E4DE; /* neutral sweep behind museum photography */
--scrim: rgb(27 26 23 / .44);
/* atlas */
--sea: #A7BBBD;
--land: #F8F4EA; /* 1.80:1 vs sea */
--coast: #7F8C8B; /* 3.17:1 vs land */
--border-modern: #B5AC9C;
--border-hist: #8F846F;
--graticule: rgb(27 26 23 / .08);
--sea-label: #6F8789;
--marker-guess: #1B1A17;
--marker-ring: #FBF8F2;
/* tiers are materials (never colour alone: always word, glyph or numeral too) */
--tier-gold: #A87512; --on-tier-gold: #15120E;
--tier-silver: #76808A; --on-tier-silver: #15120E;
--tier-bronze: #8E4E22; --on-tier-bronze: #FFFFFF;
--tier-clay: #4A3D37; --on-tier-clay: #1B1A17;
--gold-sheen: #F3D58B;
/* R19: materials, not flat paint — a metallic gradient + 1 px edge + top highlight; clay is unglazed earthenware
(hatched, outlined) so a bad day never reads as a black bar. Text ≥ 4.5:1 on every stop, edges ≥ 3:1 on bg. */
--tier-fill-gold: linear-gradient(160deg, #C29536 0%, #A87512 52%, #B88A2C 100%);
--tier-fill-silver: linear-gradient(160deg, #98A1AA 0%, #76808A 50%, #8A939C 100%);
--tier-fill-bronze: linear-gradient(160deg, #9F5E2E 0%, #8E4E22 52%, #9A5829 100%);
--tier-fill-clay: repeating-linear-gradient(135deg, rgb(74 61 55 / .30) 0 1.5px, rgb(74 61 55 / .12) 1.5px 4px);
--tier-edge-gold: #8C610C; --tier-edge-silver: #5F6872; --tier-edge-bronze: #7A421B; --tier-edge-clay: #6B5A50;
--tier-shine: rgb(255 255 255 / .32);
/* wall label: paper; in dark it is a dimmed paper (R20), not a bright slab */
--label-bg: #FBF8F2;
--label-ink: #1B1A17;
--label-ink-2: #4A463F;
--label-ink-3: #6B655B;
--label-rule: rgb(27 26 23 / .14);
/* elevation */
--shadow-1: 0 1px 0 rgb(27 26 23 / .04), 0 1px 2px rgb(27 26 23 / .06);
--shadow-2: 0 1px 2px rgb(27 26 23 / .06), 0 6px 16px -4px rgb(27 26 23 / .12);
--shadow-3: 0 2px 6px rgb(27 26 23 / .06), 0 18px 48px -8px rgb(27 26 23 / .22);
--shadow-label: 0 1px 0 rgb(0 0 0 / .08), 0 1px 3px rgb(0 0 0 / .06);
--highlight: transparent; /* top inner highlight on raised surfaces (dark only) */
/* journey difficulty tag (layers.js .ly-lvl): neutral, never colour alone (the word + 1-3 bars) */
--lvl-bg: #ECE6DA; --lvl-ink: #4A463F; --lvl-bar: #4A463F; --lvl-bar-off: #C9BFAE;
/* derived */
--accent-soft: rgb(var(--accent-rgb) / .12);
--accent-softer: rgb(var(--accent-rgb) / .06);
--accent-line: rgb(var(--accent-rgb) / .35);
--focus-ring: var(--accent);
}
/* 4 ─ DARK: follow the OS unless data-theme="light"; or force with data-theme="dark" ------------------------------ */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]),
:root:not([data-theme="light"]) [data-game]:not([data-theme="light"]) {
color-scheme: dark;
--bg: var(--g-bg-d); --surface: var(--g-surface-d); --surface-2: var(--g-surface-2-d);
--rule: var(--g-rule-d); --rule-strong: var(--g-rule-strong-d);
--ink: var(--g-ink-d); --ink-2: var(--g-ink-2-d); --ink-3: var(--g-ink-3-d);
--inverse-bg: var(--g-ink-d); --inverse-ink: var(--g-bg-d);
--accent: var(--g-accent-d); --accent-rgb: var(--g-accent-rgb-d); --accent-hover: var(--g-accent-hover-d);
--accent-press: var(--g-accent-press-d); --on-accent: var(--g-on-accent-d); --accent-text: var(--g-accent-d);
--lightbox: #1B1C1D; --scrim: rgb(0 0 0 / .6);
--sea: var(--g-sea-d); --land: var(--g-land-d); --coast: var(--g-coast-d);
--border-modern: rgb(238 233 223 / .22); --border-hist: rgb(238 233 223 / .38);
--graticule: rgb(238 233 223 / .06); --sea-label: var(--g-sea-label-d);
--marker-guess: var(--g-ink-d); --marker-ring: var(--g-bg-d);
--tier-gold: #E0B04A; --on-tier-gold: #15120E;
--tier-silver: #AEB6BC; --on-tier-silver: #15120E;
--tier-bronze: #C27A44; --on-tier-bronze: #15120E;
--tier-clay: #8A7A70; --on-tier-clay: #EEE9DF;
--gold-sheen: #FFF1C9;
--tier-fill-gold: linear-gradient(160deg, #EBC167 0%, #E0B04A 52%, #E6BA5C 100%);
--tier-fill-silver: linear-gradient(160deg, #C3CAD0 0%, #AEB6BC 50%, #B9C0C6 100%);
--tier-fill-bronze: linear-gradient(160deg, #CF8A55 0%, #C27A44 52%, #C8834E 100%);
--tier-fill-clay: repeating-linear-gradient(135deg, rgb(138 122 112 / .45) 0 1.5px, rgb(138 122 112 / .2) 1.5px 4px);
--tier-edge-gold: #B88A2C; --tier-edge-silver: #8A939C; --tier-edge-bronze: #A5622F; --tier-edge-clay: #8A7A70;
--tier-shine: rgb(255 255 255 / .28);
--label-bg: #2B2925; --label-ink: #EEE9DF; --label-ink-2: #C4BDB0; --label-ink-3: #A29B8F; --label-rule: rgb(238 233 223 / .16);
--shadow-1: 0 1px 2px rgb(0 0 0 / .4);
--shadow-2: 0 2px 4px rgb(0 0 0 / .35), 0 10px 24px -6px rgb(0 0 0 / .5);
--shadow-3: 0 4px 10px rgb(0 0 0 / .4), 0 24px 64px -8px rgb(0 0 0 / .65);
--shadow-label: 0 1px 0 rgb(0 0 0 / .3), 0 10px 28px -6px rgb(0 0 0 / .55);
--highlight: rgb(255 255 255 / .04);
--lvl-bg: rgb(238 233 223 / .07); --lvl-ink: var(--g-ink-2-d); --lvl-bar: var(--g-ink-2-d); --lvl-bar-off: rgb(238 233 223 / .2);
}
}
[data-theme="dark"],
[data-theme="dark"] [data-game]:not([data-theme="light"]) {
color-scheme: dark;
--bg: var(--g-bg-d); --surface: var(--g-surface-d); --surface-2: var(--g-surface-2-d);
--rule: var(--g-rule-d); --rule-strong: var(--g-rule-strong-d);
--ink: var(--g-ink-d); --ink-2: var(--g-ink-2-d); --ink-3: var(--g-ink-3-d);
--inverse-bg: var(--g-ink-d); --inverse-ink: var(--g-bg-d);
--accent: var(--g-accent-d); --accent-rgb: var(--g-accent-rgb-d); --accent-hover: var(--g-accent-hover-d);
--accent-press: var(--g-accent-press-d); --on-accent: var(--g-on-accent-d); --accent-text: var(--g-accent-d);
--lightbox: #1B1C1D; --scrim: rgb(0 0 0 / .6);
--sea: var(--g-sea-d); --land: var(--g-land-d); --coast: var(--g-coast-d);
--border-modern: rgb(238 233 223 / .22); --border-hist: rgb(238 233 223 / .38);
--graticule: rgb(238 233 223 / .06); --sea-label: var(--g-sea-label-d);
--marker-guess: var(--g-ink-d); --marker-ring: var(--g-bg-d);
--tier-gold: #E0B04A; --on-tier-gold: #15120E;
--tier-silver: #AEB6BC; --on-tier-silver: #15120E;
--tier-bronze: #C27A44; --on-tier-bronze: #15120E;
--tier-clay: #8A7A70; --on-tier-clay: #EEE9DF;
--gold-sheen: #FFF1C9;
--tier-fill-gold: linear-gradient(160deg, #EBC167 0%, #E0B04A 52%, #E6BA5C 100%);
--tier-fill-silver: linear-gradient(160deg, #C3CAD0 0%, #AEB6BC 50%, #B9C0C6 100%);
--tier-fill-bronze: linear-gradient(160deg, #CF8A55 0%, #C27A44 52%, #C8834E 100%);
--tier-fill-clay: repeating-linear-gradient(135deg, rgb(138 122 112 / .45) 0 1.5px, rgb(138 122 112 / .2) 1.5px 4px);
--tier-edge-gold: #B88A2C; --tier-edge-silver: #8A939C; --tier-edge-bronze: #A5622F; --tier-edge-clay: #8A7A70;
--tier-shine: rgb(255 255 255 / .28);
--label-bg: #2B2925; --label-ink: #EEE9DF; --label-ink-2: #C4BDB0; --label-ink-3: #A29B8F; --label-rule: rgb(238 233 223 / .16);
--shadow-1: 0 1px 2px rgb(0 0 0 / .4);
--shadow-2: 0 2px 4px rgb(0 0 0 / .35), 0 10px 24px -6px rgb(0 0 0 / .5);
--shadow-3: 0 4px 10px rgb(0 0 0 / .4), 0 24px 64px -8px rgb(0 0 0 / .65);
--shadow-label: 0 1px 0 rgb(0 0 0 / .3), 0 10px 28px -6px rgb(0 0 0 / .55);
--highlight: rgb(255 255 255 / .04);
--lvl-bg: rgb(238 233 223 / .07); --lvl-ink: var(--g-ink-2-d); --lvl-bar: var(--g-ink-2-d); --lvl-bar-off: rgb(238 233 223 / .2);
}
}
/* ---------------------------------------------------------------------------------------------------------------------
RESET
--------------------------------------------------------------------------------------------------------------------- */
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol[role="list"], ul[role="list"], menu { list-style: none; padding: 0; margin: 0; }
img, svg, video, canvas, picture { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
table { border-collapse: collapse; }
:target { scroll-margin-block: calc(var(--appbar-h) + 16px); }
}
/* ---------------------------------------------------------------------------------------------------------------------
BASE
--------------------------------------------------------------------------------------------------------------------- */
@layer base {
html {
background: var(--bg);
color: var(--ink);
font-family: var(--font-serif);
font-size: 100%;
font-synthesis-weight: none;
font-optical-sizing: auto;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
hanging-punctuation: first;
}
body {
min-height: 100vh;
min-height: 100dvh;
background: var(--bg);
color: var(--ink);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-variation-settings: "opsz" 16;
}
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 500; color: var(--ink); text-wrap: balance; }
h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-title); line-height: var(--lh-title); }
h3 { font-size: var(--fs-body-l); line-height: 1.35; }
h4 { font-family: var(--font-sans); font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); font-weight: 600;
letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--ink-3); }
p, li, dd { text-wrap: pretty; }
strong, b { font-weight: 600; }
em, i, cite { font-style: italic; }
small { font-size: 0.875em; }
a { color: var(--accent-text); text-decoration-line: underline; text-decoration-thickness: 1px;
text-underline-offset: 0.2em; text-decoration-color: var(--accent-line); transition: text-decoration-color var(--dur-state) var(--ease-standard); }
a:hover { text-decoration-color: currentColor; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-5) 0; }
::selection { background: rgb(var(--accent-rgb) / .22); color: inherit; }
kbd { font-family: var(--font-sans); font-size: 0.8125em; font-weight: 600; padding: 1px 6px; border-radius: 4px;
border: 1px solid var(--rule); border-bottom-width: 2px; background: var(--surface); }
abbr[title] { text-decoration: underline dotted; text-underline-offset: 0.2em; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }
button, a, input, select, textarea, label, summary, [role="button"], [role="slider"], [role="tab"], [role="option"] {
touch-action: manipulation;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
}
/* ---------------------------------------------------------------------------------------------------------------------
COMPONENTS
--------------------------------------------------------------------------------------------------------------------- */
@layer components {
/* ── Type roles ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.t-display-xl { font-family: var(--font-serif); font-size: var(--fs-display-xl); line-height: var(--lh-display-xl);
font-weight: 450; letter-spacing: -0.015em; font-variation-settings: "opsz" 72; font-variant-numeric: lining-nums; }
.t-display { font-family: var(--font-serif); font-size: var(--fs-display); line-height: var(--lh-display); font-weight: 500;
letter-spacing: -0.01em; font-variation-settings: "opsz" 48; }
.t-title { font-family: var(--font-serif); font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 500;
font-variation-settings: "opsz" 24; }
.t-body-l { font-family: var(--font-serif); font-size: var(--fs-body-l); line-height: var(--lh-body-l); font-weight: 400;
font-variation-settings: "opsz" 16; max-width: var(--w-measure); }
.t-body { font-family: var(--font-serif); font-size: var(--fs-body); line-height: var(--lh-body); }
.t-ui { font-family: var(--font-sans); font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: 600; }
.t-micro { font-family: var(--font-sans); font-size: var(--fs-micro); line-height: var(--lh-micro); font-weight: 500;
font-feature-settings: var(--num-features); color: var(--ink-3); }
.eyebrow { font-family: var(--font-sans); font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); font-weight: 600;
letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--ink-3); }
.eyebrow--accent { color: var(--accent-text); }
.num, .t-score { font-family: var(--font-num); font-feature-settings: var(--num-features); font-variant-numeric: tabular-nums lining-nums; }
.t-score { font-size: var(--fs-score); line-height: 1.1; font-weight: 600; letter-spacing: -0.01em; }
.t-hero-num { font-family: var(--font-serif); font-size: var(--fs-hero-num); line-height: 1; font-weight: 450;
letter-spacing: -0.02em; font-variation-settings: "opsz" 72; font-feature-settings: "lnum" 1, "tnum" 1; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.italic { font-style: italic; }
.measure { max-width: var(--w-measure); }
/* ── Icons (sprite: ) ─────────────────────────────── */
.icon { width: var(--icon-size, var(--icon)); height: var(--icon-size, var(--icon)); flex: none; display: inline-block;
vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { --icon-size: 16px; }
.icon--lg { --icon-size: 24px; }
/* ── Buttons ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.btn {
--btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: transparent;
display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
min-height: var(--control-h); padding: 0 var(--s-5); border-radius: var(--r-control);
border: 1px solid var(--btn-bd); background: var(--btn-bg); color: var(--btn-fg);
font-family: var(--font-sans); font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: 600; letter-spacing: 0;
text-decoration: none; white-space: nowrap; user-select: none; -webkit-user-select: none; cursor: pointer;
transition: background-color var(--dur-state) var(--ease-standard), color var(--dur-state) var(--ease-standard),
border-color var(--dur-state) var(--ease-standard), transform var(--dur-press) var(--ease-standard),
box-shadow var(--dur-state) var(--ease-standard);
}
.btn:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(.98); }
.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.btn .icon { --icon-size: 20px; margin-inline: -2px; }
.btn--primary { --btn-bg: var(--accent); --btn-fg: var(--on-accent); box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 1px 2px rgb(var(--accent-rgb) / .25); }
.btn--primary:hover { --btn-bg: var(--accent-hover); }
.btn--primary:active { --btn-bg: var(--accent-press); }
.btn--secondary { --btn-bg: transparent; --btn-bd: var(--rule-strong); --btn-fg: var(--ink); }
.btn--secondary:hover { --btn-bg: var(--surface-2); --btn-bd: var(--ink-3); }
.btn--secondary:active { --btn-bg: var(--rule); }
.btn--tertiary { --btn-fg: var(--accent-text); padding: 0 var(--s-3); min-height: var(--hit); }
.btn--tertiary:hover { --btn-bg: var(--accent-softer); }
.btn--tertiary:active { --btn-bg: var(--accent-soft); }
.btn--quiet { --btn-fg: var(--ink-2); padding: 0 var(--s-3); min-height: var(--hit); }
.btn--quiet:hover { --btn-bg: var(--surface-2); --btn-fg: var(--ink); }
.btn--icon { width: var(--hit); min-height: var(--hit); height: var(--hit); padding: 0; border-radius: var(--r-round); --btn-fg: var(--ink-2); }
.btn--icon:hover { --btn-bg: var(--surface-2); --btn-fg: var(--ink); }
.btn--icon.btn--sm { width: 36px; height: 36px; min-height: 36px; }
.btn--icon.btn--overlay { --btn-bg: rgb(251 248 242 / .82); --btn-fg: #1B1A17; opacity: .78; backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px); box-shadow: var(--shadow-1); }
.btn--icon.btn--overlay:hover { opacity: 1; --btn-bg: #FBF8F2; }
.btn--sm { min-height: var(--control-h-sm); padding: 0 var(--s-4); font-size: 0.875rem; }
.btn--icon.btn--sm, .btn--icon.btn--lg { padding: 0; }
.btn--lg { min-height: 56px; padding: 0 var(--s-6); font-size: 1.0625rem; }
.btn--block { display: flex; width: 100%; max-width: 420px; }
.btn:disabled, .btn[aria-disabled="true"] {
--btn-bg: var(--surface-2); --btn-fg: var(--ink-3); --btn-bd: transparent; box-shadow: none; cursor: not-allowed;
}
.btn--tertiary:disabled, .btn--quiet:disabled, .btn--icon:disabled { --btn-bg: transparent; }
.btn[aria-busy="true"] { cursor: progress; }
.btn__kbd { font-weight: 500; font-size: 0.8125rem; opacity: .7; }
/* segmented control (theme: light / auto / dark; sound on/off) */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: calc(var(--r-control) + 3px); background: var(--surface-2); }
.seg > button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--s-3); border-radius: var(--r-control);
font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600; color: var(--ink-2);
transition: background-color var(--dur-state) var(--ease-standard), color var(--dur-state) var(--ease-standard); }
.seg > button:hover { color: var(--ink); }
.seg > button[aria-pressed="true"], .seg > button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.seg .icon { --icon-size: 18px; }
/* ── Tags (meta + tier). 24px, radius 4 — a tag, not a pill ─────────────────────────────────────────────────── */
.tag { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: var(--r-tag);
background: var(--surface-2); color: var(--ink-2); font-family: var(--font-sans); font-size: var(--fs-eyebrow);
line-height: 1; font-weight: 600; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; white-space: nowrap;
border: 1px solid transparent; }
.tag--outline { background: transparent; border-color: var(--rule-strong); }
.tag--accent { background: var(--accent-soft); color: var(--accent-text); }
.tag .icon, .tag__glyph { --icon-size: 12px; width: 12px; height: 12px; }
.tag[data-tier] { font-weight: 700; }
[data-tier="gold"] { --tier: var(--tier-gold); --on-tier: var(--on-tier-gold); --tier-fill: var(--tier-fill-gold); --tier-edge: var(--tier-edge-gold); }
[data-tier="silver"] { --tier: var(--tier-silver); --on-tier: var(--on-tier-silver); --tier-fill: var(--tier-fill-silver); --tier-edge: var(--tier-edge-silver); }
[data-tier="bronze"] { --tier: var(--tier-bronze); --on-tier: var(--on-tier-bronze); --tier-fill: var(--tier-fill-bronze); --tier-edge: var(--tier-edge-bronze); }
[data-tier="clay"] { --tier: var(--tier-clay); --on-tier: var(--on-tier-clay); --tier-fill: var(--tier-fill-clay); --tier-edge: var(--tier-edge-clay); --tier-shine: transparent; }
/* a material surface: gradient or hatch + 1 px edge + top highlight (R19) */
.tag[data-tier], .pip[data-tier], .tier-swatch[data-tier], .tier-strip > [data-tier], .mosaic > [data-tier], .res-strip li[data-tier], .hbar i[data-tier] {
background: var(--tier-fill, var(--tier)); color: var(--on-tier);
box-shadow: inset 0 0 0 1px var(--tier-edge, transparent), inset 0 1px 0 var(--tier-shine, transparent); }
[data-tier="clay"]:is(.tag, .pip, .tier-swatch, .res-strip li) { box-shadow: inset 0 0 0 1.5px var(--tier-edge); }
.tag__glyph { fill: currentColor; stroke: none; }
/* tier swatch / strip / mosaic */
.tier-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; background: var(--rule); }
.tier-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.tier-strip > * { height: 8px; border-radius: 2px; background: var(--rule); }
.mosaic { display: inline-grid; grid-template-columns: repeat(5, 8px); gap: 2px; }
.mosaic > * { width: 8px; height: 8px; border-radius: 1.5px; background: var(--rule); }
/* ── Chips (selectable filters, e.g. Practice) ──────────────────────────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--s-3); border-radius: var(--r-control);
border: 1px solid var(--rule-strong); background: transparent; color: var(--ink); font-family: var(--font-sans);
font-size: 0.875rem; font-weight: 600; transition: background-color var(--dur-state) var(--ease-standard),
color var(--dur-state) var(--ease-standard), border-color var(--dur-state) var(--ease-standard); position: relative; }
.chip::before { content: ""; position: absolute; inset: -4px 0; } /* 44px hit area */
.chip:hover { background: var(--surface-2); }
.chip[aria-pressed="true"], .chip[aria-checked="true"], .chip[aria-selected="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.chip .icon { --icon-size: 16px; }
.chip__check { display: none; }
.chip[aria-pressed="true"] .chip__check, .chip[aria-checked="true"] .chip__check { display: inline-block; }
.chip__count { font-family: var(--font-num); font-feature-settings: var(--num-features); font-size: 0.75rem; font-weight: 600;
min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--r-tag); display: inline-grid; place-items: center;
background: var(--surface-2); color: var(--ink-2); }
.chip[aria-pressed="true"] .chip__count, .chip[aria-checked="true"] .chip__count { background: rgb(255 255 255 / .2); color: inherit; }
/* ── Progress pips: five 32px circles, Roman numerals ───────────────────────────────────────────────────────── */
.pips { display: flex; gap: var(--s-2); align-items: center; list-style: none; margin: 0; padding: 0; }
.pip { width: var(--pip); height: var(--pip); border-radius: 50%; display: grid; place-items: center; flex: none;
border: 1px solid var(--rule-strong); color: var(--ink-3); background: transparent;
font-family: var(--font-sans); font-size: 0.75rem; line-height: 1; font-weight: 600; letter-spacing: 0.02em;
transition: background-color var(--dur-state) var(--ease-standard), color var(--dur-state) var(--ease-standard),
box-shadow var(--dur-state) var(--ease-standard); }
.pip[aria-current="step"], .pip.is-current { border-color: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--accent); }
.pip[data-tier] { border-color: transparent; }
.pips--sm .pip { --pip: 24px; font-size: 0.6875rem; } /* decorative only (numerals are aria-hidden); keep labels in text */
/* ── Cards & surfaces ──────────────────────────────────────────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-card); box-shadow: inset 0 1px 0 var(--highlight); }
.card--raised { border-color: transparent; box-shadow: var(--shadow-2), inset 0 1px 0 var(--highlight); }
.card--pad { padding: var(--s-5); }
.card--link { display: block; color: inherit; text-decoration: none; transition: border-color var(--dur-state) var(--ease-standard),
transform var(--dur-state) var(--ease-standard), box-shadow var(--dur-state) var(--ease-standard); }
.card--link:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-2); }
.card--link:active { transform: scale(.99); }
.photo-stage { background: var(--lightbox); border-radius: var(--r-card); overflow: hidden; position: relative; }
.photo-stage img { width: 100%; height: 100%; object-fit: contain; }
.divider { height: 1px; background: var(--rule); border: 0; margin: 0; }
/* sister-game card: shows the other game's accent + mark (set data-game on the card) */
.sister { display: flex; align-items: center; gap: var(--s-4); min-height: 72px; padding: var(--s-3) var(--s-4);
border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--rule); color: var(--ink); text-decoration: none;
transition: border-color var(--dur-state) var(--ease-standard), box-shadow var(--dur-state) var(--ease-standard); }
.sister:hover { border-color: var(--accent); box-shadow: var(--shadow-2); }
.sister__mark { width: 44px; height: 44px; flex: none; color: var(--accent); --mark-base: var(--ink); }
.sister__text { flex: 1; min-width: 0; }
.sister__title { font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 500; line-height: 1.3; }
.sister__meta { font-family: var(--font-sans); font-size: var(--fs-micro); color: var(--ink-3); font-weight: 500; }
.sister .icon { color: var(--accent-text); }
/* ── Wall label ("tombstone") — paper in BOTH themes, square corners ───────────────────────────────────────── */
.wall-label { background: var(--label-bg); color: var(--label-ink); padding: 20px; border-radius: var(--r-label);
box-shadow: var(--shadow-label), inset 0 0 0 1px var(--label-edge, transparent); position: relative; }
.wall-label a { color: var(--label-accent); }
.wall-label__eyebrow { font-family: var(--font-sans); font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); font-weight: 600;
letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--label-ink-3); margin-bottom: 6px; }
.wall-label__title { font-family: var(--font-serif); font-size: 1.375rem; line-height: 1.27; font-weight: 500; color: var(--label-ink);
font-variation-settings: "opsz" 24; text-wrap: balance; }
.wall-label__maker { font-family: var(--font-serif); font-size: 1rem; line-height: 1.4; color: var(--label-ink); margin-top: 2px; }
.wall-label__medium { font-family: var(--font-serif); font-style: italic; font-size: 0.9375rem; line-height: 1.45; color: var(--label-ink-2); margin-top: 4px; }
.wall-label__rule { height: 1px; background: var(--label-rule); border: 0; margin: 14px 0 10px; }
.wall-label__meta { font-family: var(--font-sans); font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--label-ink-2);
font-feature-settings: var(--num-features); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.wall-label__dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 0.9375rem; line-height: 1.4; }
.wall-label__dl dt { font-family: var(--font-sans); font-size: 0.75rem; line-height: 1.6; font-weight: 600; color: var(--label-ink-3);
letter-spacing: 0.02em; }
.wall-label__dl dd { margin: 0; color: var(--label-ink); }
.wall-label__note { font-family: var(--font-serif); font-size: var(--fs-body-l); line-height: var(--lh-body-l); color: var(--label-ink);
max-width: var(--w-measure); }
.wall-label__note::first-letter { font-weight: 500; }
.wall-label__acc { font-family: var(--font-sans); font-size: 0.75rem; color: var(--label-ink-3); font-feature-settings: var(--num-features); }
/* ── App bar ────────────────────────────────────────────────────────────────────────────────────────────────── */
.appbar { position: sticky; top: 0; z-index: var(--z-appbar); height: var(--appbar-h); display: flex; align-items: center; gap: var(--s-3);
padding: 0 max(var(--s-3), env(safe-area-inset-left)) 0 max(var(--s-3), env(safe-area-inset-left));
background: var(--bg); border-bottom: 1px solid var(--rule); }
@supports (backdrop-filter: blur(1px)) {
.appbar { background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.2) blur(12px); -webkit-backdrop-filter: saturate(1.2) blur(12px); }
}
.appbar__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-height: var(--hit); }
.appbar__mark { width: 28px; height: 28px; color: var(--accent); flex: none; --mark-base: var(--ink); }
.appbar__word { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; font-variation-settings: "opsz" 36; }
.appbar__sub { white-space: nowrap; font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.appbar__spacer { flex: 1; }
.appbar__score { font-family: var(--font-num); font-feature-settings: var(--num-features); font-size: 1.0625rem; font-weight: 600; }
@media (max-width: 520px) { .appbar__word { display: none; } .appbar__sub { font-size: 0.8125rem; } }
/* ── Inputs / combobox ─────────────────────────────────────────────────────────────────────────────────────── */
.field { display: grid; gap: 6px; }
.field__label { font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }
.field__hint { font-family: var(--font-sans); font-size: var(--fs-micro); color: var(--ink-3); }
.input-wrap { position: relative; display: block; }
.input-wrap > .icon { position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: var(--ink-3); pointer-events: none; }
.input { width: 100%; min-height: var(--control-h); padding: 0 14px; border-radius: var(--r-control); border: 1px solid var(--rule-strong);
background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 1rem; font-weight: 500; line-height: 1.25;
transition: border-color var(--dur-state) var(--ease-standard), box-shadow var(--dur-state) var(--ease-standard); appearance: none; }
.input-wrap > .icon ~ .input, .input--icon { padding-left: 42px; }
.input:hover { border-color: var(--ink-3); }
.input:focus-visible, .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .22); }
.input:disabled { background: var(--surface-2); color: var(--ink-3); border-color: var(--rule); }
.input[aria-invalid="true"] { border-color: #B3261E; }
.input::-webkit-search-cancel-button { display: none; }
.combobox { position: relative; }
.listbox { position: absolute; z-index: var(--z-popover); left: 0; right: 0; top: calc(100% + 6px); max-height: min(320px, 50vh); overflow: auto;
overscroll-behavior: contain; margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--rule);
border-radius: var(--r-control); box-shadow: var(--shadow-2); animation: p-pop-in var(--dur-state) var(--ease-out) both; }
.listbox--up { top: auto; bottom: calc(100% + 6px); }
.option { display: flex; align-items: center; gap: var(--s-3); min-height: var(--hit); padding: 8px 12px; border-radius: 6px; cursor: pointer;
font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; color: var(--ink); }
.option__main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.option__meta { font-size: var(--fs-micro); color: var(--ink-3); font-weight: 500; white-space: nowrap; }
.option mark { background: none; color: inherit; font-weight: 700; }
.option:hover { background: var(--surface-2); }
.option[aria-selected="true"], .option.is-active { background: var(--accent-soft); }
.listbox__empty { padding: 12px; font-family: var(--font-sans); font-size: 0.875rem; color: var(--ink-3); }
/* ── Range slider base (the game's timeline builds on it) ──────────────────────────────────────────────────── */
.range { -webkit-appearance: none; appearance: none; width: 100%; height: var(--hit); margin: 0; background: transparent; cursor: pointer;
--fill: 0%; }
.range::-webkit-slider-runnable-track { height: var(--track); border-radius: 3px;
background: linear-gradient(to right, var(--range-fill, transparent) var(--fill), var(--rule) var(--fill)); }
.range::-moz-range-track { height: var(--track); border-radius: 3px; background: var(--rule); }
.range::-moz-range-progress { height: var(--track); border-radius: 3px; background: var(--range-fill, transparent); }
.range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--thumb); height: var(--thumb); border-radius: 50%;
margin-top: calc((var(--track) - var(--thumb)) / 2); background: var(--surface); border: 1.5px solid var(--ink);
box-shadow: var(--shadow-1); transition: background-color var(--dur-state) var(--ease-standard), transform var(--dur-press) var(--ease-spring); }
.range::-moz-range-thumb { width: var(--thumb); height: var(--thumb); border-radius: 50%; background: var(--surface); border: 1.5px solid var(--ink);
box-shadow: var(--shadow-1); box-sizing: border-box; }
.range.is-set { --range-fill: var(--accent-line); }
.range.is-set::-webkit-slider-thumb { background: var(--accent); border-color: var(--accent); }
.range.is-set::-moz-range-thumb { background: var(--accent); border-color: var(--accent); }
.range:active::-webkit-slider-thumb { transform: scale(1.08); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--focus-ring); }
.range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--focus-ring); }
.range:disabled { cursor: default; opacity: .5; }
/* custom thumb for role="slider" timelines: empty "?" disc → accent when set */
.thumb { width: var(--thumb); height: var(--thumb); border-radius: 50%; display: grid; place-items: center; background: var(--surface);
border: 1.5px solid var(--ink); color: var(--ink); font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600;
box-shadow: var(--shadow-1); transition: background-color var(--dur-state) var(--ease-standard), transform var(--dur-press) var(--ease-spring); }
.thumb.is-set { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.bubble { display: inline-block; padding: 4px 10px; border-radius: 6px; background: var(--inverse-bg); color: var(--inverse-ink);
font-family: var(--font-num); font-feature-settings: var(--num-features); font-size: 1.25rem; line-height: 1.2; font-weight: 600;
box-shadow: var(--shadow-2); position: relative; white-space: nowrap; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: inherit; translate: -50% 0; rotate: 45deg; border-radius: 0 0 2px 0; }
/* ── Sheet (mobile bottom sheet; detents driven by the game via --sheet-y) ────────────────────────────────── */
.sheet { position: fixed; z-index: var(--z-sheet); left: 0; right: 0; bottom: 0; max-height: 72vh; max-height: 72svh; display: flex; flex-direction: column;
background: var(--surface); color: var(--ink); border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: var(--shadow-3), inset 0 1px 0 var(--highlight);
padding-bottom: env(safe-area-inset-bottom); transform: translateY(var(--sheet-y, 0)); will-change: transform;
transition: transform var(--dur-panel) var(--ease-out); }
.sheet.is-dragging { transition: none; }
.sheet__grabber { display: grid; place-items: center; height: 28px; width: 100%; flex: none; cursor: grab; touch-action: none; }
.sheet__grabber::before { content: ""; width: 36px; height: 4px; border-radius: 2px; background: var(--rule-strong); opacity: .7; }
.sheet__body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 var(--s-4) var(--s-5); }
.scroll-fade { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); }
.scroll-fade.is-end { -webkit-mask-image: none; mask-image: none; }
.more-hint { position: sticky; bottom: 0; display: flex; justify-content: center; pointer-events: none; }
.more-hint > span { pointer-events: auto; font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: 600; color: var(--ink-2);
background: var(--surface); padding: 4px 10px; border-radius: var(--r-round); box-shadow: var(--shadow-1); }
/* ── Dialog ───────────────────────────────────────────────────────────────────────────────────────────────── */
.dialog { border: 0; padding: 0; width: min(560px, calc(100vw - 32px)); max-height: min(86vh, 760px); border-radius: var(--r-sheet);
background: var(--surface); color: var(--ink); box-shadow: var(--shadow-3), inset 0 1px 0 var(--highlight); overflow: hidden; }
.dialog[open] { display: flex; flex-direction: column; animation: p-dialog-in var(--dur-panel) var(--ease-out) both; }
.dialog::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: p-fade-in var(--dur-state) var(--ease-standard) both; }
.dialog__head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-2) var(--s-5); }
.dialog__title { flex: 1; font-family: var(--font-serif); font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 500; }
.dialog__body { padding: var(--s-2) var(--s-5) var(--s-5); overflow: auto; }
.dialog__foot { display: flex; gap: var(--s-3); justify-content: flex-end; padding: var(--s-4) var(--s-5) var(--s-5); border-top: 1px solid var(--rule); }
@media (max-width: 560px) {
.dialog.dialog--sheet { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding-bottom: env(safe-area-inset-bottom); }
.dialog.dialog--sheet[open] { animation-name: p-sheet-in; }
}
/* ── Skeleton / toast / stat ─────────────────────────────────────────────────────────────────────────────── */
.skeleton { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--r-tag); color: transparent !important; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgb(255 255 255 / .45), transparent);
animation: p-shimmer 1.4s var(--ease-in-out) infinite; }
[data-theme="dark"] .skeleton::after { background: linear-gradient(90deg, transparent, rgb(255 255 255 / .06), transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .skeleton::after { background: linear-gradient(90deg, transparent, rgb(255 255 255 / .06), transparent); } }
.skeleton--text { height: 0.9em; margin: 0.3em 0; border-radius: 3px; }
.toast-region { position: fixed; z-index: var(--z-toast); left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom));
display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.toast { pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; max-width: min(480px, 100%); min-height: 44px; padding: 10px 16px;
border-radius: var(--r-control); background: var(--inverse-bg); color: var(--inverse-ink); box-shadow: var(--shadow-3);
font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 600; line-height: 1.3;
animation: p-rise var(--dur-panel) var(--ease-spring) both; }
.toast .icon { --icon-size: 18px; color: inherit; }
.toast.is-leaving { animation: p-fade-out var(--dur-state) var(--ease-in) both; }
.stat { display: grid; gap: 2px; }
.stat__value { font-family: var(--font-num); font-feature-settings: var(--num-features); font-size: 1.5rem; line-height: 1.1; font-weight: 600; letter-spacing: -0.01em; }
.stat__label { font-family: var(--font-sans); font-size: var(--fs-micro); line-height: var(--lh-micro); font-weight: 500; color: var(--ink-3); }
.stat-row { display: flex; flex-wrap: wrap; gap: var(--s-5); }
/* ── Map SVG roles (shared by both games) ────────────────────────────────────────────────────────────────── */
.map-sea { fill: var(--sea); }
.map-land { fill: var(--land); stroke: var(--coast); stroke-width: .8; vector-effect: non-scaling-stroke; pointer-events: none; }
.map-waterline { fill: none; stroke: var(--coast); vector-effect: non-scaling-stroke; pointer-events: none; stroke-linejoin: round; }
.map-waterline--1 { stroke-width: 3; stroke-opacity: .18; }
.map-waterline--2 { stroke-width: 7; stroke-opacity: .09; }
.map-waterline--3 { stroke-width: 13; stroke-opacity: .04; }
.map-border { fill: none; stroke: var(--border-modern); stroke-width: .6; vector-effect: non-scaling-stroke; pointer-events: none; }
.map-border--hist { stroke: var(--border-hist); stroke-width: 1; stroke-dasharray: 3 2; }
.map-graticule { fill: none; stroke: var(--graticule); stroke-width: .5; vector-effect: non-scaling-stroke; pointer-events: none; }
.map-sea-label { fill: var(--sea-label); font-family: var(--font-serif); font-style: italic; font-size: 13px; letter-spacing: .18em; pointer-events: none; }
.map-zone { fill: rgb(var(--accent-rgb) / .12); stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.map-zone-hatch { stroke: rgb(var(--accent-rgb) / .35); stroke-width: 1; }
.map-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.map-label { font-family: var(--font-sans); font-size: 12px; font-weight: 600; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; fill: var(--ink); }
/* ── Misc ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-ui);
color: var(--accent-text); text-decoration: none; }
.link-arrow .icon { --icon-size: 18px; transition: transform var(--dur-state) var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(3px); }
.container { width: 100%; max-width: calc(var(--container, 1200px) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--read { max-width: calc(var(--w-read) + 2 * var(--gutter)); }
.fill-viewport { min-height: 100vh; min-height: 100dvh; }
.stack > * + * { margin-top: var(--stack, var(--s-4)); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--cluster, var(--s-3)); align-items: center; }
}
/* ---------------------------------------------------------------------------------------------------------------------
GAME CHROME — one set of classes for BOTH pages (round-2 consistency table C1–C45). Pages keep only their layout.
--------------------------------------------------------------------------------------------------------------------- */
@layer components {
:root { --container: 1200px; }
:root, [data-game="objects"] { --label-accent: #1E6B5C; }
[data-game="music"] { --label-accent: #A8361F; }
/* R20: the dark label is a dimmed paper with a 1 px rule edge; its links use the dark accent */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]), :root:not([data-theme="light"]) [data-game]:not([data-theme="light"]) { --label-accent: var(--accent); --label-edge: var(--label-rule); } }
[data-theme="dark"], [data-theme="dark"] [data-game]:not([data-theme="light"]) { --label-accent: var(--accent); --label-edge: var(--label-rule); }
.icon--fill { fill: currentColor; stroke: none; }
.page { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto;
padding: var(--s-6) max(var(--gutter), env(safe-area-inset-right)) var(--s-7) max(var(--gutter), env(safe-area-inset-left)); }
.page--read { max-width: calc(760px + 2 * var(--gutter)); }
.page-head { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
.page-head .lede { color: var(--ink-2); max-width: 56ch; font-size: var(--fs-body-l); line-height: var(--lh-body-l); }
.back { margin: var(--s-6) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); align-items: center; }
.linkbtn { color: var(--accent-text); font-family: var(--font-sans); font-weight: 600; text-decoration: underline; text-underline-offset: .2em;
text-decoration-color: var(--accent-line); min-height: 32px; }
.store-note { margin-top: var(--s-5); padding: var(--s-3) var(--s-4); border: 1px dashed var(--rule-strong); border-radius: var(--r-control);
font-family: var(--font-sans); font-size: 0.875rem; color: var(--ink-2); max-width: 560px; }
.site-footer { border-top: 1px solid var(--rule); margin-top: var(--s-6);
padding: var(--s-5) max(var(--gutter), env(safe-area-inset-right)) calc(var(--s-6) + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left)); }
.site-footer > div { max-width: var(--container); margin: 0 auto; display: grid; gap: var(--s-2); font-family: var(--font-sans); font-size: 0.8125rem; line-height: 1.6; color: var(--ink-3); }
.site-footer a { color: var(--ink-2); }
.site-footer .nowrap { white-space: nowrap; }
body[data-screen="game"] .site-footer { display: none; }
.btn[aria-busy="true"] { opacity: .85; }
.btn[aria-busy="true"]::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
animation: p-spin .8s linear infinite; }
.btn[aria-busy="true"] > .icon { display: none; }
@keyframes p-spin { to { transform: rotate(360deg); } }
/* ── App bar: brand left · pips + score centred on the viewport (game) · tools right; ☰ on phones (C3–C6) */
.appbar { gap: var(--s-2); padding-inline: max(var(--s-3), env(safe-area-inset-left)) max(var(--s-3), env(safe-area-inset-right)); }
.appbar__brand { padding-right: var(--s-2); border-radius: var(--r-control); }
.appbar__mark { width: 30px; height: 30px; }
.appbar__lock { display: grid; gap: 3px; line-height: 1; }
.appbar__word { font-size: 1.25rem; line-height: 1; }
.appbar__sub { font-size: 0.75rem; line-height: 1; }
body:not([data-screen="game"]) .appbar__sub { display: none; } /* never the game word AND the switcher */
.appbar__game { position: absolute; left: 50%; top: 0; bottom: 0; translate: -50% 0; display: none; align-items: center; gap: var(--s-4); }
body[data-screen="game"] .appbar__game { display: flex; }
.appbar__game .pips { gap: 6px; }
.appbar__game .pip { --pip: 30px; }
.appbar__score { display: inline-flex; align-items: baseline; gap: 4px; min-width: 5ch; font-size: 1.0625rem; font-weight: 600; margin: 0; }
.appbar__pts { font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 500; color: var(--ink-3); }
.appbar__tools { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.appbar__tools .btn--icon .icon { --icon-size: 21px; }
#menubtn { display: none; }
body[data-screen="game"] .switch { display: none; }
@media (max-width: 767.98px) { .appbar__pts { display: none; } }
@media (max-width: 759.98px) {
.appbar__lock { display: none; }
.appbar__brand { padding-right: 0; }
.appbar__tools > :not(#menubtn) { display: none; }
body[data-screen="game"] .appbar__tools > #fbbtn:not([hidden]) { display: inline-flex; } /* feedback one tap away while playing (menu elsewhere) */
#menubtn { display: inline-flex; }
.appbar__game { gap: var(--s-3); }
.appbar__game .pips { gap: 4px; }
.appbar__game .pip { --pip: 26px; }
/* pips + score flow between the brand and the tools (centred in the gap), so "10,000" never runs under the
feedback button */
body[data-screen="game"] .appbar__game { position: static; translate: none; margin-inline: auto; min-width: 0; }
body[data-screen="game"] .appbar__tools { margin-left: 0; }
body[data-screen="game"] .appbar__spacer { display: none; }
}
@media (max-width: 359.98px) { .appbar__game .pip { --pip: 24px; } .appbar__game { gap: var(--s-2); } }
/* journeys: up to 12 stops in the phone app bar */
@media (max-width: 759.98px) { .appbar__game .pips[data-many] { gap: 2px; } .appbar__game .pips[data-many] .pip { --pip: 21px; font-size: 0.5625rem; letter-spacing: -0.02em; } }
/* narrow phones in a game (P2-2): tighter bar and pips so brand · pips · score · tools fit side by side (5 pips and
"50,000" from 345 px, 8 stops and "80,000" from 385 px); below that a journey's bar drops the brand (the menu goes home) */
@media (max-width: 429.98px) {
body[data-screen="game"] .appbar { gap: 4px; padding-inline: max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-right)); }
body[data-screen="game"] .appbar__game { gap: var(--s-2); }
.appbar__game .pip { --pip: 24px; }
.appbar__game .pips[data-many] .pip { --pip: 20px; }
}
@media (max-width: 384.98px) { body[data-screen="game"]:has(.pips[data-many]) .appbar__brand { display: none; } }
@media (max-width: 344.98px) { body[data-screen="game"] .appbar__brand { display: none; } }
@media (max-width: 359.98px) { .appbar__game .pips[data-many] .pip { --pip: 18px; } }
/* games switcher: mini brand marks, current = ink on surface, 36 px tall, 44 px hit area (C5) */
.switch { display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px; background: var(--surface-2); }
.switch a { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 8px;
font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.switch a::before { content: ""; position: absolute; inset: -4px 0; }
.switch a:hover { color: var(--ink); }
.switch a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.switch__mark { flex: none; width: 18px; height: 18px; color: var(--accent); --mark-base: var(--ink); }
@media (max-width: 379.98px) { .switch__mark { display: none; } .switch a { padding: 0 11px; } }
/* menu sheet (phones: theme, sound, screens) */
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; flex-wrap: wrap; }
.menu-row > span { font-family: var(--font-sans); font-weight: 600; font-size: 0.9375rem; }
.menu-list { display: grid; gap: 2px; margin-top: var(--s-3); }
.menu-list .btn { justify-content: flex-start; width: 100%; }
/* ── Intro card (tiles) + help (C15) */
.intro-lede { font-size: var(--fs-body-l); line-height: var(--lh-body-l); color: var(--ink-2); }
.intro-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin-top: var(--s-4); }
.intro-steps > div { display: grid; justify-items: center; gap: 6px; padding: var(--s-3) 4px; border-radius: var(--r-card); background: var(--surface-2); text-align: center;
font-family: var(--font-sans); font-weight: 600; font-size: 0.875rem; }
.intro-steps .icon { --icon-size: 26px; color: var(--accent-text); }
.steps { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.steps li { display: grid; grid-template-columns: 52px 1fr; gap: var(--s-3); align-items: center; }
.steps .vig { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.steps .vig .icon { --icon-size: 24px; }
.steps b { display: block; font-family: var(--font-sans); font-weight: 600; font-size: 0.9375rem; }
.steps p { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.45; }
.help-h { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--ink-3); margin-top: var(--s-5); }
.help-p { color: var(--ink-2); font-size: 0.9375rem; margin-top: var(--s-2); }
/* "The buttons" (shared/help.js) */
.keys { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.keys li { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-3); align-items: start; }
.keys__i { min-height: 32px; display: flex; align-items: center; justify-content: center; color: var(--ink-2); }
.keys__i .icon { --icon-size: 20px; }
.keys__pair { display: flex; gap: 2px; } .keys__pair .icon { --icon-size: 16px; }
.keys__g { font-family: var(--font-sans); font-weight: 600; white-space: nowrap; }
.keys__pip { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 0.6875rem; box-shadow: inset 0 0 0 1.5px var(--rule-strong); }
.keys__chip { font-size: 0.625rem; padding: 3px 5px; border-radius: var(--r-round); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.keys p { color: var(--ink-2); font-size: 0.875rem; line-height: 1.45; padding-top: 6px; }
.keys b { color: var(--ink); font-family: var(--font-sans); font-weight: 600; }
.legend { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.legend li { display: flex; align-items: center; gap: var(--s-2); font-family: var(--font-sans); font-size: 0.8125rem; color: var(--ink-2); font-feature-settings: var(--num-features); }
/* ── Coach marks: "Tip 1 of 3", accent Next, Skip tips on every step (C16) */
.coach { position: fixed; z-index: var(--z-popover); max-width: min(300px, calc(100vw - 24px)); padding: 12px 14px 10px; border-radius: var(--r-card);
background: var(--inverse-bg); color: var(--inverse-ink); box-shadow: var(--shadow-3); font-family: var(--font-sans); font-size: 0.9375rem;
line-height: 1.4; animation: p-rise var(--dur-panel) var(--ease-spring) both; pointer-events: none; }
.coach button { pointer-events: auto; }
.coach::after { content: ""; position: absolute; left: var(--ax, 50%); width: 12px; height: 12px; background: inherit; translate: -50% 0; rotate: 45deg; }
.coach[data-side="top"]::after { bottom: -5px; } .coach[data-side="bottom"]::after { top: -5px; }
.coach[data-side="right"]::after { left: auto; right: -5px; top: var(--ay, 50%); translate: 0 -50%; }
.coach[data-side="left"]::after { left: -5px; top: var(--ay, 50%); translate: 0 -50%; }
.coach[data-side="none"]::after { display: none; }
.coach__step { font-size: 0.75rem; font-weight: 700; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; opacity: .7; margin-bottom: 2px; }
.coach__text { font-weight: 600; }
.coach__sub { font-size: 0.8125rem; font-weight: 500; opacity: .8; margin-top: 2px; }
.coach__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; }
.coach button { min-height: 36px; padding: 0 10px; border-radius: 6px; font-weight: 600; font-size: 0.875rem; color: inherit; }
.coach .coach__next { background: var(--accent); color: var(--on-accent); }
.coach .coach__skip { opacity: .75; text-decoration: underline; text-underline-offset: .2em; padding: 0 2px; }
/* ── Home: hero copy + CTA left, "today" plinth card right, nav + sister card below (C8–C14) */
.home { padding-top: clamp(var(--s-5), 5vh, var(--s-8)); }
.home-grid { display: grid; gap: var(--s-6); align-items: center; }
.home-copy { display: grid; gap: var(--s-4); align-content: center; justify-items: start; }
.home-title { font-family: var(--font-serif); font-size: clamp(2.25rem, 1.6rem + 3vw, 4.25rem); line-height: 1.04; font-weight: 450;
letter-spacing: -0.02em; font-variation-settings: "opsz" 72; max-width: 13ch; }
.home-title em { font-style: italic; color: var(--accent-text); font-weight: 400; }
.home-lede { font-size: var(--fs-body-l); line-height: var(--lh-body-l); color: var(--ink-2); max-width: 38ch; }
/* journeys first (layers.js fills #home-journeys), today's gallery under them as the second card (C-journeys) */
.home > .home-lede { margin-top: var(--s-3); }
.home-journeys { display: grid; gap: var(--s-5); margin: var(--s-6) 0 var(--s-7); }
.home-journeys[hidden] { display: none; }
.home-journeys:empty { min-height: 470px; } /* room for the shelf while layers.js loads: the gallery card doesn't jump */
.home-dh { font-family: var(--font-serif); font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); line-height: 1.15; font-weight: 450; letter-spacing: -0.01em; }
.status { display: grid; gap: var(--s-3); width: 100%; max-width: 420px; justify-items: stretch; }
.status .btn--block { max-width: none; white-space: normal; text-align: center; height: auto; padding-block: 10px; }
.status__msg { font-family: var(--font-sans); font-size: 0.9375rem; color: var(--ink-2); }
.status__msg b { color: var(--ink); font-feature-settings: var(--num-features); }
.status__big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.status__big b { font-family: var(--font-serif); font-size: 2.75rem; line-height: 1; font-weight: 450; letter-spacing: -0.02em; font-feature-settings: "lnum" 1, "tnum" 1; }
.status__big small { font-family: var(--font-sans); color: var(--ink-3); font-size: 0.9375rem; font-weight: 600; }
.countdown { font-family: var(--font-sans); font-size: 0.875rem; color: var(--ink-3); }
.countdown b { color: var(--ink); font-feature-settings: var(--num-features); font-weight: 600; }
.streak { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.streak .icon { color: var(--accent-text); --icon-size: 20px; }
.streak span { color: var(--ink-2); font-weight: 500; }
.yday { font-family: var(--font-sans); font-size: 0.875rem; color: var(--ink-2); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.yday b { color: var(--ink); font-weight: 600; }
.home-lines { display: grid; gap: var(--s-2); }
#ly-j-h { scroll-margin-top: 80px; }
.today { position: relative; padding: var(--s-5); display: grid; gap: var(--s-4); background: var(--surface); border: 1px solid var(--rule);
border-radius: var(--r-card); box-shadow: var(--shadow-2), inset 0 1px 0 var(--highlight); overflow: hidden; min-width: 0; }
.today__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.today__head .t-micro { white-space: nowrap; }
.today__media { position: relative; }
/* the home picture is a button that does what the main button does: no button chrome (C-android) */
button.today__media { display: block; width: 100%; padding: 0; border: 0; font: inherit; color: inherit; cursor: pointer; text-align: start; }
/* Android Chrome: a tap on plain text or a picture started Touch to Search, a long press opened the image menu (Google
Lens), and either took the player to a Google search. Photos on home and in the game are not selectable and have no
callout; a picture on home that is not inside a button or link takes no taps. Lesson text stays selectable. */
.home :is(img, svg), .today, .stage, .lb-stage, .r-thumb { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.home :is(img, svg):not(:is(button, a) *) { pointer-events: none; }
.programme { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--rule); }
.programme li { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: 7px 0; min-height: 40px;
border-bottom: 1px solid var(--rule); font-family: var(--font-sans); font-size: 0.875rem; color: var(--ink-2); }
.programme .rn { font-family: var(--font-serif); font-size: 1.0625rem; color: var(--accent-text); font-weight: 500; white-space: nowrap; }
.programme .what { display: flex; align-items: center; gap: 10px; min-width: 0; }
.programme .what > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.programme .thumb { width: 28px; height: 28px; flex: none; border-radius: 4px; object-fit: cover; background: var(--lightbox); }
.programme .thumb--round { border-radius: 50%; filter: grayscale(1) contrast(1.08); }
.programme .dur { font-feature-settings: var(--num-features); color: var(--ink-3); white-space: nowrap; }
.programme li[data-tier] .rn::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 1.5px; background: var(--tier-fill, var(--tier)); box-shadow: inset 0 0 0 1px var(--tier-edge, transparent); vertical-align: 2px; }
.programme li[data-tier] .what > span { color: var(--ink); }
.home-foot { display: grid; gap: var(--s-4); margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.home-nav { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); margin-left: calc(-1 * var(--s-3)); }
.home-nav .btn { --btn-fg: var(--ink-2); }
.home-nav .btn:hover { --btn-fg: var(--ink); }
.home-nav .icon { color: var(--ink-3); }
.sister { max-width: 560px; }
.sister__title, .sister__meta { display: block; }
.sister__meta b { color: var(--ink-2); font-weight: 600; }
@media (min-width: 760px) {
.home-grid { grid-template-columns: minmax(0, 1.05fr) minmax(360px, 460px); gap: var(--s-7); }
.home-foot { grid-template-columns: minmax(0, 1.05fr) minmax(360px, 460px); gap: var(--s-7); align-items: center; margin-top: var(--s-7); }
.home-foot .sister { max-width: none; }
.home-journeys:empty { min-height: 240px; }
}
@media (orientation: landscape) and (max-height: 520px) and (min-width: 600px) {
.home { padding-top: var(--s-4); }
.home-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: var(--s-5); }
.home-title { font-size: 2.25rem; }
.home-lede { display: none; }
}
@media (max-width: 759.98px) { .status { max-width: none; } }
/* ── Map chrome: rounded-square controls, search, light hint chip bottom-centre, epoch tag, loupe (C19–C22) */
.map-ui { position: absolute; z-index: var(--z-map-ui); }
.map-ctl { right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
.mapbtn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-control); background: var(--surface); color: var(--ink);
border: 1px solid var(--rule); box-shadow: var(--shadow-2); transition: background-color var(--dur-state); }
.mapbtn:hover { background: var(--surface-2); }
.mapbtn[hidden] { display: none; }
.map-search { left: 10px; top: 10px; width: min(300px, calc(100% - 76px)); display: flex; gap: 6px; }
.map-search .combobox { flex: 1; min-width: 0; }
.map-search .input { min-height: 44px; box-shadow: var(--shadow-2); border-color: var(--rule); }
.map-search .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .28), var(--shadow-2); } /* the floating field keeps a focus ring (R3) */
.map-search .listbox { z-index: 30; max-height: min(300px, 45vh); }
.map-search.is-collapsed .combobox { display: none; }
.map-search:not(.is-collapsed) #searchbtn { display: none; }
.map-tag { left: 10px; bottom: 10px; max-width: calc(100% - 20px); pointer-events: none; padding: 4px 10px; border-radius: var(--r-round); background: var(--surface);
border: 1px solid var(--rule); font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: 600; color: var(--ink-2); box-shadow: var(--shadow-1);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity var(--dur-state); }
.map-tag.is-zone { color: var(--accent-text); white-space: normal; border-radius: var(--r-control); }
.map-hint { left: 50%; bottom: 10px; translate: -50% 0; pointer-events: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
padding: 6px 12px; border-radius: var(--r-round); background: var(--surface); color: var(--ink-2); border: 1px solid var(--rule);
font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600; box-shadow: var(--shadow-2); transition: opacity var(--dur-panel) var(--ease-standard); }
.map-hint .icon { --icon-size: 16px; color: var(--accent-text); }
.map-hint.gone { opacity: 0; }
.g-map:has(.map-hint:not(.gone)) .map-tag { opacity: 0; }
.loupe { position: absolute; left: 0; top: 0; z-index: calc(var(--z-map-ui) + 5); width: 104px; height: 104px; border-radius: 50%; overflow: hidden; pointer-events: none;
background: var(--sea); box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--rule-strong), var(--shadow-3); }
.loupe svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.loupe::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; z-index: 1;
background: var(--marker-guess); border: 2.5px solid var(--marker-ring); box-shadow: 0 0 0 1px var(--marker-guess); }
/* ── Dock: status pair (where / when) and the year head (label row + readout) (C23, C25, C26) */
.state-pair { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
.state { display: flex; align-items: center; gap: 7px; min-width: 0; margin: 0; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600; color: var(--ink-3); }
.state .icon { --icon-size: 16px; flex: none; }
.state > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.state.is-set { color: var(--ink); }
.state.is-set .icon { color: var(--accent-text); }
.state em { font-style: normal; font-weight: 500; color: var(--ink-3); }
.state-pair.nudged { animation: p-nudge 300ms var(--ease-standard) both; }
.year-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: 0 6px; min-height: 26px; }
.year-head .eyebrow { white-space: nowrap; }
.yearval { font-family: var(--font-sans); font-feature-settings: var(--num-features); font-size: 1.25rem; font-weight: 600; line-height: 1.2; color: var(--ink);
display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; min-width: 0; overflow: hidden; }
.yearval .era { font-size: 0.8125rem; font-weight: 600; color: var(--accent-text); }
.yearval.is-unset { font-size: 0.875rem; font-weight: 500; color: var(--ink-3); }
.yearval .you { font-size: 0.8125rem; font-weight: 500; color: var(--ink-2); }
.tl-era b { font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600; color: var(--ink-3); line-height: 1; white-space: nowrap; position: relative; }
.tl-era::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: 2px; height: 1px; background: var(--rule-strong); opacity: .7; }
.tl-era.is-on b { color: var(--accent-text); }
.tl-era.is-on::after { background: var(--accent); height: 2px; opacity: 1; }
.revealed .tl-era::after { opacity: .35; }
.revealed .tl-era.is-on::after { background: var(--rule-strong); height: 1px; }
.revealed .nudge { visibility: hidden; }
/* era captions keep the 13 px floor on phones: up to 400 px wide the ± nudges shrink to 28 px (the hit area stays
44 × 44, drawn over the track's end padding), which gives the track the room the era names need at 360-393 */
@media (max-width: 399.98px) {
.nudge { position: relative; width: 28px !important; height: 28px !important; min-height: 28px !important; flex: none; }
.nudge::before { content: ""; position: absolute; inset: -8px; } /* 44 × 44 hit area */
.nudge { z-index: 1; }
.nudge .icon { --icon-size: 18px; }
}
/* ── Reveal: one score block — total (serif) + tier stamp, one parts line; tier legend once (C2, C27) */
.r-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 28px; }
.r-score { display: flex; align-items: center; justify-content: space-between; gap: 4px var(--s-3); flex-wrap: wrap; }
.r-tot { font-family: var(--font-serif); font-size: clamp(2.25rem, 2rem + 1vw, 2.75rem); line-height: 1; font-weight: 450; letter-spacing: -0.02em; font-variation-settings: "opsz" 72;
font-feature-settings: "lnum" 1, "tnum" 1; display: flex; align-items: baseline; gap: 8px; margin: 0; }
.r-tot b { font-weight: 450; }
.r-tot small { font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; color: var(--label-ink-3); letter-spacing: 0; white-space: nowrap; }
.r-tier.tag { height: 28px; padding: 0 10px; transform-origin: 70% 50%; }
.r-parts { font-family: var(--font-sans); font-size: 0.8125rem; line-height: 1.45; color: var(--label-ink-2); font-weight: 500; font-feature-settings: var(--num-features); margin-top: 4px; }
.r-parts b { color: var(--label-ink); font-weight: 600; }
.r-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--s-3); font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; color: var(--label-ink-3); }
.r-legend .tag { height: 22px; padding: 0 7px; letter-spacing: 0.02em; font-feature-settings: var(--num-features); }
.r-note .eyebrow { color: var(--label-accent); margin-bottom: 4px; }
/* ── Results (C30–C37) */
.res { display: grid; gap: var(--s-6); }
.res-hero { display: grid; gap: var(--s-4); align-content: start; }
.res-title { margin-top: 6px; }
.res-total { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0; }
.res-total .t-hero-num { font-size: clamp(4rem, 2.8rem + 5vw, 6.5rem); }
.res-total small { font-family: var(--font-sans); font-size: 1.125rem; font-weight: 600; color: var(--ink-3); font-feature-settings: var(--num-features); }
.res-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; list-style: none; margin: 0; padding: 0; container-type: inline-size; }
.res-strip li { display: flex; align-items: center; justify-content: space-between; gap: 4px; height: 40px; padding: 0 10px; border-radius: 6px; min-width: 0;
background: var(--surface-2); color: var(--ink-3); font-family: var(--font-sans); font-weight: 700; font-size: 0.8125rem;
font-feature-settings: var(--num-features); }
.res-strip li:not([data-tier]) { border: 1px dashed var(--rule-strong); background: transparent; }
.res-strip .g { display: inline-flex; align-items: center; gap: 5px; }
.res-strip svg { width: 12px; height: 12px; fill: currentColor; flex: none; }
.res-strip .s { font-weight: 600; overflow: hidden; }
@container (max-width: 470px) { .res-strip .s { display: none; } .res-strip li { justify-content: center; padding: 0 4px; } }
.res-strip.pop li { animation: p-pop var(--dur-spring) var(--ease-spring) both; animation-delay: calc(var(--i) * 120ms + 300ms); }
.res-stats { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); }
.res-stats .stat__value { display: inline-flex; align-items: center; gap: 4px; }
.res-stats .stat__value .icon { color: var(--accent-text); --icon-size: 20px; }
.res-stats .up { color: var(--accent-text); }
.countline { font-family: var(--font-sans); font-size: 0.875rem; color: var(--ink-3); margin: 0; }
.countline b { color: var(--ink); font-feature-settings: var(--num-features); }
.res-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.res-actions .btn { flex: 1 1 160px; max-width: 280px; }
.share-panel { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-4); align-items: center; padding: var(--s-3); border-radius: var(--r-card);
background: var(--surface); border: 1px solid var(--rule); }
.share-panel img { width: 120px; height: 150px; border-radius: 6px; box-shadow: var(--shadow-2); object-fit: cover; background: var(--surface-2); }
.share-panel > div { display: grid; gap: var(--s-2); justify-items: start; }
.share-panel p { font-family: var(--font-sans); font-size: 0.875rem; color: var(--ink-2); }
.share-fallback { width: 100%; min-height: 120px; border: 1px solid var(--rule-strong); border-radius: var(--r-control); background: var(--surface); color: var(--ink);
font: 500 0.875rem/1.5 var(--font-sans); padding: var(--s-3); }
.recap { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--sea); border: 1px solid var(--rule); aspect-ratio: 16 / 9; }
.recap svg { width: 100%; height: 100%; display: block; }
.recap .map-land { stroke-width: .7; }
.rounds { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.rrow { display: grid; grid-template-columns: 1.6em 56px minmax(0, 1fr) auto; gap: 4px var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); align-items: center; }
.rrow__rn { font-family: var(--font-serif); font-size: 1.0625rem; color: var(--accent-text); font-weight: 500; text-align: right; }
.rrow__thumb { width: 56px; height: 56px; border-radius: 6px; background: var(--lightbox); overflow: hidden; display: grid; place-items: center; color: var(--ink-3); }
.rrow__thumb img { width: 100%; height: 100%; object-fit: cover; }
.rrow__thumb--portrait img { filter: grayscale(1) sepia(.25) hue-rotate(var(--duo, -12deg)) contrast(1.06); }
.rrow__thumb .icon { --icon-size: 22px; }
.rrow h2 { font-size: 1.0625rem; line-height: 1.3; font-weight: 500; overflow-wrap: anywhere; }
.rrow .who { font-family: var(--font-sans); font-size: 0.8125rem; color: var(--ink-2); margin-top: 2px; overflow-wrap: anywhere; }
.rrow .off { font-family: var(--font-sans); font-size: 0.75rem; color: var(--ink-3); margin-top: 3px; }
.rrow .pts { display: grid; justify-items: end; gap: 6px; }
.rrow .pts b { font-family: var(--font-sans); font-feature-settings: var(--num-features); font-size: 1.125rem; font-weight: 600; }
.res-side { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.res-foot { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); margin-left: calc(-1 * var(--s-3)); }
.res-foot .btn--quiet .icon { color: var(--ink-3); }
@media (min-width: 900px) { .res { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-7); } }
/* ── Archive calendar: date + tier mosaic + legend (C40) */
.months { display: grid; gap: var(--s-6); }
.month h2 { font-size: 1.25rem; margin-bottom: var(--s-3); display: flex; align-items: baseline; gap: 10px; }
.month h2 small { font-family: var(--font-sans); font-size: 0.8125rem; color: var(--ink-3); font-weight: 500; }
.dow, .cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; list-style: none; margin: 0; padding: 0; }
.dow { margin-bottom: 6px; }
.dow span { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; color: var(--ink-3); text-align: center; }
.cal li { min-width: 0; }
.day { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 72px; min-height: 48px; display: grid; grid-template-rows: auto 1fr; align-items: start; justify-items: start;
padding: 6px 7px; border-radius: 8px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); text-align: left;
transition: border-color var(--dur-state), box-shadow var(--dur-state), transform var(--dur-press); }
.day:hover:not(:disabled) { border-color: var(--ink-3); box-shadow: var(--shadow-1); }
.day:active:not(:disabled) { transform: scale(.97); }
.day .dn { font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600; font-feature-settings: var(--num-features); line-height: 1; }
.day .mosaic { align-self: end; grid-template-columns: repeat(5, minmax(3px, 7px)); gap: 1.5px; }
.day .mosaic > * { width: auto; height: 7px; }
.day.is-today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.day.is-prog { border-style: dashed; border-color: var(--accent-line); }
.day:disabled { background: transparent; border-color: transparent; color: var(--ink-3); cursor: default; opacity: .6; }
.arc-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-family: var(--font-sans); font-size: 0.8125rem; color: var(--ink-3); margin-top: var(--s-3); }
.arc-legend > span { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 400px) { .day { padding: 4px 5px; } }
/* ── Practice + stats (C38, C39, C41) */
.fgroup { margin-top: var(--s-5); }
.fgroup h2 { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-3); }
.chips-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chips-row .chip { min-height: 40px; font-size: 0.9375rem; }
.pcount { margin-top: var(--s-5); font-family: var(--font-sans); color: var(--ink-2); font-weight: 500; }
.pcount b { font-feature-settings: var(--num-features); font-size: 1.5rem; color: var(--ink); margin-right: 4px; }
.st-hero { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-4) var(--s-7); margin-bottom: var(--s-6); }
.st-hero .t-hero-num { font-size: clamp(3.5rem, 2.8rem + 3vw, 5.5rem); }
.st-tiles { list-style: none; margin: 0; padding: 0 0 8px; display: flex; flex-wrap: wrap; gap: var(--s-5); }
.st-tiles li { display: grid; gap: 2px; }
.st-tiles b { font-family: var(--font-sans); font-feature-settings: var(--num-features); font-size: 1.5rem; font-weight: 600; line-height: 1.1; white-space: nowrap; }
.st-tiles span { font-family: var(--font-sans); font-size: var(--fs-micro); color: var(--ink-3); font-weight: 500; white-space: nowrap; }
.st-grid { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 900px) { .st-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.hist { width: 100%; border-collapse: collapse; }
.hist caption { text-align: left; font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--ink-3); padding-bottom: var(--s-3); }
.hist th { font-family: var(--font-sans); font-weight: 500; text-align: left; white-space: nowrap; padding: 5px var(--s-3) 5px 0; font-size: 0.8125rem; color: var(--ink-2); width: 1%;
font-feature-settings: var(--num-features); }
.hist td { padding: 5px 0; }
.hbar { display: flex; align-items: center; gap: var(--s-2); }
.hbar i { display: block; height: 22px; min-width: 3px; border-radius: 3px; background: var(--rule); }
.hbar span { font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600; font-feature-settings: var(--num-features); white-space: nowrap; }
.hist tr.is-today th { color: var(--accent-text); font-weight: 700; }
.hist tr.is-today .hbar i { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--ink); }
.atlas h2 { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-3); }
.atlas .recap { aspect-ratio: 2 / 1; }
.fine { font-family: var(--font-sans); font-size: 0.8125rem; color: var(--ink-3); margin-top: var(--s-5); }
}
@media (forced-colors: active) {
@layer components {
.res-strip li[data-tier], .hbar i { forced-color-adjust: none; background: Canvas; color: CanvasText; border: 2px solid CanvasText; }
.res-strip li[data-tier="gold"], .hbar i[data-tier="gold"] { border: 4px double CanvasText; }
.res-strip li[data-tier="bronze"], .hbar i[data-tier="bronze"] { border-style: dashed; }
.res-strip li[data-tier="clay"], .hbar i[data-tier="clay"] { border-style: dotted; }
.day { border: 1px solid CanvasText; } .day.is-today { border: 3px solid Highlight; }
.coach, .today, .mapbtn, .map-hint { border: 1px solid CanvasText; }
.state.is-set { border-bottom: 2px solid CanvasText; }
}
}
@media (prefers-reduced-motion: reduce) {
.coach { animation: p-fade-in 150ms linear both !important; }
.btn[aria-busy="true"]::before { animation-duration: 2.4s; }
}
/* ---------------------------------------------------------------------------------------------------------------------
MOTION — keyframes + one-shot helper classes. choreo.js sequences them; reduced motion swaps them for a crossfade.
--------------------------------------------------------------------------------------------------------------------- */
@layer motion {
@keyframes p-fade-in { from { opacity: 0; } }
@keyframes p-fade-out { to { opacity: 0; } }
@keyframes p-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes p-pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes p-dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes p-sheet-in { from { transform: translateY(100%); } }
@keyframes p-drop { 0% { opacity: 0; transform: translateY(-16px); } 60% { opacity: 1; } 100% { transform: none; } }
@keyframes p-stamp { 0% { opacity: 0; transform: scale(1.15) rotate(-4deg); } 60% { opacity: 1; } 100% { transform: none; } }
@keyframes p-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes p-draw { from { stroke-dashoffset: var(--len, 1000); } to { stroke-dashoffset: 0; } }
@keyframes p-grow-x { from { transform: scaleX(0); } }
@keyframes p-sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes p-ring { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes p-shimmer { to { transform: translateX(100%); } }
@keyframes p-nudge { 0%, 100% { transform: none; } 30% { transform: translateX(-4px); } 60% { transform: translateX(3px); } }
.anim-fade { animation: p-fade-in var(--dur-state) var(--ease-standard) both; }
.anim-rise { animation: p-rise var(--dur-panel) var(--ease-out) both; }
.anim-drop { animation: p-drop var(--dur-spring) var(--ease-spring) both; transform-box: fill-box; transform-origin: 50% 100%; }
.anim-stamp { animation: p-stamp var(--dur-stamp) var(--ease-spring) both; box-shadow: 0 0 0 0 transparent; }
.anim-pop { animation: p-pop var(--dur-spring) var(--ease-spring) both; transform-box: fill-box; transform-origin: center; }
.anim-draw { stroke-dasharray: var(--len, 1000); animation: p-draw var(--dur-draw) var(--ease-out) both; }
.anim-grow-x { animation: p-grow-x var(--dur-panel) var(--ease-out) both; transform-origin: var(--origin, left) center; }
.anim-ring { animation: p-ring 400ms var(--ease-out) 2 both; transform-box: fill-box; transform-origin: center; }
.anim-nudge { animation: p-nudge 300ms var(--ease-standard) both; }
/* light sweep across a numeral (Gold / perfect) */
.anim-sweep { background-image: linear-gradient(100deg, var(--sweep-base, var(--ink)) 40%, var(--gold-sheen) 50%, var(--sweep-base, var(--ink)) 60%);
background-size: 300% 100%; background-position: 0 0; -webkit-background-clip: text; background-clip: text; color: transparent;
animation: p-sweep var(--dur-sweep) var(--ease-in-out) both; }
/* wall-label fill-in: give children style="--i:0..n" */
.fill-in > * { animation: p-rise var(--dur-panel) var(--ease-out) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto !important; }
.anim-rise, .anim-drop, .anim-stamp, .anim-pop, .anim-grow-x, .fill-in > *, .toast, .dialog[open], .listbox {
animation: p-fade-in var(--dur-fade) linear both !important; animation-delay: 0ms !important; }
.anim-draw, .anim-ring, .anim-nudge, .skeleton::after { animation: none !important; }
.anim-draw { stroke-dasharray: none; }
.anim-sweep { animation: none; background: none; color: inherit; }
.sheet, .btn, .card--link, .link-arrow .icon { transition-duration: 0.01ms !important; }
.btn:active { transform: none !important; }
}
}
/* ---------------------------------------------------------------------------------------------------------------------
UTILITIES
--------------------------------------------------------------------------------------------------------------------- */
@layer utilities {
.visually-hidden, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 8px; top: -100px; z-index: 100; padding: 8px 12px; background: var(--inverse-bg); color: var(--inverse-ink);
border-radius: var(--r-control); font-family: var(--font-sans); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 8px; }
.only-touch { display: none; }
@media (pointer: coarse) { .only-touch { display: revert; } .only-fine { display: none; } }
html[data-pointer="touch"] .only-touch, html[data-pointer="fine"] .only-fine { display: revert; }
html[data-pointer="touch"] .only-fine, html[data-pointer="fine"] .only-touch { display: none; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
}
/* ---------------------------------------------------------------------------------------------------------------------
FORCED COLORS (Windows High Contrast) — tiers keep a distinct border pattern + their word/glyph; focus stays visible.
--------------------------------------------------------------------------------------------------------------------- */
@media (forced-colors: active) {
@layer components {
.btn, .chip, .seg > button, .input, .pip, .tag, .card, .sister, .wall-label, .sheet, .dialog, .toast, .thumb, .bubble { forced-color-adjust: auto; border: 1px solid CanvasText; }
.btn--primary, .chip[aria-pressed="true"], .chip[aria-checked="true"], .seg > button[aria-pressed="true"], .seg > button[aria-checked="true"], .thumb.is-set {
forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
.chip[aria-pressed="true"] .chip__count, .chip[aria-checked="true"] .chip__count { background: HighlightText; color: Highlight; }
.btn:disabled, .btn[aria-disabled="true"] { forced-color-adjust: none; background: Canvas; color: GrayText; border-color: GrayText; }
.btn:disabled .icon, .btn[aria-disabled="true"] .icon { stroke: GrayText; }
.option mark { forced-color-adjust: none; background: Canvas; color: CanvasText; }
.option[aria-selected="true"], .option.is-active { forced-color-adjust: none; background: Highlight; color: HighlightText; }
.option[aria-selected="true"] mark, .option.is-active mark, .option[aria-selected="true"] .option__meta, .option.is-active .option__meta { background: Highlight; color: HighlightText; }
.tag[data-tier], .pip[data-tier], .tier-strip > [data-tier], .mosaic > [data-tier], .tier-swatch[data-tier] { background: Canvas; color: CanvasText; }
[data-tier="gold"].tag, [data-tier="gold"].pip, .tier-strip > [data-tier="gold"], .mosaic > [data-tier="gold"] { border: 3px double CanvasText; }
[data-tier="silver"].tag, [data-tier="silver"].pip, .tier-strip > [data-tier="silver"], .mosaic > [data-tier="silver"] { border: 2px solid CanvasText; }
[data-tier="bronze"].tag, [data-tier="bronze"].pip, .tier-strip > [data-tier="bronze"], .mosaic > [data-tier="bronze"] { border: 2px dashed CanvasText; }
[data-tier="clay"].tag, [data-tier="clay"].pip, .tier-strip > [data-tier="clay"], .mosaic > [data-tier="clay"] { border: 1px dotted CanvasText; }
.pip[aria-current="step"] { border: 2px solid Highlight; box-shadow: none; }
.range::-webkit-slider-runnable-track { background: CanvasText; }
.range::-moz-range-track { background: CanvasText; }
.range::-webkit-slider-thumb { background: Canvas; border: 2px solid CanvasText; }
.range:focus-visible::-webkit-slider-thumb, .range:focus-visible::-moz-range-thumb { outline: 3px solid Highlight; box-shadow: none; }
.sheet__grabber::before { background: CanvasText; }
.icon { stroke: CanvasText; }
.btn--primary .icon, .chip[aria-pressed="true"] .icon, .seg > button[aria-pressed="true"] .icon, .seg > button[aria-checked="true"] .icon { stroke: HighlightText; }
.anim-sweep { background: none; color: CanvasText; }
.skeleton { background: GrayText; }
.map-land { fill: Canvas; stroke: CanvasText; }
.map-sea { fill: Canvas; }
.map-zone { fill: none; stroke: Highlight; }
.map-line { stroke: Highlight; }
}
:focus-visible { outline: 3px solid Highlight !important; outline-offset: 2px; }
}
/* ---------------------------------------------------------------------------------------------------------------------
ROUND 2b — GAME FEEL (both pages; JS in reveal.js): accession seal, brand intro + loader, pip pulse, Submit ink-in,
timeline instrument, home teasers, skeletons, ripples. Every animation here has a reduced-motion fallback below.
--------------------------------------------------------------------------------------------------------------------- */
@layer components {
/* the accession seal: a 72 px material disc (glyph + Roman numeral), fixed so it can FLIP into the header pip */
.seal { position: fixed; left: 0; top: 0; width: 72px; height: 72px; z-index: 55; pointer-events: none; will-change: transform; }
.seal .seal__disc, .seal .seal__ink { transform-origin: 50% 50%; }
.seal__disc { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: 2px; overflow: hidden;
background: var(--tier-fill, var(--tier)), var(--label-bg); color: var(--on-tier);
box-shadow: inset 0 0 0 1.5px var(--tier-edge, transparent), inset 0 0 0 4px rgb(255 255 255 / .16), inset 0 2px 1px var(--tier-shine, transparent),
0 4px 10px -3px rgb(0 0 0 / .4), 0 1px 2px rgb(0 0 0 / .2); }
.seal__disc::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px dashed currentColor; opacity: .42; }
/* the seal is an object, the same in both themes: struck metal, or fired clay */
.seal[data-tier] .seal__disc { box-shadow: inset 0 0 0 1.5px rgb(0 0 0 / .22), inset 0 2px 2px rgb(255 255 255 / .45), inset 0 -3px 4px rgb(0 0 0 / .18), 0 5px 12px -3px rgb(0 0 0 / .45), 0 1px 2px rgb(0 0 0 / .25); }
.seal[data-tier="gold"] .seal__disc { background: radial-gradient(circle at 32% 26%, #F6DC8E 0%, #CF9E37 36%, #A87512 68%, #82590B 100%); color: #2A1E06; }
.seal[data-tier="silver"] .seal__disc { background: radial-gradient(circle at 32% 26%, #F3F5F7 0%, #B9C0C7 38%, #87919B 70%, #5F6872 100%); color: #1D2227; }
.seal[data-tier="bronze"] .seal__disc { background: radial-gradient(circle at 32% 26%, #E2A06A 0%, #AE6833 38%, #8E4E22 70%, #693715 100%); color: #FFF6EC; }
.seal[data-tier="clay"] .seal__disc { background: radial-gradient(circle at 70% 75%, rgb(0 0 0 / .14), transparent 45%), radial-gradient(circle at 32% 26%, #B39079 0%, #8C6C58 40%, #6B5040 74%, #4E3A2F 100%); color: #FBF2E8; }
.seal__glyph { width: 22px; height: 22px; fill: currentColor; position: relative; }
.seal__num { font-family: var(--font-serif); font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: .06em; position: relative; }
.seal__ink { position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(closest-side, var(--tier) 62%, transparent 100%); opacity: 0; filter: url(#p-inkbleed); }
/* .seal--static: the same disc as a still badge inside a card (catalogues, result rows). Size it with --seal-size
(default 46 px); glyph, numeral and dashed ring scale from it. The page places it (top/right/bottom/left). */
.seal--static { --seal-size: 46px; position: absolute; left: auto; top: auto; width: var(--seal-size); height: var(--seal-size); z-index: 1; will-change: auto; }
.seal--static .seal__disc { gap: calc(var(--seal-size) * .03); }
.seal--static .seal__disc::before { inset: calc(var(--seal-size) * .085); }
.seal--static .seal__glyph { width: calc(var(--seal-size) * .3); height: calc(var(--seal-size) * .3); }
.seal--static .seal__num { font-size: max(11px, calc(var(--seal-size) * .24)); }
.seal.is-foil .seal__disc::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
background: linear-gradient(105deg, transparent 40%, rgb(255 255 255 / .6) 50%, transparent 60%) 100% 0 / 300% 100% no-repeat;
animation: p-foil var(--dur-sweep) var(--ease-in-out) both; }
.pip.is-landed { animation: p-pip-fill 260ms var(--ease-spring) both; }
.pip.is-pulse { animation: p-pip-pulse 160ms var(--ease-out) both; }
/* brand mark, drawn part by part: the first-visit intro (≈1.1 s) and the loading state (looping) */
.bmark { width: 1em; height: 1em; overflow: visible; color: var(--accent); --mark-pin: var(--accent); --mark-base: var(--ink); }
.bmark .bm-pin, .bmark .bm-rule, .bmark .bm-tick { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bmark .bm-tick { stroke-width: 1.8; }
.bmark .bm-base { fill: var(--ink); stroke: var(--ink); }
.bmark .bm-fill { opacity: 0; }
.bmark--intro .bm-pin { stroke-dasharray: 1; animation: p-bm-draw 400ms var(--ease-out) both; }
.bmark--intro .bm-rule { stroke-dasharray: 1; animation: p-bm-draw 160ms var(--ease-out) 360ms both; }
.bmark--intro .bm-tick { transform-box: fill-box; transform-origin: 50% 100%; animation: p-bm-tick 160ms var(--ease-spring) both; animation-delay: calc(420ms + var(--i) * 40ms); }
.bmark--intro .bm-line { stroke-dasharray: 1; transform: none; animation: p-bm-draw 220ms var(--ease-out) both; animation-delay: calc(420ms + var(--i) * 40ms); }
.bmark--intro .bm-base, .bmark--intro .bm-plinth { transform-box: fill-box; transform-origin: 50% 50%; animation: p-bm-base 250ms var(--ease-out) 640ms both; }
.bmark--intro .bm-plinth { animation-delay: calc(640ms + var(--i, 0) * 60ms); }
.bmark--intro .bm-fill { animation: p-fade-in 200ms var(--ease-standard) 880ms both; }
.bmark--loop .bm-pin { stroke-dasharray: none; }
.bmark--loop .bm-tick { transform-box: fill-box; transform-origin: 50% 100%; animation: p-bm-loop 1100ms var(--ease-in-out) infinite both; animation-delay: calc(var(--i) * 90ms); }
.bmark--loop .bm-line { animation: p-bm-loop-x 1100ms var(--ease-in-out) infinite both; animation-delay: calc(var(--i) * 90ms); transform-box: fill-box; transform-origin: 0 50%; }
.splash { position: fixed; inset: 0; z-index: 65; display: grid; place-items: center; background: var(--bg); transition: opacity 240ms var(--ease-standard); }
.splash.is-out { opacity: 0; pointer-events: none; }
.splash__box { display: grid; justify-items: center; gap: 14px; font-size: 104px; }
.splash__word { font-family: var(--font-serif); font-size: 1.75rem; font-weight: 500; letter-spacing: -.01em; color: var(--ink); line-height: 1;
animation: p-rise 200ms var(--ease-out) 860ms both; }
.splash__word em { color: var(--accent-text); }
.btn .bmark { font-size: 22px; flex: none; color: currentColor; --mark-pin: currentColor; }
.btn .bmark .bm-base { fill: currentColor; stroke: currentColor; }
.btn[aria-busy="true"]:has(.bmark)::before { display: none; }
/* Submit "inks in" when both inputs are set: an accent wipe left → right (220 ms) */
.btn.btn--ink { background-color: var(--surface-2); background-image: linear-gradient(var(--btn-bg), var(--btn-bg)); background-repeat: no-repeat; background-size: 100% 100%;
transition: background-size 220ms var(--ease-out), color 160ms var(--ease-standard) 60ms, box-shadow 160ms; }
.btn.btn--ink[aria-disabled="true"] { background-size: 0% 100%; transition-duration: 120ms, 120ms, 120ms; transition-delay: 0ms; }
.btn--ink.is-inking { animation: p-ink-tick 220ms var(--ease-out) both; }
/* timeline as an instrument: the reveal bracket's sliding gap chip; a perfect year lights its era */
.tl-gapchip { position: absolute; top: -22px; transform: translateX(-50%); padding: 2px 6px; border-radius: var(--r-tag); white-space: nowrap; pointer-events: none;
background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule-strong); font-family: var(--font-sans);
font-feature-settings: var(--num-features); font-size: 0.75rem; font-weight: 600; line-height: 1.3; z-index: 2; }
.tl-era.is-sweep { overflow: hidden; }
.tl-era.is-sweep::before { content: ""; position: absolute; inset: 0 2px; border-radius: 3px; background: linear-gradient(90deg, rgb(var(--accent-rgb) / .12) 0 70%, rgb(var(--accent-rgb) / .28) 85%, transparent 100%) 0 0 / 0% 100% no-repeat;
animation: p-era-sweep 600ms var(--ease-out) both; pointer-events: none; }
/* home teasers: a slow Ken Burns on the object detail; skeleton shimmer for media + list rows */
.kb { animation: p-kb 12s var(--ease-in-out) infinite alternate both; }
.shimmer { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface) 50%, var(--surface-2) 75%) 0 0 / 300% 100%; animation: p-shimmer-bg 1.4s linear infinite; }
/* empty states with craft (§4.9): a ghost atlas with three faint dotted pins; a closed day shows an engraved plinth */
.recap.is-ghost { position: relative; }
.recap.is-ghost svg { opacity: .55; }
.ghost-pin { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px dotted var(--ink-3); opacity: .7; pointer-events: none; }
.ghost-pin::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: var(--ink-3); }
.day.is-closed::after { content: ""; align-self: end; justify-self: center; width: 16px; height: 8px; opacity: .5; color: var(--ink-3);
background: linear-gradient(currentColor, currentColor) 50% 0 / 9px 2.5px no-repeat, linear-gradient(currentColor, currentColor) 50% 100% / 16px 2.5px no-repeat; }
/* first visit: cover the home until the brand intro mounts (set by the head script; the page module removes it) */
html[data-splash] body::before { content: ""; position: fixed; inset: 0; z-index: 64; background: var(--bg); }
/* R18 type floor: phone text is 13 px; only uppercase eyebrows / tags (and pip numerals, glyph-like) stay at 12 */
@media (pointer: coarse) {
.map-hint, .map-tag, .r-legend, .rrow .off, .wall-label__meta, .wall-label__acc, .dow span, .tl-gapchip, .mk-chip { font-size: 0.8125rem; }
}
/* touch micro-interactions shared by both maps: an answer ripple ring */
.mk-ripple { position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; pointer-events: none; }
}
@layer motion {
@keyframes p-foil { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes p-pip-fill { 0% { transform: scale(.7); } 60% { transform: scale(1.14); } 100% { transform: none; } }
@keyframes p-pip-pulse { 50% { transform: scale(1.12); } }
@keyframes p-bm-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes p-bm-tick { from { transform: scaleY(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes p-bm-base { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes p-bm-loop { 0%, 100% { transform: scaleY(.35); opacity: .45; } 40% { transform: none; opacity: 1; } }
@keyframes p-bm-loop-x { 0%, 100% { transform: scaleX(.4); opacity: .45; } 40% { transform: none; opacity: 1; } }
@keyframes p-ink-tick { 0% { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / .35); } 100% { box-shadow: 0 0 0 6px rgb(var(--accent-rgb) / 0); } }
@keyframes p-era-sweep { from { background-size: 0% 100%; } to { background-size: 140% 100%; } }
@keyframes p-kb { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes p-shimmer-bg { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
.seal, .splash { display: none !important; }
.pip.is-landed, .pip.is-pulse, .btn--ink.is-inking, .kb, .shimmer, .bmark--loop .bm-tick, .bmark--loop .bm-line { animation: none !important; }
.btn--ink { transition-duration: 0.01ms !important; }
.tl-era.is-sweep::before { animation: none; background-size: 100% 100%; }
.bmark--intro * { animation: none !important; }
.bmark--intro .bm-fill { opacity: 1; }
}
}
@media (forced-colors: active) {
@layer components {
.seal__disc { forced-color-adjust: none; background: Canvas; color: CanvasText; border: 2px solid CanvasText; }
.btn--ink { background-image: none; }
.tl-gapchip { forced-color-adjust: auto; border: 1px solid CanvasText; }
}
}
/* Photo lightbox (shared/lightbox.js; markup: