/* ═══════════════════════════════════════════════
   Buzzer – Schülerseite
   ═══════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0f1117;--surface:#161b22;--s2:#1c2333;--s3:#21262d;
  --border:#30363d;
  --text:#e6edf3;--muted:#8b949e;--dim:#6e7681;
  --blue:#388bfd;--blue-d:#1f6feb;
  --green:#3fb950;--green-d:#238636;
  --amber:#d29922;
  --red:#f85149;--red-d:#da3633;
  --r:6px;--rl:10px;
  --sans:'Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:'Cascadia Code','Fira Code','Consolas',monospace;
}
body.light{
  --bg:#f6f8fa;--surface:#ffffff;--s2:#f0f2f5;--s3:#e8eaed;
  --border:#d0d7de;
  --text:#1f2328;--muted:#656d76;--dim:#909499;
  --blue:#0969da;--blue-d:#0550ae;
  --green:#1a7f37;--green-d:#116329;
  --amber:#9a6700;
  --red:#cf222e;--red-d:#a40e26;
}

body{
  font-family:var(--sans);background:var(--bg);color:var(--text);
  font-size:14px;line-height:1.5;min-height:100vh;
}

/* ── JOIN PAGE ── */
.join-page{
  min-height:100vh;display:flex;align-items:center;
  justify-content:center;padding:40px 16px;
}
.join-box{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--rl);padding:32px;width:100%;max-width:400px;
  box-shadow:0 8px 32px rgba(0,0,0,.3);
}
.join-logo{text-align:center;margin-bottom:24px}
.join-logo .logo-icon{font-size:2.5rem;display:block}
.join-logo h1{font-size:1.3rem;font-weight:800;margin-top:8px}
.join-logo p{color:var(--muted);font-size:.82rem}

label{
  display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:var(--muted);margin-bottom:5px;
}
input[type=text]{
  width:100%;padding:7px 11px;background:var(--s3);
  border:1px solid var(--border);border-radius:var(--r);
  font-size:.875rem;color:var(--text);font-family:var(--sans);
  transition:border-color .15s,box-shadow .15s;box-sizing:border-box;
}
input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(56,139,253,.15)}
.form-group{margin-bottom:14px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:8px 18px;border-radius:var(--r);font-size:.875rem;
  font-weight:600;cursor:pointer;text-decoration:none;
  border:1px solid var(--border);background:transparent;
  color:var(--muted);transition:all .15s;font-family:var(--sans);width:100%;
}
.btn-primary{background:var(--blue-d);color:#fff;border-color:var(--blue-d)}
.btn-primary:hover{background:var(--blue);border-color:var(--blue)}

.alert{padding:10px 14px;border-radius:var(--r);margin-bottom:14px;font-size:.82rem;border:1px solid transparent}
.alert-error{background:rgba(248,81,73,.1);color:var(--red);border-color:rgba(248,81,73,.3)}
.alert-info{background:rgba(56,139,253,.08);color:var(--blue);border-color:rgba(56,139,253,.25)}

/* ── BUZZER PAGE ── */
.buzzer-page{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:24px 16px;gap:20px;
}

.buzzer-header{text-align:center}
.buzzer-header h2{font-size:1.1rem;font-weight:700}
.buzzer-header .room-code{
  display:inline-block;font-family:var(--mono);font-size:.85rem;
  font-weight:700;letter-spacing:.15em;color:var(--muted);margin-top:4px;
}

/* Timer-Ring */
.timer-wrap{position:relative;width:100px;height:100px}
.timer-svg{transform:rotate(-90deg)}
.timer-track{fill:none;stroke:var(--s3);stroke-width:6}
.timer-fill{fill:none;stroke:var(--blue);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset .4s linear,stroke .3s}
.timer-fill.urgent{stroke:var(--red)}
.timer-label{
  position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-family:var(--mono);font-size:1.5rem;font-weight:800;
}

/* Status-Chips */
.status-chip{
  padding:4px 14px;border-radius:20px;font-size:.78rem;font-weight:700;
  font-family:var(--mono);border:1px solid transparent;
}
.chip-waiting{background:rgba(210,153,34,.1);color:var(--amber);border-color:rgba(210,153,34,.25)}
.chip-active{background:rgba(63,185,80,.1);color:var(--green);border-color:rgba(63,185,80,.25)}
.chip-finished{background:var(--s3);color:var(--dim);border-color:var(--border)}
.chip-closed{background:rgba(248,81,73,.1);color:var(--red);border-color:rgba(248,81,73,.3)}

/* Buzzer Button */
.buzz-btn{
  width:200px;height:200px;border-radius:50%;border:none;cursor:pointer;
  font-size:1rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  transition:transform .1s,box-shadow .1s,background .2s,color .2s;
  font-family:var(--sans);
  background:var(--green-d);color:#fff;
  box-shadow:0 0 0 6px rgba(35,134,54,.3),0 12px 40px rgba(0,0,0,.4);
}
.buzz-btn:hover:not(:disabled){
  transform:scale(1.04);
  box-shadow:0 0 0 10px rgba(35,134,54,.25),0 16px 48px rgba(0,0,0,.5);
}
.buzz-btn:active:not(:disabled){transform:scale(.97)}
.buzz-btn:disabled{
  background:var(--s3);color:var(--dim);cursor:default;
  box-shadow:0 0 0 4px rgba(100,100,100,.1),0 4px 16px rgba(0,0,0,.2);
}
.buzz-btn.pressed{
  background:var(--blue-d);color:#fff;cursor:default;
  box-shadow:0 0 0 8px rgba(31,111,235,.2),0 8px 24px rgba(0,0,0,.3);
}
.buzz-btn.inactive{
  background:var(--s3);color:var(--dim);cursor:default;
  box-shadow:0 0 0 4px rgba(100,100,100,.1);
}

/* Rang-Anzeige */
.rank-display{text-align:center}
.rank-number{
  font-size:3rem;font-weight:900;font-family:var(--mono);
  line-height:1;
}
.rank-number.rank-1{color:var(--amber)}
.rank-number.rank-2{color:var(--muted)}
.rank-number.rank-3{color:#cd7f32}
.rank-label{font-size:.75rem;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.05em}

/* Info-Box */
.info-box{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--rl);padding:14px 20px;text-align:center;
  font-size:.82rem;color:var(--muted);max-width:300px;width:100%;
}
.info-box strong{color:var(--text)}

/* Warte-State */
.wait-state{text-align:center;color:var(--muted)}
.wait-state .wait-icon{font-size:2rem;display:block;margin-bottom:8px;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}

/* Theme-Button */
.theme-btn{
  position:fixed;top:12px;right:12px;
  background:transparent;border:1px solid var(--border);color:var(--muted);
  border-radius:var(--r);padding:4px 10px;font-size:.7rem;font-weight:600;
  cursor:pointer;transition:background .1s,color .1s;font-family:var(--sans);
}
.theme-btn:hover{background:var(--s3);color:var(--text)}

/* Kicked state */
.kicked-state{text-align:center;padding:40px 20px}
.kicked-state .kick-icon{font-size:3rem;display:block;margin-bottom:12px}
.kicked-state h3{font-size:1.1rem;font-weight:700;margin-bottom:8px}
.kicked-state p{color:var(--muted);font-size:.85rem}

/* Responsive */
@media(max-width:400px){.buzz-btn{width:160px;height:160px;font-size:.875rem}}

::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}