/* ======================================================================
   MUMIZA — Android TV WebView compatibility layer (STATIC FILE — DO NOT
   move into globals.css / do not @import it from there).

   Served from public/ on purpose so it reaches the browser byte-for-byte:
   the Tailwind/Lightning CSS pipeline statically evaluates @supports
   conditions against its browser targets and strips blocks it considers
   dead code, which silently deleted this layer when it lived inside
   globals.css.

   WHY IT EXISTS: many Android TV boxes ship a system WebView frozen at
   Chromium 99–110. It parses @layer / @property (so the whole Tailwind
   v4 stylesheet applies) but NOT oklch() or color-mix() — both landed in
   Chromium 111. Any declaration using them is dropped. Before this layer,
   that made button backgrounds, the logo gradient, the hero scrims, the
   player chrome gradients and the focus ring invisible in the APK, while
   posters (images + transforms) still worked.

   Everything here is wrapped in @supports so modern browsers evaluate it
   away at runtime. The rules are unlayered on purpose: unlayered CSS
   beats every @layer (including Tailwind's utilities layer) without
   !important. The pre-mixed tint variables (--primary-20, --background-85,
   --destructive-15, …) are defined per theme in globals.css.
   ====================================================================== */

@supports not (color: color-mix(in lab, red, red)) {
  /* --- Gradients ------------------------------------------------------
     Tailwind v4 interpolates gradients "in oklab". On a WebView without
     color-mix support the WHOLE gradient is invalid — the logo tile, the
     TV hero scrims and the player's top/bottom chrome all vanished.
     Re-declare the direction without the interpolation hint; the color
     stops already fall back to valid hex/vars. */
  .bg-gradient-to-t  { --tw-gradient-position: to top; }
  .bg-gradient-to-tr { --tw-gradient-position: to top right; }
  .bg-gradient-to-r  { --tw-gradient-position: to right; }
  .bg-gradient-to-br { --tw-gradient-position: to bottom right; }
  .bg-gradient-to-b  { --tw-gradient-position: to bottom; }
  .bg-gradient-to-bl { --tw-gradient-position: to bottom left; }
  .bg-gradient-to-l  { --tw-gradient-position: to left; }
  .bg-gradient-to-tl { --tw-gradient-position: to top left; }

  /* --- Alpha-modified theme colors ------------------------------------
     Tailwind's compatibility fallback for a VARIABLE color with an alpha
     modifier drops the alpha (bg-primary/20 → var(--primary)), e.g. a
     solid purple nav pill with purple text. Point the fallback at the
     pre-mixed tint vars so the exact alpha survives. */
  .bg-primary\/20         { background-color: var(--primary-20); }
  .to-primary\/70         { --tw-gradient-to: var(--primary-70); }
  .to-primary\/60         { --tw-gradient-to: var(--primary-60); }
  .shadow-primary\/25     { --tw-shadow-color: var(--primary-25); }
  .shadow-primary\/30     { --tw-shadow-color: var(--primary-30); }
  .bg-destructive\/15     { background-color: var(--destructive-15); }
  .shadow-destructive\/30 { --tw-shadow-color: var(--destructive-30); }
  .from-background\/85    { --tw-gradient-from: var(--background-85); }
  .from-background\/70    { --tw-gradient-from: var(--background-70); }
  .via-background\/50     { --tw-gradient-via: var(--background-50); }
  .via-background\/40     { --tw-gradient-via: var(--background-40); }
  .via-background\/30     { --tw-gradient-via: var(--background-30); }

  /* --- Text selection --------------------------------------------------
     globals.css styles selection with color-mix(); Tailwind's fallback
     drops the alpha to solid primary. Use the pre-mixed tint instead. */
  ::selection {
    background: var(--primary-45);
  }
}

/* Dynamic viewport units need Chromium 108; older TV boxes would drop
   h-dvh entirely, collapsing the TV shell's fixed-height layout. */
@supports not (height: 100dvh) {
  .h-dvh     { height: 100vh; }
  .min-h-dvh { min-height: 100vh; }
  .h-svh     { height: 100vh; }
  .min-h-svh { min-height: 100vh; }
}