/* Startseite – style.css – V4 */


/* Startseite – minimal, OBS-friendly */
:root{
  --bg:#0b0d12;
  --panel:#121624;
  --panel2:#0f1320;
  --text:#e8ecf3;
  --muted:#a9b2c3;
  --line:#22304a;
  --btn:#1b2740;
  --btn2:#26385d;
  --accent:#4da3ff;
  --danger:#ff4d6d;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1000px 600px at 50% 0%, #18203a 0%, var(--bg) 55%) fixed;
  color:var(--text);
  font: 14px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

#app{min-height:100%; display:flex; flex-direction:column}

.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, rgba(18,22,36,.9), rgba(18,22,36,.55));
  backdrop-filter: blur(6px);
  position:sticky; top:0; z-index:50;
}
.brand-title{font-size:18px; font-weight:700; letter-spacing:.2px}
.brand-sub{font-size:12px; color:var(--muted); margin-top:2px}
.viewpill{display:flex; gap:10px; align-items:center}
.pill{
  padding:6px 10px; border:1px solid var(--line);
  border-radius:999px; background:rgba(15,19,32,.7); color:var(--text);
  font-weight:600;
}
.pilllink{
  color:var(--accent); text-decoration:none; font-weight:600;
}
.pilllink:hover{text-decoration:underline}

.view{padding:16px; flex:1}
.hidden{display:none}

.panel{
  background: linear-gradient(180deg, rgba(18,22,36,.85), rgba(18,22,36,.65));
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px 14px 12px;
  margin-bottom:14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.30);
}

h2{
  margin:0 0 10px;
  font-size:14px;
  letter-spacing:.25px;
  text-transform:uppercase;
  color:#d6dded;
}

.muted{color:var(--muted)}
code{background:rgba(0,0,0,.25); padding:2px 6px; border-radius:8px; border:1px solid rgba(255,255,255,.08)}

.games{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:8px}
.btn{
  background: linear-gradient(180deg, var(--btn2), var(--btn));
  border:1px solid rgba(255,255,255,.10);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
  letter-spacing:.2px;
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform: translateY(1px)}
.btn.primary{border-color: rgba(77,163,255,.35)}
.btn.danger{border-color: rgba(255,77,109,.40)}

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.span2{grid-column:1 / -1}
.rowhead{font-weight:800; margin-bottom:6px; color:#dbe3f5}

.form label{display:block; font-size:12px; color:var(--muted); margin:8px 0 4px}
input[type="text"], input[type="number"], input:not([type]){
  width:100%;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(10,13,22,.55);
  color:var(--text);
  outline:none;
}
input:focus{border-color: rgba(77,163,255,.55); box-shadow: 0 0 0 3px rgba(77,163,255,.12)}

.controls{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:8px;
  margin-top:10px;
}
.ctrl{
  background: rgba(10,13,22,.38);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:8px;
}
.ctrl span{display:block; font-size:11px; color:var(--muted); margin-bottom:4px}
.ctrl input{padding:8px; border-radius:10px}

.actions{display:flex; gap:10px; align-items:center; margin-top:10px; flex-wrap:wrap}
.actions .spacer{flex:1}

.soundrow{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.soundrow input{min-width:340px; flex:1}
.vol{display:flex; gap:8px; align-items:center}
.vol input[type="range"]{width:160px}

.footer{padding:12px 16px; border-top:1px solid var(--line); background: rgba(15,19,32,.35)}

/* Player stage */
.stage{
  position:relative;
  width:1920px;
  height:1080px;
  margin: 0 auto;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
  background: radial-gradient(900px 500px at 50% 25%, rgba(77,163,255,.16), rgba(0,0,0,0) 60%),
              linear-gradient(180deg, rgba(18,22,36,.35), rgba(0,0,0,.35));
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
}

.stage-hint{
  max-width:1920px;
  margin:10px auto 0;
  color:var(--muted);
  font-size:12px;
}

.cam{
  position:absolute;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.cam iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
  transform-origin: center center;
}
.cam .namebar{
  position:absolute;
  left:12px; right:12px; bottom:10px;
  padding:8px 10px;
  border-radius:12px;
  background: rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(5px);
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,.65);
  pointer-events:none;
}


/* =========================================================
   V2: EXAKT 1920x1080 – alles sichtbar, kein Scrollen
   ========================================================= */
html, body{
  width:1920px;
  height:1080px;
  overflow:hidden;
}

#app{
  width:1920px;
  height:1080px;
}

/* Topbar kompakter (nur im Moderator sichtbar) */
.topbar{
  position:relative;          /* nicht sticky -> spart "scroll-context" */
  padding:10px 12px;
}

.brand-title{font-size:16px}
.brand-sub{font-size:11px; margin-top:1px}

.view{
  padding:10px;
  height:calc(1080px - 58px); /* Topbar-Höhe kompakt einkalkuliert */
  overflow:hidden;            /* kein Scrollen */
}

/* Player: volle Fläche, ohne Topbar */
body.is-player .topbar{display:none}
body.is-player .view{
  padding:0;
  height:1080px;
}

/* Player-Stage soll exakt die Fläche füllen */
body.is-player .stage{
  width:1920px;
  height:1080px;
  margin:0;
  border-radius:0;
  border:0;
  box-shadow:none;
}

/* =========================================================
   Moderator: Panels kompakt + 2-Spalten Layout ohne Scroll
   - Links: Spiele + Test-Sounds
   - Rechts: Kameras & Namen (groß, über beide Zeilen)
   ========================================================= */
body.is-mod #modView{
  display:grid;
  grid-template-columns: 640px 1fr;
  grid-template-rows: auto auto;
  gap:10px;
  align-content:start;
}

body.is-player #modView{ display:none !important; }


#modView > .panel{margin:0}

/* Reihenfolge der Panels aus HTML:
   1) Spiele
   2) Kameras & Namen
   3) Test-Sounds
*/
#modView > .panel:nth-of-type(1){grid-column:1; grid-row:1;}
#modView > .panel:nth-of-type(2){grid-column:2; grid-row:1 / span 2;}
#modView > .panel:nth-of-type(3){grid-column:1; grid-row:2;}

/* Panels allgemein kleiner */
.panel{
  padding:10px 10px 8px;
  border-radius:12px;
}

h2{
  font-size:12px;
  margin:0 0 8px;
}

/* Buttons + Text kompakter */
.btn{
  padding:8px 10px;
  border-radius:10px;
  font-size:12px;
}

.muted{font-size:12px}

/* Form-Elemente kompakter */
.form label{font-size:11px; margin:6px 0 3px}

input[type="text"], input[type="number"], input:not([type]){
  padding:7px 8px;
  border-radius:10px;
  font-size:12px;
}

/* Grid enger */
.grid2{gap:10px}
.rowhead{margin-bottom:4px; font-size:12px}

/* Controls: enger + kleinere Boxen */
.controls{
  gap:6px;
  margin-top:8px;
}
.ctrl{
  padding:6px;
  border-radius:10px;
}
.ctrl span{font-size:10px; margin-bottom:3px}
.ctrl input{padding:6px; border-radius:9px; font-size:12px}

/* Actions kompakter */
.actions{gap:8px; margin-top:8px}

/* Soundrow kompakter */
.soundrow{gap:8px}
.soundrow input{min-width:220px}
.vol input[type="range"]{width:140px}

/* stage-hint existiert in V2 nicht mehr; falls noch irgendwo: ausblenden */
.stage-hint{display:none}

/* Footer existiert in V2 nicht mehr; falls noch irgendwo: ausblenden */
.footer{display:none}

/* =========================================================
   V4: Player-Overlay "Next up" + Animation
   ========================================================= */
body.is-player .nextup{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0 0 48px 0;
  pointer-events:none;
  z-index:20;
}

body.is-player .nextup-inner{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  animation: nextupFloat 2.4s ease-in-out infinite;
}

body.is-player .nextup-text{
  font-weight:800;
  letter-spacing:.3px;
  text-transform:uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,.65);
  font-size:14px;
}

body.is-player .nextup-spinner{
  width:16px;
  height:16px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.28);
  border-top-color: rgba(77,163,255,.95);
  animation: spin 0.9s linear infinite;
}

body.is-player .dots span{
  display:inline-block;
  width:10px;
  text-align:center;
  animation: dotPulse 1.2s infinite;
}
body.is-player .dots span:nth-child(2){animation-delay:.15s}
body.is-player .dots span:nth-child(3){animation-delay:.30s}

@keyframes spin{
  to{ transform: rotate(360deg); }
}
@keyframes dotPulse{
  0%, 80%, 100%{ opacity:.15; transform: translateY(0); }
  40%{ opacity:1; transform: translateY(-2px); }
}
@keyframes nextupFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}