:root{--bg:#0f1220;--card:#181c30;--card2:#222744;--text:#f2f4ff;--muted:#8d93b5;--accent:#7c5cff;--ok:#22c55e;--ko:#ef4444;--r:16px}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh}
h1,h2{margin:0}
h2{font-size:1.25rem;margin-bottom:12px}
.muted,.small{color:var(--muted)}
.small{font-size:.85rem;word-break:break-all}
.error{color:var(--ko);min-height:1.2em;margin:8px 0}
.card{background:var(--card);border-radius:var(--r);padding:24px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
input[type=url],input[type=text]{flex:1;min-width:200px;padding:14px 16px;border-radius:12px;border:2px solid var(--card2);background:var(--bg);color:var(--text);font-size:1rem}
input:focus{outline:none;border-color:var(--accent)}
button{font:inherit;font-weight:700;border:none;border-radius:12px;padding:14px 22px;cursor:pointer;color:var(--text);background:var(--card2)}
button:hover{filter:brightness(1.15)}
button.primary{background:var(--accent)}
button.ok{background:var(--ok);color:#052e12}
button.ko{background:var(--ko)}
button.ghost{background:transparent;border:2px solid var(--card2);color:var(--muted)}
label{color:var(--muted);display:flex;gap:6px;align-items:center}

/* Master */
.master{max-width:1200px;margin:0 auto;padding:20px}
.master header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.tag{background:var(--card);padding:6px 14px;border-radius:999px;color:var(--muted);font-weight:700;letter-spacing:.05em}
.layout{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}
@media(max-width:900px){.layout{grid-template-columns:1fr}}
.lobby-grid{display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:center}
@media(max-width:700px){.lobby-grid{grid-template-columns:1fr}}
.qr img{width:100%;background:#fff;border-radius:12px;padding:8px;display:block}
.video{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mask{position:absolute;inset:0;background:linear-gradient(135deg,#2b2250,#0f1220);display:flex;align-items:center;justify-content:center;font-size:6rem;z-index:2}
.status{font-size:1.6rem;font-weight:800;margin:20px 0 12px;min-height:2em}
.judge{display:flex;gap:16px;margin-bottom:16px}
.judge button{flex:1;font-size:1.6rem;padding:22px}
.board{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.board li{display:flex;align-items:center;gap:10px;background:var(--card2);padding:10px 14px;border-radius:10px}
.board .name{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board .score{font-weight:800;font-size:1.1rem}
.dot{width:10px;height:10px;border-radius:50%;background:var(--ok)}
.dot.off{background:#555}
.board.final li{font-size:1.4rem;padding:16px 20px}
#endScreen{text-align:center}
#endScreen .board{margin:20px auto 28px;max-width:520px;text-align:left}

/* Buzzer */
.buzzer-page{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px;text-align:center;-webkit-user-select:none;user-select:none}
.buzzer-page .card{width:100%;max-width:420px}
.buzzer-page .row{flex-direction:column;align-items:stretch}
.me{display:flex;justify-content:space-between;width:100%;max-width:420px;font-weight:700}
#buzz{width:min(72vw,320px);aspect-ratio:1;border-radius:50%;font-size:2.6rem;font-weight:900;letter-spacing:.05em;color:#fff;background:radial-gradient(circle at 30% 30%,#ff7b7b,#d00000);box-shadow:0 12px 0 #7a0000,0 20px 40px rgba(0,0,0,.5);touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .05s,box-shadow .05s}
#buzz:active:not(:disabled){transform:translateY(8px);box-shadow:0 4px 0 #7a0000}
#buzz:disabled{background:#3a3f5c;box-shadow:0 12px 0 #262a40;color:#8d93b5;font-size:1.3rem;cursor:not-allowed;padding:20px}
#msg{font-size:1.2rem;font-weight:700;min-height:1.5em}