/* Model Edge Indicators — Sharp Money Style */
.model-edge {
  margin-top: 8px;
  padding: 6px 12px;
  background: rgba(0, 230, 118, 0.08);
  border: 1px solid rgba(0, 230, 118, 0.25);
  border-radius: 8px;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.model-edge-hot {
  background: rgba(255, 215, 0, 0.1);
  border-color: rgba(255, 215, 0, 0.3);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.15);
}

.model-edge-fire {
  background: rgba(255, 69, 0, 0.1);
  border-color: rgba(255, 69, 0, 0.35);
  box-shadow: 0 0 20px rgba(255, 69, 0, 0.2), 0 0 40px rgba(255, 215, 0, 0.08);
  animation: edge-pulse 2s ease-in-out infinite;
}

@keyframes edge-pulse {
  0%, 100% { box-shadow: 0 0 15px rgba(255, 69, 0, 0.15), 0 0 30px rgba(255, 215, 0, 0.05); }
  50% { box-shadow: 0 0 25px rgba(255, 69, 0, 0.25), 0 0 50px rgba(255, 215, 0, 0.12); }
}

.edge-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
}

.edge-label {
  color: #aaa;
  font-weight: 600;
}

.edge-value {
  font-weight: 800;
}

.edge-positive {
  color: #00e676;
}

.edge-hot {
  color: #ffd700;
}

.edge-fire {
  color: #ff6347;
  text-shadow: 0 0 8px rgba(255, 99, 71, 0.4);
}

.edge-note {
  color: #888;
  font-size: 0.75rem;
  margin-left: auto;
}

/* Compact style for live score cards */
.card .model-edge {
  margin-top: 4px;
  padding: 4px 10px;
  font-size: 0.75rem;
}

/* Compact for daily picks */
.dp-card .model-edge {
  margin-top: 6px;
  font-size: 0.78rem;
}

/* Inside prediction cards */
.pred-card .model-edge {
  margin-top: 8px;
}

/* Inline in pick cards */
.pick .model-edge {
  margin-top: 6px;
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .model-edge {
    padding: 5px 10px;
    font-size: 0.75rem;
    gap: 4px;
  }
  .edge-note {
    display: none;
  }
}
/* === UNDERDOG ALERT BADGES === */
.alert-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 800;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 4px 0;
}
.alert-upset {
  background: rgba(244,67,54,0.2);
  color: #ff5252;
  border: 1px solid rgba(244,67,54,0.4);
  box-shadow: 0 0 12px rgba(244,67,54,0.3);
  animation: pulse-red 2s infinite;
}
.alert-tossup {
  background: rgba(255,193,7,0.2);
  color: #ffc107;
  border: 1px solid rgba(255,193,7,0.4);
  box-shadow: 0 0 8px rgba(255,193,7,0.2);
}
.alert-brick {
  background: rgba(158,158,158,0.15);
  color: #9e9e9e;
  border: 1px solid rgba(158,158,158,0.3);
}
.alert-lean {
  background: rgba(76,175,80,0.15);
  color: #4caf50;
  border: 1px solid rgba(76,175,80,0.3);
}
.alert-value {
  background: rgba(156,39,176,0.2);
  color: #ce93d8;
  border: 1px solid rgba(156,39,176,0.4);
  box-shadow: 0 0 8px rgba(156,39,176,0.3);
}
@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 12px rgba(244,67,54,0.3); }
  50% { box-shadow: 0 0 20px rgba(244,67,54,0.6); }
}
.match-proj{margin:6px 0;padding:6px 10px;background:rgba(255,255,255,0.03);border-radius:8px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;font-size:.75rem}
.match-proj .pj-item{text-align:center}
.match-proj .pj-label{color:#666;font-size:.65rem;text-transform:uppercase;letter-spacing:.5px}
.match-proj .pj-val{color:#ccc;font-weight:700;font-size:.82rem}
.match-proj .pj-val.pj-score{color:#00e676}
.match-proj .pj-val.pj-spread{color:#42a5f5}
.match-proj .pj-val.pj-total{color:#ff9800}
.match-proj .pj-val.pj-3g{color:#ce93d8}
.match-proj .pj-3g-high{color:#ff5252}
@media(max-width:600px){.match-proj{grid-template-columns:repeat(2,1fr);gap:6px}}
/* === VOLATILITY METER === */
.vol-meter { display:flex; align-items:center; gap:6px; margin:6px 0; font-size:.7rem; }
.vol-label { white-space:nowrap; font-weight:600; letter-spacing:.02em; }
.vol-stable { color:#42a5f5; }
.vol-chaos { color:#ff5252; }
.vol-track { flex:1; max-width:200px; height:6px; background:rgba(255,255,255,.08); border-radius:3px; position:relative; overflow:visible; }
.vol-fill { height:100%; border-radius:3px; transition:width .5s ease; }
.vol-needle { position:absolute; top:-3px; width:12px; height:12px; border-radius:50%; transform:translateX(-50%); border:2px solid #fff; transition:left .5s ease; }

/* Color levels */
.vol-fill[data-level="low"]  { background:linear-gradient(90deg,#42a5f5,#42a5f5); }
.vol-fill[data-level="med"]  { background:linear-gradient(90deg,#42a5f5,#ffc107); }
.vol-fill[data-level="high"] { background:linear-gradient(90deg,#42a5f5,#ff5252); }
.vol-needle[data-level="low"]  { background:#42a5f5; }
.vol-needle[data-level="med"]  { background:#ffc107; }
.vol-needle[data-level="high"] { background:#ff5252; box-shadow:0 0 8px rgba(255,82,82,.5); }

/* Compact inline for betting board */
.vol-meter.vol-compact { gap:4px; margin:3px 0; font-size:.6rem; }
.vol-meter.vol-compact .vol-track { max-width:100px; height:4px; }
.vol-meter.vol-compact .vol-needle { width:8px; height:8px; top:-2px; }
.vol-meter.vol-compact .vol-label { font-size:.6rem; }

/* Score tooltip */
.vol-meter[title] { cursor:help; }
/* Doubles Chemistry Intelligence Layer — The Dink Sheet */
.chemistry-score{display:flex;align-items:center;gap:6px;font-size:.78rem;margin:4px 0}
.chem-label{color:#888}
.chem-value{font-weight:800;font-size:.85rem}
.chem-positive{color:#00e676}
.chem-negative{color:#ff5252}
.chem-neutral{color:#666}

.synergy-breakdown{font-size:.72rem;padding:6px 8px;background:rgba(255,255,255,.03);border-radius:6px;margin:4px 0}
.syn-row{display:flex;justify-content:space-between;padding:2px 0;color:#888}
.syn-adj{color:#aaa}
.syn-pos{color:#00e676;font-weight:700}
.syn-neg{color:#ff5252;font-weight:700}
.syn-eff{border-top:1px solid rgba(255,255,255,.1);padding-top:4px;margin-top:2px}
.syn-eff span:last-child{color:#fff;font-weight:700}

.risk-badge{display:inline-block;padding:3px 10px;background:rgba(255,152,0,.15);border:1px solid rgba(255,152,0,.3);color:#ff9800;border-radius:12px;font-size:.7rem;font-weight:700}

.override-badge{display:inline-block;padding:3px 10px;background:rgba(156,39,176,.15);border:1px solid rgba(156,39,176,.3);color:#ce93d8;border-radius:12px;font-size:.7rem;font-weight:700;animation:pulse-override 3s infinite}
@keyframes pulse-override{0%,100%{box-shadow:0 0 4px rgba(156,39,176,.2)}50%{box-shadow:0 0 12px rgba(156,39,176,.4)}}

.chem-info{cursor:help;font-size:.7rem;color:#666}

.chem-container{margin:6px 0 2px;padding:4px 8px;border-left:2px solid rgba(0,230,118,.2);background:rgba(0,230,118,.02);border-radius:0 6px 6px 0}
.chem-container .chem-header{display:flex;align-items:center;gap:6px;margin-bottom:2px}

.chem-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}

@media(max-width:600px){
  .synergy-breakdown{font-size:.65rem;padding:4px 6px}
  .chemistry-score{font-size:.72rem}
  .chem-value{font-size:.78rem}
}
/* Line Movement Display */
.line-move {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  margin: 4px 0;
  background: rgba(0,230,118,0.06);
  border-left: 3px solid #00e676;
  border-radius: 0 6px 6px 0;
  font-size: 0.78rem;
  animation: lineSlideIn 0.5s ease-out;
}
.line-move-icon { font-size: 1rem; }
.line-move-text { color: #00e676; font-weight: 700; }
.line-move-detail { color: #888; }

.line-move.negative {
  border-left-color: #ff5252;
  background: rgba(255,82,82,0.06);
}
.line-move.negative .line-move-text { color: #ff5252; }

@keyframes lineSlideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}
.model-reason {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 10px;
  margin: 4px 0;
  background: rgba(66, 165, 245, 0.06);
  border-left: 3px solid #42a5f5;
  border-radius: 0 6px 6px 0;
  font-size: 0.75rem;
  color: #aaa;
  font-style: italic;
}
.model-reason .reason-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
}
.model-reason .reason-text {
  line-height: 1.4;
}
/* Model Performance Tracker */
.mp-card{background:#0a0a0f;border-radius:14px;padding:1.2rem 1.4rem;margin-bottom:1.5rem;border:1px solid rgba(255,255,255,.06);position:relative;overflow:hidden}
.mp-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.mp-card.mp-hot::before{background:linear-gradient(90deg,#00e676,#69f0ae)}
.mp-card.mp-warm::before{background:linear-gradient(90deg,#ffca28,#ffd54f)}
.mp-card.mp-cold::before{background:linear-gradient(90deg,#f44336,#e57373)}

.mp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.mp-title{font-size:.85rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.5);display:flex;align-items:center;gap:8px}
.mp-title svg{width:16px;height:16px}
.mp-live{font-size:.6rem;background:rgba(244,67,54,.15);color:#f44336;padding:2px 8px;border-radius:10px;font-weight:700;letter-spacing:.05em;display:flex;align-items:center;gap:4px}
.mp-live-dot{width:6px;height:6px;background:#f44336;border-radius:50%;animation:mp-pulse 1.5s infinite}
@keyframes mp-pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* Main accuracy display */
.mp-accuracy-row{display:flex;align-items:flex-end;gap:12px;margin-bottom:.8rem}
.mp-accuracy-num{font-size:2.4rem;font-weight:900;line-height:1}
.mp-accuracy-num.mp-green{color:#00e676}
.mp-accuracy-num.mp-amber{color:#ffca28}
.mp-accuracy-num.mp-red{color:#f44336}
.mp-accuracy-detail{font-size:.8rem;color:#666;padding-bottom:4px}

/* Progress bar */
.mp-bar-wrap{height:8px;background:#1a1a1a;border-radius:4px;overflow:hidden;margin-bottom:1rem}
.mp-bar-fill{height:100%;border-radius:4px;transition:width .6s ease}
.mp-bar-fill.mp-green{background:linear-gradient(90deg,#00c853,#69f0ae)}
.mp-bar-fill.mp-amber{background:linear-gradient(90deg,#ff8f00,#ffca28)}
.mp-bar-fill.mp-red{background:linear-gradient(90deg,#d32f2f,#f44336)}

/* Stats row */
.mp-stats{display:flex;gap:1.5rem;margin-bottom:1rem;flex-wrap:wrap}
.mp-stat{flex:1;min-width:100px}
.mp-stat-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:#555;margin-bottom:2px}
.mp-stat-val{font-size:1.1rem;font-weight:800;color:#fff}

/* Edge wins / misses */
.mp-section{margin-top:.8rem}
.mp-section-title{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem;display:flex;align-items:center;gap:6px}
.mp-section-title.mp-wins{color:#00e676}
.mp-section-title.mp-misses{color:#f44336}

.mp-match{display:flex;align-items:center;gap:8px;padding:.35rem 0;font-size:.8rem;border-bottom:1px solid rgba(255,255,255,.03)}
.mp-match:last-child{border-bottom:none}
.mp-match-icon{font-size:.9rem;flex-shrink:0}
.mp-match-text{color:#ccc;flex:1}
.mp-match-text strong{color:#fff}
.mp-match-gap{font-size:.7rem;color:#555;white-space:nowrap;font-weight:600}

/* Compact version for hub */
.mp-compact{background:#0a0a0f;border-radius:10px;padding:.8rem 1rem;border:1px solid rgba(255,255,255,.06);position:relative;overflow:hidden}
.mp-compact::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.mp-compact.mp-hot::before{background:linear-gradient(90deg,#00e676,#69f0ae)}
.mp-compact.mp-warm::before{background:linear-gradient(90deg,#ffca28,#ffd54f)}
.mp-compact.mp-cold::before{background:linear-gradient(90deg,#f44336,#e57373)}
.mp-compact .mp-header{margin-bottom:.6rem}
.mp-compact .mp-accuracy-num{font-size:1.6rem}
.mp-compact .mp-bar-wrap{margin-bottom:.6rem}
.mp-compact .mp-stats{margin-bottom:0;gap:1rem}
.mp-compact .mp-stat-val{font-size:.95rem}
.mp-compact-link{display:block;text-align:center;font-size:.7rem;color:var(--accent,#ff6b35);text-decoration:none;margin-top:.6rem;font-weight:600}
.mp-compact-link:hover{text-decoration:underline}

/* No data state */
.mp-nodata{text-align:center;padding:1.5rem;color:#555;font-style:italic;font-size:.85rem}

@media(max-width:600px){
  .mp-card{padding:1rem}
  .mp-accuracy-num{font-size:1.8rem}
  .mp-stats{gap:.8rem}
  .mp-stat{min-width:80px}
  .mp-match{font-size:.75rem}
}
/* ============================================
   BET SLIP — Mobile Bottom Bar + Desktop Panel
   ============================================ */

/* --- Mobile Bottom Bar --- */
.slip-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: #0a0a0f;
  border-top: 1px solid rgba(0,230,118,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00e676;
  font-weight: 700;
  font-size: 1rem;
  z-index: 10000;
  cursor: pointer;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
  transition: transform 0.3s ease;
  gap: 8px;
}
.slip-bar.empty {
  transform: translateY(100%);
  pointer-events: none;
}
.slip-bar .slip-count-badge {
  background: #00e676;
  color: #000;
  font-size: 0.75rem;
  font-weight: 800;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

/* --- Slide-up Sheet (mobile) --- */
.slip-sheet {
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  max-height: 75vh;
  background: #0d0d14;
  border-top: 2px solid #00e676;
  border-radius: 16px 16px 0 0;
  z-index: 10001;
  transition: bottom 0.3s ease;
  overflow-y: auto;
  padding: 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.7);
}
.slip-sheet.open {
  bottom: 0;
}
.slip-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.slip-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.slip-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky;
  top: 0;
  background: #0d0d14;
  z-index: 2;
}
.slip-sheet-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #fff;
}
.slip-sheet-close {
  background: none;
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.slip-sheet-close:hover {
  background: rgba(255,255,255,0.08);
}

/* --- Picks List --- */
.slip-picks {
  padding: 8px 16px;
}
.slip-pick-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.slip-pick-item:last-child {
  border-bottom: none;
}
.slip-pick-info {
  flex: 1;
  min-width: 0;
}
.slip-pick-event {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.slip-pick-match {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slip-pick-selection {
  font-size: 0.9rem;
  font-weight: 700;
  color: #00e676;
  margin-bottom: 2px;
}
.slip-pick-details {
  display: flex;
  gap: 10px;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
}
.slip-pick-details span {
  white-space: nowrap;
}
.slip-pick-remove {
  background: none;
  border: none;
  color: rgba(255,255,255,0.25);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 4px;
  transition: color 0.15s;
  flex-shrink: 0;
}
.slip-pick-remove:hover {
  color: #ff4444;
}

/* --- Empty state --- */
.slip-empty {
  text-align: center;
  padding: 32px 16px;
  color: rgba(255,255,255,0.3);
  font-size: 0.85rem;
}
.slip-empty-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

/* --- Actions --- */
.slip-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
  position: sticky;
  bottom: 0;
  background: #0d0d14;
}
.slip-actions button {
  flex: 1;
  padding: 10px 12px;
  border-radius: 8px;
  border: none;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
}
.slip-action-copy {
  background: rgba(0,230,118,0.15);
  color: #00e676;
  border: 1px solid rgba(0,230,118,0.3) !important;
}
.slip-action-copy:hover {
  background: rgba(0,230,118,0.25);
}
.slip-action-share {
  background: rgba(78,205,196,0.15);
  color: #4ecdc4;
  border: 1px solid rgba(78,205,196,0.3) !important;
}
.slip-action-share:hover {
  background: rgba(78,205,196,0.25);
}
.slip-action-clear {
  background: rgba(255,68,68,0.1);
  color: #ff6b6b;
  border: 1px solid rgba(255,68,68,0.2) !important;
  flex: 0.6;
}
.slip-action-clear:hover {
  background: rgba(255,68,68,0.2);
}

/* --- Copied toast --- */
.slip-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #00e676;
  color: #000;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  z-index: 10002;
  opacity: 0;
  transition: all 0.3s;
  pointer-events: none;
}
.slip-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* --- Add to Slip Button on Cards --- */
.add-slip-btn {
  padding: 4px 10px;
  border-radius: 16px;
  background: rgba(0,230,118,0.08);
  border: 1px solid rgba(0,230,118,0.25);
  color: #00e676;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 28px;
  transition: all 0.2s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.add-slip-btn:hover {
  background: rgba(0,230,118,0.15);
  border-color: rgba(0,230,118,0.4);
}
.add-slip-btn.in-slip {
  background: rgba(0,230,118,0.18);
  border-color: rgba(0,230,118,0.4);
  color: #fff;
}
.add-slip-btn.in-slip:hover {
  background: rgba(255,68,68,0.15);
  border-color: rgba(255,68,68,0.3);
  color: #ff6b6b;
}

/* --- Desktop Side Panel --- */
@media (min-width: 769px) {
  .slip-bar {
    display: none !important;
  }
  .slip-overlay {
    display: none !important;
  }
  .slip-sheet {
    position: fixed;
    right: -340px;
    top: 80px;
    width: 320px;
    max-height: calc(100vh - 100px);
    bottom: auto;
    left: auto;
    border-radius: 12px 0 0 12px;
    border-top: none;
    border-left: 2px solid #00e676;
    transition: right 0.3s ease;
  }
  .slip-sheet.open {
    right: 0;
    bottom: auto;
  }
  .slip-desktop-toggle {
    position: fixed;
    right: 0;
    top: 80px;
    background: #00e676;
    color: #000;
    padding: 10px 8px;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    font-weight: 800;
    font-size: 0.75rem;
    z-index: 10000;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 0.05em;
    border: none;
    box-shadow: -2px 2px 10px rgba(0,0,0,0.3);
    transition: right 0.3s ease, background 0.15s;
    display: none;
  }
  .slip-desktop-toggle:hover {
    background: #33eb91;
  }
  .slip-desktop-toggle.has-picks {
    display: block;
  }
  .slip-desktop-toggle.panel-open {
    right: 320px;
  }
  .slip-toast {
    bottom: auto;
    top: 60px;
    right: 340px;
    left: auto;
    transform: translateY(-20px);
  }
  .slip-toast.show {
    transform: translateY(0);
  }
}

/* Ensure page content doesn't get hidden behind mobile bar */
@media (max-width: 768px) {
  body.has-slip-picks {
    padding-bottom: 56px;
  }
}
/* === VISUAL BOOST — Louder Betting Signals ===
   Pure CSS override. Loaded AFTER all other stylesheets.
   Created 2026-03-03
*/

/* ── Win % = HERO element in every card ── */
.pred-prob,
.prob-pct,
.prob-val,
.sb-pred strong,
.prob-labels .p1,
.prob-labels .p2,
.num.pred {
  font-size: 26px !important;
  font-weight: 900 !important;
  letter-spacing: -0.5px;
}

@media (max-width: 768px) {
  .pred-prob,
  .prob-pct,
  .prob-val,
  .sb-pred strong,
  .prob-labels .p1,
  .prob-labels .p2,
  .num.pred {
    font-size: 28px !important;
  }
}

/* ── Model Edge badge — neon emerald green ── */
.model-edge {
  background: rgba(0, 230, 118, 0.15) !important;
  border: 1px solid rgba(0, 230, 118, 0.4) !important;
}
.edge-value.edge-positive,
.edge-label {
  color: #00e676 !important;
  text-shadow: 0 0 8px rgba(0, 230, 118, 0.3);
}
.edge-badge {
  background: rgba(0, 230, 118, 0.15) !important;
  color: #00e676 !important;
  border: 1px solid rgba(0, 230, 118, 0.4) !important;
  text-shadow: 0 0 8px rgba(0, 230, 118, 0.3);
}
.edge-indicator {
  background: rgba(0, 230, 118, 0.15) !important;
  color: #00e676 !important;
  border: 1px solid rgba(0, 230, 118, 0.4) !important;
}

/* ── Upset Watch — red/amber ── */
.alert-upset {
  background: rgba(255, 82, 82, 0.15) !important;
  color: #ff5252 !important;
  border: 1px solid rgba(255, 82, 82, 0.4) !important;
  text-shadow: 0 0 8px rgba(255, 82, 82, 0.3);
  font-size: 0.85rem !important;
  padding: 5px 14px !important;
}

/* ── Brick Favorite — deep blue ── */
.alert-brick {
  background: rgba(33, 150, 243, 0.15) !important;
  color: #42a5f5 !important;
  border: 1px solid rgba(33, 150, 243, 0.4) !important;
  text-shadow: 0 0 6px rgba(33, 150, 243, 0.2);
  font-size: 0.85rem !important;
  padding: 5px 14px !important;
}

/* ── Toss-Up — amber/gold ── */
.alert-tossup {
  background: rgba(255, 193, 7, 0.15) !important;
  color: #ffc107 !important;
  border: 1px solid rgba(255, 193, 7, 0.4) !important;
  text-shadow: 0 0 6px rgba(255, 193, 7, 0.2);
  font-size: 0.85rem !important;
  padding: 5px 14px !important;
}

/* ── Value — purple ── */
.alert-value {
  background: rgba(156, 39, 176, 0.15) !important;
  color: #ce93d8 !important;
  border: 1px solid rgba(156, 39, 176, 0.4) !important;
  text-shadow: 0 0 6px rgba(156, 39, 176, 0.2);
  font-size: 0.85rem !important;
  padding: 5px 14px !important;
}

/* ── Lean — brighter green ── */
.alert-lean {
  background: rgba(76, 175, 80, 0.15) !important;
  color: #66bb6a !important;
  border: 1px solid rgba(76, 175, 80, 0.4) !important;
  text-shadow: 0 0 6px rgba(76, 175, 80, 0.2);
  font-size: 0.85rem !important;
  padding: 5px 14px !important;
}

/* ── All alert badges — bolder baseline ── */
.alert-badge {
  font-size: 0.85rem !important;
  font-weight: 900 !important;
  padding: 5px 14px !important;
  letter-spacing: 0.8px;
}

/* ── Volatility meter — full-width strip ── */
.vol-meter {
  width: 100% !important;
  padding: 6px 10px !important;
  border-radius: 0 !important;
  margin: 0 -12px !important;
  box-sizing: content-box;
  width: calc(100% + 24px) !important;
}
.vol-track {
  height: 8px !important;
  max-width: none !important;
}

/* ── Reduce body text for contrast ── */
.card p, .gs-item p, .pred-card p, .dp-card p,
.card-event, .card-round, .card-court, .card-time,
.match-info, .match-details,
.sb-round, .sb-court, .sb-status {
  font-size: 0.78rem !important;
  color: #777 !important;
}

/* ── Prob bar thicker ── */
.prob-bar {
  height: 10px !important;
}
.pred-prob-bar {
  height: 10px !important;
}
/* ═══════════════════════════════════════════════════════════
   MOBILE-CARDS.CSS — Mobile Card Redesign for The Dink Sheet
   Stacked vertical layout with large betting data
   MOBILE ONLY — Does NOT affect desktop
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ══════════════════════════════════════════════════════
     1. LIVE SCORES PAGE — Match Cards (.card)
     ══════════════════════════════════════════════════════ */

  /* Cards grid: single column, full width */
  .cards {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Each match card: vertical stack */
  .card {
    display: flex !important;
    flex-direction: column !important;
    padding: 14px !important;
    gap: 8px !important;
    border-radius: 12px !important;
  }

  /* Event/round info: small, muted, top of card */
  .card-event {
    font-size: 12px !important;
    color: #888 !important;
    order: -1 !important;
  }
  .card-round {
    font-size: 12px !important;
  }
  .etag {
    font-size: 11px !important;
    padding: 2px 6px !important;
  }

  /* Team rows: full width, stacked */
  .trow {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    width: 100% !important;
  }

  /* Team names: 16px */
  .tname {
    font-size: 16px !important;
    font-weight: 600 !important;
  }

  /* Team ELO inline */
  .telo {
    font-size: 12px !important;
    color: #666 !important;
  }

  /* Game scores: bigger */
  .gscore {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    min-width: 2rem !important;
  }

  /* Betting line: make it POP */
  .card-bl {
    font-size: 14px !important;
    padding: 10px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    line-height: 1.6 !important;
  }
  .card-bl .bf {
    font-size: 16px !important;
    font-weight: 800 !important;
  }
  .card-bl .bu {
    font-size: 16px !important;
    font-weight: 700 !important;
  }
  .card-bl .bs {
    font-size: 14px !important;
  }

  /* ELO diff line */
  .card-elo-diff {
    font-size: 13px !important;
    padding: 4px 0 !important;
  }

  /* Card badges */
  .card-badge {
    font-size: 11px !important;
    padding: 4px 8px !important;
    top: 10px !important;
    right: 10px !important;
  }

  /* ══════════════════════════════════════════════════════
     2. LIVE SCOREBOARDS (.sb — On Court Now)
     ══════════════════════════════════════════════════════ */

  .sb-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .sb {
    border-radius: 12px !important;
  }

  .sb-name {
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  .sb-elo {
    font-size: 12px !important;
  }

  .sb-g {
    width: 32px !important;
    height: 32px !important;
    font-size: 1.1rem !important;
    border-radius: 6px !important;
  }

  .sb-row {
    padding: 8px 10px !important;
    border-radius: 8px !important;
  }

  .sb-pred {
    font-size: 12px !important;
  }

  .sb-foot {
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-start !important;
    padding: 8px 12px 10px !important;
  }

  /* ══════════════════════════════════════════════════════
     3. PREDICTIONS / TODAY — Prediction Cards (.pred-card)
     ══════════════════════════════════════════════════════ */

  .pred-card {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .pred-card-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* Prediction sides: stack vertically instead of side-by-side */
  .pred-matchup {
    flex-direction: column !important;
  }

  .pred-side {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
  }

  .pred-side.right {
    border-left: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  }

  /* Player names: 16px */
  .pred-player-name {
    font-size: 16px !important;
    font-weight: 600 !important;
  }

  /* Win probability: HUGE and centered */
  .pred-prob {
    font-size: 24px !important;
    font-weight: 800 !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    padding: 6px 0 !important;
  }

  /* Probability bar: full width */
  .pred-prob-bar {
    width: 100% !important;
    height: 10px !important;
    border-radius: 5px !important;
    margin: 6px 0 !important;
  }

  /* ELO values */
  .pred-elo-val {
    font-size: 14px !important;
  }

  .pred-elo-gap {
    font-size: 13px !important;
    text-align: center !important;
    padding: 6px !important;
  }

  /* Odds: make moneylines big */
  .pred-odds {
    font-size: 18px !important;
    font-weight: 800 !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    padding: 6px !important;
  }

  /* Seed labels */
  .pred-seed {
    font-size: 11px !important;
  }

  /* VS separator: compact */
  .pred-vs, .pred-separator {
    padding: 4px 0 !important;
    font-size: 12px !important;
  }

  /* Confidence badges: full width */
  .pred-conf-badge {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 8px !important;
    margin: 4px 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
  }

  /* Stats row */
  .pred-stats {
    flex-direction: column !important;
  }

  .pred-stat-side {
    width: 100% !important;
  }

  .pred-meta-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
    font-size: 12px !important;
  }

  /* ══════════════════════════════════════════════════════
     4. BETTING BOARD (.bb-card, .bb-table)
     ══════════════════════════════════════════════════════ */

  .bb-cards {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .bb-card {
    display: flex !important;
    flex-direction: column !important;
    padding: 14px !important;
    gap: 8px !important;
    border-radius: 12px !important;
  }

  .bb-card > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  .bb-card-matchup {
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: center !important;
  }

  .bb-matchup {
    font-size: 15px !important;
    font-weight: 600 !important;
  }

  /* Moneylines: big and bold */
  .bb-ml-fav, .bb-ml-und {
    font-size: 20px !important;
    font-weight: 800 !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    padding: 6px 0 !important;
  }

  /* Spread */
  .bb-spread {
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    padding: 4px 0 !important;
  }

  /* Edge indicator */
  .bb-edge {
    font-size: 14px !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    padding: 6px 0 !important;
  }

  .bb-fav, .bb-und {
    font-size: 14px !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 4px 0 !important;
  }

  .bb-card-row {
    flex-direction: column !important;
    gap: 4px !important;
  }

  .bb-pill {
    font-size: 12px !important;
    padding: 4px 10px !important;
  }

  /* BB table: make it scrollable or stackable */
  .bb-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .bb-table {
    font-size: 13px !important;
  }

  /* ══════════════════════════════════════════════════════
     5. DAILY PICKS PAGE (.dp-container, .bettable-card)
     ══════════════════════════════════════════════════════ */

  .dp-event-section {
    padding: 0 !important;
    margin: 0 0 16px !important;
  }

  .dp-event-title {
    font-size: 16px !important;
    padding: 10px 0 !important;
  }

  .bettable-card {
    display: flex !important;
    flex-direction: column !important;
    padding: 14px !important;
    gap: 8px !important;
    border-radius: 12px !important;
  }

  .bettable-card > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  .bettable-matchup {
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: center !important;
  }

  .bettable-line-row {
    flex-direction: column !important;
    gap: 6px !important;
    text-align: center !important;
  }

  .bettable-rank {
    font-size: 20px !important;
    font-weight: 800 !important;
    text-align: center !important;
  }

  .bettable-why {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* ══════════════════════════════════════════════════════
     6. BADGES — All alert/edge/volatility/chemistry badges
     ══════════════════════════════════════════════════════ */

  .alert-badge,
  .edge-badge,
  .model-edge-badge,
  .vol-meter,
  .chemistry-score,
  .override-badge,
  .risk-badge,
  .cb {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 8px !important;
    margin: 4px 0 !important;
    font-size: 0.85rem !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  /* Alert badge subtypes */
  .alert-badge.alert-upset,
  .alert-badge.alert-value,
  .alert-badge.alert-brick,
  .alert-badge.alert-lean,
  .alert-badge.alert-tossup {
    padding: 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  /* Confidence badges */
  .cb {
    font-size: 13px !important;
    padding: 6px 10px !important;
  }

  /* ══════════════════════════════════════════════════════
     7. PICKS GRID
     ══════════════════════════════════════════════════════ */

  .picks-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .pick {
    padding: 14px !important;
    border-radius: 12px !important;
  }

  .pick-name {
    font-size: 18px !important;
    font-weight: 700 !important;
  }

  .pick-reason {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .pick-label {
    font-size: 11px !important;
  }

  /* ══════════════════════════════════════════════════════
     8. PREDICTION PAGE — Bold Takes & Futures
     ══════════════════════════════════════════════════════ */

  .bold-takes {
    grid-template-columns: 1fr !important;
  }

  .bold-take {
    padding: 14px !important;
  }

  .prediction-card {
    padding: 14px !important;
    border-radius: 12px !important;
  }

  .prediction-headline {
    font-size: 18px !important;
    font-weight: 700 !important;
  }

  .futures-panel {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .futures-row {
    font-size: 14px !important;
    padding: 10px 12px !important;
  }

  .futures-name {
    font-size: 14px !important;
  }

  .futures-odds {
    font-size: 16px !important;
    font-weight: 700 !important;
  }

  .futures-extras-grid {
    grid-template-columns: 1fr !important;
  }

  /* ══════════════════════════════════════════════════════
     9. UPCOMING TABLE (next matches)
     ══════════════════════════════════════════════════════ */

  .next-tbl {
    font-size: 12px !important;
  }

  .next-tbl th,
  .next-tbl td {
    padding: 6px 4px !important;
    white-space: normal !important;
  }

  /* Hide less important columns on mobile */
  .next-tbl .trend,
  .next-tbl th:nth-child(3),
  .next-tbl td:nth-child(3),
  .next-tbl th:nth-child(9),
  .next-tbl td:nth-child(9) {
    display: none !important;
  }

  /* ══════════════════════════════════════════════════════
     10. TAP TARGETS — Minimum 44px for all interactive
     ══════════════════════════════════════════════════════ */

  button,
  .pick-btn,
  .vote-btn,
  .pp-btn,
  [onclick],
  .tab,
  .pill,
  .ef-btn,
  .subnav-pill,
  .quick-nav a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ══════════════════════════════════════════════════════
     11. PANELS (Upsets & Closest Battles sidebars)
     ══════════════════════════════════════════════════════ */

  .panels {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .panel {
    border-radius: 12px !important;
    padding: 14px !important;
  }

  .panel-item {
    font-size: 14px !important;
    padding: 8px 0 !important;
  }

  .panel-item .teams {
    font-size: 14px !important;
    display: block !important;
  }

  .panel-item .score {
    font-size: 13px !important;
    display: block !important;
    margin-top: 2px !important;
  }

  /* ══════════════════════════════════════════════════════
     12. STATS BAR & QUICK NAV
     ══════════════════════════════════════════════════════ */

  .stats-bar {
    padding: 12px 8px !important;
    gap: 8px !important;
    border-radius: 12px !important;
  }

  .stat-num {
    font-size: 1.4rem !important;
  }

  .stat-label {
    font-size: 10px !important;
  }

  /* Quick nav scrollable */
  .quick-nav {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
  }

  .quick-nav a {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Event filters scrollable */
  .event-filters {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    justify-content: flex-start !important;
    padding-bottom: 4px !important;
  }

  .ef-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* ══════════════════════════════════════════════════════
     13. INSIGHTS TABLE (fallback when no live data)
     ══════════════════════════════════════════════════════ */

  .ins-tbl {
    font-size: 12px !important;
  }

  .ins-tbl th,
  .ins-tbl td {
    padding: 6px 4px !important;
    white-space: normal !important;
  }

  /* Hide H2H column on mobile */
  .ins-tbl th:last-child,
  .ins-tbl td:last-child {
    display: none !important;
  }

  .ins-cards {
    grid-template-columns: 1fr !important;
  }

  /* ══════════════════════════════════════════════════════
     14. TOAST NOTIFICATIONS — mobile friendly
     ══════════════════════════════════════════════════════ */

  #toast-container {
    bottom: 70px !important;
    right: 8px !important;
    left: 8px !important;
    max-width: none !important;
  }

  .toast {
    border-radius: 10px !important;
  }

  /* ══════════════════════════════════════════════════════
     15. PUBLIC PICKS
     ══════════════════════════════════════════════════════ */

  .public-picks {
    padding: 10px !important;
  }

}
/* ============================================
   MOBILE ABOVE-THE-FOLD OPTIMIZATION
   Only affects screens <= 768px
   Desktop layout is completely untouched
   ============================================ */

@media (max-width: 768px) {

  /* === PREDICTIONS PAGE === */

  /* Hide narrative intro text on mobile */
  .prediction-intro {
    display: none !important;
  }

  /* Hide Bold Takes section on mobile */
  .bold-takes-card {
    display: none !important;
  }

  /* Compact tournament hero */
  .tournament-hero {
    padding: 10px 0 8px !important;
  }
  .tournament-hero .container {
    padding: 0 12px !important;
  }
  .tournament-hero .tournament-title {
    font-size: 1.2rem !important;
    margin: 4px 0 !important;
  }
  .tournament-hero .tournament-meta {
    font-size: 0.75rem !important;
    margin: 2px 0 !important;
  }
  .tournament-hero .badge {
    font-size: 0.7rem !important;
    padding: 2px 8px !important;
    margin-bottom: 4px !important;
  }

  /* Compact live pulse bar */
  .live-pulse-bar {
    padding: 4px !important;
    font-size: 0.65rem !important;
  }

  /* Tighter betting board */
  .betting-board {
    padding: 0.8rem !important;
    margin-bottom: 1rem !important;
    border-radius: 10px !important;
  }
  .bb-header {
    margin-bottom: 0.6rem !important;
  }
  .bb-title {
    font-size: 1.1rem !important;
  }
  .bb-subtitle {
    font-size: 0.7rem !important;
  }
  .bb-card {
    padding: 0.6rem !important;
  }

  /* Compact quick picks bar */
  .qp-bar {
    padding: 0.6rem !important;
    margin: 0.6rem 0 !important;
    gap: 0.3rem !important;
  }
  .qp-item {
    padding: 0.3rem 0.2rem !important;
  }
  .qp-event {
    font-size: 0.5rem !important;
  }
  .qp-name {
    font-size: 0.8rem !important;
  }
  .qp-elo {
    font-size: 0.6rem !important;
  }

  /* Compact prediction cards */
  .prediction-card {
    margin: 12px 0 !important;
    padding: 10px 12px !important;
  }
  .prediction-event {
    font-size: 0.85rem !important;
  }
  .prediction-headline {
    font-size: 1rem !important;
    margin-bottom: 4px !important;
  }
  .prediction-note {
    font-size: 0.78rem !important;
    margin: 4px 0 !important;
  }
  .picks-grid {
    gap: 0.5rem !important;
  }
  .pick--gold {
    padding: 0.8rem 1rem !important;
  }
  .pick-name {
    font-size: 1rem !important;
  }

  /* === TODAY/DAILY PREDICTIONS PAGE === */

  /* Compact hero section */
  .dp-hero {
    padding: 12px 12px 8px !important;
  }
  .dp-hero h1 {
    font-size: 1.2rem !important;
    margin: 0 0 4px !important;
  }
  .dp-hero .subtitle {
    font-size: 0.75rem !important;
  }
  .dp-hero .date-badge {
    padding: 3px 10px !important;
    font-size: 0.75rem !important;
    margin: 6px 0 !important;
  }
  .dp-hero .match-count {
    font-size: 0.7rem !important;
    margin-top: 2px !important;
  }

  /* Tighter bettable section */
  .bettable-section {
    margin: 0 auto 12px !important;
    padding: 0 10px !important;
  }
  .bettable-card {
    padding: 12px !important;
    border-radius: 10px !important;
  }
  .bettable-header {
    margin-bottom: 10px !important;
  }
  .bettable-header h2 {
    font-size: 0.9rem !important;
  }
  .bettable-divider {
    margin-bottom: 10px !important;
  }
  .bettable-match {
    padding: 10px 12px !important;
    margin-bottom: 6px !important;
  }

  /* Hide 4th and 5th bettable matches on mobile (show top 3 only) */
  .bettable-match:nth-child(n+4) {
    display: none !important;
  }

  /* Tighter daily prediction cards */
  .dp-container {
    padding: 0 10px 20px !important;
  }
  .dp-card {
    padding: 8px 10px !important;
    margin: 5px 0 !important;
  }
  .dp-event-section {
    margin: 14px 0 !important;
  }
  .dp-event-title {
    font-size: 0.95rem !important;
    margin-bottom: 6px !important;
    padding-bottom: 4px !important;
  }

  /* Compact pred cards (shared between pages) */
  .pred-card {
    margin-bottom: 8px !important;
  }
  .pred-card-inner {
    padding: 8px !important;
  }
  .pred-matchup {
    gap: 4px !important;
  }
  .pred-player-name {
    font-size: 0.85rem !important;
  }
  .match-projections {
    margin-top: 4px !important;
  }
  .proj-grid {
    gap: 4px !important;
  }
  .bl-row {
    padding: 4px 8px !important;
    margin-top: 4px !important;
  }

  /* === GLOBAL MOBILE TIGHTENING === */

  /* Tighten all section headers */
  h1, h2, .section-title {
    margin-top: 8px !important;
    margin-bottom: 6px !important;
  }

  /* Prevent horizontal scroll */
  body, main, .container {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Keep betting board swipeable */
  .bb-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Public picks compact */
  .public-picks {
    margin-top: 4px !important;
  }
  .pp-buttons {
    gap: 4px !important;
  }
  .pp-btn {
    padding: 6px 8px !important;
    font-size: 0.75rem !important;
  }

  /* Footer disclaimer compact */
  .dp-footer {
    padding: 10px !important;
    margin-top: 10px !important;
    font-size: 0.7rem !important;
  }

  /* Prediction CTA compact */
  .prediction-cta {
    margin-top: 8px !important;
  }
  .prediction-cta p {
    font-size: 0.8rem !important;
  }
}
/* =========================================
   MOBILE DECLUTTER — The Dink Sheet
   Goal: ≤6 visual signals per card on mobile
   Priority: Win% > Badge > Moneyline > Spread > Model Reason > Slip Btn
   Desktop: UNTOUCHED — all features remain
   ========================================= */

@media (max-width: 768px) {

  /* ── 1. HIDE: Volatility meter (badge is enough) ── */
  .vol-meter,
  .vol-compact {
    display: none !important;
  }

  /* ── 2. HIDE: Score projections (too dense for mobile scanning) ── */
  .match-projections,
  .match-proj,
  .proj-grid {
    display: none !important;
  }

  /* ── 3. HIDE: Synergy breakdown (chemistry badge is enough) ── */
  .synergy-breakdown {
    display: none !important;
  }

  /* ── 4. HIDE: Line movement (nice-to-have, not scannable) ── */
  .line-move {
    display: none !important;
  }

  /* ── 5. LIMIT: Only show first badge per card ── */
  /* When an alert badge exists, hide any subsequent alert or edge badges */
  .pred-card .alert-badge ~ .alert-badge,
  .pred-card .alert-badge ~ .model-edge,
  .pred-card .model-edge ~ .alert-badge,
  .pred-card .model-edge ~ .model-edge,
  .dp-card .alert-badge ~ .alert-badge,
  .dp-card .alert-badge ~ .model-edge,
  .dp-card .model-edge ~ .alert-badge,
  .dp-card .model-edge ~ .model-edge,
  .bettable-match .alert-badge ~ .alert-badge,
  .bettable-match .alert-badge ~ .model-edge,
  .bettable-match .model-edge ~ .alert-badge {
    display: none !important;
  }

  /* ── 6. COMPACT: Model reason — tighter on mobile ── */
  .model-reason {
    font-size: 0.7rem !important;
    padding: 4px 8px !important;
    margin: 4px 0 !important;
    line-height: 1.3 !important;
  }

  /* ── 7. COMPACT: Chemistry score — keep the badge, shrink it ── */
  .chem-container {
    font-size: 0.7rem !important;
    padding: 4px 8px !important;
    margin: 4px 0 !important;
  }
  .chem-header {
    font-size: 0.7rem !important;
  }
  .chem-badges {
    display: none !important;
  }

  /* ── 8. COMPACT: Bet lines row — tighter ── */
  .bl-row {
    font-size: 0.68rem !important;
    padding: 4px 8px !important;
    margin-top: 4px !important;
  }

  /* ── 9. COMPACT: Confidence badge — smaller ── */
  .cb {
    font-size: 0.62rem !important;
    padding: 1px 6px !important;
  }

  /* ── 10. COMPACT: Model edge — tighter ── */
  .model-edge {
    font-size: 0.68rem !important;
    padding: 4px 8px !important;
    margin: 4px 0 !important;
  }
  .edge-note {
    display: none !important;
  }

  /* ── 11. COMPACT: Public picks — slimmer buttons ── */
  .public-picks {
    margin: 4px 0 !important;
  }
  .pp-btn {
    font-size: 0.7rem !important;
    padding: 4px 8px !important;
  }

  /* ── 12. COMPACT: Pred card overall — reduce internal spacing ── */
  .pred-card {
    padding: 8px 10px !important;
    margin: 6px 0 !important;
  }
  .pred-card-inner {
    gap: 4px !important;
  }

  /* ── 13. Remove duplicate "WIN PROB" labels on tiny screens ── */
  .pred-separator {
    font-size: 0.55rem !important;
    line-height: 1.1 !important;
  }

  /* ── 14. HIDE: Override badge in chemistry (redundant) ── */
  .override-badge {
    display: none !important;
  }

  /* ── 15. Tighten the overall card spacing ── */
  .dp-card {
    padding: 8px 10px !important;
    margin: 6px 0 !important;
  }

  }

  /* ── 17. Bettable section cards — tighter ── */
  .bettable-match {
    padding: 10px 12px !important;
  }
}

/* Extra small phones */
@media (max-width: 380px) {
  .pred-matchup {
    font-size: 0.8rem !important;
  }
  .pred-player-name {
    font-size: 0.78rem !important;
  }
  .pred-elo-val {
    font-size: 0.6rem !important;
  }
  .model-reason {
    font-size: 0.65rem !important;
  }
  .pred-h2h-note {
    display: none !important;
  }
}

/* --- QUICK FIX: Tighten betting board to 5 rows on mobile --- */
@media (max-width: 768px) {
  /* removed - JS handles top5 toggle */
  
  /* { */
    display: none !important;
  }
  
  /* Kill narrative text between board and cards */
  .prediction-intro, .bold-takes-card,
  .intro-text, .hub-hero-text, .article-lead,
  .predictions-container > p,
  .pred-intro, .pred-description {
    display: none !important;
  }
  
  /* Tighter betting board header */
  .bb-header, [class*='betting-board'] h2,
  [class*='betting-board'] h3 {
    font-size: 1rem !important;
    margin: 4px 0 !important;
    padding: 4px 0 !important;
  }
}

/* --- BB Top 5 mobile tweaks --- */
@media (max-width: 429px) {
  /* Slightly taller rows for scanning */
  .bb-card, #bbTableBody tr {
    min-height: 52px !important;
    padding: 8px 10px !important;
  }
  /* Strip secondary label text */
  .bb-card .bb-sub, .bb-card .bb-secondary,
  .bb-card .bb-court, .bb-card .bb-time,
  #bbTableBody .bb-sub, #bbTableBody .bb-secondary {
    display: none !important;
  }
}

/* --- Storylines Accordion (mobile only) --- */
.storylines-accordion .storylines-body { display: block; }
.storylines-accordion .storylines-toggle { display: none; }
.storylines-arrow { display: none; }

@media (max-width: 768px) {
  .storylines-accordion .storylines-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: #888;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 10px 14px;
    cursor: pointer;
    min-height: 44px;
    margin-bottom: 8px;
  }
  .storylines-arrow { display: inline; transition: transform 0.2s; }
  .storylines-accordion.open .storylines-arrow { transform: rotate(90deg); }
  .storylines-accordion .storylines-body { display: none !important; }
  .storylines-accordion.open .storylines-body { display: block !important; }
}

/* --- Badge Layout: flex-wrap, gap, stacking --- */
.badge-row, .pred-card, .dp-card, .gs-item, .bb-card, .card {
  position: relative;
}

/* Force badges into flex-wrap container behavior */
.alert-badge, .model-edge, .edge-badge, .edge-indicator,
.model-edge-badge, .override-badge, .risk-badge,
.alert-upset, .alert-tossup, .alert-value, .alert-lean, .alert-brick {
  display: inline-flex !important;
  margin: 3px 4px 3px 0 !important;
  position: static !important;
  float: none !important;
}

@media (max-width: 768px) {
  /* Stack badges 1 per line on narrow screens */
  .alert-badge, .model-edge, .edge-badge, .edge-indicator,
  .model-edge-badge, .override-badge, .risk-badge {
    display: flex !important;
    width: 100% !important;
    margin: 3px 0 !important;
    justify-content: center !important;
  }
}

/* --- SPACING PASS: Calmer mobile layout --- */
@media (max-width: 768px) {
  /* Reduce vertical padding between sections ~12% */
  section, .content-section, .predictions-container,
  .picks-container, .dp-container, .pred-section {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }
  
  h2, h3, .section-title {
    margin-top: 10px !important;
    margin-bottom: 6px !important;
  }
  
  /* Subtle dividers between match cards */
  .pred-card + .pred-card,
  .dp-card + .dp-card,
  .gs-item + .gs-item,
  .card + .card,
  .bettable-match + .bettable-match {
    border-top: 1px solid rgba(255,255,255,0.04) !important;
    padding-top: 12px !important;
    margin-top: 8px !important;
  }
  
  /* More breathing room INSIDE cards */
  .pred-card, .dp-card, .gs-item, .bb-card, .card, .bettable-match {
    padding: 14px 12px !important;
    line-height: 1.5 !important;
  }
  
  /* Slightly more gap between card elements */
  .pred-card > *, .dp-card > *, .gs-item > * {
    margin-bottom: 5px !important;
  }
  
  /* Badges: a touch more air */
  .alert-badge, .model-edge, .edge-badge {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }
}
/* ═══════════════════════════════════════════════════════════
   TAP TARGETS — Comprehensive 44px minimum for mobile
   Ensures all interactive elements are thumb-friendly
   and spaced to prevent accidental taps.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* === ELEMENTS MISSING FROM EXISTING RULES === */
  /* mobile.css & features-bundle already cover: button, a, .pick-btn,
     .vote-btn, .pp-btn, [onclick], .tab, .pill, .ef-btn, .subnav-pill,
     .quick-nav a, .filter-pill, .fpill, .tab-pill, .sort-btn, .draft-filter,
     .sort-pill — but they miss min-width and several element types */

  /* Fill gaps: elements not covered elsewhere */
  .bb-pill,
  .fn-btn,
  .btn-outline,
  .ticker-dismiss,
  .menu-toggle,
  .mobile-nav-close,
  .mobile-nav-link,
  .mobile-nav-search-btn,
  .nav-search-btn,
  .dropdown-toggle,
  .prediction-cta a,
  .prediction-cta button,
  select,
  input[type="submit"],
  input[type="button"],
  .gs-item,
  .slip-sheet-close {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Fix undersized elements from other CSS files */
  .pd-pagination button {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .pd-pill {
    min-height: 44px !important;
  }

  /* === MIN-WIDTH for small targets (dots, close buttons, icons) === */
  .menu-toggle,
  .mobile-nav-close,
  .ticker-dismiss,
  .nav-search-btn,
  .mobile-nav-search-btn,
  .slip-sheet-close {
    min-width: 44px !important;
  }

  /* === ADD TO SLIP — enlarged for thumb zone === */
  .add-slip-btn {
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 0.8rem !important;
  }

  /* === BB PILLS — larger tap area === */
  .bb-pill {
    padding: 8px 14px !important;
    min-height: 44px !important;
  }

  /* === SPACING BETWEEN ADJACENT TAP TARGETS === */
  /* Prevent accidental taps on neighboring elements */
  .subnav-scroll {
    gap: 8px !important;
  }

  .picks-grid .pick {
    margin-bottom: 8px !important;
  }

  /* Pill rows: ensure gap between items */
  .subnav-scroll,
  .pd-filters {
    gap: 8px !important;
  }

  /* === MOBILE NAV — full touch-friendly sizing === */
  .mobile-nav-link {
    min-height: 48px !important;
    padding: 12px 16px !important;
  }

  .mobile-nav-section-header {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* === SLIP BAR — already 56px, ensure it stays === */
  .slip-bar {
    min-height: 56px !important;
  }

  /* === GS SEARCH RESULTS — tappable items === */
  .gs-item {
    min-height: 48px !important;
    padding: 8px 12px !important;
  }

  /* === CARD SPACING — prevent overlap between cards === */
  .prediction-card,
  .bb-card,
  .pick {
    margin-bottom: 12px !important;
  }

  /* === FN (NEWSLETTER) BUTTON === */
  .fn-btn {
    min-height: 48px !important;
    padding: 10px 20px !important;
  }

}
/* === CONTRAST FIX — Sunlight & Arm's Length Readability ===
   Loaded LAST. Overrides everything.
   Created 2026-03-03 — all colors WCAG AA on dark backgrounds.
*/

/* ── Win % — THE hero number, must pop ── */
.pred-prob, .prob-pct, .prob-val, .win-prob,
.sb-pred strong, .num.pred,
.prob-labels .p1, .prob-labels .p2 {
  color: #ffffff !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* ── Badge colors — BRIGHT for sunlight ── */

/* Upset Watch: bright coral-red */
.alert-upset {
  color: #ff6b6b !important;
  background: rgba(255,107,107,0.2) !important;
  border: 1px solid rgba(255,107,107,0.5) !important;
  font-weight: 800 !important;
  text-shadow: 0 0 8px rgba(255,107,107,0.4);
}

/* Toss-Up: bright amber */
.alert-tossup {
  color: #ffd54f !important;
  background: rgba(255,213,79,0.2) !important;
  border: 1px solid rgba(255,213,79,0.5) !important;
  font-weight: 800 !important;
  text-shadow: 0 0 6px rgba(255,213,79,0.3);
}

/* Value: bright pink */
.alert-value {
  color: #f48fb1 !important;
  background: rgba(244,143,177,0.2) !important;
  border: 1px solid rgba(244,143,177,0.5) !important;
  font-weight: 800 !important;
  text-shadow: 0 0 6px rgba(244,143,177,0.3);
}

/* Brick Favorite: bright sky blue (was grey #9e9e9e!) */
.alert-brick {
  color: #64b5f6 !important;
  background: rgba(100,181,246,0.2) !important;
  border: 1px solid rgba(100,181,246,0.5) !important;
  font-weight: 800 !important;
  text-shadow: 0 0 6px rgba(100,181,246,0.3);
}

/* Lean: bright mint green */
.alert-lean {
  color: #69f0ae !important;
  background: rgba(105,240,174,0.2) !important;
  border: 1px solid rgba(105,240,174,0.5) !important;
  font-weight: 800 !important;
  text-shadow: 0 0 6px rgba(105,240,174,0.3);
}

/* Model Edge: neon green with glow */
.model-edge-badge, .edge-badge, .edge-indicator,
.edge-value.edge-positive, .edge-label {
  color: #69f0ae !important;
  text-shadow: 0 0 8px rgba(105,240,174,0.4);
  font-weight: 800 !important;
}

/* Override badge: bright purple */
.override-badge {
  color: #ea80fc !important;
  font-weight: 800 !important;
}

/* Risk badge: bright orange */
.risk-badge {
  color: #ffab40 !important;
  font-weight: 800 !important;
}

/* ── Kill all grey-on-grey text ── */

/* Body/meta text: from #666/#777 → #9e9e9e minimum */
.card p, .gs-item p, .pred-card p, .dp-card p,
.card-event, .card-round, .card-court, .card-time,
.match-info, .match-details, .meta-text,
.sb-round, .sb-court, .sb-status {
  color: #9e9e9e !important;
}

/* Labels and secondary text: from #555/#666 → #b0b0b0 */
.chem-label, .vol-label, .pj-label, .proj-label,
.reason-text, .line-move-detail, .futures-sub,
.mp-accuracy-detail, .mp-stat-label, .mp-match-gap, .mp-nodata {
  color: #b0b0b0 !important;
}

/* Team/player names: must be near-white */
.tname, .team-name, .pred-name, .dp-name, .bb-name,
.gs-item-name, .futures-name {
  color: #f5f5f5 !important;
}

/* Moneylines: brighter + bolder */
.pred-odds, .bb-ml-fav, .bb-ml-und, .moneyline {
  color: #e0e0e0 !important;
  font-weight: 700 !important;
}

/* Bet slip text — from rgba 0.25-0.35 to readable */
.bs-empty-text, .bs-disclaimer {
  color: rgba(255,255,255,0.55) !important;
}
.bs-match-event {
  color: rgba(255,255,255,0.5) !important;
}
.bs-section-label {
  color: rgba(255,255,255,0.6) !important;
}

/* Public picks tabs */
.pp-btn {
  color: #bbb !important;
}
.pp-btn.active, .pp-btn:hover {
  color: #fff !important;
}

/* ── Card backgrounds — bump for definition ── */
.pred-card, .dp-card, .gs-item, .bb-card, .card,
.bettable-match, .futures-division {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* Score projections bg bump */
.match-proj {
  background: rgba(255,255,255,0.05) !important;
}
.live-state-bar {
  position: sticky;
  top: 0;
  z-index: 9998;
  background: linear-gradient(180deg, #0a0a0f 0%, rgba(10,10,15,0.95) 100%);
  border-bottom: 1px solid rgba(0,230,118,0.15);
  backdrop-filter: blur(8px);
  padding: 6px 16px;
  font-size: 0.75rem;
}

.ls-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.ls-left { display: flex; align-items: center; gap: 8px; }
.ls-right { color: #888; font-size: 0.7rem; }

.ls-status { color: #e0e0e0; font-weight: 700; letter-spacing: 0.02em; }
.ls-recal { font-family: 'SF Mono', Monaco, Consolas, monospace; }

/* Dot states */
.ls-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
  transition: all 0.3s;
}
.ls-dot.ls-live {
  background: #ff5252;
  box-shadow: 0 0 8px rgba(255,82,82,0.6);
  animation: ls-pulse 1.5s infinite;
}
.ls-dot.ls-idle {
  background: #ffc107;
  box-shadow: 0 0 4px rgba(255,193,7,0.3);
}
.ls-dot.ls-done {
  background: #00e676;
  box-shadow: 0 0 4px rgba(0,230,118,0.3);
}
.ls-dot.ls-recalibrating {
  background: #42a5f5 !important;
  box-shadow: 0 0 12px rgba(66,165,245,0.6) !important;
  animation: ls-recal-pulse 0.5s infinite;
}

@keyframes ls-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.3); }
}
@keyframes ls-recal-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .live-state-bar { padding: 4px 12px; }
  .ls-inner { flex-direction: column; gap: 2px; }
  .ls-status { font-size: 0.72rem; }
  .ls-right { font-size: 0.65rem; }
}
.talk-toggle {
  background: none; border: 1px solid rgba(255,255,255,0.1);
  color: #888; padding: 6px 12px; border-radius: 16px;
  font-size: 0.75rem; cursor: pointer; transition: all 0.2s;
  margin-top: 6px; display: inline-flex; align-items: center; gap: 4px;
}
.talk-toggle:hover, .talk-toggle.active {
  color: #42a5f5; border-color: rgba(66,165,245,0.3);
}
.talk-toggle .talk-count { font-weight: 700; }
.talk-thread {
  display: none; padding: 12px; margin-top: 8px;
  background: rgba(0,0,0,0.3); border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.05);
}
.talk-thread.open { display: block; }
.talk-input-row { display: flex; gap: 8px; margin-bottom: 8px; }
.talk-input {
  flex: 1; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #e0e0e0; padding: 8px 12px; border-radius: 8px;
  font-size: 0.82rem; font-family: inherit;
  box-sizing: border-box;
}
.talk-input:focus { border-color: rgba(66,165,245,0.4); outline: none; }
.talk-input::placeholder { color: #555; }
.talk-nick-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.talk-nick-input {
  width: 140px; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: #aaa; padding: 6px 10px; border-radius: 8px;
  font-size: 0.72rem; font-family: inherit;
  box-sizing: border-box;
}
.talk-nick-input:focus { border-color: rgba(66,165,245,0.3); outline: none; color: #e0e0e0; }
.talk-nick-input::placeholder { color: #444; }
.talk-char-count { font-size: 0.65rem; color: #555; margin-left: auto; }
.talk-char-count.warn { color: #ff9800; }
.talk-char-count.over { color: #ff5252; }
.talk-submit {
  background: #42a5f5; color: #fff; border: none;
  padding: 8px 16px; border-radius: 6px; font-size: 0.8rem;
  cursor: pointer; font-weight: 700; white-space: nowrap;
  transition: background 0.2s;
}
.talk-submit:hover { background: #1e88e5; }
.talk-submit:disabled { opacity: 0.4; cursor: not-allowed; }
.talk-comments-list { margin-top: 4px; }
.talk-comment {
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.talk-comment:last-child { border-bottom: none; }
.talk-header { display: flex; align-items: center; flex-wrap: wrap; }
.talk-nick { color: #42a5f5; font-weight: 700; font-size: 0.75rem; }
.talk-time { color: #555; font-size: 0.68rem; margin-left: 8px; }
.talk-msg { color: #ccc; font-size: 0.82rem; margin: 4px 0; line-height: 1.3; word-break: break-word; }
.talk-actions { display: flex; gap: 10px; align-items: center; }
.talk-vote {
  background: none; border: none; color: #666; font-size: 0.72rem;
  cursor: pointer; padding: 2px 6px; transition: color 0.15s;
  font-family: inherit;
}
.talk-vote:hover { color: #e0e0e0; }
.talk-up.voted { color: #00e676; }
.talk-down.voted { color: #ff5252; }
.talk-react-btn {
  background: none; border: none; font-size: 0.8rem;
  cursor: pointer; padding: 2px 4px; opacity: 0.5;
  transition: opacity 0.15s;
}
.talk-react-btn:hover { opacity: 1; }
.talk-react-btn.reacted { opacity: 1; }
.talk-emoji-display { font-size: 0.75rem; margin-left: 2px; }
.talk-load-more {
  background: none; border: 1px solid rgba(255,255,255,0.08);
  color: #888; padding: 6px 12px; border-radius: 6px;
  font-size: 0.72rem; cursor: pointer; margin-top: 8px;
  width: 100%; transition: all 0.2s;
}
.talk-load-more:hover { color: #42a5f5; border-color: rgba(66,165,245,0.3); }
.talk-empty { color: #555; font-size: 0.78rem; text-align: center; padding: 12px 0; }
.talk-error { color: #ff5252; font-size: 0.72rem; margin-top: 4px; }
.talk-posting { opacity: 0.6; pointer-events: none; }
/* Emoji picker */
.talk-emoji-picker {
  display: none; position: absolute; background: rgba(20,20,30,0.95);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
  padding: 6px; z-index: 100; gap: 2px; flex-wrap: wrap; width: 180px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.talk-emoji-picker.open { display: flex; }
.talk-emoji-opt {
  background: none; border: none; font-size: 1.1rem;
  cursor: pointer; padding: 4px; border-radius: 4px;
  transition: background 0.15s;
}
.talk-emoji-opt:hover { background: rgba(255,255,255,0.1); }
/* Mobile */
@media(max-width:768px) {
  .talk-thread { padding: 8px; }
  .talk-input-row { flex-direction: column; }
  .talk-submit { width: 100%; }
  .talk-nick-row { flex-wrap: wrap; }
  .talk-nick-input { width: 100%; }
}
