@charset "UTF-8";
/* ==========================================================================
   Gutes Spielwerk — stylesheet
   --------------------------------------------------------------------------
   Written by hand, no framework, no build step. Organised as:
     1. Fonts          6. Buttons and controls
     2. Tokens         7. Header and navigation
     3. Reset          8. Home page
     4. Typography     9. Game shell
     5. Layout        10. Prose and legal pages
                      11. Forms
                      12. Footer, notice, misc
   The design idea is a movement plate: warm paper or dark steel, brass and
   patina as the only two accents, hairline rules instead of shadows, and one
   ornament (the gear train) that earns its place by being generated from real
   tooth counts rather than drawn.
   ========================================================================== */

/* ---- 1. Fonts ---------------------------------------------------------- */
/* Self-hosted. Nothing is requested from a third party at run time —
   see assets/fonts/OFL-NOTICE.txt for why that matters here. */

@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 400 800;
    font-stretch: 75% 100%;
    font-display: swap;
    src: url('/assets/fonts/bricolage-grotesque-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 400 800;
    font-stretch: 75% 100%;
    font-display: swap;
    src: url('/assets/fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter Tight';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/inter-tight-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter Tight';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/inter-tight-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- 2. Tokens --------------------------------------------------------- */

:root {
    --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Inter Tight', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Spacing: a 4px base, doubling at the top so section rhythm stays coarse. */
    --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
    --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
    --s9: 6rem;     --s10: 8rem;

    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 14px;
    --r-xl: 22px;

    --measure: 68ch;
    --container: 1180px;

    --tap: 44px;              /* WCAG 2.2 target size floor */
    --nav-h: 68px;

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

:root,
:root[data-theme='light'] {
    color-scheme: light;

    --bg:        #F2EEE4;     /* warm paper */
    --bg-sunk:   #EAE4D6;
    --surface:   #FBF9F3;
    --surface-2: #F5F1E7;

    --ink:       #16181D;     /* 15.4:1 on --bg */
    --ink-2:     #4B5059;     /*  7.5:1 */
    --ink-3:     #6B7280;     /*  5.1:1 */

    --line:      #DCD5C6;
    --line-soft: #E7E1D4;

    --brass:     #7E5410;     /*  5.7:1 — safe for text */
    --brass-lit: #B8863B;     /* fills, rules, gear teeth */
    --brass-dim: #E4D2AE;
    --patina:    #14655C;     /*  5.9:1 */
    --patina-lit:#2E8F81;
    --patina-dim:#CFE4DF;
    --oxide:     #9A3520;     /*  6.2:1 */
    --oxide-lit: #C4553A;
    --oxide-dim: #F0D9D1;

    --on-accent: #16181D;     /* text that sits on a brass fill */

    --shadow-sm: 0 1px 2px rgb(22 24 29 / 0.05);
    --shadow-md: 0 2px 6px rgb(22 24 29 / 0.07), 0 12px 28px -18px rgb(22 24 29 / 0.35);
    --glass:     rgb(242 238 228 / 0.86);
}

:root[data-theme='dark'] {
    color-scheme: dark;

    --bg:        #101217;     /* movement plate, blued steel */
    --bg-sunk:   #0A0C10;
    --surface:   #171A21;
    --surface-2: #1D212A;

    --ink:       #EDE9DF;     /* 15.5:1 on --bg */
    --ink-2:     #A9AEB9;     /*  8.0:1 */
    --ink-3:     #838B9A;     /*  5.2:1 */

    --line:      #272B34;
    --line-soft: #1F232B;

    --brass:     #E0AE5E;     /* 9.4:1 */
    --brass-lit: #F0C480;
    --brass-dim: #3A2F1C;
    --patina:    #4CC5B2;     /* 9.9:1 */
    --patina-lit:#6FD9C8;
    --patina-dim:#16332F;
    --oxide:     #E8896F;     /* 7.5:1 */
    --oxide-lit: #F2A48D;
    --oxide-dim: #38211B;

    --on-accent: #101217;     /* dark text on brass — white would be 3.1:1 */

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35);
    --shadow-md: 0 2px 8px rgb(0 0 0 / 0.4), 0 16px 40px -22px rgb(0 0 0 / 0.8);
    --glass:     rgb(16 18 23 / 0.86);
}

/* ---- 3. Reset ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* The UA rule for [hidden] is display:none at author-stylesheet-beating-zero
   specificity, so any class that sets a display wins against it. Several
   elements here are toggled with the hidden attribute from JavaScript and also
   carry a display from a class (.opt-group, .ov-badge, .stage-overlay), which
   is exactly the collision this prevents. */
[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + var(--s5));
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: clamp(1rem, 0.965rem + 0.16vw, 1.0625rem);
    line-height: 1.62;
    font-feature-settings: 'kern' 1, 'liga' 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

/* The one place a monospaced-ish treatment is wanted: anything numeric that
   changes in place. Tabular figures stop scores from jittering as they tick. */
.num, .hud-value, td.num, .score { font-variant-numeric: tabular-nums lining-nums; }

::selection { background: var(--brass-lit); color: var(--on-accent); }

:focus-visible {
    outline: 2px solid var(--patina);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

.skip-link {
    position: absolute;
    left: var(--s4);
    top: -4rem;
    z-index: 200;
    padding: var(--s3) var(--s5);
    background: var(--ink);
    color: var(--bg);
    border-radius: var(--r-md);
    text-decoration: none;
    font-weight: 600;
    transition: top 0.18s var(--ease);
}
.skip-link:focus { top: var(--s4); }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---- 4. Typography ----------------------------------------------------- */

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.022em;
    hyphens: none;
    margin: 0 0 var(--s4);
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.35rem, 1.35rem + 4.1vw, 4.15rem);
    font-stretch: 92%;
    line-height: 1.01;
    letter-spacing: -0.032em;
}
h2 {
    font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.5rem);
    font-stretch: 94%;
    letter-spacing: -0.026em;
}
h3 { font-size: clamp(1.15rem, 1.02rem + 0.55vw, 1.45rem); }
h4 { font-size: 1.0625rem; letter-spacing: -0.014em; }

h5 {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;       /* all-caps always gets letterspacing */
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 var(--s4);
}

p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

a:hover { text-decoration-color: var(--brass-lit); }

strong { font-weight: 600; }

.lead {
    font-size: clamp(1.075rem, 1rem + 0.42vw, 1.3rem);
    line-height: 1.52;
    color: var(--ink-2);
    max-width: 60ch;
    text-wrap: pretty;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--brass);
    margin: 0 0 var(--s4);
}
.eyebrow::before {
    content: '';
    width: 26px; height: 1px;
    background: var(--brass-lit);
}

.muted { color: var(--ink-3); }
.tiny  { font-size: 0.8125rem; line-height: 1.55; }

/* ---- 5. Layout --------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--s5);
}

.section { padding-block: clamp(var(--s7), 6vw, var(--s9)); }
.section--tight { padding-block: clamp(var(--s6), 4vw, var(--s7)); }
.section--sunk { background: var(--bg-sunk); }
.section + .section--sunk,
.section--sunk + .section { border-top: 1px solid var(--line); }

.section-head { margin-bottom: var(--s7); max-width: 60ch; }
.section-head h2 { margin-bottom: var(--s3); }

.rule {
    border: 0;
    border-top: 1px solid var(--line);
    margin-block: var(--s7);
}

/* Reveal-on-scroll. Falls back to visible when JS or motion is unavailable. */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* ---- 6. Buttons and controls ------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    min-height: var(--tap);
    padding: var(--s3) var(--s5);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.16s var(--ease), border-color 0.16s var(--ease),
                color 0.16s var(--ease), transform 0.16s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
    background: var(--brass-lit);
    color: var(--on-accent);
    border-color: var(--brass-lit);
}
.btn--primary:hover { background: var(--brass); border-color: var(--brass); color: var(--bg); }
:root[data-theme='dark'] .btn--primary:hover { background: var(--brass-lit); color: var(--on-accent); }

.btn--ghost {
    border-color: var(--line);
    color: var(--ink);
    background: var(--surface);
}
.btn--ghost:hover { border-color: var(--ink-3); background: var(--surface-2); }

.btn--quiet {
    padding-inline: var(--s4);
    color: var(--ink-2);
    border-color: transparent;
}
.btn--quiet:hover { color: var(--ink); background: var(--surface-2); }

.btn--sm { min-height: 36px; padding: var(--s2) var(--s4); font-size: 0.875rem; }

.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap); height: var(--tap);
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
    transition: color 0.16s var(--ease), background-color 0.16s var(--ease);
}
.icon-btn:hover { color: var(--ink); background: var(--surface-2); }
.icon-btn svg { width: 20px; height: 20px; }

/* Segmented control — difficulty, opponent, and anything else with 2–3 states. */
.seg {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
}
.seg button {
    min-height: 34px;
    padding: 0 var(--s4);
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ink-2);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.14s var(--ease), color 0.14s var(--ease);
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed='true'] {
    background: var(--ink);
    color: var(--bg);
}

.field-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: var(--s2);
}

/* ---- 7. Header and navigation ------------------------------------------ */

.cfg-warn {
    position: relative;
    z-index: 120;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s4);
    align-items: baseline;
    padding: var(--s3) var(--s5);
    background: var(--oxide-dim);
    color: var(--oxide);
    border-bottom: 1px solid var(--oxide);
    font-size: 0.8125rem;
    line-height: 1.5;
}
.cfg-warn strong { color: var(--oxide); white-space: nowrap; }
.cfg-warn span { color: var(--ink-2); }

.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--glass);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--line);
}

.nav-inner {
    display: flex;
    align-items: center;
    gap: var(--s5);
    min-height: var(--nav-h);
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: var(--s3);
    text-decoration: none;
    color: var(--ink);
    flex-shrink: 0;
}
.logo-mark { width: 34px; height: 34px; flex-shrink: 0; }
.logo-mark .lg-teeth { fill: var(--brass-lit); }
.logo-mark .lg-hub   { fill: none; stroke: var(--ink); stroke-width: 2; }
.logo-mark .lg-bore  { fill: var(--ink); }
.logo:hover .lg-teeth { fill: var(--brass); }
:root[data-theme='dark'] .logo:hover .lg-teeth { fill: var(--brass-lit); }

.logo-word {
    display: flex;
    flex-direction: column;
    font-family: var(--font-display);
    font-weight: 700;
    font-stretch: 88%;
    font-size: 1.2rem;
    letter-spacing: -0.03em;
    line-height: 1.05;
}
.logo-word small {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 500;
    font-stretch: normal;
    letter-spacing: 0.02em;
    color: var(--ink-3);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--s1);
    list-style: none;
    margin: 0;
    padding: 0;
    margin-inline-start: auto;
}
.nav-links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 var(--s3);
    border-radius: var(--r-sm);
    color: var(--ink-2);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.14s var(--ease), background-color 0.14s var(--ease);
}
.nav-links a:hover { color: var(--ink); background: var(--surface-2); }
.nav-links a.active { color: var(--ink); font-weight: 600; }
.nav-links a.active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 14px;
    height: 2px;
    margin-left: -7px;
    background: var(--brass-lit);
}
.nav-sep {
    width: 1px;
    height: 20px;
    background: var(--line);
    margin-inline: var(--s2);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex-shrink: 0;
}

.theme-toggle .icon-sun  { display: none; }
:root[data-theme='dark'] .theme-toggle .icon-moon { display: none; }
:root[data-theme='dark'] .theme-toggle .icon-sun  { display: block; }

.burger { display: none; }

@media (max-width: 1080px) {
    .burger { display: inline-flex; }
    .nav-sep { display: none; }
    .nav-links {
        position: absolute;
        left: 0; right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--s3) var(--s5) var(--s5);
        background: var(--bg);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-md);
        display: none;
    }
    .nav-links.open { display: flex; }
    .nav-links a {
        min-height: var(--tap);
        padding-inline: var(--s3);
        font-size: 1rem;
        border-radius: var(--r-md);
    }
    .nav-links a.active::after { display: none; }
    .nav-links a.active { background: var(--surface-2); }
}

@media (max-width: 420px) {
    .logo-word small { display: none; }
    /* Two words next to the gear mark: at 320px the wordmark would otherwise
       push the theme and menu buttons off the bar. */
    .logo-word { font-size: 1.05rem; }
    .container { padding-inline: var(--s4); }
}

/* ---- 8. Home page ------------------------------------------------------ */

.hero {
    position: relative;
    padding-block: clamp(var(--s7), 7vw, var(--s10)) clamp(var(--s7), 6vw, var(--s9));
    overflow: hidden;
}
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(var(--s6), 5vw, var(--s8));
    align-items: center;
}
.hero h1 { margin-bottom: var(--s5); }
.hero .lead { margin-bottom: var(--s6); }

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
    margin-bottom: var(--s6);
}

.facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s5);
    list-style: none;
    margin: 0;
    padding: 0;
}
.facts li {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ink-2);
}
.facts svg { width: 15px; height: 15px; color: var(--patina); flex-shrink: 0; }

/* The gear train. Ratios come from the tooth counts in lib/config.js, so the
   pinion really does turn faster than the wheel it drives. */
.movement {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 460px;
    margin-inline: auto;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background:
        radial-gradient(120% 110% at 30% 20%, var(--surface) 0%, var(--bg-sunk) 100%);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.movement::after {
    /* Jewelled bearing dots, the small ornament inside the big one. */
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 84% 18%, var(--oxide-lit) 0 3px, transparent 3px),
        radial-gradient(circle at 16% 82%, var(--patina-lit) 0 3px, transparent 3px),
        radial-gradient(circle at 88% 76%, var(--brass-lit) 0 2px, transparent 2px);
    opacity: 0.75;
    pointer-events: none;
}
.movement svg { width: 100%; height: 100%; }

.gear-teeth { fill: var(--brass-lit); }
.gear-hub   { fill: var(--surface); stroke: var(--ink-3); stroke-width: 1.4; }
.gear-bore  { fill: var(--bg-sunk); stroke: var(--ink-3); stroke-width: 1.2; }
.gear-spoke { stroke: var(--ink-3); stroke-width: 1.2; opacity: 0.5; }
.gear--b .gear-teeth { fill: var(--patina-lit); }
.gear--c .gear-teeth { fill: var(--oxide-lit); }

.gear { transform-box: fill-box; transform-origin: center; }
.gear--spin { animation: gear-spin linear infinite; }
.gear--rev  { animation-direction: reverse; }
@keyframes gear-spin { to { transform: rotate(360deg); } }

.movement-plate {
    stroke: var(--line);
    stroke-width: 1;
    fill: none;
}

@media (max-width: 900px) {
    .hero-grid { grid-template-columns: minmax(0, 1fr); }
    .movement { max-width: 340px; order: -1; }
}

/* Game cards */
.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: var(--s5);
}

.game-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--s6) var(--s5) var(--s5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: border-color 0.2s var(--ease), transform 0.2s var(--ease),
                box-shadow 0.2s var(--ease);
}
.game-card:hover {
    border-color: var(--ink-3);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.game-card::before {
    /* Accent hairline along the top edge, one colour per game. */
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--accent, var(--brass-lit));
}
.game-card--brass  { --accent: var(--brass-lit); }
.game-card--patina { --accent: var(--patina-lit); }
.game-card--oxide  { --accent: var(--oxide-lit); }
.game-card--ink    { --accent: var(--ink-3); }

.game-card .gc-art {
    display: block;          /* a <span> inside the card link — aspect-ratio
                                needs a block box to take effect */
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--s5);
    border-radius: var(--r-md);
    border: 1px solid var(--line-soft);
    background: var(--bg-sunk);
    overflow: hidden;
}
.game-card .gc-art svg { width: 100%; height: 100%; }

.gc-meta {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin-bottom: var(--s3);
}
.gc-cat {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-text, var(--ink-3));
}
.game-card--brass  .gc-cat { color: var(--brass); }
.game-card--patina .gc-cat { color: var(--patina); }
.game-card--oxide  .gc-cat { color: var(--oxide); }

.gc-sub { font-size: 0.8125rem; color: var(--ink-3); }
.gc-sub::before { content: '·'; margin-inline-end: var(--s2); }

.game-card h3 { margin-bottom: var(--s3); }
.game-card p { color: var(--ink-2); font-size: 0.9375rem; margin-bottom: var(--s5); }

.gc-go {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--ink);
}
.gc-go svg { width: 16px; height: 16px; transition: transform 0.2s var(--ease); }
.game-card:hover .gc-go svg { transform: translateX(4px); }

/* Numbered steps */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: var(--s6);
    counter-reset: step;
    list-style: none;
    margin: 0;
    padding: 0;
}
.steps li { counter-increment: step; }
.steps li::before {
    content: counter(step, decimal-leading-zero);
    display: block;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--brass);
    margin-bottom: var(--s3);
    padding-bottom: var(--s3);
    border-bottom: 1px solid var(--line);
}
.steps h3 { font-size: 1.125rem; margin-bottom: var(--s2); }
.steps p { color: var(--ink-2); font-size: 0.9375rem; }

/* Principles — the "what we will not do" block */
.principles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(258px, 100%), 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.principle {
    padding: var(--s6) var(--s5);
    background: var(--surface);
}
.principle h3 {
    display: flex;
    align-items: flex-start;
    gap: var(--s3);
    font-size: 1.0625rem;
    margin-bottom: var(--s3);
}
.principle h3 svg {
    width: 19px; height: 19px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--oxide);
}
.principle p { color: var(--ink-2); font-size: 0.9375rem; }

/* FAQ */
.faq { max-width: var(--measure); }
.faq details {
    border-bottom: 1px solid var(--line);
}
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    min-height: var(--tap);
    padding-block: var(--s4);
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    cursor: pointer;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '';
    width: 11px; height: 11px;
    flex-shrink: 0;
    border-right: 1.5px solid var(--ink-3);
    border-bottom: 1.5px solid var(--ink-3);
    transform: rotate(45deg) translate(-3px, -3px);
    transition: transform 0.2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq summary:hover { color: var(--brass); }
.faq .faq-a {
    padding-bottom: var(--s5);
    color: var(--ink-2);
    max-width: 64ch;
}

/* Closing band */
.band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s5);
    padding: clamp(var(--s6), 4vw, var(--s7));
    background: var(--ink);
    color: var(--bg);
    border-radius: var(--r-xl);
}
.band h2 { color: var(--bg); margin-bottom: var(--s2); }
.band p { color: var(--bg); opacity: 0.72; margin: 0; }
.band .btn--primary { background: var(--brass-lit); color: #16181D; border-color: var(--brass-lit); }
.band .btn--primary:hover { background: var(--brass-dim); border-color: var(--brass-dim); color: #16181D; }

/* ---- 9. Game shell ----------------------------------------------------- */

.game-head {
    padding-block: var(--s7) var(--s6);
    border-bottom: 1px solid var(--line);
}
.game-head .eyebrow { margin-bottom: var(--s3); }
.game-head h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.2rem); margin-bottom: var(--s4); }
.game-head .lead { margin-bottom: 0; }

.game-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s5);
    margin-top: var(--s5);
    padding: 0;
    list-style: none;
}
.game-facts div { display: flex; flex-direction: column; gap: 2px; }
.game-facts dt {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.game-facts dd { margin: 0; font-size: 0.9375rem; font-weight: 500; }

.play-wrap { padding-block: var(--s6) var(--s7); }

.stage-frame {
    max-width: 780px;
    margin-inline: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.hud {
    display: flex;
    align-items: center;
    gap: var(--s5);
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
    flex-wrap: wrap;
}
.hud-item { display: flex; flex-direction: column; line-height: 1.15; }
.hud-label {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.hud-value {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.hud-spacer { margin-inline-start: auto; }
.hud-actions { display: flex; gap: var(--s2); align-items: center; }

.stage {
    position: relative;
    background: var(--bg-sunk);
    touch-action: none;
}
.stage canvas {
    width: 100%;
    height: auto;
    display: block;
}

.stage-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s3);
    padding: var(--s5);
    text-align: center;
    background: var(--bg);                                   /* fallback */
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.stage-overlay[hidden] { display: none; }
.stage-overlay h2 {
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
    margin: 0;
}
.stage-overlay p { color: var(--ink-2); margin: 0; max-width: 34ch; }
.stage-overlay .ov-score {
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--brass);
}
.ov-badge {
    display: inline-block;
    padding: 3px var(--s3);
    border-radius: 999px;
    background: var(--patina-dim);
    color: var(--patina);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.stage-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    border-top: 1px solid var(--line);
    background: var(--surface-2);
    font-size: 0.8125rem;
    color: var(--ink-3);
}
.stage-foot .opts { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }
.opt-group { display: flex; align-items: center; gap: var(--s2); }
.opt-group > span {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.nojs-note {
    padding: var(--s5);
    color: var(--ink-2);
    font-size: 0.9375rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

/* Two-column rules/controls block under the board */
.game-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: clamp(var(--s6), 4vw, var(--s8));
    align-items: start;
}
.rules-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: rule;
}
.rules-list li {
    counter-increment: rule;
    position: relative;
    padding-left: var(--s6);
    padding-block: var(--s3);
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink-2);
    font-size: 0.9375rem;
}
.rules-list li:last-child { border-bottom: 0; }
.rules-list li::before {
    content: counter(rule);
    position: absolute;
    left: 0;
    top: var(--s3);
    width: 22px;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--brass);
}

.keys-list { margin: 0; padding: 0; list-style: none; }
.keys-list li {
    display: flex;
    align-items: baseline;
    gap: var(--s3);
    padding-block: var(--s3);
    border-bottom: 1px solid var(--line-soft);
    font-size: 0.9375rem;
    color: var(--ink-2);
}
.keys-list li:last-child { border-bottom: 0; }
.keys-list li::before {
    content: '';
    width: 6px; height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--patina-lit);
    transform: translateY(-2px);
}

.more-games {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: var(--s4);
}
.more-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--s4) var(--s5);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.more-card:hover { border-color: var(--ink-3); background: var(--surface-2); }
.more-card strong { font-family: var(--font-display); font-size: 1.0625rem; letter-spacing: -0.02em; }
.more-card span { font-size: 0.8125rem; color: var(--ink-3); }

/* ---- 10. Prose and legal pages ----------------------------------------- */

.page-head {
    padding-block: clamp(var(--s7), 6vw, var(--s8)) var(--s6);
    border-bottom: 1px solid var(--line);
}
.page-head h1 { max-width: 20ch; }
.page-head .lead { margin-bottom: 0; }
.page-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s5);
    margin-top: var(--s5);
    font-size: 0.8125rem;
    color: var(--ink-3);
}

.legal-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: clamp(var(--s6), 5vw, var(--s8));
    align-items: start;
    padding-block: var(--s7);
}
@media (max-width: 860px) {
    .legal-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
    .toc { position: static !important; }
}

.toc {
    position: sticky;
    top: calc(var(--nav-h) + var(--s5));
}
.toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid var(--line);
}
.toc li a {
    display: block;
    padding: var(--s2) var(--s4);
    margin-left: -1px;
    border-left: 1px solid transparent;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--ink-3);
    text-decoration: none;
}
.toc li a:hover { color: var(--ink); border-left-color: var(--brass-lit); }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s4); }
.prose h2 {
    font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.55rem);
    margin-top: var(--s7);
    margin-bottom: var(--s4);
    padding-top: var(--s5);
    border-top: 1px solid var(--line);
    scroll-margin-top: calc(var(--nav-h) + var(--s5));
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 1.0625rem; margin-top: var(--s5); margin-bottom: var(--s3); }
.prose p, .prose li { color: var(--ink-2); }
.prose ul, .prose ol { padding-left: var(--s5); margin-block: var(--s4); }
.prose li { margin-bottom: var(--s2); }
.prose li::marker { color: var(--brass-lit); }
.prose a { color: var(--ink); text-decoration-color: var(--brass-lit); }
.prose strong { color: var(--ink); }

/* Definition-style identity block, used in the Impressum and Contact */
.facts-table {
    margin: var(--s5) 0;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    overflow: hidden;
}
.facts-table > div {
    display: grid;
    grid-template-columns: minmax(140px, 32%) minmax(0, 1fr);
    gap: var(--s4);
    padding: var(--s3) var(--s5);
    border-bottom: 1px solid var(--line-soft);
}
.facts-table > div:last-child { border-bottom: 0; }
.facts-table dt {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-top: 3px;
}
.facts-table dd { margin: 0; color: var(--ink); }
@media (max-width: 520px) {
    .facts-table > div { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
}

/* Data table — no vertical rules, one rule under the header. */
.data-table-wrap { overflow-x: auto; margin-block: var(--s5); }
.data-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 0.9375rem;
}
.data-table th, .data-table td {
    padding: var(--s3) var(--s4);
    text-align: left;
    vertical-align: top;
}
.data-table thead th {
    border-bottom: 1.5px solid var(--line);
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    white-space: nowrap;
}
.data-table tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.data-table td { color: var(--ink-2); }
.data-table td:first-child {
    color: var(--ink);
    font-weight: 600;
    white-space: nowrap;
}

.callout {
    padding: var(--s5);
    border: 1px solid var(--line);
    border-left: 3px solid var(--patina-lit);
    border-radius: var(--r-md);
    background: var(--surface);
    margin-block: var(--s5);
}
.callout p { color: var(--ink-2); }
.callout--warn { border-left-color: var(--oxide-lit); }

/* About page value grid */
.values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
    gap: var(--s6) var(--s7);
}
.value h3 {
    font-size: 1.0625rem;
    padding-bottom: var(--s3);
    margin-bottom: var(--s3);
    border-bottom: 1px solid var(--line);
}
.value p { color: var(--ink-2); font-size: 0.9375rem; }

/* ---- 11. Forms --------------------------------------------------------- */

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(var(--s6), 5vw, var(--s8));
    align-items: start;
    padding-block: var(--s7);
}
@media (max-width: 860px) { .contact-layout { grid-template-columns: minmax(0, 1fr); } }

.form { display: flex; flex-direction: column; gap: var(--s5); }
.field { display: flex; flex-direction: column; gap: var(--s2); }
.field label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink);
}
.field label .req { color: var(--oxide); margin-left: 3px; }

.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: var(--tap);
    padding: var(--s3) var(--s4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink);
    transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.field textarea { min-height: 160px; resize: vertical; line-height: 1.55; }
/* The native select keeps its own arrow. Removing it with appearance:none and
   not replacing it leaves a control that does not look like a dropdown. */
.field select { padding-right: var(--s4); }

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--patina);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--patina) 22%, transparent);
}
.field .hint { font-size: 0.8125rem; color: var(--ink-3); }
.field .err { font-size: 0.8125rem; color: var(--oxide); display: none; }
.field.invalid input,
.field.invalid textarea { border-color: var(--oxide); }
.field.invalid .err { display: block; }

.check {
    display: flex;
    align-items: flex-start;
    gap: var(--s3);
    font-size: 0.875rem;
    color: var(--ink-2);
    line-height: 1.5;
}
.check input {
    width: 20px; height: 20px;
    min-height: 0;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--patina);
}
.check.invalid { color: var(--oxide); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert {
    display: flex;
    gap: var(--s4);
    padding: var(--s5);
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--surface);
    margin-bottom: var(--s6);
}
.alert svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.alert strong { display: block; margin-bottom: 2px; }
.alert p { font-size: 0.9375rem; color: var(--ink-2); margin: 0; }
.alert--ok   { border-left: 3px solid var(--patina); }
.alert--ok svg { color: var(--patina); }
.alert--bad  { border-left: 3px solid var(--oxide); }
.alert--bad svg { color: var(--oxide); }

.contact-cards { display: flex; flex-direction: column; gap: var(--s4); }
.contact-card {
    padding: var(--s5);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
}
.contact-card h3 {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: var(--s2);
}
.contact-card p { font-size: 0.9375rem; margin: 0; }
.contact-card a { color: var(--ink); text-decoration-color: var(--brass-lit); }

/* ---- 12. Footer, notice, misc ------------------------------------------ */

.footer {
    border-top: 1px solid var(--line);
    background: var(--bg-sunk);
    padding-block: var(--s8) var(--s6);
    margin-top: var(--s8);
}
.footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
    gap: var(--s7) var(--s6);
    padding-bottom: var(--s7);
}
@media (max-width: 900px) {
    .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
    .footer-top { grid-template-columns: minmax(0, 1fr); }
}

.footer-tagline {
    max-width: 42ch;
    margin-block: var(--s4);
    color: var(--ink-2);
    font-size: 0.9375rem;
}
.footer-id { font-size: 0.8125rem; line-height: 1.75; color: var(--ink-2); }
.footer-id h5 { margin-bottom: var(--s2); }
.footer-id strong { color: var(--ink); }
.footer-id a { color: var(--ink-2); }

.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: var(--s2); }
.footer-col a {
    font-size: 0.9375rem;
    color: var(--ink-2);
    text-decoration: none;
}
.footer-col a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--brass-lit); }

.footer-compliance {
    padding: var(--s5);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    margin-bottom: var(--s5);
}
.footer-compliance .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--patina);
    margin-bottom: var(--s2);
}
.footer-compliance .badge svg { width: 15px; height: 15px; }
.footer-compliance p { font-size: 0.8125rem; color: var(--ink-2); margin: 0; max-width: 90ch; }

.footer-disclaimer {
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--ink-3);
    max-width: 100ch;
    margin-bottom: var(--s6);
}
.footer-disclaimer p { margin: 0; }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3) var(--s5);
    justify-content: space-between;
    padding-top: var(--s5);
    border-top: 1px solid var(--line);
    font-size: 0.8125rem;
    color: var(--ink-3);
}
.footer-bottom a { color: var(--ink-3); }

/* Storage notice — not a consent gate: it never blocks the page. */
/* Hidden with visibility rather than display, so the slide-in actually
   animates — a display:none to display:flex change in the same frame cancels
   the transition. position:fixed means the hidden box costs no layout. */
.notice {
    position: fixed;
    left: var(--s4);
    right: var(--s4);
    bottom: var(--s4);
    z-index: 90;
    display: flex;
    visibility: hidden;
    align-items: flex-start;
    gap: var(--s4);
    max-width: 640px;
    margin-inline: auto;
    padding: var(--s4) var(--s5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    transform: translateY(140%);
    transition: transform 0.4s var(--ease), visibility 0.4s step-end;
}
.notice.show {
    visibility: visible;
    transform: none;
    transition: transform 0.4s var(--ease), visibility 0s;
}
.notice-ico { color: var(--patina); flex-shrink: 0; padding-top: 2px; }
.notice-ico svg { width: 22px; height: 22px; }
.notice-body { flex: 1; min-width: 0; }
.notice-body strong { display: block; font-size: 0.9375rem; margin-bottom: 2px; }
.notice-body p { font-size: 0.8125rem; line-height: 1.5; color: var(--ink-2); margin: 0; }
.notice .btn { flex-shrink: 0; align-self: center; }

@media (max-width: 560px) {
    .notice { flex-wrap: wrap; }
    .notice .btn { width: 100%; }
}

/* 404 */
.e404 {
    padding-block: clamp(var(--s8), 10vw, var(--s10));
    text-align: center;
}
.e404 .lead { margin-inline: auto; margin-bottom: var(--s6); }
.e404 .more-games { max-width: 760px; margin-inline: auto; margin-bottom: var(--s6); text-align: left; }

/* ---- Motion and print -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .gear--spin { animation: none !important; }
    .reveal { opacity: 1; transform: none; }
}

@media print {
    .nav, .footer-top, .notice, .cfg-warn, .stage-frame, .band { display: none; }
    body { background: #fff; color: #000; }
    .prose { max-width: none; }
    a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}