:root{
  --bg:#090f20;
  --fg:#eef2ff;
  --muted:#a4b1d9;

  --panel:#121a33;
  --panel2:#1a2342;
  --border:#253055;

  --btn:#373966;
  --btn2:#343660;

  --accent:#6ea8fe;
  --accent2:#b39bff;
  --warn:#ffd05a;

  --good:#3de0b5;
  --bad:#ff6767;

  --r:14px;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
html{color-scheme:dark}
body{
  margin:0;
  color:var(--fg);
  font:600 16px/1.35 "Inter",system-ui,Segoe UI,Roboto,Helvetica,Arial;
  background:
    radial-gradient(1200px 600px at 50% -220px,#1c1e49 0%,#0f1331 40%,var(--bg) 70%) fixed,
    var(--bg);
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.32;
  background-image:
    radial-gradient(1px 1px at 8% 12%,#fff8,transparent 2px),
    radial-gradient(1px 1px at 25% 78%,#fff6,transparent 2px),
    radial-gradient(1px 1px at 44% 30%,#fff5,transparent 2px),
    radial-gradient(1px 1px at 63% 62%,#fff8,transparent 2px),
    radial-gradient(1px 1px at 82% 20%,#fff7,transparent 2px),
    radial-gradient(1px 1px at 90% 82%,#fff6,transparent 2px);
  background-repeat:no-repeat;
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.muted{color:var(--muted)}
.right{text-align:right}

/* ===== Topbar ===== */
.topbar{
  height:56px;display:flex;align-items:center;gap:12px;
  padding:0 14px;background:var(--panel);border-bottom:1px solid var(--border);
}
.topbar .brand{font-weight:900}
.topbar .spacer{flex:1}

/* ===== Buttons / Inputs ===== */
button{
  border:1px solid var(--border);
  background:#172138;color:#fff;
  padding:10px 14px;border-radius:10px;cursor:pointer;
  transition:filter .15s,transform .02s;
}
button:hover{filter:brightness(1.06)}
button:active{transform:translateY(1px)}
button.accent{background:#3a5ec9;border-color:#4e71d5}
button.secondary{background:#1a2342}
button.danger{background:#4a2740;border-color:#7a3b6b}
button.small{padding:6px 10px;font-size:.9rem}
button.big{width:100%;padding:14px;font-size:1.05rem}
button.tiny{padding:4px 8px;font-size:.78rem}

input,select{
  width:100%;padding:10px;background:#121938;
  border:1px solid var(--border);border-radius:10px;color:var(--fg);
}
input:focus,select:focus{outline:none;border-color:#4e71d5}

/* ===== Generic Layout ===== */
.container{max-width:1200px;margin:0 auto;padding:18px}
.view{display:none}
.view.active{display:block}
.card{
  background:linear-gradient(180deg,#151a36,#0f1631);
  border:1px solid var(--border);border-radius:16px;
  padding:16px;margin:12px 0;
  box-shadow:0 10px 24px rgba(0,0,0,.3);
}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.menu-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.stack > * + *{margin-top:10px}

/* ===== Lobby ===== */
.player{
  display:flex;align-items:center;gap:10px;
  background:#121938;border:1px solid var(--border);border-radius:12px;
  padding:8px 10px;
}
.player .av{font-size:22px}
.player .nm{font-weight:800}
.player .sc{margin-left:auto;opacity:.9}
.row-right{display:flex;gap:6px;margin-left:8px}

.tabs{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.tab{background:#141d3d;border:1px solid var(--border);padding:8px 12px;border-radius:10px;cursor:pointer}
.tab.active{background:#1a2750;border-color:#3a4f92}
.tabpane{display:none}
.tabpane.active{display:block}

.kv{
  display:grid;grid-template-columns:170px 1fr;
  gap:8px;align-items:center;margin-bottom:6px;font-size:.95rem;
}
.kv label{color:var(--muted)}

.avatars{display:flex;flex-wrap:wrap;gap:8px}
.avatar{
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  background:#141d3d;border:1px solid var(--border);border-radius:10px;cursor:pointer;font-size:22px;
}
.avatar.sel{outline:2px solid var(--accent)}

/* Modus-Helfer */
.only-classic,.only-climb,.only-suddendeath,.only-fastest,
.dep-later,.dep-cover,.dep-both{display:none}

/* ===== Roundbar (Game Header) ===== */
.roundbar{
  position:sticky;top:0;z-index:5;
  height:70px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#312f5b,#2b2c54 60%,transparent 60%);
  box-shadow:0 2px 0 rgba(0,0,0,.3) inset;
}
.roundtitle{font-weight:900;font-size:22px;letter-spacing:.6px}
.roundtrack{
  position:absolute;left:140px;right:140px;top:44px;height:10px;
  background:#202145;border-radius:999px;border:1px solid #2a2b52;overflow:hidden;
}
.roundfill{
  height:100%;width:0;background:var(--warn);
  border-right:3px solid #e4ba4a;transition:width .1s linear;
}
.exit{
  position:absolute;right:14px;top:12px;width:36px;height:36px;
  border-radius:50%;display:grid;place-items:center;
  background:#3a3b6c;border:1px solid var(--border);cursor:pointer;
}

/* ===== Game Layout ===== */
.game-grid{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:60px;
  padding:30px 60px 40px;
}

/* Left leaderboard rail */
.left-rail{width:200px;flex:0 0 200px}
.stars-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:10px;
  background:#2d2e5b;border:1px solid var(--border);font-weight:900;
}
.stars-badge .star{color:var(--warn);font-size:18px}
.arrows{display:flex;flex-direction:column;gap:10px;margin:10px 0 6px}
.arrow{
  width:26px;height:26px;border-radius:8px;
  display:grid;place-items:center;background:#2d2e5b;border:1px solid var(--border);
}
.peers{margin-top:4px}
.peers .pill{
  display:flex;justify-content:space-between;align-items:center;
  background:#121938;border:1px solid var(--border);
  border-radius:12px;padding:8px 10px;margin:6px 0;font-size:.9rem;
}

/* Center stage (NO big card – free on starfield) */
.stage{
  flex:0 0 720px;max-width:720px;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}

/* Artwork (optional, can be hidden von JS) */
.artwrap{
  position:relative;
  width:480px;height:160px;
  border-radius:16px;border:1px solid var(--border);
  overflow:hidden;background:#101532;display:none;
}
.artwrap img{width:100%;height:100%;object-fit:cover;opacity:.9}
.cover-blur{position:absolute;inset:0;backdrop-filter:blur(20px);transition:backdrop-filter .25s linear}

/* Status Text über Antworten (z.B. "TIME'S UP!") */
#hintBox{
  font-weight:900;letter-spacing:.6px;font-size:14px;
  margin-top:6px;margin-bottom:4px;text-transform:uppercase;
}

/* Song-Zeitstrahl */
.timebarbox{
  width:100%;max-width:720px;
  position:relative;margin-top:6px;
}
.timebar-track{
  height:14px;border-radius:999px;border:1px solid var(--border);
  background:#222252;overflow:hidden;
}
.timebar{
  height:100%;width:100%;
  background:var(--warn);transition:width .1s linear;
}
.timebar-last{
  position:absolute;right:12px;top:-30px;
  background:#2a2b52;border:1px solid var(--border);
  border-radius:10px;padding:4px 8px;font-weight:900;display:none;
}

/* Answer grid – exakt wie SongTrivia2 */
.answers{
  width:100%;max-width:720px;
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
  margin-top:10px;
}
.mc{
  background:linear-gradient(180deg,#2f305f,#292a55);
  border:1px solid #3a3c71;
  border-radius:16px;
  height:110px;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;letter-spacing:.8px;text-transform:uppercase;
  box-shadow:0 10px 20px rgba(0,0,0,.4);
  cursor:pointer;
  transition:transform .04s, filter .12s;
  position:relative;
}
.mc:hover{filter:brightness(1.06)}
.mc:active{transform:translateY(1px)}
.mc[disabled]{opacity:.8;cursor:default}

/* eigene Antwort – orange/braun */
.mc.picked{
  background:linear-gradient(180deg,#6a5322,#4c3a17);
  border-color:#c8a45c;color:#fff;
  outline:2px solid #e7c26c88;
}

/* richtige/falsche Lösung */
.mc.good{
  background:linear-gradient(180deg,#1f5f49,#16493a);
  border-color:#1e8a69;color:#e4fff8;
}
.mc.bad{
  background:linear-gradient(180deg,#5c2130,#3c1017);
  border-color:#a3374c;color:#ffd5dd;
}
.mc.is-correct{outline:3px solid var(--good)}
.mc.picked-good{box-shadow:0 0 0 3px rgba(61,224,181,.75) inset}
.mc.picked-bad{box-shadow:0 0 0 3px rgba(255,103,103,.75) inset}

/* Votes-Anzeige auf den Buttons */
.mc .votes{
  position:absolute;right:12px;bottom:10px;
  display:flex;align-items:center;gap:6px;
  font-size:.85rem;font-weight:900;
  text-shadow:0 2px 8px rgba(0,0,0,.5);
}
.mc .votes .dots{display:flex;gap:4px}
.mc .votes .dot{width:8px;height:8px;border-radius:50%;background:#9f8bff}

/* Freitext-Antwort */
.answer-row{
  width:100%;max-width:720px;
  display:flex;gap:8px;justify-content:center;margin-top:8px;
}
.answer-row input{flex:1}

/* Ergebnis-Box (unter den Antworten, wie rechts im Original) */
.resultbox{
  width:100%;max-width:720px;
  background:#161c3b;border:1px solid var(--border);
  border-radius:16px;padding:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  margin-top:10px;
}
#resultBox .title{font-weight:900;margin:8px 0 10px}
#resultBox .pill{
  display:flex;justify-content:space-between;align-items:center;
  background:#232554;border:1px solid var(--border);
  border-radius:12px;padding:8px 10px;margin-bottom:6px;
  font-size:.9rem;
}

/* ===== Overlay (Countdown, Ready, Points, Everyone) ===== */
.overlay{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:18px;z-index:30;background:transparent;pointer-events:none;
}
.overlay.hidden{display:none}
#overlay > *{pointer-events:auto}

.countdown{position:relative;width:220px;height:220px}
.countdown svg{position:absolute;inset:0;transform:rotate(-90deg)}
.countdown .ring{fill:none;stroke:rgba(255,255,255,.12);stroke-width:10}
.countdown .prog{
  fill:none;stroke:var(--accent2);stroke-width:10;stroke-linecap:round;
  filter:drop-shadow(0 0 6px #b39bff);transition:stroke-dashoffset .1s linear;
}
.cd-number{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:110px;font-weight:900;text-shadow:0 4px 0 rgba(0,0,0,.4);
}

.ready{font-weight:900;font-size:34px;letter-spacing:.6px}
.roundpoints{display:flex;gap:16px}
.rp-card{
  background:#1b2237;border:1px solid var(--border);border-radius:16px;
  padding:14px 18px;text-align:center;min-width:180px;
}
.rp-num{font-size:36px;font-weight:900;color:#b9c6ff}
.rp-label{opacity:.75;font-weight:800;letter-spacing:.6px;margin-top:4px}
.everyone{
  font-weight:900;font-size:22px;color:#c7b2ff;
  padding:8px 14px;border-radius:12px;background:#232554;border:1px solid var(--border);
}

/* Große Ergebnis-Karte als Overlay */
.overlay-card {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  background: rgba(6, 10, 22, .85);
  backdrop-filter: blur(4px);
  padding: 24px;
}
.overlay-card.hidden {
  display: none;
}
#resultContent {
  width: 100%;
  max-width: 720px;
  background: #161c3b;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 20px 40px rgba(0,0,0,.5);
}

/* ===== Volume widget ===== */
.volume{
  position:fixed;left:12px;bottom:12px;z-index:40;
  display:flex;align-items:center;gap:8px;
  background:#111a33;border:1px solid var(--border);
  border-radius:10px;padding:8px 10px;
}
#volSlider{width:160px}
#volLabel{font-size:.9rem}

/* ===== Dialoge ===== */
dialog{
  border:1px solid var(--border);
  background:linear-gradient(180deg,#15193a,#0d1130);
  color:#fff;border-radius:16px;padding:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.45);
  max-width:520px;width:min(92vw,520px);
}
dialog::backdrop{background:rgba(6,10,22,.55);backdrop-filter:blur(2px)}
dialog:not([open]){display:none}

/* ===== Responsive ===== */
@media (max-width:1100px){
  .game-grid{
    flex-direction:column;
    align-items:center;
    gap:20px;
    padding:20px;
  }
  .left-rail{width:220px;align-self:flex-start}
}
@media (max-width:800px){
  .answers{grid-template-columns:1fr}
  .stage{flex:1 1 auto}
  .roundtrack{left:80px;right:80px}
}