:root{--ink:#d7ddd2;--dim:#8b9488;--acc:#c4412f;--acc2:#e0a73a;--panel:rgba(10,12,10,.72);--line:rgba(255,255,255,.12);--font:'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;--mono:'Consolas','SF Mono',monospace}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#05070a;color:var(--ink);font-family:var(--font);user-select:none;-webkit-user-select:none}
canvas#game{position:fixed;inset:0;display:block}
.hidden{display:none!important}
button{font-family:inherit}
#labels{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.lbl{position:absolute;left:0;top:0;font:600 11px var(--font);color:#e9efe5;text-shadow:0 1px 2px #000,0 0 3px #000;white-space:nowrap;text-align:center;will-change:transform}
.lbl i{display:block;width:44px;height:4px;margin:2px auto 0;background:#000a;border-radius:2px;overflow:hidden}
.lbl i b{display:block;height:100%;background:#7bd27a}
.float{position:absolute;font:800 16px var(--font);color:#fff;text-shadow:0 2px 3px #000;pointer-events:none;animation:rise .8s ease-out forwards}
.float.head{color:#ffd84a;font-size:22px}
@keyframes rise{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,-48px)}}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:2;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}
#flash{position:fixed;inset:0;pointer-events:none;z-index:2;background:#b00;opacity:0;transition:opacity .35s}
#flash.on{opacity:.38;transition:none}

.screen{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;flex-direction:column}
#menu{background:#07090a}
.menu-bg{position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,#3a1b17 0,transparent 45%),radial-gradient(circle at 20% 90%,#18241a 0,transparent 50%),linear-gradient(180deg,#0b0d0e,#050607);opacity:.95}
.menu-bg::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.menu-box{position:relative;width:min(520px,92vw);padding:28px 30px;background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--acc);backdrop-filter:blur(6px);text-align:center}
.biohazard{font-size:38px;color:var(--acc);line-height:1}
h1{margin:4px 0 0;font-size:56px;font-weight:900;letter-spacing:10px;color:#e8ece4}
h1 span{color:var(--acc)}
.tagline{color:var(--dim);margin:6px 0 18px;font-size:13px;letter-spacing:.5px}
input{background:rgba(0,0,0,.55);border:1px solid var(--line);color:var(--ink);padding:11px 12px;font:600 15px var(--font);outline:none;letter-spacing:1px;width:100%}
input:focus{border-color:var(--acc2)}
#code{text-transform:uppercase;text-align:center;width:150px}
.menu-row{display:flex;gap:8px;margin:8px 0;justify-content:center}
.menu-row.small{margin-top:14px}
.btn{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--ink);padding:11px 16px;font:700 12px var(--font);letter-spacing:2px;cursor:pointer;flex:1;transition:background .15s,border-color .15s}
.btn:hover{background:rgba(255,255,255,.13);border-color:var(--acc2)}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.primary:hover{background:#d9503c}
.btn.ghost{background:transparent}
.btn.small{flex:none;padding:6px 14px}
.link{background:none;border:0;color:var(--acc2);cursor:pointer;font-size:11px}
.err{color:#ff7a6a;font-size:13px;min-height:18px;margin-top:8px}
.rooms{margin-top:14px;text-align:left;font-size:12px;color:var(--dim)}
.rooms-h{display:flex;justify-content:space-between;letter-spacing:2px;margin-bottom:4px}
.room-row{display:flex;justify-content:space-between;padding:6px 8px;border:1px solid var(--line);margin-top:4px;cursor:pointer;color:var(--ink)}
.room-row:hover{border-color:var(--acc2)}

#loading{background:#06080a;gap:14px}
#loading h2{letter-spacing:12px;font-size:30px;margin:0;color:var(--acc)}
.bar-wrap{width:min(420px,80vw);height:4px;background:#222}
#loadBar{height:100%;width:0;background:var(--acc);transition:width .25s}
#loadText{font-size:13px;color:var(--ink);letter-spacing:2px}
#loadTip{font-size:12px;color:var(--dim)}
#clickplay{position:fixed;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);cursor:pointer;text-align:center;font:800 24px var(--font);letter-spacing:6px}
#clickplay small{display:block;margin-top:10px;font:500 12px var(--font);letter-spacing:2px;color:var(--dim)}

#hud{position:fixed;inset:0;z-index:5;pointer-events:none}
#compass{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:340px;height:26px;overflow:hidden;background:var(--panel);border:1px solid var(--line)}
#compassStrip{position:absolute;top:0;height:100%;white-space:nowrap;font:700 12px/26px var(--font);letter-spacing:0}
#compass .tick{position:absolute;left:50%;top:0;width:2px;height:100%;background:var(--acc2)}
#zoneName{position:absolute;top:42px;left:50%;transform:translateX(-50%);font:600 12px var(--font);letter-spacing:4px;text-transform:uppercase;color:var(--acc2);text-shadow:0 1px 3px #000}
#topinfo{position:absolute;top:10px;left:12px;font:12px var(--mono);color:var(--dim);display:flex;gap:14px}
#mini{position:absolute;top:10px;right:10px;width:170px;height:170px;border:1px solid var(--line);background:rgba(0,0,0,.55);border-radius:50%}
#vitals{position:absolute;left:14px;bottom:14px;width:230px;padding:10px 12px;background:var(--panel);border:1px solid var(--line)}
.vit{display:flex;align-items:center;gap:8px;margin:5px 0}
.vit label{width:68px;font:700 9px var(--font);letter-spacing:1.5px;color:var(--dim)}
.b{position:relative;flex:1;height:9px;background:rgba(0,0,0,.6);border:1px solid #000}
.b i{display:block;height:100%;width:100%;transition:width .2s}
.b em{position:absolute;inset:0;font:700 8px/9px var(--font);text-align:center;font-style:normal;color:#fff;text-shadow:0 1px 1px #000}
.hp i{background:#c4412f}.st i{background:#d8c04a}.fd i{background:#b97a3a}.th i{background:#3d8fcf}.inf i{background:#7ac143}
#lvl{font:700 11px var(--font);letter-spacing:1.5px;color:var(--dim);margin-top:6px}
#lvl b{color:var(--acc2)}
#ammoBox{position:absolute;right:16px;bottom:14px;text-align:right;padding:8px 14px;background:var(--panel);border:1px solid var(--line);min-width:150px}
#wName{font:700 11px var(--font);letter-spacing:2px;color:var(--dim)}
#ammoNum b{font:800 34px var(--font);color:#fff}
#ammoNum span{font:600 16px var(--font);color:var(--dim);margin-left:4px}
#hotbar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:5px}
.slot{width:54px;height:46px;background:var(--panel);border:1px solid var(--line);font:700 10px var(--font);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--dim);position:relative}
.slot b{font-size:15px;color:#fff}
.slot.on{border-color:var(--acc2);color:var(--acc2)}
.slot.miss{opacity:.3}
.slot small{position:absolute;top:2px;left:4px;font-size:9px;color:var(--dim)}
#objectives{position:absolute;right:12px;top:200px;width:210px;padding:8px 10px;background:var(--panel);border:1px solid var(--line);font-size:12px}
#objectives h4{margin:0 0 6px;font:700 10px var(--font);letter-spacing:2px;color:var(--acc2)}
.obj{margin:3px 0;color:var(--ink)}.obj.done{color:#7bd27a;text-decoration:line-through}
#radio{position:absolute;top:70px;left:50%;transform:translateX(-50%);max-width:620px;padding:8px 16px;background:rgba(40,28,10,.85);border:1px solid var(--acc2);color:#ffe9b8;font:600 13px var(--font);text-align:center;opacity:0;transition:opacity .4s}
#radio.show{opacity:1}
#prompt{position:absolute;left:50%;top:60%;transform:translateX(-50%);padding:6px 14px;background:var(--panel);border:1px solid var(--acc2);font:700 13px var(--font);letter-spacing:1px;opacity:0}
#prompt.show{opacity:1}
#crosshair{position:absolute;left:50%;top:50%;width:0;height:0}
#crosshair i{position:absolute;left:-10px;top:-10px;width:20px;height:20px;border:1.5px solid rgba(255,255,255,.75);border-radius:50%;box-shadow:0 0 3px #000;transition:transform .1s}
#crosshair i::after{content:'';position:absolute;left:8px;top:8px;width:2px;height:2px;background:#fff}
#crosshair.ads i{transform:scale(.55)}
#hitmark{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;opacity:0;transition:opacity .25s}
#hitmark::before,#hitmark::after{content:'';position:absolute;left:12px;top:-2px;width:2px;height:30px;background:#fff;transform:rotate(45deg)}
#hitmark::after{transform:rotate(-45deg)}
#hitmark.on{opacity:1;transition:none}#hitmark.head::before,#hitmark.head::after{background:#ff4630}
#chat{position:absolute;left:14px;bottom:190px;width:330px;pointer-events:auto}
#chatLog{max-height:120px;overflow:hidden;font-size:12px;line-height:1.45;text-shadow:0 1px 2px #000;display:flex;flex-direction:column;justify-content:flex-end}
#chatLog .sys{color:var(--acc2)}#chatLog .rad{color:#ffe9b8}
#chatIn{margin-top:4px;padding:6px 8px;font-size:12px;opacity:.0;pointer-events:none}
#chatIn.on{opacity:1;pointer-events:auto}
#team{position:absolute;left:14px;top:40px;font:600 11px var(--font)}
.tm{padding:3px 8px;margin-bottom:3px;background:var(--panel);border-left:3px solid #7bd27a;min-width:140px}
#perf{position:absolute;left:12px;top:70px;font:11px/1.4 var(--mono);color:#9fe39f;background:rgba(0,0,0,.6);padding:6px 8px;white-space:pre}
#downScreen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle,rgba(80,0,0,.2),rgba(30,0,0,.85));color:#ffb3a8}
#downScreen h2{font-size:42px;letter-spacing:10px;margin:0 0 8px}

.panel-screen{position:fixed;inset:0;z-index:15;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center}
.inv-box{width:min(820px,94vw);padding:20px 24px;background:rgba(10,12,10,.92);border:1px solid var(--line);border-top:3px solid var(--acc);max-height:92vh;overflow:auto}
.inv-box.narrow{width:min(400px,92vw);display:flex;flex-direction:column;gap:10px}
.inv-box h3{margin:0 0 12px;letter-spacing:4px;font-size:15px}
.inv-box h3 small{font-weight:400;letter-spacing:1px;color:var(--dim);margin-left:10px;font-size:11px}
.inv-box h4{margin:0 0 8px;font:700 10px var(--font);letter-spacing:2px;color:var(--acc2)}
.inv-cols{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:18px}
.irow{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border:1px solid var(--line);margin-bottom:4px;font-size:12px;background:rgba(255,255,255,.03)}
.irow.sel{border-color:var(--acc2)}
.irow button{background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--ink);font-size:10px;padding:3px 7px;margin-left:4px;cursor:pointer;pointer-events:auto}
.r0{color:#c9cfc6}.r1{color:#6fcf6f}.r2{color:#58a6ff}.r3{color:#c084fc}.r4{color:#ffb020}
.hint{font-size:11px;color:var(--dim);margin:12px 0 0}
#bigMap{display:block;margin:0 auto;background:#0a0d0a;border:1px solid var(--line);max-width:100%}
.inv-box label{display:flex;justify-content:space-between;align-items:center;font-size:13px;gap:12px}
.inv-box select,.inv-box input[type=range]{width:55%;background:#111;color:var(--ink);border:1px solid var(--line);padding:4px}
.inv-box input[type=checkbox]{width:auto}
table.keys{width:100%;border-collapse:collapse;font-size:13px}
table.keys td{padding:5px 6px;border-bottom:1px solid var(--line)}
table.keys td:first-child{color:var(--acc2);font-weight:700;white-space:nowrap}
@media(max-width:900px){#objectives,#mini{display:none}#chat{bottom:150px}}