/* Phone app shell (owner 2026-11-02: "like an App Store app"). Loaded last on every sport page.
   Phones only: compact header, one tab row (the bottom bar), quiet banners, 44px taps, iPhone safe areas. */
@media (max-width: 640px) {
  /* compact header: logo fits beside the buttons, sport switcher is one swipeable pill row */
  header.brand { padding-top: env(safe-area-inset-top); background: color-mix(in srgb, var(--bg, #04080D) 82%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); }
  header.brand .bw img { width: 112px; height: auto; }
  header.brand .bm { width: 36px; height: auto; }
  header.brand .hnav { gap: 6px; }
  header.brand .spnav { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; justify-content: flex-start;
    gap: 4px; padding: 2px 16px 8px; margin: 0 -16px; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  header.brand .spnav::-webkit-scrollbar { display: none; }
  header.brand .spnav .off { display: none; }
  header.brand .spnav > * { flex: none; scroll-snap-align: start; min-height: 36px; display: inline-flex; align-items: center; }

  /* the bottom bar is the tab row on phones: drop the duplicate top tabs */
  body:has(#tabbar) .pk-tabs { display: none; }
  #tabbar { padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  #tabbar .tb { min-height: 48px; }

  /* iOS large title (mobile.js); folds into a small centered title in the header once scrolled past */
  .pk-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
  .m-title { margin: 4px 0 0; font-size: 32px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: var(--t1, #F1F5F9); }
  .pk-bar .pk-rec-m { margin: 0 0 6px; width: auto; flex: none; }
  header.brand { position: sticky; }
  .m-mini { position: absolute; left: 50%; bottom: 10px; transform: translate(-50%, 4px); font-weight: 700; font-size: 15px;
    color: var(--t1, #F1F5F9); opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s cubic-bezier(0.16, 1, 0.3, 1); }
  html.m-folded .m-mini { opacity: 1; transform: translate(-50%, 0); }
  header.brand .spnav { transition: opacity .2s; }
  html.m-folded header.brand .spnav { opacity: 0; pointer-events: none; }
  html.m-folded header.brand { border-bottom: 1px solid rgba(255,255,255,.06); }

  /* banners: one quiet line, not a box */
  .banner { font-size: 13px; line-height: 1.4; padding: 8px 12px; border-radius: 12px; }

  /* Apple's 44px minimum for anything tappable */
  .pk-chips button, .linkbtn, .hi, .hbets, .hb { min-height: 44px; }
  .pk-chips button { padding-left: 14px; padding-right: 14px; }
  button[data-act="add"], .addbtn, .pk-add { min-width: 44px; min-height: 44px; }
  input, select, textarea { font-size: 16px; } /* stops iPhone zooming into fields */

  /* press feedback on cards and rows */
  .card, .fan-row, .gcard, [data-act="go"] { -webkit-tap-highlight-color: transparent; }
  .card:active, .fan-row:active { transform: scale(.985); transition: transform .12s cubic-bezier(0.16, 1, 0.3, 1); }

  /* sheets and the chat button clear the home indicator */
  .sheet, .gd-f { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* public pages (free/seo shell, signed-out app): same compact header as the app */
@media (max-width: 640px) {
  .lsf-top { -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); row-gap: 6px; }
  .lsf-top .lsf-name { display: block; width: 112px; height: auto; }
  .lsf-top .lsf-brand img:first-child { width: 36px; height: auto; }
  .lsf-pro { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; line-height: 1; }
  .lsf-sports { margin: 0 -16px; padding: 0 16px 2px; }
  .lsf-sports a { min-height: 36px; }
  .sp-page h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
}

/* grab handle on the bet slip sheet (swipe down to close, mobile.js) */
@media (max-width: 640px) {
  #slip > .slip, .nslip.open { position: relative; }
  #slip > .slip::before, .nslip.open::before { content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: rgba(255,255,255,.22); }
  #slip > .slip { padding-top: 18px; }
}

/* "in testing" notes: one line on phones, tap to read the rest (mobile.js) */
@media (max-width: 640px) {
  .banner.nhl-test { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; padding-right: 30px; position: relative; }
  .banner.nhl-test::after { content: "›"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); opacity: .7; }
  .banner.nhl-test.m-open { white-space: normal; }
  .banner.nhl-test.m-open::after { content: ""; }
}

/* iPhone "Add to Home Screen" tip (mobile.js): shown once, Safari only, never inside the installed app */
.m-a2hs { position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 60; display: flex; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 14px; background: #10192A; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 4px 16px rgba(0,0,0,.5);
  color: #CBD5E1; font-size: 13px; line-height: 1.4; animation: mA2hs .35s cubic-bezier(0.16, 1, 0.3, 1) both; }
.m-a2hs img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.m-a2hs b { color: #F1F5F9; }
.m-a2hs button { flex: none; min-width: 44px; min-height: 44px; margin: -8px -8px -8px auto; background: none; border: 0; color: #64748B; font-size: 20px; }
@keyframes mA2hs { from { opacity: 0; transform: translateY(8px); } }