html,body{background:#101820;height:100%;margin:0;padding:0;overflow:hidden}#app{position:fixed;inset:0}canvas{touch-action:none;display:block}.joystick{opacity:0;pointer-events:none;z-index:10;background:#10182059;border:2px solid #ffffff59;border-radius:50%;width:120px;height:120px;margin:-60px 0 0 -60px;transition:opacity .15s;position:fixed}.joystick.active{opacity:1}.joystick-knob{background:#ffffff73;border-radius:50%;width:52px;height:52px;margin:-26px 0 0 -26px;position:absolute;top:50%;left:50%}.damage-number{color:#ff5a4a;text-shadow:-1px -1px #2a0d08,1px -1px #2a0d08,-1px 1px #2a0d08,1px 1px #2a0d08;pointer-events:none;z-index:20;font:700 22px sans-serif;position:fixed;top:0;left:0}#hud{pointer-events:none;z-index:30;font-family:sans-serif;position:fixed;inset:0}.hud-health{top:calc(10px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));gap:4px;display:flex;position:fixed}.heart{filter:drop-shadow(0 2px 2px #00000080);background-image:url(/sprites/bottle.png);background-position:0 0;background-size:800% 400%;width:26px;height:52px}.heart.empty{filter:grayscale()brightness(.5);opacity:.55}.hud-quest{top:calc(10px + env(safe-area-inset-top));color:#e8ecf2;white-space:nowrap;background:#0c1016c7;border:2px solid #ffc85059;border-radius:999px;align-items:center;gap:8px;padding:8px 18px;font-size:17px;font-weight:700;display:flex;position:fixed;left:50%;transform:translate(-50%)}.hud-quest svg{width:20px;height:20px}.hud-quest .gold{color:#ffce4a}.hud-ammo{top:calc(10px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));color:#e8ecf2;font-variant-numeric:tabular-nums;background:#0c1016c7;border:2px solid #fff3;border-radius:999px;align-items:center;gap:8px;padding:8px 16px;font-size:19px;font-weight:800;display:flex;position:fixed}.hud-ammo svg{width:20px;height:20px}.hud-caps{top:calc(56px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));color:#bcd6f5;font-variant-numeric:tabular-nums;background:#0c1016c7;border:2px solid #fff3;border-radius:999px;align-items:center;gap:6px;padding:5px 14px;font-size:15px;font-weight:800;display:flex;position:fixed}.hud-caps svg{width:18px;height:18px}.hud-mute{top:calc(100px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));cursor:pointer;pointer-events:auto;background:#0c1016c7;border:2px solid #fff3;border-radius:50%;width:40px;height:40px;font-size:18px;position:fixed}.hud-buttons{right:calc(16px + env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));gap:14px;display:flex;position:fixed}.hud-btn{pointer-events:auto;touch-action:none;cursor:pointer;background:#141c24a6;border:3px solid #ffffff80;border-radius:50%;place-items:center;width:76px;height:76px;display:grid;position:relative}.hud-btn:active{background:#3c5064cc}.hud-btn svg{width:40px;height:40px}.hud-btn span{color:#fff;background:#24465a;border:2px solid #9fdcf5;border-radius:50%;place-items:center;width:24px;height:24px;font-size:13px;font-weight:800;display:grid;position:absolute;bottom:-6px;right:-2px}.hud-minimap{left:calc(16px + env(safe-area-inset-left));bottom:calc(18px + env(safe-area-inset-bottom));background:#0a0e0a99;border:3px solid #ffffff59;border-radius:50%;width:140px;height:140px;position:fixed;overflow:hidden}.hud-minimap .compass{color:#ffd964;z-index:1;text-shadow:0 1px 2px #000;font-weight:800;position:absolute;top:3px;left:50%;transform:translate(-50%)}.hud-hint{color:#ffffff8c;font-size:13px;transition:opacity 1.5s;position:fixed;bottom:12px;left:50%;transform:translate(-50%)}@media (pointer:coarse){.hud-hint{display:none}}.hud-screen{z-index:40;pointer-events:auto;background:#06080cb8;place-items:center;display:grid;position:fixed;inset:0}.hud-screen .panel{text-align:center;color:#fff}.hud-screen h1{color:#ffce4a;text-shadow:0 3px #0006;margin:0 0 8px;font-size:44px}.hud-screen p{color:#ffffffbf;margin:0 0 24px;font-size:17px}.hud-screen button{color:#fff;cursor:pointer;background:#24465a;border:2px solid #9fdcf5;border-radius:10px;padding:12px 26px;font-size:18px;font-weight:700}.hud-screen button:hover{background:#2f5a75}.pwa-toast{z-index:50;color:#fff;cursor:pointer;background:#141c24eb;border:2px solid #9fdcf5;border-radius:999px;padding:10px 20px;font:600 14px sans-serif;position:fixed;bottom:16px;left:50%;transform:translate(-50%)}