/* RetroWorld — "Warm Vintage": 70s console, premium and matte. Bricolage Grotesque display + Figtree body. See BRAND.md */
@font-face { font-family: "Bricolage Grotesque"; src: url("/assets/fonts/BricolageGrotesque-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/Figtree-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --ground: #F4EBDD; --panel: #FFF8EC; --sunken: #EADFCB; --line: #D9CBB2; --line-2: #C4B398;
  --ink: #1E1A16; --muted: #6B6259; --faint: #9A8F83;
  --orange: #D9541E; --orange-deep: #B8431A; --mustard: #E3A72F; --mustard-deep: #8A6212; --teal: #1F7A72; --teal-deep: #155C56; --plum: #8A4E7A; --brick: #C63D2F;
  --cabinet: #241F1B; --cabinet-2: #2F2823; --cabinet-line: #4A3F37; --cream: #F4EBDD;
  --accent: var(--orange-deep);
  --shadow: 0 18px 40px rgba(60, 40, 20, .16), 0 2px 6px rgba(60, 40, 20, .08); --shadow-sm: 0 2px 10px rgba(60, 40, 20, .10);
  --display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif; --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 16px; --r-lg: 22px; --wrap: 1180px; --gutter: 20px; --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* no tap-to-copy, no long-press callouts, no double-tap zoom on the app chrome; prose pages stay selectable */
body, .stage, .gbar, .card, .btn, .chip, .top, .hero, .band, .why { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.prose, .prose *, .cab__about, .cab__info, input { -webkit-user-select: text; user-select: text; }
.stage, .stage * { touch-action: none; }
.stage .btn, .stage .gbtn, .stage .gseg__b, .stage .cab__screen { touch-action: manipulation; }
/* the game, the pad and the joystick never scroll, zoom, select text or open the iPhone copy menu, whatever a thumb does on them */
.cab__screen canvas, .touchpad, .touchpad * { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
main { flex: 1; }
a { color: var(--teal-deep); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; border-radius: 8px; }
img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--cream); padding: 8px 14px; border-radius: 8px; font-weight: 700; }
.skip:focus { left: 8px; z-index: 50; }
.muted { color: var(--muted); }
.accent { color: var(--orange-deep); }

/* the stripe motif: orange / mustard / teal / ink */
.stripes { display: flex; height: 6px; }
.stripes i { flex: 1; } .stripes i:nth-child(1) { background: var(--orange); } .stripes i:nth-child(2) { background: var(--mustard); } .stripes i:nth-child(3) { background: var(--teal); } .stripes i:nth-child(4) { background: var(--ink); }

/* type */
.h1, .h2, .h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; margin: 0 0 14px; font-variation-settings: "opsz" 96; }
.h1 { font-size: clamp(34px, 5vw, 50px); }
.h2 { font-size: clamp(26px, 3.4vw, 36px); }
.h3 { font-size: 20px; margin-bottom: 10px; font-variation-settings: "opsz" 24; }
.h4 { font-family: var(--body); font-weight: 700; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .14em; margin: 18px 0 8px; }
.lead { font-size: 18px; color: var(--muted); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--orange-deep); margin: 0 0 18px; }
.eyebrow::before { content: ""; width: 28px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--orange) 0 33%, var(--mustard) 33% 66%, var(--teal) 66%); }

/* buttons: matte pills */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 22px; border-radius: 999px; background: var(--panel); color: var(--ink); border: 1.5px solid var(--line-2); font-family: var(--display); font-weight: 700; font-size: 15px; cursor: pointer; user-select: none; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), background .2s, border-color .2s, box-shadow .2s; }
.btn:hover { border-color: var(--ink); text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--primary { background: var(--orange-deep); color: var(--cream); border-color: var(--orange-deep); }
.btn--primary:hover { background: var(--ink); border-color: var(--ink); }
.btn--big { font-size: 17px; padding: 14px 32px; min-height: 54px; }
.btn--ghost { background: transparent; box-shadow: none; }
.btn--sm { min-height: 38px; padding: 6px 16px; font-size: 13px; }
.btn--dark { background: var(--cabinet-2); color: var(--cream); border-color: var(--cabinet-line); box-shadow: none; }
.btn--dark:hover { border-color: var(--cream); }
.btn[aria-pressed="false"] { color: var(--muted); text-decoration: line-through; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer; font: inherit; font-weight: 500; }
.linkbtn:hover { color: var(--orange-deep); }

/* header */
.top { position: sticky; top: 0; z-index: 30; background: rgba(244, 235, 221, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.top__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 70px; }
.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.logo:hover { text-decoration: none; }
.logo__badge { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 2px 6px rgba(60, 40, 20, .25); }
.foot__badge { width: 28px; height: 28px; border-radius: 7px; vertical-align: middle; margin-right: 10px; display: inline-block; }
.top__nav { display: flex; align-items: center; gap: 4px; }
.narrow-only { display: none; }
.top__nav a { color: var(--muted); font-weight: 600; padding: 8px 14px; border-radius: 999px; }
.top__nav a:hover { color: var(--ink); background: var(--sunken); text-decoration: none; }
.top__nav .btn { margin-left: 8px; }

/* hero */
.hero { padding: 80px 0 64px; }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero__title { font-family: var(--display); font-weight: 800; font-size: clamp(46px, 7vw, 88px); line-height: .96; letter-spacing: -.035em; margin: 0 0 22px; font-variation-settings: "opsz" 96; }
.hero__sub { font-size: 18px; color: var(--muted); max-width: 44ch; margin: 0 0 30px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--muted); font-size: 14px; font-weight: 600; }
.hero__facts span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--teal); margin-right: 9px; vertical-align: 0; }
.hero__facts span:nth-child(2)::before { background: var(--mustard); } .hero__facts span:nth-child(3)::before { background: var(--orange); }
.hero__logo { position: relative; border-radius: var(--r-lg); overflow: hidden; background: #0F0F15; box-shadow: var(--shadow); border: 1px solid #1F1A16; }
.hero__logo > img { width: 100%; height: auto; display: block; }
.hero__logo::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; z-index: 2; background: linear-gradient(90deg, var(--orange) 0 25%, var(--mustard) 25% 50%, var(--teal) 50% 75%, var(--cream) 75%); }
.hero__featured { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(244, 235, 221, .96); color: var(--ink); box-shadow: var(--shadow); font-size: 12px; line-height: 1.15; transition: transform .2s var(--ease); }
.hero__featured:hover { transform: translateY(-2px); text-decoration: none; }
.hero__featured img { width: 44px; height: 33px; object-fit: cover; border-radius: 999px; }
.hero__featured small { display: block; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 9px; color: var(--orange-deep); }
.hero__featured b { font-family: var(--display); font-weight: 800; font-size: 14px; }
.feature { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; background: var(--cabinet); border: 1px solid var(--cabinet); box-shadow: var(--shadow); color: var(--cream); transition: transform .3s var(--ease), box-shadow .3s; }
.feature::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; z-index: 2; background: linear-gradient(90deg, var(--orange) 0 25%, var(--mustard) 25% 50%, var(--teal) 50% 75%, var(--cream) 75%); }
.feature:hover { transform: translateY(-5px); text-decoration: none; box-shadow: 0 26px 50px rgba(60, 40, 20, .22); }
.feature img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.feature__body { position: absolute; inset: auto 0 0 0; padding: 20px 22px; background: linear-gradient(to top, rgba(36, 31, 27, .96), rgba(36, 31, 27, 0)); }
.feature__tag { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--mustard); }
.feature__name { font-family: var(--display); font-weight: 800; font-size: 24px; margin: 4px 0 2px; }
.feature__hook { margin: 0; color: #CDBFAE; font-size: 14px; }
.feature__play { position: absolute; top: 22px; right: 16px; padding: 8px 16px; border-radius: 999px; background: var(--cream); color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 13px; }

/* ticker: slow scrolling facts and news */
.ticker { background: var(--ink); color: var(--cream); overflow: hidden; display: flex; white-space: nowrap; border-bottom: 1px solid #2A241F; }
.ticker__row { display: inline-flex; align-items: center; padding: 12px 0; animation: ticker 90s linear infinite; }
.ticker:hover .ticker__row { animation-play-state: paused; }
.tick { font-size: 14px; font-weight: 500; padding: 0 28px; position: relative; }
.tick::before { content: "■"; color: var(--mustard); font-size: 7px; margin-right: 14px; vertical-align: 3px; }
.tick--new { font-family: var(--display); font-weight: 800; color: var(--mustard); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
.tick--new::before { color: var(--orange); }
@keyframes ticker { to { transform: translateX(-100%); } }
/* moods */
.moods { padding: 36px 0 0; }
.moods__bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 12px; }
.moods__bar .eyebrow { margin: 0; }
.moods__hint { margin: 0; font-size: 14px; }
.chips--moods .chip { background: var(--panel); }
.chip--mood.is-on { background: var(--orange-deep); border-color: var(--orange-deep); color: var(--cream); }
/* shelves and library bar */
.shelf { padding: 40px 0 0; }
.shelf__bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 20px; margin-bottom: 20px; }
.shelf__bar .h2 { margin: 0; }
.shelf__more { font-weight: 700; font-size: 14px; }
.grid--shelf { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.grid--shelf .card__hook { display: none; }
.count { font-size: 16px; color: var(--muted); font-weight: 600; margin-left: 6px; }
.sort select { min-height: 40px; padding: 6px 36px 6px 14px; border-radius: 999px; background: var(--panel); color: var(--ink); border: 1.5px solid var(--line-2); font: inherit; font-size: 14px; font-weight: 600; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.card__new { position: absolute; top: 14px; left: 12px; z-index: 2; padding: 4px 10px; border-radius: 999px; background: var(--mustard); color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; box-shadow: var(--shadow-sm); }
.card--activity { --tint: var(--plum); --tint-text: var(--plum); }
.card--activity .card__media { background: var(--panel); }
.activities { padding: 56px 0 0; }
/* activities */
.act__box { background: var(--cabinet); color: var(--cream); border-radius: var(--r-lg); padding: clamp(18px, 4vw, 36px); box-shadow: var(--shadow); margin-bottom: 8px; }
.act__box::before { content: ""; display: block; height: 8px; margin: calc(-1 * clamp(18px, 4vw, 36px)) calc(-1 * clamp(18px, 4vw, 36px)) clamp(18px, 4vw, 36px); border-radius: var(--r-lg) var(--r-lg) 0 0; background: linear-gradient(90deg, var(--orange) 0 25%, var(--mustard) 25% 50%, var(--teal) 50% 75%, var(--cream) 75%); }
.act__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px; align-items: center; }
.act__row--2 { grid-template-columns: 1fr 1fr; align-items: start; }
.act__panel { background: var(--cabinet-2); border-radius: var(--r); padding: 22px; text-align: center; }
.act__panel .h3 { color: var(--cream); }
.act__side { display: flex; flex-direction: column; gap: 12px; }
.act__label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #CDBFAE; }
.act__ta, .act__input { width: 100%; border-radius: 12px; border: 1px solid var(--cabinet-line); background: #1A1512; color: var(--cream); font: inherit; padding: 12px 14px; }
.act__ta:focus, .act__input:focus { outline: 2px solid var(--mustard); }
.act__result { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 4vw, 34px); color: var(--mustard); margin: 4px 0; min-height: 1.3em; }
.act__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.act__controls label { display: inline-flex; align-items: center; gap: 8px; color: #CDBFAE; font-weight: 600; }
.act__controls select { border-radius: 999px; padding: 8px 14px; border: 1px solid var(--cabinet-line); background: #1A1512; color: var(--cream); font: inherit; }
.act__counter { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #CDBFAE; }
.act__q { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 3.6vw, 32px); margin: 0 0 18px; color: var(--cream); }
.act__box .btn:not(.btn--primary) { background: var(--cabinet-2); color: var(--cream); border-color: var(--cabinet-line); box-shadow: none; }
.act__box .btn--ghost { background: transparent; }
.act__box .muted { color: #A89A88; }
.small { font-size: 13px; }
/* wheel */
.wheelwrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.wheel { width: min(100%, 360px); height: auto; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); cursor: pointer; }
.wheel__pin { position: absolute; top: -6px; left: 50%; width: 0; height: 0; margin-left: -14px; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 28px solid var(--cream); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); }
/* activity: dice-and-coin */
/* A solid coin and solid dice: real thickness, matte faces, one darker tone for the sides, soft warm shadows. No gradients
   and no glow (BRAND.md). The coin turns end over end like a tossed coin; the dice are cubes that land on the value rolled. */
.dc__panel { text-align: center; }
.dc__stage { display: grid; place-items: end center; min-height: 236px; padding: 86px 0 34px; perspective: 900px; }
.dc__stage--dice { perspective: 1000px; }

/* --- coin --- */
.coin3 { --size: 132px; --turn: 0deg; width: var(--size); height: var(--size); position: relative; border: 0; padding: 0; background: none; cursor: pointer; transform-style: preserve-3d; }
.coin3:focus-visible { outline: 3px solid var(--mustard); outline-offset: 8px; border-radius: 50%; }
.coin3__body { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--turn)); transition: transform 1s cubic-bezier(.26, .72, .24, 1); }
.coin3.is-calm .coin3__body { transition: none; }
.coin3__face { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; background: var(--mustard); backface-visibility: hidden; transform: translateZ(5px); overflow: hidden; }
.coin3__face--t { transform: rotateX(180deg) translateZ(5px); background: #E9B450; }
/* the struck faces: flat vector, one darker tone doing the job of a gradient */
.coin3__art { width: 100%; height: 100%; display: block; }
.coin3__rimring { fill: none; stroke: #C68F1E; stroke-width: 4.4; }
.coin3__beads circle { fill: #C68F1E; opacity: .8; }
.coin3__relief { fill: #A5731A; }
.coin3__ink { fill: #6B4A0C; }
.coin3__lit { fill: #E9B450; }        /* the parts of the cabinet that catch the light: marquee, screen, buttons */
.coin3__panel { fill: #7A5410; }
.coin3__blip { fill: #C68F1E; }       /* a game playing on the struck screen */
.coin3__sheen { stroke: #EFC26A; stroke-width: 2.2; opacity: .55; }  /* one flat crescent where the light lands, not a gradient */
.coin3__band--1 { fill: var(--orange); } .coin3__band--2 { fill: #C68F1E; } .coin3__band--3 { fill: var(--teal); } .coin3__band--4 { fill: #3B2E22; }
.coin3__star { fill: #6B4A0C; opacity: .85; }
.coin3__legend { font-family: var(--display); font-weight: 800; font-size: 9.4px; letter-spacing: .1em; fill: #6B4A0C; text-anchor: middle; }
.coin3__legend--sm { font-size: 8px; letter-spacing: .16em; }
.coin3__legend--xs { font-size: 6.6px; letter-spacing: .16em; opacity: .8; }
.coin3__year { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .04em; fill: #6B4A0C; text-anchor: middle; }
/* the rim: 28 thin slabs stood on edge around the disc, which is what gives the coin a visible thickness as it turns */
.coin3__rim { position: absolute; inset: 0; transform-style: preserve-3d; }
.coin3__rim span { position: absolute; top: 50%; left: 50%; width: 13px; height: 10px; margin: -5px 0 0 -6.5px; background: #B8811A; transform: rotateZ(calc(var(--i) * 10deg)) translateY(calc(var(--size) / -2 + 5px)) rotateX(90deg); }
/* reeding: the milled notches round the edge of a struck coin */
.coin3__rim span:nth-child(even) { background: #9C6D16; }
.coin3__shadow { position: absolute; left: 50%; bottom: -26px; width: 104px; height: 15px; margin-left: -52px; border-radius: 50%; background: rgba(60, 40, 20, .2); }
.coin3.is-toss { animation: coin-toss 1s cubic-bezier(.26, .72, .24, 1); }
.coin3.is-toss .coin3__shadow { animation: coin-shadow 1s cubic-bezier(.26, .72, .24, 1); }
@keyframes coin-toss { 0% { transform: translateY(0); } 38% { transform: translateY(-74px); } 76% { transform: translateY(0); } 86% { transform: translateY(-9px); } 100% { transform: translateY(0); } }
@keyframes coin-shadow { 0%, 100% { transform: scale(1); opacity: .2; } 38% { transform: scale(.62); opacity: .1; } 76% { transform: scale(1.04); opacity: .22; } }

/* --- dice --- */
.dice3 { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 34px; min-height: 120px; cursor: pointer; }
.d3 { --s: 84px; --delay: 0ms; width: var(--s); height: var(--s); position: relative; transform-style: preserve-3d; }
/* no transition until the opening pose is set, so the dice do not spin into view on load */
.d3__cube { position: absolute; inset: 0; transform-style: preserve-3d; transition-delay: var(--delay); }
.dice3.is-ready .d3__cube { transition: transform .9s cubic-bezier(.22, .68, .22, 1); }
.d3__f { position: absolute; inset: 0; border-radius: 12px; background: var(--panel); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 9px; gap: 3px; box-shadow: inset 0 0 0 1px rgba(60, 40, 20, .14); }
.d3__f i { border-radius: 50%; background: var(--ink); place-self: center; width: 12px; height: 12px; }
.d3__f i.off { background: none; }
/* 1 front, 6 back, 2 right, 5 left, 3 top, 4 bottom. Side and back faces sit a tone darker so a turning cube reads as solid. */
.d3__f--1 { transform: translateZ(calc(var(--s) / 2)); }
.d3__f--6 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); background: #F0E5D2; }
.d3__f--2 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); background: #EFE3CF; }
.d3__f--5 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); background: #EFE3CF; }
.d3__f--3 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); background: #FBF2E2; }
.d3__f--4 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); background: #E8DAC4; }
.d3__shadow { position: absolute; left: 50%; bottom: -19px; width: 66px; height: 11px; margin-left: -33px; border-radius: 50%; background: rgba(60, 40, 20, .2); }
.d3.is-rolling { animation: die-toss .9s cubic-bezier(.22, .68, .22, 1); animation-delay: var(--delay); }
.d3.is-rolling .d3__shadow { animation: die-shadow .9s cubic-bezier(.22, .68, .22, 1); animation-delay: var(--delay); }
@keyframes die-toss { 0% { transform: translateY(-16px); } 34% { transform: translateY(-46px); } 72% { transform: translateY(0); } 82% { transform: translateY(-7px) scaleY(.96); } 92% { transform: translateY(0) scaleY(1.03); } 100% { transform: translateY(0); } }
@keyframes die-shadow { 0%, 100% { transform: scale(1); opacity: .2; } 34% { transform: scale(.7); opacity: .12; } 72% { transform: scale(1.06); opacity: .22; } }

/* --- shared readouts --- */
.dc__tally { margin: 6px 0 0; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: #CDBFAE; min-height: 1.2em; }
.dc__hist { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; margin: 12px 0 0; padding: 0; min-height: 30px; }
.dc__hist li { font-family: var(--display); font-weight: 700; font-size: 13px; color: #CDBFAE; background: #1A1512; border: 1px solid var(--cabinet-line); border-radius: 999px; padding: 4px 11px; }
.dc__hist li.is-new { color: var(--ink); background: var(--mustard); border-color: var(--mustard); }
@media (max-width: 560px) { .coin3 { --size: 112px; } .d3 { --s: 66px; } .d3__f i { width: 9px; height: 9px; } .dice3 { gap: 22px; } .dc__stage { min-height: 210px; padding-top: 74px; } }
@media (prefers-reduced-motion: reduce) {
  .coin3__body, .d3__cube { transition: none; }
  .coin3.is-toss, .coin3.is-toss .coin3__shadow, .d3.is-rolling, .d3.is-rolling .d3__shadow { animation: none; }
}
/* would you rather */
.wyr { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; }
.wyr__opt { position: relative; min-height: 140px; border-radius: var(--r); border: 2px solid var(--cabinet-line); background: var(--cabinet-2); color: var(--cream); font: inherit; font-size: 18px; font-weight: 600; padding: 22px 18px 34px; cursor: pointer; text-align: center; transition: transform .2s var(--ease), border-color .2s, background .2s; }
.wyr__opt:hover { transform: translateY(-3px); border-color: var(--mustard); }
.wyr__opt--a.is-picked { background: var(--teal-deep); border-color: var(--teal); } .wyr__opt--b.is-picked { background: var(--orange-deep); border-color: var(--orange); }
.wyr__opt.is-other { opacity: .7; }
.wyr__opt b { position: absolute; left: 0; right: 0; bottom: 10px; font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--mustard); }
.wyr__or { align-self: center; font-family: var(--display); font-weight: 800; color: #A89A88; text-transform: uppercase; letter-spacing: .1em; }
/* 8 ball */
.ball { width: min(80vw, 300px); aspect-ratio: 1; margin-inline: auto; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #E3A72F, #B98424 45%, #8A6212 80%); box-shadow: inset -18px -26px 50px rgba(60, 36, 8, .45), 0 20px 44px rgba(60, 40, 20, .28); display: grid; place-items: center; cursor: pointer; user-select: none; }
.ball.is-shaking { animation: shake .9s ease-in-out; }
@keyframes shake { 0%, 100% { transform: translate(0); } 20% { transform: translate(-14px, 4px) rotate(-6deg); } 40% { transform: translate(12px, -6px) rotate(5deg); } 60% { transform: translate(-10px, 6px) rotate(-4deg); } 80% { transform: translate(8px, -3px) rotate(3deg); } }
.ball__window { width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--cream); display: grid; place-items: center; box-shadow: inset 0 3px 10px rgba(60, 36, 8, .35); text-align: center; padding: 12px; }
.ball__mark { font-family: var(--display); font-weight: 800; font-size: 56px; color: var(--orange-deep); }
.ball__answer { display: none; font-family: var(--display); font-weight: 700; font-size: clamp(12px, 2.6vw, 16px); color: var(--ink); line-height: 1.2; }
.ball.is-answer .ball__mark { display: none; } .ball.is-answer .ball__answer { display: block; animation: fadein .6s; }
@keyframes fadein { from { opacity: 0; } }
/* riddles, facts */
/* activity: riddles */
.rid__card { background: var(--cabinet-2); border-radius: var(--r); padding: clamp(20px, 3.5vw, 30px); }
.rid__tag { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(244,235,221,.5); }
.rid__tag--daily { color: var(--mustard); }
.rid__q { font-family: var(--display); font-weight: 800; font-size: clamp(20px, 3.4vw, 28px); line-height: 1.25; margin: 0; color: var(--cream); }
.rid__nudge { margin: 14px 0 0; font-size: 15px; color: var(--mustard); }
.rid__a { margin: 14px 0 0; font-size: 22px; color: var(--mustard); font-weight: 800; font-family: var(--display); }
.rid__form { display: flex; gap: 10px; margin: 18px 0 0; }
.rid__in { flex: 1 1 auto; min-width: 0; }
.rid__form .btn { flex: 0 0 auto; }
.rid__out { margin: 12px 0 0; min-height: 22px; font-size: 15px; color: rgba(244,235,221,.72); }
.rid__out.is-good { color: #8FD16A; font-weight: 700; }
.rid__out.is-miss { color: var(--mustard); }
.rid__controls { margin-top: 18px; }
@media (max-width: 520px) { .rid__form { flex-direction: column; } .rid__form .btn { width: 100%; } }
.fact__tag { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(244,235,221,.5); }
.fact__tag--daily { color: var(--mustard); }
.fact__shelf { margin: 22px 0 0; border-top: 1px solid var(--cabinet-line); padding-top: 16px; }
.fact__shelf-h { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mustard); }
.fact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fact__item { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; font-size: 15px; color: rgba(244,235,221,.8); line-height: 1.45; }
.fact__drop { flex: 0 0 auto; color: rgba(244,235,221,.5); font-size: 13px; }
.fact__drop:hover { color: var(--mustard); }
.btn.is-on { background: var(--teal-deep); border-color: var(--teal); color: var(--cream); }
.fact { background: var(--cabinet-2); border-radius: var(--r); padding: 30px 26px 40px; cursor: pointer; position: relative; min-height: 150px; }
.fact.is-in { animation: enter .35s var(--ease); }
.fact__text { font-family: var(--display); font-weight: 700; font-size: clamp(20px, 3.4vw, 28px); margin: 0; color: var(--cream); line-height: 1.3; }
.fact__hint { position: absolute; right: 18px; bottom: 12px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #A89A88; font-weight: 700; }
/* trivia */
/* activity: trivia */
.trivia__card { background: var(--cabinet-2); border-radius: var(--r); padding: clamp(18px, 3.4vw, 28px); }
.trivia__bar { height: 4px; border-radius: 2px; background: rgba(244,235,221,.12); overflow: hidden; margin: 0 0 16px; }
.trivia__bar i { display: block; height: 100%; width: 100%; background: var(--mustard); border-radius: 2px; transition: width .12s linear; }
.trivia__bar i.is-low { background: var(--brick); }
.trivia__q { margin: 0 0 16px; }
.trivia__review { margin: 18px 0 0; border-top: 1px solid var(--cabinet-line); padding-top: 14px; }
.trivia__review-h { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mustard); }
.trivia__miss { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: space-between; margin: 0 0 8px; font-size: 14px; color: rgba(244,235,221,.72); }
.trivia__miss b { color: var(--cream); }
.trivia__top { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #CDBFAE; margin-bottom: 10px; }
.trivia__timer { color: var(--mustard); }
.trivia__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .trivia__opts { grid-template-columns: 1fr; } .trivia__opt { padding: 14px; font-size: 15px; } }
.trivia__opt { border-radius: 12px; border: 2px solid var(--cabinet-line); background: var(--cabinet-2); color: var(--cream); font: inherit; font-weight: 600; font-size: 16px; padding: 16px; cursor: pointer; text-align: left; transition: border-color .15s, transform .15s; }
.trivia__opt:hover:not(:disabled) { border-color: var(--mustard); transform: translateY(-2px); }
.trivia__opt.is-right { background: var(--teal-deep); border-color: var(--teal); } .trivia__opt.is-wrong { background: #5A1E14; border-color: var(--brick); }
/* circle */
.circle { position: relative; }
.circle__cv { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r); touch-action: none; cursor: crosshair; display: block; }
.circle__score { position: absolute; left: 18px; top: 16px; pointer-events: none; }
.circle__score b { display: block; font-family: var(--display); font-weight: 800; font-size: 34px; color: var(--mustard); line-height: 1; }
.circle__score span { font-size: 13px; color: #CDBFAE; }
/* chill */
.chill { text-align: center; padding: 10px 0; }
.chill__ring { position: relative; width: min(70vw, 260px); aspect-ratio: 1; margin: 0 auto 20px; border-radius: 50%; border: 2px solid var(--cabinet-line); display: grid; place-items: center; }
.chill__breath { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, var(--teal), var(--teal-deep)); opacity: .8; transform: scale(.6); }
.chill.is-running .chill__breath { animation: breathe 8s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(.6); } 50% { transform: scale(1); } }
.chill__time { position: relative; font-family: var(--display); font-weight: 800; font-size: 44px; color: var(--cream); }
.chill__msg { color: #CDBFAE; max-width: 44ch; margin: 0 auto; }
@media (max-width: 720px) { .act__row, .act__row--2 { grid-template-columns: 1fr; } .wyr { grid-template-columns: 1fr; } .wyr__or { justify-self: center; } .trivia__opts { grid-template-columns: 1fr; } }
/* daily pick + your arcade */
.daily { padding: 40px 0 0; }
.daily__card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.daily__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.daily__body { padding: 26px 28px; display: flex; flex-direction: column; justify-content: center; gap: 6px; border-right: 1px solid var(--line); }
.daily__body .h2 { margin: 0; } .daily__body .muted { margin: 0; }
.daily__meta { font-size: 13px; font-weight: 600; color: var(--muted); margin: 6px 0 12px; }
.daily__body .hero__actions { margin: 0; }
.arcade { padding: 26px 28px; background: var(--sunken); }
/* hidden means hidden: a later display:flex or display:grid on the same element would otherwise win, which is
   how a form that had been marked hidden stayed on screen */
[hidden] { display: none !important; }
.arcade[hidden] { display: none; }
.daily__card:has(.arcade[hidden]) { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.daily__card:has(.arcade[hidden]) .daily__body { border-right: 0; }
.arcade__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.arcade__stats div { text-align: center; background: var(--panel); border-radius: 12px; padding: 10px 6px; }
.arcade__stats b { display: block; font-family: var(--display); font-weight: 800; font-size: 24px; color: var(--orange-deep); line-height: 1.1; }
.arcade__stats span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.trophies { display: flex; flex-wrap: wrap; gap: 6px; }
.trophy { display: inline-flex; flex-direction: column; padding: 6px 10px; border-radius: 10px; background: var(--panel); border: 1px dashed var(--line-2); opacity: .55; }
.trophy.is-on { opacity: 1; border-style: solid; border-color: var(--mustard); background: #FFF3D6; }
.trophy b { font-family: var(--display); font-weight: 800; font-size: 12px; } .trophy small { font-size: 10px; color: var(--muted); }
.overlay__fact { margin: 4px 0 0; font-size: 13px; color: #CDBFAE; max-width: 40ch; }
.overlay__trophy { margin: 0; font-family: var(--display); font-weight: 800; font-size: 14px; color: var(--mustard); }
.foot__brand p { margin: 0; }
.foot__studio { margin-top: 6px !important; font-size: 13px; }
.foot__studio a { color: var(--orange-deep); font-weight: 700; }
@media (max-width: 900px) { .daily__card { grid-template-columns: 1fr; } .daily__body { border-right: 0; border-bottom: 1px solid var(--line); } .daily__media img { aspect-ratio: 16 / 9; } }
/* facts band */
.band { background: var(--ink); color: var(--cream); }
.band__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 28px; padding: 14px 0; font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.band__row span::before { content: "■"; color: var(--mustard); font-size: 8px; margin-right: 12px; vertical-align: 2px; }

/* games grid */
.games { padding: 64px 0 40px; }
.games__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-bottom: 26px; }
.games__bar .h2 { margin: 0; margin-right: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 38px; padding: 6px 16px; border-radius: 999px; background: transparent; color: var(--muted); border: 1.5px solid var(--line-2); font-family: var(--display); font-weight: 700; font-size: 14px; cursor: pointer; transition: all .15s; }
.chip:hover { color: var(--ink); border-color: var(--ink); }
.chip.is-on { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.search input { min-height: 40px; width: 210px; padding: 6px 16px; border-radius: 999px; background: var(--panel); color: var(--ink); border: 1.5px solid var(--line-2); font: inherit; font-size: 14px; }
.search input::placeholder { color: var(--faint); }

/* the games pages have their own search: wider, centred, with a live count under it */
.coll__search { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 18px 0 4px; }
.search--coll input { width: min(340px, 88vw); min-height: 44px; font-size: 15px; text-align: center; }
.search--coll input::placeholder { color: var(--muted); opacity: .95; }
.coll__found { margin: 0; font-size: 13px; color: var(--muted); min-height: 18px; }
.grid-empty { text-align: center; color: var(--muted); margin: 18px 0 0; }

.search input:focus { border-color: var(--ink); outline: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 24px; }
.grid--related { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.card { --tint: var(--teal); position: relative; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; color: var(--ink); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s; }
.card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--tint); z-index: 2; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); text-decoration: none; }
.card__media { position: relative; aspect-ratio: 4 / 3; background: var(--cabinet); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card__play { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .25s; background: rgba(36, 31, 27, .35); z-index: 1; }
.card:hover .card__play { opacity: 1; }
.card__play span { padding: 11px 26px; border-radius: 999px; background: var(--cream); color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 15px; box-shadow: var(--shadow); }
.card__body { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; }
.card__name { font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -.01em; font-variation-settings: "opsz" 24; }
.card__hook { font-size: 14px; color: var(--muted); line-height: 1.45; }
.card__meta { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.card__cat { color: var(--tint-text, var(--teal-deep)); }
.card__best { color: var(--orange-deep); }
.card--arcade { --tint: var(--teal); --tint-text: var(--teal-deep); } .card--puzzle { --tint: var(--mustard); --tint-text: var(--mustard-deep); } .card--action { --tint: var(--orange); --tint-text: var(--orange-deep); } .card--board { --tint: var(--plum); --tint-text: var(--plum); } .card--learning { --tint: var(--brick); --tint-text: var(--brick); } .card--brain { --tint: var(--ink); --tint-text: var(--ink); }
.card--soon { opacity: .5; pointer-events: none; }
.card.is-hidden { display: none; }
.empty { color: var(--muted); text-align: center; padding: 48px 0; font-weight: 600; }
.recent { padding: 40px 0 0; }
.recent__row { display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; padding: 6px 0 14px; scrollbar-width: thin; }
.recent__row .card { flex: 0 0 210px; }
.recent__row .card__hook, .recent__row .card__meta { display: none; }
.recent__row .card__name { font-size: 16px; }
.why { padding: 40px 0 88px; }
.why__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.why__item { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 26px 24px; }
.why__item::before { content: attr(data-n); position: absolute; right: 18px; top: 16px; font-family: var(--display); font-weight: 800; font-size: 14px; color: var(--faint); letter-spacing: .1em; }
.why__item b { display: block; font-family: var(--display); font-weight: 800; font-size: 18px; margin-bottom: 8px; font-variation-settings: "opsz" 24; }
.why__item p { margin: 0; font-size: 14px; color: var(--muted); }
.why__item i { display: block; width: 36px; height: 6px; border-radius: 3px; margin-bottom: 16px; background: var(--orange); }
.why__item:nth-child(2) i { background: var(--mustard); } .why__item:nth-child(3) i { background: var(--teal); } .why__item:nth-child(4) i { background: var(--ink); }

/* ---------- game page: the cabinet ---------- */
.crumbs { font-size: 14px; color: var(--muted); padding: 20px 0 8px; }
.crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--ink); }
.cab__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 6px 0 20px; }
.cab__title { font-family: var(--display); font-weight: 800; font-size: clamp(32px, 4.8vw, 48px); letter-spacing: -.03em; margin: 0 0 4px; font-variation-settings: "opsz" 96; }
.cab__hook { margin: 0; color: var(--muted); font-size: 16px; }
.cab__cat { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--orange-deep); }
.cab__cat::before { content: ""; width: 20px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--orange) 0 33%, var(--mustard) 33% 66%, var(--teal) 66%); }
.cab__best { margin: 0; text-align: right; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.cab__best b { display: block; font-family: var(--display); font-weight: 800; font-size: 32px; color: var(--orange-deep); line-height: 1.1; margin-top: 2px; }

/* game page heading: back to all games, the category pill in its shelf colour, then the game; a header with the name, a category chip and your numbers */
.gcrumbs { padding: 18px 0 6px; font-size: 14px; }
.gcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; padding: 0; list-style: none; }
.gcrumbs li { display: inline-flex; align-items: center; min-width: 0; }
.gcrumbs li + li::before { content: ""; flex: 0 0 auto; width: 5px; height: 5px; margin-right: 10px; border-radius: 50%; background: var(--line-2); }
.gcrumbs__back { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 12px; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--panel); color: var(--ink); font-weight: 700; }
.gcrumbs__back:hover { border-color: var(--ink); text-decoration: none; }
.gcrumbs__arrow { width: 8px; height: 8px; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; border-radius: 1px; transform: translateX(2px) rotate(45deg); }
.gcrumbs__here { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-weight: 600; }
.gpill, .gchip { --tint: var(--line-2); --tint-text: var(--muted); display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; font-weight: 700; }
.gpill::before, .gchip--arcade::before, .gchip--puzzle::before, .gchip--action::before, .gchip--board::before, .gchip--learning::before, .gchip--brain::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--tint); }
.gpill { padding: 6px 14px 6px 12px; background: var(--panel); background: color-mix(in srgb, var(--tint) 16%, var(--panel)); border: 1.5px solid transparent; color: var(--tint-text); font-size: 14px; }
.gpill:hover { text-decoration: none; border-color: var(--tint); }
.gpill--arcade, .gchip--arcade { --tint: var(--teal); --tint-text: var(--teal-deep); } .gpill--puzzle, .gchip--puzzle { --tint: var(--mustard); --tint-text: var(--mustard-deep); }
.gpill--action, .gchip--action { --tint: var(--orange); --tint-text: var(--orange-deep); } .gpill--board, .gchip--board { --tint: var(--plum); --tint-text: var(--plum); }
.gpill--learning, .gchip--learning { --tint: var(--brick); --tint-text: var(--brick); } .gpill--brain, .gchip--brain { --tint: var(--ink); --tint-text: var(--ink); }
.gpill--activity { --tint: var(--plum); --tint-text: var(--plum); } /* activities carry the same plum as their cards */
.ghead { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 28px; padding: 8px 0 18px; }
.ghead__id { min-width: 0; }
.ghead__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.gchip { padding: 4px 11px; border: 1px solid var(--line); background: var(--panel); color: var(--tint-text); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.ghead__title { margin: 0 0 6px; font-family: var(--display); font-weight: 800; font-size: clamp(32px, 4.8vw, 48px); line-height: 1; letter-spacing: -.03em; font-variation-settings: "opsz" 96; }
.ghead__hook { margin: 0; color: var(--muted); font-size: 16px; }
.ghead__stats { display: flex; gap: 8px; margin: 0; flex: 0 0 auto; }
.gstat { min-width: 96px; padding: 8px 14px 10px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); text-align: right; }
.gstat[hidden] { display: none; }
.gstat dt { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.gstat dd { margin: 2px 0 0; font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1.05; color: var(--ink); white-space: nowrap; font-variation-settings: "opsz" 24; }
.gstat--best dd { color: var(--orange-deep); }
.gstat--saved dd { color: var(--teal-deep); }
/* start screen: Continue from a saved level first, New game beside it */
.overlay__actions--start { margin-top: 4px; }
.overlay__actions--start .btn:not(.btn--primary) { font-size: 15px; min-height: 48px; padding: 10px 22px; }

/* THE CONSOLE — an old device mockup: plastic bezel, curved screen inset, speaker grille, dials, power LED */
.stage { position: relative; margin-inline: auto; max-width: 560px; border-radius: 28px; background: linear-gradient(180deg, #2F2823, #241F1B 30%, #1F1A16); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -2px 0 rgba(0, 0, 0, .5); padding: 0 18px 14px; }
.page-game--landscape .stage { max-width: 900px; }
.stage::before { content: ""; display: block; height: 10px; margin: 0 -18px; border-radius: 28px 28px 0 0; background: linear-gradient(90deg, var(--orange) 0 25%, var(--mustard) 25% 50%, var(--teal) 50% 75%, var(--cream) 75%); }
.stage__marquee { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 6px 10px; color: var(--cream); font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.stage__marquee .m-name { display: inline-flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage__marquee .m-name .m-badge { flex: 0 0 auto; }
.stage__marquee .m-badge { width: 22px; height: 22px; border-radius: 6px; }
.stage__marquee .m-score { font-family: var(--body); font-weight: 700; letter-spacing: .06em; color: var(--mustard); }
.stage__top { display: flex; flex-direction: column; }
/* the toolbar sits directly above the screen: matte keys in the console's own plastic */
.gbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 2px 12px; }
.gbtn, .gseg__b { -webkit-tap-highlight-color: transparent; display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--cabinet-line); background: var(--cabinet-2); color: var(--cream); font: 700 13px/1 var(--body); letter-spacing: .02em; white-space: nowrap; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 244, 228, .07), 0 2px 0 #15110E; transition: border-color .15s, transform .08s, box-shadow .08s; }
.gbtn:hover { border-color: #8F8072; }
.gbtn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 244, 228, .03), 0 0 0 #15110E; }
.gbtn[hidden], .gseg[hidden], .gseg__b[hidden] { display: none; }
.gbtn:disabled { opacity: .42; cursor: default; transform: none; box-shadow: none; }
.gbtn:disabled:hover { border-color: var(--cabinet-line); }
.gbtn[aria-pressed="false"] { color: #9A8C7E; text-decoration: line-through; }
.gbtn--exit { display: none; }
.gseg { display: inline-flex; margin-left: auto; padding: 2px; border-radius: 999px; border: 1px solid var(--cabinet-line); background: #1A1512; }
.gseg__b { min-height: 32px; padding: 4px 13px; border: 0; background: transparent; box-shadow: none; color: #B5A797; }
.gseg__b[aria-pressed="true"] { background: var(--cream); color: var(--ink); }
.cab__screen { position: relative; background: #0B0A12; border-radius: 22px; box-shadow: inset 0 0 0 6px #141110, inset 0 0 0 7px #3A322B, inset 0 0 80px rgba(0, 0, 0, .55); overflow: hidden; aspect-ratio: 2 / 3; display: flex; align-items: center; justify-content: center; }
.page-game--landscape .cab__screen { aspect-ratio: 3 / 2; }
.cab__screen canvas { width: 100%; height: 100%; outline: 0; touch-action: none; border-radius: 16px; }
.scan { position: absolute; inset: 0; pointer-events: none; z-index: 1; border-radius: 22px; box-shadow: inset 0 0 90px rgba(0, 0, 0, .5); background: linear-gradient(115deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 30%); }
.deck { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 6px 2px; }
.deck__grille { width: 84px; height: 22px; border-radius: 6px; background-image: radial-gradient(circle, #0F0C0A 1.6px, transparent 1.7px); background-size: 7px 7px; opacity: .9; }
.deck__plate { font-family: var(--display); font-weight: 800; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #8F8072; }
.deck__plate b { color: var(--mustard); font-weight: 800; }
.deck__dials { display: flex; align-items: center; gap: 10px; }
.deck__dials i { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5A4E44, #2A241F 70%); box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 2px 4px rgba(0, 0, 0, .6); position: relative; }
.deck__dials i::after { content: ""; position: absolute; left: 50%; top: 2px; width: 2px; height: 5px; margin-left: -1px; background: #1A1512; border-radius: 1px; }
.deck__dials .deck__led { width: 8px; height: 8px; background: #FF5C3B; box-shadow: 0 0 6px #FF5C3B, 0 0 12px rgba(255, 92, 59, .6); animation: led 2.4s ease-in-out infinite; }
.deck__dials .deck__led::after { content: none; }
@keyframes led { 50% { opacity: .55; } }
/* CRT power-on when Play is pressed */
.cab__screen.is-on canvas { animation: poweron .55s cubic-bezier(.2, .8, .2, 1); }
@keyframes poweron { 0% { transform: scaleY(.004) scaleX(.6); filter: brightness(3); } 45% { transform: scaleY(.02) scaleX(1); filter: brightness(2.2); } 100% { transform: none; filter: none; } }
.overlay { position: absolute; inset: 0; z-index: 2; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 28px; text-align: center; background: rgba(36, 31, 27, .86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--cream); border-radius: 22px; }
.overlay[hidden] { display: none; }
.overlay__title { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 5.5vw, 42px); letter-spacing: -.03em; margin: 0; font-variation-settings: "opsz" 96; }
.overlay__text { margin: 0; font-size: 16px; color: #CDBFAE; max-width: 34ch; }
.overlay__hint { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--mustard); margin: 12px 0 0; }
.overlay__score { font-family: var(--display); font-weight: 800; font-size: clamp(56px, 10vw, 80px); letter-spacing: -.04em; margin: 0; color: var(--mustard); line-height: 1; }
.overlay__score small { display: block; font-family: var(--body); font-weight: 700; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #CDBFAE; margin-top: 12px; }
.overlay__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.overlay .btn { background: var(--cabinet-2); color: var(--cream); border-color: var(--cabinet-line); box-shadow: none; }
.overlay .btn:hover { border-color: var(--cream); }
.overlay .btn--primary { background: var(--orange-deep); color: var(--cream); border-color: var(--orange-deep); }
.overlay .btn--primary:hover { background: var(--cream); border-color: var(--cream); }
.is-newbest #overBest { color: var(--mustard); font-weight: 700; }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; top: -12px; border-radius: 2px; opacity: 0; animation: confetti 2s ease-in forwards; }
@keyframes confetti { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(110vh) rotate(720deg); } }
body.is-playing .confetti i { animation-name: confettiFull; }
@keyframes confettiFull { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(100vh) rotate(720deg); } }
.cab__note { text-align: center; color: var(--muted); font-size: 14px; }
/* touch controls inside the console, sized by the viewport so they fit small phones. Matte keys with a soft top highlight that press in
   under the thumb; the arrows are drawn shapes, not characters, so a long press can never select them. */
.touchpad { --k: clamp(44px, 13vmin, 62px); display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 4px 6px; }
.touchpad[hidden], .dpad[hidden], .stickzone[hidden], .abtn__b[hidden] { display: none; }
.dpad { position: relative; flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, var(--k)); grid-template-rows: repeat(3, var(--k)); gap: 3px; cursor: pointer; }
.dpad__b { position: relative; display: grid; place-items: center; border-radius: 14px; border: 1px solid #4F433A; background: linear-gradient(180deg, #3D342D, #2B2520); box-shadow: inset 0 1px 0 rgba(255, 244, 228, .14), 0 4px 0 #120E0B, 0 6px 10px rgba(0, 0, 0, .45); transition: transform .06s, box-shadow .06s; }
.dpad__b i { width: calc(var(--k) * .34); height: calc(var(--k) * .27); background: #D9CBB2; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.dpad__b--up { grid-column: 2; grid-row: 1; } .dpad__b--left { grid-column: 1; grid-row: 2; } .dpad__b--right { grid-column: 3; grid-row: 2; } .dpad__b--down { grid-column: 2; grid-row: 3; }
.dpad__b--right i { transform: rotate(90deg); } .dpad__b--down i { transform: rotate(180deg); } .dpad__b--left i { transform: rotate(-90deg); }
.dpad__hub { grid-column: 2; grid-row: 2; margin: 24%; border-radius: 50%; background: #1A1512; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6); }
.dpad__b.is-down { transform: translateY(3px); background: linear-gradient(180deg, #2A241F, #332B25); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55), 0 1px 0 #120E0B; }
.dpad__b.is-down i { background: var(--mustard); }
.touchpad.mode-buttons .dpad__b--up, .touchpad.mode-buttons .dpad__b--down { visibility: hidden; }
/* named buttons along the right thumb's natural arc: the main one biggest and lowest, where the thumb rests; the second smaller, up and to its left */
.abtn { display: flex; gap: calc(var(--k) * .18); align-items: flex-end; }
.abtn__b { position: relative; width: calc(var(--k) * 1.45); height: calc(var(--k) * 1.45); padding: 0; border-radius: 50%; border: 1px solid var(--cap-edge); background: var(--cap); cursor: pointer; box-shadow: inset 0 2px 0 rgba(255, 250, 240, .26), inset 0 -3px 6px rgba(0, 0, 0, .18), 0 5px 0 var(--cap-under), 0 8px 12px rgba(0, 0, 0, .45); transition: transform .06s, box-shadow .06s; }
/* a soft reflection across the top of each key: matte plastic catching the light, never a glow */
.abtn__b::before { content: ""; position: absolute; left: 20%; right: 20%; top: 8%; height: 30%; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 250, 240, .30), rgba(255, 250, 240, 0)); pointer-events: none; transition: opacity .06s; }
/* the game's own name for the button, from games.json; drawn by CSS so there is no text to select */
.abtn__b::after { content: attr(data-label); position: absolute; inset: 0; display: grid; place-items: center; padding: 0 10%; font: 800 calc(var(--k) * .22)/1.02 var(--display); letter-spacing: .01em; text-align: center; color: var(--cap-ink); pointer-events: none; }
.abtn__b--a { --cap: var(--orange-deep); --cap-edge: #9C3814; --cap-under: #62250D; --cap-ink: var(--cream); }
.abtn__b--b { --cap: #DDA23A; --cap-edge: #B98424; --cap-under: #7A5714; --cap-ink: var(--ink); width: calc(var(--k) * 1.12); height: calc(var(--k) * 1.12); margin-bottom: calc(var(--k) * .78); }
.abtn__b--b::after { font-size: calc(var(--k) * .19); }
.abtn__b.is-down { transform: translateY(4px); box-shadow: inset 0 3px 7px rgba(0, 0, 0, .3), 0 1px 0 var(--cap-under), 0 2px 4px rgba(0, 0, 0, .35); }
.abtn__b.is-down::before { opacity: .3; }
/* each press sends a quick ring out from the key, so it reads clearly on a phone that can't vibrate */
.abtn__b.is-hit, .dpad__b.is-hit { animation: keyHit .3s ease-out; }
@keyframes keyHit { from { outline: 3px solid rgba(244, 235, 221, .5); outline-offset: 0; } to { outline: 3px solid rgba(244, 235, 221, 0); outline-offset: 9px; } }
.touchpad.mode-tap { justify-content: center; gap: 24px; }
.touchpad.mode-tap .abtn__b { width: calc(var(--k) * 1.7); height: calc(var(--k) * 1.7); margin-bottom: 0; }
.touchpad.mode-tap .abtn__b::after { font-size: calc(var(--k) * .27); }
.touchpad.mode-tap .abtn__b--b { display: none; }
/* joystick: a well in the console; the base appears where the thumb lands and the knob springs back to the middle when you let go */
.stickzone { position: relative; flex: 0 0 auto; width: calc(var(--k) * 3.3); height: calc(var(--k) * 3.1); cursor: pointer; }
.stick { --r: calc(var(--k) * 1.05); position: absolute; left: 50%; top: 50%; width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1); border-radius: 50%; border: 1px solid #3A322B; background: #1A1512; box-shadow: inset 0 3px 9px rgba(0, 0, 0, .65), 0 1px 0 rgba(255, 244, 228, .07); opacity: .7; pointer-events: none; transition: opacity .15s; }
.stick__knob { position: absolute; left: 50%; top: 50%; width: calc(var(--k) * 1.05); height: calc(var(--k) * 1.05); margin: calc(var(--k) * -.525) 0 0 calc(var(--k) * -.525); border-radius: 50%; border: 1px solid #5A4E44; background: linear-gradient(180deg, #4A3F37, #2F2823); box-shadow: inset 0 2px 0 rgba(255, 244, 228, .16), 0 5px 0 #120E0B, 0 8px 14px rgba(0, 0, 0, .5); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.stick__knob::before { content: ""; position: absolute; inset: 27%; border-radius: 50%; background: #2A241F; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 244, 228, .08); }
.stickzone::after { content: "Joystick"; position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font: 700 10px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: #6B5E53; pointer-events: none; transition: opacity .15s; }
.stickzone.is-active .stick { opacity: 1; }
.stickzone.is-active .stick__knob { transition: none; }
.stickzone.is-active::after { opacity: 0; }

/* ---------- PLAY MODE: the device fills the screen; the canvas is fitted, never cropped ---------- */
body.is-playing { overflow: hidden; }
body.is-playing .stage { position: fixed; inset: 0; z-index: 100; max-width: none; margin: 0; border-radius: 0; box-shadow: none; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background: var(--cabinet); display: flex; flex-direction: column; }
body.is-playing .stage::before { border-radius: 0; margin: 0; flex: 0 0 auto; }
/* one slim bar over the game: name and live score on the left, the controls on the right */
body.is-playing .stage__top { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 12px; padding: 8px 16px; }
body.is-playing .stage__marquee { flex: 0 1 auto; min-width: 0; padding: 0; }
body.is-playing .gbar { flex: 1 1 auto; justify-content: flex-end; padding: 0; }
body.is-playing .gseg { margin-left: 0; }
body.is-playing .gbtn--exit { display: inline-flex; }
body.is-playing .cab__screen { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; background: var(--cabinet); }
body.is-playing .cab__screen canvas { width: auto; height: auto; border-radius: 14px; box-shadow: 0 0 0 6px #141110, 0 0 0 7px #3A322B, 0 20px 50px rgba(0, 0, 0, .5); }
body.is-playing .scan { display: none; }
body.is-playing .deck { display: none; }
/* while playing, the controls hug the bottom corners where thumbs hold the device (tablets included), clear of rounded corners and the home bar */
body.is-playing .touchpad { flex: 0 0 auto; width: 100%; margin-inline: auto; padding: 6px max(18px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
@media (max-height: 640px) { body.is-playing .touchpad { --k: clamp(40px, 10vmin, 52px); padding: 6px 12px 8px; } }
.stage:fullscreen { background: var(--cabinet); }

.cab__info { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; padding: 32px 0 8px; }
.cab__col { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 24px 26px; }
.steps { margin: 0; padding-left: 20px; font-size: 15px; color: var(--muted); }
.steps li { margin: 7px 0; }
.steps li::marker { color: var(--orange-deep); font-weight: 700; }
.keys { list-style: none; padding: 0; margin: 0; font-size: 15px; }
.keys li { padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.keys li:last-child { border: 0; }
.cab__about { padding: 26px 0; max-width: 72ch; }
.cab__about p { color: var(--muted); }
.related { padding: 26px 0 72px; }

.games__hubs { margin: 26px 0 0; font-size: 15px; color: var(--muted); }

/* collection pages: /games/ and the four category hubs */
.coll { padding-bottom: 24px; }
.coll__head { max-width: 68ch; padding: 8px 0 26px; }
.coll__title { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 4.6vw, 48px); line-height: 1.02; letter-spacing: -.028em; margin: 0 0 14px; font-variation-settings: "opsz" 96; }
.coll__lede { font-size: 18px; color: var(--muted); margin: 0 0 14px; }
.coll__facts { font-size: 14px; color: var(--faint); margin: 0; }
.coll__facts b { color: var(--ink); font-family: var(--display); font-weight: 800; }
.chips--coll { margin-bottom: 26px; }
.chips--coll .chip { text-decoration: none; display: inline-flex; align-items: center; }
.coll__copy { padding: 44px 0 8px; max-width: 72ch; }
.coll__copy h2 { font-family: var(--display); font-weight: 800; font-size: 20px; margin: 26px 0 6px; font-variation-settings: "opsz" 24; }
.coll__copy h2:first-child { margin-top: 0; }
.coll__copy p { font-size: 16px; color: var(--muted); margin: 0 0 10px; }
.coll__back { padding-top: 8px; font-weight: 600; }

/* info pages */
.prose { padding: 52px 0 80px; max-width: 72ch; overflow-wrap: anywhere; }
.prose h2 { font-family: var(--display); font-weight: 800; font-size: 24px; margin: 32px 0 8px; font-variation-settings: "opsz" 24; }
.prose p, .prose li { font-size: 16px; color: var(--muted); }
.prose .lead { font-size: 19px; color: var(--ink); }
.prose h3 { font-family: var(--display); font-weight: 700; font-size: 17px; margin: 18px 0 4px; }
.prose ul { padding-left: 22px; } .prose li { margin: 4px 0; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--sunken); padding: 1px 6px; border-radius: 6px; }
.tablewrap { overflow-x: auto; overscroll-behavior-x: contain; margin: 12px 0 20px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 14px; }
.prose th, .prose td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.notfound { text-align: center; padding: 90px 0; }
.notfound__code { font-family: var(--display); font-weight: 800; font-size: clamp(72px, 18vw, 160px); margin: 0; line-height: 1; letter-spacing: -.05em; }
.notfound .grid { margin-top: 48px; text-align: left; }

/* footer */
.foot { border-top: 1px solid var(--line); padding: 30px 0; margin-top: 24px; background: var(--panel); }
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 14px; color: var(--muted); }
.foot__brand { margin: 0; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 18px; font-weight: 600; }
.foot__nav a { color: var(--ink); }

/* consent: a friendly card, both choices equally easy */
.consent { position: fixed; inset: auto 16px 16px 16px; z-index: 40; display: flex; justify-content: center; transition: transform .35s var(--ease), opacity .35s; }
.consent[hidden] { display: none; }
.consent.is-hidden-anim, .consent.is-leaving { transform: translateY(24px); opacity: 0; }
/* game pages on a laptop or tablet: the first-visit notice sits at the top, clear of the Play button in the middle of the console */
@media (min-width: 641px) and (min-height: 560px) {
  .page-game .consent { inset: 16px 16px auto 16px; }
  .page-game .consent.is-hidden-anim, .page-game .consent.is-leaving { transform: translateY(-24px); }
}
.consent__box { display: flex; gap: 18px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 20px 22px; max-width: 620px; width: 100%; position: relative; overflow: hidden; }
.consent__box::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--orange) 0 25%, var(--mustard) 25% 50%, var(--teal) 50% 75%, var(--ink) 75%); }
.consent__art { flex: 0 0 auto; padding-top: 4px; }
.consent__art img { width: 56px; height: 56px; border-radius: 14px; box-shadow: var(--shadow-sm); }
.consent__body { min-width: 0; }
.consent__title { font-family: var(--display); font-weight: 800; font-size: 20px; margin: 4px 0 6px; letter-spacing: -.01em; }
.consent__text { margin: 0 0 14px; font-size: 15px; color: var(--muted); }
.consent__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.consent__actions .btn { min-height: 44px; }
.consent__link { margin-left: auto; font-weight: 600; font-size: 14px; }
.consent__box { max-height: calc(100dvh - 32px); overflow-y: auto; }
.consent__main[hidden], .consent__panel[hidden] { display: none; }
.consent__opt { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line); }
label.consent__opt { cursor: pointer; }
.consent__optname { display: block; font-weight: 700; font-size: 15px; color: var(--ink); }
.consent__optdesc { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.consent__always { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); background: var(--sunken); border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; white-space: nowrap; }
.consent__switch { flex: 0 0 auto; appearance: none; -webkit-appearance: none; width: 48px; height: 28px; margin: 0; border-radius: 999px; background: var(--line-2); position: relative; cursor: pointer; transition: background .2s; }
.consent__switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--panel); box-shadow: var(--shadow-sm); transition: transform .2s var(--ease); }
.consent__switch:checked { background: var(--teal); }
.consent__switch:checked::after { transform: translateX(20px); }
.consent__switch:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.consent__panel .consent__actions { padding-top: 14px; border-top: 1px solid var(--line); }
@media (max-width: 560px) { .consent { inset: auto 8px 8px 8px; } .consent__box { padding: 14px 14px 12px; gap: 12px; } .consent__art img { width: 40px; height: 40px; border-radius: 10px; } .consent__title { font-size: 17px; } .consent__actions .btn { flex: 1 1 auto; } .consent__link { margin-left: 0; flex-basis: 100%; } }
/* phones: the first-visit notice stays a short strip (no badge, buttons on one row) so it never covers the Play button */
@media (max-width: 560px) { .consent__art { display: none; } .consent__main .consent__title { margin: 2px 0 4px; } .consent__main .consent__text { font-size: 14px; line-height: 1.45; margin-bottom: 10px; } .consent__main .consent__actions { flex-wrap: nowrap; gap: 8px; } .consent__main .consent__actions .btn { flex: 1 1 0; min-width: 0; padding-inline: 8px; white-space: nowrap; } }
@media (max-width: 360px) { .consent__main .consent__actions { gap: 6px; } .consent__main .consent__actions .btn { padding-inline: 4px; font-size: 14px; letter-spacing: 0; } }
@media (prefers-reduced-motion: reduce) { .consent { transition: none; } }

@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; gap: 32px; } .hero { padding: 52px 0 40px; } }
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); }
  /* phones: the nav links collapse, and the two buttons must not run over the wordmark */
  .top__nav a:not(:last-of-type) { display: none; }
  .top__row { gap: 10px; }
  .logo { font-size: 19px; gap: 9px; min-width: 0; }
  .logo__badge { width: 34px; height: 34px; border-radius: 9px; }
  .top__nav { flex: 0 0 auto; }
  .top__nav .btn { margin-left: 6px; }
  .top__nav .btn--sm { padding: 6px 12px; font-size: 12px; white-space: nowrap; }
  .top__nav .wide-only { display: none; }
  .top__nav .narrow-only { display: inline; }
  .cab__head { flex-direction: column; align-items: flex-start; }
  .cab__best { text-align: left; } .cab__best b { display: inline; margin-left: 8px; font-size: 24px; }
  /* game page on a phone: the category pill in the breadcrumb stands in for the chip, the title follows, then your numbers side by side */
  .gcrumbs { padding-top: 12px; }
  .gcrumbs li:last-child { display: none; }
  .gcrumbs__back, .gpill { min-height: 44px; }
  .ghead { flex-direction: column; align-items: stretch; gap: 12px; padding: 6px 0 14px; }
  .ghead__chips { display: none; }
  .ghead__stats { width: 100%; }
  /* label above value, not side by side: three pills sharing a phone's width leaves too little room for a label
     and a value like "3 times" or "Board 3" on the same line, which is how they ended up overlapping */
  .gstat { flex: 1 1 0; min-width: 0; padding: 7px 12px 8px; text-align: left; }
  .gstat dd { margin: 2px 0 0; font-size: 17px; overflow: hidden; text-overflow: ellipsis; }
  .games__bar .h2 { flex-basis: 100%; }
  .search { flex: 1; } .search input { width: 100%; }
  .stage { padding: 0 10px 10px; border-radius: 22px; } .stage::before { margin: 0 -10px; border-radius: 22px 22px 0 0; } .deck__grille { width: 56px; }
  .band__row { justify-content: flex-start; font-size: 12px; }
}
@media (max-width: 340px) {
  /* an old-size phone (the iPhone SE/5s width this site still supports): even stacked, three pills side by side
     don't leave enough room for a value like "128 times" or "Puzzle 24". Your best gets its own full-width row;
     Played and Saved, whichever is showing, share the row below with plenty of room each. */
  .ghead__stats { flex-wrap: wrap; }
  .gstat--best { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .btn, .card, .feature, .card__media img { transition: none; } .ticker__row { animation: none; } .cab__screen.is-on canvas, .deck__led, html.is-ready .hero > .wrap > div:first-child, html.is-ready .hero__logo, html.is-ready .games, html.is-ready .cab__head, html.is-ready .stage { animation: none; } }

/* ---------- PHONES: denser browsing, 44px taps, and the pad beside the game when the phone is held sideways ---------- */
@media (max-width: 640px), (orientation: landscape) and (max-height: 540px) {
  /* two compact columns: a phone screen shows about six games instead of one and a half */
  .grid, .grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card { border-radius: 16px; }
  .card::before { height: 4px; }
  .card:hover { transform: none; }
  .card__body { padding: 10px 12px 12px; gap: 2px; }
  .card__name { font-size: 16px; line-height: 1.2; }
  .card__hook { display: none; }
  .card__meta { margin-top: 4px; font-size: 12px; letter-spacing: .08em; }
  .card__new { top: 8px; left: 8px; padding: 3px 8px; font-size: 12px; letter-spacing: .06em; }
  /* shelves ("New this week", "Continue playing") become a swipe row that shows a peek of the next card */
  .grid--shelf { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 44%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 10px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .grid--shelf::-webkit-scrollbar { display: none; }
  .grid--shelf > .card { scroll-snap-align: start; }
  /* touch targets of at least 44px, without moving the text */
  .chip { min-height: 44px; }
  .crumbs a, .games__hubs a, .coll__back a, .shelf__more, .foot__studio a, .cab__info a { display: inline-block; padding-block: 12px; margin-block: -12px; }
  .foot__nav { gap: 0 20px; }
  .foot__nav a, .foot__nav .linkbtn { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (orientation: landscape) and (max-height: 540px) {
  /* held sideways while playing: D-pad left, A/B right, game in the middle at full height */
  body.is-playing .stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr); }
  body.is-playing .stage::before { grid-column: 1 / -1; grid-row: 1; }
  body.is-playing .stage__top { grid-column: 1 / -1; grid-row: 2; padding: 5px 16px; }
  body.is-playing .cab__screen { grid-column: 2; grid-row: 3; min-width: 0; min-height: 0; margin-bottom: 8px; }
  body.is-playing .touchpad:not([hidden]) { display: contents; --k: clamp(40px, 12vh, 54px); }
  /* held sideways, thumbs rest on the lower half of each side, so the controls sit low rather than halfway up */
  body.is-playing .touchpad .dpad, body.is-playing .touchpad .stickzone { grid-column: 1; grid-row: 3; align-self: end; margin: 0 8px max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  body.is-playing .touchpad .abtn { grid-column: 3; grid-row: 3; align-self: end; margin: 0 max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) 8px; }
  /* sideways phones browse with more, smaller columns */
  .grid, .grid--related { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .grid--shelf { grid-template-columns: none; grid-auto-columns: 24%; }
  /* before Play: a one-line heading so the console starts higher on a short screen */
  .crumbs { padding: 10px 0 2px; }
  .cab__head { flex-direction: row; align-items: center; padding: 4px 0 12px; }
  .cab__cat, .cab__hook { display: none; }
  .gcrumbs { padding: 8px 0 2px; }
  .gcrumbs__back, .gpill { min-height: 40px; }
  .ghead { flex-direction: row; align-items: center; gap: 12px; padding: 4px 0 10px; }
  .ghead__chips, .ghead__hook { display: none; }
  .ghead__title { font-size: 26px; margin: 0; }
  .ghead__stats { width: auto; }
  .gstat { flex: 0 0 auto; padding: 4px 10px 5px; }
  .gstat dd { font-size: 19px; }
  /* the start screen puts Play at its top, so it shows even when only the top of a tall console fits (the title is already in the heading) */
  .overlay--start { justify-content: flex-start; padding-top: 22px; }
  .overlay--start .overlay__title, .overlay--start .overlay__text { display: none; }
  .cab__title { font-size: 26px; margin: 0; }
  .cab__best b { display: inline; margin-left: 8px; font-size: 22px; }
}
@media (max-width: 640px) {
  /* hero: one wide primary button, the two secondary ones side by side */
  .hero__actions { gap: 10px; }
  .hero__actions .btn--primary { flex: 1 1 100%; }
  .hero__actions .btn--ghost { flex: 1 1 0; min-width: 0; padding-inline: 12px; font-size: 15px; white-space: nowrap; }
  .hero__featured small { font-size: 12px; }
  .arcade__stats { grid-template-columns: repeat(2, 1fr); }
  .arcade__stats span { font-size: 12px; }
}

/* share card: the image the Share button makes, shown to save when the browser can't share images directly */
.sharebox { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; background: rgba(20, 16, 12, .72); }
.sharebox[hidden] { display: none; }
.sharebox__panel { display: flex; flex-direction: column; gap: 12px; width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 18px; background: var(--panel); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.sharebox__title { margin: 0; font-family: var(--display); font-weight: 800; font-size: 20px; }
.sharebox__img { display: block; width: 100%; height: auto; max-height: 56dvh; object-fit: contain; border-radius: 12px; border: 1px solid var(--line); background: var(--sunken); }
.sharebox__hint { margin: 0; font-size: 14px; color: var(--muted); }
.sharebox__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sharebox__actions .btn { flex: 1 1 auto; min-height: 44px; }

/* button ripple: shell.js adds a <span class="ripple"> on press. It had no styles, so the empty span joined the button's flex row, widened it by the gap
   and shifted the layout under the pointer — the release then landed beside the button and the click was lost. Taken out of the flow here. */
.btn, .chip { position: relative; overflow: hidden; }
.ripple { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: currentColor; opacity: .22; pointer-events: none; transform: scale(0); animation: ripple .6s var(--ease) forwards; }
@keyframes ripple { to { transform: scale(14); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ripple { display: none; } }

/* title bar: a long game name ends in "…" instead of being chopped mid-letter */
.stage__marquee .m-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage__marquee .m-score { flex: 0 0 auto; }
@media (max-width: 640px), (orientation: landscape) and (max-height: 540px) {
  /* phones while playing, upright or sideways: smaller keys, so the bar stays one slim row */
  body.is-playing .stage__top { gap: 6px; padding: 6px 10px; }
  body.is-playing .stage__marquee { font-size: 14px; letter-spacing: .02em; }
  body.is-playing .gbar { gap: 5px; }
  body.is-playing .gbtn { min-height: 34px; padding: 5px 10px; font-size: 12px; letter-spacing: 0; }
  body.is-playing .gseg__b { min-height: 30px; padding: 3px 9px; font-size: 12px; }
}
@media (max-width: 640px) {
  /* held upright: the name is already on the page, Restart waits on the pause screen and play mode already fills the phone,
     so the bar keeps the live score, Pause, Sound, the pad switch and Exit. Before a game starts, the greyed-out keys step aside. */
  body.is-playing .stage__marquee .m-name, body.is-playing #btnRestart, body.is-playing #btnFull { display: none; }
  body:not(.is-playing) .gbtn:disabled { display: none; }
}
@media (max-width: 380px) {
  /* the smallest phones (320px wide): tighter keys so a joystick game's Pause, Sound, Pad | Stick | Hide and Exit still share one row with the score */
  body.is-playing .stage__top { gap: 4px; padding: 6px; }
  body.is-playing .gbar { gap: 4px; }
  body.is-playing .gbtn { padding: 5px 7px; font-size: 11.5px; }
  body.is-playing .gseg__b { padding: 3px 6px; font-size: 11.5px; }
  body.is-playing .stage__marquee { font-size: 13px; }
}

/* ---------- welcome splash: new visitors, or back after 24 hours away (base.html's head script adds html.rw-splash) ----------
   A little console powers on, the wordmark rises, the stripe draws, then the whole panel lifts like a shutter.
   The exit is pure CSS, so it always ends even if shell.js never runs; shell.js only adds tap/key to skip. */
.splash { display: none; }
html.rw-splash .splash { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: var(--ground); cursor: pointer; animation: splashOut .6s cubic-bezier(.7, 0, .25, 1) 2.5s forwards; }
html.rw-splash .splash.is-out { animation: splashOut .45s cubic-bezier(.7, 0, .25, 1) forwards; }
.splash__edge { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; }
.splash__inner { display: grid; justify-items: center; gap: 14px; padding: 24px; text-align: center; }
.splash__tv { padding: 9px; border-radius: 34px; background: var(--cabinet); box-shadow: var(--shadow); animation: splashPop .55s cubic-bezier(.3, 1.45, .5, 1) .05s both; }
.splash__badge { width: clamp(108px, 28vw, 140px); aspect-ratio: 1; border-radius: 26px; background: #0F0F15 url(/assets/img/brand/splash-badge.jpg) center / cover; animation: splashOn .65s var(--ease) .4s both; }
.splash__word { display: flex; margin: 8px 0 0; font: 800 clamp(42px, 12vw, 70px)/1 var(--display); letter-spacing: -.035em; color: var(--ink); }
.splash__word span { display: inline-block; animation: splashLetter .5s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(.75s + var(--i) * 45ms); }
.splash__word span:nth-child(n+6) { color: var(--orange-deep); }
.splash__stripes { display: flex; width: clamp(180px, 48vw, 260px); height: 8px; border-radius: 999px; overflow: hidden; }
.splash__stripes i { flex: 1; transform-origin: left; animation: splashBand .3s var(--ease) both; }
.splash__stripes i:nth-child(1) { background: var(--orange); animation-delay: 1.2s; }
.splash__stripes i:nth-child(2) { background: var(--mustard); animation-delay: 1.28s; }
.splash__stripes i:nth-child(3) { background: var(--teal); animation-delay: 1.36s; }
.splash__stripes i:nth-child(4) { background: var(--ink); animation-delay: 1.44s; }
.splash__tag { margin: 0; font: 600 15px/1.4 var(--body); color: var(--muted); animation: splashRise .45s var(--ease) 1.55s both; }
.splash__skip { position: absolute; left: 0; right: 0; bottom: max(26px, calc(env(safe-area-inset-bottom) + 14px)); margin: 0; text-align: center; font: 700 11px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); animation: splashRise .4s var(--ease) 1.1s both; }
@keyframes splashPop { from { transform: translateY(18px) scale(.7); opacity: 0; } }
@keyframes splashOn { 0% { clip-path: inset(50% 50% round 26px); } 40% { clip-path: inset(48.5% 0 round 26px); } 100% { clip-path: inset(0 round 26px); } }
@keyframes splashLetter { from { transform: translateY(.55em); opacity: 0; } }
@keyframes splashBand { from { transform: scaleX(0); } }
@keyframes splashRise { from { transform: translateY(8px); opacity: 0; } }
@keyframes splashOut { to { transform: translateY(-100%); visibility: hidden; } }
@keyframes splashFade { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  html.rw-splash .splash { animation: splashFade .3s ease 1.4s forwards; }
  html.rw-splash .splash.is-out { animation: splashFade .2s ease forwards; }
  .splash *, .splash__word span { animation: none !important; }
}
.splash__skip-key { display: none; }
@media (hover: hover) and (pointer: fine) { .splash__skip-touch { display: none; } .splash__skip-key { display: inline; } }

/* laptops: an upright game's screen is capped by the window height, so Play (and the whole screen after a short scroll) fits without hunting.
   Phones keep the width-led layout above; sideways phones (under 560px tall) keep their compact rules. */
@media (min-width: 641px) and (min-height: 560px) {
  .page-game--portrait .stage { max-width: max(336px, min(560px, calc((100vh - 282px) / 1.5 + 36px))); }
}
/* iPhone "Add to Home Screen" steps */
.installbox__steps { margin: 4px 0 8px; padding-left: 22px; text-align: left; line-height: 1.5; }
.installbox__steps li + li { margin-top: 8px; }
/* links sitting inside a sentence are underlined, not told apart by colour alone */
.cab__about p a, .prose p a, .prose li a, .coll__copy p a { text-decoration: underline; text-underline-offset: 3px; }
/* game tips + activity "ways to use it" / questions */
.tips { margin: 0; padding-left: 1.2em; }
.tips li { margin: .45em 0; }
.cab__faq h3 { margin: 1.1em 0 .3em; }
.cab__faq p { margin: 0; }

/* ---------- home hero: channel console, flip-digit year, poppable shapes (asked for 2026-09-11: "more fun, animations and effects") ---------- */
.hero { position: relative; overflow: hidden; }
.hero__grid { position: relative; z-index: 1; }
.hero__type, .hero__line { display: block; }
.hero__line { white-space: nowrap; }
.hero__type .ch { display: inline-block; transition: transform .35s var(--ease), color .2s; }
.hero__type .ch--sp { width: .22em; }
html.is-ready .hero__type .ch { animation: heroLetter .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms + 120ms); }
@media (hover: hover) { .hero__type .ch:not(.ch--sp):not(.flap):hover { transform: translateY(-.12em) rotate(-6deg); color: var(--orange-deep); } }
@keyframes heroLetter { from { transform: translateY(.55em) rotate(8deg); opacity: 0; } }
.flap { color: var(--orange-deep); }
.flap b { display: inline-block; min-width: .56em; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.flap b.is-flip { animation: flap .14s ease-out; }
@keyframes flap { from { transform: perspective(300px) rotateX(-85deg); opacity: .35; } }
.hero__pop { display: inline-flex; align-items: center; gap: 6px; margin: 18px 0 0; padding: 6px 14px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--muted); }
.hero__pop[hidden] { display: none; }
.hero__pop b { font-family: var(--display); font-weight: 800; color: var(--orange-deep); font-size: 15px; }
.hero__pop.is-bump { animation: popBump .3s var(--ease); }
@keyframes popBump { 50% { transform: scale(1.08); } }

/* the console */
.tv { position: relative; width: 100%; max-width: 560px; margin: 34px auto 0; --knob: 0deg; }
html.is-ready .tv { animation: tvIn .8s var(--ease) .1s both; }
@keyframes tvIn { from { transform: translateY(28px) rotate(-2deg); opacity: 0; } }
.tv__antenna { position: absolute; left: 50%; top: -40px; width: 0; height: 46px; pointer-events: none; }
.tv__antenna i { position: absolute; bottom: 0; left: -1.5px; width: 3px; height: 50px; border-radius: 3px; background: var(--cabinet); transform-origin: 50% 100%; transform: rotate(var(--a)); }
.tv__antenna i:first-child { --a: -30deg; } .tv__antenna i:last-child { --a: 26deg; height: 42px; }
.tv__antenna i::after { content: ""; position: absolute; top: -5px; left: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); }
.tv__antenna i:last-child::after { background: var(--teal); }
html.is-ready .tv__antenna i { animation: antenna 3.4s ease-in-out infinite; }
html.is-ready .tv__antenna i:last-child { animation-delay: -1.2s; }
@keyframes antenna { 50% { transform: rotate(calc(var(--a) + 6deg)); } }
.tv__case { position: relative; background: var(--cabinet); border: 1px solid #1A1612; border-radius: 30px; padding: 20px 20px 12px; box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .06); transform: perspective(1100px) rotateX(calc(var(--py, 0) * -3deg)) rotateY(calc(var(--px, 0) * 4deg)); transition: transform .5s var(--ease); }
.tv__case::before { content: ""; position: absolute; left: 30px; right: 30px; top: 0; height: 7px; border-radius: 0 0 6px 6px; background: linear-gradient(90deg, var(--orange) 0 25%, var(--mustard) 25% 50%, var(--teal) 50% 75%, var(--cream) 75%); }
.tv__screen { position: relative; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; background: #0B0A12; isolation: isolate; touch-action: pan-y; }
.tv__screen::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 6px #141110, inset 0 0 0 7px #3A322B, inset 0 0 70px rgba(0, 0, 0, .5); }
.tv__screen:focus-visible { outline-offset: 5px; border-radius: 24px; }
html.is-ready .tv__screen { animation: tvOn .75s cubic-bezier(.2, .8, .2, 1) .35s both; }
@keyframes tvOn { 0% { clip-path: inset(49.4% 50% round 24px); } 40% { clip-path: inset(49% 0 round 24px); } 100% { clip-path: inset(0 round 24px); } }
.tv__slide { position: absolute; inset: 0; display: block; visibility: hidden; color: var(--cream); }
.tv__slide.is-on { visibility: visible; }
.tv__slide:hover { text-decoration: none; }
.tv__slide:focus-visible { outline: 3px solid var(--mustard); outline-offset: -10px; border-radius: 22px; }
.tv__slide img { width: 100%; height: 100%; object-fit: cover; transform-origin: var(--ox, 50%) 42%; }
.tv__slide:nth-child(2n) img { --ox: 28%; } .tv__slide:nth-child(3n) img { --ox: 72%; }
html.is-ready .tv__slide.is-on img { animation: tvPan 7s ease-out both; }
@keyframes tvPan { from { transform: scale(1.02); } to { transform: scale(1.13); } }
.tv__label { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 46px 24px 20px; background: linear-gradient(to top, rgba(20, 17, 15, .92), rgba(20, 17, 15, 0)); }
.tv__label small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--mustard); }
.tv__label b { display: block; margin: 3px 0 2px; font-family: var(--display); font-weight: 800; font-size: clamp(22px, 3vw, 30px); line-height: 1.05; }
.tv__hook { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; color: #D8CBBA; }
.tv__slide.is-on .tv__label > * { animation: tvText .55s var(--ease) both; }
.tv__slide.is-on .tv__label > :nth-child(2) { animation-delay: .06s; } .tv__slide.is-on .tv__label > :nth-child(3) { animation-delay: .12s; }
@keyframes tvText { from { transform: translateY(12px); opacity: 0; } }
.tv__play { position: absolute; top: 18px; right: 18px; z-index: 2; padding: 8px 18px; border-radius: 999px; background: var(--cream); color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 14px; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); transition: transform .2s var(--ease); }
.tv__slide:hover .tv__play, .tv__slide:focus-visible .tv__play { transform: scale(1.08); }
.tv__osd { position: absolute; left: 20px; top: 18px; z-index: 3; margin: 0; padding: 4px 10px; border-radius: 8px; background: rgba(20, 17, 15, .6); color: var(--cream); font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: .14em; opacity: 0; pointer-events: none; }
.tv__osd b { color: var(--mustard); }
.tv__screen.is-osd .tv__osd { animation: osd 1.8s ease both; }
@keyframes osd { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
.tv__wipe { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-rows: repeat(4, 1fr); pointer-events: none; }
.tv__wipe i { transform: translateX(-101%); }
.tv__wipe i:nth-child(1) { background: var(--orange); } .tv__wipe i:nth-child(2) { background: var(--mustard); } .tv__wipe i:nth-child(3) { background: var(--teal); } .tv__wipe i:nth-child(4) { background: var(--cabinet); }
.tv__screen.is-switching .tv__wipe i { animation: tvWipe .6s cubic-bezier(.7, 0, .3, 1) both; }
.tv__screen.is-switching .tv__wipe i:nth-child(2) { animation-delay: .025s; } .tv__screen.is-switching .tv__wipe i:nth-child(3) { animation-delay: .05s; } .tv__screen.is-switching .tv__wipe i:nth-child(4) { animation-delay: .075s; }
@keyframes tvWipe { 0% { transform: translateX(-101%); } 40%, 60% { transform: translateX(0); } 100% { transform: translateX(101%); } }
.tv__reel { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; background: var(--cabinet); color: var(--cream); text-align: center; }
.tv__reel[hidden] { display: none; }
.tv__reel small { font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--mustard); }
.tv__reel b { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 5vw, 46px); line-height: 1.05; }
.tv__reel b.is-roll { animation: reelRoll .12s ease-out; }
.tv__reel.is-landed b { color: var(--mustard); animation: reelLand .55s var(--ease) both; }
@keyframes reelRoll { from { transform: translateY(-45%); opacity: .15; } }
@keyframes reelLand { 0% { transform: scale(.8); } 60% { transform: scale(1.14); } 100% { transform: scale(1); } }
.tv__panel { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px 0; }
.tv__grille { flex: 0 0 auto; width: 88px; height: 24px; border-radius: 6px; background-image: radial-gradient(circle, #0F0C0A 1.6px, transparent 1.7px); background-size: 7px 7px; }
.tv__plate { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; font-family: var(--display); font-weight: 800; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #8F8072; }
.tv__plate img { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; }
.tv__plate b { color: var(--mustard); }
.tv__knobs { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.tv__knob { position: relative; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: radial-gradient(circle at 35% 30%, #6A5C50, #2A241F 70%); box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 3px 6px rgba(0, 0, 0, .6); transform: rotate(calc(var(--knob) * -1)); transition: transform .5s var(--ease), scale .15s; }
.tv__knob--big { width: 44px; height: 44px; transform: rotate(var(--knob)); }
.tv__knob::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
.tv__knob::after { content: ""; position: absolute; left: 50%; top: 4px; width: 3px; height: 10px; margin-left: -1.5px; border-radius: 2px; background: var(--mustard); }
.tv__knob:active { scale: .9; }
.tv__knob:focus-visible { border-radius: 50%; }
.tv__led { width: 8px; height: 8px; border-radius: 50%; background: #FF5C3B; animation: led 2.4s ease-in-out infinite; }
.tv__dots { display: flex; justify-content: center; margin-top: 10px; }
.tv__dot { position: relative; width: 34px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; }
.tv__dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 999px; background: var(--line-2); transition: width .35s var(--ease), margin .35s var(--ease), background .35s; }
.tv__dot.is-on::before { width: 26px; margin-left: -13px; background: var(--orange-deep); }
.tv__dot:focus-visible { outline-offset: -4px; }

/* the poppable shapes: matte stripe-colour toys that float in the margins of the hero */
.hero__toys { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.toy { position: absolute; left: var(--x); top: var(--y); width: calc(34px * var(--s, 1)); height: calc(34px * var(--s, 1)); pointer-events: auto; cursor: pointer; translate: calc(var(--px, 0) * var(--z, 10) * 1px) calc(var(--py, 0) * var(--z, 10) * 1px); transition: translate .7s var(--ease), scale .2s var(--ease); }
.toy::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--c, var(--orange)); box-shadow: 0 6px 14px rgba(60, 40, 20, .18); animation: toyFloat var(--d, 8s) ease-in-out infinite; }
@media (hover: hover) { .toy:hover { scale: 1.18; } }
.toy--square::before { border-radius: 10px; }
.toy--ring::before { background: none; border: 7px solid var(--c); }
.toy--half::before { inset: 22% 0; border-radius: 999px 999px 4px 4px; }
.toy--plus::before { border-radius: 0; box-shadow: none; background: linear-gradient(var(--c), var(--c)) center / 100% 32% no-repeat, linear-gradient(var(--c), var(--c)) center / 32% 100% no-repeat; }
.toy--die::before { border-radius: 10px; border: 1px solid var(--line); background: var(--panel) radial-gradient(circle, var(--ink) 3px, transparent 3.5px) 0 0 / 50% 50%; }
.toy--pill { width: calc(64px * var(--s, 1)); height: calc(22px * var(--s, 1)); }
.toy--pill::before { border-radius: 999px; background: linear-gradient(90deg, var(--orange) 0 25%, var(--mustard) 25% 50%, var(--teal) 50% 75%, var(--ink) 75%); }
@keyframes toyFloat { 0%, 100% { transform: translateY(0) rotate(var(--r0, 0deg)); } 50% { transform: translateY(-14px) rotate(var(--r1, 18deg)); } }
.toy.is-popped { pointer-events: none; }
.toy.is-popped::before { animation: toyPop .35s var(--ease) forwards; }
.toy.is-back::before { animation: toyBack .55s var(--ease) both; }
@keyframes toyPop { 40% { transform: scale(1.4); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
@keyframes toyBack { from { transform: scale(0); } 70% { transform: scale(1.2); } }
.toy-burst { position: absolute; width: 0; height: 0; z-index: 3; pointer-events: none; }
.toy-burst i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 2px; background: var(--c); transform: rotate(var(--a)); animation: burst .7s var(--ease) forwards; }
.toy-burst b { position: absolute; left: 0; top: -12px; transform: translateX(-50%); font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--ink); white-space: nowrap; animation: burstText .9s var(--ease) forwards; }
@keyframes burst { to { transform: rotate(var(--a)) translateY(-48px) scale(.3); opacity: 0; } }
@keyframes burstText { to { transform: translate(-50%, -36px); opacity: 0; } }

/* phones and small tablets: headline, then the console, then the words and buttons */
@media (max-width: 900px) {
  .hero__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero__copy { display: contents; }
  .hero__copy > .eyebrow { order: 1; } .hero__title { order: 2; margin-bottom: 0; } .tv { order: 3; margin: 56px auto 28px; } .hero__sub { order: 4; } .hero__actions { order: 5; } .hero__facts { order: 6; } .hero__pop { order: 7; align-self: flex-start; }
  .toy { width: calc(24px * var(--s, 1)); height: calc(24px * var(--s, 1)); }
  .toy--pill { width: calc(46px * var(--s, 1)); height: calc(16px * var(--s, 1)); }
  .toy--ring::before { border-width: 5px; }
  .hero__toys .toy:nth-child(n+7) { display: none; }
  .toy:nth-child(1) { --x: 5% !important; --y: 1.2% !important; } .toy:nth-child(2) { --x: 46% !important; --y: .8% !important; } .toy:nth-child(3) { --x: 86% !important; --y: 2.2% !important; }
  .toy:nth-child(4) { --x: 80% !important; --y: 11% !important; } .toy:nth-child(5) { --x: 90% !important; --y: 19% !important; } .toy:nth-child(6) { --x: 72% !important; --y: 97% !important; }
}
@media (max-width: 420px) {
  .tv__case { padding: 14px 14px 10px; border-radius: 24px; }
  .tv__screen { border-radius: 18px; }
  .tv__label { padding: 36px 16px 14px; } .tv__hook { font-size: 13px; }
  .tv__play { top: 12px; right: 12px; padding: 6px 14px; font-size: 13px; } .tv__osd { left: 14px; top: 12px; }
  .tv__grille { width: 44px; } .tv__plate { font-size: 10px; letter-spacing: .12em; }
  .tv__knob { width: 34px; height: 34px; } .tv__knob--big { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  html.is-ready .hero__type .ch, html.is-ready .tv, html.is-ready .tv__screen, html.is-ready .tv__slide.is-on img, .tv__slide.is-on .tv__label > *, html.is-ready .tv__antenna i, .tv__led, .toy::before, .flap b.is-flip { animation: none !important; }
  .tv__case, .toy, .tv__knob, .hero__type .ch { transition: none; }
  .tv__case { transform: none; } .toy { translate: none; }
}

/* narrow consoles: the plate keeps the badge and "Model 77" so it never gets cut off */
@media (max-width: 480px) { .tv__brand { display: none; } .tv__plate { gap: 6px; } }


/* the shared furniture every activity uses: the strip of numbers, the spring pop, the paper burst */
.astats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
/* wide enough that four of them cannot squeeze onto one phone row: they wrap two-by-two instead of
   shrinking until the words are cut off, which is what a squeezed row does */
.astat { flex: 1 1 122px; min-width: 122px; padding: 8px 14px 9px; border-radius: var(--r); background: rgba(244,235,221,.06); border: 1px solid rgba(244,235,221,.12); }
.astat__k { display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(244,235,221,.55); white-space: nowrap; }
.astat__v { display: block; margin-top: 2px; font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.1; color: var(--cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.astat--live { background: rgba(227,167,47,.14); border-color: rgba(227,167,47,.4); }
.astat--live .astat__v { color: var(--mustard); }
.astat--today { background: rgba(31,122,114,.18); border-color: rgba(31,122,114,.45); }
.is-pop { animation: actPop .42s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes actPop { 0% { transform: scale(.86); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
.confetti { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 60; }
.confetti i { position: absolute; width: 7px; height: 10px; border-radius: 2px; animation: actConfetti var(--d) cubic-bezier(.15, .6, .3, 1) forwards; }
@keyframes actConfetti { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--x), calc(var(--y) + 140px)) rotate(var(--r)); opacity: 0; } }
@media (max-width: 420px) { .astat { padding: 7px 10px 8px; flex-basis: 104px; min-width: 104px; } .astat__v { font-size: 17px; } .astat__k { font-size: 9px; letter-spacing: .1em; } }
@media (prefers-reduced-motion: reduce) { .is-pop { animation: none; } .confetti { display: none; } }

/* activity: beat-maker */
.beat { --cell: 32px; display: flex; flex-direction: column; gap: 16px; }
.beat__scroll { position: relative; overflow-x: auto; overscroll-behavior-x: contain; padding: 8px 2px 10px; margin: -8px -2px 0; scrollbar-color: var(--cabinet-line) transparent; }
.beat__grid { display: flex; flex-direction: column; gap: 6px; min-width: calc(60px + 16 * var(--cell) + 78px); }
.beat__row { display: flex; align-items: center; gap: 4px; }
.beat__name { flex: 0 0 56px; align-self: stretch; position: sticky; left: 0; z-index: 2; display: flex; align-items: center; background: var(--cabinet); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #CDBFAE; }
.beat__led, .beat__cell { flex: 1 1 0; min-width: var(--cell); }
.beat__led.is-bar, .beat__cell.is-bar { margin-left: 6px; }
.beat__led { height: 12px; display: grid; place-items: center; }
.beat__led::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cabinet-line); transition: background .08s; }
.beat__led.is-beat::after { background: color-mix(in srgb, var(--cabinet-line) 75%, var(--cream)); }
.beat__led.is-on::after { background: var(--mustard); }
.beat__cell { --c: var(--orange); height: clamp(40px, 4.2vw, 52px); padding: 0; border: 0; border-radius: 10px; background: var(--cabinet-2); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .3); cursor: pointer; touch-action: manipulation; transition: background .12s; }
.beat__cell.is-beat { background: color-mix(in srgb, var(--cabinet-2) 90%, var(--cream)); }
@media (hover: hover) { .beat__cell:hover { background: var(--cabinet-line); } }
.beat__cell--snare { --c: var(--mustard); } .beat__cell--hat { --c: var(--teal); } .beat__cell--clap { --c: var(--cream); } .beat__cell--bass { --c: var(--plum); } .beat__cell--bleep { --c: var(--brick); }
.beat__cell[aria-pressed="true"] { background: var(--c); }
.beat__cell.is-head { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .3), 0 0 0 2px var(--cream); }
.beat__cell.is-hit-a { animation: beatHitA .24s var(--ease); }
.beat__cell.is-hit-b { animation: beatHitB .24s var(--ease); }
@keyframes beatHitA { 35% { transform: translateY(-5px) scale(1.06); } }
@keyframes beatHitB { 35% { transform: translateY(-5px) scale(1.06); } }
.beat__swipe { display: none; margin: -8px 0 0; }
.beat__deck { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 22px; }
.beat__play { min-width: 128px; }
.beat__play.is-playing { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.beat__knob { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.beat__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.beat__out { font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--mustard); }
.beat__knob input[type="range"] { width: 100%; height: 30px; margin: 0; accent-color: var(--mustard); cursor: pointer; }
.beat__knob select { min-height: 40px; border-radius: 999px; padding: 8px 14px; border: 1px solid var(--cabinet-line); background: #1A1512; color: var(--cream); font: inherit; }
.beat__knob select:focus { outline: 2px solid var(--mustard); }
.beat__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.beat__msg { margin: 0; color: #CDBFAE; min-height: 1.5em; }
.beat__link { font-size: 14px; }
@media (max-width: 720px) {
  .beat { --cell: 40px; }
  .beat__swipe { display: block; }
  .beat__play { flex: 1 1 100%; }
  .beat__knob { min-width: 0; flex: 1 1 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .beat__cell, .beat__led::after { transition: none; }
  .beat__cell.is-hit-a, .beat__cell.is-hit-b { animation: none; }
}


/* activity: doodle-pad */
.doodle { display: grid; gap: 18px; }
.doodle__pad { position: relative; border-radius: var(--r); overflow: hidden; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.doodle__cv { display: block; width: 100%; aspect-ratio: 4 / 3; touch-action: none; cursor: crosshair; }
.doodle__pad.is-mirror::after { content: ""; position: absolute; top: 12px; bottom: 12px; left: 50%; border-left: 2px dashed var(--line-2); pointer-events: none; }
.doodle__bar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 26px; }
.doodle__group { display: flex; flex-direction: column; gap: 8px; }
.doodle__row { display: flex; flex-wrap: wrap; gap: 8px; }
.doodle .btn[aria-pressed="false"] { text-decoration: none; color: var(--cream); }
.doodle .btn[aria-pressed="true"] { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.doodle .btn:disabled { opacity: .45; cursor: default; transform: none; }
.doodle .doodle__clear.is-armed { background: var(--orange-deep); border-color: var(--orange-deep); color: var(--cream); }
.doodle__size { width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 1.5px solid var(--cabinet-line); background: var(--cabinet-2); display: grid; place-items: center; cursor: pointer; }
.doodle__size i { width: var(--d); height: var(--d); border-radius: 50%; background: var(--cream); }
.doodle__size[aria-pressed="true"] { border-color: var(--mustard); box-shadow: 0 0 0 2px var(--mustard); }
.doodle__swatches { display: grid; grid-template-columns: repeat(6, 36px); gap: 8px; }
.doodle__sw { width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 2px solid var(--cabinet-line); background: var(--c); cursor: pointer; }
.doodle__sw[aria-pressed="true"] { border-color: var(--cabinet); box-shadow: 0 0 0 3px var(--cream); }
.doodle__save { align-self: flex-start; }
.doodle__msg { flex-basis: 100%; margin: 0; color: #CDBFAE; min-height: 1.5em; }
@media (min-width: 960px) {
  .doodle { grid-template-columns: minmax(0, 1fr) 256px; align-items: start; }
  .doodle__bar { flex-direction: column; flex-wrap: nowrap; gap: 18px; }
  .doodle__save { align-self: stretch; }
}
@media (max-width: 420px) {
  .doodle__swatches { grid-template-columns: repeat(6, minmax(0, 36px)); gap: 6px; }
  .doodle__bar { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .doodle .btn { transition: none; }
}


/* activity: name-generator */
.ng { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.ng__main { min-width: 0; }
.ng__modes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.ng__mode { min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--cabinet-line); background: transparent; color: var(--line-2); font-family: var(--display); font-weight: 700; font-size: 14px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.ng__mode:hover { color: var(--cream); border-color: var(--cream); }
.ng__mode[aria-pressed="true"] { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.ng__stage { display: flex; flex-direction: column; justify-content: center; min-height: 190px; padding: 24px clamp(16px, 3vw, 28px); border-radius: var(--r); background: var(--cabinet-2); text-align: center; }
.ng__kind { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mustard); }
.ng__name { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(30px, 6vw, 56px); line-height: 1.08; letter-spacing: -.02em; color: var(--cream); font-variation-settings: "opsz" 96; overflow-wrap: anywhere; cursor: pointer; perspective: 600px; -webkit-user-select: text; user-select: text; }
.ng__w { display: inline-block; white-space: nowrap; }
.ng__w.is-locked { box-shadow: inset 0 -.12em 0 var(--mustard); }
.ng__l { display: inline-block; }
.ng__l.is-flip { animation: ngFlip .5s cubic-bezier(.3, 1.3, .5, 1) both; transform-origin: 50% 60%; }
@keyframes ngFlip { 0% { transform: rotateX(90deg); opacity: 0; } 55% { transform: rotateX(-18deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
.ng__locks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ng__lock { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 44px; padding: 6px 14px; border-radius: 999px; border: 1.5px dashed var(--cabinet-line); background: transparent; color: var(--line-2); font: inherit; font-size: 14px; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.ng__lock b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--display); font-weight: 700; color: var(--cream); }
.ng__lockstate { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ng__lock:hover { border-color: var(--cream); color: var(--cream); }
.ng__lock[aria-pressed="true"] { background: var(--mustard); border: 1.5px solid var(--mustard); color: var(--ink); }
.ng__lock[aria-pressed="true"] b { color: var(--ink); }
.ng__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ng__actions .btn--primary { flex: 1 1 180px; }
.ng__actions .btn:not(.btn--primary) { flex: 1 1 90px; }
.act__box .ng__save.is-saved { background: var(--teal-deep); border-color: var(--teal); color: var(--cream); }
.ng__status { margin: 10px 0 0; min-height: 1.5em; font-size: 14px; font-weight: 600; color: var(--line-2); }
.ng__side { min-width: 0; padding: 18px 18px 14px; border-radius: var(--r); border: 1px solid var(--cabinet-line); }
.ng__favh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 10px; font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--cream); font-variation-settings: "opsz" 24; }
.ng__favcount { font-family: var(--body); font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--line-2); }
.ng__favs { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; }
.ng__fav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--cabinet-line); }
.ng__fav:first-child { border-top: 0; }
.ng__favtext { display: flex; flex-direction: column; min-width: 0; }
.ng__favname { font-family: var(--display); font-weight: 700; font-size: 16px; line-height: 1.25; color: var(--cream); overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; }
.ng__favkind { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.ng__rm { flex: 0 0 auto; min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--cabinet-line); background: transparent; color: var(--line-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ng__rm:hover { border-color: var(--orange); color: var(--cream); }
.ng__favempty { margin: 0; font-size: 14px; color: var(--line-2); }
@media (max-width: 720px) { .ng { grid-template-columns: 1fr; gap: 20px; } }
@media (max-width: 480px) { .ng__modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .ng__mode { padding: 6px 4px; font-size: 13px; min-height: 44px; } .ng__stage { min-height: 160px; } .ng__lock { padding: 6px 10px; } }
@media (prefers-reduced-motion: reduce) { .ng__l.is-flip { animation: none; } .ng__mode, .ng__lock { transition: none; } }


/* activity: team-picker */
.tp { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 28px; align-items: start; }
.tp__input { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tp__ta { min-height: 190px; resize: vertical; line-height: 1.45; }
.tp__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-top: -2px; }
.tp__count { margin: 0; font-size: 13px; font-weight: 600; color: var(--line-2); }
.tp__count.is-over { color: var(--mustard); }
.tp__links { display: flex; gap: 14px; margin: 0; }
.tp__link { background: none; border: 0; padding: 6px 0; color: var(--mustard); font: inherit; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tp__link:hover { color: var(--cream); }
.tp__mode { border: 0; margin: 6px 0 0; padding: 0; min-width: 0; }
.tp__mode legend { padding: 0; margin-bottom: 8px; }
.tp__segs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 999px; background: var(--cabinet-2); border: 1px solid var(--cabinet-line); }
.tp__seg { position: relative; display: grid; place-items: center; min-height: 40px; padding: 6px 10px; border-radius: 999px; font-family: var(--display); font-weight: 700; font-size: 14px; line-height: 1.15; text-align: center; color: var(--line-2); cursor: pointer; transition: background .2s, color .2s; }
.tp__seg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.tp__seg:hover { color: var(--cream); }
.tp__seg:has(input:checked) { background: var(--orange-deep); color: var(--cream); }
.tp__seg:has(input:focus-visible) { outline: 3px solid var(--mustard); outline-offset: 2px; }
.tp__num { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.tp__stepper { display: flex; align-items: center; gap: 6px; }
.tp__step { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--cabinet-line); background: var(--cabinet-2); color: var(--cream); font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; cursor: pointer; }
.tp__step:hover { border-color: var(--cream); }
.tp__n { width: 64px; min-height: 44px; padding: 8px 6px; text-align: center; font-family: var(--display); font-weight: 800; font-size: 18px; -moz-appearance: textfield; }
.tp__n::-webkit-inner-spin-button, .tp__n::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tp__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.tp__actions .btn { flex: 1 1 auto; }
.tp__out { min-width: 0; }
.tp__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 38px; margin-bottom: 10px; }
.tp__summary { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--line-2); }
.tp__tools { display: flex; gap: 8px; margin-left: auto; }
.tp__tools .btn[hidden] { display: none; }
.tp__picked { margin: 0 0 12px; font-family: var(--display); font-weight: 800; font-size: clamp(22px, 3.6vw, 30px); line-height: 1.15; color: var(--mustard); overflow-wrap: anywhere; }
.tp__picked:empty { display: none; }
.tp__empty { margin: 0; padding: 36px 24px; border: 2px dashed var(--cabinet-line); border-radius: var(--r); text-align: center; color: var(--line-2); }
.tp__teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.tp__team { min-width: 0; padding: 18px 12px 12px; border-radius: var(--r); background: var(--cabinet-2); box-shadow: inset 0 6px 0 var(--tc, var(--teal)); }
.tp__thead { padding: 0 4px 8px; margin-bottom: 6px; border-bottom: 1px solid var(--cabinet-line); }
.tp__tname { margin: 0; font-family: var(--display); font-weight: 800; font-size: 17px; line-height: 1.2; letter-spacing: -.01em; color: var(--cream); font-variation-settings: "opsz" 24; }
.tp__tcount { display: block; margin-top: 2px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--line-2); }
.tp__members, .tp__pool { list-style: none; margin: 0; padding: 0; -webkit-user-select: text; user-select: text; }
.tp__members li { padding: 4px 8px; border-radius: 8px; font-weight: 600; font-size: 15px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--cream); }
.tp__members li.is-spinning { color: var(--faint); animation: tpRoll .12s linear infinite; }
.tp__members li.is-landed { animation: tpLand .38s var(--ease); }
.tp__pool { display: flex; flex-wrap: wrap; gap: 8px; }
.tp__chip { max-width: 100%; padding: 7px 14px; border-radius: 999px; background: var(--cabinet-2); border: 1px solid var(--cabinet-line); font-weight: 600; font-size: 15px; color: var(--cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp__members li.is-hl, .tp__chip.is-hl { background: var(--mustard); border-color: var(--mustard); color: var(--ink); }
.tp__members li.is-picked, .tp__chip.is-picked { background: var(--orange-deep); border-color: var(--orange-deep); color: var(--cream); animation: tpPop .45s var(--ease); }
@keyframes tpRoll { 0% { transform: translateY(-3px); } 50% { transform: translateY(3px); } 100% { transform: translateY(-3px); } }
@keyframes tpLand { from { transform: translateY(-14px) scale(1.06); opacity: .2; } }
@keyframes tpPop { 40% { transform: scale(1.08); } }
@media (max-width: 760px) { .tp { grid-template-columns: 1fr; gap: 22px; } }
@media (max-width: 420px) { .tp__teams { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .tp__team { padding: 16px 8px 8px; } .tp__tname { font-size: 15px; } .tp__members li { font-size: 14px; padding: 3px 6px; } .tp__seg { font-size: 13px; padding: 6px; } }
@media (prefers-reduced-motion: reduce) { .tp__members li.is-spinning, .tp__members li.is-landed, .tp__members li.is-picked, .tp__chip.is-picked { animation: none; } .tp__seg { transition: none; } }

/* ---------- the New pill, the new-games showcase (2026-09-17) ---------- */
.pill-new, .gchip--new { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--orange-deep); color: var(--cream); font-family: var(--display); font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; border: 0; }
.pill-new::before, .gchip--new::before { content: ""; flex: 0 0 auto; width: 14px; height: 6px; border-radius: 2px; background: linear-gradient(90deg, var(--mustard) 0 50%, var(--cream) 50%); }
.card__new.pill-new { top: 12px; left: 12px; box-shadow: 0 2px 0 rgba(30, 26, 22, .25), var(--shadow-sm); }
.gchip--daily { --tint: var(--teal); --tint-text: var(--teal-deep); }
.gchip--daily::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--teal); }
a.gchip:hover { text-decoration: none; border-color: var(--teal); }
.newbox { padding: 48px 0 0; }
.newbox__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.newlead { position: relative; display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: var(--cabinet); color: var(--cream); box-shadow: var(--shadow); border: 1px solid var(--cabinet); transition: transform .3s var(--ease), box-shadow .3s; }
.newlead::before { content: ""; display: block; height: 8px; background: linear-gradient(90deg, var(--orange) 0 25%, var(--mustard) 25% 50%, var(--teal) 50% 75%, var(--cream) 75%); }
.newlead:hover { text-decoration: none; transform: translateY(-4px); }
.newlead__media { display: block; overflow: hidden; background: #0B0A12; }
.newlead__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s var(--ease); }
.newlead:hover .newlead__media img { transform: scale(1.04); }
.newlead__body { display: flex; flex-direction: column; gap: 6px; padding: 18px 22px 22px; }
.newlead__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.newlead .gchip { background: var(--cabinet-2); border-color: var(--cabinet-line); color: var(--cream); }
.newlead__name { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 3.4vw, 40px); line-height: 1; letter-spacing: -.03em; font-variation-settings: "opsz" 96; }
.newlead__hook { font-weight: 700; color: var(--mustard); }
.newlead__desc { color: #CDBFAE; font-size: 15px; }
.newlead__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 10px; }
.newlead__date { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #B5A797; }
.newbox__rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.newbox__rail .card__hook { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; }
.newbox__rail .card__name { font-size: 17px; }
.newlist { padding-left: 20px; } .newlist li { margin: 4px 0; }
@media (max-width: 900px) { .newbox__grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .newbox__rail { gap: 12px; } .newbox__rail .card__hook { display: none; } .newlead__body { padding: 16px 16px 18px; } }
@media (prefers-reduced-motion: reduce) { .newlead, .newlead__media img { transition: none; } .newlead:hover { transform: none; } .newlead:hover .newlead__media img { transform: none; } }

/* ---------- tokens and daily quests ---------- */
.tokens { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; color: var(--muted); }
.tokens b { font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--ink); }
.tokens__coin { display: inline-block; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: var(--mustard); box-shadow: inset 0 0 0 3px #C88E1E, inset 0 -2px 0 3px rgba(30, 26, 22, .18); vertical-align: -3px; }
.quests { padding: 40px 0 0; }
.quests__box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px 20px; box-shadow: var(--shadow-sm); }
.quests__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; margin-bottom: 14px; }
.quests__count { margin: 0; font-weight: 600; color: var(--muted); } .quests__count b { color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 18px; }
.tickets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ticket { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 96px; padding: 14px 16px 12px 38px; border-radius: 14px; background: #FBF1DC; border: 1.5px dashed var(--line-2); }
.ticket__hole { position: absolute; left: 12px; top: 16px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--panel); }
.ticket__text { font-family: var(--display); font-weight: 800; font-size: 16px; line-height: 1.2; font-variation-settings: "opsz" 24; }
.ticket__prog { font-size: 12px; font-weight: 700; color: var(--muted); }
.ticket__pay { margin-top: auto; align-self: flex-start; padding: 2px 9px; border-radius: 999px; background: var(--sunken); font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--mustard-deep); }
.ticket.is-done { border-style: solid; border-color: var(--teal); background: #E6F0EC; }
.ticket.is-done .ticket__hole { background: var(--ink); border-color: var(--ink); box-shadow: 0 0 0 3px #E6F0EC, 0 0 0 5px var(--teal); }
.ticket.is-done .ticket__text { color: var(--teal-deep); }
.ticket.is-done .ticket__pay { background: var(--teal-deep); color: var(--cream); }
@media (max-width: 720px) { .tickets { grid-template-columns: 1fr; } .ticket { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 12px 14px 12px 38px; } .ticket__hole { top: 50%; margin-top: -7px; } .ticket__pay { margin: 0 0 0 auto; } .ticket__prog { flex-basis: 100%; order: 3; } }
.gstat--tokens dt a { color: var(--teal-deep); }
.gstat--tokens dd { display: flex; align-items: center; justify-content: flex-end; gap: 7px; color: var(--mustard-deep); }
.gstat--tokens .tokens__coin { width: 16px; height: 16px; }
.overlay__tokens { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin: 2px 0 0; max-width: 44ch; font-size: 13px; color: #CDBFAE; }
.overlay__tokens b { flex-basis: 100%; font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--mustard); }
.overlay__tokens[hidden] { display: none; }

/* ---------- the Daily Board ---------- */
.dpage { padding: 28px 0 0; }
.dpage__head { margin: 18px 0 22px; }
.dpage__date { margin: 6px 0 0; font-weight: 700; color: var(--muted); }
.dboard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.dboard__top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.dboard__sum { margin: 0; flex: 1 1 200px; font-family: var(--display); font-weight: 800; font-size: 20px; font-variation-settings: "opsz" 24; }
.dbar { --done: 0; position: relative; flex: 0 0 100%; display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--sunken); }
.dbar i { flex: 1; opacity: .18; } .dbar i:nth-child(1) { background: var(--orange); } .dbar i:nth-child(2) { background: var(--mustard); } .dbar i:nth-child(3) { background: var(--teal); } .dbar i:nth-child(4) { background: var(--ink); }
.dbar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--done) * 100%); background: linear-gradient(90deg, var(--orange) 0 25%, var(--mustard) 25% 50%, var(--teal) 50% 75%, var(--ink) 75%); background-size: calc(100% / max(var(--done), .0001)) 100%; transition: width .6s var(--ease); }
.dbar.is-full i { opacity: 1; }
.dboard__list { list-style: none; margin: 0; padding: 0; }
.dboard__row + .dboard__row { border-top: 1px solid var(--line); }
.dboard__link { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 20px; color: var(--ink); }
.dboard__link:hover { text-decoration: none; background: #FBF3E3; }
.dboard__img img { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; background: var(--cabinet); }
.dboard__txt { display: flex; flex-direction: column; min-width: 0; }
.dboard__label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tint-text, var(--muted)); }
.dboard__name { font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.15; font-variation-settings: "opsz" 24; }
.dboard__hook { color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dboard__status { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.dboard__state { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; border: 1.5px solid var(--line-2); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.dboard__state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 2px solid currentColor; }
.dboard__line { font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--ink); white-space: nowrap; }
.dboard__row.is-done .dboard__state { background: var(--teal-deep); border-color: var(--teal-deep); color: var(--cream); }
.dboard__row.is-done .dboard__state::before { background: var(--cream); border-color: var(--cream); width: 9px; height: 5px; border-radius: 0; border-width: 0 0 2.5px 2.5px; background: transparent; transform: rotate(-45deg) translate(1px, -1px); }
.dboard__row.is-tried .dboard__state { border-color: var(--mustard); color: var(--mustard-deep); }
.quests--page, .shop { padding: 44px 0 0; }
.finishes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.finish { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); }
.finish.is-on { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal) inset; }
.finish b { font-family: var(--display); font-weight: 800; font-size: 17px; }
.finish small { font-size: 12px; color: var(--muted); font-weight: 600; }
.finish .btn { min-height: 38px; padding: 6px 16px; font-size: 14px; }
.finish__case { --case: #241F1B; --case-2: #2F2823; display: block; width: 100%; height: 64px; border-radius: 14px; background: var(--case); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); padding: 16px 14px 10px; }
.finish__case::before { content: ""; display: block; height: 5px; margin: -16px -14px 8px; border-radius: 14px 14px 0 0; background: linear-gradient(90deg, var(--orange) 0 25%, var(--mustard) 25% 50%, var(--teal) 50% 75%, var(--cream) 75%); }
.finish__case i { display: block; height: 30px; border-radius: 8px; background: #0B0A12; box-shadow: inset 0 0 0 3px var(--case-2); }
@media (max-width: 640px) { .dboard__link { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; padding: 12px 14px; } .dboard__img img { width: 64px; height: 48px; } .dboard__name { font-size: 17px; } .dboard__hook { display: none; } .dboard__top { padding: 14px; } .dboard__top .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .dbar::after { transition: none; } }

/* console-case finishes bought with tokens: the case and its keys change colour, cream text keeps its contrast */
.finish--walnut .finish__case, html[data-finish="walnut"] .stage { --case: #4A2F21; --case-2: #5C3C2B; --cabinet-2: #5C3C2B; --cabinet-line: #7A5641; }
.finish--teal .finish__case, html[data-finish="teal"] .stage { --case: #173B38; --case-2: #1F4B47; --cabinet-2: #1F4B47; --cabinet-line: #36635E; }
.finish--plum .finish__case, html[data-finish="plum"] .stage { --case: #3B2334; --case-2: #4B2D43; --cabinet-2: #4B2D43; --cabinet-line: #6A4760; }
.finish--brass .finish__case, html[data-finish="brass"] .stage { --case: #4F3A12; --case-2: #624919; --cabinet-2: #624919; --cabinet-line: #85692F; }
html[data-finish] .stage { background: var(--case); }
.newlead__media { aspect-ratio: 16 / 10; } .newlead__media img { height: 100%; aspect-ratio: auto; }
@media (min-width: 901px) { .newlead { position: sticky; top: 96px; } }
@media (max-width: 720px) { .ticket__hole { top: 15px; margin-top: 0; } .ticket { align-items: flex-start; } }

/* report a bug: the form every page shares (base.html #bugBox), plus the small links on the game screens */
.bugbox { z-index: 400; }
.bugbox__panel { width: min(460px, 100%); gap: 14px; margin: 0; }
.bugbox__head { display: flex; flex-direction: column; gap: 2px; }
.bugbox__where { margin: 0; font-size: 14px; color: var(--muted); }
.bugbox__where:empty { display: none; }
.bugbox__body { display: flex; flex-direction: column; gap: 6px; }
.bugbox__body[hidden], .bugbox__done[hidden] { display: none; }
.bugbox__label { font-weight: 700; font-size: 15px; color: var(--ink); padding: 0; }
.bugbox__opt { font-weight: 500; color: var(--muted); }
.bugbox__kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; border: 0; min-width: 0; }
.bugbox__kinds legend { margin-bottom: 8px; }
.bugkind { position: relative; cursor: pointer; }
.bugkind input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bugkind span { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 13px; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--panel); font-size: 14px; font-weight: 600; color: var(--ink); transition: background .15s, border-color .15s, color .15s; }
.bugkind:hover span { border-color: var(--ink); }
.bugkind input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.bugkind input:focus-visible + span { outline: 3px solid var(--mustard); outline-offset: 2px; }
.bugbox__input { width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 12px; border: 1.5px solid var(--line-2); background: #FFFDF8; color: var(--ink); font: inherit; font-size: 16px; line-height: 1.45; }
textarea.bugbox__input { resize: vertical; min-height: 104px; max-height: 40dvh; }
.bugbox__input::placeholder { color: var(--faint); }
.bugbox__input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(31, 122, 114, .2); }
.bugbox__select { appearance: none; -webkit-appearance: none; padding-right: 38px; font-weight: 600; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }
.bugbox__context { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.bugbox__context:empty { display: none; }
.bugbox__count { margin: 0 0 8px; font-size: 13px; color: var(--muted); text-align: right; }
.bugbox__hint { margin: 0; font-size: 13px; color: var(--muted); }
#bugEmailHint { margin-bottom: 4px; }
.bugbox__switch { margin-top: 4px; }
.bugbox__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.bugbox__error { margin: 4px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(198, 61, 47, .1); border: 1px solid rgba(198, 61, 47, .35); color: #8E2A20; font-size: 14px; font-weight: 600; }
.bugbox__error[hidden] { display: none; }
.bugbox__done { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 0 8px; text-align: center; outline: none; }
.bugbox__tick { position: relative; width: 56px; height: 56px; margin: 0 0 4px; border-radius: 50%; background: var(--teal); }
.bugbox__tick::after { content: ""; position: absolute; left: 20px; top: 13px; width: 13px; height: 24px; border: solid var(--cream); border-width: 0 4px 4px 0; transform: rotate(45deg); }
.bugbox__thanks { margin: 0; font-family: var(--display); font-weight: 800; font-size: 22px; }
.bugbox .sharebox__actions .btn[hidden] { display: none; }
/* the form scrolls on a short phone screen; Send and Cancel stay in reach */
.bugbox .sharebox__actions { position: sticky; bottom: -18px; margin: 0 -18px -18px; padding: 12px 18px 18px; background: var(--panel); border-top: 1px solid var(--line-2); }
.overlay__bug { margin-top: 2px; padding: 6px 10px; background: none; border: 0; color: rgba(244, 235, 221, .72); font: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.overlay__bug:hover { color: var(--cream); }
.cab__bug { margin: 10px 0 0; font-size: 14px; color: var(--muted); text-align: center; }
.cab__bug .linkbtn { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) { .bugbox { align-items: end; padding: 8px; } .bugbox__panel { max-height: calc(100dvh - 16px); } }
/* "Report bug" in the game toolbar on every game. A phone or small tablet (iPad mini) mid-game has no room for another key once the score grows
   (checked at 320 and 390px with a six-figure score), so there it steps aside: Pause, then "Found a bug? Tell us". */
@media (max-width: 900px) { body.is-playing .gbtn--bug { display: none; } }
/* phones and small tablets while playing: slimmer key sides so a joystick game's bar stays one row even at a six-figure score
   (before this it went to two rows from 12,345 at 320px and on an iPad mini, and from 123,456 at 390px) */
@media (max-width: 900px) {
  body.is-playing .gbtn { padding-left: 8px; padding-right: 8px; }
  body.is-playing .gseg__b { padding-left: 7px; padding-right: 7px; }
}
@media (max-width: 380px) {
  body.is-playing .gbtn { padding-left: 5px; padding-right: 5px; }
  body.is-playing .gseg__b { padding-left: 4px; padding-right: 4px; }
}

/* ---------- homepage, third layout (2026-09-17): search in the hero, one "Today" row, shelf doors, rails, a capped library ---------- */
.hero__actions { margin-bottom: 22px; }
.hero__search { display: flex; align-items: center; gap: 6px; max-width: 470px; margin: 0 0 22px; padding: 5px 5px 5px 18px; border-radius: 999px; background: var(--panel); border: 1.5px solid var(--line-2); box-shadow: var(--shadow-sm); transition: border-color .2s, box-shadow .2s; }
.hero__search:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(227, 167, 47, .35); }
.hero__search input { flex: 1; min-width: 0; min-height: 40px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 16px; outline: 0; }
.hero__search input::placeholder { color: var(--muted); }
.hero__go { min-height: 40px; padding: 6px 20px; border: 0; border-radius: 999px; background: var(--ink); color: var(--cream); font-family: var(--display); font-weight: 800; font-size: 15px; cursor: pointer; }
.hero__go:hover { background: var(--orange-deep); }
.hero__facts b { color: var(--ink); }

.today { padding: 48px 0 0; }
.today__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 16px; }
.today__head .eyebrow { margin: 0; }
.today__date { margin: 0; font-family: var(--display); font-weight: 800; font-size: 20px; font-variation-settings: "opsz" 24; }
.today__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.tcard { --tint: var(--orange); position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.tcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--tint); z-index: 2; }
.tcard--puzzles { --tint: var(--mustard); } .tcard--quests { --tint: var(--teal); }
.tcard__media { position: relative; display: block; overflow: hidden; background: var(--cabinet); }
.tcard__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .6s var(--ease); }
.tcard__media:hover img { transform: scale(1.04); }
.tcard__tag { position: absolute; left: 14px; bottom: 12px; padding: 4px 11px; border-radius: 999px; background: var(--cream); color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; box-shadow: var(--shadow-sm); }
.tcard__body { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 16px 20px 20px; }
.tcard__top { padding: 22px 20px 10px; }
.tcard__title { margin: 0; font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.1; letter-spacing: -.015em; font-variation-settings: "opsz" 24; }
.tcard__hook { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
.tcard__sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.tcard__sub b { color: var(--ink); }
.tcard__meta { margin: 4px 0 14px; font-size: 13px; font-weight: 600; color: var(--muted); }
.tcard__btn { align-self: flex-start; margin-top: auto; }
.tcard__more { margin-top: auto; padding: 12px 20px 18px; font-weight: 700; font-size: 14px; }
.tlist { list-style: none; margin: 0; padding: 0 10px; max-height: 330px; overflow-y: auto; scrollbar-width: thin; }
.tlist__row a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border-radius: 10px; color: var(--ink); }
.tlist__row a:hover { background: var(--sunken); text-decoration: none; }
.tlist__row + .tlist__row a { border-top: 1px solid var(--line); border-radius: 0; }
.tlist__row + .tlist__row a:hover { border-radius: 10px; }
.tlist__tick { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--panel); }
.tlist__name { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tlist__state { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.tlist__row.is-done .tlist__tick { background: var(--teal); border-color: var(--teal); box-shadow: inset 0 0 0 3px var(--panel); }
.tlist__row.is-done .tlist__state { color: var(--teal-deep); }
.tlist__row.is-tried .tlist__tick { border-color: var(--mustard); }
.tcard--quests .quests__box { padding: 0 20px; background: none; border: 0; box-shadow: none; border-radius: 0; }
.tcard--quests .tickets { grid-template-columns: 1fr; gap: 8px; }
.tcard--quests .ticket { min-height: 0; padding: 10px 12px 10px 36px; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 10px; }
.tcard--quests .ticket__hole { top: 50%; margin-top: -7px; }
.tcard--quests .ticket__text { flex: 1 1 60%; font-size: 15px; }
.tcard--quests .ticket__prog { order: 3; flex-basis: 100%; }
.tcard--quests .ticket__pay { margin: 0; align-self: center; }
.tcard--quests .quests__head { margin-bottom: 10px; }
.today .arcade { margin-top: 18px; border-radius: var(--r-lg); border: 1px solid var(--line); }
@media (max-width: 1040px) { .today__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tcard--pick { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .tcard--pick .tcard__media img { height: 100%; aspect-ratio: auto; min-height: 220px; } }
@media (max-width: 680px) { .today__grid { grid-template-columns: 1fr; } .tcard--pick { display: flex; } .tcard--pick .tcard__media img { aspect-ratio: 16 / 9; min-height: 0; } .tlist { max-height: 280px; } .today .arcade__stats { grid-template-columns: repeat(2, 1fr); } }

.shelves { padding: 56px 0 0; }
.doors { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.door { --tint: var(--teal); position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 168px; padding: 18px 20px; border-radius: var(--r-lg); overflow: hidden; background: var(--cabinet); color: var(--cream); box-shadow: var(--shadow-sm); isolation: isolate; transition: transform .3s var(--ease), box-shadow .3s; }
.door::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--tint); z-index: 3; }
.door::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--cabinet) 38%, rgba(36, 31, 27, .55) 70%, rgba(36, 31, 27, .1)); }
.door:hover { transform: translateY(-4px); box-shadow: var(--shadow); text-decoration: none; }
.door--arcade { --tint: var(--teal); } .door--puzzle { --tint: var(--mustard); } .door--action { --tint: var(--orange); } .door--board { --tint: var(--plum); } .door--learning { --tint: var(--brick); } .door--brain { --tint: var(--cream); } .door--two { --tint: var(--orange); } .door--daily { --tint: var(--mustard); }
.door__pics { position: absolute; right: -18px; top: 18px; width: 58%; height: 150px; z-index: 0; }
.door__pics img { position: absolute; width: 124px; height: 93px; object-fit: cover; border-radius: 10px; border: 2px solid rgba(244, 235, 221, .9); box-shadow: 0 8px 18px rgba(0, 0, 0, .35); transition: transform .45s var(--ease); }
.door__pics img:nth-child(1) { right: 70px; top: 44px; transform: rotate(-9deg); }
.door__pics img:nth-child(2) { right: 8px; top: 6px; transform: rotate(6deg); }
.door__pics img:nth-child(3) { right: -6px; top: 74px; transform: rotate(-3deg); }
.door:hover .door__pics img:nth-child(1) { transform: rotate(-14deg) translate(-10px, 4px); }
.door:hover .door__pics img:nth-child(2) { transform: rotate(10deg) translate(4px, -6px); }
.door:hover .door__pics img:nth-child(3) { transform: rotate(2deg) translate(6px, 6px); }
.door__txt { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 2px; max-width: 62%; }
.door__name { font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.05; letter-spacing: -.015em; font-variation-settings: "opsz" 24; }
.door__blurb { font-size: 13px; color: rgba(244, 235, 221, .74); line-height: 1.35; }
.door__count { position: absolute; left: 20px; top: 20px; z-index: 2; min-width: 34px; padding: 3px 10px; border-radius: 999px; background: rgba(244, 235, 221, .12); border: 1px solid rgba(244, 235, 221, .22); color: var(--cream); font-family: var(--display); font-weight: 800; font-size: 14px; text-align: center; }

.newbox__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.newbox__rail .card__meta { margin-top: 4px; }

.rail { padding: 56px 0 0; }
.rail__row { display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 8px 2px 16px; margin: -8px -2px 0; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.rail__row > .card { flex: 0 0 236px; scroll-snap-align: start; }
.rail__row .card__hook { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; }
.rail__row .card__name { font-size: 17px; }
.rail__row .card__body { padding: 12px 14px 14px; }
.activities.rail { padding-top: 56px; }

.games { padding-top: 56px; }
.games__bar { margin-bottom: 14px; }
.filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.filters .chips--moods { align-items: center; }
.filters__label { margin-right: 4px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.filters .chip--mood { min-height: 34px; padding: 4px 13px; font-size: 13px; }
.grid--library { grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 18px; }
.grid--library .card__body { padding: 12px 14px 14px; gap: 2px; }
.grid--library .card__name { font-size: 17px; }
.grid--library .card__hook { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; }
.grid--library .card__meta { margin-top: 6px; font-size: 10px; }
.card.is-over { display: none; }
.games__more { display: flex; justify-content: center; margin-top: 28px; }
.games__more[hidden] { display: none; }

.why { padding: 64px 0 80px; }
.why__item { padding: 22px 22px; }

@media (max-width: 640px) {
  .hero__search { margin-bottom: 18px; }
  .hero__go { padding-inline: 16px; }
  .today { padding-top: 36px; }
  .shelves, .rail, .activities.rail, .games { padding-top: 44px; }
  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .door { min-height: 128px; padding: 12px 12px 12px; }
  .door::after { background: linear-gradient(0deg, var(--cabinet) 36%, rgba(36, 31, 27, .35) 75%, rgba(36, 31, 27, .05)); }
  .door__pics { right: -26px; top: 8px; width: 100%; height: 90px; }
  .door__pics img { width: 84px; height: 63px; border-radius: 8px; }
  .door__pics img:nth-child(1) { right: 64px; top: 18px; } .door__pics img:nth-child(2) { right: 14px; top: 2px; } .door__pics img:nth-child(3) { right: 0; top: 40px; }
  .door__txt { max-width: 100%; }
  .door__name { font-size: 18px; }
  .door__blurb { font-size: 12px; }
  .door__count { left: 12px; top: 14px; font-size: 12px; padding: 2px 8px; }
  .rail__row { gap: 12px; }
  .rail__row > .card { flex-basis: 168px; }
  .rail__row .card__hook, .rail__row .card__meta { display: none; }
  .rail__row .card__name { font-size: 15px; }
  .filters .chips { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .filters .chips::-webkit-scrollbar { display: none; }
  .filters .chip { flex: 0 0 auto; }
  .grid--library .card__hook { display: none; }
  .grid--library .card__name { font-size: 15px; }
  .why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .why__item { padding: 16px 14px; } .why__item b { font-size: 15px; } .why__item p { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .door, .door__pics img, .tcard__media img { transition: none; } }
@media (max-width: 900px) { .hero__search { order: 6; } .hero__facts { order: 7; } .hero__pop { order: 8; } }
@media (max-width: 640px) { .grid--library { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
/* the tokens pill made four stat pills on a game page; on a phone they share a row only while every value fits, then wrap */
@media (max-width: 640px) { .ghead__stats { flex-wrap: wrap; } .gstat { flex: 1 1 auto; min-width: max-content; } }
/* a 320px phone: the wordmark and "About" touched; About is in the footer too */
@media (max-width: 359px) { .top__nav a[href="/about/"] { display: none; } }

/* ---------- Ko-fi (2026-09-18) ---------- */
/* A flat coffee-cup icon instead of an emoji (BRAND.md), the support box, and house rules
   for Ko-fi's own floating button so it never lands on top of a game or one of our dialogs. */
.cup { display: inline-block; width: 1.2em; height: 1.2em; flex: 0 0 auto; overflow: visible; }
.cup__body { fill: currentColor; }
.cup__handle, .cup__saucer, .cup__steam { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cup__steam { stroke-width: 1.8; opacity: .75; }
.cup__heart { fill: var(--mustard); }
.foot__kofi { display: inline-flex; align-items: center; gap: 6px; }
.foot__kofi .cup { width: 18px; height: 18px; }
.kofi { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px 22px; position: relative; overflow: hidden; margin: 8px 0 32px; padding: 24px 26px 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-sm); }
.kofi::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--orange) 0 25%, var(--mustard) 25% 50%, var(--teal) 50% 75%, var(--ink) 75%); }
.kofi__badge { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--mustard); color: var(--ink); }
.kofi__badge .cup { width: 36px; height: 36px; }
.kofi__badge .cup__heart { fill: var(--orange); }
.kofi__text b { font-family: var(--display); font-weight: 800; font-size: 20px; display: block; margin-bottom: 2px; }
.kofi__text p { margin: 0; color: var(--muted); font-size: 15px; max-width: 56ch; }
.kofi__btn { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.kofi__btn .cup { width: 22px; height: 22px; }
.kofi__btn .cup__heart { fill: var(--mustard); }
.home-kofi .kofi { margin: 12px 0 8px; }
@media (prefers-reduced-motion: no-preference) {
  .kofi__badge .cup__steam, .kofi__btn:hover .cup__steam, .foot__kofi:hover .cup__steam { stroke-dasharray: 2.6 2.6; animation: steam 1.4s linear infinite; }
  .kofi__btn:hover .cup, .kofi:hover .kofi__badge .cup { animation: cupTip .7s var(--ease); }
}
@keyframes steam { to { stroke-dashoffset: -10.4; } }
@keyframes cupTip { 30% { transform: rotate(-14deg); } 65% { transform: rotate(8deg); } }
@media (max-width: 640px) {
  .kofi { grid-template-columns: auto 1fr; padding: 22px 18px 18px; }
  .kofi__badge { width: 52px; height: 52px; } .kofi__badge .cup { width: 30px; height: 30px; }
  .kofi__btn { grid-column: 1 / -1; justify-content: center; }
}
/* The floating Support button: fixed bottom-left, so the footer keeps a lane clear for it. */
body[data-kofi] .foot { padding-bottom: 96px; }
.kofi-fab { position: fixed; z-index: 35; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 11px 20px; border-radius: 999px; background: var(--orange-deep); color: var(--cream); font-family: var(--display); font-weight: 800; font-size: 15px; box-shadow: var(--shadow); transition: transform .2s var(--ease), background .2s; }
.kofi-fab:hover { background: var(--ink); }
.kofi-fab .cup { width: 21px; height: 21px; }
.kofi-fab .cup__heart { fill: var(--mustard); }
@media (prefers-reduced-motion: no-preference) {
  .kofi-fab:hover { transform: translateY(-2px); }
  .kofi-fab:hover .cup__steam { stroke-dasharray: 2.6 2.6; animation: steam 1.4s linear infinite; }
  .kofi-fab:hover .cup { animation: cupTip .7s var(--ease); }
}
/* the game, and every dialog, matters more than a tip button */
body.is-playing .kofi-fab,
#consent:not([hidden]) ~ .kofi-fab,
#bugBox:not([hidden]) ~ .kofi-fab,
#installBox:not([hidden]) ~ .kofi-fab,
html.rw-splash .kofi-fab { display: none; }
@media (max-width: 480px) { .kofi-fab { min-height: 42px; padding: 9px 16px; font-size: 14px; } }