:root{--orange: #ff7a18;--orange-hi: #ffb347;--blood: #c4120a;--bone: #f3ead8;--ink: #0d0710;--hud-font: "Rubik Mono One", "Arial Black", Impact, sans-serif;--title-font: "Creepster", "Chiller", Impact, fantasy}*{box-sizing:border-box}html,body,#root,.app{margin:0;width:100%;height:100%;overflow:hidden;background:#000;overscroll-behavior:none}body{touch-action:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}body{font-family:var(--hud-font);color:var(--bone);user-select:none;-webkit-user-select:none}canvas{display:block;cursor:crosshair}.hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;text-shadow:0 2px 0 #000,0 0 12px rgba(0,0,0,.7)}.vignette{position:absolute;top:0;right:0;bottom:0;left:0}.vignette.damage{background:radial-gradient(ellipse at center,transparent 35%,rgba(190,0,0,.85) 100%)}.vignette.heal{background:radial-gradient(ellipse at center,transparent 45%,rgba(255,60,90,.7) 100%)}.vignette.lowhp{background:radial-gradient(ellipse at center,transparent 50%,rgba(120,0,0,.75) 100%);opacity:0}.vignette.lowhp.on{animation:pulse .9s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.25}50%{opacity:.75}}.crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#ffe9c4;filter:drop-shadow(0 0 2px #000)}.crosshair.hit{color:#fff}.crosshair.kill{color:#ff3b2f}.top-left{position:absolute;top:18px;left:22px;font-size:20px}.top-left .dim{opacity:.7;font-size:15px;margin-top:4px}.top-center{position:absolute;top:14px;left:50%;transform:translate(-50%);text-align:center}.wave-label{font-size:26px;color:var(--orange-hi);letter-spacing:2px}.wave-label span{font-size:16px;opacity:.7}.remaining{font-size:13px;opacity:.85;margin-top:2px}.boss{margin-top:10px;width:min(520px,70vw)}.boss-name{font-size:13px;color:var(--orange);letter-spacing:2px;margin-bottom:4px}.boss-bar{height:12px;border:2px solid #000;background:#280000b3;box-shadow:0 0 10px #ff5a0080}.boss-bar div{height:100%;background:linear-gradient(#ffb347,#ff5a00 60%,#a32000);transition:width .1s linear}.banner{position:absolute;top:28%;left:0;right:0;text-align:center}.banner-title{font-family:var(--title-font);font-size:clamp(56px,10vw,120px);color:var(--orange);letter-spacing:4px;text-shadow:0 4px 0 #3a0a00,0 0 30px rgba(255,90,0,.7)}.banner-sub{font-size:clamp(14px,2vw,22px);margin-top:4px}.bottom-left{position:absolute;left:24px;bottom:22px}.health{display:flex;align-items:center;gap:10px}.health .heart{font-size:36px}.health .hp{font-size:52px;line-height:1}.health.low .hp{color:#ff4a3a;animation:pulse .9s ease-in-out infinite}.hp-bar{width:220px;height:10px;margin-top:8px;border:2px solid #000;background:#00000080}.hp-bar div{height:100%;background:linear-gradient(90deg,#8a0d06,#ff3b2f)}.bottom-right{position:absolute;right:24px;bottom:22px;text-align:right}.weapon-name{font-size:18px;color:var(--orange-hi);margin-bottom:8px}.slots{display:flex;gap:6px;justify-content:flex-end}.slot{width:44px;height:48px;border:2px solid rgba(0,0,0,.8);background:#0a040c8c;position:relative;display:flex;align-items:center;justify-content:center;opacity:.55}.slot.active{opacity:1;border-color:var(--orange);background:#ff7a1840;box-shadow:0 0 12px #ff7a1899}.slot.locked{opacity:.3}.objective{margin-top:8px;font-size:13px;color:#ffd36a;letter-spacing:1px}.objective{display:flex;align-items:center;justify-content:center}.objective .arrow{margin-right:8px;transform-origin:50% 50%;filter:drop-shadow(0 1px 0 #000)}.slot .key{position:absolute;top:1px;left:4px;font-size:10px}.slot .icon{font-size:22px;text-shadow:none}.ammo{font-size:30px;margin-top:4px;opacity:.8}.menu{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;padding:16px;overflow-y:auto;touch-action:pan-y}.menu .panel{margin:auto}@media (max-height: 500px){.title{font-size:clamp(44px,9vw,90px)}.title.small{font-size:clamp(40px,8vw,80px);margin-bottom:10px}.tagline{margin:8px 0 14px}.controls{margin-top:16px;line-height:1.9}button.big{font-size:16px;padding:12px 24px}}.menu.menu{background:radial-gradient(ellipse at center,#14060a26,#0a0308bf)}.menu.paused,.menu.dead,.menu.victory{background:#080206b8;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.menu.dead{background:radial-gradient(ellipse at center,#5000008c,#0a0000e6)}.panel{text-align:center;max-width:640px;width:100%}.title{font-family:var(--title-font);font-size:clamp(64px,13vw,150px);line-height:.9;color:var(--orange);text-shadow:0 6px 0 #3a0a00,0 0 40px rgba(255,100,0,.6);letter-spacing:4px}.title.small{font-size:clamp(56px,10vw,110px);margin-bottom:18px}.title.blood{color:var(--blood);text-shadow:0 6px 0 #200,0 0 40px rgba(255,0,0,.5)}.tagline{margin:14px 0 26px;font-size:14px;opacity:.9}.summary{margin:0 0 26px;font-size:15px;line-height:1.6}button{font-family:var(--hud-font);cursor:pointer}button.big{font-size:20px;padding:16px 34px;color:var(--ink);background:linear-gradient(#ffb347,#ff7a18);border:3px solid #2a0d00;box-shadow:0 5px #6a2200,0 0 30px #ff7a1880;letter-spacing:1px}button.big:hover{filter:brightness(1.12);transform:translateY(-1px)}button.big:active{transform:translateY(3px);box-shadow:0 2px #6a2200}button.ghost{margin-top:18px;background:transparent;color:var(--bone);border:2px solid rgba(243,234,216,.4);padding:10px 18px;font-size:12px}button.ghost:hover{border-color:var(--orange);color:var(--orange-hi)}.controls{margin-top:30px;font-size:12px;line-height:2.1;opacity:.85}kbd{font-family:var(--hud-font);font-size:11px;padding:2px 7px;border:2px solid rgba(243,234,216,.5);border-bottom-width:3px;border-radius:4px;background:#0006}.settings{margin:24px auto 0;max-width:380px;text-align:left;font-size:12px}.settings label{display:block;margin-bottom:14px}.settings b{color:var(--orange-hi);float:right}.settings input[type=range]{width:100%;margin-top:6px;accent-color:var(--orange)}.touch-layer{position:fixed;top:0;right:0;bottom:0;left:0;touch-action:none;user-select:none;-webkit-user-select:none}.stick,.stick-hint{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:2px solid rgba(243,234,216,.35);background:#0a040c40;pointer-events:none}.stick-hint{left:calc(env(safe-area-inset-left) + 110px);bottom:50px;top:auto;margin:0 0 0 -60px;opacity:.45}.stick .knob,.stick-hint .knob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffb347,#ff7a18 60%,#8a3a00);box-shadow:0 0 14px #ff7a1899}.tbtn{position:absolute;display:flex;align-items:center;justify-content:center;padding:0;border-radius:50%;color:#f3ead8;border:2px solid rgba(243,234,216,.45);background:#0a040c59;touch-action:none}.tbtn.on{background:#ff7a1873;border-color:#ffb347;color:#fff}.tbtn.fire{right:calc(env(safe-area-inset-right) + 34px);bottom:40px;width:104px;height:104px;border-color:#ff7a18b3}.tbtn.jump{right:calc(env(safe-area-inset-right) + 150px);bottom:34px;width:66px;height:66px}.tbtn.pause{right:calc(env(safe-area-inset-right) + 14px);top:12px;width:42px;height:42px;border-radius:10px}.rotate-hint{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:10px 16px;font-size:12px;text-align:center;background:#0a040cb3;border:1px solid rgba(243,234,216,.3);pointer-events:none;animation:fadeout 4s forwards}@keyframes fadeout{0%,70%{opacity:1}to{opacity:0}}@media (orientation: portrait){.rotate-hint{display:block}}.hud.touch .top-left{top:10px;left:calc(env(safe-area-inset-left) + 14px);font-size:14px;display:flex;gap:14px;align-items:baseline}.hud.touch .top-left .dim{margin-top:0;font-size:12px}.hud.touch .top-center{top:8px}.hud.touch .wave-label{font-size:18px}.hud.touch .bottom-left{left:calc(env(safe-area-inset-left) + 14px);top:36px;bottom:auto}.hud.touch .health .heart{font-size:20px}.hud.touch .health .hp{font-size:28px}.hud.touch .hp-bar{width:130px;height:7px;margin-top:4px}.hud.touch .bottom-right{right:calc(env(safe-area-inset-right) + 10px);top:64px;bottom:auto}.hud.touch .weapon-name,.hud.touch .ammo{display:none}.hud.touch .slots{flex-direction:column;gap:6px}.hud.touch .slot{pointer-events:auto;width:46px;height:42px;touch-action:none}.hud.touch .banner{top:22%}.hud.touch .banner-title{font-size:clamp(40px,9vw,80px)}.hud.touch .boss{width:min(360px,50vw)}@media (orientation: portrait){.hud.touch .top-center{top:84px}}@media (max-height: 420px){.hud.touch .slot{width:40px;height:34px}.hud.touch .slot .icon{font-size:18px}.tbtn.fire{width:90px;height:90px;bottom:24px}.tbtn.jump{bottom:20px;right:calc(env(safe-area-inset-right) + 134px)}}