/* ═══════ RESPONSIVE ═══════ */

/* Medium screens: 2-column layout for stats, tighter spacing */
@media (max-width: 1200px) {
  .stat-strip { flex-wrap: wrap; height: auto; }
  .stat-cell { min-width: calc(50% - 1px); flex: 1 1 auto; }
  .stat-cell.cell-war { min-width: 100%; }
  .yt-dashboard { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet / small desktop: stack columns */
@media (max-width: 900px) {
  :root {
    --nav-w: 0px;
    --dashboard-bottom-offset: calc(var(--status-foot-offset) + var(--mob-panel-h));
  }
  .nav-rail, #nav-rail-el.visible { display: none !important; }
  .dashboard { margin-left: 0; }
  .status-foot { left: 0; }
  .yt-dashboard { grid-template-columns: 1fr; }
  #page-your-info, #page-training, #page-bloodbags, #page-nerve, #page-bleeding {
    left: 0;
  }
  .hud { grid-template-columns: 1fr; }
  .stat-strip { flex-wrap: wrap; height: auto; }
  .stat-cell { min-width: 50%; padding: 8px 12px; }
  .stat-number.huge { font-size: 24px; }
  .stat-number.large { font-size: 20px; }
  .col { display: none; }
  .col.mob-active { display: flex; }
  #mob-panel-tabs { display: flex; }
  #mob-refresh-btn { display: flex; }
  /* Stats panel mobile */
  .stats-stat-row {
    grid-template-columns: 42px 1fr auto;
    gap: 8px;
  }
  .stats-stat-val { min-width: 100px; font-size: 11px; }
  #stats-panel { width: 95vw; max-height: 90vh; }
  #your-info-header, #training-header, #bb-header, #nerve-header, #bleeding-header,
  #training-info, #bb-info, #nerve-info, #bleeding-info,
  .yt-week-tabs, #training-week-tabs, #bb-week-tabs, #nerve-week-tabs, #bleeding-war-tabs,
  #yt-btns, #training-btns, #bb-btns, #nerve-btns {
    padding-left: 16px;
    padding-right: 16px;
  }
  #your-info-refresh-frame, #training-refresh-frame, #bb-refresh-frame, #nerve-refresh-frame {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }
  #yt-btns, #training-btns, #bb-btns, #nerve-btns {
    bottom: var(--footer-safe-boundary);
  }
  #bleed-refresh-btn {
    margin-left: 0 !important;
  }
  /* Table day cells tighter on mobile */
  .td-day { padding: 4px 6px !important; min-width: 44px; font-size: 11px; }
  .td-day-energy { font-size: 11px; }
  .td-day-xanax { font-size: 8px; }
}

/* Small mobile */
@media (max-width: 480px) {
  .stat-cell { min-width: 50%; padding: 6px 8px; }
  .stat-cell.cell-war { min-width: 100%; }
  .stat-number.huge { font-size: 20px; }
  .stat-number.large { font-size: 18px; }
  .stat-label { font-size: 7px; letter-spacing: 1.5px; }
  .col-head { padding: 0 10px; height: 36px; }
  .col-body { padding: 4px; }
  .member-card { padding: 6px 8px; gap: 6px; }
  .member-stats-row { gap: 6px; }
  .stat-col .stat-val { font-size: 10px; }
  .login-box { width: calc(100vw - 32px); padding: 28px 24px; }
  .war-mini { gap: 6px; }
  .war-mini-score { font-size: 20px; }
}