/* mobile.css — phone-friendly overrides for Thereabouts v3.
   Loaded LAST in index.html so it wins the cascade. The desktop CSS only
   reflows at ≤1100px (tablet); phones (≤640px) need the rails to stack,
   the card-picker fan to become a stack, and nothing wider than the viewport. */

@media (max-width: 640px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  .shell { padding-left: 10px !important; padding-right: 10px !important; }

  /* Top bar: desktop 3-column rails (≈220px + 280px) overflow a phone → stack */
  .topbar {
    grid-template-columns: 1fr !important;
    justify-items: center;
    gap: 8px !important;
    row-gap: 6px !important;
  }
  .topbar > * { min-width: 0; max-width: 100%; }
  .brand { justify-content: center; }
  .brand img, .brand svg { height: 28px !important; width: auto !important; }

  /* Roster of players: wrap + center instead of nowrap overflow */
  .roster { flex-wrap: wrap !important; justify-content: center; gap: 6px !important; }

  /* Board is single-column at ≤1100px already; just tighten the map height */
  .board { gap: 12px !important; }
  .board > .card-map, .card-map { min-height: 300px !important; }

  /* Card-picker overlay is position:fixed + centered with NO overflow — once the
     cards stack taller than the screen the ends get clipped and can't scroll.
     Top-align it and make it scroll vertically. */
  .picker {
    justify-content: flex-start !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding: 16px 12px 40px !important;
  }

  /* Card-picker fan → vertical stack that fits the screen (kill the fan transforms) */
  .picker__deck {
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    transform: none !important;
    flex: 0 0 auto;
  }
  .picker-card { flex: 0 0 auto !important; }
  .picker-card,
  .picker-card:nth-child(1),
  .picker-card:nth-child(2),
  .picker-card:nth-child(3),
  .picker-card:nth-child(4) {
    width: min(86vw, 320px) !important;
    transform: none !important;
    rotate: 0deg !important;
    margin: 0 !important;
  }
  .picker__title { font-size: 22px !important; }

  /* Fluid cards + images — never wider than the screen */
  .card, .art-card, .reveal-card, .setup, .screen, .stage, .frame, .main {
    max-width: 100% !important;
  }
  .art-card__art img, .picker-card__art img, img { max-width: 100%; height: auto; }

  /* Big display type down a notch for narrow screens */
  .topic-title { font-size: 28px !important; }
  .transition__title { font-size: 40px !important; }
  .picker__deck, .board, .reveal { width: 100% !important; }

  /* Popovers / overlays fit the viewport */
  .bug-popover { width: min(92vw, 320px) !important; left: 0 !important; }

  /* THE BIG ONE: the scale tracks have flex-shrink:0 and render at ~1354px
     (desktop width), so on a phone they overflow and clip to a thin sliver —
     this is the "scales not visible / answers too small" bug. Force every
     board card AND scale element to fit the viewport width. The scale internals
     position by percentage, so they reflow correctly once the track is 100%. */
  .board, .board > *,
  .card, .card-cnt, .card-year, .card-shape, .card-map {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .scale-track-wrap, .scale-rail-wrap, .scale-bands, .scale-rail,
  .scale-axis, .scale-bracket, .scale-readout {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }
  /* Make the (currently thin/faint) scale tall enough to read & touch on phone */
  .scale-track-wrap { min-height: 96px !important; }
  .scale-rail-wrap  { min-height: 52px !important; }
  .scale-bands      { min-height: 30px !important; }
  .scale-readout    { font-size: 15px !important; }
  .scale-tick-label { font-size: 10px !important; }
  /* Card padding/heads readable, not cramped */
  .card { padding: 12px !important; }
  .q-head, .card__head { font-size: 15px !important; }
}