*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:#07040c;color:#fff}body{font-family:"Press Start 2P",monospace;user-select:none;-webkit-user-select:none}canvas#game{position:fixed;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated}canvas#blood{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:pixelated;z-index:9}.hidden{display:none!important}button{font-family:inherit;cursor:pointer}:root{--red: #ff3a2a;--blue: #40d0ff;--gold: #ffc840;--ink: #0c0812}.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:20}#title{background:radial-gradient(ellipse at 50% 55%,#0a04100d,#06020ac7 75%)}.title-inner{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;padding:16px}.logo{font-size:clamp(38px,8.5vw,108px);letter-spacing:2px;line-height:1;display:flex;gap:.25em;align-items:baseline;filter:drop-shadow(0 0 26px rgba(255,30,40,.45))}.logo span{display:inline-block}.logo .l1,.logo .l3{color:#f2eef6;text-shadow:6px 6px 0 #1a0408,0 0 2px #fff}.logo .l2{color:#ff2a3a;font-size:.72em;text-shadow:5px 5px 0 #3a0408;transform:translateY(-.1em) rotate(-4deg)}.logo .l3{position:relative}.logo .l3:after{content:"";position:absolute;left:12%;top:100%;width:10px;height:34px;background:linear-gradient(#b0101a,#6a0008);box-shadow:28px -6px 0 -2px #9a0e16,58px 4px #b0101a,88px -10px 0 -3px #8a0a12;animation:drip 3.5s ease-in infinite}@keyframes drip{0%{height:0}60%{height:34px}to{height:40px;opacity:.9}}.tagline{margin-top:10px;position:relative;z-index:1;color:#c8a8d8;font-size:10px;letter-spacing:4px;text-shadow:2px 2px 0 #000}#levels{display:flex;gap:14px;margin-top:6px}.level{width:230px;min-height:120px;padding:14px;text-align:left;background:#0e0816db;border:3px solid #3a2a4a;color:#fff;box-shadow:5px 5px #000;display:flex;flex-direction:column;gap:8px;transition:transform .1s}.level.on{border-color:#ff3a4a;box-shadow:5px 5px #000,0 0 24px #ff283c59}.level.on:hover{transform:translateY(-3px)}.level.locked{opacity:.45;cursor:not-allowed;filter:grayscale(.7)}.lv-num{font-size:10px;color:#ff5a6a}.lv-name{font-family:Pirata One,serif;font-size:30px;line-height:1;color:#f4e8ff;letter-spacing:1px}.lv-desc{font-size:7px;line-height:1.8;color:#b8a8c8}button.big,#btn-quit,#btn-menu,#btn-restart{background:#ff2a3a;color:#1a0306;border:0;padding:16px 28px;font-size:16px;box-shadow:0 5px #6a0610,0 0 26px #ff283c8c}button.big:hover{background:#ff6a4a}#btn-quit,#btn-menu,#btn-restart{font-size:10px;padding:10px 16px;background:#c8c0d8;box-shadow:0 4px #56506a}#btn-quit:hover,#btn-menu:hover,#btn-restart:hover{background:#fff}#menu-opts{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}.opt{font-size:9px;color:#e0d4ec;display:flex;align-items:center;gap:8px;text-shadow:2px 2px 0 #000}.opt span{min-width:34px;text-align:center;color:#fff}.opt button{background:#1a1024;color:#ff6a7a;border:2px solid #ff6a7a;width:24px;height:24px;font-size:10px}.controls{font-size:8px;line-height:2.2;color:#b0a0c0;text-shadow:2px 2px 0 #000}.c-red{color:var(--red)}.c-blue{color:var(--blue)}.c-gold{color:var(--gold)}#vesper-title{position:absolute;left:22px;bottom:22px;display:flex;gap:12px;align-items:center;font-size:8px;line-height:1.9;color:#d8e8f0;text-align:left;background:#080610bf;border:2px solid #3a3a5a;padding:8px 12px 8px 8px;box-shadow:4px 4px #000}#vesper-title span{color:#6ad8ff}#vesper-title canvas{width:56px;height:56px;image-rendering:pixelated;border:2px solid #6ad8ff}#click-to-begin{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;background:#040208e6;font-size:20px;color:#ff4a5a;cursor:pointer}#click-to-begin div{animation:blink 1s steps(2) infinite}#click-to-begin small{font-size:8px;color:#8a7a9a}@keyframes blink{50%{opacity:.35}}.panel{background:#0e0816f0;border:4px solid #ff2a3a;padding:26px 34px;display:flex;flex-direction:column;gap:14px;align-items:center;box-shadow:8px 8px #000;min-width:380px}.panel h2{color:#ff5a6a;font-size:24px;text-shadow:3px 3px 0 #000}#pause,#results{background:#0000008c}#res-sub{font-size:9px;color:#b8a8c8}#res-rows{display:flex;flex-direction:column;gap:8px;width:100%;font-size:11px;margin:6px 0}#res-rows .r{display:flex;justify-content:space-between;gap:30px;color:#ddd}#res-rows .r b{color:#ffc840}#res-grade{font-family:Pirata One,serif;font-size:64px;color:#ff3a4a;text-shadow:4px 4px 0 #000;line-height:1}#hud{position:fixed;inset:0;pointer-events:none;z-index:10;text-shadow:2px 2px 0 #000}#hud-tl{position:absolute;left:18px;top:16px;display:flex;gap:12px;align-items:flex-start}#portrait{width:76px;height:76px;image-rendering:pixelated;border:4px solid #3b6fd1;box-shadow:4px 4px #000,inset 0 0 0 2px #0c1830}.hud-col{display:flex;flex-direction:column;gap:7px;padding-top:2px}.hud-1p{color:#ffc23c;font-size:18px}.hud-1p span{color:#c8b8d8;font-size:8px;margin-left:8px;vertical-align:middle}.bar{position:relative;width:240px;height:18px;background:#1a0508;border:3px solid #0a0a0e;box-shadow:3px 3px #000;overflow:hidden}#hp-fill,#hp-ghost{position:absolute;left:0;top:0;bottom:0}#hp-ghost{background:#ffe0c0;width:100%;transition:width .6s .2s}#hp-fill{width:100%;background:repeating-linear-gradient(90deg,#ff3b2f 0 6px,#c21a12 6px 8px);z-index:1;transition:width .08s}.hud-nums{font-size:26px}#hud.lowhp #hp-fill{animation:blink .5s steps(2) infinite}#hud-tr{position:absolute;right:16px;top:14px;background:#080610c7;padding:10px 14px;min-width:250px;border:2px solid #24203a;box-shadow:4px 4px #000;font-size:11px;display:flex;flex-direction:column;gap:7px}#hud-tr .row{display:flex;justify-content:space-between;gap:24px;color:#e8e4f0}#hud-tr .row b{color:#fff;font-weight:400}#hud-tr .row.combo span,#hud-tr .row.combo b{color:#ffc23c}#st-zone{font-size:7px;color:#b0a0c8}#route{position:relative;height:6px;background:#2a2038;margin-top:2px}#route-fill{position:absolute;left:0;top:0;bottom:0;background:#ff3a4a;width:0}#route .stop{position:absolute;top:-3px;width:4px;height:12px;background:#8a7aa0}#route-train{position:absolute;top:-5px;width:8px;height:16px;background:#fff;box-shadow:0 0 8px #ff3a4a;left:0;transform:translate(-50%)}#boss{position:absolute;left:50%;top:14px;transform:translate(-50%);width:min(560px,52vw);text-align:center}.boss-row{display:flex;align-items:center;gap:10px}.boss-skull{width:34px;height:34px;background:#ff2a3a;clip-path:polygon(20% 0,80% 0,100% 30%,100% 65%,75% 70%,75% 100%,25% 100%,25% 70%,0 65%,0 30%);box-shadow:0 0 10px #ff2a3a}#boss-bar{flex:1;height:20px;background:#1a0306;border:3px solid #000;box-shadow:3px 3px #000;overflow:hidden}#boss-fill{height:100%;width:100%;background:repeating-linear-gradient(90deg,#ff3b5a 0 6px,#b0142e 6px 8px);transition:width .15s}#boss-weak{width:22px;height:22px;border:3px solid #000;box-shadow:0 0 12px currentColor;background:currentColor;color:var(--red)}#boss-name{color:#ff4a4a;font-size:22px;letter-spacing:3px;margin-bottom:6px;text-shadow:3px 3px 0 #3a0006,0 0 16px rgba(255,40,40,.7)}#boss-sub{font-size:10px;color:#e0d0e8;margin-top:4px;letter-spacing:2px}#upgrade{position:absolute;left:22px;top:130px;width:330px;background:#060c18e6;border:3px solid #3ac8ff;box-shadow:0 0 0 3px #0a2030,5px 5px #000,0 0 22px #3cc8ff59;padding:0 0 10px;animation:cardIn .25s steps(4)}@keyframes cardIn{0%{transform:translate(-60px);opacity:0}}.up-head{display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,#ffc23c,#ffdc70);color:#1a0e00;font-size:13px;padding:6px 10px 6px 6px;text-shadow:none}.up-head .chev{margin-left:auto;font-size:18px}.up-vesper{width:30px;height:30px;image-rendering:pixelated;border:2px solid #1a0e00}.up-body{display:flex;gap:12px;padding:12px 12px 6px;align-items:center}#up-icon{width:64px;height:64px;image-rendering:pixelated;border:3px solid #ffc23c;background:#1a1420;flex:none}#up-name{color:#ffc23c;font-size:13px;line-height:1.4}#up-desc{font-size:8px;line-height:1.8;color:#e8eef4;margin-top:6px}#up-next{padding:0 12px 8px;font-size:7px;color:#6a8aa0;line-height:1.9;min-height:6px}.up-keys{display:flex;gap:10px;padding:0 12px}.up-keys .k{flex:1;font-size:11px;padding:8px;display:flex;align-items:center;gap:10px;justify-content:center;border:3px solid}.up-keys .k i{font-style:normal;background:#fff;color:#000;padding:3px 5px;text-shadow:none;font-size:10px}.up-keys .accept{border-color:#3aff7a;color:#3aff7a;background:#143c1e99}.up-keys .skip{border-color:#8a8a9a;color:#d8d8e0;background:#1e1e2899}#upgrade.flash .accept{background:#3aff7a;color:#000}#zone-banner{position:absolute;left:0;right:0;top:24%;text-align:center;animation:zb 5s ease-out forwards}#zone-banner .zb-1{font-size:10px;color:#c8a8d8;letter-spacing:6px}#zone-banner .zb-2{font-family:Pirata One,serif;font-size:64px;color:#f4ecff;text-shadow:4px 4px 0 #1a0010,0 0 24px rgba(255,60,80,.55);margin-top:6px}@keyframes zb{0%{opacity:0;transform:scale(1.1)}10%{opacity:1;transform:none}80%{opacity:1}to{opacity:0}}#center-msg{position:absolute;left:0;right:0;top:32%;text-align:center;font-size:30px;color:#ffc23c;text-shadow:4px 4px 0 #3a0a00,0 0 18px rgba(255,120,30,.7)}#popups{position:absolute;left:50%;top:60%;transform:translate(-50%);display:flex;flex-direction:column-reverse;align-items:center;gap:4px}#popups .p{font-size:13px;color:#ffc23c;animation:pop 1.3s ease-out forwards;white-space:nowrap}#popups .p.big{font-size:22px;color:#ff5a3a}#popups .p.cyan{color:#6ae0ff}@keyframes pop{0%{transform:scale(1.7);opacity:0}12%{transform:scale(1);opacity:1}75%{opacity:1}to{transform:translateY(-40px);opacity:0}}#numbers{position:absolute;inset:0;overflow:hidden}#numbers .n{position:absolute;font-size:12px;color:#fff;transform:translate(-50%,-50%);will-change:transform;white-space:nowrap}#numbers .n.crit{font-size:17px}#numbers .n.weak{opacity:.6;font-size:9px;color:#8a8a96}#indicators .ind{position:absolute;width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-bottom:26px solid #ff2a3a;filter:drop-shadow(0 0 6px #ff2a3a);transform-origin:50% 50%}#crosshair{position:absolute;left:50%;top:50%;width:30px;height:30px;transform:translate(-50%,-50%)}#crosshair i{position:absolute;background:#fff;box-shadow:1px 1px #000}#crosshair i:nth-child(1){left:14px;top:0;width:3px;height:9px}#crosshair i:nth-child(2){left:14px;bottom:0;width:3px;height:9px}#crosshair i:nth-child(3){top:14px;left:0;width:9px;height:3px}#crosshair i:nth-child(4){top:14px;right:0;width:9px;height:3px}#crosshair b{position:absolute;left:14px;top:14px;width:3px;height:3px;background:#ff3a4a}#hitmarker{position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%) rotate(45deg);opacity:0}#hitmarker:before,#hitmarker:after{content:"";position:absolute;background:#fff}#hitmarker:before{left:15px;top:0;width:4px;height:34px;clip-path:polygon(0 0,100% 0,100% 35%,0 35%,0 65%,100% 65%,100% 100%,0 100%)}#hitmarker:after{top:15px;left:0;height:4px;width:34px;clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%)}#hitmarker.kill:before,#hitmarker.kill:after{background:#ff3b2f}#vesper{position:absolute;left:50%;bottom:150px;transform:translate(-50%);display:flex;gap:12px;align-items:center;background:#060a14d1;border:2px solid #3a5a7a;padding:8px 14px 8px 8px;box-shadow:4px 4px #000;max-width:min(640px,70vw);animation:vIn .2s steps(3)}@keyframes vIn{0%{opacity:0;transform:translate(-50%,10px)}}#vesper-face{width:52px;height:52px;image-rendering:pixelated;border:2px solid #6ad8ff;flex:none}.v-name{font-size:8px;color:#6ad8ff;margin-bottom:7px}#vesper-text{font-size:10px;line-height:1.8;color:#eef4ff}#kick{position:absolute;left:50%;bottom:24px;transform:translate(-50%);display:flex;gap:14px;align-items:center;background:#280408d9;border:3px solid #ff2a3a;box-shadow:4px 4px #000,0 0 16px #ff283c80;padding:10px 18px 10px 12px}#kick .boot{width:40px;height:34px;background:#ff3a4a;clip-path:polygon(20% 0,55% 0,55% 55%,100% 62%,100% 100%,12% 100%,12% 60%)}#kick .k1{font-size:20px;color:#fff}#kick .k1 i{font-style:normal;background:#fff;color:#000;padding:2px 6px;font-size:14px;margin-left:6px;text-shadow:none}#kick .k2{font-size:8px;color:#ffb0b8;margin-top:6px}#kick.now{background:#ffdc3cf2;border-color:#fff}#kick.now .k1,#kick.now .k2{color:#1a0800;text-shadow:none}#kick.now .boot{background:#1a0800}#sweep-warn{position:absolute;left:0;right:0;top:42%;text-align:center;font-size:26px;color:#ff2a3a;animation:blink .25s steps(2) infinite}.weapon-panel{position:absolute;left:18px;bottom:18px;width:300px;background:#060810d1;border:3px solid #2a2a3a;box-shadow:4px 4px #000;padding:8px 12px 10px;--wc: #40d0ff}.weapon-panel.right{left:auto;right:18px;text-align:right}.weapon-panel.swap{animation:wpSwap .3s steps(3)}@keyframes wpSwap{50%{transform:translateY(12px);opacity:.4}}.wp-top{display:flex;align-items:center;gap:12px;justify-content:space-between}.wp-icon{width:120px;height:40px;image-rendering:pixelated}.wp-auto{font-size:11px;color:var(--wc)}.wp-auto small{display:block;font-size:7px;color:#8a8a9a;margin-top:4px}.wp-name{font-size:7px;color:#aaa;margin-top:2px}.wp-ammo{font-size:28px;margin-top:6px}.wp-ammo .wp-max{font-size:14px;color:#bbb}.wp-ammo.reload b{color:#ff5a4a;animation:blink .3s steps(2) infinite}.wp-pips{display:flex;gap:3px;margin-top:6px}.weapon-panel.right .wp-pips{justify-content:flex-end}.wp-pips i{flex:1;max-width:14px;height:8px;background:var(--wc);box-shadow:1px 1px #000}.wp-pips i.off{background:#22222c}.weapon-panel.wrong{border-color:#5a2a2a}.weapon-panel.right-color{border-color:var(--wc);box-shadow:4px 4px #000,0 0 14px color-mix(in srgb,var(--wc) 45%,transparent)}#cine .cbar{position:fixed;left:0;right:0;height:11vh;background:#000;z-index:15;animation:cineIn .8s ease-out}#cine .top{top:0}#cine .bot{bottom:0}@keyframes cineIn{0%{height:0}}#fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;z-index:16;transition:opacity 1.6s}#fade.on{opacity:1}#dmg-flash{position:absolute;inset:0;box-shadow:inset 0 0 180px 50px #ff0000bf;opacity:0}