/* smallpp.win v2 — the shared design system ("Pocket Arcade").
   Every page links this file. It holds the tokens, the chrome (top bar, buttons, chips, sheets,
   toasts) and the base page. A game file keeps only what makes that game different.
   Rules this file keeps (AGENTS.md): no backdrop-filter, no animated filter or
   background-position, static backgrounds, touch-action never none. Spec: docs/DESIGN.md. */

@font-face {
    font-family: 'Rubik';
    src: url('fonts/rubik.woff2') format('woff2');
    font-weight: 300 900;
    font-display: swap;
}
@font-face {
    font-family: 'Unbounded';
    src: url('fonts/unbounded.woff2') format('woff2');
    font-weight: 200 900;
    font-display: swap;
}

:root {
    /* Ink: the page and its surfaces, darkest to lightest. */
    --ink-0: #0e0b18;
    --ink-1: #17132a;
    --ink-2: #221c3b;
    --ink-3: #2f284f;
    --ink-4: #463d6f;
    --line: rgba(255, 255, 255, 0.08);
    --text: #fbf8ff;
    --muted: #a69fc4;
    --dim: #6f6891;
    --on-accent: #150f24;      /* text on a bright accent button */

    /* Meaning never changes between games: gold is money and reward, mint is good, rose is bad. */
    --gold: #ffc934;
    --gold-edge: #b07d00;
    --mint: #3ee6a8;
    --rose: #ff4d6d;
    --brand: #ff5fa2;

    /* Each page sets its own accent on <body data-game="...">; the hub uses the brand pink. */
    --accent: var(--brand);

    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 22px;
    --r-xl: 28px;
    --t-fast: 110ms;
    --t-base: 220ms;
    --ease: cubic-bezier(.22, .61, .36, 1);
    --pop: cubic-bezier(.34, 1.56, .64, 1);

    --font: 'Rubik', ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Unbounded', 'Rubik', system-ui, sans-serif;
    --bar-h: 56px;

    /* What changes in light mode besides the ink (below). */
    --press-edge: #0a0812;                 /* the pressed-down edge under buttons and tiles */
    --scrim: rgba(8, 6, 16, 0.78);         /* behind a sheet */
    --scrim-soft: rgba(8, 6, 16, 0.45);
    --dots: rgba(255, 255, 255, 0.045);    /* the background dot grid */
    --drop: rgba(0, 0, 0, 0.35);           /* hard drop shadow under cards and toasts */
    color-scheme: dark;
}

/* Light mode (since v2.9). spp.js sets data-theme on <html> before the page draws: the device's
   choice until the player picks one, remembered in 'spp.theme'. Only the ink flips; the game
   accents stay, and text drawn in an accent uses its darker *-ink twin so it reads on white.
   Pages drawn dark on purpose opt out with <html data-spp-dark>. */
:root[data-theme="light"] {
    --ink-0: #f5f2fa;
    --ink-1: #ffffff;
    --ink-2: #efeaf6;
    --ink-3: #ddd5ea;
    --ink-4: #b9aed0;
    --line: rgba(30, 20, 60, 0.1);
    --text: #1d1733;
    --muted: #5f5880;
    --dim: #8a83a6;
    --gold-edge: #c99a12;
    --brand: #f0388a;
    --press-edge: #cbc1dc;
    --scrim: rgba(40, 30, 70, 0.42);
    --scrim-soft: rgba(40, 30, 70, 0.22);
    --dots: rgba(40, 30, 80, 0.07);
    --drop: rgba(60, 40, 110, 0.14);
    color-scheme: light;
}

/* Game accents. Bright enough for dark text on them; the hub tiles use the same values. */
[data-game="precision"]   { --accent: #b18cff; }
[data-game="watersort"]   { --accent: #4cc9ff; }
[data-game="coinpusher"]  { --accent: #ffc934; }
[data-game="alleyroller"] { --accent: #ff8f3f; }
[data-game="pong"]        { --accent: #ff5fa2; }
[data-game="minesweeper"] { --accent: #b4f03c; }
[data-game="suika"]       { --accent: #ff6b6b; }
[data-game="snake"]       { --accent: #3ee6a8; }
[data-game="fps"]         { --accent: #8fa3ff; }
[data-game="bricks"]      { --accent: #e879f9; }
[data-game="fruitmachine"] { --accent: #2fe86b; }
[data-game="chomp"]       { --accent: #ffe14a; }
[data-game="gridpop"]     { --accent: #36e0e8; }
/* Bad Taste is black and white cards: ivory on the dark page, card-black on the light one. */
[data-game="badtaste"]    { --accent: #f2ecdf; }
[data-game="sketchy"]     { --accent: #ff9e7a; }
[data-game="merge"]       { --accent: #ffb648; }
[data-game="trio"]        { --accent: #2dd4bf; }
[data-game="bonbon"]      { --accent: #ff7eb6; }
[data-game="epochs"]      { --accent: #5d9bff; }
[data-game="hedgepop"]    { --accent: #79d861; }
[data-game="stacked"]     { --accent: #ff8c5a; }
[data-game="clack"]       { --accent: #e2ff5c; }
[data-game="trundle"]     { --accent: #f0b37e; }
[data-game="inkling"]     { --accent: #f472d0; }

/* Derived from the accent where it is set, so a game's buttons get that game's edge. */
:root, [data-game] {
    --accent-edge: color-mix(in oklab, var(--accent) 55%, #000);
    --accent-soft: color-mix(in oklab, var(--accent) 16%, transparent);
    --accent-ink: var(--accent);
}
:root { --gold-ink: var(--gold); --mint-ink: var(--mint); --rose-ink: var(--rose); }
/* On a light page the bright accents are fills; as text they take a darker twin. */
:root[data-theme="light"], :root[data-theme="light"] [data-game] {
    --accent-edge: color-mix(in oklab, var(--accent) 70%, #000);
    --accent-soft: color-mix(in oklab, var(--accent) 20%, transparent);
    --accent-ink: color-mix(in oklab, var(--accent) 58%, #000);
}
:root[data-theme="light"] [data-game="badtaste"] { --accent: #241d33; --on-accent: #fff; --accent-ink: #241d33; }
:root[data-theme="light"] { --gold-ink: #a87400; --mint-ink: #0f8f62; --rose-ink: #d81f45; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    margin: 0;
    min-height: 100dvh;
    background-color: var(--ink-0);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
body.spp-game {
    /* Game pages fill the screen and never scroll; the stage takes what the bars leave. */
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    user-select: none;
    -webkit-user-select: none;
}
/* Static: a soft accent glow at the top and a faint dot grid, on a fixed layer of its own so
   scrolling never repaints it. Never animated. */
body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        radial-gradient(120% 60% at 50% -10%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 60%),
        radial-gradient(var(--dots) 1px, transparent 1.5px);
    background-size: 100% 100%, 22px 22px;
}
body.spp-perf::before { background-image: none; }

/* ---------- Seasons (v2.32): a holiday look that switches itself on near the day ----------
   spp.js sets data-season on <html> from the date (SPP.season; 'spp.seasons' = 'off' turns it
   off on this device). A season re-tints the brand (the hub's accent; games keep theirs) and lays
   a faint pattern of its shapes over the page background: a mask on a fixed layer of its own,
   drawn once and never animated (the GPU rules). The shapes take the season's two colours from a
   gradient behind the mask. Art: --season-art (the repeating tile) and --season-icon (one shape). */
body::after {
    content: none; position: fixed; inset: 0; z-index: -1; pointer-events: none;
}
:root[data-season] body::after {
    content: "";
    background: linear-gradient(150deg, var(--season-a), var(--season-b));
    opacity: var(--season-alpha, 0.2);
    -webkit-mask-image: var(--season-art); mask-image: var(--season-art);
    -webkit-mask-size: 240px 240px; mask-size: 240px 240px;
    -webkit-mask-repeat: repeat; mask-repeat: repeat;
}
:root[data-theme="light"][data-season] body::after { --season-alpha: 0.24; }
body.spp-perf::after { content: none !important; }
/* The season's one shape, in the text colour, for notes and badges. */
.season-ico {
    display: inline-block; flex: none; width: 1.25em; height: 1.25em; vertical-align: -0.25em;
    background: currentColor;
    -webkit-mask: var(--season-icon) center / contain no-repeat; mask: var(--season-icon) center / contain no-repeat;
}
:root[data-season="sintmaarten"] { --season-a: #ffc934; --season-b: #6cc4ff; --brand: #ffb627; }
:root[data-season="halloween"]   { --season-a: #ff8a1f; --season-b: #b06bff; --brand: #ff8a1f; }
:root[data-season="sinterklaas"] { --season-a: #ff4d5e; --season-b: #ffc934; --brand: #ff5a63; }
:root[data-season="christmas"]   { --season-a: #ff5a5f; --season-b: #3ee6a8; --brand: #ff5a5f; }
:root[data-season="newyear"]     { --season-a: #ffc934; --season-b: #b18cff; --brand: #b18cff; }
:root[data-season="valentine"]   { --season-a: #ff4f8b; --season-b: #ff9ec2; --brand: #ff4f8b; }
:root[data-season="easter"]      { --season-a: #ffd84a; --season-b: #9dd8ff; --brand: #ffcf3a; }
:root[data-season="kingsday"]    { --season-a: #ff8c1a; --season-b: #ffb347; --brand: #ff8c1a; }
/* Light pages take a deeper twin, as the light brand does, so text in it still reads on white. */
:root[data-theme="light"][data-season="sintmaarten"] { --season-a: #d99a00; --season-b: #2f8fd8; --brand: #d98e00; }
:root[data-theme="light"][data-season="halloween"]   { --season-a: #f07000; --season-b: #8a3ff0; --brand: #ef6c00; }
:root[data-theme="light"][data-season="sinterklaas"] { --season-a: #e3263a; --season-b: #d99a00; --brand: #e3263a; }
:root[data-theme="light"][data-season="christmas"]   { --season-a: #e0303a; --season-b: #13a86f; --brand: #e0303a; }
:root[data-theme="light"][data-season="newyear"]     { --season-a: #d39a00; --season-b: #8a5cf0; --brand: #8a5cf0; }
:root[data-theme="light"][data-season="valentine"]   { --season-a: #e8306f; --season-b: #ff7aa8; --brand: #e8306f; }
:root[data-theme="light"][data-season="easter"]      { --season-a: #e8b400; --season-b: #4aa8e8; --brand: #e0a800; }
:root[data-theme="light"][data-season="kingsday"]    { --season-a: #f07000; --season-b: #ffa020; --brand: #f07000; }
:root[data-season="sintmaarten"] {
    --season-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cdefs%3E%3Cg id='lantern'%3E%3Cpath fill-rule='evenodd' d='M-10 2A10 9 0 1 0 10 2A10 9 0 1 0-10 2Z M-9.6-1.4H9.6V0.4H-9.6Z M-9.6 3.8H9.6V5.6H-9.6Z'/%3E%3Crect x='-4.5' y='-9.5' width='9' height='3' rx='1'/%3E%3Crect x='-4.5' y='10' width='9' height='2.5' rx='1'/%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' d='M0-9.5V-13M0-13Q6-16 13-16'/%3E%3C/g%3E%3Cg id='moon'%3E%3Cpath d='M3-10A10 10 0 1 0 3 10A8 8 0 1 1 3-10Z'/%3E%3C/g%3E%3Cg id='star'%3E%3Cpath d='M0-10L2.9-4L9.5-3.1L4.7 1.5L5.9 8.1L0 5L-5.9 8.1L-4.7 1.5L-9.5-3.1L-2.9-4Z'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23lantern' transform='translate(34 40) rotate(-12) scale(1)'/%3E%3Cuse href='%23moon' transform='translate(156 34) rotate(10) scale(1.1)'/%3E%3Cuse href='%23star' transform='translate(96 112) rotate(0) scale(0.75)'/%3E%3Cuse href='%23lantern' transform='translate(206 128) rotate(16) scale(0.85)'/%3E%3Cuse href='%23lantern' transform='translate(42 178) rotate(-8) scale(0.95)'/%3E%3Cuse href='%23moon' transform='translate(146 206) rotate(0) scale(0.6)'/%3E%3Cuse href='%23star' transform='translate(222 224) rotate(20) scale(0.5)'/%3E%3C/svg%3E");
    --season-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-15 -15 30 30'%3E%3Cpath fill-rule='evenodd' d='M-10 2A10 9 0 1 0 10 2A10 9 0 1 0-10 2Z M-9.6-1.4H9.6V0.4H-9.6Z M-9.6 3.8H9.6V5.6H-9.6Z'/%3E%3Crect x='-4.5' y='-9.5' width='9' height='3' rx='1'/%3E%3Crect x='-4.5' y='10' width='9' height='2.5' rx='1'/%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' d='M0-9.5V-13M0-13Q6-16 13-16'/%3E%3C/svg%3E");
}
:root[data-season="halloween"] {
    --season-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cdefs%3E%3Cg id='bat'%3E%3Cpath d='M-15 0Q-11-7-5-3L-3-7L-1-3H1L3-7L5-3Q11-7 15 0Q11-1 9 3Q6 0 3 3Q0 1-3 3Q-6 0-9 3Q-11-1-15 0Z'/%3E%3C/g%3E%3Cg id='pumpkin'%3E%3Cpath fill-rule='evenodd' d='M0-7C-4-9-12-8-12 1C-12 8-6 11 0 10C6 11 12 8 12 1C12-8 4-9 0-7Z M-7 0L-4.5-4L-2 0Z M2 0L4.5-4L7 0Z M-7 3Q0 9 7 3Q0 6-7 3Z'/%3E%3Cpath d='M-1.5-7.5V-12Q0-13 2-12.5L1.5-7.5Z'/%3E%3C/g%3E%3Cg id='ghost'%3E%3Cpath fill-rule='evenodd' d='M-8 10V-2A8 8 0 0 1 8-2V10L5 7L2.5 10L0 7L-2.5 10L-5 7Z M-5-2a1.5 2 0 1 0 3 0a1.5 2 0 1 0-3 0Z M2-2a1.5 2 0 1 0 3 0a1.5 2 0 1 0-3 0Z'/%3E%3C/g%3E%3Cg id='star'%3E%3Cpath d='M0-10L2.9-4L9.5-3.1L4.7 1.5L5.9 8.1L0 5L-5.9 8.1L-4.7 1.5L-9.5-3.1L-2.9-4Z'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23bat' transform='translate(34 40) rotate(-12) scale(1)'/%3E%3Cuse href='%23pumpkin' transform='translate(156 34) rotate(10) scale(1.1)'/%3E%3Cuse href='%23ghost' transform='translate(96 112) rotate(0) scale(0.75)'/%3E%3Cuse href='%23star' transform='translate(206 128) rotate(16) scale(0.85)'/%3E%3Cuse href='%23bat' transform='translate(42 178) rotate(-8) scale(0.95)'/%3E%3Cuse href='%23pumpkin' transform='translate(146 206) rotate(0) scale(0.6)'/%3E%3Cuse href='%23ghost' transform='translate(222 224) rotate(20) scale(0.5)'/%3E%3C/svg%3E");
    --season-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-15 -15 30 30'%3E%3Cpath fill-rule='evenodd' d='M0-7C-4-9-12-8-12 1C-12 8-6 11 0 10C6 11 12 8 12 1C12-8 4-9 0-7Z M-7 0L-4.5-4L-2 0Z M2 0L4.5-4L7 0Z M-7 3Q0 9 7 3Q0 6-7 3Z'/%3E%3Cpath d='M-1.5-7.5V-12Q0-13 2-12.5L1.5-7.5Z'/%3E%3C/svg%3E");
}
:root[data-season="sinterklaas"] {
    --season-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cdefs%3E%3Cg id='mitre'%3E%3Cpath fill-rule='evenodd' d='M-8 10V-2Q-8-9 0-14Q8-9 8-2V10Z M-1.2-7H1.2V-3H4V-0.6H1.2V5H-1.2V-0.6H-4V-3H-1.2Z'/%3E%3C/g%3E%3Cg id='gift'%3E%3Cpath d='M-9-1H-1V10H-9Z M1-1H9V10H1Z M-10-6H-1V-2.5H-10Z M1-6H10V-2.5H1Z'/%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M0-6C-3-11-8-9-4-6M0-6C3-11 8-9 4-6'/%3E%3C/g%3E%3Cg id='nuts'%3E%3Ccircle cx='-4' cy='2' r='3.4'/%3E%3Ccircle cx='4' cy='0' r='3'/%3E%3Ccircle cx='0' cy='-5' r='2.6'/%3E%3C/g%3E%3Cg id='star'%3E%3Cpath d='M0-10L2.9-4L9.5-3.1L4.7 1.5L5.9 8.1L0 5L-5.9 8.1L-4.7 1.5L-9.5-3.1L-2.9-4Z'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23mitre' transform='translate(34 40) rotate(-12) scale(1)'/%3E%3Cuse href='%23gift' transform='translate(156 34) rotate(10) scale(1.1)'/%3E%3Cuse href='%23nuts' transform='translate(96 112) rotate(0) scale(0.75)'/%3E%3Cuse href='%23star' transform='translate(206 128) rotate(16) scale(0.85)'/%3E%3Cuse href='%23mitre' transform='translate(42 178) rotate(-8) scale(0.95)'/%3E%3Cuse href='%23gift' transform='translate(146 206) rotate(0) scale(0.6)'/%3E%3Cuse href='%23nuts' transform='translate(222 224) rotate(20) scale(0.5)'/%3E%3C/svg%3E");
    --season-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-15 -15 30 30'%3E%3Cpath fill-rule='evenodd' d='M-8 10V-2Q-8-9 0-14Q8-9 8-2V10Z M-1.2-7H1.2V-3H4V-0.6H1.2V5H-1.2V-0.6H-4V-3H-1.2Z'/%3E%3C/svg%3E");
}
:root[data-season="christmas"] {
    --season-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cdefs%3E%3Cg id='flake'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' d='M0-12V12M-10.4-6L10.4 6M-10.4 6L10.4-6M-3.5-9.5L0-6.5L3.5-9.5M-3.5 9.5L0 6.5L3.5 9.5M-9.9-1.8L-5.6-3.3L-6.5-7.8M9.9 1.8L5.6 3.3L6.5 7.8M-9.9 1.8L-5.6 3.3L-6.5 7.8M9.9-1.8L5.6-3.3L6.5-7.8'/%3E%3C/g%3E%3Cg id='tree'%3E%3Cpath d='M0-13L7-4H4L9 3H5L10 9H-10L-5 3H-9L-4-4H-7Z'/%3E%3Crect x='-2' y='9.5' width='4' height='4'/%3E%3C/g%3E%3Cg id='star'%3E%3Cpath d='M0-10L2.9-4L9.5-3.1L4.7 1.5L5.9 8.1L0 5L-5.9 8.1L-4.7 1.5L-9.5-3.1L-2.9-4Z'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23flake' transform='translate(34 40) rotate(-12) scale(1)'/%3E%3Cuse href='%23tree' transform='translate(156 34) rotate(10) scale(1.1)'/%3E%3Cuse href='%23star' transform='translate(96 112) rotate(0) scale(0.75)'/%3E%3Cuse href='%23flake' transform='translate(206 128) rotate(16) scale(0.85)'/%3E%3Cuse href='%23flake' transform='translate(42 178) rotate(-8) scale(0.95)'/%3E%3Cuse href='%23tree' transform='translate(146 206) rotate(0) scale(0.6)'/%3E%3Cuse href='%23star' transform='translate(222 224) rotate(20) scale(0.5)'/%3E%3C/svg%3E");
    --season-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-15 -15 30 30'%3E%3Cpath d='M0-13L7-4H4L9 3H5L10 9H-10L-5 3H-9L-4-4H-7Z'/%3E%3Crect x='-2' y='9.5' width='4' height='4'/%3E%3C/svg%3E");
}
:root[data-season="newyear"] {
    --season-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cdefs%3E%3Cg id='burst'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M0-4V-11M0 4V11M-4 0H-11M4 0H11M-2.8-2.8L-7.8-7.8M2.8 2.8L7.8 7.8M-2.8 2.8L-7.8 7.8M2.8-2.8L7.8-7.8'/%3E%3C/g%3E%3Ccircle cx='0' cy='-14' r='1.4'/%3E%3Ccircle cx='0' cy='14' r='1.4'/%3E%3Ccircle cx='-14' cy='0' r='1.4'/%3E%3Ccircle cx='14' cy='0' r='1.4'/%3E%3C/g%3E%3Cg id='confetti'%3E%3Crect x='-6' y='-2' width='3' height='7' rx='1' transform='rotate(-25)'/%3E%3Crect x='3' y='-6' width='3' height='7' rx='1' transform='rotate(30)'/%3E%3Ccircle cx='1' cy='7' r='1.8'/%3E%3C/g%3E%3Cg id='star'%3E%3Cpath d='M0-10L2.9-4L9.5-3.1L4.7 1.5L5.9 8.1L0 5L-5.9 8.1L-4.7 1.5L-9.5-3.1L-2.9-4Z'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23burst' transform='translate(34 40) rotate(-12) scale(1)'/%3E%3Cuse href='%23confetti' transform='translate(156 34) rotate(10) scale(1.1)'/%3E%3Cuse href='%23star' transform='translate(96 112) rotate(0) scale(0.75)'/%3E%3Cuse href='%23confetti' transform='translate(206 128) rotate(16) scale(0.85)'/%3E%3Cuse href='%23burst' transform='translate(42 178) rotate(-8) scale(0.95)'/%3E%3Cuse href='%23confetti' transform='translate(146 206) rotate(0) scale(0.6)'/%3E%3Cuse href='%23star' transform='translate(222 224) rotate(20) scale(0.5)'/%3E%3C/svg%3E");
    --season-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-15 -15 30 30'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M0-4V-11M0 4V11M-4 0H-11M4 0H11M-2.8-2.8L-7.8-7.8M2.8 2.8L7.8 7.8M-2.8 2.8L-7.8 7.8M2.8-2.8L7.8-7.8'/%3E%3C/g%3E%3Ccircle cx='0' cy='-14' r='1.4'/%3E%3Ccircle cx='0' cy='14' r='1.4'/%3E%3Ccircle cx='-14' cy='0' r='1.4'/%3E%3Ccircle cx='14' cy='0' r='1.4'/%3E%3C/svg%3E");
}
:root[data-season="valentine"] {
    --season-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cdefs%3E%3Cg id='heart'%3E%3Cpath d='M0 9C-12 0-10-10 0-5C10-10 12 0 0 9Z'/%3E%3C/g%3E%3Cg id='star'%3E%3Cpath d='M0-10L2.9-4L9.5-3.1L4.7 1.5L5.9 8.1L0 5L-5.9 8.1L-4.7 1.5L-9.5-3.1L-2.9-4Z'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23heart' transform='translate(34 40) rotate(-12) scale(1)'/%3E%3Cuse href='%23heart' transform='translate(156 34) rotate(10) scale(1.1)'/%3E%3Cuse href='%23star' transform='translate(96 112) rotate(0) scale(0.75)'/%3E%3Cuse href='%23heart' transform='translate(206 128) rotate(16) scale(0.85)'/%3E%3Cuse href='%23heart' transform='translate(42 178) rotate(-8) scale(0.95)'/%3E%3Cuse href='%23heart' transform='translate(146 206) rotate(0) scale(0.6)'/%3E%3Cuse href='%23star' transform='translate(222 224) rotate(20) scale(0.5)'/%3E%3C/svg%3E");
    --season-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-15 -15 30 30'%3E%3Cpath d='M0 9C-12 0-10-10 0-5C10-10 12 0 0 9Z'/%3E%3C/svg%3E");
}
:root[data-season="easter"] {
    --season-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cdefs%3E%3Cg id='egg'%3E%3Cpath fill-rule='evenodd' d='M0-11C6-11 9-1 9 3C9 8 5 11 0 11C-5 11-9 8-9 3C-9-1-6-11 0-11Z M-9.5 0L-6-3L-3 0L0-3L3 0L6-3L9.5 0V2.6L6-0.4L3 2.6L0-0.4L-3 2.6L-6-0.4L-9.5 2.6Z'/%3E%3C/g%3E%3Cg id='flower'%3E%3Cg transform='scale(1.15)'%3E%3Ccircle cx='0' cy='-5' r='3.6'/%3E%3Ccircle cx='4.8' cy='-1.5' r='3.6'/%3E%3Ccircle cx='3' cy='4' r='3.6'/%3E%3Ccircle cx='-3' cy='4' r='3.6'/%3E%3Ccircle cx='-4.8' cy='-1.5' r='3.6'/%3E%3C/g%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23egg' transform='translate(34 40) rotate(-12) scale(1)'/%3E%3Cuse href='%23flower' transform='translate(156 34) rotate(10) scale(1.1)'/%3E%3Cuse href='%23egg' transform='translate(96 112) rotate(0) scale(0.75)'/%3E%3Cuse href='%23flower' transform='translate(206 128) rotate(16) scale(0.85)'/%3E%3Cuse href='%23egg' transform='translate(42 178) rotate(-8) scale(0.95)'/%3E%3Cuse href='%23flower' transform='translate(146 206) rotate(0) scale(0.6)'/%3E%3Cuse href='%23egg' transform='translate(222 224) rotate(20) scale(0.5)'/%3E%3C/svg%3E");
    --season-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-15 -15 30 30'%3E%3Cpath fill-rule='evenodd' d='M0-11C6-11 9-1 9 3C9 8 5 11 0 11C-5 11-9 8-9 3C-9-1-6-11 0-11Z M-9.5 0L-6-3L-3 0L0-3L3 0L6-3L9.5 0V2.6L6-0.4L3 2.6L0-0.4L-3 2.6L-6-0.4L-9.5 2.6Z'/%3E%3C/svg%3E");
}
:root[data-season="kingsday"] {
    --season-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cdefs%3E%3Cg id='crown'%3E%3Cpath d='M-11 6L-12-6L-5 0L0-9L5 0L12-6L11 6Z'/%3E%3Crect x='-11' y='8' width='22' height='3' rx='1'/%3E%3C/g%3E%3Cg id='flag'%3E%3Cpath d='M-14-6H14V-4.5H-14Z'/%3E%3Cpath d='M-12-4.5H-4L-8 4Z M-4-4.5H4L0 4Z M4-4.5H12L8 4Z'/%3E%3C/g%3E%3Cg id='star'%3E%3Cpath d='M0-10L2.9-4L9.5-3.1L4.7 1.5L5.9 8.1L0 5L-5.9 8.1L-4.7 1.5L-9.5-3.1L-2.9-4Z'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23crown' transform='translate(34 40) rotate(-12) scale(1)'/%3E%3Cuse href='%23flag' transform='translate(156 34) rotate(10) scale(1.1)'/%3E%3Cuse href='%23star' transform='translate(96 112) rotate(0) scale(0.75)'/%3E%3Cuse href='%23crown' transform='translate(206 128) rotate(16) scale(0.85)'/%3E%3Cuse href='%23crown' transform='translate(42 178) rotate(-8) scale(0.95)'/%3E%3Cuse href='%23flag' transform='translate(146 206) rotate(0) scale(0.6)'/%3E%3Cuse href='%23star' transform='translate(222 224) rotate(20) scale(0.5)'/%3E%3C/svg%3E");
    --season-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-15 -15 30 30'%3E%3Cpath d='M-11 6L-12-6L-5 0L0-9L5 0L12-6L11 6Z'/%3E%3Crect x='-11' y='8' width='22' height='3' rx='1'/%3E%3C/svg%3E");
}
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.display { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; }
.muted { color: var(--muted); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- Icons (SVG sprite injected by spp.js) ---------- */
.i { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.i.sm { width: 18px; height: 18px; }
.i.lg { width: 28px; height: 28px; }

/* ---------- Buttons: chunky, with an edge that presses down ---------- */
.btn {
    --b-bg: var(--ink-2);
    --b-edge: var(--press-edge);
    --b-fg: var(--text);
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-width: 44px; min-height: 44px;
    padding: 0 16px;
    border: 2px solid var(--ink-3);
    border-radius: var(--r-md);
    background: var(--b-bg);
    color: var(--b-fg);
    box-shadow: 0 4px 0 var(--b-edge);
    font-weight: 700; font-size: 15px; line-height: 1;
    text-decoration: none; white-space: nowrap;
    cursor: pointer;
    transform: translateY(0);
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast), opacity var(--t-fast);
}
.btn:hover { background: color-mix(in oklab, var(--b-bg) 88%, #fff); }
.btn:active, .btn.is-pressed { transform: translateY(3px); box-shadow: 0 1px 0 var(--b-edge); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: default; transform: none; box-shadow: 0 4px 0 var(--b-edge); }
.btn.primary { --b-bg: var(--accent); --b-edge: var(--accent-edge); --b-fg: var(--on-accent); border-color: transparent; }
.btn.gold { --b-bg: var(--gold); --b-edge: var(--gold-edge); --b-fg: var(--on-accent); border-color: transparent; }
.btn.danger { --b-bg: var(--rose); --b-edge: #8e1430; --b-fg: #fff; border-color: transparent; }
.btn.ghost { --b-bg: transparent; border-color: var(--ink-3); box-shadow: none; }
.btn.ghost:active { transform: translateY(1px); }
.btn.icon { padding: 0; width: 44px; }
.btn.big { min-height: 56px; font-size: 18px; border-radius: var(--r-lg); padding: 0 22px; }
.btn.block { width: 100%; }
.btn.on { --b-bg: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.btn .cost { color: var(--gold-ink); font-weight: 800; font-size: 13px; }
.btn.primary .cost, .btn.gold .cost { color: inherit; opacity: 0.8; }

/* ---------- Top bar (same on every page) ---------- */
.spp-bar {
    flex: none;
    position: relative; z-index: 30;
    display: flex; align-items: center; gap: 8px;
    min-height: var(--bar-h);
    padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left));
}
.spp-bar .title { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; line-height: 1.1; }
.spp-bar .title b { font-family: var(--font-display); font-weight: 800; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spp-bar .title small { color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spp-bar .btn { min-height: 40px; min-width: 40px; border-radius: 12px; box-shadow: 0 3px 0 var(--b-edge); }
.spp-bar .btn.icon { width: 40px; }
.spp-bar .btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--b-edge); }
.spp-bar .back { color: var(--accent-ink); }

/* Wallet chip: gold coin + balance. Any element with data-wallet shows the balance. */
.wallet-chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 40px; padding: 0 12px 0 6px;
    border-radius: 999px;
    background: var(--ink-1);
    border: 2px solid var(--ink-3);
    font-weight: 800; font-size: 15px;
    color: var(--gold-ink);
    white-space: nowrap;
    text-decoration: none;
}
.wallet-chip .coin { width: 26px; height: 26px; }
.wallet-chip.bump { animation: spp-bump 380ms var(--pop); }
@keyframes spp-bump { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 100% { transform: scale(1); } }
.coin { display: inline-block; flex: none; }
/* Wallet chip looks from the hub shop (v2.26, SPP.shop): spp.js sets data-chip on <html>.
   Static colours and a static filter on a 26px coin only; nothing here animates. */
:root[data-chip="silver"] .wallet-chip { border-color: #b9c0cf; }
:root[data-chip="silver"] .wallet-chip .coin { filter: grayscale(1) brightness(1.2); }
:root[data-chip="rose"] .wallet-chip { border-color: #e98a95; }
:root[data-chip="rose"] .wallet-chip .coin { filter: hue-rotate(-35deg) saturate(0.8) brightness(1.08); }
:root[data-chip="mint"] .wallet-chip { border-color: #2fbf8a; }
:root[data-chip="mint"] .wallet-chip .coin { filter: hue-rotate(105deg); }
:root[data-chip="ruby"] .wallet-chip { border-color: #e23a5a; }
:root[data-chip="ruby"] .wallet-chip .coin { filter: hue-rotate(-55deg) saturate(1.4); }
:root[data-chip="holo"] .wallet-chip { border-color: transparent; background: linear-gradient(var(--ink-1), var(--ink-1)) padding-box, linear-gradient(120deg, #ff5fa2, #ffc934, #3ee6a8, #36c9ff, #b37bff) border-box; }
.avatar { display: inline-block; flex: none; }

/* ---------- Chips: small stat readouts ---------- */
.chip {
    display: inline-flex; flex-direction: column; justify-content: center;
    min-width: 64px; padding: 6px 12px;
    border-radius: var(--r-md);
    background: var(--ink-1);
    border: 2px solid var(--ink-3);
    line-height: 1.1;
}
.chip .k, .label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.chip .v { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.chip.accent .v { color: var(--accent-ink); }
.chip.gold .v { color: var(--gold-ink); }
.chip.row { flex-direction: row; align-items: baseline; gap: 6px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }

/* ---------- Segmented control (modes, difficulty) ---------- */
.seg {
    display: flex; gap: 4px; padding: 4px;
    background: var(--ink-1); border: 2px solid var(--ink-3); border-radius: var(--r-md);
}
.seg button {
    flex: 1; min-height: 40px; padding: 0 10px;
    border: 0; border-radius: 10px; background: transparent;
    color: var(--muted); font-weight: 700; font-size: 14px; cursor: pointer;
    transition: background-color var(--t-fast), color var(--t-fast);
}
.seg button[aria-pressed="true"], .seg button.on { background: var(--accent); color: var(--on-accent); }

/* ---------- Stage: where the game is drawn ---------- */
.spp-stage { flex: 1; min-height: 0; position: relative; }
.spp-stage canvas { display: block; touch-action: pinch-zoom; }
.spp-dock {
    flex: none;
    display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
    padding: 8px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

/* ---------- Sheets: start, pause, game over, shop. Opaque, never blurred. ---------- */
.spp-overlay {
    position: fixed; inset: 0; z-index: 50;
    display: flex; align-items: center; justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    background: var(--scrim);
    overflow-y: auto;
}
.spp-overlay.see-through { background: var(--scrim-soft); }
.spp-card {
    width: min(440px, 100%);
    max-height: 100%;
    overflow-y: auto;
    margin: auto;
    padding: 22px 20px 20px;
    border-radius: var(--r-xl);
    background: var(--ink-1);
    border: 2px solid var(--ink-3);
    box-shadow: 0 10px 0 var(--drop), 0 30px 60px var(--drop);
    animation: spp-pop 260ms var(--pop) both;
}
.spp-card.wide { width: min(560px, 100%); }
@keyframes spp-pop { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }
.spp-card h2 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; }
.spp-card h2.accent { color: var(--accent-ink); }
.spp-card h2.bad { color: var(--rose-ink); }
.spp-card .lede { margin: 0 0 16px; color: var(--muted); font-size: 15px; }
.spp-card .head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.spp-card .head h2 { margin: 0; }
.spp-card .stack { display: grid; gap: 10px; }
.spp-card .row { display: flex; gap: 10px; }
.spp-card .row > * { flex: 1; }
.spp-card .big-num { font-family: var(--font-display); font-weight: 800; font-size: 56px; line-height: 1; color: var(--accent-ink); text-align: center; margin: 6px 0; font-variant-numeric: tabular-nums; }
.spp-card .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin: 12px 0 16px; }
.spp-card .stat-grid .chip { width: 100%; align-items: center; text-align: center; }
.spp-card .earned { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 14px; color: var(--gold-ink); font-weight: 800; font-size: 18px; }
.spp-card .earned:empty { display: none; }
.spp-card .fine { color: var(--dim); font-size: 13px; margin: 12px 0 0; text-align: center; }
.spp-card .setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }
.spp-card .new-best { display: inline-block; margin: 0 auto 8px; padding: 4px 10px; border-radius: 999px; background: var(--gold); color: var(--on-accent); font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
/* Sync sheet (SPP.sync.open) */
.spp-input { min-width: 0; min-height: 48px; padding: 0 14px; border-radius: var(--r-md); border: 2px solid var(--ink-3); background: var(--ink-2); font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; }
.spp-input:focus { outline: none; border-color: var(--accent); }
.spp-input::placeholder { letter-spacing: 0; text-transform: none; color: var(--dim); }
.spp-card .sync-join > .spp-input { flex: 1 1 0; width: 0; }
.spp-card .sync-join > .btn { flex: none; }
#sync-sheet .stack { grid-template-columns: minmax(0, 1fr); }
.sync-code { margin: 0 0 14px; padding: 14px 10px; border-radius: var(--r-md); background: var(--ink-2); text-align: center; font-family: var(--font-display); font-weight: 800; font-size: clamp(18px, 5.5vw, 28px); letter-spacing: 0.06em; white-space: nowrap; color: var(--accent-ink); user-select: all; }
.spp-card .sync-leave { margin-top: 14px; }
.spp-card .sync-msg:empty { display: none; }
.how { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.how li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: var(--ink-2); border-radius: var(--r-md); font-size: 15px; }
.how li .k { flex: none; display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 13px; }

/* ---------- Toast ---------- */
.spp-toast {
    position: fixed; left: 50%; top: calc(var(--bar-h) + env(safe-area-inset-top) + 8px); z-index: 80;
    transform: translateX(-50%);
    max-width: calc(100vw - 32px);
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--ink-2); border: 2px solid var(--ink-4);
    box-shadow: 0 6px 0 var(--drop);
    font-weight: 700; font-size: 15px; text-align: center;
    pointer-events: none;
    animation: spp-toast 2200ms var(--ease) both;
}
.spp-toast.gold { border-color: var(--gold); color: var(--gold-ink); }
.spp-toast.good { border-color: var(--mint); color: var(--mint-ink); }
.spp-toast.bad { border-color: var(--rose); color: var(--rose-ink); }
@keyframes spp-toast { 0% { opacity: 0; transform: translate(-50%, -10px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -6px); } }

/* Floating "+$5" text that games can spawn over the stage (SPP.floatText). */
.spp-float {
    position: fixed; z-index: 60; pointer-events: none;
    font-weight: 900; font-size: 20px; color: var(--gold);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
    animation: spp-float 900ms var(--ease) forwards;
}
@keyframes spp-float { from { opacity: 1; transform: translate(-50%, -50%); } to { opacity: 0; transform: translate(-50%, -150%); } }

/* Reduced motion: chrome stops moving; games read SPP.reducedMotion for their own effects. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
    .spp-toast { animation: none !important; }
}

/* Phone on its side: a slimmer bar, so the stage keeps its height. */
@media (orientation: landscape) and (max-height: 520px) {
    :root { --bar-h: 46px; }
    .spp-bar { padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: 2px; }
    .spp-bar .btn, .wallet-chip { min-height: 36px; height: 36px; }
    .spp-bar .btn.icon { width: 36px; min-width: 36px; }
    .spp-bar .title small { display: none; }
    .spp-dock { padding-top: 4px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
    .spp-card { padding: 16px; }
    .spp-card h2 { font-size: 22px; }
    .spp-card .big-num { font-size: 40px; }
}

/* On game pages the bar stays above every sheet, so the way back to the arcade, the wallet and
   the sound button are always one tap away (DESIGN rule IX). Sheets start below it. */
.spp-game .spp-bar { z-index: 60; }
.spp-game .spp-overlay { padding-top: calc(var(--bar-h) + max(12px, env(safe-area-inset-top))); }

/* A friend's challenge (v2.29, SPP.challenge): a strip under the bar that says what to beat. */
.spp-challenge {
    position: fixed; z-index: 60; left: 50%; top: calc(var(--bar-h) + env(safe-area-inset-top) + 8px); transform: translateX(-50%);
    display: flex; align-items: center; gap: 8px; max-width: calc(100% - 32px);
    padding: 6px 6px 6px 14px; border-radius: 999px;
    background: var(--ink-1); border: 2px solid var(--gold); box-shadow: 0 4px 0 var(--drop);
    color: var(--text); font-size: 14px;
}
.spp-challenge .btn { min-height: 30px; min-width: 30px; width: 30px; padding: 0; }