*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:#183b4c;color:#fff4db;font:15px/1.45 "Trebuchet MS",sans-serif;min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto}
header,footer{padding:12px clamp(12px,4vw,55px)}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
header a{color:#ffe4a3;text-decoration:none;font-weight:bold}
h1,h2{font-family:Georgia,serif;line-height:1.08;margin:0}
h1{font-size:clamp(20px,4vw,32px)}
#network{min-width:7ch;text-align:right}
main{position:relative;display:grid;place-items:center;isolation:isolate;min-height:490px;overflow:hidden;background:#99ddef}
canvas{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:-1}
#hud,#equipment,#room{position:absolute;background:#183b4cf2;border:1px solid #fff4db56;border-radius:12px;padding:7px 12px;pointer-events:none}
#hud{top:12px;left:50%;transform:translateX(-50%);text-align:center;display:grid}
#score{font-size:26px;line-height:1}
#room{top:12px;left:12px;display:grid;font-size:13px}
#roomCode{user-select:all;letter-spacing:.08em}
#equipment{bottom:15px;right:15px}
#crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;color:white;font:bold 24px monospace;text-shadow:0 1px 4px #152c43}
#crosshair.hit{color:#ffbd45}
.panel,.notice{grid-area:1/1;z-index:1}
.panel{width:min(380px,calc(100% - 24px));background:#183b4cf5;padding:24px;border-radius:22px;border:1px solid #fff4db70;box-shadow:0 14px 40px #112f4a60}
.panel h2{font-size:28px}
#finish{text-align:center}
#finish button{margin-top:16px}
form{margin-top:18px}
label{display:block;margin-bottom:5px}
.join{display:flex;gap:8px}
input,button{font:inherit;border-radius:9px;padding:9px 12px;border:1px solid #ecd7a8}
input{width:100%;min-width:0;text-transform:uppercase;background:#fffaed;color:#183b4c}
button{background:#ffe198;color:#183b4c;font-weight:bold;cursor:pointer;white-space:nowrap}
button:disabled{opacity:.7;cursor:default}
:focus-visible{outline:3px solid #70def2;outline-offset:3px}
#message{margin:8px 0 0;color:#ffe198}
#message:empty{display:none}
p.notice{background:#183b4cf5;border-radius:12px;padding:10px 14px}
#respawn{align-self:end;margin-bottom:65px}
footer{text-align:center;font-size:13px}