/* INSERT GLITCH · the website's look (WEB ARCADE; docs/WEB.md). ⚠ Sam, Wed 7 Oct 2026: "yip Neon shelves is perfect":
   CrazyGames' structure in the arcade's own look, AFTER HOURS tuned toward NEON RAIN's indigo, plum and neon (Sam's
   pick for the arcade's art, Tue 6 Oct 20:48), with a whisper of rain down the glass. Every game's tile is its cabinet:
   its marquee.png the title plate, its trim the frame, its badge.png cut from its own frame, its poster the screen.
   Each game's colours come after these rules as classes (.g-<id>, .s-<name>: pages.gameCss), never inline (the CSP's
   style-src is 'self'). */
@font-face { font-family: 'Glitch Marquee'; src: url('/fonts/glitch-marquee.woff') format('woff'); font-display: swap; }
:root {
  color-scheme: dark;
  --bg: #0d0b1f; --bg2: #151033; --bg3: #1d1640; --plum: #2a1340; --ink: #f2eefa; --dim: #b7b0d4; --faint: #8a83ad; --line: #2e2656;
  --mag: #ff5fae; --cyan: #59e2f0; --gold: #ffd27a; --green: #8dff6a;
  --head: 'Glitch Marquee', ui-monospace, Menlo, Consolas, monospace;
  --body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --side: 236px; --top: 70px; --wrap: 1180px; --gut: 16px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top) + 12px); }
body { margin: 0; color: var(--ink); font: 400 15px/1.55 var(--body); min-height: 100vh; overflow-x: hidden;
  background: radial-gradient(ellipse at 70% -10%, #2a1650 0%, transparent 55%), radial-gradient(ellipse at 0% 100%, #2b0f3a 0%, transparent 50%), linear-gradient(180deg, #110d28, #0b0919 60%);
  background-attachment: fixed; }
.rain { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(103deg, transparent 0 22px, rgba(140, 170, 255, .035) 22px 23px, transparent 23px 61px),
    repeating-linear-gradient(98deg, transparent 0 37px, rgba(255, 95, 174, .025) 37px 38px, transparent 38px 90px); }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .22em; }
a:hover { color: var(--cyan); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
h1, h2, h3, p, figure, ul, dl { margin: 0; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -6rem; z-index: 50; background: var(--gold); color: #120c24; padding: .6rem 1rem; font-weight: 700; }
.skip:focus { top: 1rem; }
.g { width: 14px; height: 14px; fill: currentColor; flex: none; }

/* ---------------------------------------------------------------- the header: the logo, search, the stores */
.top { position: fixed; z-index: 10; inset: 0 0 auto 0; height: var(--top); display: flex; align-items: center; gap: 18px; padding: 0 20px;
  padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px));
  background: linear-gradient(180deg, rgba(17, 12, 40, .97), rgba(13, 11, 31, .94)); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(255, 95, 174, .18), 0 8px 24px rgba(0, 0, 0, .35); }
.top .logo { flex: none; }
.top .logo img { height: 42px; width: auto; filter: drop-shadow(0 0 8px rgba(89, 226, 240, .35)); }
.search { flex: 1 1 auto; max-width: 520px; margin: 0; }
.search label { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px; background: rgba(9, 7, 22, .8); border: 1px solid var(--line); border-radius: 999px; cursor: text; }
.search label:focus-within { border-color: var(--cyan); }
.search .g { width: 16px; height: 16px; color: var(--faint); }
.search input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--ink); font: inherit; outline: none; }
.search input::-webkit-search-cancel-button { filter: invert(.7); }

/* ---------------------------------------------------------------- coming soon: the stores not out yet, drawn glyphs */
.soon { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 700 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.soon .soon-tag, .soon .soon-day { color: var(--gold); padding: 0 4px; white-space: nowrap; }
.soon .soon-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; font: 600 12px/1 var(--body); letter-spacing: .02em; text-transform: none;
  color: var(--ink); background: rgba(255, 210, 122, .06); border: 1px solid rgba(255, 210, 122, .45); border-radius: 999px; cursor: pointer; }
.soon .soon-btn:hover { background: rgba(255, 210, 122, .16); }
.soon .soon-note { flex: 1 1 100%; margin: .3rem 0 0; font: 600 13px/1.5 var(--body); letter-spacing: .02em; text-transform: none; color: var(--ink); }
.soon-top { margin-left: auto; flex-wrap: nowrap; position: relative; }
.soon-top .soon-note { position: absolute; right: 0; top: 46px; width: 300px; padding: 10px 12px; background: var(--bg2); border: 1px solid var(--gold); border-radius: 10px; }
.soon-home { display: none; }

/* ---------------------------------------------------------------- the side bar, and a phone's bottom bar */
.side { position: fixed; z-index: 9; top: var(--top); bottom: 0; left: 0; width: var(--side); padding: 14px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
  background: linear-gradient(180deg, rgba(20, 14, 46, .96), rgba(14, 10, 32, .96)); border-right: 1px solid var(--line); }
.side a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; font: 600 13px/1.2 var(--body); color: var(--dim); text-decoration: none; border-radius: 10px; }
.side a .g { width: 18px; height: 18px; }
.side a:hover, .side a.on { background: rgba(89, 226, 240, .10); color: var(--ink); box-shadow: inset 2px 0 0 var(--cyan); }
.side a.arc { color: var(--gold); }
.side a.wing span { font: 400 12px/1.2 var(--head); letter-spacing: .06em; }
.side hr { border: 0; height: 1px; background: var(--line); margin: 8px 6px; }
.bottom { display: none; }
main { position: relative; z-index: 1; margin-left: var(--side); padding: calc(var(--top) + 18px) 24px 24px; min-width: 0; }

/* ---------------------------------------------------------------- the banner into the arcade */
/* (ARCADE ART's loop of TONIGHT ON THE FLOOR, the six whole: the art shown entire, its words in a strip under it) */
.hero { position: relative; margin-bottom: 28px; }
.hero-link { position: relative; display: block; overflow: hidden; border-radius: 16px; text-decoration: none; color: var(--ink); background: #0b0918;
  border: 2px solid rgba(255, 210, 122, .55); box-shadow: 0 0 0 4px rgba(255, 210, 122, .08), 0 0 40px rgba(255, 95, 174, .18); }
.hero-art { position: relative; display: block; aspect-ratio: 2420 / 700; overflow: hidden; background: #0b0918; }
.hero-pic, .hero-pic img, .hero-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.hero-film { opacity: 0; transition: opacity .4s; }
.hero-film.on { opacity: 1; }
.hero-copy { display: flex; align-items: center; gap: 18px; padding: 14px 22px; border-top: 1px solid rgba(255, 210, 122, .35);
  background: linear-gradient(90deg, rgba(42, 19, 64, .95), rgba(13, 11, 31, .95)); }
.hero-words { display: grid; gap: 4px; flex: 1 1 auto; min-width: 0; }
.kicker { margin: 0; font: 700 12px/1 var(--body); letter-spacing: .22em; color: var(--mag); text-transform: uppercase; }
.hero-h { font: 400 30px/1.02 var(--head); letter-spacing: .02em; color: var(--gold); text-shadow: 0 0 14px rgba(255, 210, 122, .45); text-transform: uppercase; }
.hero-p { color: var(--dim); font-size: 14px; }
.cta { flex: none; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 22px; font: 800 14px/1 var(--body); letter-spacing: .12em; color: #120c24; background: var(--gold); border-radius: 999px; box-shadow: 0 0 20px rgba(255, 210, 122, .4); }
.cta .g { width: 18px; height: 18px; }
.hero-link:hover .cta, .hero-link:focus-visible .cta { background: #fff1c4; }

/* ---------------------------------------------------------------- the shelves */
.shelf { margin: 0 0 30px; }
.shelf-h { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.shelf-h h2 { margin: 0; font: 400 20px/1 var(--head); letter-spacing: .05em; color: var(--cyan); text-shadow: 0 0 10px rgba(89, 226, 240, .35); text-transform: uppercase; }
.shelf-h .sub { color: var(--faint); font-size: 13px; }
.tiles { display: grid; grid-auto-flow: column; grid-auto-columns: 236px; gap: 18px; overflow-x: auto; padding: 4px 4px 14px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; overscroll-behavior-x: contain; }
.shelf.big .tiles { grid-auto-columns: 316px; }
.searching .tiles { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); overflow: visible; }
.search-none { color: var(--dim); margin: 0 0 24px; }

/* the tile: the game's cabinet. Its marquee the title plate, its trim the frame, the screen, the badge cut from its frame */
.tile { position: relative; display: block; padding: 0 9px 10px; border-radius: 12px 12px 8px 8px; text-decoration: none; color: inherit;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fill, #120f24) 70%, #000) 0%, color-mix(in srgb, var(--fill, #120f24) 55%, #0b0918) 70%);
  border: 3px solid var(--trim, var(--accent, var(--cyan))); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .6), 0 10px 22px rgba(0, 0, 0, .35); transition: transform .15s, box-shadow .15s; }
a.tile:hover, a.tile:focus-visible { transform: translateY(-3px); color: inherit; outline: none;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .6), 0 0 26px var(--glow, var(--mag)), 0 14px 28px rgba(0, 0, 0, .45); }
a.tile:focus-visible { box-shadow: 0 0 0 3px var(--gold), 0 0 26px var(--glow, var(--mag)); }
.tile .plate { display: block; margin: 0 -9px 9px; background: var(--plate, #0b0918); border-bottom: 3px solid var(--trim, var(--accent)); border-radius: 9px 9px 0 0; overflow: hidden; }
.tile .plate img { width: 100%; height: auto; aspect-ratio: 4 / 1; image-rendering: pixelated; }
.tile .screen { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border: 3px solid #050409; border-radius: 4px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, var(--cyan)) 45%, #000); }
.tile .screen img, .tile .screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.tile video { opacity: 0; transition: opacity .2s; }
.tile video.on { opacity: 1; }
.tile .badge { position: absolute; left: -10px; bottom: 30px; width: 46px; height: 46px; filter: drop-shadow(0 0 8px var(--glow, var(--mag))); }
.tile .badge img { width: 100%; height: 100%; image-rendering: pixelated; }
.tile .cap { display: flex; flex-direction: column; padding: 8px 2px 0 40px; min-width: 0; }
.tile .cap b { font: 700 13px/1.25 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .cap i { font: 600 10.5px/1.4 var(--body); font-style: normal; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; }
/* COMING SOON: the same cabinet, unlit; its gold plate across a dark screen */
.tile.soon { border-color: color-mix(in srgb, var(--accent, var(--cyan)) 35%, #2a2440); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .55); }
.tile.soon .plate { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 6px 10px; border-bottom-color: color-mix(in srgb, var(--accent, var(--cyan)) 35%, #2a2440); }
.tile.soon .lettered { font: 400 13px/1.15 var(--head); letter-spacing: .06em; text-align: center; color: color-mix(in srgb, var(--accent, var(--cyan)) 70%, #fff); opacity: .75; }
.tile.soon .static { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 3px),
  radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--accent, var(--cyan)) 16%, transparent), transparent 70%), #0a0814; }
.tile.soon .soon-plate { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-3deg); padding: 6px 12px; font: 800 12px/1 var(--body); letter-spacing: .18em;
  color: #2a1a00; background: linear-gradient(180deg, #ffe39a, #e8b54a); border: 2px solid #7a5418; box-shadow: 0 2px 0 #3a2608; white-space: nowrap; }
.tile.soon .cap { padding-left: 2px; }
.tile.soon .cap b { color: var(--dim); }

/* ---------------------------------------------------------------- a game's page: its player in its cabinet's trim */
/* (as CrazyGames' game page does, the side bar folds to its icons so the game has the width: a Glitch cartridge draws
   its 640 grid at whole device pixels, so 2× needs 1280 CSS px of player, which a 1440 window gives with the icons) */
@media (min-width: 761px) and (hover: hover), (min-width: 761px) and (min-height: 501px) {
  .game-page { --side: 64px; }
  .game-page .side a { justify-content: center; padding: 10px 0; }
  .game-page .side a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .game-page .side a:hover, .game-page .side a.on { box-shadow: inset 0 0 0 1px rgba(89, 226, 240, .35); }
  .game-page main { padding-left: 16px; padding-right: 16px; }
  /* (the player full-bleed in the column, so a 1366 window still plays at 2×: 1366 − 64 = 1302 ≥ 1280) */
  .game-page .player-box { margin: 0 -16px; max-width: none; border-left: 0; border-right: 0; border-radius: 0; }
  .game-page .player { margin: 6px 0 0; }
  .game-page .player-box .plate img { width: min(100%, 384px); }
}
.player-box { border: 3px solid var(--trim, var(--accent)); border-radius: 14px 14px 10px 10px; background: color-mix(in srgb, var(--fill, #120f24) 60%, #0b0918);
  box-shadow: 0 0 30px color-mix(in srgb, var(--glow, var(--mag)) 35%, transparent); overflow: hidden; max-width: 1280px; }
.player-box .plate { border-bottom: 3px solid var(--trim, var(--accent)); display: flex; justify-content: center; }
.player-box .plate img { width: min(100%, 512px); height: auto; aspect-ratio: 4 / 1; image-rendering: pixelated; }
.player { margin: 10px; min-height: 120px; }
.player noscript img { width: 100%; image-rendering: pixelated; }
/* ⚠ (Wed 7 Oct 2026, the iPhone's path: no element full screen, so HOST's player fills the window, .gp-full) the
   filled player covers the site: main's own stacking (z 1) held it under the header and the bottom bar (z 10), which
   hid the pad's stick and THROW and the pause, and the page's margin pushed it 6 px off the edge. The page behind
   it doesn't scroll */
main:has(.gp-full) { z-index: 30; }
html:has(.gp-full), html:has(.gp-full) body { overflow: hidden; }
.player.gp-full, .game-page .player.gp-full { margin: 0; }
.about { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 28px; margin: 24px 0 32px; max-width: 1280px; }
.about h1 { margin: 2px 0 4px; font: 400 34px/1.05 var(--head); text-transform: uppercase; }
.maker { margin: 0 0 10px; color: var(--faint); font-size: 13px; }
.blurb { margin: 0 0 14px; color: var(--dim); max-width: 640px; font-size: 16px; }
.ctls { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.ctl { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; font: 600 12px/1 var(--body); color: var(--dim); background: rgba(20, 14, 46, .8); border: 1px solid var(--line); border-radius: 999px; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 0; }
.tags span { padding: 5px 10px; font: 600 11px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); background: rgba(20, 14, 46, .8); border: 1px solid var(--line); border-radius: 999px; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .9rem 1.4rem; margin-top: 1rem; }
.facts dt { font: 700 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.facts dd { margin: .2rem 0 0; }
.side-note { color: var(--faint); font-size: 13px; margin: 10px 0 16px; }
.about-side .stores { display: grid; gap: 12px; }
.about-side .btn.gold { width: 100%; }

/* ---------------------------------------------------------------- buttons, the stores */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 48px; padding: .8rem 1.3rem; text-decoration: none; border-radius: 999px;
  font: 800 14px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; border: 2px solid var(--cyan); color: var(--ink); background: transparent; cursor: pointer; }
.btn:hover { background: var(--cyan); color: #120c24; }
.btn .g { width: 18px; height: 18px; }
.btn.gold { border-color: var(--gold); background: var(--gold); color: #120c24; box-shadow: 0 0 20px rgba(255, 210, 122, .35); }
.btn.gold:hover { background: #fff1c4; border-color: #fff1c4; }
.btn small { font: inherit; font-size: 11px; opacity: .8; letter-spacing: .08em; }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.stores { display: grid; gap: .8rem; }
.stores .phones { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; font: 600 12px/1.4 var(--mono); letter-spacing: .08em; color: var(--dim); }
.stores .phones .label { color: var(--faint); text-transform: uppercase; letter-spacing: .14em; }
.stores .coming { margin: 0; font: 600 12px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.store-badge { display: inline-flex; align-items: center; min-height: 48px; }
.store-badge img { display: block; height: 48px; width: auto; }
.stores[data-first="ios"] .phones, .stores[data-first="android"] .phones { order: -1; }
.stores[data-first] .phones .label { display: none; }
.stores[data-first] .phones .store-badge img { height: 56px; }

/* ---------------------------------------------------------------- the plain pages: press, privacy, support, 404 */
.wrap { width: min(var(--wrap), 100%); }
.section { padding-block: clamp(1rem, 3vw, 2rem); }
.eyebrow { font: 700 12px/1.3 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--mag); margin-bottom: .8rem; }
.lead { font-size: clamp(17px, 2.2vw, 20px); color: var(--dim); max-width: 44rem; }
.h { font-family: var(--head); font-weight: 400; text-transform: uppercase; line-height: 1.15; letter-spacing: .02em; }
h1.h { font-size: clamp(28px, 5vw, 52px); color: var(--gold); text-shadow: 0 0 14px rgba(255, 210, 122, .35); }
h2.h { font-size: clamp(19px, 3vw, 26px); margin-bottom: 1rem; color: var(--cyan); }
h3.h { font-size: 19px; }
.note { color: var(--faint); font-size: 14px; }
.gap-top { margin-top: 1.2rem; } .gap-top-s { margin-top: .8rem; } .gap-top-l { margin-top: 3rem; } .gap-y { margin: 1rem 0 1.4rem; }
.prose { max-width: 46rem; }
.prose h2 { font-size: 21px; margin: 2.2rem 0 .8rem; }
.prose p, .prose li { color: var(--dim); }
.prose p + p { margin-top: .9rem; }
.prose ul { padding-left: 1.2rem; display: grid; gap: .5rem; margin-top: .6rem; }
.prose a { color: var(--cyan); }
.press-layout { display: grid; gap: 2rem; }
@media (min-width: 1100px) { .press-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 4rem; } }
.press-layout dl > div { margin-bottom: 1rem; }
.press-layout dt { font: 700 11px/1.3 var(--mono); letter-spacing: .14em; color: var(--faint); text-transform: uppercase; }
.press-layout dd { margin: .2rem 0 0; overflow-wrap: anywhere; }
.downloads { list-style: none; padding: 0 !important; }
.downloads li { border-top: 1px solid var(--line); padding-block: .9rem; }
.downloads a { font-weight: 700; color: var(--ink); }
.downloads span { display: block; font-size: 14px; color: var(--faint); }
.site-foot { border-top: 1px solid var(--line); margin-top: 3rem; padding-block: 1.6rem 1rem; color: var(--faint); font-size: 13px; display: grid; gap: .8rem; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.site-foot a { color: var(--dim); }
.review-looks { position: fixed; right: 12px; bottom: 12px; z-index: 60; display: flex; gap: 6px; padding: 6px; background: rgba(5, 5, 13, .9); border: 1px solid var(--line); font: 600 11px/1 var(--mono); }
.review-looks a { padding: .5rem .6rem; text-decoration: none; color: var(--dim); border: 1px solid transparent; }
.review-looks a[aria-current="true"] { border-color: var(--gold); color: var(--gold); }

/* ---------------------------------------------------------------- a phone: a two-up grid, a bottom bar */
/* (a phone on its side too: a touch screen not 500 px tall) */
@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  :root { --top: 56px; }
  .top { gap: 10px; padding: 0 12px; padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
  .top .logo img { height: 30px; }
  .search label { height: 36px; padding: 0 12px; }
  .soon-top { display: none; }
  .soon-home { display: flex; margin: -6px 0 22px; }
  .soon-home .soon-btn { height: 32px; }
  .side { display: none; }
  main { margin-left: 0; padding: calc(var(--top) + 12px) 12px calc(86px + env(safe-area-inset-bottom, 0px)); }
  .hero { margin-bottom: 20px; }
  .hero.has-phone .hero-art { aspect-ratio: 1170 / 600; }
  .hero-copy { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .hero-h { font-size: 24px; }
  .hero-p { display: none; }
  .cta { height: 42px; padding: 0 16px; font-size: 12px; }
  .shelf-h .sub { display: none; }
  .shelf-h h2 { font-size: 17px; }
  .tiles, .shelf.big .tiles { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; gap: 14px 12px; }
  .tile { padding: 0 6px 8px; }
  .tile .plate { margin: 0 -6px 6px; }
  .tile .badge { width: 36px; height: 36px; left: -6px; bottom: 26px; }
  .tile .cap { padding-left: 32px; }
  .tile .cap b { font-size: 12px; }
  .tile.soon .plate { min-height: 40px; }
  .tile.soon .lettered { font-size: 11px; }
  .bottom { position: fixed; z-index: 10; left: 0; right: 0; bottom: 0; height: calc(66px + env(safe-area-inset-bottom, 0px)); display: flex; padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(14, 10, 32, .97); border-top: 1px solid var(--line); box-shadow: 0 -1px 0 rgba(255, 95, 174, .18); }
  .bottom a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: 600 10px/1 var(--body); color: var(--dim); text-decoration: none; }
  .bottom a .g { width: 20px; height: 20px; }
  .bottom a.on { color: var(--cyan); }
  .bottom a.arc { color: var(--gold); }
  .about { grid-template-columns: 1fr; gap: 14px; }
  .about h1 { font-size: 26px; }
  .player-box { margin: 0 -12px; border-radius: 0; border-left: 0; border-right: 0; }
  .player { margin: 6px; }
  .actions .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .tile, .tile video { transition: none; }
  a.tile:hover { transform: none; }
}
/* each game's colours (its label's cabinet look), and the COMING SOON cabinets' */
.g-257am{--accent:#ffb83a;--fill:#0a0f3a;--glow:#8a6aff;--trim:#d9a441;--plate:#140906;--plate-bg:#040411}
.g-257am .screen img,.g-257am .screen video{inset:auto;left:-39.3%;top:-10.7%;width:178.6%;height:178.6%;max-width:none;object-fit:fill}
.g-heist{--accent:#ffc93d;--fill:#3a3d48;--glow:#8ad0ff;--trim:#c8a050;--plate:#0c0a08;--plate-bg:#0c0b13}
.g-heist .screen img,.g-heist .screen video{inset:auto;left:-62%;top:-83%;width:200%;height:200%;max-width:none;object-fit:fill}
.g-monstertruck{--accent:#ff7a2a;--fill:#2a2a32;--glow:#ff5a2a;--trim:#ff7a2a;--plate:#1a1410;--plate-bg:#090810}
.g-monstertruck .screen img,.g-monstertruck .screen video{inset:auto;left:-3.8%;top:-35.4%;width:153.8%;height:153.8%;max-width:none;object-fit:fill}
.g-neon{--accent:#ff4fa8;--fill:#3a1036;--glow:#ff4fa8;--trim:#48e6ff;--plate:#0a0612;--plate-bg:#0c0411}
.g-neon .screen img,.g-neon .screen video{inset:auto;left:-14.3%;top:-42.9%;width:158.7%;height:158.7%;max-width:none;object-fit:fill}
.g-pastbedtime{--accent:#ff6aa8;--fill:#1a2258;--glow:#9aee5a;--trim:#a06a3a;--plate:#f4e6c4;--plate-bg:#070716}
.g-pastbedtime .screen img,.g-pastbedtime .screen video{inset:auto;left:-94%;top:-17%;width:200%;height:200%;max-width:none;object-fit:fill}
.g-thwack{--accent:#e8302a;--fill:#4a90e0;--glow:#ffb04a;--trim:#ff8a3a;--plate:#fff4d6;--plate-bg:#0e172a}
.g-thwack .screen img,.g-thwack .screen video{inset:auto;left:-14.7%;top:-16.7%;width:133.3%;height:133.3%;max-width:none;object-fit:fill}
.s-koi-garden{--accent:#f0762a;--fill:#0c3143;--glow:#ffd27a;--trim:#f0762a;--plate:#0b0918}
.s-lo-fi-rooftops{--accent:#48e6ff;--fill:#1b1428;--glow:#ff4fa8;--trim:#48e6ff;--plate:#0b0918}
.s-chimefall{--accent:#bfe7f8;--fill:#15233a;--glow:#ff3d9a;--trim:#bfe7f8;--plate:#0b0918}
.s-let-him-cook{--accent:#ff7a3d;--fill:#2a0f1c;--glow:#ffd27a;--trim:#ff7a3d;--plate:#0b0918}
.s-kersplash{--accent:#8dff6a;--fill:#120f24;--glow:#b07aff;--trim:#8dff6a;--plate:#0b0918}
.s-kersplash-shift{--accent:#b07aff;--fill:#120f24;--glow:#ff4fa8;--trim:#b07aff;--plate:#0b0918}
.s-hush{--accent:#ff4fa8;--fill:#120f24;--glow:#ff7a3d;--trim:#ff4fa8;--plate:#0b0918}
.s-midnight-mansion{--accent:#ff4fa8;--fill:#120f24;--glow:#ff4fa8;--trim:#ff4fa8;--plate:#0b0918}
.s-prism{--accent:#ff4fd8;--fill:#150a2a;--glow:#59e2f0;--trim:#ff4fd8;--plate:#0b0918}
.s-downhill{--accent:#8dff6a;--fill:#120f24;--glow:#ff4fa8;--trim:#8dff6a;--plate:#0b0918}
.s-rubber-hose{--accent:#ff7a3d;--fill:#120f24;--glow:#ff7a3d;--trim:#ff7a3d;--plate:#0b0918}
.s-but-wait{--accent:#ff4fa8;--fill:#120f24;--glow:#ff4fa8;--trim:#ff4fa8;--plate:#0b0918}
.s-snowed-in{--accent:#8dff6a;--fill:#120f24;--glow:#b07aff;--trim:#8dff6a;--plate:#0b0918}
.s-fight-night{--accent:#b07aff;--fill:#1c0f33;--glow:#ffc93d;--trim:#b07aff;--plate:#0b0918}
.s-spacewalk{--accent:#59e2f0;--fill:#120f24;--glow:#8dff6a;--trim:#59e2f0;--plate:#0b0918}
.s-big-catch{--accent:#8dff6a;--fill:#120f24;--glow:#8dff6a;--trim:#8dff6a;--plate:#0b0918}
.s-science-fair{--accent:#ff4fa8;--fill:#120f24;--glow:#8dff6a;--trim:#ff4fa8;--plate:#0b0918}
.s-saturday-hero{--accent:#8dff6a;--fill:#120f24;--glow:#59e2f0;--trim:#8dff6a;--plate:#0b0918}
.s-bot-brawl{--accent:#ff7a3d;--fill:#120f24;--glow:#ff4fa8;--trim:#ff7a3d;--plate:#0b0918}
.s-last-orders{--accent:#8dff6a;--fill:#120f24;--glow:#8dff6a;--trim:#8dff6a;--plate:#0b0918}
.s-high-noon{--accent:#ffd27a;--fill:#120f24;--glow:#ff4fa8;--trim:#ffd27a;--plate:#0b0918}
.s-the-deep{--accent:#ff4fa8;--fill:#120f24;--glow:#59e2f0;--trim:#ff4fa8;--plate:#0b0918}
.s-kaiju{--accent:#6dff8a;--fill:#0a1420;--glow:#ff5a3d;--trim:#6dff8a;--plate:#0b0918}
.s-storm-chaser{--accent:#8dff6a;--fill:#120f24;--glow:#ff7a3d;--trim:#8dff6a;--plate:#0b0918}
.s-night-train{--accent:#b07aff;--fill:#120f24;--glow:#ffd27a;--trim:#b07aff;--plate:#0b0918}
.s-tilt{--accent:#ff8a24;--fill:#1a0d06;--glow:#ffe08a;--trim:#ff8a24;--plate:#0b0918}
.s-final-glitch{--accent:#59e2f0;--fill:#120f24;--glow:#b07aff;--trim:#59e2f0;--plate:#0b0918}
.s-neon{--accent:#48e6ff;--fill:#0c1030;--glow:#ff4fa8;--trim:#48e6ff;--plate:#0b0918}
.s-neon-cracked{--accent:#b07aff;--fill:#120f24;--glow:#b07aff;--trim:#b07aff;--plate:#0b0918}
.s-quartz{--accent:#ff7a3d;--fill:#120f24;--glow:#59e2f0;--trim:#ff7a3d;--plate:#0b0918}
.s-the-bottle-cap-knight{--accent:#ff7a3d;--fill:#120f24;--glow:#59e2f0;--trim:#ff7a3d;--plate:#0b0918}
.s-the-cpu{--accent:#ffd27a;--fill:#120f24;--glow:#59e2f0;--trim:#ffd27a;--plate:#0b0918}
.s-the-crane{--accent:#ff7a3d;--fill:#120f24;--glow:#ff7a3d;--trim:#ff7a3d;--plate:#0b0918}
.s-the-echo{--accent:#ff7a3d;--fill:#120f24;--glow:#ff4fa8;--trim:#ff7a3d;--plate:#0b0918}
.s-the-pick-and-place{--accent:#ff7a3d;--fill:#120f24;--glow:#ff4fa8;--trim:#ff7a3d;--plate:#0b0918}
.s-the-root-mother{--accent:#ff4fa8;--fill:#120f24;--glow:#8dff6a;--trim:#ff4fa8;--plate:#0b0918}
.s-the-soldermaster{--accent:#59e2f0;--fill:#120f24;--glow:#ffd27a;--trim:#59e2f0;--plate:#0b0918}