/* ============================================================================
   site.css — StupidGames design system + sticky header + homepage
   ----------------------------------------------------------------------------
   Loaded on EVERY page (homepage and game pages). It owns:
     1. The design tokens (:root variables) — single source of truth for color,
        type and radius. game-shell.css and every inline game style read these.
     2. The shared sticky header (same markup injected on every page).
     3. The homepage layout (tag cloud, stats bar, featured row, category boxes).
   Game-specific overlay/ad styling lives in game-shell.css, not here.
   No framework, no build step — plain CSS custom properties.
   ============================================================================ */

/* ── DESIGN TOKENS (copy of briefing :root — single source of truth) ──────── */
:root {
  --bg:  #0B0C0F;   /* page background */
  --s1:  #13141A;   /* surface 1 — header, cards */
  --s2:  #1A1B23;   /* surface 2 — inner panels */
  --s3:  #22232E;   /* surface 3 — hover states */
  --bd:  #2A2B38;   /* border default */
  --bdb: #383950;   /* border bright */
  --tx:  #EEEEF2;   /* primary text */
  --mu:  #737488;   /* muted text */
  --su:  #484A5C;   /* subtle/placeholder text */

  /* Brand accent — deep crimson */
  --ac:    #C0001A;
  --acd:   rgba(192,0,26,.12);
  --glow0: rgba(192,0,26,.55);  /* tight core glow */
  --glow1: rgba(192,0,26,.25);  /* mid spread */
  --glow2: rgba(192,0,26,.08);  /* wide haze */

  /* Secondary colors */
  --am: #FFB800;   /* amber/gold — CPC, money values */
  --gn: #00E676;   /* green — live count, positive */
  --bl: #4D9EFF;   /* blue — info, links */

  --fn: 'Barlow', sans-serif;
  --fc: 'Barlow Condensed', sans-serif;
  --fm: 'JetBrains Mono', monospace;
  --ff: 'Chakra Petch', 'Barlow Condensed', sans-serif;   /* angular display font for filters/labels */

  --r:  4px;
  --rl: 8px;
}

/* ── RESET ─────────────────────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--fn);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: var(--fn); cursor: pointer; border: none; background: none; color: inherit; }

/* Shared transition baseline for interactive glow elements. */
.btn, .ftag, .cat-box, .feat-row, .g-row, .gr-play, .cbh-all, .sg-play-daily {
  transition: box-shadow .18s ease, filter .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

/* Octagonal "cut-corner square" shape, reused by buttons + filter pills.
   NOTE: clip-path also clips box-shadow, so glows on these elements use
   filter: drop-shadow() instead (which follows the clipped silhouette). */
.oct {
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px),
                     calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
  border-radius: 0 !important;
}

/* ── ANIMATIONS ────────────────────────────────────────────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.7); }
}

/* ════════════════════════════════════════════════════════════════════════════
   HEADER  — sticky, shared across all pages (markup injected by inline script)
   Layout from briefing:
   [Logo + tagline] [|] [● live count] [────] [🔥 countdown] [▶ Play daily]
   ════════════════════════════════════════════════════════════════════════════ */
.sg-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 50px;
  background: var(--s1);
  border-bottom: 1px solid var(--bd);
}
.sg-header-inner {
  max-width: 1260px;
  height: 100%;
  margin: 0 auto;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Logo block — click navigates home */
.sg-logo { display: flex; flex-direction: column; line-height: 1; cursor: pointer; }
.sg-logo-name {
  font-family: var(--fc);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .5px;
  color: var(--tx);
}
.sg-logo-name em { font-style: normal; color: var(--ac); }
.logo-tag {
  font-family: var(--fc);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mu);
  margin-top: 1px;
}

.sg-divider { width: 1px; height: 24px; background: var(--bd); flex: none; }

/* Header nav links (Games · Learn) */
.sg-nav {
  font-family: var(--ff); font-weight: 600; font-size: 13px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--mu); white-space: nowrap; padding: 4px 2px;
}
.sg-nav:hover { color: var(--tx); text-shadow: 0 0 8px var(--ac); }

/* Live "playing now" count — green pulsing dot */
.sg-live { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mu); white-space: nowrap; }
.sg-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gn);
  box-shadow: 0 0 6px var(--gn);
  animation: pulse 2s infinite;
  flex: none;
}
.sg-live-num { color: var(--gn); font-family: var(--fm); font-weight: 500; }

/* Flexible spacer that pushes the right cluster to the edge */
.sg-spacer { flex: 1 1 auto; min-width: 8px; }

/* Daily reset countdown */
.sg-countdown { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mu); white-space: nowrap; }
.sg-countdown-time { font-family: var(--fm); color: var(--am); }

/* Play-daily button */
.sg-play-daily {
  font-family: var(--ff);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--ac);
  background: var(--acd);
  padding: 8px 15px;
  white-space: nowrap;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px),
                     calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.sg-play-daily:hover {
  filter: drop-shadow(0 0 4px var(--ac)) drop-shadow(0 0 12px var(--glow0));
}

/* ════════════════════════════════════════════════════════════════════════════
   HOMEPAGE LAYOUT
   ════════════════════════════════════════════════════════════════════════════ */
.sg-main {
  max-width: 1260px;
  margin: 0 auto;
  padding: 22px 18px 80px;
}

/* ── TAG CLOUD (filter pills) ─────────────────────────────────────────────── */
.tag-cloud { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.tag-group { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.tag-group-lbl {
  font-family: var(--ff);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--su);
  margin-right: 4px;
}

/* Octagonal filter pills with the angular display font + red drop-shadow glow. */
.ftag {
  font-family: var(--ff);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 6px 14px;
  background: var(--s3);
  color: var(--mu);
  user-select: none;
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px),
                     calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
}
.ftag:hover { color: var(--tx); background: var(--bd); filter: drop-shadow(0 0 4px var(--ac)) drop-shadow(0 0 10px var(--glow0)); }
.ftag.on {
  background: var(--acd);
  color: var(--ac);
  filter: drop-shadow(0 0 5px var(--glow0)) drop-shadow(0 0 12px var(--glow1));
}

/* ── STATS BAR (monospace, 4 columns) ─────────────────────────────────────── */
.stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: var(--rl);
  padding: 12px 16px;
}
.stat-cell {
  flex: 1 1 160px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fm);
  font-size: 12px;
  color: var(--mu);
}
.stat-cell b { color: var(--tx); font-weight: 500; }
.stat-cell .stat-em { color: var(--am); }
.stat-cell .stat-live { color: var(--gn); }

/* ── FEATURED ROW ─────────────────────────────────────────────────────────── */
.feat-label {
  font-family: var(--fc);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mu);
  margin-bottom: 8px;
}
.feat-row {
  display: flex;
  gap: 18px;
  align-items: stretch;
  background: linear-gradient(180deg, var(--s1), var(--s2));
  border: 1px solid var(--bd);
  border-radius: var(--rl);
  padding: 18px 20px;
  margin-bottom: 28px;
  position: relative;
}
.feat-row:hover {
  box-shadow: 0 0 0 1px var(--ac), 0 0 18px var(--glow1), 0 0 40px var(--glow2);
  border-color: var(--ac);
}
.feat-icon {
  width: 88px; height: 88px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 48px;
  background: var(--s2);
  border: 1px solid var(--bd);
  border-radius: var(--rl);
}
.feat-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.feat-name { font-family: var(--fc); font-weight: 700; font-size: 30px; line-height: 1; color: var(--tx); }
.feat-tags { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.feat-desc { font-size: 13px; color: var(--mu); max-width: 60ch; }
.feat-actions { display: flex; gap: 10px; margin-top: 6px; }

.feat-stats { flex: none; display: flex; flex-direction: column; justify-content: center; gap: 6px; text-align: right; }
.feat-plays { font-family: var(--fm); font-size: 14px; color: var(--tx); }
.feat-playing { font-family: var(--fm); font-size: 12px; color: var(--gn); display: flex; align-items: center; gap: 5px; justify-content: flex-end; }
.feat-playing::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gn); box-shadow: 0 0 6px var(--gn); animation: pulse 2s infinite; }

/* Generic octagonal button (used in featured + everywhere) */
.btn {
  font-family: var(--ff);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 10px 20px;
  background: var(--s3);
  color: var(--tx);
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px),
                     calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
}
.btn:hover { filter: drop-shadow(0 0 4px var(--ac)) drop-shadow(0 0 12px var(--glow0)); }
.btn-primary { background: var(--acd); color: var(--ac); }
.btn-ghost { background: var(--s2); color: var(--tx); }

/* ── BADGES & TAGS (shared) ───────────────────────────────────────────────── */
.badge {
  font-family: var(--fc);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  padding: 2px 7px;
  border-radius: var(--r);
  text-transform: uppercase;
}
.badge-hot { background: var(--acd); color: var(--ac); border: 1px solid var(--ac); }
.badge-new { background: rgba(0,230,118,.1); color: var(--gn); border: 1px solid rgba(0,230,118,.4); }
.badge-top { background: rgba(255,184,0,.1); color: var(--am); border: 1px solid rgba(255,184,0,.4); }
.badge-soon { background: var(--s3); color: var(--mu); border: 1px solid var(--bd); }

.cat-tag {
  font-family: var(--fn);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--s2);
  border: 1px solid var(--bd);
  color: var(--mu);
}
.diff-tag { font-size: 10px; color: var(--su); letter-spacing: .5px; text-transform: uppercase; }

/* Difficulty dots (●●●○○) */
.diff-dots { display: inline-flex; gap: 3px; }
.diff-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--bd); }
.diff-dots i.on { background: var(--ac); box-shadow: 0 0 4px var(--glow0); }

/* ── CATEGORY BOXES ───────────────────────────────────────────────────────── */
.cat-grid { display: flex; flex-direction: column; gap: 14px; }

.cat-box {
  background: var(--s1);
  border: 1px solid var(--bd);
  border-left: 3px solid var(--cat, var(--ac));
  border-radius: var(--rl);
  overflow: hidden;
}
.cat-box:hover { box-shadow: 0 0 14px var(--glow1), 0 0 32px var(--glow2); }

.cat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--bd);
  flex-wrap: wrap;
}
.cat-ico { font-size: 22px; flex: none; }
.cat-name { font-family: var(--ff); font-weight: 700; font-size: 19px; text-transform: uppercase; color: var(--cat, var(--tx)); letter-spacing: 1px; }
.cat-desc { font-size: 12px; color: var(--mu); flex: 1 1 200px; min-width: 0; }
.cbh-all { font-family: var(--fc); font-size: 12px; letter-spacing: .5px; color: var(--mu); white-space: nowrap; }
.cbh-all:hover { color: var(--ac); text-shadow: 0 0 8px var(--ac); }

/* Game rows inside a category box */
.cat-games { display: flex; flex-direction: column; }
.g-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--s2);
}
.g-row:first-child { border-top: none; }
.g-row:hover { background: var(--s2); }
.gr-num { font-family: var(--fm); font-size: 12px; color: var(--su); width: 18px; flex: none; text-align: right; }
.gr-ico { font-size: 20px; flex: none; }
.gr-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gr-name { font-family: var(--fn); font-weight: 500; font-size: 14px; color: var(--tx); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gr-meta { display: flex; align-items: center; gap: 8px; }
.gr-plays { font-family: var(--fm); font-size: 11px; color: var(--mu); white-space: nowrap; flex: none; }
.gr-diff { flex: none; }

.gr-play {
  font-family: var(--ff);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 7px 15px;
  background: var(--s3);
  color: var(--tx);
  flex: none;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px),
                     calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
/* Briefing rule: in a game row, only the play button lights up on row hover. */
.g-row:hover .gr-play {
  filter: drop-shadow(0 0 4px var(--ac)) drop-shadow(0 0 11px var(--glow0));
  background: var(--acd);
  color: var(--ac);
}
.gr-play.soon { color: var(--mu); }

/* When a type filter is active, rows show their category tag; hidden otherwise */
.gr-cat-tag { display: none; }
body.filter-type .gr-cat-tag { display: inline-block; }

/* ── AD ZONES (between category boxes 2, 5, 8) ────────────────────────────── */
.ad-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  background: var(--s1);
  border: 1px dashed var(--bd);
  border-radius: var(--rl);
  color: var(--su);
  font-family: var(--fm);
  font-size: 11px;
  letter-spacing: 1px;
}

/* Hidden state used by the filter JS to collapse non-matching content */
.is-hidden { display: none !important; }

/* When ads.js fills a placeholder with a real AdSense unit, drop the dashed
   "placeholder" frame so the ad isn't double-boxed. */
.ad-live {
  border: none !important;
  background: transparent !important;
  color: transparent;
  letter-spacing: normal;
}
.ad-live::before { content: none !important; }

/* ════════════════════════════════════════════════════════════════════════════
   COOKIE CONSENT (banner + settings modal) — injected by js/consent.js
   ════════════════════════════════════════════════════════════════════════════ */
.sg-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  background: var(--s1); border-top: 1px solid var(--ac);
  box-shadow: 0 -6px 24px rgba(0,0,0,.5);
}
.sg-consent-inner {
  max-width: 1260px; margin: 0 auto; padding: 14px 18px;
  display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between;
}
.sg-consent-text { font-size: 12.5px; color: var(--mu); line-height: 1.5; flex: 1 1 340px; }
.sg-consent-text a { color: var(--bl); }
.sg-consent-text a:hover { text-decoration: underline; }
.sg-consent-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.sg-consent-btn {
  font-family: var(--ff); font-weight: 600; font-size: 12px; letter-spacing: .5px; text-transform: uppercase;
  padding: 9px 16px; cursor: pointer; white-space: nowrap;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.sg-consent-btn.ghost { background: var(--s3); color: var(--tx); }
.sg-consent-btn.ghost:hover { background: var(--bd); }
.sg-consent-btn.primary { background: var(--acd); color: var(--ac); }
.sg-consent-btn.primary:hover { filter: drop-shadow(0 0 4px var(--ac)) drop-shadow(0 0 12px var(--glow0)); }

.sg-consent-modal {
  position: fixed; inset: 0; z-index: 1300;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(11,12,15,.8); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.sg-consent-card {
  width: 100%; max-width: 440px; background: var(--s1);
  border: 1px solid var(--bd); border-radius: var(--rl); padding: 22px;
}
.sg-consent-card h3 { font-family: var(--ff); font-weight: 700; font-size: 20px; text-transform: uppercase; color: var(--tx); margin-bottom: 12px; }
.sg-consent-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 0; border-top: 1px solid var(--bd);
}
.sg-consent-row b { display: block; font-size: 14px; color: var(--tx); }
.sg-consent-row span { display: block; font-size: 12px; color: var(--mu); margin-top: 2px; }
.sg-consent-fixed { font-family: var(--fm); font-size: 11px; color: var(--gn); white-space: nowrap; }
.sg-consent-card-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* Toggle switch */
.sg-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; }
.sg-switch input { opacity: 0; width: 0; height: 0; }
.sg-switch span { position: absolute; inset: 0; background: var(--s3); border: 1px solid var(--bd); border-radius: 999px; cursor: pointer; transition: .2s; }
.sg-switch span::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: var(--mu); border-radius: 50%; transition: .2s; }
.sg-switch input:checked + span { background: var(--acd); border-color: var(--ac); }
.sg-switch input:checked + span::before { transform: translateX(18px); background: var(--ac); }

/* ════════════════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════════════════ */
.sg-footer { border-top: 1px solid var(--bd); margin-top: 48px; background: var(--s1); }
.sg-footer-inner {
  max-width: 1260px; margin: 0 auto; padding: 34px 18px 28px;
  display: flex; flex-wrap: wrap; gap: 28px 48px; justify-content: space-between;
}
.sg-footer-brand { max-width: 320px; }
.sg-footer-logo { font-family: var(--fc); font-weight: 700; font-size: 22px; color: var(--tx); }
.sg-footer-logo em { font-style: normal; color: var(--ac); }
.sg-footer-tag { font-family: var(--ff); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mu); margin: 2px 0 10px; }
.sg-footer-blurb { font-size: 13px; color: var(--mu); line-height: 1.6; }
.sg-footer-cols { display: flex; flex-wrap: wrap; gap: 40px; }
.sg-footer-col h4 { font-family: var(--ff); font-weight: 600; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--su); margin-bottom: 10px; }
.sg-footer-col a { display: block; font-size: 13px; color: var(--mu); padding: 4px 0; }
.sg-footer-col a:hover { color: var(--ac); }
.sg-footer-legal {
  max-width: 1260px; margin: 0 auto; padding: 14px 18px 30px;
  border-top: 1px solid var(--bd);
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between;
  font-size: 11px; color: var(--su);
}
.sg-footer-legal .disc { max-width: 70ch; }

/* ════════════════════════════════════════════════════════════════════════════
   HOMEPAGE DESKTOP SIDE RAILS (skyscrapers in the outer gutters)
   The homepage content is capped at 1260px; on wide screens that leaves room
   on either side. These are fixed (stay in view while scrolling) and only show
   once there's genuinely room (>=1600px) so they never crowd the content.
   ════════════════════════════════════════════════════════════════════════════ */
.home-rail {
  display: none;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 160px;
  height: 600px;
  max-height: calc(100vh - 90px);
  z-index: 50;
  background: var(--s1);
  border: 1px dashed var(--bd);
  border-radius: var(--rl);
  align-items: center;
  justify-content: center;
  color: var(--su);
  font-family: var(--fm);
  font-size: 11px;
  letter-spacing: 1px;
  text-align: center;
}
.home-rail-left  { left: 24px; }
.home-rail-right { right: 24px; }
@media (min-width: 1600px) { .home-rail { display: flex; } }

/* ════════════════════════════════════════════════════════════════════════════
   ULTRAWIDE EASTER EGG — only pops up on very wide (21:9+) screens
   ════════════════════════════════════════════════════════════════════════════ */
.ultrawide-egg {
  display: none;
  position: fixed;
  right: 16px;
  bottom: 14px;
  z-index: 60;
  max-width: 260px;
  padding: 10px 14px;
  background: var(--s1);
  border: 1px solid var(--bdb);
  border-left: 3px solid var(--ac);
  border-radius: var(--r);
  font-family: var(--fn);
  font-size: 12px;
  color: var(--mu);
  box-shadow: 0 0 18px var(--glow2);
  animation: pulse-egg 6s ease-in-out infinite;
}
.ultrawide-egg b { color: var(--tx); font-family: var(--ff); letter-spacing: .5px; }
.ultrawide-egg .egg-x { color: var(--su); cursor: pointer; float: right; margin-left: 8px; }
.ultrawide-egg .egg-x:hover { color: var(--ac); }
@keyframes pulse-egg { 0%,100% { opacity: .92; } 50% { opacity: 1; box-shadow: 0 0 26px var(--glow1); } }
/* 21:9 and wider, and actually wide in px (so tall portrait monitors don't trigger it). */
@media (min-aspect-ratio: 21/9) and (min-width: 1700px) {
  .ultrawide-egg { display: block; }
}

/* ── COMING SOON inline toast (placeholder games on homepage) ─────────────── */
.soon-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  background: var(--s1);
  border: 1px solid var(--ac);
  border-radius: var(--rl);
  padding: 12px 22px;
  font-family: var(--fc);
  font-size: 15px;
  letter-spacing: .5px;
  color: var(--tx);
  box-shadow: 0 0 18px var(--glow1), 0 0 40px var(--glow2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 200;
}
.soon-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .logo-tag { display: none; }            /* keep header tight on phones */
  .sg-countdown { display: none; }        /* drop the least-critical header item */
  .feat-row { flex-direction: column; }
  .feat-stats { flex-direction: row; justify-content: flex-start; gap: 16px; text-align: left; }
  .feat-playing { justify-content: flex-start; }
  .feat-name { font-size: 26px; }
  .cat-desc { flex-basis: 100%; order: 5; }
  .stat-cell { flex-basis: 45%; }
}

@media (max-width: 460px) {
  .sg-live { display: none; }             /* phones: logo + Learn + play only */
  .sg-nav-games { display: none; }        /* logo already links home */
  .sg-divider-hide { display: none; }
  .gr-plays { display: none; }
  .stat-cell { flex-basis: 100%; }
}

/* Accessibility: honor reduced-motion. The site leans on pulses/glows/animation;
   users who ask for less motion get a calm, static version. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}