/* Phones (≤700px): picker becomes a slide-in drawer, Games bar pins to the top, cards tighten. */
#picker-toggle, .drawer-head, #picker-backdrop { display: none; }
@media (max-width: 700px) {
  main, body.panel-collapsed main { grid-template-columns: minmax(0, 1fr); height: auto; }
  /* Phones use the drawer instead of the desktop hide/show panel. */
  #panel-toggle { display: none; }
  aside, body.panel-collapsed aside { width: auto; transform: none; visibility: visible; }
  /* The Games bar stays pinned to the top while the board scrolls. */
  aside { position: sticky; top: 0; z-index: 10; overflow: visible; border-right: 0; border-bottom: 1px solid var(--border); }
  #picker-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; background: var(--panel); border: 0; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
  #picker-toggle .count { color: var(--muted); font-weight: 400; margin-left: auto; }
  /* Drawer that slides in from the left over the board. */
  #picker-body { position: fixed; top: 0; bottom: 0; left: 0; z-index: 20; width: min(85vw, 320px); overflow-y: auto;
    background: var(--bg); border-right: 1px solid var(--border); transition: transform .25s ease, visibility 0s; }
  /* Hide from tab focus once closed, but only after the slide finishes. */
  aside.collapsed #picker-body { transform: translateX(-100%); visibility: hidden; transition: transform .25s ease, visibility 0s .25s; }
  .drawer-head { display: flex; align-items: center; padding: 12px 16px; font-weight: 600; }
  .drawer-head button { margin-left: auto; background: none; border: 0; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
  #picker-backdrop { display: block; position: fixed; inset: 0; z-index: 19; background: rgba(0, 0, 0, .5); transition: opacity .25s ease; }
  aside.collapsed #picker-backdrop { opacity: 0; pointer-events: none; }
  body:has(aside:not(.collapsed)) { overflow: hidden; }
  aside.preload #picker-body, aside.preload #picker-backdrop { transition: none; }
  .drawer-foot { display: block; position: sticky; bottom: 0; padding: 12px 16px; background: var(--bg); border-top: 1px solid var(--border); }
  #picker-done { width: 100%; padding: 12px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
  #board { padding: 12px 16px 32px; }
  .desktop-only { display: none; }
  .mobile-only { display: inline; }
  /* Narrow screens: tighter scoreboard row so team names fit beside logo, score and clock. */
  .score { grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr); gap: 6px; }
  .team { gap: 6px; }
  .team img { width: 20px; height: 20px; }
  .team .pts { font-size: 20px; }
  /* The corner bar becomes a footer at the end of the page, so it never covers cards, with a full-size gear to tap
     and a tappable email. The settings menu still pops up out of the gear. */
  #corner { position: relative; width: fit-content; margin: 0 auto; padding: 0 16px calc(16px + env(safe-area-inset-bottom));
    align-items: center; gap: 12px; font-size: 13px; }
  #settings { width: 44px; height: 44px; padding: 0; border-bottom: 1px solid var(--border); border-radius: 10px; font-size: 20px; }
  #contact { padding: 0; background: none; border-radius: 0; user-select: auto; }
  #contact a { display: inline-block; padding: 12px 0; color: var(--text); }
  #settings-menu { min-width: 160px; }
  #settings-menu button { padding: 12px 14px; font-size: 15px; }
  #coach { right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); width: 130px; }
}