*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:#07120b;font-family:"Trebuchet MS",Arial,sans-serif;color:#fff;user-select:none;-webkit-user-select:none;touch-action:none}
#game canvas{display:block;width:100vw;height:100vh}
.hidden{display:none!important}
#hud{position:fixed;inset:0;pointer-events:none;text-shadow:0 2px 3px #000}
#tl{position:absolute;left:18px;top:14px}#lives{font-size:22px;letter-spacing:4px;color:#ffd84a}
#hp{width:200px;height:12px;background:#0008;border:2px solid #fff8;margin:6px 0;border-radius:3px;overflow:hidden}#hpfill{display:block;height:100%;width:100%;background:linear-gradient(#7f7,#2a2)}
#score{font-size:22px;font-weight:bold;letter-spacing:2px}
#obj{position:absolute;top:14px;left:50%;transform:translateX(-50%);background:#0007;padding:6px 14px;border-radius:6px;font-size:16px;white-space:nowrap}#obj b{color:#ffd84a}
#bossbar{position:absolute;top:52px;left:50%;transform:translateX(-50%);width:min(520px,70vw);text-align:center;font-weight:bold;color:#ff8a6a}#bossbar div{height:14px;background:#0009;border:2px solid #fff9;border-radius:3px;overflow:hidden;margin-top:3px}#bossfill{display:block;height:100%;width:100%;background:linear-gradient(#f86,#c21)}
#br{position:absolute;right:20px;bottom:18px;text-align:right}#weapon{font-size:22px;font-weight:bold;color:#9ef}#ammo{font-size:30px;font-weight:bold}
#xh{position:absolute;left:50%;top:50%;width:0;height:0}#xh i{position:absolute;background:#fff;box-shadow:0 0 2px #000}
#xh i:nth-child(1){width:2px;height:8px;left:-1px;top:-14px}#xh i:nth-child(2){width:2px;height:8px;left:-1px;top:6px}#xh i:nth-child(3){width:8px;height:2px;left:-14px;top:-1px}#xh i:nth-child(4){width:8px;height:2px;left:6px;top:-1px}
#xh::after{content:"";position:absolute;left:-1.5px;top:-1.5px;width:3px;height:3px;background:#f44;border-radius:50%}
#hitm{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px;opacity:0;background:linear-gradient(45deg,transparent 45%,#fff 45%,#fff 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,#fff 45%,#fff 55%,transparent 55%);-webkit-mask:radial-gradient(circle,transparent 5px,#000 6px);mask:radial-gradient(circle,transparent 5px,#000 6px)}
#hitm.kill{filter:drop-shadow(0 0 2px red) hue-rotate(0deg);background-color:transparent}
#dmgring{position:absolute;left:50%;top:50%;width:0;height:0}
.dmg{position:absolute;left:-60px;top:-170px;width:120px;height:40px;transform-origin:60px 170px;background:radial-gradient(ellipse at 50% 100%,#f33d 0,#f330 70%);border-top:4px solid #f44;border-radius:50% 50% 0 0}
#objarrow{position:absolute;color:#ffd84a;font-size:26px;transform:translate(-50%,-50%)}
#vign{position:absolute;inset:0;box-shadow:inset 0 0 120px #f00;opacity:0}
#msg{position:fixed;left:50%;top:32%;transform:translate(-50%,-50%);font-size:44px;font-weight:900;letter-spacing:3px;color:#ffd84a;text-shadow:0 3px 0 #000,0 0 18px #000;pointer-events:none;text-align:center}
#msg.bad{color:#ff5a4a}#msg small{display:block;font-size:18px;color:#fff;letter-spacing:1px}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(#13301cdd,#050c07f2);text-align:center;padding:20px;z-index:5}
h1{font-size:64px;line-height:.95;font-weight:900;color:#ffd84a;text-shadow:0 5px 0 #6a3b00}h1 b{display:block;color:#ff6a3a}h1 em{font-size:34px;color:#9ef}
h2{font-size:48px;color:#ffd84a;margin-bottom:16px}.tag{margin:12px 0;color:#cfe}
.controls{display:flex;gap:34px;margin:14px 0;text-align:left;font-size:15px;line-height:1.6}.controls h3{color:#9ef;margin-top:4px}
kbd{background:#fff2;border:1px solid #fff5;border-radius:4px;padding:0 5px;font-family:monospace}
.s{color:#f86}.m{color:#ff6}.l{color:#6ef}
.big{font-size:26px;font-weight:bold;padding:12px 36px;border-radius:8px;border:3px solid #ffd84a;background:#3a2200;color:#ffd84a;cursor:pointer;margin:10px}
.small{font-size:13px;color:#adc;margin-top:6px}a{color:#9ef}
#touch{position:fixed;inset:0;pointer-events:none;z-index:3}
#stick{position:absolute;left:4vw;bottom:6vh;width:130px;height:130px;border-radius:50%;background:#fff1;border:2px solid #fff4}#knob{position:absolute;left:40px;top:40px;width:50px;height:50px;border-radius:50%;background:#fff5}
#touch button{position:absolute;pointer-events:auto;border-radius:50%;border:3px solid #fff8;background:#0006;color:#fff;font-weight:bold}
#tfire{right:5vw;bottom:8vh;width:96px;height:96px;font-size:18px;background:#a2200099!important}#tjump{right:calc(5vw + 110px);bottom:5vh;width:70px;height:70px}#tads{right:calc(5vw + 20px);bottom:calc(8vh + 110px);width:60px;height:60px;font-size:12px}
@media (max-height:500px){h1{font-size:40px}h1 em{font-size:22px}.controls{font-size:12px;gap:16px;line-height:1.35}h2{font-size:32px}.big{font-size:18px;padding:8px 24px}.tag{margin:4px 0}#msg{font-size:30px}}
@media (pointer:coarse){#br{top:14px;bottom:auto;right:16px}#ammo{font-size:22px}}