/* =====================================================================
   BRAGGING RIGHTS — "Arena Floor" theme (visual overhaul v2)
   Concept: fight-poster typography under arena spotlights, sportsbook LED
   ticker, and the octagon's 45° cut repeated as a system-wide motif.
   Palette: layered greens on true black — not one accent, a whole field.
   ===================================================================== */

:root {
  --ink:  #050705;   /* page black, green-cast */
  --pit:  #0a0f0a;   /* raised black */
  --card: #0d130d;   /* card field */
  --card2:#121a12;   /* card hover / inner */
  --line: #1e2a1e;   /* hairline */
  --line2:#2c3c2c;   /* strong line */
  --moss: #12a150;   /* action green */
  --volt: #22e06b;   /* bright green */
  --acid: #a3e635;   /* lime highlight */
  --foam: #d3f867;   /* pale lime */
  --bone: #c6cfc6;   /* body text */
  --mute: #7c887c;   /* secondary text */
  --blood:#ff2e2e;   /* live only */
}

body { background: var(--ink); font-family: 'Archivo', sans-serif; color: var(--bone); }

.font-display { letter-spacing: .015em; }
.num { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.tnum { font-variant-numeric: tabular-nums; }

/* Eyebrow labels — mono, spaced, square bullet */
.eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .22em; color: var(--mute); }
.eyebrow::before { content: '▪ '; color: var(--volt); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--moss); }

input, select { color-scheme: dark; }
:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }

/* =====================================================================
   OCTAGON CARD SYSTEM — every .octa gets the upgraded treatment for free:
   soft top-light gradient + inset hairline + hover glow.
   ===================================================================== */
.octa   { clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); }
.octa-sm{ clip-path: polygon(8px 0,  calc(100% - 8px) 0,  100% 8px,  100% calc(100% - 8px),  calc(100% - 8px) 100%,  8px 100%,  0 calc(100% - 8px),  0 8px); }

.octa, .octa-sm {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--acid) 45%, transparent), color-mix(in srgb, var(--acid) 0%, transparent) 38%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--foam) 7%, transparent);
  transition: box-shadow .18s ease, border-color .18s ease;
}
button.octa:hover:not(:disabled), button.octa-sm:hover:not(:disabled) {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--foam) 12%, transparent), 0 0 22px color-mix(in srgb, var(--volt) 18%, transparent);
}

/* =====================================================================
   TICKER — the signature. An arena LED strip of live odds and results.
   ===================================================================== */
.ticker { position: relative; overflow: hidden; background: #030503;
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 6px 12px -8px rgba(0,0,0,.9), inset 0 -6px 12px -8px rgba(0,0,0,.9); }
.ticker::before, .ticker::after { content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none; }
.ticker::before { left: 0;  background: linear-gradient(90deg, #030503, transparent); }
.ticker::after  { right: 0; background: linear-gradient(270deg, #030503, transparent); }
.ticker-track { display: inline-flex; align-items: center; gap: 0; white-space: nowrap;
  width: max-content; padding: 7px 0; animation: tickerScroll 55s linear infinite;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .04em; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.tick-item { color: var(--mute); padding: 0 18px; border-right: 1px solid var(--line); }
.tick-item b { color: var(--bone); font-weight: 600; }
.tick-item .up   { color: var(--volt); }
.tick-item .dog  { color: var(--acid); }
.tick-item .hot  { color: var(--foam); text-shadow: 0 0 10px color-mix(in srgb, var(--foam) 6%, transparent); }
.tick-item .sport{ color: var(--moss); font-weight: 700; }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =====================================================================
   HERO — spotlight + cage hatch + stacked poster type
   ===================================================================== */
.hero-arena {
  position: relative;
  background:
    radial-gradient(ellipse 70% 55% at 50% -10%, color-mix(in srgb, var(--volt) 14%, transparent), transparent 60%),
    radial-gradient(ellipse 40% 35% at 18% 8%,  color-mix(in srgb, var(--acid) 6%, transparent), transparent 70%),
    radial-gradient(ellipse 40% 35% at 82% 8%,  color-mix(in srgb, var(--moss) 8%, transparent),  transparent 70%),
    var(--ink);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
/* cage hatch: two 45° hairline grids, masked to the spotlight */
.hero-arena::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient( 45deg, color-mix(in srgb, var(--volt) 5%, transparent) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--volt) 5%, transparent) 0 1px, transparent 1px 16px);
  mask-image: radial-gradient(ellipse 85% 75% at 50% 0%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 0%, black 30%, transparent 80%);
}
.hero-line { opacity: 0; transform: translateY(26px); animation: heroIn .65s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-line:nth-child(2) { animation-delay: .12s; }
.hero-line:nth-child(3) { animation-delay: .24s; }
.hero-sub  { opacity: 0; animation: heroIn .65s .4s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-cta  { opacity: 0; animation: heroIn .65s .52s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes heroIn { to { opacity: 1; transform: translateY(0); } }

/* One word cut from the cage: stroked, hollow */
.stroke-word { color: var(--volt, #22e06b); } /* solid fallback — never an invisible word */
@supports (-webkit-text-stroke: 2px black) {
  .stroke-word { color: transparent; -webkit-text-stroke: 2px var(--volt, #22e06b); }
}
@supports not (-webkit-text-stroke: 2px black) { .stroke-word { color: var(--volt); } }
.hero-word-lime { color: var(--foam, #d3f867); text-shadow: 0 0 30px rgba(211,248,103,.4); }

/* 45° section slashes — the octagon corner as a divider */
.slash-top    { clip-path: polygon(0 26px, 100% 0, 100% 100%, 0 100%); margin-top: -1px; }
.slash-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), 0 100%); }

/* =====================================================================
   TITLE LADDER (badges + landing podium)
   ===================================================================== */
.title-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 3px;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; white-space: nowrap; }
/* Inside landing ladder rungs the long titles (Emperor of Predictions,
   Greatest of All Time) are wider than the 150px card — let them wrap. */
.ladder-rung .title-badge { white-space: normal; display: inline-block;
  max-width: 100%; line-height: 1.45; }
.title-prospect  { background: var(--card2); color: #9aa79a; border: 1px solid var(--line2); }
.title-contender { background: #0d2a15; color: #4ade80; border: 1px solid #14532d; }
.title-champion  { background: #1a2e0a; color: var(--acid); border: 1px solid #3f6212; }
.title-emperor   { background: linear-gradient(90deg, var(--moss), var(--acid)); color: var(--ink); box-shadow: 0 0 14px color-mix(in srgb, var(--acid) 55%, transparent); }
.title-goat      { background: linear-gradient(90deg, var(--volt), var(--foam), var(--volt)); background-size: 200% auto;
  color: var(--ink); animation: shimmer 2.5s linear infinite; box-shadow: 0 0 22px color-mix(in srgb, var(--foam) 85%, transparent); }
@keyframes shimmer { to { background-position: 200% center; } }

.ladder-rung { transition: transform .22s ease, box-shadow .22s ease; position: relative; }
.ladder-rung:hover { transform: translateY(-5px); box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--volt) 35%, transparent); }
.ladder-rung.rung-goat { border-color: color-mix(in srgb, var(--foam) 55%, transparent) !important;
  box-shadow: 0 0 34px color-mix(in srgb, var(--foam) 22%, transparent); }

/* =====================================================================
   LIVE ELEMENTS
   ===================================================================== */
.live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--blood);
  animation: livePulse 1.6s ease-in-out infinite; box-shadow: 0 0 8px rgba(255,46,46,.9); }
@keyframes livePulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.75); } }

.fn-rank-1 { border-color: var(--acid) !important; box-shadow: 0 0 30px color-mix(in srgb, var(--acid) 22%, transparent), inset 0 1px 0 color-mix(in srgb, var(--foam) 14%, transparent); }
.fn-number-flash { animation: fnFlash 900ms ease-out; }
@keyframes fnFlash { 0% { color: var(--foam); text-shadow: 0 0 18px color-mix(in srgb, var(--foam) 9%, transparent); transform: scale(1.12); }
                     100% { color: inherit; text-shadow: none; transform: scale(1); } }

.fn-progress-track { height: 7px; border-radius: 4px; background: var(--card2); overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6); }
.fn-progress-fill  { height: 100%; background: linear-gradient(90deg, var(--moss), var(--acid));
  box-shadow: 0 0 12px color-mix(in srgb, var(--acid) 5%, transparent); transition: width .5s ease; }

/* Rank numeral — big mono digits in board rows */
.rank-num { font-family: 'IBM Plex Mono', monospace; font-weight: 700; color: var(--mute); }

/* Net-points meter behind leaderboard values */
.net-meter { height: 3px; border-radius: 2px; background: var(--card2); overflow: hidden; margin-top: 3px; }
.net-meter i { display: block; height: 100%; }
.net-meter .pos { background: linear-gradient(90deg, var(--moss), var(--volt)); }
.net-meter .neg { background: linear-gradient(90deg, #7f1d1d, var(--blood)); }

/* =====================================================================
   INTERACTIVE STATES
   ===================================================================== */
.side-btn.selected  { background: var(--moss); border-color: var(--volt); color: #fff;
  box-shadow: 0 0 18px color-mix(in srgb, var(--volt) 4%, transparent), inset 0 1px 0 rgba(255,255,255,.15); }
/* Stakes — one uniform grid, every button identical, thumb-sized. */
.stake-wrap { width: 100%; }
.stake-label { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--mute); margin-bottom: 7px; }
.stake-wrap .flex .stake-label { margin-bottom: 0; }
.stake-wrap .flex { margin-bottom: 7px; }
.stake-grid { display: grid; gap: 8px; width: 100%; }
.stake-btn { min-height: 48px; display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; border-radius: 9px;
  background: var(--pit); border: 1px solid var(--line); color: var(--bone); }
.stake-btn:hover { border-color: var(--acid); color: #fff; }
.stake-btn.selected { background: var(--acid); border-color: var(--foam); color: var(--ink);
  box-shadow: 0 0 14px color-mix(in srgb, var(--acid) 45%, transparent); }
@media (max-width: 380px) { .stake-btn { min-height: 44px; font-size: 14px; } .stake-grid { gap: 6px; } }
.tab-btn { position: relative; }
.tab-btn.active { color: var(--foam); border-color: var(--acid); background: var(--card2); }

/* =====================================================================
   HEADER / NAV
   ===================================================================== */
.hdr { background: linear-gradient(180deg, #0c130c, var(--ink)); border-bottom: 1px solid var(--line); }
.hdr-glyph { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--volt) 45%, transparent)); }
.nav-glass { background: rgba(5,7,5,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =====================================================================
   V3 — MVP shrine, state championship, league identity, chat, hero+
   ===================================================================== */

/* MVP crown worn everywhere */
.mvp-name { color: var(--foam); text-shadow: 0 0 12px color-mix(in srgb, var(--foam) 65%, transparent); }
.mvp-crown { display: inline-block; margin-right: 2px; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--foam) 9%, transparent)); animation: crownBob 2.6s ease-in-out infinite; }
@keyframes crownBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* MVP shrine — the throne room */
.mvp-shrine { position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 90% at 50% -20%, color-mix(in srgb, var(--foam) 16%, transparent), transparent 60%),
    linear-gradient(180deg, #10160c, var(--card));
  border: 1px solid color-mix(in srgb, var(--foam) 4%, transparent) !important;
  box-shadow: 0 0 44px color-mix(in srgb, var(--foam) 14%, transparent), inset 0 1px 0 color-mix(in srgb, var(--foam) 2%, transparent); }
.mvp-shrine::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--foam) 4%, transparent) 0 1px, transparent 1px 18px); }
.mvp-belt { display: inline-flex; align-items: center; gap: 8px; padding: 6px 18px; border-radius: 999px;
  background: linear-gradient(90deg, var(--volt), var(--foam), var(--volt)); background-size: 200% auto;
  animation: shimmer 3s linear infinite; color: var(--ink);
  font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: .04em;
  box-shadow: 0 0 30px color-mix(in srgb, var(--foam) 55%, transparent), inset 0 2px 0 rgba(255,255,255,.35); }
.mvp-holder { font-family: 'Anton', sans-serif; font-size: clamp(28px, 6vw, 44px); }

/* State championship + state champ badge */
.state-champ-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 3px;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  background: #131c10; color: var(--acid); border: 1px solid #3f6212; box-shadow: 0 0 10px color-mix(in srgb, var(--acid) 25%, transparent); }
.state-row-1 { background: linear-gradient(90deg, color-mix(in srgb, var(--foam) 9%, transparent), transparent 70%); }

/* League identity: accent-tinted page */
.lg-hero { border-left: 4px solid var(--lg-accent, var(--acid)); position: relative; overflow: hidden; }
.lg-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(ellipse 60% 100% at 0% 0%, color-mix(in srgb, var(--lg-accent, var(--acid)) 16%, transparent), transparent 70%); }
.lg-emblem { font-size: 42px; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--lg-accent, var(--acid)) 65%, transparent)); }
.lg-leader { border-color: color-mix(in srgb, var(--lg-accent, var(--acid)) 60%, var(--line)) !important;
  box-shadow: 0 0 20px color-mix(in srgb, var(--lg-accent, var(--acid)) 22%, transparent); }
.swatch { width: 26px; height: 26px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; }
.swatch.sel { border-color: #fff; box-shadow: 0 0 10px rgba(255,255,255,.5); }

/* Chat */
.chat-scroll { max-height: 320px; overflow-y: auto; scroll-behavior: smooth; }
.chat-msg { max-width: 85%; }
.chat-mine { margin-left: auto; background: #0e2415; border: 1px solid #14532d; }
.chat-theirs { background: var(--card2); border: 1px solid var(--line); }

/* Home feed */
.feed-lock-soon { border-color: rgba(255,46,46,.5) !important; }
.sport-chip { font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; padding: 2px 7px; border-radius: 3px;
  background: var(--card2); border: 1px solid var(--line); color: var(--moss); }

/* Hero v3: live board preview + orbit ring */
.hero-preview { position: relative; }
.hero-preview .pv-row { animation: pvPulse 3.2s ease-in-out infinite; }
.hero-preview .pv-row:nth-child(2) { animation-delay: .5s; }
.hero-preview .pv-row:nth-child(3) { animation-delay: 1s; }
@keyframes pvPulse { 0%,100% { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--foam) 7%, transparent); } 50% { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--foam) 7%, transparent), 0 0 18px color-mix(in srgb, var(--volt) 22%, transparent); } }
.orbit { position: absolute; border: 1px solid color-mix(in srgb, var(--volt) 14%, transparent); border-radius: 50%; pointer-events: none; }
.hero-stat { font-family: 'IBM Plex Mono', monospace; }

/* =====================================================================
   V4 — CRAFT PASS. Texture, hierarchy, and information made visible.
   ===================================================================== */

/* Film grain: material depth across the arena */
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); }
main, header, nav, footer, .ticker { position: relative; z-index: 2; }

button:active:not(:disabled) { transform: translateY(1px) scale(.995); }

/* Reveal choreography (landing only — one orchestrated moment) */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Animated sheen on the hero's last word */
/* No clipped-gradient text here ever again — solid color, hard fallback, glow. */

/* Monogram avatars — identity in the brand's own shape */
.mono-av { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  background: linear-gradient(160deg, var(--card2), var(--pit)); border: 1px solid var(--line2);
  font-family: 'Anton', sans-serif; font-size: 15px; color: var(--acid); flex-shrink: 0; }
.mono-av.av-me { background: linear-gradient(160deg, #123a1f, var(--pit)); color: var(--foam); }
.mono-av.av-sm { width: 26px; height: 26px; font-size: 12px; }
.av-stack { display: inline-flex; }
.av-stack .mono-av { margin-left: -8px; border: 1px solid var(--ink); }
.av-stack .mono-av:first-child { margin-left: 0; }

/* Segmented progress: one segment per fight — the bar IS the card */
.seg-track { display: flex; gap: 3px; }
.seg { flex: 1; height: 8px; border-radius: 2px; background: var(--card2);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.seg.done { background: linear-gradient(90deg, var(--moss), var(--acid)); box-shadow: 0 0 8px color-mix(in srgb, var(--acid) 4%, transparent); }

/* Fight corners: side 1 = red corner, side 2 = blue corner */
.side-btn { position: relative; overflow: hidden; }
.side-btn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; opacity: .55; }
.corner-red::before  { background: linear-gradient(90deg, #ff4d4d, transparent 70%); }
.corner-blue::before { background: linear-gradient(270deg, #4da3ff, transparent 70%); }
.corner-draw::before { background: linear-gradient(90deg, transparent, #9ca3af, transparent); }
.side-btn.selected::before { opacity: 1; }

/* Main event reads like the headliner */
.main-event { border-color: color-mix(in srgb, var(--acid) 45%, transparent) !important;
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--acid) 7%, transparent), color-mix(in srgb, var(--acid) 0%, transparent) 45%);
  box-shadow: 0 0 30px color-mix(in srgb, var(--moss) 14%, transparent), inset 0 1px 0 color-mix(in srgb, var(--foam) 12%, transparent); }

/* Home feed: day rails + urgency ramp */
.day-head { display: flex; align-items: center; gap: 10px; margin: 22px 0 10px; }
.day-head .dh-label { font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--acid); }
.day-head::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line2), transparent); }
.lock-chip { font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 3px; }
.lock-far  { color: var(--mute); background: var(--card2); border: 1px solid var(--line); }
.lock-day  { color: var(--volt); background: #0c2013; border: 1px solid #14532d; }
.lock-soon { color: var(--foam); background: #16240a; border: 1px solid #3f6212; animation: lockPulse 2s ease-in-out infinite; }
.lock-now  { color: #ffb4b4; background: #2a0d0d; border: 1px solid #7f1d1d; animation: lockPulse 1.1s ease-in-out infinite; }
@keyframes lockPulse { 0%,100% { box-shadow: 0 0 0 color-mix(in srgb, var(--foam) 0%, transparent); } 50% { box-shadow: 0 0 12px color-mix(in srgb, var(--foam) 35%, transparent); } }

/* Saved pick: green glass slip */
.pick-slip { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  background: color-mix(in srgb, var(--moss) 12%, transparent); border: 1px solid color-mix(in srgb, var(--volt) 4%, transparent); border-radius: 4px;
  padding: 4px 10px; font-size: 12px; color: #b7f7cd; }

/* Segmented pill control */
.seg-ctl { display: inline-flex; background: var(--pit); border: 1px solid var(--line); border-radius: 8px; padding: 3px; gap: 2px; }
.seg-ctl button { border-radius: 6px; padding: 7px 14px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--mute); }
.seg-ctl button.on { background: var(--card2); color: var(--foam); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--foam) 12%, transparent), 0 1px 6px rgba(0,0,0,.5); }

/* State plates */
.state-plate { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 30px;
  clip-path: polygon(18% 0, 82% 0, 100% 30%, 100% 70%, 82% 100%, 18% 100%, 0 70%, 0 30%);
  background: linear-gradient(180deg, var(--card2), var(--pit)); border: 1px solid var(--line2);
  font-family: 'Anton', sans-serif; font-size: 15px; letter-spacing: .04em; color: var(--bone); }
.state-plate.plate-1 { color: var(--ink); background: linear-gradient(180deg, var(--foam), var(--acid)); box-shadow: 0 0 16px color-mix(in srgb, var(--foam) 45%, transparent); }

/* MVP shrine rays */
.shrine-rays { position: absolute; inset: -40% -20%; pointer-events: none; opacity: .16;
  background: repeating-conic-gradient(from 0deg at 50% 45%, color-mix(in srgb, var(--foam) 9%, transparent) 0deg 4deg, transparent 4deg 14deg);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 42%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 42%, black 20%, transparent 70%);
  animation: raysTurn 40s linear infinite; }
@keyframes raysTurn { to { transform: rotate(360deg); } }

/* Title progress toward next rung */
.title-track { height: 5px; border-radius: 3px; background: var(--card2); overflow: hidden; margin-top: 7px; }
.title-fill { height: 100%; background: linear-gradient(90deg, var(--moss), var(--acid)); box-shadow: 0 0 8px color-mix(in srgb, var(--acid) 4%, transparent); }

/* Settings toggles */
.tgl { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--pit); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.tgl .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mute); transition: all .18s; }
.tgl.on { border-color: color-mix(in srgb, var(--acid) 5%, transparent); color: var(--foam); }
.tgl.on .dot { background: var(--volt); box-shadow: 0 0 8px color-mix(in srgb, var(--volt) 8%, transparent); }
.tgl.off { color: var(--mute); }

/* League emblem frame */
.lg-frame { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  background: linear-gradient(160deg, color-mix(in srgb, var(--lg-accent, var(--acid)) 18%, var(--card2)), var(--pit));
  border: 1px solid color-mix(in srgb, var(--lg-accent, var(--acid)) 45%, var(--line2)); font-size: 32px; }

.counted { animation: fnFlash 700ms ease-out; }

/* =====================================================================
   V5 — the night loop: split nav, countdown hero, night board, modals
   ===================================================================== */

/* Two-tier nav: primary tabs + sports rail */
.nav-primary { border-bottom: 1px solid var(--line); }
.nav-sports { background: #060906; }
.nav-sports button { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .08em;
  padding: 8px 11px; }

/* Featured-event countdown */
.count-hero { font-family: 'IBM Plex Mono', monospace; font-weight: 700; letter-spacing: .04em;
  font-size: clamp(26px, 7vw, 44px); color: var(--foam); text-shadow: 0 0 24px color-mix(in srgb, var(--foam) 35%, transparent); }
.count-hero .unit { font-size: .38em; color: var(--mute); letter-spacing: .16em; margin: 0 8px 0 2px; }
.count-live { color: #ff6b6b; text-shadow: 0 0 22px rgba(255,46,46,.5); animation: livePulse 1.6s ease-in-out infinite; }

/* Bettable card exit */
.bet-done { animation: betOut .45s cubic-bezier(.5,0,.7,.4) forwards; }
@keyframes betOut { to { opacity: 0; transform: translateX(30px) scale(.97); height: 0; margin: 0; padding: 0; } }

/* Night board */
.night-card { background: linear-gradient(180deg, color-mix(in srgb, var(--acid) 5%, transparent), color-mix(in srgb, var(--acid) 0%, transparent) 50%), var(--card); }
.pos-chip { font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 700; padding: 2px 8px;
  border-radius: 3px; background: var(--card2); border: 1px solid var(--line2); color: var(--bone); }
.pos-chip.pos-lead { background: linear-gradient(90deg, var(--moss), var(--acid)); color: var(--ink); border-color: transparent; }

/* Player rows are tappable */
.player-tap { cursor: pointer; }
.player-tap:hover { filter: brightness(1.15); }

/* Modals */
.modal-wrap { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(3,5,3,.78); backdrop-filter: blur(4px); animation: modalBg .2s ease; }
@keyframes modalBg { from { opacity: 0; } }
.modal-card { width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; margin: 0 8px 8px;
  background: linear-gradient(180deg, #101710, var(--card)); border: 1px solid var(--line2);
  border-bottom-color: var(--moss); animation: modalUp .28s cubic-bezier(.2,.7,.2,1); }
@keyframes modalUp { from { transform: translateY(40px); opacity: 0; } }
@media (min-width: 640px) { .modal-wrap { align-items: center; } .modal-card { margin: 16px; } }

/* Fighter cells in bet cards */
.fighter-shot { width: 44px; height: 44px; object-fit: cover; object-position: top;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  background: var(--card2); border: 1px solid var(--line2); }
.stat-cell { background: var(--pit); border: 1px solid var(--line); border-radius: 6px; padding: 10px; text-align: center; }
.stat-cell b { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 18px; color: var(--foam); }
.stat-cell span { font-size: 9px; text-transform: uppercase; letter-spacing: .12em; color: var(--mute); }

/* Recruiting card */
.recruit-link { font-family: 'IBM Plex Mono', monospace; font-size: 11px; background: var(--pit);
  border: 1px dashed var(--line2); border-radius: 6px; padding: 8px 10px; word-break: break-all; color: var(--volt); }

/* =====================================================================
   V6 — founder marks, founder band, admin panel
   ===================================================================== */
.founder-mark { display: inline-block; color: var(--foam); font-size: .85em;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--foam) 8%, transparent)); }
.av-founder { box-shadow: 0 0 0 2px color-mix(in srgb, var(--foam) 55%, transparent), 0 0 14px color-mix(in srgb, var(--foam) 35%, transparent); }
.founder-plate { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
  background: linear-gradient(100deg, #1a2410, #10160c);
  border: 1px solid color-mix(in srgb, var(--foam) 5%, transparent); color: var(--foam);
  font-family: 'Anton', sans-serif; letter-spacing: .12em; font-size: 12px;
  box-shadow: 0 0 18px color-mix(in srgb, var(--foam) 2%, transparent), inset 0 1px 0 color-mix(in srgb, var(--foam) 25%, transparent); }
.founder-plate-lg { font-size: 20px; padding: 9px 26px; }
.founder-band { position: relative; border-top: 1px solid color-mix(in srgb, var(--foam) 25%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--foam) 25%, transparent);
  background:
    radial-gradient(ellipse 60% 120% at 50% 0%, color-mix(in srgb, var(--foam) 8%, transparent), transparent 60%),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--foam) 3%, transparent) 0 2px, transparent 2px 26px),
    #0a0f08; }

/* Admin buttons */
.adm-btn { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 6px 10px; border-radius: 5px; border: 1px solid var(--line); background: var(--pit); color: var(--bone); }
.adm-btn:hover { border-color: var(--moss); color: #fff; }
.adm-btn.adm-warn { border-color: #713f12; color: #fcd34d; }
.adm-btn.adm-warn:hover { background: #271c05; }
.adm-btn.adm-danger { border-color: #7f1d1d; color: #fca5a5; }
.adm-btn.adm-danger:hover { background: #2a0d0d; }

/* =====================================================================
   V7 — arena rank titles: named chips 1-5, badges 6-10
   ===================================================================== */
.rank-title { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 3px;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.rank-title.rt-1 { background: linear-gradient(100deg, var(--foam), var(--acid)); color: var(--ink);
  box-shadow: 0 0 12px color-mix(in srgb, var(--foam) 45%, transparent); }
.rank-title.rt-2 { background: #1a2410; color: var(--foam); border: 1px solid color-mix(in srgb, var(--foam) 5%, transparent); }
.rank-title.rt-3 { background: #131c10; color: var(--acid); border: 1px solid #3f6212; }
.rank-title.rt-4, .rank-title.rt-5 { background: var(--card2); color: var(--bone); border: 1px solid var(--line2); }
.rank-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 3px;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 700;
  background: var(--pit); color: var(--mute); border: 1px solid var(--line); white-space: nowrap; }

/* =====================================================================
   V8 — props market + roast flavor
   ===================================================================== */
.prop-q { font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: .02em;
  font-size: 17px; line-height: 1.25; color: var(--bone); margin-bottom: 10px; }
.pos-chip.pos-last { background: #1c0f0f; color: #fca5a5; border-color: #7f1d1d; }
.roast-line { font-style: italic; letter-spacing: .04em; }

/* =====================================================================
   V10 — rituals: coronations & consequences
   ===================================================================== */
.av-clown { position: relative; overflow: visible; }
.clown-nose { position: absolute; bottom: -6px; right: -7px; font-size: 15px;
  filter: drop-shadow(0 0 4px rgba(0,0,0,.8)); transform: rotate(12deg); }
.shame-chip { display: inline-flex; padding: 1px 7px; border-radius: 3px;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: .08em;
  background: #1c0f0f; color: #fca5a5; border: 1px solid #7f1d1d; }
.msg-pin { background: #10160c; border: 1px solid color-mix(in srgb, var(--foam) 35%, transparent); border-radius: 8px;
  padding: 8px 12px; margin-bottom: 8px; }
.msg-pin.msg-excuse { background: #170d0d; border-color: #7f1d1d; }
.chat-system { background: #0f150e; border: 1px dashed color-mix(in srgb, var(--foam) 35%, transparent); color: var(--foam);
  font-size: 13px; max-width: 100%; text-align: center; }
.winner-ribbon { position: absolute; top: -10px; left: 14px; padding: 2px 10px; border-radius: 3px;
  font-family: 'Anton', sans-serif; font-size: 12px; letter-spacing: .1em;
  background: linear-gradient(90deg, var(--foam), var(--acid)); color: var(--ink);
  box-shadow: 0 0 14px color-mix(in srgb, var(--foam) 5%, transparent); }
.belt-sweep { position: relative; overflow: hidden; }
.belt-sweep::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--foam) 22%, transparent) 50%, transparent 70%);
  background-size: 250% 100%; animation: beltSweep 2.4s ease-in-out infinite; }
@keyframes beltSweep { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }

/* V11 — worn season titles */
.worn-title { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: .08em;
  background: linear-gradient(100deg, #171f10, #0e130b); color: var(--foam);
  border: 1px solid color-mix(in srgb, var(--foam) 45%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--foam) 18%, transparent); white-space: nowrap; }

/* =====================================================================
   V13 — supporter, hats, themes (incl. Pink Money 🩷)
   ===================================================================== */
.hat-perch { position: absolute; top: -11px; left: 50%; transform: translateX(-50%) rotate(-8deg);
  font-size: 15px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.8)); pointer-events: none; }
.av-hat { overflow: visible; }
.hat-tile { position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 10px 4px 8px; border-radius: 8px; background: var(--pit);
  border: 1px solid var(--line); color: var(--bone); }
.hat-tile:hover { border-color: var(--line2); }
.hat-tile.hat-on { border-color: var(--acid); box-shadow: 0 0 12px color-mix(in srgb, var(--acid) 30%, transparent); }
.hat-tile.hat-locked { opacity: .45; }
.hat-lock { position: absolute; top: 4px; right: 5px; font-size: 10px; }
.theme-tile { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px;
  background: var(--pit); border: 1px solid var(--line); color: var(--bone);
  font-size: 12px; font-weight: 700; }
.theme-tile.theme-on { border-color: var(--acid); box-shadow: 0 0 12px color-mix(in srgb, var(--acid) 30%, transparent); }
.theme-dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.recruit-bar { height: 8px; border-radius: 4px; background: var(--pit); border: 1px solid var(--line); overflow: hidden; }
.recruit-fill { height: 100%; background: linear-gradient(90deg, var(--moss), var(--acid)); transition: width .4s; }

/* Pink Money — free, day one. Not a tint job: a full arena. */
body.theme-pinkmoney {
  --acid: #ff2d78; --foam: #ffd1e3; --moss: #e91e63; --volt: #ff5c8a;
  --ink: #0a0509; --pit: #140812; --card: #180a13; --card2: #221019;
  --line: #3a1626; --line2: #571f38;
  background: var(--ink);
}
body.theme-pinkmoney .grain-layer { opacity: .5; }

/* V14 — SVG hats + name-color swatches */
.hat-perch svg { width: 22px; height: 13px; display: block; }
.hat-preview svg { width: 40px; height: 24px; display: block; }
.hat-preview { display: flex; justify-content: center; }
.swatch { width: 34px; height: 34px; border-radius: 8px; background: var(--pit);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.swatch-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--sw);
  box-shadow: 0 0 10px var(--sw); }
.swatch.swatch-on { border-color: var(--sw); box-shadow: 0 0 12px color-mix(in srgb, var(--sw) 40%, transparent); }

/* V15 — landing wardrobe strip */
.land-hat { display: inline-flex; padding: 10px 12px; border-radius: 10px;
  background: var(--pit); border: 1px solid var(--line); }
.land-hat svg { width: 46px; height: 28px; display: block; }
.land-hat:hover { border-color: var(--acid); box-shadow: 0 0 12px color-mix(in srgb, var(--acid) 25%, transparent); }

/* V17 — supporter ring, backers wall */
.av-supporter { box-shadow: 0 0 0 2px color-mix(in srgb, var(--acid) 60%, transparent); animation: supPulse 2.6s ease-in-out infinite; }
.av-founder.av-supporter { box-shadow: 0 0 0 2px color-mix(in srgb, var(--foam) 55%, transparent), 0 0 16px color-mix(in srgb, var(--acid) 45%, transparent); }
@keyframes supPulse { 0%,100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--acid) 55%, transparent); }
  50% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--acid) 85%, transparent), 0 0 14px color-mix(in srgb, var(--acid) 40%, transparent); } }
.land-hat-mini { display: inline-block; vertical-align: -2px; margin-right: 4px; }
.land-hat-mini svg { width: 18px; height: 11px; display: inline-block; }

/* V18 — profile glow-up */
.modal-card.has-banner { padding-top: 0; overflow: hidden; }
.pf-banner { height: 74px; margin: 0 -20px 0; border-bottom: 1px solid var(--line); }
.pf-over { margin-top: -26px; position: relative; }
.pf-over .mono-av { box-shadow: 0 0 0 3px var(--card), 0 4px 14px rgba(0,0,0,.5); }
.featured-plaque { background: #10160c; border: 1px solid color-mix(in srgb, var(--foam) 35%, transparent); border-radius: 8px; padding: 8px 12px; }
.banner-tile { position: relative; width: 76px; height: 40px; border-radius: 8px;
  border: 1px solid var(--line); background-size: cover; }
.banner-tile span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--foam); font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.banner-tile.banner-on { border-color: var(--acid); box-shadow: 0 0 12px color-mix(in srgb, var(--acid) 35%, transparent); }

/* V19 — centered marquee header */
.hdr-row { position: relative; display: flex; align-items: center; justify-content: center; min-height: 54px; }
.hdr-brand { margin: 0 auto; }
.hdr-row #header-right { position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 8px; font-size: 13px; }
@media (max-width: 560px) {
  .hdr-row { flex-direction: column; gap: 6px; min-height: 0; }
  .hdr-row #header-right { position: static; transform: none; }
}

/* V19 — the full theme rack */
body.theme-ice { --acid:#6ee7f2;--foam:#d8f7fb;--moss:#0e7490;--volt:#38d6e8;--ink:#04090b;--pit:#081217;--card:#0a161c;--card2:#0f1f27;--line:#16303a;--line2:#20485a; background: var(--ink); }
body.theme-bloodred { --acid:#ff5c5c;--foam:#ffd6d6;--moss:#b91c1c;--volt:#ff3b3b;--ink:#0b0404;--pit:#150808;--card:#190a0a;--card2:#231010;--line:#3a1616;--line2:#571f1f; background: var(--ink); }
body.theme-goldrush { --acid:#ffd966;--foam:#fff2c8;--moss:#a1802a;--volt:#f2c14e;--ink:#0b0903;--pit:#141005;--card:#181306;--card2:#221b09;--line:#3a2f12;--line2:#57461b; background: var(--ink); }
body.theme-purple { --acid:#c4a0ff;--foam:#e9dcff;--moss:#7c3aed;--volt:#a875ff;--ink:#080411;--pit:#100a1c;--card:#140d22;--card2:#1c122e;--line:#2c1e4a;--line2:#432d6e; background: var(--ink); }
body.theme-blackout { --acid:#e8e8e0;--foam:#ffffff;--moss:#4a4a44;--volt:#c9c9c0;--ink:#050505;--pit:#0c0c0c;--card:#101010;--card2:#171717;--line:#242424;--line2:#3a3a3a; background: var(--ink); }

/* V20 — polish pass 1: tactile buttons */
button { transition: transform .06s ease; }
button:active { transform: translateY(1px) scale(.98); }
@media (prefers-reduced-motion: reduce) { button { transition: none; } button:active { transform: none; } }

/* V21 — theme preview cards: each tile IS its theme */
.theme-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px;
  border-radius: 10px; background: var(--card); border: 1px solid var(--line2); text-align: left; overflow: hidden; }
.theme-card .tc-swatch { height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, var(--moss), var(--acid), var(--foam)); box-shadow: 0 0 10px color-mix(in srgb, var(--acid) 45%, transparent); }
.theme-card .tc-rows { display: flex; flex-direction: column; gap: 3px; }
.theme-card .tc-rows i { height: 5px; border-radius: 3px; background: var(--card2); border: 1px solid var(--line); }
.theme-card .tc-rows i.tc-hot { background: color-mix(in srgb, var(--acid) 30%, var(--card2)); border-color: var(--acid); width: 70%; }
.theme-card .tc-name { font-size: 11px; font-weight: 800; color: var(--foam); font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .06em; }
.theme-card .tc-lock { position: absolute; top: 6px; right: 7px; font-size: 11px; }
.theme-card.theme-card-on { outline: 2px solid var(--acid); outline-offset: 1px;
  box-shadow: 0 0 16px color-mix(in srgb, var(--acid) 40%, transparent); }