/*! Chie Games site · design tokens.
 * Three layers. Components use only layer 2 (semantic) and layer 3 (brand); never raw primitives.
 *   1. Primitive  – raw palette scales 50–900 + scales for type, space, radius, elevation, motion.
 *   2. Semantic   – roles (surface, text, primary, border…). Change the theme here.
 *   3. Brand      – per-game and per-genre colours, scoped by [data-game] / [data-genre].
 * Spec and contrast table: DESIGN_SYSTEM.md and /design. Values for ink/tangerine/mint/sun/berry come from
 * _shared/core/cg-base.css so the portal and the games read as one family. */

@font-face{font-family:Poppins;font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/poppins-bold.woff) format('woff')}
@font-face{font-family:Poppins;font-weight:500;font-style:normal;font-display:swap;src:url(/assets/fonts/poppins-medium.woff) format('woff')}
/* Metric-matched fallback so the swap does not shift layout. */
@font-face{font-family:'Poppins Fallback';src:local('Arial');size-adjust:112%;ascent-override:93%;descent-override:31%;line-gap-override:0%}

:root{
  /* ───── 1. PRIMITIVES ───── */
  /* ink: neutral scale, 900 = brand ink (#1f1d3a), 500 = muted text (#62668c) */
  --ink-50:#f4f4f8; --ink-100:#e8e8f0; --ink-200:#cdcedd; --ink-300:#a8aac2; --ink-400:#8285a6; --ink-500:#62668c;
  --ink-600:#4a4d72; --ink-700:#36385c; --ink-800:#29284b; --ink-900:#1f1d3a; --ink-950:#141228;
  --sky-50:#f1f9ff; --sky-100:#dff1ff; --sky-200:#c0e3ff; --sky-300:#9cd3ff; --sky-400:#7cc8ff; --sky-500:#4fb0ff;
  --sky-600:#3e94dc; --sky-700:#2d77b9; --sky-800:#1e5e9a; --sky-900:#124981;
  --tangerine-50:#fff3ef; --tangerine-100:#ffe4dc; --tangerine-200:#ffc9b9; --tangerine-300:#ffac92; --tangerine-400:#ff8b68; --tangerine-500:#ff6a3d; --tangerine-550:#ef5a2b;
  --tangerine-600:#d75730; --tangerine-700:#b2441f; --tangerine-800:#8b3217; --tangerine-900:#6e240d;
  --mint-50:#eefbf6; --mint-100:#daf6eb; --mint-200:#b4eed7; --mint-300:#8be4c0; --mint-400:#5ddaa8; --mint-500:#2fcf8f;
  --mint-600:#26ae78; --mint-700:#1b8a5e; --mint-800:#146f4c; --mint-900:#0e573b;
  --sun-50:#fffaef; --sun-100:#fff4dc; --sun-200:#ffe9b8; --sun-300:#ffdd91; --sun-400:#ffcf65; --sun-500:#ffc23a;
  --sun-600:#daa22c; --sun-700:#b5831d; --sun-800:#946710; --sun-900:#7a5006;
  --berry-50:#ffeff2; --berry-100:#ffdce2; --berry-200:#ffb8c4; --berry-300:#ff91a4; --berry-400:#ff6680; --berry-500:#ff3b5c;
  --berry-600:#d62e4b; --berry-700:#b0223b; --berry-800:#8a162b; --berry-900:#6c0c1f;
  --grape-50:#f4f2ff; --grape-100:#e7e2ff; --grape-200:#cfc4ff; --grape-300:#b5a4ff; --grape-400:#9780ff; --grape-500:#7a5cff;
  --grape-600:#654adb; --grape-700:#5039b7; --grape-800:#3d2997; --grape-900:#2e1c7d;
  --white:#fff;

  /* type */
  --font:Poppins,'Poppins Fallback',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --fw-medium:500; --fw-bold:700;
  --fs-display:clamp(3rem,1.9rem + 5.6vw,6rem);   /* 48 → 96 */
  --fs-h1:clamp(2.25rem,1.6rem + 3.2vw,4rem);     /* 36 → 64 */
  --fs-h2:clamp(1.75rem,1.35rem + 2vw,2.75rem);   /* 28 → 44 */
  --fs-h3:clamp(1.375rem,1.25rem + .6vw,1.75rem); /* 22 → 28 */
  --fs-h4:clamp(1.125rem,1.05rem + .35vw,1.375rem);/* 18 → 22 */
  --fs-lead:clamp(1.125rem,1.08rem + .2vw,1.25rem);/* 18 → 20 */
  --fs-body:1rem; --fs-sm:.875rem; --fs-xs:.75rem; --fs-overline:.75rem;
  --lh-display:1; --lh-heading:1.1; --lh-body:1.55; --lh-tight:1.25;
  --ls-display:-.02em; --ls-heading:-.01em; --ls-overline:.12em; --ls-button:.02em;
  --measure:65ch;

  /* space – 4pt scale */
  --s-0:0; --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:80px; --s-10:96px; --s-11:112px; --s-12:128px;
  --section-y:clamp(64px,8vw,112px);
  --gutter:16px;

  /* layout */
  --w-prose:680px; --w-content:1200px; --w-wide:1440px;

  /* shape */
  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
  --bw:3px; --bw-thin:2px;

  /* elevation – hard offset shadow is the signature "toy" depth; soft only for overlays */
  --e-0:0 0 0 transparent;
  --e-1:0 3px 0 var(--shadow-color);
  --e-2:0 5px 0 var(--shadow-color);
  --e-3:0 8px 0 var(--shadow-color);
  --e-soft:0 18px 40px rgba(20,18,44,.18);

  /* motion */
  --d-fast:120ms; --d-base:200ms; --d-slow:360ms; --d-hero:700ms;
  --ease-out:cubic-bezier(.2,.8,.2,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --ease-pop:cubic-bezier(.34,1.56,.64,1);

  /* z-index */
  --z-base:0; --z-raised:10; --z-sticky:100; --z-drawer:200; --z-modal:300; --z-toast:400; --z-consent:500;

  /* ───── 2. SEMANTIC ───── */
  --bg:#f6f8ff;                    /* page */
  --bg-alt:var(--sky-100);         /* tinted band */
  --bg-hero:var(--sky-400);        /* hero sky, same as game --bg */
  --bg-ink:var(--ink-900);         /* dark band, footer */
  --surface:var(--white);
  --surface-raised:var(--white);
  --surface-sunk:var(--ink-50);
  --text:var(--ink-900);
  --text-muted:var(--ink-500);
  --text-subtle:var(--ink-400);    /* large text / icons only */
  --text-inverse:var(--white);
  --text-inverse-muted:var(--ink-200);
  --border:var(--ink-900);         /* chunky outline */
  --border-soft:var(--ink-100);
  --shadow-color:var(--ink-900);
  --link:var(--tangerine-700);
  --link-hover:var(--tangerine-800);

  --primary:var(--sun-500);  --primary-hover:var(--sun-400);  --primary-press:var(--sun-600);  --on-primary:var(--ink-900);
  --secondary:var(--white);  --secondary-hover:var(--sky-50); --secondary-press:var(--ink-50); --on-secondary:var(--ink-900);
  --accent:var(--tangerine-500); --accent-hover:var(--tangerine-400); --accent-press:var(--tangerine-550); --on-accent:var(--ink-900);
  --success:var(--mint-500); --on-success:var(--ink-900); --success-soft:var(--mint-100);
  --warning:var(--sun-500);  --on-warning:var(--ink-900); --warning-soft:var(--sun-100);
  --danger:var(--berry-500); --on-danger:var(--ink-900);  --danger-soft:var(--berry-100); --danger-text:var(--berry-700);
  --info:var(--sky-500);     --on-info:var(--ink-900);    --info-soft:var(--sky-100);
  --focus-ring:var(--grape-600);
  --scrim:rgba(20,18,44,.55);
  --highlight:var(--sun-500);      /* outlined display text 2nd line, like game logos */

  /* ───── 3. BRAND (defaults; overridden per game / genre below) ───── */
  --g-primary:var(--sky-500); --g-deep:var(--sky-800); --g-accent:var(--tangerine-500); --g-pop:var(--sun-500); --g-on:var(--white);
  --genre:var(--grape-300); --genre-soft:var(--grape-100); --on-genre:var(--ink-900);

  color-scheme:light;
}
@media (min-width:768px){:root{--gutter:24px}}
@media (min-width:1024px){:root{--gutter:32px}}

/* Per-game brand – mirrors each game's css/game.css + game.config.json themeColor. */
[data-game="pocket-artillery"]{--g-primary:#4fb0ff; --g-deep:#1e5e9a; --g-accent:#ff6a3d; --g-pop:#ffc23a; --g-on:#fff}
[data-game="splat-arena"]     {--g-primary:#7ccf6a; --g-deep:#2f7a3c; --g-accent:#ff5a3c; --g-pop:#ffd23a; --g-on:#fff}
[data-game="bump-brawl"]      {--g-primary:#5fb8ff; --g-deep:#2b4fc9; --g-accent:#ff5a4f; --g-pop:#ffc23a; --g-on:#fff}
[data-game="koi-rise"]        {--g-primary:#0e4f55; --g-deep:#06222b; --g-accent:#c8102e; --g-pop:#ffc94a; --g-on:#fff}
[data-game="rush-rider"]      {--g-primary:#3a1f6b; --g-deep:#140c26; --g-accent:#ff3d8b; --g-pop:#3ef0ff; --g-on:#fff}

/* Per-genre colour – chips, badges, genre pages. All pairs use ink text (≥ 4.5:1). */
[data-genre="strategy"]    {--genre:var(--sky-500);       --genre-soft:var(--sky-100)}
[data-genre="shooter"]     {--genre:var(--tangerine-500); --genre-soft:var(--tangerine-100)}
[data-genre="party"]       {--genre:var(--berry-400);     --genre-soft:var(--berry-100)}
[data-genre="hyper-casual"]{--genre:var(--mint-500);      --genre-soft:var(--mint-100)}
[data-genre="racing"]      {--genre:var(--grape-400);     --genre-soft:var(--grape-100)}
[data-genre="arcade"]      {--genre:var(--sun-500);       --genre-soft:var(--sun-100)}