/*
 * WaveStream HUD — Full Redesign
 * Based on: this.jpg  (Sci-Fi HUD Interface)
 */

/* ═══ HARD RESET — Kill all app.css conflicts inside stream mode ═══════ */
#bw-stream-mode,
#bw-stream-mode * {
  box-sizing: border-box !important;
  font-family: 'JetBrains Mono', 'Overpass Mono', monospace !important;
}
/* Kill old bw-stream-layout grid */
#bw-stream-mode .bw-stream-layout { display: none !important; }
/* Kill old sidebar/main/chat positioning from app.css */
#bw-stream-mode #stream-sidebar { width: auto !important; border: none !important; }
#bw-stream-mode #stream-main { position: relative !important; }
#bw-stream-mode #stream-chat-overlay { position: relative !important; transform: none !important; }

:root {
  --h-bg:     #03111e;
  --h-panel:  #051525;
  --h-raised: #071c30;
  --h-cyan:   #00d4ff;
  --h-cyan2:  #00f5ff;
  --h-cg:     rgba(0,212,255,0.3);
  --h-cs:     rgba(0,212,255,0.07);
  --h-red:    #ff2a5e;
  --h-pink:   #e04070;
  --h-purple: #6C63FF;
  --h-orange: #ff9500;
  --h-text:   #7ecfef;
  --h-dim:    #2a5a78;
  --h-hi:     #c8eeff;
  --h-line:   rgba(0,212,255,0.18);
}

/* ═══ ROOT ═══════════════════════════════════════════════════════ */
/* Versteckt bis .visible gesetzt wird */
#bw-stream-mode {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 50 !important;
  background: var(--h-bg) !important;
  font-family: 'JetBrains Mono','Overpass Mono',monospace !important;
  color: var(--h-text) !important;
  overflow: hidden !important;
  flex-direction: column !important;
}
#bw-stream-mode.visible {
  display: flex !important;
}

/* Teal Dot-Grid Background */
#bw-stream-mode::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(rgba(0,180,220,0.1) 1px, transparent 1px),
    linear-gradient(rgba(0,60,120,0.15) 0%, transparent 100%);
  background-size: 28px 28px, 100% 100%;
}
#bw-stream-mode > * { position: relative; z-index: 1; }

/* ═══ MISSION BAR (Top) ══════════════════════════════════════════ */
.hud-mission-bar {
  height: 32px;
  background: rgba(5,21,37,0.95);
  border-bottom: 1px solid var(--h-line);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 0;
  flex-shrink: 0;
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hud-mb-left  { display:flex; align-items:center; gap:8px; min-width:0; flex:1; }
.hud-mb-center { flex:1; text-align:center; }
.hud-mb-right  { display:flex; align-items:center; gap:8px; flex:1; justify-content:flex-end; }
.hud-mb-pipe   { color:var(--h-line); }
.hud-mb-title  { color:var(--h-hi); font-size:.62rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }
.hud-mb-id     { color:var(--h-dim); font-size:.58rem; letter-spacing:.14em; }
.hud-mb-stat   { color:var(--h-text); font-size:.58rem; }

/* REC Indicator in Mission Bar */
.hud-rec-indicator {
  display: flex; align-items: center; gap: 4px;
  color: var(--h-red); font-weight: 700; letter-spacing: .14em; font-size: .58rem;
}
.hud-rec-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--h-red);
  box-shadow: 0 0 6px rgba(255,42,94,0.8);
  animation: hrec 1.2s ease-in-out infinite;
}
@keyframes hrec { 0%,100%{opacity:1;box-shadow:0 0 6px rgba(255,42,94,0.8)} 50%{opacity:.25;box-shadow:none} }

.hud-delay-badge { display:none; color:var(--h-orange); font-size:.58rem; letter-spacing:.1em; }
.hud-delay-badge.visible { display:block; }

.hud-back-btn {
  background: rgba(0,212,255,0.08); border: 1px solid var(--h-line);
  color: var(--h-dim); font-family: 'JetBrains Mono',monospace;
  font-size: .56rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 8px; cursor: pointer; display: flex; align-items: center; gap: 4px;
  clip-path: polygon(4px 0%,100% 0%,100% calc(100% - 4px),calc(100% - 4px) 100%,0% 100%,0% 4px);
  transition: color .15s, border-color .15s;
}
.hud-back-btn:hover { color: var(--h-cyan); border-color: var(--h-cyan); }

/* ═══ MAIN GRID ══════════════════════════════════════════════════ */
.hud-main-grid {
  display: grid;
  grid-template-columns: 180px 1fr 260px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ═══ LEFT PANEL ═════════════════════════════════════════════════ */
.hud-left-panel {
  background: var(--h-panel);
  border-right: 1px solid var(--h-line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Circular Gauge */
.hud-gauge-panel {
  padding: 10px 10px 4px;
  border-bottom: 1px solid var(--h-line);
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}
.hud-gauge-clip {
  width: 90px; height: 90px;
  position: relative;
  clip-path: polygon(8px 0%,calc(100% - 8px) 0%,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0% calc(100% - 8px),0% 8px);
  background: rgba(0,15,30,0.7);
  border: 1px solid var(--h-line);
}
.hud-gauge-svg { width: 90px; height: 90px; display: block; }
@keyframes gauge-sweep { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* DATA Rows (DATA 01–04 aus dem Bild) */
.hud-data-rows { padding: 8px 10px 4px; border-bottom: 1px solid var(--h-line); flex-shrink: 0; }
.hud-data-row {
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 5px;
}
.hud-dlbl {
  font-size: .52rem; letter-spacing: .1em; color: var(--h-dim);
  text-transform: uppercase; width: 44px; flex-shrink: 0;
}
.hud-dbar {
  flex: 1; height: 3px; background: rgba(0,212,255,0.1); position: relative; overflow: hidden;
}
.hud-dfill {
  height: 100%; background: linear-gradient(to right, var(--h-cyan), var(--h-cyan2));
  transition: width .8s ease;
}
.hud-dfill-red {
  background: linear-gradient(to right, var(--h-red), #ff6080);
}
.hud-dval {
  font-size: .5rem; color: var(--h-text); letter-spacing: .06em;
  width: 28px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums;
}

/* Feed Divider */
.hud-feed-divider {
  padding: 5px 10px 3px;
  display: flex; align-items: center; gap: 6px;
}
.hud-feed-divider::before { content:''; flex:1; height:1px; background:var(--h-line); }
.hud-feed-divider::after  { content:''; flex:1; height:1px; background:var(--h-line); }
.hud-feed-divider-txt {
  font-size: .52rem; letter-spacing: .14em; color: var(--h-dim); white-space: nowrap;
}

/* Feed Tabs */
.hud-feed-tabs {
  display: flex; border-bottom: 1px solid var(--h-line); flex-shrink: 0;
}
.hud-feed-tab {
  flex: 1; text-align: center; padding: 5px 0;
  font-size: .54rem; letter-spacing: .12em; color: var(--h-dim);
  cursor: pointer; text-transform: uppercase; transition: color .15s, background .15s;
  border-right: 1px solid var(--h-line);
}
.hud-feed-tab:last-child { border-right: none; }
.hud-feed-tab.active { color: var(--h-cyan); background: var(--h-cs); }
.hud-feed-tab:hover:not(.active) { color: var(--h-text); }

/* Feed Lists */
.hud-feed-list {
  list-style: none; overflow-y: auto; flex: 1; display: none; min-height: 0;
}
.hud-feed-list.active { display: block; }
.hud-feed-empty { padding: 10px; font-size: .58rem; color: var(--h-dim); letter-spacing: .1em; text-transform: uppercase; }

/* Stream items in list */
.bw-stream-sidebar-item {
  display: flex !important; align-items: center !important; gap: 7px !important;
  padding: 6px 9px !important; border-radius: 0 !important;
  border-bottom: 1px solid rgba(0,212,255,0.06) !important;
  background: transparent !important; cursor: pointer !important;
  transition: background .15s !important; position: relative !important;
}
.bw-stream-sidebar-item::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--h-cyan); transform:scaleY(0); transition:transform .2s;
}
.bw-stream-sidebar-item:hover { background: var(--h-cs) !important; }
.bw-stream-sidebar-item:hover::before { transform: scaleY(1); }
.bw-stream-sidebar-item.active { background: rgba(0,212,255,.08) !important; }
.bw-ssi-avatar {
  width: 28px !important; height: 28px !important;
  border-radius: 2px !important; border: 1px solid var(--h-line) !important;
  clip-path: polygon(3px 0%,calc(100% - 3px) 0%,100% 3px,100% calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,0% calc(100% - 3px),0% 3px) !important;
  flex-shrink: 0 !important;
}
.bw-ssi-info { flex:1; min-width:0; }
.bw-ssi-name { font-size:.66rem !important; color:var(--h-hi) !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.bw-ssi-meta { font-size:.54rem !important; color:var(--h-dim) !important; display:flex; gap:4px; }
.bw-ssi-viewers { font-size:.54rem !important; color:var(--h-cyan) !important; flex-shrink:0; }
.bw-ssi-live-badge {
  background:var(--h-red) !important; border-radius:1px !important;
  font-size:.42rem !important; letter-spacing:.1em !important;
}

/* Level bars in items */
.hud-lvl-bars { display:flex; align-items:flex-end; gap:2px; height:12px; flex-shrink:0; }
.hud-lvl-bar { width:2px; background:linear-gradient(to top,var(--h-cyan),var(--h-cyan2)); min-height:2px; border-radius:1px; animation:hbar .7s ease-in-out infinite alternate; }
.hud-lvl-bar:nth-child(1){animation-duration:.65s}
.hud-lvl-bar:nth-child(2){animation-duration:.8s;animation-delay:.1s}
.hud-lvl-bar:nth-child(3){animation-duration:.55s;animation-delay:.05s}
.hud-lvl-bar:nth-child(4){animation-duration:.9s;animation-delay:.15s}
.hud-lvl-bar:nth-child(5){animation-duration:.7s;animation-delay:.08s}
@keyframes hbar { from{height:2px;opacity:.4} to{height:11px;opacity:1} }

/* Game chips */
.bw-game-chips { display:flex; flex-wrap:wrap; gap:4px; padding:5px 8px; }
.bw-game-chip {
  border-radius:1px !important; background:var(--h-raised) !important;
  border:1px solid var(--h-line) !important; color:var(--h-dim) !important;
  font-family:'JetBrains Mono',monospace !important; font-size:.52rem !important;
  letter-spacing:.08em !important; text-transform:uppercase !important; padding:2px 6px !important;
}
.bw-game-chip.active { background:var(--h-cs) !important; border-color:var(--h-cyan) !important; color:var(--h-cyan) !important; }

/* Mod toggle */
#stream-mod-toggle {
  margin: 4px 8px;
  background: rgba(255,42,94,0.1) !important; border: 1px solid rgba(255,42,94,0.3) !important;
  border-radius:1px !important; color:rgba(255,42,94,0.7) !important;
  font-family:'JetBrains Mono',monospace !important; font-size:.54rem !important;
  letter-spacing:.1em !important; text-transform:uppercase !important;
  padding:4px 8px !important; cursor:pointer !important;
}
#stream-mod-toggle:hover { color:var(--h-red) !important; border-color:var(--h-red) !important; }

/* ═══ CENTER VIDEO COLUMN ═══════════════════════════════════════ */
.hud-video-col {
  display: flex;
  flex-direction: column;
  background: var(--h-bg);
  overflow: hidden;
  position: relative;
}

/* Player Wrap */
.bw-stream-player-wrap {
  flex: 1 !important;
  background: #010c14 !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 0 !important;
}

/* Scan Lines */
.hud-scanlines-overlay {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,200,255,0.012) 2px, rgba(0,200,255,0.012) 4px);
}

/* ── 4 CORNER BRACKETS (thick, glowing — wie im Bild) ── */
.hud-player-frame { position:absolute; inset:0; pointer-events:none; z-index:5; }
.hud-player-frame::before {
  content:''; position:absolute; top:14px; left:14px; width:30px; height:30px;
  border-top:2.5px solid var(--h-cyan); border-left:2.5px solid var(--h-cyan);
  box-shadow:-2px -2px 12px var(--h-cg), 0 0 6px rgba(0,212,255,0.2);
}
.hud-player-frame::after {
  content:''; position:absolute; bottom:14px; right:14px; width:30px; height:30px;
  border-bottom:2.5px solid var(--h-cyan); border-right:2.5px solid var(--h-cyan);
  box-shadow:2px 2px 12px var(--h-cg), 0 0 6px rgba(0,212,255,0.2);
}
.hud-player-frame > span { position:absolute; inset:0; }
.hud-player-frame > span::before {
  content:''; position:absolute; top:14px; right:14px; width:30px; height:30px;
  border-top:2.5px solid var(--h-cyan); border-right:2.5px solid var(--h-cyan);
  box-shadow:2px -2px 12px var(--h-cg);
}
.hud-player-frame > span::after {
  content:''; position:absolute; bottom:14px; left:14px; width:30px; height:30px;
  border-bottom:2.5px solid var(--h-cyan); border-left:2.5px solid var(--h-cyan);
  box-shadow:-2px 2px 12px var(--h-cg);
}

/* No Signal */
.bw-stream-empty {
  position:absolute !important; inset:0 !important; background:#010c14 !important;
  display:flex !important; flex-direction:column !important; align-items:center !important;
  justify-content:center !important; gap:0 !important; z-index:2;
}
.hud-crosshair { position:relative; width:70px; height:70px; margin-bottom:12px; animation:hcross 2.5s ease-in-out infinite; }
@keyframes hcross { 0%,100%{opacity:.45} 50%{opacity:1} }
.hud-crosshair::before {
  content:''; position:absolute; top:50%; left:0; right:0; height:1px;
  background:linear-gradient(to right, transparent 0%,var(--h-cyan) 26%,var(--h-cyan) 40%,transparent 40%,transparent 60%,var(--h-cyan) 60%,var(--h-cyan) 74%,transparent 100%);
  box-shadow:0 0 6px rgba(0,212,255,0.4);
}
.hud-crosshair::after {
  content:''; position:absolute; left:50%; top:0; bottom:0; width:1px;
  background:linear-gradient(to bottom, transparent 0%,var(--h-cyan) 26%,var(--h-cyan) 40%,transparent 40%,transparent 60%,var(--h-cyan) 60%,var(--h-cyan) 74%,transparent 100%);
  box-shadow:0 0 6px rgba(0,212,255,0.4);
}
.hud-crosshair-dot {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:5px; height:5px; border-radius:50%; background:var(--h-cyan); box-shadow:0 0 10px var(--h-cyan);
  animation:hdot 2s ease-in-out infinite;
}
.hud-crosshair-ring {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:20px; height:20px; border-radius:50%; border:1px solid rgba(0,212,255,.3);
  animation:hdot 2s ease-in-out infinite reverse;
}
@keyframes hdot { 0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.2)} }
.hud-no-signal { font-size:.58rem; letter-spacing:.28em; text-transform:uppercase; color:var(--h-dim); margin-top:5px; }
.hud-no-signal-sub { font-size:.48rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(0,212,255,.13); margin-top:3px; }

/* Video */
#stream-player-video { position:relative; z-index:1; }

/* Buttons */
.bw-theater-btn,.hud-maximize-btn {
  position:absolute !important; top:12px !important;
  background:rgba(3,17,30,0.88) !important; border:1px solid var(--h-line) !important;
  border-radius:0 !important; color:var(--h-dim) !important;
  font-family:'JetBrains Mono',monospace !important; font-size:.54rem !important;
  letter-spacing:.12em !important; padding:4px 8px !important; cursor:pointer !important;
  opacity:0 !important; transition:opacity .2s, color .15s, border-color .15s !important;
  z-index:10 !important;
  clip-path:polygon(4px 0%,100% 0%,100% calc(100% - 4px),calc(100% - 4px) 100%,0% 100%,0% 4px) !important;
}
.bw-theater-btn{right:10px !important}
.hud-maximize-btn{right:92px !important}
.hud-video-col:hover .bw-theater-btn,
.hud-video-col:hover .hud-maximize-btn { opacity:1 !important; }
.bw-theater-btn:hover,.hud-maximize-btn:hover { color:var(--h-cyan) !important; border-color:var(--h-cyan) !important; box-shadow:0 0 8px var(--h-cg) !important; }

.hud-theater-bar {
  display:none; position:absolute; bottom:56px; left:50%; transform:translateX(-50%);
  z-index:20; background:rgba(3,17,30,0.94); border:1px solid var(--h-line);
  padding:4px 10px; gap:6px; align-items:center; opacity:0; transition:opacity .2s;
  font-family:'JetBrains Mono',monospace; font-size:.54rem; letter-spacing:.12em;
  clip-path:polygon(5px 0%,calc(100% - 5px) 0%,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0% calc(100% - 5px),0% 5px);
}
.hud-video-col:hover .hud-theater-bar { opacity:1; }
.theater-active .hud-theater-bar,.theater-with-chat-active .hud-theater-bar { display:flex; }
.hud-theater-bar button { background:none; border:none; color:var(--h-dim); cursor:pointer; font-family:inherit; font-size:inherit; letter-spacing:inherit; padding:2px 7px; transition:color .15s,background .15s; }
.hud-theater-bar button:hover { color:var(--h-cyan); background:var(--h-cs); }
.hud-theater-bar .hud-sep { color:var(--h-line); }

/* ── CENTER SECTION (bars + label) ── */
.hud-center-section {
  height: 110px;
  background: var(--h-raised);
  border-top: 1px solid var(--h-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 4px 10px 8px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.hud-center-label-row {
  display: flex; align-items: center; gap: 6px; width: 100%; margin-bottom: 4px;
}
.hud-cl-line { flex:1; height:1px; background:var(--h-dim); }
.hud-cl-txt { font-size:.54rem; letter-spacing:.28em; text-transform:uppercase; color:var(--h-dim); }

.hud-two-dots { display:flex; gap:5px; margin-bottom:6px; }
.hud-dot-red {
  width:8px; height:8px; border-radius:50%;
  background:var(--h-red); box-shadow:0 0 6px rgba(255,42,94,0.6);
  animation:hrec 1.5s ease-in-out infinite;
}

/* THE BARS — Exakt wie im Bild */
.hud-bars-container {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 70px;
}
.hud-cbar {
  width: 14px;
  border-radius: 1px 1px 0 0;
  animation: hcbar .9s ease-in-out infinite alternate;
}
.hud-cbar-pink {
  background: linear-gradient(to top, var(--h-pink), #ff7090);
}
.hud-cbar-cyan {
  background: linear-gradient(to top, var(--h-cyan), var(--h-cyan2));
}
.hud-cbar:nth-child(1){animation-duration:.70s; animation-delay:0s}
.hud-cbar:nth-child(2){animation-duration:.90s; animation-delay:.1s}
.hud-cbar:nth-child(3){animation-duration:.60s; animation-delay:.2s}
.hud-cbar:nth-child(4){animation-duration:.80s; animation-delay:.05s}
.hud-cbar:nth-child(5){animation-duration:.75s; animation-delay:.15s}
@keyframes hcbar { from{height:8px;opacity:.55} to{height:65px;opacity:1} }

/* ── PLAYBACK BAR ── */
.hud-playback-bar {
  height: 34px;
  background: rgba(5,21,37,0.98);
  border-top: 1px solid var(--h-line);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  flex-shrink: 0;
  font-size: .58rem;
  letter-spacing: .08em;
}
.hud-pb-rec {
  color: var(--h-red); font-size: .56rem; letter-spacing: .12em; flex-shrink:0;
  display: flex; align-items: center; gap: 3px;
}
.hud-pb-rec::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--h-red); box-shadow:0 0 5px rgba(255,42,94,.7);
  animation:hrec 1.2s ease-in-out infinite;
}
.hud-pb-progress {
  flex:1; height:2px; background:rgba(0,212,255,0.15); position:relative; cursor:pointer;
}
.hud-pb-fill { height:100%; background:linear-gradient(to right,var(--h-cyan),var(--h-cyan2)); box-shadow:0 0 4px var(--h-cg); width:0%; transition:width .5s; }
.hud-pb-controls { display:flex; gap:3px; flex-shrink:0; }
.hud-pb-btn { background:none; border:none; color:var(--h-dim); cursor:pointer; font-size:.7rem; padding:1px 3px; transition:color .15s; }
.hud-pb-btn:hover { color:var(--h-cyan); }
.hud-pb-rec-btn { color:var(--h-red) !important; }
.hud-pb-time { color:var(--h-dim); font-size:.56rem; letter-spacing:.1em; flex-shrink:0; font-variant-numeric:tabular-nums; }
.hud-pb-game { color:var(--h-text); font-size:.54rem; letter-spacing:.1em; }
.hud-pb-viewers { display:flex; align-items:center; gap:4px; flex-shrink:0; }

/* Viewer bars in playback */
.hud-viewer-bars { display:flex; align-items:flex-end; gap:2px; height:14px; }
.hud-viewer-bar { width:3px; background:linear-gradient(to top,var(--h-cyan),var(--h-cyan2)); border-radius:1px; min-height:2px; animation:hbar .8s ease-in-out infinite alternate; }
.hud-viewer-bar:nth-child(1){animation-duration:.6s}
.hud-viewer-bar:nth-child(2){animation-duration:.8s;animation-delay:.1s}
.hud-viewer-bar:nth-child(3){animation-duration:.55s;animation-delay:.05s}
.hud-viewer-bar:nth-child(4){animation-duration:.9s;animation-delay:.15s}
.hud-viewer-bar:nth-child(5){animation-duration:.7s;animation-delay:.08s}

/* Theater Modes */
#bw-stream-mode.theater-maximized { z-index:999 !important; }
#bw-stream-mode.theater-maximized .hud-main-grid { grid-template-columns:0 1fr 0 !important; }
#bw-stream-mode.theater-maximized .hud-left-panel,
#bw-stream-mode.theater-maximized .hud-right-col { display:none !important; }
#bw-stream-mode.theater-with-chat .hud-main-grid { grid-template-columns:0 1fr 260px !important; }
#bw-stream-mode.theater-with-chat .hud-left-panel { display:none !important; }

/* Mod Panel */
#stream-mod-panel {
  background:var(--h-panel) !important; border:1px solid var(--h-line) !important;
  border-radius:0 !important;
  clip-path:polygon(8px 0%,100% 0%,100% calc(100% - 8px),calc(100% - 8px) 100%,0% 100%,0% 8px) !important;
  box-shadow:0 0 20px rgba(0,0,0,.7),0 0 10px var(--h-cg) !important;
}
.bw-mod-panel-header { background:var(--h-raised) !important; color:var(--h-dim) !important; font-family:'JetBrains Mono',monospace !important; letter-spacing:.14em !important; font-size:.56rem !important; text-transform:uppercase !important; border-bottom:1px solid var(--h-line) !important; }
.bw-mod-viewer-item { border-bottom:1px solid rgba(0,212,255,0.06) !important; font-family:'JetBrains Mono',monospace !important; }
.bw-mod-viewer-name { color:var(--h-hi) !important; font-size:.64rem !important; }
.bw-mod-viewer-ip { color:var(--h-dim) !important; }
.bw-mod-btn { border-radius:0 !important; font-family:'JetBrains Mono',monospace !important; font-size:.54rem !important; letter-spacing:.1em !important; text-transform:uppercase !important; }
.bw-mod-btn.kick { background:rgba(255,149,0,.12) !important; color:var(--h-orange) !important; }
.bw-mod-btn.ban  { background:rgba(255,42,94,.12) !important; color:var(--h-red) !important; }
.bw-mod-btn.mod  { background:var(--h-cs) !important; color:var(--h-cyan) !important; }

/* ═══ RIGHT COLUMN: RADAR + COMM ══════════════════════════════ */
.hud-right-col {
  background: var(--h-panel);
  border-left: 1px solid var(--h-line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hud-right-col.transparent { background:rgba(3,17,30,0.5) !important; backdrop-filter:blur(8px) !important; }

/* Radar Panel */
.hud-radar-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 10px 6px;
  border-bottom: 1px solid var(--h-line);
  flex-shrink: 0;
  background: rgba(0,10,20,0.5);
}
.hud-radar-frame {
  position: relative;
  width: 130px; height: 130px;
}
.hud-radar-svg { width:130px; height:130px; display:block; }
@keyframes radar-spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* Corner brackets on radar */
.hud-radar-corners { position:absolute; inset:0; pointer-events:none; }
.hud-rc { position:absolute; width:12px; height:12px; }
.hud-rc-tl { top:0; left:0; border-top:1.5px solid var(--h-cyan); border-left:1.5px solid var(--h-cyan); }
.hud-rc-tr { top:0; right:0; border-top:1.5px solid var(--h-cyan); border-right:1.5px solid var(--h-cyan); }
.hud-rc-bl { bottom:0; left:0; border-bottom:1.5px solid var(--h-cyan); border-left:1.5px solid var(--h-cyan); }
.hud-rc-br { bottom:0; right:0; border-bottom:1.5px solid var(--h-cyan); border-right:1.5px solid var(--h-cyan); }

.hud-radar-label {
  font-size:.52rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--h-dim); margin-top:5px;
}
.hud-radar-status { display:flex; gap:6px; margin-top:4px; }
.hud-rs-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--h-dim); transition:background .3s;
}
.hud-rs-dot.active {
  background:var(--h-cyan); box-shadow:0 0 5px var(--h-cg);
  animation:hrec 1.5s ease-in-out infinite;
}

/* COMM Header */
.hud-comm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 10px;
  background: var(--h-raised);
  border-bottom: 1px solid var(--h-line);
  font-size: .54rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--h-dim); flex-shrink: 0;
}
.hud-comm-label::before { content:'// '; color:var(--h-cyan); opacity:.7; }
.hud-comm-controls { display:flex; align-items:center; gap:5px; }
.bw-opacity-slider { background:rgba(0,212,255,.15) !important; height:2px !important; width:50px; }
.bw-opacity-slider::-webkit-slider-thumb { background:var(--h-cyan) !important; width:9px !important; height:9px !important; }

/* Chat Messages */
.bw-chat-overlay-msgs { background:transparent !important; padding:5px 9px !important; flex:1; overflow-y:auto; }
.bw-chat-overlay-msg {
  font-family:'JetBrains Mono',monospace !important; font-size:.68rem !important;
  line-height:1.55 !important; color:var(--h-text) !important;
  padding:2px 0 !important; border-bottom:1px solid rgba(0,212,255,0.04) !important;
  border-radius:0 !important;
}
.bw-chat-overlay-msg .bw-msg-name { font-weight:400 !important; margin-right:0 !important; }
.bw-chat-overlay-msg .bw-msg-name::after { content:' >'; color:var(--h-dim); margin:0 4px; }
.bw-chat-overlay-msg .bw-msg-name.host   { color:var(--h-cyan) !important; }
.bw-chat-overlay-msg .bw-msg-name.mod    { color:var(--h-orange) !important; }
.bw-chat-overlay-msg .bw-msg-name.friend { color:var(--h-purple) !important; }
.bw-chat-overlay-msg.system { color:rgba(0,212,255,.3) !important; font-size:.6rem !important; font-style:italic; }

/* Chat Input */
.bw-chat-overlay-input { background:var(--h-raised) !important; border-top:1px solid var(--h-line) !important; padding:6px 8px !important; flex-shrink:0; }
.bw-chat-overlay-input input {
  background:var(--h-panel) !important; border:1px solid var(--h-line) !important; border-radius:0 !important;
  color:var(--h-hi) !important; font-family:'JetBrains Mono',monospace !important;
  font-size:.68rem !important; padding:5px 9px !important; caret-color:var(--h-cyan) !important; width:100%;
  clip-path:polygon(4px 0%,100% 0%,100% calc(100% - 4px),calc(100% - 4px) 100%,0% 100%,0% 4px) !important;
}
.bw-chat-overlay-input input::placeholder { color:var(--h-dim) !important; letter-spacing:.06em !important; }
.bw-chat-overlay-input input:focus { border-color:var(--h-cyan) !important; box-shadow:0 0 8px var(--h-cg) !important; outline:none !important; }

/* Float Emojis */
.bw-float-emojis { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.bw-float-emoji { position:absolute; bottom:60px; font-size:1.6rem; animation:floatUp 2.5s ease-out forwards; }
@keyframes floatUp { 0%{opacity:1;transform:translateY(0) scale(1)} 80%{opacity:.8} 100%{opacity:0;transform:translateY(-160px) scale(.6)} }

/* ═══ START DIALOG ═══════════════════════════════════════════════ */
#stream-start-dialog { background:rgba(3,17,30,0.92) !important; }
.bw-stream-start-modal {
  background:var(--h-panel) !important; border:1px solid var(--h-line) !important; border-radius:0 !important;
  clip-path:polygon(12px 0%,calc(100% - 12px) 0%,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0% calc(100% - 12px),0% 12px) !important;
  box-shadow:0 0 40px rgba(0,0,0,.85),0 0 24px var(--h-cg) !important;
}
.bw-stream-start-modal h3 { color:var(--h-hi) !important; font-family:'JetBrains Mono',monospace !important; letter-spacing:.16em !important; text-transform:uppercase !important; font-size:.8rem !important; border-bottom:1px solid var(--h-line) !important; padding-bottom:12px !important; margin-bottom:18px !important; }
.bw-stream-start-field label { color:var(--h-dim) !important; letter-spacing:.16em !important; font-family:'JetBrains Mono',monospace !important; text-transform:uppercase !important; font-size:.54rem !important; }
.bw-stream-start-field input,.bw-stream-start-field select {
  background:var(--h-raised) !important; border:1px solid var(--h-line) !important; border-radius:0 !important;
  color:var(--h-hi) !important; font-family:'JetBrains Mono',monospace !important; font-size:.68rem !important;
  clip-path:polygon(4px 0%,100% 0%,100% calc(100% - 4px),calc(100% - 4px) 100%,0% 100%,0% 4px) !important;
}
.bw-stream-start-field input:focus,.bw-stream-start-field select:focus { border-color:var(--h-cyan) !important; box-shadow:0 0 8px var(--h-cg) !important; outline:none !important; }
.bw-delay-btn { background:var(--h-raised) !important; border:1px solid var(--h-line) !important; border-radius:0 !important; color:var(--h-dim) !important; font-family:'JetBrains Mono',monospace !important; font-size:.62rem !important; letter-spacing:.12em !important; clip-path:polygon(4px 0%,100% 0%,100% calc(100% - 4px),calc(100% - 4px) 100%,0% 100%,0% 4px) !important; }
.bw-delay-btn:hover { border-color:var(--h-cyan) !important; color:var(--h-cyan) !important; }
.bw-delay-btn.active { border-color:var(--h-cyan) !important; background:var(--h-cs) !important; color:var(--h-cyan) !important; box-shadow:0 0 10px var(--h-cg) !important; }
.bw-delay-hint { color:var(--h-orange) !important; font-family:'JetBrains Mono',monospace !important; font-size:.6rem !important; }
.bw-btn-golive { background:linear-gradient(135deg,var(--h-purple),var(--h-cyan)) !important; border-radius:0 !important; letter-spacing:.16em !important; text-transform:uppercase !important; font-family:'JetBrains Mono',monospace !important; font-size:.66rem !important; clip-path:polygon(6px 0%,100% 0%,100% calc(100% - 6px),calc(100% - 6px) 100%,0% 100%,0% 6px) !important; }
.bw-btn-golive:hover { box-shadow:0 0 20px var(--h-cg) !important; }
.bw-btn-cancel-stream { background:var(--h-raised) !important; border:1px solid var(--h-line) !important; border-radius:0 !important; color:var(--h-dim) !important; font-family:'JetBrains Mono',monospace !important; }

/* Scrollbars */
#bw-stream-mode ::-webkit-scrollbar { width:3px; }
#bw-stream-mode ::-webkit-scrollbar-track { background:var(--h-bg); }
#bw-stream-mode ::-webkit-scrollbar-thumb { background:var(--h-line); border-radius:0; }
#bw-stream-mode ::-webkit-scrollbar-thumb:hover { background:var(--h-cyan); }

/* ════════════════════════════════════════════
   SOFTER EDGES & TRANSITIONS
   ════════════════════════════════════════════ */

/* Panel-Öffnung — sanftes Einblenden */
#bw-stream-mode.visible {
  animation: ws-fadein .35s cubic-bezier(.4,0,.2,1) forwards !important;
}
@keyframes ws-fadein {
  from { opacity: 0; transform: scale(.985); }
  to   { opacity: 1; transform: scale(1); }
}

/* Leichte Abrundung statt hartem 0 */
.hud-left-panel,
.hud-video-col,
.hud-right-col { overflow: hidden; }

/* Mission Bar — sanfter Übergang */
.hud-mission-bar { transition: background .3s ease; }

/* Sidebar-Items — weicherer Hover */
.bw-stream-sidebar-item {
  transition: background .25s ease, border-color .25s ease !important;
}
.bw-stream-sidebar-item::before {
  transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
}

/* Avatar — sanfterer Glow */
.bw-stream-sidebar-item:hover .bw-ssi-avatar {
  transition: border-color .25s ease, box-shadow .3s ease !important;
}

/* Back-Button — smooth */
.hud-back-btn { transition: color .2s ease, border-color .2s ease, background .2s ease !important; }

/* Gauge Sweep — sanfter */
#hud-gauge-sweep { animation: gauge-sweep 5s linear infinite !important; }

/* Radar Sweep — etwas langsamer */
#hud-radar-sweep { animation: radar-spin 5s linear infinite !important; }

/* CENTER Bars — weichere Animation */
.hud-cbar {
  transition: height .1s ease !important;
  border-radius: 2px 2px 0 0 !important;
}

/* Level Bars — weicher */
.hud-lvl-bar { border-radius: 1px !important; }
.hud-viewer-bar { border-radius: 1px !important; }

/* Player-Brackets — sanfter Glow-Puls */
.hud-player-frame::before,
.hud-player-frame::after,
.hud-player-frame > span::before,
.hud-player-frame > span::after {
  animation: bracket-breathe 3s ease-in-out infinite !important;
}
@keyframes bracket-breathe {
  0%,100% { opacity: .8; box-shadow: none; }
  50%      { opacity: 1;  box-shadow: 0 0 14px var(--h-cg); }
}

/* Buttons — smooth hover */
.bw-theater-btn, .hud-maximize-btn {
  transition: opacity .25s ease, color .2s ease,
              border-color .2s ease, box-shadow .3s ease !important;
}

/* Radar Blips — weicher */
.hud-rs-dot { transition: background .4s ease, box-shadow .4s ease !important; }

/* Chat Messages — sanftes Einblenden */
.bw-chat-overlay-msg {
  animation: msg-in .2s ease forwards !important;
}
@keyframes msg-in {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Chat Input Focus — smooth */
.bw-chat-overlay-input input {
  transition: border-color .25s ease, box-shadow .3s ease !important;
}

/* DATA Row Bars — weicher */
.hud-dfill {
  transition: width 1s cubic-bezier(.4,0,.2,1) !important;
}

/* Tab Hover */
.hud-feed-tab {
  transition: color .2s ease, background .2s ease !important;
}

/* REC Dot — etwas softer */
.hud-rec-dot {
  animation: hrec 1.8s ease-in-out infinite !important;
}

/* WaveStream Slider Track — smooth */
#ws-slider-track { transition: background .3s ease !important; }
#ws-slider-thumb { transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .3s ease !important; }

/* Crosshair — smooth pulse */
.hud-crosshair { animation: hcross 3s ease-in-out infinite !important; }
.hud-crosshair-dot { animation: hdot 2.5s ease-in-out infinite !important; }
.hud-crosshair-ring { animation: hdot 2.5s ease-in-out infinite reverse !important; }

/* Theater/Maximize Buttons erscheinen weicher */
.hud-video-col:hover .bw-theater-btn,
.hud-video-col:hover .hud-maximize-btn {
  transition: opacity .3s ease, color .2s ease,
              border-color .2s ease, box-shadow .3s ease !important;
}

/* ════════════════════════════════════════════════════════
   SPACE BACKGROUND — Glassmorphism Panels
   Raumschiffbrücke durch transparente HUD-Panels sichtbar
   ════════════════════════════════════════════════════════ */

/* Stream-Mode selbst transparent — Space-Canvas scheint durch */
#bw-stream-mode {
  background: transparent !important;
}

/* Mission Bar — dünnes Glasband oben */
.hud-mission-bar {
  background: rgba(3, 12, 28, 0.55) !important;
  backdrop-filter: blur(18px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
  border-bottom: 1px solid rgba(0, 212, 255, 0.15) !important;
}

/* Linke Sidebar — halbtransparentes Glas */
.hud-left-panel {
  background: rgba(3, 14, 26, 0.55) !important;
  backdrop-filter: blur(20px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
  border-right: 1px solid rgba(0, 212, 255, 0.12) !important;
}

/* Gauge Panel — etwas dunkler */
.hud-gauge-panel {
  background: rgba(0, 8, 20, 0.4) !important;
  border-bottom: 1px solid rgba(0, 212, 255, 0.1) !important;
}

/* DATA Rows */
.hud-data-rows {
  background: rgba(0, 8, 20, 0.3) !important;
}

/* Video Col — Hintergrund transparent wenn kein Stream */
.hud-video-col {
  background: transparent !important;
}

/* Player Wrap: schwarz wenn Stream aktiv, transparent wenn nicht */
.bw-stream-player-wrap {
  background: transparent !important;
  transition: background 0.5s ease !important;
}
/* Wenn Stream aktiv (Video sichtbar) → Player wird opak */
.bw-stream-player-wrap.stream-active {
  background: #000 !important;
}

/* No-Signal Screen — durchsichtig, Space scheint durch */
.bw-stream-empty {
  background: rgba(1, 8, 18, 0.35) !important;
  backdrop-filter: blur(4px) !important;
}

/* CENTER Section — Glas */
.hud-center-section {
  background: rgba(3, 14, 26, 0.6) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-top: 1px solid rgba(0, 212, 255, 0.12) !important;
}

/* Playback Bar — dunkles Glas */
.hud-playback-bar {
  background: rgba(2, 10, 22, 0.75) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(0, 212, 255, 0.12) !important;
}

/* Rechte Spalte — transparentes Glas */
.hud-right-col {
  background: rgba(3, 14, 26, 0.5) !important;
  backdrop-filter: blur(22px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.3) !important;
  border-left: 1px solid rgba(0, 212, 255, 0.12) !important;
}

/* Radar Panel — etwas dunkler */
.hud-radar-panel {
  background: rgba(0, 6, 18, 0.5) !important;
  border-bottom: 1px solid rgba(0, 212, 255, 0.1) !important;
}

/* COMM Header */
.hud-comm-header {
  background: rgba(0, 8, 20, 0.5) !important;
}

/* Chat Input Area */
.bw-chat-overlay-input {
  background: rgba(0, 8, 20, 0.65) !important;
}

/* Feed Divider + Tabs */
.hud-feed-divider,
.hud-feed-tabs {
  background: rgba(0, 8, 20, 0.3) !important;
}

/* Gauge Clip */
.hud-gauge-clip {
  background: rgba(0, 10, 25, 0.6) !important;
}

/* Gauge Panel */
.hud-gauge-panel { padding-bottom: 6px !important; }

/* Sidebar Quick Bar */
.bw-stream-sidebar-quick {
  background: rgba(0, 8, 20, 0.5) !important;
}

/* Radar SVG Circle fill */
.hud-radar-svg circle:first-child {
  fill: rgba(0, 12, 30, 0.5) !important;
}

/* Mod Panel — auch Glas */
#stream-mod-panel {
  background: rgba(3, 14, 26, 0.85) !important;
  backdrop-filter: blur(16px) !important;
}

/* Start Dialog */
.bw-stream-start-modal {
  background: rgba(3, 14, 26, 0.88) !important;
  backdrop-filter: blur(24px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
}

/* Wenn Stream AKTIV ist — Player komplett opak */
#bw-stream-mode.has-stream .bw-stream-player-wrap {
  background: #000 !important;
}
/* Sidebar + Chat bleiben Glas auch bei aktivem Stream */


/* ════════════════════════════════════════════
   TRANSPARENCY BOOST — Panels viel durchsichtiger
   ════════════════════════════════════════════ */
.hud-mission-bar {
  background: rgba(2, 8, 18, 0.35) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}
.hud-left-panel {
  background: rgba(2, 8, 18, 0.28) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
.hud-gauge-panel   { background: rgba(0, 5, 14, 0.25) !important; }
.hud-data-rows     { background: rgba(0, 5, 14, 0.2) !important; }
.hud-feed-divider,
.hud-feed-tabs     { background: rgba(0, 5, 14, 0.2) !important; }
.hud-gauge-clip    { background: rgba(0, 6, 18, 0.45) !important; }
.bw-stream-sidebar-quick { background: rgba(0, 5, 14, 0.3) !important; }
.bw-stream-sidebar-item:hover { background: rgba(0, 212, 255, 0.06) !important; }

.hud-video-col     { background: transparent !important; }
.bw-stream-player-wrap { background: transparent !important; }
.bw-stream-empty   {
  background: rgba(1, 5, 14, 0.2) !important;
  backdrop-filter: blur(2px) !important;
}

.hud-center-section {
  background: rgba(2, 8, 18, 0.35) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.hud-playback-bar {
  background: rgba(1, 6, 16, 0.55) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.hud-right-col {
  background: rgba(2, 8, 18, 0.28) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}
.hud-radar-panel   { background: rgba(0, 4, 14, 0.3) !important; }
.hud-comm-header   { background: rgba(0, 4, 14, 0.3) !important; }
.bw-chat-overlay-msgs { background: transparent !important; }
.bw-chat-overlay-input { background: rgba(0, 4, 14, 0.4) !important; }

.bw-stream-start-modal {
  background: rgba(2, 10, 22, 0.82) !important;
  backdrop-filter: blur(28px) !important;
}

/* ════════ MAX TRANSPARENCY ════════ */
.hud-mission-bar                { background: rgba(1,5,12,0.18) !important; }
.hud-left-panel                 { background: rgba(1,5,12,0.12) !important; }
.hud-gauge-panel                { background: rgba(0,3,10,0.12) !important; }
.hud-data-rows                  { background: rgba(0,3,10,0.1)  !important; }
.hud-feed-divider,.hud-feed-tabs{ background: rgba(0,3,10,0.1)  !important; }
.hud-gauge-clip                 { background: rgba(0,4,12,0.25) !important; }
.bw-stream-sidebar-quick        { background: rgba(0,3,10,0.15) !important; }
.hud-center-section             { background: rgba(1,5,12,0.18) !important; }
.hud-playback-bar               { background: rgba(1,4,10,0.35) !important; }
.hud-right-col                  { background: rgba(1,5,12,0.12) !important; }
.hud-radar-panel                { background: rgba(0,3,10,0.15) !important; }
.hud-comm-header                { background: rgba(0,3,10,0.15) !important; }
.bw-chat-overlay-input          { background: rgba(0,3,10,0.25) !important; }
.bw-stream-empty                { background: rgba(0,3,10,0.08) !important; }

/* ════════ ULTRA TRANSPARENT + STRONG TEXT ════════ */
.hud-mission-bar                { background: rgba(0,3,8,0.08) !important; }
.hud-left-panel                 { background: rgba(0,3,8,0.06) !important; }
.hud-gauge-panel                { background: rgba(0,2,6,0.06) !important; }
.hud-data-rows                  { background: rgba(0,2,6,0.05) !important; }
.hud-feed-divider,.hud-feed-tabs{ background: rgba(0,2,6,0.05) !important; }
.hud-gauge-clip                 { background: rgba(0,3,10,0.15) !important; }
.bw-stream-sidebar-quick        { background: rgba(0,2,6,0.08) !important; }
.hud-center-section             { background: rgba(0,3,8,0.08) !important; }
.hud-playback-bar               { background: rgba(0,2,6,0.22) !important; }
.hud-right-col                  { background: rgba(0,3,8,0.06) !important; }
.hud-radar-panel                { background: rgba(0,2,6,0.08) !important; }
.hud-comm-header                { background: rgba(0,2,6,0.08) !important; }
.bw-chat-overlay-input          { background: rgba(0,2,6,0.15) !important; }
.bw-stream-empty                { background: rgba(0,2,6,0.04) !important; }

/* ── STÄRKERE SCHRIFT — Text leuchtet über dem transparenten Hintergrund ── */
#bw-stream-mode .hud-mb-title,
#bw-stream-mode .hud-mb-id,
#bw-stream-mode .hud-mb-stat    { color: #e8f6ff !important; text-shadow: 0 0 12px rgba(0,212,255,0.8), 0 0 4px rgba(0,212,255,0.5) !important; font-weight: 700 !important; }

#bw-stream-mode .hud-rec-indicator { text-shadow: 0 0 10px rgba(255,42,94,0.9) !important; }

#bw-stream-mode .hud-dlbl       { color: rgba(0,212,255,0.9) !important; text-shadow: 0 0 8px rgba(0,212,255,0.6) !important; }
#bw-stream-mode .hud-dval       { color: #ffffff !important; text-shadow: 0 0 8px rgba(0,212,255,0.7) !important; font-weight: 700 !important; }

#bw-stream-mode .bw-ssi-name    { color: #fff !important; text-shadow: 0 0 8px rgba(0,212,255,0.5) !important; }
#bw-stream-mode .bw-ssi-viewers { color: #00f5ff !important; text-shadow: 0 0 6px rgba(0,212,255,0.8) !important; font-weight: 700 !important; }
#bw-stream-mode .bw-ssi-meta    { color: rgba(160,220,255,0.8) !important; }

#bw-stream-mode .hud-feed-divider-txt { color: rgba(0,212,255,0.9) !important; text-shadow: 0 0 8px rgba(0,212,255,0.6) !important; }
#bw-stream-mode .hud-feed-tab         { color: rgba(160,220,255,0.8) !important; text-shadow: 0 0 6px rgba(0,212,255,0.4) !important; }
#bw-stream-mode .hud-feed-tab.active  { color: #00f5ff !important; text-shadow: 0 0 10px rgba(0,212,255,0.9) !important; }

#bw-stream-mode .hud-no-signal     { color: rgba(0,212,255,0.9) !important; text-shadow: 0 0 12px rgba(0,212,255,0.7) !important; font-weight: 700 !important; }
#bw-stream-mode .hud-no-signal-sub { color: rgba(0,212,255,0.5) !important; text-shadow: 0 0 8px rgba(0,212,255,0.4) !important; }

#bw-stream-mode .hud-cl-txt      { color: rgba(0,212,255,0.95) !important; text-shadow: 0 0 10px rgba(0,212,255,0.8) !important; letter-spacing: .3em !important; }
#bw-stream-mode .hud-pb-time,
#bw-stream-mode .hud-pb-game     { color: rgba(200,235,255,0.95) !important; text-shadow: 0 0 6px rgba(0,212,255,0.6) !important; }
#bw-stream-mode .hud-pb-rec      { text-shadow: 0 0 10px rgba(255,42,94,0.9) !important; font-weight:700 !important; }

#bw-stream-mode .hud-comm-label  { color: rgba(0,212,255,0.95) !important; text-shadow: 0 0 10px rgba(0,212,255,0.8) !important; }
#bw-stream-mode .bw-chat-overlay-msg { color: #dff0ff !important; text-shadow: 0 0 4px rgba(0,212,255,0.3) !important; }
#bw-stream-mode .bw-chat-overlay-msg .bw-msg-name.host   { text-shadow: 0 0 8px rgba(0,212,255,0.9) !important; }
#bw-stream-mode .bw-chat-overlay-msg .bw-msg-name::after { color: rgba(0,212,255,0.5) !important; }

#bw-stream-mode .hud-radar-label { color: rgba(0,212,255,0.9) !important; text-shadow: 0 0 8px rgba(0,212,255,0.7) !important; font-weight: 700 !important; }

/* ════════ MAXIMUM SPACE — Alles fast unsichtbar ════════ */
.hud-mission-bar,
.hud-left-panel,
.hud-gauge-panel,
.hud-data-rows,
.hud-feed-divider,
.hud-feed-tabs,
.hud-center-section,
.hud-right-col,
.hud-radar-panel,
.hud-comm-header,
.bw-stream-sidebar-quick,
.bw-stream-empty            { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

.hud-playback-bar           { background: rgba(0,2,6,0.12) !important; backdrop-filter: none !important; }
.bw-chat-overlay-input      { background: rgba(0,2,6,0.1) !important; }
.hud-gauge-clip             { background: rgba(0,3,10,0.1) !important; }

/* Trennlinien auch fast weg */
#bw-stream-mode .hud-left-panel  { border-right:  1px solid rgba(0,212,255,0.08) !important; }
#bw-stream-mode .hud-right-col   { border-left:   1px solid rgba(0,212,255,0.08) !important; }
#bw-stream-mode .hud-mission-bar { border-bottom: 1px solid rgba(0,212,255,0.08) !important; }
#bw-stream-mode .hud-playback-bar{ border-top:    1px solid rgba(0,212,255,0.08) !important; }
#bw-stream-mode .hud-center-section { border-top: 1px solid rgba(0,212,255,0.08) !important; }

/* Dot-Grid fast weg */
#bw-stream-mode::before {
  background-image: radial-gradient(rgba(0,180,220,0.04) 1px, transparent 1px) !important;
}

/* ════════════════════════════════════════════════════════
   SPACE BACKGROUND — Pure CSS, kein Canvas, kein CPU
   GPU-composited, läuft auf Grafikkarte
   ════════════════════════════════════════════════════════ */

#ws-space-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;

  /* Tiefes Weltall + Nebel als statische Gradienten */
  background:
    /* Lila Nebel oben links */
    radial-gradient(ellipse 55% 40% at 12% 20%, rgba(100,40,200,0.22) 0%, transparent 70%),
    /* Cyan Nebel rechts */
    radial-gradient(ellipse 45% 35% at 82% 28%, rgba(0,160,240,0.18) 0%, transparent 65%),
    /* Blauer Nebel unten mitte */
    radial-gradient(ellipse 60% 45% at 50% 78%, rgba(10,45,160,0.22) 0%, transparent 70%),
    /* Pink accent oben rechts */
    radial-gradient(ellipse 30% 25% at 88% 12%, rgba(180,30,160,0.12) 0%, transparent 60%),
    /* Basis Weltraum */
    linear-gradient(160deg, #030a14 0%, #050d1a 40%, #03111e 70%, #020810 100%);
}

/* Sternfeld Layer 1 — große Sterne, langsam */
#ws-space-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 8%  12%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px   1px   at 22% 6%,  rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(2px   2px   at 35% 22%, rgba(200,230,255,0.8) 0%, transparent 100%),
    radial-gradient(1px   1px   at 48% 8%,  rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 61% 18%, rgba(255,255,255,0.85)0%, transparent 100%),
    radial-gradient(1px   1px   at 74% 5%,  rgba(200,220,255,0.7) 0%, transparent 100%),
    radial-gradient(2px   2px   at 87% 14%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px   1px   at 93% 28%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 15% 38%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px   1px   at 28% 45%, rgba(200,230,255,0.5) 0%, transparent 100%),
    radial-gradient(2px   2px   at 42% 52%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px   1px   at 56% 42%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 69% 58%, rgba(200,220,255,0.75)0%, transparent 100%),
    radial-gradient(1px   1px   at 82% 48%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(2px   2px   at 5%  65%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px   1px   at 18% 72%, rgba(200,230,255,0.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 32% 68%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px   1px   at 45% 75%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(2px   2px   at 58% 82%, rgba(200,220,255,0.8) 0%, transparent 100%),
    radial-gradient(1px   1px   at 71% 78%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 84% 88%, rgba(255,255,255,0.85)0%, transparent 100%),
    radial-gradient(1px   1px   at 96% 72%, rgba(200,230,255,0.5) 0%, transparent 100%),
    radial-gradient(2px   2px   at 25% 88%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px   1px   at 38% 92%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 52% 96%, rgba(200,220,255,0.75)0%, transparent 100%),
    radial-gradient(1px   1px   at 65% 94%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(2px   2px   at 78% 98%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px   1px   at 91% 95%, rgba(200,230,255,0.6) 0%, transparent 100%);
  background-size: 100% 100%;
  animation: star-twinkle1 8s ease-in-out infinite alternate;
}

/* Sternfeld Layer 2 — kleine Sterne, andere Phase */
#ws-space-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 3%  33%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 11% 55%, rgba(200,220,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 19% 82%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 27% 17%, rgba(200,230,255,0.45)0%, transparent 100%),
    radial-gradient(1px 1px at 36% 60%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 44% 35%, rgba(200,220,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 53% 77%, rgba(255,255,255,0.55)0%, transparent 100%),
    radial-gradient(1px 1px at 62% 25%, rgba(200,230,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 68%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 79% 42%, rgba(200,220,255,0.45)0%, transparent 100%),
    radial-gradient(1px 1px at 88% 85%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 95% 50%, rgba(200,230,255,0.4) 0%, transparent 100%);
  background-size: 100% 100%;
  animation: star-twinkle2 11s ease-in-out infinite alternate;
}

@keyframes star-twinkle1 {
  0%   { opacity: 0.6; }
  50%  { opacity: 1.0; }
  100% { opacity: 0.7; }
}
@keyframes star-twinkle2 {
  0%   { opacity: 0.4; }
  60%  { opacity: 0.9; }
  100% { opacity: 0.5; }
}

/* Canvas entfernen falls noch vorhanden */
#ws-space-canvas { display: none !important; }


/* ═══ SPACE DIREKT AUF #bw-stream-mode ═══ */
#bw-stream-mode.space-active {
  background:
    radial-gradient(ellipse 55% 40% at 12% 20%,  rgba(100,40,200,0.28)  0%, transparent 65%),
    radial-gradient(ellipse 45% 35% at 82% 28%,  rgba(0,160,240,0.22)   0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 50% 78%,  rgba(10,45,160,0.28)   0%, transparent 65%),
    radial-gradient(ellipse 30% 25% at 88% 12%,  rgba(180,30,160,0.15)  0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 5%  85%,  rgba(0,180,160,0.18)   0%, transparent 60%),
    linear-gradient(155deg, #030a14 0%, #050d1c 35%, #031220 65%, #020810 100%) !important;
}

/* Sternfeld Layer 1 auf dem Mode selbst */
#bw-stream-mode.space-active::before {
  content: '' !important;
  position: fixed !important; inset: 0 !important; z-index: 0 !important;
  pointer-events: none !important;
  background-image:
    radial-gradient(1.5px 1.5px at 7%  11%, rgba(255,255,255,.9) 0%,transparent 100%),
    radial-gradient(1px   1px   at 21% 5%,  rgba(255,255,255,.7) 0%,transparent 100%),
    radial-gradient(2px   2px   at 34% 21%, rgba(200,230,255,.8) 0%,transparent 100%),
    radial-gradient(1px   1px   at 47% 7%,  rgba(255,255,255,.6) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 60% 17%, rgba(255,255,255,.85)0%,transparent 100%),
    radial-gradient(1px   1px   at 73% 4%,  rgba(200,220,255,.7) 0%,transparent 100%),
    radial-gradient(2px   2px   at 86% 13%, rgba(255,255,255,.9) 0%,transparent 100%),
    radial-gradient(1px   1px   at 94% 27%, rgba(255,255,255,.6) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 14% 37%, rgba(255,255,255,.7) 0%,transparent 100%),
    radial-gradient(1px   1px   at 27% 44%, rgba(200,230,255,.5) 0%,transparent 100%),
    radial-gradient(2px   2px   at 41% 51%, rgba(255,255,255,.8) 0%,transparent 100%),
    radial-gradient(1px   1px   at 55% 41%, rgba(255,255,255,.6) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 68% 57%, rgba(200,220,255,.75)0%,transparent 100%),
    radial-gradient(1px   1px   at 81% 47%, rgba(255,255,255,.5) 0%,transparent 100%),
    radial-gradient(2px   2px   at 4%  64%, rgba(255,255,255,.8) 0%,transparent 100%),
    radial-gradient(1px   1px   at 17% 71%, rgba(200,230,255,.6) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 31% 67%, rgba(255,255,255,.7) 0%,transparent 100%),
    radial-gradient(1px   1px   at 44% 74%, rgba(255,255,255,.5) 0%,transparent 100%),
    radial-gradient(2px   2px   at 57% 81%, rgba(200,220,255,.8) 0%,transparent 100%),
    radial-gradient(1px   1px   at 70% 77%, rgba(255,255,255,.6) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 83% 87%, rgba(255,255,255,.85)0%,transparent 100%),
    radial-gradient(1px   1px   at 95% 71%, rgba(200,230,255,.5) 0%,transparent 100%),
    radial-gradient(2px   2px   at 24% 87%, rgba(255,255,255,.7) 0%,transparent 100%),
    radial-gradient(1px   1px   at 37% 91%, rgba(255,255,255,.6) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 51% 95%, rgba(200,220,255,.75)0%,transparent 100%),
    radial-gradient(1px   1px   at 64% 93%, rgba(255,255,255,.5) 0%,transparent 100%),
    radial-gradient(2px   2px   at 77% 97%, rgba(255,255,255,.8) 0%,transparent 100%),
    radial-gradient(1px   1px   at 90% 94%, rgba(200,230,255,.6) 0%,transparent 100%);
  animation: star-twinkle1 9s ease-in-out infinite alternate !important;
  background-color: transparent !important;
}

/* Maximize + Theater immer leicht sichtbar (nicht nur bei Hover) */
.bw-theater-btn,
.hud-maximize-btn {
  opacity: 0.35 !important;
}
.hud-video-col:hover .bw-theater-btn,
.hud-video-col:hover .hud-maximize-btn,
.bw-theater-btn:hover,
.hud-maximize-btn:hover {
  opacity: 1 !important;
}

/* ════════════════════════════════════════
   HUD MINI-PANELS (CENTER Leiste)
   ════════════════════════════════════════ */

/* CENTER Section — horizontal statt vertikal */
.hud-center-section {
  height: 110px !important;
  flex-direction: column !important;
  padding: 4px 8px 6px !important;
}
.hud-cs-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex: 1;
  min-height: 0;
}
.hud-cs-bars {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Mini-Panel Row */
.hud-mini-panels {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  flex: 1;
  justify-content: flex-end;
  padding-bottom: 2px;
}

/* Einzelnes Mini-Panel */
.hud-mini-panel {
  position: relative;
  width: 44px;
  height: 64px;
  background: rgba(0, 212, 255, 0.04);
  border: 1px solid rgba(0, 212, 255, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1),
              background .2s ease,
              border-color .2s ease,
              box-shadow .2s ease;
  clip-path: polygon(4px 0%,calc(100% - 4px) 0%,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0% calc(100% - 4px),0% 4px);
}
.hud-mini-panel:hover {
  transform: scale(1.18) translateY(-4px);
  background: rgba(0, 212, 255, 0.1) !important;
  border-color: rgba(0, 212, 255, 0.6) !important;
  box-shadow: 0 0 16px rgba(0, 212, 255, 0.3), 0 4px 20px rgba(0,0,0,.5);
  z-index: 10;
}
.hud-mini-panel.active {
  background: rgba(0, 212, 255, 0.12) !important;
  border-color: var(--h-cyan) !important;
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.4);
}

/* Corner Brackets auf Mini-Panels */
.hud-mp-corners { position:absolute; inset:0; pointer-events:none; }
.hud-mp-corners::before {
  content:''; position:absolute; top:0; left:0;
  width:7px; height:7px;
  border-top:1px solid var(--h-cyan); border-left:1px solid var(--h-cyan);
}
.hud-mp-corners::after {
  content:''; position:absolute; bottom:0; right:0;
  width:7px; height:7px;
  border-bottom:1px solid var(--h-cyan); border-right:1px solid var(--h-cyan);
}
.hud-mp-corners > span::before {
  content:''; position:absolute; top:0; right:0;
  width:7px; height:7px;
  border-top:1px solid rgba(0,212,255,.4); border-right:1px solid rgba(0,212,255,.4);
}
.hud-mp-corners > span::after {
  content:''; position:absolute; bottom:0; left:0;
  width:7px; height:7px;
  border-bottom:1px solid rgba(0,212,255,.4); border-left:1px solid rgba(0,212,255,.4);
}

.hud-mp-icon {
  font-size: .95rem;
  color: var(--h-cyan);
  text-shadow: 0 0 8px rgba(0,212,255,.8);
  line-height: 1;
}
.hud-mp-label {
  font-size: .44rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(0,212,255,.7);
  font-family: 'JetBrains Mono',monospace;
}
.hud-mp-badge {
  position: absolute;
  top: 2px; right: 2px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--h-red);
  box-shadow: 0 0 5px rgba(255,42,94,.8);
  display: none;
  animation: hrec 1.5s ease-in-out infinite;
}
.hud-mp-badge.visible { display: block; }

/* ── Mini-Panel Popup (Zoom-Ansicht) ── */
.hud-mini-popup {
  position: absolute;
  bottom: calc(110px + 34px + 8px); /* über center-section + playback */
  left: 50%;
  transform: translateX(-50%) scale(.85);
  width: 320px;
  max-height: 280px;
  background: rgba(2, 10, 22, 0.88);
  border: 1px solid rgba(0,212,255,.35);
  backdrop-filter: blur(20px);
  z-index: 30;
  animation: mp-zoom-in .2s cubic-bezier(.34,1.56,.64,1) forwards;
  clip-path: polygon(8px 0%,calc(100% - 8px) 0%,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0% calc(100% - 8px),0% 8px);
}
@keyframes mp-zoom-in {
  from { opacity:0; transform:translateX(-50%) scale(.7); }
  to   { opacity:1; transform:translateX(-50%) scale(1); }
}

/* Popup Corner Brackets */
.hud-mp-popup-corners { position:absolute; inset:0; pointer-events:none; z-index:2; }
.hud-mp-popup-corners::before {
  content:''; position:absolute; top:0; left:0; width:14px; height:14px;
  border-top:1.5px solid var(--h-cyan); border-left:1.5px solid var(--h-cyan);
  box-shadow:-1px -1px 6px var(--h-cg);
}
.hud-mp-popup-corners::after {
  content:''; position:absolute; bottom:0; right:0; width:14px; height:14px;
  border-bottom:1.5px solid var(--h-cyan); border-right:1.5px solid var(--h-cyan);
  box-shadow:1px 1px 6px var(--h-cg);
}
.hud-mp-popup-corners > span::before {
  content:''; position:absolute; top:0; right:0; width:14px; height:14px;
  border-top:1.5px solid var(--h-cyan); border-right:1.5px solid var(--h-cyan);
}
.hud-mp-popup-corners > span::after {
  content:''; position:absolute; bottom:0; left:0; width:14px; height:14px;
  border-bottom:1.5px solid var(--h-cyan); border-left:1.5px solid var(--h-cyan);
}

.hud-mp-popup-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(0,212,255,.15);
  font-family: 'JetBrains Mono',monospace;
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--h-cyan);
  text-shadow: 0 0 8px rgba(0,212,255,.7);
}
.hud-mp-popup-close {
  background: none; border: none; color: var(--h-dim);
  cursor: pointer; font-size: .8rem; padding: 2px 6px;
  transition: color .15s;
}
.hud-mp-popup-close:hover { color: var(--h-red); }

.hud-mp-popup-body {
  padding: 10px 12px;
  overflow-y: auto;
  max-height: 230px;
  font-family: 'JetBrains Mono',monospace;
  font-size: .68rem;
  color: var(--h-text);
  line-height: 1.6;
}
.hud-mp-popup-body::-webkit-scrollbar { width: 3px; }
.hud-mp-popup-body::-webkit-scrollbar-thumb { background: var(--h-line); }

/* Popup Content Styles */
.hmp-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid rgba(0,212,255,.06);
  cursor: pointer; transition: color .15s;
}
.hmp-row:last-child { border: none; }
.hmp-row:hover { color: var(--h-hi); }
.hmp-row:hover .hmp-row-icon { text-shadow: 0 0 8px var(--h-cg); }
.hmp-row-icon { font-size: .9rem; flex-shrink: 0; color: var(--h-cyan); }
.hmp-row-name { flex: 1; }
.hmp-row-meta { color: var(--h-dim); font-size: .58rem; }
.hmp-empty { color: var(--h-dim); letter-spacing: .1em; padding: 8px 0; }

/* ════════════════════════════════════════════
   HUD DESKTOP WINDOW — Zoomt von Mini auf 65%
   Draggable, Pop-Out fähig
   ════════════════════════════════════════════ */

.hud-desktop-win {
  position: fixed;
  width: 65vw;
  height: 65vh;
  background: rgba(2, 10, 22, 0.82);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(0, 212, 255, 0.35);
  z-index: 200;
  display: none;
  flex-direction: column;
  clip-path: polygon(10px 0%,calc(100% - 10px) 0%,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0% calc(100% - 10px),0% 10px);
  box-shadow: 0 0 60px rgba(0,0,0,.8), 0 0 30px rgba(0,212,255,.15);
}

/* Corner Brackets */
.hud-dw-corners { position:absolute; inset:0; pointer-events:none; z-index:2; }
.hud-dw-corners::before { content:''; position:absolute; top:0; left:0; width:18px; height:18px; border-top:2px solid var(--h-cyan); border-left:2px solid var(--h-cyan); box-shadow:-2px -2px 10px var(--h-cg); }
.hud-dw-corners::after  { content:''; position:absolute; bottom:0; right:0; width:18px; height:18px; border-bottom:2px solid var(--h-cyan); border-right:2px solid var(--h-cyan); box-shadow:2px 2px 10px var(--h-cg); }
.hud-dw-corners > span::before { content:''; position:absolute; top:0; right:0; width:18px; height:18px; border-top:2px solid var(--h-cyan); border-right:2px solid var(--h-cyan); }
.hud-dw-corners > span::after  { content:''; position:absolute; bottom:0; left:0; width:18px; height:18px; border-bottom:2px solid var(--h-cyan); border-left:2px solid var(--h-cyan); }

/* Title Bar — Drag Handle */
.hud-dw-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  background: rgba(0, 8, 20, 0.6);
  border-bottom: 1px solid rgba(0, 212, 255, 0.2);
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
}
.hud-dw-titlebar:active { cursor: grabbing; }

/* Traffic Light Dots */
.hud-dw-tb-dots { display: flex; gap: 6px; flex-shrink: 0; }
.hud-dw-dot {
  width: 11px; height: 11px; border-radius: 50%;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.hud-dw-dot:hover { transform: scale(1.3); }
.hud-dw-dot-red    { background: #ff2a5e; box-shadow: 0 0 5px rgba(255,42,94,.7); }
.hud-dw-dot-yellow { background: #ffaa00; box-shadow: 0 0 5px rgba(255,170,0,.7); }
.hud-dw-dot-cyan   { background: var(--h-cyan); box-shadow: 0 0 5px var(--h-cg); }

.hud-dw-title {
  flex: 1;
  font-family: 'JetBrains Mono',monospace;
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--h-cyan);
  text-shadow: 0 0 8px rgba(0,212,255,.7);
  text-align: center;
}
.hud-dw-tb-actions { flex-shrink: 0; }
.hud-dw-popout {
  background: rgba(0,212,255,.08); border: 1px solid rgba(0,212,255,.25);
  color: var(--h-dim); font-family: 'JetBrains Mono',monospace;
  font-size: .52rem; letter-spacing: .1em; padding: 3px 8px;
  cursor: pointer; clip-path: polygon(3px 0%,100% 0%,100% calc(100% - 3px),calc(100% - 3px) 100%,0% 100%,0% 3px);
  transition: color .15s, border-color .15s;
}
.hud-dw-popout:hover { color: var(--h-cyan); border-color: var(--h-cyan); }

/* Content Body */
.hud-dw-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  font-family: 'JetBrains Mono',monospace;
  font-size: .72rem;
  color: var(--h-text);
  min-height: 0;
}
.hud-dw-body::-webkit-scrollbar { width: 3px; }
.hud-dw-body::-webkit-scrollbar-thumb { background: rgba(0,212,255,.2); }

/* Zoom-Animation: startet von mini-panel Position */
@keyframes dw-zoom-in {
  from { opacity: 0; transform: scale(0.06); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes dw-zoom-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.06); }
}
/* transform-origin wird per JS gesetzt */
.hud-desktop-win.opening {
  display: flex !important;
  animation: dw-zoom-in .32s cubic-bezier(.34,1.3,.64,1) forwards;
}
.hud-desktop-win.closing {
  display: flex !important;
  animation: dw-zoom-out .2s ease-in forwards;
}

/* ═══════════════════════════════════════════════════════
   MINI DESKTOP WINDOWS — Volle Breite, Links→Rechts
   ═══════════════════════════════════════════════════════ */

/* CENTER SECTION — horizontal, volle Breite */
.hud-center-section {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  height: 100px !important;
  padding: 4px 6px !important;
  gap: 6px !important;
  background: transparent !important;
  border-top: 1px solid rgba(0,212,255,0.1) !important;
  overflow: hidden !important;
}

/* Bars — schmal links */
.hud-cs-bars {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 3px !important;
  flex-shrink: 0 !important;
  width: 56px !important;
  padding-bottom: 2px !important;
}
.hud-cl-txt-small {
  font-size: .44rem; letter-spacing: .2em; color: var(--h-dim); text-transform: uppercase;
  font-family: 'JetBrains Mono',monospace;
}
.hud-two-dots { display:flex; gap:4px; }
.hud-dot-red { width:7px;height:7px;border-radius:50%;background:var(--h-red);box-shadow:0 0 5px rgba(255,42,94,.6);animation:hrec 1.5s ease-in-out infinite; }

/* Mini-Fenster Row — nimmt den Rest der Breite */
.hud-miniwin-row {
  display: flex !important;
  flex: 1 !important;
  gap: 5px !important;
  align-items: stretch !important;
  min-width: 0 !important;
}

/* Einzelnes Mini-Desktop-Fenster */
.hud-miniwin {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: rgba(0, 212, 255, 0.04) !important;
  border: 1px solid rgba(0, 212, 255, 0.18) !important;
  cursor: pointer !important;
  position: relative !important;
  clip-path: polygon(4px 0%,calc(100% - 4px) 0%,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0% calc(100% - 4px),0% 4px) !important;
  transition: transform .2s cubic-bezier(.34,1.4,.64,1),
              background .2s ease, border-color .2s ease,
              box-shadow .2s ease !important;
  overflow: hidden !important;
}
.hud-miniwin:hover {
  transform: translateY(-4px) scale(1.04) !important;
  background: rgba(0,212,255,0.1) !important;
  border-color: rgba(0,212,255,0.55) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.5), 0 0 14px rgba(0,212,255,.25) !important;
  z-index: 5 !important;
}
.hud-miniwin.active {
  border-color: var(--h-cyan) !important;
  background: rgba(0,212,255,0.12) !important;
  box-shadow: 0 0 14px rgba(0,212,255,.35) !important;
}

/* Title Bar des Mini-Fensters */
.hud-mw-bar {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 6px !important;
  background: rgba(0,212,255,0.08) !important;
  border-bottom: 1px solid rgba(0,212,255,0.12) !important;
  flex-shrink: 0 !important;
}
.hud-mw-dots {
  display: flex; gap: 3px; flex-shrink: 0;
}
.hud-mw-dots i {
  width: 5px; height: 5px; border-radius: 50%; display: block;
}
.hud-mw-dots i:nth-child(1) { background: #ff2a5e; }
.hud-mw-dots i:nth-child(2) { background: #ffaa00; }
.hud-mw-dots i:nth-child(3) { background: #00d4ff; }
.hud-mw-title {
  font-family: 'JetBrains Mono',monospace;
  font-size: .48rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(0,212,255,.8); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; flex: 1;
  text-shadow: 0 0 6px rgba(0,212,255,.5);
}
.hud-mw-badge {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--h-red); display: none;
  box-shadow: 0 0 4px rgba(255,42,94,.7);
  animation: hrec 1.5s ease-in-out infinite;
}
.hud-mw-badge.visible { display: block; }

/* Preview-Bereich — animierte Platzhalter-Linien */
.hud-mw-preview {
  flex: 1; padding: 4px 6px;
  display: flex; flex-direction: column; gap: 3px;
  justify-content: center; overflow: hidden;
}
.hud-mw-line {
  height: 2px; background: rgba(0,212,255,0.2);
  border-radius: 1px; width: 100%;
  animation: line-pulse 3s ease-in-out infinite alternate;
}
.hud-mw-line.short { width: 60%; }
.hud-mw-line:nth-child(2) { animation-delay: .5s; width: 80%; }
.hud-mw-line:nth-child(3) { animation-delay: 1s; width: 70%; }
.hud-mw-line:nth-child(4) { animation-delay: 1.5s; width: 50%; }
@keyframes line-pulse {
  from { opacity: .25; } to { opacity: .7; }
}

/* Wenn echte Daten geladen → Linien durch Text ersetzen */
.hud-mw-preview.loaded {
  font-family: 'JetBrains Mono',monospace;
  font-size: .44rem; color: rgba(0,212,255,.6);
  letter-spacing: .04em; gap: 2px;
  justify-content: flex-start; padding-top: 5px;
}
.hud-mw-preview.loaded .hud-mw-row {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.4;
}
.hud-mw-preview.loaded .hud-mw-row.hi { color: rgba(200,235,255,.8); }

/* ═══ MINIWIN FIXES — Hover + Overflow ═══ */

/* Overflow aufmachen damit Hover über Rahmen ragt */
.hud-center-section { overflow: visible !important; }
.hud-miniwin-row    { overflow: visible !important; }
.hud-video-col      { overflow: visible !important; }

/* clip-path entfernen — durch echte Corner-Brackets ersetzen */
.hud-miniwin {
  clip-path: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
/* Corner-Brackets statt clip-path */
.hud-miniwin::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 6px; height: 6px;
  border-top: 1px solid var(--h-cyan);
  border-left: 1px solid var(--h-cyan);
  pointer-events: none;
  z-index: 2;
}
.hud-miniwin::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 6px; height: 6px;
  border-bottom: 1px solid var(--h-cyan);
  border-right: 1px solid var(--h-cyan);
  pointer-events: none;
  z-index: 2;
}

/* Hover stärker — deutlicher spürbar */
.hud-miniwin:hover {
  transform: translateY(-6px) scale(1.06) !important;
  background: rgba(0,212,255,0.12) !important;
  border-color: rgba(0,212,255,0.7) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.6), 0 0 18px rgba(0,212,255,.3) !important;
  z-index: 10 !important;
}

/* Mod Panel standardmäßig versteckt */
#stream-mod-panel { display: none !important; }
#stream-mod-panel.visible { display: block !important; }

/* Sidebar 1cm breiter */
.hud-main-grid { grid-template-columns: 200px 1fr 260px !important; }
#bw-stream-mode.theater-with-chat .hud-main-grid { grid-template-columns: 0 1fr 260px !important; }

/* ═══ RESIZE HANDLES ═══ */
.hud-rh {
  position: absolute;
  z-index: 10;
}
/* Kanten */
.hud-rh-n  { top:-4px;   left:12px;  right:12px; height:8px;  cursor:n-resize; }
.hud-rh-s  { bottom:-4px;left:12px;  right:12px; height:8px;  cursor:s-resize; }
.hud-rh-w  { left:-4px;  top:12px;  bottom:12px; width:8px;   cursor:w-resize; }
.hud-rh-e  { right:-4px; top:12px;  bottom:12px; width:8px;   cursor:e-resize; }
/* Ecken */
.hud-rh-nw { top:-4px;   left:-4px;  width:18px; height:18px; cursor:nw-resize; }
.hud-rh-ne { top:-4px;   right:-4px; width:18px; height:18px; cursor:ne-resize; }
.hud-rh-sw { bottom:-4px;left:-4px;  width:18px; height:18px; cursor:sw-resize; }
.hud-rh-se { bottom:-4px;right:-4px; width:18px; height:18px; cursor:se-resize; }

/* Ecken leicht highlighten bei Hover */
.hud-rh-se:hover, .hud-rh-sw:hover,
.hud-rh-ne:hover, .hud-rh-nw:hover {
  background: rgba(0,212,255,0.08);
}

/* ════════════════════════════════════════════════════════
   UNIVERSE RESTORE — Alles durchsichtig, Weltraum dominant
   ════════════════════════════════════════════════════════ */

/* Canvas wieder aktivieren */
#ws-space-canvas { display: block !important; }

/* Desktop Window — echter Glaseffekt über Weltraum */
#hud-desktop-win {
  background: rgba(2, 8, 18, 0.25) !important;
  backdrop-filter: blur(12px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
  border: 1px solid rgba(0, 212, 255, 0.3) !important;
}
#hud-desktop-win #hud-dw-titlebar {
  background: rgba(0, 6, 16, 0.4) !important;
  border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important;
}
#hud-desktop-win #hud-dw-body {
  background: transparent !important;
}

/* HUD Main Panels — fast komplett weg */
.hud-main-grid,
.hud-left-panel,
.hud-video-col,
.hud-right-col { background: transparent !important; backdrop-filter: none !important; }

/* Nur minimale Trennlinien */
.hud-left-panel  { border-right:  1px solid rgba(0,212,255,0.06) !important; }
.hud-right-col   { border-left:   1px solid rgba(0,212,255,0.06) !important; }

/* Playback Bar — leicht sichtbar aber transparent */
.hud-playback-bar {
  background: rgba(0, 5, 15, 0.35) !important;
  backdrop-filter: blur(8px) !important;
  border-top: 1px solid rgba(0,212,255,0.08) !important;
}

/* Center Section */
.hud-center-section {
  background: transparent !important;
  border-top: 1px solid rgba(0,212,255,0.06) !important;
}

/* Mini Windows — dünnes Glas */
.hud-miniwin {
  background: rgba(0,212,255,0.03) !important;
  backdrop-filter: blur(4px) !important;
}
.hud-miniwin:hover {
  background: rgba(0,212,255,0.08) !important;
  backdrop-filter: blur(8px) !important;
}
.hud-mw-bar {
  background: rgba(0,212,255,0.05) !important;
}

/* Mission Bar — fast weg */
.hud-mission-bar {
  background: rgba(0,4,12,0.2) !important;
  backdrop-filter: blur(8px) !important;
}

/* Gauge, Data, Feed — komplett transparent */
.hud-gauge-panel,
.hud-data-rows,
.hud-feed-divider,
.hud-feed-tabs,
.hud-cs-bars,
.hud-gauge-clip,
.bw-stream-sidebar-quick,
.hud-comm-header,
.hud-radar-panel { background: transparent !important; }

/* Radar SVG */
.hud-radar-svg circle:first-child { fill: rgba(0,8,20,0.2) !important; }

/* Chat */
.bw-chat-overlay-msgs { background: transparent !important; }
.bw-chat-overlay-input { background: rgba(0,4,12,0.3) !important; }

/* No-Signal Crosshair — komplett transparent */
.bw-stream-empty { background: transparent !important; }

/* Raumschiff-Boden: Glow von unten (Brückeneffekt) */
#bw-stream-mode.space-active::after {
  content: '';
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to top,
    rgba(0, 100, 180, 0.12) 0%,
    rgba(0, 60, 140, 0.06) 50%,
    transparent 100%);
  pointer-events: none;
  z-index: 0;
}