/* BONGI GAMES: the portal's look, "Sunny Day". A sky-blue top bar, Bongi the mascot for the logo, an orange for every button, a green for
   what's picked and what's new, white letters with a navy outline (like the games' own HUD text) on the logo, headings,
   big game titles and button labels. Fonts: Luckiest Guy (logo + headings), Fredoka (game names, buttons, the sidebar),
   Onest (everything you read). Shapes are rounded rectangles: cards 14px, buttons 12px, sidebar items 10px. Only
   buttons and the #1 badge get the thick outline + hard shadow; cards get a soft shadow and a thin line.
   Two themes as tokens: light and dark, picked by the toggle (saved) or the system setting (the inline script in each
   page's <head> sets data-theme on <html> before anything paints). */

@font-face { font-family: 'Luckiest Guy'; font-weight: 400; font-display: swap; src: url('../fonts/luckiest-guy-latin-400-normal.woff2') format('woff2'); ascent-override: 86.5%; descent-override: 13.5%; line-gap-override: 0%; }
@font-face { font-family: 'Fredoka'; font-weight: 500; font-display: swap; src: url('../fonts/fredoka-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-weight: 600; font-display: swap; src: url('../fonts/fredoka-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-weight: 700; font-display: swap; src: url('../fonts/fredoka-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Onest'; font-weight: 400; font-display: swap; src: url('../fonts/onest-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Onest'; font-weight: 500; font-display: swap; src: url('../fonts/onest-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Onest'; font-weight: 600; font-display: swap; src: url('../fonts/onest-latin-600-normal.woff2') format('woff2'); }

:root, :root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f8fb; --surf: #fdfeff; --line: #dfe7ef; --text: #0e2338; --muted: #4a5f74;
  --bar: #44aef2; --sky: #44aef2; --green: #34c472; --on-color: #0e2338;
  --search-line: rgba(14, 35, 56, .16); --shadow: rgba(14, 35, 56, .16); --focus: #0e2338;
  /* the same in both themes: the outline navy and the button orange */
  --ink: #0e2338; --orange: #ff8a1f;
  --bar-h: 74px; --side-w: 236px;
  /* motion: a strong ease-out for presses, easeOutBack (easings.net) for the springy pop back up */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1520; --surf: #13202e; --line: #22344a; --text: #e9f1f9; --muted: #93a6ba;
  --bar: #123a5c; --sky: #59b8f5; --green: #45d283; --on-color: #0b1520;
  --search-line: rgba(0, 0, 0, .28); --shadow: rgba(0, 0, 0, .5); --focus: #59b8f5;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Onest', system-ui, sans-serif; font-weight: 400; line-height: 1.5; overflow-x: hidden; transition: background-color .2s ease, color .2s ease; }
img, video, iframe { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-weight: 400; margin: 0; }
p { margin: 0; }
button { font: inherit; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.skip { position: absolute; left: 12px; top: -70px; z-index: 50; padding: 10px 16px; background: var(--orange); color: var(--ink); font-family: 'Fredoka', sans-serif; font-weight: 700; border: 2.5px solid var(--ink); border-radius: 12px; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { max-width: 1600px; margin: 0 auto; padding-inline: clamp(16px, 2.2vw, 32px); }
.icon { flex: none; width: 20px; height: 20px; }

/* outlined text: white letters, navy outline drawn behind them (paint-order) so the letters keep their shape */
.logo-word, .section-title, .controls h2 { color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
.rank, .btn, .spot-title, .player-bar h1, .soon-panel h1 { color: #fff; -webkit-text-stroke: 4.5px var(--ink); paint-order: stroke fill; }

/* ---------- buttons: orange, navy outline, a small hard shadow ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; font-family: 'Fredoka', sans-serif; font-size: 17px; font-weight: 700; letter-spacing: .03em; line-height: 1; text-decoration: none; white-space: nowrap; background: var(--orange); border: 2.5px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink); cursor: pointer; }
.btn .icon { color: var(--ink); }
.btn-big { height: 52px; padding: 0 26px; font-size: 19px; }
/* the theme switch: a square surface key (it has no label to outline) */
.btn-icon { width: 46px; padding: 0; background: var(--surf); }
.btn-icon .icon { color: var(--text); }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* ---------- the random game roll: a reel of covers in a card over the page, an orange pin above and below the middle ---------- */
.roll { --roll-w: clamp(150px, 34vw, 230px); position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(6, 14, 24, .6); opacity: 0; transition: opacity 220ms var(--ease-out); }
.roll.on { opacity: 1; }
.roll:focus { outline: none; }
.roll-card { width: min(760px, 100%); display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 22px 0 24px; background: var(--surf); border: 2.5px solid var(--ink); border-radius: 18px; box-shadow: 0 6px 0 var(--ink); overflow: hidden; transform: translateY(16px) scale(.94); transition: transform 360ms var(--ease-back); }
.roll.on .roll-card { transform: none; }
.roll-title { font-family: 'Luckiest Guy', sans-serif; font-size: clamp(30px, 5vw, 42px); letter-spacing: .03em; line-height: 1.1; color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
.roll-window { position: relative; width: 100%; padding: 16px 0; background: var(--bg); border-block: 1.5px solid var(--line); overflow: hidden; }
.roll-strip { display: flex; gap: 14px; width: max-content; will-change: transform; }
.roll-window::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--bg), transparent 22%, transparent 78%, var(--bg)); }
.roll-item { flex: none; width: var(--roll-w); aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--line); box-shadow: 0 0 0 1.5px var(--line); transition: transform 320ms var(--ease-back), box-shadow .2s ease; }
.roll-item img { width: 100%; height: 100%; object-fit: cover; }
.roll-item.win { transform: scale(1.08); box-shadow: 0 0 0 3px var(--orange), 0 0 0 5.5px var(--ink); }
/* each pin: a navy triangle with a smaller orange one inside it (the outline), pivoting on its base when it flicks */
.roll-pin { position: absolute; z-index: 1; left: 50%; width: 28px; height: 22px; margin-left: -14px; background: var(--ink); }
.roll-pin::after { content: ''; position: absolute; left: 4px; right: 4px; background: var(--orange); }
.roll-pin-top { top: 0; transform-origin: 50% 0; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.roll-pin-top::after { top: 0; bottom: 5px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.roll-pin-bot { bottom: 0; transform-origin: 50% 100%; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.roll-pin-bot::after { top: 5px; bottom: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.roll-name { min-height: 1.2em; padding: 0 16px; font-family: 'Fredoka', sans-serif; font-size: clamp(22px, 3.4vw, 30px); font-weight: 700; line-height: 1.2; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity 240ms var(--ease-out), transform 320ms var(--ease-back); }
.roll-name.on { opacity: 1; transform: none; }
.btn-random.rolling .icon { animation: roll-dice 520ms linear infinite; }
@keyframes roll-dice { to { transform: rotate(360deg); } }

/* ---------- accounts (js/account.js): Sign in in the top bar, your initial once you're in (and its menu), the sign-in card ---------- */
.account-btn:not(.signed-in) { width: auto; padding: 0 16px; }
.account-label { color: var(--text); -webkit-text-stroke: 0; }
.account-initial { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--green); border: 2px solid var(--ink); font-family: 'Fredoka', sans-serif; font-size: 16px; font-weight: 700; color: var(--on-color); -webkit-text-stroke: 0; }
.acct-menu { position: absolute; z-index: 40; top: calc(100% + 12px); right: 0; width: min(290px, calc(100vw - 32px)); display: grid; gap: 10px; padding: 16px; background: var(--surf); color: var(--text); border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); animation: acct-in 220ms var(--ease-out); }
.acct-menu-who { font-size: 15px; overflow-wrap: anywhere; }
.acct-menu-note { font-size: 14px; color: var(--muted); }
.acct-menu .btn { justify-self: start; height: 40px; font-size: 16px; }
.acct { width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 26px 24px 20px; color: var(--text); background: var(--surf); border: 2.5px solid var(--ink); border-radius: 18px; box-shadow: 0 6px 0 var(--ink); overflow-y: auto; }
.acct[open] { animation: acct-in 260ms var(--ease-back); }
.acct::backdrop { background: rgba(6, 14, 24, .6); }
@keyframes acct-in { from { opacity: 0; transform: translateY(12px) scale(.96); } }
.acct-close { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; box-shadow: 0 2px 0 var(--ink); }
.acct-bongi { display: block; width: 88px; height: auto; margin: -4px auto 6px; }
.acct-title { font-family: 'Luckiest Guy', sans-serif; font-size: 30px; letter-spacing: .03em; line-height: 1.1; text-align: center; color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
.acct-sub { margin-top: 6px; font-size: 15px; text-align: center; color: var(--muted); }
.acct-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 18px 0 14px; padding: 4px; background: var(--bg); border-radius: 12px; }
.acct-tabs button { height: 38px; border: 0; border-radius: 9px; background: none; font-family: 'Fredoka', sans-serif; font-size: 16px; font-weight: 600; color: var(--muted); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.acct-tabs button[aria-selected="true"] { background: var(--surf); color: var(--text); box-shadow: 0 0 0 1.5px var(--line); }
.acct-google { width: 100%; gap: 10px; }
.acct-google span { color: var(--text); -webkit-text-stroke: 0; }
.acct-or { display: flex; align-items: center; gap: 12px; margin: 14px 0; font-size: 14px; color: var(--muted); }
.acct-or::before, .acct-or::after { content: ''; flex: 1; height: 1.5px; background: var(--line); }
.acct-form { display: grid; gap: 12px; }
.acct-field { display: grid; gap: 5px; font-family: 'Fredoka', sans-serif; font-size: 15px; font-weight: 600; }
.acct-field input { width: 100%; height: 46px; padding: 0 14px; font: inherit; font-family: 'Onest', system-ui, sans-serif; font-size: 16px; font-weight: 400; color: var(--text); background: var(--bg); border: 2px solid var(--search-line); border-radius: 12px; transition: border-color .2s ease, box-shadow .2s ease; }
.acct-field input:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.acct-submit { width: 100%; margin-top: 4px; }
.acct-submit:disabled { opacity: .7; cursor: progress; }
.acct-forgot { justify-self: center; color: var(--muted); }
.acct-msg { min-height: 1.4em; font-size: 14px; text-align: center; color: var(--muted); }
.acct-msg.bad { color: #e5484d; }

/* ---------- tags: "New" (green) and "Soon" (sky), always beside the game's name ---------- */
.tag { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; font-family: 'Fredoka', sans-serif; font-size: 13px; font-weight: 600; line-height: 1; border-radius: 7px; color: var(--on-color); background: var(--green); -webkit-text-stroke: 0; }
.tag-soon { background: var(--sky); }
/* "Prototype": an early build you can already play. A dashed orange outline, like a sketch that isn't inked yet */
.tag-proto { color: var(--text); background: color-mix(in srgb, var(--orange) 16%, transparent); border: 1.5px dashed var(--orange); }

/* ---------- top bar (full width, over the sidebar; it stays put on wide screens) ---------- */
.topbar { position: relative; z-index: 30; background: var(--bar); }
.topbar-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; min-height: var(--bar-h); padding: 14px 20px; }
.menu-toggle { display: none; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
/* the logo mark is Bongi, the mascot: a strip of 9 frames (assets/mascot/wink.webp) resting on the first; now and then
   site.js adds .wink and it plays the wink, each frame held as long as in the drawn animation (60ms to 270ms) */
.logo-mark { flex: none; width: 48px; height: 48px; background: url('../assets/mascot/wink.webp') 0 0 / 900% 100% no-repeat; filter: drop-shadow(0 2.5px 0 var(--ink)); transform: rotate(-5deg); }
.logo-mark.wink { animation: logo-wink 600ms steps(1, end); }
@keyframes logo-wink {
  0% { background-position-x: 12.5%; } 10% { background-position-x: 25%; } 18.33% { background-position-x: 37.5%; }
  26.67% { background-position-x: 50%; } 71.67% { background-position-x: 62.5%; } 81.67% { background-position-x: 75%; }
  90%, 100% { background-position-x: 87.5%; }
}
.logo-word { font-family: 'Luckiest Guy', sans-serif; font-size: 27px; letter-spacing: .04em; line-height: 1; white-space: nowrap; }
.search { position: relative; flex: 1 1 280px; max-width: 560px; }
.search .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search input { width: 100%; height: 46px; padding: 0 16px 0 44px; font: inherit; font-size: 16px; color: var(--text); background: var(--surf); border: 2px solid var(--search-line); border-radius: 12px; transition: border-color .2s ease, box-shadow .2s ease; }
.search input::placeholder { color: var(--muted); opacity: 1; }
.search input:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.topbar-actions { position: relative; margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ---------- the shell: the category sidebar on the left (like CrazyGames), the page beside it ---------- */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); }
.page { min-width: 0; }
.sidebar { position: sticky; top: var(--bar-h); align-self: start; height: calc(100dvh - var(--bar-h)); overflow-y: auto; overscroll-behavior: contain; padding: 14px 12px 24px; background: var(--surf); border-right: 1.5px solid var(--line); scrollbar-width: thin; }
.side-head { display: none; }
.side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.side-gap { height: 1.5px; margin: 9px 10px; background: var(--line); }
.side-link { display: flex; align-items: center; gap: 13px; height: 46px; padding: 0 12px; font-family: 'Fredoka', sans-serif; font-size: 17px; font-weight: 600; color: var(--text); text-decoration: none; border-radius: 10px; }
.side-link .icon { width: 22px; height: 22px; color: var(--muted); }
.side-link[aria-current="page"] { background: var(--green); color: var(--on-color); }
.side-link[aria-current="page"] .icon { color: var(--on-color); }
.side-link:focus-visible { outline-offset: -3px; }
.scrim { display: none; }

/* ---------- home ---------- */
.home { padding-top: 26px; display: flex; flex-direction: column; gap: clamp(40px, 4vw, 56px); }

.browse, .rows { display: flex; flex-direction: column; gap: clamp(40px, 4vw, 56px); }

.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 18px; }
.section-title { font-family: 'Luckiest Guy', sans-serif; font-size: clamp(30px, 2.6vw, 40px); letter-spacing: .03em; line-height: 1.1; }
.section-count { font-size: 15px; font-weight: 500; color: var(--muted); }
.section-mascot { flex: none; align-self: center; height: clamp(54px, 4.6vw, 66px); width: auto; margin: -10px -2px -10px -4px; transform: rotate(-4deg); }
/* on the home page Bongi is a link to the whole list: he hops a little under the mouse and squashes on a press */
.section-mascot-link { flex: none; align-self: center; display: flex; border-radius: 12px; -webkit-tap-highlight-color: transparent; }
.section-mascot-link .section-mascot { margin: -10px -2px -10px -4px; transition: transform 260ms var(--ease-back); }
.section-mascot-link:active .section-mascot { transform: rotate(-4deg) scale(.9); transition-duration: 70ms; transition-timing-function: var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .section-mascot-link:hover .section-mascot { transform: translateY(-3px) rotate(-10deg) scale(1.1); }
}

/* a category row, Roblox style: its most played game as a big #1 card over two rows, the rest smaller beside it.
   4 columns (3 when it has under 3 others, so the big card stays half-ish of the row); phones: big on top, 2 across. */
.rank-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 24px 20px; }
.rank-grid.few, .rank-grid.solo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spot { grid-column: span 2; grid-row: span 2; min-width: 0; display: flex; flex-direction: column; background: var(--surf); border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 12px 28px -16px var(--shadow); }
.rank-grid.solo .spot { grid-row: auto; }
.spot-media { position: relative; display: block; flex: none; aspect-ratio: 16 / 9; background: var(--line); overflow: hidden; }
.spot-media img, .spot-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spot-info { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; padding: 16px 20px 20px; }
.rank { flex: none; align-self: flex-start; width: 58px; height: 54px; display: flex; align-items: center; justify-content: center; font-family: 'Luckiest Guy', sans-serif; font-size: 28px; line-height: 1; background: var(--orange); border: 2.5px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink); transform: rotate(-5deg); }
.spot-text { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.spot-info .btn { margin-left: auto; }
.spot-tag { font-size: 14px; font-weight: 600; color: var(--muted); }
.spot-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.spot-title { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: clamp(26px, 2.2vw, 32px); letter-spacing: .02em; line-height: 1.15; }
.spot-blurb { font-size: 15px; color: var(--muted); }
.spot-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 2px; font-size: 14px; color: var(--muted); }
.spot-meta .plays { color: var(--text); }

.head-actions { margin-left: auto; align-self: center; display: flex; align-items: center; gap: 10px; }
.strip-nav { display: flex; gap: 8px; }
.btn-sm { height: 36px; border-radius: 10px; }
.btn-icon.btn-sm { width: 36px; }
.btn-sm .icon { width: 18px; height: 18px; }
.btn:disabled { opacity: .4; cursor: default; transform: none !important; box-shadow: 0 3px 0 var(--ink) !important; filter: none !important; }
/* "See all" (a category on its own) and "Clear" (forget what you've played): quiet text keys */
.see-all, .text-btn { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px; font-family: 'Fredoka', sans-serif; font-size: 16px; font-weight: 600; color: var(--text); text-decoration: none; background: none; border: 0; border-radius: 10px; cursor: pointer; }
.see-all .icon { width: 16px; height: 16px; }
.text-btn { color: var(--muted); }

/* a row that scrolls sideways (Continue playing, Top picks, New games): one line of tiles, snapping to each. The padding
   (taken back by the margin) leaves room for a lifted tile's shadow, which the scroll box would otherwise cut off. */
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(180px, 19vw, 290px); gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 8px; scrollbar-width: none; padding: 8px 8px 22px; margin: -8px -8px -22px; }
.strip::-webkit-scrollbar { display: none; }
.strip > * { scroll-snap-align: start; }
.strip > :last-child { scroll-snap-align: end; } /* so the end of the row is a place it can rest */
.strip-sm { grid-auto-columns: clamp(150px, 14vw, 220px); gap: 16px; }
.strip-sm .tile-title { font-size: 16px; }

/* Featured games: big cards side by side */
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
.feature-grid .spot { grid-column: auto; grid-row: auto; }
.feature-grid.one { grid-template-columns: minmax(0, 1fr); max-width: 900px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 17vw, 280px), 1fr)); gap: 24px 20px; }

/* a game tile: the cover (a preview video plays over it on hover), then its name (+ New / Soon), genre (or who's playing now) + plays */
.tile { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: var(--text); border-radius: 14px; }
.tile-media { position: relative; aspect-ratio: 16 / 9; margin-bottom: 7px; border-radius: 14px; overflow: hidden; background: var(--line); box-shadow: 0 0 0 1.5px var(--line), 0 10px 20px -14px var(--shadow); }
.tile-media img, .tile-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile:focus-visible { outline-offset: 5px; }
.tile-name { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 2px; }
.tile-title { min-width: 0; font-family: 'Fredoka', sans-serif; font-size: 18px; font-weight: 600; line-height: 1.25; }
.tile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; padding: 0 2px; font-size: 14px; color: var(--muted); }
.plays { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap; }
.plays .icon { width: 16px; height: 16px; }
.tile-meta .plays { margin-left: auto; }
/* a game's category under its name reads as a label, set apart from the numbers beside it */
.genre { display: inline-block; transform: skewX(-7deg); } /* a gentle slant: Fredoka has no italic, and the browser's fake one leans too far */
/* "● 12 playing": a green dot that breathes while people are in the game */
.live { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); white-space: nowrap; }
.live-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: live-pulse 1.8s ease-out infinite; }
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--green) 0%, transparent); }
}

.empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px; background: var(--surf); border: 1.5px dashed var(--line); border-radius: 14px; }
.empty p { font-size: 17px; }

.soon-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 20px; }
.soon-card { min-width: 0; display: flex; align-items: center; gap: 16px; padding: 10px; background: var(--surf); border: 1.5px solid var(--line); border-radius: 14px; box-shadow: 0 10px 22px -18px var(--shadow); text-decoration: none; color: var(--text); }
.soon-shot { flex: none; width: 46%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--line); }
.soon-shot img { width: 100%; height: 100%; object-fit: cover; }
.soon-body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-right: 6px; }
.soon-body h3 { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 21px; line-height: 1.2; margin-top: 2px; }
.soon-body p { font-size: 14px; line-height: 1.45; color: var(--muted); }

/* ---------- footer ---------- */
.footer { margin-top: clamp(48px, 5vw, 80px); border-top: 1.5px solid var(--line); }
.footer .wrap { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 20px 48px; padding-block: 28px 36px; }
.footer-about { flex: 1 1 320px; max-width: 520px; display: flex; flex-direction: column; gap: 12px; }
.footer .logo-mark { width: 38px; height: 38px; filter: drop-shadow(0 2px 0 var(--ink)); }
.footer .logo-word { font-size: 20px; -webkit-text-stroke-width: 5px; }
.footer-about p { font-size: 15px; line-height: 1.6; color: var(--muted); }
.footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 6px; }
.footer nav a { font-size: 15px; font-weight: 500; text-decoration: none; color: var(--muted); transition: color .2s ease; }
.footer nav a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.copyright { flex-basis: 100%; font-size: 13px; color: var(--muted); }

/* ---------- play page ---------- */
.play { padding-top: 20px; display: flex; flex-direction: column; gap: clamp(32px, 3.5vw, 48px); }
.back { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--muted); text-decoration: none; transition: color .2s ease; }
.back:hover { color: var(--text); }
.player { position: relative; aspect-ratio: 16 / 9; max-height: calc(100dvh - 180px); margin: 0 auto; width: 100%; background: #05090f; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1.5px var(--line), 0 18px 40px -22px var(--shadow); }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* while a game loads: Bongi bouncing over it. It only fades in after 250ms, so a game that's quick to load never flashes it */
.player-load { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: #05090f; color: #eef4fa; animation: load-in 200ms var(--ease-out) 250ms both; transition: opacity 300ms var(--ease-out); }
.player-load.done { opacity: 0; pointer-events: none; }
.player-load-bongi { position: relative; width: clamp(96px, 12vw, 136px); margin-top: 8%; }
.player-load-bongi img { position: relative; width: 100%; height: auto; transform-origin: 50% 100%; animation: bongi-bounce 760ms infinite; }
.player-load-shadow { position: absolute; left: 14%; right: 14%; bottom: -6%; height: 12%; border-radius: 50%; background: rgba(110, 160, 220, .22); animation: bongi-shadow 760ms infinite; }
.player-load-text { margin-top: 10px; font-family: 'Fredoka', sans-serif; font-size: 18px; font-weight: 600; }
@keyframes load-in { from { opacity: 0; } }
/* squash on the ground, stretch on the way up, round at the top (the drawing is the squashed pose) */
@keyframes bongi-bounce {
  0%, 100% { transform: translateY(0) scale(1.06, .92); animation-timing-function: cubic-bezier(.25, .8, .4, 1); }
  48% { transform: translateY(-40%) scale(.95, 1.07); animation-timing-function: cubic-bezier(.6, 0, .8, .25); }
  90% { transform: translateY(0) scale(.96, 1.05); }
}
@keyframes bongi-shadow {
  0%, 100% { transform: scaleX(1.05); opacity: 1; animation-timing-function: cubic-bezier(.25, .8, .4, 1); }
  48% { transform: scaleX(.55); opacity: .35; animation-timing-function: cubic-bezier(.6, 0, .8, .25); }
  90% { transform: scaleX(1); opacity: 1; }
}
.player-start { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 0; border: 0; cursor: pointer; background: #05090f; }
.player-start img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); }
.player-start .btn { position: relative; }
.player-start .hint { position: relative; font-size: 15px; font-weight: 500; color: #eef4fa; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.player:fullscreen { border-radius: 0; max-height: none; box-shadow: none; }
.player-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 20px; }
.player-bar h1, .soon-panel h1 { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: clamp(30px, 3vw, 42px); letter-spacing: .02em; line-height: 1.15; }
.title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.game-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 6px; font-size: 15px; color: var(--muted); }
.game-stats:empty { display: none; }
.game-stats .plays { color: var(--text); }
.player-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pill { padding: 3px 10px; font-family: 'Fredoka', sans-serif; font-size: 14px; font-weight: 600; color: var(--muted); background: var(--surf); border: 1.5px solid var(--line); border-radius: 8px; }
.player-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.about-game { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px 48px; }
.about-game .desc { flex: 3 1 420px; min-width: 0; font-size: 17px; line-height: 1.7; max-width: 62ch; }
.proto-note { margin-bottom: 16px; padding: 12px 16px; font-size: 15px; line-height: 1.55; background: color-mix(in srgb, var(--orange) 12%, transparent); border: 1.5px dashed var(--orange); border-radius: 12px; }
.controls { flex: 2 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 20px 22px 22px; background: var(--surf); border: 1.5px solid var(--line); border-radius: 14px; }
.controls h2 { font-family: 'Luckiest Guy', sans-serif; font-size: 28px; letter-spacing: .03em; line-height: 1.1; }
.controls h3 { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 16px; color: var(--muted); margin-bottom: 6px; }
.controls dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 7px 16px; font-size: 15px; }
.controls dt { color: var(--muted); }
.controls dd { margin: 0; font-weight: 600; }
.soon-panel { display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: center; }
.soon-panel img { flex: 3 1 420px; min-width: 0; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; box-shadow: 0 0 0 1.5px var(--line), 0 18px 40px -22px var(--shadow); }
.soon-panel > div { flex: 2 1 320px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.soon-panel p { font-size: 17px; line-height: 1.7; color: var(--muted); }
.more { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 17vw, 260px), 1fr)); gap: 24px 20px; }

/* ---------- press + hover: every button is a chunky toy key, every card a thing you can pick up ----------
   Hover (mouse only) lifts a button as its hard shadow grows, so the shadow's foot stays put; a press squashes it down
   onto its shadow in 70 ms; letting go springs it back up with a little overshoot (the release takes the resting state's
   easeOutBack). Cards lift on a soft shadow instead; sidebar items light up as their icon wiggles. Icons join in: the
   play arrow nudges forward, the dice tips, the sun turns, the back arrow points. */
.btn, .logo-mark, .back .icon, .btn .icon, .side-link, .side-link .icon, .side-link span, .see-all, .see-all .icon, .text-btn,
.tile-media, .tile-media img,
.spot-media img, .spot-media video, .soon-card, .soon-shot img, .player-start img {
  transition: transform 260ms var(--ease-back), box-shadow 260ms var(--ease-back), border-color .2s ease, background-color .2s ease, filter .2s ease;
}
.btn, .side-link, .see-all, .text-btn, .tile, .soon-card, .player-start, .spot-media, .logo, .back { -webkit-tap-highlight-color: transparent; }
.btn:active, .side-link:active, .see-all:active, .text-btn:active, .tile:active .tile-media, .soon-card:active, .player-start:active .btn, .logo:active .logo-mark,
.back:active .icon, .spot-media:active img, .tile:active .tile-media img {
  transition-duration: 70ms; transition-timing-function: var(--ease-out);
}
.btn:active, .player-start:active .btn { transform: translateY(3px) scale(.97); box-shadow: 0 0 0 var(--ink); }
.btn:active .icon { transform: scale(.88); }
.side-link:active, .see-all:active, .text-btn:active { transform: scale(.94); }
.tile:active .tile-media { transform: translateY(2px) scale(.97); box-shadow: 0 0 0 1.5px var(--line), 0 4px 10px -8px var(--shadow); }
.soon-card:active { transform: translateY(2px) scale(.985); box-shadow: 0 4px 10px -8px var(--shadow); }
.spot-media:active img, .tile:active .tile-media img { transform: scale(.98); }
.logo:active .logo-mark { transform: rotate(-9deg) scale(.88); }
.back:active .icon { transform: translateX(-5px); }
.tile:focus-visible .tile-media { transform: translateY(-4px); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover, .player-start:hover .btn { transform: translateY(-2px); box-shadow: 0 5px 0 var(--ink); filter: brightness(1.06) saturate(1.08); }
  .btn-big:hover, .player-start:hover .btn-big { transform: translateY(-2px) scale(1.04); box-shadow: 0 6px 0 var(--ink); }
  .btn-icon:hover { filter: none; background: var(--bg); }
  .btn:hover .icon { transform: scale(1.12); }
  .btn-play:hover .icon, .player-start:hover .btn .icon { transform: translateX(3px) scale(1.12); }
  .btn-random:hover .icon { transform: rotate(-16deg) scale(1.15); }
  .theme-toggle:hover .icon-sun { transform: rotate(45deg) scale(1.12); }
  .theme-toggle:hover .icon-moon { transform: rotate(-22deg) scale(1.12); }
  #fullscreen:hover .icon { transform: scale(1.2); }
  .side-link:not([aria-current]):hover { background: var(--bg); }
  .side-link:hover .icon { transform: rotate(-12deg) scale(1.18); }
  .side-link:not([aria-current]):hover .icon { color: var(--text); }
  .side-link:hover span { transform: translateX(3px); }
  .see-all:hover, .text-btn:hover { background: var(--surf); box-shadow: 0 0 0 1.5px var(--line); transform: translateY(-1px); }
  .text-btn:hover { color: var(--text); }
  .see-all:hover .icon { transform: translateX(3px); }
  .tile:hover .tile-media { transform: translateY(-5px) rotate(-.6deg); box-shadow: 0 0 0 1.5px var(--line), 0 18px 28px -16px var(--shadow); }
  .tile:hover .tile-media img { transform: scale(1.06); }
  .spot-media:hover img, .spot-media:hover video { transform: scale(1.04); }
  .soon-card:hover { transform: translateY(-4px); box-shadow: 0 18px 30px -18px var(--shadow); border-color: var(--sky); }
  .soon-card:hover .soon-shot img { transform: scale(1.06); }
  .player-start:hover img { transform: scale(1.03); }
  .logo:hover .logo-mark { transform: rotate(5deg) scale(1.08); }
  .back:hover .icon { transform: translateX(-4px); }
}

/* ---------- wide screens: the top bar and the sidebar stay put while the page scrolls ---------- */
@media (min-width: 1000px) {
  .topbar { position: sticky; top: 0; }
  .topbar-in { flex-wrap: nowrap; height: var(--bar-h); padding-block: 0; }
}
@media (min-width: 1000px) and (max-width: 1240px) {
  .rank-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* touch screens swipe the rows, so no arrows */
@media (hover: none) {
  .strip-nav { display: none; }
}

/* ---------- tablets + phones: the sidebar becomes a drawer behind the menu button ---------- */
@media (max-width: 999.98px) {
  .rank-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strip { grid-auto-columns: clamp(170px, 28vw, 240px); }
  .strip-sm { grid-auto-columns: clamp(150px, 24vw, 200px); }
  .menu-toggle { display: inline-flex; }
  .topbar-in { gap: 12px 14px; padding-inline: clamp(16px, 2.2vw, 32px); }
  .search { flex-basis: 150px; }
  .btn-random-label, .account-label { display: none; }
  .btn-random, .account-btn:not(.signed-in) { width: 46px; padding: 0; }
  .shell { display: block; }
  .sidebar { position: fixed; z-index: 60; top: 0; left: 0; bottom: 0; width: min(300px, 86vw); height: auto; align-self: stretch; padding-top: 12px; border-right: 0; box-shadow: 0 0 40px -10px rgba(0, 0, 0, .45); transform: translateX(-105%); visibility: hidden; transition: transform 320ms var(--ease-out), visibility 0s linear 320ms; }
  .nav-open .sidebar { transform: none; visibility: visible; transition: transform 320ms var(--ease-out), visibility 0s; }
  .side-head { display: flex; align-items: center; gap: 12px; padding: 0 2px 14px; margin-bottom: 8px; border-bottom: 1.5px solid var(--line); }
  .side-head .logo-mark { width: 42px; height: 42px; }
  .side-head .logo-word { font-size: 21px; -webkit-text-stroke-width: 5px; }
  .scrim { display: block; position: fixed; z-index: 55; inset: 0; background: rgba(6, 14, 24, .55); opacity: 0; pointer-events: none; transition: opacity 320ms var(--ease-out); }
  .nav-open .scrim { opacity: 1; pointer-events: auto; }
  .nav-open { overflow: hidden; }
}
@media (max-width: 640px) {
  .topbar-in { gap: 10px 8px; padding-block: 12px; }
  .topbar .btn { height: 42px; }
  .topbar .btn-icon, .btn-random, .account-btn:not(.signed-in) { width: 42px; padding: 0; }
  .topbar .logo { gap: 8px; margin-left: 2px; }
  .topbar .logo-word { font-size: 21px; -webkit-text-stroke-width: 5px; }
  .topbar .logo-mark { width: 40px; height: 40px; }
  .search { order: 3; flex-basis: 100%; max-width: none; }
  .search input { height: 44px; }
  .topbar-actions { gap: 8px; }
  .section-title { font-size: 28px; -webkit-text-stroke-width: 5px; }
  .rank-grid, .rank-grid.few, .rank-grid.solo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .spot { grid-column: 1 / -1; grid-row: auto; }
  .feature-grid { grid-template-columns: minmax(0, 1fr); }
  .strip { grid-auto-columns: 62%; gap: 12px; }
  .strip-sm { grid-auto-columns: 44%; }
  .spot-info { gap: 12px 14px; padding: 14px 14px 16px; }
  .rank { width: 50px; height: 48px; font-size: 24px; }
  .spot-text { flex-basis: 160px; }
  .spot-info .btn { width: 100%; }
  .tile-title { font-size: 16px; }
  .tile-meta { font-size: 13px; }
  .tile-name .tag { height: 20px; padding: 0 6px; font-size: 12px; }
  .soon-card { flex-direction: column; align-items: stretch; gap: 10px; }
  .soon-shot { width: 100%; }
  .soon-body { padding: 0 6px 6px; }
  .player-bar .btn { flex: 1 1 auto; }
  .player-actions { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .btn, .side-link, .side-link .icon, .side-link span, .see-all, .see-all .icon, .text-btn, .back .icon, .btn .icon, .tile-media, .tile-media img, .spot-media img, .spot-media video,
  .soon-card, .soon-shot img, .player-start img { transform: none !important; }
  .logo-mark { transform: rotate(-5deg) !important; }
}