/* =====================================================================
   GREENE BETTING LEAGUE — "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 */
/* The octagon lives on an inner layer (.av-oct) so hats, rings, and noses on
   the outer layer are never clipped away. Never put clip-path back on .mono-av. */
.mono-av { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; font-family: 'Anton', sans-serif; font-size: 15px;
  color: var(--acid); flex-shrink: 0; }
.mono-av .av-oct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  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); }
.mono-av.av-me .av-oct { background: linear-gradient(160deg, #123a1f, var(--pit)); }
.mono-av.av-me { 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: calc(100% - 16px); max-width: 480px; max-height: 88vh; overflow-y: auto;
  flex: 0 0 auto; box-sizing: border-box;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; 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)); }
/* Rings are their own octagon-clipped layer behind the face — never square boxes. */
.av-ring { position: absolute; inset: -2.5px; z-index: 0; background: transparent;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.mono-av .av-oct { z-index: 1; }
.av-founder .av-ring { background: linear-gradient(150deg, var(--foam), var(--moss)); }
.av-founder .av-oct { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--foam) 40%, 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: -32%; left: 50%; width: 96%;
  transform: translateX(-50%) rotate(-8deg); transform-origin: center bottom;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.8)); pointer-events: none; z-index: 2; }
/* Per-hat seating — tall hats ride higher, wraps hug the scalp, symmetric ones sit straight. */
.hat-catears  { top: -25%; width: 106%; transform: translateX(-50%); }
.hat-halo     { top: -42%; width: 78%;  transform: translateX(-50%); }
.hat-horns    { top: -30%; width: 114%; transform: translateX(-50%); }
.hat-tophat   { top: -48%; width: 72%; }
.hat-tengallon{ top: -38%; width: 112%; }
.hat-warband  { top: -14%; width: 100%; transform: translateX(-50%); }
.hat-santa    { top: -38%; width: 102%; }
.hat-towel    { top: -30%; width: 102%; }
.hat-pumpkin  { top: -36%; width: 96%; }
.hat-biggame  { top: -34%; width: 106%; }
.hat-sarge    { top: -36%; width: 100%; }
.hat-strap    { top: -34%; }
.hat-snapback { top: -34%; }
.hat-dayone   { top: -36%; }
.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: 100%; height: auto; 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 .av-ring { background: var(--acid); animation: supPulse 2.6s ease-in-out infinite; }
.av-supporter .av-oct { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--acid) 35%, transparent)); }
.av-founder.av-supporter .av-ring { background: linear-gradient(150deg, var(--foam), var(--acid)); }
@keyframes supPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.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; }
.pf-banner { height: 118px; margin: 0 -21px 0; border-bottom: 1px solid var(--line);
  position: relative; background-size: cover; border-radius: 12px 12px 0 0; overflow: hidden; }
.pf-banner::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(6,10,6,.72) 100%); }
.pf-over { margin-top: -26px; position: relative; }
.pf-over .mono-av .av-ring { inset: -3.5px; background: var(--card); }
.pf-over .mono-av .av-oct { filter: drop-shadow(0 4px 12px rgba(0,0,0,.55)); }
.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); }

/* arenas generated from Game.THEMES — ids must match exactly */
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-sunset { --acid:#fb923c;--foam:#fed7aa;--moss:#c2410c;--volt:#f97316;--ink:#0d0503;--pit:#140806;--card:#1b0c07;--card2:#26130c;--line:#3a1f12;--line2:#4d2b18; background: var(--ink); }
body.theme-emerald { --acid:#34d399;--foam:#a7f3d0;--moss:#047857;--volt:#10b981;--ink:#020806;--pit:#04120c;--card:#061a11;--card2:#0a2418;--line:#0f3524;--line2:#164a33; background: var(--ink); }
body.theme-carbon { --acid:#cbd5e1;--foam:#f1f5f9;--moss:#475569;--volt:#94a3b8;--ink:#050607;--pit:#0a0c0f;--card:#0e1116;--card2:#151a21;--line:#222831;--line2:#323a45; background: var(--ink); }
body.theme-vegas { --acid:#ff4fd8;--foam:#ffd6f7;--moss:#7c1d6f;--volt:#00e5ff;--ink:#07030a;--pit:#0f0616;--card:#160a20;--card2:#20102c;--line:#331847;--line2:#4a2464; background: var(--ink); }
body.theme-rainbow { --acid:#ff5fa2;--foam:#ffd6ec;--moss:#5b21b6;--volt:#22d3ee;--ink:#07040c;--pit:#0d0718;--card:#140b22;--card2:#1d1130;--line:#2e1a4d;--line2:#452a6e; background: var(--ink); }
body.theme-midnight { --acid:#6a9dff;--foam:#c3d8ff;--moss:#1e3a8a;--volt:#4f7fff;--ink:#03050c;--pit:#060a16;--card:#0a1020;--card2:#10182c;--line:#1a2542;--line2:#26355c; background: var(--ink); }

/* Rainbow: the loud one — a living gradient behind the whole arena. */
body.theme-rainbow { background:
  linear-gradient(135deg, #12061f 0%, #1a0b2e 40%, #0d0718 100%) fixed; }
body.theme-rainbow::before { content: ''; position: fixed; inset: 0; z-index: -1; opacity: .30;
  background: linear-gradient(115deg, #ff5fa2, #ffb020, #ffe066, #34d399, #22d3ee, #6a9dff, #c084fc, #ff5fa2);
  background-size: 400% 400%; animation: rainbowDrift 22s ease infinite; }
@keyframes rainbowDrift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }


/* 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); }

/* V22 — grouped sports rail */
.rail-group { display: inline-flex; align-items: center; }
.rail-group + .rail-group { border-left: 1px solid var(--line); margin-left: 6px; padding-left: 10px; }
.rail-label { font-family: 'IBM Plex Mono', monospace; font-size: 8px; font-weight: 700;
  letter-spacing: .14em; color: var(--mute); opacity: .7; margin-right: 4px; transform: translateY(1px); }

/* V23 — the claim bar: thrones made visible */
.claim-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--card2); border: 1px solid var(--line2); border-radius: 8px;
  padding: 9px 13px; margin-bottom: 14px; font-size: 13px; color: var(--bone); }
.claim-bar.claim-mine { border-color: color-mix(in srgb, var(--acid) 45%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--acid) 14%, transparent); }

/* V24 — admin supporter chips */
.adm-sup { font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 700;
  color: var(--acid); border: 1px solid color-mix(in srgb, var(--acid) 40%, transparent);
  border-radius: 4px; padding: 2px 7px; white-space: nowrap; }
.adm-sup-off { color: var(--mute); border-color: var(--line2); }

/* V25 — the parlay slip */
.par-chip { font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--mute);
  border: 1px dashed var(--line2); border-radius: 5px; padding: 3px 9px; }
.par-chip:hover { color: var(--foam); border-color: var(--acid); }
.par-chip.par-on { color: var(--ink); background: var(--acid); border: 1px solid var(--foam); }
.parlay-slip { box-shadow: 0 0 16px color-mix(in srgb, var(--acid) 10%, transparent); }

/* V26 — header profile chip */
.hdr-me { display: inline-flex; align-items: center; }
.hdr-me .mono-av { cursor: pointer; }

/* V27 — mobile sport picker */
.nav-picker { display: none; padding: 6px 10px 8px; }
.sport-select { width: 100%; background: var(--card2); color: var(--foam);
  border: 1px solid var(--line2); border-radius: 6px; padding: 9px 10px;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; }
.sport-select:focus { outline: none; border-color: var(--acid); }
@media (max-width: 640px) {
  .nav-picker { display: block; }
  .nav-sports { display: none; }
}


/* V28 — profile preview + banners that actually show up */
.pf-preview { border: 1px solid var(--line2); border-radius: 10px; overflow: hidden;
  background: var(--card2); margin-bottom: 14px; }
.pf-preview-band { height: 92px; position: relative; background-size: cover; }
.pf-preview-band::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 45%, rgba(6,10,6,.75) 100%); }
.pf-preview-body { padding: 0 14px 14px; margin-top: -26px; position: relative; z-index: 1; }
.pf-preview-live { font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--mute); padding: 7px 14px 0; }
.banner-tile { width: 92px; height: 52px; }
.banner-tile.banner-on { box-shadow: 0 0 14px color-mix(in srgb, var(--acid) 45%, transparent); }
/* the row banner strip — where other players finally see it */
.row-banner { position: absolute; inset: 0; opacity: .5; background-size: cover;
  border-radius: inherit; pointer-events: none; }
.row-banner + * { position: relative; }

/* V29 — preview avatar reserves its own space */
.pf-preview-av { display: inline-block; flex-shrink: 0; line-height: 0; }

/* V31 — account header banner + bio */
.acct-banner { height: 104px; border-radius: 12px 12px 0 0; border: 1px solid var(--line);
  border-bottom: none; background-size: cover !important; position: relative; }
.acct-banner::after { content: ''; position: absolute; inset: 0; border-radius: 12px 12px 0 0;
  background: linear-gradient(to bottom, transparent 45%, rgba(6,10,6,.80) 100%); }
.acct-under-banner { border-top-left-radius: 0; border-top-right-radius: 0; margin-top: -1px; }
.acct-bio { font-size: 12px; color: var(--mute); font-style: italic; margin-top: 4px; max-width: 46ch; }
/* Next Up rows: banners read clearly without drowning the text */
.row-banner { opacity: .72; }
.player-tap { position: relative; }
.player-tap > *:not(.row-banner) { position: relative; z-index: 1; }

/* V32 — Locker Room: one customization menu, tabbed */
.lk-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.lk-tab { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--mute);
  background: var(--card2); border: 1px solid var(--line2); border-radius: 7px;
  padding: 8px 13px; }
.lk-tab:hover { color: var(--foam); border-color: var(--acid); }
.lk-tab.on { color: var(--ink); background: var(--acid); border-color: var(--foam); }
.lk-body .lk-sec { display: none; }
.lk-body[data-active="profile"] .lk-sec[data-lk="profile"],
.lk-body[data-active="hats"]    .lk-sec[data-lk="hats"],
.lk-body[data-active="arena"]   .lk-sec[data-lk="arena"],
.lk-body[data-active="name"]    .lk-sec[data-lk="name"],
.lk-body[data-active="voice"]   .lk-sec[data-lk="voice"] { display: block; }
.lk-body .lk-sec > h2 { font-size: 15px; opacity: .75; }

/* V32 — card background picker */
.bg-tile { position: relative; width: 62px; height: 40px; border-radius: 8px;
  border: 1px solid var(--line2); }
.bg-tile span { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: var(--foam); font-size: 15px; font-weight: 700; }
.bg-tile.bg-on { border-color: var(--acid); box-shadow: 0 0 12px color-mix(in srgb, var(--acid) 40%, transparent); }

/* V33 — avatars wear the player's name colour */
.mono-av.av-tinted { color: var(--av-tint); }
.mono-av.av-tinted .av-oct { border-color: color-mix(in srgb, var(--av-tint) 55%, transparent); }
/* Founder and supporter rims stay meaningful; the tint only fills the gap
   where a player has no status ring of their own. */
.mono-av.av-tinted .av-ring { background: color-mix(in srgb, var(--av-tint) 55%, transparent); }
.mono-av.av-tinted.av-supporter .av-ring {
  background: var(--av-tint); animation: supPulse 2.6s ease-in-out infinite; }
.mono-av.av-tinted.av-supporter .av-oct {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--av-tint) 38%, transparent)); }
.mono-av.av-tinted.av-founder .av-ring {
  background: linear-gradient(150deg, color-mix(in srgb, var(--av-tint) 85%, white), var(--av-tint)); }
.mono-av.av-tinted.av-founder .av-oct {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--av-tint) 40%, transparent)); }
.mono-av.av-tinted.av-founder.av-supporter .av-ring {
  background: linear-gradient(150deg, color-mix(in srgb, var(--av-tint) 60%, white), var(--av-tint)); }
.mono-av.av-tinted .av-oct { box-shadow: inset 0 0 10px color-mix(in srgb, var(--av-tint) 18%, transparent); }

/* V34 — card finishes: texture you can actually see, tinted by the player.
   Applied as a class on the card so Tailwind's bg-* cannot win, and layered
   over the card colour rather than replacing it. */
.cf { position: relative; }
.cf::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit; opacity: .85; }
.cf > * { position: relative; z-index: 1; }
.cf-carbon::before {
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--cf-tint, var(--acid)) 14%, transparent) 0 3px, transparent 3px 7px),
              repeating-linear-gradient(-45deg, rgba(0,0,0,.35) 0 3px, transparent 3px 7px); }
.cf-brushed::before {
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--cf-tint, var(--acid)) 12%, transparent) 0 1px, transparent 1px 4px); }
.cf-canvas::before {
  background: repeating-conic-gradient(color-mix(in srgb, var(--cf-tint, var(--acid)) 9%, transparent) 0% 25%, transparent 0% 50%) 0 0 / 10px 10px; }
.cf-glow::before {
  background: radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--cf-tint, var(--acid)) 30%, transparent), transparent 62%); }
.cf-stripe::before {
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--cf-tint, var(--acid)) 16%, transparent) 0 1px, transparent 1px 14px); }
.cf-grid::before {
  background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--cf-tint, var(--acid)) 13%, transparent) 0 1px, transparent 1px 12px),
              repeating-linear-gradient(90deg, color-mix(in srgb, var(--cf-tint, var(--acid)) 13%, transparent) 0 1px, transparent 1px 12px); }
.cf-spot::before {
  background: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--cf-tint, var(--acid)) 34%, transparent), transparent 58%),
              linear-gradient(180deg, transparent 55%, rgba(0,0,0,.45) 100%); }
.bg-tile { width: 62px; height: 40px; }
.bg-tile { position: relative; }
.bg-tile-name { position: absolute; left: 0; right: 0; bottom: -15px; font-family: 'IBM Plex Mono', monospace;
  font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); }
.bg-tile { margin-bottom: 16px; }


/* V36 — freeze the page while a modal is open so background scroll can't
   leak through a touch drag on mobile. */
body.modal-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

/* V37 — foolproof add-to-home instruction cards */
.ins-card { display: flex; align-items: center; gap: 14px; background: var(--card2);
  border: 1px solid var(--line2); border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.ins-num { flex-shrink: 0; width: 34px; height: 34px; display: flex; align-items: center;
  justify-content: center; background: var(--acid); color: var(--ink); border-radius: 50%;
  font-family: 'Anton', sans-serif; font-size: 19px; }
.ins-text { flex: 1; font-size: 15px; color: var(--foam); line-height: 1.35; }
.ins-text b { color: #fff; }
.ins-sub { font-size: 12px; color: var(--mute); }
.ins-icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center;
  justify-content: center; font-size: 22px; color: var(--acid); background: var(--pit);
  border-radius: 10px; border: 1px solid var(--line2); }
.ins-warn { background: color-mix(in srgb, #f5a623 12%, transparent);
  border: 1px solid color-mix(in srgb, #f5a623 40%, transparent); border-radius: 10px;
  padding: 11px 13px; font-size: 13px; color: #ffd9a0; margin-top: 4px; line-height: 1.4; }
.ins-warn b { color: #fff; }

/* V38 — boot splash: hold the first frame until auth resolves, no logged-out flash */
.boot-splash { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; background: var(--ink); }
.boot-splash.hidden { display: none; }
.boot-splash-txt { font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: .08em;
  color: var(--foam); font-size: 20px; }
.boot-spinner { width: 26px; height: 26px; border: 3px solid var(--line2); border-top-color: var(--acid);
  border-radius: 50%; animation: bootSpin .8s linear infinite; }
@keyframes bootSpin { to { transform: rotate(360deg); } }

/* V39 — card style picker + card studio */
.cardpick-grid, .studio-layout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cardpick, .studio-layout { position: relative; text-align: left; background: var(--card2);
  border: 1px solid var(--line2); border-radius: 12px; padding: 14px; overflow: hidden; }
.cardpick-on, .studio-layout-on { border-color: var(--acid); box-shadow: 0 0 14px color-mix(in srgb, var(--acid) 30%, transparent); }
.cardpick-lock, .studio-layout-lock { opacity: .62; }
.cardpick-emoji, .sl-emoji { font-size: 30px; display: block; margin-bottom: 6px; }
.cardpick-name, .sl-name { display: block; font-weight: 700; color: #fff; font-size: 14px; }
.cardpick-blurb, .sl-blurb { display: block; font-size: 11px; color: var(--mute); margin-top: 3px; line-height: 1.35; }
.cardpick-badge, .sl-lock { position: absolute; top: 10px; right: 10px; font-size: 11px;
  font-family: 'IBM Plex Mono', monospace; color: var(--acid); }
.sl-lock { position: static; display: inline-block; margin-top: 8px; background: color-mix(in srgb, var(--acid) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--acid) 40%, transparent); border-radius: 6px; padding: 2px 8px; }

.studio-preview-wrap { display: flex; justify-content: center; background: var(--pit); border-radius: 10px; padding: 12px; }
#studio-canvas { width: auto; height: 360px; max-width: 100%; border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.studio-mode { flex: 1; font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--mute); background: var(--card2);
  border: 1px solid var(--line2); border-radius: 8px; padding: 9px; }
.studio-mode.on { color: var(--ink); background: var(--acid); border-color: var(--foam); }

.studio-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.studio-stat { display: flex; align-items: center; gap: 10px; text-align: left;
  background: var(--card2); border: 1px solid var(--line2); border-radius: 10px; padding: 12px; color: var(--foam); font-size: 14px; }
.studio-stat-on { border-color: var(--acid); }
.studio-stat-locked { opacity: .7; }
.ss-check { width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; border: 1px solid var(--line2); color: var(--ink); font-weight: 700; font-size: 13px; }
.studio-stat-on .ss-check { background: var(--acid); border-color: var(--acid); }
.ss-always { margin-left: auto; font-size: 9px; font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase; color: var(--mute); }
@media (max-width: 520px) { .cardpick-grid, .studio-layout-grid, .studio-stat-grid { grid-template-columns: 1fr; } }

/* V40 — brand footer / copyright fine print */
.gbl-footer { margin-top: 40px; padding: 20px 0 8px; border-top: 1px solid var(--line);
  text-align: center; }
.gbl-footer p { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .04em;
  color: var(--mute); line-height: 1.7; margin: 0; }
.gbl-footer p:first-child { color: var(--foam); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.gbl-footer p:last-child { opacity: .6; margin-top: 4px; }

/* V41 — quiet delete link + dedicated delete page */
.acct-delete-row { text-align: center; margin-top: 28px; padding-top: 16px;
  border-top: 1px solid var(--line); }
.acct-delete-link { font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--mute);
  background: none; border: none; padding: 6px 10px; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; }
.acct-delete-link:hover { color: #f87171; }

.del-warnbox { background: rgba(120,20,20,.14); border: 1px solid rgba(180,40,40,.35);
  border-radius: 10px; padding: 16px; }
.del-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.del-list li { font-size: 13px; color: var(--foam); line-height: 1.4; }
.del-ack { display: flex; align-items: flex-start; gap: 12px; padding: 14px;
  background: var(--card2); border: 1px solid var(--line2); border-radius: 10px; cursor: pointer; }
.del-ack input { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; accent-color: #ef4444; cursor: pointer; }
.del-ack span { font-size: 13px; color: var(--foam); line-height: 1.4; }
.del-ack-on { border-color: #ef4444; }
.del-locked { opacity: .4; pointer-events: none; }
.del-final-btn { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .05em; padding: 14px; border-radius: 8px;
  background: #1a0808; border: 1px solid #7f1d1d; color: #6b6b6b; cursor: not-allowed; }
.del-final-btn.armed { background: #dc2626; border-color: #ef4444; color: #fff; cursor: pointer; }
.del-final-btn.armed:hover { background: #ef4444; }

/* V42 — password field with reveal (eye) toggle */
.pw-wrap { position: relative; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--mute); padding: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; border-radius: 6px; }
.pw-eye:hover { color: var(--acid); }
.pw-eye:active { transform: translateY(-50%) scale(0.92); }