/* ===== Web version: layouts for phones, tablets and touch screens (loaded after styles.css) ===== */
html, body { height: 100%; -webkit-text-size-adjust: 100%; }
body { overscroll-behavior: none; }
.app { height: 100dvh; }
.live-view { height: 100dvh; }
.is-touch .btn, .is-touch .act, .is-touch .chip, .is-touch .nav-btn, .is-touch .tab, .is-touch .pcard { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.is-touch .ev .x { opacity: .7; }
.is-touch input, .is-touch select, .is-touch textarea { font-size: 16px; } /* stops iPhone from zooming into fields */
.web-top, .web-scrim { display: none; }
/* honor the iPhone notch / home bar when installed to the home screen */
.is-standalone .sidebar { padding-top: max(18px, env(safe-area-inset-top)); }
.is-standalone .scorebar { padding-top: max(12px, env(safe-area-inset-top)); }

/* ---------- Narrow screens (phones, iPad portrait): sidebar becomes a slide-out menu ---------- */
@media (max-width: 1099px) {
  .app { display: block; }
  .sidebar { position: fixed; z-index: 70; left: 0; top: 0; bottom: 0; width: min(290px, 86vw); overflow-y: auto; transform: translateX(-102%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(0,0,0,.5); padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  html.nav-open .sidebar { transform: none; }
  html.nav-open .web-scrim { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(5,6,20,.55); }
  .web-top { display: flex; position: fixed; z-index: 40; top: 0; left: 0; right: 0; height: calc(54px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0; align-items: center; gap: 10px; background: var(--navy); color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); }
  .web-top button { border: 0; background: rgba(255,255,255,.08); color: #fff; width: 42px; height: 38px; border-radius: 10px; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .web-top img { height: 30px; }
  .web-top .t { font-weight: 800; font-size: 15px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
  .web-top .t small { display: block; font-weight: 700; font-size: 10px; letter-spacing: .6px; color: var(--steel-2); text-transform: uppercase; }
  .web-top .cl { font-size: 11px; font-weight: 800; padding: 5px 9px; border-radius: 99px; background: rgba(255,255,255,.08); white-space: nowrap; }
  .main { height: 100dvh; padding-top: calc(54px + env(safe-area-inset-top)); -webkit-overflow-scrolling: touch; }
  body:has(.live-view) .web-top, body:has(.login-screen) .web-top { display: none; }
  body:has(.live-view) .main { padding-top: 0; }
  body:has(.flow) .toast-wrap { bottom: auto; top: calc(10px + env(safe-area-inset-top)); } /* keep messages off the Made / Missed buttons */ /* no menu bar during a game, so no gap above the scoreboard */
  .page { padding: 18px 16px 70px; }
  .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .modal.wide { width: 96vw; }

  /* live tracker: court and buttons on top, both benches side by side underneath */
  .live-view { grid-template-rows: auto auto 1fr; }
  .live-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding: 8px 10px; }
  .live-tabs::-webkit-scrollbar { display: none; }
  .live-tabs > * { flex: none; }
  .tracker { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: auto; padding: 12px; }
  .tracker > .center-col { grid-column: 1 / -1; order: -1; }
  .tracker > .bench-panel { max-height: none; }
  .tracker .bench-list { overflow: visible; }
  .feed { max-height: 340px; }
  svg.court { max-height: 52vh; }
  .scorebar { padding: 10px 14px; gap: 10px; }
  .sb-team .score { font-size: 38px; min-width: 56px; }
}

/* ---------- Phones ---------- */
@media (max-width: 699px) {
  .page { padding: 14px 12px 80px; }
  .page-head { margin-bottom: 14px; }
  .page-head h1 { font-size: 21px; }
  .page-head > .row { width: 100%; }
  /* every multi-column grid becomes one column (including ones laid out inline) */
  .page .grid, .page .g2, .page .g3, .page .g4, .report-grid .grid, .modal .grid { grid-template-columns: 1fr !important; }
  .page .grid[class*="g4"], .page .tiles { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .page [style*="grid-template-columns"]:not(.tracker):not(.court-grid):not(.lu5) { grid-template-columns: 1fr !important; }
  .page [style*="grid-column"] { grid-column: auto !important; }
  .card { padding: 14px; }
  .hero { flex-wrap: wrap; padding: 18px; gap: 14px; }
  .hero img { width: 52px; }
  .hero h2 { font-size: 21px; }
  .hero .big { font-size: 30px; }
  .stat-tile .val { font-size: 23px; }
  .btn { padding: 9px 12px; }
  .row { row-gap: 8px; }
  .seg { flex-wrap: wrap; }
  .tbl td, .tbl th { padding: 7px 6px; }
  .tbl-wrap, .card.flush { -webkit-overflow-scrolling: touch; }
  .cmp { grid-template-columns: 42px 1fr 84px 1fr 42px; gap: 6px; }
  .cmp .lb { font-size: 9.5px; letter-spacing: .3px; }

  /* modals become bottom sheets */
  .modal-back { align-items: flex-end; }
  .modal, .modal.wide { width: 100vw; max-height: 92dvh; border-radius: 18px 18px 0 0; }
  .modal-h { padding: 14px 16px; } .modal-b { padding: 14px 16px; }
  .modal-f { padding: 12px 16px max(12px, env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .modal-f .btn { flex: 1; }

  /* live tracker on a phone: one column, court first */
  .scorebar { grid-template-columns: 1fr 1fr; grid-template-areas: "home away" "mid mid"; padding: 8px 10px; gap: 6px 8px; }
  .scorebar > .sb-team.home { grid-area: home; } .scorebar > .sb-team.away { grid-area: away; } .scorebar > .sb-mid { grid-area: mid; }
  .sb-team { gap: 8px; min-width: 0; }
  .sb-team > div:nth-child(2) { min-width: 0; }
  .sb-team .nm { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sb-team .nm img { height: 15px !important; }
  .sb-team .meta { gap: 6px; font-size: 9.5px; flex-wrap: wrap; }
  .sb-team .score { font-size: 32px; min-width: 44px; }
  .sb-team .tag { height: 34px; width: 6px; }
  .sb-mid { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px 10px; }
  .sb-clock { font-size: 24px; min-width: 110px; padding: 1px 10px; }
  .sb-period { width: 100%; font-size: 10.5px; }
  .tracker { grid-template-columns: minmax(0, 1fr); padding: 10px; gap: 10px; }
  .tracker > *, .center-col > * { min-width: 0; }
  .actions { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .act { padding: 10px 4px; font-size: 12px; }
  .act kbd { display: none; }
  .court-hint { font-size: 10.5px; top: 12px; left: 14px; }
  svg.court { max-height: none; }
  .pass-bar { flex-wrap: wrap; gap: 10px; }
  .pass-bar .pass-btn { flex: 1 1 100%; }
  .pass-bar .pass-info { flex: 1; justify-content: space-around; }
  .pass-bar > .muted { display: none; }
  .ev { grid-template-columns: 46px 5px 1fr auto auto; gap: 7px; padding: 7px 10px; font-size: 12.5px; }

  /* shot pop-up becomes a bottom sheet */
  .flow { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: 100% !important; max-height: 78dvh; overflow-y: auto; border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .chip { padding: 10px 4px; }
  .bigchoice button { padding: 18px; }

  .login-screen { padding: 16px; align-items: flex-start; }
  .login-card { padding: 22px 18px !important; }
  .toast-wrap { bottom: max(18px, env(safe-area-inset-bottom)); width: 92vw; }
  .toast { text-align: center; }
}

/* ---------- Game list rows: stack when their box is narrow (phones, or side-by-side cards on tablets) ---------- */
.page .card { container-type: inline-size; }
@container (max-width: 560px) {
  .game-card { grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px 14px; }
  .game-card > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .game-card > :nth-child(6) { grid-column: 2; grid-row: 1; justify-self: end; }
  .game-card > :nth-child(2) { grid-column: 1; grid-row: 2; text-align: left !important; }
  .game-card > :nth-child(3) { grid-column: 2; grid-row: 2; }
  .game-card > :nth-child(5) { grid-column: 1; grid-row: 3; }
  .game-card > :nth-child(4) { grid-column: 2; grid-row: 3; }
  .game-card .date br { display: none; }
  .game-card .date > span { margin-left: 6px; }
  .game-card .sc { font-size: 18px; text-align: right; }

}

/* ---------- Tablets in landscape keep the desktop layout, slightly tighter ---------- */
@media (min-width: 1100px) and (max-width: 1299px) {
  .app { grid-template-columns: 210px 1fr; }
  .tracker { grid-template-columns: 250px 1fr 250px; }
}