/* ============================================================
   Gridiron Dynasty — mobile-first responsive styles.
   Team colors come in via --team1 / --team2 (set per-team).
   ============================================================ */
:root {
  --bg: #0e1117;
  --bg2: #161b24;
  --card: #1b212c;
  --line: #2a3340;
  --text: #e8edf4;
  --dim: #8a97a8;
  --accent: #3da9fc;
  --good: #34c759;
  --warn: #ffcc00;
  --bad: #ff4d4f;
  --team1: #3da9fc;
  --team2: #f7d417;
  --radius: 14px;
  --maxw: 720px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Accessibility: a clear focus ring on the dark theme for keyboard users. */
:focus { outline: none; }
:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  padding-bottom: env(safe-area-inset-bottom);
}

#app {
  max-width: var(--maxw);
  margin: 0 auto;
  /* top inset keeps headers clear of the status bar / Dynamic Island on
     notched iPhones (env() is 0 in the browser + on non-notch devices). */
  padding: calc(16px + env(safe-area-inset-top, 0px)) 14px 40px;
  min-height: 100vh;
}

h1, h2, h3, h4 { margin: 0 0 8px; }
small { color: var(--dim); }
.dim { color: var(--dim); }
.hidden { display: none !important; }
.hint { color: var(--dim); font-size: 13px; margin: 4px 0 14px; }

/* ---------- buttons ---------- */
.btn {
  appearance: none; border: 1px solid var(--line); background: var(--bg2);
  color: var(--text); border-radius: 12px; padding: 12px 16px;
  font-size: 15px; font-weight: 600; cursor: pointer; transition: transform .05s, background .15s;
  font-family: inherit;
}
.btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(135deg, var(--team1), var(--team2)); color: #0b0e13; border: none; }
.btn.ghost { background: transparent; }
.btn.sm { padding: 9px 14px; font-size: 13px; border-radius: 10px; min-height: 40px; }
.btn.big { width: 100%; padding: 16px; font-size: 17px; border-radius: 14px; }

/* ---------- top bars ---------- */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.bar h2 { font-size: 18px; }
.bar > span { min-width: 52px; }

/* ---------- cards ---------- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px; margin-bottom: 14px;
}
.card.locked { opacity: .55; }

/* ============================================================
   MENU / HERO
   ============================================================ */
.hero { text-align: center; padding: 12vh 8px; }
.logo { font-size: 38px; font-weight: 900; letter-spacing: -1px; line-height: 1; }
.logo span { display: block; background: linear-gradient(135deg, var(--team1), var(--team2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tag { color: var(--dim); margin: 14px 0 30px; }
.menu-btns { display: flex; flex-direction: column; gap: 12px; max-width: 320px; margin: 0 auto; }

/* ============================================================
   COACH CREATE
   ============================================================ */
.text-input {
  width: 100%; background: var(--bg2); border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 0 12px; min-height: 44px; font-size: 16px; font-family: inherit;
}
.text-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cc-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.cc-row:first-of-type { border-top: none; }
.cc-info { flex: 1; min-width: 0; }
.cc-info b { font-size: 14px; display: block; }
.cc-info small { color: var(--dim); font-size: 11.5px; line-height: 1.3; display: block; }
.cc-ctrl { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.cc-ctrl .btn.xs { flex: 0 0 auto; width: 40px; }
.cc-val { font-size: 19px; font-weight: 800; min-width: 26px; text-align: center; }
.cc-val.good { color: var(--good); } .cc-val.avg { color: var(--text); } .cc-val.low { color: var(--warn); }
.cc-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 8px 0 4px; }
.cc-cell { background: var(--bg2); border-radius: 10px; padding: 8px 2px; text-align: center; position: relative; }
.cc-spend {
  position: absolute; top: -7px; right: -5px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--good); color: #06121e; border: none; font-weight: 900; font-size: 15px;
  cursor: pointer; line-height: 1; font-family: inherit; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.lvl-pill { background: linear-gradient(135deg, var(--team1), var(--team2)); color: #0b0e13; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.xp-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; margin: 6px 0 4px; }
.xp-bar { height: 8px; background: var(--bg2); border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.xp-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--team1), var(--team2)); border-radius: 999px; }
.cc-cell b { display: block; font-size: 17px; }
.cc-cell b.good { color: var(--good); } .cc-cell b.avg { color: var(--text); } .cc-cell b.low { color: var(--warn); }
.cc-cell small { font-size: 9px; letter-spacing: .3px; color: var(--dim); }
@media (max-width: 420px) { .cc-grid { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   TEAM SELECT
   ============================================================ */
.conf-block { margin-bottom: 18px; }
.conf-block h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: var(--dim); }
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.team-card {
  display: flex; align-items: stretch; gap: 0; padding: 0; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  color: var(--text); cursor: pointer; text-align: left; font-family: inherit;
}
.team-card:active { transform: scale(.98); }
.tc-bar { width: 8px; background: linear-gradient(var(--c1), var(--c2)); flex: 0 0 8px; }
.tc-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.tc-body strong { font-size: 15px; }
.tc-crest { display: flex; align-items: center; padding: 0 12px 0 4px; flex: 0 0 auto; }
.sch-wk { flex: 0 0 44px; font-size: 12px; font-weight: 700; color: var(--dim); }
.hub-offnote { text-align: center; margin-top: 10px; }
.score-row .lose { color: var(--bad); font-weight: 700; }
.score-row .win { color: var(--good); }
.prestige { color: var(--team2); font-size: 11px; letter-spacing: 1px; }
.prestige .dim { color: var(--line); }

/* ============================================================
   ROLE SELECT
   ============================================================ */
.role-grid { display: flex; flex-direction: column; gap: 12px; }
.role-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; text-align: left; color: var(--text); cursor: pointer; font-family: inherit;
}
.role-card:active { transform: scale(.99); }
.role-card strong { font-size: 17px; display: block; margin-bottom: 4px; color: var(--team2); }
.role-card p { margin: 0; color: var(--dim); font-size: 14px; }

/* ============================================================
   HUB
   ============================================================ */
.hub-head {
  background: linear-gradient(135deg, color-mix(in srgb, var(--team1) 70%, #000), color-mix(in srgb, var(--team2) 40%, #000));
  border-radius: var(--radius); padding: 14px; margin-bottom: 14px;
}
.hh-top { display: flex; align-items: center; gap: 10px; }
.hh-top h2 { flex: 1; font-size: 20px; margin: 0; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.role-pill, .season-pill { background: rgba(0,0,0,.35); padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.hh-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 14px; }
.hh-stats > div { background: rgba(0,0,0,.25); border-radius: 10px; padding: 8px 3px; text-align: center; min-width: 0; }
.hh-stats b { font-size: 17px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh-stats small { font-size: 9px; text-transform: uppercase; letter-spacing: .3px; }
@media (max-width: 430px) { .hh-stats { grid-template-columns: repeat(3, 1fr); } .hh-stats b { font-size: 18px; } }

.phase-banner {
  text-align: center; font-weight: 700; padding: 8px; background: var(--bg2);
  border: 1px solid var(--line); border-radius: 10px; margin-bottom: 14px; font-size: 14px;
}
.phase-banner .seat-pill { margin-left: 8px; vertical-align: middle; }

/* Coaching carousel — job security + offers */
.seat-pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px;
  font-weight: 800; border: 1px solid currentColor;
}
.seat-pill.good { color: var(--good); }
.seat-pill.warn { color: var(--warn); }
.seat-pill.bad { color: var(--bad); }
.job-card.fired { border-color: var(--bad); }
.fired-note { color: var(--bad); font-weight: 600; }
.seat-meter { height: 8px; background: var(--bg2); border-radius: 999px; overflow: hidden; margin: 8px 0 4px; }
.seat-meter span { display: block; height: 100%; border-radius: 999px; transition: width .3s; }
.seat-meter span.good { background: var(--good); }
.seat-meter span.warn { background: var(--warn); }
.seat-meter span.bad { background: var(--bad); }
.offer-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); }
.offer-name small { color: var(--dim); margin-left: 4px; }

/* NIL budget breakdown */
.nil-hero { text-align: center; padding: 18px 0 8px; }
.nil-hero small { color: var(--dim); letter-spacing: 2px; font-size: 12px; }
.nil-big { font-size: 46px; font-weight: 800; line-height: 1.1; margin: 4px 0; }
.seat-down, .down { color: var(--bad); font-weight: 700; }
.seat-up, .up { color: var(--good); font-weight: 700; }
.donor-card .dc-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: 1px; font-weight: 700; }
.dc-amt { font-size: 28px; font-weight: 800; margin: 6px 0 2px; }
.dc-amt small { font-size: 15px; }
.range-bar { height: 8px; background: var(--bg2); border-radius: 999px; overflow: hidden; margin: 10px 0; }
.range-bar span { display: block; height: 100%; background: var(--good); border-radius: 999px; }
.dc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0; }
.dc-grid small { display: block; color: var(--dim); font-size: 12px; }
.dc-grid b { font-size: 17px; }
.donor-card .sm { font-size: 12px; line-height: 1.4; }
.src-card .src-label { letter-spacing: 1px; font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.src-card .src-label .src-note { letter-spacing: 0; font-weight: 600; font-size: 11px; color: var(--dim); text-transform: none; }
.src-card .mt { margin-top: 14px; }
.src-row { display: flex; justify-content: space-between; align-items: center; font-weight: 700; padding: 6px 0; }
.src-row.tot { font-size: 17px; }
.src-row.line { border-top: 1px solid var(--line); }
.src-sub { display: flex; justify-content: space-between; color: var(--dim); font-size: 13px; padding: 3px 0 3px 10px; }
.adj-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); }
.adj-row:first-of-type { border-top: none; }
.adj-name { display: flex; flex-direction: column; }
.adj-name small { color: var(--dim); font-size: 12px; margin-top: 2px; }
.adj-foot { display: flex; justify-content: space-between; font-size: 13px; color: var(--dim); padding: 3px 0; }
.adj-foot.tot { font-size: 16px; font-weight: 800; color: var(--text); border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px; }

/* Box score */
.score-row.tap, .brk-game.tap { cursor: pointer; }
.box-link { color: var(--team2); font-weight: 700; font-size: 12px; margin-left: 8px; }
.bs-final { display: flex; justify-content: center; align-items: center; gap: 14px; font-size: 22px; font-weight: 800; margin: 12px 0 4px; }
.bs-final .win { color: var(--good); }
.bs-final .at { color: var(--dim); font-size: 15px; font-weight: 600; }
/* quarter line score */
.bs-lines { margin: 4px auto 2px; border-collapse: collapse; font-size: 13px; }
.bs-lines th { color: var(--dim); font-size: 10px; font-weight: 700; padding: 2px 9px; text-align: center; }
.bs-lines td { padding: 2px 9px; text-align: center; }
.bs-lines td:first-child { text-align: left; font-weight: 700; color: var(--dim); }
/* drive chart */
.dr-q { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--team2); margin: 10px 0 2px; }
.dr-q:first-child { margin-top: 0; }
.dr-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.dr-sum { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.dr-res { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 6px; background: var(--bg2); white-space: nowrap; }
.dr-res.good { color: var(--good); border: 1px solid var(--good); }
.dr-res.team2 { color: var(--team2); border: 1px solid var(--team2); }
.dr-res.bad { color: var(--bad); border: 1px solid var(--bad); }
.dr-res.dim { color: var(--dim); border: 1px solid var(--line); }
.dr-score { font-size: 12px; font-weight: 700; min-width: 44px; text-align: right; }

/* ============================================================
   WATCH GAME (play-by-play replay)
   ============================================================ */
.watch-btn { width: 100%; margin: 8px 0 18px; }
.link-btn { background: none; border: none; color: var(--team2); font-weight: 700; font-size: 12px; cursor: pointer; font-family: inherit; padding: 0; }
.watch-board {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--team1) 50%, #000), color-mix(in srgb, var(--team2) 30%, #000));
  border-radius: var(--radius); padding: 14px 12px; margin-bottom: 10px;
}
.wb-side { display: flex; align-items: center; gap: 8px; font-weight: 700; min-width: 0; }
.wb-side.right { flex-direction: row; }
.wb-score { font-size: 28px; font-weight: 900; }
.wb-mid { text-align: center; font-size: 13px; font-weight: 800; letter-spacing: 1px; flex: 0 0 auto; }
.wb-mid small { display: block; font-size: 10px; color: rgba(255,255,255,.6); letter-spacing: .5px; font-weight: 600; }
.watch-situ { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; padding: 0 2px; }
.watch-field { position: relative; height: 14px; border-radius: 7px; margin-bottom: 10px;
  background: repeating-linear-gradient(90deg, #14532d 0 10%, #166534 10% 20%); border: 1px solid var(--line); }
.wf-ball { position: absolute; top: -6px; transform: translateX(-50%); font-size: 16px; transition: left .4s ease; }
.watch-ctrls { display: flex; gap: 6px; margin-bottom: 10px; }
.watch-ctrls .btn { flex: 1; padding: 9px 4px; min-height: 40px; font-size: 12px; }
.watch-feed { padding: 8px 12px; max-height: 44vh; overflow-y: auto; }
.wp-row { display: flex; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; align-items: baseline; }
.wp-row:first-child { border-top: none; }
.wp-clock { flex: 0 0 64px; font-size: 11px; color: var(--dim); font-weight: 700; }
.wp-txt { flex: 1; min-width: 0; }
.wp-txt small { display: block; font-size: 10px; letter-spacing: .3px; }
.wp-row.drive { background: color-mix(in srgb, var(--team1) 12%, transparent); border-radius: 8px; padding: 6px 8px; font-weight: 700; }
.wp-row.td .wp-txt { color: var(--good); font-weight: 800; }
.wp-row.fg .wp-txt { color: var(--team2); font-weight: 700; }
.wp-row.to .wp-txt { color: var(--bad); font-weight: 700; }
.wp-row.miss .wp-txt, .wp-row.punt .wp-txt { color: var(--dim); }
.wp-row.pen .wp-txt { color: var(--warn); }
.wp-row.big .wp-txt { font-weight: 700; }
.wp-row.q { justify-content: center; font-weight: 800; letter-spacing: 1px; color: var(--team2); }
.wp-row.end { justify-content: center; font-weight: 900; letter-spacing: 2px; color: var(--good); }
.hint.center { text-align: center; }
.bs-team { padding-top: 10px; }
.bs-head { display: flex; align-items: center; gap: 8px; font-size: 18px; margin-bottom: 6px; }
.bs-tbl { margin-top: 10px; }
.bs-tbl h5 { margin: 0 0 4px; color: var(--dim); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.bs-tbl table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bs-tbl th { text-align: right; color: var(--dim); font-weight: 600; font-size: 11px; padding: 2px 4px; }
.bs-tbl th:first-child { text-align: left; }
.bs-tbl td { text-align: right; padding: 4px; border-top: 1px solid var(--line); }
.bs-tbl td.bs-name { text-align: left; font-weight: 600; }
.bs-tbl td.bs-name small { color: var(--dim); font-weight: 500; margin-left: 5px; }

.poty-stat { margin-top: 4px; font-weight: 700; color: var(--team2); font-size: 13px; }

/* Box score: toggle + team totals + scoring summary */
.bs-seg { margin: 4px 0 12px; }
.bs-team-tot { width: 100%; border-collapse: collapse; }
.bs-team-tot th { color: var(--dim); font-size: 12px; font-weight: 700; padding: 4px 6px; }
.bs-team-tot th:first-child { text-align: left; }
.bs-team-tot th:last-child { text-align: right; }
.bs-team-tot td { padding: 7px 6px; border-top: 1px solid var(--line); font-size: 14px; }
.bs-team-tot td.bs-tv { font-weight: 800; width: 28%; }
.bs-team-tot td.bs-tv:first-child { text-align: left; }
.bs-team-tot td.bs-tv:last-child { text-align: right; }
.bs-stat { text-align: center; color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.score-play { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; }
.score-play:first-of-type { border-top: none; }
.sp-desc b { font-weight: 700; }
.sp-pts { font-weight: 800; color: var(--team2); min-width: 28px; text-align: right; }

/* Scores week selector */
.wk-sel { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.wk-btn { min-width: 34px; padding: 6px 0; border: 1px solid var(--line); background: var(--card); color: var(--text); border-radius: 8px; font-weight: 700; cursor: pointer; }
.wk-btn.on { background: var(--team1); border-color: var(--team1); color: #fff; }
.wk-btn.future { opacity: 0.4; }
.wk-btn.post { padding-left: 9px; padding-right: 9px; letter-spacing: 0.5px; }

.next-game small, .prev-game small, .team-stats small { text-transform: uppercase; letter-spacing: 1px; font-size: 11px; }
.prev-game.tap { cursor: pointer; }
.prev-game .win { color: var(--good); }
.prev-game .lose { color: var(--bad); }
.team-stats .ts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.team-stats .ts-grid > div { background: var(--bg2); border-radius: 10px; padding: 8px 4px; text-align: center; }
.team-stats .ts-grid b { display: block; font-size: 17px; }
.team-stats .ts-grid small { display: block; font-size: 9px; letter-spacing: .3px; color: var(--dim); margin-top: 2px; }
@media (max-width: 380px) { .team-stats .ts-grid { grid-template-columns: repeat(3, 1fr); } }
.ng-row { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 16px; font-weight: 600; }
.ng-ovr { font-size: 13px; color: var(--dim); }
.ng-schemes { font-size: 12px; color: var(--dim); margin-top: 6px; }
.ng-bye { font-size: 14px; font-weight: 700; letter-spacing: 1px; color: var(--dim); }
.score-row.bye { opacity: 0.6; }

.tile-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.tile {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--text); cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit;
}
.tile:active { transform: scale(.96); }
.tile .ti { font-size: 22px; }
.tile small { font-size: 11px; }

.sim-btn { margin-bottom: 16px; }
.save-exit { width: 100%; margin-top: 8px; color: var(--dim); }

.feed small { text-transform: uppercase; letter-spacing: 1px; font-size: 11px; display: block; margin-bottom: 8px; }
.feed-row { font-size: 14px; padding: 6px 0; border-top: 1px solid var(--line); display: flex; gap: 10px; }
.feed-row:first-of-type { border-top: none; }
.fw { color: var(--dim); font-size: 12px; min-width: 56px; }

/* ============================================================
   CHIPS / BADGES
   ============================================================ */
.chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.chip .dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--c1), var(--c2)); flex: 0 0 10px; border: 1px solid rgba(255,255,255,.2); }
.crest { flex: 0 0 auto; vertical-align: middle; }
.crest-img { flex: 0 0 auto; vertical-align: middle; border-radius: 4px; object-fit: contain; }
/* Real-schools upload (menu) */
.real-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.real-status { font-size: 12px; color: var(--dim); }
.real-upload { cursor: pointer; }
.real-hint { text-align: center; max-width: 340px; margin: 8px auto 0; }
.ovr { font-weight: 800; font-size: 15px; padding: 2px 8px; border-radius: 8px; min-width: 34px; text-align: center; display: inline-block; }
.ovr.elite { background: #6a3df0; color: #fff; }
.ovr.good { background: #1f7a3d; color: #fff; }
.ovr.avg { background: #4a5260; color: #fff; }
.ovr.low { background: #5a3030; color: #cbb; }

/* ============================================================
   SEGMENTED CONTROL
   ============================================================ */
.seg { display: flex; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 4px; margin-bottom: 12px; }
.seg-btn { flex: 1; background: transparent; border: none; color: var(--dim); padding: 11px 8px; min-height: 44px; border-radius: 9px; font-weight: 600; font-size: 13px; cursor: pointer; font-family: inherit; }
.seg-btn.on { background: var(--card); color: var(--text); }

/* ============================================================
   ROSTER
   ============================================================ */
.pos-group { margin-bottom: 16px; }
.pos-group h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--dim); border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.p-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px; }
.p-row.starter { background: color-mix(in srgb, var(--team1) 12%, transparent); }
.p-pos { font-size: 11px; font-weight: 700; color: var(--team2); min-width: 24px; }
.p-name { flex: 1; font-weight: 600; font-size: 14px; display: flex; flex-direction: column; }
.p-name small { font-weight: 400; }
.p-morale { font-size: 13px; }

/* position chip row + group headers */
.pos-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 10px; -webkit-overflow-scrolling: touch; }
.pos-chips::-webkit-scrollbar { display: none; }
.pos-chip {
  flex: 0 0 auto; background: var(--bg2); border: 1px solid var(--line); color: var(--dim);
  border-radius: 999px; padding: 0 16px; min-height: 44px; font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.pos-chip.on { background: linear-gradient(135deg, var(--team1), var(--team2)); color: #0b0e13; border-color: transparent; }
.pos-group-head {
  width: 100%; display: flex; align-items: center; gap: 8px; text-align: left;
  background: transparent; border: none; border-bottom: 1px solid var(--line);
  color: var(--dim); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  padding: 14px 4px 6px; margin-top: 6px; cursor: pointer; font-family: inherit;
}
.edit-dc { margin-left: auto; color: var(--team1); text-transform: none; letter-spacing: 0; font-size: 12px; }

/* draggable depth chart */
.dc-list { display: flex; flex-direction: column; gap: 6px; touch-action: pan-y; }
.dc-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
}
.dc-row.starter { border-color: color-mix(in srgb, var(--team1) 55%, var(--line)); background: color-mix(in srgb, var(--team1) 14%, var(--card)); }
.dc-row.cut { margin-bottom: 10px; position: relative; }
.dc-row.cut::after {
  content: 'STARTERS ↑   BENCH ↓'; position: absolute; left: 0; right: 0; bottom: -16px;
  text-align: center; font-size: 9px; letter-spacing: 2px; color: var(--dim);
}
.dc-row.dragging { opacity: .92; border-color: var(--team2); box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.drag-handle {
  font-size: 18px; color: var(--dim); cursor: grab; touch-action: none;
  padding: 4px 2px; user-select: none; -webkit-user-select: none;
}
.drag-handle:active { cursor: grabbing; }
.drag-handle.ghosted { opacity: .25; cursor: default; }
.dc-num { font-size: 11px; font-weight: 800; color: var(--team2); min-width: 30px; }

/* tappable player name cue */
.p-name.tap { cursor: pointer; }
.p-name.tap:active { opacity: .6; }
@media (hover: hover) { .p-name.tap:hover { color: var(--team2); } }

/* ============================================================
   PLAYER PROFILE
   ============================================================ */
.player-hero {
  background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 75%, #000), color-mix(in srgb, var(--c2) 45%, #000));
  border-radius: var(--radius); padding: 16px; margin-bottom: 14px;
}
.ph-main { display: flex; align-items: flex-start; gap: 12px; }
.ph-id { flex: 1; }
.ph-id h2 { margin: 0; font-size: 22px; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.ph-sub { font-size: 13px; font-weight: 600; margin-top: 2px; }
.ph-sub.dim { color: rgba(255,255,255,.7); font-weight: 400; }
.ph-ovr { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ph-ovr .ovr { font-size: 22px; padding: 4px 10px; }
.ph-ovr small { font-size: 10px; color: rgba(255,255,255,.8); }
.ph-meta { display: flex; gap: 14px; margin-top: 12px; font-size: 13px; font-weight: 600; }
.ph-meta span { background: rgba(0,0,0,.3); padding: 4px 10px; border-radius: 20px; }

.attr-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.attr-l { flex: 0 0 122px; font-size: 13px; font-weight: 600; }
.attr-track { flex: 1; height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.attr-fill { display: block; height: 100%; border-radius: 4px; }
.attr-fill.elite { background: #7a5cf0; }
.attr-fill.good { background: #2f9e54; }
.attr-fill.avg { background: #6b7686; }
.attr-fill.low { background: #8a5a3a; }
.attr-v { flex: 0 0 26px; text-align: right; font-weight: 800; font-size: 14px; }
.train-btn { flex: 0 0 auto; padding: 4px 8px; min-height: 30px; font-size: 11px; }
.train-max { flex: 0 0 auto; font-size: 10px; color: var(--dim); min-width: 48px; text-align: center; }
.hire-btn.good { border-color: var(--good); color: var(--good); }
.develop-all { border-color: var(--team2); }
.auto-train-btn { margin-left: 8px; padding: 3px 9px; min-height: 28px; font-size: 11px; }
.attr-v.elite { color: #b9a7ff; }
.attr-v.good { color: #58d488; }
.attr-v.avg { color: var(--dim); }
.attr-v.low { color: #c98a5a; }

.stat-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.stat-tbl { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.stat-tbl th { text-align: right; color: var(--dim); font-size: 11px; font-weight: 700; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.stat-tbl td { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.stat-tbl th:nth-child(-n+2), .stat-tbl td:nth-child(-n+2) { text-align: left; }
.stat-tbl tr.tot td { font-weight: 800; color: var(--team2); border-top: 1px solid var(--line); }

/* Stat leaders: sortable spreadsheet */
.lead-card { padding: 8px; }
.lead-pos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.lead-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lead-tbl { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.lead-tbl th { color: var(--dim); font-size: 11px; font-weight: 700; padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--line); }
.lead-tbl td { padding: 7px 8px; text-align: right; border-bottom: 1px solid var(--line); }
.lead-tbl th.lr-rk, .lead-tbl td.lr-rk { width: 26px; text-align: center; color: var(--dim); font-weight: 800; }
.lead-tbl th.lr-name, .lead-tbl td.lr-name { text-align: left; position: sticky; left: 0; background: var(--card); min-width: 130px; }
.lead-tbl td.lr-name { font-weight: 600; }
.lead-tbl td.lr-name small { color: var(--dim); font-weight: 400; margin-left: 4px; }
.lead-tbl td.lr-name .crest, .lead-tbl td.lr-name .crest-img { vertical-align: middle; margin-right: 4px; }
.lead-tbl th.lsort { cursor: pointer; user-select: none; }
.lead-tbl th.lsort.on { color: var(--team2); }
@media (hover: hover) { .lead-tbl th.lsort:hover { color: var(--text); } }
.lead-tbl tr.mine td { background: color-mix(in srgb, var(--team1) 16%, transparent); }
.lead-tbl tr.mine td.lr-name { background: color-mix(in srgb, var(--team1) 16%, var(--card)); }

/* Player progression: overall by season */
.prog-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.prog-yr { flex: 0 0 64px; font-weight: 700; }
.prog-yr small { color: var(--dim); font-weight: 400; }
.prog-bar { flex: 1; height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.prog-fill { display: block; height: 100%; border-radius: 4px; }
.prog-fill.elite { background: #7a5cf0; }
.prog-fill.good { background: #2f9e54; }
.prog-fill.avg { background: #6b7686; }
.prog-fill.low { background: #8a5a3a; }
.prog-ovr { flex: 0 0 28px; text-align: right; font-weight: 800; }
.prog-ovr.elite { color: #a48cff; } .prog-ovr.good { color: var(--good); } .prog-ovr.avg { color: var(--text); } .prog-ovr.low { color: var(--warn); }
.prog-delta { flex: 0 0 38px; text-align: right; font-size: 12px; font-weight: 700; }
.prog-delta.up { color: var(--good); } .prog-delta.down { color: var(--bad); }
.fit-row { display: flex; gap: 8px; flex-wrap: wrap; }
.fit-chip { display: flex; align-items: center; gap: 6px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; }
.fit-chip.cur { border-color: var(--team2); background: color-mix(in srgb, var(--team2) 14%, var(--bg2)); }
.fit-chip b { font-size: 13px; }
.fit-chip .ovr { font-size: 13px; padding: 1px 6px; min-width: 28px; }

.trait-row { display: flex; gap: 8px; flex-wrap: wrap; }
.trait-chip { background: linear-gradient(135deg, var(--team1), var(--team2)); color: #0b0e13; font-size: 12px; font-weight: 800; padding: 5px 11px; border-radius: 999px; }

.switch-btn { width: 100%; margin-top: 12px; }
.switch-list { display: flex; flex-direction: column; gap: 8px; }
.switch-card {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px;
  color: var(--text); cursor: pointer; font-family: inherit;
}
.switch-card:active { transform: scale(.99); }
.switch-card.cur { border-color: var(--team2); opacity: .7; cursor: default; }
.switch-card .sw-pos { flex: 1; font-weight: 800; font-size: 16px; display: flex; flex-direction: column; }
.switch-card .sw-pos small { font-weight: 500; color: var(--dim); font-size: 11px; }
.switch-card .ovr { font-size: 16px; padding: 3px 9px; }
.sw-go { color: var(--team1); font-size: 12px; font-weight: 700; min-width: 52px; text-align: right; }
.sw-cur { color: var(--dim); font-size: 12px; min-width: 52px; text-align: right; }
@media (hover: hover) { .switch-card:not(.cur):hover { border-color: var(--team1); } }

/* recruiting-class archetype picker */
.arch-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.arch-card {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 10px;
  text-align: left; color: var(--text); cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; gap: 4px; min-height: 44px;
}
.arch-card strong { font-size: 14px; color: var(--team2); }
.arch-card small { font-size: 11px; line-height: 1.3; }
.arch-card.on { border-color: var(--team2); background: color-mix(in srgb, var(--team2) 14%, var(--bg2)); }
@media (max-width: 380px) { .arch-grid { grid-template-columns: 1fr; } }

/* ============================================================
   GAMEPLAN
   ============================================================ */
/* scheme picker (gameplan) */
.scheme-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.scheme-chip { appearance: none; font-family: inherit; cursor: pointer; font-size: 12px; font-weight: 700;
  padding: 8px 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); color: var(--text); }
.scheme-chip.on { border-color: var(--team2); background: color-mix(in srgb, var(--team2) 16%, var(--bg2)); color: var(--team2); }
.scheme-chip:disabled { opacity: .5; cursor: default; }
.scheme-desc { margin: 2px 0 6px; }
.fam-warn { display: block; font-size: 12px; font-weight: 700; color: var(--warn); margin: 2px 0 6px; }
.slider-row { margin: 14px 0; }
.slider-row.disabled { opacity: .5; }
.sl-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--dim); margin-bottom: 6px; }
.sl-labels b { color: var(--text); font-size: 13px; }
input[type=range] { width: 100%; appearance: none; height: 6px; border-radius: 3px; background: var(--line); outline: none; }
input[type=range]::-webkit-slider-thumb { appearance: none; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--team1), var(--team2)); cursor: pointer; border: 2px solid #fff2; }
input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--team1); cursor: pointer; border: 2px solid #fff2; }

/* ============================================================
   RECRUITING / NIL
   ============================================================ */
.recruit-bar { display: flex; gap: 10px; }
.recruit-bar > div { flex: 1; text-align: center; }
.recruit-bar b { font-size: 20px; display: block; color: var(--team2); }
.recruit-bar small { font-size: 11px; }
/* NIL budget header (offseason NIL & Departures + NIL screen) */
.nil-budget-bar { display: flex; gap: 10px; }
.nil-budget-bar > div { flex: 1; text-align: center; }
.nil-budget-bar b { font-size: 20px; display: block; }
.nil-budget-bar b.up { color: var(--good); }
.nil-budget-bar b.down { color: var(--bad); }
.nil-budget-bar small { font-size: 11px; }
.needs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.needs-tbl td.nil-c { color: var(--team2); font-weight: 600; white-space: nowrap; }
@media (hover: hover) { .rec-name.tap:hover { color: var(--team2); } }
.rec-name.tap:active { opacity: .6; }
.rec-list { display: flex; flex-direction: column; gap: 8px; }
.rec-row { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.rec-stars { color: var(--team2); font-size: 12px; min-width: 64px; letter-spacing: -1px; }
.rec-name { flex: 1; font-weight: 600; font-size: 14px; display: flex; flex-direction: column; cursor: pointer; }
.rec-name small { font-weight: 400; }
.rec-lead { font-size: 12px; text-align: right; display: flex; flex-direction: column; min-width: 70px; }
.rec-lead.mine { color: var(--good); font-weight: 700; }

/* interest meter on the recruiting board — fixed bar width regardless of label */
.rec-meter { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; flex: 0 0 132px; width: 132px; }
.meter-line .meter-bar { width: auto; flex: 1 1 0; }
.meter-bar { width: 96px; height: 7px; background: var(--line); border-radius: 4px; overflow: hidden; }
.rec-meter small { white-space: nowrap; font-size: 10px; }
.meter-fill { display: block; height: 100%; border-radius: 4px; }
.meter-fill.good { background: #2f9e54; }
.meter-fill.avg { background: #b9892f; }
.meter-fill.low { background: #6b7686; }
.rec-meter small { font-size: 11px; text-align: right; color: var(--dim); }
.rec-meter small.mine { color: var(--good); font-weight: 800; }

/* recruit cards (board) — avatar/name + two grade badges + meter row */
.rec-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 11px 12px; display: flex; flex-direction: column; gap: 8px; }
.rec-card .rc-head { display: flex; align-items: flex-start; gap: 9px; }
.rec-card .rc-name { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.rec-card .rc-stars { color: #f0b429; font-size: 11px; letter-spacing: 1px; }
.rec-card .rc-name small { font-weight: 400; font-size: 11.5px; color: var(--dim); white-space: normal; }
.rc-grades { display: flex; gap: 7px; flex: 0 0 auto; }
.rc-grade { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.rc-grade .ovr { font-size: 16px; min-width: 40px; padding: 3px 7px; }
.rc-grade small { font-size: 8px; font-weight: 800; letter-spacing: .1em; color: var(--dim); }
.rc-grade.un .ovr { background: var(--bg2); color: var(--dim); border: 1px dashed var(--line); font-size: 12px; min-width: 0; }
.rc-note { font-size: 11.5px; color: var(--text); background: var(--bg2); border-radius: 8px; padding: 6px 9px; }
.rec-card .rc-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rec-card .rc-foot .rec-act { flex: 0 0 auto; }
.rec-card .rc-foot .rec-meter { flex: 1 1 140px; width: auto; align-items: flex-end; }
/* profile: two grade badges side by side */
.ph-ovr.ph-grades { flex-direction: row; gap: 12px; align-items: flex-start; }
.ph-grades .rc-grade .ovr { font-size: 20px; padding: 4px 9px; }
.ph-grades .rc-grade small { color: rgba(255,255,255,.8); }
.ph-grades .rc-grade.un .ovr { font-size: 14px; }

/* ── recruiting page layout (mockup) ── */
.rec-top { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.rec-sess { display: flex; align-items: center; gap: 11px; }
.rec-sess .rs-num { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; background: color-mix(in srgb, var(--good) 20%, var(--bg2)); color: var(--good); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; }
.rec-sess .rs-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rec-sess .rs-info small { font-size: 9px; font-weight: 800; letter-spacing: .12em; color: var(--dim); }
.rec-sess .rs-info b { font-size: 14px; }
.rec-sess .rs-adv { flex: 0 0 auto; font-weight: 800; letter-spacing: .04em; padding: 9px 16px; }
.rec-statcards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rsc { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 11px; display: flex; flex-direction: column; gap: 5px; }
.rsc-h { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; color: var(--dim); }
.rsc-v { font-size: 21px; font-weight: 800; line-height: 1; }
.rsc-v small { font-size: 12px; font-weight: 600; color: var(--dim); }
.rsc-bar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.rsc-bar span { display: block; height: 100%; background: var(--team2); }
.rsc-bar.nil span { background: var(--good); }
.rsc-sub { font-size: 10px; color: var(--dim); }
.rec-statboxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rsb { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 9px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.rsb b { font-size: 19px; font-weight: 800; line-height: 1.1; }
.rsb b small { font-size: 12px; font-weight: 600; color: var(--dim); }
.rsb > small { font-size: 8.5px; font-weight: 800; letter-spacing: .07em; color: var(--dim); }
.rec-actions-row { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.rac { background: var(--bg2); border: 1px solid var(--line); border-radius: 9px; padding: 7px 11px; color: var(--text); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; min-height: 36px; }
.rac:active { opacity: .6; }
.rac-pilot { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--dim); margin-left: auto; }
.rec-phase { margin-top: 10px; }
.rec-tabs { display: flex; gap: 4px; margin-top: 12px; overflow-x: auto; }
.rtab { background: none; border: none; border-radius: 9px; color: var(--dim); font-family: inherit; font-size: 13px; font-weight: 700; padding: 8px 13px; cursor: pointer; white-space: nowrap; }
.rtab.on { background: var(--card); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.rec-subctl { margin-top: 9px; }
.rec-sortlabel { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; color: var(--dim); margin: 12px 2px 8px; }
/* card refinements toward the mockup */
.rc-note { color: #e8b04a; background: color-mix(in srgb, #e8b04a 12%, var(--bg2)); border: 1px solid color-mix(in srgb, #e8b04a 26%, transparent); }
.rec-card .rc-foot .offer-btn { background: var(--good); border-color: var(--good); color: #06121e; font-weight: 800; }

/* ── green recruiting palette (mockup): vars set on BODY override the per-team
   inline --team2 and the :root Stadium-Night palette for everything in #app ── */
body.rec-theme {
  --bg: #091410; --bg2: #0e1d16; --card: #122319; --line: #20392b;
  --text: #e7efe9; --dim: #7e9489;
  --team1: #1c7a45; --team2: #2fb863; --good: #34d77f;
}
/* grade badges read green = good, amber = average, red = low (matches mockup) */
body.rec-theme .ovr.elite { background: #2fae57; color: #06140c; }
body.rec-theme .ovr.good { background: #1f7a3d; color: #fff; }
body.rec-theme .ovr.avg { background: #b8742a; color: #fff; }
body.rec-theme .ovr.low { background: #8a3b2a; color: #f0dcd4; }
body.rec-theme .rc-grade.un .ovr { background: var(--bg2); color: var(--dim); border: 1px dashed var(--line); }
/* active phase pill in gold, like the mockup's highlighted Transfer Portal */
body.rec-theme .rec-phase .seg-btn.on { background: #d9a81e; color: #1a1205; }
body.rec-theme .rec-phase .seg-btn.on small { opacity: .85; }

.rec-actions { display: flex; gap: 8px; margin-bottom: 14px; }
.rec-actions .btn { flex: 1; padding: 11px 4px; }
.nil-offer-btn { background: var(--bg2); border-color: var(--team2); }
.attr-l .pri { font-size: 10px; color: var(--team2); font-weight: 700; margin-left: 6px; }

/* recruiting control chips (cycle on tap) */
.rec-controls { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.ctl-chip {
  background: var(--bg2); border: 1px solid var(--line); color: var(--text);
  border-radius: 999px; padding: 0 14px; min-height: 40px; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.ctl-chip.on { background: linear-gradient(135deg, var(--team1), var(--team2)); color: #0b0e13; border-color: transparent; }

/* target star */
.target-star {
  background: none; border: none; color: var(--dim); font-size: 20px; cursor: pointer;
  padding: 2px 4px; min-width: 30px; line-height: 1; font-family: inherit;
}
.target-star.on { color: var(--team2); }
.target-star.inline { font-size: 18px; vertical-align: middle; }
.rec-natrank { color: var(--team2); font-weight: 800; font-size: 12px; margin-right: 6px; }
.cut-tag { font-size: 11px; font-weight: 800; color: var(--bad); min-width: 44px; text-align: center; }
.committed-to { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
.committed-to.mine { color: var(--good); }
.committed-note { text-align: center; font-weight: 700; }
.offer-btn { background: var(--bg2); border-color: var(--good); color: var(--good); }

/* inline recruit/NIL actions (no popups) */
.inline-action { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.num-input {
  width: 90px; background: var(--bg2); border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 0 12px; min-height: 40px; font-size: 15px; font-family: inherit;
}
.num-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.inline-action .btn { flex: 0 0 auto; }
.inline-action .dim { font-size: 12px; margin-left: auto; }
/* motivations (letter-graded) */
.motiv-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 2px; border-top: 1px solid var(--line); }
.motiv-row:first-of-type { border-top: none; }
.motiv-row.deal { background: color-mix(in srgb, var(--bad) 10%, transparent); border-radius: 8px; }
.motiv-l { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.deal-tag { font-size: 10px; font-weight: 800; color: var(--bad); }
.motiv-grade { font-weight: 800; font-size: 16px; min-width: 32px; text-align: center; }
.motiv-grade.good { color: #58d488; }
.motiv-grade.avg { color: var(--warn); }
.motiv-grade.low { color: var(--bad); }
.deal-warn { color: var(--bad); }
.intro-card { border-color: var(--team1); }
.intro-card h4 { color: var(--team2); }
.hub-nudge { width: 100%; text-align: left; cursor: pointer; font-family: inherit; color: var(--text); font-size: 14px; font-weight: 600; border-color: var(--team2); }
.hub-nudge:active { transform: scale(.99); }
.rec-tabs { margin-bottom: 10px; }
.scout-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.attr-pair { display: inline-flex; align-items: center; gap: 6px; }
.apg-arrow { color: var(--dim); font-size: 12px; }
.motiv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.pitch-label { font-size: 12px; color: var(--dim); font-weight: 700; }
.pitch-chip { min-height: 34px; padding: 0 11px; font-size: 12px; }
.pitch-num { color: var(--team2); font-weight: 800; }

.nil-info { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; margin: 6px 0 2px; }
.nil-info b { color: var(--team2); }
.nil-quick {
  appearance: none; font-family: inherit; cursor: pointer; font-size: 13px; font-weight: 600;
  background: var(--bg2); border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 8px 12px; min-height: 38px;
}
.nil-quick.lock { border-color: var(--team2); color: var(--team2); }
.nil-quick:disabled { opacity: .45; cursor: default; }
.nil-quick:not(:disabled):active { transform: scale(.97); }
.nil-quick-hint { margin-left: auto; }
/* recruiting point-effectiveness strip (replaces pitches) */
.fit-strip { display: flex; justify-content: space-between; align-items: center; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; margin: 10px 0 4px; font-size: 13px; font-weight: 600; }
.fit-strip b { font-size: 18px; }
.fit-strip b.good { color: var(--good); } .fit-strip b.avg { color: var(--text); } .fit-strip b.low { color: var(--bad); }
/* +/- steppers (recruit points + NIL) */
.stepper { margin: 10px 0; }
.stp-val {
  display: block; text-align: center; font-size: 20px; font-weight: 800; margin: 0 auto 8px;
  padding: 9px 12px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px;
}
.stp-val small { font-size: 12px; font-weight: 500; color: var(--dim); }
.stp-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.btn.xs { padding: 7px 10px; font-size: 12px; border-radius: 9px; min-height: 36px; font-weight: 700; flex: 1 1 auto; }
.btn.xs.stp { background: var(--bg2); }
.stp-foot { display: block; font-size: 12px; margin-top: 2px; }
/* NIL retention page: deal + sentiment cell */
.nil-cell { display: flex; flex-direction: column; align-items: flex-end; min-width: 74px; font-size: 13px; }
.nil-cell b { color: var(--team2); }
.nil-feel { font-size: 11px; font-weight: 700; }
.nil-feel.good { color: var(--good); }
.nil-feel.avg { color: var(--warn); }
.nil-feel.low { color: var(--bad); }
.rs-tag { font-size: 12px; min-width: 64px; text-align: right; }
/* NFL draft */
.dr-pick { font-size: 12px; font-weight: 800; color: var(--team2); white-space: nowrap; min-width: 78px; text-align: right; }
.dr-pick.fa { color: var(--dim); font-weight: 600; }
.rec-row.dr-undrafted { opacity: .6; }
.visit-head { margin: 14px 0 8px; font-size: 14px; }
.visit-head .dim { font-weight: 400; }
.visit-games { display: flex; flex-wrap: wrap; gap: 8px; }
.visit-row { font-size: 14px; display: flex; align-items: center; gap: 10px; }
.visit-row.dim { color: var(--dim); }
.rec-act { display: flex; align-items: center; gap: 6px; }
/* phones: two clean lines per recruit — ① star · name/meta · actions, ② interest meter full-width */
@media (max-width: 520px) {
  .rec-row { flex-wrap: wrap; row-gap: 7px; }
  .rec-row .rec-name { flex: 1 1 0; min-width: 0; }
  .rec-row .rec-name small { white-space: normal; }
  .rec-row .rec-meter { order: 10; flex: 1 1 100%; width: auto; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  .rec-row .meter-line { width: auto; flex: 1 1 100%; }  /* bar gets its own full row — no more size jumping */
  .rec-row .rec-meter small { flex: 1 1 auto; }
  .rec-row .rec-meter .nil-row-tag { flex: 1 1 auto; text-align: right; }
  .rec-row .rec-meter .meter-bar { width: auto; flex: 1 1 0; }
  .rec-row .rec-meter small { text-align: right; flex: 0 0 auto; white-space: normal; }
}
.offered-tag { color: var(--good); font-weight: 800; font-size: 15px; }
.alloc-input { width: 56px; min-height: 38px; padding: 0 6px; text-align: center; }
/* uniform offer box: same footprint whether "Offer" or "✓" */
.offer-box { min-width: 62px; padding: 0 8px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; }
.offer-box.offered { color: var(--good); border-color: var(--good); background: color-mix(in srgb, var(--good) 16%, var(--bg2)); font-weight: 800; }

/* ============================================================
   STANDINGS / RANKINGS
   ============================================================ */
.rank-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-top: 1px solid var(--line); }
.rank-row:first-child { border-top: none; }
.rank-row.mine { background: color-mix(in srgb, var(--team1) 16%, transparent); border-radius: 8px; }
.rk { font-weight: 800; color: var(--dim); min-width: 24px; text-align: center; }
.rk-rec { margin-left: auto; font-weight: 600; font-size: 14px; }
.conf-stand { margin-bottom: 16px; }
.conf-stand h4 { color: var(--team2); font-size: 14px; }
.conf-tag { background: var(--team1); color: #06121e; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 6px; }

/* awards */
.poty-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.poty { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.poty.mine { border-color: var(--team2); background: color-mix(in srgb, var(--team2) 12%, var(--card)); }
.poty small { text-transform: uppercase; letter-spacing: .5px; font-size: 10px; }
.poty-name { font-size: 17px; font-weight: 800; margin: 4px 0; }
.poty-sub { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; }
@media (max-width: 460px) { .poty-grid { grid-template-columns: 1fr; } }
.seg-btn.off { opacity: .4; }

/* ============================================================
   BRACKET
   ============================================================ */
/* conference-championship rows */
/* conference title-game cards (mobile-safe: stacked team lines, never overlap) */
.ccg-card { padding: 4px 10px; }
.ccg-game { padding: 9px 0; border-top: 1px solid var(--line); }
.ccg-game:first-child { border-top: none; }
.ccg-game.tap { cursor: pointer; }
.ccg-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.ccg-conf { font-size: 10px; font-weight: 800; letter-spacing: .5px; color: var(--dim); text-transform: uppercase; }
.ccg-head .sm { font-size: 11px; }
.ccg-line { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 14px; }
.ccg-line .chip { flex: 1; min-width: 0; }
.ccg-line .chip .crest, .ccg-line .chip .crest-img { flex: 0 0 auto; }
.ccg-line b { flex: 0 0 auto; font-size: 17px; font-weight: 800; min-width: 24px; text-align: right; }
.ccg-line.win { font-weight: 800; }
.ccg-line.win b { color: var(--good); }
/* visual playoff bracket */
.po-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
.po-bracket { display: flex; gap: 12px; min-width: max-content; padding-bottom: 6px; }
.po-round { flex: 0 0 215px; display: flex; flex-direction: column; }
.po-col { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 10px; }
.po-game { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 6px 9px; }
.po-game.tap { cursor: pointer; }
@media (hover: hover) { .po-game.tap:hover { border-color: var(--team2); } }
.po-team { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 13px; min-height: 28px; }
.po-team + .po-team { border-top: 1px solid var(--line); }
.po-team.win { font-weight: 800; }
.po-team.win .po-score { color: var(--good); }
.po-team.lose { opacity: .45; }
.po-team.tbd { opacity: .5; }
.po-seed { flex: 0 0 16px; text-align: right; font-size: 10px; font-weight: 800; color: var(--dim); }
.po-score { margin-left: auto; font-weight: 800; }
/* team dropdown (schedule) */
.team-select {
  width: 100%; background: var(--bg2); border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 0 12px; min-height: 44px; font-size: 15px; font-family: inherit;
  margin-bottom: 12px; appearance: auto;
}
.brk-h { font-size: 15px; color: var(--team2); margin-top: 6px; }
.rd-name { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--dim); margin-bottom: 8px; }
.brk-game { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.brk-game:first-of-type { border-top: none; }
.bg-team { flex: 1; display: flex; align-items: center; gap: 6px; }
.bg-team:last-child { justify-content: flex-end; }
.bg-team.win { font-weight: 800; }
.bg-team.lose { opacity: .45; }
.bg-vs { font-size: 11px; color: var(--dim); text-transform: uppercase; }
.champ-banner { text-align: center; font-size: 18px; font-weight: 800; padding: 18px; background: linear-gradient(135deg, var(--team1), var(--team2)); color: #0b0e13; border-radius: var(--radius); margin-top: 8px; }

/* ============================================================
   WEEK RESULTS
   ============================================================ */
.score-row { display: flex; align-items: center; gap: 8px; padding: 9px 4px; border-top: 1px solid var(--line); font-size: 14px; }
.score-row:first-child { border-top: none; }
.score-row.mine { background: color-mix(in srgb, var(--team1) 16%, transparent); border-radius: 8px; padding: 9px 8px; }
/* The matchup (away @ home) lives in its own flex zone with the @ centered, and
   all trailing tags (CONF / box-link) sit in a fixed-width tail — so every row
   lines up identically whether or not the game is a conference game. */
.sr-match { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.sr-match .sr-team { flex: 1 1 0; min-width: 0; }
.sr-match .sr-team:first-child { text-align: right; }
.sr-match .sr-team:last-child { text-align: left; }
.sr-team.win { font-weight: 800; }
.at { color: var(--dim); font-size: 12px; flex: 0 0 auto; }
.sr-tail { flex: 0 0 108px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.conf-tag { white-space: nowrap; }
.box-link { white-space: nowrap; }
.ooc-opt { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); }
.ooc-opt small { margin-left: auto; }
.ooc-opt .ooc-pick { flex: 0 0 auto; }

/* ============================================================
   OVERLAY: modals + toasts (live outside #app)
   ============================================================ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 1000; padding: 20px;
  background: rgba(0, 0, 0, .62); display: flex; align-items: center; justify-content: center;
  animation: fade .15s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; width: 100%; max-width: 380px;
}
.modal.wide { max-width: 460px; }
.modal-body { max-height: 64vh; overflow-y: auto; margin-top: 6px; }
.modal h3 { margin: 0 0 6px; font-size: 18px; }
.modal .hint { margin: 0 0 4px; }

/* Team needs & depth breakdown */
.needs-unit { font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); margin: 12px 0 4px; }
.needs-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.needs-tbl th { color: var(--dim); font-size: 11px; font-weight: 700; padding: 3px 4px; text-align: center; }
.needs-tbl th:first-child { text-align: left; }
.needs-tbl td { padding: 5px 4px; border-top: 1px solid var(--line); text-align: center; }
.needs-tbl td.np { text-align: left; font-weight: 800; }
.needs-tbl td.sr { color: var(--warn); }
.needs-tbl td.tot { font-weight: 700; }
.needs-tbl tr.need-row { background: rgba(255, 77, 79, 0.07); }
.need-badge { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; }
.need-badge.crit { background: var(--bad); color: #fff; }
.need-badge.mod { background: var(--warn); color: #1a1a1a; }
.need-crit { color: var(--bad); }
.need-thin { color: var(--warn); }

/* Recruiting sessions */
.sess-bar { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
/* row 1: session label + advance button side by side */
.sess-bar .sb-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.sess-bar .sb-row > div { display: flex; flex-direction: column; }
/* row 2: the four stats in ONE horizontal strip */
.sess-bar .sb-stats { display: flex; flex-direction: row; justify-content: space-between; gap: 6px; border-top: 1px solid var(--line); padding-top: 8px; }
.sb-stats span { text-align: center; flex: 1; min-width: 0; }
.sb-stats b { display: block; font-size: 15px; color: var(--team2); white-space: nowrap; }
.sb-stats small { font-size: 9px; text-transform: uppercase; letter-spacing: .4px; color: var(--dim); }
.sess-bar small { color: var(--dim); font-size: 11px; }
.potential-note { margin: -4px 0 12px; }

/* Offseason stage wizard */
.off-steps { display: flex; flex-wrap: nowrap; gap: 6px; margin-bottom: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
.off-steps::-webkit-scrollbar { display: none; }
.off-step { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: var(--bg2); color: var(--dim); border: 1px solid var(--line); white-space: nowrap; flex: 0 0 auto; }
.off-step.done { color: var(--good); border-color: var(--good); }
.off-step.on { background: var(--team1); border-color: var(--team1); color: #fff; }
.off-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; }
.off-nav .big { flex: 1; }
.rec-row.rs-on { background: rgba(52, 199, 89, 0.08); }
.warn-line { color: var(--warn); }
.committed-row { opacity: .85; }
.committed-row .committed-to { font-size: 12px; font-weight: 700; color: var(--dim); white-space: nowrap; }
.committed-row .committed-to.mine { color: var(--good); }
.seg-btn.off { opacity: .45; cursor: default; }
.obj-card small { color: var(--dim); text-transform: uppercase; letter-spacing: .5px; font-size: 10px; }
.obj-row { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 0; }
.obj-row .obj-xp { margin-left: auto; color: var(--team2); font-size: 11px; font-weight: 700; }
.obj-wrap { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 6px; }
/* PWA install banner */
.install-banner { position: fixed; left: 10px; right: 10px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 200; display: flex; align-items: center; gap: 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.55); font-size: 14px; }
.install-banner span { flex: 1; }
.install-banner .ib-x { background: none; border: none; color: var(--dim); font-size: 16px; padding: 4px 8px; cursor: pointer; }
.cr-stats { flex: 1; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.cr-stats b { color: var(--team2); }
.cr-stats small { color: var(--dim); font-size: 10px; }
.class-note { color: var(--team2); font-weight: 600; }
.dev-btn { background: none; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; padding: 3px 7px; cursor: pointer; opacity: .55; }
.dev-btn:active { opacity: 1; }
/* overlay dropdown chips (menu floats over content, nothing reflows) */
.dd { position: relative; display: inline-block; }
.dd-menu { display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 80; min-width: 150px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 4px; box-shadow: 0 10px 28px rgba(0,0,0,.5); }
.dd.open .dd-menu { display: flex; flex-direction: column; }
.dd-opt { text-align: left; background: none; border: none; color: var(--text); font-size: 13px; padding: 9px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.dd-opt.on { color: var(--team2); font-weight: 800; }
.dd-sec { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--dim); padding: 8px 12px 2px; }
.btn.danger { border-color: var(--bad); color: var(--bad); }
.btn.danger small { color: var(--dim); font-weight: 400; }
@media (hover: hover) { .dd-opt:hover { background: var(--line); } }
/* depth-chart peek on recruit rows */
.meter-line { display: flex; align-items: center; gap: 6px; width: 100%; justify-content: flex-end; }
.dc-peek { background: var(--bg2); border: 1px solid var(--line); border-radius: 7px; color: var(--dim); font-size: 11px; line-height: 1; padding: 4px 6px; cursor: pointer; flex: 0 0 auto; }
.dc-peek:active { background: var(--line); }
/* NIL-mode row tag */
.nil-row-tag { font-size: 10px; color: var(--team2); white-space: nowrap; }

/* recruiting auto-task bar */
.auto-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px; }
.auto-pilot { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin-left: auto; cursor: pointer; }
.auto-pilot input { width: 17px; height: 17px; accent-color: var(--team2); }
.auto-pilot small { font-size: 10px; }
/* top suitors: ranked rows with interest bars */
.suit-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.suit-row:first-of-type { border-top: none; }
.suit-row .suit-rk { flex: 0 0 16px; font-size: 11px; font-weight: 800; color: var(--dim); text-align: center; }
.suit-row .chip { flex: 0 0 132px; min-width: 0; }
.suit-row .suit-bar { flex: 1 1 0; height: 9px; background: var(--line); border-radius: 5px; overflow: hidden; }
.suit-row .suit-fill { display: block; height: 100%; border-radius: 5px; background: var(--dim); }
.suit-row .suit-fill.good { background: var(--good); }
.suit-row .suit-fill.avg { background: var(--warn); }
.suit-row .suit-fill.low { background: var(--bad); }
.suit-row .suit-num { flex: 0 0 26px; text-align: right; font-size: 13px; }
.suit-row.mine { background: color-mix(in srgb, var(--team2) 7%, transparent); border-radius: 8px; }
.suit-row.mine .suit-num { color: var(--team2); }
/* queued NIL tag */
.queued-tag { display: block; color: var(--warn); font-weight: 700; font-size: 10px; }
/* board-row pts up/down arrows */
.alloc-arrows { display: flex; flex-direction: column; gap: 2px; }
.alloc-step { background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font-size: 9px; line-height: 1; padding: 4px 6px; min-height: 17px; cursor: pointer; }
.alloc-step:active { background: var(--line); }
.rs-btn.on { border-color: var(--good); color: var(--good); }
.develop-all-camp, .roster-link { width: 100%; margin-top: 8px; }
.neg-card { padding: 12px 14px; }
.neg-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.neg-card .inline-action { margin: 8px 0; }
.neg-foot { display: flex; gap: 8px; }
.neg-foot .btn { flex: 1; }
.dc-starter { color: var(--good); }
/* depth-chart compare popup */
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-tbl { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.cmp-tbl th { color: var(--dim); font-size: 11px; font-weight: 700; padding: 5px 8px; text-align: right; border-bottom: 1px solid var(--line); }
.cmp-tbl td { padding: 7px 8px; text-align: right; border-bottom: 1px solid var(--line); }
.cmp-tbl th:nth-child(-n+2), .cmp-tbl td:nth-child(-n+2) { text-align: left; }
.cmp-tbl td.bs-name { font-weight: 600; }
.cmp-tbl td.bs-name small { color: var(--dim); font-weight: 400; margin-left: 4px; }
.cmp-tbl tr.mine td { background: color-mix(in srgb, var(--team2) 18%, transparent); font-weight: 700; }
.board-seg { margin-bottom: 8px; }
.board-seg .seg-btn small { opacity: 0.8; font-weight: 700; }
.modal-input { width: 100%; margin: 12px 0 2px; }
.modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.modal-actions .btn { flex: 1; min-height: 44px; }
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(16px);
  background: var(--bg2); border: 1px solid var(--line); color: var(--text);
  padding: 12px 18px; border-radius: 12px; font-size: 14px; font-weight: 600;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .55); z-index: 1100; max-width: 90vw; text-align: center;
  opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.good { border-color: var(--good); }
.toast.bad { border-color: var(--bad); }

/* ============================================================
   DESKTOP / TABLET
   ============================================================ */
@media (min-width: 720px) {
  body { font-size: 17px; }
  .team-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .role-grid { flex-direction: row; }
  .role-grid .role-card { flex: 1; }
  .tile-grid { grid-template-columns: repeat(6, 1fr); }
  .hero { padding: 16vh 8px; }
  .logo { font-size: 52px; }
}
@media (hover: hover) {
  .btn:hover { filter: brightness(1.12); }
  .tile:hover, .team-card:hover, .role-card:hover { border-color: var(--team1); }
}

/* Always-available manual save (game autosaves too; this is the reassurance button) */
.save-now { display: none; position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 10px; z-index: 90; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); font-size: 14px; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,.4); cursor: pointer; padding: 0; }
.save-now:active { transform: scale(.92); }
body.in-game .save-now { display: flex; }
body.in-game .hh-top { padding-right: 36px; }

/* injuries */
.inj-tag { color: var(--bad); font-weight: 700; }
.inj-tag.rs { color: var(--dim); }
/* settings */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
.set-row .set-label { font-weight: 700; }
.set-row .set-label small { display: block; font-weight: 400; color: var(--dim); margin-top: 2px; }
.set-toggle { min-width: 56px; }
/* Save slots */
.slot-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border: 1px solid var(--line, rgba(255,255,255,.1)); border-radius: 12px; margin-top: 8px; }
.slot-row.active { border-color: var(--good); background: rgba(111,207,151,.07); }
.slot-row.empty { opacity: .85; border-style: dashed; }
.slot-info { min-width: 0; }
.slot-info b { display: block; font-size: 13px; }
.slot-info small { display: block; color: var(--dim); font-size: 11px; margin-top: 2px; }
.slot-acts { display: flex; gap: 6px; flex: 0 0 auto; }
.btn.danger { color: var(--bad, #e5534b); }
.set-toggle.good { border-color: var(--good); color: var(--good); }
/* gameplan slider readout */
.sl-val { color: var(--team2); font-weight: 800; margin-left: 4px; }
/* contrast pass: text over gradient heroes */
.hub-head h2, .hub-head .role-pill, .hub-head .season-pill, .hh-stats b, .hh-stats small,
.player-hero h2, .player-hero .ph-sub { text-shadow: 0 1px 3px rgba(0,0,0,.55); }

/* coach-points-to-spend badge on the hub Staff tile */
.tile { position: relative; }
.tile-badge { position: absolute; top: 6px; right: 8px; background: var(--good); color: #06121e; font-size: 11px; font-weight: 800; min-width: 18px; height: 18px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }

/* the HC role pill opens the staff screen */
button.role-pill { cursor: pointer; font-family: inherit; border: 1px solid rgba(255,255,255,.18); }
.pill-badge { background: var(--good); color: #06121e; font-size: 10px; font-weight: 800; min-width: 16px; height: 16px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; vertical-align: middle; }

/* custom steppers own increment/decrement — kill the native number spinners
   that glitched on desktop */
.num-input::-webkit-inner-spin-button, .num-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.num-input { -moz-appearance: textfield; appearance: textfield; }
.dr-seg { margin-bottom: 8px; }

.dd-opt.dd-clear { color: var(--bad); font-weight: 700; border-bottom: 1px solid var(--line); }
.needs-tbl .rec-c { text-align: center; }
.needs-tbl .rec-c.good { color: var(--good); font-weight: 700; }

.late-card { border-color: var(--team2); }
.late-card .rec-row { gap: 8px; }
.btn.good { border-color: var(--good); color: var(--good); }

.rs-incoming { opacity: .8; }
.rs-inc-head { margin: 14px 0 6px; font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .4px; }

/* recruit overhaul: outlook meter, sliders, race bars, factors */
.cm-wrap { margin: 10px 0 4px; }
.cm-label { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.cm-bar { display: flex; gap: 4px; }
.cm-seg { flex: 1; height: 8px; border-radius: 4px; background: var(--bg2); }
.cm-seg.on.t1 { background: var(--bad); } .cm-seg.on.t2 { background: #e08840; }
.cm-seg.on.t3 { background: var(--warn); } .cm-seg.on.t4, .cm-seg.on.t5 { background: var(--good); }
.rs-row { margin: 12px 0 4px; }
.rs-head { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .4px; margin-bottom: 4px; }
.rs-head b { font-size: 14px; }
.rs-ctrl { display: flex; align-items: center; gap: 6px; }
.rec-slider { flex: 1 1 100%; min-width: 0; accent-color: var(--team2); height: 28px; }
.rs-ctrl .rs-nudge, .rs-ctrl .rs-clear {
  flex: 0 0 auto; width: 28px; height: 26px; min-width: 0; padding: 0;
  font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; border-radius: 8px;
}
.race-wrap { margin-top: 14px; }
.race-row { display: flex; align-items: center; gap: 8px; margin: 5px 0; font-size: 12px; }
.race-name { width: 52px; font-weight: 700; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.race-row.you .race-name { color: var(--team2); }
.race-track { flex: 1; height: 8px; background: var(--bg2); border-radius: 999px; overflow: hidden; }
.race-fill { display: block; height: 100%; background: var(--dim); border-radius: 999px; }
.race-row.you .race-fill { background: linear-gradient(90deg, var(--team1), var(--team2)); }
.race-pct { width: 36px; text-align: right; font-weight: 700; }
.factors-card { background: var(--bg2); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.factor-row { font-size: 13px; padding: 3px 0; }

/* exact commit-% readout */
.cm-big { display: flex; align-items: baseline; gap: 8px; }
.cm-big b { font-size: 30px; line-height: 1; }
.cm-big small { color: var(--dim); text-transform: uppercase; letter-spacing: .5px; font-size: 10px; }
.cm-track { height: 10px; background: var(--bg2); border-radius: 999px; overflow: hidden; margin: 6px 0 4px; }
.cm-fill { display: block; height: 100%; background: var(--warn); border-radius: 999px; transition: width .15s; }
.cm-fill.hot { background: var(--good); }
.pct-chip { color: var(--bad); }
.pct-chip.warm { color: var(--warn); }
.pct-chip.hot { color: var(--good); }

/* ===== STADIUM NIGHT hub ===== */
.microlabel { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.microlabel.accent { color: var(--team2); }

.hub-hero {
  position: relative; border-radius: 18px; padding: 14px 16px 18px; margin-bottom: 12px; overflow: hidden;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 18px, rgba(255,255,255,0) 18px 36px),
    linear-gradient(150deg, color-mix(in srgb, var(--team1) 72%, #000) 0%, color-mix(in srgb, var(--team1) 38%, #000) 58%, #0b0e13 100%);
  border: 1px solid rgba(255,255,255,.07);
}
.hub-hero .hh-top { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.hh-spacer { flex: 1; }
.hero-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--team2); text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.hero-name { margin: 4px 0 14px; font-size: clamp(26px, 8vw, 38px); line-height: 1.0; font-weight: 900; text-transform: uppercase; letter-spacing: .01em; text-shadow: 0 2px 6px rgba(0,0,0,.55); }
.hero-bottom { display: flex; align-items: flex-end; justify-content: space-between; }
.hero-rec b { display: block; font-size: 30px; line-height: 1; font-weight: 900; text-shadow: 0 2px 5px rgba(0,0,0,.5); }
.hero-rec small, .hero-ovr small { font-size: 9px; font-weight: 800; letter-spacing: .14em; color: rgba(255,255,255,.65); }
.hero-ovr { background: var(--team2); color: #10130a; border-radius: 14px; padding: 8px 14px; text-align: center; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.hero-ovr b { display: block; font-size: 26px; line-height: 1; font-weight: 900; }
.hero-ovr small { color: rgba(0,0,0,.55); }

.stat3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.stat3 > div { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 6px; text-align: center; }
.stat3 b { display: block; font-size: 22px; font-weight: 900; }
.stat3 small { font-size: 9px; font-weight: 800; letter-spacing: .14em; color: var(--dim); }

.prog-card .op-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.seg-pills { display: flex; gap: 4px; margin-bottom: 6px; }
.seg-pill { flex: 1; height: 7px; border-radius: 4px; background: var(--bg2); }
.seg-pill.on { background: color-mix(in srgb, var(--team1) 60%, var(--good)); }

.upnext { border: 1px solid color-mix(in srgb, var(--team2) 55%, transparent); }
.un-row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.un-row h3 { margin: 0; font-size: 20px; font-weight: 900; letter-spacing: .02em; }
.un-open { font-weight: 800; }

.advance-bar {
  width: 100%; margin: 14px 0 16px; padding: 15px; border: none; border-radius: 14px; cursor: pointer;
  background: var(--team2); color: #10130a; font-family: inherit; font-size: 16px; font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.advance-bar:active { transform: scale(.985); }
.adv-arrow { float: right; }

.nav-sec { margin: 14px 0 4px; }
.nav-sec .microlabel { display: block; margin: 0 2px 6px; }
.nav-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 12px;
  color: var(--text); font-family: inherit; font-size: 14px; font-weight: 700; margin-bottom: 6px;
}
.nav-row .ni { width: 22px; text-align: center; }
.nav-row .nl { flex: 1; }
.nav-row .chev { color: var(--dim); font-size: 16px; }
.nav-row:active { background: var(--bg2); }

/* ===== STADIUM NIGHT — global pass =====
   The hub's design language applied app-wide via the shared components:
   darker night palette, letterspaced microlabel section titles, solid
   accent CTAs/chips, striped team-color heroes. */
:root {
  --bg: #0b0e13;
  --bg2: #131822;
  --card: #171d27;
  --line: #252e3b;
}

/* screen titles: stadium-marquee uppercase */
.bar h2 { text-transform: uppercase; letter-spacing: .08em; font-weight: 900; font-size: 16px; }

/* card section titles become microlabels (buttons/values inside stay normal) */
.card > h4 {
  font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--dim); margin: 0 0 10px;
}
.card > h4 b, .card > h4 .dim { letter-spacing: normal; }
.card > h4 .btn, .card > h4 button { text-transform: none; letter-spacing: normal; }
.card > h5, .card h5 { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; color: var(--dim); }
.card > small:first-child, .card small.microlabel { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }

/* primary actions: the ADVANCE-bar accent, everywhere */
.btn.primary {
  background: var(--team2); border: none; color: #10130a;
  font-weight: 800; box-shadow: 0 3px 10px rgba(0,0,0,.3);
}
.btn.primary.big { text-transform: uppercase; letter-spacing: .06em; }

/* active chips: solid accent with dark text */
.pos-chip.on, .ctl-chip.on, .dd-btn.on { background: var(--team2); color: #10130a; border-color: transparent; background-image: none; }
.seg-btn.on { background: var(--card); color: var(--team2); font-weight: 800; }

/* heroes (player + recruit) get the night-stripe texture + marquee names */
.player-hero { position: relative; overflow: hidden; }
.player-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 18px, rgba(255,255,255,0) 18px 36px),
    linear-gradient(160deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%);
}
.player-hero > * { position: relative; }
.player-hero h2 { text-transform: uppercase; font-weight: 900; letter-spacing: .01em; }

/* tables pick up the microlabel header treatment */
.needs-tbl th, table th { font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }

/* feed + list rows: slightly tighter night cards */
.rec-row, .p-row, .dc-row { border-radius: 12px; }

.ts-grid.ts-empty b { color: var(--dim); font-weight: 700; }

/* draft: your players highlighted in team color (no YOUR PLAYER tag) */
.dr-mine-name { color: color-mix(in srgb, var(--team1) 55%, #fff); font-weight: 800; }
/* recruiting row quick panel */
.rec-row.open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.row-quick { background: var(--bg2); border: 1px solid var(--line); border-top: none; border-radius: 0 0 12px 12px; padding: 10px 12px; margin: -6px 0 8px; }
.rq-line { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.rq-line .microlabel { width: 86px; flex: 0 0 auto; }
.rq-line .microlabel b { font-size: 13px; letter-spacing: normal; color: var(--text); margin-left: 4px; }
.rq-btns { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.rq-lockout { font-size: 11.5px; line-height: 1.35; color: var(--bad, #e0564a); background: color-mix(in srgb, var(--bad, #e0564a) 12%, var(--bg2)); border: 1px solid color-mix(in srgb, var(--bad, #e0564a) 35%, transparent); border-radius: 8px; padding: 7px 9px; margin: 2px 0 8px; }
.row-prof { font-size: 16px; }

/* sliders: small team-color thumbs on a thin track */
.rec-slider { -webkit-appearance: none; appearance: none; background: transparent; }
.rec-slider::-webkit-slider-runnable-track { height: 5px; background: var(--bg2); border-radius: 3px; }
.rec-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5.5px; border-radius: 50%; background: color-mix(in srgb, var(--team1) 75%, #fff); border: none; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.rec-slider::-moz-range-track { height: 5px; background: var(--bg2); border-radius: 3px; }
.rec-slider::-moz-range-thumb { width: 16px; height: 16px; border: none; border-radius: 50%; background: color-mix(in srgb, var(--team1) 75%, #fff); }
/* lock-in tick line over the NIL track */
.rs-track-wrap { position: relative; flex: 1 1 100%; min-width: 0; display: flex; }
.rs-track-wrap .rec-slider { flex: 1 1 100%; }
.rs-tick { position: absolute; top: 50%; transform: translateY(-50%); width: 2px; height: 14px; background: var(--good); border-radius: 1px; pointer-events: none; }
/* quick panel drops down */
.row-quick { animation: rqDrop .16s ease-out; transform-origin: top; overflow: hidden; }
@keyframes rqDrop { from { opacity: 0; transform: scaleY(.6); } to { opacity: 1; transform: scaleY(1); } }
/* board bar = commit % */
.meter-fill.lo { background: var(--bad); }
.meter-fill.mid { background: var(--warn); }
.meter-fill.hi { background: var(--good); }

/* sliders, final: thin track, SMALL solid team-color thumb */
input[type=range].rec-slider { accent-color: var(--team1); height: 20px; -webkit-appearance: none; appearance: none; background: transparent; }
input[type=range].rec-slider::-webkit-slider-runnable-track { height: 5px; background: var(--bg2); border-radius: 3px; }
input[type=range].rec-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; margin-top: -3.5px; border-radius: 50%; background: var(--team1); border: 1.5px solid rgba(255,255,255,.55); box-shadow: 0 1px 3px rgba(0,0,0,.5); }
input[type=range].rec-slider::-moz-range-track { height: 5px; background: var(--bg2); border-radius: 3px; }
input[type=range].rec-slider::-moz-range-thumb { width: 12px; height: 12px; border: 1.5px solid rgba(255,255,255,.55); border-radius: 50%; background: var(--team1); }
/* pre-offer "interest" look */
.meter-fill.like { background: color-mix(in srgb, var(--team1) 70%, #fff); opacity: .85; }
.pct-chip.like { color: color-mix(in srgb, var(--team1) 60%, #fff); }
.cm-like { margin-left: auto; display: flex; align-items: baseline; gap: 4px; color: var(--dim); }
.cm-like b { font-size: 18px; color: var(--text); }
.cm-like small { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }

/* slider tracks must be VISIBLE on the card background */
input[type=range].rec-slider::-webkit-slider-runnable-track { background: rgba(255,255,255,.13); }
input[type=range].rec-slider::-moz-range-track { background: rgba(255,255,255,.13); }
/* race: your school's name in your color, wider names */
.race-name { width: 76px; }
.race-row.you .race-name { color: color-mix(in srgb, var(--team1) 65%, #fff); font-weight: 800; }
.rq-race { margin-top: 10px; }
.rq-race .race-row { font-size: 11px; margin: 4px 0; }

/* filters: collapsible categories with single-check rows */
.fmenu { min-width: 210px; max-height: 70vh; overflow-y: auto; }
.fsec { border-top: 1px solid var(--line); }
.fsec-head { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: none; color: var(--text); font-family: inherit; font-size: 13px; font-weight: 700; padding: 10px 12px; cursor: pointer; }
.fsec-head .fsec-cur { margin-left: auto; color: var(--team2); font-weight: 800; font-size: 12px; }
.fsec-head .chev { color: var(--dim); transition: transform .12s; }
.fsec.open .fsec-head .chev { transform: rotate(180deg); }
.fsec-body { display: none; }
.fsec.open .fsec-body { display: block; }
.fopt { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; color: var(--text); font-family: inherit; font-size: 13px; padding: 9px 12px 9px 16px; cursor: pointer; text-align: left; }
.fopt:active { background: var(--bg2); }
.fcheck { width: 16px; height: 16px; flex: 0 0 auto; border: 1.5px solid var(--line); border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #10130a; }
.fopt.on .fcheck { background: var(--team2); border-color: var(--team2); font-weight: 900; }
.race-name { display: inline-flex; align-items: center; gap: 4px; }

.race-nil { width: 64px; text-align: right; font-size: 10px; font-weight: 700; color: var(--warn); flex: 0 0 auto; }
.race-nil.dim { color: var(--dim); font-weight: 400; }

.race-row.won .race-name { color: var(--good); font-weight: 800; }
.race-row.won .race-fill { background: var(--good); }

/* halftime adjustments */
.half-score .hs-line { display: flex; justify-content: space-between; align-items: center; font-size: 16px; margin: 4px 0; }
.half-score .hs-line b:last-child { font-size: 22px; }
.half-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.half-opt { display: flex; flex-direction: column; gap: 2px; text-align: left; background: var(--bg2); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; color: var(--text); font-family: inherit; cursor: pointer; }
.half-opt .ho-icon { font-size: 20px; }
.half-opt b { font-size: 14px; }
.half-opt small { color: var(--dim); font-size: 11px; line-height: 1.25; }
.half-opt.on { border-color: var(--team2); background: color-mix(in srgb, var(--team2) 14%, var(--bg2)); }
.half-opt.on b { color: var(--team2); }
.half-straight { display: block; margin: 8px auto 0; }
/* halftime stat panel */
.ht-stats .ht-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.ht-stats .ht-head span { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.ht-stats .ht-head b { font-size: 13px; max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-row { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: 3px 0; font-size: 13px; }
.ht-row b { text-align: center; color: var(--dim); font-variant-numeric: tabular-nums; }
.ht-row b.win { color: var(--text); }
.ht-row .ht-lbl { text-align: center; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); }
.ht-perfs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
.ht-perf { font-size: 11px; line-height: 1.35; color: var(--text); margin: 2px 0; }
.ht-perf small { font-weight: 800; font-size: 9px; letter-spacing: .1em; color: var(--dim); margin-right: 3px; }