/* ============================================================
   All Sports Live — shared "fluid UI" utility layer
   ------------------------------------------------------------
   PURPOSE
   Adds ONE reusable glassmorphism + micro-interaction system on
   top of the site's existing design tokens (--panel, --border,
   --shadow, --bg-card, etc.) so modals, the dashboard sidebar,
   and any future surface share the exact same premium glass
   treatment instead of each page reinventing it.

   This file is purely additive:
   - It never redefines a component's layout, only decorates
     surfaces that opt in via the `.glass` class.
   - It changes nothing for elements that don't use these classes.
   - Every effect degrades gracefully (no backdrop-filter support,
     prefers-reduced-motion, coarse/touch pointers on low-end
     Android).

   USAGE
   Add class="glass" to a modal panel / sidebar / dropdown that
   already has its own background + border-radius; this layer
   swaps the flat background for a translucent, blurred one and
   adds a soft top highlight + hairline border. Works under both
   [data-theme="dark"] and [data-theme="light"] since both
   index.html and the score-* pages toggle that same attribute.
   ============================================================ */

:root {
  --glass-blur: 20px;
  --glass-saturate: 160%;
}

/* Dark surfaces (default site theme + explicit [data-theme="dark"]) */
:root,
[data-theme="dark"] {
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-bg-strong: rgba(18, 24, 38, 0.82);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.06);
}

[data-theme="light"] {
  --glass-bg: rgba(255, 255, 255, 0.68);
  --glass-bg-strong: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-highlight: rgba(255, 255, 255, 0.55);
  --glass-blur: 26px;
  --glass-saturate: 150%;
}

.glass {
  position: relative;
  /* Any descendant using the site's own muted "faint" text token
     automatically becomes readable inside glass — a translucent,
     blurred surface has much lower effective contrast than the
     solid panel that token was designed for, so this scopes a
     stronger value everywhere it's needed without editing every
     component (empty-states, group labels, sub-captions, etc). */
  --text-faint: var(--text-dim);
  background:
    linear-gradient(160deg, var(--glass-highlight) 0%, transparent 35%),
    var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 var(--glass-highlight);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

/* Soft top highlight line — the classic "light hitting glass" cue,
   done with a pseudo-element so it never fights the panel's own
   border-radius/overflow rules. */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, var(--glass-highlight), transparent 40%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.5;
}

/* Backdrop scrims (the full-screen dim behind a modal) get a light
   blur too so the glass panel in front actually has something
   blurred to sit on top of, without going full frosted-neon. */
.glass-scrim {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ---- Android / low-end performance guardrail ----
   Heavy backdrop-filter blur is one of the more GPU-expensive
   effects on mid/low-end Android. Coarse-pointer (touch) devices
   get a lighter blur radius; this keeps the glass *look* without
   inviting frame drops during scroll/open-close animation. */
@media (pointer: coarse) {
  :root {
    --glass-blur: 12px;
  }
  .glass-scrim {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
}

/* No backdrop-filter support at all (older browsers): fall back to
   a plain translucent panel, still on-brand, just not blurred. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: var(--glass-bg-strong);
  }
  .glass::before { display: none; }
}

/* ---- Motion tokens shared across pages ----
   Same easing curves already used piecemeal in the score pages
   and index.html's cards/buttons, named once so new components
   can reuse them instead of re-typing cubic-bezier literals. */
:root {
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.2, 0.4, 1);
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   MOBILE FIT — shared safety net across all pages
   ------------------------------------------------------------
   Fixes the two most common "doesn't fit on Android" causes:
   1) A hidden element wider than the viewport forcing horizontal
      scroll (content shifts, right edge gets cut off).
   2) `100vh` including the Android/iOS browser's collapsible
      address bar, so fixed-height overlays are taller than the
      visible screen. `dvh` (dynamic viewport height) tracks the
      *actual* visible area and is layered on top of `vh` so older
      browsers still get the old, safe behavior.
   ============================================================ */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Any element that still declares a fixed 100vh height gets a
   dvh-aware correction automatically, without every page having to
   duplicate the declaration. Safe: browsers without `dvh` support
   simply ignore this rule and keep their existing 100vh. */
.pt-fallback-enter, #pt-overlay {
  height: 100dvh;
}

/* Safe-area padding for anything that sits flush against a screen
   edge (notches, gesture bars, punch-holes) — opt in with this
   class where a fixed header/footer/sheet needs it. */
.safe-top    { padding-top: max(env(safe-area-inset-top), 0px); }
.safe-bottom { padding-bottom: max(env(safe-area-inset-bottom), 0px); }
.safe-x {
  padding-left: max(env(safe-area-inset-left), 0px);
  padding-right: max(env(safe-area-inset-right), 0px);
}

/* CSS Grid items default to `min-width: auto`, which means they
   refuse to shrink below their content's natural width — so a wide
   table or row sitting inside a grid card forces the whole grid,
   and the page, wider than the phone screen instead of scrolling
   inside its own wrapper. This resets every grid container's
   children so their own `overflow-x: auto` (already set per-page)
   can actually do its job. */
[class*="-grid"] > *, [id*="-grid"] > * {
  min-width: 0;
}
/* Glass surfaces double as scroll containers often enough (drawers,
   modals) that momentum scroll + no scroll-chaining into the page
   behind them should just be the default. */
.glass {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Kills the ~300ms tap delay and accidental double-tap-zoom on every
   tappable control, site-wide — a safety net on top of whatever
   subset of selectors each individual page already listed. */
a, button, input, select, textarea, label, [role="button"], [onclick] {
  touch-action: manipulation;
}

/* prefers-reduced-motion: strip the blur transition + any transform
   entrance so glass panels simply appear, no animated settle. */
@media (prefers-reduced-motion: reduce) {
  .glass, .glass::before {
    transition: none !important;
    animation: none !important;
  }
}