: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)}.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}}