/* =====================================================================
 * WebGL ambient layer + integration overrides
 * Loaded AFTER dashboard.css so these rules win the cascade.
 * ===================================================================== */

/* Full-viewport canvas pinned behind the entire dashboard. It never
   receives pointer events, so all existing interactions are untouched. */
#webgl-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  /* fallback tint shown before the GL context paints its first frame */
  background: var(--bg-0);
}

/* Let the living WebGL field show through the gutters between panels.
   The body keeps a solid colour as a graceful fallback if WebGL fails;
   when the canvas is active it simply sits on top of this colour. */
body {
  background: var(--bg-0);
}

/* The app shell rides above the canvas. Panels remain fully opaque, so
   the shader reads as ambient glow around and between the cards rather
   than washing out any content. */
.app {
  position: relative;
  z-index: 1;
}

/* Give the opaque chrome a touch of depth now that it floats over the
   animated field — subtle, theme-neutral, and purely cosmetic. */
.topbar,
.panel,
.hero,
.foot-strip {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset,
              0 10px 30px -18px rgba(0, 0, 0, 0.7);
  backdrop-filter: saturate(1.05);
}

:root[data-theme="light"] .topbar,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .hero,
:root[data-theme="light"] .foot-strip {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
              0 10px 30px -20px rgba(20, 40, 60, 0.35);
}

/* Floating overlays (tweaks panel, sound prompt) must stay above the app. */
.sound-prompt { z-index: 1200; }

/* Honour reduced-motion: the JS already renders a single static frame,
   this just guarantees no residual CSS animation churns underneath. */
@media (prefers-reduced-motion: reduce) {
  #webgl-bg { will-change: auto; }
}

/* =====================================================================
 * GLASS MODE — translucent panels so the condition-coloured WebGL field
 * reads through the chrome. Toggled from the Tweaks panel (body.glass);
 * --glass-alpha (0..1) is driven live by the opacity slider.
 *
 * Rather than restyle every surface, we re-point the surface design
 * tokens at translucent colours. Everything that paints with var(--panel),
 * var(--bg-1) &c. inherits the transparency automatically, and a frosted
 * backdrop-filter on the outer cards keeps text legible over the motion.
 * ===================================================================== */
body.glass {
  --glass-alpha: 0.62;

  --panel:   rgba(14, 18, 19, var(--glass-alpha));
  --panel-2: rgba(19, 24, 25, var(--glass-alpha));
  --panel-3: rgba(26, 32, 34, var(--glass-alpha));
  --bg-1:    rgba(12, 15, 16, calc(var(--glass-alpha) * 0.82));
  --bg-2:    rgba(15, 19, 20, calc(var(--glass-alpha) * 0.82));
}

:root[data-theme="light"] body.glass {
  --panel:   rgba(255, 255, 255, var(--glass-alpha));
  --panel-2: rgba(245, 248, 250, var(--glass-alpha));
  --panel-3: rgba(233, 238, 241, var(--glass-alpha));
  --bg-1:    rgba(255, 255, 255, calc(var(--glass-alpha) * 0.82));
  --bg-2:    rgba(244, 247, 249, calc(var(--glass-alpha) * 0.82));
}

/* Frost the large surfaces so the field is felt but text stays sharp. */
body.glass .topbar,
body.glass .panel,
body.glass .hero,
body.glass .foot-strip {
  backdrop-filter: blur(9px) saturate(1.15);
  -webkit-backdrop-filter: blur(9px) saturate(1.15);
}

/* The floating Tweaks panel stays comfortably readable while you adjust. */
body.glass .tweaks-panel,
body.glass .twk-panel,
body.glass [class*="tweak"][class*="panel"] {
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}