/* GBXQuiz – Grunddesign (Neon-Glass, transparent fürs Overlay) */
:root{
  --radius:18px;
  --shadow: 0 20px 60px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--text);background:radial-gradient(1200px 800px at 30% 10%, rgba(139,92,246,.25), transparent 55%),
radial-gradient(1000px 700px at 80% 20%, rgba(59,130,246,.22), transparent 55%),
linear-gradient(180deg, #050816, #02030d 55%, #050816);
}

/* Admin Layout */
body.admin{min-height:100vh;}
.admin-shell{display:flex;min-height:100vh}
.sidebar{width:260px;flex:0 0 260px;position:sticky;top:0;height:100vh;overflow:auto;
  padding:18px 16px;
  background: rgba(2,6,23,.72);
  border-right:1px solid var(--border);
  backdrop-filter: blur(18px);
}
.content{flex:1;min-width:0}
.wrap{max-width:1240px;margin:0 auto;padding:26px 26px 40px}

.brand{display:flex;align-items:center;gap:12px;padding:10px 10px 14px 10px;margin-bottom:10px}
.logo{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-weight:900;letter-spacing:.6px;
  background: linear-gradient(135deg, rgba(139,92,246,.38), rgba(59,130,246,.28));
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.brandname{font-weight:900;font-size:14px;line-height:1}
.brandsub{opacity:.75;font-size:12px;margin-top:4px}

.snav{display:grid;gap:8px;margin-top:8px}
.snav-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;
  color:var(--text);text-decoration:none;border:1px solid transparent;
  background: rgba(255,255,255,.03);
}
.snav-link:hover{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.05);transform: translateY(-1px)}
.snav-link:active{transform: translateY(0)}
.snav-link.danger{background: rgba(239,68,68,.10);border-color: rgba(239,68,68,.22)}
.sidebar-footer{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}

/* Mobile: Sidebar wird zur Topbar */
@media (max-width: 980px){
  .admin-shell{display:block}
  .sidebar{width:auto;position:sticky;height:auto;z-index:30;border-right:none;border-bottom:1px solid var(--border)}
  .snav{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sidebar-footer{margin-top:10px;padding-top:10px}
  .wrap{padding:18px}
}

.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
backdrop-filter: blur(16px);padding:18px}
.grid{display:grid;gap:14px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width: 900px){.grid.two{grid-template-columns:1fr}}

.page{display:grid;gap:14px}
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px 16px;border:1px solid rgba(255,255,255,.10);border-radius:18px;
  background: rgba(0,0,0,.18);
}
.pagetitle{font-size:28px;font-weight:950;letter-spacing:.2px}
.pagesub{opacity:.75;font-size:13px}

.table-wrap{width:100%;overflow:auto;border-radius:16px;border:1px solid rgba(255,255,255,.08)}
.table{border:0}
.table th,.table td{white-space:nowrap}
.table td:last-child,.table th:last-child{white-space:normal}

.h1{font-size:28px;margin:0 0 6px 0;font-weight:800;letter-spacing:.2px}
.p{opacity:.9;margin:0 0 12px 0}

.btn{cursor:pointer;display:inline-flex;gap:8px;align-items:center;justify-content:center;
padding:10px 14px;border-radius:14px;border:1px solid var(--border);
background: linear-gradient(135deg, rgba(139,92,246,.25), rgba(59,130,246,.20));
color:var(--text);text-decoration:none;user-select:none}
.btn:hover{transform: translateY(-1px);border-color: rgba(255,255,255,.22)}
.btn:active{transform: translateY(0)}
.btn.danger{background: linear-gradient(135deg, rgba(239,68,68,.25), rgba(244,63,94,.20));}
.btn.ghost{background: rgba(255,255,255,.03)}

.field{display:grid;gap:6px}
label{font-size:12px;opacity:.9}
input,select,textarea{width:100%;padding:10px 12px;border-radius:14px;border:1px solid var(--border);
background: rgba(0,0,0,.25);color:var(--text);outline:none}
textarea{min-height:90px;resize:vertical}
small{opacity:.75}

.table{width:100%;border-collapse:collapse;overflow:hidden;border-radius:16px}
.table th,.table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}
.table th{font-size:12px;opacity:.85}

.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;
background: rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)}
.badge.good{background: rgba(34,197,94,.10);border-color: rgba(34,197,94,.25)}
.badge.warn{background: rgba(234,179,8,.10);border-color: rgba(234,179,8,.25)}

.hr{height:1px;background:rgba(255,255,255,.08);margin:14px 0}

/* Frontend / Overlay */
body.overlay{background:transparent}
.overlay-root{min-height:100vh;padding:18px;display:flex;flex-direction:column;gap:16px}
.panel{background: var(--panel);border:1px solid var(--border);border-radius:22px;box-shadow: var(--shadow);
backdrop-filter: blur(18px);padding:16px}

.titlebar{display:flex;align-items:center;justify-content:center;gap:12px}
.titlebar h1{margin:0;font-size:28px;font-weight:900;letter-spacing:.3px}
.titlebar .dot{width:10px;height:10px;border-radius:999px;background: var(--accent);box-shadow:0 0 20px var(--accent)}

.question{display:grid;gap:12px}
.question .prompt{font-size:26px;font-weight:800;line-height:1.15;text-align:center}
.answers{display:grid;gap:10px}
.answers.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width: 820px){.answers.two{grid-template-columns:1fr}}

.answer{padding:12px 14px;border-radius:18px;border:1px solid rgba(255,255,255,.12);
background: rgba(0,0,0,.18);display:flex;gap:10px;align-items:center}
.answer .letter{width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;
background: linear-gradient(135deg, rgba(139,92,246,.30), rgba(59,130,246,.24));border:1px solid rgba(255,255,255,.14);font-weight:900}
.answer.correct{border-color: rgba(34,197,94,.45);box-shadow:0 0 22px rgba(34,197,94,.25)}
.answer.hidden{opacity:.0;filter:blur(6px)}

.streamers{display:grid;gap:12px;grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));}
.streamer{padding:14px;border-radius:20px;border:1px solid rgba(255,255,255,.12);
background: rgba(0,0,0,.16);display:grid;gap:8px;align-content:start;position:relative;overflow:hidden}
.streamer .box{aspect-ratio:1/1;border-radius:18px;background: rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.10)}
.streamer .name{font-weight:800;text-align:center}
.streamer .points{opacity:.9;text-align:center}
.streamer.winner{border-color: rgba(34,197,94,.55);box-shadow:0 0 30px rgba(34,197,94,.20)}
.streamer.locked{opacity:.45}
.streamer.buzzed::after{content:"GEbuzzert";position:absolute;top:10px;right:10px;font-size:11px;
padding:6px 10px;border-radius:999px;background: rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}

.pause{display:flex;align-items:center;justify-content:center;min-height:40vh}
.pause .tile{padding:22px 26px;border-radius:26px;background: var(--panel);border:1px solid var(--border);
box-shadow: var(--shadow);backdrop-filter: blur(18px);text-align:center;max-width:860px;width:100%}
.pause .tile h2{margin:0;font-size:44px;font-weight:900}
.pause .tile p{margin:10px 0 0 0;opacity:.9;font-size:18px}

.timer{margin-top:12px;font-size:20px;font-weight:800;opacity:.95}