:root{--ink:#f3ead8;--muted:#b9ad96;--panel:#12100eb8;--edge:#ffebc824;--accent:#ffb627;--core:#29e6ff;--danger:#ff3d4d;--ok:#3dff8a;--font:"Barlow Condensed", "Arial Narrow", system-ui, sans-serif}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);font-family:var(--font);background:#0b0d10;margin:0;overflow:hidden}#app canvas{display:block}#ui{pointer-events:none;-webkit-user-select:none;user-select:none;position:fixed;inset:0}#ui .interactive{pointer-events:auto}.menu{pointer-events:auto;background:radial-gradient(at 50% 60%,#1d2a30 0%,#0b0d10 70%);place-items:center;display:grid;position:fixed;inset:0}.menu-card{gap:14px;width:min(440px,100vw - 32px);display:grid}.menu h1{letter-spacing:.08em;color:var(--ink);text-shadow:0 0 24px #29e6ff59;margin:0;font-size:clamp(56px,12vw,96px);line-height:.9}.menu h1 span{color:var(--core)}.menu .tagline{color:var(--muted);letter-spacing:.04em;margin:0 0 12px;font-size:18px}.menu label{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);gap:4px;font-size:14px;display:grid}.menu input{font:inherit;border:1px solid var(--edge);color:var(--ink);background:#ffffff0f;border-radius:4px;outline:none;padding:10px 12px;font-size:22px}.menu input:focus{border-color:var(--accent)}.menu button,.btn{font:inherit;letter-spacing:.1em;text-transform:uppercase;background:var(--accent);color:#1a1206;cursor:pointer;border:0;border-radius:4px;padding:12px;font-size:24px;font-weight:700}.menu button:hover,.btn:hover{filter:brightness(1.1)}.btn.ghost{color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent);background:0 0;margin-top:8px;font-size:18px}.checkpoint{opacity:.8;margin:4px 0 10px;font-size:14px}.menu .hint{color:var(--muted);font-size:15px;line-height:1.4}.menu .error{color:var(--danger);min-height:1.2em;font-size:16px}.hud-top{text-align:center;justify-items:center;gap:6px;display:grid;position:absolute;top:14px;left:50%;transform:translate(-50%)}.phase{letter-spacing:.08em;text-transform:uppercase;text-shadow:0 2px 6px #000c;font-size:30px;font-weight:700}.phase.night{color:#ffd2c8}.phase-sub{color:var(--muted);text-shadow:0 1px 4px #000;font-size:17px}.bar{border:1px solid var(--edge);background:#0000008c;border-radius:2px;width:340px;height:14px;position:relative;overflow:hidden}.bar>i{transform-origin:0;background:var(--core);transition:transform .15s;position:absolute;inset:0}.bar.core>i{background:linear-gradient(90deg, #1aa3c2, var(--core))}.bar.core.low>i{background:linear-gradient(90deg, #a0121f, var(--danger))}.bar-label{letter-spacing:.14em;color:var(--muted);font-size:13px}.hud-bl{gap:6px;display:grid;position:absolute;bottom:20px;left:20px}.hp-row{align-items:center;gap:10px;font-size:28px;font-weight:700;display:flex}.bar.hp{width:240px;height:18px}.bar.hp>i{background:linear-gradient(90deg, #2dbb5c, var(--ok))}.bar.hp.low>i{background:linear-gradient(90deg, #a0121f, var(--danger))}.hud-br{text-align:right;gap:2px;display:grid;position:absolute;bottom:20px;right:22px}.weapon-name{letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-size:20px}.ammo{font-size:46px;font-weight:700;line-height:1}.ammo small{color:var(--muted);font-size:24px}.ammo.empty{color:var(--danger)}.slots{justify-content:flex-end;gap:6px;margin-top:6px;display:flex}.slots span{border:1px solid var(--edge);background:var(--panel);color:var(--muted);padding:2px 8px;font-size:14px}.slots span.on{color:var(--ink);border-color:var(--accent)}.hud-tr{justify-items:end;gap:8px;display:grid;position:absolute;top:16px;right:20px}.scrap{color:var(--accent);text-shadow:0 2px 6px #000;font-size:34px;font-weight:700}.scrap small{letter-spacing:.14em;color:var(--muted);margin-left:6px;font-size:16px}.roster{text-align:right;gap:2px;font-size:16px;display:grid}.roster .dead{opacity:.45;text-decoration:line-through}.roster .ready:after{content:" ✓";color:var(--ok)}.feed{gap:4px;font-size:17px;display:grid;position:absolute;top:16px;left:20px}.feed div{background:var(--panel);border-left:3px solid var(--accent);padding:3px 10px;animation:6s forwards fade}@keyframes fade{0%,80%{opacity:1}to{opacity:0}}.build{justify-items:center;gap:8px;display:none;position:absolute;bottom:22px;left:50%;transform:translate(-50%)}.build.on{display:grid}.build-row{gap:6px;display:flex}.build-row span{text-align:center;background:var(--panel);border:1px solid var(--edge);min-width:88px;color:var(--muted);padding:6px 10px;font-size:18px}.build-row span.on{color:var(--ink);border-color:var(--ok);box-shadow:inset 0 0 12px #3dff8a40}.build-row span.poor{color:var(--danger)}.build-row b{color:var(--accent);margin-left:4px;font-weight:600}.build-hint{color:var(--muted);letter-spacing:.05em;font-size:14px}.build-reason{color:var(--danger);min-height:1.2em;font-size:16px}.crosshair{width:22px;height:22px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.crosshair:before,.crosshair:after{content:"";background:#ffffffe6;position:absolute;box-shadow:0 0 2px #000}.crosshair:before{width:2px;height:18px;top:2px;left:10px}.crosshair:after{width:18px;height:2px;top:10px;left:2px}.crosshair.build:before,.crosshair.build:after{background:var(--ok)}.hitmarker{opacity:0;width:30px;height:30px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(45deg)}.hitmarker:before,.hitmarker:after{content:"";background:#fff;position:absolute}.hitmarker:before{width:2px;height:30px;top:0;left:14px}.hitmarker:after{width:30px;height:2px;top:14px;left:0}.hitmarker.head:before,.hitmarker.head:after{background:#ffe14a}.banner{text-align:center;opacity:0;transition:opacity .3s;position:absolute;top:22%;left:50%;transform:translate(-50%)}.banner.show{opacity:1}.banner h2{letter-spacing:.08em;text-transform:uppercase;text-shadow:0 4px 18px #000000e6;margin:0;font-size:72px}.banner p{color:var(--muted);text-shadow:0 2px 8px #000;margin:4px 0 0;font-size:24px}.vignette{opacity:0;position:absolute;inset:0;box-shadow:inset 0 0 160px 40px #c80000b3}.overlay{text-align:center;background:#08090b9e;place-items:center;display:none;position:absolute;inset:0}.overlay.on{display:grid}.overlay .card{justify-items:center;gap:12px;max-width:640px;padding:16px;display:grid}.overlay h2{letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:60px}.overlay p{color:var(--muted);margin:0;font-size:20px}.keys{text-align:left;grid-template-columns:auto auto;gap:4px 18px;margin-top:8px;font-size:17px;display:grid}.keys kbd{border:1px solid var(--edge);text-align:center;min-width:26px;color:var(--ink);background:#ffffff0f;border-bottom-width:3px;border-radius:3px;padding:1px 6px;font-family:inherit;display:inline-block}.keys span{color:var(--muted)}.stats{text-align:left;grid-template-columns:auto auto;gap:4px 24px;font-size:22px;display:grid}.stats span:nth-child(odd){color:var(--muted)}.sens{color:var(--muted);align-items:center;gap:10px;font-size:16px;display:flex}.death{color:var(--danger)}.dmg{color:#fff;text-shadow:0 2px 4px #000000e6;pointer-events:none;will-change:transform;font-size:22px;font-weight:700;position:absolute;top:0;left:0}.dmg.head{color:#ffe14a;font-size:28px}.dmg.kill{color:#ff6a4a;font-size:30px}.medkits{color:#7dff9a;font-size:18px}.medkits small{color:var(--muted);letter-spacing:.08em;font-size:13px}.slots span{border-bottom:3px solid #0000}.build-row span.locked{opacity:.45}.prompt-wrap{justify-items:center;gap:6px;display:grid;position:absolute;top:62%;left:50%;transform:translate(-50%)}.prompt{background:var(--panel);border:1px solid var(--edge);opacity:0;border-radius:4px;padding:6px 14px;font-size:22px;transition:opacity .15s}.prompt.on{opacity:1}.prompt-bar{opacity:0;width:220px;height:8px}.prompt-bar.on{opacity:1}.prompt-bar>i{background:var(--accent);transition:none}.toast{letter-spacing:.05em;text-shadow:0 3px 12px #000000e6;opacity:0;white-space:nowrap;font-size:34px;font-weight:700;transition:opacity .25s,transform .25s;position:absolute;top:70%;left:50%;transform:translate(-50%)scale(.9)}.toast.show{opacity:1;transform:translate(-50%)scale(1)}.shop{border:1px solid var(--edge);background:#100e0ceb;border-radius:6px;flex-direction:column;width:min(380px,100vw - 32px);display:none;position:absolute;top:90px;bottom:150px;right:22px;box-shadow:0 10px 40px #0009}.shop.on{display:flex}.shop-head{border-bottom:1px solid var(--edge);align-items:center;gap:12px;padding:12px 14px;font-size:22px;display:flex}.shop-head span{color:var(--accent);margin-left:auto;font-weight:700}.shop-head .x{font:inherit;color:var(--muted);border:1px solid var(--edge);cursor:pointer;background:0 0;border-radius:3px;padding:2px 8px;font-size:13px}.shop-weapon{border-left:4px solid var(--rar);background:#ffffff0a;margin:10px 14px 0;padding:10px 12px}.shop-weapon .n{font-size:22px;font-weight:700}.shop-weapon .r{color:var(--rar);letter-spacing:.1em;text-transform:uppercase;font-size:14px}.shop-weapon .s{color:var(--muted);font-size:15px}.shop-weapon .pips{color:#9fe6ff;letter-spacing:1px}.shop-list{padding:4px 14px 10px;overflow-y:auto}.shop h3{letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:12px 0 4px;font-size:13px}.shop button[data-item]{text-align:left;width:100%;font:inherit;color:var(--ink);cursor:pointer;background:#ffffff0d;border:1px solid #0000;border-radius:4px;align-items:center;gap:10px;margin:3px 0;padding:7px 10px;display:flex}.shop button[data-item]:hover:not(:disabled){border-color:var(--accent);background:#ffb62714}.shop button[data-item]:disabled{opacity:.45;cursor:default}.shop button .l{font-size:18px;display:grid}.shop button .l small{color:var(--muted);font-size:13px}.shop button .c{color:var(--accent);margin-left:auto;font-size:18px;font-weight:700}.shop-foot{color:var(--muted);border-top:1px solid var(--edge);padding:8px 14px 12px;font-size:13px}.zmark{text-align:center;pointer-events:none;will-change:transform;display:none;position:absolute;top:0;left:0}.zmark i{background:#ff4a3a40;border:3px solid #ff4a3a;width:16px;height:16px;margin:0 auto;animation:1s infinite zpulse;display:block;transform:rotate(45deg);box-shadow:0 0 12px #ff3c28cc}.zmark span{color:#ffb3a8;text-shadow:0 1px 3px #000;margin-top:6px;font-size:14px;display:block}.zmark.off i{background:#ff4a3a}@keyframes zpulse{50%{box-shadow:0 0 22px #ff3c28}}.sens select{font:inherit;color:var(--ink);border:1px solid var(--edge);background:#ffffff14;border-radius:3px;padding:2px 6px;font-size:16px}.sens small{color:var(--muted);font-size:12px}.mutations{justify-content:center;gap:6px;min-height:0;display:flex}.mutations span{letter-spacing:.1em;text-transform:uppercase;color:#ffd2c8;background:#7814148c;border:1px solid #ff5a4680;border-radius:3px;padding:1px 8px;font-size:14px}.mats{gap:10px;font-size:20px;font-weight:700;display:flex}.mats span small{letter-spacing:.1em;color:var(--muted);margin-left:3px;font-size:11px;font-weight:400}.mats .m-wood{color:#e0b27a}.mats .m-stone{color:#c9c4ba}.mats .m-metal{color:#9fc3e0}.build-row small{color:var(--muted);font-size:12px}.dmg.loot{color:#ffe0a8;font-size:20px}.hotbar{gap:6px;display:flex;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.hotbar.hide{display:none}.hotbar span{background:var(--panel);border:1px solid var(--edge);border-bottom:3px solid var(--rar,var(--edge));min-width:104px;color:var(--muted);text-align:center;padding:16px 10px 8px;font-size:15px;position:relative}.hotbar span.on{color:var(--ink);border-color:var(--accent);background:#ffb6271f}.hotbar span.empty{opacity:.4;min-width:48px}.hotbar i{color:var(--muted);font-size:12px;font-style:normal;position:absolute;top:2px;left:6px}.binds{width:min(520px,100vw - 48px);margin-top:6px}.binds-grid{text-align:left;grid-template-columns:1fr auto;gap:4px 14px;max-height:38vh;padding-right:6px;font-size:15px;display:grid;overflow-y:auto}.binds-grid span{color:var(--muted);align-self:center}.binds button{font:inherit;min-width:96px;color:var(--ink);border:1px solid var(--edge);cursor:pointer;background:#ffffff12;border-bottom-width:3px;border-radius:3px;padding:2px 10px;font-size:15px}.binds button.wait{border-color:var(--accent);color:var(--accent)}.binds>button{min-width:0;margin-top:8px;font-size:13px}.inventory{border:1px solid var(--edge);background:#100e0cf0;border-radius:6px;width:min(760px,100vw - 32px);padding:14px 18px 18px;display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 10px 40px #0009}.inventory.on{display:block}.inv-head{align-items:center;font-size:24px;display:flex}.inv-head .x{font:inherit;color:var(--muted);border:1px solid var(--edge);cursor:pointer;background:0 0;border-radius:3px;margin-left:auto;padding:2px 8px;font-size:13px}.inventory h3{letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px;font-size:13px}.inventory h3 small{letter-spacing:.04em;text-transform:none;margin-left:6px}.inv-row{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.inv-grid{grid-template-columns:repeat(6,1fr);gap:8px;display:grid}.inv-slot{border:1px solid var(--edge);border-left:4px solid var(--rar,transparent);cursor:grab;background:#ffffff0d;border-radius:4px;min-height:86px;padding:18px 8px 6px;position:relative}.inv-slot.empty{cursor:default;background:#ffffff05;border-style:dashed;border-left-color:#0000}.inv-slot.held{box-shadow:0 0 0 1px var(--accent) inset}.inv-slot.dragging{opacity:.4}.inv-slot.over,.inv-scrap.over{border-color:var(--accent);background:#ffb6271a}.inv-slot .k{color:var(--muted);font-size:12px;position:absolute;top:2px;left:6px}.inv-slot .n{font-size:17px;font-weight:700}.inv-slot .r{letter-spacing:.1em;text-transform:uppercase;color:var(--rar);font-size:12px}.inv-slot .s{color:var(--muted);font-size:13px}.inv-slot .p{color:#9fe6ff;letter-spacing:1px;font-size:11px}.inv-foot{align-items:stretch;gap:14px;margin-top:16px;display:flex}.inv-mats{color:var(--muted);flex:1;align-items:center;gap:16px;font-size:13px;display:flex}.inv-mats .m b{color:var(--ink);font-size:22px;display:block}.inv-mats .m-wood b{color:#e0b27a}.inv-mats .m-stone b{color:#c9c4ba}.inv-mats .m-metal b{color:#9fc3e0}.inv-mats .m-scrap b{color:var(--accent)}.inv-scrap{color:#ffb3a8;text-align:center;border:2px dashed #ff5a4699;border-radius:4px;place-items:center;min-width:170px;padding:10px;font-size:18px;display:grid}.inv-scrap small{color:var(--muted);font-size:12px;display:block}@media (width<=1180px){.hotbar{bottom:92px}.hotbar span{min-width:78px;padding:14px 6px 6px;font-size:13px}}.bar.shield{width:240px;height:10px;margin-left:38px}.bar.shield>i{background:linear-gradient(90deg,#2f7fd6,#6ec6ff)}.bar.shield.empty{opacity:.35}.build-row span.hint{background:0 0;border-color:#0000;min-width:0;font-size:14px}.rmark{text-align:center;pointer-events:none;will-change:transform;display:none;position:absolute;top:0;left:0}.rmark i{clip-path:polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%);filter:drop-shadow(0 0 6px #3dff8ae6);background:#3dff8a;width:22px;height:22px;margin:0 auto;animation:1s infinite zpulse;display:block}.rmark span{color:#bfffd4;text-shadow:0 1px 3px #000;margin-top:4px;font-size:14px;display:block}.overlay.downed{background:#3c000059}.overlay.downed h2{color:#ffb020}