/* RacketRef · Rally — Liquid Glass system.

   One reusable "glass material" + a few surface variants, replacing the
   repeated `backdrop-blur-xl bg-white/10 border border-white/20 shadow-xl`
   utility strings scattered across views. Use via the glass() view helper
   (app/helpers/glass_helper.rb), e.g. <div class="<%= glass(:card) %> p-6">.

   Built fallback-first, in three layers (weakest → strongest):

     Layer 0  no backdrop-filter at all (very old browsers)
              → solid translucent surface, content stays legible.
     Layer 1  frosted base (all modern browsers incl. Safari / iOS 12+)
              → blur + saturate + specular top edge + soft lift. This is the
                Apple-ish look and renders identically everywhere.
     Layer 2  refraction (Chromium only — it is the only engine that honours an
              SVG url() inside backdrop-filter; see shared/_glass_filters)
              → genuine edge warp. Safari/iOS gracefully ignore it and keep the
                Layer 1 frost, so nothing breaks.

   The 1px border + inset highlights follow each element's own border-radius, so
   keep using the existing rounded-* utilities on the markup. */

/* ---- Layer 1: frosted base (default) ---------------------------------- */
/* GPU acceleration: translateZ(0) forces compositing layer, preventing
   flickering in Safari/older Chrome. backface-visibility: hidden further
   stabilises the render. Blur kept moderate (10px) for performance. */
.rr-glass {
  position: relative;
  background-color: rgba(255, 255, 255, 0.08);
  /* Two layered highlights so the panel reads as glass even over a dark,
     low-contrast backdrop (no bright video behind it): a soft top-down light
     fall-off over a diagonal specular streak — the cues real glass shows when
     lit from above, independent of what is blurred behind it. */
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0) 50%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03) 40%, rgba(255, 255, 255, 0) 62%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  backdrop-filter: blur(10px) saturate(180%);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.42), /* bright top edge */
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.22),      /* faint bottom shade */
    0 10px 34px rgba(0, 0, 0, 0.32);           /* outer lift */
  /* GPU acceleration to prevent flickering */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ---- Surface variants -------------------------------------------------- */

/* Navbar / sticky bars — sport-tinted edge + heavier lift. */
.rr-glass--bar {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgb(var(--sport-accent) / 0.22);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.28),
    0 10px 40px rgba(0, 0, 0, 0.35);
}

/* Standard cards / containers (the most common surface). */
.rr-glass--card {
  background-color: rgba(255, 255, 255, 0.10);
}

/* Quieter panels / list rows / nested surfaces. */
.rr-glass--panel {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.10);
}

/* Ring compatibility: Tailwind's ring-* utilities use box-shadow, which the
   base .rr-glass box-shadow overrides. When a ring is applied (e.g. member
   picker selection), layer the ring OVER the glass shadow. */
.rr-glass.ring-4,
.rr-glass--panel.ring-4 {
  box-shadow:
    0 0 0 4px var(--tw-ring-color, #facc15),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.22),
    0 10px 34px rgba(0, 0, 0, 0.32);
}

/* Sport-tinted cards — player panels, phase cards on live scoring. The sport
   gradient sits UNDER the specular highlights so both effects combine. Uses
   !important on background-color to override the base .rr-glass value. No outer
   shadow — just the inset highlights — for a cleaner, lighter appearance. */
.rr-glass--sport {
  background-color: rgba(0, 0, 0, 0.35) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 50%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02) 40%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(to bottom right, rgb(var(--sport-gradient-from) / 0.28), rgb(var(--sport-gradient-to) / 0.28));
  border-color: rgb(var(--sport-accent) / 0.30);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.22);
}

/* Modals / dialogs — higher opacity so content is readable over the scrim.
   Sport-tinted: an accent border PLUS a full-surface accent wash (stronger from
   the top edge), so the whole modal carries the active sport's colour. The wash
   is two stacked gradients: a top glow over a flat all-over tint. */
.rr-glass--modal {
  background-color: rgba(19, 21, 25, 0.82); /* --rr-surface @ ~82% */
  background-image:
    linear-gradient(180deg, rgb(var(--sport-accent) / 0.08), rgb(var(--sport-accent) / 0) 240px),
    linear-gradient(0deg, rgb(var(--sport-accent) / 0.05), rgb(var(--sport-accent) / 0.05));
  border-color: rgb(var(--sport-accent) / 0.36);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.18),
    0 24px 70px rgba(0, 0, 0, 0.55);
}

/* Dropdown menus / popovers. SELF-CONTAINED (apply .rr-glass--menu on its own,
   NOT via the glass() helper) so it never inherits the base .rr-glass
   position:relative, which would fight an absolutely-positioned dropdown. Same
   sport-tinted background + border as modals, tuned a touch more opaque so menu
   items stay legible. */
.rr-glass--menu {
  background-color: rgba(17, 19, 23, 0.92);
  background-image: linear-gradient(0deg, rgb(var(--sport-accent) / 0.07), rgb(var(--sport-accent) / 0.07));
  border: 1px solid rgb(var(--sport-accent) / 0.34);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  backdrop-filter: blur(10px) saturate(180%);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.12),
    0 18px 50px rgba(0, 0, 0, 0.5);
  /* GPU acceleration to prevent flickering */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Toasts / flash pills. */
.rr-glass--toast {
  background-color: rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.30),
    0 12px 36px rgba(0, 0, 0, 0.40);
}

/* Modal backdrop / scrim — frosts whatever sits behind the dialog. Not a glass
   "surface", so no border, sheen or lift. */
.rr-glass--scrim {
  background-color: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background-image: none;
  border: 0;
  box-shadow: none;
  /* GPU acceleration to prevent flickering */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ---- Layer 2: refraction (Chromium only) ------------------------------- */
/* Append the SVG displacement filter. Lower the blur so the warp reads. Safari
   ignores the url() (keeps Layer 1); Firefox's @supports returns false here.
   DISABLED: SVG filters in backdrop-filter cause significant flickering in
   Chrome. The base blur + saturate is sufficient for the glass effect. */
/*
@supports (backdrop-filter: url("#rr-glass-distortion")) or
          (-webkit-backdrop-filter: url("#rr-glass-distortion")) {
  .rr-glass {
    -webkit-backdrop-filter: blur(10px) saturate(180%) url("#rr-glass-distortion");
    backdrop-filter: blur(10px) saturate(180%) url("#rr-glass-distortion");
  }
  .rr-glass--modal {
    -webkit-backdrop-filter: blur(16px) saturate(180%) url("#rr-glass-distortion");
    backdrop-filter: blur(16px) saturate(180%) url("#rr-glass-distortion");
  }
}
*/

/* ---- Layer 0: no backdrop-filter (very old browsers) ------------------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .rr-glass,
  .rr-glass--card,
  .rr-glass--panel,
  .rr-glass--bar,
  .rr-glass--toast,
  .rr-glass--menu {
    background-color: rgba(19, 21, 25, 0.92);
    background-image: none;
  }
  .rr-glass--modal { background-color: rgba(19, 21, 25, 0.97); }
  .rr-glass--scrim { background-color: rgba(0, 0, 0, 0.78); }
}

/* ---- Accessibility: respect reduced transparency ---------------------- */
@media (prefers-reduced-transparency: reduce) {
  .rr-glass,
  .rr-glass--card,
  .rr-glass--panel,
  .rr-glass--bar,
  .rr-glass--toast,
  .rr-glass--menu,
  .rr-glass--modal {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-image: none;
    background-color: rgba(19, 21, 25, 0.96);
  }
  .rr-glass--scrim {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: rgba(0, 0, 0, 0.8);
  }
}

/* ---- Accessibility: respect reduced motion ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  .animate-shimmer { animation: none !important; }
}

/* ---- Brand wordmark swap (navbar {Sport}Ref ⇄ RacketRef) -------------- */
/* The brand-wordmark Stimulus controller adds .rr-wordmark-swap when the active
   sport changes; the new wordmark rolls up + fades in, echoing the brand morph. */
@keyframes rrWordmarkSwap {
  from { opacity: 0; transform: translateY(0.32em); }
  to   { opacity: 1; transform: translateY(0); }
}
.rr-wordmark-swap { animation: rrWordmarkSwap 0.34s cubic-bezier(0.2, 0.7, 0.2, 1); }
@media (prefers-reduced-motion: reduce) {
  .rr-wordmark-swap { animation: none; }
}

/* ---- VR view: per-player decision/review buttons --------------------- */
/* In the video-referee view these buttons start hidden, but their space stays
   reserved (visibility, not display) so the score + buttons keep their normal
   column position rather than dropping to the bottom. The live-scoring JS adds
   .vr-decisions-shown only once the video referee is confirmed to hold scoring
   authority, so the buttons are revealed — never shown-then-hidden on load. */
[data-live-scoring-is-video-referee-value="true"] [data-live-scoring-target="vrDecisionButtons"]:not(.vr-decisions-shown) {
  visibility: hidden;
}