/* ==========================================================================
   Neon Arcade — page UI layer
   Load AFTER tokens.css:
     <link rel="stylesheet" href="design/tokens.css">
     <link rel="stylesheet" href="design/ui.css">
   Mobile-first: base rules = phone; @media (min-width: …) adds tablet/desktop.
   Art: design/img/*.svg (hero + one thumbnail per game). Use either
     <div class="gc-thumb" data-game="snake">…</div>          (CSS paints the art)
     <img class="gc-thumb__img" src="design/img/snake.svg" alt="">
   Sections: 1 shell · 2 avatar/thumb · 3 hero · 4 lobby/cards · 5 play/HUD
             6 leaderboard · 7 wallet/rewards · 8 profile · 9 terms/prose
             10 ads · 11 modal/toast/states · 12 footer · 13 motion
             v2: 14 form controls · 15 catalog (50+ games) · 16 auth + account menu
                 17 multiplayer lobby/room · 18 admin panel
             v2.1: 19 discovery home (carousel, Poki tiles, 100+ grid, instant search) · 20 game detail
                 + guest save card · 21 quick match + turn timer · 22 report queue, ad tile/break, DEMO bar
   Check at true 375px with design/phones-v2.html (headless Chrome can't go narrower than ~500px).
   This is the ONLY style file for the site (app/app.css is retired). Every component is shown
   in design/preview-v2.html. Numbers: var(--gc-font-num) + tabular-nums, never the pixel font.
   Entrance animations only move things (never start at opacity 0).
   ========================================================================== */

/* ==========================================================================
   1. App shell — header, nav, account, mobile tab bar, views
   ========================================================================== */
body.gc { padding-bottom: calc(var(--gc-tabbar-h) + var(--gc-safe-b)); }
@media (min-width: 721px) { body.gc { padding-bottom: 0; } }

/* No sideways scroll on phones (375px). Root causes are fixed below (min-width:0 on grid/flex
   children, wrapping big buttons, scrollable tables); `clip` is only the last safety net and,
   unlike `hidden`, keeps the sticky header working. */
html:has(body.gc), body.gc { overflow-x: clip; }
.gc-view, .gc-container, .gc-section-head > *, .gc-game-card, .gc-card, .gc-stack > *, .gc-grid-2 > *,
.gc-podium__place, .gc-account, .gc-chips, .gc-tabs { min-width: 0; }
.gc-chips, .gc-tabs, .gc-ad-slot, .gc-modal, .gc-toast { max-width: 100%; }
/* Single-column grids must never grow to their content's width (rails, chips and nowrap titles
   inside would push the page past 375px). :where() = zero specificity, so desktop column rules win. */
:where(.gc-catalog, .gc-discover, .gc-detail, .gc-detail__main, .gc-detail__info, .gc-mp, .gc-mp__card, .gc-room,
       .gc-stack, .gc-admin__main, .gc-editor, .gc-editor__main, .gc-editor__aside, .gc-auth__form, .gc-shelf,
       .gc-hero__inner, .gc-grid-2, .gc-howto) { grid-template-columns: minmax(0, 1fr); }
:where(.gc-shelf, .gc-carousel, .gc-rail, .gc-carousel__track, .gc-tile-grid, .gc-game-grid, .gc-catalog-bar) { min-width: 0; max-width: 100%; }
/* Header sizing (v3): the logo is the only thing allowed to shrink; account controls keep their full
   size (flex: none) so they are never clipped. Phone sizes below are tuned for 320–430 px. */
.gc-header > .gc-logo { flex: 0 1 auto; min-width: 0; }
.gc-header > .gc-account { flex: none; min-width: auto; }
@media (max-width: 480px) {
  .gc-menu__trigger { padding: 2px; gap: 0; }
  .gc-menu__trigger::after { display: none; }
  .gc-header__coin { min-height: 34px; padding: 0 10px 0 6px; font-size: 11px; }
  .gc-account { gap: 6px; }
  .gc-account .gc-btn--sm { min-height: 36px; padding: 0 12px; font-size: 11px; letter-spacing: .02em; }
  .gc-account .gc-hide-sm[data-auth="login"] { display: inline-flex; }   /* guests see Log in AND Sign up */
}
@media (max-width: 359px) { .gc-account .gc-hide-sm[data-auth="login"] { display: none; } }
.gc-h1, .gc-h2, .gc-h3, .gc-display { overflow-wrap: break-word; }
img, svg, video, canvas { max-width: 100%; }
@media (max-width: 480px) {
  .gc-btn--lg, .gc-btn--block { white-space: normal; text-align: center; line-height: 1.15; padding-block: 10px; }
  .gc-container { width: min(100% - 2 * var(--gc-space-4), var(--gc-container)); }
  .gc-header { gap: var(--gc-space-2); padding-inline: var(--gc-space-3); }
}
.gc-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Accessibility helpers (ex app/app.css) */
.gc-skip { position: absolute; left: -999px; top: 8px; z-index: 999; padding: 10px 16px; border-radius: var(--gc-radius-pill); background: var(--gc-cyan); color: var(--gc-text-on-neon); font-weight: 700; }
.gc-skip:focus { left: 8px; }
.gc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--gc-cyan); outline-offset: 2px; }

.gc-header { gap: var(--gc-space-3); padding-inline: var(--gc-space-4); }
.gc-header::after {                      /* thin neon underline */
  content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 1px;
  background: var(--gc-grad-brand); opacity: .55;
}
/* Logo = brand/logo.svg drawn by CSS, so the existing markup
   <a class="gc-logo" aria-label="Neon Arcade — home">…</a>
   shows the real brand (NA mark + "Neon Arcade") without HTML changes; the aria-label is what screen readers say. */
.gc-logo {
  display: block; width: 196px; height: 36px; max-width: 100%; flex: 0 1 auto;   /* logo.svg is 895×160 */
  background: url("../brand/logo.svg") left center / contain no-repeat;
  font-size: 0; color: transparent; overflow: hidden; border-radius: 8px;
}
.gc-logo > * { display: none; }
.gc-logo__mark {   /* standalone mark (admin sidebar, chips): the real brand/logo-mark.svg */
  display: inline-block; flex: none; width: 34px; height: 34px; vertical-align: middle;
  background: url("../brand/logo-mark.svg") center / contain no-repeat; font-size: 0; color: transparent;
}
@media (max-width: 480px) { .gc-logo { width: 152px; height: 28px; } }
@media (max-width: 359px) { .gc-logo { width: 36px; height: 36px; background-image: url("../brand/logo-mark.svg"); } }

.gc-nav { display: none; gap: var(--gc-space-1); margin-inline-start: var(--gc-space-4); }
.gc-nav a {
  position: relative; padding: 10px 14px; border-radius: var(--gc-radius-pill);
  color: var(--gc-text-muted); text-decoration: none;
  font: var(--gc-fw-bold) var(--gc-fs-sm)/1 var(--gc-font-display); letter-spacing: .03em; text-transform: uppercase;
  transition: color var(--gc-dur), background var(--gc-dur);
}
.gc-nav a:hover { color: var(--gc-text); background: var(--gc-surface-2); }
.gc-nav a[aria-current="page"] { color: var(--gc-cyan); text-shadow: var(--gc-text-glow); }
.gc-nav a[aria-current="page"]::after {
  content: ""; position: absolute; inset-inline: 14px; bottom: 2px; height: 2px; border-radius: 2px;
  background: var(--gc-cyan); box-shadow: 0 0 8px var(--gc-cyan);
}

.gc-account { margin-inline-start: auto; display: flex; align-items: center; gap: var(--gc-space-2); }
.gc-header__coin {
  min-height: 36px; padding: 0 12px 0 8px; border-radius: var(--gc-radius-pill); font-size: 12px; text-decoration: none;
  background: rgba(255,200,61,.1); border: 1px solid rgba(255,200,61,.4);
  transition: box-shadow var(--gc-dur), transform var(--gc-dur-fast);
}
.gc-header__coin:hover { box-shadow: var(--gc-glow-coin); }
.gc-header__coin.is-bump { animation: gc-pop .5s var(--gc-ease-bounce); }
.gc-header__me { display: inline-flex; align-items: center; gap: var(--gc-space-2); color: var(--gc-text); text-decoration: none; font-weight: var(--gc-fw-semibold); }

.gc-mode {
  display: none; padding: 4px 10px; border-radius: var(--gc-radius-pill);
  font: var(--gc-fw-bold) 10px/1.2 var(--gc-font-body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--gc-lime); background: rgba(182,255,59,.08); border: 1px solid rgba(182,255,59,.3);
}
.gc-hide-sm { display: none; }

.gc-tabbar { height: calc(var(--gc-tabbar-h) + var(--gc-safe-b)); }
.gc-tabbar a { position: relative; min-height: var(--gc-tap); font-weight: var(--gc-fw-semibold); letter-spacing: .02em; transition: color var(--gc-dur); }
.gc-tabbar__i { font-size: 20px; line-height: 1; }
.gc-tabbar a[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--gc-cyan); box-shadow: 0 0 10px var(--gc-cyan);
}

@media (min-width: 721px) {
  .gc-header { padding-inline: var(--gc-space-5); }
  .gc-nav { display: flex; }
  .gc-hide-sm { display: inline; }
  .gc-header__coin { font-size: 13px; }
}
@media (min-width: 1024px) { .gc-mode { display: inline-flex; } }

.gc-view { display: block; min-height: 60vh; animation: gc-view-in var(--gc-dur-slow) var(--gc-ease) both; }
.gc-section { padding-block: var(--gc-space-6); }
.gc-section--tight { padding-block: var(--gc-space-4); }
@media (min-width: 721px) { .gc-section { padding-block: var(--gc-space-7); } }

.gc-section-head { display: flex; align-items: end; justify-content: space-between; gap: var(--gc-space-4); flex-wrap: wrap; margin-bottom: var(--gc-space-5); }
.gc-section-head .gc-h2, .gc-section-head .gc-h1 { margin: 0; }
.gc-section-head p { margin: 4px 0 0; color: var(--gc-text-muted); }
.gc-link { color: var(--gc-cyan); text-decoration: none; font-weight: var(--gc-fw-semibold); }
.gc-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.gc-stack   { display: grid; gap: var(--gc-space-4); }
.gc-row     { display: flex; align-items: center; gap: var(--gc-space-3); flex-wrap: wrap; }
.gc-grid-2  { display: grid; gap: var(--gc-space-4); }
@media (min-width: 900px) { .gc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   2. Avatar + game thumbnails
   ========================================================================== */
.gc-avatar {
  --h: 260; flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center;
  font: var(--gc-fw-black) 15px/1 var(--gc-font-display); color: #fff;
  background: linear-gradient(135deg, hsl(var(--h) 90% 62%), hsl(calc(var(--h) + 50) 90% 48%));
  box-shadow: 0 0 0 2px var(--gc-bg), 0 0 0 3px hsl(var(--h) 90% 62% / .6);
}
.gc-avatar--lg { width: 88px; height: 88px; font-size: 36px; box-shadow: 0 0 0 3px var(--gc-bg), 0 0 0 5px hsl(var(--h) 90% 62% / .8), 0 0 30px hsl(var(--h) 90% 62% / .5); }
.gc-avatar--md { width: 56px; height: 56px; font-size: 22px; }

.gc-thumb {
  position: relative; display: grid; place-items: center; overflow: hidden; isolation: isolate;
  aspect-ratio: 4 / 3; width: 100%; background-size: cover; background-position: center;
}
.gc-thumb > span {                          /* icon fallback (when no art) */
  font: var(--gc-fw-black) clamp(2rem, 6vw, 3rem)/1 var(--gc-font-display); color: #fff;
  text-shadow: 0 4px 24px rgba(0,0,0,.45);
}
.gc-thumb::after {                          /* art layer + bottom vignette */
  content: ""; position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center;
  transition: transform var(--gc-dur-slow) var(--gc-ease);
}
.gc-thumb::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(7,6,15,.55)), var(--gc-grad-sheen);
  background-size: 100% 100%, 250% 100%; background-position: 0 0, 120% 0;
  transition: background-position .8s var(--gc-ease);
}
/* only games that have art hide the icon fallback (draft games keep icon + gradient) */
:is(.gc-thumb[data-game="tap-rush"], .gc-thumb[data-game="memory-match"], .gc-thumb[data-game="reaction-timer"],
    .gc-thumb[data-game="snake"], .gc-thumb[data-game="2048"], .gc-thumb[data-game="neon-2048"],
    .gc-thumb[data-game="tic-tac-toe"], .gc-thumb[data-game="connect-four"], .gc-thumb[data-game="pong-duel"],
    .gc-thumb[data-game="dots-and-boxes"], .gc-thumb[data-game="breakout"], .gc-thumb[data-game="minesweeper"],
    .gc-thumb[data-game="8-ball-pool"], .gc-thumb[data-game="air-hockey"],
    .gc-thumb:has(.gc-thumb__img)) > span { display: none; }
/* v2 flagships: rendered art (design/img/<slug>.png). Before launch run design/make-web-images.sh and
   switch these to img/web/<slug>.jpg (~100 KB instead of ~2 MB). Vector fallbacks: design/img/<slug>.svg */
.gc-thumb[data-game="8-ball-pool"]::after    { background-image: url("img/8-ball-pool-sq.webp"); }   /* v3 flagship renders (1024², crop-safe for 4:3 and 1:1) */
.gc-thumb[data-game="air-hockey"]::after     { background-image: url("img/air-hockey-sq.webp"); }
.gc-thumb[data-game="tic-tac-toe"]::after    { background-image: url("img/tic-tac-toe.webp"); }
.gc-thumb[data-game="connect-four"]::after   { background-image: url("img/connect-four-sq.webp"); }
.gc-thumb[data-game="pong-duel"]::after      { background-image: url("img/pong-duel.svg"); }
.gc-thumb[data-game="dots-and-boxes"]::after { background-image: url("img/dots-and-boxes.webp"); }
.gc-thumb[data-game="breakout"]::after       { background-image: url("img/breakout.webp"); }
.gc-thumb[data-game="minesweeper"]::after    { background-image: url("img/minesweeper.webp"); }
.gc-thumb[data-game="tap-rush"]::after      { background-image: url("img/tap-rush.svg"); }
.gc-thumb[data-game="memory-match"]::after   { background-image: url("img/memory-match.svg"); }
.gc-thumb[data-game="reaction-timer"]::after { background-image: url("img/reaction-timer.svg"); }
.gc-thumb[data-game="snake"]::after          { background-image: url("img/snake.svg"); }
.gc-thumb[data-game="2048"]::after,
.gc-thumb[data-game="neon-2048"]::after      { background-image: url("img/2048.svg"); }
.gc-thumb__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.gc-thumb--big { aspect-ratio: 16 / 9; border-radius: var(--gc-radius-lg); }
.gc-thumb--big > span { font-size: clamp(3rem, 10vw, 5rem); }

/* ==========================================================================
   3. Home / lobby hero
   Markup:
   <section class="gc-hero"><div class="gc-container gc-hero__inner">
     <div class="gc-hero__content">
       <span class="gc-eyebrow">…</span><h1 class="gc-hero__title">Play. <em>Score.</em> Get rewarded.</h1>
       <p class="gc-hero__sub">…</p><div class="gc-hero__ctas">…buttons…</div>
       <ul class="gc-hero__stats"><li><b>5</b><span>Games</span></li>…</ul>
     </div>
     <div class="gc-hero__card">…optional "daily challenge" glass card…</div>
   </div></section>
   ========================================================================== */
/* v2: compact hero so the games lead — headline, one line of copy, one CTA on phones.
   Stats are hidden; the daily-challenge card only shows on wide screens. */
.gc-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: var(--gc-space-6) var(--gc-space-5);
  border-bottom: 1px solid var(--gc-border);
}
.gc-hero::before {                          /* the art — phone: soft band top-right that fades out before the text */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 75%; z-index: -2;
  background: url("img/hero-v3.webp") 80% 55% / cover no-repeat;   /* vector fallback: img/hero.svg */
  opacity: .4;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 40%, transparent 80%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 40%, transparent 80%);
}
.gc-hero::after {                           /* legibility scrim */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(7,6,15,.25) 0%, rgba(7,6,15,.72) 45%, var(--gc-bg) 100%);
}
.gc-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gc-space-6); align-items: center; }
.gc-hero__content { display: grid; gap: var(--gc-space-3); max-width: 600px; min-width: 0; }
.gc-hero__content > * { min-width: 0; }
.gc-hero__title {
  margin: 0; font: var(--gc-fw-black) clamp(2rem, 6vw + .6rem, 4rem)/1.02 var(--gc-font-display);
  letter-spacing: -0.02em; text-transform: uppercase; text-wrap: balance; overflow-wrap: break-word;
}
.gc-hero__title em, .gc-hero__title .gc-gradient-text {
  font-style: normal; background: var(--gc-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(123,92,255,.45));
}
.gc-hero__sub { margin: 0; color: var(--gc-text-muted); font-size: var(--gc-fs-md); max-width: 52ch; }
.gc-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--gc-space-3); margin-top: var(--gc-space-2); }
.gc-hero__ctas .gc-btn { flex: 1 1 auto; min-width: 0; white-space: normal; text-align: center; line-height: 1.15; }
.gc-hero__ctas .gc-btn--secondary { display: none; }      /* phone: one clear action */
.gc-hero__ctas .gc-btn--primary { white-space: nowrap; font-size: clamp(1rem, 4.6vw, 1.15rem); letter-spacing: .04em; }   /* "▶ PLAY FREE" — one line, even at 320 px */
.gc-hero__stats { display: none; }                         /* games lead — no headline numbers */
.gc-hero__card {
  display: none; gap: var(--gc-space-3); padding: var(--gc-space-5); min-width: 0;
  background: var(--gc-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--gc-glass-border); border-radius: var(--gc-radius-xl);
  box-shadow: var(--gc-shadow-lg); animation: gc-float 6s ease-in-out infinite;
}
.gc-hero__card .gc-thumb { border-radius: var(--gc-radius-md); }
.gc-hero__card .gc-row > * { min-width: 0; }
.gc-trust { margin: 0; font-size: var(--gc-fs-xs); color: var(--gc-text-dim); letter-spacing: .02em; }

@media (min-width: 720px) {
  .gc-hero { padding-block: var(--gc-space-7) var(--gc-space-6); }
  .gc-hero::before { inset: 0; height: auto; opacity: 1; background-position: 80% 60%; -webkit-mask-image: none; mask-image: none; }
  .gc-hero::after { background: linear-gradient(90deg, var(--gc-bg) 0%, rgba(7,6,15,.8) 40%, rgba(7,6,15,.1) 75%), linear-gradient(180deg, transparent 70%, var(--gc-bg)); }
  .gc-hero__sub { font-size: var(--gc-fs-lg); }
  .gc-hero__ctas .gc-btn { flex: 0 0 auto; white-space: nowrap; }
  .gc-hero__ctas .gc-btn--secondary { display: inline-flex; }
}
@media (min-width: 1024px) {
  .gc-hero__inner { grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); }
  .gc-hero__card { display: grid; max-width: 360px; justify-self: end; }
}

/* "How it works" 3-step strip */
.gc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gc-space-3); counter-reset: step; }
.gc-step {
  counter-increment: step; position: relative; display: grid; gap: 6px;
  padding: var(--gc-space-5) var(--gc-space-5) var(--gc-space-5) calc(var(--gc-space-5) + 52px);
  background: var(--gc-surface); border: 1px solid var(--gc-border); border-radius: var(--gc-radius-lg);
}
.gc-step::before {
  content: counter(step); position: absolute; inset-inline-start: var(--gc-space-5); top: var(--gc-space-5);
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  font: var(--gc-fw-black) 18px/1 var(--gc-font-display); color: var(--gc-text-on-neon); background: var(--gc-grad-lime);
}
.gc-step:nth-child(2)::before { background: var(--gc-grad-brand); color: #fff; }
.gc-step:nth-child(3)::before { background: var(--gc-grad-coin); }
.gc-greet { margin: 0 0 var(--gc-space-4); color: var(--gc-text-muted); font-weight: 600; }

/* Home extras (ex app/app.css): features, teasers, FAQ, final CTA, tick list */
.gc-features { display: grid; gap: var(--gc-space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--gc-space-5); }
@media (min-width: 900px) { .gc-features { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gc-space-4); } }
.gc-feature { display: grid; gap: 6px; align-content: start; }
.gc-feature h3 { margin: 0; font: var(--gc-fw-bold) var(--gc-fs-sm)/1.25 var(--gc-font-display); }
.gc-feature p { margin: 0; font-size: var(--gc-fs-xs); color: var(--gc-text-muted); line-height: 1.5; }
.gc-feature__icon { font-size: 26px; line-height: 1; }
@media (max-width: 480px) { .gc-feature { padding: var(--gc-space-4); } }
@media (min-width: 900px) { .gc-feature h3 { font-size: var(--gc-fs-md); } .gc-feature p { font-size: var(--gc-fs-sm); } }

.gc-teaser { display: grid; gap: var(--gc-space-3); align-content: start; }
.gc-teaser .gc-h2 { margin: 0; font-size: var(--gc-fs-xl); }
.gc-teaser p { margin: 0; }
.gc-teaser .gc-btn { justify-self: start; }

.gc-faq { display: grid; gap: var(--gc-space-2); max-width: 860px; }
.gc-faq__item { background: var(--gc-surface); border: 1px solid var(--gc-border); border-radius: var(--gc-radius-md); transition: border-color var(--gc-dur); }
.gc-faq__item[open] { border-color: rgba(34,228,255,.45); }
.gc-faq__item summary { cursor: pointer; list-style: none; padding: var(--gc-space-4); font-weight: 600; display: flex; justify-content: space-between; gap: var(--gc-space-3); }
.gc-faq__item summary::-webkit-details-marker { display: none; }
.gc-faq__item summary::after { content: "+"; flex: none; color: var(--gc-cyan); font: 900 18px/1 var(--gc-font-display); transition: transform var(--gc-dur); }
.gc-faq__item[open] summary::after { transform: rotate(45deg); }
.gc-faq__item p { margin: 0; padding: 0 var(--gc-space-4) var(--gc-space-4); color: var(--gc-text-muted); }

.gc-final-cta {
  display: grid; gap: var(--gc-space-3); justify-items: center; text-align: center; padding: var(--gc-space-7) var(--gc-space-5);
  border-radius: var(--gc-radius-xl); border: 1px solid var(--gc-border-strong);
  background: radial-gradient(600px 240px at 50% 0%, rgba(123,92,255,.35), transparent 70%), radial-gradient(500px 200px at 50% 100%, rgba(34,228,255,.18), transparent 70%), var(--gc-surface);
}
.gc-final-cta .gc-h2 { margin: 0; text-transform: uppercase; }
.gc-final-cta p { margin: 0; color: var(--gc-text-muted); }

.gc-ticks { list-style: none; margin: 0 0 var(--gc-space-4); padding: 0; display: grid; gap: var(--gc-space-2); }
.gc-ticks li { position: relative; padding-inline-start: 28px; color: var(--gc-text-muted); font-size: var(--gc-fs-sm); }
.gc-ticks li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--gc-lime); font-weight: 900; }
.gc-step h3 { margin: 0; font: var(--gc-fw-bold) var(--gc-fs-lg)/1.2 var(--gc-font-display); }
.gc-step p  { margin: 0; color: var(--gc-text-muted); font-size: var(--gc-fs-sm); }
@media (min-width: 900px) { .gc-steps { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   4. Lobby — filters + game cards
   ========================================================================== */
.gc-lobby-bar { display: grid; gap: var(--gc-space-3); margin-bottom: var(--gc-space-5); }
.gc-search { position: relative; }
.gc-search .gc-input { padding-inline-start: 44px; border-radius: var(--gc-radius-pill); }
.gc-search::before { content: "⌕"; position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-52%); font-size: 20px; color: var(--gc-text-dim); pointer-events: none; }
@media (min-width: 900px) { .gc-lobby-bar { grid-template-columns: 1fr 320px; align-items: center; } }

.gc-game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gc-space-3); }
@media (min-width: 640px)  { .gc-game-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--gc-space-4); } }
@media (min-width: 1100px) { .gc-game-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gc-space-5); } }

.gc-game-card { box-shadow: var(--gc-shadow-md); }
.gc-game-card .gc-thumb { border-radius: 0; }
.gc-game-card:hover .gc-thumb::after { transform: scale(1.06); }
.gc-game-card:hover .gc-thumb::before { background-position: 0 0, -120% 0; }
.gc-game-card__body { display: grid; gap: 4px; }
.gc-game-card__title { font-size: var(--gc-fs-sm); }
.gc-game-card__desc {
  margin: 0; font-size: var(--gc-fs-xs); color: var(--gc-text-muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gc-game-card__meta { align-items: center; gap: var(--gc-space-2); margin-top: 4px; }
.gc-game-card__badge { z-index: 2; }
.gc-game-card__play {                      /* round play button that pops on hover */
  position: absolute; z-index: 2; inset-inline-end: var(--gc-space-3); top: calc(var(--gc-space-3));
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gc-cyan); color: var(--gc-text-on-neon); font-size: 15px; box-shadow: var(--gc-glow-cyan);
  transform: scale(.85); opacity: .92; transition: transform var(--gc-dur) var(--gc-ease-bounce), opacity var(--gc-dur);
}
.gc-game-card:hover .gc-game-card__play { transform: scale(1); opacity: 1; }
@media (min-width: 640px) {
  .gc-game-card__title { font-size: var(--gc-fs-md); }
  .gc-game-card__desc { font-size: var(--gc-fs-sm); }
  .gc-game-card__play { opacity: 0; }
}

/* "Coming soon" (v3): a dark surface with a soft neon glow in the game's OWN accent colours.
   The thumb's inline gradient (catalog thumb.gradient) only shows through as a blurred halo
   behind the icon, so it's never a flat colour block. Optional: style="--accent:#hex" on the card tints the rim. */
.gc-game-card--soon {
  --accent: var(--gc-violet);
  cursor: default; background: linear-gradient(180deg, #110e24, var(--gc-bg-2));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--gc-border));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 30px rgba(0,0,0,.45);
}
.gc-game-card--soon .gc-thumb { background-color: #0d0b1a !important; filter: saturate(1.25); }
.gc-game-card--soon .gc-thumb::before {   /* dark vignette with a glowing centre = the accent halo */
  background: radial-gradient(ellipse 46% 52% at 50% 50%, rgba(13,11,26,0) 0%, rgba(13,11,26,.55) 45%, rgba(13,11,26,.94) 78%, #0d0b1a 100%);
  background-size: 100% 100%; transition: none;
}
.gc-game-card--soon .gc-thumb > span {
  position: relative; z-index: 2; color: #fff; opacity: .95;
  text-shadow: 0 0 10px rgba(255,255,255,.7), 0 0 28px color-mix(in srgb, var(--accent) 80%, white), 0 0 56px var(--accent);
}
.gc-game-card--soon .gc-game-card__title { color: var(--gc-text); opacity: .85; }
.gc-game-card--soon .gc-game-card__desc, .gc-game-card--soon .gc-game-card__meta { color: var(--gc-text-muted); }
.gc-game-card--soon:hover { transform: none; border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 26px color-mix(in srgb, var(--accent) 22%, transparent); }
.gc-game-card--soon .gc-game-card__play { display: none; }
.gc-badge--soon { background: rgba(123,92,255,.18); color: #cbbcff; border: 1px solid rgba(123,92,255,.6); box-shadow: 0 0 10px rgba(123,92,255,.35); }

/* Featured (wide) card — first card on home */
@media (min-width: 900px) {
  .gc-game-card--featured { grid-column: span 2; grid-row: span 2; }
  .gc-game-card--featured .gc-thumb { aspect-ratio: auto; flex: 1; min-height: 260px; }
  .gc-game-card--featured .gc-game-card__title { font-size: var(--gc-fs-xl); }
}

/* Horizontal scroller (mobile "Continue playing", etc.) */
.gc-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: var(--gc-space-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--gc-space-2); }
.gc-rail > * { scroll-snap-align: start; }
@media (min-width: 640px) { .gc-rail { grid-auto-columns: 280px; } }

/* Skeleton loader */
.gc-skel {
  aspect-ratio: 4 / 4.2; border-radius: var(--gc-radius-lg); border: 1px solid var(--gc-border);
  background: linear-gradient(100deg, var(--gc-surface) 30%, var(--gc-surface-2) 50%, var(--gc-surface) 70%) 0 0 / 300% 100%;
  animation: gc-shimmer 1.4s linear infinite;
}

/* ==========================================================================
   5. Play screen — header, stage, HUD, overlays, side rail
   Markup:
   <section class="gc-play">
     <div class="gc-play__bar"><a class="gc-btn gc-btn--ghost gc-btn--icon">←</a><h1 class="gc-play__title">Snake</h1>…</div>
     <div class="gc-player">
       <div class="gc-play__main">
         <div class="gc-hud gc-hud--bar">…stats…</div>
         <div class="gc-game-frame gc-stage"><div class="gc-stage__mount"></div><div class="gc-overlay">…</div></div>
       </div>
       <aside class="gc-play__side">…ad 300x250, top-5, how to play…</aside>
     </div>
   </section>
   ========================================================================== */
.gc-play { padding-block: var(--gc-space-3) var(--gc-space-6); }
.gc-play__bar { display: flex; align-items: center; gap: var(--gc-space-3); margin-bottom: var(--gc-space-3); }
.gc-play__title { margin: 0; font: var(--gc-fw-black) var(--gc-fs-lg)/1.1 var(--gc-font-display); text-transform: uppercase; letter-spacing: .02em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-play__main { display: grid; gap: var(--gc-space-3); min-width: 0; }
.gc-play__side { display: grid; gap: var(--gc-space-4); align-content: start; }
@media (min-width: 721px) { .gc-play { padding-block: var(--gc-space-5) var(--gc-space-7); } .gc-play__title { font-size: var(--gc-fs-xl); } }

/* stage: portrait-friendly on phones, 16:9 on desktop */
.gc-stage { aspect-ratio: auto; height: min(calc(100dvh - var(--gc-header-h) - var(--gc-tabbar-h) - 150px), 640px); min-height: 420px; touch-action: manipulation; }
.gc-stage__mount { position: absolute; inset: 0; display: grid; }
.gc-stage__mount > * { min-width: 0; min-height: 0; }
.gc-stage::after {                          /* subtle CRT scanlines, never blocks input */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; mix-blend-mode: overlay; opacity: .25;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px);
}
@media (min-width: 1025px) { .gc-stage { height: auto; aspect-ratio: 16 / 10; min-height: 480px; max-height: calc(100vh - var(--gc-header-h) - 140px); } }

.gc-hud { flex-wrap: wrap; row-gap: var(--gc-space-2); }
.gc-hud--bar { justify-content: space-around; }
.gc-hud__stat { justify-items: center; min-width: 64px; }
.gc-hud__value { font-size: 16px; transition: transform var(--gc-dur-fast); white-space: nowrap; }
.gc-hud__value.gc-pixel { font-family: var(--gc-font-num); letter-spacing: 0; }

/* every big number: display font + tabular figures, so digits don't jump while counting */
.gc-stat__value, .gc-wallet__balance, .gc-results__score, .gc-kpi__value, .gc-podium__step,
.gc-countdown, .gc-hud__value, .gc-coin { font-variant-numeric: tabular-nums; }
.gc-hud__value.is-bump { animation: gc-pop .35s var(--gc-ease-bounce); }
.gc-hud__value--coin { color: var(--gc-coin); text-shadow: 0 0 10px rgba(255,200,61,.6); }
.gc-hud__lives { display: flex; gap: 4px; color: var(--gc-magenta); font-size: 14px; }
.gc-hud__actions { display: flex; gap: var(--gc-space-2); }
@media (min-width: 721px) { .gc-hud__value { font-size: 20px; } }
@media (max-width: 480px) {                 /* HUD stays on one row on phones */
  .gc-hud { gap: 6px; padding-inline: 10px; flex-wrap: nowrap; }
  .gc-hud__stat { min-width: 0; flex: 1 1 0; }
  .gc-hud__value { font-size: 14px; }
  .gc-hud__actions { flex: none; }
}
.gc-hud__actions .gc-btn[disabled] { opacity: .4; }
.gc-play__hint { margin: 0; text-align: center; }
/* HUD floating over the game */
.gc-hud--overlay { position: absolute; z-index: 4; inset: var(--gc-space-3) var(--gc-space-3) auto; pointer-events: none; }
.gc-hud--overlay button { pointer-events: auto; }

/* start / pause / game-over overlay inside the stage */
.gc-overlay {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; align-content: center; gap: var(--gc-space-4);
  padding: var(--gc-space-5); text-align: center;
  background: radial-gradient(circle at 50% 40%, rgba(123,92,255,.28), rgba(7,6,15,.92) 70%);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: gc-view-in var(--gc-dur) var(--gc-ease) both;
}
.gc-overlay[hidden] { display: none; }
.gc-overlay__title { margin: 0; font: var(--gc-fw-black) clamp(1.8rem, 6vw, 3rem)/1 var(--gc-font-display); text-transform: uppercase; }
.gc-overlay__hint { margin: 0; color: var(--gc-text-muted); max-width: 40ch; }
.gc-overlay__keys { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.gc-kbd {
  min-width: 30px; padding: 4px 8px; border-radius: 6px; font: 10px/1.4 var(--gc-font-pixel); color: var(--gc-text);
  background: var(--gc-surface-3); border: 1px solid var(--gc-border-strong); box-shadow: inset 0 -2px 0 rgba(0,0,0,.4);
}
.gc-countdown { font: var(--gc-fw-black) clamp(4rem, 18vw, 8rem)/1 var(--gc-font-display); color: var(--gc-cyan); text-shadow: 0 0 40px rgba(34,228,255,.7); animation: gc-pop .8s var(--gc-ease-bounce) both; }

/* on-screen d-pad for keyboard games on touch devices */
.gc-dpad { display: grid; grid-template: repeat(3, 56px) / repeat(3, 56px); gap: 6px; justify-content: center; margin-top: var(--gc-space-2); user-select: none; }
.gc-dpad button { border: 1px solid var(--gc-border-strong); border-radius: 14px; background: var(--gc-surface-2); color: var(--gc-cyan); font-size: 22px; touch-action: manipulation; }
.gc-dpad button:active { background: var(--gc-cyan); color: var(--gc-text-on-neon); box-shadow: var(--gc-glow-cyan); }
.gc-dpad [data-dir="up"]    { grid-area: 1 / 2; }
.gc-dpad [data-dir="left"]  { grid-area: 2 / 1; }
.gc-dpad [data-dir="right"] { grid-area: 2 / 3; }
.gc-dpad [data-dir="down"]  { grid-area: 3 / 2; }
@media (hover: hover) and (pointer: fine) { .gc-dpad { display: none; } }

/* results card (inside modal or overlay) */
.gc-results__label { font: 10px/1 var(--gc-font-pixel); letter-spacing: .14em; color: var(--gc-text-dim); text-transform: uppercase; }
.gc-results__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gc-space-2); width: 100%; }
.gc-results__stat { padding: var(--gc-space-3); background: var(--gc-surface-2); border: 1px solid var(--gc-border); border-radius: var(--gc-radius-md); display: grid; gap: 6px; }
.gc-results__stat b { font: var(--gc-fw-black) 18px/1 var(--gc-font-num); font-variant-numeric: tabular-nums; color: var(--gc-cyan); }
.gc-results__stat span { font-size: 11px; color: var(--gc-text-dim); text-transform: uppercase; letter-spacing: .08em; }
.gc-results__best { color: var(--gc-coin); font-weight: var(--gc-fw-bold); animation: gc-pop .6s var(--gc-ease-bounce) both; }
.gc-results__actions { display: flex; gap: var(--gc-space-3); flex-wrap: wrap; justify-content: center; width: 100%; }
.gc-results__actions .gc-btn { flex: 1 1 140px; }
.gc-results { padding: var(--gc-space-2); }

/* guest header: "Log in" hides on phones (the sign-up box links to log in); keep button layout on desktop */
.gc-btn.gc-hide-sm { display: none; }
@media (min-width: 721px) { .gc-btn.gc-hide-sm { display: inline-flex; } }

/* results v2 — the save moment: coin burst, new-best glow, guest save card, big Replay */
.gc-overlay:has(.gc-results--v2) { align-content: safe center; overflow-y: auto; }
.gc-results--v2 { position: relative; width: min(100%, 520px); gap: var(--gc-space-3); }
.gc-results--v2 .gc-results__score { position: relative; z-index: 1; }
.gc-results--v2.is-best .gc-results__label { color: var(--gc-coin); font-size: 12px; }
.gc-results--v2.is-best .gc-results__score { animation: gc-best-glow 1.4s ease-in-out infinite alternate; }
.gc-results--v2.is-best::before {                 /* soft gold halo behind the score */
  content: ""; position: absolute; z-index: 0; left: 50%; top: 4%; width: 320px; height: 160px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255,200,61,.35), transparent); pointer-events: none;
}
.gc-results__pts, .gc-results__saved { margin: 0; }
.gc-results__saved { font-size: var(--gc-fs-xs); color: var(--gc-lime); letter-spacing: .06em; text-transform: uppercase; font-weight: var(--gc-fw-bold); }
.gc-results__msg { margin: 0; font-size: var(--gc-fs-sm); }
.gc-results__replay { width: min(100%, 320px); font-size: var(--gc-fs-lg); }
.gc-results__links { display: flex; gap: var(--gc-space-2); flex-wrap: wrap; justify-content: center; }

.gc-coin-burst { position: absolute; z-index: 2; left: 50%; top: 22%; width: 0; height: 0; pointer-events: none; }
.gc-coin-burst i {
  position: absolute; width: 18px; height: 18px; margin: -9px; border-radius: 50%;
  background: var(--gc-grad-coin); box-shadow: inset 0 -3px 0 rgba(0,0,0,.2), 0 0 12px rgba(255,200,61,.85);
  animation: gc-coin-fly 1s cubic-bezier(.2,.75,.3,1) var(--d, 0s) both;
}

.gc-save {
  width: 100%; display: grid; gap: var(--gc-space-2); justify-items: center; text-align: center;
  padding: var(--gc-space-4); border-radius: var(--gc-radius-lg);
  background: linear-gradient(135deg, rgba(255,46,166,.16), rgba(123,92,255,.16)), var(--gc-surface);
  border: 1px solid rgba(255,46,166,.55); box-shadow: 0 0 28px rgba(255,46,166,.25);
  animation: gc-pop-in .4s var(--gc-ease) .15s both;
}
.gc-save__title { margin: 0; font: var(--gc-fw-black) var(--gc-fs-lg)/1.2 var(--gc-font-display); color: var(--gc-text); text-wrap: balance; }
.gc-save__text { margin: 0; font-size: var(--gc-fs-sm); color: var(--gc-text-muted); max-width: 40ch; }
.gc-save .gc-help { margin: 0; }
.gc-save__actions { display: flex; gap: var(--gc-space-2); flex-wrap: wrap; justify-content: center; width: 100%; }
.gc-save__actions .gc-btn--hot { flex: 1 1 200px; }
.gc-save__note { font-size: 11px; }
@media (max-width: 480px) {
  .gc-results--v2 { gap: var(--gc-space-2); }
  .gc-results--v2.is-guest .gc-results__stats { display: none; }      /* keep the save card + Replay above the fold */
  .gc-save { padding: var(--gc-space-3); }
  .gc-save__fine { display: none; }                                   /* fine print stays on desktop; phones keep the CTA visible */
  .gc-save__title { font-size: var(--gc-fs-md); }
  .gc-save__actions .gc-btn--lg { font-size: var(--gc-fs-sm); padding-inline: var(--gc-space-4); white-space: nowrap; }
  .gc-results--v2 .gc-results__score { font-size: clamp(2.2rem, 12vw, 3rem); }
}
@keyframes gc-coin-fly {
  0% { transform: translate(0, 0) scale(.3); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) scale(1) rotate(var(--r, 0deg)); opacity: 0; }
}
@keyframes gc-best-glow {
  from { filter: drop-shadow(0 0 6px rgba(255,200,61,.35)); }
  to   { filter: drop-shadow(0 0 26px rgba(255,200,61,.95)); }
}
@media (prefers-reduced-motion: reduce) {
  .gc-results--v2.is-best .gc-results__score, .gc-save { animation: none !important; }
  .gc-coin-burst { display: none; }
}

/* mini top-5 list in the side rail */
.gc-mini-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: mb; }
.gc-mini-board li { counter-increment: mb; display: grid; grid-template-columns: 22px 28px 1fr auto; gap: var(--gc-space-2); align-items: center; font-size: var(--gc-fs-sm); }
.gc-mini-board li::before { content: counter(mb); font: var(--gc-fw-black) 13px/1 var(--gc-font-num); color: var(--gc-text-dim); }
.gc-mini-board li:nth-child(1)::before { color: var(--gc-gold); }
.gc-mini-board li:nth-child(2)::before { color: var(--gc-silver); }
.gc-mini-board li:nth-child(3)::before { color: var(--gc-bronze); }
.gc-mini-board .gc-avatar { width: 28px; height: 28px; font-size: 12px; }
.gc-mini-board b { font: var(--gc-fw-black) 13px/1 var(--gc-font-num); font-variant-numeric: tabular-nums; color: var(--gc-cyan); }
.gc-mini-board li > span:not(.gc-avatar) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   6. Leaderboard
   ========================================================================== */
.gc-lb__controls { display: grid; gap: var(--gc-space-3); margin-bottom: var(--gc-space-4); }
.gc-lb__controls .gc-tabs { justify-self: start; max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.gc-lb__controls .gc-chips { min-width: 0; }
@media (max-width: 480px) { .gc-tabs .gc-tab { padding-inline: var(--gc-space-4); font-size: var(--gc-fs-xs); } }
@media (min-width: 721px) { .gc-lb__controls { grid-template-columns: auto 1fr; align-items: center; } .gc-lb__controls .gc-chips { justify-content: end; } }

.gc-lb__board {
  padding: var(--gc-space-4); border-radius: var(--gc-radius-xl);
  background: radial-gradient(600px 260px at 50% 0%, rgba(255,210,63,.12), transparent 70%), var(--gc-grad-surface);
  border: 1px solid var(--gc-border);
}
@media (min-width: 721px) { .gc-lb__board { padding: var(--gc-space-6); } }

.gc-podium { gap: var(--gc-space-2); padding-top: var(--gc-space-4); }
.gc-podium__avatar.gc-avatar { width: 56px; height: 56px; font-size: 22px; border: 0; box-shadow: 0 0 0 3px var(--_c1), 0 0 22px color-mix(in srgb, var(--_c1) 60%, transparent); }
.gc-podium__place--1 .gc-podium__avatar.gc-avatar { width: 72px; height: 72px; font-size: 28px; }
.gc-podium__step { animation: gc-rise .7s var(--gc-ease) both; transform-origin: bottom; font-size: 2rem; }
.gc-podium__place--2 .gc-podium__step { animation-delay: .1s; }
.gc-podium__place--3 .gc-podium__step { animation-delay: .2s; }
.gc-podium__score { font-size: 12px; }
.gc-podium__prize { color: var(--gc-coin); }
@media (min-width: 640px) {
  .gc-podium { gap: var(--gc-space-3); padding-top: var(--gc-space-6); }
  .gc-podium__avatar.gc-avatar { width: 72px; height: 72px; font-size: 28px; }
  .gc-podium__place--1 .gc-podium__avatar.gc-avatar { width: 92px; height: 92px; font-size: 36px; }
  .gc-podium__step { font-size: 2.5rem; }
  .gc-podium__score { font-size: 14px; }
}

.gc-rank-row { grid-template-columns: 34px 36px minmax(0, 1fr) auto; gap: var(--gc-space-2); padding: 10px var(--gc-space-3); transition: border-color var(--gc-dur), transform var(--gc-dur); }
.gc-rank-row:hover { border-color: var(--gc-border-strong); transform: translateX(2px); }
.gc-rank-row .gc-avatar { width: 36px; height: 36px; font-size: 14px; }
.gc-rank-row__sub { display: block; font-size: 11px; color: var(--gc-text-dim); font-weight: var(--gc-fw-regular); }
.gc-rank-row--me { bottom: calc(var(--gc-tabbar-h) + var(--gc-space-2)); }
@media (min-width: 640px) { .gc-rank-row { grid-template-columns: 48px 40px minmax(0, 1fr) auto; gap: var(--gc-space-3); padding: var(--gc-space-3) var(--gc-space-4); } .gc-rank-row .gc-avatar { width: 40px; height: 40px; } }
@media (min-width: 721px) { .gc-rank-row--me { bottom: var(--gc-space-3); } }

.gc-prize-strip { display: flex; gap: var(--gc-space-3); align-items: center; padding: var(--gc-space-3) var(--gc-space-4); border-radius: var(--gc-radius-md); background: rgba(255,200,61,.08); border: 1px solid rgba(255,200,61,.35); font-size: var(--gc-fs-sm); margin-bottom: var(--gc-space-4); }

/* ==========================================================================
   7. Wallet + rewards
   Markup:
   <div class="gc-wallet"><div class="gc-wallet__label">Your Points</div>
     <div class="gc-wallet__balance">1,240</div>
     <div class="gc-wallet__split"><div><span>Pending</span><b>80</b></div>…</div>
     <div class="gc-progress"><span style="--value:62%"></span></div><p class="gc-wallet__goal">…</p></div>
   ========================================================================== */
.gc-wallet {
  position: relative; overflow: hidden; display: grid; gap: var(--gc-space-3);
  padding: var(--gc-space-5); border-radius: var(--gc-radius-xl);
  background: radial-gradient(420px 220px at 100% 0%, rgba(255,200,61,.25), transparent 70%),
              radial-gradient(380px 260px at 0% 100%, rgba(255,46,166,.18), transparent 70%), var(--gc-surface);
  border: 1px solid rgba(255,200,61,.45); box-shadow: var(--gc-shadow-lg), var(--gc-glow-coin);
}
.gc-wallet::after {                         /* big decorative coin */
  content: "★"; position: absolute; inset-inline-end: -26px; top: -26px; width: 140px; height: 140px; border-radius: 50%;
  display: grid; place-items: center; font-size: 64px; color: rgba(168,92,0,.55);
  background: var(--gc-grad-coin); box-shadow: inset 0 -8px 0 rgba(0,0,0,.18), 0 0 50px rgba(255,200,61,.5);
  animation: gc-spin-y 6s linear infinite; opacity: .9;
}
.gc-wallet__label { font: 10px/1 var(--gc-font-pixel); letter-spacing: .14em; text-transform: uppercase; color: var(--gc-coin); }
.gc-wallet__balance {
  font: var(--gc-fw-black) clamp(2.6rem, 11vw, 4.2rem)/1 var(--gc-font-display);
  background: var(--gc-grad-coin); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(255,200,61,.35)); position: relative; z-index: 1;
}
.gc-wallet__split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gc-space-2); position: relative; z-index: 1; }
.gc-wallet__split > div { padding: var(--gc-space-3); border-radius: var(--gc-radius-md); background: rgba(7,6,15,.45); border: 1px solid var(--gc-border); display: grid; gap: 4px; }
.gc-wallet__split span { font-size: 11px; color: var(--gc-text-dim); text-transform: uppercase; letter-spacing: .08em; }
.gc-wallet__split b { font: var(--gc-fw-black) 18px/1 var(--gc-font-num); font-variant-numeric: tabular-nums; color: var(--gc-text); white-space: nowrap; }
.gc-wallet__goal { margin: 0; font-size: var(--gc-fs-sm); color: var(--gc-text-muted); }
.gc-progress--coin > span { background: var(--gc-grad-coin); box-shadow: var(--gc-glow-coin); }

.gc-tx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.gc-tx {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--gc-space-3); align-items: center;
  padding: var(--gc-space-3) 0; border-bottom: 1px solid var(--gc-border);
}
.gc-tx:last-child { border-bottom: 0; }
.gc-tx__icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--gc-surface-3); font-size: 16px; }
.gc-tx__title { font-weight: var(--gc-fw-semibold); font-size: var(--gc-fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-tx__sub { font-size: 11px; color: var(--gc-text-dim); }
.gc-tx__amt { font: var(--gc-fw-black) 14px/1 var(--gc-font-num); font-variant-numeric: tabular-nums; color: var(--gc-lime); text-align: end; display: grid; gap: 6px; justify-items: end; }
.gc-tx__amt--neg { color: var(--gc-danger); }

.gc-reward-grid { display: grid; gap: var(--gc-space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px)  { .gc-reward-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gc-space-4); } }
@media (min-width: 1100px) { .gc-reward-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gc-reward-card { position: relative; padding: var(--gc-space-3); transition: transform var(--gc-dur) var(--gc-ease), border-color var(--gc-dur); }
.gc-reward-card:hover { transform: translateY(-3px); border-color: rgba(255,200,61,.5); }
.gc-reward-card__img { position: relative; overflow: hidden; padding-top: 18px; font-size: var(--gc-fs-lg); letter-spacing: .02em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.gc-reward-card__img::after { content: ""; position: absolute; inset: 0; background: var(--gc-grad-sheen); background-size: 250% 100%; background-position: 120% 0; transition: background-position .9s var(--gc-ease); }
.gc-reward-card:hover .gc-reward-card__img::after { background-position: -120% 0; }
.gc-reward-card__img--amazon  { background: linear-gradient(135deg, #232f3e, #ff9900); }
.gc-reward-card__img--google  { background: linear-gradient(135deg, #34a853, #4285f4); }
.gc-reward-card__img--steam   { background: linear-gradient(135deg, #171a21, #2a475e); }
.gc-reward-card__img--apple   { background: linear-gradient(135deg, #1c1c1e, #8e8e93); }
.gc-reward-card__img--xbox    { background: linear-gradient(135deg, #0e7a0d, #107c10); }
.gc-reward-card__img--psn     { background: linear-gradient(135deg, #003087, #0070d1); }
.gc-reward-card__img--netflix { background: linear-gradient(135deg, #141414, #e50914); }
.gc-reward-card__img--spotify { background: linear-gradient(135deg, #121212, #1db954); }
.gc-reward-card__name { margin: 0; font: var(--gc-fw-bold) var(--gc-fs-sm)/1.25 var(--gc-font-display); }
.gc-reward-card__price { font-size: 12px; }
.gc-reward-card--soon .gc-reward-card__img { filter: saturate(.7); }
.gc-reward-card__ribbon {
  position: absolute; z-index: 1; top: 18px; inset-inline-end: -4px; padding: 4px 10px;
  font: var(--gc-fw-bold) 10px/1.2 var(--gc-font-body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--gc-text-on-neon); background: var(--gc-coin); border-radius: 6px 0 0 6px; box-shadow: var(--gc-glow-coin);
}

/* rule callouts (e.g. "Ads never give points") */
.gc-note {
  display: grid; grid-template-columns: auto 1fr; gap: var(--gc-space-3); align-items: start;
  padding: var(--gc-space-4); border-radius: var(--gc-radius-md); font-size: var(--gc-fs-sm); color: var(--gc-text-muted);
  background: rgba(34,228,255,.06); border: 1px solid rgba(34,228,255,.28);
}
.gc-note::before { content: "i"; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: var(--gc-fw-black) 12px/1 var(--gc-font-display); color: var(--gc-text-on-neon); background: var(--gc-cyan); }
.gc-note--warn { background: rgba(255,176,46,.07); border-color: rgba(255,176,46,.35); }
.gc-note--warn::before { content: "!"; background: var(--gc-warning); }
.gc-note b, .gc-note strong { color: var(--gc-text); }

/* ==========================================================================
   8. Profile
   ========================================================================== */
.gc-profile {
  position: relative; overflow: hidden; display: grid; gap: var(--gc-space-4); justify-items: center; text-align: center;
  padding: var(--gc-space-6) var(--gc-space-5) var(--gc-space-5); border-radius: var(--gc-radius-xl);
  background: radial-gradient(500px 200px at 50% 0%, rgba(123,92,255,.35), transparent 70%), var(--gc-surface);
  border: 1px solid var(--gc-border);
}
.gc-profile__name { margin: 0; font: var(--gc-fw-black) var(--gc-fs-xl)/1.1 var(--gc-font-display); }
.gc-profile__meta { display: flex; gap: var(--gc-space-2); flex-wrap: wrap; justify-content: center; color: var(--gc-text-muted); font-size: var(--gc-fs-sm); }
.gc-level { display: grid; gap: 6px; width: min(100%, 360px); }
.gc-level__row { display: flex; justify-content: space-between; font-size: var(--gc-fs-xs); color: var(--gc-text-muted); }
.gc-level__row b { font: var(--gc-fw-black) 12px/1.4 var(--gc-font-num); font-variant-numeric: tabular-nums; color: var(--gc-lime); }
@media (min-width: 721px) {
  .gc-profile { grid-template-columns: auto 1fr auto; justify-items: start; text-align: start; align-items: center; padding: var(--gc-space-6); }
  .gc-profile__meta { justify-content: start; }
}

.gc-stats { display: grid; gap: var(--gc-space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .gc-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gc-stat { padding: var(--gc-space-4); background: var(--gc-surface); border: 1px solid var(--gc-border); border-radius: var(--gc-radius-md); display: grid; gap: 6px; }
.gc-stat__label { font-size: 11px; color: var(--gc-text-dim); text-transform: uppercase; letter-spacing: .1em; }
.gc-stat__value { font: var(--gc-fw-black) var(--gc-fs-xl)/1 var(--gc-font-display); }
.gc-stat--cyan .gc-stat__value { color: var(--gc-cyan); } .gc-stat--coin .gc-stat__value { color: var(--gc-coin); }
.gc-stat--lime .gc-stat__value { color: var(--gc-lime); } .gc-stat--hot  .gc-stat__value { color: var(--gc-magenta); }

.gc-achv-grid { display: grid; gap: var(--gc-space-3); grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.gc-achv { display: grid; gap: 6px; justify-items: center; text-align: center; padding: var(--gc-space-3); border-radius: var(--gc-radius-md); background: var(--gc-surface); border: 1px solid var(--gc-border); font-size: 11px; color: var(--gc-text-muted); }
.gc-achv__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: var(--gc-grad-violet); box-shadow: var(--gc-glow-violet); }
.gc-achv--locked { opacity: .45; filter: grayscale(1); }

/* settings list */
.gc-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--gc-border); border-radius: var(--gc-radius-md); overflow: hidden; }
.gc-list > li { display: flex; align-items: center; justify-content: space-between; gap: var(--gc-space-3); min-height: 56px; padding: var(--gc-space-3) var(--gc-space-4); background: var(--gc-surface); }
.gc-list > li + li { border-top: 1px solid var(--gc-border); }

/* ==========================================================================
   9. Terms / long-form text
   ========================================================================== */
.gc-prose { max-width: 72ch; color: var(--gc-text-muted); font-size: var(--gc-fs-md); }
.gc-prose h1, .gc-prose h2, .gc-prose h3 { color: var(--gc-text); font-family: var(--gc-font-display); line-height: 1.2; }
.gc-prose h1 { font-size: var(--gc-fs-3xl); font-weight: var(--gc-fw-black); margin: 0 0 var(--gc-space-3); }
.gc-prose h2 { font-size: var(--gc-fs-xl); margin: var(--gc-space-7) 0 var(--gc-space-3); padding-top: var(--gc-space-5); border-top: 1px solid var(--gc-border); scroll-margin-top: calc(var(--gc-header-h) + 16px); }
.gc-prose h3 { font-size: var(--gc-fs-lg); margin: var(--gc-space-5) 0 var(--gc-space-2); }
.gc-prose p, .gc-prose ul, .gc-prose ol { margin: 0 0 var(--gc-space-4); }
.gc-prose li { margin-bottom: 6px; }
.gc-prose li::marker { color: var(--gc-cyan); }
.gc-prose a { color: var(--gc-cyan); }
.gc-prose strong { color: var(--gc-text); }
.gc-prose table { width: 100%; border-collapse: collapse; font-size: var(--gc-fs-sm); margin-bottom: var(--gc-space-4); }
.gc-prose th, .gc-prose td { padding: 10px; border-bottom: 1px solid var(--gc-border); text-align: start; }
@media (max-width: 640px) { .gc-prose table { display: block; overflow-x: auto; } }
.gc-prose code { font-size: .9em; padding: 2px 6px; border-radius: 6px; background: var(--gc-surface-3); color: var(--gc-text); }
.gc-terms { display: grid; gap: var(--gc-space-5); }
.gc-toc { display: flex; gap: var(--gc-space-2); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--gc-space-2); }
.gc-toc a { flex: none; padding: 8px 14px; border-radius: var(--gc-radius-pill); background: var(--gc-surface); border: 1px solid var(--gc-border); color: var(--gc-text-muted); text-decoration: none; font-size: var(--gc-fs-sm); }
.gc-toc a:hover { color: var(--gc-text); border-color: var(--gc-cyan); }
@media (min-width: 1024px) {
  .gc-terms { grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
  .gc-toc { position: sticky; top: calc(var(--gc-header-h) + 24px); flex-direction: column; overflow: visible; }
  .gc-toc a { border-radius: var(--gc-radius-sm); background: transparent; border-color: transparent; }
  .gc-toc a:hover { background: var(--gc-surface); }
}

/* ==========================================================================
   10. Ad slots — fixed boxes (no CLS), always labelled "Ad"
   ========================================================================== */
.gc-ad-wrap { display: grid; justify-items: center; gap: 4px; margin-block: var(--gc-space-5); }
.gc-ad-wrap__label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--gc-text-dim); }
.gc-ad-slot { overflow: hidden; max-width: 100%; }
.gc-ad-slot--leaderboard { height: 50px; max-width: 320px; }            /* phone: 320x50 box */
@media (min-width: 760px) { .gc-ad-slot--leaderboard { height: 90px; max-width: 728px; } }
.gc-ad-slot--skyscraper { display: none; }                               /* desktop only */
@media (min-width: 1100px) { .gc-ad-slot--skyscraper { display: grid; } }
.gc-ad-slot--rectangle { max-width: 100%; }

/* filled by the mock adapter */
.gc-ad-slot.gc-mock-ad, .gc-ad-slot[data-filled] {
  border-style: solid; border-color: var(--gc-border);
  background: linear-gradient(135deg, rgba(123,92,255,.18), rgba(34,228,255,.08)), var(--gc-bg-2);
  color: var(--gc-text-muted);
}
.gc-ad-slot--interstitial.gc-mock-ad { background: rgba(7,6,15,.96); display: grid; place-items: center; }
.gc-ad-slot--interstitial.gc-mock-ad > div { background: var(--gc-surface); border: 1px solid var(--gc-border-strong); border-radius: var(--gc-radius-xl); box-shadow: var(--gc-shadow-lg); }

/* ==========================================================================
   11. Modal, toasts, empty/error states, auth
   ========================================================================== */
.gc-modal-backdrop { animation: gc-fade .2s ease both; align-items: end; padding: 0; }
.gc-modal {
  position: relative; max-height: 92dvh; overflow-y: auto; padding: var(--gc-space-6) var(--gc-space-5) calc(var(--gc-space-5) + var(--gc-safe-b));
  border-radius: var(--gc-radius-xl) var(--gc-radius-xl) 0 0; width: 100%;
  animation: gc-sheet-up .32s var(--gc-ease) both;
}
.gc-modal__x { position: absolute; top: var(--gc-space-3); inset-inline-end: var(--gc-space-3); width: 40px; min-height: 40px; }
.gc-modal h2, .gc-modal .gc-h2 { font-size: var(--gc-fs-xl); margin-inline-end: 40px; }
@media (min-width: 600px) {
  .gc-modal-backdrop { align-items: center; padding: var(--gc-space-4); }
  .gc-modal { width: min(100%, 480px); border-radius: var(--gc-radius-xl); padding: var(--gc-space-6); animation-name: gc-pop-in; }
  .gc-modal--wide { width: min(100%, 760px); }
}
.gc-auth__switch { text-align: center; font-size: var(--gc-fs-sm); color: var(--gc-text-muted); margin-top: var(--gc-space-4); }
.gc-auth__divider { display: flex; align-items: center; gap: var(--gc-space-3); color: var(--gc-text-dim); font-size: var(--gc-fs-xs); margin-block: var(--gc-space-4); }
.gc-auth__divider::before, .gc-auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--gc-border); }
.gc-check { display: flex; gap: var(--gc-space-3); align-items: start; font-size: var(--gc-fs-sm); color: var(--gc-text-muted); cursor: pointer; }
.gc-check input { width: 20px; height: 20px; accent-color: var(--gc-cyan); margin-top: 2px; flex: none; }

.gc-toasts {
  position: fixed; z-index: var(--gc-z-toast); inset-inline: var(--gc-space-3); bottom: calc(var(--gc-tabbar-h) + var(--gc-safe-b) + var(--gc-space-3));
  display: grid; gap: var(--gc-space-2); justify-items: center; pointer-events: none;
}
.gc-toasts .gc-toast { position: static; pointer-events: auto; max-width: 420px; width: max-content; max-width: 100%; animation: gc-toast-in .35s var(--gc-ease-bounce) both; }
.gc-toast { display: flex; align-items: center; gap: var(--gc-space-2); font-size: var(--gc-fs-sm); transition: opacity .4s, transform .4s var(--gc-ease); }
.gc-toast.is-out { opacity: 0; transform: translateY(12px) scale(.96); }
.gc-toast--coin  { border-color: var(--gc-coin); box-shadow: var(--gc-glow-coin); background: linear-gradient(90deg, rgba(255,200,61,.18), var(--gc-surface-2) 60%); }
.gc-toast--error { border-color: var(--gc-danger); box-shadow: 0 0 0 1px rgba(255,77,109,.5), 0 0 18px rgba(255,77,109,.4); }
@media (min-width: 721px) { .gc-toasts { inset-inline: auto var(--gc-space-5); bottom: var(--gc-space-5); justify-items: end; } }

.gc-state { display: grid; gap: var(--gc-space-4); justify-items: center; text-align: center; padding: var(--gc-space-7) var(--gc-space-5); }
.gc-state__icon { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; font-size: 32px; background: var(--gc-surface-2); border: 1px solid var(--gc-border-strong); box-shadow: var(--gc-glow-violet); }
.gc-state p { margin: 0; max-width: 46ch; }

.gc-divider { height: 1px; background: var(--gc-border); border: 0; margin-block: var(--gc-space-5); }

/* ==========================================================================
   12. Footer
   ========================================================================== */
.gc-footer { margin-top: var(--gc-space-8); padding-block: var(--gc-space-6); border-top: 1px solid var(--gc-border); background: var(--gc-bg-2); font-size: var(--gc-fs-sm); color: var(--gc-text-dim); }
.gc-footer__inner { display: grid; gap: var(--gc-space-4); }
.gc-footer__links { display: flex; flex-wrap: wrap; gap: var(--gc-space-2) var(--gc-space-5); }
.gc-footer a { color: var(--gc-text-muted); text-decoration: none; }
.gc-footer a:hover { color: var(--gc-cyan); }
@media (min-width: 721px) { .gc-footer__inner { grid-template-columns: 1fr auto; align-items: center; } }
body[data-page="play"] .gc-footer { margin-top: var(--gc-space-5); }

/* ==========================================================================
   13. Motion
   ========================================================================== */
/* Entrance animations only MOVE things — content is never invisible, even if an animation
   never runs (screenshots, print, slow devices, reduced motion). */
@keyframes gc-view-in  { from { transform: translateY(10px); } to { transform: none; } }
@keyframes gc-fade     { from { background-color: rgba(4,3,10,0); } }   /* backdrop only */
@keyframes gc-pop      { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes gc-pop-in   { from { transform: scale(.96) translateY(8px); } to { transform: none; } }
@keyframes gc-sheet-up { from { transform: translateY(40px); } to { transform: none; } }
@keyframes gc-toast-in { from { transform: translateY(16px) scale(.96); } to { transform: none; } }
@keyframes gc-float    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes gc-shimmer  { from { background-position: 100% 0; } to { background-position: -200% 0; } }
@keyframes gc-rise     { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes gc-spin-y   { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }

/* stagger-in for grids: add .gc-stagger to the parent */
.gc-stagger > * { animation: gc-view-in .5s var(--gc-ease) both; }
.gc-stagger > :nth-child(2) { animation-delay: .05s; } .gc-stagger > :nth-child(3) { animation-delay: .1s; }
.gc-stagger > :nth-child(4) { animation-delay: .15s; } .gc-stagger > :nth-child(5) { animation-delay: .2s; }
.gc-stagger > :nth-child(6) { animation-delay: .25s; } .gc-stagger > :nth-child(n+7) { animation-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  .gc-view, .gc-stagger > *, .gc-overlay, .gc-modal, .gc-modal-backdrop, .gc-toasts .gc-toast,
  .gc-hero__card, .gc-wallet::after, .gc-skel, .gc-podium__step, .gc-btn--pulse,
  .gc-results__best, .gc-countdown, .gc-header__coin.is-bump, .gc-hud__value.is-bump { animation: none !important; }
  .gc-rank-row:hover, .gc-reward-card:hover { transform: none; }
  .gc-thumb::after, .gc-thumb::before, .gc-reward-card__img::after { transition: none; }
}

/* ==========================================================================
   14. v2 form controls — select, textarea, alerts, tags, roles
   ========================================================================== */
.gc-select {
  appearance: none; -webkit-appearance: none; width: 100%; min-height: 48px; padding: 0 44px 0 var(--gc-space-4);
  background: var(--gc-surface-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2322e4ff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px;
  color: var(--gc-text); border: 1px solid var(--gc-border); border-radius: var(--gc-radius-md);
  font: inherit; font-size: var(--gc-fs-sm); cursor: pointer; transition: border-color var(--gc-dur), box-shadow var(--gc-dur);
}
.gc-select:focus { outline: none; border-color: var(--gc-cyan); box-shadow: var(--gc-glow-cyan); }
.gc-select--pill { border-radius: var(--gc-radius-pill); min-height: 44px; }
.gc-select option { background: var(--gc-surface); color: var(--gc-text); }

.gc-textarea {
  width: 100%; min-height: 120px; padding: 12px var(--gc-space-4); resize: vertical; line-height: 1.5;
  background: var(--gc-surface-3); color: var(--gc-text); border: 1px solid var(--gc-border); border-radius: var(--gc-radius-md); font: inherit;
}
.gc-textarea:focus { outline: none; border-color: var(--gc-cyan); box-shadow: var(--gc-glow-cyan); }

.gc-alert { display: flex; gap: var(--gc-space-3); align-items: flex-start; padding: 12px var(--gc-space-4); border-radius: var(--gc-radius-md); font-size: var(--gc-fs-sm); border: 1px solid rgba(34,228,255,.35); background: rgba(34,228,255,.07); }
.gc-alert::before { content: "i"; flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 900 11px/1 var(--gc-font-display); color: var(--gc-text-on-neon); background: var(--gc-cyan); }
.gc-alert--error   { border-color: rgba(255,77,109,.5); background: rgba(255,77,109,.08); }
.gc-alert--error::before { content: "!"; background: var(--gc-danger); color: #fff; }
.gc-alert--success { border-color: rgba(61,255,160,.45); background: rgba(61,255,160,.07); }
.gc-alert--success::before { content: "✓"; background: var(--gc-success); }

/* small pills on game cards / rows: players, mode, demo */
.gc-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.gc-tag {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--gc-radius-pill);
  font: var(--gc-fw-bold) 10px/1 var(--gc-font-body); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  background: var(--gc-surface-3); color: var(--gc-text-muted); border: 1px solid var(--gc-border);
}
.gc-tag--2p     { color: #ff8fcf; background: rgba(255,46,166,.12); border-color: rgba(255,46,166,.45); }
.gc-tag--online { color: var(--gc-lime); background: rgba(182,255,59,.08); border-color: rgba(182,255,59,.4); }
.gc-tag--online::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.gc-tag--solo   { color: #8feeff; background: rgba(34,228,255,.08); border-color: rgba(34,228,255,.35); }
.gc-badge--demo, .gc-tag--demo { background: transparent; color: var(--gc-coin); border: 1px dashed rgba(255,200,61,.7); }

.gc-role { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--gc-radius-pill); font: var(--gc-fw-bold) 10px/1 var(--gc-font-body); letter-spacing: .08em; text-transform: uppercase; background: var(--gc-surface-3); color: var(--gc-text-muted); }
.gc-role--admin { background: var(--gc-coin); color: var(--gc-text-on-neon); }
.gc-role--mod   { background: var(--gc-violet); color: #fff; }
.gc-role--guest { background: transparent; border: 1px dashed var(--gc-border-strong); }

.gc-btn--danger-solid { --_bg: var(--gc-danger); --_fg: #fff; --_glow: 0 0 0 1px rgba(255,77,109,.6), 0 0 18px rgba(255,77,109,.45); }

/* ==========================================================================
   15. Catalog browsing (50+ games) — sticky bar, chips, sort, shelves, dense grid
   Markup:
   <div class="gc-catalog-bar">
     <label class="gc-search"><input class="gc-input" type="search"></label>
     <div class="gc-catalog-bar__row">
       <div class="gc-chips gc-chips--fade"><button class="gc-chip" aria-pressed="true">All <span class="gc-chip__count">52</span></button>
         <button class="gc-chip gc-chip--2p">⚔ Two-Player</button> <button class="gc-chip gc-chip--mp">◉ Multiplayer</button>…</div>
       <select class="gc-select gc-select--pill gc-sort">…</select>
     </div>
   </div>
   <div class="gc-results-meta"><span><b>52</b> games</span><button class="gc-link">Clear filters</button></div>
   <section class="gc-shelf gc-shelf--featured"><div class="gc-shelf__head"><h2 class="gc-shelf__title">Featured</h2>…</div>
     <div class="gc-rail gc-rail--wide"><a class="gc-spotlight">…</a></div></section>
   <div class="gc-game-grid gc-game-grid--dense">…cards…</div>
   ========================================================================== */
.gc-catalog { display: grid; gap: var(--gc-space-6); }
.gc-catalog-bar {
  position: sticky; top: var(--gc-header-h); z-index: 20; display: grid; gap: var(--gc-space-3);
  margin-inline: calc(-1 * var(--gc-space-3)); padding: var(--gc-space-3);
  background: rgba(7,6,15,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--gc-border); border-radius: var(--gc-radius-lg);
}
.gc-catalog-bar .gc-search .gc-input { min-height: 46px; }
.gc-catalog-bar__row { display: flex; align-items: center; gap: var(--gc-space-2); min-width: 0; }
.gc-catalog-bar__row .gc-chips { flex: 1 1 auto; }
.gc-sort { flex: none; width: auto; max-width: 150px; min-height: 36px; font-size: var(--gc-fs-xs); padding-inline-start: 14px; }
.gc-chips--fade { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-inline-end: 24px; }
.gc-chip__icon { font-size: 14px; line-height: 1; }
.gc-chip__count { min-width: 20px; padding: 1px 6px; border-radius: var(--gc-radius-pill); background: rgba(255,255,255,.08); font: var(--gc-fw-bold) 11px/1.4 var(--gc-font-body); font-variant-numeric: tabular-nums; }
.gc-chip--2p[aria-pressed="true"], .gc-chip--2p.is-active,
.gc-chip--mp[aria-pressed="true"], .gc-chip--mp.is-active { background: var(--gc-magenta); border-color: var(--gc-magenta); box-shadow: var(--gc-glow-magenta); }
@media (min-width: 900px) {
  .gc-catalog-bar { grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); align-items: center; margin-inline: 0; }
  .gc-sort { max-width: 190px; font-size: var(--gc-fs-sm); }
}
.gc-results-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--gc-space-3); flex-wrap: wrap; font-size: var(--gc-fs-sm); color: var(--gc-text-muted); }
.gc-results-meta b { font: var(--gc-fw-black) var(--gc-fs-md)/1 var(--gc-font-num); font-variant-numeric: tabular-nums; color: var(--gc-text); }
.gc-results-meta .gc-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* dense grid for big catalogs: 2 cols phone → 3 tablet → auto-fill desktop (6 at 1440) */
.gc-game-grid--dense { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gc-space-3); }
.gc-game-grid--dense > * { content-visibility: auto; contain-intrinsic-size: auto 230px; }
.gc-game-grid--dense .gc-game-card__desc { display: none; }
.gc-game-grid--dense .gc-game-card__body { padding: 10px 12px 12px; gap: 6px; }
.gc-game-grid--dense .gc-game-card__title { font-size: var(--gc-fs-sm); }
@media (min-width: 560px) { .gc-game-grid--dense { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .gc-game-grid--dense { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--gc-space-4); } }
.gc-game-card--mp { border-color: rgba(255,46,166,.35); }

/* shelves (horizontal rows) */
.gc-shelf { --_accent: var(--gc-cyan); display: grid; gap: var(--gc-space-3); min-width: 0; }
.gc-shelf__head { display: flex; align-items: center; justify-content: space-between; gap: var(--gc-space-3); }
.gc-shelf__title { margin: 0; display: flex; align-items: center; gap: 10px; font: var(--gc-fw-black) var(--gc-fs-lg)/1.1 var(--gc-font-display); text-transform: uppercase; letter-spacing: .02em; }
.gc-shelf__title::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--_accent); box-shadow: 0 0 12px var(--_accent); }
.gc-shelf__sub { margin: 2px 0 0; font-size: var(--gc-fs-sm); color: var(--gc-text-muted); }
.gc-shelf__nav { display: none; gap: 6px; }
.gc-shelf__nav .gc-btn { width: 40px; min-height: 40px; padding: 0; }
@media (hover: hover) and (min-width: 900px) { .gc-shelf__nav { display: flex; } }
.gc-shelf--featured { --_accent: var(--gc-coin); }
.gc-shelf--friends {
  --_accent: var(--gc-magenta); padding: var(--gc-space-4); border-radius: var(--gc-radius-xl);
  background: radial-gradient(520px 220px at 0% 0%, rgba(255,46,166,.2), transparent 70%), var(--gc-bg-2);
  border: 1px solid rgba(255,46,166,.32);
}
@media (min-width: 721px) { .gc-shelf--friends { padding: var(--gc-space-5); } }
.gc-rail--wide { grid-auto-columns: 86%; }
@media (min-width: 640px) { .gc-rail--wide { grid-auto-columns: 440px; } }

/* featured spotlight card */
.gc-spotlight {
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: end; gap: 6px; min-height: 220px;
  padding: var(--gc-space-5); border-radius: var(--gc-radius-xl); color: inherit; text-decoration: none;
  border: 1px solid var(--gc-border-strong); box-shadow: var(--gc-shadow-lg);
  transition: border-color var(--gc-dur), box-shadow var(--gc-dur), transform var(--gc-dur) var(--gc-ease);
}
.gc-spotlight > .gc-thumb { position: absolute; inset: 0; z-index: -2; aspect-ratio: auto; height: 100%; }
.gc-spotlight::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,6,15,0) 25%, rgba(7,6,15,.94)); }
.gc-spotlight__title { margin: 0; font: var(--gc-fw-black) var(--gc-fs-xl)/1.05 var(--gc-font-display); text-transform: uppercase; }
.gc-spotlight__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--gc-fs-sm); color: var(--gc-text-muted); }
.gc-spotlight .gc-badge { position: absolute; top: var(--gc-space-4); inset-inline-start: var(--gc-space-4); }
.gc-spotlight:hover { transform: translateY(-3px); border-color: var(--gc-coin); box-shadow: var(--gc-shadow-lg), var(--gc-glow-coin); }
.gc-spotlight:hover > .gc-thumb::after { transform: scale(1.05); }
@media (min-width: 640px) { .gc-spotlight { min-height: 260px; } }

/* "Play with a friend" compact card */
.gc-duo {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--gc-space-3); align-items: center; padding: 10px;
  border-radius: var(--gc-radius-lg); background: var(--gc-surface); border: 1px solid var(--gc-border); color: inherit; text-decoration: none;
  transition: border-color var(--gc-dur), box-shadow var(--gc-dur), transform var(--gc-dur) var(--gc-ease);
}
.gc-duo .gc-thumb { aspect-ratio: 1; border-radius: var(--gc-radius-md); }
.gc-duo__title { margin: 0; font: var(--gc-fw-bold) var(--gc-fs-sm)/1.2 var(--gc-font-display); }
.gc-duo__text { margin: 2px 0 6px; font-size: var(--gc-fs-xs); color: var(--gc-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-duo:hover { transform: translateY(-2px); border-color: var(--gc-magenta); box-shadow: var(--gc-glow-magenta); }

.gc-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: var(--gc-space-6); }
.gc-pager > a, .gc-pager > button {
  min-width: 40px; height: 40px; padding: 0 10px; display: inline-grid; place-items: center; border-radius: 12px;
  background: var(--gc-surface); border: 1px solid var(--gc-border); color: var(--gc-text-muted); text-decoration: none; cursor: pointer;
  font: var(--gc-fw-bold) var(--gc-fs-sm)/1 var(--gc-font-num); font-variant-numeric: tabular-nums;
}
.gc-pager > [aria-current="page"] { background: var(--gc-cyan); border-color: var(--gc-cyan); color: var(--gc-text-on-neon); box-shadow: var(--gc-glow-cyan); }

/* ==========================================================================
   16. Auth — login / register page, password field, account menu, guest bar
   Markup (page):
   <section class="gc-auth"><div class="gc-auth__shell">
     <aside class="gc-auth__art">…eyebrow, title, .gc-ticks…</aside>
     <form class="gc-auth__form"><div class="gc-auth__head"><h1 class="gc-auth__title">…</h1><p class="gc-auth__sub">…</p></div>
       <div class="gc-tabs">Log in | Sign up</div> …fields… <button class="gc-btn gc-btn--primary gc-btn--block">…</button></form>
   </div></section>
   Header menu: <details class="gc-menu"><summary class="gc-menu__trigger">avatar + name</summary><div class="gc-menu__panel">…</div></details>
   ========================================================================== */
.gc-auth { display: grid; place-items: center; min-height: calc(100dvh - var(--gc-header-h) - var(--gc-tabbar-h)); padding: var(--gc-space-5) var(--gc-space-3); }
.gc-auth__shell {
  width: min(100%, 980px); display: grid; overflow: hidden; border-radius: var(--gc-radius-xl);
  background: var(--gc-surface); border: 1px solid var(--gc-border-strong); box-shadow: var(--gc-shadow-lg), var(--gc-glow-violet);
}
.gc-auth__art {
  display: none; position: relative; isolation: isolate; align-content: end; gap: var(--gc-space-4); padding: var(--gc-space-7);
  background: url("img/hero-v3.webp") 75% 55% / cover no-repeat;
}
.gc-auth__art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,6,15,.15), rgba(7,6,15,.92) 75%); }
.gc-auth__art h2 { margin: 0; font: var(--gc-fw-black) clamp(1.8rem, 3vw, 2.6rem)/1.02 var(--gc-font-display); text-transform: uppercase; }
.gc-auth__art .gc-ticks { margin: 0; }
.gc-auth__form { display: grid; gap: var(--gc-space-4); align-content: start; padding: var(--gc-space-6) var(--gc-space-5); min-width: 0; }
.gc-auth__form .gc-field { margin: 0; }
.gc-auth__form > .gc-tabs { display: flex; }
.gc-auth__form > .gc-tabs .gc-tab { flex: 1; }
.gc-auth__head { display: grid; gap: 6px; }
.gc-auth__title { margin: 0; font: var(--gc-fw-black) var(--gc-fs-2xl)/1.1 var(--gc-font-display); }
.gc-auth__sub { margin: 0; color: var(--gc-text-muted); font-size: var(--gc-fs-sm); }
.gc-auth__row { display: flex; align-items: center; justify-content: space-between; gap: var(--gc-space-3); flex-wrap: wrap; font-size: var(--gc-fs-sm); }
.gc-auth__switch { margin: 0; }
@media (min-width: 860px) {
  .gc-auth { padding-block: var(--gc-space-7); }
  .gc-auth__shell { grid-template-columns: 1fr 1fr; }
  .gc-auth__art { display: grid; }
  .gc-auth__form { padding: var(--gc-space-7); }
}
.gc-modal .gc-auth__form { padding: 0; }

.gc-pass { position: relative; }
.gc-pass .gc-input { padding-inline-end: 76px; }
.gc-pass__toggle {
  position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); min-height: 36px; padding: 0 12px;
  border: 0; border-radius: var(--gc-radius-pill); background: transparent; color: var(--gc-cyan); cursor: pointer;
  font: var(--gc-fw-bold) var(--gc-fs-xs)/1 var(--gc-font-body); letter-spacing: .06em; text-transform: uppercase;
}
.gc-pass__toggle:hover { background: var(--gc-surface-2); }
.gc-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.gc-meter > span { height: 4px; border-radius: 2px; background: var(--gc-surface-3); transition: background var(--gc-dur); }
.gc-meter[data-level="1"] > span:nth-child(-n+1) { background: var(--gc-danger); }
.gc-meter[data-level="2"] > span:nth-child(-n+2) { background: var(--gc-warning); }
.gc-meter[data-level="3"] > span:nth-child(-n+3) { background: var(--gc-lime); }
.gc-meter[data-level="4"] > span { background: var(--gc-success); box-shadow: 0 0 8px rgba(61,255,160,.5); }

/* account dropdown (works as <details> with no JS, or add .is-open) */
.gc-menu { position: relative; }
.gc-menu > summary { list-style: none; }
.gc-menu > summary::-webkit-details-marker { display: none; }
.gc-menu__trigger {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 10px 4px 4px; cursor: pointer;
  border-radius: var(--gc-radius-pill); border: 1px solid transparent; background: transparent; color: var(--gc-text); font: inherit; font-weight: 600;
  transition: background var(--gc-dur), border-color var(--gc-dur);
}
.gc-menu__trigger::after { content: "▾"; font-size: 12px; color: var(--gc-text-dim); transition: transform var(--gc-dur); }
.gc-menu__trigger:hover, .gc-menu[open] > .gc-menu__trigger, .gc-menu.is-open > .gc-menu__trigger { background: var(--gc-surface-2); border-color: var(--gc-border-strong); }
.gc-menu[open] > .gc-menu__trigger::after, .gc-menu.is-open > .gc-menu__trigger::after { transform: rotate(180deg); }
.gc-menu__panel {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: calc(var(--gc-z-header) + 5);
  width: min(288px, calc(100vw - 24px)); padding: 8px; transform-origin: top right;
  background: rgba(20,17,42,.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--gc-border-strong); border-radius: var(--gc-radius-lg); box-shadow: var(--gc-shadow-lg), var(--gc-glow-violet);
  animation: gc-pop-in .18s var(--gc-ease) both;
}
.gc-menu:not([open]):not(.is-open) > .gc-menu__panel { display: none; }
.gc-menu__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--gc-border); }
.gc-menu__name { display: flex; align-items: center; gap: 6px; font-weight: 700; min-width: 0; }
.gc-menu__name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-menu__sub { font-size: var(--gc-fs-xs); color: var(--gc-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; cursor: pointer;
  border: 0; border-radius: var(--gc-radius-sm); background: transparent; color: var(--gc-text-muted);
  font: inherit; font-size: var(--gc-fs-sm); text-align: start; text-decoration: none;
}
.gc-menu__item:hover, .gc-menu__item:focus-visible { background: var(--gc-surface-2); color: var(--gc-text); }
.gc-menu__ic { width: 20px; text-align: center; color: var(--gc-cyan); }
.gc-menu__item .gc-coin { margin-inline-start: auto; font-size: 12px; }
.gc-menu__item--danger { color: var(--gc-danger); }
.gc-menu__item--danger .gc-menu__ic { color: inherit; }
.gc-menu__item--danger:hover { background: rgba(255,77,109,.12); color: #ff8aa0; }
.gc-menu__sep { height: 1px; margin: 6px 4px; border: 0; background: var(--gc-border); }

.gc-guest-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gc-space-3); flex-wrap: wrap;
  padding: 10px var(--gc-space-4); border-radius: var(--gc-radius-md); font-size: var(--gc-fs-sm);
  background: linear-gradient(90deg, rgba(34,228,255,.12), rgba(123,92,255,.12)); border: 1px solid rgba(34,228,255,.35);
}

/* ==========================================================================
   17. Multiplayer — lobby (create / join), room, seats, turn, rematch, opponent left
   Seat colours: P1 = cyan, P2 = magenta (same as in-game pieces).
   ========================================================================== */
.gc-mp { display: grid; gap: var(--gc-space-4); }
@media (min-width: 900px) { .gc-mp { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } }
.gc-mp__card { display: grid; gap: var(--gc-space-4); }
.gc-mp__title { margin: 0; display: flex; align-items: center; gap: 10px; font: var(--gc-fw-black) var(--gc-fs-xl)/1.1 var(--gc-font-display); }
.gc-mp__title > span[aria-hidden] { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; background: var(--gc-grad-violet); }

/* radio tiles (mode / game / seats) */
.gc-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gc-option {
  position: relative; display: grid; gap: 4px; padding: 14px; cursor: pointer; min-width: 0;
  border-radius: var(--gc-radius-md); background: var(--gc-surface-2); border: 1px solid var(--gc-border);
  transition: border-color var(--gc-dur), box-shadow var(--gc-dur), background var(--gc-dur);
}
.gc-option input { position: absolute; opacity: 0; pointer-events: none; }
.gc-option__icon { font-size: 22px; line-height: 1; }
.gc-option__title { font: var(--gc-fw-bold) var(--gc-fs-sm)/1.2 var(--gc-font-display); }
.gc-option__text { font-size: var(--gc-fs-xs); color: var(--gc-text-dim); }
.gc-option:hover { border-color: var(--gc-border-strong); }
.gc-option:has(input:checked), .gc-option.is-selected { border-color: var(--gc-cyan); background: rgba(34,228,255,.08); box-shadow: var(--gc-glow-cyan); }
.gc-option:has(input:focus-visible) { outline: 2px solid var(--gc-cyan); outline-offset: 2px; }
.gc-option:has(input:disabled) { opacity: .5; cursor: not-allowed; }

/* room code */
.gc-code { display: flex; align-items: center; gap: var(--gc-space-3); flex-wrap: wrap; }
.gc-code__chars { display: flex; gap: 6px; }
.gc-code__chars > span {
  width: 44px; height: 56px; display: grid; place-items: center; border-radius: 12px;
  background: var(--gc-bg-2); border: 1px solid var(--gc-border-strong); box-shadow: inset 0 -3px 0 rgba(0,0,0,.35);
  font: var(--gc-fw-black) 26px/1 var(--gc-font-num); color: var(--gc-cyan); text-shadow: var(--gc-text-glow);
}
.gc-code__copy.is-copied { --_bg: var(--gc-lime); --_fg: var(--gc-text-on-neon); --_glow: var(--gc-glow-lime); border-color: transparent; }
.gc-code__hint { width: 100%; margin: 0; font-size: var(--gc-fs-xs); color: var(--gc-text-dim); }
@media (max-width: 380px) { .gc-code__chars > span { width: 38px; height: 50px; font-size: 22px; } }

.gc-join { display: grid; gap: 10px; }
@media (min-width: 480px) { .gc-join { grid-template-columns: minmax(0, 1fr) auto; } }
.gc-code-input {
  min-height: 56px; text-align: center; letter-spacing: .35em; padding-inline-start: calc(var(--gc-space-4) + .35em); text-transform: uppercase;
  font: var(--gc-fw-black) 24px/1 var(--gc-font-num);
}
.gc-code-input::placeholder { letter-spacing: .35em; }

.gc-room-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gc-room-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--gc-space-3); align-items: center; padding: 10px 12px; border-radius: var(--gc-radius-md); background: var(--gc-surface); border: 1px solid var(--gc-border); }
.gc-room-row .gc-thumb { width: 48px; aspect-ratio: 1; border-radius: 10px; }
.gc-room-row__title { display: block; font-weight: 700; font-size: var(--gc-fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-room-row__sub { display: block; font-size: var(--gc-fs-xs); color: var(--gc-text-dim); }

/* room screen */
.gc-room { display: grid; gap: var(--gc-space-4); }
.gc-room__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gc-space-3); }
.gc-room__title { margin: 0; font: var(--gc-fw-black) var(--gc-fs-xl)/1.1 var(--gc-font-display); text-transform: uppercase; }
.gc-room__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.gc-room__actions .gc-btn { flex: 1 1 160px; }

.gc-seats { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 10px; }
.gc-seats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gc-vs {
  align-self: center; font: var(--gc-fw-black) var(--gc-fs-xl)/1 var(--gc-font-display); font-style: italic;
  background: var(--gc-grad-hot); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 12px rgba(255,46,166,.5));
}
.gc-seat {
  --_c: var(--gc-border-strong); position: relative; min-width: 0; display: grid; justify-items: center; align-content: start; gap: 8px;
  padding: var(--gc-space-5) var(--gc-space-3) var(--gc-space-4); text-align: center;
  border-radius: var(--gc-radius-lg); background: var(--gc-surface); border: 1px solid var(--_c);
  transition: border-color var(--gc-dur), box-shadow var(--gc-dur), opacity var(--gc-dur);
}
.gc-seat .gc-avatar { width: 64px; height: 64px; font-size: 26px; }
.gc-seat__label { max-width: 100%; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--gc-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-seat__state { max-width: 100%; text-align: start; }
.gc-seat__name { max-width: 100%; font: var(--gc-fw-bold) var(--gc-fs-sm)/1.2 var(--gc-font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-seat__state {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--gc-radius-pill);
  font: var(--gc-fw-bold) 11px/1.2 var(--gc-font-body); letter-spacing: .04em; background: var(--gc-surface-3); color: var(--gc-warning);
}
.gc-seat__state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.gc-seat--p1 .gc-avatar { box-shadow: 0 0 0 2px var(--gc-bg), 0 0 0 4px var(--gc-cyan); }
.gc-seat--p2 .gc-avatar { box-shadow: 0 0 0 2px var(--gc-bg), 0 0 0 4px var(--gc-magenta); }
.gc-seat--ready { --_c: rgba(182,255,59,.75); box-shadow: var(--gc-glow-lime); }
.gc-seat--ready .gc-seat__state { color: var(--gc-lime); background: rgba(182,255,59,.1); }
.gc-seat--me::after {
  content: "You"; position: absolute; top: 8px; inset-inline-end: 8px; padding: 2px 8px; border-radius: var(--gc-radius-pill);
  font: var(--gc-fw-bold) 10px/1.3 var(--gc-font-body); text-transform: uppercase; letter-spacing: .06em; background: var(--gc-cyan); color: var(--gc-text-on-neon);
}
.gc-seat--empty { border-style: dashed; background: transparent; }
.gc-seat--empty .gc-avatar { background: var(--gc-surface-2); color: var(--gc-text-dim); box-shadow: none; }
.gc-seat--empty .gc-seat__name { color: var(--gc-text-dim); }
.gc-seat--empty .gc-seat__state { color: var(--gc-text-muted); }
.gc-seat--empty .gc-seat__state::before { animation: gc-blink 1.2s ease-in-out infinite; }
.gc-seat--left { --_c: rgba(255,77,109,.6); opacity: .8; }
.gc-seat--left .gc-avatar { filter: saturate(.35) brightness(.7); }
.gc-seat--left .gc-seat__state { color: var(--gc-danger); background: rgba(255,77,109,.1); }
.gc-seat--turn { --_c: var(--gc-cyan); box-shadow: var(--gc-glow-cyan); }
@media (max-width: 420px) {
  .gc-seat { padding: var(--gc-space-4) 8px var(--gc-space-3); }
  .gc-seat .gc-avatar { width: 52px; height: 52px; font-size: 22px; }
  .gc-vs { font-size: var(--gc-fs-lg); }
}

/* in-match bar: P1 score · turn · P2 score */
.gc-matchbar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--gc-radius-md); background: rgba(7,6,15,.78); border: 1px solid var(--gc-border); }
.gc-matchbar__p { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gc-matchbar__p--p2 { flex-direction: row-reverse; text-align: end; }
.gc-matchbar__p .gc-avatar { width: 30px; height: 30px; font-size: 13px; }
.gc-matchbar__name { min-width: 0; font-size: var(--gc-fs-sm); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-matchbar__score { margin-inline-start: auto; font: var(--gc-fw-black) 22px/1 var(--gc-font-num); font-variant-numeric: tabular-nums; color: var(--gc-cyan); }
.gc-matchbar__p--p2 .gc-matchbar__score { margin-inline: 0 auto; color: var(--gc-magenta); }
.gc-matchbar__p.is-turn .gc-avatar { box-shadow: 0 0 0 2px var(--gc-bg), 0 0 0 4px var(--gc-cyan), 0 0 16px var(--gc-cyan); }
.gc-matchbar__p--p2.is-turn .gc-avatar { box-shadow: 0 0 0 2px var(--gc-bg), 0 0 0 4px var(--gc-magenta), 0 0 16px var(--gc-magenta); }
@media (max-width: 420px) { .gc-matchbar__name { display: none; } }

/* turn indicator */
.gc-turn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; padding: 6px 16px; white-space: nowrap;
  border-radius: var(--gc-radius-pill); background: var(--gc-surface-2); border: 1px solid var(--gc-border); color: var(--gc-text-muted);
  font: var(--gc-fw-black) var(--gc-fs-xs)/1 var(--gc-font-display); letter-spacing: .06em; text-transform: uppercase;
  transition: background var(--gc-dur), color var(--gc-dur), box-shadow var(--gc-dur);
}
.gc-turn__dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.gc-turn__timer { font-family: var(--gc-font-num); font-variant-numeric: tabular-nums; opacity: .85; }
.gc-turn--mine { background: var(--gc-cyan); border-color: var(--gc-cyan); color: var(--gc-text-on-neon); box-shadow: var(--gc-glow-cyan); }
.gc-turn--mine .gc-turn__dot { box-shadow: none; animation: gc-blink 1s ease-in-out infinite; }
.gc-turn--theirs { color: #ff8fcf; background: rgba(255,46,166,.1); border-color: rgba(255,46,166,.5); }

/* status banners: waiting, reconnecting, opponent left */
.gc-banner { display: flex; align-items: center; gap: var(--gc-space-3); flex-wrap: wrap; padding: 12px var(--gc-space-4); border-radius: var(--gc-radius-md); font-size: var(--gc-fs-sm); background: rgba(34,228,255,.07); border: 1px solid rgba(34,228,255,.35); }
.gc-banner__icon { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; background: rgba(34,228,255,.15); }
.gc-banner__body { flex: 1 1 200px; min-width: 0; }
.gc-banner__body b { display: block; }
.gc-banner__body span { color: var(--gc-text-muted); }
.gc-banner--warn { background: rgba(255,176,46,.08); border-color: rgba(255,176,46,.45); }
.gc-banner--warn .gc-banner__icon { background: rgba(255,176,46,.16); }
.gc-banner--danger { background: rgba(255,77,109,.08); border-color: rgba(255,77,109,.5); }
.gc-banner--danger .gc-banner__icon { background: rgba(255,77,109,.16); }
.gc-dots { display: inline-flex; gap: 3px; vertical-align: middle; }
.gc-dots > i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: gc-blink 1.2s ease-in-out infinite; }
.gc-dots > i:nth-child(2) { animation-delay: .2s; }
.gc-dots > i:nth-child(3) { animation-delay: .4s; }

/* match result + rematch */
.gc-outcome {
  --_c: var(--gc-violet); display: grid; justify-items: center; gap: var(--gc-space-3); text-align: center; padding: var(--gc-space-6) var(--gc-space-5);
  border-radius: var(--gc-radius-xl); border: 1px solid color-mix(in srgb, var(--_c) 55%, transparent);
  background: radial-gradient(420px 200px at 50% 0%, color-mix(in srgb, var(--_c) 28%, transparent), transparent 70%), var(--gc-surface);
}
.gc-outcome--win  { --_c: var(--gc-lime); }
.gc-outcome--lose { --_c: var(--gc-magenta); }
.gc-outcome--draw { --_c: var(--gc-violet); }
.gc-outcome__label { font: var(--gc-fw-black) clamp(2.2rem, 9vw, 3.5rem)/1 var(--gc-font-display); text-transform: uppercase; color: var(--_c); text-shadow: 0 0 30px color-mix(in srgb, var(--_c) 60%, transparent); }
.gc-outcome__score { font: var(--gc-fw-black) var(--gc-fs-xl)/1 var(--gc-font-num); font-variant-numeric: tabular-nums; }
.gc-outcome__score .p1 { color: var(--gc-cyan); } .gc-outcome__score .p2 { color: var(--gc-magenta); }
.gc-outcome__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.gc-outcome__actions .gc-btn { flex: 1 1 150px; }
.gc-rematch-status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--gc-fs-sm); color: var(--gc-text-muted); }
.gc-rematch-status.is-ready { color: var(--gc-lime); }

@keyframes gc-blink { 50% { opacity: .25; } }

/* ==========================================================================
   18. Admin panel — sidebar, toolbar, KPIs, data tables, editors, drawer, confirm
   Markup: <div class="gc-admin"><nav class="gc-admin__nav">…</nav><main class="gc-admin__main">…</main></div>
   Tables: add .gc-table--stack + data-label="…" on each <td> so rows turn into cards under 720px.
   ========================================================================== */
.gc-admin { grid-template-columns: minmax(0, 1fr); min-height: calc(100dvh - var(--gc-header-h)); }
.gc-admin__nav {
  position: sticky; top: var(--gc-header-h); z-index: 15; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  padding: 8px var(--gc-space-3); border-inline-end: 0; border-bottom: 1px solid var(--gc-border);
  background: rgba(13,11,26,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.gc-admin__nav a { flex: none; align-items: center; gap: 8px; padding: 8px 14px; white-space: nowrap; font-size: var(--gc-fs-sm); font-weight: 600; }
.gc-admin__nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--gc-cyan); }
.gc-admin__ic { width: 18px; text-align: center; }
.gc-admin__count { min-width: 22px; padding: 1px 7px; border-radius: var(--gc-radius-pill); background: var(--gc-magenta); color: #fff; font: var(--gc-fw-bold) 11px/1.4 var(--gc-font-body); text-align: center; }
.gc-admin__brand, .gc-admin__navlabel { display: none; }
@media (min-width: 960px) {
  .gc-admin { grid-template-columns: 248px minmax(0, 1fr); }
  .gc-admin__nav {
    flex-direction: column; overflow: visible; align-self: start; height: calc(100dvh - var(--gc-header-h));
    padding: var(--gc-space-5) var(--gc-space-3); border-bottom: 0; border-inline-end: 1px solid var(--gc-border); background: var(--gc-bg-2);
  }
  .gc-admin__nav a { padding: 10px 14px; }
  .gc-admin__nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--gc-cyan); }
  .gc-admin__count { margin-inline-start: auto; }
  .gc-admin__brand { display: flex; align-items: center; gap: 10px; padding: 0 14px var(--gc-space-4); font: var(--gc-fw-black) var(--gc-fs-sm)/1 var(--gc-font-display); text-transform: uppercase; letter-spacing: .04em; }
  .gc-admin__navlabel { display: block; margin: var(--gc-space-4) 14px 6px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gc-text-dim); }
}
.gc-admin__main { min-width: 0; display: grid; gap: var(--gc-space-5); align-content: start; padding: var(--gc-space-5) var(--gc-space-4) var(--gc-space-8); }
@media (min-width: 960px) { .gc-admin__main { padding: var(--gc-space-6) var(--gc-space-7) var(--gc-space-8); } }
.gc-admin__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--gc-space-3); }
.gc-admin__crumbs { margin: 0 0 4px; font-size: var(--gc-fs-xs); color: var(--gc-text-dim); }
.gc-admin__title { margin: 0; font: var(--gc-fw-black) var(--gc-fs-2xl)/1.1 var(--gc-font-display); }
.gc-admin__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.gc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gc-space-3); }
@media (min-width: 1100px) { .gc-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gc-space-4); } }
.gc-kpi { --_k: var(--gc-cyan); position: relative; overflow: hidden; min-width: 0; }
.gc-kpi::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--_k); box-shadow: 0 0 12px var(--_k); }
.gc-kpi--coin { --_k: var(--gc-coin); } .gc-kpi--hot { --_k: var(--gc-magenta); } .gc-kpi--lime { --_k: var(--gc-lime); }
.gc-kpi__value { font-family: var(--gc-font-num); font-weight: var(--gc-fw-black); font-size: var(--gc-fs-xl); }
@media (min-width: 721px) { .gc-kpi__value { font-size: var(--gc-fs-2xl); } }

.gc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gc-toolbar .gc-search { flex: 1 1 240px; min-width: 0; }
.gc-toolbar .gc-search .gc-input { min-height: 44px; }
.gc-toolbar .gc-select { flex: 1 1 140px; width: auto; max-width: 200px; min-height: 44px; }
.gc-bulkbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: var(--gc-radius-md); font-size: var(--gc-fs-sm); background: rgba(123,92,255,.14); border: 1px solid rgba(123,92,255,.5); }
.gc-bulkbar b { font-family: var(--gc-font-num); }

.gc-panel { min-width: 0; background: var(--gc-surface); border: 1px solid var(--gc-border); border-radius: var(--gc-radius-lg); overflow: hidden; }
.gc-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--gc-space-3); flex-wrap: wrap; padding: 14px var(--gc-space-4); border-bottom: 1px solid var(--gc-border); }
.gc-panel__title { margin: 0; font: var(--gc-fw-bold) var(--gc-fs-md)/1.2 var(--gc-font-display); }
.gc-panel__body { padding: var(--gc-space-4); }
.gc-panel__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--gc-space-3); flex-wrap: wrap; padding: 10px var(--gc-space-4); border-top: 1px solid var(--gc-border); font-size: var(--gc-fs-xs); color: var(--gc-text-dim); }
.gc-panel__foot .gc-pager { margin: 0; }

.gc-table th { position: sticky; top: 0; z-index: 1; background: var(--gc-surface); white-space: nowrap; }
.gc-table td { vertical-align: middle; }
.gc-table tr.is-selected td { background: rgba(34,228,255,.06); }
.gc-table th.is-num, .gc-table td.is-num { text-align: end; font-variant-numeric: tabular-nums; }
.gc-table td.is-num { font-family: var(--gc-font-num); font-weight: var(--gc-fw-bold); }
.gc-table input[type="checkbox"], .gc-check-sm { width: 18px; height: 18px; accent-color: var(--gc-cyan); }
.gc-cell-user, .gc-cell-game { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gc-cell-user .gc-avatar { width: 32px; height: 32px; font-size: 13px; }
.gc-cell-game .gc-thumb { flex: none; width: 52px; border-radius: 8px; }
.gc-cell-user > div > b, .gc-cell-game > div > b { display: block; font-weight: 600; color: var(--gc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-cell-user > div > span, .gc-cell-game > div > span { display: block; font-size: var(--gc-fs-xs); color: var(--gc-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-cell-user > div, .gc-cell-game > div { min-width: 0; }
.gc-row-actions { display: flex; justify-content: flex-end; gap: 4px; }
.gc-row-actions .gc-btn { width: 36px; min-height: 36px; padding: 0; font-size: var(--gc-fs-sm); }
@media (max-width: 719px) {
  .gc-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .gc-table--stack, .gc-table--stack tbody, .gc-table--stack tr, .gc-table--stack td { display: block; width: 100%; }
  .gc-table--stack tr { display: grid; gap: 8px; padding: 14px var(--gc-space-4); border-bottom: 1px solid var(--gc-border); }
  .gc-table--stack td { display: flex; align-items: center; justify-content: space-between; gap: var(--gc-space-3); min-width: 0; padding: 0; border: 0; text-align: end; }
  .gc-table--stack td::before { content: attr(data-label); flex: none; font: 500 11px/1.2 var(--gc-font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--gc-text-dim); text-align: start; }
  .gc-table--stack td.is-primary { justify-content: flex-start; text-align: start; }
  .gc-table--stack td.is-primary::before, .gc-table--stack td.is-check::before { display: none; }
  .gc-table--stack td.is-check { position: absolute; width: auto; }
  .gc-table--stack tr:has(td.is-check) { position: relative; padding-inline-start: 46px; }
  .gc-table--stack tr:has(td.is-check) td.is-check { inset-inline-start: var(--gc-space-4); top: 18px; }
  .gc-table--stack tbody tr:hover td, .gc-table--stack tr.is-selected td { background: transparent; }
  .gc-table--stack tr.is-selected { background: rgba(34,228,255,.06); box-shadow: inset 3px 0 0 var(--gc-cyan); }
}

/* editors */
.gc-editor { display: grid; gap: var(--gc-space-4); }
@media (min-width: 1100px) { .gc-editor { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } .gc-editor__aside { position: sticky; top: calc(var(--gc-header-h) + 16px); } }
.gc-editor__main, .gc-editor__aside { display: grid; gap: var(--gc-space-4); min-width: 0; }
.gc-fieldset { margin: 0; min-width: 0; padding: var(--gc-space-5); border: 1px solid var(--gc-border); border-radius: var(--gc-radius-lg); background: var(--gc-surface); }
.gc-fieldset > legend { padding: 0 8px; font: var(--gc-fw-bold) var(--gc-fs-xs)/1 var(--gc-font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--gc-text); }
.gc-form-grid { display: grid; gap: 0 var(--gc-space-4); }
@media (min-width: 640px) { .gc-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gc-field--full { grid-column: 1 / -1; }
.gc-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--gc-space-4); padding: 14px 0; border-bottom: 1px solid var(--gc-border); }
.gc-toggle-row:last-child { border-bottom: 0; padding-bottom: 0; }
.gc-toggle-row:first-of-type { padding-top: 0; }
.gc-toggle-row__text { min-width: 0; }
.gc-toggle-row__text b { display: block; font-size: var(--gc-fs-sm); font-weight: 600; }
.gc-toggle-row__text span { font-size: var(--gc-fs-xs); color: var(--gc-text-dim); }
.gc-toggle-row .gc-switch { flex: none; }
.gc-toggle-row--locked .gc-switch { opacity: .55; cursor: not-allowed; }
.gc-drop { display: grid; place-items: center; gap: 6px; padding: var(--gc-space-5); border: 2px dashed var(--gc-border-strong); border-radius: var(--gc-radius-lg); background: var(--gc-bg-2); color: var(--gc-text-dim); font-size: var(--gc-fs-sm); text-align: center; cursor: pointer; transition: border-color var(--gc-dur), color var(--gc-dur); }
.gc-drop:hover { border-color: var(--gc-cyan); color: var(--gc-text); }
.gc-savebar {
  position: sticky; bottom: calc(var(--gc-tabbar-h) + var(--gc-safe-b) + 8px); z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: var(--gc-space-3); flex-wrap: wrap;
  padding: 10px 14px; border-radius: var(--gc-radius-lg); background: rgba(28,24,56,.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--gc-border-strong); box-shadow: var(--gc-shadow-lg);
}
@media (min-width: 721px) { .gc-savebar { bottom: var(--gc-space-4); } }
.gc-savebar__msg { font-size: var(--gc-fs-sm); color: var(--gc-text-muted); }
.gc-savebar__msg.is-dirty::before { content: "●"; margin-inline-end: 6px; color: var(--gc-warning); }

/* moderation report card */
.gc-report { display: grid; gap: 8px; padding: 14px var(--gc-space-4); border-radius: var(--gc-radius-md); background: var(--gc-surface); border: 1px solid var(--gc-border); border-inline-start: 3px solid var(--gc-warning); }
.gc-report__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: var(--gc-fs-sm); }
.gc-report p { margin: 0; font-size: var(--gc-fs-sm); color: var(--gc-text-muted); }

/* side drawer (edit a row) — bottom sheet on phones */
.gc-drawer {
  position: fixed; z-index: var(--gc-z-modal); inset: auto 0 0 0; max-height: 92dvh; overflow-y: auto;
  padding: var(--gc-space-5) var(--gc-space-5) calc(var(--gc-space-5) + var(--gc-safe-b));
  background: var(--gc-surface); border-top: 1px solid var(--gc-border-strong); border-radius: var(--gc-radius-xl) var(--gc-radius-xl) 0 0;
  box-shadow: var(--gc-shadow-lg); animation: gc-sheet-up .3s var(--gc-ease) both;
}
.gc-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--gc-space-3); margin-bottom: var(--gc-space-4); }
.gc-drawer__head h2 { margin: 0; font: var(--gc-fw-black) var(--gc-fs-xl)/1.1 var(--gc-font-display); }
@media (min-width: 860px) {
  .gc-drawer { inset: 0 0 0 auto; width: min(520px, 100%); max-height: none; border-radius: 0; border-top: 0; border-inline-start: 1px solid var(--gc-border-strong); animation-name: gc-drawer-in; }
}
@keyframes gc-drawer-in { from { transform: translateX(40px); } to { transform: none; } }

/* confirm dialog (inside .gc-modal) */
.gc-modal--danger { border-color: rgba(255,77,109,.55); box-shadow: var(--gc-shadow-lg), 0 0 0 1px rgba(255,77,109,.3), 0 0 40px rgba(255,77,109,.2); }
.gc-confirm { display: grid; justify-items: center; gap: var(--gc-space-4); text-align: center; }
.gc-confirm__icon { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font: var(--gc-fw-black) 28px/1 var(--gc-font-display); color: var(--gc-danger); background: rgba(255,77,109,.12); border: 1px solid rgba(255,77,109,.45); box-shadow: 0 0 24px rgba(255,77,109,.3); }
.gc-confirm__icon--info { color: var(--gc-cyan); background: rgba(34,228,255,.12); border-color: rgba(34,228,255,.45); box-shadow: 0 0 24px rgba(34,228,255,.3); }
.gc-confirm__title { margin: 0; font: var(--gc-fw-black) var(--gc-fs-xl)/1.15 var(--gc-font-display); }
.gc-confirm__text { margin: 0; max-width: 40ch; font-size: var(--gc-fs-sm); color: var(--gc-text-muted); }
.gc-confirm .gc-field { width: 100%; margin: 0; text-align: start; }
.gc-confirm__actions { display: flex; flex-direction: column-reverse; gap: 10px; width: 100%; }
.gc-confirm__actions .gc-btn { flex: 1; }
@media (min-width: 480px) { .gc-confirm__actions { flex-direction: row; } }

@media (prefers-reduced-motion: reduce) {
  .gc-menu__panel, .gc-drawer, .gc-dots > i, .gc-turn--mine .gc-turn__dot, .gc-seat--empty .gc-seat__state::before { animation: none !important; }
  .gc-spotlight:hover, .gc-duo:hover { transform: none; }
}

/* ==========================================================================
   19. Discovery home (Poki-style) — featured carousel, tile grid, instant search
   Markup:
   <section class="gc-carousel" aria-roledescription="carousel">
     <div class="gc-carousel__track">
       <article class="gc-slide"><img class="gc-slide__art" src="design/img/8-ball-pool.webp" alt="">
         <div class="gc-slide__body"><span class="gc-eyebrow">Featured</span><h2 class="gc-slide__title">8-Ball Pool</h2>
           <div class="gc-tags">…</div><a class="gc-btn gc-btn--primary gc-btn--lg">▶ Play</a></div></article>…
     </div>
     <div class="gc-carousel__dots"><button aria-current="true"></button>…</div>
   </section>
   Tiles: <div class="gc-tile-grid"><a class="gc-tile gc-tile--xl"><div class="gc-thumb" data-game="…"></div><span class="gc-tile__title">…</span></a>…</div>
   ========================================================================== */
.gc-discover { display: grid; gap: var(--gc-space-6); padding-block: var(--gc-space-4) var(--gc-space-7); }
@media (min-width: 721px) { .gc-discover { gap: var(--gc-space-7); padding-block: var(--gc-space-5) var(--gc-space-8); } }

.gc-carousel { position: relative; min-width: 0; }
.gc-carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 92%; gap: var(--gc-space-3);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  scroll-padding-inline: var(--gc-space-1);
}
.gc-carousel__track::-webkit-scrollbar { display: none; }
.gc-slide {
  position: relative; isolation: isolate; overflow: hidden; scroll-snap-align: center; min-height: 300px;
  display: grid; align-content: end; padding: var(--gc-space-5); border-radius: var(--gc-radius-xl);
  border: 1px solid var(--gc-border-strong); box-shadow: var(--gc-shadow-lg); background: var(--gc-surface);
}
.gc-slide__art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--gc-ease); }
.gc-slide::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,6,15,0) 0%, rgba(7,6,15,.15) 28%, rgba(7,6,15,.88) 52%, rgba(7,6,15,.97)); }
@media (max-width: 899px) { .gc-slide { min-height: 460px; } .gc-slide__art { height: 62%; } }   /* phone: art on top, text below */
.gc-slide:hover .gc-slide__art { transform: scale(1.04); }
.gc-slide__body { display: grid; gap: var(--gc-space-3); justify-items: start; max-width: 520px; }
.gc-slide__title { margin: 0; font: var(--gc-fw-black) clamp(1.9rem, 6vw + .4rem, 3.6rem)/1 var(--gc-font-display); text-transform: uppercase; letter-spacing: -.01em; text-shadow: 0 4px 30px rgba(0,0,0,.6); }
.gc-slide__text { margin: 0; color: var(--gc-text-muted); font-size: var(--gc-fs-sm); max-width: 44ch; }
.gc-slide .gc-btn--lg { min-width: 180px; }
.gc-carousel__dots { display: flex; justify-content: center; gap: 6px; margin-top: var(--gc-space-3); }
.gc-carousel__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--gc-radius-pill); background: var(--gc-border-strong); cursor: pointer; transition: width var(--gc-dur) var(--gc-ease), background var(--gc-dur); }
.gc-carousel__dots button[aria-current="true"] { width: 28px; background: var(--gc-cyan); box-shadow: 0 0 10px var(--gc-cyan); }
.gc-carousel__arrow { display: none; }
@media (min-width: 900px) {
  .gc-carousel__track { grid-auto-columns: 100%; }
  .gc-slide { min-height: 440px; padding: var(--gc-space-7); align-content: center; }
  .gc-slide::after { background: linear-gradient(90deg, rgba(7,6,15,.95) 0%, rgba(7,6,15,.7) 35%, rgba(7,6,15,0) 65%), linear-gradient(180deg, transparent 70%, rgba(7,6,15,.6)); }
  .gc-slide__text { font-size: var(--gc-fs-md); }
  .gc-carousel__arrow {
    display: grid; place-items: center; position: absolute; bottom: 56px; z-index: 2; width: 48px; height: 48px; border-radius: 50%;
    background: rgba(7,6,15,.6); backdrop-filter: blur(8px); border: 1px solid var(--gc-border-strong); color: var(--gc-text); font-size: 20px; cursor: pointer;
  }
  .gc-carousel__arrow:hover { border-color: var(--gc-cyan); box-shadow: var(--gc-glow-cyan); }
  .gc-carousel__arrow--prev { inset-inline-end: calc(var(--gc-space-5) + 58px); }   /* both arrows bottom-right, away from the text */
  .gc-carousel__arrow--next { inset-inline-end: var(--gc-space-5); }
  .gc-searchbox { max-width: 720px; }
}
@media (min-width: 1100px) { .gc-rail--tiles { grid-auto-columns: calc((100% - 5 * var(--gc-space-3)) / 6); } }

/* shelf accents for the home rows */
.gc-shelf--mp    { --_accent: var(--gc-violet); }
.gc-shelf--new   { --_accent: var(--gc-lime); }
.gc-shelf--quick { --_accent: var(--gc-coin); }
.gc-rail--tiles { grid-auto-columns: 40%; }
@media (min-width: 640px) { .gc-rail--tiles { grid-auto-columns: 200px; } }

/* Poki-style tile: art first, title slides in on hover (always visible on touch) */
.gc-tile {
  position: relative; display: block; overflow: hidden; isolation: isolate; border-radius: var(--gc-radius-lg);
  color: inherit; text-decoration: none; background: var(--gc-surface); box-shadow: var(--gc-shadow-md);
  outline: 1px solid var(--gc-border); outline-offset: -1px;
  transition: transform var(--gc-dur) var(--gc-ease-bounce), box-shadow var(--gc-dur), outline-color var(--gc-dur);
}
.gc-tile > .gc-thumb { aspect-ratio: 1; }
.gc-tile__title {
  position: absolute; inset: auto 0 0; z-index: 2; padding: 22px 10px 8px;
  font: var(--gc-fw-bold) var(--gc-fs-xs)/1.2 var(--gc-font-display); text-align: center;
  background: linear-gradient(180deg, transparent, rgba(7,6,15,.92)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gc-tile__badge { position: absolute; z-index: 2; top: 6px; inset-inline-start: 6px; }
.gc-tile__players {
  position: absolute; z-index: 2; top: 6px; inset-inline-end: 6px; height: 22px; padding: 0 7px; border-radius: var(--gc-radius-pill);
  display: inline-flex; align-items: center; gap: 4px; font: var(--gc-fw-bold) 10px/1 var(--gc-font-body);
  background: rgba(255,46,166,.9); color: #fff; box-shadow: 0 0 10px rgba(255,46,166,.6);
}
.gc-tile:hover, .gc-tile:focus-visible { transform: translateY(-4px) scale(1.03); outline-color: var(--gc-cyan); box-shadow: var(--gc-shadow-lg), var(--gc-glow-cyan); z-index: 1; }
@media (hover: hover) {
  .gc-tile__title { transform: translateY(100%); transition: transform var(--gc-dur) var(--gc-ease); }
  .gc-tile:hover .gc-tile__title, .gc-tile:focus-visible .gc-tile__title { transform: none; }
}
.gc-tile--xl .gc-tile__title { font-size: var(--gc-fs-md); padding-bottom: 12px; }

/* 100+ games: 3 cols at 375px → ~9 at 1440px; xl tiles span 2×2 (dense packing) */
.gc-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-auto-flow: dense; gap: 10px; }
.gc-tile-grid > .gc-tile { content-visibility: auto; contain-intrinsic-size: auto 120px; }
.gc-tile-grid > .gc-tile--xl { grid-column: span 2; grid-row: span 2; }
@media (min-width: 640px)  { .gc-tile-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: var(--gc-space-3); } }
@media (min-width: 1100px) { .gc-tile-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }

/* instant search: input + results popover */
.gc-searchbox { position: relative; min-width: 0; }
.gc-searchbox .gc-search .gc-input { min-height: 48px; }
.gc-searchbox__kbd { position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
@media (hover: none) { .gc-searchbox__kbd { display: none; } }
.gc-search-pop {
  position: absolute; z-index: 40; inset-inline: 0; top: calc(100% + 8px); max-height: min(70dvh, 520px); overflow-y: auto;
  padding: 8px; border-radius: var(--gc-radius-lg); background: rgba(20,17,42,.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--gc-border-strong); box-shadow: var(--gc-shadow-lg), var(--gc-glow-violet); animation: gc-pop-in .16s var(--gc-ease) both;
}
.gc-search-pop[hidden] { display: none; }
.gc-search-pop__label { padding: 8px 10px 4px; font: var(--gc-fw-bold) 10px/1 var(--gc-font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--gc-text-dim); }
.gc-search-hit {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px;
  border-radius: var(--gc-radius-sm); color: inherit; text-decoration: none;
}
.gc-search-hit .gc-thumb { border-radius: 10px; }
.gc-search-hit__title { display: block; font-weight: 700; font-size: var(--gc-fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-search-hit__sub { display: block; font-size: var(--gc-fs-xs); color: var(--gc-text-dim); }
.gc-search-hit mark { background: none; color: var(--gc-cyan); text-shadow: var(--gc-text-glow); }
.gc-search-hit:hover, .gc-search-hit.is-active, .gc-search-hit:focus-visible { background: var(--gc-surface-2); }
.gc-search-hit.is-active { box-shadow: inset 3px 0 0 var(--gc-cyan); }
.gc-search-pop__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 10px 10px; }
.gc-search-pop__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px; margin-top: 4px; border-top: 1px solid var(--gc-border); font-size: var(--gc-fs-xs); color: var(--gc-text-dim); }
.gc-search-pop__empty { padding: var(--gc-space-5) var(--gc-space-4); text-align: center; color: var(--gc-text-muted); font-size: var(--gc-fs-sm); }

/* ==========================================================================
   20. Game detail page — big art, one huge PLAY (tap to play), mode buttons, how to play
   ========================================================================== */
.gc-detail { display: grid; gap: var(--gc-space-5); padding-block: var(--gc-space-4) var(--gc-space-7); }
.gc-detail__crumbs { margin: 0; font-size: var(--gc-fs-xs); color: var(--gc-text-dim); }
.gc-detail__crumbs a { color: var(--gc-text-muted); text-decoration: none; }
.gc-detail__crumbs a:hover { color: var(--gc-cyan); }
.gc-detail__stage {
  position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; aspect-ratio: 16 / 10;
  border-radius: var(--gc-radius-xl); border: 1px solid var(--gc-border-strong); box-shadow: var(--gc-shadow-lg), var(--gc-glow-violet);
}
.gc-detail__stage > .gc-thumb, .gc-detail__stage > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.gc-detail__stage::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 50%, rgba(7,6,15,.1), rgba(7,6,15,.65) 75%); }
.gc-play-cta {
  display: grid; place-items: center; gap: 2px; width: 132px; height: 132px; border-radius: 50%; border: 0; cursor: pointer; text-decoration: none;
  background: var(--gc-cyan); color: var(--gc-text-on-neon); box-shadow: 0 0 0 8px rgba(34,228,255,.18), 0 0 0 18px rgba(34,228,255,.08), 0 0 60px rgba(34,228,255,.6);
  font: var(--gc-fw-black) var(--gc-fs-lg)/1 var(--gc-font-display); text-transform: uppercase; letter-spacing: .04em;
  transition: transform var(--gc-dur) var(--gc-ease-bounce), box-shadow var(--gc-dur); animation: gc-cta-pulse 2.4s ease-in-out infinite;
}
.gc-play-cta__icon { font-size: 34px; line-height: 1; margin-inline-start: 6px; }
.gc-play-cta:hover { transform: scale(1.06); }
.gc-play-cta:active { transform: scale(.97); }
@keyframes gc-cta-pulse { 50% { box-shadow: 0 0 0 12px rgba(34,228,255,.22), 0 0 0 26px rgba(34,228,255,.06), 0 0 80px rgba(34,228,255,.7); } }
@media (min-width: 900px) { .gc-play-cta { width: 156px; height: 156px; font-size: var(--gc-fs-xl); } }

.gc-detail__info { display: grid; gap: var(--gc-space-3); min-width: 0; align-content: start; }
.gc-detail__title { margin: 0; font: var(--gc-fw-black) clamp(1.9rem, 5vw + .5rem, 3rem)/1.02 var(--gc-font-display); text-transform: uppercase; }
.gc-detail__lead { margin: 0; color: var(--gc-text-muted); }
.gc-detail__meta { display: flex; flex-wrap: wrap; gap: var(--gc-space-4); font-size: var(--gc-fs-sm); color: var(--gc-text-muted); }
.gc-detail__meta b { display: block; font: var(--gc-fw-black) var(--gc-fs-md)/1.1 var(--gc-font-num); font-variant-numeric: tabular-nums; color: var(--gc-text); }
.gc-tag--lg { height: 30px; padding: 0 12px; font-size: 11px; }
.gc-detail__modes { display: grid; gap: 10px; }
.gc-mode-btn {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 64px; padding: 10px 14px; text-align: start;
  border-radius: var(--gc-radius-md); background: var(--gc-surface); border: 1px solid var(--gc-border); color: inherit; text-decoration: none; cursor: pointer; font: inherit;
  transition: border-color var(--gc-dur), box-shadow var(--gc-dur), transform var(--gc-dur-fast);
}
.gc-mode-btn__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: var(--gc-surface-3); }
.gc-mode-btn b { display: block; font: var(--gc-fw-bold) var(--gc-fs-sm)/1.2 var(--gc-font-display); color: var(--gc-text); }
.gc-mode-btn b + span { font-size: var(--gc-fs-xs); color: var(--gc-text-dim); }
.gc-mode-btn::after { content: "›"; font-size: 24px; color: var(--gc-text-dim); }
.gc-mode-btn:hover { border-color: var(--gc-cyan); box-shadow: var(--gc-glow-cyan); }
.gc-mode-btn--2p .gc-mode-btn__icon { background: rgba(255,46,166,.16); color: var(--gc-magenta); }
.gc-mode-btn--2p:hover { border-color: var(--gc-magenta); box-shadow: var(--gc-glow-magenta); }
.gc-mode-btn--online .gc-mode-btn__icon { background: rgba(182,255,59,.12); color: var(--gc-lime); }
.gc-mode-btn--online:hover { border-color: var(--gc-lime); box-shadow: var(--gc-glow-lime); }
.gc-howto { display: grid; gap: var(--gc-space-4); }
@media (min-width: 720px) { .gc-howto { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gc-howto h3 { margin: 0 0 var(--gc-space-2); font: var(--gc-fw-bold) var(--gc-fs-md)/1.2 var(--gc-font-display); }
.gc-howto ol, .gc-howto ul { margin: 0; padding-inline-start: 20px; color: var(--gc-text-muted); font-size: var(--gc-fs-sm); display: grid; gap: 6px; }
.gc-controls { list-style: none; padding: 0 !important; }
.gc-controls li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* children of .gc-detail__main: .gc-detail__stage, .gc-detail__info, .gc-howto (phone order = DOM order) */
.gc-detail__main { display: grid; gap: var(--gc-space-5); }
.gc-detail__main > .gc-detail__info { order: 1; }   /* phone: art → title + modes → how to play */
.gc-detail__main > .gc-howto { order: 2; }
@media (min-width: 1024px) {
  .gc-detail__main { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); grid-template-areas: "stage info" "howto info"; gap: var(--gc-space-5) var(--gc-space-6); align-items: start; }
  .gc-detail__main > .gc-detail__stage { grid-area: stage; }
  .gc-detail__main > .gc-detail__info { grid-area: info; position: sticky; top: calc(var(--gc-header-h) + 16px); }
  .gc-detail__main > .gc-howto { grid-area: howto; }
}
/* sticky PLAY bar on phones (thumb zone) */
.gc-playbar {
  position: sticky; bottom: calc(var(--gc-tabbar-h) + var(--gc-safe-b) + 8px); z-index: 12; display: flex; gap: 8px; padding: 8px;
  border-radius: var(--gc-radius-pill); background: rgba(20,17,42,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--gc-border-strong); box-shadow: var(--gc-shadow-lg);
}
.gc-playbar .gc-btn { flex: 1; min-height: 52px; }
@media (min-width: 1024px) { .gc-playbar { display: none; } }

/* guest "Save your progress" card */
.gc-save-card {
  position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--gc-space-3) var(--gc-space-4); align-items: center;
  padding: var(--gc-space-4); border-radius: var(--gc-radius-lg);
  background: linear-gradient(135deg, rgba(255,46,166,.14), rgba(123,92,255,.14) 60%, rgba(34,228,255,.1)), var(--gc-surface);
  border: 1px solid rgba(255,46,166,.5); box-shadow: 0 0 28px rgba(255,46,166,.18);
}
.gc-save-card__icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 24px; background: var(--gc-grad-hot); box-shadow: var(--gc-glow-magenta); }
.gc-save-card__title { margin: 0; font: var(--gc-fw-black) var(--gc-fs-md)/1.2 var(--gc-font-display); }
.gc-save-card__text { margin: 2px 0 0; font-size: var(--gc-fs-sm); color: var(--gc-text-muted); }
.gc-save-card__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.gc-save-card__actions .gc-btn { flex: 1 1 140px; }
.gc-save-card__close { position: absolute; top: 6px; inset-inline-end: 6px; width: 36px; min-height: 36px; }
@media (min-width: 720px) { .gc-save-card { grid-template-columns: 52px minmax(0, 1fr) auto; padding-inline-end: 52px; } .gc-save-card__actions { grid-column: auto; flex-wrap: nowrap; } }

/* ==========================================================================
   21. Multiplayer extras — quick match radar, turn timer ring
   ========================================================================== */
.gc-quickmatch {
  display: grid; justify-items: center; gap: var(--gc-space-3); text-align: center; padding: var(--gc-space-6) var(--gc-space-5);
  border-radius: var(--gc-radius-xl); border: 1px solid rgba(182,255,59,.4);
  background: radial-gradient(360px 200px at 50% 30%, rgba(182,255,59,.16), transparent 70%), var(--gc-surface);
}
.gc-quickmatch__title { margin: 0; font: var(--gc-fw-black) var(--gc-fs-xl)/1.1 var(--gc-font-display); text-transform: uppercase; }
.gc-quickmatch__sub { margin: 0; font-size: var(--gc-fs-sm); color: var(--gc-text-muted); }
.gc-quickmatch__time { font: var(--gc-fw-black) var(--gc-fs-lg)/1 var(--gc-font-num); font-variant-numeric: tabular-nums; color: var(--gc-lime); }
.gc-radar { position: relative; width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; border: 2px solid rgba(182,255,59,.5); background: radial-gradient(circle, rgba(182,255,59,.12), transparent 70%); }
.gc-radar::before, .gc-radar::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--gc-lime); opacity: .5; animation: gc-ping 2s ease-out infinite; }
.gc-radar::after { animation-delay: 1s; }
.gc-radar .gc-avatar { width: 64px; height: 64px; font-size: 26px; }
@keyframes gc-ping { from { transform: scale(1); opacity: .6; } to { transform: scale(1.7); opacity: 0; } }

/* turn timer ring: style="--p: 65" (percent left). Add .is-low under 25% */
.gc-timer {
  --p: 100; --_c: var(--gc-cyan); position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--_c) calc(var(--p) * 1%), var(--gc-surface-3) 0);
  font: var(--gc-fw-black) 15px/1 var(--gc-font-num); font-variant-numeric: tabular-nums; color: var(--gc-text);
  box-shadow: 0 0 14px color-mix(in srgb, var(--_c) 45%, transparent);
}
.gc-timer::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--gc-bg-2); }
.gc-timer > span { position: relative; }
.gc-timer.is-low { --_c: var(--gc-magenta); animation: gc-blink 1s ease-in-out infinite; }
.gc-timer--sm { width: 36px; height: 36px; font-size: 11px; }
.gc-timer--sm::before { inset: 4px; }

/* ==========================================================================
   22. Moderation queue, ads (banner / between games), DEMO labels
   ========================================================================== */
.gc-queue { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gc-queue__item {
  --_sev: var(--gc-cyan); display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px var(--gc-space-4);
  border-radius: var(--gc-radius-md); background: var(--gc-surface); border: 1px solid var(--gc-border); border-inline-start: 4px solid var(--_sev);
}
.gc-queue__item--high { --_sev: var(--gc-danger); }
.gc-queue__item--med  { --_sev: var(--gc-warning); }
.gc-queue__item--low  { --_sev: var(--gc-cyan); }
.gc-queue__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--gc-fs-sm); }
.gc-queue__head time { margin-inline-start: auto; font-size: var(--gc-fs-xs); color: var(--gc-text-dim); }
.gc-queue__who { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--gc-fs-sm); color: var(--gc-text-muted); }
.gc-queue__who .gc-avatar { width: 28px; height: 28px; font-size: 12px; }
.gc-queue__who b { color: var(--gc-text); }
.gc-queue__quote { margin: 0; padding: 10px 12px; border-radius: var(--gc-radius-sm); background: var(--gc-bg-2); font-size: var(--gc-fs-sm); color: var(--gc-text-muted); border-inline-start: 2px solid var(--gc-border-strong); }
.gc-queue__actions { display: flex; flex-wrap: wrap; gap: 6px; }
@media (min-width: 900px) {
  .gc-queue__item { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .gc-queue__head, .gc-queue__who, .gc-queue__quote { grid-column: 1; }
  .gc-queue__actions { grid-column: 2; grid-row: 1 / span 3; flex-direction: column; }
}

/* ad tile that sits inside a game grid/rail (same footprint as a tile → no layout jump) */
.gc-ad-tile {
  position: relative; display: grid; place-items: center; gap: 4px; aspect-ratio: 1; padding: 10px; border-radius: var(--gc-radius-lg); text-align: center;
  background: repeating-linear-gradient(45deg, #110e22 0 10px, #0d0b1a 10px 20px); border: 1px dashed var(--gc-border-strong);
  color: var(--gc-text-dim); font-size: var(--gc-fs-xs);
}
.gc-ad-tile::before { content: "Ad"; position: absolute; top: 6px; inset-inline-start: 8px; font: var(--gc-fw-bold) 9px/1 var(--gc-font-body); letter-spacing: .1em; text-transform: uppercase; }
.gc-tile-grid > .gc-ad-tile { grid-column: span 2; aspect-ratio: auto; min-height: 100px; }
/* between-games break (interstitial content card; the overlay is .gc-ad-slot--interstitial) */
.gc-ad-break { display: grid; justify-items: center; gap: var(--gc-space-3); width: min(100%, 420px); padding: var(--gc-space-5); text-align: center; border-radius: var(--gc-radius-xl); background: var(--gc-surface); border: 1px solid var(--gc-border-strong); box-shadow: var(--gc-shadow-lg); }
.gc-ad-break__label { font: var(--gc-fw-bold) 10px/1 var(--gc-font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--gc-text-dim); }
.gc-ad-break__next { display: flex; align-items: center; gap: 10px; font-size: var(--gc-fs-sm); color: var(--gc-text-muted); }
.gc-ad-break__rule { margin: 0; font-size: 11px; color: var(--gc-text-dim); }
.gc-ad-break .gc-ad-slot--rectangle { width: 100%; max-width: 300px; }

/* DEMO labelling */
.gc-demo-bar {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 30px; padding: 4px 12px; text-align: center;
  font: var(--gc-fw-bold) 11px/1.3 var(--gc-font-body); letter-spacing: .04em; color: var(--gc-text-on-neon);
  background: repeating-linear-gradient(135deg, var(--gc-coin) 0 14px, #ffb820 14px 28px);
}
.gc-demo-bar b { text-transform: uppercase; letter-spacing: .12em; }
.gc-demo-stamp {
  position: absolute; z-index: 3; top: 12px; inset-inline-end: -34px; transform: rotate(35deg); padding: 3px 40px;
  font: var(--gc-fw-black) 10px/1.4 var(--gc-font-display); letter-spacing: .2em; color: var(--gc-text-on-neon); background: var(--gc-coin); box-shadow: var(--gc-glow-coin);
}

@media (prefers-reduced-motion: reduce) {
  .gc-play-cta, .gc-radar::before, .gc-radar::after, .gc-timer.is-low, .gc-search-pop { animation: none !important; }
  .gc-slide__art, .gc-tile, .gc-tile__title { transition: none; }
  .gc-tile:hover, .gc-tile:focus-visible, .gc-slide:hover .gc-slide__art { transform: none; }
  .gc-carousel__track { scroll-behavior: auto; }
}

/* ==========================================================================
   23. Admin dashboard v3 (.na-admin) — professional console at #/admin (admin/moderator only)
   Shell:  <div class="na-admin"> <aside class="na-side">…</aside> <div class="na-main"> <header class="na-top">…</header> <main class="na-body">…</main></div></div>
   Mobile (<900px): the sidebar becomes an off-canvas drawer (.na-admin.is-nav-open + .na-scrim).
   Chart series palette, validated with the dataviz validator on #14112a (dark mode): lightness band, chroma,
   CVD ΔE ≥ 11.9 for adjacent pairs, contrast ≥ 3:1. Use in THIS fixed order, never cycled:
     s1 cyan #00a5c3 · s2 amber #c97d00 · s3 violet #7855df · s4 green #61a82d · s5 magenta #e2348d
   A 6th+ series folds into "Other" (--na-other). Sequential = one hue (violet ramp). Status colours are reserved.
   Text never takes a series colour: values and labels use ink tokens, and a swatch beside them carries identity.
   ========================================================================== */
:root {
  --na-s1: #00a5c3; --na-s2: #c97d00; --na-s3: #7855df; --na-s4: #61a82d; --na-s5: #e2348d; --na-other: #6f6999;
  --na-seq-1: #2a2360; --na-seq-2: #3d2f8f; --na-seq-3: #5a43c4; --na-seq-4: #7855df; --na-seq-5: #a594ff;
  --na-ok: #3dffa0; --na-warn: #ffb02e; --na-bad: #ff6b85; --na-info: #22e4ff;
  --na-side-w: 248px; --na-top-h: 64px;
  --na-surface: #14112a; --na-surface-2: #1a1636; --na-line: #2a2452; --na-grid: rgba(169,163,204,.12);
}
.na-admin { position: relative; display: grid; grid-template-columns: var(--na-side-w) minmax(0, 1fr); min-height: 100dvh; background: var(--gc-bg); color: var(--gc-text); font-family: var(--gc-font-body); }

/* ---- sidebar ---- */
.na-side { position: sticky; top: 0; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 18px 12px; background: linear-gradient(180deg, #0d0b1a, #09081a); border-inline-end: 1px solid var(--na-line); z-index: 60; }
.na-side__brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; }
.na-side__brand img { height: 26px; width: auto; }
.na-side__brand span { font: 700 10px/1 var(--gc-font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--gc-coin); padding: 3px 6px; border: 1px solid rgba(255,200,61,.45); border-radius: 6px; }
.na-side__label { margin: 16px 12px 6px; font: 700 10px/1 var(--gc-font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--gc-text-dim); }
.na-nav { display: grid; gap: 2px; }
.na-nav a, .na-nav button { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border: 0; border-radius: 12px; background: none; color: var(--gc-text-muted); font: 600 14px/1 var(--gc-font-body); text-decoration: none; text-align: start; cursor: pointer; transition: background .18s, color .18s; }
.na-nav .na-ico { width: 18px; text-align: center; flex: none; opacity: .85; }
.na-nav a:hover, .na-nav button:hover { background: var(--na-surface-2); color: var(--gc-text); }
.na-nav a[aria-current="page"] { background: linear-gradient(90deg, rgba(34,228,255,.16), rgba(34,228,255,.02)); color: #fff; box-shadow: inset 3px 0 0 var(--gc-cyan); }
.na-nav a[aria-current="page"] .na-ico { color: var(--gc-cyan); opacity: 1; }
.na-nav__count { margin-inline-start: auto; min-width: 22px; padding: 3px 7px; border-radius: 999px; background: var(--gc-magenta); color: #fff; font: 700 11px/1 var(--gc-font-body); text-align: center; font-variant-numeric: tabular-nums; }
.na-side__foot { margin-top: auto; padding: 12px; border-top: 1px solid var(--na-line); font-size: 12px; color: var(--gc-text-dim); }
.na-side__foot b { color: var(--gc-text-muted); }

/* ---- top bar ---- */
.na-main { min-width: 0; display: flex; flex-direction: column; }
.na-top { position: sticky; top: 0; z-index: 40; height: var(--na-top-h); display: flex; align-items: center; gap: 12px; padding: 0 24px; background: rgba(7,6,15,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--na-line); }
.na-top__burger { display: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--na-line); background: var(--na-surface); color: var(--gc-text); cursor: pointer; font-size: 18px; }
.na-top__title { margin: 0; font: 800 17px/1 var(--gc-font-display); white-space: nowrap; }
.na-search { position: relative; flex: 1 1 auto; max-width: 440px; margin-inline-start: 16px; }
.na-search input { width: 100%; height: 40px; padding: 0 44px 0 38px; border-radius: 12px; border: 1px solid var(--na-line); background: var(--na-surface); color: var(--gc-text); font: 500 14px/1 var(--gc-font-body); }
.na-search input::placeholder { color: var(--gc-text-dim); }
.na-search input:focus { outline: none; border-color: var(--gc-cyan); box-shadow: 0 0 0 3px rgba(34,228,255,.25); }
.na-search::before { content: "⌕"; position: absolute; left: 13px; top: 50%; transform: translateY(-54%); color: var(--gc-text-dim); font-size: 18px; }
.na-search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); padding: 3px 6px; border-radius: 6px; border: 1px solid var(--na-line); color: var(--gc-text-dim); font: 600 11px/1 var(--gc-font-body); }
.na-top__right { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.na-iconbtn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--na-line); background: var(--na-surface); color: var(--gc-text-muted); cursor: pointer; font-size: 16px; }
.na-iconbtn:hover { color: var(--gc-text); border-color: var(--gc-border-strong); }
.na-iconbtn .na-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--gc-magenta); box-shadow: 0 0 0 2px var(--na-surface); }
.na-me { display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid var(--na-line); background: var(--na-surface); color: var(--gc-text); cursor: pointer; font: 600 13px/1 var(--gc-font-body); }
.na-me .gc-avatar { width: 32px; height: 32px; font-size: 13px; }
.na-env { padding: 4px 8px; border-radius: 999px; font: 700 10px/1 var(--gc-font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--gc-lime); border: 1px solid rgba(182,255,59,.4); background: rgba(182,255,59,.08); white-space: nowrap; }

/* ---- page body & buttons ---- */
.na-body { padding: 24px; display: grid; gap: 20px; align-content: start; }
.na-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.na-head h1 { margin: 0; font: 800 26px/1.15 var(--gc-font-display); }
.na-head p { margin: 4px 0 0; color: var(--gc-text-muted); font-size: 14px; }
.na-head__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.na-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--na-line); background: var(--na-surface); color: var(--gc-text); font: 600 13px/1 var(--gc-font-body); cursor: pointer; white-space: nowrap; text-decoration: none; transition: border-color .18s, background .18s, box-shadow .18s; }
.na-btn:hover { border-color: var(--gc-border-strong); background: var(--na-surface-2); }
.na-btn--primary { background: var(--gc-cyan); border-color: var(--gc-cyan); color: #07060f; }
.na-btn--primary:hover { background: #5aeeff; box-shadow: 0 0 18px rgba(34,228,255,.35); }
.na-btn--danger { color: var(--na-bad); border-color: rgba(255,107,133,.45); }
.na-btn--danger:hover { background: rgba(255,107,133,.12); }
.na-btn--danger-solid { background: #e23d5b; border-color: #e23d5b; color: #fff; }
.na-btn--ghost { background: none; border-color: transparent; color: var(--gc-text-muted); }
.na-btn--sm { height: 30px; padding: 0 10px; font-size: 12px; border-radius: 8px; }
.na-btn:focus-visible, .na-iconbtn:focus-visible, .na-nav a:focus-visible, .na-me:focus-visible { outline: 2px solid var(--gc-cyan); outline-offset: 2px; }

/* filters: one row above the charts */
.na-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.na-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; border: 1px solid var(--na-line); background: var(--na-surface); }
.na-seg button { height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--gc-text-muted); font: 600 12px/1 var(--gc-font-body); cursor: pointer; }
.na-seg button[aria-pressed="true"] { background: var(--na-surface-2); color: #fff; box-shadow: inset 0 0 0 1px var(--gc-border-strong); }
.na-select { height: 36px; padding: 0 32px 0 12px; border-radius: 10px; border: 1px solid var(--na-line); background: var(--na-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a9a3cc' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center / 10px; color: var(--gc-text); font: 500 13px/1 var(--gc-font-body); appearance: none; -webkit-appearance: none; }

/* ---- KPI tiles ---- */
.na-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.na-kpi { position: relative; overflow: hidden; display: grid; gap: 6px; padding: 16px 16px 14px; border-radius: 16px; border: 1px solid var(--na-line); background: linear-gradient(180deg, var(--na-surface-2), var(--na-surface)); }
.na-kpi::after { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--gc-grad-brand); opacity: .55; }
.na-kpi__label { display: flex; align-items: center; gap: 6px; font: 600 12px/1.2 var(--gc-font-body); color: var(--gc-text-muted); }
.na-kpi__value { font: 800 28px/1.05 var(--gc-font-display); font-variant-numeric: tabular-nums; color: var(--gc-text); letter-spacing: -.01em; }
.na-kpi__value small { font: 600 14px/1 var(--gc-font-body); color: var(--gc-text-muted); margin-inline-start: 2px; }
.na-kpi__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--gc-text-dim); }
.na-delta { display: inline-flex; align-items: center; gap: 3px; font: 700 12px/1 var(--gc-font-body); font-variant-numeric: tabular-nums; }
.na-delta--up { color: var(--na-ok); } .na-delta--up::before { content: "▲"; font-size: 9px; }
.na-delta--down { color: var(--na-bad); } .na-delta--down::before { content: "▼"; font-size: 9px; }
.na-delta--flat { color: var(--gc-text-dim); } .na-delta--flat::before { content: "■"; font-size: 8px; }
.na-spark { display: block; width: 84px; height: 26px; overflow: visible; }
.na-spark path { fill: none; stroke: var(--gc-text-muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.na-kpi--live .na-kpi__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--na-ok); box-shadow: 0 0 0 3px rgba(61,255,160,.18); animation: na-pulse 1.6s ease-in-out infinite; }
@keyframes na-pulse { 50% { box-shadow: 0 0 0 6px rgba(61,255,160,0); } }

/* ---- panels & chart containers ---- */
.na-grid { display: grid; gap: 16px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.na-col-12 { grid-column: span 12; } .na-col-8 { grid-column: span 8; } .na-col-6 { grid-column: span 6; } .na-col-4 { grid-column: span 4; }
.na-panel { min-width: 0; display: flex; flex-direction: column; border-radius: 18px; border: 1px solid var(--na-line); background: var(--na-surface); }
.na-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 6px; }
.na-panel__title { margin: 0; display: flex; align-items: center; gap: 8px; font: 700 15px/1.25 var(--gc-font-body); color: var(--gc-text); }
.na-panel__sub { margin: 3px 0 0; font-size: 12px; color: var(--gc-text-dim); }
.na-panel__body { padding: 8px 18px 18px; min-width: 0; }
.na-panel__foot { padding: 12px 18px; border-top: 1px solid var(--na-line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--gc-text-dim); }

.na-chart { position: relative; width: 100%; height: 260px; }
.na-chart--sm { height: 180px; } .na-chart--lg { height: 320px; }
.na-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.na-chart .grid line { stroke: var(--na-grid); stroke-width: 1; }
.na-chart .tick { fill: var(--gc-text-dim); font: 500 11px/1 var(--gc-font-body); font-variant-numeric: tabular-nums; }
.na-chart .baseline { stroke: #3a3366; stroke-width: 1; }
/* marks: 2px lines, markers with a 2px surface ring, 4px rounded bar ends, 2px surface gap between fills */
.na-chart .line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.na-chart .area { opacity: .12; stroke: none; }
.na-chart .dot { stroke: var(--na-surface); stroke-width: 2; }
.na-chart .bar { stroke: var(--na-surface); stroke-width: 2; }
.na-chart .s1 { stroke: var(--na-s1); fill: var(--na-s1); } .na-chart .s2 { stroke: var(--na-s2); fill: var(--na-s2); }
.na-chart .s3 { stroke: var(--na-s3); fill: var(--na-s3); } .na-chart .s4 { stroke: var(--na-s4); fill: var(--na-s4); }
.na-chart .s5 { stroke: var(--na-s5); fill: var(--na-s5); } .na-chart .sx { stroke: var(--na-other); fill: var(--na-other); }
.na-chart .line.s1, .na-chart .line.s2, .na-chart .line.s3, .na-chart .line.s4, .na-chart .line.s5 { fill: none; }
.na-chart .area.s1, .na-chart .area.s2, .na-chart .area.s3 { stroke: none; }
.na-chart .dot.s1, .na-chart .dot.s2, .na-chart .dot.s3, .na-chart .dot.s4, .na-chart .dot.s5 { stroke: var(--na-surface); }
.na-chart .bar.s1, .na-chart .bar.s2, .na-chart .bar.s3, .na-chart .bar.s4, .na-chart .bar.s5, .na-chart .bar.sx { stroke: var(--na-surface); }
.na-chart .label { fill: var(--gc-text); font: 600 11px/1 var(--gc-font-body); font-variant-numeric: tabular-nums; }
.na-chart .label--muted { fill: var(--gc-text-muted); }
.na-chart .crosshair { stroke: var(--gc-text-dim); stroke-width: 1; stroke-dasharray: 3 3; }
.na-chart .hit { fill: transparent; cursor: crosshair; }
/* donut */
.na-donut { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 20px; }
.na-donut svg { width: 170px; height: 170px; }
.na-donut .seg { stroke: var(--na-surface); stroke-width: 2; }
.na-donut__center { font: 800 24px/1 var(--gc-font-display); fill: var(--gc-text); text-anchor: middle; }
.na-donut__center-sub { font: 600 10px/1 var(--gc-font-body); fill: var(--gc-text-dim); text-anchor: middle; letter-spacing: .08em; text-transform: uppercase; }
/* legend: always present for ≥ 2 series; text in ink, identity in the swatch */
.na-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--gc-text-muted); }
.na-legend li { display: inline-flex; align-items: center; gap: 7px; }
.na-legend b { color: var(--gc-text); font-variant-numeric: tabular-nums; font-weight: 700; }
.na-sw { width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--_c, var(--na-s1)); }
.na-sw--line { height: 3px; width: 14px; border-radius: 2px; }
.na-legend--stack { display: grid; gap: 9px; }
.na-legend--stack li { justify-content: space-between; }
.na-legend--stack li > span { display: inline-flex; align-items: center; gap: 7px; }
/* tooltip */
.na-tip { position: absolute; z-index: 5; pointer-events: none; min-width: 160px; padding: 10px 12px; border-radius: 12px; background: rgba(13,11,26,.96); border: 1px solid var(--gc-border-strong); box-shadow: 0 12px 30px rgba(0,0,0,.5); font-size: 12px; color: var(--gc-text-muted); display: grid; gap: 4px; }
.na-tip[hidden] { display: none; }
.na-tip__title { margin-bottom: 2px; font-weight: 700; color: var(--gc-text); }
.na-tip__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.na-tip__row b { color: var(--gc-text); font-variant-numeric: tabular-nums; }
.na-tip__row span { display: inline-flex; align-items: center; gap: 6px; }
/* horizontal bar list (top games / players): magnitude, one hue */
.na-bars { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.na-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; font-size: 13px; }
.na-bars__name { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--gc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.na-bars__val { color: var(--gc-text-muted); font-variant-numeric: tabular-nums; font-weight: 600; }
.na-bars__track { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--na-surface-2); overflow: hidden; }
.na-bars__fill { height: 100%; border-radius: 4px; background: var(--na-seq-4); width: var(--v, 50%); }
/* retention cohort: sequential violet ramp (light = more) */
.na-cohort { width: 100%; border-collapse: separate; border-spacing: 2px; font-size: 12px; font-variant-numeric: tabular-nums; }
.na-cohort th { padding: 6px 8px; color: var(--gc-text-dim); font-weight: 600; text-align: start; white-space: nowrap; }
.na-cohort td { padding: 8px 6px; border-radius: 4px; text-align: center; color: #fff; background: var(--na-seq-1); }
.na-cohort td[data-l="2"] { background: var(--na-seq-2); } .na-cohort td[data-l="3"] { background: var(--na-seq-3); }
.na-cohort td[data-l="4"] { background: var(--na-seq-4); } .na-cohort td[data-l="5"] { background: var(--na-seq-5); color: #07060f; }
.na-cohort td:empty { background: transparent; }

/* ---- data table ---- */
.na-tablebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--na-line); }
.na-tablebar .na-search { margin: 0; max-width: 320px; display: block; }
.na-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 18px; background: rgba(34,228,255,.08); border-bottom: 1px solid rgba(34,228,255,.3); font-size: 13px; }
.na-bulk b { font-variant-numeric: tabular-nums; }
.na-table-wrap { overflow: auto; max-height: 560px; }
.na-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.na-table thead th { position: sticky; top: 0; z-index: 2; padding: 11px 14px; background: #171332; border-bottom: 1px solid var(--na-line); color: var(--gc-text-dim); font: 700 11px/1.2 var(--gc-font-body); letter-spacing: .06em; text-transform: uppercase; text-align: start; white-space: nowrap; }
.na-table th[aria-sort] { cursor: pointer; user-select: none; }
.na-table th[aria-sort]::after { content: "↕"; margin-inline-start: 6px; opacity: .45; }
.na-table th[aria-sort="ascending"]::after { content: "↑"; opacity: 1; color: var(--gc-cyan); }
.na-table th[aria-sort="descending"]::after { content: "↓"; opacity: 1; color: var(--gc-cyan); }
.na-table td { padding: 10px 14px; border-bottom: 1px solid rgba(42,36,82,.7); color: var(--gc-text-muted); vertical-align: middle; white-space: nowrap; }
.na-table tbody tr { transition: background .15s; }
.na-table tbody tr:hover { background: rgba(123,92,255,.08); }
.na-table tbody tr[aria-selected="true"] { background: rgba(34,228,255,.07); }
.na-table .is-num { text-align: end; font-variant-numeric: tabular-nums; color: var(--gc-text); }
.na-table .na-check { width: 40px; }
.na-table input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--gc-cyan); }
.na-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.na-user .gc-avatar { width: 32px; height: 32px; font-size: 13px; flex: none; }
.na-user b { display: block; color: var(--gc-text); font-weight: 600; }
.na-user small { display: block; color: var(--gc-text-dim); font-size: 12px; }
.na-rowact { display: flex; justify-content: flex-end; gap: 4px; }
.na-pager { display: flex; align-items: center; gap: 4px; }
.na-pager button { min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--na-line); background: var(--na-surface); color: var(--gc-text-muted); font: 600 12px/1 var(--gc-font-body); font-variant-numeric: tabular-nums; cursor: pointer; }
.na-pager button[aria-current="page"] { background: var(--gc-cyan); border-color: var(--gc-cyan); color: #07060f; }
.na-pager button:disabled { opacity: .4; cursor: not-allowed; }

/* ---- badges: status = icon + label, never colour alone ---- */
.na-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; font: 700 11px/1 var(--gc-font-body); letter-spacing: .03em; white-space: nowrap; border: 1px solid transparent; }
.na-badge--demo { color: var(--gc-coin); border: 1px dashed rgba(255,200,61,.7); background: rgba(255,200,61,.06); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; }
.na-badge--admin { color: #07060f; background: var(--gc-coin); }
.na-badge--admin::before { content: "★"; font-size: 9px; }
.na-badge--mod { color: #fff; background: var(--gc-violet); }
.na-badge--mod::before { content: "⚑"; font-size: 9px; }
.na-badge--player { color: var(--gc-text-muted); background: var(--na-surface-2); border-color: var(--na-line); }
.na-badge--active, .na-badge--live { color: var(--na-ok); background: rgba(61,255,160,.08); border-color: rgba(61,255,160,.35); }
.na-badge--active::before, .na-badge--live::before { content: "●"; font-size: 8px; }
.na-badge--banned { color: var(--na-bad); background: rgba(255,107,133,.1); border-color: rgba(255,107,133,.45); }
.na-badge--banned::before { content: "⦸"; }
.na-badge--muted { color: var(--na-warn); background: rgba(255,176,46,.1); border-color: rgba(255,176,46,.4); }
.na-badge--muted::before { content: "◌"; }
.na-badge--off { color: var(--gc-text-dim); background: var(--na-surface-2); border-color: var(--na-line); }
.na-badge--off::before { content: "○"; font-size: 9px; }

/* ---- profile drawer ---- */
.na-drawer { position: fixed; z-index: 90; inset: 0 0 0 auto; width: min(460px, 100%); display: flex; flex-direction: column; background: #110e24; border-inline-start: 1px solid var(--gc-border-strong); box-shadow: -30px 0 60px rgba(0,0,0,.5); transition: transform .28s var(--gc-ease), visibility 0s; }
.na-drawer[hidden] { display: flex; transform: translateX(105%); visibility: hidden; transition: transform .28s var(--gc-ease), visibility 0s .28s; }
.na-drawer--inline { position: relative; inset: auto; width: 100%; max-width: 460px; height: auto; border: 1px solid var(--gc-border-strong); border-radius: 18px; box-shadow: none; }
.na-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--na-line); }
.na-drawer__head h2 { margin: 0; font: 800 16px/1.2 var(--gc-font-display); }
.na-drawer__body { flex: 1; overflow-y: auto; padding: 18px; display: grid; gap: 18px; align-content: start; }
.na-drawer__foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--na-line); }
.na-profile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.na-profile .gc-avatar { width: 64px; height: 64px; font-size: 26px; }
.na-profile h3 { margin: 0; font: 800 18px/1.2 var(--gc-font-display); }
.na-profile p { margin: 4px 0 0; color: var(--gc-text-dim); font-size: 13px; }
.na-profile .na-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.na-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.na-fact { padding: 10px 12px; border-radius: 12px; background: var(--na-surface); border: 1px solid var(--na-line); }
.na-fact span { display: block; font-size: 11px; color: var(--gc-text-dim); }
.na-fact b { display: block; margin-top: 4px; font: 800 16px/1 var(--gc-font-display); font-variant-numeric: tabular-nums; }
.na-timeline { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 13px; }
.na-timeline li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; color: var(--gc-text-muted); }
.na-timeline li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gc-border-strong); }
.na-timeline time { color: var(--gc-text-dim); font-size: 12px; white-space: nowrap; }
.na-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(4,3,10,.6); backdrop-filter: blur(2px); }
.na-scrim[hidden] { display: none; }

/* ---- forms & toggles ---- */
.na-form { display: grid; gap: 14px; }
.na-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.na-field { display: grid; gap: 6px; min-width: 0; }
.na-field label { font: 600 12px/1.3 var(--gc-font-body); color: var(--gc-text-muted); }
.na-field input, .na-field textarea, .na-field select { width: 100%; min-height: 40px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--na-line); background: #0f0c22; color: var(--gc-text); font: 500 14px/1.4 var(--gc-font-body); }
.na-field textarea { min-height: 90px; resize: vertical; }
.na-field input:focus, .na-field textarea:focus, .na-field select:focus { outline: none; border-color: var(--gc-cyan); box-shadow: 0 0 0 3px rgba(34,228,255,.22); }
.na-field small { font-size: 12px; color: var(--gc-text-dim); }
.na-field--secret input { font-family: ui-monospace, monospace; letter-spacing: .08em; }
.na-field[data-invalid] input { border-color: var(--na-bad); }
.na-field[data-invalid] small { color: var(--na-bad); }
.na-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--na-line); }
.na-toggle:last-child { border-bottom: 0; }
.na-toggle b { display: block; font-size: 14px; color: var(--gc-text); font-weight: 600; }
.na-toggle small { display: block; margin-top: 2px; font-size: 12px; color: var(--gc-text-dim); }
.na-switch { position: relative; flex: none; width: 44px; height: 24px; margin: 0; appearance: none; -webkit-appearance: none; border-radius: 999px; background: #2a2452; border: 1px solid #3a3366; cursor: pointer; transition: background .2s; }
.na-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #a9a3cc; transition: transform .2s var(--gc-ease), background .2s; }
.na-switch:checked { background: var(--gc-cyan); border-color: var(--gc-cyan); }
.na-switch:checked::after { transform: translateX(20px); background: #07060f; }
.na-switch:disabled { opacity: .45; cursor: not-allowed; }
.na-switch:focus-visible { outline: 2px solid var(--gc-cyan); outline-offset: 2px; }
/* Ads & Revenue connector card */
.na-connectors { display: grid; gap: 10px; }
.na-connector { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--na-line); background: var(--na-surface-2); }
.na-connector__logo { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font: 800 13px/1 var(--gc-font-display); color: #fff; background: #2a2452; }
.na-connector b { display: block; font-size: 14px; color: var(--gc-text); }
.na-connector small { display: block; margin-top: 2px; font-size: 12px; color: var(--gc-text-dim); }
.na-connector__right { display: flex; align-items: center; gap: 8px; }
.na-notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; font-size: 13px; color: var(--gc-text-muted); background: rgba(255,200,61,.07); border: 1px solid rgba(255,200,61,.35); }
.na-notice::before { content: "!"; flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--gc-coin); color: #07060f; font: 900 12px/1 var(--gc-font-display); }
.na-notice--info { background: rgba(34,228,255,.06); border-color: rgba(34,228,255,.3); }
.na-notice--info::before { content: "i"; background: var(--gc-cyan); }
.na-notice b { color: var(--gc-text); }
/* system health */
.na-health { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.na-health__item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--na-line); background: var(--na-surface-2); font-size: 13px; color: var(--gc-text-muted); }
.na-health__item b { display: block; color: var(--gc-text); }
.na-health__icon { width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center; font: 900 13px/1 var(--gc-font-display); }
.na-health__icon--ok { background: rgba(61,255,160,.14); color: var(--na-ok); }
.na-health__icon--warn { background: rgba(255,176,46,.14); color: var(--na-warn); }
.na-health__icon--bad { background: rgba(255,107,133,.14); color: var(--na-bad); }

/* ---- states ---- */
.na-empty, .na-error { display: grid; justify-items: center; gap: 10px; padding: 36px 20px; text-align: center; color: var(--gc-text-muted); font-size: 14px; }
.na-empty__icon, .na-error__icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-size: 24px; background: var(--na-surface-2); border: 1px solid var(--na-line); }
.na-error__icon { color: var(--na-bad); border-color: rgba(255,107,133,.45); background: rgba(255,107,133,.08); font-weight: 900; }
.na-empty b, .na-error b { color: var(--gc-text); font-size: 15px; }
.na-empty p, .na-error p { margin: 0; max-width: 36ch; }
.na-skel { border-radius: 10px; background: linear-gradient(100deg, var(--na-surface-2) 30%, #241f4a 50%, var(--na-surface-2) 70%) 0 0 / 300% 100%; animation: na-shimmer 1.3s linear infinite; }
.na-skel--line { height: 12px; } .na-skel--kpi { height: 100px; border-radius: 16px; } .na-skel--chart { height: 160px; }
@keyframes na-shimmer { from { background-position: 100% 0; } to { background-position: -200% 0; } }

/* ---- confirm dialog ---- */
.na-dialog { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(4,3,10,.7); backdrop-filter: blur(4px); }
.na-dialog[hidden] { display: none; }
.na-dialog--inline { position: relative; inset: auto; padding: 0; background: none; backdrop-filter: none; }
.na-dialog__box { width: min(440px, 100%); display: grid; gap: 14px; padding: 22px; border-radius: 20px; background: #15112d; border: 1px solid var(--gc-border-strong); box-shadow: 0 30px 70px rgba(0,0,0,.6); }
.na-dialog__box--danger { border-color: rgba(255,107,133,.55); }
.na-dialog__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font: 900 22px/1 var(--gc-font-display); color: var(--na-bad); background: rgba(255,107,133,.12); }
.na-dialog h2 { margin: 0; font: 800 19px/1.2 var(--gc-font-display); }
.na-dialog p { margin: 0; color: var(--gc-text-muted); font-size: 14px; }
.na-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* ---- responsive: sidebar → drawer under 900px ---- */
@media (max-width: 1100px) { .na-col-8, .na-col-4, .na-col-6 { grid-column: span 12; } }
@media (max-width: 899px) {
  .na-admin { grid-template-columns: minmax(0, 1fr); }
  .na-side { position: fixed; inset: 0 auto 0 0; width: min(280px, 86vw); transform: translateX(-102%); transition: transform .28s var(--gc-ease); box-shadow: 30px 0 60px rgba(0,0,0,.5); z-index: 95; }
  .na-admin.is-nav-open .na-side { transform: none; }
  .na-top { padding: 0 12px; gap: 8px; }
  .na-top__burger { display: grid; place-items: center; }
  .na-top .na-search, .na-me span, .na-env { display: none; }
  .na-body { padding: 16px 12px; gap: 16px; }
  .na-head h1 { font-size: 22px; }
  .na-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .na-kpi { padding: 14px 12px 12px; } .na-kpi__value { font-size: 22px; } .na-spark { width: 56px; }
  .na-donut { grid-template-columns: 1fr; justify-items: center; }
  .na-donut .na-legend { width: 100%; }
  .na-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .na-connector { grid-template-columns: 40px minmax(0, 1fr); } .na-connector__right { grid-column: 1 / -1; }
  .na-chart { height: 220px; }
}
@media (prefers-reduced-motion: reduce) { .na-skel, .na-kpi--live .na-kpi__label::before { animation: none; } .na-side, .na-drawer { transition: none; } }

/* ==========================================================================
   24. Game HUD & result screen (.na-hud, .na-result), shared by Pool, Air Hockey and Connect Four
   <div class="na-hud"> <div class="na-pcard p1 is-turn">avatar + ring · name · score</div> <div class="na-hud__mid">turn · clock</div> <div class="na-pcard p2">…</div></div>
   P1 = cyan, P2 = magenta (same as the in-game pieces). Timer ring: style="--t:.62" (fraction left), .is-low under 25 %.
   ========================================================================== */
.na-hud { position: relative; z-index: 6; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px; border-radius: 18px; background: rgba(7,6,15,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--na-line); }
.na-pcard { --_c: var(--gc-cyan); display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 10px 6px 6px; border-radius: 14px; border: 1px solid transparent; transition: border-color .25s, box-shadow .25s, background .25s; }
.na-pcard.p2 { --_c: var(--gc-magenta); flex-direction: row-reverse; text-align: end; padding: 6px 6px 6px 10px; }
.na-pcard.is-turn { border-color: color-mix(in srgb, var(--_c) 60%, transparent); background: color-mix(in srgb, var(--_c) 10%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--_c) 28%, transparent); }
.na-pcard__av { position: relative; flex: none; width: 48px; height: 48px; display: grid; place-items: center; }
.na-pcard__av .gc-avatar { width: 36px; height: 36px; font-size: 15px; box-shadow: 0 0 0 2px #07060f; }
.na-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--_c) calc(var(--t, 1) * 360deg), rgba(255,255,255,.08) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); }
.na-pcard:not(.is-turn) .na-ring { opacity: .25; }
.na-ring.is-low { --_c: var(--na-bad); animation: na-blink .8s ease-in-out infinite; }
@keyframes na-blink { 50% { opacity: .45; } }
.na-pcard__info { min-width: 0; display: grid; gap: 4px; }
.na-pcard__name { font: 700 14px/1.1 var(--gc-font-body); color: var(--gc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.na-pcard__meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--gc-text-dim); white-space: nowrap; }
.na-pcard.p2 .na-pcard__meta { justify-content: flex-end; }
.na-pcard__balls { display: inline-flex; gap: 3px; }
.na-pcard__balls i { width: 9px; height: 9px; border-radius: 50%; background: var(--_b, #ffc83d); box-shadow: inset -1px -1px 0 rgba(0,0,0,.35); }
.na-pcard__balls i.is-potted { opacity: .2; }
.na-pcard__score { margin-inline-start: auto; font: 800 26px/1 var(--gc-font-display); font-variant-numeric: tabular-nums; color: var(--_c); text-shadow: 0 0 14px color-mix(in srgb, var(--_c) 50%, transparent); }
.na-pcard.p2 .na-pcard__score { margin-inline-start: 0; margin-inline-end: auto; }
.na-hud__mid { display: grid; justify-items: center; gap: 5px; padding: 0 6px; }
.na-hud__turn { padding: 6px 12px; border-radius: 999px; font: 800 11px/1 var(--gc-font-display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: #07060f; background: var(--gc-cyan); box-shadow: 0 0 16px rgba(34,228,255,.45); }
.na-hud__turn--theirs { color: #fff; background: var(--gc-magenta); box-shadow: 0 0 16px rgba(255,46,166,.45); }
.na-hud__clock { font: 700 12px/1 var(--gc-font-display); font-variant-numeric: tabular-nums; color: var(--gc-text-muted); }
.na-hud__tools { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }
.na-hudbtn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--na-line); background: rgba(7,6,15,.72); backdrop-filter: blur(8px); color: var(--gc-text); font-size: 16px; cursor: pointer; }
.na-hudbtn[aria-pressed="true"] { color: var(--gc-text-dim); }
.na-hudbtn:focus-visible { outline: 2px solid var(--gc-cyan); outline-offset: 2px; }
.na-power { width: 12px; height: 160px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--na-line); overflow: hidden; display: flex; align-items: flex-end; }
.na-power > i { display: block; width: 100%; height: var(--p, 40%); border-radius: inherit; background: linear-gradient(0deg, var(--gc-cyan), var(--gc-violet) 60%, var(--gc-magenta)); box-shadow: 0 0 12px rgba(123,92,255,.6); }
.na-net { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--gc-text-dim); }
.na-net::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--na-ok); }
.na-net--weak::before { background: var(--na-warn); } .na-net--lost::before { background: var(--na-bad); }
@media (max-width: 560px) {
  .na-hud { gap: 4px; padding: 6px; border-radius: 14px; }
  .na-pcard { gap: 6px; padding: 4px; } .na-pcard.p2 { padding: 4px; }
  .na-pcard__av { width: 38px; height: 38px; } .na-pcard__av .gc-avatar { width: 30px; height: 30px; font-size: 12px; }
  .na-pcard__meta { display: none; } .na-pcard__name { font-size: 12px; } .na-pcard__score { font-size: 20px; }
  .na-hud__turn { padding: 5px 8px; font-size: 9px; }
}
@media (max-width: 420px) { .na-pcard__info { display: none; } .na-pcard__score { font-size: 24px; } .na-pcard, .na-pcard.p2 { gap: 10px; } }
/* quick chat */
.na-chat { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.na-chat button { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--na-line); background: rgba(20,17,42,.85); color: var(--gc-text); font: 600 12px/1 var(--gc-font-body); cursor: pointer; }
.na-chat button:hover { border-color: var(--gc-cyan); }
.na-bubble { display: inline-block; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: #fff; color: #07060f; font: 700 13px/1.2 var(--gc-font-body); box-shadow: 0 8px 20px rgba(0,0,0,.4); animation: na-pop .25s var(--gc-ease-bounce) both; }
@keyframes na-pop { from { transform: scale(.7); } to { transform: none; } }
/* result screen */
.na-result { --_c: var(--gc-lime); position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; gap: 18px; width: min(100%, 520px); margin-inline: auto; padding: 30px 22px 22px; border-radius: 26px; text-align: center; background: #120f28; border: 1px solid color-mix(in srgb, var(--_c) 55%, transparent); box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 60px color-mix(in srgb, var(--_c) 22%, transparent); }
.na-result::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -120px; width: 420px; height: 300px; transform: translateX(-50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--_c) 45%, transparent), transparent); }
.na-result--win { --_c: var(--gc-lime); } .na-result--lose { --_c: var(--gc-magenta); } .na-result--draw { --_c: var(--gc-violet); }
.na-result__kicker { font: 700 11px/1 var(--gc-font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--gc-text-muted); }
.na-result__title { margin: 0; font: 900 clamp(2.4rem, 10vw, 3.6rem)/.95 var(--gc-font-display); text-transform: uppercase; color: var(--_c); text-shadow: 0 0 30px color-mix(in srgb, var(--_c) 60%, transparent); }
.na-result__players { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; }
.na-result__p { display: grid; justify-items: center; gap: 6px; padding: 14px 8px; border-radius: 16px; background: #171334; border: 1px solid var(--na-line); min-width: 0; }
.na-result__p .gc-avatar { width: 54px; height: 54px; font-size: 22px; }
.na-result__p b { max-width: 100%; font: 700 14px/1.2 var(--gc-font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.na-result__p small { font-size: 11px; color: var(--gc-text-dim); }
.na-result__p.is-winner { border-color: color-mix(in srgb, var(--_c) 70%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--_c) 25%, transparent); }
.na-result__p.is-winner::before { content: "♛"; color: var(--gc-coin); font-size: 18px; line-height: 1; margin-bottom: -2px; text-shadow: 0 0 10px rgba(255,200,61,.7); }
.na-result__score { font: 900 30px/1 var(--gc-font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.na-result__score .p1 { color: var(--gc-cyan); } .na-result__score .p2 { color: var(--gc-magenta); }
.na-result__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.na-result__stats div { padding: 10px; border-radius: 12px; background: #171334; border: 1px solid var(--na-line); }
.na-result__stats span { display: block; font-size: 11px; color: var(--gc-text-dim); }
.na-result__stats b { display: block; margin-top: 4px; font: 800 16px/1 var(--gc-font-display); font-variant-numeric: tabular-nums; }
.na-result__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.na-result__actions .gc-btn { width: 100%; }
.na-result__wait { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gc-text-muted); }
.na-result__note { margin: 0; font-size: 12px; color: var(--gc-text-dim); }
.na-confetti { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle, var(--gc-cyan) 2px, transparent 3px), radial-gradient(circle, var(--gc-magenta) 2px, transparent 3px), radial-gradient(circle, var(--gc-coin) 2px, transparent 3px); background-size: 90px 110px, 120px 90px, 70px 130px; background-position: 10px 20px, 40px 60px, 70px 10px; opacity: .3; -webkit-mask-image: linear-gradient(180deg, #000, transparent 38%); mask-image: linear-gradient(180deg, #000, transparent 38%); animation: na-fall 6s linear infinite; }
@keyframes na-fall { to { background-position: 10px 140px, 40px 150px, 70px 140px; } }
@media (max-width: 420px) { .na-result__actions { grid-template-columns: 1fr; } .na-result__score { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { .na-confetti, .na-ring.is-low, .na-bubble { animation: none; } }

/* ==========================================================================
   25. Online multiplayer: lobby, invite, waiting, tables, cards, chat, city HUD
   Preview: design/online-preview.html. Assets: games/backgammon/assets, games/_shared/cards,
   games/pasur/assets, games/city-builder/assets. Seat colours follow players, never rank:
   P1 cyan · P2 magenta · P3 lime · P4 coin (set with .na-seat.p1…p4, avatar ring + timer ring).
   ========================================================================== */
/* ---- online status ---- */
.na-online { display: inline-flex; align-items: center; gap: 7px; font: 600 12px/1 var(--gc-font-body); color: var(--gc-text-muted); font-variant-numeric: tabular-nums; }
.na-online::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--na-ok); box-shadow: 0 0 0 0 rgba(61,255,160,.6); animation: na-ping 2s ease-out infinite; }
.na-online b { color: var(--gc-text); font-weight: 800; }
.na-online--off::before { background: var(--gc-text-dim); animation: none; }
@keyframes na-ping { 70% { box-shadow: 0 0 0 7px rgba(61,255,160,0); } 100% { box-shadow: 0 0 0 0 rgba(61,255,160,0); } }

/* ---- lobby ---- */
.na-lobby { display: grid; gap: 18px; }
.na-lobby__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; }
.na-lobby__title { margin: 0; font: 900 clamp(1.6rem, 5vw, 2.4rem)/1 var(--gc-font-display); }
.na-lobby__title em { font-style: normal; background: var(--gc-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.na-qm { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px; border-radius: 20px; background: linear-gradient(120deg, rgba(34,228,255,.12), rgba(123,92,255,.12) 50%, rgba(255,46,166,.12)); border: 1px solid rgba(123,92,255,.45); box-shadow: 0 0 40px rgba(123,92,255,.18); }
.na-qm__game { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.na-qm__game::-webkit-scrollbar { display: none; }
.na-qm__game button { flex: none; height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--na-line); background: rgba(7,6,15,.55); color: var(--gc-text-muted); font: 700 13px/1 var(--gc-font-body); cursor: pointer; }
.na-qm__game button[aria-pressed="true"] { color: #07060f; background: var(--gc-cyan); border-color: var(--gc-cyan); box-shadow: 0 0 16px rgba(34,228,255,.4); }
.na-elo { display: grid; justify-items: end; gap: 3px; padding: 0 6px; font-size: 11px; color: var(--gc-text-dim); white-space: nowrap; }
.na-elo b { font: 800 16px/1 var(--gc-font-display); font-variant-numeric: tabular-nums; color: var(--gc-text); }
.na-gtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.na-gtile { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 20px; background: var(--na-surface); border: 1px solid var(--na-line); transition: transform .2s var(--gc-ease), border-color .2s, box-shadow .2s; }
.na-gtile:hover { transform: translateY(-3px); border-color: rgba(34,228,255,.55); box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 30px rgba(34,228,255,.15); }
.na-gtile__art { position: relative; aspect-ratio: 16 / 10; background: #0b0820 center / cover no-repeat; }
.na-gtile__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(20,17,42,.95)); }
.na-gtile__tags { position: absolute; z-index: 1; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; gap: 6px; }
.na-tag { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; font: 700 11px/1 var(--gc-font-body); color: var(--gc-text); background: rgba(7,6,15,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.12); white-space: nowrap; }
.na-tag--live { color: #07060f; background: var(--na-ok); border-color: transparent; }
.na-tag--new { color: #fff; background: var(--gc-magenta); border-color: transparent; }
.na-gtile__body { display: grid; gap: 10px; padding: 4px 14px 14px; margin-top: -18px; position: relative; }
.na-gtile__name { margin: 0; font: 800 17px/1.15 var(--gc-font-display); }
.na-gtile__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12px; color: var(--gc-text-dim); }
.na-gtile__actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.na-gtile__actions .gc-btn { width: 100%; }

/* ---- room code + invite modal ---- */
.na-modal { position: fixed; inset: 0; z-index: var(--gc-z-modal, 100); display: grid; place-items: center; padding: 16px; background: rgba(4,3,10,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.na-modal[hidden] { display: none; }
.na-modal--inline { position: relative; inset: auto; z-index: auto; padding: 28px 12px; border-radius: 22px; background: radial-gradient(600px 300px at 50% 30%, rgba(123,92,255,.25), transparent), #0a0818; }
.na-modal__box { position: relative; display: grid; gap: 16px; width: min(100%, 420px); padding: 24px 22px 20px; border-radius: 24px; background: #120f28; border: 1px solid rgba(123,92,255,.5); box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 50px rgba(123,92,255,.2); text-align: center; animation: na-pop .25s var(--gc-ease-bounce) both; }
.na-modal__close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 12px; border: 1px solid var(--na-line); background: transparent; color: var(--gc-text-muted); font-size: 16px; cursor: pointer; }
.na-modal__title { margin: 0; font: 800 20px/1.2 var(--gc-font-display); }
.na-modal__sub { margin: -8px 0 0; font-size: 13px; color: var(--gc-text-muted); }
.na-code { display: flex; justify-content: center; gap: 8px; }
.na-code span { width: 46px; height: 58px; display: grid; place-items: center; border-radius: 12px; background: #0b0820; border: 1px solid rgba(34,228,255,.45); font: 900 26px/1 var(--gc-font-display); color: var(--gc-cyan); text-shadow: 0 0 14px rgba(34,228,255,.6); box-shadow: inset 0 0 18px rgba(34,228,255,.08); }
.na-invite { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: center; text-align: start; }
.na-qr { display: block; width: 132px; aspect-ratio: 1; padding: 10px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 3px #0b0820, 0 0 0 5px rgba(123,92,255,.6), 0 0 26px rgba(123,92,255,.35); }
.na-qr > img, .na-qr > svg, .na-qr > canvas { display: block; width: 100%; height: 100%; }
.na-invite__actions { display: grid; gap: 8px; }
.na-invite__actions .gc-btn { width: 100%; }
.na-link { display: flex; align-items: center; gap: 6px; min-width: 0; height: 40px; padding: 0 6px 0 12px; border-radius: 12px; background: #0b0820; border: 1px solid var(--na-line); font: 600 12px/1 var(--gc-font-body); color: var(--gc-text-muted); }
.na-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.na-link button { flex: none; height: 30px; padding: 0 10px; border-radius: 9px; border: 0; background: var(--gc-violet); color: #fff; font: 700 12px/1 var(--gc-font-body); cursor: pointer; }
.na-link button.is-copied { background: var(--na-ok); color: #07060f; }
.na-join { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.na-join input { height: 46px; min-width: 0; padding: 0 14px; border-radius: 12px; border: 1px solid var(--na-line); background: #0b0820; color: var(--gc-text); font: 800 18px/1 var(--gc-font-display); letter-spacing: .3em; text-transform: uppercase; text-align: center; }
.na-join input:focus { outline: none; border-color: var(--gc-cyan); box-shadow: 0 0 0 3px rgba(34,228,255,.2); }

/* ---- waiting / matchmaking ---- */
.na-wait { position: relative; display: grid; justify-items: center; gap: 14px; padding: 30px 18px 22px; border-radius: 24px; background: #120f28; border: 1px solid var(--na-line); text-align: center; overflow: hidden; }
.na-radar { position: relative; width: 168px; height: 168px; display: grid; place-items: center; }
.na-radar::before, .na-radar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(34,228,255,.5); animation: na-radar 2.4s ease-out infinite; }
.na-radar::after { animation-delay: 1.2s; }
.na-radar .gc-avatar { width: 84px; height: 84px; font-size: 34px; position: relative; }
@keyframes na-radar { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.15); opacity: 0; } }
.na-wait__title { margin: 0; font: 800 20px/1.2 var(--gc-font-display); }
.na-wait__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; font-size: 13px; color: var(--gc-text-muted); }
.na-wait__meta b { font-variant-numeric: tabular-nums; color: var(--gc-text); }
.na-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; width: min(100%, 360px); }
.na-vs__p { display: grid; justify-items: center; gap: 6px; font: 700 13px/1.2 var(--gc-font-body); min-width: 0; }
.na-vs__p small { font-weight: 600; color: var(--gc-text-dim); }
.na-vs__x { font: 900 22px/1 var(--gc-font-display); color: var(--gc-magenta); text-shadow: 0 0 14px rgba(255,46,166,.6); }
.na-slot { width: 64px; height: 64px; border-radius: 50%; border: 2px dashed rgba(169,163,204,.4); display: grid; place-items: center; color: var(--gc-text-dim); font-size: 22px; animation: na-blink 1.6s ease-in-out infinite; }

/* ---- table + seats (2–4 players) ---- */
.na-table { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 26px; background: #0b0820 center / contain no-repeat; container-type: inline-size; }
.na-table--portrait { aspect-ratio: 10 / 16; max-width: 460px; margin-inline: auto; }
.na-seat { --_c: var(--gc-cyan); position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: rgba(7,6,15,.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--na-line); transform: translate(-50%, -50%); white-space: nowrap; transition: border-color .25s, box-shadow .25s; }
.na-seat.p2 { --_c: var(--gc-magenta); } .na-seat.p3 { --_c: var(--gc-lime); } .na-seat.p4 { --_c: var(--gc-coin); }
.na-seat[data-pos="bottom"] { left: 50%; top: 92%; } .na-seat[data-pos="top"] { left: 50%; top: 8%; }
.na-seat[data-pos="left"] { left: 2.5%; top: 50%; transform: translate(0, -50%); } .na-seat[data-pos="right"] { left: auto; right: 2.5%; top: 50%; transform: translate(0, -50%); }
.na-seat.is-turn { border-color: var(--_c); box-shadow: 0 0 22px color-mix(in srgb, var(--_c) 40%, transparent); }
.na-seat .na-pcard__av { width: 42px; height: 42px; }
.na-seat .gc-avatar { width: 32px; height: 32px; font-size: 13px; box-shadow: 0 0 0 2px #07060f; }
.na-seat:not(.is-turn) .na-ring { opacity: .25; }
.na-seat__name { font: 700 13px/1.1 var(--gc-font-body); max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.na-seat__sub { display: block; margin-top: 2px; font: 600 11px/1 var(--gc-font-body); color: var(--gc-text-dim); font-variant-numeric: tabular-nums; }
.na-seat__sub b { color: var(--_c); }
.na-seat.is-away { opacity: .55; }
.na-seat.is-away .na-seat__sub::before { content: "Reconnecting · "; color: var(--na-warn); }
.na-seat--empty { color: var(--gc-text-dim); border-style: dashed; padding: 10px 14px; font: 600 12px/1 var(--gc-font-body); }
.na-seat .na-bubble { position: absolute; bottom: calc(100% + 6px); left: 10px; }
.na-pool { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2cqi; width: 40%; }

/* ---- cards ---- */
.na-card { --w: 64px; flex: none; width: var(--w); aspect-ratio: 5 / 7; border-radius: calc(var(--w) * .07); background: center / 100% 100% no-repeat; box-shadow: 0 4px 10px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.2) inset; transition: transform .18s var(--gc-ease), box-shadow .18s; }
.na-card > img { display: block; width: 100%; height: 100%; }
.na-card.is-playable { cursor: pointer; }
.na-card.is-playable:hover, .na-card.is-selected { transform: translateY(-14%); box-shadow: 0 10px 24px rgba(0,0,0,.5), 0 0 0 2px var(--gc-cyan), 0 0 22px rgba(34,228,255,.55); }
.na-card.is-capturable { box-shadow: 0 4px 10px rgba(0,0,0,.45), 0 0 0 2px var(--gc-lime), 0 0 18px rgba(182,255,59,.5); }
.na-card.is-dealt { animation: na-deal .38s var(--gc-ease) both; }
@keyframes na-deal { from { transform: translate(var(--dx, 0), var(--dy, -120px)) rotate(-12deg) scale(.7); opacity: 0; } }
.na-hand { display: flex; justify-content: center; padding-top: 14px; }
.na-hand .na-card { margin-inline: calc(var(--w) * -.18); transform-origin: 50% 120%; }
.na-hand .na-card:nth-child(1) { rotate: -9deg; } .na-hand .na-card:nth-child(2) { rotate: -3deg; } .na-hand .na-card:nth-child(3) { rotate: 3deg; } .na-hand .na-card:nth-child(4) { rotate: 9deg; }
.na-sur { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font: 800 11px/1 var(--gc-font-display); letter-spacing: .08em; text-transform: uppercase; color: #07060f; background: var(--gc-grad-coin, var(--gc-coin)); box-shadow: 0 0 18px rgba(255,200,61,.5); }

/* ---- backgammon ---- */
.na-bg { position: relative; width: 100%; aspect-ratio: 13 / 9; background: center / contain no-repeat; container-type: inline-size; }
.na-checker { position: absolute; width: 6.15cqi; aspect-ratio: 1; border-radius: 50%; background: center / contain no-repeat; filter: drop-shadow(0 .4cqi .5cqi rgba(0,0,0,.55)); transform: translate(-50%, 0); transition: left .25s var(--gc-ease), top .25s var(--gc-ease); }
.na-checker.is-selected { filter: drop-shadow(0 0 1cqi var(--gc-cyan)) drop-shadow(0 .4cqi .5cqi rgba(0,0,0,.55)); }
.na-target { position: absolute; width: 6.9cqi; height: 27.7cqi; transform: translateX(-50%); border-radius: 1cqi; background: linear-gradient(180deg, rgba(182,255,59,.35), transparent); box-shadow: inset 0 0 0 2px rgba(182,255,59,.7); pointer-events: auto; cursor: pointer; animation: na-blink 1.2s ease-in-out infinite; }
.na-dice { display: inline-flex; gap: 10px; }
.na-die { width: 52px; height: 52px; background: center / contain no-repeat; filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)); }
.na-die.is-used { opacity: .35; filter: grayscale(.6); }
.na-die.is-rolling { animation: na-roll .55s var(--gc-ease) both; }
@keyframes na-roll { 0% { transform: translateY(-30px) rotate(-200deg) scale(.7); } 70% { transform: translateY(4px) rotate(12deg); } 100% { transform: none; } }
.na-cube { width: 46px; height: 46px; background: center / contain no-repeat; filter: drop-shadow(0 0 10px rgba(255,200,61,.45)); }

/* ---- quick chat: phrases, emoji picker, report ---- */
.na-qc { display: grid; gap: 10px; width: min(100%, 340px); padding: 12px; border-radius: 18px; background: rgba(18,15,40,.96); border: 1px solid var(--na-line); box-shadow: 0 20px 50px rgba(0,0,0,.55); }
.na-qc__tabs { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: #0b0820; }
.na-qc__tabs button { flex: 1; height: 32px; border: 0; border-radius: 9px; background: transparent; color: var(--gc-text-muted); font: 700 12px/1 var(--gc-font-body); cursor: pointer; }
.na-qc__tabs button[aria-selected="true"] { background: var(--na-surface-2); color: var(--gc-text); box-shadow: inset 0 0 0 1px rgba(123,92,255,.5); }
.na-qc .na-chat { justify-content: flex-start; }
.na-emoji { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.na-emoji button { aspect-ratio: 1; border: 0; border-radius: 12px; background: transparent; font-size: 24px; line-height: 1; cursor: pointer; transition: transform .15s var(--gc-ease-bounce), background .15s; }
.na-emoji button:hover, .na-emoji button:focus-visible { background: rgba(123,92,255,.2); transform: scale(1.15); outline: none; }
.na-qc__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--na-line); font-size: 11px; color: var(--gc-text-dim); }
.na-report { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 9px; border: 1px solid rgba(255,107,133,.45); background: transparent; color: var(--na-bad); font: 700 12px/1 var(--gc-font-body); cursor: pointer; }
.na-report:hover { background: rgba(255,107,133,.12); }
.na-bubble--emoji { padding: 4px 8px; font-size: 26px; background: rgba(255,255,255,.95); }
.na-bubble--r { border-radius: 14px 14px 4px 14px; }

/* ---- rematch status under .na-result ---- */
.na-rematch { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 14px; background: rgba(123,92,255,.12); border: 1px solid rgba(123,92,255,.4); font-size: 13px; color: var(--gc-text-muted); }
.na-rematch__dots { display: inline-flex; gap: 4px; }
.na-rematch__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(169,163,204,.3); }
.na-rematch__dots i.is-ready { background: var(--na-ok); box-shadow: 0 0 8px rgba(61,255,160,.7); }
.na-elo-change { font: 800 13px/1 var(--gc-font-display); font-variant-numeric: tabular-nums; }
.na-elo-change.up { color: var(--na-ok); } .na-elo-change.down { color: var(--na-bad); }

/* ---- city-builder HUD ---- */
.na-city { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; min-height: 560px; padding: 10px; border-radius: 24px; overflow: hidden; background: radial-gradient(900px 500px at 50% 55%, #1c3a5c 0, #0d1630 55%, #07060f 100%); border: 1px solid var(--na-line); }
.na-city__top { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.na-res { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px 0 5px; border-radius: 999px; background: rgba(7,6,15,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--na-line); font: 800 14px/1 var(--gc-font-display); font-variant-numeric: tabular-nums; }
.na-res i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 15px; background: rgba(255,255,255,.08); }
.na-res small { font: 600 11px/1 var(--gc-font-body); color: var(--na-ok); }
.na-res--coin i { background: rgba(255,200,61,.2); } .na-res--wood i { background: rgba(182,255,59,.16); } .na-res--power i { background: rgba(34,228,255,.18); } .na-res--pop i { background: rgba(255,46,166,.18); }
.na-res.is-short { border-color: rgba(255,107,133,.6); } .na-res.is-short small { color: var(--na-bad); }
.na-city__value { margin-inline-start: auto; display: grid; justify-items: end; gap: 3px; padding: 6px 12px; border-radius: 14px; background: rgba(7,6,15,.78); border: 1px solid rgba(255,200,61,.4); font-size: 11px; color: var(--gc-text-dim); }
.na-city__value b { font: 900 16px/1 var(--gc-font-display); color: var(--gc-coin); font-variant-numeric: tabular-nums; }
.na-city__map { position: relative; z-index: 1; min-height: 300px; }
.na-iso { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.na-iso > img { position: absolute; max-width: none; height: auto; pointer-events: none; }
.na-city__side { position: absolute; z-index: 3; right: 10px; top: 64px; display: grid; gap: 8px; }
.na-tilecard { position: absolute; z-index: 4; left: 10px; top: 64px; display: grid; gap: 10px; width: 230px; padding: 12px; border-radius: 18px; background: rgba(18,15,40,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(34,228,255,.4); box-shadow: 0 20px 40px rgba(0,0,0,.5); }
.na-tilecard__head { display: flex; align-items: center; gap: 10px; }
.na-tilecard__head img { width: 56px; height: 56px; object-fit: contain; }
.na-tilecard__head b { display: block; font: 800 15px/1.2 var(--gc-font-display); }
.na-lv { display: inline-flex; gap: 3px; margin-top: 4px; }
.na-lv i { width: 16px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.14); }
.na-lv i.on { background: var(--gc-cyan); box-shadow: 0 0 6px rgba(34,228,255,.7); }
.na-tilecard__rows { display: grid; gap: 4px; font-size: 12px; color: var(--gc-text-muted); }
.na-tilecard__rows div { display: flex; justify-content: space-between; } .na-tilecard__rows b { color: var(--gc-text); font-variant-numeric: tabular-nums; }
.na-build { position: relative; z-index: 3; display: flex; gap: 8px; padding: 8px; overflow-x: auto; scrollbar-width: none; border-radius: 20px; background: rgba(7,6,15,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--na-line); }
.na-build::-webkit-scrollbar { display: none; }
.na-build button { flex: none; display: grid; justify-items: center; gap: 4px; width: 84px; padding: 6px 4px 8px; border-radius: 14px; border: 1px solid transparent; background: rgba(255,255,255,.04); color: var(--gc-text); font: 700 11px/1.1 var(--gc-font-body); cursor: pointer; }
.na-build button img { width: 60px; height: 52px; object-fit: contain; }
.na-build button small { font: 800 11px/1 var(--gc-font-display); color: var(--gc-coin); font-variant-numeric: tabular-nums; }
.na-build button[aria-pressed="true"] { border-color: var(--gc-cyan); background: rgba(34,228,255,.1); box-shadow: 0 0 18px rgba(34,228,255,.25); }
.na-build button:disabled { opacity: .4; cursor: not-allowed; }
.na-build button:disabled small { color: var(--na-bad); }
.na-toast-gain { position: absolute; z-index: 5; font: 900 16px/1 var(--gc-font-display); color: var(--gc-coin); text-shadow: 0 0 12px rgba(255,200,61,.7); animation: na-rise 1.2s ease-out both; pointer-events: none; }
@keyframes na-rise { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-40px); opacity: 0; } }

@media (max-width: 640px) {
  .na-qm { grid-template-columns: 1fr auto; } .na-qm__game { grid-column: 1 / -1; }
  .na-invite { grid-template-columns: 1fr; justify-items: center; } .na-invite__actions { width: 100%; }
  .na-code span { width: 40px; height: 52px; font-size: 22px; }
  .na-seat { padding: 4px 9px 4px 4px; gap: 6px; } .na-seat .na-pcard__av { width: 34px; height: 34px; } .na-seat .gc-avatar { width: 26px; height: 26px; font-size: 11px; }
  .na-seat__name { font-size: 11px; max-width: 72px; }
  .na-seat[data-pos="left"], .na-seat[data-pos="right"] { flex-direction: column; padding: 4px; border-radius: 16px; text-align: center; }
  .na-card { --w: 46px; }
  .na-die { width: 40px; height: 40px; }
  .na-city { min-height: 620px; } .na-tilecard { left: 10px; right: 10px; top: auto; bottom: 108px; width: auto; }
  .na-city__value { margin-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) { .na-online::before, .na-radar::before, .na-radar::after, .na-slot, .na-target, .na-card.is-dealt, .na-die.is-rolling, .na-toast-gain { animation: none; } }