/* Peace Hub UI kit: the "game hub" look. Inlined by each page's build (placeholder /*__UI_CSS__*\/),
   linked by the hub. Grown out of the original Enables page: night-blue pixel banner, Pixelify
   headings, chunky pressable buttons, chip filters with colour dots, item slots that hop and glow,
   springy sheets and toasts. Compact on phones: rows and tiles, details in place or in a sheet.

   Page skeleton:
     header.head            night banner: .head-top (a.crumb + [data-theme-slot]), h1 + .count, p.lede
     .bar                   sticky toolbar: .bar-row (label.search + .icon-btn), then nav.tabs (chips)
     .notice                one-line notice
     .group > .group-head   section title (pixel font, colour dot via --c), then .list or .tiles
     .list > .row           item slots: .row-btn, .row-media, .row-main (.row-title, .row-sub), .row-end
     .row-detail            expanded content under a row
     .tiles > .tile         icon slots (badges)
     dialog.sheet           springy bottom sheet / centred card
     footer.foot            credit
   Motion helpers: .pop (rise in, stagger with --i), .hop, Peace.confetti(el) from site.js.
*/
/* Numbers are never pixel. "Peace Digits" holds only 0-9 (unicode-range), cut from JetBrains Mono, the font of the
   "N online" pill. It sits in front of Pixelify in --f-display, so any digit in pixel text (titles, big counts, names
   with numbers) draws in JetBrains Mono while the letters stay pixel. Same file the Google Fonts sheet already loads,
   so no extra download; monospaced, so counts that tick never jump. */
@font-face {
  font-family: "Peace Digits"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.woff2) format("woff2");
  unicode-range: U+0030-0039;
}
:root {
  --bg: #e8edf2; --surface: #ffffff; --sunken: #f1f4f8; --hover: #f4f7fb;
  --ink: #142030; --ink-2: #33445a; --muted: #5a6878; --line: #d2dae3; --line-strong: #bfc9d5;
  --accent: #1f5cc0; --accent-ink: #ffffff; --accent-soft: #e3ecfb;
  --gold: #f0b323; --gold-ink: #3a2700; --ok: #2f9e55; --warn: #b07000;
  --stage: #000000;
  --night-1: #0d1830; --night-2: #1b2f5a; --night-ink: #f3f6fb; --night-muted: #a9b8cf;
  --shadow: 0 1px 2px rgb(20 32 48 / .06), 0 6px 18px rgb(20 32 48 / .1);
  --shadow-lg: 0 24px 70px rgb(0 0 0 / .35);
  --f-display: "Peace Digits", "Pixelify Sans", ui-monospace, monospace;
  --f-body: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --spring: cubic-bezier(.3, 1.5, .5, 1);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --bar-h: 0px; /* pages set this from the sticky bar's height; group heads stick under it */
  --gutter: 16px;
}
@media (min-width: 720px) { :root { --gutter: 28px; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e151e; --surface: #16202c; --sunken: #1d2836; --hover: #1b2633;
    --ink: #e5ecf4; --ink-2: #c0cbd8; --muted: #95a3b4; --line: #283545; --line-strong: #344558;
    --accent: #6fa3ff; --accent-ink: #0b1422; --accent-soft: #1a2a44;
    --gold: #f4bd3a; --gold-ink: #2b1c00; --ok: #4cc27a; --warn: #f0b85a;
    --night-1: #070d19; --night-2: #13254a;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 6px 18px rgb(0 0 0 / .3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e151e; --surface: #16202c; --sunken: #1d2836; --hover: #1b2633;
  --ink: #e5ecf4; --ink-2: #c0cbd8; --muted: #95a3b4; --line: #283545; --line-strong: #344558;
  --accent: #6fa3ff; --accent-ink: #0b1422; --accent-soft: #1a2a44;
  --gold: #f4bd3a; --gold-ink: #2b1c00; --ok: #4cc27a; --warn: #f0b85a;
  --night-1: #070d19; --night-2: #13254a;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 6px 18px rgb(0 0 0 / .3);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Pixelify Sans draws "fi" and "fl" as one odd glyph ("Verified" read "VeriRed"). !important because every font:
   shorthand resets it. */
*, ::before, ::after { font-variant-ligatures: no-common-ligatures !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--f-body); -webkit-tap-highlight-color: transparent; overflow-x: hidden; }
[hidden] { display: none !important; }
img { max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.wrap { max-width: 1240px; margin: 0 auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--f-mono); }
.pixel { image-rendering: pixelated; }

@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@keyframes hop { 0%, 100% { translate: 0 0; } 35% { translate: 0 -8px; } 60% { translate: 0 0; } 78% { translate: 0 -2px; } }
@keyframes pulse { 40% { scale: 1.08; } }
@keyframes drift { to { translate: 28px 28px; } }
@keyframes twinkle { 0%, 100% { opacity: .15; scale: .6; } 50% { opacity: 1; scale: 1; } }
@keyframes shine { from { translate: -120% 0; } to { translate: 220% 0; } }
.pop { animation: rise .45s var(--ease) both; animation-delay: calc(min(var(--i, 0), 14) * 28ms); }
.hop { animation: hop .6s var(--ease); }

/* ── Header: a night-blue pixel banner that runs edge to edge ─────────────────── */
.head { position: relative; isolation: isolate; color: var(--night-ink); padding-block: 12px 18px; display: grid; gap: 6px;
  --ink: var(--night-ink); --muted: var(--night-muted); }
.head::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw);
  background:
    linear-gradient(rgb(255 255 255 / .045) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgb(255 255 255 / .045) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(120% 140% at 85% -20%, var(--night-2), var(--night-1) 70%); }
/* The grid drifts on a layer of its own (.hg-grid, which site.js puts in), moved by the GPU one square at a time.
   Animating background-position instead repainted the whole banner every frame and kept the page's main thread
   busy on every page, which made taps and cards stutter. Until site.js adds it, the grid above just stands still. */
.head.hg::before { background: radial-gradient(120% 140% at 85% -20%, var(--night-2), var(--night-1) 70%); }
.hg-grid { position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); overflow: hidden; pointer-events: none; }
.hg-grid::before { content: ""; position: absolute; inset: -28px 0 0 -28px; animation: drift 6s linear infinite;
  background: linear-gradient(rgb(255 255 255 / .045) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgb(255 255 255 / .045) 1px, transparent 1px) 0 0 / 28px 28px; }
.head::after { content: ""; position: absolute; z-index: -1; left: calc(50% - 50vw); right: calc(50% - 50vw); bottom: 0; height: 4px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 12px, transparent 12px 20px); opacity: .55; }
.head .spark { position: absolute; z-index: -1; width: 5px; height: 5px; background: var(--gold); animation: twinkle 2.8s ease-in-out infinite; animation-delay: var(--sd, 0s); pointer-events: none; }
.head .spark.w { background: #ffffff; width: 4px; height: 4px; }
.head-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; }
.head-top [data-theme-slot] { display: flex; gap: 8px; align-items: center; }
.crumb { display: inline-flex; align-items: center; gap: 6px; color: var(--night-muted); text-decoration: none; font: 700 11.5px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; padding-block: 6px; }
.crumb:hover { color: #ffffff; }
.crumb svg { width: 14px; height: 14px; transition: translate .2s var(--ease); }
.crumb:hover svg { translate: -3px 0; }
.head h1 { margin: 0; font: 700 clamp(34px, 8vw, 54px)/1 var(--f-display); letter-spacing: .01em; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; text-shadow: 0 3px 0 rgb(0 0 0 / .35); animation: rise .5s var(--ease) both; }
.head h1 .count { font: 700 14px/1 var(--f-mono); letter-spacing: 0; text-shadow: none; background: var(--gold); color: var(--gold-ink); padding: 6px 8px; border-radius: 8px; box-shadow: inset 0 -3px 0 rgb(0 0 0 / .18); animation: pulse .5s var(--spring) .45s both; }
.head .lede { margin: 0; color: var(--night-muted); font-size: 14.5px; max-width: 62ch; animation: rise .5s var(--ease) .08s both; }
.head .lede .code { background: var(--gold); color: var(--gold-ink); border-color: transparent; box-shadow: inset 0 -2px 0 rgb(0 0 0 / .18); }
@media (min-width: 720px) { .head { padding-block: 22px 28px; gap: 8px; } .head .lede { font-size: 15.5px; } }
/* Switches on the dark banner */
.head .theme-switch, .head .lang-switch { --surface: rgb(255 255 255 / .1); --line: rgb(255 255 255 / .22); --muted: #c9d4e4; --ink: #f3f6fb; --bg: #0d1830; backdrop-filter: blur(6px); }

/* ── Sticky toolbar ───────────────────────────────────────────────────────────── */
.bar { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3); border-bottom: 1px solid var(--line); }
.bar-row { display: flex; gap: 8px; align-items: center; padding-block: 10px 6px; }
.search { flex: 1; min-width: 0; position: relative; }
.search input { width: 100%; height: 40px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); padding: 0 36px; font: 500 15px var(--f-body); outline: none; transition: border-color .2s, box-shadow .2s; }
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.search input::placeholder { color: var(--muted); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.search > svg { position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.search .clear { position: absolute; right: 6px; top: 50%; translate: 0 -50%; width: 28px; height: 28px; border: 0; background: var(--sunken); color: var(--muted); border-radius: 7px; display: grid; place-items: center; }
.icon-btn { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-2); position: relative; transition: scale .2s var(--spring), border-color .2s, background .2s, color .2s; }
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.icon-btn:active { scale: .9; }
.icon-btn[aria-pressed="true"], .icon-btn.on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn .dot { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--bg); animation: pulse .5s var(--spring); }
.icon-btn.dice:hover svg { animation: roll .6s var(--spring); }
@keyframes roll { to { rotate: 360deg; } }

/* Tabs as chips with colour dots (set --c on a tab for its colour) */
.tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 10px; scroll-padding-inline: var(--gutter); }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); padding: 0 11px 0 9px; font: 600 13px var(--f-body); color: var(--ink); white-space: nowrap; transition: background .2s, color .2s, border-color .2s, scale .2s var(--spring); }
.tab::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--c, var(--muted)); transition: scale .3s var(--spring); }
.tab .n { font: 600 11.5px var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.tab:hover { border-color: var(--c, var(--accent)); }
.tab:active { scale: .94; }
.tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.tab[aria-selected="true"]::before { scale: 1.3; }
.tab[aria-selected="true"] .n { color: inherit; opacity: .7; }

/* Segmented control: views of one page */
.seg { display: flex; padding: 4px; gap: 4px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; }
.seg button { flex: 1; border: 0; background: none; padding: 8px 12px; border-radius: 8px; font: 700 14px var(--f-body); color: var(--muted); transition: background .25s, color .25s, scale .2s var(--spring); }
.seg button:active { scale: .95; }
.seg button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .18); }

/* Filter sheet contents */
.filters { display: grid; gap: 16px; }
.filters h3 { margin: 0 0 8px; font: 700 15px var(--f-display); color: var(--ink); }
.opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opt { border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 12px; font: 600 13.5px var(--f-body); color: var(--ink); display: inline-flex; gap: 6px; align-items: center; transition: background .2s, color .2s, border-color .2s, scale .2s var(--spring); }
.opt:active { scale: .94; }
.opt[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* Notice */
.notice { margin: 12px 0 0; display: flex; gap: 10px; align-items: center; padding: 10px 12px; font-size: 13.5px; color: var(--ink-2); background: color-mix(in srgb, var(--gold) 14%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--gold) 55%, transparent); border-radius: 12px; animation: rise .45s var(--ease) both; }
.notice svg { flex: none; width: 18px; height: 18px; color: var(--warn); }
.notice b { color: var(--ink); }

/* ── Groups ──────────────────────────────────────────────────────────────────── */
.group { padding-top: 6px; }
.group-head { margin: 0; position: sticky; top: var(--bar-h); z-index: 5; display: flex; align-items: center; gap: 9px; padding: 14px 0 10px; background: var(--bg); font: 700 19px/1.1 var(--f-display); color: var(--ink); text-transform: none; letter-spacing: 0; }
.group-head::before { content: ""; flex: none; width: 11px; height: 11px; border-radius: 3px; background: var(--c, var(--accent)); }
.group-head .n { font: 600 12px var(--f-mono); color: var(--muted); }
.group-head .hint { margin-left: auto; font: 500 12.5px var(--f-body); color: var(--muted); }

/* ── Item slots (lists) ──────────────────────────────────────────────────────── */
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 900px) { .list.cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 60px; padding: 8px 10px 8px 8px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; position: relative; transition: border-color .2s, box-shadow .25s, translate .25s var(--ease), scale .2s var(--spring); }
.row.no-media { grid-template-columns: minmax(0, 1fr) auto; padding-left: 12px; }
@media (hover: hover) {
  .row:hover { border-color: var(--c, var(--accent)); box-shadow: var(--shadow); translate: 0 -2px; }
  .row:hover .row-media > * { animation: hop .6s var(--ease); }
}
.row:active { scale: .985; }
.row-btn { all: unset; position: absolute; inset: 0; border-radius: inherit; cursor: pointer; }
.row-btn:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.row-media { width: 44px; height: 44px; display: grid; place-items: center; position: relative; z-index: 1; pointer-events: none; background: var(--stage); border-radius: 9px; overflow: hidden; }
.row-media.plain { background: none; }
.row-media img { max-width: 40px; max-height: 40px; image-rendering: pixelated; }
.row-main { min-width: 0; display: grid; gap: 2px; line-height: 1.3; position: relative; z-index: 1; pointer-events: none; }
.row-title { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.row-title > * { min-width: 0; }
.row-title .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-end { display: flex; gap: 2px; align-items: center; position: relative; z-index: 2; }
.row-end.passive { pointer-events: none; }
.row-end .icon-btn { width: 36px; height: 36px; border-color: transparent; background: none; color: var(--muted); }
.row-end .icon-btn:hover { color: var(--accent); background: var(--sunken); }
.chev { width: 18px; height: 18px; color: var(--muted); transition: rotate .3s var(--spring); }
.row[aria-expanded="true"] { border-color: var(--c, var(--accent)); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; box-shadow: var(--shadow); }
.row[aria-expanded="true"] .chev { rotate: 90deg; }
.row-detail { margin-top: -10px; padding: 14px 12px; background: var(--surface); border: 1.5px solid var(--c, var(--accent)); border-top: 1px dashed var(--line); border-radius: 0 0 12px 12px; font-size: 14px; color: var(--ink-2); display: grid; gap: 10px; animation: open .3s var(--ease); }
@keyframes open { from { opacity: 0; translate: 0 -6px; } }
.row-detail.indent { padding-left: 64px; }
.row-detail p { margin: 0; }
.row.flash { animation: flash 2.4s var(--ease); }
@keyframes flash { 0%, 45% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 70%, transparent); border-color: var(--gold); } }

/* Small inline bits */
.code { font: 700 13.5px var(--f-mono); background: var(--sunken); border: 1px solid var(--line); border-radius: 7px; padding: 2px 7px; color: var(--ink); white-space: nowrap; }
.code.gold { background: var(--gold); color: var(--gold-ink); border-color: transparent; box-shadow: inset 0 -2px 0 rgb(0 0 0 / .18); }
button.code { cursor: pointer; transition: scale .2s var(--spring), background .2s; }
button.code:hover { background: var(--gold); color: var(--gold-ink); border-color: transparent; }
button.code:active { scale: .92; }
.label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.label::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--c, var(--muted)); }
.meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); }
.flag { font: 700 10.5px var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--gold-ink); background: var(--gold); border-radius: 5px; padding: 2px 6px; box-shadow: inset 0 -2px 0 rgb(0 0 0 / .15); white-space: nowrap; }

/* ── Icon slots (tiles) ──────────────────────────────────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; padding-top: 4px; }
.tile { aspect-ratio: 1; display: grid; place-items: center; border: 1.5px solid var(--line); background: var(--surface); border-radius: 12px; padding: 0; position: relative; overflow: hidden; transition: border-color .2s, box-shadow .25s, translate .25s var(--ease), scale .2s var(--spring); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .55) 50%, transparent 65%); translate: -120% 0; pointer-events: none; }
@media (hover: hover) {
  .tile:hover { border-color: var(--c, var(--gold)); box-shadow: var(--shadow); translate: 0 -3px; }
  .tile:hover img { animation: hop .6s var(--ease); }
  .tile:hover::after { animation: shine .7s var(--ease); }
}
.tile:active { scale: .92; }
.tile img { image-rendering: pixelated; }
.tile .fav { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--surface); }

/* ── Sheet: springy card on desktop, slide-up sheet on phones ─────────────────── */
dialog.sheet { border: 0; padding: 0; margin: auto; width: min(540px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); overflow: auto; overscroll-behavior: contain; }
dialog.sheet::backdrop { background: rgb(8 14 22 / .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
dialog.sheet[open] { animation: dlgIn .38s var(--spring); }
dialog.sheet[open]::backdrop { animation: fade .25s ease; }
@keyframes dlgIn { from { opacity: 0; transform: translateY(18px) scale(.94); } }
@keyframes fade { from { opacity: 0; } }
@keyframes sheetIn { from { transform: translateY(100%); } }
@media (max-width: 719px) {
  dialog.sheet { margin: auto 0 0; width: 100%; max-width: 100%; max-height: 88dvh; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  dialog.sheet[open] { animation: sheetIn .42s var(--ease); }
}
.sheet-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
.sheet-head h2 { margin: 0; font: 700 20px/1.15 var(--f-display); }
.sheet-head .icon-btn { width: 36px; height: 36px; }
.sheet-body { padding: 16px; display: grid; gap: 12px; }
.sheet-foot { display: flex; justify-content: space-between; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.sheet-grip { width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: 8px auto 0; }
@media (min-width: 720px) { .sheet-grip { display: none; } }
/* A black stage for sprites and big icons inside sheets */
.stage-big { position: relative; display: grid; place-items: center; min-height: 180px; background: var(--stage); border-radius: 14px; overflow: hidden;
  background-image: radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--c, var(--accent)) 45%, transparent), transparent 60%); }
.stage-big img { image-rendering: pixelated; animation: hop .6s var(--ease) .1s; }

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); font: 700 14px var(--f-body); color: var(--ink); text-decoration: none; transition: scale .2s var(--spring), background .2s, border-color .2s; }
.btn:hover { border-color: var(--accent); }
.btn:active { scale: .95; }
.btn.primary { background: var(--accent); border-color: transparent; color: var(--accent-ink); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .2); }
.btn.gold { background: var(--gold); border-color: transparent; color: var(--gold-ink); font-family: var(--f-mono); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .18); }
.icon-btn.done { color: #fff; background: var(--ok); border-color: transparent; animation: pulse .35s var(--spring); }
.btn.done { background: var(--ok); color: #fff; border-color: transparent; animation: pulse .35s var(--spring); }
.btn svg { width: 16px; height: 16px; }

/* Star (save) buttons: outline when off, gold and filled when on, with a pop */
.icon-btn.fav[aria-pressed="true"], .icon-btn.star-btn[aria-pressed="true"], .row-end .icon-btn[aria-pressed="true"] { color: var(--gold); background: none; border-color: transparent; }
.icon-btn.fav svg path, .icon-btn.star-btn svg path { transition: fill .2s; }
.icon-btn.fav[aria-pressed="true"] svg path, .icon-btn.star-btn[aria-pressed="true"] svg path { fill: currentColor; }
.icon-btn[aria-pressed="true"].burst { animation: starPop .5s var(--spring); }
@keyframes starPop { 0% { scale: .6; } 45% { scale: 1.35; rotate: -14deg; } 100% { scale: 1; rotate: 0deg; } }

/* Toast */
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); translate: -50% 24px; scale: .9; opacity: 0; pointer-events: none; z-index: 80; background: var(--ink); color: var(--bg); font: 600 14px var(--f-body); padding: 10px 16px; border-radius: 12px; box-shadow: var(--shadow); transition: opacity .2s, translate .35s var(--spring), scale .35s var(--spring); white-space: nowrap; }
.toast code, .toast .code { font: 700 14px var(--f-mono); color: var(--gold); background: none; border: 0; padding: 0; }
.toast.show { opacity: 1; translate: -50% 0; scale: 1; }
/* "New version ready" pill (site.js, Updates): top centre, clear of bottom tab bars and toasts. */
.sw-upd { position: fixed; left: 50%; top: calc(10px + env(safe-area-inset-top, 0px)); translate: -50% -16px; opacity: 0; pointer-events: none; z-index: 90; display: flex; align-items: center; gap: 8px; background: var(--ink); color: var(--bg); font: 600 13px var(--f-body); padding: 5px 5px 5px 12px; border-radius: 999px; box-shadow: var(--shadow); white-space: nowrap; transition: opacity .2s, translate .35s var(--spring); }
.sw-upd.show { opacity: 1; translate: -50% 0; pointer-events: auto; }
.sw-upd .sw-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 30%, transparent); }
.sw-upd button { font: inherit; border: 0; cursor: pointer; border-radius: 999px; background: var(--bg); color: var(--ink); padding: 5px 11px; }
.sw-upd .sw-x { background: none; color: inherit; opacity: .6; padding: 5px 8px; font-size: 16px; line-height: 1; }
.sw-upd .sw-x:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sw-upd { transition: opacity .2s; } }

/* Empty state, footer */
.empty { padding: 56px 16px; text-align: center; color: var(--muted); animation: rise .4s var(--ease) both; }
.empty b { color: var(--ink); }
.foot { margin-top: 36px; border-top: 1px solid var(--line); padding-block: 18px 36px; color: var(--muted); font-size: 13px; display: grid; gap: 6px; }
.foot p { margin: 0; }

/* Pixel confetti (Peace.confetti) */
.pxc { position: fixed; z-index: 97; width: 6px; height: 6px; pointer-events: none; }   /* over Peace Live's pop cards (95) too */

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }