/* Quiz League - phone & tablet layout. Loaded after style.css and league.css. */
@media (max-width: 800px) {
  body { display: block; min-width: 0; }
  /* Sticky compact header: small logo + one swipeable row of links */
  .sidebar { position: sticky; top: 0; z-index: 20; width: 100%; min-height: 0; padding: 8px 10px; display: flex; flex-direction: row; align-items: center; gap: 10px; background: rgba(12,17,30,.96); backdrop-filter: blur(6px); }
  .logo { display: block; flex: 0 0 auto; }
  #sidebar { flex: 1; min-width: 0; }
  .logo img { width: 38px; max-width: 38px; margin: 0; display: block; }
  .sidebar-menu { flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; width: auto; flex: 1; gap: 4px; }
  .sidebar-menu::-webkit-scrollbar { display: none; }
  .sidebar-menu .sidebar-menu { overflow: visible; flex: none; }
  .sidebar-menu a { width: auto; flex: 0 0 auto; padding: 8px 12px; margin: 0; font-size: .88rem; border-radius: 999px; }
  .sidebar-menu a:hover { transform: none; }
  .content { width: auto; max-width: none; padding: 14px 12px 30px; margin: 0; }
  .feature { padding: 22px 16px; margin-bottom: 14px; }
  h1 { font-size: 1.8rem; line-height: 1.15; margin: 2px 0 10px; text-align: left; }
  h2 { text-align: left; }
  p, ul { font-size: 1rem; }
}

@media (max-width: 600px) {
  .feature { padding: 18px 12px; }
  h1 { font-size: 1.6rem; }
  .feature > p { line-height: 1.5; margin-bottom: 12px; }
  .league-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
  #team-picker select { max-width: none; flex: 1; }
  .week-pill { padding: 8px 12px; }
  .week-pill .wk-word { display: none; }
  .week-step { flex-basis: 32px; height: 32px; font-size: 1.3rem; }
  .week-title { font-size: 1.1rem; }

  /* Head-to-head cards stay side by side on phones */
  .match { gap: 6px; padding: 12px 8px; }
  .match .side, .match .side.away { flex-direction: column; text-align: center; gap: 5px; }
  .match .badge { --size: 44px; }
  .match .team-name { font-size: .9rem; }
  .scoreline { min-width: 74px; }
  .score { font-size: 1.25rem; }
  .scores { gap: 4px; }
  .outcome { font-size: .62rem; text-align: center; }

  /* Table: hide W/D/L/Score/Form columns, show form under the team name */
  .league-table .c-wdl, .league-table .c-tot, .league-table .c-form { display: none; }
  .form-inline { display: inline-flex; }
  .league-table th, .league-table td { padding: 9px 5px; font-size: .85rem; }
  .league-table .c-pos { width: 34px; }
  .badge.sm { --size: 26px; }
  .team-cell { gap: 7px; }
}

@media (max-width: 370px) {
  .sidebar-menu a { padding: 7px 10px; font-size: .82rem; }
  .match .team-name { font-size: .82rem; }
  .match .badge { --size: 38px; }
}