@charset "UTF-8";
/* ==========================================================================
   Rasterfeld — stylesheet
   --------------------------------------------------------------------------
   Hand-written, no framework, no build step. Sections:
     1. Tokens            7. Home: hero, featured, card grid, trust strip
     2. Reset             8. Board shell
     3. Typography        9. Prose and legal pages
     4. Buttons          10. Forms
     5. Shell + sidebar  11. Footer, notice, 404, motion, print
     6. Sections

   NO WEBFONTS. The stack below is the platform UI face — Segoe UI on Windows,
   SF on Apple, Roboto on Android. That is deliberate, not a shortcut:
     - it is the right genre of face for a games portal;
     - it costs zero requests, so cards render on the first paint;
     - and it removes the last thing here that could ever have become a
       third-party request. LG Munchen I, 20.01.2022, 3 O 17493/20 held that
       loading fonts from Google's servers transmits the visitor's IP without a
       legal basis. The privacy policy claims no third-party request at all, and
       now there is no font file to get that wrong with.

   Two appearances, both first-class. Contrast ratios beside each token were
   computed, not eyeballed.
   ========================================================================== */

/* ---- 1. Tokens --------------------------------------------------------- */

:root {
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
            Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';

    --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
    --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
    --s9: 5rem;

    --r-sm: 6px;
    --r:    10px;
    --r-lg: 16px;

    --measure: 68ch;
    --content: 1320px;
    --side-w: 248px;
    --bar-h: 60px;
    --tap: 44px;

    --ease: cubic-bezier(0.2, 0.7, 0.35, 1);
}

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

    --bg:        #0B0F14;
    --bg-2:      #0F141C;
    --surface:   #131922;
    --surface-2: #1A2230;
    --surface-3: #222C3C;

    --ink:       #E8EDF5;   /* 15.8:1 on --bg */
    --ink-2:     #A7B3C4;   /*  9.0:1 */
    --ink-3:     #7C8899;   /*  5.3:1 */

    --line:      #212A38;
    --line-2:    #2C3949;

    --brand:     #5B8CFF;   /*  6.0:1 */
    --brand-hi:  #7FA6FF;
    --on-brand:  #08101F;

    --g-green:   #2FB673;   /*  7.3:1 */
    --g-teal:    #22A6A0;   /*  6.4:1 */
    --g-indigo:  #5B8CFF;   /*  6.0:1 */
    --g-violet:  #A96BFF;   /*  5.6:1 */
    --g-warn:    #F2B33D;
    --g-bad:     #FF7A7A;

    --shadow:    0 1px 2px rgb(0 0 0 / .4), 0 14px 34px -22px rgb(0 0 0 / .85);
    --shadow-lg: 0 2px 6px rgb(0 0 0 / .45), 0 30px 60px -30px rgb(0 0 0 / .9);
    --glass:     rgb(11 15 20 / .82);
}

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

    --bg:        #F4F6FA;
    --bg-2:      #EDF1F7;
    --surface:   #FFFFFF;
    --surface-2: #EDF1F7;
    --surface-3: #E2E9F3;

    --ink:       #101623;   /* 16.4:1 on --bg */
    --ink-2:     #445068;   /*  7.4:1 */
    --ink-3:     #5F6C84;   /*  4.8:1 */

    --line:      #DCE3ED;
    --line-2:    #C6D1E0;

    --brand:     #2D5FD1;   /*  5.3:1 */
    --brand-hi:  #1F4AAF;
    --on-brand:  #FFFFFF;

    --g-green:   #1B7A4B;   /*  4.9:1 */
    --g-teal:    #127370;   /*  5.1:1 */
    --g-indigo:  #2D5FD1;   /*  5.3:1 */
    --g-violet:  #7A3FC0;   /*  5.8:1 */
    --g-warn:    #8A5200;
    --g-bad:     #A32020;

    --shadow:    0 1px 2px rgb(16 22 35 / .06), 0 10px 26px -18px rgb(16 22 35 / .28);
    --shadow-lg: 0 2px 6px rgb(16 22 35 / .08), 0 26px 54px -28px rgb(16 22 35 / .32);
    --glass:     rgb(244 246 250 / .86);
}

/* Per-game accent, set on the card, the rail item and the board page. */
.acc-green  { --acc: var(--g-green); }
.acc-teal   { --acc: var(--g-teal); }
.acc-indigo { --acc: var(--g-indigo); }
.acc-violet { --acc: var(--g-violet); }

/* ---- 2. Reset ---------------------------------------------------------- */

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

/* The UA rule for [hidden] loses to any class that sets a display, and several
   elements here are toggled with the attribute while also carrying a display. */
[hidden] { display: none !important; }

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: clamp(0.9375rem, 0.91rem + 0.14vw, 1rem);
    line-height: 1.6;
    -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; }

.num, .hud-value { font-variant-numeric: tabular-nums lining-nums; }

::selection { background: var(--brand); color: var(--on-brand); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); }

.skip-link {
    position: absolute;
    left: var(--s4);
    top: -4rem;
    z-index: 300;
    padding: var(--s3) var(--s5);
    background: var(--brand);
    color: var(--on-brand);
    border-radius: var(--r-sm);
    text-decoration: none;
    font-weight: 600;
    transition: top .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;
}

/* ---- 3. Typography ----------------------------------------------------- */

h1, h2, h3, h4 {
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 var(--s4);
    text-wrap: balance;
}
h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); letter-spacing: -0.03em; line-height: 1.08; }
h2 { font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.85rem); }
h3 { font-size: 1.0625rem; }
h4 { font-size: 0.9375rem; }

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

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(--brand); }
strong { font-weight: 600; }

.lead {
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 60ch;
    text-wrap: pretty;
}

.eyebrow {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--brand);
    margin: 0 0 var(--s3);
}

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

/* ---- 4. Buttons -------------------------------------------------------- */

.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: 999px;
    background: transparent;
    color: var(--ink);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s var(--ease), border-color .15s var(--ease),
                color .15s var(--ease), transform .15s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.btn--primary:hover { background: var(--brand-hi); border-color: var(--brand-hi); }

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

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

.btn--sm { min-height: 34px; padding: var(--s2) var(--s4); font-size: 0.8125rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    min-width: var(--tap);
    height: 36px;
    padding: 0 var(--s3);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink-2);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    transition: color .15s var(--ease), border-color .15s var(--ease), background-color .15s var(--ease);
}
.icon-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.icon-btn svg { width: 18px; height: 18px; }

/* Segmented control — difficulty, board size, draw count, layout. */
.seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: var(--surface-2);
}
.seg button {
    min-height: 30px;
    padding: 0 var(--s4);
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-3);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .14s var(--ease), color .14s var(--ease);
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed='true'] { background: var(--brand); color: var(--on-brand); }

/* ---- 5. Shell + sidebar ------------------------------------------------ */

.shell {
    display: grid;
    grid-template-columns: var(--side-w) minmax(0, 1fr);
    align-items: start;
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: var(--s5);
    padding: var(--s5) var(--s4);
    background: var(--surface);
    border-right: 1px solid var(--line);
    overflow-y: auto;
}

.side-brand {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding-inline: var(--s2);
    text-decoration: none;
    color: var(--ink);
}
.side-brand svg { width: 30px; height: 30px; flex-shrink: 0; }
.side-brand b { display: block; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; }
.side-brand small { display: block; font-size: 0.6875rem; color: var(--ink-3); }

.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav h5 { padding-inline: var(--s2); margin-bottom: var(--s2); }
.side-nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s3);
    min-height: 42px;
    padding: 0 var(--s3);
    border-radius: var(--r-sm);
    color: var(--ink-2);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: background-color .14s var(--ease), color .14s var(--ease);
}
.side-nav a:hover { background: var(--surface-2); color: var(--ink); }
.side-nav a.active { background: var(--surface-2); color: var(--ink); font-weight: 600; }
.side-nav a.active::before {
    content: '';
    position: absolute;
    left: 0;
    width: 3px;
    height: 22px;
    border-radius: 0 3px 3px 0;
    background: var(--acc, var(--brand));
}

/* The swatch that stands in for each game's artwork in the rail. */
.side-dot {
    width: 22px; height: 22px;
    flex-shrink: 0;
    border-radius: 6px;
    background: var(--acc, var(--brand));
    display: grid;
    place-items: center;
    color: #FFF;
}
.side-dot svg { width: 14px; height: 14px; }

.side-sep { height: 1px; background: var(--line); margin-inline: var(--s2); }

.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--s3); }
.side-legal { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); padding-inline: var(--s2); }
.side-legal a { font-size: 0.75rem; color: var(--ink-3); text-decoration: none; }
.side-legal a:hover { color: var(--ink); text-decoration: underline; }

.main { min-width: 0; }

/* Slim bar over the content: utilities right, burger and brand on mobile. */
.mainbar {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: var(--s3);
    min-height: var(--bar-h);
    padding-inline: clamp(var(--s4), 3vw, var(--s7));
    background: var(--glass);
    backdrop-filter: saturate(1.4) blur(12px);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--line);
}
.mainbar-brand { display: none; align-items: center; gap: var(--s2); text-decoration: none; color: var(--ink); font-weight: 700; }
.mainbar-brand svg { width: 26px; height: 26px; }
.mainbar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s2); }

.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; }
.side-close { display: none; }
.scrim { display: none; }

@media (max-width: 900px) {
    .shell { grid-template-columns: minmax(0, 1fr); }
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 200;
        width: min(84vw, 300px);
        transform: translateX(-102%);
        transition: transform .28s var(--ease);
        box-shadow: var(--shadow-lg);
    }
    .sidebar.open { transform: none; }
    .side-close { display: inline-flex; align-self: flex-end; }
    .burger { display: inline-flex; }
    .mainbar-brand { display: flex; }
    .scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 150;
        background: rgb(0 0 0 / .5);
        opacity: 0;
        visibility: hidden;
        transition: opacity .28s var(--ease), visibility .28s step-end;
    }
    .scrim.show { opacity: 1; visibility: visible; transition: opacity .28s var(--ease), visibility 0s; }
}

/* ---- 6. Sections ------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--content);
    margin-inline: auto;
    padding-inline: clamp(var(--s4), 3vw, var(--s7));
}

.section { padding-block: clamp(var(--s6), 4.5vw, var(--s8)); }
.section--tight { padding-block: clamp(var(--s5), 3vw, var(--s6)); }
.section--alt { background: var(--bg-2); border-block: 1px solid var(--line); }

.section-head { margin-bottom: var(--s6); max-width: 62ch; }
.section-head h2 { margin-bottom: var(--s2); }

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

.reveal { opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---- 7. Home page ------------------------------------------------------ */

.hero { padding-block: clamp(var(--s6), 4vw, var(--s8)) var(--s5); }
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(var(--s5), 4vw, var(--s8));
    align-items: center;
}
.hero h1 { margin-bottom: var(--s4); }
.hero .lead { margin-bottom: var(--s6); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

@media (max-width: 860px) {
    .hero-grid { grid-template-columns: minmax(0, 1fr); }
    /* Copy first on a phone: the device is decoration and should not push the
       headline and the play button below the fold. */
    .hero-device { order: 2; max-width: 320px; margin-inline: auto; }
}

/* ---- Hero: staggered text -------------------------------------------------
   The heading is one span per word (animateWords() in config/site.js) and the
   eyebrow, lead and buttons carry an --i of their own, so the whole block
   resolves in one sweep rather than four unrelated ones. Everything is a
   forwards-filling animation from opacity 0, which means the final state is the
   readable one — if the animation never runs, the text is simply there. */
/* The resting state is VISIBLE and the animation fills *backwards*, not
   forwards. That ordering matters: with an opacity:0 base and a forwards fill,
   anything that stops the animation from running — an unsupported browser, an
   extension that kills CSS animation, a stylesheet that half-loads — leaves the
   headline permanently invisible. This way the text is simply there, and the
   animation is the only thing that can hide it, briefly, while it plays. */
.aw .w,
.hero-copy .anim {
    display: inline-block;
    opacity: 1;
    animation: hero-rise .55s var(--ease) backwards;
    animation-delay: calc(var(--i) * 70ms);
}
.hero-copy .anim { display: block; animation-delay: calc(320ms + var(--i) * 110ms); }
.hero-copy .eyebrow.anim { display: inline-block; animation-delay: 0ms; }
.hero-actions.anim { display: flex; }

@keyframes hero-rise {
    from { opacity: 0; transform: translateY(0.45em); }
    to   { opacity: 1; transform: none; }
}

/* ---- Hero: the console ---------------------------------------------------- */
.hero-device { margin: 0; width: 100%; }
.console { width: 100%; height: auto; max-height: 420px; }

/* The whole device drifts, so the page has some life without anything moving
   fast enough to distract from reading. */
.console-body {
    transform-box: fill-box;
    transform-origin: center;
    animation: console-in .7s var(--ease) both, console-float 6s ease-in-out 0.7s infinite;
}
@keyframes console-in {
    from { opacity: 0; transform: translateY(18px) scale(.94); }
    to   { opacity: 1; transform: none; }
}
@keyframes console-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* Four screens, 4s each on a 16s loop. The base state is transparent and the
   keyframes start transparent too, so a slide waiting out its delay is hidden
   rather than briefly flashing. */
.console-slide {
    opacity: 0;
    animation: console-cycle 16s linear infinite;
    animation-delay: calc(var(--i) * 4s);
}
.console-slide[style*="--i:0"] { opacity: 1; }
@keyframes console-cycle {
    0%   { opacity: 0; }
    3%   { opacity: 1; }
    22%  { opacity: 1; }
    25%  { opacity: 0; }
    100% { opacity: 0; }
}

/* A slow refresh bar across the screen. Deliberately faint and slow: nothing on
   this site flashes, which is a WCAG 2.3.1 line as much as a taste one. */
.console-sweep { animation: console-sweep 4.5s linear infinite; }
@keyframes console-sweep {
    from { transform: translateY(-30px); }
    to   { transform: translateY(140px); }
}

.console-led { animation: console-led 2.6s ease-in-out infinite; }
@keyframes console-led {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

/* The two buttons press in turn, as if someone were playing. */
.console-btn {
    transform-box: fill-box;
    transform-origin: center;
    animation: console-press 2.4s ease-in-out infinite;
    animation-delay: calc(var(--i) * 1.2s);
}
@keyframes console-press {
    0%, 74%, 100% { transform: translateY(0) scale(1); }
    82%           { transform: translateY(2px) scale(.94); }
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: clamp(var(--s4), 2vw, var(--s5));
}

.gcard {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.gcard:hover { transform: translateY(-4px); border-color: var(--acc, var(--brand)); box-shadow: var(--shadow-lg); }

.gcard-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.gcard-art svg { width: 100%; height: 100%; transition: transform .35s var(--ease); }
.gcard:hover .gcard-art svg { transform: scale(1.05); }

.gcard-play {
    position: absolute;
    right: var(--s3);
    bottom: var(--s3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px var(--s3);
    border-radius: 999px;
    background: var(--brand);
    color: var(--on-brand);
    font-size: 0.75rem;
    font-weight: 700;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.gcard:hover .gcard-play, .gcard:focus-visible .gcard-play { opacity: 1; transform: none; }

.gcard-body { padding: var(--s4); display: flex; flex-direction: column; gap: 4px; }
.gcard-body h3 { margin: 0; font-size: 1.0625rem; }
.gcard-meta { display: flex; align-items: center; gap: var(--s2); font-size: 0.75rem; color: var(--ink-3); }
.gcard-cat { color: var(--acc, var(--brand)); font-weight: 700; }
.gcard-body p { margin: 0; font-size: 0.8125rem; color: var(--ink-2); }

/* Trust strip: what used to be the terminal self-test panel, in plain words. */
.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--s4); }
.trust-item { display: flex; gap: var(--s3); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.trust-item svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--brand); }
.trust-item strong { display: block; font-size: 0.9375rem; margin-bottom: 2px; }
.trust-item p { margin: 0; font-size: 0.8125rem; color: var(--ink-2); }

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(248px, 100%), 1fr));
    gap: var(--s6);
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: step;
}
.steps li { counter-increment: step; }
.steps li::before {
    content: counter(step);
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    margin-bottom: var(--s3);
    border-radius: 999px;
    background: var(--brand);
    color: var(--on-brand);
    font-size: 0.875rem;
    font-weight: 700;
}
.steps h3 { margin-bottom: var(--s2); }
.steps p { color: var(--ink-2); font-size: 0.9375rem; }

.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(256px, 100%), 1fr)); gap: var(--s4); }
.principle { padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.principle h3 { margin-bottom: var(--s2); }
.principle p { color: var(--ink-2); font-size: 0.9375rem; }

.faq { max-width: var(--measure); }
.faq details { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); margin-bottom: var(--s3); }
.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    min-height: var(--tap);
    padding: var(--s3) var(--s4);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '';
    width: 9px; height: 9px;
    flex-shrink: 0;
    border-right: 2px solid var(--ink-3);
    border-bottom: 2px solid var(--ink-3);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-1px, -1px); }
.faq summary:hover { color: var(--brand); }
.faq .faq-a { padding: 0 var(--s4) var(--s4); color: var(--ink-2); max-width: 64ch; }

.band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s5);
    padding: clamp(var(--s5), 3vw, var(--s7));
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, var(--brand), var(--g-violet));
    color: #fff;
}
.band h2 { color: #fff; margin-bottom: var(--s2); }
.band p { color: rgb(255 255 255 / .84); margin: 0; }
.band .btn--primary { background: #fff; color: #16203A; border-color: #fff; }
.band .btn--primary:hover { background: rgb(255 255 255 / .88); border-color: rgb(255 255 255 / .88); }

/* ---- 8. Board shell ---------------------------------------------------- */

.board-head { padding-block: var(--s6) var(--s5); border-bottom: 1px solid var(--line); }
.board-head h1 { margin-bottom: var(--s3); }
.board-head .lead { margin-bottom: 0; }

.board-facts { display: flex; flex-wrap: wrap; gap: var(--s5); margin: var(--s5) 0 0; padding: 0; }
.board-facts div { display: flex; flex-direction: column; gap: 2px; }
.board-facts dt { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.board-facts dd { margin: 0; font-size: 0.9375rem; }

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

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

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

.stage { position: relative; background: var(--bg-2); touch-action: manipulation; }
.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-2);
    background: color-mix(in srgb, var(--bg-2) 90%, transparent);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.stage-overlay h2 { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.7rem); margin: 0; }
.stage-overlay p { margin: 0; max-width: 42ch; color: var(--ink-2); font-size: 0.9375rem; }
.stage-overlay .ov-score { font-size: 2.4rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--brand); }
.ov-badge {
    display: inline-block;
    padding: 3px var(--s3);
    border-radius: 999px;
    background: color-mix(in srgb, var(--g-green) 22%, transparent);
    color: var(--g-green);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.stage-overlay--fail .ov-badge { background: color-mix(in srgb, var(--g-bad) 22%, transparent); color: var(--g-bad); }
.stage-overlay--fail h2 { color: var(--g-bad); }

.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.625rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }

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

.board-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(var(--s5), 4vw, var(--s7)); 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: 2.3rem;
    padding-block: var(--s3);
    border-bottom: 1px solid var(--line);
    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: calc(var(--s3) + 1px);
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--ink);
    font-size: 0.75rem;
    font-weight: 700;
}

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

.more-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--s4); }
.more-card {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    text-decoration: none;
    color: inherit;
    transition: border-color .16s var(--ease), transform .16s var(--ease);
}
.more-card:hover { border-color: var(--acc, var(--brand)); transform: translateY(-2px); }
.more-card .side-dot { width: 30px; height: 30px; border-radius: 8px; }
.more-card .side-dot svg { width: 18px; height: 18px; }
.more-card b { display: block; font-size: 0.9375rem; }
.more-card span { font-size: 0.75rem; color: var(--ink-3); }

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

.page-head { padding-block: var(--s6) var(--s5); border-bottom: 1px solid var(--line); }
.page-head h1 { max-width: 26ch; }
.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: 230px minmax(0, 1fr);
    gap: clamp(var(--s6), 4vw, var(--s8));
    align-items: start;
    padding-block: var(--s6);
}
@media (max-width: 880px) {
    .legal-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
    .toc { position: static !important; }
}

.toc { position: sticky; top: calc(var(--bar-h) + var(--s4)); }
.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: 2px solid transparent; font-size: 0.8125rem; line-height: 1.45; color: var(--ink-3); text-decoration: none; }
.toc li a:hover { color: var(--brand); border-left-color: var(--brand); }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s4); }
.prose h2 { font-size: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem); margin-top: var(--s7); margin-bottom: var(--s4); padding-top: var(--s5); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--bar-h) + var(--s5)); }
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { 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(--brand); }
.prose a { color: var(--brand); }
.prose strong { color: var(--ink); }

.facts-table { margin: var(--s5) 0; border: 1px solid var(--line); border-radius: var(--r); 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(--s4); border-bottom: 1px solid var(--line); }
.facts-table > div:last-child { border-bottom: 0; }
.facts-table dt { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding-top: 2px; }
.facts-table dd { margin: 0; color: var(--ink); font-size: 0.9375rem; }
@media (max-width: 520px) { .facts-table > div { grid-template-columns: minmax(0, 1fr); gap: var(--s1); } }

.data-table-wrap { overflow-x: auto; margin-block: var(--s5); border: 1px solid var(--line); border-radius: var(--r); }
.data-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.875rem; }
.data-table th, .data-table td { padding: var(--s3) var(--s4); text-align: left; vertical-align: top; }
.data-table thead th { background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.data-table td { color: var(--ink-2); }
.data-table tbody tr + tr td { border-top: 1px solid var(--line); }
.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(--brand); border-radius: var(--r); background: var(--surface); margin-block: var(--s5); }
.callout p { color: var(--ink-2); }
.callout--warn { border-left-color: var(--g-warn); }

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

/* ---- 10. Forms --------------------------------------------------------- */

.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(var(--s6), 4vw, var(--s8)); align-items: start; padding-block: var(--s6); }
@media (max-width: 880px) { .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(--g-bad); 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-2);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink);
    font-size: 0.9375rem;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent);
}
.field .hint { font-size: 0.8125rem; color: var(--ink-3); }
.field .err { font-size: 0.8125rem; color: var(--g-bad); display: none; }
.field.invalid input, .field.invalid textarea { border-color: var(--g-bad); }
.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.55; }
.check input { width: 18px; height: 18px; min-height: 0; margin-top: 3px; flex-shrink: 0; accent-color: var(--brand); }
.check.invalid { color: var(--g-bad); }

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

.alert { display: flex; gap: var(--s3); padding: var(--s4) var(--s5); border: 1px solid var(--line); border-left: 3px solid var(--g-green); border-radius: var(--r); background: var(--surface); margin-bottom: var(--s6); }
.alert strong { display: block; margin-bottom: 2px; }
.alert p { font-size: 0.9375rem; color: var(--ink-2); margin: 0; }
.alert::before { content: '\2713'; color: var(--g-green); font-weight: 700; flex-shrink: 0; }
.alert--bad { border-left-color: var(--g-bad); }
.alert--bad::before { content: '!'; color: var(--g-bad); }

.contact-cards { display: flex; flex-direction: column; gap: var(--s3); }
.contact-card { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.contact-card h3 { font-size: 0.625rem; font-weight: 700; 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(--brand); }

/* ---- 11. Footer, notice, 404, motion, print ---------------------------- */

.footer { border-top: 1px solid var(--line); background: var(--bg-2); padding-block: var(--s7) var(--s5); margin-top: var(--s7); }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--s6) var(--s5); padding-bottom: var(--s6); }
@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: 44ch; margin-block: var(--s3); color: var(--ink-2); font-size: 0.875rem; }
.footer-id { font-size: 0.8125rem; line-height: 1.8; color: var(--ink-2); }
.footer-id strong { color: var(--ink); }
.footer-id a { color: var(--brand); }

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

.footer-compliance { padding: var(--s4) var(--s5); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); margin-bottom: var(--s5); }
.footer-compliance .badge { display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-green); margin-bottom: var(--s2); }
.footer-compliance p { font-size: 0.8125rem; color: var(--ink-2); margin: 0; max-width: 96ch; }

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

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

.notice {
    position: fixed;
    left: var(--s4);
    right: var(--s4);
    bottom: var(--s4);
    z-index: 250;
    display: flex;
    visibility: hidden;
    align-items: flex-start;
    gap: var(--s4);
    max-width: 660px;
    margin-inline: auto;
    padding: var(--s4) var(--s5);
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    box-shadow: var(--shadow-lg);
    transform: translateY(160%);
    transition: transform .36s var(--ease), visibility .36s step-end;
}
.notice.show { visibility: visible; transform: none; transition: transform .36s var(--ease), visibility 0s; }
.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.55; 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%; } }

.e404 { padding-block: clamp(var(--s7), 8vw, var(--s9)); text-align: center; }
.e404 .err-code { display: inline-block; margin-bottom: var(--s4); padding: var(--s2) var(--s4); border-radius: 999px; background: color-mix(in srgb, var(--g-bad) 16%, transparent); color: var(--g-bad); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; }
.e404 .lead { margin-inline: auto; margin-bottom: var(--s6); }
.e404 .more-boards { max-width: 780px; margin-inline: auto; margin-bottom: var(--s6); text-align: left; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .reveal { opacity: 1; transform: none; }
    /* The hero already rests in its finished state, so this only has to stop
       the animations from running at all. */
    .aw .w, .hero-copy .anim { opacity: 1; transform: none; animation: none; }
    .console-body, .console-slide, .console-sweep, .console-led, .console-btn { animation: none; }
    .console-sweep { display: none; }
}

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