/* ==========================================================================
   Neon Arcade — Design tokens + core components
   Theme: bold arcade / neon on deep dark.
   Usage: <link rel="stylesheet" href="design/tokens.css">  — all classes are prefixed "gc-".
   Fonts: loaded from Google Fonts below; system fallbacks keep it working offline.
   RTL: everything uses logical properties, so <html dir="rtl"> works for Persian.
   ========================================================================== */

/* Fonts (Unbounded, Inter, Press Start 2P) load non-blocking from each page <head> (preconnect + media="print" onload), not via @import: an @import here blocked first paint (Lighthouse LCP 7.4 s). */

:root {
  /* ---- Color: base ---- */
  --gc-bg:            #07060f;   /* page background */
  --gc-bg-2:          #0d0b1a;   /* section alt background */
  --gc-surface:       #14112a;   /* cards, panels */
  --gc-surface-2:     #1c1838;   /* raised / hover */
  --gc-surface-3:     #26204a;   /* inputs, chips */
  --gc-border:        #2e2858;
  --gc-border-strong: #4a3f8a;

  /* ---- Color: text ---- */
  --gc-text:          #f4f2ff;
  --gc-text-muted:    #a9a3cc;
  --gc-text-dim:      #6f6999;
  --gc-text-on-neon:  #07060f;

  /* ---- Color: neon brand ---- */
  --gc-cyan:          #22e4ff;   /* primary action */
  --gc-magenta:       #ff2ea6;   /* accent / hot */
  --gc-violet:        #7b5cff;   /* secondary */
  --gc-lime:          #b6ff3b;   /* success / points gained */
  --gc-coin:          #ffc83d;   /* coins, rewards, wallet */

  /* ---- Color: status ---- */
  --gc-success:       #3dffa0;
  --gc-warning:       #ffb02e;
  --gc-danger:        #ff4d6d;
  --gc-info:          #22e4ff;

  /* ---- Color: podium ---- */
  --gc-gold:          #ffd23f;
  --gc-gold-2:        #ff9f1c;
  --gc-silver:        #dfe7f5;
  --gc-silver-2:      #8fa2c4;
  --gc-bronze:        #f0a060;
  --gc-bronze-2:      #a8552a;

  /* ---- Gradients ---- */
  --gc-grad-brand:    linear-gradient(135deg, #22e4ff 0%, #7b5cff 50%, #ff2ea6 100%);
  --gc-grad-hot:      linear-gradient(135deg, #ff2ea6 0%, #ff7a3d 100%);
  --gc-grad-coin:     linear-gradient(135deg, #fff07a 0%, #ffc83d 45%, #ff9f1c 100%);
  --gc-grad-surface:  linear-gradient(180deg, #1c1838 0%, #14112a 100%);
  --gc-grad-bg:       radial-gradient(1200px 600px at 15% -10%, rgba(123,92,255,.28), transparent 60%),
                      radial-gradient(900px 500px at 100% 0%, rgba(255,46,166,.18), transparent 60%),
                      radial-gradient(800px 600px at 50% 120%, rgba(34,228,255,.14), transparent 60%),
                      #07060f;

  --gc-grad-lime:     linear-gradient(135deg, #b6ff3b 0%, #22e4ff 100%);
  --gc-grad-violet:   linear-gradient(135deg, #7b5cff 0%, #ff2ea6 100%);
  --gc-grad-sheen:    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.14) 48%, transparent 66%);
  --gc-glass:         rgba(20,17,42,.62);   /* frosted panels over art */
  --gc-glass-border:  rgba(164,140,255,.22);

  /* Game art lives in design/img/*.svg and is wired up in design/ui.css (.gc-hero, .gc-thumb[data-game]). */

  /* ---- Typography ---- */
  --gc-font-display:  "Unbounded", system-ui, sans-serif;  /* headings, logo, big numbers */
  --gc-font-body:     "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gc-font-pixel:    "Press Start 2P", ui-monospace, monospace;         /* short labels only — never numbers (its comma breaks) */
  --gc-font-num:      var(--gc-font-display);                            /* scores, points, ranks: always with tabular-nums */
  --gc-font-fa:       system-ui, sans-serif;                             /* Persian UI (site is English-only; Vazirmatn no longer loaded) */

  --gc-fs-xs:   0.75rem;   /* 12 */
  --gc-fs-sm:   0.875rem;  /* 14 */
  --gc-fs-md:   1rem;      /* 16 body */
  --gc-fs-lg:   1.125rem;  /* 18 */
  --gc-fs-xl:   1.5rem;    /* 24 */
  --gc-fs-2xl:  2rem;      /* 32 */
  --gc-fs-3xl:  clamp(2.25rem, 4vw + 1rem, 3.5rem);
  --gc-fs-hero: clamp(2.75rem, 7vw + 1rem, 5.5rem);

  --gc-fw-regular: 400;
  --gc-fw-medium:  500;
  --gc-fw-semibold:600;
  --gc-fw-bold:    700;
  --gc-fw-black:   900;

  --gc-lh-tight: 1.05;
  --gc-lh-snug:  1.25;
  --gc-lh-body:  1.6;

  /* ---- Spacing (4px grid) ---- */
  --gc-space-1: 4px;
  --gc-space-2: 8px;
  --gc-space-3: 12px;
  --gc-space-4: 16px;
  --gc-space-5: 24px;
  --gc-space-6: 32px;
  --gc-space-7: 48px;
  --gc-space-8: 64px;
  --gc-space-9: 96px;

  --gc-container: 1240px;
  --gc-header-h:  68px;
  --gc-tabbar-h:  64px;   /* mobile bottom nav */
  --gc-safe-b:    env(safe-area-inset-bottom, 0px);
  --gc-tap:       44px;   /* minimum touch target */

  /* ---- Radii ---- */
  --gc-radius-xs:   6px;
  --gc-radius-sm:   10px;
  --gc-radius-md:   14px;
  --gc-radius-lg:   20px;
  --gc-radius-xl:   28px;
  --gc-radius-pill: 999px;

  /* ---- Shadows & glows ---- */
  --gc-shadow-sm:   0 2px 8px rgba(0,0,0,.35);
  --gc-shadow-md:   0 10px 30px rgba(0,0,0,.45);
  --gc-shadow-lg:   0 24px 60px rgba(0,0,0,.55);
  --gc-glow-cyan:   0 0 0 1px rgba(34,228,255,.55), 0 0 18px rgba(34,228,255,.45), 0 0 48px rgba(34,228,255,.2);
  --gc-glow-magenta:0 0 0 1px rgba(255,46,166,.55), 0 0 18px rgba(255,46,166,.45), 0 0 48px rgba(255,46,166,.2);
  --gc-glow-violet: 0 0 0 1px rgba(123,92,255,.6),  0 0 18px rgba(123,92,255,.45);
  --gc-glow-coin:   0 0 0 1px rgba(255,200,61,.6),  0 0 20px rgba(255,200,61,.5), 0 0 50px rgba(255,159,28,.25);
  --gc-glow-lime:   0 0 0 1px rgba(182,255,59,.6),  0 0 18px rgba(182,255,59,.45);
  --gc-text-glow:   0 0 12px rgba(34,228,255,.6);

  /* ---- Motion ---- */
  --gc-ease:        cubic-bezier(.2,.8,.2,1);
  --gc-ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --gc-dur-fast:    120ms;
  --gc-dur:         220ms;
  --gc-dur-slow:    480ms;

  /* ---- Layers ---- */
  --gc-z-header: 50;
  --gc-z-modal:  100;
  --gc-z-toast:  120;

  color-scheme: dark;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

.gc-body, body.gc {
  margin: 0;
  background: var(--gc-grad-bg);
  background-attachment: fixed;
  color: var(--gc-text);
  font-family: var(--gc-font-body);
  font-size: var(--gc-fs-md);
  line-height: var(--gc-lh-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh; min-height: 100dvh;
}
::selection { background: rgba(255,46,166,.45); color: #fff; }
[dir="rtl"] .gc-body, [dir="rtl"] body.gc, :lang(fa) { font-family: var(--gc-font-fa); }

.gc-container { width: min(100% - 2 * var(--gc-space-5), var(--gc-container)); margin-inline: auto; }

.gc-h1, .gc-h2, .gc-h3, .gc-display {
  font-family: var(--gc-font-display);
  font-weight: var(--gc-fw-black);
  line-height: var(--gc-lh-tight);
  letter-spacing: -0.01em;
  margin: 0 0 var(--gc-space-4);
}
.gc-display { font-size: var(--gc-fs-hero); text-transform: uppercase; }
.gc-h1 { font-size: var(--gc-fs-3xl); }
.gc-h2 { font-size: var(--gc-fs-2xl); font-weight: var(--gc-fw-bold); }
.gc-h3 { font-size: var(--gc-fs-xl);  font-weight: var(--gc-fw-bold); }
.gc-eyebrow {
  font-family: var(--gc-font-pixel); font-size: 10px; letter-spacing: .12em;
  color: var(--gc-cyan); text-transform: uppercase; text-shadow: var(--gc-text-glow);
}
.gc-muted { color: var(--gc-text-muted); }
.gc-gradient-text {
  background: var(--gc-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gc-pixel { font-family: var(--gc-font-pixel); letter-spacing: .04em; }
.gc-num   { font-family: var(--gc-font-num); font-variant-numeric: tabular-nums; letter-spacing: 0; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gc-cyan); outline-offset: 3px; border-radius: var(--gc-radius-xs);
}

/* ==========================================================================
   Buttons  —  .gc-btn + modifier
   --primary (cyan) · --hot (magenta) · --reward (coin/gold) · --secondary · --ghost · --danger
   sizes: --sm · --lg · --block      icon-only: --icon
   ========================================================================== */
.gc-btn {
  --_bg: var(--gc-surface-3); --_fg: var(--gc-text); --_glow: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gc-space-2);
  min-height: 48px; padding: 0 var(--gc-space-5);
  font: var(--gc-fw-bold) var(--gc-fs-md)/1 var(--gc-font-display);
  letter-spacing: .02em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: var(--_fg); background: var(--_bg);
  border: 1px solid transparent; border-radius: var(--gc-radius-pill);
  box-shadow: var(--_glow); cursor: pointer; user-select: none;
  transition: transform var(--gc-dur-fast) var(--gc-ease), box-shadow var(--gc-dur) var(--gc-ease),
              filter var(--gc-dur) var(--gc-ease), background var(--gc-dur) var(--gc-ease);
}
.gc-btn:hover  { transform: translateY(-2px); filter: brightness(1.08); }
.gc-btn:active { transform: translateY(1px) scale(.98); }
.gc-btn:disabled, .gc-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; filter: grayscale(.4); }

.gc-btn--primary   { --_bg: var(--gc-cyan);    --_fg: var(--gc-text-on-neon); --_glow: var(--gc-glow-cyan); }
.gc-btn--hot       { --_bg: var(--gc-grad-hot); --_fg: #fff;                  --_glow: var(--gc-glow-magenta); }
.gc-btn--reward    { --_bg: var(--gc-grad-coin); --_fg: var(--gc-text-on-neon); --_glow: var(--gc-glow-coin); }
.gc-btn--secondary { --_bg: transparent; --_fg: var(--gc-text); border-color: var(--gc-border-strong); }
.gc-btn--secondary:hover { border-color: var(--gc-violet); box-shadow: var(--gc-glow-violet); }
.gc-btn--ghost     { --_bg: transparent; --_fg: var(--gc-text-muted); }
.gc-btn--ghost:hover { --_fg: var(--gc-text); --_bg: var(--gc-surface-2); }
.gc-btn--danger    { --_bg: transparent; --_fg: var(--gc-danger); border-color: rgba(255,77,109,.5); }
.gc-btn--danger:hover { --_bg: var(--gc-danger); --_fg: #fff; }

.gc-btn--sm    { min-height: 36px; padding: 0 var(--gc-space-4); font-size: var(--gc-fs-sm); }
.gc-btn--lg    { min-height: 60px; padding: 0 var(--gc-space-6); font-size: var(--gc-fs-lg); }
.gc-btn--block { display: flex; width: 100%; }
.gc-btn--icon  { width: 48px; padding: 0; }

/* Pulsing CTA (e.g. "Watch ad → Double points"). Respect reduced motion. */
.gc-btn--pulse { animation: gc-pulse 1.8s var(--gc-ease) infinite; }
@keyframes gc-pulse {
  0%, 100% { box-shadow: var(--_glow); }
  50%      { box-shadow: var(--_glow), 0 0 0 10px rgba(255,200,61,0); transform: scale(1.03); }
}

/* ==========================================================================
   Cards
   ========================================================================== */
.gc-card {
  background: var(--gc-grad-surface);
  border: 1px solid var(--gc-border);
  border-radius: var(--gc-radius-lg);
  padding: var(--gc-space-5);
  box-shadow: var(--gc-shadow-md);
}
.gc-card--interactive { transition: transform var(--gc-dur) var(--gc-ease), border-color var(--gc-dur), box-shadow var(--gc-dur); cursor: pointer; }
.gc-card--interactive:hover { transform: translateY(-4px); border-color: var(--gc-cyan); box-shadow: var(--gc-shadow-lg), var(--gc-glow-cyan); }
.gc-card--glow-magenta { border-color: rgba(255,46,166,.5); box-shadow: var(--gc-shadow-md), var(--gc-glow-magenta); }
.gc-card--coin         { border-color: rgba(255,200,61,.5); box-shadow: var(--gc-shadow-md), var(--gc-glow-coin); }

/* Game tile in the lobby grid */
.gc-game-grid { display: grid; gap: var(--gc-space-4); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.gc-game-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--gc-surface); border: 1px solid var(--gc-border); border-radius: var(--gc-radius-lg);
  color: inherit; text-decoration: none;
  transition: transform var(--gc-dur) var(--gc-ease), box-shadow var(--gc-dur), border-color var(--gc-dur);
}
.gc-game-card:hover { transform: translateY(-4px) scale(1.01); border-color: var(--gc-magenta); box-shadow: var(--gc-glow-magenta); }
.gc-game-card__thumb { aspect-ratio: 4 / 3; background: var(--gc-grad-brand); object-fit: cover; width: 100%; display: block; }
.gc-game-card__body  { padding: var(--gc-space-3) var(--gc-space-4) var(--gc-space-4); }
.gc-game-card__title { font: var(--gc-fw-bold) var(--gc-fs-md)/1.2 var(--gc-font-display); margin: 0 0 var(--gc-space-1); }
.gc-game-card__meta  { display: flex; justify-content: space-between; font-size: var(--gc-fs-xs); color: var(--gc-text-muted); }
.gc-game-card__badge { position: absolute; inset-block-start: var(--gc-space-2); inset-inline-start: var(--gc-space-2); }

/* ==========================================================================
   Chips, badges, tabs
   ========================================================================== */
.gc-chips { display: flex; gap: var(--gc-space-2); overflow-x: auto; scrollbar-width: none; padding-block: var(--gc-space-1); }
.gc-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 var(--gc-space-4);
  background: var(--gc-surface-3); color: var(--gc-text-muted);
  border: 1px solid var(--gc-border); border-radius: var(--gc-radius-pill);
  font-size: var(--gc-fs-sm); font-weight: var(--gc-fw-medium); cursor: pointer;
  transition: all var(--gc-dur) var(--gc-ease);
}
.gc-chip:hover { color: var(--gc-text); border-color: var(--gc-border-strong); }
.gc-chip[aria-pressed="true"], .gc-chip.is-active { background: var(--gc-violet); color: #fff; border-color: var(--gc-violet); box-shadow: var(--gc-glow-violet); }

.gc-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
  font: var(--gc-fw-bold) 10px/1.2 var(--gc-font-body); letter-spacing: .06em; text-transform: uppercase;
  border-radius: var(--gc-radius-xs); background: var(--gc-surface-3); color: var(--gc-text);
}
.gc-badge--new  { background: var(--gc-lime);    color: var(--gc-text-on-neon); }
.gc-badge--hot  { background: var(--gc-magenta); color: #fff; }
.gc-badge--coin { background: var(--gc-coin);    color: var(--gc-text-on-neon); }
.gc-badge--flag { background: rgba(255,77,109,.15); color: var(--gc-danger); border: 1px solid rgba(255,77,109,.4); }
.gc-badge--ok   { background: rgba(61,255,160,.12); color: var(--gc-success); border: 1px solid rgba(61,255,160,.35); }
.gc-badge--wait { background: rgba(255,176,46,.12); color: var(--gc-warning); border: 1px solid rgba(255,176,46,.35); }

.gc-tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--gc-surface); border: 1px solid var(--gc-border); border-radius: var(--gc-radius-pill);
}
.gc-tab {
  flex: none; white-space: nowrap;
  min-height: 40px; padding: 0 var(--gc-space-5); border: 0; border-radius: var(--gc-radius-pill);
  background: transparent; color: var(--gc-text-muted);
  font: var(--gc-fw-bold) var(--gc-fs-sm)/1 var(--gc-font-display); text-transform: uppercase; letter-spacing: .04em;
  cursor: pointer; transition: all var(--gc-dur) var(--gc-ease);
}
.gc-tab:hover { color: var(--gc-text); }
.gc-tab[aria-selected="true"], .gc-tab.is-active { background: var(--gc-cyan); color: var(--gc-text-on-neon); box-shadow: var(--gc-glow-cyan); }

/* ==========================================================================
   Forms
   ========================================================================== */
.gc-field { display: grid; gap: 6px; margin-bottom: var(--gc-space-4); }
.gc-label { font-size: var(--gc-fs-sm); font-weight: var(--gc-fw-medium); color: var(--gc-text-muted); }
.gc-input {
  width: 100%; min-height: 48px; padding: 0 var(--gc-space-4);
  background: var(--gc-surface-3); color: var(--gc-text);
  border: 1px solid var(--gc-border); border-radius: var(--gc-radius-md);
  font: inherit; transition: border-color var(--gc-dur), box-shadow var(--gc-dur);
}
.gc-input::placeholder { color: var(--gc-text-dim); }
.gc-input:focus { outline: none; border-color: var(--gc-cyan); box-shadow: var(--gc-glow-cyan); }
.gc-input[aria-invalid="true"] { border-color: var(--gc-danger); }
.gc-help  { font-size: var(--gc-fs-xs); color: var(--gc-text-dim); }
.gc-error { font-size: var(--gc-fs-xs); color: var(--gc-danger); }

/* ==========================================================================
   Coins / points / wallet
   ========================================================================== */
.gc-coin {
  display: inline-flex; align-items: center; gap: 6px;
  font: var(--gc-fw-black) var(--gc-fs-md)/1 var(--gc-font-num); font-variant-numeric: tabular-nums; color: var(--gc-coin);
}
.gc-coin::before {
  content: ""; width: 1.1em; height: 1.1em; border-radius: 50%;
  background: var(--gc-grad-coin); box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), 0 0 10px rgba(255,200,61,.6);
}
.gc-points-gain { color: var(--gc-lime); font-family: var(--gc-font-num); font-weight: var(--gc-fw-black); font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgba(182,255,59,.6); }

.gc-progress { height: 10px; background: var(--gc-surface-3); border-radius: var(--gc-radius-pill); overflow: hidden; }
.gc-progress > span { display: block; height: 100%; width: var(--value, 40%); background: var(--gc-grad-brand); border-radius: inherit; box-shadow: var(--gc-glow-cyan); }

/* ==========================================================================
   Game player: HUD + ad slots
   ========================================================================== */
.gc-player { display: grid; gap: var(--gc-space-4); grid-template-columns: minmax(0, 1fr) 300px; }
@media (max-width: 1024px) { .gc-player { grid-template-columns: 1fr; } }

.gc-game-frame {
  position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden;
  background: #000; border: 2px solid var(--gc-border-strong); border-radius: var(--gc-radius-lg);
  box-shadow: var(--gc-shadow-lg), var(--gc-glow-violet);
}
.gc-game-frame > iframe, .gc-game-frame > canvas { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.gc-hud {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gc-space-4);
  padding: var(--gc-space-3) var(--gc-space-4);
  background: rgba(7,6,15,.75); backdrop-filter: blur(8px);
  border: 1px solid var(--gc-border); border-radius: var(--gc-radius-md);
  font-family: var(--gc-font-pixel); font-size: 12px;
}
.gc-hud__stat  { display: grid; gap: 4px; }
.gc-hud__label { font-size: 8px; color: var(--gc-text-dim); letter-spacing: .12em; text-transform: uppercase; }
.gc-hud__value { color: var(--gc-cyan); text-shadow: var(--gc-text-glow); font: var(--gc-fw-black) 18px/1 var(--gc-font-num); font-variant-numeric: tabular-nums; }
.gc-hud__value--score { color: var(--gc-lime); text-shadow: 0 0 10px rgba(182,255,59,.6); }
.gc-hud__value--time  { color: var(--gc-magenta); text-shadow: 0 0 10px rgba(255,46,166,.6); }

/* Ad slots — always labelled "Ad", fixed size so layout never jumps (CLS). */
.gc-ad-slot {
  position: relative; display: grid; place-items: center; margin-inline: auto;
  background: repeating-linear-gradient(45deg, #110e22 0 10px, #0d0b1a 10px 20px);
  border: 1px dashed var(--gc-border-strong); border-radius: var(--gc-radius-sm);
  color: var(--gc-text-dim); font-size: var(--gc-fs-xs); text-align: center;
}
.gc-ad-slot::before {
  content: "Ad"; position: absolute; inset-block-start: 4px; inset-inline-start: 6px;
  font: var(--gc-fw-bold) 9px/1 var(--gc-font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--gc-text-dim);
}
.gc-ad-slot--leaderboard { width: 100%; max-width: 728px; height: 90px; }   /* 728x90  desktop top banner */
.gc-ad-slot--banner      { width: 100%; max-width: 320px; height: 50px; }   /* 320x50  mobile banner */
.gc-ad-slot--rectangle   { width: 300px; height: 250px; }                   /* 300x250 sidebar / results */
.gc-ad-slot--skyscraper  { width: 300px; height: 600px; }                   /* 300x600 desktop sidebar */
.gc-ad-slot--interstitial{ position: fixed; inset: 0; z-index: var(--gc-z-modal); border-radius: 0; border: 0; background: rgba(7,6,15,.96); }

/* ==========================================================================
   Results screen
   ========================================================================== */
.gc-results { min-width: 0; text-align: center; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gc-space-4); justify-items: center; }
.gc-results__score {
  max-width: 100%;
  font: var(--gc-fw-black) clamp(2.75rem, 8vw, 4.5rem)/1 var(--gc-font-display);
  background: var(--gc-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gc-double-offer {
  display: grid; gap: var(--gc-space-3); justify-items: center; width: min(100%, 420px);
  padding: var(--gc-space-5); border-radius: var(--gc-radius-xl);
  background: linear-gradient(180deg, rgba(255,200,61,.14), rgba(255,159,28,.04));
  border: 1px solid rgba(255,200,61,.5); box-shadow: var(--gc-glow-coin);
}

/* ==========================================================================
   Leaderboard: podium + list
   Markup:
   <div class="gc-podium">
     <div class="gc-podium__place gc-podium__place--2">…avatar, name, score…<div class="gc-podium__step">2</div></div>
     <div class="gc-podium__place gc-podium__place--1">…<div class="gc-podium__step">1</div></div>
     <div class="gc-podium__place gc-podium__place--3">…<div class="gc-podium__step">3</div></div>
   </div>
   (Order in HTML = 2,1,3 so 1st stands in the middle.)
   ========================================================================== */
.gc-podium {
  display: grid; grid-template-columns: repeat(3, 1fr); align-items: end;
  gap: var(--gc-space-3); max-width: 640px; margin-inline: auto; padding-top: var(--gc-space-6);
}
.gc-podium__place {
  --_c1: var(--gc-silver); --_c2: var(--gc-silver-2); --_h: 120px;
  display: flex; flex-direction: column; align-items: center; gap: var(--gc-space-2); text-align: center;
}
.gc-podium__place--1 { --_c1: var(--gc-gold);   --_c2: var(--gc-gold-2);   --_h: 170px; }
.gc-podium__place--2 { --_c1: var(--gc-silver); --_c2: var(--gc-silver-2); --_h: 125px; }
.gc-podium__place--3 { --_c1: var(--gc-bronze); --_c2: var(--gc-bronze-2); --_h: 95px; }

.gc-podium__avatar {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--gc-surface-3);
  border: 3px solid var(--_c1); box-shadow: 0 0 20px color-mix(in srgb, var(--_c1) 60%, transparent);
}
.gc-podium__place--1 .gc-podium__avatar { width: 92px; height: 92px; }
.gc-podium__place--1::before {            /* crown */
  content: "♛"; font-size: 28px; line-height: 1; color: var(--gc-gold);
  text-shadow: 0 0 14px rgba(255,210,63,.8); margin-bottom: -6px;
}
.gc-podium__name  { font: var(--gc-fw-bold) var(--gc-fs-sm)/1.2 var(--gc-font-display); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-podium__score { font: var(--gc-fw-black) 14px/1 var(--gc-font-num); font-variant-numeric: tabular-nums; color: var(--_c1); }
.gc-podium__prize { font-size: var(--gc-fs-xs); color: var(--gc-text-muted); }
.gc-podium__step {
  width: 100%; height: var(--_h); display: grid; place-items: start center; padding-top: var(--gc-space-3);
  font: var(--gc-fw-black) 2.5rem/1 var(--gc-font-display); color: var(--gc-text-on-neon);
  background: linear-gradient(180deg, var(--_c1), var(--_c2));
  border-radius: var(--gc-radius-md) var(--gc-radius-md) var(--gc-radius-xs) var(--gc-radius-xs);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 0 30px color-mix(in srgb, var(--_c1) 40%, transparent);
}

.gc-rank-list { list-style: none; margin: var(--gc-space-5) 0 0; padding: 0; display: grid; gap: var(--gc-space-2); }
.gc-rank-row {
  display: grid; grid-template-columns: 48px 40px 1fr auto; align-items: center; gap: var(--gc-space-3);
  padding: var(--gc-space-3) var(--gc-space-4);
  background: var(--gc-surface); border: 1px solid var(--gc-border); border-radius: var(--gc-radius-md);
}
.gc-rank-row__pos    { font: var(--gc-fw-bold) 14px/1 var(--gc-font-num); font-variant-numeric: tabular-nums; color: var(--gc-text-dim); }
.gc-rank-row__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--gc-surface-3); object-fit: cover; }
.gc-rank-row__name   { font-weight: var(--gc-fw-semibold, 600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-rank-row__score  { font: var(--gc-fw-black) 15px/1 var(--gc-font-num); font-variant-numeric: tabular-nums; color: var(--gc-cyan); }
.gc-rank-row--me     { border-color: var(--gc-cyan); box-shadow: var(--gc-glow-cyan); position: sticky; bottom: var(--gc-space-3); background: var(--gc-surface-2); }

/* ==========================================================================
   Rewards store
   ========================================================================== */
.gc-reward-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gc-space-3); text-align: center; min-width: 0; }
.gc-reward-card__img {
  aspect-ratio: 16 / 10; border-radius: var(--gc-radius-md); display: grid; place-items: center;
  font: var(--gc-fw-black) var(--gc-fs-xl)/1 var(--gc-font-display); color: #fff;
  background: var(--gc-grad-brand);
}
.gc-reward-card__price { justify-self: center; }

/* ==========================================================================
   Admin
   ========================================================================== */
.gc-admin { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
@media (max-width: 900px) { .gc-admin { grid-template-columns: 1fr; } }
.gc-admin__nav { background: var(--gc-bg-2); border-inline-end: 1px solid var(--gc-border); padding: var(--gc-space-5) var(--gc-space-3); }
.gc-admin__nav a {
  display: flex; align-items: center; gap: var(--gc-space-3); padding: var(--gc-space-3) var(--gc-space-4);
  color: var(--gc-text-muted); text-decoration: none; border-radius: var(--gc-radius-sm);
}
.gc-admin__nav a:hover { background: var(--gc-surface); color: var(--gc-text); }
.gc-admin__nav a[aria-current="page"] { background: var(--gc-surface-2); color: var(--gc-cyan); box-shadow: inset 3px 0 0 var(--gc-cyan); }

.gc-kpis { display: grid; gap: var(--gc-space-4); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.gc-kpi { background: var(--gc-surface); border: 1px solid var(--gc-border); border-radius: var(--gc-radius-md); padding: var(--gc-space-4); }
.gc-kpi__label { font-size: var(--gc-fs-xs); color: var(--gc-text-muted); text-transform: uppercase; letter-spacing: .08em; }
.gc-kpi__value { font: var(--gc-fw-bold) var(--gc-fs-2xl)/1.1 var(--gc-font-display); margin-top: 6px; }
.gc-kpi__delta--up   { color: var(--gc-success); font-size: var(--gc-fs-xs); }
.gc-kpi__delta--down { color: var(--gc-danger);  font-size: var(--gc-fs-xs); }

.gc-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--gc-fs-sm); }
.gc-table th {
  text-align: start; font-weight: var(--gc-fw-medium); color: var(--gc-text-dim);
  font-size: var(--gc-fs-xs); text-transform: uppercase; letter-spacing: .08em;
  padding: var(--gc-space-3) var(--gc-space-4); border-bottom: 1px solid var(--gc-border);
}
.gc-table td { padding: var(--gc-space-3) var(--gc-space-4); border-bottom: 1px solid var(--gc-border); }
.gc-table tbody tr:hover td { background: var(--gc-surface-2); }

/* Toggle switch (ad settings) */
.gc-switch { position: relative; width: 46px; height: 26px; appearance: none; background: var(--gc-surface-3); border: 1px solid var(--gc-border); border-radius: var(--gc-radius-pill); cursor: pointer; transition: background var(--gc-dur); }
.gc-switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--gc-text-muted); transition: transform var(--gc-dur) var(--gc-ease), background var(--gc-dur); }
.gc-switch:checked { background: var(--gc-cyan); border-color: var(--gc-cyan); box-shadow: var(--gc-glow-cyan); }
.gc-switch:checked::after { transform: translateX(20px); background: var(--gc-text-on-neon); }
[dir="rtl"] .gc-switch:checked::after { transform: translateX(-20px); }

/* ==========================================================================
   Layout chrome: header, mobile tab bar, modal, toast
   ========================================================================== */
.gc-header {
  position: sticky; top: 0; z-index: var(--gc-z-header); height: var(--gc-header-h);
  display: flex; align-items: center; gap: var(--gc-space-5); padding-inline: var(--gc-space-5);
  background: rgba(7,6,15,.72); backdrop-filter: blur(14px); border-bottom: 1px solid var(--gc-border);
}
.gc-logo { font: var(--gc-fw-black) 1.25rem/1 var(--gc-font-display); letter-spacing: .02em; text-transform: uppercase; color: var(--gc-text); text-decoration: none; }
.gc-logo span { background: var(--gc-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

.gc-tabbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--gc-z-header); height: var(--gc-tabbar-h);
  display: none; grid-template-columns: repeat(5, 1fr);
  background: rgba(13,11,26,.92); backdrop-filter: blur(14px); border-top: 1px solid var(--gc-border);
  padding-bottom: env(safe-area-inset-bottom);
}
.gc-tabbar a { display: grid; place-items: center; gap: 2px; font-size: 10px; color: var(--gc-text-dim); text-decoration: none; }
.gc-tabbar a[aria-current="page"] { color: var(--gc-cyan); text-shadow: var(--gc-text-glow); }
@media (max-width: 720px) { .gc-tabbar { display: grid; } }

.gc-modal-backdrop { position: fixed; inset: 0; z-index: var(--gc-z-modal); display: grid; place-items: center; background: rgba(4,3,10,.8); backdrop-filter: blur(6px); padding: var(--gc-space-4); }
.gc-modal { width: min(100%, 480px); background: var(--gc-surface); border: 1px solid var(--gc-border-strong); border-radius: var(--gc-radius-xl); padding: var(--gc-space-6); box-shadow: var(--gc-shadow-lg), var(--gc-glow-violet); }

.gc-toast {
  position: fixed; inset-inline-end: var(--gc-space-5); bottom: var(--gc-space-5); z-index: var(--gc-z-toast);
  padding: var(--gc-space-3) var(--gc-space-5); border-radius: var(--gc-radius-md);
  background: var(--gc-surface-2); border: 1px solid var(--gc-lime); box-shadow: var(--gc-glow-lime);
  font-weight: var(--gc-fw-bold);
}

/* ==========================================================================
   Accessibility: reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .gc-btn:hover, .gc-card--interactive:hover, .gc-game-card:hover { transform: none; }
}