/* ============================================================
   GameTeam — Money page tokens  (REAL BRAND)
   Black canvas + pink accent. Per-game color is a separate hook.
   Theme a page by setting   data-game="minecraft"   on <html>.
   ============================================================ */

:root {
  /* ---- Core surfaces (black canvas, layered greys) ---- */
  --dark:        #000000;   /* real page background */
  --surface-1:   #0c0c0f;   /* outline-button bg, deepest panels */
  --surface-2:   #101014;   /* alternating section bg */
  --surface-3:   #16161c;   /* raised cards */
  --surface-4:   #1d1d24;   /* hover / nested cards */
  --border:      rgba(255,255,255,0.10);
  --border-2:    rgba(255,255,255,0.16);
  --hairline:    rgba(255,255,255,0.06);

  /* ---- Brand accent (PINK) — CTAs, copilot, primary UI ---- */
  --primary:        #f74a87;
  --primary-hover:  #e23b76;
  --primary-soft:   rgba(247,74,135,0.14);
  --primary-line:   rgba(247,74,135,0.40);
  --primary-glow:   rgba(247,74,135,0.55);
  --on-primary:     #15040b;   /* text on pink fill */

  /* ---- Status ---- */
  --gold:     #FFB830;
  --red:      #ec625f;
  --success:  #15cd72;

  /* ---- Text (AA+ on black) ---- */
  --text:       #f4f8fb;
  --text-dim:   #b6b8c9;
  --text-faint: #9193a8;
  --text-mute:  #6a6c80;

  /* ---- PER-GAME accent (atmosphere only: hero glow, scene) ---- */
  /* Pink stays the brand accent everywhere; this only tints ambience. */
  --game:       #62b04a;          /* minecraft grass green (default) */
  --game-soft:  rgba(98,176,74,0.16);
  --game-glow:  rgba(98,176,74,0.30);

  /* ---- Type — rationalized: 1 display, 1 body, 1 mono ---- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;  /* headings */
  --font-body:    'Work Sans', system-ui, sans-serif;       /* body / UI */
  --font-mono:    'JetBrains Mono', ui-monospace, monospace; /* code, copilot, data */

  /* ---- Geometry — brand uses sharp 2px corners ---- */
  --r-btn:  2px;
  --r-sm:   4px;
  --r:      8px;
  --r-lg:   14px;
  --maxw:   1200px;

  --shadow:    0 24px 60px -28px rgba(0,0,0,0.85);
  --shadow-sm: 0 8px 22px -12px rgba(0,0,0,0.7);
  --glow:      0 0 0 1px var(--primary-line), 0 14px 40px -14px var(--primary-glow);
}

/* ============================================================
   PER-GAME ATMOSPHERE  (accent stays pink; only --game changes)
   ============================================================ */
[data-game="minecraft"] { --game:#62b04a; --game-soft:rgba(98,176,74,0.16); --game-glow:rgba(98,176,74,0.30); }
[data-game="palworld"]  { --game:#39b6e6; --game-soft:rgba(57,182,230,0.16); --game-glow:rgba(57,182,230,0.30); }
[data-game="ark"]       { --game:#e0922f; --game-soft:rgba(224,146,47,0.16); --game-glow:rgba(224,146,47,0.30); }
[data-game="valheim"]   { --game:#4aa3b0; --game-soft:rgba(74,163,176,0.16); --game-glow:rgba(74,163,176,0.30); }
[data-game="rust"]      { --game:#c0492b; --game-soft:rgba(192,73,43,0.16);  --game-glow:rgba(192,73,43,0.30); }

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--dark);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.05; letter-spacing: -0.02em; font-weight: 700; text-wrap: balance; }
p { text-wrap: pretty; }

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

/* ---- Layout utils ---- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mono { font-family: var(--font-mono); }

/* ---- Eyebrow (brand pattern: uppercase pink) ---- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--primary);
  display: inline-flex; align-items: center; gap: 9px;
}
.eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--primary); opacity: 0.7; }
.center .eyebrow { justify-content: center; }

/* ---- Buttons (real brand spec: 54px, radius 2px, uppercase) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 54px; padding: 0 34px;
  font-family: var(--font-body);
  font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: var(--r-btn);
  transition: transform .15s ease, box-shadow .2s ease, background .15s ease, border-color .15s;
  white-space: nowrap;
}
.btn-sm { height: 40px; padding: 0 20px; font-size: 13px; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 10px 30px -10px var(--primary-glow); }
.btn-primary:hover { background: var(--primary-hover); transform: translateY(-2px); box-shadow: 0 16px 40px -12px var(--primary-glow); }
.btn-outline { background: var(--surface-1); color: var(--text); border: 1px solid var(--border-2); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }

/* ---- Section heading scale ---- */
.h2 { font-size: clamp(28px, 4.4vw, 40px); font-weight: 700; letter-spacing: -0.025em; }
.h2 .pink { color: var(--primary); }
.lead { color: var(--text-dim); font-size: 18px; line-height: 1.6; max-width: 60ch; margin-top: 14px; }
.center .lead { margin-inline: auto; }

/* ---- Scroll reveal ---- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none; } }