/* ============================================================
   TOUGE BATTLE — EFFECTS: radii, borders, glow & shadows
   The HUD's signature look:
   • Rounded translucent panels (corner radius 12) over the game world
   • A soft outer NEON GLOW the color of the panel's theme
     (ui.glowRectFilled with ~0.25 alpha, blur 20)
   • A thin 1px theme-colored border at ~0.5 alpha
   • A faint white top highlight line just inside the top edge
   • backdrop blur so the 3D scene reads as frosted behind it
   ============================================================ */

:root {
  /* ---- Corner radii (from the Lua draw calls) ---- */
  --radius-frame: 4px;   /* inputs, small chips */
  --radius-group: 6px;   /* config groups, mode cards */
  --radius-panel: 8px;   /* secondary panels */
  --radius-window: 12px; /* primary HUD windows */
  --radius-pill: 999px;  /* rank pills, tags */

  /* ---- Borders ---- */
  --border-hairline: 1px solid var(--line-dark);
  --border-soft: 1px solid var(--line-soft);
  /* Theme-tinted panel border (swap the cyan for any role color). */
  --border-accent: 1px solid var(--accent-dim);

  /* ---- Backdrop blur (frosted-over-the-game effect) ---- */
  --blur-panel: blur(14px) saturate(1.1);

  /* ---- Neon glow shadows (outer bloom around panels & elements) ---- */
  /* Generic panel glow — pair with --border-accent of the same hue. */
  --glow-cyan:   0 0 24px rgba(0, 204, 255, 0.28),  0 8px 32px rgba(0, 0, 0, 0.55);
  --glow-red:    0 0 24px rgba(255, 51, 64, 0.28),  0 8px 32px rgba(0, 0, 0, 0.55);
  --glow-green:  0 0 24px rgba(26, 229, 102, 0.28), 0 8px 32px rgba(0, 0, 0, 0.55);
  --glow-gold:   0 0 24px rgba(230, 204, 26, 0.30), 0 8px 32px rgba(0, 0, 0, 0.55);
  --glow-purple: 0 0 24px rgba(204, 51, 255, 0.28), 0 8px 32px rgba(0, 0, 0, 0.55);

  /* Tight text/element glow (for crowns, "(YOU)" tags, focused values). */
  --glow-text-gold: 0 0 10px rgba(255, 217, 0, 0.55);
  --glow-text-cyan: 0 0 10px rgba(0, 204, 255, 0.55);

  /* Plain drop shadow for opaque cards on light DS specimen surfaces. */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.35);

  /* ---- Motion ---- */
  /* HUD reactions are quick and snappy — short ease-outs, subtle pulses. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --hover-lift: brightness(1.18); /* hover = brighter, not darker (neon-on-black) */
  --press-dim: brightness(0.9);
}

/* The canonical HUD panel surface — reuse on any floating window. */
.touge-panel {
  background: var(--surface-base);
  border: var(--border-accent);
  border-radius: var(--radius-window);
  box-shadow: var(--glow-cyan);
  backdrop-filter: var(--blur-panel);
  -webkit-backdrop-filter: var(--blur-panel);
  position: relative;
}
/* Faint top highlight line, as drawn 1px below the panel's top edge. */
.touge-panel::before {
  content: "";
  position: absolute;
  left: 15px; right: 15px; top: 1px;
  height: 1px;
  background: var(--highlight-top);
  border-radius: 2px;
  pointer-events: none;
}

@keyframes touge-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}