/* P2E Arena — shared tokens. Colours/fonts measured from the LIVE homepage
   (play2earnsports.com, 2026-09-25). Sections use these; never hard-code. */
:root {
  --ink: #0b0f13;          /* body background */
  --ink-2: #060d17;        /* section wells */
  --ink-3: #040b15;        /* deepest */
  --panel: rgba(255,255,255,0.04);
  --line: rgba(153,44,255,0.28);
  --purple: #992cff;       /* electric purple accent */
  --purple-2: #9632fc;
  --violet: #8b3dff;
  --lime: #d0fa00;         /* lime CTA / highlights */
  --lime-2: #d5f40b;
  --lime-ink: #0a1001;     /* text on lime */
  --text: #f5f5fa;
  --text-2: #cdd1df;
  --muted: #aeb5c9;
  --f-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;  /* big uppercase heads */
  --f-poster: 'Anton', 'Barlow Condensed', Impact, sans-serif;  /* live's faded wordmark */
  --f-body: 'Manrope', 'Barlow', Helvetica, Arial, sans-serif;
  --f-ui: 'Barlow', Arial, sans-serif;
  --f-script: 'Caveat', cursive;                                /* "More than a game" */
  --radius: 14px;
  --maxw: 1340px;
  --ease-out: cubic-bezier(.16,1,.3,1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--f-body); line-height: 1.55; overflow-x: hidden; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { width: min(var(--maxw), 100% - 32px); margin-inline: auto; }
.eyebrow { font-family: var(--f-ui); font-weight: 700; font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--purple); }
.h-display { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; line-height: .95; letter-spacing: .01em; margin: 0; }
.hl-purple { color: var(--purple); }
.hl-lime { color: var(--lime); }
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-ui); font-weight: 800; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; padding: 15px 26px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; transition: transform .25s var(--ease-out), box-shadow .25s, background .25s; }
.btn-lime { background: var(--lime); color: var(--lime-ink); box-shadow: 0 0 0 rgba(208,250,0,0); }
.btn-lime:hover { box-shadow: 0 10px 40px -8px rgba(208,250,0,.55); }
.btn-ghost { border-color: var(--purple); color: var(--text); background: rgba(153,44,255,.08); }
.btn-ghost:hover { background: rgba(153,44,255,.22); }
section { position: relative; scroll-margin-top: 84px; }
@media (max-width: 767px) { section { scroll-margin-top: 72px; } }
/* cursor spotlight (desktop only; base.js moves it) */
.arena-spotlight { position: fixed; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none; z-index: 60; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(208,250,0,.07), rgba(153,44,255,.05) 40%, transparent 70%); opacity: 0; transition: opacity .4s; }
body.has-pointer .arena-spotlight { opacity: 1; }
/* reveal helper: add data-reveal to anything; base.js fades it up once */
[data-reveal] { opacity: 0; transform: translateY(28px); }
[data-reveal].is-in { opacity: 1; transform: none; transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
/* A soft one-at-a-time sweep links the hero and review score. */
.hero-reviews-stars i, .rv-score-stars i { --star-base: #f7c64c; color: var(--star-base); animation: star-sweep 3.2s ease-in-out infinite; }
.rv-score-stars i { --star-base: var(--lime); }
.hero-reviews-stars i:nth-child(2), .rv-score-stars i:nth-child(2) { animation-delay: .2s; }
.hero-reviews-stars i:nth-child(3), .rv-score-stars i:nth-child(3) { animation-delay: .4s; }
.hero-reviews-stars i:nth-child(4), .rv-score-stars i:nth-child(4) { animation-delay: .6s; }
.hero-reviews-stars i:nth-child(5), .rv-score-stars i:nth-child(5) { animation-delay: .8s; }
@keyframes star-sweep {
  0%, 8%, 30%, 100% { color: var(--star-base); filter: brightness(1) drop-shadow(0 0 0 transparent); }
  14%, 21% { color: #fff34d; filter: brightness(1.8) drop-shadow(0 0 5px #ffe600) drop-shadow(0 0 12px #ffb300); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .arena-spotlight { display: none; }
}