/*
==========================================
DATEI: external-player/css/base.css
ERSTELLT: 2026-04-20
GEÄNDERT: 2026-04-21
ZWECK: Basisfarben, Reset und globales Cockpit-Fundament des externen Players.
ÄNDERUNG: FULLPACK v10 PLAY-STATE FIX. Background bleibt jetzt statisch und unabhängig vom Audiozustand; keine visuellen Play-/Live-State-Swaps mehr.
==========================================
*/
:root {
  --bg-1: #05060c;
  --bg-2: #0b0f18;
  --panel: rgba(8, 10, 20, 0.92);
  --panel-2: rgba(4, 6, 12, 0.96);
  --border: rgba(255, 255, 255, 0.09);
  --text: #ecf8ff;
  --muted: #93a7bc;
  --pink: #ff3eb5;
  --cyan: #00f5df;
  --purple: #b84dff;
  --danger: #ff5f83;
  --ok: #f5fbff;
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --desktop-frame: url("../assets/images/frame-v7-clean-desktop.jpeg");
  --mobile-frame: url("../assets/images/frame-v7-clean-mobile.jpeg");
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}
body {
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  background: #02030a;
}
button, input { font: inherit; }
.hidden { display: none !important; }
.desktop-only { display: block; }

.frame-stage {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
  background-color: #02030a;
  background-image:
    radial-gradient(circle at 50% 70%, rgba(2,3,10,0.00), rgba(2,3,10,0.18) 42%, rgba(2,3,10,0.32) 100%),
    var(--desktop-frame);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
}
.frame-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.04) 35%, rgba(0,0,0,0.16) 100%);
  pointer-events: none;
}
.panel-glass {
  background: transparent;
  border: none;
  backdrop-filter: none;
}


html[data-visual-mode="static-frame"],
body[data-visual-mode="static-frame"],
.frame-stage[data-visual-mode="static-frame"],
.player-shell[data-visual-mode="static-frame"] {
  background-blend-mode: normal;
}

.frame-stage,
.player-shell,
.frame-overlay {
  will-change: auto !important;
}


.mobile-only { display: none; }


/*
==========================================
GEÄNDERT: 2026-04-21
ÄNDERUNG: FULLPACK v17 MOBILE CLICKABILITY FIX.
ZWECK: Deko-/Overlay-Layer dürfen auf Mobile keine Touch-Events mehr fangen.
        Interaktive Player-Zonen werden bewusst nach vorne geholt.
==========================================
*/
.frame-stage::before,
.frame-stage::after,
.frame-overlay,
.side-meter,
.side-meter *,
.visualizer::before,
.visualizer::after,
.eq-bars,
.eq-bar-slot,
.eq-bar-fill {
  pointer-events: none !important;
}

.player-shell,
.player-shell *,
.top-hud,
.top-hud *,
.hero,
.hero *,
.now-playing,
.now-playing *,
.info-grid,
.info-grid *,
.bottom-console,
.bottom-console *,
.control-toolbar,
.control-toolbar *,
.mobile-boost,
.mobile-boost *,
.icon-btn,
.source-chip,
.ghost-btn,
button,
input,
a {
  pointer-events: auto;
}


/*
==========================================
GEÄNDERT: 2026-04-21
ÄNDERUNG: FULLPACK v18 HARD TOUCH FIX.
ZWECK: Mobile Touch-Zonen hart freistellen. Deko- und Visual-Layer
        dürfen keine Touch-Events mehr fangen. Interaktive Elemente
        bleiben vorne und klickbar.
==========================================
*/
* {
  -webkit-tap-highlight-color: transparent;
}

button, a, input {
  pointer-events: auto !important;
  position: relative;
  z-index: 9999 !important;
  touch-action: manipulation;
}

.frame-overlay,
.side-meter,
.side-meter *,
.visualizer,
.visualizer *,
.eq,
.eq *,
.eq-bars,
.eq-bar-slot,
.eq-bar-fill {
  pointer-events: none !important;
}


/*
==========================================
ÄNDERUNG: FULLPACK v34.4 CONTROL UNLOCK.
ZWECK: Auch bei hängendem Stream/Metadata darf kein Layer die Buttons blockieren.
==========================================
*/
.frame-overlay,
.side-meter,
.side-meter *,
.visualizer,
.visualizer *,
.eq-bars,
.eq-bar-slot,
.eq-bar-fill {
  pointer-events: none !important;
}
.player-shell,
.player-shell *,
.bottom-console,
.bottom-console *,
.control-toolbar,
.control-toolbar *,
.mobile-boost,
.mobile-boost *,
button,
input {
  pointer-events: auto !important;
}
.control-toolbar,
.mobile-boost,
.volume-wrap,
.timeline-wrap,
.icon-btn,
.source-chip,
.boost-step,
.boost-chip,
.ghost-btn {
  position: relative;
  z-index: 99999 !important;
}