/* ============================================================
   NotaSportsGuru — Mobile App-Like Polish
   ============================================================
   Shared overrides applied to every page on top of the per-page
   inline styles. The goal is to make the site feel like a native
   iOS/Android app on small viewports, not "a website on a phone":

     · No 300ms tap delay, no blue tap-highlight flash
     · Subtle scale-down on press for buttons & cards
     · Inputs cannot trigger iOS auto-zoom (≥ 16px font)
     · Momentum scroll inside scroll containers
     · Fonts antialiased, OS text-scaling neutralized
     · Safe-area-aware bottom padding (notch / home indicator)
     · UI chrome (header, tabbar, nav) is non-selectable like
       a real app, while content stays selectable for copy
     · Pull-to-refresh / overscroll bounce contained per section
     · Smooth scroll for in-page anchors
     · prefers-reduced-motion still disables transitions
============================================================ */

/* -----------------------------------------------------------
   1. GLOBAL TOUCH POLISH (applies everywhere, no breakpoint)
----------------------------------------------------------- */

html {
  /* Prevent iOS Safari from scaling text on landscape rotation.
     The device-width viewport already handles layout sizing. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Smooth in-page anchor scrolls (e.g., FAQ jump links). */
  scroll-behavior: smooth;
}

body {
  /* Crisp text on retina + non-retina screens. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Fix iOS Safari overscroll background flash on the body.
     Sections set their own background; body just stays neutral. */
  background-color: #FFFFFF;
}

/* Kill the blue rectangle Safari draws around tapped elements.
   Keep keyboard focus styles for accessibility (they apply via
   :focus-visible rather than :focus). */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Skip the legacy 300ms wait for double-tap zoom on every tap
   target. The viewport meta also helps but `touch-action` is
   the canonical fix and works across all engines. */
a, button, summary, label,
input[type="button"], input[type="submit"], input[type="reset"],
.nspg-btn, .nspg-pill, .nspg-nav__cta, .nspg-watch__pager-btn {
  touch-action: manipulation;
}

/* On touch devices, give every interactive element a subtle
   press feedback so the user feels the tap. We use opacity +
   tiny scale rather than transform alone so the effect works
   on elements with their own transforms. */
@media (hover: none) and (pointer: coarse) {
  a:active, button:active, summary:active, label:active,
  .nspg-btn:active, .nspg-pill:active,
  .nspg-pick:active, .nspg-game:active,
  .nspg-watch__pager-btn:active {
    transform: scale(0.97);
    transition: transform .08s ease-out;
  }
  /* Disable the same effect on draggable / scrollable lists
     so the press doesn't fight the scroll. */
  .nspg-watch__list:active,
  .nspg-game__body:active {
    transform: none;
  }
}

/* The header, tabbar and nav behave like app chrome — copying
   their text by accident on a long-press never makes sense.
   Content stays selectable so users can quote a pick. */
.nspg-header, .nspg-nav, .nspg-marquee,
.nspg-mobile-tabbar, .nspg-progress {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* -----------------------------------------------------------
   2. INPUT ZOOM PREVENTION (iOS Safari)
   ---------------------------------------------------------
   iOS auto-zooms on any input whose computed font-size is
   below 16px. We force ≥ 16px on small viewports for every
   input/select/textarea so focusing them never zooms the page
   (the hallmark "this is a website" tell on mobile).
----------------------------------------------------------- */

@media (max-width: 820px) {
  input, select, textarea,
  input[type="text"], input[type="email"], input[type="number"],
  input[type="tel"], input[type="search"], input[type="url"],
  input[type="password"], input[type="date"] {
    font-size: 16px !important;
  }
}

/* -----------------------------------------------------------
   3. MOMENTUM + CONTAINED SCROLL
   ---------------------------------------------------------
   Containers that genuinely scroll internally need momentum
   plus `overscroll-behavior: contain` so a scroll-to-end
   doesn't rubber-band the page (iOS bounce-through).

   IMPORTANT: do NOT add purely-visual cards here.
   `overscroll-behavior: contain` on a non-scrolling element
   TRAPS the wheel event — desktop users hovering over the
   card find the page won't scroll. Only include selectors
   for elements that actually have overflow:auto / scroll.
----------------------------------------------------------- */

.nspg-mobile-tabbar__sheet, .nspg-mobile-tabbar__sheet-inner {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Explicit reset — earlier revisions of this file applied
   `overscroll-behavior: contain` broadly across visual cards
   (watch widget, sections, results, marquee). On desktop that
   trapped the mouse-wheel inside the card and froze the page
   scroll. Force `auto` to undo any stale rule served from CDN
   caches until clients flush. */
.nspg-watch, .nspg-watch__grid, .nspg-watch__list,
.nspg-section, .nspg-results, .nspg-results-list,
.nspg-marquee, .nspg-marquee__track,
.nspg-game__body, .nspg-game__inner {
  overscroll-behavior: auto;
}

/* Marquee track scrolls horizontally on its own (CSS animation).
   The momentum hint helps if a user ever drags it on touch. */
.nspg-marquee, .nspg-marquee__track {
  -webkit-overflow-scrolling: touch;
}

/* Top-level page bounce: keep it tight on mobile so the
   sticky header doesn't detach when overscrolling at the top. */
@media (max-width: 820px) {
  html, body {
    overscroll-behavior-y: none;
  }
}

/* -----------------------------------------------------------
   4. SAFE-AREA INSETS (notch + home indicator)
   ---------------------------------------------------------
   With viewport-fit=cover the page fills behind the notch,
   so we add device padding manually for elements that anchor
   at the screen edges. The mobile tabbar already handles
   bottom; we add belt-and-braces here in case any page
   forgets to apply it on its container.
----------------------------------------------------------- */

body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* When the standalone PWA is launched (Add to Home Screen),
   the status bar is translucent — so the sticky header gets
   pushed under the notch unless we add a top inset. */
@media all and (display-mode: standalone) {
  .nspg-header {
    padding-top: max(env(safe-area-inset-top), 8px) !important;
  }
  /* Also pin the marquee below the notch in standalone, since
     the system status bar overlaps the very top edge. */
  .nspg-marquee {
    margin-top: env(safe-area-inset-top);
  }
}

/* Floating bottom CTAs / tabbars need home-indicator padding
   so the Apply button never sits under the iPhone's home bar. */
.nspg-mobile-tabbar,
.nspg-fab, .nspg-bottom-cta {
  padding-bottom: max(env(safe-area-inset-bottom), 8px);
}

/* -----------------------------------------------------------
   5. APP-LIKE TYPOGRAPHY ON MOBILE
   ---------------------------------------------------------
   Slightly tighter line-height and letter-spacing in small
   viewports — what reads great on a 27" monitor reads loose
   on an iPhone. Small adjustments, not a full restyle.
----------------------------------------------------------- */

@media (max-width: 480px) {
  .nspg-h1 {
    letter-spacing: -0.03em !important;
    line-height: 1.02 !important;
  }
  .nspg-lead {
    line-height: 1.55 !important;
  }
}

/* -----------------------------------------------------------
   6. APP-LIKE LIST INTERACTIONS
   ---------------------------------------------------------
   Game cards on mobile feel cleaner with a hairline divider
   between them rather than spaced-out chunks, mirroring the
   pattern in iOS Settings / Tickets / etc.
----------------------------------------------------------- */

@media (max-width: 600px) {
  /* Keep the existing card style — just sharpen the press. */
  .nspg-game,
  .nspg-pick {
    transition: transform .12s var(--ease-apple, cubic-bezier(.4,0,.2,1)),
                box-shadow .12s var(--ease-apple, cubic-bezier(.4,0,.2,1)),
                border-color .12s ease;
  }
}

/* -----------------------------------------------------------
   7. KEEP FOCUS RINGS FOR KEYBOARD USERS ONLY
   ---------------------------------------------------------
   We removed the tap-highlight, so make sure keyboard users
   still see a ring when they Tab through. :focus-visible is
   the modern way to differentiate touch focus from keyboard.
----------------------------------------------------------- */

a:focus, button:focus, input:focus, select:focus, textarea:focus,
summary:focus, [tabindex]:focus {
  outline: none;
}
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--navy, #1B3A5E);
  outline-offset: 2px;
  border-radius: 4px;
}

/* -----------------------------------------------------------
   8. STANDALONE PWA POLISH
   ---------------------------------------------------------
   When launched from the Home Screen, hide the page chrome
   that suggests "this is a browser tab" — e.g., any "Apply"
   nav link can become unnecessary if the user is already a
   member, but at the visual level we mainly remove the URL-bar
   hint by setting body background-color matching the theme
   color (avoids the white flash before paint).
----------------------------------------------------------- */

@media all and (display-mode: standalone) {
  html {
    background: #1B3A5E;
  }
  body {
    /* The pages set their own backgrounds, so this shows only
       during the initial load + during overscroll bounce. */
    background-color: #FFFFFF;
  }
}

/* -----------------------------------------------------------
   9. REDUCED MOTION RESPECT
   ---------------------------------------------------------
   Cancel the press scale + smooth scroll when the user has
   asked the OS for reduced motion. Existing per-page rules
   already handle most animations; this catches our additions.
----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  a:active, button:active, summary:active, label:active,
  .nspg-btn:active, .nspg-pill:active,
  .nspg-pick:active, .nspg-game:active,
  .nspg-watch__pager-btn:active {
    transform: none !important;
    transition: none !important;
  }
}

/* -----------------------------------------------------------
   10. SKELETON LOADERS (used by JS while data is fetching)
   ---------------------------------------------------------
   Replace the literal "Loading..." text with a shimmer that
   feels like a real app fetching data. Used by the dashboard,
   matches and ai-props pages by toggling .is-skel on a row.
----------------------------------------------------------- */

@keyframes nspg-skel-shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

.nspg-skel {
  display: block;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.06) 0%,
    rgba(0,0,0,.12) 50%,
    rgba(0,0,0,.06) 100%
  );
  background-size: 200px 100%;
  background-repeat: no-repeat;
  border-radius: 6px;
  animation: nspg-skel-shimmer 1.4s ease-in-out infinite;
}
.nspg-skel--dark {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.05) 0%,
    rgba(255,255,255,.12) 50%,
    rgba(255,255,255,.05) 100%
  );
  background-size: 200px 100%;
  background-repeat: no-repeat;
  animation: nspg-skel-shimmer 1.4s ease-in-out infinite;
}
.nspg-skel--line { height: 14px; width: 100%; margin: 6px 0; }
.nspg-skel--line.is-short { width: 40%; }
.nspg-skel--line.is-mid   { width: 70%; }
.nspg-skel--circle { width: 32px; height: 32px; border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
  .nspg-skel, .nspg-skel--dark { animation: none !important; }
}