/* ═══════════════════════════════════════════════════════════
   Run The Franchise — design system
   Dark arena, hardwood accent, jersey numerals.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── the notch, the island, the home bar ──
     iOS only reports these once the page opts into the full screen with
     viewport-fit=cover, which index.html does. That opt-in is what puts content
     UNDER the status bar and the Dynamic Island in the first place, so every
     fixed thing near an edge has to add the matching inset back. They resolve to
     0px on every other device, so one set of rules serves phone and desktop.
     A test can simulate a notch by overriding these four on :root. */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  /* How far down the page has to start to clear the fixed 🏆/PRO/STORE/⌂/account
     row: the row's own 16px offset plus its 44px height, plus whatever the
     device puts above it. Every screen that scrolls under that row uses this,
     so a notch moves all of them together. */
  --chrome-top: calc(60px + var(--safe-t));

  --ink: #0c0d11;
  --ink-2: #13151b;
  --card: #191c24;
  --card-2: #20242f;
  --line: #2a2f3c;
  --text: #f2efe8;
  --text-dim: #9aa0ae;
  --text-faint: #6b7180;
  --orange: #ff6b2c;
  --orange-hot: #ff8a4d;
  --gold: #ffc94d;
  --green: #3ddc84;
  --red: #ff5d5d;
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Archivo', sans-serif;
  --radius: 14px;
  --radius-sm: 9px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scrollbar-color: var(--line) var(--ink); }

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Atmosphere ── */
.court-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(255, 107, 44, .10), transparent 65%),
    radial-gradient(ellipse 700px 700px at 105% 110%, rgba(255, 201, 77, .05), transparent 60%);
}
/* center-court arcs */
.court-bg::before {
  content: ''; position: absolute; left: 50%; top: -340px;
  width: 900px; height: 900px; transform: translateX(-50%);
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .045);
  box-shadow: 0 0 0 130px transparent, inset 0 0 0 1px transparent;
}
.court-bg::after {
  content: ''; position: absolute; left: 50%; top: -540px;
  width: 1300px; height: 1300px; transform: translateX(-50%);
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .03);
}
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Screens ── */
.screen { display: none; position: relative; z-index: 2; min-height: 100vh; }
.screen.active { display: block; animation: screenIn .45s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes screenIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── Buttons ── */
.btn {
  font-family: var(--font-body); font-weight: 700; font-size: 14px;
  letter-spacing: .04em; color: var(--text);
  background: var(--card-2); border: 1px solid var(--line);
  padding: 11px 22px; border-radius: 999px; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s;
  user-select: none;
}
.btn:hover { transform: translateY(-1px); border-color: #3a4152; }
.btn:active { transform: translateY(0) scale(.98); }
/* Focus: the browser's default ring draws a hard rectangle that ignores our pill radius,
   which reads as a stray grey box after any click. Kill it for pointer users, and give
   keyboard users a proper ring that follows the element's own shape. */
button:focus, .slot-card:focus, .team-card:focus, input:focus, select:focus { outline: none; }
button:focus-visible, .slot-card:focus-visible, .team-card:focus-visible,
input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 2px;
}
.btn-primary {
  background: linear-gradient(140deg, var(--orange-hot), var(--orange) 55%, #e5501a);
  border: none; color: #16090300; color: #1a0d05;
  box-shadow: 0 4px 24px rgba(255, 107, 44, .35), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover { box-shadow: 0 6px 32px rgba(255, 107, 44, .5), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-ghost { background: transparent; }
.btn-lg { padding: 14px 30px; font-size: 15px; }
.btn-xl { padding: 17px 40px; font-size: 16px; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none !important; box-shadow: none; }
.btn-danger { background: transparent; border-color: rgba(255,93,93,.4); color: var(--red); }

/* ═══════════ TITLE ═══════════ */
.title-wrap {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 24px;
}
.title-kicker {
  font-size: 12px; font-weight: 700; letter-spacing: .35em; color: var(--orange);
  margin-bottom: 18px; animation: fadeUp .7s .1s both;
}
.title-logo {
  font-family: var(--font-display);
  font-size: clamp(56px, 12vw, 150px);
  line-height: .85; letter-spacing: .015em;
  animation: fadeUp .7s .22s both;
}
.title-logo span { color: var(--orange); text-shadow: 0 0 60px rgba(255, 107, 44, .45); }
.title-sub { color: var(--text-dim); font-size: 17px; margin: 26px 0 40px; animation: fadeUp .7s .34s both; }
.title-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; animation: fadeUp .7s .46s both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ═══════════ ERA SELECT ═══════════ */
.era-wrap, .team-wrap {
  max-width: 860px; margin: 0 auto; padding: var(--chrome-top) 24px 80px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.step-label {
  font-size: 11px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 26px;
}
.era-year {
  font-family: var(--font-display);
  font-size: clamp(110px, 20vw, 200px); line-height: .85;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 80px rgba(255, 107, 44, .18);
}
.era-season-label { color: var(--orange); font-weight: 700; letter-spacing: .18em; font-size: 13px; margin: 8px 0 30px; text-transform: uppercase; }
.era-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 32px; max-width: 620px; width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.era-name { font-family: var(--font-display); font-size: 40px; letter-spacing: .02em; }
.era-tag { color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin: 2px 0 12px; }
.era-blurb { color: var(--text-dim); font-size: 14.5px; }
.era-facts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.fact-pill {
  font-size: 12px; font-weight: 600; color: var(--text-dim);
  background: var(--ink-2); border: 1px solid var(--line);
  padding: 5px 13px; border-radius: 999px;
}
.fact-pill b { color: var(--text); }

.timeline { width: 100%; max-width: 680px; margin: 40px 0 8px; }
input[type="range"] {
  width: 100%; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--orange) var(--fill, 50%), var(--line) var(--fill, 50%));
  outline: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--orange-hot), #d94e12);
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 2px var(--orange), 0 4px 16px rgba(255,107,44,.5);
  transition: transform .12s;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--orange-hot), #d94e12);
  border: 3px solid var(--ink); box-shadow: 0 0 0 2px var(--orange);
}
.timeline-ticks {
  display: flex; justify-content: space-between; margin-top: 12px;
  font-size: 11px; font-weight: 600; color: var(--text-faint); letter-spacing: .05em;
}
.timeline-ticks span { cursor: pointer; transition: color .15s; }
.timeline-ticks span:hover { color: var(--orange); }
.era-actions { display: flex; gap: 14px; margin-top: 44px; }

/* ═══════════ TEAM SELECT ═══════════ */
.team-wrap { max-width: 1060px; }
.team-heading { font-family: var(--font-display); font-size: 58px; letter-spacing: .02em; line-height: 1; }
.team-sub { color: var(--text-dim); margin: 10px 0 36px; font-size: 14px; }
.team-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  gap: 14px; width: 100%;
}
.team-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; text-align: left; cursor: pointer; position: relative; overflow: hidden;
  transition: transform .18s cubic-bezier(.2,.9,.3,1.4), border-color .18s, box-shadow .18s;
  animation: fadeUp .5s both;
}
.team-card:hover {
  transform: translateY(-4px);
  border-color: var(--tc, var(--orange));
  box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 0 1px var(--tc, var(--orange));
}
.team-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--tc, var(--orange)); opacity: .85;
}
.team-chip {
  font-family: var(--font-display); font-size: 20px; letter-spacing: .05em;
  width: 52px; height: 52px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--tc, var(--orange)) 16%, transparent);
  color: var(--tc, var(--orange));
  border: 1px solid color-mix(in srgb, var(--tc, var(--orange)) 45%, transparent);
  flex-shrink: 0;
}
.team-card .team-chip { margin-bottom: 14px; }
.team-card { color: var(--text); font-family: var(--font-body); }
.team-card-name { font-weight: 800; font-size: 16px; line-height: 1.25; }
.team-card-conf { color: var(--text-faint); font-size: 12px; font-weight: 600; margin-top: 2px; }
.team-card-tier { margin-top: 12px; display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; }
.tier-contender { color: var(--gold); background: rgba(255,201,77,.1); border: 1px solid rgba(255,201,77,.3); }
.tier-playoff { color: var(--green); background: rgba(61,220,132,.08); border: 1px solid rgba(61,220,132,.25); }
.tier-rising { color: #6db3ff; background: rgba(109,179,255,.08); border: 1px solid rgba(109,179,255,.25); }
.tier-rebuild { color: #b08968; background: rgba(176,137,104,.1); border: 1px solid rgba(176,137,104,.3); }

/* ═══════════ DASHBOARD ═══════════ */
#screen-dash { max-width: 980px; margin: 0 auto; padding: calc(28px + var(--safe-t)) 20px 130px; }
.dash-header {
  display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap;
  margin-bottom: 22px;
  padding: 0 56px;   /* symmetric padding keeps the centered content clear of the fixed home button on the right */
}
.dash-team { display: flex; align-items: center; gap: 15px; }
.dash-team .team-chip { width: 58px; height: 58px; font-size: 22px; }
.dash-teamname { font-family: var(--font-display); font-size: 34px; line-height: 1; letter-spacing: .02em; }
.dash-season { color: var(--text-dim); font-size: 13px; font-weight: 600; margin-top: 3px; }
.dash-stats { display: flex; gap: 26px; align-items: center; justify-content: center; flex-wrap: wrap; }
.stat-block { text-align: center; }
.stat-num { font-family: var(--font-display); font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-num.legacy { color: var(--gold); }
.stat-lab { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); margin-top: 4px; }
.conf-meter { width: 90px; height: 10px; border-radius: 5px; background: var(--ink-2); border: 1px solid var(--line); overflow: hidden; margin: 9px auto 0; }
.conf-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--red), var(--gold) 45%, var(--green)); width: 55%; transition: width .6s cubic-bezier(.2,.9,.3,1); }

.tabs {
  display: flex; gap: 4px; background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px; width: fit-content; max-width: 100%; margin: 0 auto 26px;
  /* On a tablet eight tabs are wider than the screen. Scroll the strip rather
     than let it wrap, which broke "Free Agents" across two lines and pushed the
     GM tab's unread dot underneath its own label. */
  overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
.tab {
  font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: .03em;
  color: var(--text-dim); background: transparent; border: none;
  padding: 9px 20px; border-radius: 999px; cursor: pointer; transition: color .15s, background .15s;
  white-space: nowrap; flex: 0 0 auto;
}
.tab:hover { color: var(--text); }
.tab.active { background: var(--card-2); color: var(--text); box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.tab .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); margin-left: 6px; vertical-align: 2px; }

.tabpane { display: none; }
.tabpane.active { display: block; animation: screenIn .3s both; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; margin-bottom: 14px;
}
.card h3 {
  font-family: var(--font-display); font-size: 21px; letter-spacing: .05em;
  color: var(--text); margin-bottom: 14px; font-weight: 400;
}
.card h3 small { font-family: var(--font-body); font-size: 11px; color: var(--text-faint); letter-spacing: .1em; margin-left: 8px; }
.team-sys-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
.team-ovr { margin-left: auto; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--text-faint); }
.team-ovr b { font-family: var(--font-display); font-size: 26px; font-weight: 400; color: var(--gold); margin-left: 6px; letter-spacing: .04em; }

/* overview */
.ov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ov-grid .span2 { grid-column: span 2; }
@media (max-width: 720px) { .ov-grid { grid-template-columns: 1fr; } .ov-grid .span2 { grid-column: span 1; } }

.result-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.result-row:last-child { border-bottom: none; }
.result-badge {
  font-family: var(--font-display); font-size: 16px; width: 26px; height: 26px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center; margin-right: 12px;
}
.result-badge.W { background: rgba(61,220,132,.12); color: var(--green); }
.result-badge.L { background: rgba(255,93,93,.1); color: var(--red); }
.result-score { font-variant-numeric: tabular-nums; font-weight: 700; }
.result-opp { color: var(--text-dim); flex: 1; margin-left: 2px; }

.news-item { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--text-dim); }
.news-item:last-child { border-bottom: none; }
.news-item b { color: var(--text); }
.news-item .nd { color: var(--text-faint); font-size: 11px; font-weight: 700; letter-spacing: .08em; margin-right: 8px; }

.streak-banner {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 11px 16px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 700; color: #ffd9b0;
  background: linear-gradient(90deg, rgba(255,107,44,.22), rgba(255,107,44,.06));
  border: 1px solid rgba(255,107,44,.55);
}
.streak-banner span { color: var(--orange); font-weight: 800; }
/* Owner budget explainer */
.budget-card { margin-bottom: 14px; }
.budget-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.budget-head h3 { margin: 0; }
.budget-nums { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 15px; color: var(--text); }
.budget-nums.c-ok { color: var(--green); }
.budget-nums.c-lux { color: var(--gold); }
.budget-nums.c-over { color: var(--red); }
.budget-bar { position: relative; height: 8px; border-radius: 999px; background: var(--ink-2); border: 1px solid var(--line); overflow: hidden; margin: 10px 0; }
.budget-fill { height: 100%; transition: width .3s; }
.budget-fill.f-ok { background: var(--green); }
.budget-fill.f-lux { background: var(--gold); }
.budget-fill.f-over { background: var(--red); }
.budget-tick { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.7); }
.budget-note { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.budget-note .c-lux { color: var(--gold); }
.budget-note .c-over { color: var(--red); }
.budget-sub { color: var(--text-faint); font-size: 12px; margin-top: 5px; }
.bigstat-row { display: flex; gap: 12px; flex-wrap: wrap; }
.bigstat {
  flex: 1; min-width: 130px; background: var(--ink-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 14px 16px; text-align: center;
}
.bigstat .v { font-family: var(--font-display); font-size: 34px; line-height: 1; }
.bigstat .k { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin-top: 5px; }
.bigstat .v.hot { color: var(--orange); }

/* roster */
.player-row {
  display: grid; grid-template-columns: 44px 1fr 56px 130px 64px;
  gap: 12px; align-items: center;
  padding: 10px 6px; border-bottom: 1px solid var(--line);
  transition: background .12s; border-radius: 8px;
}
.player-row:hover { background: rgba(255,255,255,.02); }
.player-row:last-child { border-bottom: none; }
.pos-chip {
  font-size: 11px; font-weight: 800; letter-spacing: .05em; text-align: center;
  padding: 5px 0; border-radius: 7px; background: var(--ink-2); border: 1px solid var(--line); color: var(--text-dim);
}
.p-name { font-weight: 700; font-size: 14.5px; }
.p-meta { font-size: 12px; color: var(--text-faint); }
.ovr-badge {
  font-family: var(--font-display); font-size: 21px; text-align: center;
  padding: 4px 0; border-radius: 8px; width: 52px;
}
.ovr-elite { background: rgba(255,201,77,.14); color: var(--gold); }
.ovr-star { background: rgba(255,107,44,.14); color: var(--orange-hot); }
.ovr-solid { background: rgba(61,220,132,.1); color: var(--green); }
.ovr-role { background: rgba(154,160,174,.1); color: var(--text-dim); }
.pot-bar { height: 6px; border-radius: 3px; background: var(--ink-2); overflow: hidden; border: 1px solid var(--line); }
.pot-fill { height: 100%; background: linear-gradient(90deg, var(--orange), var(--gold)); }
.p-age { font-size: 13px; color: var(--text-dim); text-align: right; font-variant-numeric: tabular-nums; }

/* standings */
.stand-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .stand-grid { grid-template-columns: 1fr; } }
.stand-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 8px;
  border-radius: 8px; font-size: 13.5px; border-bottom: 1px solid var(--line);
}
.stand-row:last-child { border-bottom: none; }
.stand-row.me { background: rgba(255,107,44,.08); border: 1px solid rgba(255,107,44,.3); margin: 2px 0; }
.stand-row .seed { width: 20px; color: var(--text-faint); font-weight: 700; font-size: 12px; }
.stand-row .sname { flex: 1; font-weight: 600; }
.stand-row .swl { font-variant-numeric: tabular-nums; color: var(--text-dim); font-weight: 600; }
.stand-row.below-line { opacity: .55; }
.playoff-line { border-top: 2px dashed var(--line); margin: 4px 0; position: relative; }
.playoff-line::after {
  content: 'PLAYOFF LINE'; position: absolute; right: 0; top: -8px;
  font-size: 9px; font-weight: 800; letter-spacing: .15em; color: var(--text-faint); background: var(--card); padding: 0 6px;
}

/* trade */
.trade-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 720px) { .trade-grid { grid-template-columns: 1fr; } }
.trade-select {
  width: 100%; background: var(--ink-2); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 12px; font-family: var(--font-body);
  font-weight: 600; font-size: 14px; margin-bottom: 12px;
}
.trade-player {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 7px;
  cursor: pointer; transition: border-color .12s, background .12s; font-size: 13.5px;
}
.trade-player:hover { border-color: #3a4152; }
.trade-player.sel { border-color: var(--orange); background: rgba(255,107,44,.08); }
.trade-player .tovr { font-family: var(--font-display); font-size: 18px; width: 34px; text-align: center; }
.trade-player .tn { flex: 1; font-weight: 600; }
.trade-player .tm { color: var(--text-faint); font-size: 12px; white-space: nowrap; }
.trade-player .tinfo {
  background: none; border: none; color: var(--text-faint); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 5px; flex: 0 0 auto;
}
.trade-player .tinfo:hover { color: var(--text); background: rgba(255,255,255,.07); }
.trade-verdict { text-align: center; padding: 14px; border-radius: var(--radius-sm); font-weight: 700; font-size: 14px; margin-top: 10px; }
.verdict-yes { background: rgba(61,220,132,.1); color: var(--green); border: 1px solid rgba(61,220,132,.3); }
.verdict-no { background: rgba(255,93,93,.08); color: var(--red); border: 1px solid rgba(255,93,93,.25); }
.verdict-close { background: rgba(255,201,77,.08); color: var(--gold); border: 1px solid rgba(255,201,77,.25); }

/* history */
.hist-row {
  display: flex; align-items: center; gap: 14px; padding: 11px 8px;
  border-bottom: 1px solid var(--line); font-size: 14px;
}
.hist-row:last-child { border-bottom: none; }
.hist-year { font-family: var(--font-display); font-size: 19px; width: 76px; flex: 0 0 auto; color: var(--text-dim); }
.hist-team { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-rec { font-variant-numeric: tabular-nums; color: var(--text-dim); width: 64px; flex: 0 0 auto; text-align: right; }
/* fixed column: without it, the varying result labels shove the record out of line */
.hist-result { font-size: 12px; font-weight: 700; letter-spacing: .06em; width: 158px; flex: 0 0 auto; }
@media (max-width: 520px) {
  .hist-row { gap: 8px; }
  .hist-year { width: 60px; font-size: 14px; white-space: nowrap; }
  .hist-rec { width: 44px; font-size: 12.5px; }
  .hist-result { width: 104px; font-size: 9.5px; letter-spacing: .03em; }
}
.hist-result.champ { color: var(--gold); }
.hist-result.playoffs { color: var(--green); }
.hist-result.conf { color: #6db3ff; }
.hist-result.missed { color: var(--text-faint); }

/* playoffs bracket — West left · trophy center · East right */
.bracket { overflow-x: auto; padding-bottom: 8px; }
.bracket-grid {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px;
  align-items: center; min-width: 720px; margin: 0 auto;
}
.bracket-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bracket-cols { display: flex; gap: 8px; }
.bracket-side.west .bracket-cols { justify-content: flex-end; }
.bracket-side.east .bracket-cols { justify-content: flex-start; }
.bracket-col {
  flex: 1; min-width: 88px; max-width: 130px;
  display: flex; flex-direction: column; justify-content: space-around; gap: 8px;
}
.bracket-conf-label {
  font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-faint); text-align: center;
}
.bracket-center {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  min-width: 150px; text-align: center;
}
.bracket-center .lob-trophy { filter: drop-shadow(0 6px 16px rgba(240,192,69,.28)); }
.bracket-finals { width: 100%; min-width: 144px; }
.bracket-champ {
  display: flex; flex-direction: column; align-items: center;
  font-weight: 800; color: var(--gold); font-size: 14px; line-height: 1.2;
}
.bracket-champ small {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 700; margin-top: 2px;
}
.series {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 8px 10px; font-size: 12.5px;
}
.series.mine { border-color: rgba(255,107,44,.45); }
.series.placeholder { border-style: dashed; opacity: .32; }
.series-click { cursor: pointer; transition: border-color .12s, background .12s; }
.series-click:hover { border-color: var(--orange); background: rgba(255,107,44,.06); }
.series-game { cursor: pointer; }
.series-game .sg-n { font-weight: 800; width: 62px; }
.series-game .sg-line { flex: 1; font-variant-numeric: tabular-nums; }
.series-game .sg-line .sg-lose { color: var(--text-faint); font-weight: 700; }
.series-game .sg-go { color: var(--text-faint); font-size: 11px; font-weight: 700; }
.series-game:hover .sg-go { color: var(--orange); }
.series-team { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; font-weight: 600; }
.series-team .st-name { display: inline-flex; align-items: center; gap: 6px; }
.series-team .st-name b { color: var(--text-dim); font-weight: 700; }
.series-team .w { font-variant-numeric: tabular-nums; color: var(--text-dim); }
.series-team.winner { color: var(--gold); }
.series-team.winner .st-name b { color: var(--gold); }
.series-team.winner .w { color: var(--gold); }
.series-team.loser { opacity: .5; }

/* ── Action bar ── */
/* Pinned to the bottom of the viewport on every screen wide enough to show it;
   on a phone it folds into the bottom bar instead (see the has-mnav rules).
   It must stay a SIBLING of the screens: a .screen's entrance animation leaves a
   transform on the element, which would make it the containing block and pin
   this to the bottom of the dashboard rather than the window. */
.action-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: flex; gap: 12px; justify-content: center; align-items: center;
  flex-wrap: wrap;
  padding: 14px calc(20px + var(--safe-r)) calc(14px + var(--safe-b)) calc(20px + var(--safe-l));
  /* Solid, with the fade as a strip ABOVE rather than part of the bar itself.
     As a gradient inside the bar the soft end sat wherever the bar's own height
     put it, and on a narrow-but-wide screen where the buttons wrap to two rows
     the page's text read straight through the top half of it. */
  background: rgba(12, 13, 17, .97);
  backdrop-filter: blur(8px);
}
.action-bar::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 30px;
  background: linear-gradient(transparent, rgba(12, 13, 17, .97));
  pointer-events: none;
}
/* and the dashboard ends above it rather than underneath */
.dash-main { padding-bottom: calc(112px + var(--safe-b)); }
@media (max-width: 1100px) { .dash-main { padding-bottom: calc(132px + var(--safe-b)); } }

/* Between a phone and a desktop the four sim buttons stop fitting on one line.
   Two rows is fine on a tablet; a tall bar is not, so everything gets shorter
   rather than the row count getting fought over. "Sim to Extension Deadline" is
   simply wider than a quarter of an 820px screen at a legible size. */
@media (max-width: 1100px) {
  .action-bar { gap: 8px; padding: 10px calc(14px + var(--safe-r)) calc(10px + var(--safe-b)) calc(14px + var(--safe-l)); }
  .sim-btn { flex: 1 1 190px; min-width: 0; height: 42px; font-size: 12.5px; padding: 0 10px; }
  .sim-note { font-size: 11.5px; }
}
#screen-dash:not(.active) ~ .action-bar { display: none; }
.sim-note { font-size: 12px; color: var(--text-faint); font-weight: 600; }
.sim-btn {
  flex: 0 1 240px; height: 48px; padding: 0 12px; font-size: 13.5px;
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center; white-space: nowrap; line-height: 1;
}

/* ═══════════ OFFSEASON ═══════════ */
.off-wrap { max-width: 760px; margin: 0 auto; padding: var(--chrome-top) 20px 100px; }
.off-step-label { font-size: 11px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--orange); text-align: center; margin-bottom: 14px; }
.off-title { font-family: var(--font-display); font-size: clamp(46px, 8vw, 74px); text-align: center; line-height: .95; margin-bottom: 8px; }
.off-sub { text-align: center; color: var(--text-dim); margin-bottom: 34px; }
.prospect-card, .fa-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 18px; margin-bottom: 10px; cursor: pointer;
  transition: transform .15s, border-color .15s;
}
.prospect-card:hover, .fa-card:hover { transform: translateY(-2px); border-color: var(--orange); }
.prospect-card.taken { opacity: .35; pointer-events: none; }

/* ── 💎 draft scouting ── */
.gem-chip { font-size: 15px; margin-left: -4px; filter: drop-shadow(0 0 6px rgba(120,200,255,.8)); }
/* pink diamond: hue-shift the blue 💎 emoji (there is no pink-diamond emoji) */
.gem-pink { display: inline-block; filter: hue-rotate(140deg) saturate(1.6); }
.gem-chip:has(.gem-pink) { filter: none; }   /* the pink glow comes from the inner span instead */
.gem-chip .gem-pink { filter: hue-rotate(140deg) saturate(1.6) drop-shadow(0 0 6px rgba(120,200,255,.8)); }
.draft-gem-note {
  border: 1px solid rgba(255,201,77,.3); background: rgba(255,201,77,.06);
  border-radius: var(--radius-sm); padding: 10px 14px; margin: 4px 0 12px;
  font-size: 12.5px; color: var(--text-dim); line-height: 1.5;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.draft-gem-note .dgn-sp { margin-left: auto; white-space: nowrap; color: var(--text); }
.prospect-card .p-bio { font-size: 12px; color: var(--text-faint); line-height: 1.4; margin-top: 3px; }
.fscout-btn { padding: 7px 12px; font-size: 11.5px; }
.pcard-scouted { color: var(--green); font-weight: 800; font-size: 11.5px; white-space: nowrap; text-align: center; }
.pcard-actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.draftp-btn { padding: 7px 12px; font-size: 11.5px; white-space: nowrap; }
/* the 💎 reveal "jump" — badge pops while the number counts up */
.ovr-jump { animation: ovrJump .8s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes ovrJump {
  0% { transform: scale(1); }
  35% { transform: scale(1.32); box-shadow: 0 0 22px rgba(255,201,77,.55); }
  100% { transform: scale(1); }
}

.gem-stage {
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
  background: rgba(5,6,10,.82); backdrop-filter: blur(4px); animation: screenIn .3s ease both; padding: 20px;
}
.gem-card {
  position: relative; overflow: hidden; text-align: center; max-width: 440px; width: 100%;
  background: var(--card); border: 1px solid rgba(120,200,255,.5); border-radius: var(--radius);
  padding: 30px 26px 24px; box-shadow: 0 0 60px rgba(120,200,255,.25), inset 0 0 40px rgba(120,200,255,.06);
  animation: gemPop .55s cubic-bezier(.2,.9,.3,1.4) both;
}
.gem-card .gem-shine {
  position: absolute; top: 0; bottom: 0; width: 70px; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.14), transparent);
  animation: gemSweep 3.2s ease-in-out .3s infinite;
}
.gem-card .gem-ico { font-size: 54px; line-height: 1; animation: gemSpin 1.6s cubic-bezier(.2,.8,.3,1) both; filter: drop-shadow(0 0 18px rgba(120,200,255,.9)); }
/* 💗 pink diamond variant */
.gem-card.pink {
  border-color: rgba(255,120,200,.55);
  box-shadow: 0 0 60px rgba(255,120,200,.28), inset 0 0 40px rgba(255,120,200,.07);
}
.gem-card.pink .gem-ico { filter: drop-shadow(0 0 18px rgba(255,120,200,.9)); }
.gem-card.pink .gem-label { color: #ff8fd0; }
.gem-card .gem-label { font-family: var(--font-display); letter-spacing: .14em; color: var(--gold); font-size: 15px; margin-top: 10px; text-transform: uppercase; }
.gem-card .gem-name { font-family: var(--font-display); font-size: clamp(24px, 5vw, 34px); margin-top: 2px; }
.gem-card .gem-ovr { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 22px; margin: 10px 0 6px; }
.gem-card .gem-sub { color: var(--text-dim); font-size: 13px; }
.gem-card .gem-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
@keyframes gemPop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes gemSpin { from { transform: rotate(-540deg) scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gemSweep { 0% { left: -80px; } 45% { left: 110%; } 100% { left: 110%; } }
.off-actions { display: flex; justify-content: center; gap: 14px; margin-top: 30px; }

/* draft lottery reveal */
.lottery-board { max-width: 520px; margin: 0 auto; padding: 10px 14px; }
.lottery-row {
  display: flex; align-items: center; gap: 12px; padding: 9px 6px;
  border-bottom: 1px solid var(--line); font-size: 14px;
}
.lottery-row:last-child { border-bottom: none; }
.lottery-row .lp { font-family: var(--font-display); font-size: 20px; width: 40px; color: var(--text-dim); }
.lottery-row .lt { flex: 1; font-weight: 600; }
.lottery-row .lvia { color: var(--text-faint); font-size: 12px; font-weight: 500; }
.lottery-row .lodds { color: var(--text-faint); font-variant-numeric: tabular-nums; font-size: 12.5px; width: 48px; text-align: right; }
.lottery-row .ljump { color: var(--gold); font-weight: 800; font-size: 12px; width: 42px; text-align: right; }
.lottery-row .ljump.lfall { color: var(--red); }
.lottery-row.hidden .lt { color: var(--text-faint); font-size: 22px; font-weight: 800; }
.lottery-row.mine { background: rgba(255,107,44,.09); border-radius: 8px; }
.lottery-row.mine .lp { color: var(--orange); }
.lottery-row.dropping { animation: lottoDrop .42s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes lottoDrop { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: none; } }

/* ── Full-screen draft-lottery reveal ── */
.lotto-stage {
  position: fixed; inset: 0; z-index: 200; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  background: radial-gradient(120% 80% at 50% 0%, #14141c, #07070b 70%);
  animation: screenIn .4s ease both;
}
/* 3 tracks: equal 1fr gutters keep the title optically centered while the
   skip button owns its own column, so they can never overlap at any width */
.lotto-stage-head {
  width: 100%; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 16px; padding: 18px 16px 6px;
}
.lotto-title {
  grid-column: 2; white-space: nowrap;
  font-family: var(--font-display); font-size: clamp(18px, 4.6vw, 44px);
  letter-spacing: .04em; color: var(--text);
}
.lotto-skip { grid-column: 3; justify-self: end; padding: 7px 16px; font-size: 13px; white-space: nowrap; }

/* hero: the ball machine (top, always running) + the big per-pick reveal (below) */
.lotto-hero {
  flex: 1; min-height: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 8px; text-align: center; --tc: #ff6b2c;
}
/* the machine is drawn in-canvas (chamber inset with headroom) — the element itself is
   transparent so an ejected ball never hits a visible box edge */
.lotto-canvas {
  display: block; width: min(440px, 92vw); height: auto; aspect-ratio: 520 / 340; flex-shrink: 0;
  transition: width .8s cubic-bezier(.2,.8,.2,1), opacity .45s ease;
}
.lotto-stage.finale .lotto-canvas { width: min(600px, 96vw); }
.lotto-stage.finale .lotto-rail { opacity: .35; transition: opacity .6s ease; }
/* once #1 is revealed the machine is empty — fold it away so the big reveal has the room */
.lotto-stage.reveal1 .lotto-canvas { width: 0; opacity: 0; }
/* reveal readout below the machine — inset bezel, stable height so nothing jumps */
.lotto-reveal {
  min-height: 168px; width: min(440px, 92vw);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 10px 14px; border-radius: var(--radius);
  background: var(--card-2); border: 1px solid var(--line);
  box-shadow: inset 0 2px 16px rgba(0,0,0,.55);
}
.lotto-drawing {
  color: var(--text-dim); font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  font-size: 12.5px; animation: ledPulse 1.6s ease-in-out infinite;
}
.lotto-final-label {
  font-family: var(--font-display); font-size: clamp(18px, 3.5vw, 28px); color: var(--gold);
  letter-spacing: .1em; animation: ledPulse .9s ease-in-out infinite;
}
@keyframes ledPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
/* full-stage color flash when #1 lands */
.lotto-flash {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(60% 50% at 50% 45%, color-mix(in srgb, var(--tc, #ff6b2c) 55%, transparent), transparent 75%);
  animation: flashFade .9s ease-out both;
}
@keyframes flashFade { from { opacity: 1; } to { opacity: 0; } }
.lotto-reveal.revealing {
  background: radial-gradient(90% 75% at 50% 45%, color-mix(in srgb, var(--tc) 40%, transparent), transparent 72%);
}
.lotto-reveal.pop { animation: lottoReveal .5s cubic-bezier(.2,.9,.3,1.35) both; }
.lotto-pk {
  font-family: var(--font-display); font-size: clamp(26px, 6vw, 52px); line-height: 1;
  color: var(--tc); text-shadow: 0 0 30px color-mix(in srgb, var(--tc) 60%, transparent);
}
.lotto-logo { filter: drop-shadow(0 10px 30px color-mix(in srgb, var(--tc) 55%, transparent)); }
.lotto-logo .team-logo, .lotto-logo img { display: block; }
.lotto-team { font-family: var(--font-display); font-size: clamp(20px, 4vw, 36px); color: var(--text); }
.lotto-team .you { color: var(--orange); }
.lotto-via { color: var(--text-faint); font-weight: 600; font-size: 13px; }
.lotto-reveal.pick1 .lotto-pk { font-size: clamp(34px, 8vw, 66px); }
@keyframes lottoReveal { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }

/* rail: the whole order, always visible */
.lotto-rail {
  width: 100%; flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; justify-content: center; padding: 12px 14px 22px;
}
.lotto-slot {
  width: 62px; height: 58px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.lotto-slot .rn { font-size: 11px; font-weight: 800; color: var(--text-faint); }
.lotto-slot .rq { font-family: var(--font-display); font-size: 18px; color: var(--text-faint); }
.lotto-slot.filled { animation: lottoReveal .35s ease both; border-color: color-mix(in srgb, var(--text-faint) 40%, transparent); }
.lotto-slot.filled .rn { color: var(--text-dim); }
.lotto-slot.mine { border-color: var(--orange); background: rgba(255,107,44,.12); }
.lotto-slot.mine .rn { color: var(--orange); }

/* ── Live Sim: ESPN-style broadcast overlay ── */
.live-stage {
  position: fixed; inset: 0; z-index: 200; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  background: radial-gradient(120% 80% at 50% 0%, #14141c, #07070b 70%);
  animation: screenIn .4s ease both;
}
.live-head {
  width: 100%; max-width: 720px; display: flex; align-items: center; justify-content: space-between;
  padding: calc(16px + var(--safe-t)) 18px 8px; gap: 10px; flex-wrap: wrap;
}
.live-title { font-family: var(--font-display); font-size: 20px; letter-spacing: .06em; color: var(--red); }
.live-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.live-speed {
  border: 1px solid var(--line); background: var(--card-2); color: var(--text-dim);
  border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 800; cursor: pointer;
}
.live-speed.on { border-color: var(--orange); color: var(--orange); background: rgba(255,107,44,.12); }
.live-ctl { padding: 5px 12px; font-size: 12px; }
.live-score {
  width: 100%; max-width: 720px; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 12px; padding: 10px 18px 14px;
  border-bottom: 1px solid var(--line);
}
.live-team { display: flex; flex-direction: column; align-items: center; gap: 3px; font-family: var(--font-display); font-size: 20px; }
.live-team small { font-family: var(--font-body); font-size: 11px; color: var(--text-faint); font-weight: 600; }
.live-team.mine b { color: var(--orange); }
.live-nums { font-family: var(--font-display); font-size: clamp(34px, 7vw, 54px); display: flex; gap: 12px; justify-content: center; line-height: 1; }
.live-dash { color: var(--text-faint); }
.live-clock { text-align: center; color: var(--gold); font-weight: 800; font-size: 13px; letter-spacing: .08em; margin-top: 2px; }
/* ── the court ──
   Sits between the scoreboard and the feed and takes whatever height is left
   over after the feed has its share, so a short phone still shows several plays
   of text underneath. The SVG is drawn once; only transforms move after that,
   so a play costs the compositor and nothing else. */
.live-court {
  width: 100%; max-width: 720px; padding: 8px 18px 0;
  flex: 0 0 auto; height: clamp(160px, 31vh, 310px);
  display: flex; justify-content: center; overflow: hidden;
}
/* The box owns the height and the SVG fits inside it. Sizing the other way
   round — width 100%, height auto — lets the aspect ratio pick a height the
   flex row has no room for, and the court spills over the feed below it. */
.lc-wrap { width: 100%; max-width: 480px; height: 100%; }
.lc-svg { width: 100%; height: 100%; display: block; }
.lc-floor { fill: #34271b; }
.lc-paint { fill: rgba(255, 128, 60, .2); }
.lc-line { stroke: rgba(255, 240, 216, .42); stroke-width: .7; fill: none; }
.lc-rim { stroke: #ff8a3d; stroke-width: 1.1; transition: stroke-width .12s ease; }
.lc-rim.lc-swish { stroke: #ffd36b; stroke-width: 2.2; }
.lc-fig { transition: none; }
.lc-shadow { fill: rgba(0, 0, 0, .3); }
.lc-body { stroke: rgba(0, 0, 0, .35); stroke-width: .4; }
.lc-def .lc-body { opacity: .82; }
/* Ten name plates at this scale land on top of each other and read as noise.
   Only the players in the current play are named; everyone else is a shape in
   a team colour, which is all you need to follow where the ball is going. */
.lc-name {
  font-family: var(--font-body); font-size: 3.4px; font-weight: 800;
  fill: rgba(255, 255, 255, .9); letter-spacing: .02em;
  opacity: 0; transition: opacity .18s ease;
  paint-order: stroke; stroke: rgba(0, 0, 0, .75); stroke-width: .9px;
}
.lc-fig.lc-lit .lc-name { opacity: 1; }
.lc-inner { transform-box: fill-box; transform-origin: center; }
.lc-fig.lc-lit .lc-body { stroke: rgba(255, 255, 255, .8); stroke-width: .5; }
.lc-ball { filter: drop-shadow(0 .6px .8px rgba(0, 0, 0, .5)); }

@media (max-width: 720px) {
  /* On a phone the controls were wrapping to three rows and eating the court.
     Shrink them instead: the court and the feed are what people came for. */
  .live-court { padding: 6px 12px 0; height: clamp(150px, 27vh, 260px); }
  .live-head { padding: 10px 12px 4px; gap: 6px; }
  .live-title { font-size: 15px; }
  .live-speed { padding: 4px 9px; font-size: 11px; }
  .live-ctl { padding: 4px 9px; font-size: 11px; }
  .live-score { padding: 6px 12px 10px; }
  .live-feed { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) { .live-court { display: none; } }

.live-feed {
  flex: 1 1 auto; min-height: 0; width: 100%; max-width: 720px; overflow-y: auto;
  padding: 12px 18px; display: flex; flex-direction: column; gap: 7px;
}
.live-ev {
  display: flex; align-items: baseline; gap: 10px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card-2);
  font-size: 13.5px; animation: lottoDrop .35s cubic-bezier(.2,.9,.3,1.2) both;
}
.live-ev .lv-time { color: var(--text-faint); font-size: 11px; font-weight: 800; white-space: nowrap; width: 64px; }
.live-ev .lv-play { flex: 1; }
.live-ev .lv-pts { color: var(--green); font-weight: 800; font-size: 12px; }
.live-ev .lv-ast { color: var(--text-faint); font-size: 11.5px; font-weight: 700; }
.live-ev .lv-score { color: var(--text-dim); font-size: 11.5px; white-space: nowrap; font-weight: 700; }
.live-ev.mine { border-color: rgba(255,107,44,.45); background: rgba(255,107,44,.08); }
.live-ev.colorplay { opacity: .8; }
.live-ev.live-qbreak {
  justify-content: center; color: var(--gold); font-weight: 800; letter-spacing: .06em;
  font-size: 12px; text-transform: uppercase; background: rgba(255,201,77,.07); border-color: rgba(255,201,77,.3);
}
.live-ev.live-final { flex-direction: column; align-items: center; gap: 4px; font-size: 15px; padding: 14px; }
.live-ev.live-final.win { border-color: rgba(66,214,134,.55); background: rgba(66,214,134,.1); }
.live-ev.live-final.loss { border-color: rgba(255,93,93,.5); background: rgba(255,93,93,.08); }
.live-ev.live-final small { color: var(--text-dim); }
.live-foot { width: 100%; max-width: 720px; padding: 10px 18px 20px; display: flex; justify-content: center; min-height: 66px; }
/* Finals: gold broadcast treatment; the clinching win gets the champ banner + confetti storm */
.live-stage.finals { background: radial-gradient(120% 80% at 50% 0%, #1d1710, #07070b 70%); }
.live-stage.finals .live-title { color: var(--gold); }
.live-stage.finals .live-score { border-bottom-color: rgba(255,201,77,.35); }
.live-ev.live-final.champ {
  border-color: var(--gold); background: rgba(255,201,77,.14); color: var(--gold);
  box-shadow: 0 0 44px rgba(255,201,77,.28); font-size: 17px;
}
.live-ev.live-final.champ small { color: var(--gold); }

/* ── FA offer panel (custom salary + years) ── */
.fa-offer {
  margin: -4px 0 12px; padding: 14px 18px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  display: flex; flex-direction: column; gap: 12px;
}
.fa-offer[hidden] { display: none; }
.offer-row { display: flex; align-items: center; gap: 12px; }
.offer-lab { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); width: 52px; flex-shrink: 0; }
.offer-row input[type="range"] { flex: 1; cursor: pointer; }
.off-sal-val, .off-yrs-val { min-width: 62px; text-align: right; font-weight: 800; font-size: 14px; }
.offer-foot { justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.offer-note { font-size: 11px; color: var(--text-faint); }
.offer-breakdown { font-size: 12px; color: var(--text-dim); padding-left: 64px; }
.offer-breakdown b { color: var(--gold); }


/* ── Box score modal ── */
.box-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 40px 44px 40px 40px 40px 40px;
  gap: 4px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: 13px; align-items: center;
}
.box-row span { text-align: right; font-variant-numeric: tabular-nums; }
.box-row .bx-name { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.box-row .bx-pts { font-weight: 800; color: var(--gold); }
.box-head { font-size: 10px; letter-spacing: .08em; color: var(--text-faint); border-bottom: 1.5px solid var(--line); }
.box-head .bx-pts { color: var(--text-faint); font-weight: 700; }

/* ── Draft-night roster panel ── */
.draft-roster { margin-bottom: 14px; }
.draft-roster summary {
  cursor: pointer; font-weight: 800; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-dim); user-select: none;
}
.draft-roster summary:hover { color: var(--orange); }
.draft-roster[open] summary { margin-bottom: 10px; }
.pos-count small { font-size: 10px; font-weight: 700; }

/* ── League leaders ── */
.leaders-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.leaders-card { margin-bottom: 0; }
.offer-chance { font-size: 12px; color: var(--text-dim); }
.offer-chance b { font-size: 16px; margin-left: 4px; }

/* ═══════════ GAME OVER / CHAMPION ═══════════ */
.over-wrap {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 30px;
}
.over-title { font-family: var(--font-display); font-size: clamp(64px, 12vw, 140px); line-height: .9; }
.over-title.gold { color: var(--gold); text-shadow: 0 0 80px rgba(255,201,77,.4); }
.over-title.red { color: var(--red); }
.over-sub { color: var(--text-dim); font-size: 17px; margin: 20px 0 30px; max-width: 520px; }
.over-stats { display: flex; gap: 30px; margin-bottom: 40px; flex-wrap: wrap; justify-content: center; }

/* ── Job market (after firing) ── */
.job-market { width: 100%; max-width: 480px; margin: 6px 0 26px; }
.jm-label { font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); text-align: left; margin: 14px 0 8px; }
.jm-label-dim { opacity: .6; }
.job-offer {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 8px;
}
.job-offer.passed { opacity: .4; }
.job-offer .jo-logo { display: inline-flex; width: 40px; flex: 0 0 40px; }
.job-offer .jo-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.job-offer .jo-body b { font-size: 15px; }
.job-offer .jo-tier { font-size: 11px; color: var(--text-faint); text-transform: capitalize; }
.job-offer .sign-pct { font-size: 20px; width: 54px; }
.job-offer .jo-take { padding: 8px 16px; font-size: 12.5px; white-space: nowrap; }
.job-offer .jo-view { padding: 8px 14px; font-size: 12.5px; white-space: nowrap; }

/* ── Toast ── */
.toast {
  position: fixed; top: calc(22px + var(--safe-t)); left: 50%; transform: translateX(-50%) translateY(-90px);
  z-index: 100; background: var(--card-2); border: 1px solid var(--line);
  padding: 12px 24px; border-radius: 999px; font-weight: 700; font-size: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.5); transition: transform .35s cubic-bezier(.2,.9,.3,1.3);
  pointer-events: none; max-width: 90vw; text-align: center;
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ── Confetti ── */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.confetti-bit {
  position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px;
  animation: confFall linear forwards;
}
@keyframes confFall {
  to { transform: translateY(110vh) rotate(720deg); opacity: .7; }
}

@media (max-width: 640px) {
  /* Stacked on a phone, so the whole header drops below the fixed button row
     rather than trying to share it. 66px clears a 16+44 row; the inset is what
     an island or a notch adds on top of that. */
  .dash-header { flex-direction: column; align-items: center; padding: calc(66px + var(--safe-t)) 12px 0; }
  .dash-stats { width: 100%; justify-content: center; gap: 12px; }
  .tabs { width: 100%; overflow-x: auto; justify-content: flex-start; }
  .player-row { grid-template-columns: 40px 1fr 50px 56px; }
  .player-row .pot-cell { display: none; }
}

/* ═══════════ REAL-STATS UPDATE: roster columns ═══════════ */
.player-row {
  grid-template-columns: 40px 1fr 50px 44px 44px 44px 48px;
  gap: 10px;
}
.player-head { padding: 2px 6px 8px; border-bottom: 1px solid var(--line); }
.player-head span { font-size: 9.5px; font-weight: 800; letter-spacing: .14em; color: var(--text-faint); text-align: center; }
.stat-num-sm { text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13.5px; color: var(--text-dim); }
.ovr-head, .stat-head { text-align: center; }
.rk-tag {
  display: inline-block; font-size: 9px; font-weight: 800; color: var(--green);
  border: 1px solid rgba(61,220,132,.4); border-radius: 4px; padding: 0 4px; margin-left: 5px; vertical-align: 1px;
}
@media (max-width: 640px) {
  .player-row { grid-template-columns: 36px 1fr 46px 40px 40px; }
  .player-row .pot-head, .player-row span:nth-child(6) { display: none; }
}

/* ═══════════ RINGS & TROPHY ROOM ═══════════ */
.mini-ring {
  display: inline-block; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #e8b93a 45%, #8a6508 80%);
  box-shadow: inset 0 0 0 5px var(--ink);
  margin-right: 7px; vertical-align: -2px;
}
.ring-shelf {
  display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;
  padding: 18px 6px 10px;
}
.ring-shelf-hero { margin: 18px 0 4px; }
.ring-slot { text-align: center; }
.ring {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto; position: relative;
  background: radial-gradient(circle at 35% 28%, #fff3c4, #f0c045 40%, #a87a10 72%, #6b4d05);
  box-shadow: inset 0 0 0 5px rgba(0,0,0,.3), 0 8px 24px rgba(255,201,77,.28), 0 2px 4px rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  animation: ringIn .5s cubic-bezier(.2,.9,.3,1.4) both;
}
.ring::before {
  content: ''; position: absolute; inset: 16px; border-radius: 50%;
  background: var(--card); box-shadow: inset 0 3px 8px rgba(0,0,0,.65);
}
.ring::after {
  content: ''; position: absolute; top: 4px; left: 50%; width: 11px; height: 11px;
  transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(135deg, #ffffff, #ffd76b 60%, #c9992a);
  box-shadow: 0 0 10px rgba(255,240,180,.9);
  border-radius: 2px;
}
.ring-year {
  position: relative; z-index: 1; font-family: var(--font-display);
  font-size: 19px; color: var(--gold); letter-spacing: .05em;
}
.ring-empty { background: transparent; box-shadow: none; animation: none; }
.ring-empty::before { inset: 0; background: transparent; box-shadow: none; border: 2.5px dashed #2e3442; border-radius: 50%; }
.ring-empty::after { display: none; }
.ring-label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: var(--gold); margin-top: 8px; }
.ring-label-dim { color: var(--text-faint); }
@keyframes ringIn { from { opacity: 0; transform: scale(.5) rotate(-14deg); } to { opacity: 1; transform: none; } }

.dynasty-status {
  text-align: center; font-family: var(--font-display); font-size: 19px; letter-spacing: .06em;
  color: var(--text-dim); padding: 6px 0 16px;
}
.cabinet {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; border-top: 1px solid var(--line); padding-top: 16px;
}
.cab-item {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 8px; text-align: center;
}
.cab-item.cab-empty { opacity: .38; }
.cab-icon { height: 34px; display: flex; align-items: center; justify-content: center; }
.cab-icon svg { width: 30px; height: 30px; }
.cab-count { font-family: var(--font-display); font-size: 26px; line-height: 1.1; color: var(--gold); }
.cab-empty .cab-count { color: var(--text-faint); }
.cab-label { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-top: 2px; }
.cab-detail { font-size: 10.5px; color: var(--text-dim); margin-top: 6px; }
.trophy-card h3 { text-align: center; }

/* ═══════════ SAVE SLOTS ═══════════ */
.slots-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; width: 100%; max-width: 900px; }
.slot-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 16px; text-align: center; transition: transform .15s, border-color .15s;
}
.slot-card:hover { transform: translateY(-3px); border-color: #3a4152; }
.slot-card.empty { border-style: dashed; cursor: pointer; color: var(--text-faint); display:flex; flex-direction:column; align-items:center; justify-content:center; min-height: 210px; }
.slot-card.empty:hover { border-color: var(--orange); color: var(--orange); }
.slot-plus { font-size: 40px; line-height: 1; margin-bottom: 8px; }
.slot-num { font-size: 10px; letter-spacing: .2em; font-weight: 800; color: var(--text-faint); margin-bottom: 10px; }
.slot-mode {
  display: inline-block; font-size: 9px; letter-spacing: .12em; font-weight: 800;
  padding: 2px 6px; border-radius: 999px; border: 1px solid var(--line); margin-left: 4px;
}
.slot-mode.sm-casual { color: var(--text-dim); }
.slot-mode.sm-hard { color: var(--orange); border-color: rgba(255,107,44,.5); background: rgba(255,107,44,.1); }
.slot-logo { display:flex; justify-content:center; margin-bottom: 8px; }
.slot-team { font-weight: 800; font-size: 14.5px; }
.slot-meta { font-size: 12px; color: var(--text-dim); margin: 4px 0 12px; }
.slot-actions { display: flex; gap: 8px; justify-content: center; }
.slot-actions .btn { padding: 8px 16px; font-size: 12px; }

/* ═══════════ GM CREATOR ═══════════ */
.creator-layout { display: flex; gap: 34px; align-items: flex-start; flex-wrap: wrap; justify-content: center; width: 100%; }
.creator-preview {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 30px 20px; display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.creator-preview .gm-avatar { filter: drop-shadow(0 12px 24px rgba(0,0,0,.4)); }
.gm-name-input { text-align: center; font-weight: 800; max-width: 190px; }
.creator-options { flex: 1; min-width: 300px; max-width: 420px; text-align: left; }
.opt-row { margin-bottom: 16px; }
.opt-label { font-size: 10.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.opt-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--line); transition: transform .12s, border-color .12s;
}
.swatch:hover { transform: scale(1.12); }
.swatch.sel { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,107,44,.3); }
.swatch-label {
  width: auto; min-width: 34px; height: 34px; border-radius: 999px; padding: 0 13px;
  background: var(--ink-2); color: var(--text-dim); font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.swatch-label.sel { color: var(--orange); }

/* ═══════════ GM TAB / SKILL WEB ═══════════ */
.gm-header-btn {
  background: var(--card-2); border: 1px solid var(--line); border-radius: 50%;
  width: 52px; height: 52px; cursor: pointer; overflow: hidden; padding: 4px 0 0;
  transition: border-color .15s, transform .15s;
}
.gm-header-btn:hover { border-color: var(--orange); transform: translateY(-2px); }

/* 100-overall GM: the circle glows */
@keyframes gmoPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
#skill-web .gmo-halo { animation: gmoPulse 2.2s ease-in-out infinite; }
.gm-header-btn.gm-max {
  border-color: #ff6fd8;
  box-shadow: 0 0 12px rgba(255,111,216,.7), 0 0 26px rgba(255,111,216,.35);
  animation: gmoPulse 2.2s ease-in-out infinite;
}
.gm-card-top { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: center; }
.gm-id { text-align: center; }
.gm-id .gm-name { font-family: var(--font-display); font-size: 30px; letter-spacing: .04em; }
.gm-badges { display: flex; gap: 22px; justify-content: center; margin-top: 8px; }
.skill-web-wrap { display: flex; justify-content: center; margin-top: 12px; }
.skill-node { cursor: pointer; }
.skill-node.locked { opacity: .45; cursor: not-allowed; }
.skill-node circle.bg { fill: var(--card-2); stroke: var(--line); stroke-width: 1.5; transition: stroke .15s; }
.skill-node:hover circle.bg { stroke: var(--orange); }
.skill-node.maxed circle.bg { stroke: var(--gold); fill: rgba(255,201,77,.08); }
.skill-hint { text-align: center; font-size: 13.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin-top: 52px; }
.skill-desc { text-align: center; color: var(--text-dim); font-size: 13px; min-height: 40px; padding: 8px 20px 0; }
.sp-pill { display:inline-block; background: rgba(255,107,44,.12); border:1px solid rgba(255,107,44,.4); color: var(--orange-hot); font-weight:800; font-size:12px; border-radius:999px; padding: 4px 14px; }

/* ═══════════ SALARIES / PICKS / FINDER ═══════════ */
.sal-cell { color: var(--green); font-weight: 700; font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }
.sal-cell small { color: var(--text-faint); font-weight: 600; }
.cap-over { color: var(--red) !important; }
.cap-lux { color: var(--gold) !important; }
.pick-chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; margin: 0 6px 7px 0;
  font-size: 12px; font-weight: 700; color: var(--text-dim); cursor: pointer;
  transition: border-color .12s, background .12s;
}
.pick-chip:hover { border-color: #3a4152; }
.pick-chip.sel { border-color: var(--orange); background: rgba(255,107,44,.1); color: var(--text); }
.pick-chip.lottery { border-color: rgba(240,190,90,.45); }
.pick-chip.lottery.sel { border-color: var(--orange); }
.pick-chip .rd { color: var(--gold); }
.pk-main { color: var(--text); white-space: nowrap; }
.pk-via { color: var(--text-faint); font-weight: 700; }
.pk-proj {
  color: var(--text-dim); font-size: 10.5px; font-weight: 800; letter-spacing: .01em;
  background: rgba(255,255,255,.06); padding: 2px 7px; border-radius: 6px; white-space: nowrap;
}
.pk-lotto {
  color: var(--gold); font-size: 9.5px; font-weight: 800; letter-spacing: .05em;
  background: rgba(240,190,90,.16); padding: 2px 6px; border-radius: 6px;
}
.pk-type { color: var(--text-faint); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.trade-cap-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-faint); font-weight: 700; padding: 8px 4px 0; }
.finder-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.off-trade-tools { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; }
.trade-player .tpos { color: var(--text-faint); font-size: 11px; font-weight: 700; }

.finder-card {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 15px; margin-bottom: 9px; display: flex; align-items: center; gap: 12px; font-size: 13.5px;
}
.finder-card .fd { flex: 1; }
.finder-card b { color: var(--text); }
.finder-delta { font-weight: 800; color: var(--green); font-size: 12px; white-space: nowrap; }

/* draft night */
.draft-status { text-align: center; margin-bottom: 18px; }
.draft-pick-now { font-family: var(--font-display); font-size: 30px; letter-spacing: .04em; }
.draft-log { max-height: 340px; overflow-y: auto; }
.draft-log .pick-upcoming { opacity: .5; }
.draft-log .upcoming-note { color: var(--text-faint); font-size: 11px; letter-spacing: .04em; }
.draft-log .on-clock {
  opacity: 1; color: var(--orange); font-weight: 700;
  border-left: 2px solid var(--orange); padding-left: 8px; margin-left: -10px;
}
.draft-log .mine-pick { background: rgba(255,107,44,.08); }
.logo-chip { display: flex; align-items: center; justify-content: center; background: transparent !important; border: none !important; }
.team-logo-img { object-fit: contain; display: block; }
.team-card .logo-chip { margin-bottom: 10px; }
.see-roster {
  display: inline-block; margin-top: 10px; padding: 6px 14px; border-radius: 999px;
  background: var(--card-2); border: 1px solid var(--line); color: var(--text-dim);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; transition: color .15s, border-color .15s;
}
.see-roster:hover { color: var(--text); border-color: var(--text-dim); }

/* ═══════════ v4: home btn, schedule, lineup, FA, modal ═══════════ */
.home-btn {
  position: fixed; top: calc(16px + var(--safe-t)); right: calc(16px + var(--safe-r)); z-index: 60;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--card-2); border: 1px solid var(--line); color: var(--text-dim);
  font-size: 20px; cursor: pointer; transition: border-color .15s, color .15s, transform .15s;
}
.home-btn:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-2px); }

.lob-trophy { vertical-align: -3px; }
.stat-num .lob-trophy { margin-right: 5px; }

/* schedule */
.sched-row {
  display: flex; align-items: center; gap: 12px; padding: 8px 8px;
  border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.sched-row:last-child { border-bottom: none; }
.sched-row.next-game { background: rgba(255,107,44,.07); border: 1px solid rgba(255,107,44,.3); border-radius: 8px; }
.sched-row .sd { width: 52px; color: var(--text-faint); font-weight: 700; font-size: 11px; }
.sched-row .sopp { flex: 1; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.sched-row .sres { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 60px; text-align: right; }
.sched-milestone {
  text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .2em;
  color: var(--gold); padding: 8px 0 2px; border-bottom: 1px dashed var(--line);
}

/* lineup & system */
.sys-select { max-width: 280px; margin: 0 auto 6px; display: block; }
.sys-desc { text-align: center; color: var(--text-faint); font-size: 12px; margin-bottom: 12px; }
.min-input {
  width: 32px; background: var(--ink-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 7px; padding: 5px 2px; text-align: center; font-weight: 700; font-size: 13px;
  font-family: var(--font-body);
  appearance: textfield; -moz-appearance: textfield;
}
.min-input::-webkit-outer-spin-button, .min-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* custom always-on white minutes stepper (native spinner hidden above) */
.min-stepper { display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
.min-arrows { display: inline-flex; flex-direction: column; gap: 1px; }
.min-arrow { border: none; background: none; color: #fff; cursor: pointer; font-size: 8px; line-height: 1; padding: 1px 2px; opacity: .8; }
.min-arrow:hover { opacity: 1; }
.starter-toggle {
  width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line);
  background: transparent; color: var(--text-faint); font-size: 11px; font-weight: 800; cursor: pointer;
}
.starter-toggle.on { background: rgba(255,201,77,.15); border-color: var(--gold); color: var(--gold); }
.fit-chip { font-size: 10.5px; font-weight: 800; border-radius: 5px; padding: 1px 5px; margin-left: 6px; }
.fit-pos { color: var(--green); background: rgba(61,220,132,.1); }
.fit-neg { color: var(--red); background: rgba(255,93,93,.1); }
.min-total { text-align: right; font-size: 12px; color: var(--text-faint); font-weight: 700; padding-top: 8px; }
.min-total.bad { color: var(--red); }
/* header row: "Lineup …cap info" left, minutes + Auto right — flex so they can never overlap */
.lineup-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.lineup-head-row h3 { margin-bottom: 0; }
.min-total-top { padding-top: 0; font-size: 14px; color: var(--text-dim); white-space: nowrap; margin-left: auto; }

/* FA board */
.fa-controls { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 14px; }
.fa-controls .trade-select { width: auto; margin: 0; }
.pos-counts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.pos-count { font-size: 12px; font-weight: 700; color: var(--text-dim); background: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; }
.pos-count b { color: var(--text); }
.sign-pct { font-family: var(--font-display); font-size: 22px; width: 62px; text-align: center; }
.pct-hi { color: var(--green); } .pct-mid { color: var(--gold); } .pct-lo { color: var(--red); }
.fa-offered { opacity: .45; pointer-events: none; }

/* team viewer modal */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 80; background: rgba(5,6,8,.78);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  backdrop-filter: blur(4px);
}
.modal-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  max-width: 620px; width: 100%; max-height: 84vh; overflow-y: auto; padding: 22px 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
/* trade / finder modals hold a two-team grid — give them room so both columns fit (no swiping) */
.modal-card:has(.trade-grid) { max-width: 1040px; }
.modal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.modal-head h3 { font-family: var(--font-display); font-size: 26px; margin: 0; }
.modal-close { margin-left: auto; }
.mini-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 4px;
  border-bottom: 1px solid var(--line); font-size: 13px;
}
.mini-row-click { cursor: pointer; border-radius: 6px; transition: background .12s; }
.mini-row-click:hover { background: rgba(255,255,255,.05); }
/* player-card draft line + accolade chips */
.draft-line { font-size: 12.5px; color: var(--text-dim); margin-top: 10px; }
.draft-line.muted { color: var(--text-faint); }
.draft-line .dl-note { color: var(--text-faint); font-style: italic; }
.acc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.acc-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.06);
  border: 1px solid var(--line); color: var(--text);
}
.acc-chip .acc-yrs { color: var(--text-faint); font-weight: 600; font-size: 10.5px; }
.acc-chip.acc-champ { background: rgba(255,199,44,.14); border-color: rgba(255,199,44,.5); color: var(--gold); }
.acc-chip.acc-mvp   { background: rgba(255,107,44,.14); border-color: rgba(255,107,44,.5); color: var(--orange); }
.acc-chip.acc-fmvp  { background: rgba(255,199,44,.10); border-color: rgba(255,199,44,.35); }
/* gold treatment for awards/records the franchise owns */
.award-mine, .award-mine b, .news-mine, .news-mine b { color: var(--gold) !important; font-weight: 800; }
/* Team Records rows */
.record-row {
  display: flex; align-items: baseline; gap: 10px; padding: 9px 4px;
  border-bottom: 1px solid var(--line); font-size: 13px;
}
.record-row:last-child { border-bottom: none; }
.record-row .rr-label { flex: 1; font-weight: 700; color: var(--text-dim); }
.record-row .rr-val { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 74px; text-align: right; }
.record-row .rr-holder { min-width: 168px; text-align: right; color: var(--text-faint); font-size: 12px; }
.record-mine .rr-label, .record-mine .rr-val, .record-mine .rr-holder { color: var(--gold); }
/* history-book record pop-up */
.record-pop { text-align: center; padding: 14px 0; }
.record-pop-ico { display: flex; justify-content: center; margin-bottom: 6px; }
.record-pop-title { font-family: var(--font-display); font-size: 26px; letter-spacing: .02em; color: var(--gold); }
.record-pop-detail { color: var(--text-dim); font-weight: 600; margin-top: 4px; }
.mini-row:last-child { border-bottom: none; }
.mini-row .mp { width: 34px; text-align: center; font-weight: 800; }
.mini-row .mn { flex: 1; font-weight: 600; }
.mini-row .ms { color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* finder unlock card */
.finder-unlock {
  display: flex; align-items: center; gap: 16px; margin-top: 18px;
  background: var(--ink-2); border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 16px 18px;
}
.finder-unlock.owned { border-style: solid; border-color: rgba(255,201,77,.4); }
.finder-unlock .fu-icon { font-size: 28px; }
.finder-unlock .fu-body { flex: 1; font-size: 13px; color: var(--text-dim); }
.finder-unlock .fu-body b { color: var(--text); }

/* career-creation mode chooser: two side-by-side boxes, casual grey / hardcore red */
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.mode-box {
  background: var(--ink-2); border: 1.5px solid; border-radius: var(--radius-sm);
  padding: 20px 16px; text-align: center; cursor: pointer; font: inherit;
}
.mode-box .mode-name { font-family: var(--font-display, inherit); font-weight: 800; font-size: 18px; letter-spacing: .12em; }
.mode-box .mode-desc { margin-top: 8px; font-size: 12.5px; line-height: 1.45; opacity: .85; }
.mode-casual { border-color: var(--text-dim); color: var(--text-dim); }
.mode-casual:hover { background: rgba(154,160,174,.08); }
.mode-hardcore { border-color: var(--red); color: var(--red); }
.mode-hardcore:hover { background: rgba(255,93,93,.08); }
@media (max-width: 480px) { .mode-grid { grid-template-columns: 1fr; } }
.modal-backdrop[hidden] { display: none; }

/* ═══════════ v5: rarity tiers, lineup, calendar, web ═══════════ */
.ovr-bronze { background: rgba(201,136,80,.16); color: #c98850; }
.ovr-silver { background: rgba(201,206,214,.14); color: #c9ced6; }
.ovr-gold { background: rgba(244,200,75,.15); color: #f4c84b; }
.ovr-platinum { background: rgba(232,244,250,.14); color: #e8f4fa; }
.ovr-diamond { background: rgba(111,215,255,.14); color: #6fd7ff; }
.ovr-pinkdiamond { background: rgba(255,111,216,.15); color: #ff6fd8; box-shadow: 0 0 12px rgba(255,111,216,.25); }

/* lineup rows: tight grid */
.lineup-row {
  display: grid;
  grid-template-columns: 22px 42px minmax(0,1fr) 54px 58px 110px;
  gap: 10px; align-items: center;
  padding: 8px 6px; border-bottom: 1px solid var(--line); border-radius: 8px;
}
.lineup-row:last-child { border-bottom: none; }
.lineup-row.lineup-head { padding: 2px 6px 8px; }
.lineup-row.lineup-head span { font-size: 9.5px; font-weight: 800; letter-spacing: .14em; color: var(--text-faint); text-align: center; }
.lineup-row[draggable] { cursor: grab; }
.lineup-row.dragging { opacity: .35; }
.drag-grip { color: var(--text-faint); font-size: 13px; text-align: center; }
.lp-name { min-width: 0; }
.lp-name .p-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-min { text-align: center; }
.ext-btn { padding: 3px 9px; font-size: 10px; margin-left: 6px; }
.lineup-group-label {
  font-size: 10px; font-weight: 800; letter-spacing: .2em; color: var(--gold);
  padding: 12px 4px 6px; border-bottom: 1px solid var(--line);
}
.lineup-group-label span { color: var(--text-faint); letter-spacing: .05em; font-weight: 600; text-transform: none; }
.lineup-zone { min-height: 40px; border-radius: 10px; transition: background .15s, outline .15s; }
.lineup-zone.drop-ok { background: rgba(255,107,44,.06); outline: 1.5px dashed var(--orange); }
.lineup-row.is-starter .pos-chip { border-color: rgba(255,201,77,.5); color: var(--gold); }
.drop-hint { text-align: center; }

/* schedule toggle + calendar */
.sched-toggle { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; }
.sched-toggle .btn { padding: 7px 18px; font-size: 12px; }
.sched-click { cursor: pointer; }
.sched-row.sched-click:hover { background: rgba(255,255,255,.03); }
.cal-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 12px; }
.cal-nav .btn { padding: 6px 14px; }
.cal-month { font-family: var(--font-display); font-size: 24px; letter-spacing: .06em; min-width: 130px; text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-dow { text-align: center; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; color: var(--text-faint); padding-bottom: 4px; }
.cal-cell {
  min-height: 64px; border: 1px solid var(--line); border-radius: 8px; padding: 4px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: var(--ink-2); position: relative;
}
.cal-cell.cal-empty { border: none; background: transparent; }
.cal-date { position: absolute; top: 3px; left: 6px; font-size: 9px; font-weight: 700; color: var(--text-faint); }
.cal-game { cursor: pointer; padding-top: 12px; transition: border-color .12s, transform .12s; }
.cal-game:hover { border-color: var(--orange); transform: translateY(-1px); }
.cal-vs { font-size: 9.5px; font-weight: 800; color: var(--text-dim); }
.cal-res { font-size: 9.5px; font-weight: 800; color: var(--text-faint); }
.cal-w { border-color: rgba(61,220,132,.45); } .cal-w .cal-res { color: var(--green); }
.cal-l { border-color: rgba(255,93,93,.4); } .cal-l .cal-res { color: var(--red); }
.cal-cell.next-game { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.cal-cell.next-game .cal-res { color: var(--orange); }

/* skill web v2 */
.skill-node circle.bg { fill: var(--card-2); stroke: var(--line); stroke-width: 1.5; }
.skill-node.owned circle.bg { fill: var(--orange); stroke: var(--orange-hot); }
.skill-node.owned text { fill-opacity: 1; }
.skill-node.buyable circle.bg { stroke: var(--gold); stroke-width: 2.5; }
.skill-node.buyable { animation: pulseNode 1.8s ease-in-out infinite; }
.skill-node.next circle.bg { stroke: #3a4152; }
.skill-node.locked { opacity: .38; }
@keyframes pulseNode { 0%,100% { opacity: 1; } 50% { opacity: .65; } }
.fu-icon { flex-shrink: 0; }

/* ═══════════ v6: slots, injuries, gates ═══════════ */
.ovr-platinum { background: rgba(255,147,48,.15); color: #ff9330; }
.lineup-row {
  grid-template-columns: 22px 42px minmax(0,1fr) 54px 46px 58px 116px;
}
.risk-cell { text-align: center; font-weight: 800; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.inj-tag {
  display: inline-block; font-size: 9px; font-weight: 800; color: var(--red);
  border: 1px solid rgba(255,93,93,.4); border-radius: 4px; padding: 0 5px; margin-left: 6px; vertical-align: 1px;
}
.lineup-row.is-injured { opacity: .55; }
.slot-empty { border: 1.5px dashed rgba(255,93,93,.5); border-radius: 10px; margin: 3px 0; background: rgba(255,93,93,.04); }
.lineup-row.drop-ok { outline: 1.5px dashed var(--orange); background: rgba(255,107,44,.07); border-radius: 10px; }
.gate-warn {
  background: rgba(255,93,93,.08); border: 1px solid rgba(255,93,93,.35); color: var(--red);
  font-weight: 700; font-size: 13px; border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 12px; text-align: center;
}
.pf-note {
  background: rgba(255,201,77,.08); border: 1px solid rgba(255,201,77,.35); color: var(--gold);
  font-weight: 700; font-size: 12.5px; border-radius: var(--radius-sm); padding: 8px 14px; margin-bottom: 12px; text-align: center;
}
.assist-banner {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  background: rgba(255,107,44,.08); border: 1px solid rgba(255,107,44,.4); color: var(--orange);
  font-weight: 700; font-size: 13px; border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 12px; text-align: center;
}
.assist-banner .btn { padding: 6px 14px; font-size: 12px; }
.assist-banner-calm { background: rgba(154,160,174,.06); border-color: var(--line); color: var(--text-dim); }
.assist-section { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); margin: 14px 0 6px; }
.assist-row { display: flex; align-items: center; gap: 10px; }
.assist-row .mn { flex: 1; }
.assist-ico { font-size: 20px; width: 30px; text-align: center; }
.assist-tag { font-size: 9.5px; font-weight: 800; letter-spacing: .3px; padding: 1px 6px; border-radius: 5px; vertical-align: middle; }
.assist-tag.ok { background: rgba(90, 200, 130, .16); color: var(--green); }
.assist-tag.warn { background: rgba(230, 160, 60, .16); color: var(--gold); }
.skill-node:hover circle.bg { stroke: var(--orange); stroke-width: 2.5; }

.gm-name-input.err { border-color: var(--red); box-shadow: 0 0 0 3px rgba(255,93,93,.25); }

/* v7: fixed lineup spots + contract modal */
.pf-note.pf-progress { color: var(--text-dim); border-color: var(--line); background: var(--ink-2); }
.pf-note.pf-progress b { color: var(--gold); }
.pos-chip.chip-match { border-color: rgba(255,201,77,.55); color: var(--gold); }
.pos-chip.chip-off { border-color: rgba(255,93,93,.5); color: var(--red); }
.row-click { cursor: pointer; }
.row-click:hover .p-name { color: var(--orange-hot); }
.lineup-row { grid-template-columns: 22px 42px minmax(0,1fr) 54px 54px 56px 112px; }
.fit-chip.fit-gold { color: var(--gold); background: rgba(255,201,77,.12); }
.fit-chip.fit-heat { color: var(--orange); background: rgba(255,107,44,.12); }

/* bronze rookie badge */
.rk-tag {
  background: linear-gradient(150deg, #e0a468, #c98850 45%, #8a5a2a);
  border: none; color: #2a1708; font-weight: 900;
  border-radius: 999px; padding: 1px 6px; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* ═══════════════════ MOBILE POLISH (phones) ═══════════════════ */
@media (max-width: 640px) {
  /* reclaim horizontal room */
  #screen-dash { padding: 24px 12px 130px; }
  .card { padding: 15px 13px; }
  .modal-backdrop { padding: 10px; }

  /* header a touch tighter */
  .dash-teamname { font-size: 30px; }
  .dash-stats { gap: 10px 18px; }

  /* bigger tap targets */
  .tab { padding: 10px 16px; }
  .ext-btn { padding: 7px 11px; font-size: 11.5px; margin-left: 0; }
  .min-input { width: 34px; padding: 8px 2px; font-size: 13px; }
  .starter-toggle { width: 32px; height: 32px; }
  .pick-chip { padding: 8px 12px; font-size: 12.5px; }
  .see-roster { padding: 8px 14px; font-size: 12px; }
  .drag-grip { font-size: 18px; padding: 6px 2px; }

  /* small-label legibility */
  .stat-lab { font-size: 11px; }

  /* stop long text from widening rows */
  .trade-player .tm { white-space: normal; }
  .finder-delta { white-space: normal; }
  .job-offer .jo-take, .job-offer .jo-view { white-space: normal; }
  .trade-player .tn, .sched-row .sopp { min-width: 0; overflow: hidden; }
}

@media (max-width: 480px) {
  /* lineup rows: reflow to 2 lines so the player name is never clipped */
  .lineup-row {
    grid-template-columns: 22px 40px minmax(0,1fr) 46px;
    grid-auto-rows: auto; row-gap: 4px; column-gap: 8px; padding: 9px 6px;
  }
  .lineup-row > .drag-grip { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .lineup-row > .pos-chip  { grid-column: 2; grid-row: 1; }
  .lineup-row > .lp-name   { grid-column: 3; grid-row: 1; }
  .lineup-row > .ovr-badge { grid-column: 4; grid-row: 1; justify-self: end; }
  .lineup-row > .risk-cell { display: none; }               /* declutter on small phones */
  .lineup-row > .lp-min    { grid-column: 2; grid-row: 2; justify-self: start; }
  .lineup-row > .sal-cell  { grid-column: 3 / 5; grid-row: 2; justify-self: end; text-align: right; }
  .lineup-row.lineup-head { display: none; }
  .lineup-row .p-meta { white-space: normal; }

  /* box-score modal fits the narrow modal */
  .box-row { grid-template-columns: minmax(0,1fr) repeat(6, 30px); gap: 2px; font-size: 11.5px; }
  .box-head { font-size: 9px; letter-spacing: .04em; }

  /* calendar a bit less cramped */
  .cal-cell { min-height: 52px; padding: 3px; }
  .cal-vs, .cal-res { font-size: 10px; }
}

/* draft-day trade + cuts */
.draft-roster .mini-row { align-items: center; }
.draft-cut { flex: 0 0 auto; }
.dt-prot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
.dt-prot:last-child { border-bottom: none; }
.dt-prot .trade-select { width: auto; padding: 6px 10px; font-size: 12.5px; }

/* ═══════════ THE STORE ═══════════ */
.store-btn {
  position: fixed; top: calc(16px + var(--safe-t)); right: calc(72px + var(--safe-r)); z-index: 60;
  height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--card-2); border: 1.5px solid var(--orange); color: var(--orange);
  font-family: var(--font-display); font-size: 16px; letter-spacing: .08em; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.store-btn:hover { transform: translateY(-2px); box-shadow: 0 0 24px rgba(255,107,44,.35); }
.store-wrap { max-width: 980px; margin: 0 auto; padding: var(--chrome-top) 20px 60px; }
.store-title { font-family: var(--font-display); font-size: clamp(40px, 8vw, 64px); text-align: center; line-height: 1; }
.store-sub { text-align: center; color: var(--text-dim); margin: 6px 0 26px; }
.pack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; justify-items: center; }
.pack-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  perspective: 900px; max-width: 220px;
}
/* ── sealed FUT-style foil pack ── */
.foil-pack {
  position: relative; overflow: hidden; width: 188px; aspect-ratio: 5 / 7;
  border-radius: 14px; cursor: pointer;
  --thick: 3px 4px 0 rgba(0,0,0,.4), 6px 8px 0 rgba(0,0,0,.3), 9px 12px 0 rgba(0,0,0,.22);   /* stacked-card thickness */
  /* thickness (down-right stacked edges) + puffed volume (light top-centre, dark edges) */
  box-shadow: var(--thick), 0 18px 34px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 0 24px 36px rgba(255,255,255,.18),
    inset -26px 0 42px rgba(0,0,0,.45), inset 26px 0 42px rgba(0,0,0,.45),
    inset 0 -32px 42px rgba(0,0,0,.45);
  transition: transform .2s ease;
  transform-style: preserve-3d;
  will-change: transform;   /* own GPU layer: hover/rip transforms composite instead of repaint */
}
/* base foil colour + a soft central gloss so light rolls off a curved bag; per-tier thick edge */
.foil-pack.bronze   { --thick: 3px 4px 0 #2a1a0d, 6px 8px 0 #22150a, 9px 12px 0 #150c06; background: radial-gradient(130% 80% at 42% 30%, rgba(255,231,200,.55), transparent 55%), linear-gradient(120deg, #3c2614 0%, #b3743c 40%, #7a4e28 60%, #3c2614 100%); }
.foil-pack.gold     { --thick: 3px 4px 0 #2e2408, 6px 8px 0 #241b06, 9px 12px 0 #171104; background: radial-gradient(130% 80% at 42% 30%, rgba(255,248,214,.6), transparent 55%),  linear-gradient(120deg, #4c3a0c 0%, #dcb03a 40%, #8a6a1e 60%, #4c3a0c 100%); }
.foil-pack.diamondp { --thick: 3px 4px 0 #08213d, 6px 8px 0 #06182e, 9px 12px 0 #030f1c; background: radial-gradient(130% 80% at 42% 30%, rgba(220,244,255,.6), transparent 55%),  linear-gradient(120deg, #0c2f57 0%, #4aa8ee 38%, #1f6fb0 60%, #0c2f57 100%); }
/* crinkled-foil texture (two faint diagonal layers at different angles) */
.foil-pack::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: .5;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(60deg, rgba(0,0,0,.05) 0 1px, transparent 1px 9px);
}
/* serrated crimp seals — the "sealed pack" cue; zig-zag inner edge via a conic mask */
.foil-pack .foil-seal {
  position: absolute; left: 0; right: 0; height: 20px; z-index: 4; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.5) 0 3px, rgba(255,255,255,.18) 3px 6px);
  box-shadow: inset 0 0 6px rgba(0,0,0,.5);
}
.foil-pack .foil-seal.top { top: 0; -webkit-mask: conic-gradient(from -45deg at bottom, #0000 90deg, #000 0) 0 100% / 11px 11px repeat-x, linear-gradient(#000 0 0) top / 100% 9px no-repeat; mask: conic-gradient(from -45deg at bottom, #0000 90deg, #000 0) 0 100% / 11px 11px repeat-x, linear-gradient(#000 0 0) top / 100% 9px no-repeat; }
.foil-pack .foil-seal.bot { bottom: 0; -webkit-mask: conic-gradient(from 135deg at top, #0000 90deg, #000 0) 0 0 / 11px 11px repeat-x, linear-gradient(#000 0 0) bottom / 100% 9px no-repeat; mask: conic-gradient(from 135deg at top, #0000 90deg, #000 0) 0 0 / 11px 11px repeat-x, linear-gradient(#000 0 0) bottom / 100% 9px no-repeat; }
.foil-pack .foil-flash {
  position: absolute; top: 0; left: -10%; right: -10%; height: 30px; z-index: 6; opacity: 0; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%);
}
.foil-pack .foil-sheen {
  position: absolute; top: 0; bottom: 0; left: 0; width: 60px; pointer-events: none; z-index: 3;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.24), transparent);
  animation: shineSweep 3.6s ease-in-out .4s infinite; will-change: transform;
}
.foil-pack .foil-bolt {
  position: absolute; inset: 14% 22%; z-index: 1; pointer-events: none; opacity: .9;
  clip-path: polygon(58% 4%, 32% 52%, 49% 52%, 36% 96%, 74% 44%, 55% 44%, 70% 4%);
  background: linear-gradient(135deg, rgba(255,255,255,.3), rgba(255,255,255,.04));
}
@keyframes shineSweep { 0% { transform: translateX(-80px); } 45%, 100% { transform: translateX(320px); } }
.foil-pack .foil-brand {
  position: absolute; top: 28px; left: 0; right: 0; z-index: 2; pointer-events: none;
  font-family: var(--font-display); font-size: 11px; letter-spacing: .18em; text-align: center;
  color: rgba(20,16,10,.62); text-shadow: 0 1px 0 rgba(255,255,255,.18);
}
.foil-pack .foil-tier {
  position: absolute; bottom: 28px; left: 0; right: 0; z-index: 5; pointer-events: none;
  font-family: var(--font-display); font-size: 17px; letter-spacing: .14em; text-align: center;
  color: rgba(20,16,10,.85); text-shadow: 0 1px 0 rgba(255,255,255,.22);
}
.pack-card:hover .foil-pack { transform: rotateY(-8deg) rotateX(4deg) translateY(-5px); }
.pack-card:hover .foil-pack.bronze   { box-shadow: var(--thick), 0 22px 40px rgba(0,0,0,.55), 0 0 44px rgba(205,127,50,.4), inset 0 0 0 1px rgba(255,255,255,.18); }
.pack-card:hover .foil-pack.gold     { box-shadow: var(--thick), 0 22px 40px rgba(0,0,0,.55), 0 0 44px rgba(255,201,77,.45), inset 0 0 0 1px rgba(255,255,255,.18); }
.pack-card:hover .foil-pack.diamondp { box-shadow: var(--thick), 0 22px 40px rgba(0,0,0,.55), 0 0 44px rgba(90,170,255,.5), inset 0 0 0 1px rgba(255,255,255,.18); }
.pack-name { font-family: var(--font-display); font-size: 24px; letter-spacing: .06em; margin-top: 4px; }
.pack-desc { color: var(--text-dim); font-size: 12.5px; min-height: 52px; }

/* pack-opening stage */
.pack-stage {
  position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 26px; padding: 20px;
  background: rgba(6,7,12,.94); animation: screenIn .3s ease both;
}
.foil-pack.foil-lg { width: 250px; animation: gemPop .5s cubic-bezier(.2,.9,.3,1.4) both; }
.foil-pack.foil-lg:hover { transform: scale(1.04); }
/* rip from the top: the top seal tears off, a light bursts from the opening, the bag settles open */
.foil-pack.ripping { pointer-events: none; animation: packOpen .55s ease .18s forwards; }
.foil-pack.ripping .foil-seal.top { transform-origin: top; will-change: transform; animation: sealTear .45s cubic-bezier(.4,0,.7,.2) forwards; }
.foil-pack.ripping .foil-flash { animation: ripFlash .5s ease forwards; }
@keyframes sealTear {
  0% { transform: rotateX(0) translateY(0); opacity: 1; }
  100% { transform: rotateX(-115deg) translateY(-46px); opacity: 0; }
}
@keyframes ripFlash {
  0% { opacity: 0; transform: scaleX(.4); }
  35% { opacity: 1; transform: scaleX(1.2); }
  100% { opacity: 0; transform: scaleX(1.5); }
}
@keyframes packOpen {   /* the emptied bag sinks + fades as the cards take over */
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(34px) scale(.96); opacity: 0; }
}
@keyframes cardOut {   /* face-down card rises up out of the pack's torn top */
  0% { transform: translateY(165px) scale(.55); opacity: 0; }
  55% { opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.pull-row { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; perspective: 1100px; }
.pull-card {
  width: 168px; height: 240px; border-radius: 14px; cursor: pointer; position: relative;
  transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3,.8,.3,1);
  animation: cardOut .5s cubic-bezier(.2,.9,.3,1.2) backwards;   /* rise out of the pack; backwards so the flip transform isn't fought */
  will-change: transform;
}
.pull-card.flipped { transform: rotateY(180deg); cursor: default; animation: none; }
.pull-face {
  position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 1.5px solid var(--line);
}
.pull-back {
  background: radial-gradient(120% 100% at 50% 0%, #1d2030, #0b0d14 75%);
  font-size: 54px; color: var(--text-faint);
}
.pull-back::after { content: '🃏'; font-size: 54px; filter: grayscale(.4); }
.pull-front { transform: rotateY(180deg); }
.pull-front .amt { font-family: var(--font-display); font-size: 52px; line-height: 1; }
.pull-front .tname { font-family: var(--font-display); font-size: 16px; letter-spacing: .1em; text-transform: uppercase; }
.pull-front .dur { font-size: 11.5px; color: var(--text-dim); font-weight: 700; }
.pull-front .gem-shine, .inv-card .gem-shine { position: absolute; top: 0; bottom: 0; left: 0; width: 60px; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.16), transparent);
  animation: shineSweep 2.8s ease-in-out .2s infinite; will-change: transform; }
.t-bronze { background: radial-gradient(120% 100% at 50% 0%, rgba(205,127,50,.4), #17120c 75%); border-color: #cd7f32; }
.t-silver { background: radial-gradient(120% 100% at 50% 0%, rgba(200,206,220,.35), #14161c 75%); border-color: #c8ced4; }
.t-gold { background: radial-gradient(120% 100% at 50% 0%, rgba(255,201,77,.4), #171204 75%); border-color: var(--gold); }
.t-diamond { background: radial-gradient(120% 100% at 50% 0%, rgba(120,200,255,.4), #0b141c 75%); border-color: #78c8ff; }
.t-pink { background: radial-gradient(120% 100% at 50% 0%, rgba(255,120,200,.45), #1a0b14 75%); border-color: #ff78c8;
  box-shadow: 0 0 44px rgba(255,120,200,.55); }
.t-heal { background: radial-gradient(120% 100% at 50% 0%, rgba(66,214,134,.38), #0a150e 75%); border-color: var(--green); }
.pull-card.flipped .pull-front.t-pink { animation: pinkPulse 1.6s ease-in-out infinite; }
@keyframes pinkPulse { 0%,100% { box-shadow: 0 0 30px rgba(255,120,200,.45); } 50% { box-shadow: 0 0 70px rgba(255,120,200,.85); } }
.pack-stage .stage-hint { color: var(--text-dim); font-weight: 700; font-size: 13px; letter-spacing: .06em; }

/* inventory */
.inv-grid { display: flex; gap: 12px; flex-wrap: wrap; }
.inv-card {
  position: relative; width: 118px; height: 164px; border-radius: 12px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 1.5px solid var(--line); transition: transform .15s, box-shadow .15s; overflow: hidden;
}
.inv-card:hover { transform: translateY(-3px); }
.inv-card .amt { font-family: var(--font-display); font-size: 38px; line-height: 1; }
.inv-card .tname { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.inv-card .dur { font-size: 9.5px; color: var(--text-dim); font-weight: 700; }
.inv-card.t-pink { animation: pinkPulse 1.6s ease-in-out infinite; }
/* tier borders: .inv-card's own border shorthand is declared later than the .t-* rules,
   so the tier colors need re-scoping to win here (they already win on pack pulls) */
.inv-card.t-bronze { border-color: #cd7f32; }
.inv-card.t-silver { border-color: #c8ced4; }
.inv-card.t-gold { border-color: var(--gold); }
.inv-card.t-diamond { border-color: #78c8ff; }
.inv-card.t-pink { border-color: #ff78c8; }
.inv-card.t-heal { border-color: var(--green); }
.inv-count {
  position: absolute; top: 5px; right: 6px; background: var(--card-2); border: 1px solid var(--line);
  border-radius: 999px; font-size: 10.5px; font-weight: 800; padding: 1px 7px;
}
.apply-btn { padding: 4px 14px; font-size: 11.5px; flex: 0 0 auto; }
.inv-bigcard { margin: 0 auto 14px; width: 190px; height: 266px; border-radius: 16px; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; overflow: hidden;
  border: 1.5px solid var(--line); }
.inv-bigcard .amt { font-family: var(--font-display); font-size: 58px; line-height: 1; }
.inv-bigcard .tname { font-family: var(--font-display); font-size: 17px; letter-spacing: .1em; text-transform: uppercase; }
.inv-bigcard .dur { font-size: 12px; color: var(--text-dim); font-weight: 700; }

/* ── global leaderboard ── */
.board-btn {
  position: fixed; top: calc(16px + var(--safe-t)); left: calc(16px + var(--safe-l)); z-index: 60;   /* mirrors the ⌂ home orb on the right */
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--card-2); border: 1.5px solid var(--gold); color: var(--gold);
  font-size: 19px; cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.board-btn:hover { transform: translateY(-2px); box-shadow: 0 0 24px rgba(244,200,75,.35); }
.board-card { max-width: 620px; margin: 0 auto 18px; }
.board-row .mn small { display: block; font-size: 11px; color: var(--text-dim); font-weight: 500; }
.board-av { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
.board-av svg { border-radius: 50%; background: var(--card-2); }
.board-mine .mn b, .board-mine .ms { color: var(--gold); }
.board-form { display: flex; flex-direction: column; gap: 10px; padding: 10px 4px 4px; }
.board-form .trade-select { width: 100%; }
.board-form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.board-form-err { color: #ff7a6b; font-size: 13px; font-weight: 600; }
.board-signed .news-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-bottom: none; }

/* ── real-money SP store ── */
.sp-sect { margin-top: 40px; }
.sp-sect-title { font-family: var(--font-display); font-size: 24px; letter-spacing: .06em; text-align: center; margin: 0; }
.sp-sect-sub { text-align: center; color: var(--text-dim); font-size: 13.5px; margin: 6px 0 20px; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; max-width: 860px; margin: 0 auto; }
.sp-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 22px 14px 16px; border-radius: var(--radius);
  background: linear-gradient(170deg, rgba(255,201,77,.10), rgba(255,201,77,.02));
  border: 1px solid rgba(255,201,77,.35);
}
.sp-card.sp-best { border-color: var(--gold); box-shadow: 0 0 24px rgba(255,201,77,.18); }
.sp-ribbon {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: #221a04; font-size: 11px; font-weight: 800;
  letter-spacing: .06em; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.sp-gem { font-size: 40px; line-height: 1; color: var(--gold); text-shadow: 0 0 24px rgba(255,201,77,.45); }
.sp-amt { font-family: var(--font-display); font-size: 22px; letter-spacing: .04em; }
.sp-soon { max-width: 620px; margin: 0 auto; }
.sp-soon .news-item { border-bottom: none; }
.sp-wallet-strip { max-width: 720px; margin: 0 auto 20px; }
.sp-wallet-strip .news-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-bottom: none; }
.sp-pill, .dgn-sp { cursor: pointer; }
.sp-pill:hover, .dgn-sp:hover { filter: brightness(1.25); }
.btn-cant { opacity: .55; }
.scout-all-btn { margin-left: 10px; padding: 5px 14px; font-size: 12.5px; vertical-align: middle; }
/* in-flow flex child of .pack-stage: centered by align-items, only exists once cards are out.
   double selectors: the Aurora theme's `.btn { position: relative }` loads later at equal
   specificity, so these must outrank it */
.pack-stage .stage-open-all { margin-top: -8px; }
.pack-stage .stage-back { position: absolute; top: 18px; left: 18px; }
.store-wrap .store-back-btn { position: fixed; top: calc(16px + var(--safe-t)); left: calc(16px + var(--safe-l)); z-index: 60; }

/* ── Front Office Review: season SP payout ── */
.sp-review {
  max-width: 620px; margin: 0 auto 18px; text-align: center;
  background: linear-gradient(170deg, rgba(255,201,77,.10), rgba(255,201,77,.02));
  border-color: rgba(255,201,77,.4);
}
.sp-review-total {
  font-family: var(--font-display); font-size: clamp(38px, 7vw, 56px); line-height: 1.1;
  color: var(--gold); text-shadow: 0 0 30px rgba(255,201,77,.4); margin: 6px 0 10px;
}
.spr-rows { max-width: 340px; margin: 0 auto; }
.spr-row {
  display: flex; justify-content: space-between; gap: 12px; padding: 5px 4px;
  border-bottom: 1px solid rgba(255,255,255,.06); font-size: 13.5px;
}
.spr-row b { color: var(--gold); }
.spr-row.spr-miss, .spr-row.spr-miss b { color: var(--text-faint); font-weight: 500; }
.spr-foot { margin-top: 12px; font-size: 12.5px; color: var(--text-dim); }

/* ── Hall of Fame ── */
.hof-row { cursor: pointer; border-left: 2px solid transparent; padding-left: 8px; transition: border-color .15s, background .15s; display: flex; align-items: center; gap: 8px; }
.hof-row:hover { border-left-color: var(--gold); background: rgba(255,201,77,.05); }
.hof-row .ovr-badge { flex: 0 0 auto; }
.hof-banner {
  text-align: center; font-family: var(--font-display); font-size: 14px; letter-spacing: .14em;
  color: var(--gold); background: rgba(255,201,77,.08); border: 1px solid rgba(255,201,77,.3);
  border-radius: 8px; padding: 7px 10px; margin: 4px 0 10px;
}
.mini-row.row-blocked { opacity: .5; }
.modal-actions { margin-top: 14px; }
/* boost picker rows: full-size buttons + type, matching the player card's action row */
.mini-row.boost-pick { font-size: 14px; padding: 10px 4px; gap: 14px; }
.mini-row.boost-pick .mn { font-weight: 700; }
.mini-row.boost-pick .bp-meta { color: var(--text-faint); font-size: 12px; font-weight: 500; }

/* accolade chips: the rest of the award types, so the plaque isn't a wall of grey */
.acc-chip.acc-dpoy { background: rgba(63,127,214,.16); border-color: rgba(63,127,214,.5); color: #8ab9f2; }
.acc-chip.acc-roy { background: rgba(61,220,132,.13); border-color: rgba(61,220,132,.45); color: var(--green); }
.acc-chip.acc-all { background: rgba(167,109,255,.15); border-color: rgba(167,109,255,.5); color: #c3a0ff; }
.acc-chip.acc-scoring { background: rgba(224,75,75,.14); border-color: rgba(224,75,75,.5); color: #ff8f8f; }
/* Hall of Fame plaque: one row per award, every year spelled out */
.hof-acc { display: flex; flex-direction: column; gap: 7px; margin-top: 6px; }
.hof-acc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hof-acc-row .acc-chip { flex: 0 0 auto; }
.hof-acc-yrs { font-size: 11.5px; color: var(--text-dim); font-weight: 600; letter-spacing: .04em; }
.hof-away {
  font-size: 9.5px; font-weight: 800; letter-spacing: .06em; color: var(--text-faint);
  border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; margin-left: 4px; white-space: nowrap;
}

/* ═════════ PRO (freemium) ═════════ */
.btn-pro { border-color: rgba(244,200,75,.5); color: var(--gold); }
.btn-pro:hover { border-color: var(--gold); }

/* PRO pill: fixed top-left beside the 🏆 orb, mirroring STORE + ⌂ on the right */
.free-pill {
  position: fixed; top: calc(16px + var(--safe-t)); left: calc(72px + var(--safe-l)); z-index: 60;
  height: 44px; padding: 0 16px; border-radius: 999px;
  background: var(--card-2); border: 1.5px solid rgba(244,200,75,.55); color: var(--gold);
  font-family: var(--font-display); font-size: 15px; letter-spacing: .08em; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.free-pill:hover { transform: translateY(-2px); box-shadow: 0 0 24px rgba(244,200,75,.3); }

/* locked team cards: heavily greyed, gold lock badge in the corner */
.team-card.locked { opacity: .42; filter: grayscale(.65); position: relative; }
.team-card.locked:hover { opacity: .68; filter: grayscale(.3); }
.team-card.locked .team-card-tier { background: rgba(244,200,75,.12); color: var(--gold); border-color: rgba(244,200,75,.35); }
.team-lock {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1.5px solid rgba(244,200,75,.6);
  background: rgba(12,13,20,.85); color: var(--gold); font-size: 14px; z-index: 2;
}

/* locked era styling: the whole top of the screen greys out; the gold outline stays crisp
   (content is dimmed instead of the card, so the border doesn't wash out with it) */
.era-card.era-locked { border: 1.5px solid rgba(244,200,75,.6); }
.era-card.era-locked .era-name, .era-card.era-locked .era-tag,
.era-card.era-locked .era-blurb, .era-card.era-locked .fact-pill {
  color: var(--text-faint); opacity: .5; filter: grayscale(.5);
}
.era-top-locked { color: var(--text-faint) !important; opacity: .5; }
.era-card.era-locked .fact-pill.pill-pro { color: var(--gold); border-color: rgba(244,200,75,.5); opacity: 1; filter: none; }

/* locked save slots */
.slot-card.slot-locked { cursor: pointer; }
.slot-card.slot-locked:hover { border-color: var(--gold); color: var(--gold); }
.slot-pro-tag { color: var(--gold); font-weight: 700; letter-spacing: .06em; }

/* the season-2 takeover */
.pro-stage {
  position: fixed; inset: 0; z-index: 300; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(6,7,12,.96); backdrop-filter: blur(8px);
  animation: screenIn .3s ease both; overflow-y: auto;
}
/* solid panel on purpose: the aurora theme's glass cards would let the game bleed through the paywall */
.pro-stage .pro-panel {
  max-width: 560px; width: 100%; text-align: center;
  background: #12141c; border: 1px solid rgba(244,200,75,.35); border-radius: 20px;
  padding: 34px 30px 24px; box-shadow: 0 0 60px rgba(244,200,75,.12); margin: auto;
}
.pro-kicker { font-size: 12px; font-weight: 800; letter-spacing: .22em; color: var(--text-dim); }
.pro-story { font-family: var(--font-display); font-size: 24px; margin-top: 10px; line-height: 1.25; }
.pro-tease { color: var(--text-dim); margin-top: 10px; font-size: 14.5px; line-height: 1.5; }
.pro-name { font-family: var(--font-display); font-size: 30px; letter-spacing: .04em; margin-top: 20px; }
.pro-name span { color: var(--gold); text-shadow: 0 0 22px rgba(244,200,75,.45); }
.pro-perks { list-style: none; padding: 0; margin: 14px auto 0; max-width: 400px; text-align: left; }
.pro-perks li { padding: 6px 0 6px 26px; position: relative; font-size: 14px; border-bottom: 1px solid var(--line); }
.pro-perks li:last-child { border-bottom: none; }
.pro-perks li::before { content: '✦'; position: absolute; left: 4px; color: var(--gold); }
.pro-cta { margin-top: 18px; width: 100%; }
.pro-fine { color: var(--text-faint); font-size: 11.5px; margin-top: 8px; letter-spacing: .04em; }
.pro-later { margin-top: 14px; opacity: .7; }

/* the soft popup: a mini takeover, not a beige list. ✕ sits top-LEFT per design. */
.pro-modal {
  position: relative; text-align: center; margin: -8px;
  background: linear-gradient(160deg, rgba(244,200,75,.12), rgba(255,107,44,.05) 55%, transparent);
  border-radius: 14px; padding: 30px 22px 20px;
}
.pro-modal .pro-name { margin-top: 12px; font-size: 34px; }
.pro-modal .pro-kicker { color: var(--gold); }
.pro-modal .pro-perks { max-width: 380px; }
.pro-modal .pro-perks li { font-size: 14.5px; font-weight: 600; border-bottom-color: rgba(244,200,75,.12); }
.pro-x {
  position: absolute; top: 10px; left: 10px; width: 32px; height: 32px;
  border-radius: 50%; border: 1px solid var(--line); background: transparent;
  color: var(--text-faint); font-size: 14px; cursor: pointer; line-height: 1;
}
.pro-x:hover { color: var(--text); border-color: var(--text-dim); }

/* store hero card */
.pro-hero {
  display: flex; gap: 24px; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, rgba(244,200,75,.10), rgba(255,107,44,.06));
  border: 1px solid rgba(244,200,75,.35); border-radius: 18px;
  padding: 22px 26px; margin: 6px 0 22px;
}
.pro-hero .pro-name { margin-top: 0; font-size: 26px; }
.pro-hero .pro-perks { margin-top: 10px; max-width: none; }
.pro-hero-right { text-align: center; flex: 0 0 auto; }
@media (max-width: 640px) {
  .pro-hero { flex-direction: column; align-items: stretch; text-align: center; }
  .pro-hero .pro-perks { text-align: left; }
  .free-pill { height: 36px; font-size: 12px; padding: 0 10px; left: calc(68px + var(--safe-l)); top: calc(20px + var(--safe-t)); }
}

/* ═════════ Tutorial (spotlight tour + first-time tips) ═════════ */
.tut-stage { position: fixed; inset: 0; z-index: 400; }
/* the cutout: one rounded rect whose giant shadow is the dark mask */
.tut-spot {
  position: fixed; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(6,7,12,.82), 0 0 0 2px rgba(255,140,70,.9), 0 0 30px rgba(255,107,44,.35);
  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
}
.tut-spot[hidden] { display: none; }
/* no spotlight (centered steps): the stage itself darkens */
.tut-stage:has(.tut-spot[hidden]) { background: rgba(6,7,12,.82); }
.tut-card {
  position: fixed; width: 340px; max-width: calc(100vw - 20px);
  background: #12141c;   /* solid on purpose: aurora glass would let the page bleed through */
  border: 1px solid rgba(255,140,70,.45); border-radius: 16px;
  padding: 18px 18px 14px; box-shadow: 0 24px 60px rgba(0,0,0,.55);
  transition: left .25s ease, top .25s ease;
}
.tut-kicker { font-size: 10px; font-weight: 800; letter-spacing: .18em; color: var(--orange); }
.tut-title { font-family: var(--font-display); font-size: 21px; margin-top: 6px; line-height: 1.15; }
.tut-text { color: var(--text-dim); font-size: 13.5px; line-height: 1.5; margin-top: 8px; }
.tut-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; }
.tut-nav .btn { padding: 8px 16px; font-size: 13px; }
.tut-x {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px;
  border-radius: 50%; border: 1px solid var(--line); background: transparent;
  color: var(--text-faint); font-size: 12px; cursor: pointer; line-height: 1;
}
.tut-x:hover { color: var(--text); border-color: var(--text-dim); }
/* GM-tab launcher card */
.tut-launch { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding: 16px 18px; }
@media (max-width: 640px) {
  .tut-card { width: 320px; }
  .tut-launch { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ═════════════════ FRANCHISE BACKUP ═════════════════ */
/* The bar sits above the save-slot grid and only appears once there is
   actually a career to lose. Loud enough to be read, quiet enough not to
   fight the slot cards for attention. */
.title-account {
  margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 8px 10px;
  font-size: 12.5px; color: var(--text-dim); text-align: center;
}
.title-account b { color: var(--text); }
.btn.btn-sm { padding: 7px 13px; font-size: 12.5px; }

.slots-notice {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 12px 14px; border-radius: 12px;
  background: rgba(255, 190, 90, .08); border: 1px solid rgba(255, 190, 90, .28);
}
.slots-notice-text { display: flex; flex-direction: column; gap: 3px; min-width: 240px; flex: 1; }
.slots-notice-text b { font-size: 14px; letter-spacing: .2px; }
.slots-notice-text span { font-size: 12.5px; color: var(--text-dim); }
.slots-notice .btn { flex: 0 0 auto; }

.form-panel { max-width: 560px; }
.form-panel h3 { margin: 0 0 6px; font-size: 15px; letter-spacing: .4px; }
.form-panel p { margin: 0 0 12px; font-size: 13px; line-height: 1.5; }

@media (max-width: 560px) {
  .slots-notice { flex-direction: column; align-items: stretch; text-align: left; }
  .slots-notice .btn { width: 100%; }
}

/* ── auth: forgot-password link ── */
/* A quiet third action under the two real buttons, so it is findable when
   needed without competing with sign up / log in. */
.board-forgot {
  align-self: flex-start;
  margin-top: 2px;
  padding-left: 0;
  padding-right: 0;
  font-size: 12.5px;
  color: var(--text-faint, #8b93a1);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: none;
}
.board-forgot:hover { color: var(--text-dim, #c9ced6); }

/* ═════════════ CELEBRATION CINEMATICS ═════════════
   A clip plays over the whole game for a purchase, a pack rip or a
   championship. The stage sits above everything (including modals) and the
   skip button above the stage, so there is always a visible way out. */
.cine-stage {
  position: fixed;
  inset: 0;
  /* iOS Safari's 100vh spans under the browser chrome; dvh tracks the toolbar
     as it collapses, so the skip button below never sits off-screen. */
  height: 100dvh;
  z-index: 9000;
  background: #05060a;
  opacity: 0;
  transition: opacity .34s ease;
  cursor: pointer;
  overflow: hidden;
}
.cine-stage.cine-in  { opacity: 1; }
.cine-stage.cine-out { opacity: 0; pointer-events: none; }

/* The celebration proper. Pure CSS, painted the instant the stage mounts, and
   never removed — the clip lays over the top of it. This is what a player sees
   while a video is still downloading, and the whole thing they see when the
   video never arrives: Reduce Motion, iOS Low Power Mode refusing autoplay, a
   dead asset, a codec the browser won't take. Before this existed, every one
   of those showed nothing at all. */
.cine-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 80% at 50% 8%, rgba(255, 201, 77, .20), transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 112%, rgba(255, 107, 44, .16), transparent 62%),
    linear-gradient(180deg, #0a0c12 0%, #05060a 55%, #0a0810 100%);
}
.cine-stage.cine-pro .cine-backdrop {
  background:
    radial-gradient(ellipse 130% 85% at 50% 0%, rgba(255, 214, 130, .30), transparent 62%),
    linear-gradient(180deg, #14100a 0%, #07060a 60%, #0c0806 100%);
}
.cine-stage.cine-finals .cine-backdrop {
  background:
    radial-gradient(ellipse 100% 70% at 50% 0%, rgba(255, 255, 255, .14), transparent 58%),
    linear-gradient(180deg, #0b0b0d 0%, #030304 100%);
}
.cine-stage.cine-bronze  .cine-backdrop { background: radial-gradient(ellipse 120% 80% at 50% 45%, rgba(205, 127, 50, .26), transparent 62%), #07060a; }
.cine-stage.cine-gold    .cine-backdrop { background: radial-gradient(ellipse 120% 80% at 50% 45%, rgba(255, 201, 77, .26), transparent 62%), #07060a; }
.cine-stage.cine-diamond .cine-backdrop { background: radial-gradient(ellipse 120% 80% at 50% 45%, rgba(170, 214, 255, .26), transparent 62%), #05070c; }

/* A slow clip should never cut in mid-shot, so the video starts transparent and
   is faded up only once it is genuinely playing. */
.cine-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* the default; .cine-contain overrides per clip */
  display: block;
  opacity: 0;
  transition: opacity .5s ease;
}
.cine-stage.cine-playing .cine-video { opacity: 1; }
/* Letterbox into the backdrop rather than throwing away most of the frame.
   A 16:9 shot under cover on a phone held upright loses about seventy per cent
   of its width, which for these clips is nearly the whole composition. */
.cine-stage.cine-contain .cine-video { object-fit: contain; }

/* Deliberately flat: no opacity, no filter, no z-index. Any of those would make
   this a stacking context, cutting the overlay off from the video behind it and
   breaking any blend an overlay wants to reach the footage with. The fade
   therefore lives on the children instead. */
.cine-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cine-lockup { opacity: 0; transition: opacity .9s ease; }
.cine-stage.cine-reveal .cine-lockup { opacity: 1; }

.cine-skip {
  position: absolute;
  right: max(18px, var(--safe-r));
  bottom: max(18px, var(--safe-b));
  z-index: 2;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(0, 0, 0, .46);
  color: rgba(255, 255, 255, .86);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  font-family: system-ui, sans-serif;
  letter-spacing: .09em;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.cine-skip:hover { border-color: rgba(255, 255, 255, .7); color: #fff; }

/* ── the purchase lockups (PRO, +SP) ──
   These sit on dark footage, so they glow rather than print.
   Longhand on purpose: the `font:` shorthand cannot take `inherit` as its
   family — the whole declaration is thrown away if you try, which silently
   leaves the word PRO at body size on top of an arena. */
.cine-lockup {
  position: absolute;
  left: 50%;
  top: var(--lockup-y, 50%);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .32em;
  text-align: center;
  width: min(92vw, 760px);
  font-size: clamp(13px, 1.5vw, 19px);
  font-family: var(--font-display, sans-serif);
}
.cine-lockup-kicker {
  font-size: .78em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .44em;
  text-indent: .44em;
  color: rgba(255, 255, 255, .74);
}
.cine-lockup-big {
  font-size: 6.4em;
  font-weight: 800;
  line-height: .94;
  letter-spacing: .03em;
  color: #fff;
  text-shadow: 0 0 .28em rgba(255, 201, 77, .55), 0 .04em .2em rgba(0, 0, 0, .65);
}
/* A soft scrim, so a lockup never has to compete with whatever the clip is
   doing behind it — gold type on the gem pile was unreadable without it. */
.cine-lockup::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  height: 230%;
  transform: translate(-50%, -50%);
  z-index: -1;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .62), rgba(0, 0, 0, .34) 55%, transparent 100%);
}
/* the SP clip piles its gems across the bottom of frame: sit above them */
.cine-lockup-high { --lockup-y: 30%; }
.cine-lockup-sp { color: var(--gold, #ffc94d); }
.cine-lockup-sub {
  font-size: .95em;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .16em;
  text-indent: .16em;
  color: rgba(255, 255, 255, .82);
}

/* ── the still celebration ──
   What plays when the clip cannot: Reduce Motion, iOS Low Power Mode refusing
   autoplay, a dead asset, a slow connection that has not delivered a frame yet.
   The lockups read as light-on-dark already, so they need only an entrance of
   their own, since nothing is moving behind them. */
.cine-stage.cine-still .cine-lockup { animation: cine-rise .75s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes cine-rise {
  from { transform: translate(-50%, calc(-50% + 16px)) scale(.965); }
  to   { transform: translate(-50%, -50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .cine-stage, .cine-overlay, .cine-video { transition: none; }
  .cine-stage.cine-still .cine-lockup { animation: none; }
}

/* ═════════════ MOBILE APP CHROME ═════════════
   Everything here is scoped to phone widths; the desktop layout is untouched.
   The goal is that an installed, standalone launch reads as an app rather than
   a page: a fixed bottom bar, sheets instead of new screens, thumb-sized
   targets, and no rubber-band bounce leaking to the page behind. */

/* Momentum scrolling, and stop an overscroll at the end of a pane from chaining
   to the document and bouncing the whole app. */
html, body { overscroll-behavior-y: none; }
body { -webkit-tap-highlight-color: transparent; }
.sheet-body, .tabs, .live-feed { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* The tab strip scrolls, but nothing said so — the text simply cut off mid-word
   at the edge, and the 2px scrollbar is invisible on iOS. A fade on the right
   is the affordance. It rides above the bottom nav on phones, where the strip
   is hidden entirely. */
.tabs { scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }

.mnav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: 2px;
  padding: 7px calc(6px + var(--safe-r)) calc(7px + var(--safe-b)) calc(6px + var(--safe-l));
  background: rgba(14, 16, 21, .93);   /* explicit, not a theme token */
  border-top: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
}
.mnav[hidden] { display: none; }

.mnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  min-height: 48px;           /* comfortably over the 44pt floor */
  padding: 5px 2px 2px;
  background: none;
  border: 0;
  border-radius: 12px;
  color: var(--text-faint);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .16s ease;
}
.mnav-item svg { width: 23px; height: 23px; fill: currentColor; display: block; }
.mnav-item.on { color: var(--orange); }
.mnav-item:active { transform: scale(.94); }

/* The primary action, raised out of the bar. */
.mnav-sim { color: var(--text); }
.mnav-simdot {
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  margin-top: -20px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--orange-hot), var(--orange) 55%, #e14a12);
  box-shadow: 0 6px 18px rgba(255, 107, 44, .42), 0 0 0 4px var(--ink);
}
.mnav-simdot svg { width: 22px; height: 22px; fill: #fff; margin-left: 2px; }
.mnav-sim:active .mnav-simdot { transform: scale(.93); }

/* ── bottom sheet ── */
.sheet-scrim {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .22s ease;
}
.sheet-scrim.on { opacity: 1; }
.sheet-scrim[hidden], .sheet[hidden] { display: none; }

.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 71;
  max-height: 82dvh;
  display: flex;
  flex-direction: column;
  padding: 8px calc(14px + var(--safe-r)) calc(18px + var(--safe-b)) calc(14px + var(--safe-l));
  /* Opaque on purpose. The aurora theme redefines --card / --ink-2 as
     translucent white overlays (rgba(255,255,255,.05)) meant to frost over the
     page behind them — right for a card in the flow, wrong for a panel floating
     above a scrim, where it let the dashboard read straight through the rows.
     These hexes are those same overlays pre-composited onto --ink. */
  background: #16181f;
  border-top: 1px solid var(--line);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -16px 44px rgba(0, 0, 0, .6);
  transform: translateY(100%);
  transition: transform .26s cubic-bezier(.2, .8, .3, 1);
}
.sheet.on { transform: translateY(0); }
.sheet-grab {
  width: 40px; height: 4px; flex: none;
  margin: 2px auto 10px;
  border-radius: 999px;
  background: var(--line);
}
.sheet-title {
  flex: none;
  margin: 0 4px 10px;
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: .04em;
  color: var(--text);
}
.sheet-body { overflow-y: auto; display: grid; gap: 8px; padding-bottom: 4px; }
.sheet-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 52px;
  padding: 12px 14px;
  background: #1e212b;           /* opaque, same reason as .sheet above */
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  text-align: left; cursor: pointer;
}
.sheet-row:active { background: #262a36; }
.sheet-row.on { border-color: var(--orange); color: var(--orange); }
.sheet-row .sheet-ico { font-size: 17px; width: 22px; text-align: center; flex: none; }
.sheet-row .sheet-sub { margin-left: auto; color: var(--text-faint); font-size: 12.5px; font-weight: 600; }
.sheet-row.sheet-primary { background: var(--orange); border-color: var(--orange); color: #14161c; }
.sheet-row.sheet-primary:active { background: var(--orange-hot); }

@media (max-width: 720px) {
  /* the bar owns the bottom of the screen; give the page room to scroll clear
     of it, plus the home indicator */
  body.has-mnav .dash-main,
  body.has-mnav #screen-store .wrap { padding-bottom: calc(96px + var(--safe-b)); }
  /* the old floating sim bar and the tab pill both move into the bar */
  body.has-mnav .action-bar { display: none; }
  body.has-mnav .tabs { display: none; }

  /* A phone is a thumb, not a mouse: no control smaller than the 44pt floor.
     33 of them on the trade tab alone were under it. */
  .btn, .tab, select, input[type="text"], input[type="email"], input[type="password"], input[type="number"] {
    min-height: 44px;
  }
  .btn { padding-block: 11px; }
  select, input { font-size: 16px; }   /* under 16px iOS zooms the whole page on focus */
}

/* ── thumb-sized hit areas without redrawing the layout ──
   These three controls are deliberately small on purpose — a stepper arrow, an
   info glyph, a header pill. Growing them visually would wreck rows that are
   already tight on a phone, so instead each grows an invisible ::after that
   extends the TAPPABLE box past the painted one. The arrows measured 12x10:
   possible with a mouse, a coin-flip with a thumb, and adjusting minutes is not
   an edge case, it is the roster. */
@media (max-width: 720px) {
  /* only the two that grow an ::after need a containing block — putting
     .free-pill in here overrode its position:fixed and dropped it out of the
     header row entirely */
  .min-arrow, .trade-player .tinfo { position: relative; }

  /* pair of arrows = 44px of target in the height one row can spare */
  .min-arrow { padding: 3px 6px; }
  .min-arrow::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 40px; height: 22px;
    transform: translate(-50%, -50%);
  }
  .trade-player .tinfo::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
  }
  /* .free-pill is already 44px tall in its own rule; it needs nothing here */

  /* the expanded boxes overlap their neighbours; the painted control still
     draws on top, and the row itself is not a tap target, so the only thing
     that changes is which finger-presses count */
  .min-arrows { position: relative; z-index: 1; }
}

/* ═════════════ MY ACCOUNT ═════════════
   The account orb takes the true right corner, so ⌂ and the Store pill shift
   left to make room. On phones it is hidden instead: five fixed buttons do not
   fit across 390px, and the bottom bar's More sheet already has an Account row
   that opens the same panel. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.acct-btn {
  position: fixed; top: calc(16px + var(--safe-t)); right: calc(16px + var(--safe-r)); z-index: 60;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--card-2); border: 1px solid var(--line); color: var(--text-dim);
  cursor: pointer; transition: border-color .15s, color .15s, transform .15s;
}
.acct-btn svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.acct-btn:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-2px); }
/* a quiet dot when signed in, so the orb says whether there is an account behind it */
.acct-btn.signed-in { border-color: rgba(61, 220, 132, .5); color: var(--green); }

@media (min-width: 721px) {
  .home-btn  { right: calc(68px + var(--safe-r)); }
  .store-btn { right: calc(124px + var(--safe-r)); }
}
@media (max-width: 720px) {
  .acct-btn { display: none; }   /* lives in the bottom bar's More sheet instead */
}

.acct-scrim {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0, 0, 0, .58);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .2s ease;
}
.acct-scrim.on { opacity: 1; }
.acct-scrim[hidden], .acct-panel[hidden] { display: none; }

.acct-panel {
  position: fixed;
  top: 50%; left: 50%;
  z-index: 81;
  width: min(94vw, 440px);
  max-height: min(86dvh, 720px);
  display: flex; flex-direction: column;
  /* opaque on purpose — the aurora theme's --card is a translucent overlay and
     would let the page read through a floating panel */
  background: #16181f;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .66);
  transform: translate(-50%, -46%) scale(.97);
  opacity: 0;
  transition: opacity .2s ease, transform .2s cubic-bezier(.2, .8, .3, 1);
}
.acct-panel.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.acct-head {
  display: flex; align-items: center; justify-content: space-between;
  flex: none; gap: 10px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
}
.acct-head h3 {
  font-family: var(--font-display); font-size: 21px; letter-spacing: .04em; color: var(--text);
}
.acct-x {
  width: 34px; height: 34px; border-radius: 50%;
  background: none; border: 1px solid var(--line); color: var(--text-dim);
  font-size: 14px; cursor: pointer;
}
.acct-x:hover { border-color: var(--red); color: var(--red); }

.acct-body { overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px 20px; }
.acct-who {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 16px;
  background: #1e212b; border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.acct-who-name { font-weight: 800; font-size: 15px; color: var(--text); }
.acct-who-mail { font-size: 12.5px; color: var(--text-faint); word-break: break-all; }
.acct-badge {
  margin-left: auto; flex: none;
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--font-display); font-size: 12px; letter-spacing: .08em;
  background: rgba(244, 200, 75, .12); border: 1px solid rgba(244, 200, 75, .45); color: var(--gold);
}
.acct-badge.free { background: none; border-color: var(--line); color: var(--text-faint); }

.acct-field { margin-bottom: 15px; }
.acct-field label {
  display: block; margin-bottom: 5px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-faint);
}
.acct-row { display: flex; gap: 8px; }
.acct-row input {
  flex: 1; min-width: 0;
  padding: 11px 12px;
  background: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--text); font-family: var(--font-body); font-size: 15px;
}
.acct-row input:focus { outline: none; border-color: var(--orange); }
.acct-row .btn { flex: none; }
.acct-note { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--text-faint); }
.acct-note.ok { color: var(--green); }
.acct-note.err { color: var(--red); }
.acct-sep { height: 1px; margin: 18px 0; background: var(--line); }
.acct-out { display: flex; gap: 8px; }
.acct-out .btn { flex: 1; }

/* ═════════ ADD TO HOME SCREEN ═════════
   A card that slides up from the bottom of a phone screen the first time
   somebody plays in a browser tab, explaining how to install the thing. Fixed
   to the viewport, so index.html keeps it OUT of the screens — a .screen's
   entrance animation leaves a transform behind, and that would capture it. */
.a2hs {
  position: fixed;
  left: calc(10px + var(--safe-l));
  right: calc(10px + var(--safe-r));
  bottom: calc(10px + var(--safe-b));
  z-index: 65;                       /* over the bottom nav (60), under the sheet (70), the modals (80) and the toast (100) */
  max-width: 460px;
  margin: 0 auto;
  padding: 16px 16px 12px;
  border-radius: 20px;
  background: #171a22;               /* explicit: the aurora theme makes --card translucent */
  border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
  transform: translateY(calc(100% + 24px));
  transition: transform .42s cubic-bezier(.2, .9, .3, 1.15);
}
.a2hs.up { transform: translateY(0); }
/* While it is up the title screen moves out from under it: its one big button
   sits exactly where the card lands. --a2hs-h is the card's measured height,
   published by maybeShowA2HS(). */
body.a2hs-up .title-wrap { padding-bottom: calc(24px + var(--a2hs-h, 0px)); }
/* on the dashboard the bottom belongs to the nav bar, so sit above it */
body.has-mnav .a2hs { bottom: calc(72px + var(--safe-b)); }

.a2hs-head { display: flex; gap: 12px; align-items: flex-start; padding-right: 26px; }
.a2hs-mark {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; font-size: 21px;
  background: rgba(255, 107, 44, .14); border: 1px solid rgba(255, 107, 44, .35);
}
.a2hs-title { font-family: var(--font-display); font-size: 20px; letter-spacing: .04em; line-height: 1.1; }
.a2hs-sub { font-size: 12.5px; color: var(--text-dim); line-height: 1.4; margin-top: 3px; }

.a2hs-x {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px; border-radius: 50%;
  background: transparent; border: none; color: var(--text-faint);
  font-size: 15px; cursor: pointer;
}
.a2hs-x:hover { color: var(--text); }

.a2hs-install { width: 100%; margin-top: 12px; }

/* Which browser's steps you are reading. The one detected is preselected, so
   this is only ever touched by somebody we guessed wrong about. */
.a2hs-tabs {
  display: flex; gap: 4px; margin: 12px 0 0;
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px;
}
.a2hs-tab {
  flex: 1 1 0; min-width: 0;
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
  color: var(--text-dim); background: transparent; border: none;
  padding: 7px 10px; border-radius: 999px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.a2hs-tab.on { background: var(--card-2); color: var(--text); }

.a2hs-steps {
  list-style: none; counter-reset: a2hs; margin: 12px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.a2hs-steps li {
  counter-increment: a2hs;
  display: flex; gap: 10px; align-items: baseline;
  font-size: 13.5px; line-height: 1.35; color: var(--text-dim);
}
.a2hs-steps li::before {
  content: counter(a2hs);
  flex: 0 0 auto;
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-family: var(--font-body); font-size: 11px; font-weight: 800;
  background: rgba(255, 107, 44, .15); color: var(--orange);
  align-self: flex-start;
}
.a2hs-steps b { color: var(--text); font-weight: 700; }
/* the share glyph, so the sentence points at the button rather than describing it */
.a2hs-ico {
  display: inline-block; padding: 0 5px; border-radius: 5px;
  background: rgba(255, 255, 255, .08); color: var(--text); font-weight: 700;
}
/* an in-app webview cannot install anything: the steps are a detour, not a recipe */
.a2hs-steps.a2hs-warn li:first-child::before { background: rgba(244, 200, 75, .18); color: var(--gold); }

.a2hs-later {
  width: 100%; margin-top: 12px; padding: 8px;
  background: transparent; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 700;
  color: var(--text-faint);
}
.a2hs-later:hover { color: var(--text-dim); }

@media (prefers-reduced-motion: reduce) {
  .a2hs { transition: none; }
}

/* ═════════ THE WELCOME OFFER ═════════
   Shown once, over the Careers screen, straight after an account is made. It is
   the only full-page pitch in the game, so it gets a real one: gold on dark,
   one benefit per row with the free tier named underneath so the contrast does
   the selling rather than an adjective. */
.pro-welcome {
  position: relative; overflow: hidden; text-align: center;
  margin: -22px -24px; padding: 30px 22px 22px;
  border-radius: var(--radius);
  background: radial-gradient(120% 80% at 50% -10%, rgba(244, 200, 75, .18), transparent 60%),
              linear-gradient(170deg, rgba(255, 107, 44, .10), transparent 55%);
}
.pw-glow {
  position: absolute; top: -140px; left: 50%; width: 320px; height: 240px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(244, 200, 75, .35), transparent);
  filter: blur(26px); pointer-events: none;
}
.pw-badge {
  position: relative; width: 58px; height: 58px; margin: 0 auto 14px;
  display: grid; place-items: center; font-size: 27px; border-radius: 50%;
  background: rgba(244, 200, 75, .14);
  border: 1.5px solid rgba(244, 200, 75, .5);
  box-shadow: 0 0 34px rgba(244, 200, 75, .25);
}
.pw-kicker {
  position: relative;
  font-size: 11px; font-weight: 800; letter-spacing: .24em; color: var(--gold);
}
.pw-name {
  position: relative;
  font-family: var(--font-display); font-size: clamp(26px, 7vw, 36px);
  letter-spacing: .04em; line-height: 1.05; margin-top: 8px;
}
.pw-name span { color: var(--gold); text-shadow: 0 0 24px rgba(244, 200, 75, .45); }
.pw-sub { position: relative; color: var(--text-dim); font-size: 13.5px; margin: 8px 0 0; }

.pw-list {
  position: relative; list-style: none; padding: 0;
  margin: 18px auto 0; max-width: 400px; text-align: left;
  display: flex; flex-direction: column; gap: 2px;
}
.pw-list li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 9px 10px; border-radius: 11px;
  background: rgba(255, 255, 255, .025);
}
.pw-ico {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; font-size: 14px;
  background: rgba(244, 200, 75, .12);
}
.pw-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pw-text b { font-size: 14px; font-weight: 700; line-height: 1.25; }
.pw-text small { font-size: 11.5px; color: var(--text-faint); line-height: 1.25; }

.pw-cta { position: relative; width: 100%; margin-top: 20px; }
.pw-later {
  position: relative; display: block; width: 100%; margin-top: 12px; padding: 10px;
  background: transparent; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 700;
  color: var(--text-faint);
}
.pw-later:hover { color: var(--text-dim); }

/* ═════════ INVITE A FRIEND ═════════ */
/* The chip. A sibling of the screens (see index.html) so it is fixed to the
   window; below 721px the header is full and the same door lives in the More
   sheet and on the Careers and Store screens instead. */
/* Bottom-right, NOT in the header row. The header buttons look viewport-fixed
   but are not: each one is fixed inside its own .screen, and a screen carries an
   entrance animation, so its transform makes IT the containing block — they are
   anchored to the 980px content column. This chip is a true sibling of the
   screens, so the same `right` value puts it somewhere else entirely, and at
   1280px that was exactly on top of the ⌂ button. Floating it clear of the row
   sidesteps the whole mismatch, and a persistent CTA reads fine down there.
   92px of clearance keeps it above the sim bar on the dashboard. */
.invite-btn {
  position: fixed; bottom: calc(92px + var(--safe-b)); right: calc(20px + var(--safe-r));
  z-index: 55; height: 44px; padding: 0 16px; border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  background: var(--card-2); border: 1.5px solid rgba(61, 220, 132, .5); color: var(--green);
  font-family: var(--font-display); font-size: 15px; letter-spacing: .08em; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.invite-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 22px rgba(61, 220, 132, .35); }
.invite-btn[hidden] { display: none; }
@media (max-width: 900px) { .invite-btn { display: none; } }

.invite-wrap { position: relative; text-align: center; padding: 6px 2px 2px; }
.inv-kicker { font-size: 11px; font-weight: 800; letter-spacing: .24em; color: var(--green); }
.inv-title { font-family: var(--font-display); font-size: 32px; margin: 8px 0 0; letter-spacing: .02em; }
.inv-title span { color: var(--gold); }
.inv-sub { color: var(--text-dim); font-size: 13.5px; margin: 8px auto 0; max-width: 420px; line-height: 1.5; }
.inv-loading, .inv-err { color: var(--text-faint); font-size: 13px; padding: 26px 0; }
.inv-err { color: var(--red); }
.inv-body { margin-top: 18px; }

.inv-codebox {
  border: 1px dashed rgba(61, 220, 132, .45); border-radius: 14px;
  background: rgba(61, 220, 132, .06); padding: 12px; margin-bottom: 12px;
}
.inv-code-label { font-size: 10px; font-weight: 800; letter-spacing: .22em; color: var(--text-faint); }
.inv-code {
  font-family: var(--font-display); font-size: clamp(28px, 9vw, 40px);
  letter-spacing: .16em; text-indent: .16em; color: var(--green); margin-top: 4px;
}

.inv-linkrow { display: flex; gap: 8px; }
.inv-link {
  flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 12px;
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--ink-2); color: var(--text-dim);
  font-family: var(--font-body); font-size: 12.5px;
}
.inv-linkrow .btn { flex: 0 0 auto; height: 44px; }
.inv-share { width: 100%; margin-top: 8px; }

.inv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.inv-stat { background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 6px; }
.inv-num { font-family: var(--font-display); font-size: 24px; line-height: 1; }
.inv-num.gold { color: var(--gold); }
.inv-lab { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: var(--text-faint); margin-top: 5px; text-transform: uppercase; }
.inv-fine { color: var(--text-faint); font-size: 11.5px; line-height: 1.5; margin: 14px 0 0; }

/* the same offer, as a card, on the screens a phone can reach */
.invite-card {
  display: flex; align-items: center; gap: 14px; text-align: left;
  width: 100%; margin: 18px 0 0; padding: 14px 16px;
  border-radius: 16px; cursor: pointer;
  background: linear-gradient(135deg, rgba(61, 220, 132, .10), rgba(61, 220, 132, .03));
  border: 1px solid rgba(61, 220, 132, .32);
  font-family: var(--font-body); color: var(--text);
}
.invite-card:hover { border-color: rgba(61, 220, 132, .6); }
.invite-card .ic-ico {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; font-size: 19px;
  background: rgba(61, 220, 132, .14);
}
.invite-card .ic-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.invite-card .ic-head { font-size: 14.5px; font-weight: 800; letter-spacing: .01em; }
.invite-card .ic-sub { font-size: 12px; color: var(--text-dim); line-height: 1.35; }
.invite-card .ic-go { margin-left: auto; color: var(--green); font-size: 18px; flex: 0 0 auto; }

/* ── the install card, compact ──
   What a first-time visitor sees: one line, ignorable, that opens into the real
   steps on a tap. The full card is a lot to put in front of somebody who has
   not even signed up yet. */
.a2hs.a2hs-mini { padding: 0; }
.a2hs-minibar {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 44px 12px 14px;
  background: transparent; border: none; cursor: pointer;
  font-family: var(--font-body); color: var(--text); text-align: left;
}
.a2hs-minitext { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.a2hs-minitext b { font-size: 14px; font-weight: 800; letter-spacing: .01em; }
.a2hs-minitext small { font-size: 11.5px; color: var(--text-dim); }
.a2hs-minigo {
  margin-left: auto; flex: 0 0 auto;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255, 107, 44, .16); border: 1px solid rgba(255, 107, 44, .45);
  color: var(--orange); font-size: 12px; font-weight: 800; letter-spacing: .06em;
}
.a2hs.a2hs-mini .a2hs-mark { width: 34px; height: 34px; font-size: 18px; }

/* ── the fact strip under the title ──
   Three numbers instead of a third sentence. On a phone this is all that sits
   between the logo and the button, and numbers carry further than adjectives. */
.title-facts {
  list-style: none; padding: 0; margin: 0 0 30px;
  display: flex; gap: 10px; justify-content: center; align-items: stretch;
  animation: fadeUp .7s .4s both;
}
.title-facts li {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  min-width: 82px; padding: 10px 12px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line); border-radius: 13px;
}
.title-facts b {
  font-family: var(--font-display); font-size: 25px; line-height: 1;
  color: var(--orange);
}
.title-facts span {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  color: var(--text-faint); text-transform: uppercase;
}

/* ── the welcome screen on a phone ──
   The desktop layout is centred in a tall column with room to breathe. A phone
   has none, so the same markup has to be recomposed rather than shrunk: the
   kicker fits one line instead of wrapping mid-phrase, the buttons stack in a
   deliberate order (play, then browse, then account) instead of wrapping into
   whatever fits, and the whole thing starts higher up the screen. */
@media (max-width: 640px) {
  .title-wrap { justify-content: center; padding: calc(56px + var(--safe-t)) 18px 40px; }
  .title-kicker { font-size: 9.5px; letter-spacing: .16em; margin-bottom: 14px; }
  .title-logo { font-size: clamp(50px, 15vw, 74px); }
  .title-sub { font-size: 14.5px; line-height: 1.5; margin: 18px 0 24px; }
  .title-facts { gap: 7px; margin-bottom: 26px; }
  .title-facts li { flex: 1 1 0; min-width: 0; padding: 9px 4px; border-radius: 12px; }
  .title-facts b { font-size: 21px; }
  .title-facts span { font-size: 9px; letter-spacing: .06em; }

  /* One column, widest action first. Leaderboard and PRO share the second row. */
  .title-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
  .title-actions .btn-xl { grid-column: 1 / -1; width: 100%; font-size: 16px; height: 56px; }
  .title-actions .btn { width: 100%; }
  /* PRO is hidden once bought, which would leave Leaderboard stranded at half
     width — so an only child spans both columns. */
  .title-actions .btn-ghost:only-of-type { grid-column: 1 / -1; }

  .title-account { margin-top: 20px; }
  .title-account .btn { width: 100%; }
  .title-account span { font-size: 11.5px; line-height: 1.45; display: block; margin-top: 8px; }
}

/* four columns now that "Sent" is tracked alongside the funnel */
.inv-stats { grid-template-columns: repeat(4, 1fr); }
.inv-stats .inv-num { font-size: 21px; }
@media (max-width: 460px) {
  .inv-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ── the follow-up list ──
   The reward is stuck behind the friend's purchase, so the useful thing here is
   not a number but a name and a button that writes the message for them. */
.inv-list-head {
  font-size: 10.5px; font-weight: 800; letter-spacing: .18em;
  color: var(--text-faint); text-transform: uppercase;
  margin: 18px 0 8px; text-align: left;
}
.inv-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 11px; margin-bottom: 6px;
  background: var(--ink-2); border: 1px solid var(--line);
}
.inv-who { font-weight: 700; font-size: 13.5px; text-align: left; flex: 1 1 auto; min-width: 0;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-status { flex: 0 0 auto; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.inv-status.is-pro { color: var(--gold); }
.inv-status.is-waiting { color: var(--text-faint); }
.inv-nudge {
  flex: 0 0 auto; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  background: rgba(61, 220, 132, .12); border: 1px solid rgba(61, 220, 132, .4);
  color: var(--green); font-family: var(--font-body); font-size: 11.5px; font-weight: 800;
}
.inv-nudge:hover { background: rgba(61, 220, 132, .2); }

/* the invite banner inside the welcome offer */
.pw-invite {
  position: relative; margin: 14px auto 0; max-width: 400px;
  padding: 13px 15px; border-radius: 13px; text-align: left;
  background: rgba(61, 220, 132, .09);
  border: 1px solid rgba(61, 220, 132, .35);
  font-size: 13.5px; line-height: 1.45;
}
.pw-invite > b { color: var(--green); }
.pw-invite span { display: block; margin-top: 5px; color: var(--text-dim); font-size: 12.5px; }
.pw-invite span b { color: var(--gold); }

/* "Maybe later" has to be on screen without scrolling for it to be a real
   choice. The perk list is the only part that can grow, so it is the only part
   that scrolls: the CTA and the decline are pinned to the bottom of the card. */
.modal-card:has(.pro-welcome) { padding: 0; max-height: 92vh; overflow: hidden; }
.modal-card:has(.pro-welcome) .pro-welcome {
  margin: 0; max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.pro-welcome .pw-list { overflow-y: auto; min-height: 0; flex: 0 1 auto; }
.pro-welcome .pw-cta { flex: 0 0 auto; }

@media (max-height: 780px) {
  .pro-welcome { padding: 20px 18px 16px; }
  .pw-badge { width: 46px; height: 46px; font-size: 22px; margin-bottom: 10px; }
  .pw-name { font-size: clamp(22px, 6.4vw, 30px); }
  .pw-list { margin-top: 12px; }
  .pw-list li { padding: 7px 10px; }
  .pw-text b { font-size: 13.5px; }
  .pw-text small { font-size: 11px; }
  .pw-cta { margin-top: 14px; }
  .pw-later { margin-top: 6px; }
}