* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; width: 100%; }
/* Global zoom for readability. Applied only on wider (desktop/tablet) screens —
   `zoom` shrinks the effective viewport width, so zooming on mobile forces text
   to wrap and squishes the layout. Phones keep native 1.0 rendering. */
body { background: #07060f; color: #fff; font-family: Georgia, serif; max-width: 860px; margin: 0 auto; padding-bottom: 60px; width: 100%; overflow-x: hidden; }
@media (min-width: 768px) { body { zoom: 1.2; } }

/* ── Header ── */
.header { background: #000000; padding: 14px 20px 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid #009A8B; }
.site-title { font-family: 'Orbitron', monospace; font-size: 20px; font-weight: 900; color: #009A8B; letter-spacing: 4px; text-transform: uppercase; }
.header small { font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.3); font-family: 'Chakra Petch', monospace; display: block; margin-bottom: 3px; }
.header-right { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.api-credits { font-family: 'Chakra Petch', monospace; font-size: 10px; color: #E8DFC8; background: rgba(0,154,139,0.1); padding: 4px 8px; border-radius: 4px; border: 1px solid rgba(0,154,139,0.3); white-space: nowrap; }
.api-credits.low { color: #f1c40f; }
.api-credits.critical { color: #e74c3c; }
.odds-lock-badge { font-family: 'Chakra Petch', monospace; font-size: 10px; color: #f1c40f; background: rgba(241,196,15,0.08); padding: 4px 8px; border-radius: 4px; border: 1px solid rgba(241,196,15,0.35); white-space: nowrap; }
.dpb-soft-market { color: #f39c12; font-size: 10px; cursor: help; opacity: 0.85; }
.corbet-info { color: #555; font-size: 10px; cursor: help; transition: color 0.12s; }
.corbet-info:hover { color: #009A8B; }
/* Tooltip rendered as a fixed-position <div> by showTip()/hideTip() in app.js —
   avoids stacking-context and viewport-edge issues with CSS ::after on mobile. */
#soft-market-tip {
  position: fixed;
  background: #16142e;
  color: #d8d8e8;
  border: 1px solid #009A8B;
  border-radius: 6px;
  padding: 8px 10px;
  font-family: 'Chakra Petch', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.3px;
  text-transform: none;
  line-height: 1.45;
  width: 260px;
  max-width: calc(100vw - 24px);
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  white-space: normal;
  text-align: left;
}
.header-btn { background: rgba(0,0,0,0.4); border: 1px solid #009A8B; color: #E8DFC8; font-family: 'Chakra Petch', monospace; font-size: 10px; letter-spacing: 2px; padding: 6px 10px; border-radius: 6px; cursor: pointer; text-transform: uppercase; transition: background 0.15s, color 0.15s; white-space: nowrap; }
.header-btn:hover { background: #009A8B; color: #000; }

/* ── Content & Cards ── */
.content { padding: 18px 18px 20px; }
/* overflow: visible so absolute-positioned ⓘ tooltips can escape the card.
   Header gets explicit top-radius to keep the rounded corners crisp. */
.card { background: #0c0a1e; border: 1px solid #1a1730; border-radius: 12px; overflow: visible; margin-bottom: 16px; }
.card-header { padding: 11px 18px; border-bottom: 1px solid #1a1730; background: #0e0c22; border-radius: 12px 12px 0 0; font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #009A8B; font-family: 'Chakra Petch', monospace; display: flex; align-items: center; justify-content: space-between; }
.card-body { padding: 16px 18px; }
.row { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 12px; margin-bottom: 12px; }
.row label { font-size: 10px; color: #999; font-family: 'Chakra Petch', monospace; letter-spacing: 0.5px; text-transform: uppercase; }
input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { background: #07060f; border: 1px solid #1e1b3a; border-radius: 6px; color: #ddd; padding: 7px 10px; font-size: 12px; font-family: 'Chakra Petch', monospace; width: 100%; outline: none; }
input:focus, select:focus { border-color: #009A8B; }
.toggle { display: flex; gap: 6px; }
.toggle-btn { padding: 5px 14px; border-radius: 6px; border: 1px solid #1e1b3a; background: transparent; color: #888; font-size: 10px; font-family: 'Chakra Petch', monospace; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; transition: all 0.12s; }
.toggle-btn.active { background: #009A8B; border-color: #009A8B; color: #fff; }
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.pill { background: #12102a; border: 1px solid #1e1b3a; border-radius: 8px; padding: 6px 12px; text-align: center; min-width: 68px; }
.pill .pill-label { font-size: 9px; color: #888; font-family: 'Chakra Petch', monospace; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 2px; }
.pill .pill-val { font-size: 14px; font-weight: 800; font-family: 'Chakra Petch', monospace; }
.pill .pill-sub { font-size: 8px; color: #2a2a3a; font-family: 'Chakra Petch', monospace; }
.btn-primary { width: 100%; padding: 15px; background: linear-gradient(135deg, #009A8B, #007a70); border: none; border-radius: 10px; color: #fff; font-size: 13px; font-weight: 700; font-family: 'Chakra Petch', monospace; letter-spacing: 3px; text-transform: uppercase; cursor: pointer; transition: opacity 0.15s; margin-top: 4px; }
.btn-primary:hover { opacity: 0.82; }
.btn-secondary { width: 100%; padding: 12px; background: transparent; border: 1px solid #1e1b3a; border-radius: 10px; color: #888; font-size: 11px; font-family: 'Chakra Petch', monospace; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; margin-top: 8px; }

/* ── Gauge ── */
.gauge-wrap { display: flex; flex-direction: column; align-items: center; padding: 8px 0 18px; }
.gauge-label { margin-top: 8px; font-size: 15px; font-weight: 800; letter-spacing: 1px; font-family: 'Chakra Petch', monospace; }
.gauge-desc { font-size: 11px; color: #999; margin-top: 4px; text-align: center; max-width: 220px; line-height: 1.5; }

/* ── Factor rows ── */
.factor-row { display: grid; grid-template-columns: 14px 110px 90px 1fr; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid #0e0c22; }
.factor-icon { font-size: 10px; padding-top: 1px; }
.factor-label { font-size: 10px; color: #666; font-family: 'Chakra Petch', monospace; text-transform: uppercase; letter-spacing: 0.5px; }
.factor-value { font-size: 12px; color: #ccc; font-family: 'Chakra Petch', monospace; font-weight: 700; }
.factor-note { font-size: 11px; color: #888; line-height: 1.4; }

/* ── Splits ── */
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.split-box { background: #0e0c22; border: 1px solid #1a1730; border-radius: 10px; padding: 13px 15px; }
.split-box .split-label { font-size: 9px; color: #888; font-family: 'Chakra Petch', monospace; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
.split-box .split-ops { font-size: 26px; font-weight: 900; font-family: 'Chakra Petch', monospace; }
.split-box .split-sub { font-size: 9px; color: #2a2a3a; font-family: 'Chakra Petch', monospace; margin-top: 1px; }
.split-box .split-avg { font-size: 11px; color: #888; font-family: 'Chakra Petch', monospace; margin-top: 6px; }
.season-bar { margin-bottom: 16px; padding: 12px 14px; background: #07060f; border-radius: 8px; border: 1px solid #1a1730; font-family: 'Chakra Petch', monospace; display: flex; gap: 20px; flex-wrap: wrap; }
.season-bar .s-label { font-size: 9px; color: #888; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 2px; }
.season-bar .s-val { font-size: 16px; font-weight: 800; color: #fff; }
.season-bar .s-val.green { color: #2ecc71; }

/* ── Pitch mix ── */
.pitch-row { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
.pitch-label { font-size: 10px; color: #666; font-family: 'Chakra Petch', monospace; min-width: 90px; }
.pitch-bar-wrap { flex: 1; background: #1a1730; border-radius: 4px; height: 5px; overflow: hidden; }
.pitch-bar { height: 100%; border-radius: 4px; transition: width 0.6s; }
.pitch-pct { font-size: 11px; color: #aaa; font-family: 'Chakra Petch', monospace; min-width: 28px; }

/* ── Pitch matchup grid (Prediction Score → Pitch Mix) ── */
.matchup-baseline {
  font-size: 10px;
  color: #aaa;
  font-family: 'Chakra Petch', monospace;
  letter-spacing: 0.5px;
  padding: 8px 4px 12px;
  border-bottom: 1px solid #1a1730;
  margin-bottom: 10px;
}
.matchup-baseline strong { color: #e8e8f0; font-weight: 600; }
.matchup-row {
  display: grid;
  grid-template-columns: 96px 110px 1fr;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  border-bottom: 1px solid #14132c;
}
.matchup-row:last-child { border-bottom: none; }
.matchup-pitch {
  font-size: 11px;
  color: #d8d8e8;
  font-family: 'Chakra Petch', monospace;
  letter-spacing: 0.3px;
}
.matchup-usage { display: flex; align-items: center; gap: 6px; }
.matchup-bar-wrap {
  flex: 1;
  background: #1a1730;
  border-radius: 3px;
  height: 5px;
  overflow: hidden;
  min-width: 60px;
}
.matchup-bar { height: 100%; border-radius: 3px; transition: width 0.6s; }
.matchup-usage-pct {
  font-size: 10px;
  color: #aaa;
  font-family: 'Chakra Petch', monospace;
  min-width: 28px;
  text-align: right;
}
.matchup-stats {
  font-size: 11px;
  font-family: 'Chakra Petch', monospace;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.matchup-sep { color: #444; margin: 0 2px; }
.matchup-sample {
  color: #555;
  font-size: 9px;
  margin-left: 6px;
}
.matchup-legend {
  font-size: 9px;
  color: #666;
  font-family: 'Chakra Petch', monospace;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid #1a1730;
}

/* ── Status / Spinner ── */
.status { font-size: 12px; font-family: 'Chakra Petch', monospace; padding: 8px 0; }
.status.error { color: #e74c3c; }
.spinner { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 0; }
.spinner-circle { width: 26px; height: 26px; border: 2.5px solid #1e1b3a; border-top-color: #009A8B; border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hidden { display: none; }
.panel { display: none; }
.panel.active { display: block; }
input[type=range] { accent-color: #009A8B; padding: 0; }
.range-row { display: flex; align-items: center; gap: 10px; }
.pitch-mix-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.pitch-mix-item { display: flex; align-items: center; gap: 8px; }
.pitch-mix-label { font-size: 10px; color: #999; font-family: 'Chakra Petch', monospace; min-width: 80px; }
.prediction-header { text-align: center; margin-bottom: 6px; font-size: 12px; color: #888; font-family: 'Chakra Petch', monospace; }
.stats-section-title { font-size: 10px; font-weight: 700; color: #009A8B; letter-spacing: 3px; text-transform: uppercase; font-family: 'Chakra Petch', monospace; margin: 18px 0 10px; }
.stats-section-title:first-child { margin-top: 0; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat-box { background: #07060f; border: 1px solid #1a1730; border-radius: 8px; padding: 10px 12px; }
.stat-box .stat-label { font-size: 9px; color: #888; font-family: 'Chakra Petch', monospace; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.hdr-info {
  color: #6a6a8a;
  font-size: 11px;
  cursor: help;
  margin-left: 6px;
  transition: color 0.12s;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  text-transform: none;
  letter-spacing: 0;
}
.hdr-info:hover { color: #009A8B; }
.hdr-info[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #16142e;
  color: #d8d8e8;
  border: 1px solid #009A8B;
  border-radius: 6px;
  padding: 8px 10px;
  font-family: 'Chakra Petch', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.3px;
  text-transform: none;
  line-height: 1.45;
  width: min(280px, calc(100vw - 32px));
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s, visibility 0.12s;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  white-space: normal;
  text-align: left;
}
/* Header tooltips now render via the fixed-position JS tooltip (#soft-market-tip)
   so they escape the card's overflow:hidden clip and clamp to the viewport. The
   CSS ::after above is kept (harmlessly hidden) but never revealed on hover. */

.stat-box .stat-info {
  color: #555;
  font-size: 10px;
  cursor: help;
  margin-left: 2px;
  transition: color 0.12s;
  vertical-align: 1px;
  position: relative;
  display: inline-block;
}
.stat-box .stat-info:hover { color: #009A8B; }
/* ── HTML-based stat-info tooltip (color-coded multi-line) ── */
.stat-info .stat-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #16142e;
  border: 1px solid #009A8B;
  border-radius: 6px;
  padding: 8px 10px;
  width: 220px;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s, visibility 0.12s;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  font-family: 'Chakra Petch', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.3px;
  text-transform: none;
  line-height: 1.45;
}
.stat-info:hover .stat-tip { opacity: 1; visibility: visible; }
.stat-tip-title { color: #d8d8e8; font-weight: 600; padding-bottom: 3px; border-bottom: 1px solid #2a2740; margin-bottom: 2px; }
.stat-tip-body  { color: #d8d8e8; }
.stat-tip-line  { color: #fff; }
.stat-tip-line.good { color: #2ecc71; }
.stat-tip-line.bad  { color: #e74c3c; }
.stat-tip-note  { color: #999; font-size: 10px; margin-top: 3px; padding-top: 3px; border-top: 1px solid #2a2740; font-style: italic; }

/* Edge-aware: anchor leftmost column tooltips to left edge, rightmost to right edge,
   so they don't get clipped by the viewport. Applies to any 3-col stats-grid. */
.stats-grid .stat-box:nth-child(3n+1) .stat-info .stat-tip { left: 0; right: auto; transform: none; }
.stats-grid .stat-box:nth-child(3n)   .stat-info .stat-tip { left: auto; right: 0; transform: none; }
/* First row of any stats-grid: flip tooltip BELOW the icon so it can't be
   clipped by the top of the viewport (or anything above the card). */
.stats-grid .stat-box:nth-child(-n+3) .stat-info .stat-tip {
  top: calc(100% + 8px);
  bottom: auto;
}
.stat-box .stat-val { font-size: 20px; font-weight: 900; font-family: 'Chakra Petch', monospace; color: #fff; }
.stat-box .stat-val.good { color: #2ecc71; }
.stat-box .stat-val.bad { color: #e74c3c; }
.stat-box .stat-context { font-size: 9px; color: #777; font-family: 'Chakra Petch', monospace; margin-top: 3px; }
.risp-box { background: #07060f; border: 1px solid #1a1730; border-radius: 8px; padding: 12px 16px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.risp-box .risp-main { font-size: 28px; font-weight: 900; font-family: 'Chakra Petch', monospace; }
.risp-box .risp-detail { font-size: 11px; color: #888; font-family: 'Chakra Petch', monospace; line-height: 1.8; }

/* ── Search ── */
.search-wrap { position: relative; }
.search-results { position: absolute; top: 100%; left: 0; right: 0; background: #0e0c22; border: 1px solid #1e1b3a; border-radius: 8px; z-index: 100; max-height: 200px; overflow-y: auto; margin-top: 4px; }
.search-result-item { padding: 9px 14px; cursor: pointer; font-family: 'Chakra Petch', monospace; font-size: 12px; color: #ccc; border-bottom: 1px solid #1a1730; display: flex; justify-content: space-between; align-items: center; }
.search-result-item:hover { background: #1a1730; color: #fff; }
.search-result-item .sr-pos { font-size: 10px; color: #999; }

/* ── Pitcher loaded ── */
.pitcher-loaded { background: #07060f; border: 1px solid #1a1730; border-radius: 8px; padding: 12px 16px; margin-top: 8px; }
.pitcher-loaded .pl-name { font-size: 15px; font-weight: 800; color: #fff; font-family: 'Chakra Petch', monospace; margin-bottom: 6px; }
.pitcher-loaded .pl-stats { display: flex; gap: 14px; flex-wrap: wrap; font-family: 'Chakra Petch', monospace; font-size: 11px; color: #999; }
.pitcher-loaded .pl-hand { font-size: 10px; color: #A71930; font-family: 'Chakra Petch', monospace; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }

/* ── Weather ── */
.weather-auto { background: #07060f; border: 1px solid #1a1730; border-radius: 8px; padding: 12px 16px; margin-bottom: 12px; }
.weather-auto .wa-title { font-size: 9px; color: #888; font-family: 'Chakra Petch', monospace; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; }
.weather-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.weather-cell { text-align: center; }
.weather-cell .wc-label { font-size: 9px; color: #888; font-family: 'Chakra Petch', monospace; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 2px; }
.weather-cell .wc-val { font-size: 16px; font-weight: 800; font-family: 'Chakra Petch', monospace; color: #fff; }
.weather-cell .wc-sub { font-size: 9px; color: #777; font-family: 'Chakra Petch', monospace; }
.roof-recommendation { font-size: 11px; font-family: 'Chakra Petch', monospace; padding: 6px 10px; border-radius: 6px; margin-top: 6px; }
.roof-recommendation.likely-closed { background: #1a1730; color: #f39c12; }
.roof-recommendation.likely-open { background: #0a1a10; color: #2ecc71; }

/* ── Umpire ── */
.ump-box { background: #07060f; border: 1px solid #1a1730; border-radius: 8px; padding: 12px 16px; }
.ump-box .ump-name { font-size: 16px; font-weight: 800; color: #fff; font-family: 'Chakra Petch', monospace; margin-bottom: 4px; }
.ump-box .ump-sub { font-size: 10px; color: #999; font-family: 'Chakra Petch', monospace; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; }
.ump-tendency { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 4px; font-size: 10px; font-family: 'Chakra Petch', monospace; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.ump-tendency.pitcher { background: #1a0a10; color: #e74c3c; }
.ump-tendency.hitter { background: #0a1a10; color: #2ecc71; }
.ump-tendency.neutral { background: #1a1730; color: #f39c12; }
.game-time-row { display: flex; gap: 8px; align-items: center; }
.game-time-row input[type=time] { width: auto; flex: 1; }

/* ── Lineup protection ── */
.lineup-spot { display: flex; align-items: center; padding: 5px 0; border-bottom: 1px solid #0e0c22; font-family: 'Chakra Petch', monospace; font-size: 11px; color: #ccc; }
.lineup-spot .ls-order { color: #888; min-width: 18px; font-size: 10px; }
.lineup-spot .ls-name { flex: 1; margin: 0 8px; }
.lineup-spot .ls-ops { font-weight: 700; font-size: 12px; }
.lineup-spot .ls-pos { font-size: 9px; color: #555; font-family: 'Chakra Petch', monospace; min-width: 24px; }
.prot-badge { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 4px; font-size: 9px; font-family: 'Chakra Petch', monospace; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.prot-badge.strong { background: #0a1a10; color: #2ecc71; }
.prot-badge.average { background: #1a1730; color: #888; }
.prot-badge.weak { background: #1a0606; color: #e74c3c; }

/* ── Grade panel ── */
.factor-perf-row { display: grid; grid-template-columns: 140px 80px 1fr 60px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #0e0c22; }
.factor-perf-name { font-size: 11px; color: #888; font-family: 'Chakra Petch', monospace; }
.factor-perf-rate { font-size: 13px; font-weight: 800; font-family: 'Chakra Petch', monospace; }
.factor-perf-bar-wrap { background: #1a1730; border-radius: 4px; height: 6px; overflow: hidden; }
.factor-perf-bar { height: 100%; border-radius: 4px; transition: width 0.6s; }
.factor-perf-weight { font-size: 10px; color: #999; font-family: 'Chakra Petch', monospace; text-align: right; }
.grade-game-card { background: #0e0c22; border: 1px solid #1a1730; border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.grade-game-card .gg-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 10px; }
.grade-game-card .gg-title { font-size: 13px; font-weight: 700; color: #fff; font-family: 'Chakra Petch', monospace; }
.grade-game-card .gg-score { font-size: 22px; font-weight: 900; font-family: 'Chakra Petch', monospace; color: #009A8B; }
.grade-game-card .gg-factors { font-size: 10px; color: #888; font-family: 'Chakra Petch', monospace; margin-bottom: 12px; line-height: 1.8; }
.grade-game-card .gg-stat-line { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.grade-stat { text-align: center; background: #07060f; border: 1px solid #1a1730; border-radius: 6px; padding: 6px 10px; min-width: 50px; }
.grade-stat .gs-label { font-size: 9px; color: #888; font-family: 'Chakra Petch', monospace; text-transform: uppercase; margin-bottom: 2px; }
.grade-stat .gs-val { font-size: 16px; font-weight: 800; font-family: 'Chakra Petch', monospace; color: #fff; }
.grade-stat .gs-val.loading { color: #777; animation: pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:0.3} 50%{opacity:1} }
.grade-btn { padding: 8px 16px; border-radius: 6px; border: none; font-family: 'Chakra Petch', monospace; font-size: 11px; font-weight: 700; cursor: pointer; letter-spacing: 1px; text-transform: uppercase; transition: opacity 0.15s; }
.grade-btn.confirm { background: linear-gradient(135deg, #1a5a10, #0d3a08); color: #2ecc71; }
.grade-btn.confirm:hover { opacity: 0.82; }
.grade-log-row { display: grid; grid-template-columns: 80px 40px 90px 1fr 50px 80px 55px 56px; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid #0e0c22; font-family: 'Chakra Petch', monospace; font-size: 11px; }
.grade-row-actions { display: flex; gap: 2px; align-items: center; }
.grade-row-edit, .grade-row-del { background: none; border: none; font-family: 'Chakra Petch', monospace; cursor: pointer; padding: 2px 6px; line-height: 1; transition: color 0.12s; }
.grade-row-edit { color: #2a2540; font-size: 13px; }
.grade-row-edit:hover { color: #009A8B; }
.grade-row-del { color: #2a2540; font-size: 15px; }
.grade-row-del:hover { color: #e74c3c; }
.outcome-badge { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 4px; text-align: center; }
.outcome-badge.great  { background: #0d3a0d; color: #2ecc71; }
.outcome-badge.good   { background: #1a3a10; color: #a8e063; }
.outcome-badge.avg    { background: #2a2000; color: #f39c12; }
.outcome-badge.poor   { background: #2a0808; color: #e74c3c; }
.model-badge { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 4px; text-align: center; }
.model-badge.accurate { background: #0d3a0d; color: #2ecc71; }
.model-badge.close    { background: #2a2000; color: #f39c12; }
.model-badge.off      { background: #2a0808; color: #e74c3c; }
.model-badge.neutral  { background: #1a1730; color: #888; }

/* ── Probability bar (CorBET) ── */
.prob-bar-wrap { background: #1a1730; border-radius: 6px; height: 22px; overflow: hidden; display: flex; }
.prob-bar-over { background: linear-gradient(90deg,#1a5a10,#2ecc71); height: 100%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-family: 'Chakra Petch', monospace; font-weight: 700; color: rgba(255,255,255,0.9); transition: width 0.6s; min-width: 24px; }
.prob-bar-under { background: linear-gradient(90deg,#e74c3c,#8b0000); height: 100%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-family: 'Chakra Petch', monospace; font-weight: 700; color: rgba(255,255,255,0.9); transition: width 0.6s; min-width: 24px; }
.edge-badge { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 10px; font-family: 'Chakra Petch', monospace; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.edge-badge.strong { background: #0a2a05; color: #2ecc71; border: 1px solid #1a4a10; }
.edge-badge.moderate { background: #2a2000; color: #f39c12; border: 1px solid #3a2a00; }
.edge-badge.small { background: #1a1730; color: #888; border: 1px solid #2a2550; }

/* ── Phantom (teaser) lines ── */
.phantom-lines-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0 6px; border-top: 1px dashed #1a1730; margin: 4px 0 4px; }
.phantom-lines-label { font: 9px 'Chakra Petch', monospace; letter-spacing: 1.5px; color: #666; text-transform: uppercase; margin-right: 4px; cursor: help; }
.phantom-chk { display: inline-flex; align-items: center; gap: 4px; font: 11px 'Chakra Petch', monospace; color: #aaa; cursor: pointer; padding: 2px 6px; background: #0e0c22; border: 1px solid #1e1b3a; border-radius: 4px; }
.phantom-chk:hover { color: #ccc; border-color: #2a2550; }
.phantom-chk input { margin: 0; cursor: pointer; }
/* Dark-blue translucent overlay on the main probability bar, sized to the
   alt line's market Over%. Multiple overlays stack via rgba transparency so
   overlapping regions read as darker. */
.phantom-overlay { position: absolute; top: 0; left: 0; height: 22px; box-sizing: border-box; background: rgba(26, 58, 138, 0.55); display: flex; align-items: center; justify-content: center; font: 9px 'Chakra Petch', monospace; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.6); white-space: nowrap; overflow: hidden; transition: width 0.4s; border: 1px solid rgba(20, 44, 120, 0.95); border-radius: 6px; pointer-events: auto; z-index: 1; }
/* Light-blue vertical marker on the bar at the alt line's model Over% — the
   phantom counterpart to the main line's white prob-bar-model-marker. */
.phantom-model-marker { position: absolute; top: 0; width: 2px; height: 22px; background: #7fb8e8; transform: translateX(-50%); pointer-events: none; border-radius: 1px; box-shadow: 0 0 4px rgba(127, 184, 232, 0.7); z-index: 3; }
/* Stacked marker rows below the bar — one per checked alt line. Each
   absolute-positions a light-blue model arrow at the alt line's model Over%.
   The ▲ tip sits on its own centred line so it marks the exact position. */
.phantom-marker-slot { position: relative; height: 22px; margin-top: 2px; }
.phantom-marker-label { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; line-height: 1.1; font: 8px 'Chakra Petch', monospace; color: #5a9ed9; white-space: nowrap; text-align: center; cursor: help; }
.phantom-marker-tip { font-size: 9px; line-height: 1; }

/* ── CorBET ── */
.corbet-header { background: linear-gradient(135deg, #001a18, #002822); border: 1px solid #009A8B; border-radius: 12px; padding: 14px 18px; margin-bottom: 12px; display: flex; align-items: center; gap: 12px; }
.corbet-logo { font-size: 22px; }
.corbet-title { font-size: 14px; font-weight: 900; color: #009A8B; font-family: 'Orbitron', monospace; letter-spacing: 1px; }
.corbet-sub { font-size: 10px; color: #2a7a60; font-family: 'Chakra Petch', monospace; margin-top: 2px; }
.bet-card { border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; border: 1px solid; position: relative; overflow: hidden; }
.bet-card.green { background: #061a06; border-color: #1a4a10; }
.bet-card.yellow { background: #1a1406; border-color: #3a2a00; }
.bet-card.red { background: #1a0606; border-color: #3a1010; }
.bet-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
/* CorBET bet-card stats row: centered, wraps gracefully (3-up) on phones. */
.bet-stats-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 12px; margin: 2px 0 10px; font-family: 'Chakra Petch', monospace; font-size: 11px; }
.bet-stat-col { flex: 0 0 auto; min-width: 90px; text-align: center; }
.bet-stat-label { font-size: 9px; color: #888; text-transform: uppercase; letter-spacing: 1px; line-height: 14px; height: 14px; margin-bottom: 3px; white-space: nowrap; }
.bet-stat-label-model { color: #aaa; font-weight: 700; text-decoration: underline; }
.bet-stat-val { line-height: 1.2; }
.bet-stat-book { color: #555; font-size: 9px; }
@media (max-width: 560px) {
  .bet-stats-row { gap: 16px 10px; }
  .bet-stat-col { min-width: 84px; }
}
.bet-rating { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-family: 'Chakra Petch', monospace; padding: 3px 8px; border-radius: 4px; }
.bet-rating.green { background: #0d3a0d; color: #2ecc71; }
.bet-rating.yellow { background: #2a2000; color: #f39c12; }
.bet-rating.red { background: #2a0808; color: #e74c3c; }
.bet-prop { font-size: 16px; font-weight: 900; font-family: 'Chakra Petch', monospace; }
.bet-prop.green { color: #2ecc71; }
.bet-prop.yellow { color: #f39c12; }
.bet-prop.red { color: #e74c3c; }
.bet-odds { font-size: 12px; font-family: 'Chakra Petch', monospace; color: #888; margin-top: 2px; }
.bet-reasoning { font-size: 11px; color: #999; margin-top: 6px; line-height: 1.5; }
.bet-books { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.bet-book { font-size: 9px; font-family: 'Chakra Petch', monospace; color: #777; background: #0e0c22; padding: 2px 7px; border-radius: 3px; border: 1px solid #1a1730; }
.corbet-loading { text-align: center; padding: 24px; color: #009A8B; font-family: 'Chakra Petch', monospace; font-size: 12px; }
.corbet-empty { text-align: center; padding: 24px; color: #777; font-family: 'Chakra Petch', monospace; font-size: 12px; }
#corbet-player-filter { display:flex; flex-wrap:wrap; gap:8px; align-items:center; background:#0c0a1e; border:1px solid #1a1730; border-radius:10px; padding:10px 14px; margin-bottom:12px; }
#corbet-player-filter .cpf-label { flex-basis:100%; font-size:9px; color:#555; font-family: 'Chakra Petch', monospace; letter-spacing:2px; text-transform:uppercase; margin-bottom:2px; }
#corbet-player-filter label { display:flex; align-items:center; gap:5px; font-family: 'Chakra Petch', monospace; font-size:11px; color:#aaa; cursor:pointer; padding:3px 8px; border-radius:5px; border:1px solid #1a1730; background:#0e0c22; }
#corbet-player-filter input[type="checkbox"] { accent-color:#009A8B; cursor:pointer; }

/* ── Record tracker ── */
.record-summary-strip { display: grid; grid-template-columns: repeat(4, max-content) 1fr; gap: 18px; align-items: center; padding: 12px 16px; background: #0a0820; border: 1px solid #1a1730; border-radius: 10px; margin-bottom: 12px; }
.rss-stat { text-align: left; }
.rss-label { font-size: 8px; color: #666; font-family: 'Chakra Petch', monospace; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 2px; }
.rss-val { font-size: 17px; font-family: 'Chakra Petch', monospace; color: #ccc; font-weight: 700; line-height: 1; }
.rss-val.pos { color: #2ecc71; }
.rss-val.neg { color: #e74c3c; }
.rss-sparkline { min-width: 0; align-self: stretch; display: flex; align-items: center; padding-left: 8px; border-left: 1px solid #1a1730; }
.rss-sparkline-empty { font-size: 9px; color: #555; font-family: 'Chakra Petch', monospace; letter-spacing: 1px; text-transform: uppercase; }

.prop-record-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.prop-cell { background: #0a0820; border: 1px solid #1a1730; border-radius: 8px; padding: 9px 10px; text-align: center; }
.prop-cell.pos { border-color: #1a4a10; background: #061a06; }
.prop-cell.neg { border-color: #3a1010; background: #1a0606; }
.prop-cell.empty { opacity: 0.45; }
.pc-label { font-size: 9px; color: #666; font-family: 'Chakra Petch', monospace; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; }
.prop-cell.pos .pc-label { color: #2a5a20; }
.prop-cell.neg .pc-label { color: #5a2020; }
.pc-record { font-size: 16px; font-family: 'Chakra Petch', monospace; font-weight: 700; color: #ccc; line-height: 1; }
.prop-cell.pos .pc-record { color: #2ecc71; }
.prop-cell.neg .pc-record { color: #e74c3c; }
.pc-roi { font-size: 9px; font-family: 'Chakra Petch', monospace; color: #888; margin-top: 3px; letter-spacing: 1px; }
.prop-cell.pos .pc-roi { color: #2ecc71; }
.prop-cell.neg .pc-roi { color: #e74c3c; }
.rec-sort-bar { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-family: 'Chakra Petch', monospace; }
.rec-sort-label { font-size: 9px; color: #777; letter-spacing: 1px; text-transform: uppercase; margin-right: 2px; }
.rec-sort-btn { background: #0e0c22; border: 1px solid #1e1b3a; color: #888; font-family: 'Chakra Petch', monospace; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; cursor: pointer; }
.rec-sort-btn:hover { color: #ccc; border-color: #2a2750; }
.rec-sort-btn.active { background: #1a1730; color: #E8DFC8; border-color: #009A8B; }
.tb-card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tb-sort-toggle { display: inline-flex; gap: 0; flex-shrink: 0; }
.tb-sort-btn { background: #0e0c22; border: 1px solid #1e1b3a; color: #888; font-family: 'Chakra Petch', monospace; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; padding: 3px 9px; cursor: pointer; }
.tb-sort-btn:first-child { border-radius: 4px 0 0 4px; }
.tb-sort-btn:last-child { border-radius: 0 4px 4px 0; border-left: none; }
.tb-sort-btn:hover { color: #ccc; border-color: #2a2750; }
.tb-sort-btn.active { background: #1a1730; color: #E8DFC8; border-color: #009A8B; }
.bet-log-item { display: grid; grid-template-columns: 70px 90px 36px 1fr 50px 54px 96px 22px; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid #0e0c22; font-family: 'Chakra Petch', monospace; font-size: 11px; }
.bet-log-item.bet-pending { opacity: 0.55; }
.bet-log-item .bli-date { color: #888; }
.bet-log-item .bli-player { color: #E8DFC8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
.bet-log-item .bli-opp { color: #009A8B; font-weight: 700; font-size: 10px; white-space: nowrap; }
.bet-log-item .bli-prop { color: #ccc; }
.bet-log-item .bli-odds { color: #666; }
.bet-log-item .bli-rating { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 3px; text-align: center; }
.bet-log-item .bli-result { display: flex; gap: 3px; }
.del-btn { background: none; border: none; color: #2a2540; font-size: 15px; cursor: pointer; padding: 0; line-height: 1; transition: color 0.12s; }
.del-btn:hover { color: #e74c3c; }
.result-btn { font-size: 9px; font-family: 'Chakra Petch', monospace; padding: 3px 7px; border-radius: 4px; border: 1px solid; cursor: pointer; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.result-btn.win { background: #061a06; border-color: #1a4a10; color: #2ecc71; }
.result-btn.loss { background: #1a0606; border-color: #3a1010; color: #e74c3c; }
.result-btn.push { background: #1a1730; border-color: #2a2550; color: #888; }
.result-btn.active { opacity: 1; }
.result-btn:not(.active) { opacity: 0.4; }

/* ── Manual bet form ── */
.add-bet-form { padding: 12px 0 16px; border-bottom: 1px solid #1a1730; margin-bottom: 14px; }
.abf-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 10px; }
.abf-row-bottom { margin-bottom: 0; }
.abf-field { display: flex; flex-direction: column; gap: 4px; }
.abf-field.abf-grow { flex: 1; min-width: 120px; }
.abf-label { font-family: 'Chakra Petch', monospace; font-size: 9px; color: #666; text-transform: uppercase; letter-spacing: 1.5px; }
.abf-input { background: #0e0c22; border: 1px solid #2a2550; border-radius: 5px; color: #E8DFC8; font-family: 'Chakra Petch', monospace; font-size: 12px; padding: 6px 8px; outline: none; }
.abf-input:focus { border-color: #009A8B; }
.abf-input option { background: #0e0c22; }
.abf-line { width: 72px; }
.abf-odds { width: 72px; }
.abf-toggle { display: flex; gap: 4px; }
.abf-toggle-btn { background: #0e0c22; border: 1px solid #2a2550; color: #666; font-family: 'Chakra Petch', monospace; font-size: 10px; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; transition: all 0.12s; }
.abf-toggle-btn.active { background: #1a1a40; border-color: #009A8B; color: #009A8B; }
.abf-toggle-btn.abf-win.active { background: #061a06; border-color: #1a4a10; color: #2ecc71; }
.abf-toggle-btn.abf-loss.active { background: #1a0606; border-color: #3a1010; color: #e74c3c; }
.abf-toggle-btn.abf-push-btn.active { background: #1a1730; border-color: #2a2550; color: #aaa; }
.abf-save-btn { background: #009A8B; border: none; color: #07060f; font-family: 'Chakra Petch', monospace; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; padding: 8px 18px; border-radius: 5px; cursor: pointer; white-space: nowrap; align-self: flex-end; transition: opacity 0.12s; }
.abf-save-btn:hover { opacity: 0.85; }

/* ── Modal system ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.88); z-index: 1000; overflow-y: auto; display: flex; justify-content: center; align-items: flex-start; padding: 20px; }
.modal-overlay.hidden { display: none; }
.modal-frame { width: 100%; max-width: 860px; background: #07060f; border: 1px solid #009A8B; border-radius: 12px; position: relative; padding: 52px 18px 24px; min-height: 200px; }
.modal-topbar { position: absolute; top: 0; left: 0; right: 0; height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 18px; border-bottom: 1px solid #1a1730; }
.modal-player-name { font-family: 'Orbitron', monospace; font-size: 12px; color: #E8DFC8; font-weight: 700; letter-spacing: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-close { background: none; border: none; color: #E8DFC8; font-size: 24px; cursor: pointer; padding: 0 4px; line-height: 1; flex-shrink: 0; }
#modal-slot .panel { display: block !important; }

/* ── PIN keypad modal (lock.js) ── */
.pin-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.pin-overlay.hidden { display: none; }
.pin-modal { width: 100%; max-width: 320px; background: #0e0c22; border: 1px solid #009A8B; border-radius: 14px; padding: 22px 20px 20px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.6); }
.pin-title { font-family: 'Orbitron', monospace; font-size: 15px; font-weight: 700; color: #009A8B; letter-spacing: 1px; }
.pin-sub { font-family: 'Chakra Petch', monospace; font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 6px; line-height: 1.4; }
.pin-dots { display: flex; gap: 14px; justify-content: center; margin: 18px 0 8px; }
.pin-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(0,154,139,0.5); background: transparent; transition: background 0.12s, border-color 0.12s; }
.pin-dot.filled { background: #009A8B; border-color: #009A8B; }
.pin-error { font-family: 'Chakra Petch', monospace; font-size: 11px; color: #e74c3c; min-height: 16px; margin-bottom: 6px; }
.pin-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px; }
.pin-key { font-family: 'Chakra Petch', monospace; font-size: 22px; font-weight: 600; color: #E8DFC8; background: #16142e; border: 1px solid #1e1b3a; border-radius: 10px; padding: 14px 0; cursor: pointer; transition: background 0.1s, transform 0.05s; user-select: none; }
.pin-key:active { background: rgba(0,154,139,0.25); transform: scale(0.96); }
.pin-key-soft { font-size: 13px; color: rgba(255,255,255,0.6); background: transparent; border-color: transparent; }
.pin-menu { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.pin-menu-btn { font-family: 'Chakra Petch', monospace; font-size: 14px; font-weight: 600; color: #E8DFC8; background: #16142e; border: 1px solid #1e1b3a; border-radius: 10px; padding: 13px 0; cursor: pointer; transition: background 0.1s; }
.pin-menu-btn:active { background: rgba(0,154,139,0.25); }
.pin-menu-btn.danger { color: #e74c3c; border-color: rgba(231,76,60,0.4); }
.pin-menu-btn.soft { color: rgba(255,255,255,0.6); background: transparent; border-color: transparent; }
.pin-shake { animation: pin-shake 0.32s; }
@keyframes pin-shake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-7px); } 40%,80% { transform: translateX(7px); } }

/* ── Dashboard main ── */
.dash-game-banner { background: #000; border: 1px solid #009A8B; border-radius: 12px; padding: 14px 18px; margin-bottom: 14px; }
.dash-banner-empty { color: #444; font-family: 'Chakra Petch', monospace; font-size: 11px; }
.dash-opp { font-family: 'Orbitron', monospace; font-size: 13px; font-weight: 900; color: #E8DFC8; letter-spacing: 2px; margin-bottom: 3px; }
.dash-game-meta { font-size: 10px; color: #777; font-family: 'Chakra Petch', monospace; }
.dash-game-weather { font-size: 10px; color: #009A8B; font-family: 'Chakra Petch', monospace; margin-top: 3px; }
.dash-ump { font-size: 10px; color: #888; font-family: 'Chakra Petch', monospace; margin-top: 2px; }
.dash-pitcher-card { background: #0c0a1e; border: 1px solid #009A8B; border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; }
.dash-charter { background: #0c0a1e; border-left: 3px solid #009A8B; border-radius: 6px; padding: 8px 12px; margin-top: 14px; margin-bottom: 14px; font-family: 'Chakra Petch', monospace; font-size: 11px; color: #aaa; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dash-charter .dch-plane { font-size: 14px; color: #009A8B; }
.dash-charter .dch-route { color: #E8DFC8; }
.dash-charter .dch-time { color: #aaa; }
.dash-charter .dch-body { color: #888; font-size: 10px; }
.dash-charter.dch-yellow { border-left-color: #f1c40f; }
.dash-charter.dch-yellow .dch-flag { color: #f1c40f; font-weight: 700; }
.dash-charter.dch-red { border-left-color: #e74c3c; background: #1a0a0a; }
.dash-charter.dch-red .dch-flag { color: #e74c3c; font-weight: 700; }
.dash-charter.dch-critical { border-left-color: #ff3838; background: #2a0a0a; }
.dash-charter.dch-critical .dch-flag { color: #ff3838; font-weight: 700; text-transform: uppercase; }
.dash-charter .dch-spinner { color: #555; }
.dash-charter .dch-refresh { margin-left: auto; background: transparent; border: none; color: #444; font-size: 14px; cursor: pointer; padding: 0 2px; line-height: 1; flex-shrink: 0; }
.dash-charter .dch-refresh:hover { color: #009A8B; }
.dash-charter.dch-dual .dch-refresh { align-self: flex-end; margin-top: 6px; }
.dash-charter.dch-dual { flex-direction: column; align-items: flex-start; gap: 0; }
.dash-charter.dch-dual .dch-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; padding: 4px 0; }
.dash-charter.dch-dual .dch-row + .dch-row { border-top: 1px solid #1a1a2e; margin-top: 4px; padding-top: 8px; }
.dash-pitcher-name { font-family: 'Orbitron', monospace; font-size: 12px; color: #E8DFC8; font-weight: 800; letter-spacing: 0.5px; }
.dash-pitcher-meta { font-family: 'Chakra Petch', monospace; font-size: 10px; color: #888; margin-top: 3px; }
.dash-pitcher-btn { font-family: 'Chakra Petch', monospace; font-size: 10px; color: #009A8B; background: transparent; border: 1px solid #009A8B; padding: 6px 12px; border-radius: 5px; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; }
.dash-pitcher-btn:hover { background: #009A8B; color: #000; }
.dash-best-bet-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid #1a1730; gap: 10px; }
.dash-best-bet-row:last-child { border-bottom: none; }
.dash-best-bet-row--link { cursor: pointer; transition: background 0.12s; margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 4px; }
.dash-best-bet-row--link:hover { background: #14112a; }
.dash-best-bet-left { flex: 1; }
.dash-best-bet-player { font-size: 9px; color: #009A8B; font-family: 'Chakra Petch', monospace; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 2px; }
.dash-best-bet-prop { font-size: 13px; font-weight: 800; color: #E8DFC8; font-family: Georgia, serif; }
.dash-best-bet-right { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; }
.dash-badge { background: #0c0a1e; border: 1px solid #1a1730; border-radius: 4px; padding: 2px 6px; font-family: 'Chakra Petch', monospace; font-size: 9px; color: #009A8B; white-space: nowrap; }
.dash-badge--prob { background: transparent; border: none; padding: 2px 2px; color: #8a86a8; font-style: italic; }
.dash-empty { font-family: 'Chakra Petch', monospace; font-size: 11px; color: #555; padding: 8px 0; }

/* ── Who's Hot? / Who's Not? card ── */
.hotcold-section { margin-bottom: 6px; }
.hotcold-section + .hotcold-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid #1a1730; }
.hotcold-head { font-family: 'Orbitron', monospace; font-size: 12px; font-weight: 700; letter-spacing: 1px; margin-bottom: 8px; }
.hotcold-head--hot { color: #2ecc71; }
.hotcold-head--cold { color: #e8a13a; }
.hotcold-none { font-family: 'Chakra Petch', monospace; font-size: 11px; color: #555; padding: 4px 0 6px; }
.hotcold-row { display: block; padding: 9px 8px; margin: 0 -8px; border-radius: 6px; cursor: pointer; border-left: 3px solid transparent; transition: background 0.12s; }
.hotcold-row:hover { background: #14112a; }
.hotcold-row--hot { border-left-color: rgba(46,204,113,0.55); }
.hotcold-row--cold { border-left-color: rgba(232,161,58,0.55); }
.hotcold-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.hotcold-name { font-family: 'Chakra Petch', monospace; font-size: 13px; font-weight: 700; color: #E8DFC8; }
.hotcold-swing { font-family: 'Chakra Petch', monospace; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.hotcold-swing--hot { color: #2ecc71; }
.hotcold-swing--cold { color: #e8a13a; }
.hotcold-stat { font-family: 'Chakra Petch', monospace; font-size: 11px; color: #cfc8e0; margin-top: 3px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hotcold-chip { background: rgba(0,154,139,0.12); border: 1px solid rgba(0,154,139,0.3); border-radius: 4px; padding: 1px 6px; font-size: 10px; color: #E8DFC8; }
.hotcold-sub { font-family: 'Chakra Petch', monospace; font-size: 10px; color: #777; margin-top: 3px; }
.hotcold-spark { width: 120px; height: 20px; display: block; margin-top: 6px; }

/* ── Collapsible player lineup rows ── */
#dash-player-cards { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; margin-bottom: 20px; }

.dash-prow { background: #0e0c22; border: 1px solid #1a1730; border-radius: 10px; overflow: hidden; }
.dash-prow-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; user-select: none; transition: background 0.12s; }
.dash-prow-header:hover { background: #13102e; }
.dash-prow-order { font-family: 'Orbitron', monospace; font-size: 12px; color: #009A8B; font-weight: 900; min-width: 20px; text-align: center; }
.dash-prow-pos { font-family: 'Chakra Petch', monospace; font-size: 9px; color: #7a8a99; font-weight: 700; min-width: 22px; text-align: center; letter-spacing: 0.3px; }
.dash-prow-name { font-family: 'Orbitron', monospace; font-size: 10px; color: #E8DFC8; font-weight: 800; flex: 1; letter-spacing: 0.5px; }
.dash-prow-statline { font-family: 'Chakra Petch', monospace; font-size: 10px; color: #888; white-space: nowrap; }
.dash-prow-more { background: transparent; border: 1px solid #1a1730; color: #009A8B; font-family: 'Chakra Petch', monospace; font-size: 9px; padding: 4px 9px; border-radius: 4px; cursor: pointer; white-space: nowrap; transition: background 0.12s, color 0.12s; }
.dash-prow-more:hover { background: #009A8B; color: #000; }
.dash-prow-arrow { font-size: 10px; color: #555; min-width: 14px; text-align: right; }

/* Expanded body */
.dash-prow-body { display: flex; flex-wrap: wrap; gap: 14px; padding: 12px 14px 14px; border-top: 1px solid #1a1730; }
.dash-prow-body.hidden { display: none; }

/* Left: score gauge */
.dpb-left { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 76px; }
.dpb-gauge { width: 58px; height: 58px; border-radius: 50%; border: 3px solid #aaa; display: flex; align-items: center; justify-content: center; }
.dpb-gauge-score { font-family: 'Chakra Petch', monospace; font-size: 20px; font-weight: 900; }
.dpb-tier { font-family: 'Chakra Petch', monospace; font-size: 8px; color: #888; text-transform: uppercase; letter-spacing: 1px; text-align: center; line-height: 1.3; }
.dpb-details-btn { background: transparent; border: 1px solid #1a1730; color: #888; font-family: 'Chakra Petch', monospace; font-size: 8px; padding: 5px 9px; border-radius: 4px; cursor: pointer; white-space: nowrap; transition: border-color 0.12s, color 0.12s; }
.dpb-details-btn:hover { color: #E8DFC8; border-color: #009A8B; }

/* Center: bets table — condensed (shrinks to content) */
.dpb-center { flex: 0 1 auto; min-width: 240px; max-width: 360px; }
.dpb-bets-table { width: auto; border-collapse: collapse; font-family: 'Chakra Petch', monospace; font-size: 10px; }
.dpb-bets-table td { padding: 4px 6px; vertical-align: middle; white-space: nowrap; }
.dpb-bets-table tr:not(:last-child) td { border-bottom: 1px solid #1a1730; }
.dpb-icon-star     { color: #f1c40f; font-size: 13px; }
.dpb-icon-strong   { color: #2ecc71; font-size: 13px; }
.dpb-icon-moderate { color: #f39c12; font-size: 13px; }
.dpb-prop  { color: #E8DFC8; }
.dpb-mc    { color: #888; text-align: right; padding-left: 10px; }
.dpb-delta { font-weight: 700; text-align: right; padding-left: 8px; }
.dpb-odds  { color: #009A8B; text-align: right; white-space: nowrap; padding-left: 8px; }
.dpb-book  { font-size: 8px; background: #1a1730; padding: 1px 4px; border-radius: 3px; color: #888; margin-left: 4px; }
.dpb-more-bets { display: block; width: 100%; margin-top: 8px; background: transparent; border: 1px solid #1a1730; color: #009A8B; font-family: 'Chakra Petch', monospace; font-size: 9px; padding: 7px; border-radius: 4px; cursor: pointer; text-align: center; transition: background 0.12s, color 0.12s; }
.dpb-more-bets:hover { background: #009A8B; color: #000; }
.dpb-no-edge { font-family: 'Chakra Petch', monospace; font-size: 10px; color: #555; padding: 8px 0; }

/* Right: stacked context cards (matchup + recent form) */
.dpb-right { flex: 1 1 180px; min-width: 170px; display: flex; flex-direction: column; gap: 8px; }
.dpb-mini-card { background: #0a0818; border: 1px solid #1a1730; border-radius: 6px; padding: 8px 10px; }
.dpb-mini-head { font-family: 'Orbitron', monospace; font-size: 9px; color: #009A8B; font-weight: 800; letter-spacing: 1px; margin-bottom: 4px; }
.dpb-mini-row { font-family: 'Chakra Petch', monospace; font-size: 10px; color: #E8DFC8; line-height: 1.5; }
.dpb-mini-empty { font-family: 'Chakra Petch', monospace; font-size: 9px; color: #555; font-style: italic; }

/* Lineup analysis bar */
.dpb-lineup-analysis { width: 100%; font-family: 'Chakra Petch', monospace; font-size: 9px; color: #666; padding: 8px 0 2px; border-top: 1px solid #1a1730; letter-spacing: 0.5px; text-transform: uppercase; }
.dash-setup-link { text-align: center; padding: 12px 0; border-top: 1px solid #1a1730; margin-top: 8px; }
.dash-setup-link button { background: none; border: none; color: #444; font-family: 'Chakra Petch', monospace; font-size: 10px; cursor: pointer; letter-spacing: 1px; text-transform: uppercase; text-decoration: underline; }
.dash-setup-link button:hover { color: #888; }
.dash-player-header { font-size: 11px; font-weight: 900; font-family: 'Chakra Petch', monospace; color: #009A8B; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid #1a1730; }


/* Low plate appearance warning */
.low-data-badge { font-family: 'Chakra Petch', monospace; font-size: 8px; color: #f39c12; background: rgba(243,156,18,0.12); border: 1px solid rgba(243,156,18,0.4); border-radius: 3px; padding: 1px 5px; margin-left: 5px; vertical-align: middle; letter-spacing: 0.5px; white-space: nowrap; }
.low-data-warning { font-family: 'Chakra Petch', monospace; font-size: 10px; color: #f39c12; background: rgba(243,156,18,0.07); border: 1px solid rgba(243,156,18,0.3); border-radius: 5px; padding: 6px 10px; margin-bottom: 8px; }

/* Model Calibration view */
.cal-section { margin-bottom: 20px; }
.cal-section-title { font-family: 'Chakra Petch', monospace; font-size: 10px; letter-spacing: 1.5px; color: #888; margin-bottom: 4px; }
.cal-section-note { font-family: 'Chakra Petch', monospace; font-size: 9px; color: #555; margin-bottom: 8px; }
.cal-table { font-family: 'Chakra Petch', monospace; font-size: 11px; }
.cal-row { display: grid; padding: 6px 8px; border-bottom: 1px solid #1a1730; align-items: center; gap: 8px; }
.cal-row.cal-header { color: #666; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid #2a2750; }
.cal-row.cal-empty-row { color: #555; font-style: italic; padding: 12px 8px; }
.cal-cell-good { color: #2ecc71; }
.cal-cell-bad { color: #e74c3c; }
.cal-cell-neutral { color: #ccc; }
.cal-cell-muted { color: #777; }

/* Pure-inflator ⚑ flag on live prediction factor cards */
.factor-inflator { color: #e74c3c; cursor: help; }
/* Pure-inflator ⚑ badge on dashboard player rows + CorBET player headers */
.inflator-badge { color: #e74c3c; cursor: help; font-size: 12px; margin-left: 4px; }

/* ── Per-player accuracy table ── */
.pacc-row { grid-template-columns: 1fr 46px 46px 52px 88px 48px; font-family: 'Chakra Petch', monospace; font-size: 12px; }
.pacc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pacc-clickable { cursor: pointer; }
.pacc-clickable:hover { background: #0e0c22; }
.pacc-open { background: #100d26; }
.pacc-caret { display: inline-block; width: 12px; color: #777; font-size: 9px; }
.pacc-open .pacc-caret { color: #5bc0de; }

/* Per-player factor diagnostic (expanded row) */
.pacc-diag { background: #0c0a1e; border: 1px solid #1a1730; border-radius: 8px; padding: 10px 12px; margin: 2px 0 8px; font-family: 'Chakra Petch', monospace; }
.pacc-diag-title { font-size: 10px; color: #bbb; margin-bottom: 8px; line-height: 1.5; }
.pacc-diag-row { display: grid; grid-template-columns: 1fr 64px 56px; gap: 8px; align-items: center; font-size: 11px; padding: 3px 0; }
.pacc-diag-head { color: #666; font-size: 8px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid #1a1730; padding-bottom: 5px; }
.pacc-diag-foot { font-size: 8px; color: #555; margin-top: 8px; line-height: 1.5; }

/* ── Team momentum bar ── */
.momentum-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #0c0a1e;
  border: 1px solid #1a1730;
  border-radius: 8px;
  padding: 8px 14px;
  margin-bottom: 12px;
  font-family: 'Chakra Petch', monospace;
  font-size: 11px;
  flex-wrap: wrap;
}
.momentum-cell { display: flex; flex-direction: column; gap: 1px; }
.momentum-label { font-size: 9px; letter-spacing: 1.5px; color: #6a6a8a; text-transform: uppercase; }
.momentum-val { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: 0.5px; }
.momentum-val.streak-w { color: #2ecc71; }
.momentum-val.streak-l { color: #e74c3c; }
.momentum-val.diff-pos { color: #2ecc71; }
.momentum-val.diff-neg { color: #e74c3c; }
.momentum-divider { width: 1px; height: 26px; background: #1a1730; }
.momentum-empty { color: #555; font-size: 11px; padding: 4px 0; }

/* ── Pitcher form snapshot (last 3 starts, stacked rows) ── */
.dash-pitcher-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  font-family: 'Chakra Petch', monospace;
  font-size: 11px;
}
.pf-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #0c0a1e;
  border-left: 3px solid #1a1730;
  border-radius: 0 4px 4px 0;
  padding: 5px 10px 5px 8px;
  letter-spacing: 0.3px;
}
.pf-row-date { color: #6a6a8a; font-size: 10px; min-width: 36px; letter-spacing: 0.6px; }
.pf-row-opp  { color: #888; font-size: 10px; min-width: 56px; letter-spacing: 0.6px; }
.pf-row-stats { color: #ccc; font-size: 11px; }
.pf-row.pf-good  { border-left-color: #2ecc71; }
.pf-row.pf-bad   { border-left-color: #e74c3c; }
.pf-row.pf-mixed { border-left-color: #f39c12; }
.pf-loading { color: #555; font-size: 10px; padding: 6px 0 0; }

/* ── Pitcher splits (Home/Away + L/R) ── */
.dash-pitcher-splits {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: 'Chakra Petch', monospace;
  font-size: 13px;
}
.ps-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.ps-adv {
  color: #6a6a8a;
  font-size: 11px;
  letter-spacing: 0.5px;
}
.ps-adv b { color: #009A8B; font-size: 14px; font-weight: 700; letter-spacing: 0.3px; }
.ps-divider { width: 1px; height: 16px; background: #1a1730; }
.ps-split {
  color: #888;
  font-size: 12px;
  letter-spacing: 0.4px;
}
.ps-split b { color: #ccc; font-weight: 700; font-size: 13px; }
.ps-split.ps-active {
  color: #f39c12;
  background: rgba(243,156,18,0.1);
  border: 1px solid rgba(243,156,18,0.35);
  border-radius: 3px;
  padding: 2px 8px;
}
.ps-split.ps-active b { color: #f39c12; }

/* ── Pitcher card 3-column grid (left info / matchup / View Stats button) ── */
.pitcher-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 18px;
  align-items: stretch;
}
.pitcher-left { min-width: 0; }
.pitcher-matchup { min-width: 0; display: flex; }
.pitcher-card-grid > .dash-pitcher-btn { align-self: center; }

/* ── Best Matchup card ── */
.bm-card {
  flex: 1;
  background: linear-gradient(135deg, rgba(243,156,18,0.06) 0%, rgba(0,154,139,0.04) 100%);
  border: 1px solid rgba(243,156,18,0.4);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: 'Chakra Petch', monospace;
  font-size: 11px;
  justify-content: center;
}
.bm-empty {
  font-family: 'Chakra Petch', monospace;
  font-size: 10px;
  color: #555;
  align-self: center;
  text-align: center;
  width: 100%;
}
.bm-header {
  text-align: center;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(243,156,18,0.18);
  margin-bottom: 2px;
}
.bm-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2.4px;
  color: #f39c12;
  text-transform: uppercase;
}
.bm-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 1px;
}
.bm-score-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.25);
}
.bm-score-num {
  font-family: 'Chakra Petch', monospace;
  font-size: 16px;
  font-weight: 900;
}
.bm-name {
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
  line-height: 1;
}
.bm-line {
  color: #ccc;
  font-size: 11px;
  letter-spacing: 0.3px;
  line-height: 1.3;
}
.bm-line b { color: #fff; font-weight: 700; }
.bm-stat-lbl { color: #6a6a8a; font-size: 9px; letter-spacing: 0.6px; text-transform: uppercase; margin-right: 4px; }
.bm-summary {
  color: #f39c12;
  font-size: 10px;
  font-style: italic;
  letter-spacing: 0.3px;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed rgba(243,156,18,0.18);
  line-height: 1.3;
}
.bm-career { color: #ccc; }
.bm-bet {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed #1a1730;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.bm-bet-prop { font-size: 11px; font-weight: 700; color: #fff; letter-spacing: 0.3px; }
.bm-bet-stat { font-size: 11px; font-weight: 700; }
.bm-bet-stat.pos { color: #2ecc71; }
.bm-bet-stat.neg { color: #e74c3c; }

/* ── (LEGACY) Projected MVP banner CSS — no longer used ── */
.mvp-banner {
  background: linear-gradient(135deg, rgba(0,154,139,0.12) 0%, rgba(243,156,18,0.08) 100%);
  border: 1px solid #009A8B;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.mvp-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, #f39c12, #009A8B);
}
.mvp-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.mvp-tag {
  font-family: 'Chakra Petch', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #f39c12;
  text-transform: uppercase;
}
.mvp-name {
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
}
.mvp-score-circle {
  margin-left: auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 4px solid #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(0,0,0,0.25);
}
.mvp-score-circle .mvp-score-num {
  font-family: 'Chakra Petch', monospace;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.5px;
}
.mvp-strengths {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.mvp-chip {
  font-family: 'Chakra Petch', monospace;
  font-size: 10px;
  background: rgba(0,154,139,0.12);
  border: 1px solid rgba(0,154,139,0.3);
  color: #00C7B5;
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}
.mvp-summary {
  font-family: Georgia, serif;
  font-size: 13px;
  color: #ccc;
  line-height: 1.5;
  margin-bottom: 10px;
}
.mvp-bet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #0c0a1e;
  border: 1px solid #1a1730;
  border-radius: 6px;
  padding: 8px 12px;
  font-family: 'Chakra Petch', monospace;
}
.mvp-bet-label {
  font-size: 9px;
  color: #6a6a8a;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.mvp-bet-prop {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
}
.mvp-bet-stat {
  margin-left: auto;
  display: flex;
  gap: 12px;
  font-size: 11px;
}
.mvp-bet-stat .lbl { color: #6a6a8a; font-size: 9px; }
.mvp-bet-stat .val.pos { color: #2ecc71; font-weight: 700; }
.mvp-bet-stat .val.neg { color: #e74c3c; font-weight: 700; }

/* ── Two-week schedule (dashboard) ── */
.sched-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.sched-grid + .sched-grid { margin-top: 6px; }
.sched-cell {
  background: #0e0c22;
  border: 1px solid #1a1730;
  border-radius: 6px;
  padding: 6px 5px;
  min-height: 78px;
  font-family: 'Chakra Petch', monospace;
  font-size: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sched-cell.sched-today { border-color: #009A8B; box-shadow: 0 0 0 1px rgba(0,154,139,0.35) inset; }
.sched-cell.sched-off   { background: #0a0918; color: #444; }
.sched-cell.sched-final { opacity: 0.65; }
.sched-day {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #6a6a8a;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px;
}
.sched-dow { letter-spacing: 1.4px; }
.sched-date { color: #888; letter-spacing: 0.5px; }
.sched-cell.sched-today .sched-day { color: #009A8B; }
.sched-opp {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  margin-top: 1px;
}
.sched-time {
  font-size: 10px;
  color: #aaa;
}
.sched-venue {
  font-size: 9px;
  color: #6a6a8a;
  letter-spacing: 0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sched-pp {
  font-size: 9px;
  color: #c8a55c;
  margin-top: auto;
  padding-top: 2px;
  border-top: 1px dashed #1a1730;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sched-pp.sched-pp-tbd { color: #555; }
.sched-result {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-top: auto;
  padding-top: 2px;
}
.sched-result.sched-w { color: #2ecc71; }
.sched-result.sched-l { color: #e74c3c; }
.sched-live {
  font-size: 9px;
  color: #f39c12;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.sched-off-label {
  font-size: 11px;
  text-align: center;
  margin-top: 18px;
  letter-spacing: 1px;
}

/* ── Tablet ── */
@media (max-width: 768px) {
  .content { padding: 14px 14px 16px; }
  .card-body { padding: 14px 14px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .pitcher-card-grid { grid-template-columns: 1fr; gap: 12px; }
  .pitcher-card-grid > .dash-pitcher-btn { align-self: stretch; justify-self: stretch; }
  .sched-grid { grid-template-columns: repeat(4, 1fr); }
  .prop-record-grid { grid-template-columns: repeat(3, 1fr); }
  .record-summary-strip { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .record-summary-strip .rss-sparkline { grid-column: 1 / -1; padding-left: 0; border-left: none; border-top: 1px solid #1a1730; padding-top: 8px; }
  .factor-perf-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .factor-perf-row .factor-perf-bar-wrap { grid-column: 1 / -1; }
  .factor-perf-row .factor-perf-weight { grid-column: 1 / -1; text-align: right; }
}

/* ── Mobile ── */
@media (max-width: 560px) {
  body { padding-bottom: 30px; padding-bottom: max(30px, env(safe-area-inset-bottom)); }
  .content { padding: 10px; }

  /* Prevent iOS auto-zoom when focusing form fields (font-size must be ≥ 16px).
     Exclude checkbox/radio/range — they don't trigger the zoom and inheriting
     padding bloats them (e.g. CorBET filter checkboxes pushing names off-row,
     weather sliders losing their padding:0). */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select,
  textarea { font-size: 16px; padding: 9px 11px; }
  .toggle-btn { padding: 8px 14px; font-size: 11px; }

  /* Card headers wrap their tail content (pending count, action buttons,
     "X games graded · building confidence") onto a second line instead of
     overflowing the card on narrow screens. */
  .card-header { padding: 10px 12px; font-size: 9px; letter-spacing: 2px; flex-wrap: wrap; row-gap: 4px; column-gap: 8px; }

  /* Pitch-mix matchup row: drop the stats line (BA · SLG · K% · wOBA · PA)
     onto its own row below the pitch name + usage bar so it has the full
     card width and doesn't wrap mid-slash-line. */
  .matchup-row {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 4px;
  }
  .matchup-row .matchup-stats {
    grid-column: 1 / -1;
    flex-wrap: nowrap;
    overflow-x: auto;
    font-size: 11px;
  }
  .matchup-row .matchup-sample { margin-left: auto; }

  /* CorBET player filter: keep player names on one line and pin the checkbox
     to a small native size so it doesn't dominate the label. */
  #corbet-player-filter { gap: 6px; padding: 8px 10px; }
  #corbet-player-filter label {
    white-space: nowrap;
    padding: 4px 8px;
    flex: 0 0 auto;
  }
  #corbet-player-filter input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin: 0;
  }

  /* Form rows stack: label above field for full-width inputs */
  .row { grid-template-columns: 1fr; gap: 6px; margin-bottom: 14px; }
  .row label { font-size: 11px; }

  /* Cards */
  .card { margin-bottom: 12px; border-radius: 10px; }
  .card-body { padding: 14px 12px; }

  /* Grids reflow */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .stats-grid .stat-box:nth-child(odd) .stat-info .stat-tip { left: 0; right: auto; transform: none; }
  .stats-grid .stat-box:nth-child(even) .stat-info .stat-tip { left: auto; right: 0; transform: none; }
  .stat-info .stat-tip { width: min(220px, calc(100vw - 60px)); }
  .weather-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pitch-mix-grid { grid-template-columns: 1fr; }

  /* Header */
  .header { padding: 10px 10px; gap: 6px; }
  .site-title { font-size: 15px; letter-spacing: 2px; }
  .header small { display: none; }
  .api-credits { display: none; }
  .odds-lock-badge { display: none; }
  .header-btn { font-size: 8px; padding: 6px 7px; letter-spacing: 0.3px; min-height: 32px; }
  .header-right { gap: 5px; }

  /* Game banner */
  .dash-game-banner { padding: 10px 12px; margin-bottom: 10px; }
  .dash-opp { font-size: 14px; }

  /* Pitcher card: collapse 3-col grid into a single column with
     reordered content (info → matchup → button) and a centered,
     auto-width "View Stats" button rather than a full-width banner. */
  .dash-pitcher-card { padding: 10px 12px; margin-bottom: 10px; gap: 8px; align-items: stretch; }
  .dash-pitcher-name { font-size: 11px; }
  .dash-pitcher-meta { font-size: 10px; line-height: 1.4; }
  .pitcher-card-grid { grid-template-columns: 1fr; gap: 10px; }
  .pitcher-card-grid > .dash-pitcher-btn {
    align-self: center;
    justify-self: stretch;
    text-align: center;
    padding: 9px 14px;
    min-height: 36px;
    font-size: 10px;
  }

  /* Recent starts: tighter spacing, stats line wraps if needed */
  .dash-pitcher-form { font-size: 10px; gap: 3px; margin-top: 8px; }
  .pf-row { gap: 8px; padding: 5px 8px; flex-wrap: wrap; }
  .pf-row-date { min-width: 30px; font-size: 9px; }
  .pf-row-opp  { min-width: 44px; font-size: 9px; }
  .pf-row-stats { font-size: 10px; flex: 1 1 auto; min-width: 0; }

  /* Splits: drop the inline divider, let rows wrap cleanly */
  .dash-pitcher-splits { font-size: 11px; gap: 6px; margin-top: 8px; }
  .ps-row { gap: 8px 12px; row-gap: 4px; }
  .ps-divider { display: none; }
  .ps-adv { font-size: 10px; }
  .ps-adv b { font-size: 12px; }
  .ps-split { font-size: 11px; letter-spacing: 0.3px; }
  .ps-split b { font-size: 12px; }
  .ps-split.ps-active { padding: 1px 6px; }

  /* Best Matchup card: smaller name + score, allow bet row to wrap */
  .bm-card { padding: 10px 12px; gap: 4px; }
  .bm-header { padding-bottom: 3px; margin-bottom: 1px; }
  .bm-tag { font-size: 8px; letter-spacing: 1.8px; }
  .bm-name-row { gap: 8px; }
  .bm-name { font-size: 17px; line-height: 1.1; }
  .bm-score-circle { width: 38px; height: 38px; border-width: 2.5px; }
  .bm-score-num { font-size: 14px; }
  .bm-line { font-size: 10px; line-height: 1.4; }
  .bm-stat-lbl { font-size: 8px; letter-spacing: 0.5px; }
  .bm-bet { flex-wrap: wrap; gap: 4px 10px; padding-top: 5px; margin-top: 3px; }
  .bm-bet-prop, .bm-bet-stat { font-size: 10px; }
  .bm-summary { font-size: 10px; margin-top: 3px; padding-top: 3px; line-height: 1.35; }

  /* Best bets card */
  .dash-best-bet-right { justify-content: flex-start; margin-top: 4px; }
  .dash-best-bet-prop { font-size: 11px; }
  /* Market%→Model% sticker is desktop/tablet only — it squishes the row on phones */
  .dash-badge--prob { display: none; }

  /* Player row header — keep the stats button visible so batter
     stats are reachable in portrait. The inline statline is hidden
     to make room, and the button label shortens to "STATS ›". */
  .dash-prow-header { padding: 10px 10px; gap: 6px; }
  .dash-prow-statline { display: none; }
  .dash-prow-name { font-size: 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
  .dash-prow-more {
    padding: 7px 10px;
    min-height: 32px;
    font-size: 0;
    letter-spacing: 0;
  }
  .dash-prow-more::before {
    content: 'STATS ›';
    font-size: 9px;
    letter-spacing: 0.5px;
  }

  /* Player row body — stack columns */
  .dash-prow-body { gap: 10px; padding: 10px; }
  .dpb-left { width: 100%; flex-direction: row; justify-content: center; gap: 16px; min-width: 0; }
  .dpb-center { min-width: 0; width: 100%; max-width: 100%; overflow-x: auto; }
  .dpb-right { min-width: 0; width: 100%; }

  /* Larger touch targets for buttons inside card */
  .dpb-details-btn { padding: 8px 12px; font-size: 9px; }
  .dpb-more-bets { padding: 10px; }

  /* Factor rows — value wraps under label, note spans full width */
  .factor-row { grid-template-columns: 14px 1fr auto; gap: 4px 8px; }
  .factor-row .factor-note { grid-column: 1 / -1; padding-left: 22px; }

  /* Schedule grid: 4 columns instead of 7 so cells stay legible */
  .sched-grid { grid-template-columns: repeat(4, 1fr); }
  .sched-cell { min-height: 70px; }

  /* Record summary */
  .record-summary-strip { grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 10px 12px; }
  .record-summary-strip .rss-sparkline { grid-column: 1 / -1; padding-left: 0; border-left: none; border-top: 1px solid #1a1730; padding-top: 8px; }
  .prop-record-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }

  /* Bet log: each bet is its own card with clear hierarchy.
     Row 1: date · player · opp · delete
     Row 2: prop name (full width)
     Row 3: odds · rating · W/L/P buttons */
  #bet-log-headers { display: none !important; }
  .bet-log-item {
    background: #0c0a1e;
    border: 1px solid #1a1730;
    border-radius: 8px;
    padding: 10px 12px !important;
    margin-bottom: 8px;
    grid-template-columns: auto 1fr auto auto;
    grid-template-rows: auto auto auto;
    column-gap: 10px;
    row-gap: 6px;
    border-bottom: 1px solid #1a1730 !important;
  }
  .bet-log-item .bli-date    { grid-row: 1; grid-column: 1; font-size: 10px; color: #6a6a8a; letter-spacing: 0.5px; align-self: center; }
  .bet-log-item .bli-player  { grid-row: 1; grid-column: 2; font-size: 12px; font-weight: 700; color: #E8DFC8; }
  .bet-log-item .bli-opp     { grid-row: 1; grid-column: 3; font-size: 10px; color: #009A8B; font-weight: 700; align-self: center; letter-spacing: 0.5px; }
  .bet-log-item .bli-opp:empty { display: none; }
  .bet-log-item .del-btn     { grid-row: 1; grid-column: 4; font-size: 20px; padding: 0 4px; align-self: center; color: #4a4560; }
  .bet-log-item .bli-prop    { grid-row: 2; grid-column: 1 / -1; font-size: 13px; color: #ccc; line-height: 1.3; }
  .bet-log-item .bli-odds    { grid-row: 3; grid-column: 1; font-size: 12px; color: #888; align-self: center; font-weight: 700; }
  .bet-log-item .bli-rating  { grid-row: 3; grid-column: 2; justify-self: start; align-self: center; font-size: 9px; padding: 3px 8px; }
  .bet-log-item .bli-result  { grid-row: 3; grid-column: 3 / -1; justify-self: end; align-self: center; gap: 5px; }
  .bet-log-item .result-btn  { padding: 6px 10px; font-size: 11px; min-width: 32px; }
  .bet-log-item .result-btn:not(.active) { opacity: 0.55; }
  /* Pending bets stay at full opacity on mobile so W/L/P stays tappable —
     the empty button row already telegraphs the pending state. */
  .bet-log-item.bet-pending { opacity: 1; }

  /* Grade log: each game is its own card.
     Row 1: date · player · model badge (Accurate/Close/Off — prediction calibration)
     Row 2: SCORE n · PERF n · outcome badge (Poor/Avg/Great — pairs with PERF)
     Row 3: stat line (full width) */
  #grade-log-headers { display: none !important; }
  .grade-log-row {
    background: #0c0a1e;
    border: 1px solid #1a1730;
    border-radius: 8px;
    padding: 10px 12px !important;
    margin-bottom: 8px;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto auto;
    column-gap: 10px;
    row-gap: 6px;
    border-bottom: 1px solid #1a1730 !important;
  }
  /* spans: 1=date, 2=score, 3=player, 4=stat-line, 5=perf, 6=outcome, 7=model */
  .grade-log-row > span:nth-child(1) { grid-row: 1; grid-column: 1; font-size: 10px; color: #6a6a8a; letter-spacing: 0.5px; align-self: center; }
  .grade-log-row > span:nth-child(3) { grid-row: 1; grid-column: 2; font-size: 12px; font-weight: 700; color: #E8DFC8 !important; }
  /* Model badge (child 7) → top row by the name; outcome badge (child 6) drops
     to the SCORE/PERF row so it sits beside the PERF value it grades. */
  .grade-log-row > span:nth-child(7) { grid-row: 1; grid-column: 3; justify-self: end; align-self: center; }
  .grade-log-row > span:nth-child(2) { grid-row: 2; grid-column: 1; font-size: 14px !important; font-weight: 800; align-self: center; }
  .grade-log-row > span:nth-child(2)::before { content: 'SCORE '; font-size: 9px; color: #6a6a8a; font-weight: 600; letter-spacing: 0.5px; margin-right: 3px; }
  .grade-log-row > span:nth-child(5) { grid-row: 2; grid-column: 2; font-size: 12px !important; font-weight: 700; align-self: center; }
  .grade-log-row > span:nth-child(5)::before { content: 'PERF '; font-size: 9px; color: #6a6a8a; font-weight: 600; letter-spacing: 0.5px; margin-right: 3px; }
  .grade-log-row > span:nth-child(6) { grid-row: 2; grid-column: 3; justify-self: end; align-self: center; }
  .grade-log-row > span:nth-child(4) { grid-row: 3; grid-column: 1 / -1; font-size: 12px; color: #ccc !important; line-height: 1.3; padding-top: 2px; border-top: 1px solid #14132c; margin-top: 2px; }
  /* Edit/Delete actions: thin row at the very bottom of the card, right-aligned. */
  .grade-log-row .grade-row-actions { grid-row: 4; grid-column: 1 / -1; justify-self: end; align-self: center; margin-top: -2px; }
  .grade-log-row .grade-row-edit, .grade-log-row .grade-row-del { padding: 4px 10px; min-width: 32px; font-size: 14px; }

  /* Factor perf rows: bar drops to a new line for full-width visualization */
  .factor-perf-row { grid-template-columns: 1fr auto; row-gap: 4px; column-gap: 8px; }
  .factor-perf-row .factor-perf-bar-wrap { grid-column: 1 / -1; height: 5px; }
  /* Span weight across both cols so text-align:right pins it under the
     percentage on the row's right edge (instead of right-of-col-1, which
     reads as roughly centered). */
  .factor-perf-row .factor-perf-weight { grid-column: 1 / -1; text-align: right; }

  /* Momentum bar */
  .momentum-bar { gap: 10px; padding: 7px 10px; font-size: 10px; }
  .momentum-divider { display: none; }

  /* Calibration rows */
  .cal-table { font-size: 10px; }
  .cal-row { padding: 5px 4px; gap: 6px; }

  /* Per-player accuracy table — tighten numeric columns so the player name
     keeps real estate, shrink the font, and drop the (good/total) detail. */
  .pacc-row { grid-template-columns: 1fr 28px 34px 42px 46px 38px; font-size: 10px; gap: 4px; }
  .pacc-detail { display: none; }
  .pacc-diag-row { grid-template-columns: 1fr 52px 48px; font-size: 10px; }

  /* Search dropdown gets more room when keyboard is up */
  .search-results { max-height: 50vh; }

  /* Modal — full-width sheet, top-anchored so long panels open from the top */
  .modal-overlay { padding: 8px 4px; align-items: flex-start; }
  .modal-frame {
    border-radius: 12px;
    padding: 48px 12px 20px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    max-height: 92vh;
    overflow-y: auto;
  }
  .modal-close { font-size: 28px; padding: 4px 10px; }
}

/* ── Small phones (iPhone SE, etc.) ── */
@media (max-width: 380px) {
  .content { padding: 8px; }
  .header { padding: 8px 8px; }
  .site-title { font-size: 13px; letter-spacing: 1.5px; }
  .header small { display: none; }
  .header-btn { padding: 5px 5px; font-size: 8px; letter-spacing: 0; }
  .sched-grid { grid-template-columns: repeat(3, 1fr); }
  .sched-cell { min-height: 64px; font-size: 9px; }
  .stat-box .stat-val { font-size: 18px; }
  .split-box .split-ops { font-size: 22px; }
  .corbet-header { padding: 12px 14px; gap: 10px; }
  .corbet-title { font-size: 12px; }

  /* Pitcher card + Best Matchup: extra-tight on iPhone-SE-class widths */
  .dash-pitcher-card { padding: 9px 10px; }
  .pf-row { padding: 4px 6px; gap: 6px; }
  .pf-row-stats { font-size: 9px; }
  .bm-card { padding: 9px 10px; }
  .bm-name { font-size: 15px; }
  .bm-score-circle { width: 34px; height: 34px; border-width: 2px; }
  .bm-score-num { font-size: 12px; }
  .bm-line { font-size: 9px; }
}

/* ── Share-mode edit lock ──────────────────────────────────────────────────
   When the Record + Grade tabs are locked (body.savant-locked, see lock.js),
   hide the mutating controls so a shared viewer sees a clean read-only record.
   Enforcement is centralized in app.js's _dispatchAction; this is purely the
   visual half so the buttons don't tease an action the PIN gate will block. */
body.savant-locked [data-action="clear-record"],
body.savant-locked [data-action="clear-grades"],
body.savant-locked [data-action="autograde"],
body.savant-locked [data-action="toggle-add-bet"],
body.savant-locked #add-bet-form,
body.savant-locked [data-action="save-bet"],
body.savant-locked [data-action="set-result"],
body.savant-locked [data-action="delete-bet"],
body.savant-locked [data-action="auto-grade"],
body.savant-locked [data-action="edit-grade"],
body.savant-locked [data-action="delete-grade"],
body.savant-locked [data-action="remove-pending"] {
  display: none !important;
}
#lock-btn { white-space: nowrap; }