html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:"Courier New",monospace;color:#dfe}
canvas{display:block}
#hud div{position:fixed;pointer-events:none}
#cross{left:50%;top:50%;width:6px;height:6px;margin:-3px;border:1px solid #fff;border-radius:50%}
#hp{left:20px;bottom:20px;font-size:28px;color:#7f9}
#ammo{right:20px;bottom:20px;font-size:28px}
#loot{right:20px;top:20px;font-size:18px;color:#fd6}
#msg{left:0;right:0;top:18%;text-align:center;font-size:26px;text-shadow:0 0 6px #000}
#hit{inset:0;background:radial-gradient(transparent 50%,rgba(255,0,0,.6));opacity:0;transition:opacity .3s}
#menu{position:fixed;inset:0;background:rgba(5,10,15,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}
#menu h1{font-size:64px;letter-spacing:12px;margin:0 0 10px}
.keys{opacity:.7;font-size:14px}
#play{font:inherit;font-size:22px;padding:12px 40px;background:#2a7;color:#fff;border:0;cursor:pointer;margin-top:16px}
body{color:#cfd6c8}
#hp{color:#b8c78a}
#loot{color:#d9a441;top:70px}
#cross{border-color:#d9a441}
#menu{background:rgba(16,19,18,.92)}
#menu h1{color:#b8c78a}
#play{background:#4b5a35;color:#e8efd8;border:1px solid #b8c78a}
#play:hover{background:#5d7040}
#compass{position:fixed;top:8px;left:50%;transform:translateX(-50%);pointer-events:none;z-index:5}
#vols{display:grid;grid-template-columns:repeat(3,auto);gap:8px 20px;margin-top:14px;font-size:13px;opacity:.9}
#vols label{display:flex;flex-direction:column;align-items:center;gap:2px}
#vols input{accent-color:#b8c78a;width:120px}
#menu{z-index:10}
#shopBtn{font:inherit;font-size:16px;padding:8px 24px;background:#2c322e;color:#d9a441;border:1px solid #d9a441;cursor:pointer;margin-top:12px}
#shop{display:none;max-width:640px;margin-top:10px;font-size:13px}
#shop.open{display:block}
#shop h3{margin:8px 0 4px;color:#b8c78a;font-size:14px}
#shop .coins{color:#d9a441;font-size:16px}
#shop .items{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
#shop button{font:inherit;font-size:12px;padding:6px 10px;background:#232826;color:#cfd6c8;border:2px solid #4b5a35;cursor:pointer}
#shop button.on{background:#4b5a35;color:#fff}
#menu{overflow:auto}
#coins{position:absolute;right:20px;top:105px;font-size:28px;font-weight:bold;color:#fd6;text-shadow:0 0 6px #000;transition:transform .15s}#coins.pop{transform:scale(1.35)}
#kills{right:20px;top:145px;font-size:34px;font-weight:bold;color:#e8e2c0;text-shadow:0 0 6px #000;transition:transform .15s}#kills.pop{transform:scale(1.35);color:#d9a441}