/* UsForge — one stylesheet for every page. One look everywhere: the forge from the title screen —
   warm near-black, ember-orange light, sparks drifting up behind the pages. */
:root {
  --bg: #0a0c11; --card: #111620; --ink: #eef2f9; --dim: #8e9ab0; --line: #222b3a; --hover: #18202d;
  --accent: #4d8cf7; --accent-ink: #06122a; --glow: rgba(77, 140, 247, .45); --glow-bg: #0c2150; --bar: #0d1118; --gold: #f2b53a;
  --radius: 10px;
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --tint-30: rgba(77, 140, 247, .30); --tint-20: rgba(77, 140, 247, .20); --tint-10: rgba(77, 140, 247, .10); --accent-edge: rgba(77, 140, 247, .55); --accent-ring: rgba(77, 140, 247, .7);
  color-scheme: dark;
}
/* light mode: the forge by day — warm paper, the same ember orange (chosen with the theme button, or Auto by the clock) */
:root[data-theme="light"] {
  --bg: #f3f6fb; --card: #ffffff; --ink: #121a2a; --dim: #5a6679; --line: #dce3ee; --hover: #e9eff8;
  --accent: #4d8cf7; --accent-ink: #06122a; --glow: rgba(77, 140, 247, .3); --glow-bg: #cfe0fd; --bar: #ffffff; --gold: #9a6400;
  --tint-30: rgba(77, 140, 247, .24); --tint-20: rgba(77, 140, 247, .15); --tint-10: rgba(77, 140, 247, .08); --accent-edge: rgba(77, 140, 247, .5); --accent-ring: rgba(77, 140, 247, .75);
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* hidden always wins over layout rules like .panel's flex */
html, body { margin: 0; }
body { background: radial-gradient(110% 55% at 50% 118%, var(--glow-bg) 0%, transparent 62%) fixed, var(--bg); transition: background-color .3s ease; color: var(--ink); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; min-height: 100vh; }
/* the faint sparks behind every page (embers.js) */
.bg-embers { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
::selection { background: var(--accent); color: var(--accent-ink); }
a { color: inherit; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1080px; margin: 0 auto; padding-inline: 20px; }

/* header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px; }
.mark { display: inline-flex; align-items: center; gap: 9px; font-weight: 650; font-size: 18px; letter-spacing: -.02em; text-decoration: none; }
.spark { width: 10px; height: 10px; background: var(--accent); border-radius: 2px; transform: rotate(45deg); box-shadow: 0 0 12px 2px var(--glow); }
.top nav { display: flex; gap: 18px; font-size: 14px; }
.top nav a { color: var(--dim); text-decoration: none; }
.top nav a:hover, .top nav a:focus-visible { color: var(--ink); }

/* intro + toolbar */
.intro { padding-block: 36px 28px; }
.intro h1 { margin: 0; font-size: clamp(30px, 5vw, 44px); font-weight: 750; letter-spacing: -.035em; line-height: 1.05; text-wrap: balance; text-shadow: 0 0 36px rgba(77, 140, 247, .22); }
.intro p { margin: 10px 0 0; color: var(--dim); max-width: 46ch; }
.tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.search { flex: 1 1 240px; max-width: 340px; font: inherit; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; outline: none; }
.search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(77, 140, 247, .18); }
.count { font: 13px var(--mono); color: var(--dim); margin-left: auto; font-variant-numeric: tabular-nums; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 99px; padding: 4px 10px; cursor: pointer; font-family: inherit; }

/* the grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px 18px; padding-bottom: 64px; }
.card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; border-radius: var(--radius); outline: none; }
.cover { aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: var(--hover); border: 1px solid var(--line); position: relative; }
.cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.cover.pixel img { image-rendering: pixelated; }
.card:hover .cover img, .card:focus-visible .cover img { transform: scale(1.035); }
.card:focus-visible .cover { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.blank { width: 100%; height: 100%; display: grid; place-items: center; font: 600 34px var(--mono); letter-spacing: -.04em; color: var(--ink); background: radial-gradient(120% 90% at 30% 20%, hsl(var(--h, 20) 70% 45% / .35), hsl(var(--h, 20) 40% 20% / .25)); }
.tag { position: absolute; top: 8px; right: 8px; font: 11px var(--mono); background: var(--card); color: var(--dim); border: 1px solid var(--line); border-radius: 99px; padding: 2px 8px; }
.meta { display: flex; flex-direction: column; gap: 2px; padding-inline: 2px; }
.meta b { font-weight: 600; letter-spacing: -.01em; }
.by { font-size: 13px; color: var(--dim); background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; text-align: left; width: fit-content; }
.by:hover { color: var(--accent); }
.meta p { margin: 2px 0 0; font-size: 13px; color: var(--dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.empty { color: var(--dim); padding: 40px 0; }

/* footer */
.foot { border-top: 1px solid var(--line); padding-block: 22px 40px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--dim); }
.foot a { color: var(--accent); }

/* play page: always dark, so the game is the only bright thing on screen */
.play { background: var(--bg); color: var(--ink); height: 100%; display: flex; flex-direction: column; overflow: hidden; }
html:has(.play) { height: 100%; }
.bar { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--bar); font-size: 14px; min-height: 48px; }
.bar .mark { font-size: 15px; }
.bar .title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--dim); }
.bar .title b { color: var(--ink); font-weight: 600; }
.btn { font: 13px var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 7px; padding: 6px 11px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover, .btn:focus-visible { border-color: var(--accent); outline: none; }
.btn.hot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.stage { flex: 1; min-height: 0; }
.stage iframe { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.notice { max-width: 440px; margin: 12vh auto 0; padding: 0 20px; text-align: center; color: var(--dim); }
.notice h2 { color: var(--ink); font-weight: 600; letter-spacing: -.02em; }
@media (max-width: 560px) { .bar .hide-sm { display: none; } }

/* add-a-game guide */
.doc { max-width: 680px; padding-bottom: 64px; }
.doc h1 { font-size: 34px; font-weight: 650; letter-spacing: -.03em; margin: 28px 0 6px; }
.doc h2 { font-size: 18px; font-weight: 600; margin: 34px 0 8px; letter-spacing: -.01em; }
.doc p, .doc li { color: var(--ink); }
.doc .dim { color: var(--dim); }
.doc ol { padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc code { font: 13px var(--mono); background: var(--hover); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }
.doc pre { font: 13px/1.6 var(--mono); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; overflow-x: auto; }
.doc pre code { background: none; border: 0; padding: 0; }
.doc .step { display: grid; grid-template-columns: 28px 1fr; gap: 10px; }
.num { font: 600 13px var(--mono); color: var(--accent); padding-top: 2px; }

/* upload page: forms */
.panel { display: flex; flex-direction: column; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.panel label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; }
.panel input:not([type=checkbox]):not([type=file]) { font: 15px var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; outline: none; }
.panel input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(77, 140, 247, .18); }
.panel input[readonly] { color: var(--dim); }
.panel .check { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }
.panel fieldset { border: 1px dashed var(--line); border-radius: 8px; padding: 12px 14px 14px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.panel legend { font-size: 14px; font-weight: 500; padding: 0 4px; }
.hint { font-size: 13px; color: var(--dim); font-weight: 400; }
.pick, .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.go, .ghost, .danger, .btn-l { font: 500 14px var(--sans); border-radius: 8px; padding: 9px 14px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; width: fit-content; }
.go { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); box-shadow: 0 6px 22px -8px var(--glow); }
.go:disabled { opacity: .5; cursor: wait; }
.ghost, .btn-l { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.ghost:hover, .btn-l:hover { border-color: var(--accent); }
.danger { background: #d0302b; color: #fff; border: 1px solid #d0302b; }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--dim); text-decoration: underline; cursor: pointer; }
.msg { margin: 0; font-size: 14px; min-height: 1em; }
.msg.bad { color: #d0302b; }
.mine { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.mine-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.mine-row .acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mine-row .ghost, .mine-row .danger { padding: 5px 10px; font-size: 13px; }
.top nav { align-items: center; }
.cover-field { display: flex; flex-direction: column; gap: 6px; }
.cover-field .lbl { font-size: 14px; font-weight: 500; }
.panel .drop { aspect-ratio: 16 / 10; max-width: 320px; width: 100%; border: 1.5px dashed var(--line); border-radius: var(--radius); background: var(--bg); display: grid; place-items: center; text-align: center; font-size: 14px; color: var(--ink); cursor: pointer; overflow: hidden; padding: 12px; transition: border-color .15s, background .15s; }
.panel .drop.has { padding: 0; border-style: solid; }
.drop:hover, .drop:focus-visible, .drop.over { border-color: var(--accent); outline: none; }
.drop.over { background: var(--hover); }
.drop img { width: 100%; height: 100%; object-fit: cover; }
.drop img.pixel { image-rendering: pixelated; }

/* ---------- title screen ---------- */
.welcome { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: radial-gradient(90% 70% at 50% 110%, #0c2150 0%, #080d1a 45%, #07090e 100%); color: #eef2f9; text-align: center; padding: 24px; transition: opacity .6s ease, transform .6s ease; }
.welcomed .welcome { display: none; }
.welcome.leaving { opacity: 0; transform: scale(1.03); pointer-events: none; }
.embers { position: absolute; inset: 0; width: 100%; height: 100%; }
.welcome-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; animation: rise .9s cubic-bezier(.2,.8,.2,1) both; }
.welcome h1 { margin: 10px 0 0; font-size: clamp(38px, 8vw, 84px); font-weight: 800; letter-spacing: -.045em; line-height: 1; text-wrap: balance; text-shadow: 0 0 40px rgba(77, 140, 247, .35); }
.welcome p { margin: 0; font-size: clamp(15px, 2.2vw, 19px); color: #a9b6cc; letter-spacing: .02em; }
.spark.big { width: 22px; height: 22px; border-radius: 4px; box-shadow: 0 0 24px 6px rgba(77, 140, 247, .55); animation: glow 2.4s ease-in-out infinite; }
.continue { margin-top: 26px; font: 600 16px var(--sans); color: #06122a; background: #4d8cf7; border: 0; border-radius: 99px; padding: 13px 34px; cursor: pointer; box-shadow: 0 8px 30px rgba(77, 140, 247, .35); transition: transform .15s ease, box-shadow .15s ease; }
.continue:hover, .continue:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 38px rgba(77, 140, 247, .5); outline: none; }
.continue:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes glow { 50% { box-shadow: 0 0 34px 10px rgba(77, 140, 247, .75); transform: rotate(45deg) scale(1.08); } }

/* ---------- featured (newest) game ---------- */
.feature { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; align-items: center; margin-bottom: 34px; }
.feature-cover { display: block; text-decoration: none; color: inherit; box-shadow: 0 22px 60px -26px var(--glow); }
.blank.named { font: 800 clamp(26px, 5vw, 46px)/1.05 var(--sans); letter-spacing: -.04em; padding: 0 8%; text-align: center; text-wrap: balance; }
.feature-cover:hover img { transform: scale(1.03); }
.feature-text { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.eyebrow { font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.feature-text h2 { margin: 0; font-size: clamp(26px, 3.6vw, 36px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.feature-text p { margin: 4px 0 0; color: var(--dim); max-width: 38ch; }
.play-btn { margin-top: 14px; font: 600 15px var(--sans); text-decoration: none; background: var(--accent); color: var(--accent-ink); border-radius: 99px; padding: 10px 26px; box-shadow: 0 8px 26px -8px var(--glow); transition: transform .15s ease, box-shadow .15s ease; }
.play-btn:hover, .play-btn:focus-visible { transform: translateY(-2px); outline: none; }
@media (max-width: 700px) { .feature { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- makers + surprise ---------- */
.makers { display: flex; gap: 6px; flex-wrap: wrap; }
.maker { font: 500 13px var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 99px; padding: 5px 11px; cursor: pointer; }
.maker span { color: var(--dim); font: 12px var(--mono); margin-left: 3px; }
.maker:hover { border-color: var(--accent); }
.maker[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.maker[aria-pressed="true"] span { color: var(--accent-ink); opacity: .7; }
.surprise { font: 500 13px var(--sans); color: var(--ink); background: transparent; border: 1px dashed var(--line); border-radius: 99px; padding: 5px 12px; cursor: pointer; }
.surprise:hover { border-color: var(--accent); color: var(--accent); }
.tag.new { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }

/* cards drift in, one after another */
.grid article { animation: rise .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 45ms); }
.card:hover .cover, .card:focus-visible .cover { box-shadow: 0 0 0 1px rgba(77, 140, 247, .55), 0 16px 40px -16px var(--glow); border-color: transparent; }
.cover { transition: box-shadow .25s ease; }

@media (prefers-reduced-motion: reduce) {
  .welcome, .welcome-in, .grid article, .spark.big { animation: none !important; transition: none !important; }
}

/* ---------- theme switch + scroll buttons (site.js) ---------- */
.theme-btn { font: 500 13px var(--sans); color: var(--dim); background: transparent; border: 1px solid var(--line); border-radius: 99px; padding: 4px 11px; cursor: pointer; white-space: nowrap; }
.theme-btn:hover, .theme-btn:focus-visible { color: var(--ink); border-color: var(--accent); outline: none; }
.theme-btn span { color: var(--accent); }
.scroll-btns { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; z-index: 20; }
.sb { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: 600 18px var(--sans); cursor: pointer; box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .5); transition: opacity .2s, transform .15s, border-color .15s; }
.sb:hover, .sb:focus-visible { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); outline: none; }
.sb.off { opacity: 0; pointer-events: none; }

/* ---------- games counter ---------- */
.stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 18px; }
.stat b { display: block; font: 800 clamp(30px, 5vw, 40px)/1 var(--sans); letter-spacing: -.04em; color: var(--accent); font-variant-numeric: tabular-nums; }
.stat span { font: 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }

/* ---------- credits ---------- */
.credits { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; padding-bottom: 40px; }
.person { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; }
.person::before { content: ""; position: absolute; inset: -40% -40% auto auto; width: 160px; height: 160px; background: radial-gradient(circle, var(--glow) 0%, transparent 70%); opacity: .5; }
.person h2 { margin: 0; font-size: 26px; font-weight: 750; letter-spacing: -.03em; }
.person .initial { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font: 800 22px var(--sans); color: var(--accent-ink); background: var(--accent); box-shadow: 0 8px 24px -10px var(--glow); }
.roles { display: flex; gap: 6px; flex-wrap: wrap; }
.role { font: 12px var(--mono); letter-spacing: .04em; border: 1px solid var(--line); border-radius: 99px; padding: 3px 9px; color: var(--ink); }
.role.lead { border-color: var(--accent); color: var(--accent); }
.person a { font-size: 14px; color: var(--dim); }
.person a:hover { color: var(--accent); }
.studio { color: var(--dim); max-width: 52ch; }

/* ---------- game page (details before you play) ---------- */
/* Wide screens: the cover, screenshots and leaderboard on the left, the details on the right (the last row soaks up the
   details' extra height, so the left column stays packed at the top). Narrower: one column, details right after the cover. */
.detail { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr;
  grid-template-areas: "cover info" "shots info" "board info" ". info"; column-gap: 36px; row-gap: 0; align-items: start; padding-block: 12px 40px; }
.detail > .cover { grid-area: cover; }
.detail > .info { grid-area: info; min-width: 0; }
.detail > .shots { grid-area: shots; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.detail > .board { grid-area: board; margin: 26px 0 0; max-width: none; }
@media (max-width: 860px) {
  .detail { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "cover" "info" "shots" "board"; }
  .detail > .info { margin-top: 22px; }
  .detail > .shots { margin-top: 26px; }
}
.detail .cover { box-shadow: 0 24px 60px -28px var(--glow); }
.detail h1 { margin: 0 0 6px; font-size: clamp(30px, 4.5vw, 44px); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; text-wrap: balance; }
.detail .desc { font-size: 17px; line-height: 1.55; margin: 14px 0 0; }
.detail .facts { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px; font: 13px var(--mono); color: var(--dim); }
.detail .acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; align-items: center; }
.big-play { font: 700 18px var(--sans); border: 0; cursor: pointer; background: var(--accent); color: var(--accent-ink); border-radius: 99px; padding: 14px 40px; box-shadow: 0 12px 34px -12px var(--glow); transition: transform .15s ease, box-shadow .15s ease; text-decoration: none; }
.big-play:hover, .big-play:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 42px -12px var(--glow); outline: none; }
.more h3 { font-size: 15px; font-weight: 600; margin: 0 0 12px; color: var(--dim); }
/* while playing, the page becomes the full-screen game */
body.playing { height: 100vh; overflow: hidden; }
body.playing .wrap { display: none; }
.player { position: fixed; inset: 0; display: flex; flex-direction: column; background: #000; z-index: 30; }

/* play counts */
.plays { font: 12px var(--mono); color: var(--dim); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.feature-text .plays { display: block; margin-top: 4px; }

/* ---------- genres ---------- */
.genre-bar { flex-basis: 100%; align-items: center; }
.genre-lbl { font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-right: 4px; }
.gtags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.gtag { font: 11px var(--mono); letter-spacing: .02em; color: var(--dim); background: transparent; border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px; cursor: pointer; text-decoration: none; }
.gtag:hover, .gtag:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.gtags.big { margin-top: 10px; }
.gtags.big .gtag { font-size: 12px; padding: 3px 10px; }

/* ---------- in development ---------- */
.devsec-head h2 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: clamp(22px, 3vw, 28px); font-weight: 750; letter-spacing: -.03em; }
.devsec-head p { margin: 6px 0 0; color: var(--dim); max-width: 60ch; }
.devcard .cover { border-style: dashed; }
.devcard .cover img, .devcard .blank { filter: saturate(.75); }
.tag.dev, .devflag { color: var(--accent); border-color: var(--accent); }
.devflag { display: inline-block; font: 12px var(--mono); letter-spacing: .04em; border: 1px solid; border-radius: 99px; padding: 2px 10px; margin-bottom: 10px; }
.progress { display: block; height: 6px; border-radius: 99px; background: var(--hover); border: 1px solid var(--line); overflow: hidden; margin-top: 6px; max-width: 220px; }
.progress i { display: block; height: 100%; background: var(--accent); box-shadow: 0 0 10px var(--glow); border-radius: inherit; }
.progress-n { font: 11px var(--mono); color: var(--dim); font-variant-numeric: tabular-nums; }
.devprog { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; }
.devprog .progress { height: 8px; max-width: 320px; }
.next { font-size: 13px; color: var(--dim); }
.next span { color: var(--accent); font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.meta .next { -webkit-line-clamp: 3; }
.detail .next { margin: 10px 0 0; font-size: 15px; }
.soon { font: 14px var(--mono); color: var(--dim); border: 1px dashed var(--line); border-radius: 99px; padding: 12px 20px; }

/* upload: genre picker */
.genre-pick { display: flex; gap: 6px; flex-wrap: wrap; }
.gpick { display: inline-flex !important; cursor: pointer; }
.gpick input { position: absolute; opacity: 0; pointer-events: none; }
.gpick span { font: 500 13px var(--sans); border: 1px solid var(--line); background: var(--card); border-radius: 99px; padding: 5px 11px; }
.gpick input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.gpick input:focus-visible + span { box-shadow: 0 0 0 3px rgba(77, 140, 247, .3); }
.gpick input:disabled + span { opacity: .4; cursor: not-allowed; }
@media (max-width: 600px) { .genre-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; } .genre-bar > * { flex: none; } }
/* the menu: the same four links on every page; the page you're on is lit */
.top nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
.top nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (max-width: 600px) { .top { align-items: flex-start; } .top nav { gap: 8px 14px; font-size: 13px; } }

/* ======================================================================
   The big update: spotlight, shelves, stokes, makers, tilt, page transitions, secrets
   ====================================================================== */

/* pages glide into each other (browsers that support it), and a clicked cover flies into place */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
::view-transition-group(game-cover) { animation-duration: .42s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
.detail > .cover { view-transition-name: game-cover; }

.hero { padding-block: 40px 30px; }
.hero .eyebrow { display: block; margin-bottom: 12px; }

/* ---------- card tilt + glint ---------- */
.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s cubic-bezier(.2, .8, .2, 1); transform-style: preserve-3d; will-change: transform; }
.tilt:hover { transition-duration: .08s; }
.glint { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s; background: radial-gradient(40% 55% at var(--mx, 50%) var(--my, 50%), rgba(255, 190, 140, .28), transparent 70%); mix-blend-mode: screen; }
.tilt:hover .glint { opacity: 1; }

/* ---------- counts (plays + stokes) ---------- */
.counts { display: inline-flex; gap: 12px; font: 12px var(--mono); color: var(--dim); font-variant-numeric: tabular-nums; }
.counts > span { display: inline-flex; align-items: center; gap: 4px; }
.counts .is-mine { color: var(--accent); }
.flame { width: 13px; height: 13px; flex: none; }

/* ---------- game of the day ---------- */
.spotlight { position: relative; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 34px; align-items: center; padding: 26px; margin-bottom: 44px; border: 1px solid var(--line); border-radius: calc(var(--radius) + 8px); background: radial-gradient(80% 120% at 0% 0%, rgba(77, 140, 247, .13), transparent 60%), var(--card); overflow: hidden; }
.spotlight::after { content: ""; position: absolute; inset: auto -10% -60% 30%; height: 90%; background: radial-gradient(closest-side, var(--glow), transparent); opacity: .35; pointer-events: none; filter: blur(10px); }
.spot-cover { display: block; text-decoration: none; color: inherit; box-shadow: 0 30px 70px -30px var(--glow); position: relative; z-index: 1; }
.spot-text { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; position: relative; z-index: 1; }
.spot-text h2 { margin: 0; font-size: clamp(30px, 4.4vw, 46px); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; text-wrap: balance; }
.spot-text p { margin: 4px 0 0; color: var(--dim); max-width: 40ch; }
.spot-text .by { text-decoration: none; }
.spot-acts { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.spot-acts .play-btn { margin: 0; }
.spotlight .eyebrow { animation: pulse-ink 3s ease-in-out infinite; }
@keyframes pulse-ink { 50% { text-shadow: 0 0 14px var(--glow); } }
@media (max-width: 760px) { .spotlight { grid-template-columns: 1fr; gap: 18px; padding: 14px; } }

/* ---------- shelves: rows that scroll sideways ---------- */
.shelf { margin-bottom: 38px; }
.shelf-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.shelf-head h2 { margin: 0; font-size: 21px; font-weight: 750; letter-spacing: -.025em; }
.shelf-note { font: 12px var(--mono); color: var(--dim); letter-spacing: .04em; text-decoration: none; }
a.shelf-note:hover { color: var(--accent); }
.shelf-head .count { margin-left: auto; }
.row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 240px); gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 6px 4px 14px; margin: -6px -4px 0; list-style: none; scrollbar-width: thin; }
.row > * { scroll-snap-align: start; }
.row .gcard, .ranked .rank { animation: rise .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 45ms); }
/* the chart: big outlined numbers, like a top-10 */
.ranked { grid-auto-columns: minmax(260px, 290px); counter-reset: none; }
.rank { display: grid; grid-template-columns: 58px 1fr; align-items: start; }
.rank-n { font: 900 86px/0.8 var(--sans); letter-spacing: -.08em; color: transparent; -webkit-text-stroke: 2px var(--accent); padding-top: 4px; text-shadow: 0 0 30px var(--glow); }
.rank:first-child .rank-n { color: var(--accent); }

/* ---------- the library ---------- */
.library { border-top: 1px solid var(--line); padding-top: 28px; scroll-margin-top: 16px; }
.library .tools { border-bottom: 0; }
.sort { display: inline-flex; align-items: center; gap: 8px; font: 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.sort select { font: 500 13px var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 99px; padding: 5px 10px; cursor: pointer; }
.sort select:focus-visible { outline: none; border-color: var(--accent); }
.tools .makers { flex-basis: 100%; align-items: center; }
.grid .gcard { animation: rise .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 40ms); }
.devsec { margin-top: 10px; }

/* ---------- the makers ---------- */
.crew { border-top: 1px solid var(--line); padding-block: 28px 44px; }
.crew-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.crew-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 2px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); text-decoration: none; color: inherit; }
.crew-card:hover, .crew-card:focus-visible { border-color: var(--accent); outline: none; box-shadow: 0 16px 40px -20px var(--glow); }
.crew-card .initial, .maker-hero .initial { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font: 800 21px var(--sans); color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), hsl(calc(var(--h, 20) * 1deg) 85% 55%)); box-shadow: 0 8px 24px -10px var(--glow); margin-bottom: 10px; }
.crew-name { font-size: 20px; font-weight: 750; letter-spacing: -.03em; }
.crew-role { font: 12px var(--mono); color: var(--accent); letter-spacing: .04em; }
.crew-n { font: 12px var(--mono); color: var(--dim); margin-top: 6px; }

/* ---------- maker page ---------- */
.maker-hero { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; padding-block: 34px 30px; }
.maker-hero .initial { width: 96px; height: 96px; border-radius: 26px; font-size: 48px; margin: 0; }
.maker-hero h1 { margin: 0; font-size: clamp(36px, 6vw, 60px); font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.maker-hero .roles { margin-top: 12px; }
.maker-hero .stats { margin-top: 18px; }
.maker-quote { margin: 12px 0 0; color: var(--dim); max-width: 52ch; font-style: italic; }
@media (max-width: 560px) { .maker-hero { grid-template-columns: 1fr; } .maker-hero .initial { width: 72px; height: 72px; font-size: 36px; } }

/* ---------- stoke button (game page) ---------- */
.stoke { position: relative; display: inline-flex; align-items: center; gap: 8px; font: 600 15px var(--sans); color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 99px; padding: 12px 20px; cursor: pointer; transition: border-color .15s, color .15s, transform .15s; }
.stoke .flame { width: 18px; height: 18px; color: var(--accent); transition: transform .2s; }
.stoke:hover:not(:disabled), .stoke:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.stoke:hover:not(:disabled) .flame { transform: scale(1.2) rotate(-6deg); }
.stoke.done { border-color: var(--accent); color: var(--accent); cursor: default; }
.stoke.pop .flame { animation: flare .6s cubic-bezier(.2, .8, .2, 1); }
.stoke b { font: 600 13px var(--mono); color: var(--dim); }
.stoke.done b { color: var(--accent); }
@keyframes flare { 30% { transform: scale(1.9) translateY(-3px); filter: drop-shadow(0 0 10px var(--glow)); } }

/* ---------- toast + secrets ---------- */
.uf-toast { position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translate(-50%, 140%); z-index: 90; background: var(--card); color: var(--ink); border: 1px solid var(--accent); border-radius: 99px; padding: 10px 18px; font-size: 14px; box-shadow: 0 16px 40px -14px var(--glow); transition: transform .35s cubic-bezier(.2, .8, .2, 1); max-width: calc(100vw - 32px); text-align: center; }
.uf-toast.on { transform: translate(-50%, 0); }
.uf-toast b { color: var(--accent); }
.egg-layer { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 80; }
.mark .spark { cursor: pointer; }
.mark .spark.heat { animation: heat .35s ease; }
@keyframes heat { 50% { transform: rotate(135deg) scale(1.6); box-shadow: 0 0 22px 6px var(--glow); background: #cfe0ff; } }
.overdrive body { animation: quake .12s linear 14; }
.overdrive .intro h1, .overdrive .spot-text h2 { color: var(--accent); text-shadow: 0 0 30px var(--glow); transition: color .2s; }
@keyframes quake { 25% { transform: translate(2px, -1px); } 50% { transform: translate(-2px, 1px); } 75% { transform: translate(1px, 2px); } }

@media (prefers-reduced-motion: reduce) {
  .tilt { transform: none !important; }
  .row .gcard, .ranked .rank, .grid .gcard, .spotlight .eyebrow, .overdrive body { animation: none !important; }
  @view-transition { navigation: none; }
}
@media (max-width: 600px) { .row { grid-auto-columns: 72%; } .ranked { grid-auto-columns: 84%; } .rank-n { font-size: 64px; } .rank { grid-template-columns: 44px 1fr; } }
.person-link { text-decoration: none; }
.person-link:hover { color: var(--accent); }
.person-link::after { content: ""; position: absolute; inset: 0; }   /* the whole card opens the maker page */
.person .roles, .person > a:not(.person-link) { position: relative; z-index: 1; }

/* ======================================================================
   Cleaner (v2 of the big update): quieter stats, one-line card info, less glow
   ====================================================================== */
/* stats: one calm line — "6 games · 4 makers · 29 plays" */
.stats { gap: 6px 20px; margin-top: 16px; }
.stat { display: inline-flex; align-items: baseline; gap: 6px; }
.stat b { display: inline; font: 700 17px/1 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.stat span { font: 13px var(--sans); letter-spacing: 0; text-transform: lowercase; color: var(--dim); }
.stat + .stat::before { content: "·"; color: var(--line); margin-right: 14px; font-weight: 700; order: -1; }
.maker-hero .stat b { font-size: 20px; }

/* cards: cover, title, and one line — who made it, plays, stokes */
.meta { gap: 3px; }
.meta .sub { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.meta .sub .by { font-size: 13px; }
.meta .counts { font-size: 12px; gap: 10px; }
.tag { font-size: 10px; }

/* the library toolbar: search, then three small dropdowns */
.tools { gap: 10px 16px; }
.search { max-width: 300px; }

/* less glow, no pulsing */
.spotlight { background: var(--card); padding: 22px; }
.spotlight::after { display: none; }
.spotlight .eyebrow { animation: none; }
.spot-cover { box-shadow: 0 18px 44px -26px var(--glow); }
.rank-n { font-size: 64px; text-shadow: none; -webkit-text-stroke-width: 1.5px; }
.rank { grid-template-columns: 46px 1fr; }
.ranked { grid-auto-columns: minmax(240px, 270px); }
.hero { padding-block: 32px 26px; }
.hero h1 { text-shadow: none; }
.shelf { margin-bottom: 34px; }
.crew-card .initial { box-shadow: none; }

/* ======================================================================
   Clean, round two: no background sparks, no tilt, no glow — just the games
   ====================================================================== */
body { background: var(--bg); }
.bg-embers { display: none; }
.intro h1, .hero h1 { text-shadow: none; }
.spotlight { border: 0; background: none; padding: 0; border-radius: 0; margin-bottom: 40px; gap: 32px; }
.spot-cover, .detail .cover { box-shadow: none; }
.card .cover { transition: transform .2s ease, border-color .2s ease; }
.card:hover .cover, .card:focus-visible .cover { transform: translateY(-3px); box-shadow: none; border-color: var(--accent); }
.card:hover .cover img, .card:focus-visible .cover img { transform: none; }
.play-btn, .big-play, .go, .continue { box-shadow: none; }
.play-btn:hover, .big-play:hover, .big-play:focus-visible { box-shadow: none; }
.person::before { display: none; }
.person .initial, .crew-card .initial { box-shadow: none; }
.spark { box-shadow: none; }
.library { border-top: 0; padding-top: 8px; }
.shelf-head h2 { font-size: 19px; }
/* long descriptions end in "…" where space is tight (the game page shows them in full) */
.spot-text p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

/* ======================================================================
   Bolder (after "too boring"): sparks, tilt and colour back — layout stays simple
   ====================================================================== */
body { background: radial-gradient(110% 55% at 50% 118%, var(--glow-bg) 0%, transparent 62%) fixed, var(--bg); }
.bg-embers { display: block; }

/* a warm band behind the title */
.hero { position: relative; margin-top: 6px; padding: 34px 28px 28px; border-radius: calc(var(--radius) + 8px); overflow: hidden;
  background: linear-gradient(115deg, var(--tint-30) 0%, var(--tint-10) 45%, transparent 80%); }
.hero::after { content: ""; position: absolute; right: -60px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(closest-side, var(--glow), transparent); opacity: .55; pointer-events: none; }
.hero h1 { position: relative; }
.hero h1::after { content: ""; display: block; width: 64px; height: 4px; margin-top: 14px; border-radius: 4px; background: var(--accent); box-shadow: 0 0 16px var(--glow); }
.stat b { color: var(--accent); }
.stat + .stat::before { color: var(--accent); opacity: .5; }

/* game of the day glows */
.spotlight { padding: 22px; border: 1px solid var(--accent-edge); border-radius: calc(var(--radius) + 8px);
  background: radial-gradient(90% 130% at 0% 0%, var(--tint-20), transparent 60%), var(--card);
  box-shadow: 0 24px 60px -30px var(--glow); }
.spot-cover { box-shadow: 0 22px 50px -24px var(--glow); }
.spotlight .eyebrow { animation: pulse-ink 3s ease-in-out infinite; }
@media (max-width: 760px) { .spotlight { padding: 14px; } .hero { padding: 26px 18px 22px; } }

/* section headings get an ember marker */
.shelf-head h2 { display: inline-flex; align-items: center; gap: 10px; }
.shelf-head h2::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); box-shadow: 0 0 10px var(--glow); }

/* hover: the tilt, plus an orange glow */
.card:hover .cover, .card:focus-visible .cover { transform: none; border-color: transparent; box-shadow: 0 0 0 1px var(--accent-ring), 0 18px 40px -16px var(--glow); }
.play-btn, .big-play, .go { box-shadow: 0 10px 28px -10px var(--glow); }
.person::before { display: block; }
.spark { box-shadow: 0 0 12px 2px var(--glow); }
@media (prefers-reduced-motion: reduce) { .spotlight .eyebrow { animation: none; } }
.hero { margin-bottom: 28px; }

/* ---------- support (tips via Stripe) ---------- */
.nav-support { color: var(--accent) !important; font-weight: 600; }
.foot-links { display: inline-flex; gap: 18px; flex-wrap: wrap; }
.tipline { margin: 18px 0 0; font-size: 14px; color: var(--dim); }
.tipline a { color: var(--accent); }
.support { max-width: 640px; padding-bottom: 60px; }
.support h1 { margin: 0; font-size: clamp(32px, 5vw, 48px); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; text-wrap: balance; }
.support .lead { font-size: 18px; line-height: 1.55; margin: 14px 0 0; }
.support ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.support li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: baseline; }
.support li::before { content: ""; width: 8px; height: 8px; margin-top: 7px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); box-shadow: 0 0 10px var(--glow); }
.support .acts { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 28px; }
.support .fine { font-size: 13px; color: var(--dim); margin-top: 18px; max-width: 56ch; }
.support .soon { display: inline-block; }

/* ---------- settings ---------- */
.gear-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-left: 6px; border: 1px solid var(--line); border-radius: 99px; color: var(--dim) !important; text-decoration: none; font-size: 15px; line-height: 1; vertical-align: middle; transition: color .15s, border-color .15s, transform .3s; }
.gear-btn:hover, .gear-btn:focus-visible, .gear-btn[aria-current="page"] { color: var(--accent) !important; border-color: var(--accent); outline: none; }
.gear-btn:hover { transform: rotate(60deg); }
[data-theme-switch] { display: inline-flex; align-items: center; }
.settings { max-width: 680px; padding-bottom: 60px; display: grid; gap: 18px; }
.set-card { background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); padding: 20px; display: grid; gap: 14px; }
.set-card h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.set-card p { margin: 0; color: var(--dim); font-size: 14px; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { width: 40px; height: 40px; border-radius: 12px; border: 2px solid transparent; cursor: pointer; position: relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); transition: transform .12s; }
.swatch:hover { transform: translateY(-2px); }
.swatch[aria-pressed="true"] { border-color: var(--ink); }
.swatch[aria-pressed="true"]::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; color: var(--ink-on, #fff); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.swatch-custom { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--dim); cursor: pointer; }
.swatch-custom input { width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: none; cursor: pointer; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 99px; padding: 3px; gap: 3px; width: fit-content; flex-wrap: wrap; }
.seg button { font: 500 14px var(--sans); color: var(--ink); background: transparent; border: 0; border-radius: 99px; padding: 7px 16px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.toggle-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.preview { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; padding: 14px; border-radius: 12px; background: var(--tint-10); border: 1px solid var(--accent-edge); }
.preview .chip-demo { font: 12px var(--mono); color: var(--accent); border: 1px solid var(--accent); border-radius: 99px; padding: 3px 10px; }

.panel textarea { font: 15px/1.45 var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; outline: none; resize: vertical; min-height: 64px; }
.panel textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--tint-20); }

/* ---------- title screen, part two: scroll down for "A hub for AI games" ---------- */
.welcome { display: block; padding: 0; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scroll-behavior: smooth;
  background: radial-gradient(90% 70% at 50% 110%, var(--tint-30) 0%, transparent 60%), radial-gradient(90% 70% at 50% 110%, #0c1428 0%, #080d1a 45%, #07090e 100%); }
.welcome .embers { position: fixed; }
.welcome-in { min-height: 100vh; min-height: 100dvh; justify-content: center; padding: 24px; scroll-snap-align: start; box-sizing: border-box; }
.welcome h1, .welcome h2 { text-shadow: 0 0 40px var(--glow); }
.spark.big { box-shadow: 0 0 24px 6px var(--glow); }
.continue { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 30px var(--glow); }
.continue:hover, .continue:focus-visible { box-shadow: 0 12px 38px var(--glow); }
.scroll-cue { position: absolute; bottom: max(22px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: 4px; font: 13px var(--mono); letter-spacing: .06em; color: #a9b6cc; text-decoration: none; }
.scroll-cue span { font-size: 18px; color: var(--accent); animation: nudge 1.6s ease-in-out infinite; }
.scroll-cue:hover, .scroll-cue:focus-visible { color: #eef2f9; outline: none; }
@keyframes nudge { 50% { transform: translateY(6px); } }
.welcome-two h2 { margin: 6px 0 0; font-size: clamp(34px, 7vw, 72px); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; text-wrap: balance; }
.welcome-two p { max-width: 46ch; line-height: 1.55; }
.welcome-two .eyebrow { color: var(--accent); }
.welcome-points { list-style: none; margin: 8px 0 0; padding: 0; display: flex; gap: 10px 22px; flex-wrap: wrap; justify-content: center; font-size: 14px; color: #c9d3e4; }
.welcome-points li { display: inline-flex; align-items: center; gap: 8px; }
.welcome-points li::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); box-shadow: 0 0 10px var(--glow); }
/* it rises in as you scroll to it (browsers with scroll-driven animations; everywhere else it simply shows) */
@supports (animation-timeline: view()) {
  .welcome-two > * { animation: rise linear both; animation-timeline: view(); animation-range: entry 5% cover 35%; }
}
@media (prefers-reduced-motion: reduce) { .welcome { scroll-behavior: auto; } .scroll-cue span, .welcome-two > * { animation: none !important; } }

/* founders / community headline + credits sections */
.hero h1 .now { color: var(--accent); text-shadow: 0 0 28px var(--glow); }
.credits-head { margin: 8px 0 14px; font-size: 20px; font-weight: 750; letter-spacing: -.025em; }
#communityWrap { margin-top: 12px; }
#communityWrap .studio { margin: -6px 0 14px; }

/* community members: compact tiles */
.members { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; padding-bottom: 40px; }
.member { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); text-decoration: none; color: inherit; transition: border-color .15s; }
.member:hover, .member:focus-visible { border-color: var(--accent); outline: none; }
.member .mini { grid-row: span 2; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font: 700 14px var(--sans); color: var(--accent-ink); background: var(--accent); }
.member-name { font-weight: 600; font-size: 14px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-n { font: 11px var(--mono); color: var(--dim); }

/* upload: genres grouped */
#fGenres { display: grid; gap: 12px; }
.genre-group { display: grid; gap: 6px; }

/* ---------- live count ---------- */
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #35d07f; box-shadow: 0 0 0 0 rgba(53, 208, 127, .6); animation: live-pulse 2s ease-out infinite; vertical-align: middle; }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 7px rgba(53, 208, 127, 0); } 100% { box-shadow: 0 0 0 0 rgba(53, 208, 127, 0); } }
.stat-live { font: 13px var(--sans); color: var(--dim); align-items: center; }
.stat-live::before { order: -2; }
.tag.live-tag { left: 8px; right: auto; background: rgba(8, 12, 20, .78); color: #d8ffe9; border-color: rgba(53, 208, 127, .5); display: inline-flex; align-items: center; backdrop-filter: blur(4px); }
.tag.live-tag[hidden] { display: none; }
.live-fact { color: #35d07f; display: inline-flex; align-items: center; }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* new-for-you note above the library */
.new-note { margin: -4px 0 16px; padding: 10px 14px; border-radius: 10px; background: var(--tint-10); border: 1px solid var(--accent-edge); font-size: 14px; }
.new-note b { color: var(--accent); }
.new-note a { color: inherit; }

/* ---------- get the app ---------- */
.app-btn { font: 500 13px var(--sans); color: var(--accent); background: var(--tint-10); border: 1px solid var(--accent-edge); border-radius: 99px; padding: 4px 11px; margin-right: 6px; cursor: pointer; white-space: nowrap; }
.app-btn:hover, .app-btn:focus-visible { background: var(--tint-20); outline: none; }
.app-sheet { max-width: min(440px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 16px; padding: 24px; background: var(--card); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); }
.app-sheet::backdrop { background: rgba(5, 8, 14, .6); backdrop-filter: blur(3px); }
.app-sheet h2 { margin: 0 0 12px; font-size: 20px; letter-spacing: -.02em; }
.app-sheet ol { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 8px; line-height: 1.5; }
.app-sheet p { margin: 0 0 16px; color: var(--dim); font-size: 13px; }
.app-sheet .big-play { padding: 10px 26px; font-size: 15px; }
@media (max-width: 600px) { .app-btn { font-size: 12px; padding: 4px 9px; } }

/* ---------- review queue ---------- */
#reviewBox h2 { display: flex; align-items: center; gap: 10px; }
.review-count:not(:empty) { font: 700 13px var(--sans); color: var(--accent-ink); background: var(--accent); border-radius: 99px; padding: 2px 9px; }
.review-list { display: grid; gap: 10px; margin-bottom: 28px; }
.review-item { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: start; padding: 12px; border: 1px solid var(--accent-edge); border-radius: 12px; background: var(--card); }
.review-cover { aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: var(--hover); display: grid; place-items: center; font: 800 28px var(--sans); color: var(--dim); text-decoration: none; }
.review-cover img { width: 100%; height: 100%; object-fit: cover; }
.review-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.review-meta .acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.review-meta .go, .review-meta .ghost, .review-meta .danger { padding: 6px 12px; font-size: 13px; }
.review-meta .reason { flex: 1 1 200px; font: 14px var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
.rstat { display: inline-block; margin-left: 6px; font: 12px var(--mono); border-radius: 99px; padding: 2px 8px; }
.rstat.wait { color: var(--accent); background: var(--tint-10); }
.rstat.no { color: #e5534b; background: rgba(229, 83, 75, .1); }
@media (max-width: 520px) { .review-item { grid-template-columns: 1fr; } }

/* ---------- "we need more members" banner ---------- */
.site-banner { position: relative; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 9px 48px 9px 16px; background: linear-gradient(90deg, var(--tint-20), var(--tint-30), var(--tint-20)); border-bottom: 1px solid var(--accent-edge); font-size: 14px; text-align: center; transition: opacity .25s, transform .25s; }
.site-banner p { margin: 0; }
.site-banner b { color: var(--accent); }
.site-banner a { color: var(--ink); font-weight: 600; white-space: nowrap; }
.site-banner a:hover { color: var(--accent); }
.banner-x { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--dim); font-size: 14px; cursor: pointer; }
.banner-x:hover, .banner-x:focus-visible { background: var(--tint-20); color: var(--ink); outline: none; }
.site-banner.closing { opacity: 0; transform: translateY(-100%); }
body.playing .site-banner { display: none; }
.support-banner { background: linear-gradient(90deg, rgba(240, 98, 146, .10), rgba(240, 98, 146, .18), rgba(240, 98, 146, .10)); border-bottom-color: rgba(240, 98, 146, .35); }
.support-banner b { color: #e8578a; display: inline-flex; align-items: center; gap: 5px; }
.support-banner b svg { width: 15px; height: 15px; }
@media (max-width: 600px) { .site-banner span { display: none; } }

/* ---------- who's online panel ---------- */
.live-clickable { cursor: pointer; border-radius: 99px; padding: 2px 8px; margin: -2px -8px; transition: background .15s; }
.live-clickable:hover, .live-clickable:focus-visible, .live-clickable[aria-expanded="true"] { background: rgba(53, 208, 127, .12); outline: none; }
.who-panel { position: absolute; z-index: 60; width: min(300px, calc(100vw - 24px)); background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 14px; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .55); font-size: 14px; animation: rise .2s ease both; }
.who-title { display: block; margin-bottom: 8px; font-size: 13px; letter-spacing: .02em; }
.who-panel ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.who-panel li { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.who-panel li a { color: var(--ink); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-panel li a:hover { color: var(--accent); }
.who-panel li span { font: 12px var(--mono); color: #35d07f; white-space: nowrap; }
.who-panel p { margin: 4px 0 0; color: var(--dim); }
.who-panel .who-note { font: 11px var(--mono); margin-top: 10px; }

/* maker badges: the same theme colour for everyone (it used to mix in a colour picked from each name) */
.crew-card .initial, .maker-hero .initial { background: linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(0, 0, 0, .16)), var(--accent); }

/* ---------- updated tag, founder picks, feedback ---------- */
.tag.upd { background: var(--card); color: var(--accent); border-color: var(--accent-edge); }
.pick-chip { color: #f2b53a; font-weight: 600; }
.feedback { margin-top: 22px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); display: grid; gap: 10px; max-width: 460px; }
.fb-q { font-weight: 600; font-size: 14px; }
.fb-votes { display: flex; gap: 8px; }
.fb-vote { font-size: 20px; line-height: 1; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; transition: transform .12s, border-color .12s, background .12s; }
.fb-vote:hover { transform: translateY(-2px); }
.fb-vote[aria-pressed="true"] { border-color: var(--accent); background: var(--tint-20); }
.feedback textarea { font: 14px/1.4 var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; resize: vertical; }
.feedback textarea:focus { outline: none; border-color: var(--accent); }
.fb-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fb-hint, .fb-msg { font-size: 12px; color: var(--dim); margin: 0; }
.fb-done { margin: 0; font-size: 14px; color: var(--dim); }
/* upload page: picks + feedback */
.pick-list, .fb-list { display: grid; gap: 6px; margin-bottom: 28px; }
.pick-row, .fb-game { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); flex-wrap: wrap; }
.star-btn { font: 600 13px var(--sans); border: 1px solid var(--line); background: transparent; color: var(--dim); border-radius: 99px; padding: 5px 12px; cursor: pointer; }
.star-btn[aria-pressed="true"] { color: #1a1200; background: #f2b53a; border-color: #f2b53a; }
.fb-game { flex-direction: column; align-items: stretch; }
.fb-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer; background: none; border: 0; color: inherit; font: inherit; padding: 0; text-align: left; }
.fb-counts { font: 13px var(--mono); color: var(--dim); }
.fb-notes { display: grid; gap: 6px; margin-top: 8px; }
.fb-note { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: start; padding: 8px; border-radius: 8px; background: var(--bg); font-size: 14px; }
.fb-note time { font: 11px var(--mono); color: var(--dim); display: block; }
.fb-note .ghost { padding: 3px 8px; font-size: 12px; }
.stats { align-items: baseline; }   /* (keeps every number on one line — "12 games" sat a little high) */

/* ---------- You link, favorites, badges ---------- */
.you-link span { color: var(--accent); }
.fav-btn[aria-pressed="true"] { color: #ff5f7e; border-color: rgba(255, 95, 126, .6); }
.fav-btn[aria-pressed="true"] span { color: #ff5f7e; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 34px; }
.badge { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 14px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
.badge .ico { font-size: 30px; line-height: 1; filter: grayscale(1); opacity: .35; }
.badge b { font-size: 14px; }
.badge small { font-size: 12px; color: var(--dim); line-height: 1.35; }
.badge.got { border-color: var(--accent-edge); background: linear-gradient(180deg, var(--tint-10), transparent), var(--card); }
.badge.got .ico { filter: none; opacity: 1; }
.you-stats { margin-top: 16px; }
.you-list { display: grid; gap: 6px; margin-bottom: 34px; }
.you-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); text-decoration: none; color: inherit; }
.you-row:hover { border-color: var(--accent); }
.you-row span { font: 13px var(--mono); color: var(--dim); }
.you-clear { font-size: 13px; color: var(--dim); }

/* ---------- leaderboard ---------- */
.board { margin: 6px 0 40px; max-width: 520px; }
.board-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.board-list li { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
.board-list li.me { border-color: var(--accent); background: var(--tint-10); }
.board-list .rank { display: flex; align-items: center; justify-content: center; font: 700 14px var(--mono); text-align: center; }   /* (not the home page's .rank grid) */
.board-list .score { font: 600 14px var(--mono); color: var(--accent); font-variant-numeric: tabular-nums; }
.score-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 16px; background: var(--bar); border-bottom: 1px solid var(--accent-edge); font-size: 14px; }
.score-bar input { font: 14px var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 6px 10px; width: 160px; }
.score-bar b { color: var(--accent); }

/* profile editor + emoji avatars */
.emoji-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.emo { width: 40px; height: 40px; font-size: 20px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; font-weight: 800; color: var(--ink); }
.emo[aria-pressed="true"] { border-color: var(--accent); background: var(--tint-20); box-shadow: 0 0 0 2px var(--tint-30); }
.panel select { font: 15px var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.initial.emoji, .mini.emoji { background: var(--tint-20) !important; font-size: 1.15em; }
.maker-bio { margin: 10px 0 0; max-width: 52ch; font-size: 16px; }
.board-list li.empty-board { display: block; color: var(--dim); font-size: 14px; text-align: center; padding: 14px; }


/* ---------- SVG icons (instead of emojis) ---------- */
.ico { width: 1em; height: 1em; vertical-align: -.14em; flex: none; }
[data-icon] { display: inline-flex; vertical-align: -.14em; }
[data-icon] .ico { vertical-align: 0; }
.theme-btn .ico, .you-link .ico, .app-btn .ico { color: var(--accent); }
.gear-btn .ico { width: 16px; height: 16px; }
.banner-x .ico { width: 14px; height: 14px; }
.nav-support .ico, .tipline .ico, .foot-links .ico { color: #ff5f7e; }
.fav-btn .ico { color: #ff5f7e; }
.fb-vote .ico { width: 22px; height: 22px; }
.fb-vote[aria-pressed="true"] { color: var(--accent); }
.pick-chip .ico, .star-btn .ico { vertical-align: -.16em; }
.board-list .rank .ico { width: 22px; height: 22px; vertical-align: middle; }
.medal-1 { color: #f2b53a; } .medal-2 { color: #aab4c3; } .medal-3 { color: #cd7f4a; }
.badge-ico { display: grid; place-items: center; color: var(--dim); opacity: .45; }
.badge-ico .ico { width: 30px; height: 30px; }
.badge.got .badge-ico { color: var(--accent); opacity: 1; }
.emo .ico { width: 20px; height: 20px; }
.initial.emoji .ico, .mini.emoji .ico { width: 58%; height: 58%; color: var(--accent); }
.fb-note > span:first-child .ico { width: 18px; height: 18px; color: var(--dim); }
.fb-counts .ico { vertical-align: -.2em; }

.pick-on { margin-left: auto; font: 600 13px var(--sans); color: #f2b53a; display: inline-flex; align-items: center; gap: 4px; }
.pick-row .star-btn[aria-pressed="true"] { color: var(--ink); background: transparent; border-color: var(--line); }
.pick-row .star-btn[aria-pressed="true"]:hover { border-color: #e5534b; color: #e5534b; }
.stoke.done:hover { border-color: var(--line); }

/* ---------- notifications bell ---------- */
.bell-btn { position: relative; display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 6px; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--dim); cursor: pointer; }
.bell-btn:hover, .bell-btn:focus-visible, .bell-btn[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); outline: none; }
.bell-btn .ico { width: 16px; height: 16px; }
.bell-n { position: absolute; top: -5px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: #e5534b; color: #fff; font: 700 10px/17px var(--sans); text-align: center; }
.news-panel { position: absolute; z-index: 60; width: min(340px, calc(100vw - 24px)); max-height: 70vh; overflow: auto; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 12px; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .55); font-size: 14px; animation: rise .2s ease both; }
.news-title { display: block; margin: 2px 4px 8px; font-size: 13px; }
.news-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.news-panel li a { display: grid; grid-template-columns: 26px 1fr; gap: 8px; padding: 8px; border-radius: 8px; text-decoration: none; color: inherit; line-height: 1.35; }
.news-panel li a:hover { background: var(--tint-10); }
.news-ico { color: var(--accent); padding-top: 1px; }
.news-ico .ico { width: 18px; height: 18px; }
.news-panel time { display: block; font: 11px var(--mono); color: var(--dim); margin-top: 2px; }
.news-panel p { margin: 4px; color: var(--dim); }

/* ---------- game ideas ---------- */
.ideas-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ideas-head h2 { margin-bottom: 8px; }
.ideas-sort { margin-left: auto; display: inline-flex; gap: 4px; }
.ideas-sort button { font: 500 13px var(--sans); color: var(--dim); background: transparent; border: 1px solid var(--line); border-radius: 99px; padding: 4px 11px; cursor: pointer; }
.ideas-sort button[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.idea-form { margin-bottom: 12px; }
.idea-form input, .idea-form textarea { font: 15px/1.4 var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; resize: vertical; }
.idea-form input:focus, .idea-form textarea:focus { outline: none; border-color: var(--accent); }
.idea-list { display: grid; gap: 8px; margin-bottom: 32px; }
.idea { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.idea-vote { display: grid; justify-items: center; align-content: center; gap: 2px; height: 56px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: #ff5f7e; cursor: pointer; }
.idea-vote b { font: 700 14px var(--mono); color: var(--ink); }
.idea-vote[aria-pressed="true"] { border-color: #ff5f7e; background: rgba(255, 95, 126, .1); }
.idea-vote .ico { width: 18px; height: 18px; }
.idea-body { display: grid; gap: 4px; min-width: 0; }
.idea-title { font-size: 16px; }
.idea-body p { margin: 0; font-size: 14px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.idea-meta { font: 12px var(--mono); color: var(--dim); }
.idea-maker { color: var(--accent); }
.idea-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.idea-acts .ghost { padding: 4px 10px; font-size: 12px; }

/* upload: screenshots */
.panel .shots-drop { display: grid; gap: 8px; padding: 14px; border: 1.5px dashed var(--line); border-radius: var(--radius); background: var(--bg); font-size: 14px; cursor: pointer; text-align: center; }
.shots-drop:hover, .shots-drop:focus-visible, .shots-drop.over { border-color: var(--accent); outline: none; }
.shots-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.shots-row img { width: 96px; height: 60px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }

/* game page: screenshots + what's new */
.shot { padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--hover); aspect-ratio: 16 / 10; cursor: zoom-in; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.shot:hover img, .shot:focus-visible img { transform: scale(1.05); }
.shot:focus-visible { outline: 2px solid var(--accent); }
.lightbox { padding: 0; border: 0; background: transparent; max-width: 94vw; max-height: 92vh; overflow: visible; }
.lightbox::backdrop { background: rgba(4, 6, 10, .85); }
.lightbox img { display: block; max-width: 94vw; max-height: 86vh; border-radius: 10px; }
.lightbox button { position: absolute; border: 0; background: rgba(10, 12, 17, .7); color: #fff; cursor: pointer; border-radius: 99px; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; font-size: 26px; line-height: 1; }
.lb-prev { left: 8px; } .lb-next { right: 8px; }
.lb-close { top: 8px; right: 8px; width: 36px; height: 36px; display: grid; place-items: center; }
.lb-close .ico { width: 18px; height: 18px; }
.lb-n { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); font: 12px var(--mono); color: #fff; background: rgba(10, 12, 17, .7); padding: 3px 9px; border-radius: 99px; }
.whatsnew { margin: 12px 0 0; padding: 9px 12px; border-left: 3px solid var(--accent); background: var(--tint-10); border-radius: 0 8px 8px 0; font-size: 14px; }
.whatsnew time { font: 11px var(--mono); color: var(--dim); margin-left: 4px; }

/* ---------- maker levels ---------- */
.level { display: inline-flex; align-items: center; gap: 4px; font: 600 12px var(--sans); letter-spacing: .02em; border-radius: 99px; padding: 3px 9px; border: 1px solid currentColor; white-space: nowrap; }
.level .ico { width: 13px; height: 13px; }
.lv-0 { color: #8fb3ff; } .lv-1 { color: #ff9a4a; } .lv-2 { color: #ff6a33; } .lv-3 { color: #f2b53a; }
.lv-4 { color: #ff4d6d; background: rgba(255, 77, 109, .1); box-shadow: 0 0 14px rgba(255, 77, 109, .35); }
.level-progress { display: grid; gap: 4px; margin-top: 10px; max-width: 320px; }
.level-progress .bar { height: 6px; border-radius: 99px; background: var(--hover); border: 1px solid var(--line); overflow: hidden; }
.level-progress .bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.level-progress small { font: 11px var(--mono); color: var(--dim); }
.person .level { width: fit-content; }
.member-n .level { padding: 1px 6px; font-size: 10px; margin-left: 4px; }

/* ---------- spin the wheel ---------- */
.wheel-dialog { border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--ink); padding: 22px; width: min(420px, calc(100vw - 24px)); text-align: center; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); }
.wheel-dialog::backdrop { background: rgba(5, 8, 14, .65); backdrop-filter: blur(3px); }
.wheel-dialog h2 { margin: 0 0 12px; font-size: 20px; }
.wheel-x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: var(--dim); cursor: pointer; display: grid; place-items: center; }
.wheel-x .ico { width: 16px; height: 16px; }
.wheel-wrap { position: relative; width: min(320px, 78vw); aspect-ratio: 1; margin: 0 auto; }
.wheel { width: 100%; height: 100%; display: block; filter: drop-shadow(0 10px 24px var(--glow)); }
.wseg { stroke: var(--card); stroke-width: 1.5; }
.ws-0 { fill: var(--accent); } .ws-1 { fill: var(--accent-edge); }
.wlabel { font: 700 9px var(--sans); fill: var(--accent-ink); text-anchor: middle; dominant-baseline: middle; }
.ws-1 + .wlabel { fill: var(--ink); }
.whub { fill: var(--card); stroke: var(--accent); stroke-width: 3; }
.wheel-pointer { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 22px solid var(--ink); z-index: 2; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.wheel-spin { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--accent); background: var(--card); color: var(--accent); font: 800 11px var(--sans); letter-spacing: .04em; cursor: pointer; }
.wheel-spin:disabled { cursor: default; opacity: .7; }
.wheel-result { min-height: 1.4em; margin: 14px 0 6px; font-size: 16px; }
.wheel-result b { color: var(--accent); }
.wheel-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.wheel-acts .play-btn { margin: 0; }
/* "N online now": its separator dot sat inside the green highlight — keep the highlight on the words only */
.stat-live.live-clickable { margin: 0; }
.stat-live::before { display: none; }
.stat-live { margin-left: 6px; }

/* ---------- the gentle thank-you card after a long play ---------- */
.nudge { display: flex; gap: 14px; align-items: flex-start; margin-top: 22px; padding: 16px 18px; border-radius: 14px; background: linear-gradient(135deg, rgba(240, 98, 146, .10), rgba(240, 98, 146, .04)); border: 1px solid rgba(240, 98, 146, .3); animation: rise .35s ease both; transition: opacity .25s, transform .25s; }
.nudge.closing { opacity: 0; transform: translateY(-6px); }
.nudge-ico { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(240, 98, 146, .16); color: #e8578a; }
.nudge-ico .ico { width: 18px; height: 18px; }
.nudge b { font-size: 16px; }
.nudge p { margin: 4px 0 12px; font-size: 14px; line-height: 1.5; color: var(--dim); }
.nudge-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.big-play.small { padding: 8px 16px; font-size: 14px; }
.big-play.small .ico { color: #ffd0de; }
/* support page: what tips help with */
.support ul.tip-uses { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; max-width: 560px; }
.support ul.tip-uses li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.support ul.tip-uses li::before { content: none; }
.tip-uses b { font: 700 18px var(--mono); color: #e8578a; text-align: center; }
.tip-uses span { font-size: 14px; line-height: 1.45; }
.support h2 { margin: 30px 0 0; font-size: 20px; }
.support .kind { margin: 14px 0 0; color: var(--dim); font-size: 14px; max-width: 560px; }

/* ---------- language picker ---------- */
html[data-i18n="pending"] body { visibility: hidden; }
.lang-wrap { position: relative; display: inline-flex; }
.lang-btn { font: 600 12px var(--mono); color: var(--dim); background: transparent; border: 1px solid var(--line); border-radius: 99px; padding: 4px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.lang-btn .ico { width: 14px; height: 14px; color: var(--accent); }
.lang-btn:hover, .lang-btn:focus-visible, .lang-btn[aria-expanded="true"] { color: var(--ink); border-color: var(--accent); outline: none; }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; width: 230px; padding: 12px; border-radius: 12px; background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .55); display: grid; gap: 4px; animation: rise .18s ease both; text-align: left; }
.lang-menu b { font-size: 13px; margin-bottom: 4px; }
.lang-menu button { text-align: left; font: 500 14px var(--sans); color: var(--ink); background: transparent; border: 0; border-radius: 8px; padding: 7px 10px; cursor: pointer; }
.lang-menu button:hover, .lang-menu button:focus-visible { background: var(--tint-20); outline: none; }
.lang-menu button[aria-pressed="true"] { background: var(--tint-30); color: var(--accent); font-weight: 700; }
.lang-menu p { margin: 6px 2px 0; font-size: 12px; line-height: 1.45; color: var(--dim); }
/* a game that isn't in your language */
.lang-warn { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45; background: rgba(242, 181, 58, .12); border: 1px solid rgba(242, 181, 58, .4); }
.lang-warn .ico { flex: none; width: 18px; height: 18px; color: #d99a1a; margin-top: 1px; }
.lang-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.lang-chip { font: 12px var(--mono); padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line); color: var(--dim); }
.lang-chip.on { border-color: var(--accent); color: var(--accent); }
.lang-field .lang-pitch { margin: 2px 0 10px; font-size: 14px; line-height: 1.5; padding: 10px 12px; border-radius: 10px; background: var(--tint-10); border: 1px solid var(--accent-edge); }
.lang-field .lang-tip { margin-top: 10px; line-height: 1.5; }
.lang-field code { font: 12px var(--mono); padding: 1px 5px; border-radius: 5px; background: var(--tint-20); }
/* small screens: the little buttons in the menu wrap onto a second line instead of running off the edge */
[data-theme-switch] { flex-wrap: wrap; gap: 6px 0; justify-content: flex-end; }
.lang-wrap { margin-right: 6px; }
@media (max-width: 600px) {
  .lang-btn { padding: 4px 8px; }
  .app-btn { font-size: 0; padding: 5px 8px; }   /* (just the download icon) */
  .app-btn .ico { font-size: 13px; width: 14px; height: 14px; }
  .lang-menu { right: auto; left: 0; }
}

/* early access: games still in development that cost €1 to play */
.tag.paid, .devflag.paidflag { color: var(--gold); border-color: var(--gold); }
.paidnote { font-size: 14px; line-height: 1.5; color: var(--dim); max-width: 60ch; margin: 14px 0 0; }
.paidnote.bad { color: #e5534b; }
.sales-sum { font: 14px var(--mono); color: var(--dim); margin: 0 0 10px; }
.sales-sum b { color: var(--ink); }
.remembered { font-size: 14px; color: var(--dim); margin: 0 0 4px; }
.remembered b { color: var(--ink); }

/* ---------- home: the library, with games in development in one long column alongside ---------- */
body.home .wrap { max-width: 1300px; }
.home-cols { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 34px; align-items: start; }
.devside { position: sticky; top: 14px; max-height: calc(100vh - 28px); display: flex; flex-direction: column; margin-bottom: 40px;
  background: radial-gradient(120% 50% at 50% 0%, var(--tint-10), transparent 70%), var(--card); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); padding: 16px 10px 6px 14px; }
.devside-head { padding-right: 4px; }
.devside-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 19px; font-weight: 750; letter-spacing: -.02em; }
.devside-head h2 .spark { width: 10px; height: 10px; }
.devside-head .count { margin-left: auto; font-size: 12px; border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px; }
.devside-head p { margin: 6px 0 12px; font-size: 13px; color: var(--dim); line-height: 1.45; }
.devlist { list-style: none; margin: 0; padding: 0 4px 10px 0; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.devlist .empty { padding: 12px 4px; font-size: 13px; }
.devitem { animation: rise .35s ease both; animation-delay: calc(min(var(--i), 12) * 30ms); }
.devlink { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 11px; align-items: center; padding: 7px; border-radius: 10px; color: inherit; text-decoration: none; border: 1px solid transparent; transition: background .15s, border-color .15s; }
.devlink:hover, .devlink:focus-visible { background: var(--hover); border-color: var(--line); outline: none; }
.devlink:focus-visible { border-color: var(--accent); }
.devthumb { border-radius: 8px; }
.devthumb .blank { font-size: 20px; }
.devlink:hover .devthumb img { transform: scale(1.05); }
.devinfo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.devinfo b { font-size: 14px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.devby { font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.devplays { font: 11px var(--mono); }
.devplays .ico { width: 10px; height: 10px; vertical-align: -1px; }
.devtag { align-self: flex-start; font: 10.5px var(--mono); color: var(--accent); border: 1px solid var(--accent-edge); border-radius: 99px; padding: 1px 7px; }
.devtag.paid { color: var(--gold); border-color: var(--gold); }
.devbar { display: flex; align-items: center; gap: 6px; }
.devbar .progress { flex: 1; margin: 0; height: 5px; max-width: none; }
/* the top game gets a big cover */
.devitem.first .devlink { grid-template-columns: 1fr; padding: 8px; background: var(--hover); border-color: var(--line); margin-bottom: 6px; }
.devitem.first .devthumb { border-radius: 10px; }
.devitem.first .devinfo b { font-size: 16px; }
@media (max-width: 1000px) {
  .home-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* on narrower screens the column becomes a row near the top, so it's still easy to find */
  .devside { order: -1; position: static; max-height: none; margin-bottom: 38px; padding: 16px 0 6px 14px; }
  .devlist { flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 10px; padding: 0 14px 12px 0; scroll-snap-type: x mandatory; }
  .devitem { flex: 0 0 200px; scroll-snap-align: start; }
  .devlink, .devitem.first .devlink { grid-template-columns: 1fr; padding: 6px; margin: 0; }
}
/* library cards: the game's description slides up over the cover on hover */
.cover-blurb { position: absolute; inset: auto 0 0; padding: 26px 12px 10px; font-size: 12.5px; line-height: 1.4; color: #f2f5fb; background: linear-gradient(transparent, rgba(5, 8, 14, .92) 38%);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
@media (hover: hover) { .card:hover .cover-blurb, .card:focus-visible .cover-blurb { opacity: 1; transform: none; } }

/* ---------- upload page: a dashboard with tabs ---------- */
body.dash-page .wrap { max-width: 1180px; }
main.doc.dash { max-width: none; }
.panel .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; overflow: visible; padding: 0; margin: 0; }   /* (not the scrolling shelf rows) */
.dash-head { max-width: 680px; }
.signed-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; align-items: start; margin-top: 18px; }
.signed-out h2 { margin: 0; font-size: 18px; }
.signed-out .dim { margin: 0; font-size: 14px; line-height: 1.5; }
.code-form { display: flex; flex-direction: column; gap: 14px; }
.remembered { font-size: 14px; color: var(--dim); margin: 0; line-height: 1.5; }
.remembered b { color: var(--ink); }
.dash-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 30px; align-items: start; margin-top: 8px; scroll-margin-top: 12px; }
.dash-tabs { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 3px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.dash-tabs button { display: flex; align-items: center; gap: 9px; width: 100%; font: 500 14px var(--sans); color: var(--dim); background: transparent; border: 0; border-radius: 9px; padding: 9px 10px; cursor: pointer; text-align: left; white-space: nowrap; }
.dash-tabs button .ico { width: 16px; height: 16px; flex: none; }
.dash-tabs button:hover { color: var(--ink); background: var(--hover); }
.dash-tabs button[aria-selected="true"] { color: var(--ink); background: var(--tint-20); box-shadow: inset 3px 0 0 var(--accent); }
.dash-tabs button:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
.tab-n { margin-left: auto; font: 600 11px var(--mono); color: var(--dim); background: var(--hover); border-radius: 99px; padding: 1px 7px; min-width: 20px; text-align: center; }
.tab-n:empty { display: none; }
.tab-n.hot { color: var(--accent-ink); background: var(--accent); }
.dash-panel { min-width: 0; animation: rise .25s ease both; }
.panel-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.panel-head h2 { margin: 0 !important; font-size: 22px !important; font-weight: 700 !important; letter-spacing: -.02em; }
.panel-head .go { margin-left: auto; }
.go.small { padding: 7px 12px; font-size: 13px; gap: 6px; }
.go .ico { width: 15px; height: 15px; }
.mine-filter { display: inline-flex; gap: 4px; }
.mine-filter button { font: 500 13px var(--sans); color: var(--dim); background: transparent; border: 1px solid var(--line); border-radius: 99px; padding: 4px 11px; cursor: pointer; }
.mine-filter button[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.mine-stats { margin: -4px 0 16px; font-size: 14px; color: var(--dim); }
.mine-stats b { color: var(--ink); font-variant-numeric: tabular-nums; }
/* your games: cards */
.mine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.mine-card { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); transition: border-color .15s; }
.mine-card:hover { border-color: var(--accent-edge); }
.mine-card.gone { opacity: .55; }
.mine-cover { align-self: start; border-radius: 8px; }
.mine-cover .blank { font-size: 26px; }
.mine-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mine-info > b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mine-info > .dim { font: 12px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mine-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mine-chips .rstat { margin: 0; }
.rstat.live { color: #3fb27f; background: rgba(63, 178, 127, .12); }
.rstat.dev { color: var(--gold); background: rgba(242, 181, 58, .12); }
.mine-nums { display: inline-flex; align-items: center; gap: 4px; font: 11px var(--mono); color: var(--dim); }
.mine-nums .ico, .mine-nums svg { width: 11px; height: 11px; }
.mine-info .acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.mine-info .acts .ghost, .mine-info .acts .danger { padding: 4px 10px; font-size: 12.5px; }
.mine-info .msg:empty { display: none; }
.mine-empty { grid-column: 1 / -1; text-align: center; padding: 40px 16px; border: 1.5px dashed var(--line); border-radius: 14px; color: var(--dim); }
.mine-empty .go { margin: 0 auto; }
/* the upload form: two columns, the files and Upload button on the right */
.upform { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.up-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.up-side { align-self: stretch; }
.up-card .check { flex-wrap: wrap; row-gap: 2px; }
.up-card .check > .hint { flex-basis: 100%; padding-left: 26px; }
/* the Upload button stays in view at the bottom of the screen while the form is long */
.up-send { position: sticky; bottom: 12px; z-index: 2; box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .55); }
.up-card h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 650; }
.stepn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 50%; font: 700 12px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--accent-ink); background: var(--accent); }
.up-card fieldset { border: 0; padding: 0; }
.up-card legend { font-size: 15px; font-weight: 650; padding: 0; margin-bottom: 4px; }
.up-card .drop { max-width: none; }
.up-send { border-color: var(--accent-edge); background: radial-gradient(120% 120% at 0% 0%, var(--tint-10), transparent 60%), var(--card); }
.up-send .go { padding: 10px 22px; font-weight: 600; }
/* founders */
.f-card { margin-bottom: 18px; }
.f-card h2 { margin: 0 !important; display: flex; align-items: center; gap: 8px; }
.f-card h3 { margin: 6px 0 0; font-size: 15px; }
.f-card .dim { margin: 0; font-size: 14px; line-height: 1.5; }
.f-card .review-list { margin-bottom: 0; }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.tile { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px 6px 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.tile-cover { border-radius: 6px; }
.tile-cover .blank { font-size: 16px; }
.tile-info { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.tile-info b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-info .dim { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .star-btn { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; padding: 4px 10px; font-size: 12px; }
.tile .star-btn[aria-pressed="true"] { color: #1a1200; background: #f2b53a; border-color: #f2b53a; }
.tile .star-btn.paid[aria-pressed="true"] { color: var(--ink); background: transparent; border-color: var(--gold); }
@media (max-width: 860px) {
  .dash-body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* tabs become a row along the top that scrolls sideways */
  .dash-tabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; top: 6px; z-index: 5; padding: 6px; }
  .dash-tabs button { width: auto; flex: none; }
  .dash-tabs button[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--accent); }
  .upform { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) { .mine-grid { grid-template-columns: minmax(0, 1fr); } .mine-card { grid-template-columns: 92px minmax(0, 1fr); } }
.foot-nav { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 18px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px dashed var(--line); }
.foot-nav a { color: var(--dim); text-decoration: none; }
.foot-nav a:hover, .foot-nav a:focus-visible { color: var(--ink); }
.spotlight.waiting { min-height: min(420px, 120vw); }   /* (space kept while the play counts load) */
/* game page: the cover is a big Play button too */
.cover-play { position: absolute; inset: 0; display: grid; place-items: center; border: 0; padding: 0; background: radial-gradient(circle at center, rgba(5, 8, 14, .35), transparent 60%); cursor: pointer; opacity: 0; transition: opacity .2s ease; }
.cover-play .ico, .cover-play svg { width: 64px; height: 64px; padding: 18px; border-radius: 50%; color: var(--accent-ink); background: var(--accent); box-shadow: 0 10px 30px -8px var(--glow); transform: scale(.9); transition: transform .2s ease; }
.cover-play:hover, .cover-play:focus-visible { opacity: 1; outline: none; }
.cover-play:hover .ico, .cover-play:hover svg { transform: none; }
@media (hover: none) { .cover-play { opacity: 1; background: transparent; } .cover-play .ico, .cover-play svg { width: 54px; height: 54px; padding: 15px; opacity: .92; } }

/* ---------- Hall of Fame (scores.html) ---------- */
.fame-intro { padding-bottom: 6px; }
.champs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.champ { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); animation: rise .4s ease both; animation-delay: calc(var(--i) * 50ms); }
.champ.first { border-color: #f2b53a; background: radial-gradient(120% 140% at 0% 0%, rgba(242, 181, 58, .16), transparent 60%), var(--card); }
.champ.me { box-shadow: inset 0 0 0 1px var(--accent); }
.champ-n { font: 800 26px/1 var(--sans); color: var(--dim); text-align: center; }
.champ.first .champ-n { color: #f2b53a; }
.champ-name { display: flex; flex-direction: column; min-width: 0; }
.champ-name b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.champ-name .dim { font-size: 12px; color: var(--dim); }
.champ-crown .ico, .champ-crown svg { width: 22px; height: 22px; color: #f2b53a; }
.fame-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; padding-bottom: 40px; }
.fame-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); animation: rise .4s ease both; animation-delay: calc(min(var(--i), 10) * 50ms); }
.fame-head { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.fame-head:hover b { color: var(--accent); }
.fame-cover { border-radius: 8px; }
.fame-cover .blank { font-size: 22px; }
.fame-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fame-title b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fame-title .dim { font-size: 12px; color: var(--dim); }
.fame-card .board-list li { padding: 6px 10px; }
.fame-card .board-list .rank .ico { width: 18px; height: 18px; }
.fame-play { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font: 600 13px var(--sans); color: var(--accent); text-decoration: none; padding: 4px 2px; }
.fame-play .ico { width: 13px; height: 13px; }
.fame-play:hover { text-decoration: underline; }
.board-head-link { margin-left: auto; font: 12px var(--mono); color: var(--accent); text-decoration: none; }
.fame-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.fame-link .ico { width: 15px; height: 15px; color: #f2b53a; }
.empty .ghost { margin-top: 10px; }
.empty p { margin: 0; }

/* ---------- live leaderboards ---------- */
.stage-wrap { flex: 1; min-height: 0; display: flex; position: relative; background: #000; }
.stage-wrap .stage { flex: 1; min-width: 0; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff5f57; box-shadow: 0 0 0 0 rgba(255, 95, 87, .6); animation: live-pulse 1.8s ease-out infinite; flex: none; }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 7px rgba(255, 95, 87, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 95, 87, 0); } }
.live-chip { display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; }
.live-chip[aria-expanded="true"] { border-color: #ff5f57; }
.live-board { width: 270px; flex: none; display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--bar); border-left: 1px solid var(--line); overflow-y: auto; color: var(--ink); font-size: 14px; }
.lb-head { display: flex; align-items: center; gap: 8px; }
.lb-head b { flex: 1; font-size: 14px; }
.lb-x { border: 0; background: transparent; color: var(--dim); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 6px; }
.lb-x:hover { color: var(--ink); background: var(--hover); }
.lb-me { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--tint-10); border: 1px solid var(--accent-edge); }
.lb-me > span:first-child { font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.lb-me b { font: 800 24px/1.1 var(--sans); font-variant-numeric: tabular-nums; color: var(--accent); }
.lb-me .dim { font-size: 12px; color: var(--dim); }
.lb-join { display: grid; gap: 8px; padding: 10px; border: 1px dashed var(--accent-edge); border-radius: 10px; }
.lb-join input { font: 14px var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 6px 10px; }
.lb-join-acts { display: flex; gap: 6px; }
.live-board .board-list li { padding: 6px 9px; grid-template-columns: 28px 1fr auto; gap: 8px; font-size: 13px; }
.live-board .board-list .rank .ico { width: 18px; height: 18px; }
.live-board .board-list b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-note { margin: 0; font-size: 12px; color: var(--dim); }
.lb-note b { color: var(--ink); }
.lb-note .link { font-size: 12px; }
.live-pill { display: inline-flex; align-items: center; gap: 6px; font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #ff5f57; border: 1px solid rgba(255, 95, 87, .5); border-radius: 99px; padding: 2px 8px; }
.stage-wrap:fullscreen { background: #000; }
@media (max-width: 760px) {
  /* on small screens the board floats over the bottom of the game, and folds into the chip at the top */
  .live-board { position: absolute; inset: auto 8px 8px auto; width: min(280px, calc(100% - 16px)); max-height: 55%; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); z-index: 2; }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.settled > * { animation: none !important; }
.fame-title b { display: flex; align-items: center; gap: 8px; }
.fame-title .live-pill { font-size: 9.5px; padding: 1px 6px; }
.you-row b .ico { width: 16px; height: 16px; vertical-align: -3px; }

/* Share page: a prompt to copy for an AI */
.prompt-box { position: relative; }
.prompt-box pre { max-height: 360px; overflow: auto; white-space: pre-wrap; padding-top: 46px; }
.prompt-box .go { position: absolute; top: 10px; right: 10px; }

/* upload progress */
.up-bar { width: 100%; height: 8px; appearance: none; -webkit-appearance: none; border: 0; border-radius: 99px; background: var(--hover); overflow: hidden; }
.up-bar::-webkit-progress-bar { background: var(--hover); border-radius: 99px; }
.up-bar::-webkit-progress-value { background: var(--accent); border-radius: 99px; transition: width .3s ease; }
.up-bar::-moz-progress-bar { background: var(--accent); border-radius: 99px; }
/* home: what's new on recently updated games */
.upd-note { margin: 2px 0 0; display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; color: var(--dim); }
.upd-note time { font: 11px var(--mono); color: var(--accent); letter-spacing: .02em; }
.upd-note span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* =====================================================================================================
   2026-10-19 redesign: a sticky glass header, a hero with a wall of covers, a cinematic Game of the day,
   genre chips, lifted cards, game pages tinted by their cover, and a fuller footer. (Layered on top of
   everything above, so older rules still work as a base.)
   ===================================================================================================== */
:root { --radius: 14px; --head-h: 66px; --shadow-lg: 0 30px 60px -30px rgba(0, 0, 0, .65); --shadow-md: 0 14px 34px -18px rgba(0, 0, 0, .55); }
:root[data-theme="light"] { --shadow-lg: 0 30px 60px -32px rgba(20, 40, 80, .35); --shadow-md: 0 14px 30px -18px rgba(20, 40, 80, .3); }
html { scroll-padding-top: calc(var(--head-h) + 12px); }

/* --- header: sticks to the top, frosted glass, a line appears once you scroll --- */
.top { position: sticky; top: 0; z-index: 25; margin-inline: -20px; padding: 12px 20px; min-height: var(--head-h);
  background: transparent; border-bottom: 1px solid transparent; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
/* once you scroll: frosted glass across the full width of the window */
.scrolled .top { border-bottom-color: var(--line); background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--bg) 84%, transparent); clip-path: inset(0 -100vmax); }
body.playing .top { position: static; }
.mark { font-size: 19px; font-weight: 750; }
.mark .spark { transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.mark:hover .spark { transform: rotate(225deg) scale(1.2); }
.top nav { gap: 4px; }
.top nav > a { padding: 6px 11px; border-radius: 99px; transition: background-color .15s ease, color .15s ease; }
.top nav > a:hover { background: var(--hover); }
.top nav > a[aria-current="page"] { text-decoration: none; color: var(--ink); background: var(--tint-20); box-shadow: inset 0 0 0 1px var(--accent-edge); }
/* things that stick below the header */
.devside, .dash-tabs, .up-side { top: calc(var(--head-h) + 12px) !important; }
.devside { max-height: calc(100vh - var(--head-h) - 26px); }

/* --- hero: text on the left, a tilted wall of the most-played covers on the right --- */
body.home .hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 46px 40px 40px; margin-top: 10px;
  border: 1px solid var(--line); border-radius: 26px; isolation: isolate; overflow: hidden;
  background: radial-gradient(60% 90% at 0% 0%, var(--tint-30), transparent 60%), radial-gradient(50% 80% at 100% 100%, rgba(255, 95, 140, .14), transparent 60%), var(--card); }
body.home .hero::before { content: ""; position: absolute; inset: -40%; z-index: -1; background: conic-gradient(from 0deg at 30% 40%, transparent, var(--tint-20), transparent 30%, rgba(255, 170, 60, .10), transparent 60%); animation: hero-turn 26s linear infinite; }
@keyframes hero-turn { to { transform: rotate(360deg); } }
body.home .hero::after { display: none; }
.hero-text { min-width: 0; position: relative; }
.hero-eyebrow { display: inline-flex !important; align-items: center; gap: 8px; margin-bottom: 14px !important; padding: 5px 12px; border-radius: 99px; background: var(--tint-10); border: 1px solid var(--accent-edge); color: var(--accent); }
.hero-eyebrow .live-dot { background: #3fd68b; box-shadow: none; animation: none; }
body.home .hero h1 { font-size: clamp(34px, 5.2vw, 60px); font-weight: 850; letter-spacing: -.045em; line-height: .98; }
body.home .hero h1::after { display: none; }
body.home .hero h1 .now { display: block; margin-top: 6px; background: linear-gradient(100deg, var(--accent), #b58cff 45%, #ff7aa2 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.home .hero > .hero-text > p { margin-top: 14px; font-size: 16px; }
.hero-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.hero-acts .play-btn { margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; box-shadow: 0 14px 30px -12px var(--glow); }
.hero-acts .play-btn .ico { width: 14px; height: 14px; }
.hero-acts .btn-l { padding: 12px 20px; border-radius: 99px; background: color-mix(in srgb, var(--card) 60%, transparent); }
body.home .hero .stats { margin-top: 24px; }
.hero-art { position: relative; height: 330px; perspective: 900px; }
.hero-tile { position: absolute; width: 58%; border-radius: 14px; box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, .08); transition: transform .35s cubic-bezier(.2, .8, .2, 1), z-index 0s .1s; animation: tile-in .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--k) * 70ms); }
.hero-tile img { width: 100%; height: 100%; object-fit: cover; }
.hero-tile:nth-child(1) { left: 2%; top: 4%; transform: rotate(-7deg); z-index: 3; }
.hero-tile:nth-child(2) { right: 5%; top: 0; transform: rotate(5deg); z-index: 2; }
.hero-tile:nth-child(3) { left: 20%; top: 34%; transform: rotate(2deg); z-index: 5; }
.hero-tile:nth-child(4) { right: 6%; top: 46%; transform: rotate(-4deg); z-index: 4; }
.hero-tile:nth-child(5) { left: 0; bottom: 0; transform: rotate(4deg); z-index: 1; width: 48%; }
.hero-tile:nth-child(6) { right: 18%; bottom: -4%; transform: rotate(-2deg); z-index: 0; width: 44%; }
.hero-tile:hover { transform: rotate(0) scale(1.08) translateY(-6px); z-index: 9; transition: transform .35s cubic-bezier(.2, .8, .2, 1), z-index 0s; }
@keyframes tile-in { from { opacity: 0; translate: 0 30px; } }
@media (max-width: 860px) { body.home .hero { grid-template-columns: minmax(0, 1fr); padding: 30px 22px 26px; } .hero-art { height: 220px; order: -1; margin: -6px 0 6px; } }
@media (max-width: 520px) { .hero-art { height: 170px; } }

/* --- Game of the day: the cover, blurred, behind the whole panel --- */
body.home .spotlight { position: relative; isolation: isolate; overflow: hidden; padding: 28px; border-radius: 26px; border: 1px solid var(--line); background: var(--card); margin-bottom: 46px; }
body.home .spotlight::before { content: ""; position: absolute; inset: -60px; z-index: -1; background: var(--spot-img, none) center / cover; filter: blur(60px) saturate(1.6); opacity: .45; transform: scale(1.1); }
body.home .spotlight::after { content: ""; display: block; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, transparent 30%, color-mix(in srgb, var(--card) 70%, transparent) 75%); opacity: 1; filter: none; height: auto; }
:root[data-theme="light"] body.home .spotlight::before { opacity: .3; }
body.home .spot-cover { border-radius: 18px; box-shadow: var(--shadow-lg); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
body.home .spot-cover:hover { transform: translateY(-4px) rotate(-.6deg); }
body.home .spot-text h2 { font-size: clamp(32px, 4.6vw, 54px); }
body.home .spot-text .eyebrow { padding: 4px 10px; border-radius: 99px; background: color-mix(in srgb, var(--card) 70%, transparent); border: 1px solid var(--line); }
@media (max-width: 760px) { body.home .spotlight { padding: 16px; } }

/* --- shelves and cards: lifted on hover, softer corners --- */
.shelf-head h2, .library .shelf-head h2 { font-size: 23px; font-weight: 800; letter-spacing: -.03em; }
.card .cover { border-radius: var(--radius); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, border-color .3s ease; }
@media (hover: hover) {
  .card:hover .cover, .card:focus-visible .cover { transform: translateY(-5px); box-shadow: 0 22px 40px -22px var(--glow), var(--shadow-md); border-color: var(--accent-edge); }
}
.gcard .meta b { font-size: 15px; }
.tag { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: color-mix(in srgb, var(--card) 78%, transparent); }

/* --- genre chips --- */
.genre-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 14px; margin: -6px 0 8px; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.genre-chips::-webkit-scrollbar { display: none; }
.gchip { flex: none; display: inline-flex; align-items: center; gap: 6px; font: 500 13px var(--sans); color: var(--dim); background: var(--card); border: 1px solid var(--line); border-radius: 99px; padding: 6px 12px; cursor: pointer; transition: all .15s ease; }
.gchip i { font: 600 10.5px var(--mono); font-style: normal; color: var(--dim); background: var(--hover); border-radius: 99px; padding: 1px 6px; }
.gchip:hover { color: var(--ink); border-color: var(--accent-edge); }
.gchip[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); box-shadow: 0 8px 20px -10px var(--glow); }
.gchip[aria-pressed="true"] i { color: var(--accent-ink); background: rgba(255, 255, 255, .3); }
#genreBox { display: none !important; }
@media (max-width: 600px) { #genreBox { display: inline-flex !important; } .genre-chips { display: none; } }
.search { border-radius: 99px; padding: 10px 16px; }
.tools .sort select { border-radius: 99px; }

/* --- buttons --- */
.play-btn, .big-play { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #b58cff)); }
.big-play { box-shadow: 0 16px 34px -14px var(--glow); }
.big-play:hover, .big-play:focus-visible, .play-btn:hover { box-shadow: 0 20px 40px -14px var(--glow); }
.btn-l, .ghost { border-radius: 99px; transition: border-color .15s ease, background-color .15s ease, transform .15s ease; }
.btn-l:hover, .ghost:hover { background: var(--hover); }

/* --- game pages: the cover's colours wash in from the top --- */
body.game-bg::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 80vh; z-index: -1; pointer-events: none;
  background: var(--game-bg) center / cover; filter: blur(80px) saturate(1.6); opacity: .32; transform: scale(1.15);
  -webkit-mask-image: linear-gradient(#000 20%, transparent); mask-image: linear-gradient(#000 20%, transparent); }
:root[data-theme="light"] body.game-bg::before { opacity: .22; }
body.playing.game-bg::before { display: none; }
.detail > .cover { border-radius: 20px; box-shadow: var(--shadow-lg); }
.detail h1 { font-size: clamp(34px, 5vw, 56px); font-weight: 850; letter-spacing: -.045em; }

/* --- footer --- */
.foot { margin-top: 30px; padding: 26px 0 46px; border-top: 1px solid var(--line); }
.foot-nav { border-bottom: 0; padding-bottom: 6px; gap: 6px 4px; }
.foot-nav a { padding: 5px 10px; border-radius: 99px; }
.foot-nav a:hover { background: var(--hover); }

@media (prefers-reduced-motion: reduce) {
  body.home .hero::before, .hero-tile { animation: none !important; }
  .card .cover, .hero-tile, body.home .spot-cover { transition: none !important; }
}
/* on small screens the menu wraps onto several rows, so the header scrolls away instead of sticking */
@media (max-width: 860px) {
  .top, .scrolled .top { position: static; background: transparent; box-shadow: none; clip-path: none; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html { scroll-padding-top: 12px; }
  .dash-tabs { top: 6px !important; }
}

/* phone-friendly games */
.mob-tag { position: absolute; left: 8px; bottom: 8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: #fff; background: rgba(10, 14, 22, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .18); z-index: 2; }
.mob-tag .ico, .mob-tag svg { width: 15px; height: 15px; }
.card:hover .mob-tag { opacity: 0; transition: opacity .2s; }   /* (out of the way of the description) */
.gchip.mob { color: var(--ink); border-color: var(--accent-edge); }
.gchip .ico { width: 14px; height: 14px; }
.mob-note { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 8px 12px; border-radius: 10px; font-size: 14px; color: var(--dim); background: var(--hover); border: 1px solid var(--line); width: fit-content; }
.mob-note .ico, .mob-note svg { width: 16px; height: 16px; flex: none; }
.mob-note.ok { color: #2fae74; background: rgba(63, 214, 139, .08); border-color: rgba(63, 214, 139, .35); }

/* likes */
.liked { display: inline-flex; align-items: center; gap: 4px; }
.liked .ico, .liked svg { width: 12px; height: 12px; }
.liked.hot { color: #2fae74; }
.liked-fact { display: inline-flex; align-items: center; gap: 5px; color: #2fae74; }
.liked-fact .ico, .liked-fact svg { width: 13px; height: 13px; }
/* badges in the corner of a card: plays on phones, has a leaderboard */
.cbadges { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 5px; z-index: 2; transition: opacity .2s; }
.cbadges .mob-tag { position: static; }
.lb-tag { color: #f2c35a !important; }
.card:hover .cbadges { opacity: 0; }
/* moving previews */
.cover-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; z-index: 1; }
.cover-preview.on { opacity: 1; }
.cover.pixel .cover-preview { image-rendering: pixelated; }
/* quick search */
.find-btn .ico { width: 16px; height: 16px; }
.qs { width: min(620px, calc(100vw - 32px)); max-height: min(560px, 80vh); margin: 12vh auto auto; padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--ink); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7); overflow: hidden; }
.qs[open] { display: flex; flex-direction: column; animation: qs-in .18s ease-out; }
@keyframes qs-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.qs::backdrop { background: rgba(5, 8, 14, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.qs-box { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.qs-ico .ico, .qs-ico svg { width: 20px; height: 20px; color: var(--dim); }
.qs-in { flex: 1; font: 500 18px var(--sans); color: var(--ink); background: none; border: 0; outline: none; }
.qs-list { list-style: none; margin: 0; padding: 8px; overflow-y: auto; }
.qs-list a { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px; border-radius: 10px; text-decoration: none; color: inherit; }
.qs-list li[aria-selected="true"] a, .qs-list a:hover { background: var(--tint-20); }
.qs-cover { border-radius: 7px; }
.qs-text { display: flex; flex-direction: column; min-width: 0; }
.qs-text b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-text span { font-size: 12.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-tag { font: 10.5px var(--mono); color: var(--accent); border: 1px solid var(--accent-edge); border-radius: 99px; padding: 1px 7px; }
.qs-empty { padding: 18px; color: var(--dim); text-align: center; }
.qs-hint { margin: 0; padding: 9px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--dim); }
.qs-hint kbd { font: 11px var(--mono); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; background: var(--hover); }
@media (hover: none) { .qs-hint { display: none; } }

/* =====================================================================================================
   2026-10-20: feels like an app — a tab bar on phones, press feedback, safe areas, loading skeletons
   ===================================================================================================== */
html { -webkit-tap-highlight-color: transparent; }
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.standalone .app-btn { display: none !important; }

/* tab bar (phones and small tablets) */
.tabbar { display: none; }
@media (max-width: 760px) {
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); }
  .tab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border: 0; border-radius: 12px; background: none; color: var(--dim); font: 500 10.5px var(--sans); text-decoration: none; cursor: pointer; transition: color .15s, background-color .15s, transform .1s; }
  .tab .ico, .tab svg { width: 22px; height: 22px; }
  .tab span { white-space: nowrap; }
  .tab[aria-current="page"] { color: var(--accent); }
  .tab[aria-current="page"] .ico { filter: drop-shadow(0 0 8px var(--glow)); }
  .tab:active { transform: scale(.92); background: var(--hover); }
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  body.playing { padding-bottom: 0; }
  body.playing .tabbar { display: none; }
  .to-top, .scroll-btns, [class*="scroll-"] { bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
  /* the top menu slims down: the tab bar has the main pages, the footer has the rest */
  .top nav > a, .top nav > .you-link, .find-btn { display: none !important; }
  .top { padding-block: 10px; }
  .top nav { flex-wrap: nowrap; }
  /* the live board and score bar sit above the tab bar when it shows */
}

/* press feedback on touch screens */
@media (hover: none) {
  .card:active .cover { transform: scale(.97); transition: transform .08s ease; }
  .play-btn:active, .big-play:active, .btn-l:active, .ghost:active, .go:active, .stoke:active, .gchip:active, .bell-btn:active { transform: scale(.95); transition: transform .08s ease; }
  .devlink:active, .you-row:active, .mine-card:active { background: var(--hover); }
}

/* loading skeletons */
.skel { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--hover) 0%, color-mix(in srgb, var(--hover) 55%, var(--line)) 40%, var(--hover) 80%); background-size: 300% 100%; animation: skel 1.3s ease-in-out infinite; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.skel-card { display: flex; flex-direction: column; gap: 8px; }
.skel-cover { aspect-ratio: 16 / 10; border-radius: var(--radius); }
.skel-line { height: 12px; width: 70%; }
.skel-line.short { width: 40%; }
.skel-line.big { height: 34px; width: 80%; }
.skel-spot { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.skel-spot::before, .skel-spot::after { display: none !important; }
.skel-text { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 760px) { .skel-spot { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* free trial of €1 games */
.trial-btn { display: inline-flex; align-items: center; gap: 7px; padding: 12px 18px; font-weight: 600; }
.trial-btn .ico { width: 16px; height: 16px; }
.trial-used { font-size: 13px; color: var(--dim); }
.trial-chip { display: inline-flex; align-items: center; gap: 6px; font: 600 13px var(--mono); font-variant-numeric: tabular-nums; color: var(--gold); border: 1px solid var(--gold); border-radius: 99px; padding: 4px 10px; white-space: nowrap; }
.trial-chip .ico { width: 14px; height: 14px; }
.trial-chip.low { color: #ff5f57; border-color: #ff5f57; animation: live-pulse 1.4s ease-out infinite; }
.trial-over { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 20px; text-align: center; background: radial-gradient(70% 60% at 50% 40%, var(--tint-20), transparent 70%), rgba(5, 8, 14, .92); color: #eef2f9; }
.trial-over h2 { margin: 0 0 8px; font-size: clamp(24px, 4vw, 34px); font-weight: 800; letter-spacing: -.03em; }
.trial-over p { margin: 0 auto 22px; max-width: 42ch; color: #a8b3c7; }
.trial-over-ico { display: block; width: 16px; height: 16px; margin: 0 auto 16px; background: var(--gold); border-radius: 3px; transform: rotate(45deg); box-shadow: 0 0 18px 3px rgba(242, 181, 58, .5); }
.trial-over-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; align-items: center; }

/* =====================================================================================================
   2026-10-20 (2): a home page that knows you — welcome back, playing right now, picked for you,
   maker of the week, daily streak
   ===================================================================================================== */
.streak { display: inline-flex; align-items: center; gap: 2px; margin-left: 5px; font: 700 11px var(--mono); color: #ff8a3d; }
.streak .flame { width: 12px; height: 12px; }
.tab .streak { position: absolute; margin: 0; transform: translate(14px, -6px); font-size: 10px; }
.tab { position: relative; }

.welcome-back { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 16px; align-items: center; margin: 0 0 22px; padding: 12px 16px 12px 12px;
  border: 1px solid var(--accent-edge); border-radius: 18px; background: radial-gradient(90% 140% at 0% 50%, var(--tint-20), transparent 70%), var(--card); animation: rise .4s ease both; }
.wb-cover { border-radius: 10px; }
.wb-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wb-hi { font: 600 12px var(--mono); letter-spacing: .04em; color: var(--accent); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.wb-text b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-text .dim { font-size: 13px; color: var(--dim); }
.wb-go { margin: 0 !important; display: inline-flex; align-items: center; gap: 7px; }
.wb-go .ico { width: 13px; height: 13px; }
@media (max-width: 560px) { .welcome-back { grid-template-columns: 84px minmax(0, 1fr); } .wb-go { grid-column: 1 / -1; justify-content: center; } }

#shelfLive .shelf-head h2 { display: flex; align-items: center; gap: 10px; }
#shelfLive .live-dot { width: 10px; height: 10px; }

.maker-week { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 26px; align-items: center; margin: 0 0 44px; padding: 24px;
  border: 1px solid var(--line); border-radius: 22px; background: radial-gradient(70% 120% at 0% 0%, rgba(255, 138, 61, .12), transparent 60%), var(--card); }
.mw-who { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.mw-name { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.mw-name b { font-size: 26px; font-weight: 850; letter-spacing: -.035em; }
.mw-avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; font: 800 22px var(--sans); color: var(--accent-ink); background: var(--accent); box-shadow: 0 10px 26px -10px var(--glow); }
.mw-avatar .ico, .mw-avatar svg { width: 26px; height: 26px; }
.mw-who p { margin: 0; color: var(--dim); font-size: 14px; max-width: 34ch; }
.mw-facts { font: 12px var(--mono); color: var(--dim); }
.mw-games { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 820px) { .maker-week { grid-template-columns: minmax(0, 1fr); padding: 18px; } .mw-games { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
.big-play.waiting { background: var(--hover); color: var(--dim); box-shadow: none; cursor: not-allowed; transform: none; font-variant-numeric: tabular-nums; }
.big-play .ico { vertical-align: -2px; }

/* the all-access pass (every €1 game for 30 days) and pay what you want */
.pass-btn, .pwyw-btn { display: inline-flex; align-items: center; gap: 7px; padding: 12px 18px; font-weight: 600; }
.pass-btn .ico, .pwyw-btn .ico { width: 16px; height: 16px; }
.pass-btn .ico { color: var(--gold); }
.pwyw-btn .ico { color: #ff6b8b; }
.dev-pass { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 13px; line-height: 1.35; color: var(--dim); text-decoration: none; transition: border-color .15s, background .15s; }
.dev-pass b { display: block; color: var(--ink, inherit); font-size: 14px; }
.dev-pass .ico { flex: none; width: 18px; height: 18px; color: var(--gold); }
.dev-pass:hover { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.pass-card { margin-top: 40px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--gold) 6%, transparent); }
.pass-card h2 { margin: 6px 0 0; font-size: 24px; letter-spacing: -.02em; }
.pass-card p { line-height: 1.55; }
.pass-card .acts { margin-top: 16px; }
.pass-card .big-play .ico { width: 18px; height: 18px; }
.pass-state { color: var(--gold); }
.trial-over-acts .btn .ico { width: 15px; height: 15px; vertical-align: -2px; }

/* ---------- 2026-10 refresh: top charts, a fuller footer, a tidier game page, sections that fade in ---------- */
/* top charts (home): three short ranked lists side by side; on narrow screens they scroll sideways */
.charts { margin: 0 0 44px; }
.chart-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.chart { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 12px 10px; min-width: 0; }
.chart h3 { display: flex; align-items: center; gap: 8px; margin: 0 6px 10px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.chart-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.chart-ico .ico, .chart-ico svg { width: 15px; height: 15px; }
.chart ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.chart-row { display: grid; grid-template-columns: 18px 56px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px; border-radius: 12px; text-decoration: none; color: inherit; transition: background .15s; }
.chart-row:hover, .chart-row:focus-visible { background: var(--hover); outline: none; }
.chart-n { font: 800 16px var(--sans); color: var(--dim); text-align: center; font-variant-numeric: tabular-nums; }
.chart li:first-child .chart-n { color: var(--gold); }
.chart-thumb { border-radius: 8px; }
.chart-thumb .blank { font-size: 14px; }
.chart-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.chart-info b { font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-info span { font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-stat { display: inline-flex; align-items: center; gap: 4px; font: 12px var(--mono); color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chart-stat .ico, .chart-stat svg { width: 12px; height: 12px; }
.chart-row:hover .chart-thumb img { transform: scale(1.06); }
@media (max-width: 1100px) {
  .chart-cols { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(270px, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
  .chart { scroll-snap-align: start; }
}

/* the footer: a short about, a live total, and every page in three columns */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.foot-grid { flex-basis: 100%; display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 28px; padding-bottom: 26px; margin-bottom: 6px; border-bottom: 1px dashed var(--line); }
.foot-brand .mark { color: var(--ink); font-size: 17px; }
.foot-brand p { margin: 10px 0 0; max-width: 36ch; line-height: 1.5; color: var(--dim); font-size: 13px; }
.foot .foot-stats { display: inline-flex; align-items: center; gap: 6px; font: 12px var(--mono); color: var(--accent); }
.foot-stats .ico, .foot-stats svg { width: 12px; height: 12px; }
.foot-col { display: flex; flex-direction: column; gap: 8px; }
.foot-col h4 { margin: 0 0 2px; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.foot .foot-col a { color: var(--dim); text-decoration: none; width: fit-content; }
.foot .foot-col a:hover, .foot .foot-col a:focus-visible { color: var(--accent); }
.foot > .foot-nav { display: none; }
@media (max-width: 760px) {
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 16px; }
  .foot-brand { grid-column: 1 / -1; }
}

/* game page: Play, Stoke and Favorite first; the quieter buttons in a lighter row under them */
.detail .acts-2 { margin-top: 12px; gap: 6px; }
.detail .acts-2 .btn-l { padding: 7px 13px; font-size: 13px; background: transparent; border-color: transparent; color: var(--dim); }
.detail .acts-2 .btn-l:hover, .detail .acts-2 .btn-l:focus-visible { color: var(--ink); background: var(--hover); border-color: var(--line); }
.detail .acts-2 .pwyw-btn { color: var(--ink); border-color: var(--line); }
.detail .acts-2 .ico { width: 14px; height: 14px; }
/* the facts (added, plays, stokes, rating…) as small pills */
.detail .facts { gap: 6px; font: 12.5px var(--sans); }
.detail .facts > span:not([hidden]) { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 70%, transparent); border-radius: 99px; padding: 4px 11px; }
.detail .facts > span:empty { display: none; }
.detail .facts .ico { width: 13px; height: 13px; }
.detail .facts .pick-chip { font: inherit; }
/* the maker card, under the leaderboard on the left */
.detail { grid-template-areas: "cover info" "shots info" "board info" "maker info" ". info"; grid-template-rows: auto auto auto auto 1fr; }
.detail > .maker-card { grid-area: maker; }
@media (max-width: 860px) { .detail { grid-template-areas: "cover" "info" "shots" "board" "maker"; grid-template-rows: none; } }
.maker-card { margin-top: 26px; padding: 20px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; display: grid; gap: 12px; }
.mc-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mc-avatar { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; font: 800 22px var(--sans); color: var(--accent-ink); background: var(--accent); box-shadow: 0 10px 26px -10px var(--glow); text-decoration: none; flex: none; }
.mc-avatar .ico, .mc-avatar svg { width: 27px; height: 27px; }
.mc-who { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.mc-who .eyebrow { font-size: 11px; }
.mc-name { font-size: 22px; font-weight: 850; letter-spacing: -.03em; color: inherit; text-decoration: none; line-height: 1.1; }
.mc-name:hover { color: var(--accent); }
.mc-all { margin-left: auto; padding: 8px 14px; font-size: 13px; }
.mc-bio { margin: 0; color: var(--dim); font-size: 14px; line-height: 1.5; }
.mc-facts { font: 12px var(--mono); color: var(--dim); }
.mc-games { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mc-game { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; min-width: 0; }
.mc-game .cover { border-radius: 10px; }
.mc-game .blank { font-size: 20px; }
.mc-game b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-game:hover b { color: var(--accent); }
.mc-game:hover img { transform: scale(1.05); }

/* sections fade up as they scroll into view (site.js adds .reveal, then .in) */
.reveal { transition: opacity .55s cubic-bezier(.2, .8, .2, 1), transform .55s cubic-bezier(.2, .8, .2, 1); }
.reveal:not(.in) { opacity: 0; transform: translateY(18px); }
@media (prefers-reduced-motion: reduce) { .reveal:not(.in) { opacity: 1; transform: none; } }
.detail .acts-2 .fav-btn[aria-pressed="true"] { color: var(--ink); }
.detail .acts-2 .fav-btn .ico { color: #ff5f7e; }
/* phones: "More like this" two to a row, so it doesn't turn into a very long list of big covers */
@media (max-width: 560px) { .more .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .more .meta b { font-size: 14px; } }

/* ---------- 2026-10 refresh, part 2: Hall of Fame, maker and You pages ---------- */
/* Hall of Fame: champions on a podium (2nd, 1st, 3rd), the next few in a list beside it */
.fame-intro .stats { margin-top: 18px; }
.podium-wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: end; }
.podium-wrap:has(.champs[hidden]) { grid-template-columns: minmax(0, 640px); }
.podium { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.step { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; min-width: 0; animation: rise .5s cubic-bezier(.2, .8, .2, 1) both; }
.step-2 { animation-delay: .08s; } .step-1 { animation-delay: .16s; } .step-3 { animation-delay: .24s; }
.step-who { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; max-width: 100%; }
.step-who b { font-size: 16px; font-weight: 750; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step-who .dim { font-size: 11.5px; color: var(--dim); line-height: 1.3; }
.step-av { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font: 800 22px var(--sans); color: #fff; background: linear-gradient(135deg, hsl(var(--h) 70% 58%), hsl(calc(var(--h) + 40) 70% 42%)); box-shadow: 0 10px 24px -12px hsl(var(--h) 70% 40%); margin-bottom: 4px; }
.step-1 .step-av { width: 66px; height: 66px; font-size: 28px; box-shadow: 0 0 0 3px #f2b53a, 0 14px 30px -12px rgba(242, 181, 58, .6); }
.step .champ-crown { margin-bottom: -2px; }
.step .champ-crown .ico, .step .champ-crown svg { width: 26px; height: 26px; color: #f2b53a; }
.step-block { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding-top: 12px; border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; background: linear-gradient(180deg, var(--card), transparent); font: 800 28px var(--sans); color: var(--dim); }
.step-block .ico { width: 24px; height: 24px; }
.step-1 .step-block { height: 120px; border-color: rgba(242, 181, 58, .55); background: linear-gradient(180deg, rgba(242, 181, 58, .2), transparent); color: #f2b53a; }
.step-2 .step-block { height: 86px; }
.step-3 .step-block { height: 64px; }
.step.me .step-who b { color: var(--accent); }
.podium-wrap .champs { grid-template-columns: minmax(0, 1fr); align-self: end; }
@media (max-width: 760px) { .podium-wrap { grid-template-columns: minmax(0, 1fr); } }
/* latest records: who just got onto a board */
.latest { list-style: none; margin: 0 0 34px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.latest-row { display: grid; grid-template-columns: 30px 56px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: inherit; text-decoration: none; transition: border-color .15s, background .15s; }
.latest-row:hover, .latest-row:focus-visible { border-color: var(--accent); outline: none; }
.latest-row.me { border-color: var(--accent); background: var(--tint-10); }
.latest-rank { display: grid; place-items: center; font: 700 13px var(--mono); color: var(--dim); }
.latest-rank .ico { width: 22px; height: 22px; }
.latest-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; line-height: 1.35; }
.latest-text > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.latest-text .dim { font: 12px var(--mono); color: var(--dim); }
@media (max-width: 760px) { .latest { grid-template-columns: minmax(0, 1fr); } }
/* boards: the leader of each one stands out; games with no scores yet wait in one small row */
.fame-card .board-list li:first-child:not(.empty-board) { border-color: rgba(242, 181, 58, .5); background: linear-gradient(90deg, rgba(242, 181, 58, .14), transparent 70%), var(--card); }
.fame-waiting { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -20px 0 40px; }
.fame-waiting-lbl { font: 12px var(--mono); color: var(--dim); letter-spacing: .04em; margin-right: 4px; }
.wait-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 1px dashed var(--line); border-radius: 99px; background: var(--card); color: inherit; text-decoration: none; font-size: 13px; }
.wait-chip .cover { width: 42px; aspect-ratio: 16 / 10; border-radius: 99px; flex: none; }
.wait-chip .blank { font-size: 12px; }
.wait-chip .ico { width: 12px; height: 12px; color: var(--accent); }
.wait-chip:hover, .wait-chip:focus-visible { border-style: solid; border-color: var(--accent); outline: none; }

/* maker page: their most played game, big, on the right of the header */
.maker-hero.has-feature { grid-template-columns: auto minmax(0, 1fr) minmax(0, 340px); }
.maker-feature { display: flex; flex-direction: column; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 20px; background: color-mix(in srgb, var(--card) 80%, transparent); backdrop-filter: blur(10px); color: inherit; text-decoration: none; box-shadow: var(--shadow-lg); align-self: center; }
.maker-feature .cover { border-radius: 12px; }
.mf-text { display: flex; flex-direction: column; gap: 3px; padding: 0 4px 4px; }
.mf-text b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.mf-text .dim { display: inline-flex; align-items: center; gap: 5px; font: 12px var(--mono); color: var(--dim); }
.mf-text .dim .ico, .mf-text .dim svg { width: 12px; height: 12px; }
.maker-feature:hover .mf-text b { color: var(--accent); }
@media (max-width: 900px) { .maker-hero.has-feature { grid-template-columns: auto minmax(0, 1fr); } .maker-feature { grid-column: 1 / -1; flex-direction: row; align-items: center; } .maker-feature .cover { width: 150px; flex: none; } }
@media (max-width: 560px) { .maker-hero.has-feature { grid-template-columns: 1fr; } .maker-feature .cover { width: 110px; } }
.sort-chips { display: inline-flex; gap: 6px; margin-left: auto; }
.sort-chips .gchip { padding: 5px 11px; font-size: 12.5px; }

/* You page: a player card next to the title */
.you-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 28px; align-items: center; }
@media (max-width: 860px) { .you-hero { grid-template-columns: minmax(0, 1fr); } }
.player-card { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: radial-gradient(90% 120% at 100% 0%, var(--tint-10), transparent 60%), var(--card); box-shadow: var(--shadow-md); }
.pc-head { display: flex; align-items: center; gap: 12px; }
.pc-av { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; flex: none; font: 800 22px var(--sans); color: #fff; background: linear-gradient(135deg, hsl(var(--h) 70% 58%), hsl(calc(var(--h) + 40) 70% 42%)); }
.pc-av .ico, .pc-av svg { width: 26px; height: 26px; }
.pc-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pc-who b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-who .dim { font-size: 12px; color: var(--dim); }
.pc-head .streak { font-size: 15px; }
.pc-badges { display: grid; gap: 6px; font: 12px var(--mono); color: var(--dim); }
.badge-bar { display: block; height: 7px; border-radius: 99px; background: var(--hover); border: 1px solid var(--line); overflow: hidden; }
.badge-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #f2b53a); transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.shelf-head .badge-bar { width: 140px; align-self: center; }
.pc-last { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: inherit; text-decoration: none; }
.pc-last .cover { border-radius: 9px; }
.pc-last-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-last-text .eyebrow { font-size: 10px; }
.pc-last-text b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-go { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.pc-go .ico, .pc-go svg { width: 15px; height: 15px; }
.pc-last:hover { border-color: var(--accent); }
.pc-start { justify-self: start; }
/* rows with a small cover */
.you-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; padding: 7px 12px 7px 7px; border-radius: 12px; }
.you-row b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav-ideas-lbl { grid-column: 1 / -1; margin: 6px 0 -4px; font-size: 14px; color: var(--dim); }
#favGrid > .empty { grid-column: 1 / -1; margin: 0; }

/* ---------- 2026-10 refresh, part 3: a new look on the same identity ----------
   Same dark navy, the same blue accent (or the one you picked), Geist and the diamond. What changes: a floating glass
   header, an aurora behind every page, game cards that sit on their own tiles, softer pill buttons, bigger headings. */
:root { --radius: 16px; --tile: color-mix(in srgb, var(--card) 88%, transparent); --tile-edge: color-mix(in srgb, var(--line) 80%, transparent); }

/* the aurora: two soft glows at the top in the accent colour and violet, and a faint dot grid that fades out */
body { background:
    radial-gradient(42% 38% at 8% -6%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%) fixed,
    radial-gradient(38% 34% at 96% 0%, rgba(150, 110, 255, .14), transparent 70%) fixed,
    radial-gradient(110% 55% at 50% 118%, var(--glow-bg) 0%, transparent 62%) fixed,
    var(--bg); }
body::after { content: ""; position: fixed; inset: 0 0 auto 0; height: 70vh; z-index: -1; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); }
:root[data-theme="light"] body::after { background-image: radial-gradient(color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1.4px); }

/* the header floats: a rounded glass bar with a little space around it, always frosted */
.top { top: 10px; margin: 10px 0 6px; padding: 8px 10px 8px 18px; min-height: 0; border: 1px solid var(--tile-edge); border-radius: 20px;
  background: color-mix(in srgb, var(--card) 72%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .05); }
.scrolled .top { border-color: var(--line); background: color-mix(in srgb, var(--card) 86%, transparent); clip-path: none;
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06); }
:root[data-theme="light"] .top, :root[data-theme="light"] .scrolled .top { box-shadow: 0 12px 30px -18px rgba(20, 40, 80, .3), inset 0 1px 0 #fff; }
.top nav > a[aria-current="page"] { background: color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: inset 0 0 0 1px var(--accent-edge); }
:root { --head-h: 64px; }
@media (max-width: 760px) { .top { top: 6px; margin-top: 6px; border-radius: 16px; padding: 6px 8px 6px 14px; } }

/* bigger section headings, with the diamond a touch larger */
.shelf-head h2 { font-size: 23px; letter-spacing: -.03em; }
.shelf-head h2::before { width: 9px; height: 9px; }
@media (max-width: 600px) { .shelf-head h2 { font-size: 20px; } }

/* game cards on their own tiles: the cover inset, the name under it, lifting a little when you point at one */
.gcard { display: flex; flex-direction: column; gap: 10px; padding: 7px 7px 12px; border: 1px solid var(--tile-edge); border-radius: 20px; background: var(--tile);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .2s ease, box-shadow .25s ease; }
.gcard .cover { border-radius: 14px; border-color: transparent; }
.gcard .meta { padding-inline: 7px; }
.gcard:hover, .gcard:focus-within { transform: translateY(-4px); border-color: var(--accent-edge); box-shadow: 0 22px 44px -24px var(--glow), 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent); }
.gcard .card:hover .cover, .gcard .card:focus-visible .cover { box-shadow: none; border-color: transparent; transform: none; }
.devcard { border-style: dashed; }
.grid { gap: 18px 16px; }
@media (prefers-reduced-motion: reduce) { .gcard:hover, .gcard:focus-within { transform: none; } }

/* buttons: the main one gets a soft gradient and a light edge on top; the others become glassy pills */
.play-btn, .big-play, .go, .continue {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 78%, #fff) 0%, var(--accent) 48%, color-mix(in srgb, var(--accent) 72%, #7a4dff) 100%);
  box-shadow: 0 12px 30px -12px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .35); border-color: transparent; }
.play-btn:hover, .big-play:hover, .go:hover, .play-btn:focus-visible, .big-play:focus-visible { box-shadow: 0 18px 40px -12px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .4); }
.btn-l, .ghost { border-radius: 99px; padding: 9px 16px; background: color-mix(in srgb, var(--card) 70%, transparent); border-color: var(--tile-edge); transition: background-color .15s ease, border-color .15s ease, transform .15s ease; }
.btn-l:hover, .ghost:hover, .btn-l:focus-visible, .ghost:focus-visible { border-color: var(--accent-edge); background: color-mix(in srgb, var(--accent) 10%, var(--card)); }

/* panels share the tile look: a hairline edge and a faint light along the top */
.chart, .maker-card, .fame-card, .badge, .champ, .latest-row, .you-row, .feedback {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.fame-card, .badge, .champ, .crew-card { border-radius: 18px; }
:root[data-theme="light"] .gcard { box-shadow: 0 8px 20px -14px rgba(20, 40, 80, .28); }
.fame-intro { margin-bottom: 18px; }

/* ---------- the launch screen: the same embers, diamond and title, now with a drifting wall of game covers ---------- */
.welcome { background: radial-gradient(70% 55% at 50% 42%, rgba(77, 140, 247, .16), transparent 70%), radial-gradient(90% 70% at 50% 110%, #0c2150 0%, #080d1a 45%, #07090e 100%); }
/* the wall: two rows of covers sliding opposite ways, tilted back like a floor, fading at the edges and under the title */
.welcome-wall { position: fixed; left: -10vw; right: -10vw; bottom: -4vh; height: 58vh; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding-bottom: 4vh;
  transform: perspective(900px) rotateX(32deg); transform-origin: 50% 100%; opacity: 0; transition: opacity 1.4s ease; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 80%, transparent 100%); }
.welcome-wall.on { opacity: .5; }
.ww-row { display: flex; gap: 16px; width: max-content; animation: ww-slide 90s linear infinite;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ww-row.rev { animation-direction: reverse; animation-duration: 110s; }
.ww-row img { width: clamp(150px, 17vw, 250px); aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 18px 40px -18px #000; filter: saturate(1.1); }
@keyframes ww-slide { to { transform: translateX(-50%); } }
.welcome-two { background: linear-gradient(180deg, transparent, rgba(7, 9, 14, .82) 30%); }
/* the diamond, with two slow rings breathing out of it */
.welcome-mark { position: relative; display: grid; place-items: center; width: 92px; height: 92px; margin-bottom: 4px; }
.welcome-mark .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(77, 140, 247, .5); animation: ring-out 3.2s ease-out infinite; }
.welcome-mark .ring.two { animation-delay: 1.6s; }
@keyframes ring-out { from { transform: scale(.35); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
/* the title in the forge's gradient, white into blue, violet and pink */
.welcome h1 { background: linear-gradient(100deg, #fff 0%, #e4ecff 38%, #8db6ff 58%, #b58cff 78%, #ff7aa2 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 30px rgba(77, 140, 247, .35)); padding-bottom: .06em; }
/* the numbers under the title */
.welcome-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.welcome-stats span { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 99px; background: rgba(13, 18, 30, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #a9b6cc; animation: rise .8s cubic-bezier(.2, .8, .2, 1) both; }
.welcome-stats span:nth-child(2) { animation-delay: .08s; } .welcome-stats span:nth-child(3) { animation-delay: .16s; }
.welcome-stats b { font: 800 15px var(--sans); letter-spacing: -.01em; color: #eef2f9; text-transform: none; }
.welcome .continue { margin-top: 18px; padding: 15px 44px; font-size: 17px; }
@media (max-width: 560px) { .welcome-wall { height: 48vh; } .welcome-mark { width: 76px; height: 76px; } }
@media (prefers-reduced-motion: reduce) { .ww-row, .welcome-mark .ring { animation: none !important; } .welcome-mark .ring { opacity: .3; } }
.welcome-wall.on { opacity: .42; }
.welcome .scroll-cue { z-index: 2; padding: 7px 16px 6px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 99px; background: rgba(8, 12, 22, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* ---------- windows that aren't full screen: everything scales with the height too, not just the width ---------- */
/* launch screen: sizes follow the smaller of width and height; in a short window the hint joins the flow instead of
   floating over the Continue button, and the wall of covers sits lower */
.welcome h1 { font-size: clamp(30px, min(8vw, 11vh), 84px); }
.welcome-mark { width: clamp(56px, 13vh, 92px); height: clamp(56px, 13vh, 92px); }
.welcome-in { gap: clamp(8px, 1.8vh, 14px); }
.welcome .continue { margin-top: clamp(8px, 2.2vh, 18px); }
.welcome-wall { height: min(58vh, 520px); }
@media (max-height: 700px) {
  .welcome-in:first-of-type { justify-content: flex-start; padding-top: max(28px, 9vh); }
  .welcome .scroll-cue { position: static; transform: none; margin-top: 4px; }
  .welcome-wall { height: 36vh; padding-bottom: 2vh; }
  .welcome-wall.on { opacity: .3; }
  .welcome p { font-size: 15px; }
  .welcome-stats span { padding: 4px 11px; }
  .welcome .continue { padding: 12px 36px; font-size: 16px; }
}
@media (max-height: 520px) { .welcome-stats { display: none; } .welcome-wall { height: 30vh; } }
/* medium windows: the header stays on one row. "Share your game" and "Credits" step out (they're in the footer and on the
   Upload page), and everything packs a little tighter */
@media (min-width: 761px) and (max-width: 1080px) {
  .top nav > a[href="add.html"], .top nav > a[href="credits.html"] { display: none; }
  .top nav { flex-wrap: nowrap; gap: 2px; }
  .top nav > a { padding: 6px 9px; }
  .top { padding-left: 14px; }
}
@media (min-width: 761px) and (max-width: 860px) { .top nav > a[href="upload.html"] { display: none; } }
/* short windows: the home page's hero and the game of the day shrink with the height, so there's room for games */
@media (max-height: 760px) and (min-width: 761px) {
  body.home .hero { padding: 28px 32px 26px; }
  body.home .hero h1 { font-size: clamp(30px, min(5.2vw, 7.4vh), 60px); }
  body.home .hero-art { max-height: 46vh; }
  :root { --head-h: 56px; }
  .top { padding-block: 5px; margin-top: 8px; }
}
/* short windows of any width: banners keep to one line (the middle sentence steps out), and the cover pile above the
   hero shrinks, so the first screen still shows the title and the buttons */
@media (max-height: 640px) {
  .site-banner { padding-block: 6px; font-size: 13px; }
  .site-banner p > span { display: none; }
}
@media (max-height: 640px) and (max-width: 860px) {
  .hero-art { height: min(200px, 24vh) !important; width: min(100%, 42vh); margin-inline: auto; }   /* (the tiles are sized by the width, so the pile keeps its shape) */
  body.home .hero { padding-top: 20px; }
}
@media (max-height: 480px) and (max-width: 860px) { .hero-art { display: none; } }

/* ---------- less clutter, nothing removed ---------- */
/* home: the six lists of games share one spot, with tabs */
.shelf-tabs-box { margin: 0 0 44px; }
.shelf-tabs { display: flex; align-items: baseline; gap: 4px 6px; flex-wrap: wrap; margin-bottom: 14px; }
.shelf-tab { position: relative; font: 750 19px var(--sans); letter-spacing: -.025em; color: var(--dim); background: none; border: 0; padding: 4px 10px 6px; border-radius: 10px; cursor: pointer; transition: color .15s, background-color .15s; }
.shelf-tab:first-child { padding-left: 22px; }
.shelf-tab:first-child::before { content: ""; position: absolute; left: 4px; top: 50%; width: 9px; height: 9px; margin-top: -3px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); box-shadow: 0 0 10px var(--glow); }
.shelf-tab:hover, .shelf-tab:focus-visible { color: var(--ink); background: var(--hover); outline: none; }
.shelf-tab[aria-selected="true"] { color: var(--ink); }
.shelf-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 10px var(--glow); }
.shelf-tab:first-child[aria-selected="true"]::after { left: 22px; }
.shelf-tab-note { margin-left: auto; font: 12px var(--mono); color: var(--dim); letter-spacing: .04em; }
.shelf-tabs-box .shelf { margin: 0; }
.shelf-tabs-box .shelf-head { display: none; }
@media (max-width: 600px) {
  .shelf-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; }
  .shelf-tabs::-webkit-scrollbar { display: none; }
  .shelf-tab { font-size: 16px; white-space: nowrap; flex: none; }
  .shelf-tab-note { display: none; }
}
/* the header: the theme button shows only its icon (its name is in the tooltip and for screen readers) */
.theme-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.theme-btn { padding-inline: 8px; }
/* game page: the facts read as one quiet line instead of a cloud of pills */
.detail .facts { gap: 4px 0; font: 12.5px var(--mono); color: var(--dim); }
.detail .facts > span:not([hidden]) { border: 0; background: none; padding: 0; border-radius: 0; }
.detail .facts > span:not([hidden]) ~ span:not([hidden])::before { content: "·"; margin: 0 9px; opacity: .55; }
/* game page: the feedback box starts as one line (the question and the thumbs); the note and Send open after a thumb */
.feedback { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 12px 14px; }
.feedback .fb-q { grid-column: 1; }
.feedback .fb-votes { grid-column: 2; grid-row: 1; }
.feedback > textarea, .feedback .fb-row, .feedback .fb-msg { grid-column: 1 / -1; }
.feedback:not(.open) > textarea, .feedback:not(.open) .fb-row { display: none; }
.fb-more { grid-column: 1 / -1; justify-self: start; margin-top: -6px; padding: 0; border: 0; background: none; font: 12.5px var(--sans); color: var(--dim); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fb-more:hover, .fb-more:focus-visible { color: var(--accent); outline: none; }
.feedback.open .fb-more { display: none; }
.feedback .fb-msg:empty { display: none; }
/* phones: Maker of the week's three games slide sideways instead of stacking three big cards */
@media (max-width: 560px) { .mw-games { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 68%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; } .mw-games > * { scroll-snap-align: start; } }

/* ---------- compact: less scrolling, the same content ---------- */
/* smaller game tiles, so more fit on each row; tighter gaps between sections */
.grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 12px; padding-bottom: 40px; }
.row { grid-auto-columns: minmax(180px, 205px); gap: 12px; }
.gcard { padding: 6px 6px 10px; gap: 8px; border-radius: 16px; }
.gcard .cover { border-radius: 11px; }
.gcard .meta { padding-inline: 5px; }
.gcard .meta b { font-size: 14px; }
.shelf, .shelf-tabs-box, .charts, .maker-week, .welcome-back { margin-bottom: 30px; }
.shelf-head, .shelf-tabs { margin-bottom: 10px; }
/* home: a shorter hero and game of the day */
body.home .hero { padding: 32px 36px 28px; }
.hero-art { height: 280px; }
body.home .spotlight { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 26px; padding: 16px; margin-bottom: 30px; }
.maker-week { padding: 18px; gap: 20px; }
.chart { padding: 12px 10px 8px; }
.chart-row { grid-template-columns: 18px 48px minmax(0, 1fr) auto; padding: 4px 6px; }
.chart h3 { margin-bottom: 6px; }
/* Hall of Fame and You: a little tighter */
.latest { margin-bottom: 26px; }
.fame-grid { gap: 12px; padding-bottom: 28px; }
.badges { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-bottom: 26px; }
.badge { padding: 10px 8px; }
.badge-ico .ico { width: 24px; height: 24px; }
/* phones: two games per row everywhere, and smaller tiles */
@media (max-width: 560px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-bottom: 28px; }
  .row { grid-auto-columns: 44%; gap: 10px; }
  .gcard { padding: 4px 4px 8px; gap: 6px; border-radius: 14px; }
  .gcard .cover { border-radius: 10px; }
  .gcard .meta { padding-inline: 4px; }
  .gcard .meta b { font-size: 13px; line-height: 1.25; }
  .gcard .meta .sub { gap: 2px 8px; }
  .gcard .meta .by, .gcard .meta .counts { font-size: 11.5px; }
  .gcard .meta .counts { gap: 7px; }
  .gcard .tag { font-size: 9.5px; padding: 1px 6px; }
  .shelf, .shelf-tabs-box, .charts, .maker-week { margin-bottom: 24px; }
  .badges { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .badge { padding: 9px 4px; }
  .badge b { font-size: 12px; }
  .badge small { font-size: 10.5px; }
  .champs { gap: 6px; }
  .champ { padding: 8px 12px; }
  .latest-row { padding: 6px 10px; grid-template-columns: 26px 48px minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 760px) { body.home .spotlight { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 12px; } }
@media (max-width: 560px) { body.home .hero { padding: 24px 18px 20px; } .credits-grid, .founders { gap: 10px; } }
.fame-card .board-list li { padding: 5px 10px; }
.fame-card { gap: 8px; padding: 10px; }
@media (max-width: 560px) {
  .credits { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .credits .person { padding: 14px; gap: 8px; }
  .members { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .podium .step-who .dim { font-size: 10.5px; }
}

/* =====================================================================================================
   🎃 Halloween (28 October – 1 November): night-purple, pumpkin orange, cobwebs and bats.
   Switched on by site.js (data-season="halloween" on <html>); the pumpkin button turns it off.
   ===================================================================================================== */
:root[data-season="halloween"], :root[data-season="halloween"][data-theme] {
  --bg: #0c0712; --card: #160e20; --ink: #f6eeff; --dim: #a996c4; --line: #2b1e3b; --hover: #21162e; --bar: #110a19; --gold: #ffb43d;
  --glow-bg: #3a1606; color-scheme: dark;
}
:root[data-season="halloween"] body { background: radial-gradient(120% 60% at 50% 118%, rgba(255, 110, 20, .28) 0%, transparent 60%) fixed, radial-gradient(80% 50% at 85% -10%, rgba(140, 70, 255, .18), transparent 60%) fixed, var(--bg); }
:root[data-season="halloween"] body.home .hero h1 .now { background-image: linear-gradient(100deg, #ff8a1f, #ffbf47 40%, #b46cff 85%); }
:root[data-season="halloween"] body.home .hero { background: radial-gradient(60% 90% at 0% 0%, rgba(255, 122, 26, .22), transparent 60%), radial-gradient(50% 80% at 100% 100%, rgba(150, 80, 255, .2), transparent 60%), var(--card); }
:root[data-season="halloween"] .hero-eyebrow .live-dot { background: #ff7a1a; }
/* cobwebs in the top corners of the hero and Game of the day */
:root[data-season="halloween"] body.home .hero > .hero-text::before { content: ""; position: absolute; left: -40px; top: -46px; width: 120px; height: 120px; pointer-events: none; opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23d9c8f0' stroke-width='1'%3E%3Cpath d='M0 0L120 120M0 0L60 120M0 0L120 60M0 0L20 120M0 0L120 20'/%3E%3Cpath d='M0 26Q14 18 26 0M0 50Q28 34 50 0M0 76Q42 52 76 0M0 102Q56 70 102 0' /%3E%3C/svg%3E") no-repeat; }
:root[data-season="halloween"] body.home .spotlight .spot-text::after { content: "🕸️"; position: absolute; right: -6px; top: -30px; font-size: 30px; opacity: .55; }
.season-banner { background: linear-gradient(90deg, #2a0f3d, #4a1a06 60%, #2a0f3d); color: #ffe1c2; border-bottom-color: #6b2c0c; }
.season-banner a { color: #ffb064; }
.season-btn { font-size: 15px; line-height: 1; }
.season-btn[aria-pressed="false"] { filter: grayscale(1); opacity: .6; }
.shelf.spooky .shelf-head h2 { color: #ff9a3d; text-shadow: 0 0 18px rgba(255, 122, 26, .45); }
/* bats */
.bat { position: fixed; left: 0; z-index: 30; width: var(--size, 30px); color: #1a0b22; pointer-events: none; filter: drop-shadow(0 0 6px rgba(255, 140, 40, .35));
  animation: bat-fly var(--dur, 9s) linear forwards; }
.bat svg { width: 100%; display: block; animation: bat-flap .22s ease-in-out infinite alternate; transform-origin: 50% 70%; }
.bat.ltr { animation-name: bat-fly-ltr; }
@keyframes bat-fly { from { transform: translate(105vw, 0); } 25% { transform: translate(75vw, -40px); } 50% { transform: translate(48vw, 20px); } 75% { transform: translate(22vw, -30px); } to { transform: translate(-12vw, 10px); } }
@keyframes bat-fly-ltr { from { transform: translate(-12vw, 0) scaleX(-1); } 33% { transform: translate(30vw, 30px) scaleX(-1); } 66% { transform: translate(66vw, -25px) scaleX(-1); } to { transform: translate(110vw, 0) scaleX(-1); } }
@keyframes bat-flap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
:root[data-season="halloween"] .bat { color: #0a0410; }
@media (prefers-reduced-motion: reduce) { .bat { display: none; } }

/* upload: spelling and grammar notes */
.spell-tip { margin: -4px 0 0; font-size: 12.5px; line-height: 1.5; }
.spell-notes { list-style: none; margin: 0; padding: 10px 12px; border: 1px solid var(--gold); border-radius: 10px; background: color-mix(in srgb, var(--gold) 10%, transparent); display: grid; gap: 3px; font-size: 13px; }
.spell-notes .spell-head { font-weight: 650; color: var(--gold); }
.spell-notes b { font-weight: 600; }