/* =========================================
   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;
  }
}