/* =====================================================================
   mobile.css — "retro skin, native bones"
   ---------------------------------------------------------------------
   A mobile-only iOS-native skin for cupfooty.world. The desktop "Apple
   Lisa" experience is untouched: every rule here is gated on BOTH a
   narrow viewport (max-width: 720px) AND a body.is-mobile class that
   mobile.js only adds on phones. So on desktop this file is inert.

   What it does:
     • respects the iPhone safe areas (notch + home indicator)
     • hides the desktop chrome (menu bar, title bar, tab strip, dock,
       status bar, desktop backdrop) and replaces it with…
     • a blurred iOS nav header (built by mobile.js) and
     • a fixed bottom tab bar: Home · Fixtures · Results · Replays · Live
       + a More tab (Teams, Groups, Golden Boot, Stadiums, games, quiz)
     • turns the draggable windows into bottom sheets
     • 44pt touch targets, no tap-highlight flash, real :active states
     • pull-to-refresh, momentum scrolling, a touch of larger type

   The monochrome identity (gray, hard-edged cards, the single LIVE red,
   pixel icons, the typographic voice) is deliberately kept.
   ===================================================================== */

@media (max-width: 720px) {
  body.is-mobile {
    /* one place to retune the chrome heights */
    --m-safe-top:    env(safe-area-inset-top, 0px);
    --m-safe-bottom: env(safe-area-inset-bottom, 0px);
    --m-safe-left:   env(safe-area-inset-left, 0px);
    --m-safe-right:  env(safe-area-inset-right, 0px);
    --m-header-h:    calc(var(--m-safe-top) + 54px);
    --m-tabbar-h:    calc(var(--m-safe-bottom) + 54px);
    --m-blur:        saturate(1.7) blur(20px);
    --m-hairline:    rgba(0, 0, 0, 0.14);
  }

  /* kill the desktop stipple + the heavy desk gray — a phone shows the
     full-bleed "window" only, so the desktop metaphor is just weight. */
  body.is-mobile {
    background: var(--paper);
    overflow: hidden;
    /* iOS: no rubber-band on the page itself; the content scroller owns it */
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
  }
  body.is-mobile .desktop { overflow: hidden; }
  body.is-mobile .desktop::before { display: none; }     /* MetLife backdrop */

  /* ---- hide the desktop chrome we replace ---- */
  body.is-mobile .menubar,
  body.is-mobile #titlebar,
  body.is-mobile .tabs,
  body.is-mobile .statusbar,
  body.is-mobile #wcDock,
  body.is-mobile .desk-icon { display: none !important; }

  /* ---- the window becomes the full screen, padded for the fixed chrome ---- */
  body.is-mobile .window {
    /* on desktop the dashboard is a dock app that boots hidden (app.js sets an
       inline display:none); on a phone there's no dock, so it IS the app — keep
       it always visible. !important beats the inline style without JS timing. */
    display: flex !important;
    position: static !important;
    width: 100% !important; height: 100% !important;
    left: 0 !important; top: 0 !important;
    border: none !important; border-radius: 0 !important; box-shadow: none !important;
    padding-top: var(--m-header-h);
    padding-bottom: var(--m-tabbar-h);
    background: var(--paper);
  }

  /* the single scroller: momentum + room past the tab bar */
  body.is-mobile .content {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 14px max(14px, var(--m-safe-left)) 28px max(14px, var(--m-safe-right));
    background: var(--paper);
  }
  /* the chunky Mac scrollbar reads as desktop — hide it on touch */
  body.is-mobile .content::-webkit-scrollbar { width: 0; height: 0; }

  /* ===================================================================
     iOS nav header  (built by mobile.js → <header class="m-nav">)
     A blurred bar with a left-aligned, large-title-ish heading, a LIVE
     pill on the left when matches are in play, and search on the right.
     =================================================================== */
  .m-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1200;
    height: var(--m-header-h);
    padding: var(--m-safe-top) max(12px, var(--m-safe-right)) 0 max(14px, var(--m-safe-left));
    display: flex; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: var(--m-blur); backdrop-filter: var(--m-blur);
    border-bottom: 1px solid var(--m-hairline);
  }
  .m-nav-title {
    font-family: var(--font); font-weight: 800; letter-spacing: -0.4px;
    font-size: 26px; line-height: 1; color: var(--ink);
    flex: 1 1 auto; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* the LIVE pill mirrors the desktop #menubarLive */
  .m-nav-live {
    flex: 0 0 auto; display: none; align-items: center; gap: 5px;
    font: 800 11px/1 var(--font); letter-spacing: 0.5px; text-transform: uppercase;
    color: #fff; background: var(--live);
    border: none; border-radius: 999px; padding: 5px 10px; cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  }
  body.is-mobile.has-live .m-nav-live { display: inline-flex; }
  .m-nav-live .ml-dot {
    width: 6px; height: 6px; border-radius: 50%; background: #fff;
    animation: pulse 1.4s ease-out infinite;
  }
  .m-nav-act {
    flex: 0 0 auto; width: 40px; height: 40px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; color: var(--ink); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .m-nav-act:active { opacity: 0.45; }
  .m-nav-act svg { width: 21px; height: 21px; }

  /* ===================================================================
     Bottom tab bar  (built by mobile.js → <nav class="m-tabbar">)
     =================================================================== */
  .m-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
    height: var(--m-tabbar-h);
    padding: 0 max(0px, var(--m-safe-right)) var(--m-safe-bottom) max(0px, var(--m-safe-left));
    display: flex; align-items: stretch;
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: var(--m-blur); backdrop-filter: var(--m-blur);
    border-top: 1px solid var(--m-hairline);
  }
  .m-tab {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 6px 2px 4px;
    background: none; border: none; cursor: pointer;
    color: var(--muted2);
    -webkit-tap-highlight-color: transparent;
    transition: color .12s ease, transform .08s var(--ease);
  }
  .m-tab:active { transform: scale(0.92); }
  .m-tab-ico {
    width: 25px; height: 25px; display: flex; align-items: center; justify-content: center;
    position: relative;
  }
  .m-tab-ico img { max-width: 23px; max-height: 21px; filter: grayscale(1) contrast(1.04); opacity: 0.55; }
  .m-tab-ico svg { width: 23px; height: 23px; }
  .m-tab-ico .m-tab-glyph { font-size: 19px; line-height: 1; filter: grayscale(1); opacity: 0.55; }
  .m-tab-label {
    font: 700 10px/1 var(--font); letter-spacing: 0.1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  /* active tab = full-ink (monochrome; the red stays reserved for LIVE) */
  .m-tab.sel { color: var(--ink); }
  .m-tab.sel .m-tab-ico img,
  .m-tab.sel .m-tab-ico .m-tab-glyph { opacity: 1; }
  /* live dot on the Live tab when something's in play */
  .m-tab-live-dot {
    position: absolute; top: -1px; right: 0; width: 7px; height: 7px;
    border-radius: 50%; background: var(--live); display: none;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.9);
  }
  body.is-mobile.has-live .m-tab[data-tab="live"] .m-tab-live-dot { display: block; }

  /* ===================================================================
     Filter toolbar — kept, but slimmed into a tidy row under the header
     =================================================================== */
  body.is-mobile .toolbar {
    gap: 10px; padding: 8px max(12px, var(--m-safe-left));
    border-bottom: 1px solid var(--m-hairline);
    background: var(--paper);
  }
  body.is-mobile .toolbar select {
    font-size: 15px; padding: 7px 9px; max-width: 46vw; min-height: 38px; border-radius: 9px;
  }
  body.is-mobile .sync { font-size: 12px; }

  /* ===================================================================
     Touch ergonomics — bigger tap targets, no hover-only affordances,
     real press feedback on the things you actually tap.
     =================================================================== */
  body.is-mobile .match.clickable,
  body.is-mobile .team-card,
  body.is-mobile .player-cell,
  body.is-mobile .rw-row,
  body.is-mobile .pal-item,
  body.is-mobile .venue-link { min-height: 46px; }

  body.is-mobile .match.clickable:active,
  body.is-mobile .team-card:active,
  body.is-mobile .player-cell:active,
  body.is-mobile .rw-row:active { background: #ededed; }

  /* single-column lists read better on a phone */
  body.is-mobile .teams-grid,
  body.is-mobile .squad { grid-template-columns: 1fr; }

  /* slightly larger, looser body type at phone distance */
  body.is-mobile .content { font-size: 15px; }
  body.is-mobile .team-search { font-size: 16px; min-height: 44px; }  /* 16px stops iOS zoom-on-focus */

  /* ===================================================================
     Draggable windows → bottom sheets
     Every makeDialog()/floating window is re-presented as an iOS sheet:
     pinned to the bottom, rounded top, a grab handle, slide-up entry.
     mobile.js adds swipe-down-to-dismiss.
     =================================================================== */
  body.is-mobile #dialogLayer .dialog,
  body.is-mobile .floating-win {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: 100% !important; max-width: 100% !important;
    max-height: 88vh; height: auto !important;
    border: none !important;
    border-top: 1.5px solid var(--edge);
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.28) !important;
    display: flex; flex-direction: column;
    padding-bottom: var(--m-safe-bottom);
    animation: m-sheet-up 0.28s var(--ease);
    transform: none;
  }
  @keyframes m-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

  /* a dimming scrim behind the top-most sheet (added by mobile.js) */
  .m-scrim {
    position: fixed; inset: 0; z-index: 1490;
    background: rgba(0, 0, 0, 0.32);
    -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
    animation: fadeIn 0.2s ease;
  }

  /* the title bar becomes a sheet header with a grab handle */
  body.is-mobile #dialogLayer .dialog .dlg-bar {
    position: relative; justify-content: center;
    padding: 14px 12px 10px; cursor: grab;
    border-bottom: 1px solid var(--m-hairline);
    touch-action: none;          /* let the drag-to-dismiss handler own the gesture */
  }
  body.is-mobile #dialogLayer .dialog .dlg-bar::before {
    content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    width: 38px; height: 5px; border-radius: 3px; background: #c4c4c4;
  }
  body.is-mobile #dialogLayer .dialog .titlebar-stripes { display: none; }
  body.is-mobile #dialogLayer .dialog .dlg-title { font-size: 16px; font-weight: 800; }
  /* hide the tiny Lisa close/minimise boxes — swipe-down or the scrim dismiss */
  body.is-mobile #dialogLayer .dialog .closebox,
  body.is-mobile #dialogLayer .dialog .wc-min { display: none; }
  body.is-mobile #dialogLayer .dialog .dlg-body {
    flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  /* the desktop resize grip has no place on a sheet (or a full-screen window) */
  body.is-mobile .wc-resize-grip { display: none !important; }

  /* ---- the "More" sheet (built by mobile.js) ---- */
  .m-more-list { padding: 6px 0 max(10px, var(--m-safe-bottom)); }
  .m-more-row {
    display: flex; align-items: center; gap: 14px;
    width: 100%; padding: 13px 18px; min-height: 52px;
    background: none; border: none; border-bottom: 1px solid var(--m-hairline);
    font: 700 16px var(--font); color: var(--ink); text-align: left; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .m-more-row:last-child { border-bottom: none; }
  .m-more-row:active { background: #ededed; }
  .m-more-ico {
    width: 30px; height: 30px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  }
  .m-more-ico img { max-width: 26px; max-height: 24px; filter: grayscale(1) contrast(1.04); }
  .m-more-ico .m-more-glyph { font-size: 22px; filter: grayscale(1); }
  .m-more-row .m-more-chev { margin-left: auto; color: var(--muted2); font-size: 18px; }
  .m-more-sec {
    font: 800 11px var(--font); text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--muted); padding: 16px 18px 7px;
  }

  /* ===================================================================
     Pull-to-refresh spinner (driven by mobile.js)
     =================================================================== */
  .m-ptr {
    position: fixed; top: var(--m-header-h); left: 0; right: 0; z-index: 1100;
    display: flex; align-items: center; justify-content: center;
    height: 0; overflow: hidden; pointer-events: none;
    color: var(--muted);
  }
  .m-ptr .m-ptr-spin {
    width: 22px; height: 22px; border: 2.5px solid var(--hair); border-top-color: var(--ink);
    border-radius: 50%;
  }
  body.is-mobile.m-refreshing .m-ptr .m-ptr-spin { animation: m-spin 0.7s linear infinite; }
  @keyframes m-spin { to { transform: rotate(360deg); } }

  /* the command palette already feels app-like; just seat it below the notch */
  body.is-mobile .pal-box { margin-top: calc(var(--m-safe-top) + 8vh); }

  /* the boot screen: clear the notch + home indicator */
  body.is-mobile #bootScreen { padding: var(--m-safe-top) 0 var(--m-safe-bottom); }
}

/* honour reduced-motion for the new mobile motion too */
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  body.is-mobile #dialogLayer .dialog,
  body.is-mobile .floating-win,
  .m-scrim { animation: none; }
  body.is-mobile.m-refreshing .m-ptr .m-ptr-spin { animation: none; }
}