/* ============================================================
   OKTOGN - Global Stylesheet
   ------------------------------------------------------------
   EDIT MAP (see EDITING.md for more):
     §1  TOKENS      → all colors, spacing, radius, shadows
     §2  BASE        → page background, typography
     §3  APP SHELL   → top nav, view switching, wallet header
     §4  BUTTONS     → every button style
     §5  LOBBY       → filters, contest cards, seat dots, badges
     §6  LIVE GAME   → scoreboard, winning banner, board, flash, log
     §7  PROFILE     → identity, stats, heatmap, table, limits
     §8  SHARED      → toast, utilities
   Change a color once in §1 and it updates everywhere.
   ============================================================ */

/* ---------- §1 TOKENS ---------- */
:root{
  /* brand palette */
  --cyan:#00f0ff;
  --magenta:#ff2bd6;
  --lime:#b6ff1a;
  --violet:#9b5cff;
  --gold:#ffd23f;
  --green:#21e86a;     /* the "you're winning" green */
  --danger:#ff4d6d;

  /* surfaces */
  --bg:#070612;
  --bg2:#0d0a24;
  --ink:#eafaff;       /* primary text */
  --muted:#8b86b8;     /* secondary text */
  --card:rgba(255,255,255,.045);
  --line:rgba(255,255,255,.10);
  --grid:rgba(155,92,255,.10);

  /* fonts - change --font-display to restyle brand/headlines/numbers everywhere */
  --font-display:"Unbounded", system-ui, sans-serif;

  /* shape & motion */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:18px;
  --pad:16px;
  --maxw:1180px;
  --glow-magenta:0 0 16px rgba(255,43,214,.35);
  --glow-cyan:0 0 16px rgba(0,240,255,.35);
  --glow-green:0 0 26px rgba(33,232,106,.4);
}

/* ---------- §2 BASE ---------- */
*{box-sizing:border-box}
body{
  margin:0; color:var(--ink); overflow-x:hidden;
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  background:
    radial-gradient(1100px 600px at 8% -10%, rgba(255,43,214,.15), transparent 55%),
    radial-gradient(1000px 600px at 100% 0%, rgba(0,240,255,.13), transparent 50%),
    radial-gradient(900px 700px at 50% 120%, rgba(155,92,255,.17), transparent 55%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  background-attachment:fixed; min-height:100vh;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:46px 46px; mask:radial-gradient(circle at 50% 12%,#000 35%,transparent 90%);
}
/* live "winning" mode tints the whole page green */
body.winmode{
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(33,232,106,.20), transparent 60%),
    linear-gradient(180deg,#051a0f,#06210f);
}
.wrap{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:18px 18px 70px}
.logo{
  font-family:var(--font-display);
  display:inline-flex; align-items:center;
  font-weight:900; letter-spacing:.12em; line-height:1;
  background:linear-gradient(90deg,var(--cyan),var(--magenta) 55%,var(--lime));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 14px rgba(255,43,214,.4));
}
.duck-o{height:1.05em; width:1.05em; margin:0 .04em; display:inline-block; vertical-align:middle; overflow:visible; position:relative; top:-.04em}
/* secret: only the big hero duck's beak opens the duck race. The visible bill is tiny,
   so a transparent stroke halo enlarges the tap target (esp. on touch) without showing. */
#heroDuck .duck-beak{cursor:pointer; pointer-events:all; stroke:transparent; stroke-width:20}
/* big invisible nose/bill tap target - clickable ONLY on the big hero duck (inert in the nav logo) */
.duck-beak-hit{pointer-events:none}
#heroDuck .duck-beak-hit{pointer-events:all; cursor:pointer}
.muted{color:var(--muted)}
.pos{color:var(--green)} .neg{color:var(--danger)} .zero{color:var(--muted)}
.hidden{display:none !important}
.seclabel{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--cyan); margin:6px 0 10px}

/* ---------- §3 APP SHELL ---------- */
.appbar{display:flex; align-items:center; gap:clamp(8px,2vw,18px); flex-wrap:nowrap; margin-bottom:14px}
.appbar .logo{font-size:26px}
.appbar .tag{font-size:10px; letter-spacing:.3em; color:var(--muted); text-transform:uppercase}
.nav{display:flex; gap:6px}
.nav button{
  background:transparent; color:var(--muted); border:1px solid transparent;
  font-size:13px; font-weight:800; padding:8px 14px; border-radius:var(--r-sm); cursor:pointer; font-family:inherit;
}
.nav button.on{color:var(--ink); border-color:var(--line); background:var(--card)}
.wallet{margin-left:auto; display:flex; gap:10px}
.wbox{border:1px solid var(--line); border-radius:var(--r-md); padding:7px 13px; background:var(--card); text-align:right}
.wbox .lab{font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.wbox .val{font-size:18px; font-weight:900}

/* identity (replaces the wallet chips in the top nav). flex:0 1 auto so the pill can SHRINK when
   the row is tight - the name (min-width:0 + ellipsis) compresses instead of overflowing the edge,
   so the appbar always fits one line on any width. */
.me{margin-left:auto; flex:0 1 auto; display:inline-flex; align-items:center; gap:10px; min-width:0; cursor:pointer;
  background:transparent; border:1px solid var(--line); border-radius:999px; padding:4px 5px 4px 14px; transition:.15s}
.me:hover{border-color:var(--magenta); background:var(--card)}
.me-name{font-family:var(--display); font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink);
  font-size:clamp(11px,2.3vw,14px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; max-width:32vw}
/* live-board header: matchup label truncates so back-button + matchup + wallet never overflow */
#live-board .appbar{flex-wrap:nowrap}
#liveMatchup{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.me-pic{flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; overflow:hidden;
  font-family:var(--display); font-weight:900; font-size:15px; color:var(--bg); border:1px solid var(--line);
  background:linear-gradient(135deg,var(--cyan),var(--magenta) 55%,var(--lime)); background-size:cover; background-position:center}
.me-pic.has-photo{color:transparent}

/* profile avatar = click to upload a photo */
#pAvatar{position:relative; cursor:pointer; border:none; overflow:hidden; background-size:cover; background-position:center; padding:0}
#pAvatar::after{content:"Change"; position:absolute; left:0; right:0; bottom:0; padding:5px 0; text-align:center;
  font-family:var(--body); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:rgba(0,0,0,.55); opacity:0; transition:.15s}
#pAvatar:hover::after, #pAvatar:focus-visible::after{opacity:1}
#pAvatar.has-photo{color:transparent}
/* the duck IS your avatar (me-chip + profile) - fill the frame, crop the transparent padding */
.has-duck{background:rgba(255,255,255,.05)!important; color:transparent}
.has-duck svg{width:128%; height:128%; display:block}
.sub{color:var(--muted); font-size:13px; margin:2px 0 16px; max-width:820px; line-height:1.5}

/* ---------- §3b LOBBY HERO + RULES TAB ---------- */
.lobby-hero{position:relative; text-align:center; padding:30px 0 26px}
.hero-duck{display:block; margin:0 auto 10px; width:88px; height:88px}
.hero-duck-svg{width:100%; height:100%; overflow:visible; filter:drop-shadow(0 0 18px rgba(255,43,214,.45)); animation:duck-bob 2.6s ease-in-out infinite}
@keyframes duck-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-7px) rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.hero-duck-svg{animation:none}}
.hero-title{
  margin:0; font-family:var(--font-display); font-weight:900; text-transform:uppercase; letter-spacing:.12em;
  font-size:clamp(24px,4.6vw,46px); line-height:1.05;
  background:linear-gradient(90deg,var(--cyan),var(--magenta) 50%,var(--lime));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 26px rgba(255,43,214,.38));
}
.hero-title::after{
  content:""; display:block; width:64px; height:3px; margin:14px auto 0; border-radius:3px;
  background:linear-gradient(90deg,var(--cyan),var(--magenta),var(--lime)); box-shadow:var(--glow-magenta);
}
/* the OKT...GN text is a Home link; only the DUCK shows the rules on hover */
.logo-wrap{position:relative; display:inline-flex}
.logo{cursor:pointer}                 /* click the wordmark -> landing/home */
.duck-trigger{cursor:help; display:inline-flex; align-items:center}
.rules-pop{
  position:absolute; top:calc(100% + 10px); left:0; width:300px; text-align:left; z-index:40;
  background:#0c0a22; border:1px solid var(--line); border-radius:var(--r-lg); padding:16px;
  box-shadow:0 16px 50px rgba(0,0,0,.55);
  display:none; opacity:0; transform:translateY(-4px); transition:opacity .15s, transform .15s;
}
.rules-pop.show, .logo-wrap:has(.duck-trigger:hover) .rules-pop, .logo-wrap:has(.duck-trigger:focus) .rules-pop{display:block; opacity:1; transform:none}
.rules-pop::before{ /* little pointer up to the duck */
  content:""; position:absolute; top:-7px; left:46px; width:12px; height:12px; rotate:45deg;
  background:#0c0a22; border-left:1px solid var(--line); border-top:1px solid var(--line);
}
.rules-pop h3{margin:0 0 7px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan)}
.rules-pop p{margin:0; font-size:10.5px; color:var(--muted); line-height:1.5; text-align:justify; letter-spacing:.005em}

/* ---------- §4 BUTTONS ---------- */
button{font-family:inherit}
.btn{cursor:pointer; border:none; border-radius:var(--r-md); padding:9px 14px; font-weight:800; font-size:13px;
  letter-spacing:.04em; color:var(--bg); transition:transform .08s, filter .15s}
.btn:hover{filter:brightness(1.1)} .btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.4; cursor:not-allowed; filter:none}
.btn-magenta{background:linear-gradient(90deg,var(--magenta),var(--violet)); box-shadow:var(--glow-magenta)}
.btn-cyan{background:linear-gradient(90deg,var(--cyan),var(--lime)); box-shadow:var(--glow-cyan)}
.btn-gold{background:linear-gradient(90deg,var(--gold),var(--lime))}
.btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--line); box-shadow:none}
#soundBtn{flex:0 0 auto; padding-left:14px; padding-right:14px; font-size:18px; line-height:1}
.btn-muted{opacity:.45}
/* team-blended join button - background set inline from the two team colors */
.btn-team{color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.18)}
.btn-team:hover{filter:brightness(1.12) saturate(1.1)}
.btn-block{width:100%}
.btn-grow{flex:1}

/* ---------- §5 LOBBY ---------- */
.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; align-items:center}
.chip{cursor:pointer; font-size:12px; font-weight:800; padding:7px 13px; border-radius:999px;
  border:1px solid var(--line); background:transparent; color:var(--muted)}
.chip.on{color:var(--bg); background:linear-gradient(90deg,var(--cyan),var(--lime)); border-color:transparent}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px}
.ct{position:relative; border:1px solid var(--line); border-radius:var(--r-lg); padding:14px; background:var(--card);
  backdrop-filter:blur(6px); overflow:hidden; transition:.2s}
.ct:hover{border-color:rgba(0,240,255,.4)}
.ct .top{display:flex; justify-content:space-between; align-items:flex-start; gap:8px}
.matchup{font-weight:800; font-size:15px; line-height:1.25}
.matchup .vs{color:var(--muted); font-weight:600; font-size:12px}
.tier{font-size:11px; font-weight:900; padding:5px 9px; border-radius:var(--r-sm); white-space:nowrap; color:var(--bg)}
.tier.t1{background:linear-gradient(90deg,#7be0ff,#00f0ff)}
.tier.t5{background:linear-gradient(90deg,var(--lime),#7be0ff)}
.tier.t25{background:linear-gradient(90deg,var(--gold),var(--lime))}
.tier.t100{background:linear-gradient(90deg,var(--magenta),var(--gold))}
.ct .meta{display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-top:10px}
.pot{color:var(--gold); font-weight:800}
/* sport + stake selectors: ONE row at natural size with FULL labels, then the whole row "zooms
   down" (uniform CSS transform via scaleBar()) to fit any width incl. mobile, staying centered.
   .barfit clips the pre-transform layout box so the page never gains a horizontal scrollbar. */
/* flex-centered wrapper. NOTE: overflow:hidden here would force "safe" start-alignment and pin the
   row left, so we keep it visible - scaleBar() applies negative margins so the layout box fits and
   nothing actually overflows (body has overflow-x:hidden as a belt-and-suspenders clip). */
.barfit{width:100%; overflow:visible; display:flex; justify-content:center}
.sportbar{display:flex; flex:0 0 auto; flex-wrap:nowrap; white-space:nowrap; gap:6px;
  transform-origin:center top; padding-bottom:2px}
.sporttab{
  cursor:pointer; font-family:"Segoe UI",system-ui,-apple-system,sans-serif; font-weight:800; font-size:13px; letter-spacing:0;
  color:var(--muted); background:var(--card); border:1px solid var(--line); padding:11px 13px;
  border-radius:12px; text-align:center; transition:color .15s,border-color .15s; flex:0 0 auto; white-space:nowrap;
}
.sporttab:hover{ color:var(--ink); border-color:var(--line) }
.sporttab.on{ color:var(--bg); background:linear-gradient(90deg,var(--magenta),var(--violet)); border-color:transparent; box-shadow:var(--glow-magenta); }

/* RACING sub-selector pills (All / NASCAR / F1) shown under the RACING tab */
.subtabs{display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin:0 0 14px}
.subtab{cursor:pointer; font-family:var(--font-display); font-weight:800; font-size:12px; letter-spacing:.04em;
  color:var(--muted); background:var(--card); border:1px solid var(--line); padding:8px 16px; border-radius:999px; transition:.15s}
.subtab:hover{color:var(--ink)}
.subtab.on{color:var(--bg); background:linear-gradient(90deg,var(--cyan),var(--lime)); border-color:transparent}


/* featured game ribbon (NBA Finals · Game 1) */
.ct.featured{ border-color:rgba(255,210,63,.5); box-shadow:0 0 26px rgba(255,210,63,.18); }
.ribbon{ display:inline-block; margin:0 0 8px; font-size:10px; font-weight:900; letter-spacing:.16em;
  color:var(--bg); background:linear-gradient(90deg,var(--gold),var(--lime)); padding:4px 10px; border-radius:999px; }

/* global unit selector: ONE row, full chips, zooms down to fit (same scaleBar() as the sport tabs) */
.stakebar{display:flex; flex:0 0 auto; flex-wrap:nowrap; white-space:nowrap; align-items:center; gap:5px;
  transform-origin:center top}
.stakefit{margin:0 0 20px}
/* Big Duck Race banner */
.bigrace-bar{display:none; margin:0 0 12px; padding:11px 14px; border:1px solid var(--line); border-radius:var(--r-md);
  background:linear-gradient(90deg, rgba(255,43,214,.12), rgba(53,232,255,.07)); align-items:center; gap:12px; flex-wrap:wrap}
.bigrace-bar.show{display:flex}
.br-main{flex:1; min-width:210px}
.br-title{font-family:var(--font-display); font-weight:800; letter-spacing:.02em; font-size:14px; color:var(--ink)}
.br-title b{color:var(--gold)}
.br-sub{font-size:11.5px; color:var(--muted); margin-top:2px}
.br-vip{font-size:11px; padding:3px 10px; border-radius:999px; border:1px solid var(--line); background:var(--card); white-space:nowrap}
.br-run{font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  padding:7px 14px; border-radius:999px; border:1px solid var(--magenta); color:var(--magenta); background:transparent; cursor:pointer; white-space:nowrap}
.br-run:disabled{opacity:.5; cursor:default}
/* community-giveback ticker: hidden until the 8% rake has routed something back */
.giveback-bar{display:none; margin:0 0 18px; padding:11px 14px; border:1px solid var(--line);
  border-radius:var(--r-md); background:linear-gradient(90deg, rgba(255,210,63,.10), rgba(182,255,26,.06));
  box-shadow:inset 0 0 0 1px rgba(255,210,63,.06)}
.giveback-bar.show{display:block}
.gb-head{font-size:13px; color:var(--ink); display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px}
.gb-head b{color:var(--gold)}
.gb-sub{font-size:11px; color:var(--muted); letter-spacing:.01em}
.gb-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px}
.gb-chip{font-size:11px; color:var(--muted); border:1px solid var(--line); border-radius:999px;
  padding:3px 9px; background:var(--card)}
.gb-chip b{color:var(--lime); font-family:var(--font-display); margin-right:3px}
.gb-mini{font-size:10px; color:var(--muted); letter-spacing:.02em}
.stakebar-lbl{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-right:2px}
/* stake chips are ~1/4 the footprint of a sport tab (tight + small so all 10 fit) */
.stakebar .chip{font-family:var(--font-display); min-width:28px; text-align:center; font-size:8.5px; padding:4px 6px; letter-spacing:0}
.bar{height:9px; border-radius:6px; background:rgba(255,255,255,.08); margin-top:8px; overflow:hidden}
.bar>span{display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,var(--lime),var(--cyan)); transition:width .4s}
.pickhint{font-size:10.5px; color:var(--muted); margin-top:10px; letter-spacing:.02em; text-align:center}
/* 10-column grid (like the live board): all ten digits always lay out on one even
   row - never a single number orphaned onto a line below. Cells cap at 30px and the
   whole row is centered; on narrow cards the columns shrink to fit (still one row). */
.seatdots{display:grid; grid-template-columns:repeat(10,minmax(0,30px)); justify-content:center; gap:6px; margin-top:6px}
/* schedule day headers + create-your-own card */
.dayhdr{font-family:var(--font-display); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan); font-weight:800; margin:14px 0 2px}
.createcard{display:flex; align-items:center; gap:14px; cursor:pointer; border:1px dashed var(--line); border-radius:var(--r-lg); background:var(--card); padding:16px 18px; transition:.15s}
.createcard:hover{border-color:var(--cyan); box-shadow:var(--glow-cyan); transform:translateY(-2px)}
.cc-plus{font-family:var(--font-display); font-size:30px; font-weight:900; line-height:1; width:40px; height:40px; display:grid; place-items:center; border-radius:12px; color:var(--bg); background:linear-gradient(90deg,var(--cyan),var(--lime))}
.sd{width:100%; aspect-ratio:1; height:auto; min-width:0; border-radius:7px; border:1px solid var(--line); font-size:12px; font-weight:800;
  font-family:var(--font-display); display:grid; place-items:center; color:var(--muted); transition:.15s}
.sd.taken{background:rgba(255,255,255,.05); color:var(--muted); opacity:.5}
.sd.open{cursor:pointer; color:var(--ink); border-color:rgba(0,240,255,.35)}
.sd.open:hover{background:rgba(0,240,255,.18); border-color:var(--cyan); color:var(--cyan);
  box-shadow:var(--glow-cyan); transform:translateY(-2px)}
.sd.me{background:var(--gold); color:var(--bg); border-color:var(--gold); box-shadow:0 0 10px rgba(255,210,63,.6)}
.ct .cta{display:flex; gap:8px; margin-top:12px}
.statusline{font-size:11px; margin-top:8px; text-align:center}
.countdown{font-variant-numeric:tabular-nums}
/* neon kickoff countdown shown below the start time; blinks under 30s, flips at tip */
.kickoff-cd{font-size:12px; font-weight:800; text-align:center; margin-top:5px; letter-spacing:.03em;
  color:var(--cyan); text-shadow:0 0 10px rgba(0,240,255,.65)}
.kickoff-cd .countdown{font-variant-numeric:tabular-nums}
.kickoff-cd.cd-soon{color:var(--magenta); text-shadow:0 0 12px rgba(255,43,214,.85); animation:cd-blink .8s steps(1,end) infinite}
.kickoff-cd.cd-live{color:var(--lime); text-shadow:0 0 12px rgba(182,255,26,.85)}
@keyframes cd-blink{0%,49%{opacity:1} 50%,100%{opacity:.2}}
.mynum-line{font-size:11px; color:var(--gold); font-weight:800; margin-top:8px}
.badge{position:absolute; top:0; right:0; font-size:9.5px; font-weight:900; letter-spacing:.14em; padding:4px 10px;
  border-bottom-left-radius:var(--r-md); text-transform:uppercase}
.badge.open{background:rgba(33,230,164,.18); color:var(--green)}
.badge.locked{background:rgba(255,210,63,.18); color:var(--gold)}
.badge.live{background:rgba(255,43,214,.2); color:var(--magenta); animation:pulse 1.2s infinite}
.badge.void{background:rgba(255,77,109,.18); color:var(--danger)}
.badge.settled{background:rgba(155,92,255,.2); color:var(--violet)}
@keyframes pulse{50%{opacity:.5}}

/* ---------- §5b TEAM THEMING (colors + logos per game) ---------- */
/* full-bleed two-tone stripe at the top of a contest card */
.cardstripe{display:flex; height:5px; margin:-14px -14px 12px}
.cardstripe>span{flex:1}
/* matchup line: logo + abbreviation chip per team */
.teamline{display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0}
/* PGA: tournament title always one line ("name ... - Round X"); round never wraps */
.pga-matchup{display:flex; flex-direction:column; gap:3px; min-width:0; max-width:100%}
.pga-title{display:flex; align-items:baseline; white-space:nowrap; min-width:0; font-size:12px; font-weight:700; color:var(--cyan); line-height:1.15}
.pga-name{overflow:hidden; text-overflow:ellipsis; min-width:0}
.pga-round{flex:0 0 auto; white-space:pre}
.pga-golfers{font-size:12px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; max-width:100%}
.tm{display:flex; align-items:center; gap:6px; padding:4px 8px; border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--tc) 16%, transparent); border:1px solid color-mix(in srgb, var(--tc) 45%, transparent)}
.tm b{font-size:14px; letter-spacing:.02em}
.teamline .vs{color:var(--muted); font-size:11px; font-weight:700}
/* UFC: headshot face next to the country-flag button */
.ufc-fighter{display:flex; align-items:center; gap:6px}
.fighter-face{width:30px; height:30px; border-radius:50%; object-fit:cover; object-position:top center;
  border:1px solid rgba(255,255,255,.35); background:#13112a; flex:0 0 auto}
/* UFC flag chip: the fighter's button is their country flag, name overlaid */
.tm.flagtm{position:relative; overflow:hidden; justify-content:center; min-width:64px; padding:6px 14px;
  background:#0b0a1e center/cover no-repeat; border:1px solid rgba(255,255,255,.55)}
.tm.flagtm::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.5))}
.tm.flagtm b{position:relative; z-index:1; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.95), 0 0 3px rgba(0,0,0,.85)}
.tlogo{width:20px; height:20px; object-fit:contain; display:block}
.tlogo.lg{width:34px; height:34px; margin-bottom:2px}
.tlogo.sm{width:16px; height:16px; display:inline-block; vertical-align:middle; margin-right:4px}
/* team-themed game cell used in profile history + live header */
.gamecell{display:inline-flex; align-items:center; gap:6px}
.gamecell .vs{color:var(--muted); font-size:10px; font-weight:700}
.gamecell b{font-size:12px; letter-spacing:.02em}

/* ---------- §6 LIVE GAME ---------- */
.scorecard{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--card); padding:14px; margin-bottom:14px}
.teams{display:flex; align-items:center; justify-content:space-between}
.team{text-align:center; flex:1; display:flex; flex-direction:column; align-items:center; gap:2px}
.team .nm{font-size:12px; color:var(--muted); font-weight:700}
.team .pts{font-size:40px; font-weight:900; line-height:1}
.team.h .pts{color:var(--cyan)} .team.a .pts{color:var(--magenta)}
.clock{flex:0 0 auto; text-align:center; padding:0 12px}
.clock .t{font-size:22px; font-weight:900; font-variant-numeric:tabular-nums}
.clock .p{font-size:10px; letter-spacing:.16em; color:var(--muted); text-transform:uppercase}

.banner{border-radius:var(--r-xl); padding:18px; text-align:center; margin-bottom:14px; border:1px solid var(--line);
  background:var(--card); transition:.25s}
.banner.green{background:linear-gradient(180deg,rgba(33,232,106,.22),rgba(33,232,106,.06));
  border-color:var(--green); box-shadow:var(--glow-green)}
.banner .you{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}
.banner.green .you{color:var(--green)}
.banner .mynum{font-family:var(--font-display); font-size:64px; font-weight:900; line-height:1; margin:2px 0;
  background:linear-gradient(180deg,#fff,var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent}
.banner.green .mynum{background:linear-gradient(180deg,#eafff2,var(--green)); -webkit-background-clip:text; background-clip:text}
.banner .state{font-size:16px; font-weight:800; margin-top:6px}
.banner .state.g{color:var(--green)}
.banner .bsub{font-size:12px; color:var(--muted); margin-top:4px}

.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px}
.pill{border:1px solid var(--line); border-radius:var(--r-md); background:var(--card); padding:12px; text-align:center}
.pill .lab{font-size:9.5px; letter-spacing:.2em; color:var(--muted); text-transform:uppercase}
.pill .v{font-size:22px; font-weight:900}
.pill .v.gold{color:var(--gold)}

.board{display:grid; grid-template-columns:repeat(10,minmax(0,58px)); gap:5px; justify-content:center; margin:0 auto 14px; max-width:100%}
.seat{border:1px solid var(--line); border-radius:9px; padding:7px 2px 5px; text-align:center; background:rgba(255,255,255,.03); transition:.18s}
.seat .n{font-size:17px; font-weight:900; color:var(--muted)}
.seat .bal{font-size:9px; font-weight:800; margin-top:2px}
.seat.me{border-color:var(--gold)} .seat.me .n{color:var(--gold)}
.seat.live{border-color:var(--cyan); box-shadow:0 0 12px rgba(0,240,255,.4)} .seat.live .n{color:var(--cyan)}
.seat.live.mine{border-color:var(--green); box-shadow:0 0 16px rgba(33,232,106,.6)} .seat.live.mine .n{color:var(--green)}

.flash{position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center; pointer-events:none}
.flash.show{display:flex}
.flashcard{background:#0c0a22; border:1px solid var(--line); border-radius:var(--r-xl); padding:24px 30px; text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.6); animation:pop .4s ease}
.flashcard.won{border-color:var(--green); box-shadow:0 0 50px rgba(33,232,106,.5); background:linear-gradient(180deg,#08240f,#0c0a22)}
.flashcard .k{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted)}
.flashcard .big{font-size:34px; font-weight:900; margin:6px 0}
.flashcard .big.g{color:var(--green)}
.flashcard .amt{font-size:16px; font-weight:800}
@keyframes pop{0%{transform:scale(.85);opacity:0}60%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}

.log{border:1px solid var(--line); border-radius:var(--r-md); background:var(--card); padding:6px 12px}
.lrow{display:grid; grid-template-columns:auto 1fr auto auto; gap:8px; align-items:center; padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.06); font-size:12.5px}
.lrow:last-child{border-bottom:none}
.dot{width:16px; height:16px; border-radius:50%; display:grid; place-items:center; font-size:9px; font-weight:900; color:var(--bg)}
.dot.s{background:var(--cyan)} .dot.f{background:var(--gold)}
.lrow .w{font-weight:900}
.lrow.mewin .w{color:var(--green)}
.lrow .sc{color:var(--muted)}
.controls{display:flex; gap:8px; margin:14px 0}
.hint{font-size:11px; color:var(--muted); text-align:center; margin-top:6px}

/* ---------- §7 PROFILE ---------- */
.id{display:flex; align-items:center; gap:16px; border:1px solid var(--line); border-radius:var(--r-xl);
  background:var(--card); padding:18px; margin-bottom:16px; backdrop-filter:blur(6px); flex-wrap:wrap}
.avatar{width:74px; height:74px; border-radius:20px; display:grid; place-items:center; font-size:30px; font-weight:900; color:var(--bg);
  background:linear-gradient(135deg,var(--cyan),var(--magenta)); box-shadow:0 0 26px rgba(255,43,214,.4); flex:0 0 auto}
.id .name{font-size:22px; font-weight:900}
.id .handle{font-size:13px; color:var(--cyan)}
.id .since{font-size:11px; color:var(--muted); margin-top:3px}
.verified{font-size:10px; font-weight:900; letter-spacing:.1em; color:var(--green); border:1px solid rgba(33,232,106,.4);
  border-radius:999px; padding:3px 9px; margin-left:8px}
.balcol{margin-left:auto; text-align:right}
.balcol .lab{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.balcol .big{font-size:30px; font-weight:900; color:var(--lime)}
.balcol .small{font-size:11px; color:var(--gold); margin-top:2px}
.balcol .btns{display:flex; gap:8px; margin-top:8px; justify-content:flex-end}

.statgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px}
.stat{border:1px solid var(--line); border-radius:var(--r-md); background:var(--card); padding:14px}
.stat .lab{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.stat .v{font-size:24px; font-weight:900; margin-top:4px}
.stat .v.gold{color:var(--gold)} .stat .v.cyan{color:var(--cyan)}

.panel{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--card); padding:16px; margin-bottom:16px}
.panel h2{margin:0 0 14px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan)}

.heat{display:grid; grid-template-columns:repeat(10,1fr); gap:6px}
.hc{border:1px solid var(--line); border-radius:var(--r-md); text-align:center; padding:8px 2px 6px}
.hc .d{font-size:18px; font-weight:900}
.hc .c{font-size:10px; color:var(--muted); margin-top:2px}
.legend{font-size:11px; color:var(--muted); margin-top:10px}

table{width:100%; border-collapse:collapse; font-size:13px}
th{text-align:left; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:6px 8px; font-weight:700}
td{padding:9px 8px; border-top:1px solid rgba(255,255,255,.06)}
.numbadge{display:inline-grid; place-items:center; width:24px; height:24px; border-radius:7px; font-weight:900; font-size:12px;
  background:rgba(255,210,63,.15); color:var(--gold); border:1px solid rgba(255,210,63,.35)}
.res.pos{font-weight:800} .res.neg{font-weight:800}
.tierbadge{font-size:11px; font-weight:900; color:var(--bg); padding:2px 7px; border-radius:6px}

.rg{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px}
.rgc{border:1px dashed var(--line); border-radius:var(--r-md); padding:12px}
.rgc .l{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em}
.rgc .val{font-size:18px; font-weight:900; margin-top:4px}
.rgc input{width:100%; margin-top:6px; background:#0b0a1e; border:1px solid var(--line); border-radius:var(--r-sm); color:var(--ink); padding:6px 8px}
.foot{font-size:11px; color:var(--muted); line-height:1.6; margin-top:6px}

/* ---------- §7b SIGNUP OVERLAY (online mode) ---------- */
.signup-ov{position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:18px;
  background:rgba(4,3,12,.82); backdrop-filter:blur(6px)}
.signup-card{width:min(380px,100%); text-align:center; background:linear-gradient(180deg,#0c0a22,#0a0820);
  border:1px solid var(--line); border-radius:var(--r-xl); padding:26px 22px;
  box-shadow:0 20px 70px rgba(0,0,0,.6)}
.signup-card .logo{margin-bottom:6px}
.signup-h{font-size:14px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); margin:8px 0 16px}
/* Log in / Create account toggle at the top of the sign-in card */
.signup-tabs{display:flex; gap:5px; margin:10px 0 16px; padding:4px; background:rgba(255,255,255,.045); border:1px solid var(--line); border-radius:var(--r-md)}
.su-tab{flex:1; border:0; background:transparent; color:var(--muted); font-family:var(--font-display); font-weight:800; letter-spacing:.02em; font-size:13px; padding:9px 6px; border-radius:calc(var(--r-md) - 4px); cursor:pointer; transition:background .15s, color .15s}
.su-tab:hover{color:var(--ink)}
.su-tab.active{background:linear-gradient(90deg,var(--cyan),var(--magenta) 55%,var(--lime)); color:#0a0618}
.signup-in{width:100%; background:#0b0a1e; border:1px solid var(--line); border-radius:var(--r-md);
  color:var(--ink); font-size:16px; padding:12px 14px; margin-bottom:12px; text-align:center; font-family:var(--font-display)}
.signup-in:focus{outline:none; border-color:var(--cyan); box-shadow:var(--glow-cyan)}
.signup-err{font-size:12px; color:var(--danger); font-weight:700; min-height:16px; margin:2px 0 8px}
.signup-sub{font-size:11px; color:var(--muted); margin-top:12px}

/* ---------- §8 SHARED ---------- */
/* mobile: friends will mostly open this on their phones */
@media (max-width:560px){
  .wrap{padding:14px 12px 60px}
  .appbar{gap:6px}
  .appbar .logo{font-size:18px}
  .nav{gap:3px}
  .nav button{padding:6px 7px; font-size:11px}
  .me{padding:3px 4px 3px 9px; gap:6px}
  .me-pic{width:28px; height:28px; font-size:12px}
  .me-name{max-width:40vw}
  .wbox{padding:6px 10px}
  .wbox .val{font-size:16px}
  .hero-title{letter-spacing:.08em}
  .lobby-hero{padding:12px 0 12px}
  .hero-duck{width:64px; height:64px; margin-bottom:6px}
  #view-lobby .seclabel{text-align:center}   /* centered, clean reading on mobile */
  .grid{grid-template-columns:1fr; gap:12px}
  .sporttab{padding:9px 2px}
  .sportbar{gap:2px}
  .stakebar{gap:4px}
  .stakebar .chip{min-width:26px; padding:5px 5px; font-size:8.5px}
  .board{gap:4px}
  .team .pts{font-size:34px}
  .signup-card{padding:22px 16px}
  .id{padding:14px}
  .balcol{margin-left:0; text-align:left; width:100%}
  .balcol .btns{justify-content:flex-start}
}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:80;
  background:#120f2c; border:1px solid var(--line); border-radius:var(--r-md); padding:12px 18px; font-size:13px;
  box-shadow:0 10px 40px rgba(0,0,0,.5); opacity:0; transition:opacity .25s, transform .25s; pointer-events:none}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-4px)}

/* ---------- §10 OFFLINE DUCK RACE (downtime fallback) ---------- */
.offline-race{position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:18px;
  background:radial-gradient(1200px 600px at 50% -10%, rgba(255,43,214,.10), transparent),
             linear-gradient(180deg, rgba(7,6,18,.92), rgba(7,6,18,.97)); backdrop-filter:blur(6px)}
.offline-race.hidden{display:none !important}
.rl-card{width:min(680px,96vw); background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:20px 18px; box-shadow:0 30px 80px rgba(0,0,0,.6)}
.rl-head{text-align:center; margin-bottom:14px}
.rl-title{font-family:var(--font-display); font-weight:900; font-size:20px; letter-spacing:.06em;
  display:inline-flex; align-items:center; gap:8px}
.rl-title .rl-gradtext{background:linear-gradient(90deg,var(--cyan),var(--magenta) 55%,var(--lime));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.rl-sub{font-size:12px; color:var(--muted); margin-top:6px; line-height:1.5}
.rl-dots{color:var(--cyan); animation:rl-pulse 1.3s ease-in-out infinite}
@keyframes rl-pulse{0%,100%{opacity:.35}50%{opacity:1}}
.rl-track-wrap{display:flex; flex-direction:column; gap:5px}
.rl-lane{display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.03); border:1px solid var(--line);
  border-radius:10px; padding:3px 8px; transition:border-color .2s, background .2s}
.rl-num{flex:0 0 22px; text-align:center; font-family:var(--font-display); font-weight:900; font-size:13px; color:var(--muted)}
.rl-track{position:relative; flex:1 1 auto; height:26px}
.rl-track::after{content:""; position:absolute; right:8%; top:-2px; bottom:-2px; width:0; border-right:2px dashed rgba(255,255,255,.22)}
.rl-duck{position:absolute; left:0; top:50%; width:24px; height:24px; margin-top:-12px; will-change:left,transform}
.rl-duck-svg{width:100%; height:100%; overflow:visible; transform:scaleX(-1); filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.rl-flag{flex:0 0 auto; font-size:15px; filter:grayscale(.2)}
.rl-lane.won{border-color:var(--lime); background:rgba(182,255,26,.10); box-shadow:0 0 24px rgba(182,255,26,.25)}
.rl-lane.won .rl-num{color:var(--lime)}
.rl-status{text-align:center; margin-top:14px; font-weight:800; font-size:14px; color:var(--ink)}
.rl-status.won{color:var(--lime)}
/* in-game results chart: who won the previous races in this set */
.rl-results{margin-top:14px; border-top:1px solid var(--line); padding-top:12px}
.rl-res-h{text-align:center; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.rl-res-grid{display:grid; grid-template-columns:repeat(10,1fr); gap:5px}
.rl-rc{display:flex; flex-direction:column; align-items:center; gap:2px; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:5px 0}
.rl-rc-d{font-size:10px; color:var(--muted); font-weight:700}
.rl-rc-c{font-size:14px; font-weight:900; color:var(--ink)}
.rl-rc.lead{border-color:transparent; background:linear-gradient(180deg,var(--lime),var(--cyan)); }
.rl-rc.lead .rl-rc-d,.rl-rc.lead .rl-rc-c{color:var(--bg)}
.rl-recent{text-align:center; font-size:11px; color:var(--muted); margin-top:9px}
.rl-win{display:inline-block; font-weight:800; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:1px 7px; margin:0 2px}
@media (max-width:480px){ .rl-title{font-size:17px} .rl-track{height:22px} .rl-duck{width:20px;height:20px;margin-top:-10px} }

/* ============================================================
   §LIVE - "your games" list + immersive stadium scoreboard mode
   ============================================================ */
.mygame .cta .btn{font-size:13px}
.mygame .statusline{font-size:12px;margin-top:6px}

/* Stadium backdrop: fixed behind the live view, only revealed in scoreboard mode. */
.stadium-bg{position:fixed;inset:0;z-index:-1;opacity:0;pointer-events:none;transition:opacity .6s ease}
#view-live.board-on .stadium-bg{opacity:1}
.stadium-bg .lights{position:absolute;inset:0;
  background:
    radial-gradient(120% 70% at 50% -12%, rgba(0,240,255,.20), transparent 60%),
    radial-gradient(80% 55% at 14% -4%, rgba(255,43,214,.16), transparent 55%),
    radial-gradient(80% 55% at 86% -4%, rgba(182,255,26,.14), transparent 55%),
    linear-gradient(180deg, #05040f, #0a0820 58%, #05040f);
  transition:filter .5s ease}
.stadium-bg .crowd{position:absolute;left:-6%;right:-6%;bottom:0;height:48%;
  background-image:radial-gradient(circle, rgba(255,255,255,.08) 0 1.3px, transparent 1.6px);
  background-size:13px 13px;filter:blur(.5px);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 72%);
          mask-image:linear-gradient(180deg, transparent, #000 72%)}
.stadium-bg .flash{position:absolute;left:0;right:0;bottom:8%;height:40%;opacity:0;
  background-image:radial-gradient(circle, #fff 0 1px, transparent 2.2px);
  background-size:120px 84px;animation:stadFlash 4s steps(1) infinite}
@keyframes stadFlash{0%,100%{opacity:0}6%{opacity:.22}8%{opacity:0}46%{opacity:0}49%{opacity:.18}51%{opacity:0}}

/* In scoreboard mode: darken the chrome to "arena" tone + spotlight your number. */
#view-live.board-on .scorecard{background:linear-gradient(180deg, rgba(13,10,36,.72), rgba(7,6,18,.86));
  box-shadow:0 14px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04)}
#view-live.board-on .seat.me{box-shadow:0 0 0 2px var(--gold), 0 0 26px rgba(255,210,63,.45);position:relative}
#view-live.board-on .seat.me::after{content:"";position:absolute;left:50%;top:-140%;width:160%;height:240%;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 0%, rgba(255,210,63,.20), transparent 70%);pointer-events:none}
#view-live.board-on .seat.mine{box-shadow:0 0 0 2px var(--lime), 0 0 34px rgba(182,255,26,.6)}
/* crowd roars (lights flare) while your number is the live digit */
body.winmode #view-live.board-on .stadium-bg .lights{filter:brightness(1.35) saturate(1.2)}
body.winmode #view-live.board-on .stadium-bg .flash{animation-duration:1.1s}

/* "+ Create": a small undercarriage tab hanging flush off the bottom of the sport tabs,
   with breathing room before the unit (stake) chips below. */
.createbar{display:flex;justify-content:center;margin:-1px 0 18px}
.sporttab.create{width:auto;font-size:11px;padding:5px 34px;border-style:dashed;border-top:none;
  border-radius:0 0 11px 11px;border-color:rgba(255,43,214,.4);color:var(--magenta);
  background:rgba(255,43,214,.06);font-weight:800;letter-spacing:.03em}
.sporttab.create:hover{background:rgba(255,43,214,.12)}
.sporttab.create.on{background:linear-gradient(90deg, rgba(255,43,214,.22), rgba(0,240,255,.12));color:var(--ink);border-style:solid;border-top:none}

/* ============================================================
   §VENUE - immersive COSM-style broadcast stage in the scoreboard
   ============================================================ */
.venue{margin:12px 0 4px;display:flex;justify-content:center}
.venue-stage{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/9;width:100%;max-width:760px;margin:0 auto;
  border:1px solid rgba(150,170,255,.18);background:#0a0a18;
  box-shadow:0 18px 60px rgba(0,0,0,.6), inset 0 0 0 3px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.05)}
.vsvg{position:absolute;inset:0;width:100%;height:100%;display:block}
/* LIVE tag (top-left) */
.venue-tag{position:absolute;top:9px;left:10px;display:flex;align-items:center;gap:6px;
  font-size:10px;font-weight:800;letter-spacing:.14em;color:#fff;text-transform:uppercase;
  background:rgba(7,6,18,.55);padding:4px 9px;border-radius:20px;backdrop-filter:blur(3px)}
.venue-tag .dot{width:7px;height:7px;border-radius:50%;background:var(--magenta);box-shadow:0 0 8px var(--magenta);animation:vpulse 1.6s infinite}
.venue-tag .vwhere{color:var(--muted);font-weight:700;letter-spacing:.08em}
@keyframes vpulse{0%,100%{opacity:1}50%{opacity:.35}}
/* "TV feed ready" hint (top-right) - this stage can host a live video later */
.venue-feed{position:absolute;top:9px;right:10px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(200,210,255,.45);border:1px dashed rgba(200,210,255,.25);padding:3px 7px;border-radius:6px}
/* broadcast bug (bottom lower-third) */
.vbug{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:10px 14px 12px;background:linear-gradient(180deg, transparent, rgba(6,5,16,.85))}
.vteam{display:flex;align-items:center;gap:7px;font-weight:800;font-size:15px;color:#fff}
.vteam b{color:var(--c,#fff);text-shadow:0 1px 6px rgba(0,0,0,.6)}
.vteam.home{flex-direction:row}
.vteam .vsc{font-size:20px;font-weight:900;min-width:20px;text-align:center}
.vmeta{display:flex;flex-direction:column;align-items:center;gap:1px;color:#fff;min-width:74px}
.vmeta .vper{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}
.vmeta .vclk{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
/* baseball live diamond bug */
.vmeta.bb{flex-direction:row;gap:10px;min-width:auto}
.vdia{position:relative;width:38px;height:32px}
.vb{position:absolute;width:9px;height:9px;background:rgba(255,255,255,.16);transform:rotate(45deg);border:1px solid rgba(255,255,255,.4)}
.vb.b2{left:50%;top:0;margin-left:-4.5px}.vb.b1{right:1px;top:48%;margin-top:-4.5px}.vb.b3{left:1px;top:48%;margin-top:-4.5px}
.vb.on{background:var(--gold);box-shadow:0 0 9px rgba(255,210,63,.85);border-color:var(--gold)}
.vbcol{display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.vbcol .vinn{font-size:11px;font-weight:800;color:var(--cyan);letter-spacing:.04em}
.vbcol .vouts{font-size:11px;color:#fff;font-variant-numeric:tabular-nums}
/* brighten the stage when the player's number is live */
body.winmode #view-live.board-on .venue-stage{box-shadow:0 18px 70px rgba(182,255,26,.25), inset 0 0 0 3px rgba(182,255,26,.25)}
@media (max-width:480px){ .vteam{font-size:13px} .vteam .vsc{font-size:17px} }

/* venue bug: football down-distance sub-line + possession indicator */
.vmeta .vsub{font-size:10px;font-weight:700;letter-spacing:.05em;color:var(--muted);min-height:12px}
.vmeta .vsub.redzone{color:#ff5a5a;text-shadow:0 0 8px rgba(255,40,40,.5)}
.vposs{display:none;color:#ffd23f;font-size:11px;text-shadow:0 0 8px rgba(255,210,63,.9);line-height:1}
.vposs.on{display:inline}

/* ============================================================
   §LEGAL - footer (matches the marketing page); disclaimer lines stay one line
   ============================================================ */
.legal-bar{
  text-align:center; margin-top:26px; border-top:1px solid var(--line); color:var(--muted);
  padding:30px 14px calc(40px + env(safe-area-inset-bottom)); line-height:1.6;
}
.legal-bar .foot-logo{display:inline-flex; justify-content:center; font-size:20px; margin-bottom:14px}
.foot-social{display:flex; gap:18px; justify-content:center; margin:0 0 18px; font-weight:600; font-size:14px}
.foot-social a{color:var(--muted); text-decoration:none; transition:color .2s; cursor:pointer}
.foot-social a:hover{color:var(--ink)}
.foot-disc{line-height:1.7}
.foot-disc b, .foot-disc span{display:block; white-space:nowrap}
.foot-disc b{color:var(--ink); font-size:clamp(6px,1.7vw,14px)}
.foot-disc span{font-size:clamp(5px,1.6vw,13px)}
.foot-built{margin-top:16px; font-weight:700; letter-spacing:.04em}
.foot-copy{margin-top:6px; opacity:.6; font-size:13px}
.foot-grad{background:linear-gradient(90deg,var(--cyan),var(--magenta) 55%,var(--lime)); -webkit-background-clip:text; background-clip:text; color:transparent}