/* Gugames "arcade" theme: old-school computer-game look on top of the design system.
   Loaded last. Re-points the tokens (palette, type, square pixel corners) and adds the game-UI details:
   bevelled menu buttons, hard pixel shadows, CRT scanlines, ▶ menu cursors. Remove this one <link> to go back. */

:root {
  /* palette (Denis, 2026-11-03): bg #12131F, cards #1C1E33, purple #7C5CFF, mint Play #00E0A4, text #F2F3FA */
  --px-bg: #12131F;
  --px-panel: #1C1E33;
  --px-panel-2: #22253D;
  --px-panel-3: #2A2D4A;
  --px-edge: #2F3354;
  --px-hi: rgba(255, 255, 255, .22);
  --px-lo: rgba(0, 0, 0, .45);
  --px-gold: #B9A8FF;
  --px-magenta: #7C5CFF;
  --px-cyan: #8EE8CF;
  --px-green: #00E0A4;
  --px-red: #FF6B7A;
  --px-text: #F2F3FA;
  --px-text-2: #A9ACC6;
  --px-text-3: #8C90B0; /* was #7F83A3: 4.4:1 on panels, below WCAG AA for small text */

  --c-bg: var(--px-bg);
  --c-bg-sunken: #0E0F19;
  --c-surface: var(--px-panel);
  --c-surface-2: var(--px-panel-2);
  --c-surface-3: var(--px-panel-3);
  --c-hover: #30345A;
  --c-line: var(--px-edge);
  --c-line-strong: #40446E;
  --c-text: var(--px-text);
  --c-text-2: var(--px-text-2);
  --c-text-3: var(--px-text-3);
  --c-primary: var(--px-magenta);
  --c-primary-hover: #957BFF;
  --c-accent: var(--px-gold);
  --c-play: var(--px-green);
  --c-on-play: #03251B;
  --c-success: var(--px-green);
  --c-warning: var(--px-gold);
  --c-danger: var(--px-red);
  --c-info: var(--px-cyan);
  --c-focus: var(--px-gold);
  --grad-brand: linear-gradient(180deg, #9A82FF 0%, #7C5CFF 50%, #5B3DE0 100%);
  --grad-surface: linear-gradient(180deg, rgba(0, 224, 164, .05), transparent 60%);

  /* One family for every script: Noto Sans (Latin, Cyrillic, Greek, Vietnamese) plus its Arabic, Hebrew,
     Devanagari, Thai, Chinese, Japanese and Korean siblings. Google serves them in unicode-range slices,
     so a page only downloads the scripts it actually shows. The pixel font is kept for the logo and tiny
     labels only, and falls back to Noto for any script it lacks. */
  --font-intl: "Noto Sans", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans Devanagari", "Noto Sans Thai",
    "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-pixel: "Press Start 2P", var(--font-intl);
  --font-display: var(--font-intl);
  --font-ui: var(--font-intl);
  --font-body: var(--font-intl);
  --font-mono: "Noto Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-xs: 0; --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0; --r-pill: 0;
  --px: 4px;                                   /* one "pixel" of the UI */
  --sh-1: 3px 3px 0 #000;
  --sh-2: 6px 6px 0 #000;
  --sh-3: 8px 8px 0 #000;
  --sh-glow: 0 0 0 transparent;
  --sh-play: 0 0 0 transparent;
  --bevel: inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--px-lo), inset var(--px) var(--px) 0 var(--px-hi);
  --bevel-in: inset var(--px) var(--px) 0 var(--px-lo), inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--px-hi);
}

/* ---------- base: dark CRT room, pixel grid, scanlines ---------- */
html, body { background: var(--px-bg); }
body { font-family: var(--font-body); font-size: 15px; letter-spacing: 0; }
body::before {
  inset: 0; height: auto; z-index: -1;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(124, 92, 255, .12), transparent 60%),
    radial-gradient(80% 60% at 100% 100%, rgba(0, 224, 164, .05), transparent 60%),
    linear-gradient(rgba(124, 92, 255, .06) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(124, 92, 255, .06) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--px-bg);
}
body::after { /* scanlines + vignette, never blocks clicks */
  content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px),
    radial-gradient(130% 100% at 50% 50%, transparent 60%, rgba(0, 0, 0, .45));
}
h1, h2, h3, .page-title, .display { font-family: var(--font-display); font-weight: 800; letter-spacing: .01em; line-height: 1.2; text-transform: uppercase; }
h3, h4 { font-family: var(--font-ui); text-transform: none; font-weight: 600; letter-spacing: .01em; }
::selection { background: var(--px-magenta); color: #fff; }
:focus-visible { outline: 3px solid var(--px-gold); outline-offset: 2px; }
.muted, .page-sub { color: var(--c-text-2); }

/* ---------- top bar: a game HUD strip ---------- */
.topbar { background: #0E0F19; border-bottom: var(--px) solid var(--px-edge); box-shadow: 0 var(--px) 0 #000; backdrop-filter: none; -webkit-backdrop-filter: none; }
.brand { font-family: var(--font-pixel); font-size: 14px; letter-spacing: 0; text-transform: uppercase; color: var(--px-cyan); text-shadow: 2px 2px 0 #2A1F66; }
.brand b { background: none; color: var(--px-gold); -webkit-text-fill-color: var(--px-gold); text-shadow: 2px 2px 0 #3B2A80; }
.brand img { image-rendering: pixelated; }
.search { background: #000; border: 3px solid var(--px-edge); box-shadow: var(--bevel-in); height: 40px; }
.search:hover { background: #000; }
.search:focus-within { border-color: var(--px-gold); box-shadow: var(--bevel-in); background: #000; }
.search input { font-family: var(--font-ui); font-size: 15px; }
.search input::placeholder { color: var(--px-text-3); }
.nav a { font-family: var(--font-ui); font-weight: 700; font-size: 14px; padding: 6px 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--px-text-2); }
.nav a:hover { background: transparent; color: var(--px-gold); }
.nav a.active { background: transparent; box-shadow: none; color: var(--px-gold); }
.nav a.active::before { content: "▶ "; color: var(--px-magenta); }

/* ---------- buttons: chunky bevelled game-menu buttons ---------- */
.btn { font-family: var(--font-ui); font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; height: 44px; padding: 0 20px;
  background: var(--px-panel-3); color: var(--px-text); border: 0; box-shadow: var(--bevel), 4px 4px 0 #000; transition: transform 60ms steps(1); }
.btn:hover { background: #363A66; filter: none; }
.btn:active { transform: translate(3px, 3px); box-shadow: var(--bevel-in), 1px 1px 0 #000; }
.btn-primary, .btn-brand { background: #6A48F5; color: #fff; box-shadow: var(--bevel), 4px 4px 0 #000; text-shadow: 2px 2px 0 #3B2A80; }
.btn-primary:hover, .btn-brand:hover { background: #7C5CFF; filter: brightness(1); }
.btn-play, .hero-actions .btn-primary, .play-cta .btn-primary, .reel-play .btn-primary { background: var(--px-green); color: var(--c-on-play); box-shadow: var(--bevel), 4px 4px 0 #000; text-shadow: none; }
.btn-play:hover, .hero-actions .btn-primary:hover, .play-cta .btn-primary:hover, .reel-play .btn-primary:hover { background: #3AF0BF; }
.btn-ghost { background: transparent; box-shadow: none; color: var(--px-text-2); }
.btn-ghost:hover { background: var(--px-panel-2); color: var(--px-gold); }
.btn-sm { height: 34px; font-size: 13px; padding: 0 12px; }
.btn-lg { height: 54px; font-size: 16px; }
.btn svg { width: 16px; height: 16px; }

/* ---------- panels: hard pixel shadows, square edges ---------- */
.card, .side-card, .price-card, .stat, .genre-tile, .notice, .empty, .desc, .step, .hotkey, .guide-hero, .play-cta, .ext-status, .modal, .popover, .sdk-code, .sdk-log, .checklist li {
  border: 3px solid var(--px-edge); box-shadow: 6px 6px 0 #000; }
.card.glow, .price-card.best, .play-cta, .guide-hero, .rec-promo { border-color: var(--px-magenta); background: var(--grad-surface), var(--c-surface); }
.price-card .price { font-family: var(--font-pixel); font-size: 22px; color: var(--px-gold); }
.empty { border-style: dashed; }
.modal { box-shadow: 10px 10px 0 #000; }

/* badges, tags, chips: pixel labels */
.badge, .tag, .genre-chip, .game-chip, .rail-count { font-family: var(--font-ui); border-radius: 0; }
.badge { height: 22px; border-width: 2px; text-transform: uppercase; letter-spacing: .04em; }
.badge.premium { background: var(--px-gold); color: #1E1460; }
.tag { background: #000; border: 2px solid var(--px-edge); color: var(--px-cyan); font-weight: 700; font-size: 11px; padding: 1px 7px; text-transform: uppercase; }
.genre-chip { background: var(--px-panel-2); border: 2px solid var(--px-edge); box-shadow: 3px 3px 0 #000; }
.genre-chip:hover { border-color: var(--px-gold); color: var(--px-gold); }
.game-chip { background: rgba(0, 0, 0, .8); border: 2px solid var(--px-edge); }
.game-chip img { border-radius: 0; }

/* inputs: sunken screens */
.field input, .field textarea, .field select, .input, .select, .textarea { background: #000; border: 3px solid var(--px-edge); box-shadow: var(--bevel-in); font-family: var(--font-body); }
.field input:focus, .field textarea:focus, .field select:focus, .input:focus { border-color: var(--px-gold); box-shadow: var(--bevel-in); }
.field label, .label { font-family: var(--font-ui); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--px-cyan); }
.seg { background: #000; border: 3px solid var(--px-edge); }
.seg button { font-family: var(--font-ui); text-transform: uppercase; }
.seg button.on { background: #6A48F5; color: #fff; box-shadow: var(--bevel); }

/* ---------- sections: ▶ menu headers ---------- */
.section-head h2 { font-size: 20px; color: var(--px-gold); text-shadow: 3px 3px 0 #000; }
.section-head h2::before { content: "▶ "; color: var(--px-magenta); animation: px-blink 1.1s steps(1) 4; } /* blinks a few times, not forever (WCAG 2.2.2) */
.section-head .sub { font-family: var(--font-ui); color: var(--px-text-3); }
.section-head .more { font-family: var(--font-ui); text-transform: uppercase; border: 2px solid var(--px-edge); box-shadow: 3px 3px 0 #000; background: var(--px-panel); }
.section-head .more:hover { color: var(--px-gold); border-color: var(--px-gold); background: var(--px-panel); }
.page-title { font-size: clamp(24px, 2.6vw, 34px); color: var(--px-gold); text-shadow: 4px 4px 0 #000; }
.eyebrow, .hero-body .kicker { font-family: var(--font-pixel); font-size: 10px; color: var(--px-cyan); letter-spacing: .08em; }
@keyframes px-blink { 50% { opacity: 0; } }

/* ---------- hero: title screen ---------- */
.hero { border: var(--px) solid var(--px-edge); box-shadow: 10px 10px 0 #000; background: #0E0F19; }
.hero:hover .hero-media img { transform: none; }
.hero-media::after { background: linear-gradient(90deg, transparent 45%, #0E0F19); }
.hero-body h1 { font-size: clamp(30px, 3.6vw, 50px); color: #fff; text-shadow: 4px 4px 0 var(--px-magenta), 8px 8px 0 #000; line-height: 1.25; }
.hero-body p { font-family: var(--font-ui); font-size: 17px; color: var(--px-text-2); }
.hero-body .kicker::after { content: " ★"; color: var(--px-gold); }

/* game cards: cartridges */
.game-card { background: var(--px-panel); border: 3px solid var(--px-edge); box-shadow: 6px 6px 0 #000; transition: transform 80ms steps(2), box-shadow 80ms steps(2); }
.game-card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 #000; border-color: var(--px-gold); }
.game-card .thumb { border-bottom: 3px solid var(--px-edge); }
.game-card:hover .thumb img { transform: none; }
.game-card h3 { font-family: var(--font-ui); font-weight: 800; font-size: 16px; text-transform: uppercase; color: #fff; }
.game-card .play-badge { border-radius: 0; background: var(--px-green); box-shadow: 3px 3px 0 #000; }

/* video & reel cards: framed screens */
.vcard .thumb, .rcard { border: 3px solid var(--px-edge); box-shadow: 5px 5px 0 #000; }
.vcard:hover .thumb, .rcard:hover { border-color: var(--px-gold); transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #000; }
.vcard h3 { font-family: var(--font-ui); font-size: 16px; }
.vcard .meta .game-ava { border: 2px solid var(--px-edge); }
.rcard .cap h3 { font-family: var(--font-ui); font-size: 15px; }
.rcard.make { border: 3px dashed var(--px-magenta); background: var(--px-panel); }
.rcard.make .plus { border-radius: 0; background: var(--px-magenta); box-shadow: var(--bevel), 3px 3px 0 #000; }
.badge-time { font-family: var(--font-ui); background: #000; border: 1px solid var(--px-edge); }
.strip-arrow { border-radius: 0; background: var(--px-panel-3); border: 3px solid var(--px-edge); box-shadow: var(--bevel), 3px 3px 0 #000; }
.strip-arrow:hover { background: var(--px-magenta); transform: none; }

/* game page: the game sits in a cabinet frame */
.stage-wrap { border: 6px solid #000; outline: var(--px) solid var(--px-edge); box-shadow: 12px 12px 0 #000; }
.stage-cover .big-play { border-radius: 0; background: var(--px-green); box-shadow: var(--bevel), 6px 6px 0 #000; }
.stage-cover h1 { font-size: 26px; text-shadow: 4px 4px 0 #000; }
.stage-cover .note { font-family: var(--font-pixel); font-size: 10px; color: var(--px-gold); animation: px-blink 1.1s steps(1) 4; }
.toolbar { background: #0E0F19; border-top: var(--px) solid var(--px-edge); }
.tbtn { font-family: var(--font-ui); }
.tbtn:hover { background: var(--px-panel-2); color: var(--px-gold); }
.side-card h1 { font-size: 20px; color: var(--px-gold); }
.rec-btn { opacity: .7; } /* unobtrusive, but still readable (AA) */

/* watch & reels */
.player, .reel-box, .studio-preview { border: var(--px) solid var(--px-edge); box-shadow: 10px 10px 0 #000; }
.watch-title { font-family: var(--font-ui); font-size: 24px; }
.round { border-radius: 0; background: var(--px-panel-3); border: 2px solid var(--px-edge); box-shadow: var(--bevel), 3px 3px 0 #000; }
.round:hover { background: var(--px-magenta); transform: none; }

/* ---------- genre rail: the game's main menu ---------- */
.rail { background: #0E0F19; border-right: var(--px) solid var(--px-edge); }
.rail-item { font-family: var(--font-ui); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .03em; color: var(--px-text-2); min-height: 36px; position: relative; }
.rail-item:hover { background: transparent; color: var(--px-gold); }
.rail-item:hover::before, .rail-item.on::before { content: "▶"; position: absolute; left: 0; font-size: 10px; color: var(--px-magenta); }
.rail-item.on { background: var(--px-panel-2); color: var(--px-gold); box-shadow: inset 0 0 0 2px var(--px-edge); }
.rail-item.on .g-ico { stroke: var(--px-gold); }
.rail-title { font-family: var(--font-pixel); font-size: 10px; color: var(--px-cyan); }
.rail-sep { height: 0; border-top: 2px dashed var(--px-edge); background: none; }
.rail-count { color: var(--px-gold); }
.g-ico { stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.genre-badge { background: var(--px-panel-3); border: 3px solid var(--px-edge); box-shadow: var(--bevel), 3px 3px 0 #000; color: var(--px-gold); }
.rail-toggle { border: 2px solid var(--px-edge); }

/* side nav (rules, sdk) and tabs */
.side-nav a { font-family: var(--font-ui); text-transform: uppercase; }
.side-nav a.on, .side-nav a.active { background: var(--px-panel-2); box-shadow: inset 3px 0 0 var(--px-magenta); color: var(--px-gold); }
.tabs { border-bottom: 3px solid var(--px-edge); }
.tabs a, .tabs button { font-family: var(--font-ui); text-transform: uppercase; }
.tabs .on::after, .tabs [aria-selected="true"]::after { height: 3px; border-radius: 0; background: var(--px-gold); }

/* ads stay calm: labelled box, no glow */
.ad-slot { border: 2px dashed var(--px-edge); box-shadow: none; }
.ad-slot[data-label]::before { font-family: var(--font-pixel); font-size: 8px; }

/* toast: a dialogue box */
#toast { font-family: var(--font-ui); font-size: 16px; background: #000; color: #fff; border: 3px solid #fff; box-shadow: 6px 6px 0 var(--px-magenta); }

/* prose & code */
.prose h1, .prose h2 { color: var(--px-gold); }
.prose h2 { font-size: 20px; }
.prose code, .sdk-code pre, .sdk-api-row code { color: var(--px-cyan); }

@media (prefers-reduced-motion: reduce) {
  .section-head h2::before, .stage-cover .note { animation: none; }
}
@media (max-width: 760px) {
  body::after { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 3px); }
  .hero-body h1 { font-size: 26px; }
  .brand { font-size: 11px; }
}

/* fixes: glyphs the pixel font lacks, header account area */
.hero-body .kicker::after { font-family: var(--font-ui); }
.me-area .btn, .me-area a { font-family: var(--font-ui); text-transform: uppercase; }
.me-btn { border-radius: 0; box-shadow: 0 0 0 2px var(--px-edge), 3px 3px 0 #000; }
.me-btn img, .me-area img { border-radius: 0; }
.me-menu { background: #0E0F19; border: 3px solid var(--px-edge); box-shadow: 6px 6px 0 #000; }
.me-menu a, .me-menu > button { border-radius: 0; font-family: var(--font-ui); }
.me-menu a:hover, .me-menu > button:hover { background: var(--px-panel-2); color: var(--px-gold); }
.me-lang button { border-radius: 0; }
.ava { border-radius: 0; image-rendering: pixelated; }
.hdr-btn { font-family: var(--font-ui); text-transform: uppercase; }

/* mascot logo: crisp pixels, hops when you point at it */
.brand .brand-mascot { width: 52px; height: 42px; image-rendering: pixelated; transform: none; }
.brand:hover .brand-mascot { animation: px-hop .5s steps(4) 1; transform: none; }
@keyframes px-hop { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-6px); } 50% { transform: translateY(-8px); } 75% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .brand:hover .brand-mascot { animation: none; } }

/* ================= header search (2026-11-03) ================= */
.search { position: relative; height: 44px; max-width: 520px; padding: 0 12px 0 14px; gap: 10px; background: var(--px-panel); border: 2px solid var(--px-edge);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .35), 3px 3px 0 #000; transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); }
.search:hover { background: var(--px-panel-2); border-color: var(--c-line-strong); }
.search:focus-within { background: var(--px-panel); border-color: var(--px-magenta); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .35), 0 0 0 3px rgba(124, 92, 255, .28), 3px 3px 0 #000; }
.search svg, .search img { width: 18px; height: 18px; opacity: .8; color: var(--px-magenta); fill: currentColor; transition: opacity var(--t-fast); }
.search:focus-within svg, .search:focus-within img { opacity: 1; }
.search input { font-size: 15px; font-weight: 500; color: var(--px-text); }
.search input::placeholder { color: var(--px-text-3); font-weight: 400; }
.search input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); cursor: pointer; }
.search .search-kbd { flex: none; min-width: 22px; height: 22px; display: grid; place-items: center; padding: 0 6px; font: 700 12px/1 var(--font-mono); color: var(--px-text-3);
  background: var(--px-panel-3); border: 1px solid var(--px-edge); box-shadow: 0 2px 0 #000; transition: opacity var(--t-fast); }
.search:focus-within .search-kbd { opacity: 0; }
@media (max-width: 760px) { .search .search-kbd { display: none; } .search { height: 40px; } }

/* ================= sidebar: icon rail that opens on hover ================= */
@media (min-width: 901px) {
  :root { --rail-w: 68px; --rail-open: 252px; }
  .rail { width: var(--rail-w); overflow-x: hidden; transition: width 220ms cubic-bezier(.2, .7, .2, 1), box-shadow 220ms; will-change: width; }
  .rail:hover, .rail:focus-within { width: var(--rail-open); box-shadow: 8px 0 0 rgba(0, 0, 0, .35), 24px 0 48px -12px rgba(0, 0, 0, .6); }
  .rail-in { padding: var(--s-2) 10px var(--s-8); }
  /* icons stay put; labels slide and fade in as the rail widens */
  .rail-item { justify-content: flex-start; padding: 0 14px; min-height: 42px; gap: 14px; }
  .rail-label, .rail-count, .rail-title { display: block; opacity: 0; transform: translateX(-6px); transition: opacity 140ms, transform 180ms; white-space: nowrap; }
  .rail:hover .rail-label, .rail:hover .rail-count, .rail:hover .rail-title,
  .rail:focus-within .rail-label, .rail:focus-within .rail-count, .rail:focus-within .rail-title { opacity: 1; transform: none; transition-delay: 70ms; }
  .rail-title { height: 22px; padding-top: 6px; }
  .rail-sep { margin: var(--s-2) 6px; }
  .rail-item:hover::before, .rail-item.on::before { display: none; }
  .rail-item.on { box-shadow: inset 3px 0 0 var(--px-magenta); }
  /* the rail overlays the page when open, so the content never jumps */
  body.has-rail main { padding-left: var(--rail-w); }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  .rail, .rail-label, .rail-count, .rail-title { transition: none; }
}

/* ================= phones: header always on screen ================= */
@media (max-width: 900px) {
  .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-top); }
  main { padding-top: var(--top); }
  .rail { transition: transform 240ms cubic-bezier(.2, .7, .2, 1); }
}
@media (max-width: 760px) {
  .section-head { flex-wrap: wrap; row-gap: 2px; align-items: center; }
  .section-head h2 { font-size: 17px; white-space: nowrap; }
  .section-head .sub { flex-basis: 100%; order: 3; font-size: 13px; }
  .section-head .more { white-space: nowrap; padding: 3px 10px; font-size: 12px; }
}
html { scroll-padding-top: calc(var(--top) + 8px); }
@media (max-width: 900px) { body.has-rail .site-footer { padding-left: var(--gutter); } }

/* ================= burger (left of the logo) ================= */
.rail-toggle { display: grid; width: 40px; height: 40px; margin: 0 -4px 0 -6px; place-items: center; flex: none; color: var(--px-text-2);
  background: transparent; border: 2px solid transparent; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.rail-toggle:hover { background: var(--px-panel); border-color: var(--px-edge); color: var(--px-text); }
.rail-toggle { align-self: center; margin: 0 2px 0 -8px; padding: 0; line-height: 0; }
.rail-toggle svg.burger { width: 20px; height: 16px; display: block; fill: currentColor; stroke: none; }
/* open: the button stays pressed in (sunk bevel, purple bars), closed: a plain button */
.rail-toggle[aria-expanded="true"] { color: var(--px-gold); background: var(--px-panel-2); border-color: var(--px-edge); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .5); }
.rail-toggle[aria-expanded="true"]:hover { color: var(--px-text); }
@media (min-width: 901px) {
  /* the burger sits right above the menu's icon column */
  .rail-toggle { margin-left: calc(var(--rail-w) / 2 - 20px - var(--gutter)); }
  /* not pinned: the slim icon rail, which widens over the page on hover and shrinks back when the cursor leaves */
  body.has-rail:not(.rail-pinned) main { padding-left: var(--rail-w); }
  body.has-rail:not(.rail-pinned) .site-footer { padding-left: calc(var(--rail-w) + var(--gutter)); }
  /* open: full-width menu that pushes the page, labels always visible */
  body.rail-pinned .rail { width: var(--rail-open); box-shadow: none; }
  body.rail-pinned .rail-label, body.rail-pinned .rail-count, body.rail-pinned .rail-title { opacity: 1; transform: none; }
  body.rail-pinned main { padding-left: var(--rail-open); }
  body.rail-pinned .site-footer { padding-left: calc(var(--rail-open) + var(--gutter)); }
  main { transition: padding-left 220ms cubic-bezier(.2, .7, .2, 1); }
}

/* ================= empty catalogue ("new games are on the way") ================= */
.soon { display: grid; justify-items: center; align-content: center; gap: var(--s-4); min-height: min(64vh, 560px); padding: var(--s-12) var(--s-6);
  text-align: center; background: radial-gradient(60% 70% at 50% 35%, rgba(124, 92, 255, .14), transparent 70%), var(--px-panel);
  border: 3px solid var(--px-edge); box-shadow: 8px 8px 0 #000; }
.soon-mascot { width: clamp(140px, 18vw, 208px); height: auto; image-rendering: pixelated; margin-bottom: var(--s-2); }
.soon h1 { margin: 0; max-width: 18ch; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.15; color: var(--px-text); text-shadow: 4px 4px 0 var(--px-magenta), 7px 7px 0 #000; text-wrap: balance; }
.soon p { margin: 0; max-width: 40ch; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; color: var(--px-text-2); text-wrap: balance; }
.soon-dots { display: flex; gap: 10px; margin-top: var(--s-2); }
.soon-dots i { width: 10px; height: 10px; background: var(--px-green); box-shadow: 2px 2px 0 #000; animation: soon-blink 1.2s steps(1) infinite; }
.soon-dots i:nth-child(2) { animation-delay: .4s; }
.soon-dots i:nth-child(3) { animation-delay: .8s; }
@keyframes soon-blink { 0%, 100% { opacity: .25; } 33% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .soon-dots i { animation: none; opacity: .7; } }
.soon picture, .brand picture, .auth-card picture { display: contents; }

/* ================= phones & tablets: keep the CRT look, drop the GPU-hungry parts =================
   Mobile Safari/Chrome were killing the tab on the coming-soon page: an always-on full-screen fixed
   overlay (scanlines + vignette, z-index 200) sat above every animated layer, so each mascot/dot step
   re-composited the whole screen at 3x DPR, and the 134-rect animated SVG mascots (logo + big Gugi)
   were re-rasterised as images on every step. Touch screens get the still SVG (see <picture> in the
   markup), a single transform-only bob on the big mascot, and the scanlines painted once behind the
   page instead of over it. */
@media (hover: none), (pointer: coarse) {
  body::after { content: none; }
  body::before { background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 3px),
    radial-gradient(120% 80% at 50% -10%, rgba(124, 92, 255, .12), transparent 60%),
    linear-gradient(rgba(124, 92, 255, .06) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(124, 92, 255, .06) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--px-bg); }
  .soon { background: var(--px-panel); }
  .soon-mascot { animation: soon-bob 1.6s steps(1) infinite; }
  .brand:hover .brand-mascot { animation: none; }
}
@keyframes soon-bob { 0%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(-4.76%); } 50% { transform: translateY(-9.52%); } }
@media (prefers-reduced-motion: reduce) { .soon-mascot { animation: none; } }

/* ================= design review (2026-11-03): one look on every page, phones first ================= */
/* Square pixel panels everywhere. Feature stylesheets (coins, billing, submissions) load after this file,
   hence the html prefix. Their corners already follow the --r-* tokens; this gives them the same frame. */
html .auth-card, html .sub-hero, html .co-wallet, html .co-game, html .co-pack, html .co-dialog, html .bill-plan {
  border-radius: 0; border: 3px solid var(--px-edge); box-shadow: 6px 6px 0 #000; }
html .co-item, html .bill-gw { border-radius: 0; border-width: 2px; box-shadow: 3px 3px 0 #000; }
html .co-item.tier-common { border-color: var(--px-edge); }
html .co-swatch, html .co-bar { border-radius: 0; }
html .co-pack:hover, html .bill-plan:hover { border-color: var(--px-gold); }
html .co-game header img, .toolbar .t-title img, .reel-play img, .game-ava { border-radius: 0; image-rendering: auto; }
html .gg-ad-stub { border-radius: 0; border: 2px dashed var(--px-edge); }
.hotkey, kbd, code, .side-nav a, .sub-table, .notice { border-radius: 0; }
kbd { box-shadow: 0 2px 0 #000; }
.sub-table.kv table { min-width: 0; }
.sub-table.kv th { width: 45%; }

/* inputs: a dark screen, not a hole in the card */
.field input, .field textarea, .field select, .input, .select, .textarea { background: var(--c-bg-sunken); border: 2px solid var(--px-edge); color: var(--px-text); }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--c-line-strong); }
.field input:focus, .field textarea:focus, .field select:focus, .input:focus { background: var(--c-bg-sunken); border-color: var(--px-magenta); box-shadow: var(--bevel-in), 0 0 0 3px rgba(124, 92, 255, .28); }

/* login: Gugi greets you, same frame as the rest */
.auth-card { background: var(--grad-surface), var(--px-panel); gap: 14px; }
.auth-card .auth-mascot { justify-self: center; width: 104px; height: auto; image-rendering: pixelated; margin-bottom: 4px; }

/* coins page: room for the earn line, aligned price tags */
html .co-muted .co-ic { margin: 0 2px 0 4px; }
html .co-tag { white-space: nowrap; font-family: var(--font-ui); color: var(--px-text); }
html .co-item-body b { overflow-wrap: anywhere; }

/* genres: every tile the same height, label block centred */
.genre-tile { align-content: center; min-height: 76px; }

/* header nav: the Record item already has its dot, so no second ▶ marker */
.nav a.nav-rec.active::before { content: none; }
.nav a.nav-rec.active .dot { background: var(--px-red); box-shadow: 0 0 0 3px rgba(255, 107, 122, .25); }

/* extension page: buttons get air under the paragraph */
.guide-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-5); }
.guide-hero .hint { margin-top: var(--s-3); }

/* Plays: a readable like counter over any video */
.round-label { color: #fff; font-weight: 700; font-family: var(--font-ui); text-shadow: 1px 1px 0 #000, 0 0 6px rgba(0, 0, 0, .8); }

/* phone drawer: no shadow or focus traps while it is closed */
@media (max-width: 900px) {
  .rail { box-shadow: none; visibility: hidden; transition: transform 240ms cubic-bezier(.2, .7, .2, 1), visibility 0s linear 240ms; }
  body.rail-open .rail { visibility: visible; box-shadow: 8px 0 0 #000; transition: transform 240ms cubic-bezier(.2, .7, .2, 1); }
}

@media (max-width: 760px) {
  /* header: the full placeholder fits next to Sign in */
  .search { padding: 0 10px; gap: 8px; }
  .search input { font-size: 14px; }
  .search svg, .search img { width: 16px; height: 16px; }

  /* smaller type keeps smaller shadows, so titles stay sharp */
  .hero-body { padding: var(--s-5) var(--s-5) var(--s-6); }
  .hero-body h1 { text-shadow: 2px 2px 0 var(--px-magenta), 4px 4px 0 #000; }
  .soon h1 { font-size: 28px; text-shadow: 2px 2px 0 var(--px-magenta), 4px 4px 0 #000; }
  .soon { min-height: 0; padding: var(--s-10) var(--s-5); }
  .page-title { text-shadow: 3px 3px 0 #000; }
  .section-head h2 { text-shadow: 2px 2px 0 #000; }

  /* game page: the toolbar fits a phone */
  .stage-wrap { border-width: 3px; box-shadow: 6px 6px 0 #000; }
  .toolbar { gap: 2px; padding: 6px 8px; }
  .toolbar .t-title { gap: 8px; }
  .toolbar .t-title img { width: 28px; height: 28px; }
  .tbtn { min-width: 34px; padding: 0 6px; }
  .stage-cover .big-play { width: 64px; height: 64px; }
  .stage-cover h1 { font-size: 20px; text-shadow: 2px 2px 0 #000; }

  /* Plays: full-screen like the apps people know, buttons inside the frame */
  .reels-feed, .reel { height: calc(100dvh - var(--top)); }
  .reel { padding: 0; }
  .reel-box { width: 100%; max-width: none; height: 100%; aspect-ratio: auto; border: 0; box-shadow: none; }
  .reel-side { right: 10px; bottom: 132px; gap: 12px; }
  .reel-info h2, .reel-info .by { padding-right: 64px; }
  .round { width: 44px; height: 44px; }

  /* genres: two tiles per row */
  .genre-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .genre-tile { min-height: 64px; padding: 10px; column-gap: 10px; }
  .genre-tile .genre-badge { width: 40px; height: 40px; }
  .genre-tile .genre-badge .g-ico { width: 22px; height: 22px; }

  .auth-card { padding: var(--s-6) var(--s-5); }
}
html .sub-side a, html .sub-doc code, html .sub-error, html .sub-checks li, html .sub-shots img, html .sub-decide textarea, .badge-time, .tbtn { border-radius: 0; }