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

:root {
  --bg: #0d0f14;
  --bg2: #13161e;
  --bg3: #1a1e28;
  --border: rgba(255,255,255,0.08);
  --border2: rgba(255,255,255,0.14);
  --text: #e8eaf0;
  --text2: #8891a8;
  --text3: #545d72;
  --accent: #4ade80;
  --accent2: #22c55e;
  --accent-dim: rgba(74,222,128,0.12);
  --warn: #f59e0b;
  --danger: #ef4444;
  --blue: #60a5fa;
  --purple: #a78bfa;
  --mono: 'DM Mono', monospace;
  --head: 'Barlow Condensed', sans-serif;
  --body: 'Barlow', sans-serif;
}

body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.6;
}

/* ── HEADER ── */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  min-height: 52px;
  background: rgba(13,15,20,0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 100;
}
.logo {
  font-family: var(--head);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
}
.logo span { color: var(--accent); }
.logo.small { font-size: 18px; }
.header-right { display: flex; align-items: center; gap: 12px; }

/* Single-row top bar: nav + CSV + new-scrape live in the header on dashboard */
header .main-nav { display: flex; gap: 2px; flex: 1; padding: 0 20px; }
header .export-btns { display: flex; gap: 6px; }
body:not(.is-dashboard) .dash-only { display: none !important; }
body:not(.is-admin) .admin-only { display: none !important; }

/* ── USER BADGE ── */
.user-badge {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  cursor: default;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── BADGES ── */
.badge {
  font-family: var(--mono);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: lowercase;
  letter-spacing: 0.05em;
}
.badge-ok { background: rgba(74,222,128,0.15); color: var(--accent); border: 1px solid rgba(74,222,128,0.3); }
.badge-warn { background: rgba(245,158,11,0.15); color: var(--warn); border: 1px solid rgba(245,158,11,0.3); }
.badge-err { background: rgba(239,68,68,0.15); color: var(--danger); border: 1px solid rgba(239,68,68,0.3); }

/* ── SECTIONS ── */
.section { display: none; padding-top: 52px; min-height: 100vh; }
.section.active { display: block; }
.section-inner { max-width: 1440px; margin: 0 auto; padding: 48px 24px; }
.section-inner.narrow { max-width: 560px; }

h1 { font-family: var(--head); font-size: 38px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
h2 { font-family: var(--head); font-size: 28px; font-weight: 600; margin-bottom: 24px; }
h3 { font-family: var(--head); font-size: 18px; font-weight: 600; margin-bottom: 14px; }
.subtitle { color: var(--text2); margin-bottom: 28px; font-size: 16px; }
.step-label { font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }

/* ── CARDS ── */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px;
}
.login-card { display: flex; flex-direction: column; gap: 18px; }

/* ── FORM ── */
.field { display: flex; flex-direction: column; gap: 6px; }
label { font-size: 13px; color: var(--text2); font-weight: 500; letter-spacing: 0.03em; }
input[type="email"], input[type="password"], input[type="text"], select {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--body);
  font-size: 15px;
  padding: 10px 14px;
  transition: border-color 0.15s;
  outline: none;
  width: 100%;
}
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(74,222,128,0.1); }
select option { background: var(--bg2); }

/* ── BUTTONS ── */
.btn-primary {
  background: var(--accent);
  color: #0d0f14;
  border: none;
  border-radius: 8px;
  font-family: var(--head);
  font-size: 16px;
  font-weight: 700;
  padding: 12px 24px;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: background 0.15s, transform 0.1s;
}
.btn-primary:hover { background: var(--accent2); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text2);
  font-family: var(--body);
  font-size: 14px;
  padding: 8px 16px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.btn-ghost:hover { border-color: var(--text2); color: var(--text); }
.btn-ghost.small { padding: 5px 12px; font-size: 13px; }

.hint { font-size: 12px; color: var(--text3); text-align: center; }

/* ── TEAM LIST ── */
.team-list { display: flex; flex-direction: column; gap: 10px; }
.team-item {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 0.15s, background 0.15s;
}
.team-item:hover { border-color: var(--accent); background: var(--bg3); }
.team-name { font-family: var(--head); font-size: 18px; font-weight: 600; }
.team-id { font-family: var(--mono); font-size: 12px; color: var(--text3); }
.team-arrow { color: var(--accent); font-size: 20px; }

/* ── PROGRESS ── */
.progress-bar-wrap {
  background: var(--bg3);
  border-radius: 4px;
  height: 6px;
  overflow: hidden;
  margin: 20px 0 12px;
}
.progress-bar {
  background: var(--accent);
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}
.progress-text { font-family: var(--mono); font-size: 13px; color: var(--text2); margin-bottom: 20px; }

.log-console {
  background: #080a10;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  height: 300px;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: 12px;
}
.log-line { padding: 2px 0; }
.log-line.info { color: var(--text2); }
.log-line.success { color: var(--accent); }
.log-line.warn { color: var(--warn); }
.log-line.error { color: var(--danger); }
.log-line .ts { color: var(--text3); margin-right: 8px; }

/* ── DASH NAV ── */
.dash-nav {
  position: fixed;
  top: 52px; left: 0; right: 0;
  height: 48px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 20px;
  z-index: 99;
}
nav { display: flex; gap: 2px; flex: 1; padding: 0 16px; }
.export-btns { display: flex; gap: 6px; margin-right: 8px; }
.export-btns a { text-decoration: none; }
.nav-btn {
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text2);
  font-family: var(--head);
  font-size: 15px;
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  letter-spacing: 0.02em;
}
.nav-btn:hover { color: var(--text); background: var(--bg3); }
.nav-btn.active { color: var(--accent); background: var(--accent-dim); }

/* ── TAB CONTENT ── */
.tab-content { display: none; padding-top: 48px; }
.tab-content.active { display: block; }

/* ── METRICS GRID ── */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 36px;
}
.metric-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}
.metric-label { font-size: 12px; color: var(--text3); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 6px; }
.metric-val { font-family: var(--mono); font-size: 26px; color: var(--text); }
.metric-val.accent { color: var(--accent); }

/* ── TWO COL ── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

/* ── RANK LIST ── */
.rank-list { display: flex; flex-direction: column; gap: 8px; }
.rank-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.rank-num { font-family: var(--mono); font-size: 12px; color: var(--text3); width: 20px; }
.rank-name { flex: 1; font-weight: 500; }
.rank-stat { font-family: var(--mono); font-size: 14px; color: var(--accent); }
.rank-label { font-size: 11px; color: var(--text3); margin-left: 2px; }

/* ── FILTER BAR ── */
.filter-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.filter-bar input, .filter-bar select { flex: 1; min-width: 180px; }

/* ── TABLES ── */
.table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  background: var(--bg3);
  color: var(--text2);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  padding: 10px 12px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  letter-spacing: 0.04em;
  cursor: pointer;
}
thead th:first-child { text-align: left; }
tbody tr { border-bottom: 1px solid var(--border); transition: background 0.1s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--bg3); }
tbody td {
  padding: 9px 12px;
  text-align: right;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text2);
}
tbody td:first-child { text-align: left; font-family: var(--body); color: var(--text); font-weight: 500; white-space: nowrap; }
.cell-elite { color: #4ade80; font-weight: 500; }
.cell-great { color: #86efac; }
.cell-below { color: #fca5a5; }
.cell-poor { color: #ef4444; }

.legend { font-size: 12px; color: var(--text3); margin-top: 12px; font-family: var(--mono); }

/* ── TOTALS ROW ── */
.totals-row { border-top: 2px solid var(--border2) !important; }
.totals-row td { background: var(--bg3); color: var(--text) !important; font-weight: 600; }
.totals-row td:first-child { font-family: var(--mono); font-weight: 700; letter-spacing: 0.04em; }

/* ── CLICKABLE GAME LOG ROWS (Player Deep Dive) ── */
.clickable-row { cursor: pointer; }
.clickable-row td:first-child { color: var(--blue) !important; }

/* ── PLAYER LINK (clickable name in tables) ── */
.player-link {
  cursor: pointer;
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px dashed var(--border2);
  transition: color 0.15s, border-color 0.15s;
}
.player-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.player-num { font-family: var(--mono); font-size: 11px; color: var(--text3); margin-left: 4px; font-weight: 400; }

/* ── VERSION BADGE ── */
.version-badge { font-family: var(--mono); font-size: 10px; color: var(--text3); font-weight: 400; letter-spacing: 0.05em; margin-left: 6px; }
.stat-label { font-size: 13px; color: var(--text3); font-weight: 400; margin-left: 4px; }

/* ── PLAYER PROFILE ── */
.player-hero {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px;
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .player-hero { grid-template-columns: auto 1fr; }
  .player-spray { grid-column: 1 / -1; justify-self: center; }
}
.player-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--accent-dim);
  border: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--head);
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
}
.player-name { font-family: var(--head); font-size: 28px; font-weight: 700; }
.player-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 8px 12px; margin-top: 12px; }
.player-stat { text-align: center; }
.player-stat-val { font-family: var(--mono); font-size: 17px; font-weight: 500; display: block; }
.player-stat-lbl { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.05em; }
.player-game-log { overflow-x: auto; border-radius: 10px; border: 1px solid var(--border); }

/* ── Spray chart (right side of player hero) ── */
.player-spray { width: 240px; flex-shrink: 0; }
.player-spray-title {
  font-family: var(--head); font-size: 13px; font-weight: 600;
  color: var(--text2); margin-bottom: 8px;
  display: flex; align-items: baseline; justify-content: space-between;
}
.spray-totals { font-family: var(--mono); font-size: 11px; color: var(--text3); font-weight: 400; }
.spray-chart {
  width: 240px; height: 240px;
  background: #0c1622; border: 1px solid var(--border); border-radius: 8px;
  display: block;
}
.spray-legend {
  display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: 10px;
  color: var(--text3); margin-top: 8px; justify-content: center;
}
.spray-legend > span { display: inline-flex; align-items: center; gap: 4px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.legend-dot.legend-hit { background: #22c55e; }
.legend-dot.legend-out { background: #ef4444; }
.legend-shape { width: 9px; height: 9px; display: inline-block; background: #6b7280; }
.legend-shape.ls-square { border-radius: 1px; }
.legend-shape.ls-circle { border-radius: 50%; }
.legend-shape.ls-tri {
  width: 0; height: 0; background: transparent;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 9px solid #6b7280;
}

/* Hover transitions on spray markers */
.spray-marker { transition: transform 80ms ease-out; transform-origin: center; transform-box: fill-box; }
.spray-marker:hover { transform: scale(1.12); }
.spray-marker-empty:hover { transform: scale(1.4); }

/* Hover tooltip */
.spray-tooltip {
  display: none;
  position: fixed;
  z-index: 10000;
  background: rgba(15, 23, 36, 0.97);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  max-width: 320px;
  pointer-events: none;
}
.spray-tt-pos { font-family: var(--head); font-size: 13px; font-weight: 700; color: var(--accent); }
.spray-tt-summary { font-size: 11px; color: var(--text2); margin-top: 2px; margin-bottom: 6px; }
.spray-tt-grp { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 6px; margin-bottom: 2px; font-weight: 600; }
.spray-tt-grp.spray-tt-hits { color: #22c55e; }
.spray-tt-grp.spray-tt-outs { color: #ef4444; }
.spray-tt-grp.spray-tt-hr   { color: #fbbf24; }
.spray-tt-hr-name { color: var(--text); font-weight: 500; }
.spray-tooltip ul { list-style: none; padding: 0; margin: 0 0 0 4px; }
.spray-tooltip li { padding: 2px 0; line-height: 1.35; font-size: 11.5px; }
.spray-tt-out  { color: var(--text); }
.spray-tt-type { color: var(--text3); font-style: italic; font-size: 11px; }
.spray-tt-vel  { font-family: var(--mono); color: var(--accent); font-size: 11px; margin-left: 4px; }

/* ── Spray Chart Summary page ── */
.spray-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 18px;
}
.ssc-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ssc-header { display: flex; align-items: center; gap: 12px; }
.ssc-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent-dim); border: 2px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--head); font-size: 15px; font-weight: 700; color: var(--accent);
  flex-shrink: 0;
}
.ssc-name-block { flex: 1; min-width: 0; }
.ssc-name {
  font-family: var(--head); font-size: 17px; font-weight: 700; color: var(--text);
  display: flex; align-items: baseline; gap: 8px;
}
.ssc-jersey { font-family: var(--mono); font-size: 12px; color: var(--text3); font-weight: 500; }
.ssc-meta { display: flex; gap: 10px; align-items: center; margin-top: 2px; font-size: 11px; }
.ssc-team { font-family: var(--mono); color: var(--accent); font-weight: 600; }
.ssc-games { color: var(--text3); }
.ssc-stats {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 4px 6px;
  padding: 10px 6px;
  background: var(--bg3);
  border-radius: 8px;
}
.ssc-stat { text-align: center; }
.ssc-stat-val { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--text); display: block; }
.ssc-stat-lbl { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.04em; }
.ssc-spray { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ssc-spray .spray-chart { width: 220px; height: 220px; }
.ssc-spray-totals { font-family: var(--mono); font-size: 11px; color: var(--text3); }
.ssc-spray-empty {
  padding: 24px; color: var(--text3); font-size: 12px; font-style: italic; text-align: center;
}
@media (max-width: 600px) {
  .ssc-stats { grid-template-columns: repeat(6, 1fr); }
}

/* Composite cards — visually distinct from individual player cards. Span full width. */
.ssc-card-composite {
  grid-column: 1 / -1;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}
.ssc-card-composite .ssc-header { flex: 1 1 240px; }
.ssc-card-composite .ssc-stats  { flex: 2 1 360px; }
.ssc-card-composite .ssc-spray  { margin-left: auto; }
.ssc-spray.ssc-spray-composite .spray-chart {
  width: 280px; height: 280px;
}

/* Primary team composite — green theme (us at bat) */
.ssc-card-primary {
  background: linear-gradient(180deg, rgba(74,222,128,0.06), var(--bg2));
  border: 1px solid rgba(74,222,128,0.4);
}
.ssc-avatar.ssc-avatar-primary {
  background: rgba(74,222,128,0.15);
  border-color: #4ade80;
  color: #4ade80;
  font-size: 12px;
}
.ssc-card-primary .ssc-name { color: #4ade80; }

/* Opposing batters composite — red theme (against us) */
.ssc-card-opposing {
  background: linear-gradient(180deg, rgba(248,113,113,0.06), var(--bg2));
  border: 1px solid rgba(248,113,113,0.4);
}
.ssc-avatar.ssc-avatar-composite {
  background: rgba(248,113,113,0.15);
  border-color: #f87171;
  color: #f87171;
  font-size: 12px;
}
.ssc-card-opposing .ssc-name { color: #f87171; }
.ssc-spray-totals .composite-stat {
  margin-right: 10px;
}
.ssc-spray-totals .composite-stat.hits { color: #22c55e; font-weight: 700; }
.ssc-spray-totals .composite-stat.outs { color: #ef4444; font-weight: 700; }

/* ── TOGGLE GROUP ── */
.toggle-group { display: flex; background: var(--bg3); border-radius: 8px; padding: 3px; }
.toggle {
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text2);
  font-family: var(--body);
  font-size: 14px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.toggle.active { background: var(--bg2); color: var(--accent); border: 1px solid var(--border); }

/* ── GAME LOG ── */
.game-log { display: flex; flex-direction: column; gap: 10px; }
.game-entry {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
  transition: border-color 0.15s, background 0.15s;
}
.game-entry-link { cursor: pointer; }
.game-entry-link:hover { border-color: var(--accent); background: var(--bg3); }
.game-entry-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.game-title { font-family: var(--head); font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-meta { font-family: var(--mono); font-size: 12px; color: var(--text3); margin-top: 4px; }
.game-counts { font-size: 12px; color: var(--text3); margin-top: 4px; font-family: var(--mono); }
.game-score-val { font-family: var(--mono); font-size: 20px; font-weight: 600; white-space: nowrap; flex-shrink: 0; color: var(--text2); }
.game-score-val.win  { color: var(--accent); }
.game-score-val.loss { color: var(--danger); }
.game-filter-score.win  { color: var(--accent); }
.game-filter-score.loss { color: var(--danger); }

/* ── EMPTY STATE ── */
.empty-state { text-align: center; padding: 40px; color: var(--text2); }

/* ── SPINNER ── */
.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── GAME FILTER ── */
.game-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 6px;
}
.game-filter-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.game-filter-item:hover { border-color: var(--accent); }
.game-filter-item input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.game-filter-label { flex: 1; font-size: 13px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gf-line { line-height: 1.35; }
.gf-line.gf-date          { font-family: var(--mono); font-size: 11px; color: var(--text3); }
.gf-line.gf-matchup-row   { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.gf-matchup               { font-family: var(--head); font-size: 14px; color: var(--text); font-weight: 700; }
.gf-line.gf-venue         { font-size: 11px; color: var(--text3); font-style: italic; }
.game-filter-score        { font-family: var(--mono); font-size: 12px; color: var(--text3); flex-shrink: 0; font-weight: 600; }

/* ── PLAYS TAB ── */
.plays-game-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.plays-badge { font-family: var(--mono); font-size: 12px; padding: 4px 12px; border-radius: 6px; background: var(--bg3); border: 1px solid var(--border); color: var(--text3); }
.plays-badge.home { background: rgba(74,222,128,0.1); border-color: var(--accent); color: var(--accent); }
.plays-badge.away { background: rgba(96,165,250,0.1); border-color: #60a5fa; color: #60a5fa; }
.plays-summary { font-family: var(--mono); font-size: 12px; color: var(--text3); margin-bottom: 20px; }
.plays-content { display: flex; flex-direction: column; gap: 20px; }

.inning-block { border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.inning-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  font-family: var(--head); font-weight: 600; font-size: 14px;
}
.inning-header.top    { background: rgba(96,165,250,0.10); border-bottom: 2px solid rgba(96,165,250,0.3); }
.inning-header.bottom { background: rgba(74,222,128,0.10); border-bottom: 2px solid rgba(74,222,128,0.3); }
.inning-header.top.ours    { border-bottom-color: #60a5fa; }
.inning-header.bottom.ours { border-bottom-color: var(--accent); }
.inning-half-icon { font-size: 11px; opacity: 0.7; }
.inning-label { font-size: 14px; letter-spacing: 0.02em; }
.inning-team { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--text2); font-family: var(--body); }
.inning-header.top .inning-team    { color: #60a5fa; }
.inning-header.bottom .inning-team { color: var(--accent); }

.inning-plays { background: var(--bg2); }
.play-item {
  display: flex; flex-direction: column; gap: 5px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.play-item:last-child { border-bottom: none; }
.play-item:hover { background: var(--bg3); }

.play-header { display: flex; align-items: center; gap: 10px; }
.play-num { font-family: var(--mono); font-size: 11px; color: var(--text3); min-width: 16px; }
.play-outcome { font-family: var(--head); font-size: 14px; font-weight: 600; flex: 1; }
.play-outcome.hit  { color: var(--accent); }
.play-outcome.walk { color: #60a5fa; }
.play-outcome.out  { color: #f87171; }
.play-outcome.k    { color: #fb923c; }

.play-detail { display: flex; flex-wrap: wrap; gap: 4px; padding-left: 26px; margin-top: 2px; }
.pitch-tag {
  font-family: var(--mono); font-size: 11px;
  padding: 2px 8px; border-radius: 4px;
  border: 1px solid var(--border); background: var(--bg3); color: var(--text2);
  white-space: nowrap;
}
.pitch-strike   { background: rgba(248,113,113,0.10); border-color: rgba(248,113,113,0.4); color: #f87171; }
.pitch-ball     { background: rgba(96,165,250,0.10);  border-color: rgba(96,165,250,0.4);  color: #60a5fa; }
.pitch-foul     { background: rgba(251,146,60,0.10);  border-color: rgba(251,146,60,0.4);  color: #fb923c; }
.pitch-inplay   { background: rgba(74,222,128,0.10);  border-color: rgba(74,222,128,0.4);  color: var(--accent); }
.pitch-event    { background: rgba(167,139,250,0.10); border-color: rgba(167,139,250,0.4); color: #a78bfa; }
.pitch-ctx-good { background: rgba(74,222,128,0.10);  border-color: rgba(74,222,128,0.4);  color: var(--accent); }
.pitch-ctx-bad  { background: rgba(248,113,113,0.10); border-color: rgba(248,113,113,0.4); color: #f87171; }

.play-item.good { border-left: 3px solid rgba(74,222,128,0.65); background: rgba(74,222,128,0.04); }
.play-item.bad  { border-left: 3px solid rgba(248,113,113,0.55); background: rgba(248,113,113,0.04); }
.play-item.good:hover { background: rgba(74,222,128,0.08); }
.play-item.bad:hover  { background: rgba(248,113,113,0.08); }

/* Outcome text flips color when context inverts meaning */
.play-outcome.ctx-good.hit,  .play-outcome.ctx-good.walk { color: var(--accent) !important; }
.play-outcome.ctx-good.out,  .play-outcome.ctx-good.k    { color: var(--accent) !important; }
.play-outcome.ctx-bad.hit,   .play-outcome.ctx-bad.walk  { color: #f87171 !important; }
.play-outcome.ctx-bad.out,   .play-outcome.ctx-bad.k     { color: #f87171 !important; }

/* Right-side panel: score + base diamond */
.play-right { margin-left: auto; display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; }
.play-score  { font-family: var(--mono); font-size: 11px; color: var(--accent); white-space: nowrap; }
.base-diamond { display: block; width: 64px; height: 64px; }

/* Outs badge — colored by context */
.play-outs.bad  { background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.3); color: #f87171; }
.play-outs.good { background: rgba(74,222,128,0.08);  border: 1px solid rgba(74,222,128,0.3);  color: var(--accent); }

/* Pitch count badge — colored by context */
.play-pitch-count.pitch-count-good { background: rgba(74,222,128,0.10); border-color: rgba(74,222,128,0.4); color: var(--accent); }
.play-pitch-count.pitch-count-bad  { background: rgba(248,113,113,0.10); border-color: rgba(248,113,113,0.4); color: #f87171; }

/* Jersey number in matchup line */
.play-jersey { font-family: var(--mono); font-size: 10px; color: var(--text3); }
.play-score-legacy { display: none; } /* replaced by .play-right panel */
.play-matchup { display: flex; align-items: center; gap: 6px; padding-left: 26px; margin-top: 4px; flex-wrap: wrap; }
.play-batter  { font-size: 13px; font-weight: 500; color: #60a5fa; }
.play-vs      { font-size: 11px; color: var(--text3); font-family: var(--mono); }
.play-pitcher { font-size: 13px; font-weight: 500; color: var(--accent); }
.play-meta-row { display: flex; align-items: center; gap: 8px; padding-left: 26px; margin-top: 3px; flex-wrap: wrap; }
.play-outs   { font-family: var(--mono); font-size: 11px; padding: 2px 8px; border-radius: 4px; }
.play-pitch-count { font-family: var(--mono); font-size: 11px; color: var(--text3); padding: 2px 8px; background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; }
.play-narrative { font-size: 12px; color: var(--text2); padding-left: 26px; font-style: italic; margin-top: 3px; line-height: 1.4; }
.play-empty { padding: 10px 16px; color: var(--text3); font-size: 13px; font-style: italic; }
.plays-raw-debug { font-family: var(--mono); font-size: 11px; color: var(--text2); background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; overflow-x: auto; white-space: pre-wrap; line-height: 1.6; max-height: 400px; overflow-y: auto; }

.saved-file-item {
  padding: 10px 14px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg3);
  cursor: pointer; margin-bottom: 8px;
  transition: border-color 0.15s, background 0.15s;
}
.saved-file-item:hover { border-color: var(--accent); background: rgba(74,222,128,0.06); }
.saved-file-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.saved-file-date { font-family: var(--head); font-size: 13px; font-weight: 600; color: var(--text); }
.saved-file-size { font-family: var(--mono); font-size: 11px; color: var(--text3); }
.saved-file-detail { font-size: 12px; color: var(--text2); }

@media (max-width: 700px) {
  .two-col { grid-template-columns: 1fr; }
  h1 { font-size: 28px; }
  .dash-nav { overflow-x: auto; }
  nav { gap: 0; }

  /* ── Mobile header: logo + right controls on row 1, nav scrolls on row 2 ── */
  header {
    flex-wrap: wrap;
    align-items: center;
    padding: 6px 12px 0;
    gap: 0;
  }
  header .logo   { flex: 1; font-size: 18px; }
  header .header-right { gap: 6px; }
  header .header-right .btn-ghost.small { font-size: 10px; padding: 3px 7px; }
  header .main-nav {
    order: 3;               /* always below logo + right */
    flex: 0 0 100%;         /* full width */
    padding: 4px 0 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;  /* hide scrollbar on Firefox */
    flex-wrap: nowrap;      /* keep buttons on one line */
    gap: 2px;
  }
  header .main-nav::-webkit-scrollbar { display: none; }
  header .main-nav .nav-btn { white-space: nowrap; flex-shrink: 0; font-size: 12px; padding: 4px 10px; }

  /* Mobile header is two rows tall — push content down accordingly */
  .section { padding-top: 88px; }
  .section-inner { padding: 16px 14px 32px; }
}