/* ── KC Stix Defensive Situations ──
   Theme: "under the lights" — deep navy night game, steel & ice accents.
   Display: Barlow Condensed (jersey/scoreboard). Body: Barlow. */

:root {
  --navy-deep: #0E1830;
  --navy: #16233F;
  --navy-card: #1B2A4A;
  --steel: #C7CEDA;
  --ice: #8BB8E8;
  --pale: #C5D9EF;
  --muted: #7f90ac;
  --line: rgba(199, 206, 218, 0.14);
  --green: #2D7A3A;
  --red: #D64545;
  --gold: #FFD700;
  --ok: #5cb85c;
  --radius: 12px;
  --disp: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--body);
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(139, 184, 232, 0.10), transparent 60%),
    linear-gradient(170deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
#app { max-width: 560px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; }

button { font-family: inherit; cursor: pointer; }
button:active { transform: scale(0.97); }
input, select { font-family: inherit; }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── Type helpers ── */
.disp { font-family: var(--disp); letter-spacing: 0.04em; }
.eyebrow { font-family: var(--disp); font-weight: 700; font-size: 13px; letter-spacing: 0.22em; color: var(--ice); text-transform: uppercase; }

/* ── Buttons ── */
.btn { border: 1px solid var(--line); background: rgba(255,255,255,0.05); color: var(--pale);
  border-radius: 9px; padding: 10px 18px; font-size: 14px; font-weight: 600; }
.btn-primary { border: none; background: linear-gradient(135deg, #3A5A8C, var(--ice)); color: var(--navy);
  font-family: var(--disp); font-weight: 800; font-size: 17px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 13px 34px; border-radius: 10px; box-shadow: 0 4px 20px rgba(139,184,232,0.25); }
.btn-ghost { background: none; border: none; color: var(--ice); font-size: 13px; text-decoration: underline; }
.btn-pill { padding: 6px 14px; border-radius: 7px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); background: transparent; color: var(--pale); }
.btn-pill.active { border-color: var(--ice); background: rgba(139,184,232,0.14); color: #fff; }
.btn-pill.active.quiz { border-color: var(--gold); background: rgba(255,215,0,0.10); }
.btn-icon { padding: 6px 10px; border-radius: 7px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; }
.btn-icon.active { border-color: var(--gold); color: var(--gold); background: rgba(255,215,0,0.08); }

/* ── Splash / Login / Setup ── */
.center-screen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 28px 22px; text-align: center; }
.shield { width: min(46vw, 190px); filter: drop-shadow(0 10px 28px rgba(0,0,0,0.55)); margin-bottom: 18px; }
.brand-title { font-family: var(--disp); font-weight: 800; font-size: 40px; letter-spacing: 0.10em; line-height: 1; }
.brand-title .x { color: var(--ice); }
.brand-sub { margin-top: 6px; margin-bottom: 30px; }
.pin-input { width: 200px; padding: 14px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.07); color: #fff; font-family: var(--disp); font-weight: 700;
  font-size: 32px; text-align: center; letter-spacing: 0.45em; margin: 10px 0 18px; }
.pin-input::placeholder { letter-spacing: 0.1em; font-size: 16px; color: var(--muted); font-family: var(--body); font-weight: 400; }
.error { background: rgba(214,69,69,0.14); border: 1px solid var(--red); color: #ff9d9d;
  border-radius: 9px; padding: 9px 16px; font-size: 13px; margin-bottom: 14px; max-width: 340px; }
.sync-badge { margin-top: 26px; font-size: 11px; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }
.sync-badge b { color: var(--pale); }

/* Setup */
.setup { padding: 26px 20px 40px; }
.setup .shield-sm { width: 96px; display: block; margin: 0 auto 14px; }
.setup h1 { font-family: var(--disp); font-weight: 800; font-size: 26px; letter-spacing: 0.12em; text-align: center; }
.setup .sub { text-align: center; font-size: 12.5px; color: var(--ice); margin: 4px 0 20px; }
.field-label { display: block; font-family: var(--disp); font-weight: 700; font-size: 13px; letter-spacing: 0.16em; color: var(--ice); margin-bottom: 5px; }
.setup input, .setup select { padding: 9px 11px; border-radius: 8px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.06); color: #fff; font-size: 14px; }
.setup select { background: var(--navy-deep); color: var(--pale); }
.coach-pin { width: 100%; text-align: center; letter-spacing: 0.5em; font-size: 18px; margin-bottom: 18px; }
.roster-row { display: flex; gap: 6px; margin-bottom: 7px; }
.roster-row input:first-child { flex: 2.2; }
.roster-row input:nth-child(2) { flex: 1; text-align: center; letter-spacing: 0.3em; }
.roster-row select { flex: 1; }
.add-row { width: 100%; padding: 9px; border-radius: 8px; border: 1px dashed rgba(199,206,218,0.35);
  background: transparent; color: var(--ice); font-size: 13px; margin: 4px 0 20px; }

/* ── App header ── */
.hdr { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px; background: rgba(0,0,0,0.32); border-bottom: 2px solid #3A5A8C; }
.hdr-id { display: flex; align-items: center; gap: 9px; min-width: 0; }
.hdr-id img { height: 40px; }
.hdr-name { font-family: var(--disp); font-weight: 800; font-size: 18px; letter-spacing: 0.06em; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-rank { font-size: 10.5px; color: var(--ice); margin-top: 2px; }
.hdr-actions { display: flex; gap: 5px; align-items: center; flex-shrink: 0; }

/* ── Scoreboard (signature) ── */
.scoreboard { display: flex; align-items: stretch; justify-content: space-between; gap: 6px;
  margin: 10px 14px 0; padding: 8px 10px; border-radius: 10px;
  background: linear-gradient(180deg, #0c1526, #101c33); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
.sb-cell { flex: 1; text-align: center; padding: 2px 4px; border-right: 1px dashed var(--line); }
.sb-cell:last-child { border-right: none; }
.sb-v { font-family: var(--disp); font-weight: 800; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.sb-l { font-size: 8.5px; letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase; margin-top: 3px; }
.sb-v.hot { color: var(--gold); } .sb-v.fire { color: #FF6347; }
.sb-rank { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sb-rank .emoji { font-size: 17px; line-height: 1; }
.sb-rank .rname { font-family: var(--disp); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; margin-top: 2px; }
.sb-rank .rnext { font-size: 8px; color: var(--muted); margin-top: 1px; }

/* ── Situation picker & nav ── */
.picker-wrap { padding: 10px 14px 4px; position: relative; }
.picker-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 9px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.05); color: #fff; font-size: 14px; font-weight: 600; text-align: left; }
.picker-btn .sub { color: var(--pale); font-weight: 400; }
.picker-btn .caret { font-size: 10px; color: var(--muted); }
.menu { position: absolute; z-index: 60; left: 14px; right: 14px; top: 56px; max-height: 58vh; overflow-y: auto;
  background: var(--navy-card); border: 1px solid #3A5A8C; border-radius: 12px; box-shadow: 0 14px 44px rgba(0,0,0,0.6); }
.menu-sec { padding: 7px 13px; font-family: var(--disp); font-weight: 700; font-size: 12px; letter-spacing: 0.16em;
  color: var(--ice); text-transform: uppercase; background: rgba(0,0,0,0.22); border-bottom: 1px solid var(--line); position: sticky; top: 0; }
.menu-item { display: block; width: 100%; padding: 10px 13px; border: none; text-align: left; font-size: 13.5px;
  background: transparent; color: var(--pale); border-bottom: 1px solid rgba(255,255,255,0.03); }
.menu-item.active { background: rgba(139,184,232,0.13); color: var(--ice); font-weight: 600; }
.nav-row { display: flex; justify-content: space-between; align-items: center; padding: 2px 14px; }
.nav-row button { background: none; border: none; color: var(--ice); font-weight: 700; font-size: 13px; padding: 6px 8px; }
.nav-row button:disabled { color: rgba(255,255,255,0.18); cursor: default; }
.nav-row .count { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Field ── */
.field-wrap { padding: 4px 10px 0; }
.field-wrap svg { width: 100%; display: block; border-radius: 14px; }
@keyframes arrowIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes keyPulse { 0%,100% { r: 16; } 50% { r: 20; } }
@keyframes runnerPulse { 0%,100% { opacity: 0.8; } 50% { opacity: 1; } }
.arrow { opacity: 0; animation: arrowIn 0.4s ease forwards; }
.pos-key { animation: keyPulse 1.5s ease infinite; }
.runner { animation: runnerPulse 2s ease infinite; }

/* ── Assignments list ── */
.body-scroll { flex: 1; overflow-y: auto; padding: 6px 14px 28px; }
.assign-row { display: flex; gap: 8px; align-items: flex-start; padding: 7px 8px; border-radius: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.035); cursor: pointer; }
.assign-row.fielder { background: rgba(139,184,232,0.06); }
.assign-tag { min-width: 30px; height: 22px; border-radius: 5px; background: #263B5E; color: var(--pale);
  display: flex; align-items: center; justify-content: center; font-family: var(--disp); font-weight: 700; font-size: 12px; margin-top: 1px; }
.assign-row.fielder .assign-tag { background: var(--navy-card); color: var(--ice); border: 1px solid #3A5A8C; }
.assign-txt { font-size: 13px; line-height: 1.45; color: rgba(255,255,255,0.72); }
.detail { margin-top: 8px; padding: 12px 14px; border-radius: 11px; background: rgba(139,184,232,0.10);
  border: 1px solid #3A5A8C; }
.detail h3 { font-family: var(--disp); font-weight: 700; font-size: 16px; letter-spacing: 0.05em; color: var(--ice); margin-bottom: 4px; }
.detail p { font-size: 14px; line-height: 1.55; color: var(--pale); }

/* ── Quiz ── */
.quiz-sit { padding: 8px 14px 2px; }
.quiz-sit h2 { font-family: var(--disp); font-weight: 800; font-size: 22px; letter-spacing: 0.05em; line-height: 1.05; }
.quiz-sit .sub { font-size: 12.5px; color: var(--pale); }
.quiz-q { font-size: 14.5px; font-weight: 600; text-align: center; margin: 8px 0; }
.quiz-q .pos { color: var(--gold); font-family: var(--disp); font-weight: 800; font-size: 17px; }
.opt { display: block; width: 100%; padding: 12px 13px; margin-bottom: 6px; border-radius: 10px;
  border: 1.5px solid var(--line); background: rgba(255,255,255,0.045); color: #fff; font-size: 13.5px;
  line-height: 1.45; text-align: left; }
.opt.correct { border-color: var(--ok); background: rgba(92,184,92,0.15); }
.opt.wrong { border-color: var(--red); background: rgba(214,69,69,0.14); }
.verdict { text-align: center; font-weight: 700; font-size: 14px; margin: 6px 0 8px; }
.verdict.good { color: var(--ok); } .verdict.bad { color: var(--red); font-weight: 600; font-size: 13px; }
.next-wrap { text-align: center; padding-bottom: 8px; }

/* ── Overlays (leaderboard / help) ── */
.overlay { padding: 14px 16px; background: rgba(0,0,0,0.22); border-bottom: 1px solid var(--line); max-height: 62vh; overflow-y: auto; }
.overlay h2 { font-family: var(--disp); font-weight: 800; font-size: 18px; letter-spacing: 0.14em; text-align: center;
  color: var(--gold); margin-bottom: 10px; }
.overlay h2.help { color: var(--ice); }
.lb-row { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; margin-bottom: 2px;
  border: 1px solid transparent; }
.lb-row.me { background: rgba(139,184,232,0.11); border-color: #3A5A8C; }
.lb-medal { width: 26px; text-align: center; font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lb-who { flex: 1; min-width: 0; }
.lb-name { font-size: 13.5px; font-weight: 600; }
.lb-name .pos { font-size: 10px; color: var(--ice); font-weight: 400; }
.lb-rank { font-size: 10.5px; color: var(--muted); }
.lb-score { font-family: var(--disp); font-weight: 800; font-size: 19px; font-variant-numeric: tabular-nums; color: var(--pale); }
.lb-row:first-child .lb-score { color: var(--gold); }
.help-block { font-size: 13px; color: var(--pale); line-height: 1.65; margin-bottom: 13px; }
.help-block b { display: block; color: #fff; margin-bottom: 2px; }
.rank-chips span { display: inline-block; margin: 0 5px 5px 0; padding: 4px 9px; border-radius: 7px;
  background: rgba(255,255,255,0.06); font-size: 11.5px; }
.rank-chips small { color: var(--muted); font-size: 9px; }

/* ── Coach dashboard ── */
.coach-wrap { padding: 16px; }
.coach-row { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 11px; margin-bottom: 3px; }
.coach-row:nth-child(odd) { background: rgba(255,255,255,0.035); }
.coach-medal { font-size: 17px; width: 30px; text-align: center; font-variant-numeric: tabular-nums; }
.coach-who { flex: 1; min-width: 0; }
.coach-name { font-size: 14.5px; font-weight: 600; }
.coach-name .pos { font-size: 10.5px; color: var(--ice); font-weight: 400; }
.coach-meta { font-size: 11.5px; color: var(--muted); }
.coach-pts { text-align: right; }
.coach-pts .v { font-family: var(--disp); font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }
.coach-pts .l { font-size: 8px; color: var(--muted); letter-spacing: 0.14em; }
.empty { text-align: center; color: var(--muted); font-size: 13.5px; padding: 44px 20px; line-height: 1.6; }

/* ── Rank-up ── */
.rankup { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.rankup .big { font-size: 68px; margin-bottom: 10px; }
.rankup .name { font-family: var(--disp); font-weight: 800; font-size: 34px; letter-spacing: 0.12em; margin: 6px 0 2px; }
.rankup .meta { font-size: 14px; color: var(--pale); margin-bottom: 30px; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: #3A5A8C; border-radius: 4px; }

/* ── Multi-position ── */
.roster-block { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.roster-block .roster-row { margin-bottom: 5px; }
.also-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.also-label { font-size: 10px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; margin-right: 3px; }
.also-chip { padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; font-family: var(--disp);
  letter-spacing: 0.04em; border: 1px solid var(--line); background: transparent; color: var(--muted); }
.also-chip.on { border-color: var(--ice); color: var(--ice); background: rgba(139,184,232,0.12); }
.also-chip.primary { border-color: var(--gold); color: var(--gold); background: rgba(255,215,0,0.08); opacity: 0.9; cursor: default; }
.pos-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.pos-chip { padding: 2px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; border: 1px solid var(--line); color: var(--pale); }
.pos-chip.good { border-color: rgba(92,184,92,0.6); color: #9fdaa0; background: rgba(92,184,92,0.08); }
.pos-chip.mid { border-color: rgba(255,215,0,0.5); color: #ffe680; background: rgba(255,215,0,0.06); }
.pos-chip.low { border-color: rgba(214,69,69,0.55); color: #ff9d9d; background: rgba(214,69,69,0.08); }
.pos-chip.idle { color: var(--muted); }
.my-pos { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; padding: 9px 11px;
  border-radius: 9px; background: rgba(139,184,232,0.07); border: 1px solid var(--line); }
.my-pos-label { font-size: 9.5px; letter-spacing: 0.14em; color: var(--ice); text-transform: uppercase; font-weight: 700; }