:root{--bg:#0e1322;--card:#161d33;--line:#2a3558;--ink:#eef1fb;--dim:#8f9bc0;--accent:#ffd23f;--hp:#46e08a;--bad:#ff5468}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#0e1322;color:var(--ink);font:15px/1.4 system-ui,"Segoe UI",Roboto,sans-serif;user-select:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
[hidden]{display:none!important}

#menu{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(1200px 700px at 50% 30%,rgba(60,90,200,.35),rgba(8,10,20,.88));padding:16px;z-index:10}
.card{width:min(440px,100%);background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px 26px 22px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.logo{display:flex;align-items:center;gap:12px}
h1{margin:0;font-size:30px;letter-spacing:.5px;font-weight:800}
.lead{color:var(--dim);margin:6px 0 18px}
label{display:block;color:var(--dim);font-size:13px;margin:12px 0 0}
label output{float:right;color:var(--ink)}
input[type=text],#name{display:block;width:100%;margin-top:6px;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:#0f1527;color:var(--ink);font-size:16px;outline:none}
#name:focus{border-color:var(--accent)}
input[type=range]{width:100%;margin-top:8px;accent-color:var(--accent)}
#play{margin-top:20px;width:100%;padding:14px;border:0;border-radius:12px;background:var(--accent);color:#1a1500;font-size:17px;font-weight:800;cursor:pointer;transition:transform .08s,filter .15s}
#play:hover{filter:brightness(1.08)}#play:active{transform:scale(.98)}
#play:disabled{opacity:.6;cursor:wait}
#menuerr{color:var(--bad);margin-top:10px;min-height:1em;font-size:13px}
.keys{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--line);color:var(--dim);font-size:13px;display:grid;gap:7px}
kbd{display:inline-block;padding:1px 7px;border-radius:6px;border:1px solid var(--line);background:#0f1527;color:var(--ink);font:600 12px system-ui;margin:0 2px}

#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
#cross{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px rgba(0,0,0,.6)}
#cross.build{width:14px;height:14px;margin:-7px 0 0 -7px;background:transparent;border:2px solid rgba(255,255,255,.9);border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.5)}
#hitmark{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;opacity:0;transition:opacity .25s}
#hitmark::before,#hitmark::after{content:"";position:absolute;left:50%;top:50%;width:26px;height:3px;margin:-1.5px 0 0 -13px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.6)}
#hitmark::before{transform:rotate(45deg)}#hitmark::after{transform:rotate(-45deg)}
#hitmark.on{opacity:1;transition:none}#hitmark.head::before,#hitmark.head::after{background:var(--bad)}
#vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(255,30,60,.55));opacity:0;transition:opacity .5s}
#vignette.on{opacity:1;transition:none}
#stats{position:absolute;left:12px;top:10px;color:rgba(255,255,255,.7);font-size:12px;text-shadow:0 1px 2px #000}
#feed{position:absolute;right:14px;top:12px;display:grid;gap:6px;justify-items:end}
#feed div{background:rgba(10,14,28,.72);padding:6px 11px;border-radius:8px;font-size:14px;border:1px solid rgba(255,255,255,.08);animation:fi .2s}
#feed b{color:var(--accent)}#feed .me{border-color:var(--accent)}
@keyframes fi{from{opacity:0;transform:translateX(12px)}}
#board{position:absolute;left:50%;top:18%;transform:translateX(-50%);background:rgba(12,17,32,.9);border:1px solid var(--line);border-radius:14px;padding:12px 16px;min-width:380px}
#board table{width:100%;border-collapse:collapse}
#board th{color:var(--dim);font-weight:600;font-size:12px;text-align:left;padding:4px 8px}
#board td{padding:5px 8px;border-top:1px solid rgba(255,255,255,.06)}
#board td:nth-child(n+3),#board th:nth-child(n+3){text-align:right}
#board tr.me td{color:var(--accent);font-weight:700}
#board .dot{display:inline-block;width:10px;height:10px;border-radius:50%}
#dead{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:rgba(80,0,10,.35)}
#dead .big{font-size:30px;font-weight:800;text-shadow:0 2px 8px #000}#dead .sub{color:#ffd9de;margin-top:6px}
#bottom{position:absolute;left:0;right:0;bottom:16px;display:flex;flex-direction:column;align-items:center;gap:10px}
#health{position:relative;width:min(360px,70vw);height:22px;border-radius:7px;background:rgba(10,14,28,.7);border:1px solid rgba(255,255,255,.12);overflow:hidden}
#hpfill{position:absolute;inset:0;width:100%;background:linear-gradient(90deg,#27b865,var(--hp));transition:width .15s}
#hptxt{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:13px;text-shadow:0 1px 2px #000}
#bar{display:flex;gap:8px}
.slot{width:70px;height:58px;border-radius:10px;background:rgba(10,14,28,.7);border:2px solid rgba(255,255,255,.14);display:flex;flex-direction:column;justify-content:space-between;padding:5px 7px;transition:transform .1s,border-color .1s}
.slot.on{border-color:var(--accent);transform:translateY(-6px);background:rgba(40,36,10,.75)}
.slot i{font-style:normal;font-weight:800;font-size:12px;color:var(--dim)}.slot.on i{color:var(--accent)}
.slot b{font-size:13px;font-weight:700}
#ammo{display:flex;gap:6px;align-items:center;height:14px}
#ammo i{width:9px;height:16px;border-radius:3px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3)}
#ammo i.on{background:#ff8a3d;border-color:#ffc48a}
#ammo .rl{font-size:12px;color:var(--accent);font-weight:700;text-shadow:0 1px 2px #000}
.slot.sep{margin-left:12px}
#cross.ads{width:4px;height:4px;margin:-2px 0 0 -2px}
#cross.pick{width:10px;height:10px;margin:-5px 0 0 -5px;opacity:.85}
#hint{position:absolute;left:0;right:0;bottom:2px;text-align:center;color:rgba(255,255,255,.4);font-size:11px}
@media (max-width:700px){#bar .slot{width:50px}.slot b{font-size:11px}}