/* ==========================================================================
   PIX — BASE & COMPONENTS
   Depends on tokens.css. Wires the tokens into a reset, typography and the
   core reusable components the landing page is built from.
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--surface-bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img, svg, picture { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--pix-purple); color: #fff; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section-y); }
.stack > * + * { margin-top: var(--space-5); }

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.hero-title,
.display,
.title,
h1, h2, h3 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  font-weight: var(--fw-black);
}

.hero-title { font-size: var(--fs-hero); }
.display    { font-size: var(--fs-display); }
.title, h1  { font-size: var(--fs-title); }
h2          { font-size: var(--fs-h2); }
h3          { font-size: var(--fs-h3); line-height: var(--lh-snug); }

.subtitle {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-subtitle);
  line-height: var(--lh-normal);
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}

.lead  { font-size: var(--fs-body-lg); color: var(--text-muted); line-height: var(--lh-relaxed); }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }

/* Accent text colour utilities (used sparingly) */
.t-purple { color: var(--pix-purple-soft); }
.t-gold   { color: var(--pix-gold); }
.t-green  { color: var(--pix-green); }
.t-red    { color: var(--pix-red); }

/* ==========================================================================
   WORDMARK  (Barlow Condensed 900, uppercase — never stretched/recoloured)
   ========================================================================== */
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--text);            /* White on Black — the default treatment */
  display: inline-block;
}
.wordmark--purple { color: var(--pix-purple); }         /* Purple on Black  */
.wordmark--onpurple { color: #fff; }                    /* White on Purple  */
.wordmark--hype {                                        /* Black on Gold    */
  color: var(--pix-black);
  background: var(--pix-gold);
  padding: 0.05em 0.3em;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  --_bg: var(--surface-raised);
  --_fg: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: 1.0625rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 0.85em 1.6em;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--_bg);
  color: var(--_fg);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              background var(--dur-base) var(--ease);
  white-space: nowrap;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Primary CTA — GOLD. Reserve for the single most important action. */
.btn--primary {
  --_bg: var(--pix-gold);
  --_fg: var(--text-on-gold);
  box-shadow: var(--glow-gold);
}
.btn--primary:hover { --_bg: var(--pix-gold-strong); }

/* Brand button — PURPLE */
.btn--brand {
  --_bg: var(--pix-purple);
  --_fg: #fff;
  box-shadow: var(--glow-purple);
}
.btn--brand:hover { --_bg: var(--pix-purple-strong); }

/* Ghost / secondary */
.btn--ghost {
  --_bg: transparent;
  --_fg: var(--text);
  border-color: var(--border-strong);
}
.btn--ghost:hover { --_bg: rgba(255,255,255,0.06); }

.btn--lg { font-size: 1.25rem; padding: 1em 2em; }
.btn--sm { font-size: 0.9375rem; padding: 0.6em 1.1em; }

/* ==========================================================================
   APP STORE BADGE  (iOS — self-contained, sized to Apple's proportions)
   ========================================================================== */
.appstore-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1.25rem;
  background: #000;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  color: #fff;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-base) var(--ease);
}
.appstore-badge:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.5); }
.appstore-badge svg { width: 26px; height: 26px; flex: none; fill: #fff; }
.appstore-badge__text { display: flex; flex-direction: column; line-height: 1.05; }
.appstore-badge__text small { font-family: var(--font-body); font-size: 0.6875rem; letter-spacing: 0.02em; }
.appstore-badge__text b {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1.25rem;
  letter-spacing: 0.01em;
}

/* ==========================================================================
   BADGES & PILLS
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 0.75rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  padding: 0.4em 0.75em;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--text);
}
/* "NEW" always stays PIX Purple regardless of context (brand rule) */
.badge--new  { background: var(--pix-purple); color: #fff; }
.badge--live { background: rgba(34,197,94,0.15); color: var(--pix-green); }
.badge--live .dot { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--pix-green); }
.badge--urgent { background: rgba(220,38,38,0.15); color: var(--pix-red); }
.badge--free { background: rgba(245,166,35,0.16); color: var(--pix-gold); }

/* Tier badges (T1–T6) — functional colours */
.tier {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  font-family: var(--font-display); font-weight: var(--fw-black); font-size: 1.1rem;
  border-radius: var(--radius-md);
  color: var(--pix-black);
}
.tier--1 { background: var(--tier-1); }
.tier--2 { background: var(--tier-2); color:#fff; }
.tier--3 { background: var(--tier-3); }
.tier--4 { background: var(--tier-4); }
.tier--5 { background: var(--tier-5); }
.tier--6 { background: var(--tier-6); color:#fff; }

/* Level pill (e.g. "LV31 FIRST TEAM I") */
.level-pill {
  display: inline-flex; align-items: baseline; gap: 0.5em;
  font-family: var(--font-display); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  padding: 0.4em 0.9em; border-radius: var(--radius-pill);
  background: var(--surface-card); border: 1px solid var(--border);
}
.level-pill .lv { color: var(--pix-purple-soft); }

/* ==========================================================================
   CARDS & SURFACES
   ========================================================================== */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.card--raised { background: var(--surface-raised); }
.card--interactive { transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); cursor: pointer; }
.card--interactive:hover { transform: translateY(-4px); border-color: var(--border-strong); }

/* ==========================================================================
   GAME-MODE CHIP  (lead with the mode's accent — set --mode per instance)
   ========================================================================== */
.mode-chip {
  --mode: var(--pix-purple);
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.9rem 0.5rem 0.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--mode) 45%, transparent);
  background: color-mix(in srgb, var(--mode) 12%, var(--surface-card));
}
.mode-chip__glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: var(--radius-md);
  background: var(--mode); color: var(--pix-black);
  font-family: var(--font-display); font-weight: var(--fw-black); font-size: 0.9rem;
}
.mode-chip__name {
  font-family: var(--font-display); font-weight: var(--fw-extra);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
.mode--title-race { --mode: var(--mode-title-race); }
.mode--puzzle     { --mode: var(--mode-puzzle); }
.mode--gridgame   { --mode: var(--mode-gridgame); }
.mode--draft      { --mode: var(--mode-draft); }

/* ==========================================================================
   DIVIDER
   ========================================================================== */
.rule { height: 1px; background: var(--border-subtle); border: 0; }