/* ═══ Aurora Glass v2 (team accents + icons) — liquid-glass restyle (drop-in override on style.css) ═══ */
:root {
  /* default accent = the game's brand orange (pre-team screens: title → team select);
     once a career is active, aurora-patch.js overrides these with the franchise color */
  --acc: #ff6b2c;
  --acc-hot: #ff8a4d;
  --acc-deep: #d9531e;
  --acc-rgb: 255,107,44;
  --ink: #05070f;
  --ink-2: rgba(255,255,255,.04);
  --card: rgba(255,255,255,.05);
  --card-2: rgba(255,255,255,.09);
  --line: rgba(255,255,255,.11);
  --text: #f2f5fd;
  --text-dim: #9aa4bd;
  --text-faint: #67718c;
  --orange: var(--acc);
  --orange-hot: var(--acc-hot);
  --gold: #ffd166;
  --font-display: 'Outfit', sans-serif;
  --radius: 18px;
  --radius-sm: 12px;
  --glass-blur: blur(22px) saturate(1.6);
}
body { background: var(--ink); color: var(--text); }
html { scrollbar-color: rgba(255,255,255,.14) var(--ink); }

/* ── atmosphere: soft color pools for the glass to refract ── */
.court-bg { background: radial-gradient(ellipse 900px 520px at 50% -8%, rgba(var(--acc-rgb),.18), transparent 65%), radial-gradient(ellipse 760px 760px at 105% 110%, rgba(56,189,248,.10), transparent 60%), radial-gradient(ellipse 640px 640px at -8% 55%, rgba(167,109,255,.10), transparent 60%); }
.court-bg::before { border-color: rgba(255,255,255,.05); }
.court-bg::after { border-color: rgba(255,255,255,.03); }
.grain { opacity: .3; }

/* ── glass panels ── */
/* No backdrop-filter here on purpose. These sit over .court-bg, which is only smooth
   radial gradients — blurring a gradient is a visual no-op — and a filtered surface
   re-rasterizes whenever anything on the page gets a new compositing layer (any button
   hover lifts on transform), which painted grey seams across every card. */
.card, .era-card, .modal-card, .slot-card, .creator-preview, .team-card,
.prospect-card, .fa-card, .finder-unlock, .lotto-reveal, .gem-card, .job-offer {
  background: var(--card);
  border-color: var(--line);
  box-shadow: 0 20px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 0 .5px rgba(255,255,255,.04);
}
.team-card:hover {
  border-color: var(--tc, var(--orange));
  box-shadow: 0 18px 50px rgba(0,0,0,.5), 0 0 0 1px var(--tc, var(--orange)), inset 0 1px 0 rgba(255,255,255,.14);
}
.bigstat, .series, .finder-card, .cal-cell, .trade-player, .pos-count, .fact-pill,
.pick-chip, .mode-box, .cab-item, .fa-offer, .lotto-slot, .live-ev, .swatch-label {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.09);
}
.cal-cell.cal-empty { background: transparent; }

/* ── buttons: glass + springy + sheen ── */
.btn {
  background: rgba(255,255,255,.06);
  border-color: var(--line);
  /* no backdrop-filter: buttons lift on hover, and a filtered surface that changes layers
     forces every other filtered surface on the page to re-rasterize (the grey-seam bug) */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  transition: transform .3s cubic-bezier(.3,1.6,.4,1), box-shadow .2s ease, background .2s ease, border-color .2s;
  position: relative; overflow: hidden;
}
.btn:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.1); }
.btn:active { transform: translateY(0) scale(.97); }
.btn-primary {
  background: linear-gradient(160deg, var(--acc-hot), var(--acc) 55%, var(--acc-deep));
  border: none; color: #0b0e18;
  box-shadow: 0 6px 28px rgba(var(--acc-rgb),.4), inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -8px 16px rgba(0,0,0,.12);
}
.btn-primary:hover { background: linear-gradient(160deg, var(--acc-hot), var(--acc) 55%, var(--acc-deep)); box-shadow: 0 10px 36px rgba(var(--acc-rgb),.55), inset 0 1.5px 0 rgba(255,255,255,.6), inset 0 -8px 16px rgba(0,0,0,.12); }
.btn-primary::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.45) 50%, transparent 68%);
  transform: translateX(-130%); transition: transform .7s ease;
}
.btn-primary:hover::after { transform: translateX(130%); }
.btn-ghost { background: rgba(255,255,255,.03); }
.btn-danger { background: rgba(255,93,93,.06); }

/* ── tabs: frosted pill rail ── */
.tabs {
  background: rgba(255,255,255,.045);
  border-color: var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.25);
}
.tab { transition: color .18s, background .3s cubic-bezier(.3,1.4,.4,1); }
.tab.active {
  background: rgba(255,255,255,.12); color: var(--text);
  box-shadow: 0 4px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.2);
}

/* ── inputs ── */
.trade-select, .min-input {
  background: rgba(255,255,255,.05); border-color: var(--line); color: var(--text);
}
input[type="range"] { background: linear-gradient(90deg, var(--orange) var(--fill, 50%), rgba(255,255,255,.12) var(--fill, 50%)); }
input[type="range"]::-webkit-slider-thumb {
  background: radial-gradient(circle at 35% 30%, var(--acc-hot), var(--acc-deep));
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 2px var(--orange), 0 4px 16px rgba(var(--acc-rgb),.5);
}
input[type="range"]::-moz-range-thumb { background: radial-gradient(circle at 35% 30%, var(--acc-hot), var(--acc-deep)); border: 3px solid var(--ink); box-shadow: 0 0 0 2px var(--orange); }

/* ── fixed chrome: glass orbs + bar ──
   These keep their blur: they float over real scrolling content, which is the one place
   the effect earns its keep. will-change pins their compositing layers so the hover lift
   can't churn layers and re-rasterize the other filtered surfaces. */
.home-btn, .board-btn, .gm-header-btn, .store-btn, .free-pill, .action-bar, .toast {
  will-change: transform;
}
.home-btn, .board-btn, .gm-header-btn {
  background: rgba(255,255,255,.06); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 24px rgba(0,0,0,.35);
}
.store-btn {
  background: rgba(255,255,255,.06); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-color: rgba(var(--acc-rgb),.6); color: var(--orange);
  font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .08em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 24px rgba(0,0,0,.35);
}
.board-btn { border-color: rgba(255,255,255,.18); }
.action-bar {
  background: linear-gradient(transparent, rgba(5,7,15,.72) 26%, rgba(5,7,15,.9));
  backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-top: 1px solid rgba(255,255,255,.07);
}
.toast {
  background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16);
  backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 14px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.16);
}
.modal-backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); }

/* ── display type: sleek modern in place of jersey numerals ── */
.title-logo { font-weight: 700; letter-spacing: -.03em; font-size: clamp(44px, 9vw, 108px); line-height: .98; }
.title-logo span { text-shadow: 0 0 60px rgba(var(--acc-rgb),.45); }
.dash-teamname { font-size: 25px; font-weight: 700; letter-spacing: -.02em; }
.stat-num { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.card h3 { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.team-ovr b { font-size: 17px; font-weight: 700; }
.ovr-badge { font-family: var(--font-body); font-size: 15px; font-weight: 800; }
.sign-pct { font-family: var(--font-body); font-size: 16px; font-weight: 800; }
.bigstat .v { font-size: 25px; font-weight: 700; letter-spacing: -.02em; }
.era-year { font-weight: 700; font-size: clamp(76px, 14vw, 140px); letter-spacing: -.04em; text-shadow: 0 0 80px rgba(var(--acc-rgb),.2); }
.era-name { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.team-heading { font-size: 34px; font-weight: 700; letter-spacing: -.02em; }
.off-title { font-size: clamp(32px, 5.5vw, 52px); font-weight: 700; letter-spacing: -.02em; }
.store-title { font-size: clamp(30px, 5.5vw, 46px); font-weight: 700; letter-spacing: -.02em; }
.over-title { font-size: clamp(46px, 9vw, 96px); font-weight: 700; letter-spacing: -.03em; }
.modal-head h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.cal-month { font-size: 16px; font-weight: 700; letter-spacing: .02em; }
.result-badge { font-family: var(--font-body); font-size: 12px; font-weight: 800; }
.gm-id .gm-name { font-size: 21px; font-weight: 700; }
.hist-year { font-size: 14px; font-weight: 700; }
.cab-count { font-size: 19px; font-weight: 700; }
.dynasty-status { font-size: 13px; font-weight: 600; letter-spacing: .05em; }
.draft-pick-now { font-size: 21px; font-weight: 700; }
.lotto-title { font-size: clamp(20px, 4vw, 32px); font-weight: 700; }
.live-title { font-size: 15px; font-weight: 700; letter-spacing: .06em; }
.live-team { font-size: 15px; font-weight: 700; }
.live-nums { font-weight: 700; font-size: clamp(28px, 6vw, 44px); letter-spacing: -.02em; }
.trade-player .tovr { font-family: var(--font-body); font-size: 14px; font-weight: 800; }
.mini-ring { box-shadow: inset 0 0 0 5px #05070f; }
.ring-year { font-size: 15px; font-weight: 700; }
.pack-name { font-size: 17px; font-weight: 700; letter-spacing: .02em; }
.team-chip { font-size: 15px; font-weight: 700; }
.pull-front .amt { font-size: 40px; font-weight: 700; }
.pull-front .tname { font-size: 13px; font-weight: 700; }
.inv-card .amt, .inv-bigcard .amt { font-weight: 700; }
.gem-card .gem-label { font-size: 12px; font-weight: 700; }
.gem-card .gem-name { font-size: clamp(19px, 4vw, 26px); font-weight: 700; }
.lotto-pk { font-weight: 700; }
.lotto-team { font-weight: 700; font-size: clamp(17px, 3vw, 28px); }
.lotto-slot .rq { font-size: 14px; font-weight: 700; font-family: var(--font-body); }

/* ── accent remap for hardcoded warm tints ── */
.title-kicker { color: var(--orange); }
.streak-banner {
  color: var(--text);
  background: linear-gradient(90deg, rgba(var(--acc-rgb),.16), rgba(var(--acc-rgb),.04));
  border-color: rgba(var(--acc-rgb),.45);
}
.stand-row.me { background: rgba(var(--acc-rgb),.09); border-color: rgba(var(--acc-rgb),.32); }
.sched-row.next-game { background: rgba(var(--acc-rgb),.07); border-color: rgba(var(--acc-rgb),.3); }
.cal-cell.next-game { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.trade-player.sel { border-color: var(--orange); background: rgba(var(--acc-rgb),.09); }
.pick-chip.sel { border-color: var(--orange); background: rgba(var(--acc-rgb),.1); }
.lotto-slot.mine, .lottery-row.mine { border-color: var(--orange); background: rgba(var(--acc-rgb),.1); }
.draft-log .mine-pick { background: rgba(var(--acc-rgb),.08); }
.live-ev.mine { border-color: rgba(var(--acc-rgb),.45); background: rgba(var(--acc-rgb),.08); }
.assist-banner { background: rgba(var(--acc-rgb),.07); border-color: rgba(var(--acc-rgb),.35); color: var(--orange); }
.assist-banner-calm { background: rgba(255,255,255,.03); border-color: var(--line); color: var(--text-dim); }
.lineup-zone.drop-ok, .lineup-row.drop-ok { outline-color: var(--orange); background: rgba(var(--acc-rgb),.06); }
.sp-pill { background: rgba(var(--acc-rgb),.1); border-color: rgba(var(--acc-rgb),.4); color: var(--orange-hot); }
.skill-node.owned circle.bg { fill: var(--acc); stroke: var(--acc-hot); }
.tab .dot { background: var(--orange); }
.fit-chip.fit-heat { color: var(--orange); background: rgba(var(--acc-rgb),.12); }
.ovr-star { background: rgba(var(--acc-rgb),.13); color: var(--orange-hot); }
.pf-note.pf-progress { background: rgba(255,255,255,.03); }
.stat-num.legacy, .bigstat .v.hot { color: var(--orange); }
.ovr-elite { background: rgba(255,201,77,.12); color: var(--gold); }
.conf-meter, .budget-bar, .pot-bar { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
.pos-chip { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.lotto-reveal { background: rgba(255,255,255,.05); }
.live-speed.on { border-color: var(--orange); color: var(--orange); background: rgba(var(--acc-rgb),.1); }
.sim-btn.btn-primary { box-shadow: 0 6px 28px rgba(var(--acc-rgb),.35), inset 0 1.5px 0 rgba(255,255,255,.5); }
.slot-card.empty:hover { border-color: var(--orange); color: var(--orange); }
.gm-header-btn.gm-max { border-color: #ff6fd8; }
.screen.active { animation: screenIn .5s cubic-bezier(.2,.9,.25,1.05) both; }

/* ── inline icon set (replaces emoji) ── */
.ico { display: inline-flex; width: 1.05em; height: 1.05em; vertical-align: -.16em; flex: 0 0 auto; }
.ico svg { width: 100%; height: 100%; }
.ico-dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; vertical-align: 0; }
.btn .ico { margin-right: 2px; }