/* P2E Arena — shared tokens. Colours/fonts measured from the LIVE homepage
   (play2earnsports.com, 2026-09-25). Sections use these; never hard-code. */
:where(.p2e-pp) {
  --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);
}
:where(.p2e-pp) *, :where(.p2e-pp) *::before, :where(.p2e-pp) *::after { box-sizing: border-box; }

:where(.p2e-pp) { background: var(--ink); color: var(--text); font-family: var(--f-body); line-height: 1.55; overflow-x: visible; }
:where(.p2e-pp) img, :where(.p2e-pp) video { max-width: 100%; display: block; }
:where(.p2e-pp) a { color: inherit; text-decoration: none; }
:where(.p2e-pp) .wrap { width: min(var(--maxw), 100% - 32px); margin-inline: auto; }
:where(.p2e-pp) .eyebrow { font-family: var(--f-ui); font-weight: 700; font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--purple); }
:where(.p2e-pp) .h-display { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; line-height: .95; letter-spacing: .01em; margin: 0; }
:where(.p2e-pp) .hl-purple { color: var(--purple); }
:where(.p2e-pp) .hl-lime { color: var(--lime); }
:where(.p2e-pp) .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; }
:where(.p2e-pp) .btn-lime { background: var(--lime); color: var(--lime-ink); box-shadow: 0 0 0 rgba(208,250,0,0); }
:where(.p2e-pp) .btn-lime:hover { box-shadow: 0 10px 40px -8px rgba(208,250,0,.55); }
/* V-02 (live UX audit 2026-09-27): the legacy AIvent theme's `.dark-scheme a` (0,1,1) out-specified
   `:where(.p2e-pp) .btn-lime` (0,1,0), so every lime link button rendered white at 75% opacity on lime
   (1.14:1). The ink is declared here without :where() so the button wins: #0a1001 on #d0fa00 is 15.96:1. */
.p2e-pp a.btn-lime, .p2e-pp .btn-lime, .p2e-pp a.btn-lime:hover, .p2e-pp a.btn-lime:focus, .p2e-pp a.btn-lime:active { color: var(--lime-ink); }
.p2e-pp a.cv-promo-btn:not(.cv-promo-ghost), .p2e-pp .cv-promo-btn:not(.cv-promo-ghost), .p2e-pp a.cv-promo-btn:not(.cv-promo-ghost):hover, .p2e-pp a.cv-promo-btn:not(.cv-promo-ghost):focus { color: var(--lime-ink); }
.p2e-pp a.cv-btn-lime, .p2e-pp .cv-btn-lime, .p2e-pp a.cv-btn-lime:hover, .p2e-pp a.cv-btn-lime:focus { color: var(--lime-ink); }
:where(.p2e-pp) .btn-ghost { border-color: var(--purple); color: var(--text); background: rgba(153,44,255,.08); }
:where(.p2e-pp) .btn-ghost:hover { background: rgba(153,44,255,.22); }
:where(.p2e-pp) section { position: relative; }
/* Directory pages share the homepage overlay header. Remove the legacy v2 shell gap so each hero image begins directly beneath that one header. */
body.p2e-public-directory .p2e-v2-main { padding-top: 0; }
/* 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 */
:where(.p2e-pp) [data-reveal] { opacity: 0; transform: translateY(28px); }
:where(.p2e-pp) [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  :where(.p2e-pp) *, :where(.p2e-pp) *::before, :where(.p2e-pp) *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  :where(.p2e-pp) [data-reveal] { opacity: 1; transform: none; }
  .arena-spotlight { display: none; }
}