/* ============================================================================
   base.css — PickReel shared design tokens + components.
   Single source of truth for: tokens, display font, glow, button color layer,
   flags, phone shell, static reel preview, shared keyframes, spinner.
   Load order: fonts.css → base.css → (reel.css) → page-level <style>.
   Button SIZING lives with each page (Tailwind classes on the landing page,
   the .btn system in build.html). This file only defines how buttons LOOK.
   ============================================================================ */

:root{
  --ink:#0a0d14; --paper:#10141d; --paper2:#161b26;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.06);
  --chalk:#f2f3f5; --mute:#8b93a3;
  --lime:#d9ff3c; --lime-deep:#b3e600;
  --blue:#2f6bff; --blue-soft:rgba(47,107,255,.14);
  --amber:#ff9d42;
}
*{ -webkit-tap-highlight-color:transparent; box-sizing:border-box; }

.anton{ font-family:'Archivo',sans-serif; font-weight:900; letter-spacing:-.01em; }
.hairline{ border-color:var(--line); }
.glow{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(70% 45% at 82% -6%, rgba(47,107,255,.16), transparent 60%),
             radial-gradient(55% 45% at -6% 104%, rgba(217,255,60,.07), transparent 55%); }

/* tournament wordmark badge */
.wcbadge{ display:inline-flex; align-items:center; gap:0; font-family:'Hanken Grotesk',sans-serif; font-weight:700; line-height:1; letter-spacing:-.03em; }
.wcbadge .y{ color:var(--blue); margin-left:-.13em; }
.logo-mark{ display:inline-flex; align-items:center; }

/* ---------------- buttons: color layer ---------------- */
.btn-accent{ background:var(--lime); color:#10120a; font-weight:600; transition:transform .15s, box-shadow .3s; }
.btn-accent:hover{ transform:translateY(-2px); box-shadow:0 12px 36px -12px rgba(217,255,60,.5); }
.btn-accent:active{ transform:translateY(0); }
.btn-blue{ background:var(--blue); color:#fff; font-weight:600; transition:transform .15s, box-shadow .3s; }
.btn-blue:hover{ transform:translateY(-2px); box-shadow:0 12px 36px -12px rgba(47,107,255,.55); }
.btn-blue:active{ transform:translateY(0); }
.btn-ghost{ border:1px solid var(--line); color:var(--chalk); font-weight:600; transition:border-color .2s, background .2s; }
.btn-ghost:hover{ border-color:rgba(47,107,255,.55); background:rgba(47,107,255,.06); }

/* ---------------- flags ---------------- */
.flag{ display:inline-block; border-radius:3px; overflow:hidden; flex:0 0 auto; box-shadow:0 0 0 1px rgba(255,255,255,.14) inset; width:30px; height:20px; }
.flag.sm{ width:24px; height:16px; }
.flag.lg{ width:54px; height:36px; }
.flag.xl{ width:96px; height:64px; border-radius:7px; }
.flag.circ{ width:22px; height:22px; border-radius:50%; box-shadow:0 0 0 1px rgba(255,255,255,.16) inset; }
.flag.circ .fsvg{ width:150%; height:100%; margin-left:-25%; }
.fsvg{ display:block; width:100%; height:100%; }

/* ---------------- phone shell (static reel preview) ---------------- */
.phone-shell{ width:248px; border-radius:30px; padding:9px; background:linear-gradient(160deg,#20242e,#0b0e14); box-shadow:0 40px 80px -38px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06) inset; }

/* ---------------- static 9:16 reel preview ---------------- */
.reel{ position:relative; aspect-ratio:9/16; border-radius:22px; overflow:hidden; color:#fff;
  background:radial-gradient(80% 50% at 80% 8%, rgba(47,107,255,.28), transparent 60%), radial-gradient(70% 40% at 8% 100%, rgba(217,255,60,.12), transparent 55%), linear-gradient(180deg,#0c1018,#080a10);
  display:flex; flex-direction:column; padding:15px 14px 14px; }
.reel-grain{ position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:linear-gradient(180deg,transparent 40%,rgba(217,255,60,.05),transparent 70%); animation:scan 4.2s ease-in-out infinite; }
@keyframes scan{ 0%{transform:translateY(-60%)} 100%{transform:translateY(160%)} }
.reel-top{ display:flex; align-items:center; justify-content:space-between; font-size:11px; position:relative; z-index:2; }
.reel-top .wc{ font-family:'Archivo',sans-serif; font-weight:900; letter-spacing:.04em; color:var(--lime); }
.reel-top .wc b{ color:var(--blue); }
.reel-top .hosts{ color:var(--mute); font-size:9px; letter-spacing:.08em; }
.reel-body{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; position:relative; z-index:2; }
.reel-eyebrow{ font-size:10px; text-transform:uppercase; letter-spacing:.22em; color:var(--mute); }
.reel-champ{ margin:13px 0 11px; }
.reel-champ .flag.xl{ box-shadow:0 14px 30px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.18) inset; }
.reel-name{ font-family:'Archivo',sans-serif; font-weight:900; font-size:34px; line-height:.94; text-transform:uppercase; }
.reel-sub{ color:var(--lime); font-weight:600; font-size:13px; margin-top:6px; }
.reel-final{ color:var(--mute); font-size:11px; margin-top:9px; }
.reel-final b{ color:var(--chalk); font-weight:600; }
.reel-semis{ display:flex; gap:5px; margin-top:14px; }
.reel-build{ font-family:'Archivo',sans-serif; font-weight:900; font-size:23px; line-height:1.05; margin-top:12px; text-transform:uppercase; }
.reel-dots{ display:grid; grid-template-columns:repeat(8,1fr); gap:5px; margin-top:18px; width:130px; }
.reel-dots span{ height:5px; border-radius:3px; background:rgba(255,255,255,.12); transition:.3s; }
.reel-dots span.on{ background:var(--lime); }
.reel-bottom{ position:relative; z-index:2; }
.reel-bar{ height:4px; border-radius:3px; background:rgba(255,255,255,.12); overflow:hidden; }
.reel-bar i{ display:block; height:100%; background:var(--lime); transition:width .4s; }
.reel-tag{ display:flex; align-items:center; justify-content:center; gap:6px; font-size:9px; color:var(--mute); margin-top:8px; letter-spacing:.05em; }
.reel-tag .live{ width:6px; height:6px; border-radius:50%; background:var(--lime); animation:pulse 1.5s infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.25} }
.pop{ animation:pop .45s cubic-bezier(.2,.9,.3,1.4); } @keyframes pop{ 0%{ transform:scale(.72) } 100%{ transform:none } }
.fade{ animation:fade .35s ease; } @keyframes fade{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }

/* ---------------- spinner ---------------- */
.ring{ width:30px; height:30px; border-radius:50%; border:3px solid rgba(255,255,255,.14); border-top-color:var(--lime); animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  .reel-grain,.pop,.fade,.ring,.reel-tag .live{ animation:none; }
}