*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:"Segoe UI",Arial,Helvetica,sans-serif;color:#fff;user-select:none}
canvas{display:block}
.hud{position:fixed;pointer-events:none;text-shadow:2px 2px 0 #000,0 0 6px #000;font-style:italic;font-weight:800}
#hudTL{left:18px;top:14px;font-size:20px;line-height:1.25}
#hudTL .big{font-size:44px;color:#ffd21f}
#hudTL .lbl{color:#ffb000;font-size:14px;letter-spacing:1px}
#mini{right:14px;top:14px;background:rgba(0,0,0,.35);border:2px solid rgba(255,210,31,.6);border-radius:8px}
#tacho{right:14px;bottom:14px}
#note{left:50%;top:22px;transform:translateX(-50%);display:none;align-items:center;gap:14px;background:rgba(0,0,0,.55);border:3px solid #ffd21f;border-radius:10px;padding:6px 18px;font-size:46px;color:#ffd21f}
#note small{font-size:18px;color:#fff;display:block;font-style:normal}
#msg{left:50%;top:38%;transform:translate(-50%,-50%);font-size:84px;color:#ffd21f;display:none;white-space:nowrap}
#lights{left:50%;top:20%;transform:translateX(-50%);display:none;gap:14px;background:#111;padding:12px 18px;border-radius:12px;border:3px solid #333}
#lights i{display:inline-block;width:46px;height:46px;border-radius:50%;background:#300;margin:0 6px;box-shadow:inset 0 0 8px #000}
#lights i.on{background:#f22;box-shadow:0 0 22px #f22}
#lights.go i{background:#2f4;box-shadow:0 0 22px #2f4}
#help{left:18px;bottom:12px;font-size:13px;font-weight:600;font-style:normal;opacity:.75}
#warn{left:50%;bottom:22%;transform:translateX(-50%);font-size:26px;color:#ff5030;display:none}
.ov{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(20,30,50,.6),rgba(0,0,0,.85))}
.panel{background:linear-gradient(160deg,#1a2233,#0d121c);border:3px solid #ffd21f;border-radius:14px;padding:26px 34px;min-width:440px;box-shadow:0 10px 60px #000}
.panel h1{margin:0 0 4px;font-size:58px;font-style:italic;color:#ffd21f;letter-spacing:2px;text-shadow:3px 3px 0 #a33}
.panel h2{margin:0 0 16px;font-size:24px;font-style:italic;color:#ffd21f}
.panel .sub{color:#9ab;margin-bottom:18px;font-size:14px}
.row{display:flex;justify-content:space-between;align-items:center;margin:9px 0;gap:16px;font-weight:600}
.row input,.row select{background:#0a0f18;color:#fff;border:1px solid #556;border-radius:6px;padding:6px 8px;font-size:15px;width:170px}
.btns{display:flex;gap:10px;margin-top:18px}
button{flex:1;background:#ffd21f;color:#111;border:0;border-radius:8px;padding:12px 16px;font-size:18px;font-weight:900;font-style:italic;cursor:pointer}
button.alt{background:#334;color:#fff}
button:hover{filter:brightness(1.15)}
.keys{margin-top:16px;font-size:12.5px;color:#9ab;line-height:1.6}
table{border-collapse:collapse;width:100%;font-size:17px}
td,th{padding:6px 10px;text-align:left;border-bottom:1px solid #334}
th{color:#ffb000;font-size:13px}
tr.me td{color:#ffd21f;font-weight:800}
.hidden{display:none!important}
.panel.wide{min-width:620px;max-width:94vw;max-height:94vh;overflow:auto}
.cols{display:flex;gap:28px}
.cols>div{flex:1;min-width:280px}
.row input[type=text]{width:170px}
.lobby-err{color:#ff5030;font-weight:700;min-height:20px;margin-top:6px}
#rooms td button{padding:4px 12px;font-size:14px;flex:none}
#rooms .empty{color:#9ab;font-style:italic}
.bot-row td{color:#9ab}
.panel.wide h1{font-size:44px}
.panel.wide .sub{margin-bottom:8px}
.panel.wide .row{margin:6px 0}
.panel.wide h2{margin-bottom:8px}
.panel.wide .btns{margin-top:10px}
.panel.wide .keys{margin-top:8px}