/* Design tokens — "arena" design system (Supercell / Clash-style).
   Principles:
   - Chunky, tactile: thick dark outlines (--ink), beveled faces, a solid bottom edge that compresses on press.
   - Calm surroundings, one loud thing: panels are quiet blues; YELLOW is reserved for the one action
     the player should take next. Blue = normal action, green = confirm/claim, red = destructive.
   - No glows, no neon. Depth comes from outlines, bevels and hard drop shadows.
   Every other stylesheet uses ONLY these vars. Cosmetic themes re-tint the arena via [data-theme]. */

@font-face {
  font-family: 'Lilita One';
  src: url('../fonts/lilita-one.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../fonts/nunito.woff2') format('woff2');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Ink + arena ---- */
  --ink: #0d1838;               /* outlines, text strokes, hard shadows */
  --ink-soft: rgba(13, 24, 56, 0.55);
  --arena-top: #3d7be6;
  --arena-bot: #1a3d94;
  --arena-pattern: rgba(255, 255, 255, 0.045);

  /* ---- Surfaces (blue panels on the arena) ---- */
  --bg: #16327c;                /* solid fallback / theme-color */
  --bg-2: #102661;              /* wells: progress tracks, inputs */
  --surface: #2a56b8;           /* panel face */
  --surface-2: #2249a3;         /* panel lower half / secondary panel */
  --surface-3: #3a6bd0;         /* raised elements inside panels */
  --panel-hi: rgba(255, 255, 255, 0.22);   /* bevel highlight on panel tops */
  --panel-lo: rgba(0, 0, 0, 0.22);         /* bevel shade on panel bottoms */
  --line: rgba(13, 24, 56, 0.45);
  --line-strong: var(--ink);

  /* Light "parchment" surface for callouts that must stand out from blue */
  --paper: #eef3fb;
  --paper-2: #d5e0f2;
  --paper-ink: #1d2c55;

  /* ---- Text ---- */
  --text: #ffffff;
  --text-dim: #c6d6f7;
  --text-mute: #8fa6d6;

  /* ---- Palette (legacy names kept so older rules still resolve) ---- */
  --yellow: #ffc933;
  --yellow-lo: #f59a0c;
  --yellow-edge: #a65908;
  --blue-btn: #46a8ff;
  --blue-btn-lo: #1f78e6;
  --blue-btn-edge: #0e3f9a;
  --green: #74d93e;
  --green-lo: #3ea81f;
  --green-edge: #1e6410;
  --red-btn: #ff5d4f;
  --red-btn-lo: #e0312a;
  --red-btn-edge: #8a1714;
  --slate: #7f94c2;
  --slate-lo: #5d73a6;
  --slate-edge: #2f3f6b;

  --cyan: #4fb6ff;
  --magenta: #c062ff;
  --lime: #74d93e;
  --gold: #ffc933;
  --orange: #ff9a1f;
  --red: #ff5d4f;
  --violet: #c062ff;
  --blue: #46a8ff;
  --pink: #ff7ac8;

  /* ---- Semantic ---- */
  --accent: #ffffff;            /* selection / focus highlight (themes may tint) */
  --accent-2: var(--violet);
  --accent-3: var(--lime);
  --gt: var(--gold);            /* Game Time currency */
  --xp: var(--violet);          /* XP */
  --streak: var(--orange);
  --good: var(--lime);
  --bad: var(--red);

  /* ---- Rarity (Clash-style) ---- */
  --r-common: #a9b8d4;
  --r-rare: #ff9a1f;
  --r-epic: #c062ff;
  --r-legendary: #55e3ff;

  /* ---- Gradients ---- */
  --grad-accent: linear-gradient(180deg, var(--blue-btn) 0%, var(--blue-btn-lo) 100%);
  --grad-gold: linear-gradient(180deg, #ffe066 0%, var(--yellow) 45%, var(--yellow-lo) 100%);
  --grad-panel: linear-gradient(180deg, var(--surface-3) 0%, var(--surface) 38%, var(--surface-2) 100%);
  --grad-hero: linear-gradient(180deg, var(--arena-top) 0%, var(--arena-bot) 100%);

  /* ---- Depth (no glows: legacy glow tokens resolve to nothing) ---- */
  --glow-accent: 0 0 0 0 transparent;
  --glow-gold: 0 0 0 0 transparent;
  --shadow-card: 0 4px 0 var(--ink-soft);
  --shadow-pop: 0 6px 0 var(--ink-soft), 0 14px 24px rgba(5, 12, 35, 0.35);
  --outline: 0 0 0 2px var(--ink);
  --bevel: inset 0 2px 0 var(--panel-hi), inset 0 -3px 0 var(--panel-lo);

  /* Text outline for display type on any background */
  --ts-outline:
    -1.5px -1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink),
    -1.5px 1.5px 0 var(--ink), 1.5px 1.5px 0 var(--ink),
    0 3px 0 var(--ink);
  --ts-outline-sm:
    -1px -1px 0 var(--ink), 1px -1px 0 var(--ink),
    -1px 1px 0 var(--ink), 1px 1px 0 var(--ink),
    0 2px 0 var(--ink);

  /* ---- Type ---- */
  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Lilita One', 'Nunito', system-ui, sans-serif; /* regular weight, no italics */
  --font-num: 'Lilita One', 'Nunito', system-ui, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 26px;
  --fs-2xl: 36px;
  --fs-3xl: 56px;
  --fs-mega: 104px;

  /* ---- Space (4px grid) ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* ---- Radius ---- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;

  /* ---- Sizing ---- */
  --tap: 56px;
  --nav-h: 80px;
  --hud-h: 60px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---- Motion ---- */
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 120ms; --t-med: 240ms; --t-slow: 420ms;

  /* ---- Layers ---- */
  --z-nav: 50; --z-hud: 60; --z-sheet: 100; --z-toast: 150; --z-cinematic: 200; --z-fx: 300;

  color-scheme: dark;
}

/* Cosmetic arena themes — ids must match content.js COSMETICS where type === 'theme'.
   They only re-tint the arena + panels; button colors stay fixed so meaning never changes. */
[data-theme='neon'] {
  --arena-top: #3d7be6; --arena-bot: #1a3d94; --bg: #16327c; --bg-2: #102661;
  --surface: #2a56b8; --surface-2: #2249a3; --surface-3: #3a6bd0;
  --text-dim: #c6d6f7; --text-mute: #8fa6d6; --ink: #0d1838;
}
[data-theme='inferno'] {
  --arena-top: #e0603a; --arena-bot: #7a1e22; --bg: #6a1c22; --bg-2: #4a1016;
  --surface: #a8352f; --surface-2: #8c2a28; --surface-3: #c64a3b;
  --text-dim: #ffd9cc; --text-mute: #e0a090; --ink: #2a0b0e;
}
[data-theme='toxic'] {
  --arena-top: #49b04a; --arena-bot: #1d5a2c; --bg: #1b4f29; --bg-2: #123a1d;
  --surface: #2f8a3c; --surface-2: #257232; --surface-3: #3fa34b;
  --text-dim: #d7f5cf; --text-mute: #9ccf95; --ink: #0b2412;
}
[data-theme='arctic'] {
  --arena-top: #63c3ee; --arena-bot: #2a6aa8; --bg: #25609a; --bg-2: #1a4878;
  --surface: #3a8ccc; --surface-2: #2f78b5; --surface-3: #4ea4de;
  --text-dim: #e0f4ff; --text-mute: #a5cde8; --ink: #0c2440;
}
[data-theme='royal'] {
  --arena-top: #8a5ae6; --arena-bot: #3a1f8a; --bg: #341b7c; --bg-2: #241260;
  --surface: #6440c0; --surface-2: #5434a8; --surface-3: #7a55d6;
  --text-dim: #e6dbff; --text-mute: #b3a0e6; --ink: #150a3a;
}
[data-theme='gold'] {
  --arena-top: #d7a33a; --arena-bot: #7a4a12; --bg: #6e4210; --bg-2: #4f2f0a;
  --surface: #a8711f; --surface-2: #8f5e18; --surface-3: #c08628;
  --text-dim: #fff0cc; --text-mute: #e5c48a; --ink: #2e1a04;
}