/* ============================================================================
   theme-default — reference skin. All component styling lives in the BASE SKIN
   (assets/css/player.css) and keys off these variables, so a theme is just a
   palette + a background + (optionally) a vignette and particle colour.
   To make a new theme: copy this file to theme-<name>.css and change the values.
   ============================================================================ */
:root {
  /* Deep "mosque night" — indigo→navy, emerald accent, warm gold highlight. */
  --sg-bg: radial-gradient(120% 90% at 50% -10%, #1d3b6e 0%, #12244b 42%, #0a1430 72%, #060c1f 100%);
  --sg-fg: #f4f8ff;
  --sg-muted: rgba(233, 240, 255, .88);
  --sg-accent: #2fffc0;
  --sg-gold: #ffc63d;
  --sg-panel: rgba(255, 255, 255, .10);
  --sg-panel-brd: rgba(255, 255, 255, .2);
  --sg-particle: rgba(255, 255, 255, .5);   /* soft white dust */
  --sg-font: "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
  /* Flip-clock cards — pick a pair a step lighter than the background midtones. */
  --sg-flip-top: #2b3a5c;
  --sg-flip-bot: #1d2842;
  --sg-flip-fg: #ffffff;
  /* Overlay layout: floating cells take the theme's deep navy, near-opaque. */
  --sg-overlay-panel: rgba(13, 26, 56, .85);
  /* Drifting light: electric blue against the emerald accent — both hues are
     already in the gradient, so the motion reads as the background breathing
     rather than as a separate animated object. */
  --sg-aurora-a: #1e7fff;
  --sg-aurora-b: #00e5a0;
  --sg-aurora-op: .32;
}

/* Vignette confined to the top/bottom STRIPS where text sits — the old app's
   .shadow-slide did exactly this (opaque at the very edge, clear by 14%). A
   full-screen darkening wash is what made this read dim on a TV in a bright
   hall: it costs peak brightness across the whole panel to solve a legibility
   problem that only exists in two thin bands. */
.sg-root::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(60% 40% at 50% 0%, color-mix(in srgb, var(--sg-accent) 12%, transparent), transparent 70%),
    linear-gradient(to bottom, rgba(0, 0, 0, .5) 0%, transparent 14%, transparent 84%, rgba(0, 0, 0, .55) 100%);
}