:root{--coral:#ff7a52;--navy:#1d2147;--cream:#fff1d6;--ki:#56e8ff;--gold:#ffc94d;--red:#ff2d3d;--display:Impact,"Arial Black","Segoe UI Black",system-ui,sans-serif}*{box-sizing:border-box}html,body{width:100%;height:100%;color:var(--cream);background:#1a1530;margin:0;font-family:Inter,Segoe UI,system-ui,sans-serif;overflow:hidden}canvas{width:100vw;height:100vh;display:block}#od-loading{text-align:center;z-index:20;background:radial-gradient(circle at 50% 60%,#5b2e5e,#1a1530 70%);place-content:center;display:grid;position:fixed;inset:0}#od-loading b{font:900 72px var(--display);letter-spacing:4px;color:var(--coral);text-shadow:5px 5px 0 var(--navy);font-style:italic}#od-loading span{letter-spacing:6px;opacity:.8;font-weight:800;animation:1s infinite od-blink}@keyframes od-blink{50%{opacity:.3}}#od-hud{pointer-events:none;z-index:5;text-shadow:0 2px #0006;position:fixed;inset:0}#od-hud>*{transition:opacity .3s}#od-hud:not(.playing)>:not(.od-brand){opacity:0}.od-brand{font:900 15px var(--display);letter-spacing:3px;color:var(--cream);font-style:italic;position:absolute;top:20px;left:28px}.od-brand span{color:var(--coral);letter-spacing:1px;text-shadow:3px 3px 0 var(--navy);font-size:30px;display:block}.od-wave{text-align:center;position:absolute;top:18px;left:50%;transform:translate(-50%)}.od-wave b{font:900 22px var(--display);letter-spacing:4px;font-style:italic;display:block}.od-wave small{letter-spacing:3px;color:var(--gold);font-size:11px;font-weight:900}.od-boss{opacity:0;width:min(560px,60vw);position:absolute;top:104px;left:50%;transform:translate(-50%)}.od-boss.show{opacity:1!important}.od-boss small{text-align:center;font:900 15px var(--display);letter-spacing:4px;color:#fff;-webkit-text-stroke:.6px #2a0d47;text-shadow:0 1px 6px #2a0d47;display:block}.od-boss div{background:#0008;border:2px solid #d9a8ff;height:12px;margin-top:4px;position:relative;transform:skew(-20deg)}.od-boss i{background:linear-gradient(90deg,#a14dff,#ff6bd5);height:100%;transition:width .15s;display:block}.od-boss u{display:none}.od-boss.stopper{width:min(760px,70vw)}.od-boss.stopper .od-boss-hp{height:18px}.od-boss.stopper u{background:#fff;width:2px;display:block;position:absolute;top:0;bottom:0}.od-boss u:first-of-type{left:33%}.od-boss u:nth-of-type(2){left:66%}.od-boss-poise{width:62%;margin-left:auto;margin-right:auto;display:none;border-width:1px!important;border-color:#ffc94d88!important;height:6px!important}.od-boss.stopper .od-boss-poise{display:block}.od-boss-poise i{background:linear-gradient(90deg,#ff9d2e,#ffe27a)}.od-boss.broken .od-boss-poise{animation:.2s infinite alternate od-pulse;border-color:#fff!important}.od-clash{text-align:center;opacity:0;pointer-events:none;width:min(520px,60vw);position:absolute;top:62%;left:50%;transform:translate(-50%)}.od-clash.show{opacity:1}.od-clash small{font:900 16px var(--display);letter-spacing:6px;color:#ffe27a}.od-clash div{background:linear-gradient(90deg,#a14dff,#ff4d6a);border:3px solid #fff;height:20px;margin:6px 0;overflow:hidden;transform:skew(-20deg)}.od-clash i{background:linear-gradient(90deg,#ffe27a,#7feaff);height:100%;display:block}.od-clash b{font:900 italic 28px var(--display);color:#fff;-webkit-text-stroke:2px var(--navy)}.od-vitals{width:340px;position:absolute;bottom:30px;left:28px}.od-hp,.od-ki,.od-guard{background:#120d26cc;border:2px solid #0008;position:relative;overflow:hidden;transform:skew(-18deg)}.od-hp{border-color:#ffd2c3;height:22px}.od-hp i{background:linear-gradient(90deg,#ff4a3a,var(--coral) 60%,#ffb08a);height:100%;transition:width .12s;display:block}.od-hp b,.od-ki b{font:900 13px var(--display);letter-spacing:2px;position:absolute;top:50%;right:10px;transform:translateY(-50%)skew(18deg)}.od-ki{border-color:#9ff4ff;width:88%;height:16px;margin-top:7px}.od-ki i{background:linear-gradient(90deg,#1aa7ff,var(--ki));height:100%;transition:width .1s;display:block}.od-ki-ticks{background:repeating-linear-gradient(90deg,#0000 0 calc(15% - 2px),#120d26 calc(15% - 2px) 15%);position:absolute;inset:0}.od-ki.full{box-shadow:0 0 18px var(--ki),0 0 40px #56e8ff88;animation:.5s infinite alternate od-pulse}.od-ki.full i{background:linear-gradient(90deg,#fff,var(--ki),#fff);background-size:200% 100%;animation:.6s linear infinite od-shine}@keyframes od-pulse{to{box-shadow:0 0 30px var(--ki),0 0 60px #56e8ffaa}}@keyframes od-shine{to{background-position:-200% 0}}.od-guard{border:0;width:60%;height:6px;margin-top:6px}.od-guard i{background:var(--gold);height:100%;display:block}.od-guard.broken i{background:var(--red);animation:.2s infinite od-blink}.od-style{text-align:right;transition:transform .15s,opacity .3s;position:absolute;top:120px;right:34px}.od-rank{font:900 120px/.9 var(--display);letter-spacing:-6px;color:#fff;-webkit-text-stroke:3px var(--navy);text-shadow:6px 6px 0 var(--navy);font-style:italic;transition:color .2s}.od-style.idle{opacity:0!important}.od-style.r0 .od-rank{color:#b8b3d6}.od-style.r1 .od-rank{color:#9be7ff}.od-style.r2 .od-rank{color:#9dff8a}.od-style.r3 .od-rank{color:var(--gold)}.od-style.r4 .od-rank{color:var(--coral)}.od-style.r5 .od-rank{color:#ff4dd2}.od-style.r6 .od-rank{color:#fff;text-shadow:6px 6px 0 var(--navy),0 0 30px var(--ki),0 0 60px #ff4dd2;animation:.25s infinite alternate od-wobble}.od-style.up{transform:scale(1.25)rotate(-4deg)}@keyframes od-wobble{0%{transform:rotate(-2deg)}to{transform:rotate(2deg)scale(1.04)}}.od-rank-name{font:900 16px var(--display);letter-spacing:5px;margin-top:2px;font-style:italic}.od-style-bar{background:#0007;width:180px;height:6px;margin-top:8px;margin-left:auto;transform:skew(-20deg)}.od-style-bar i{background:#fff;height:100%;display:block}.od-combo{text-align:right;opacity:0;transform-origin:100%;position:absolute;top:330px;right:38px}.od-combo.show{opacity:1!important}.od-combo b{font:900 64px/1 var(--display);color:#fff;-webkit-text-stroke:2px var(--navy);text-shadow:4px 4px 0 var(--coral);font-style:italic}.od-combo span{font:900 15px var(--display);letter-spacing:6px;color:var(--gold);display:block}.od-combo.pop{animation:.16s ease-out od-pop}@keyframes od-pop{0%{transform:scale(1.35)rotate(-3deg)}to{transform:none}}.od-callout{text-align:center;font:900 64px var(--display);letter-spacing:2px;color:#fff;-webkit-text-stroke:3px var(--navy);text-shadow:6px 6px 0 var(--coral);opacity:0;pointer-events:none;font-style:italic;position:absolute;top:24%;left:0;right:0}.od-callout.tone1{text-shadow:6px 6px 0 #1aa7ff,0 0 30px var(--ki)}.od-callout.tone2{text-shadow:6px 6px 0 var(--red)}.od-callout.tone3{text-shadow:7px 7px 0 #ff4dd2,0 0 40px var(--gold);font-size:96px}.od-callout.go{animation:1.1s cubic-bezier(.2,1.6,.4,1) forwards od-call}@keyframes od-call{0%{opacity:0;transform:scale(2.4)skew(-12deg)}12%{opacity:1;transform:scale(.92)skew(-12deg)}20%{transform:scale(1.03)skew(-12deg)}75%{opacity:1;transform:scale(1)skew(-12deg)}to{opacity:0;transform:scale(1.1)translateY(-20px)skew(-12deg)}}.od-prompt{border:2px solid var(--ki);font:900 22px var(--display);letter-spacing:3px;color:#bff8ff;background:#0b1b3aee;padding:10px 22px;position:absolute;bottom:150px;left:50%;transform:translate(-50%)skew(-12deg);box-shadow:0 0 24px #56e8ff66;opacity:0!important}.od-prompt.show{animation:.3s infinite alternate od-pulse;opacity:1!important}.od-help{width:max-content;max-width:calc(100vw - 420px);position:absolute;bottom:10px;left:50%;transform:translate(-50%);opacity:.55!important}.od-keys{letter-spacing:.5px;flex-wrap:wrap;justify-content:center;gap:4px 14px;font-size:11px;font-weight:800;display:flex}.od-keys b{color:var(--gold);margin-right:4px}.od-reticle{opacity:.6;background:#fff8;border-radius:50%;width:6px;height:6px;margin:-3px;position:absolute;top:50%;left:50%}#od-hud.slow:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 160px #56e8ff55}#od-hud.lowhp:before{content:"";animation:1s infinite od-blink;position:absolute;inset:0;box-shadow:inset 0 0 120px #ff2d3d66}.od-arrows{pointer-events:none;z-index:4;position:fixed;inset:0}.od-arrow{width:0;height:0;display:none;position:absolute;top:0;left:0}.od-arrow:before{content:"";filter:drop-shadow(0 0 3px #000a);opacity:.8;border-top:11px solid #0000;border-bottom:11px solid #0000;border-left:26px solid #fff;position:absolute;top:-11px;left:-14px}.od-arrow.big:before{transform:scale(1.4)}.od-arrow.threat:before{border-left-color:var(--gold);opacity:1;animation:.25s infinite od-blink}.od-arrow.danger:before{border-left-color:var(--red);opacity:1;animation:.15s infinite od-blink;transform:scale(1.5)}#od-menu{z-index:10;background:linear-gradient(100deg,#1a1530f2 0%,#2a1b46cc 45%,#1a153000 75%);align-items:center;padding:6vw;display:flex;position:fixed;inset:0}#od-menu[hidden]{display:none}#od-menu section{max-width:640px}#od-menu small{font:900 14px var(--display);letter-spacing:8px;color:var(--coral)}#od-menu h1{font:900 clamp(56px,9vw,128px)/.88 var(--display);letter-spacing:-2px;color:var(--cream);text-shadow:6px 6px 0 var(--navy);margin:18px 0;font-style:italic}#od-menu h1 em{color:var(--coral);font-style:inherit}#od-menu p{color:#e9dcf7;max-width:470px;font-size:16px;font-weight:600;line-height:1.6}#od-menu .od-keys{justify-content:flex-start;gap:6px 16px;max-width:560px;margin:18px 0;font-size:12px}#od-menu button{background:var(--coral);color:var(--navy);font:900 18px var(--display);letter-spacing:3px;cursor:pointer;text-align:left;min-width:300px;box-shadow:6px 6px 0 var(--navy);border:0;margin-top:12px;padding:18px 26px;transform:skew(-10deg)}#od-menu button span{float:right}#od-menu button:hover{background:var(--gold)}.od-tip{opacity:.6;font-size:12px!important}.od-stats{grid-template-columns:repeat(4,auto);gap:14px 26px;margin:16px 0 8px;display:grid}.od-stats span{letter-spacing:2px;color:#cbbfe0;font-size:11px;font-weight:900}.od-stats b{font:900 34px var(--display);color:#fff;font-style:italic;display:block}#od-audio{z-index:11;color:var(--cream);letter-spacing:2px;cursor:pointer;background:#0007;border:0;padding:8px 12px;font:800 11px system-ui;position:fixed;bottom:16px;right:18px}@media (max-width:800px){.od-rank{font-size:72px}.od-callout{font-size:38px}.od-vitals{width:220px}.od-help{display:none}}.od-callout.tone4{letter-spacing:4px;-webkit-text-stroke:1.5px var(--navy);text-shadow:3px 3px 0 var(--navy);color:#ffe9b8;font-size:26px;top:60%}.od-callout{font-size:44px;top:9%}.od-callout.tone3{font-size:64px}.od-callout.tone4{font-size:24px;top:16%}.od-prompt,.od-prompt.show{transition:none}.od-prompt{font-size:19px;bottom:120px}.od-help{transition:opacity .6s;opacity:0!important}#od-hud.helpon .od-help{opacity:.6!important}#od-hud.lowhp:before{animation:none;box-shadow:inset 0 0 80px #ff2d3d40}.od-arrow:before{opacity:.7;border-top-width:16px;border-bottom-width:16px;border-left-width:40px;top:-16px;left:-20px}.od-arrow.threat:before{opacity:1;animation:none}.od-arrow.danger:before{animation:.3s infinite alternate od-arrow-pulse}.od-arrow.shot:before{opacity:1;border-left-color:#ff4dd2;transform:scale(.8)}@keyframes od-arrow-pulse{0%{opacity:.65}to{opacity:1}}.od-guard.locked i{background:#8a8aa0}.od-hp s{opacity:.85;background:#fff;transition:none;position:absolute;top:0;bottom:0;left:0}.od-hp i{z-index:1;position:relative}.od-tempo{gap:6px;margin-top:6px;display:flex}.od-tempo i{background:#0b1b3a99;border:2px solid #56e8ff;width:16px;height:16px;transition:background .12s;transform:rotate(45deg)}.od-tempo i.on{background:#56e8ff;box-shadow:0 0 10px #56e8ffaa}.od-tempo i.fill{background:linear-gradient(#0000 59%,#56e8ff66 60%)}.od-vitals.hit{animation:.35s od-hit-shake}@keyframes od-hit-shake{0%{transform:translate(0)}15%{transform:translate(-9px,4px)}30%{transform:translate(8px,-3px)}45%{transform:translate(-6px,2px)}60%{transform:translate(4px,-1px)}to{transform:translate(0)}}.od-hurtdir{pointer-events:none;opacity:0;width:46vmin;height:46vmin;-webkit-mask:conic-gradient(from -28deg,#000 0 56deg,transparent 56deg);mask:conic-gradient(from -28deg,#000 0 56deg,transparent 56deg);-webkit-mask:conic-gradient(from -28deg,#000 0 56deg,transparent 56deg);background:radial-gradient(closest-side,#0000 82%,#ff2d3dcc 86%,#0000 100%);border-radius:50%;position:fixed;top:50%;left:50%}.od-callout.tone5{color:#ff4d5a;-webkit-text-stroke:2px #1a0610;font-size:40px;top:auto;bottom:22%}#od-dev{z-index:60;color:#e8ecff;background:#0d1230ee;border:1px solid #56e8ff55;border-radius:10px;flex-direction:column;width:min(440px,92vw);font:12px/1.3 system-ui,sans-serif;display:flex;position:fixed;top:12px;bottom:12px;right:12px;box-shadow:0 10px 40px #0008}#od-dev[hidden]{display:none}#od-dev header{border-bottom:1px solid #ffffff1a;flex-direction:column;gap:2px;padding:10px 12px;display:flex}#od-dev header b{letter-spacing:.12em;color:#56e8ff}#od-dev header span{opacity:.6}#od-dev nav{border-bottom:1px solid #ffffff1a;flex-wrap:wrap;gap:4px;padding:8px 10px;display:flex}#od-dev button{color:#e8ecff;font:inherit;cursor:pointer;background:#1d2450;border:1px solid #fff2;border-radius:6px;padding:4px 8px}#od-dev button.on{color:#0b1b3a;background:#56e8ff;font-weight:700}#od-dev .od-dev-pick{padding:6px 12px}#od-dev .od-dev-pick:empty{display:none}#od-dev select{color:#fff;background:#1d2450;border:1px solid #fff3;border-radius:5px;padding:3px}#od-dev main{flex:1;padding:4px 12px 12px;overflow:auto}#od-dev h4{letter-spacing:.14em;text-transform:uppercase;color:#ffd36b;margin:12px 0 6px;font-size:11px}#od-dev label{grid-template-columns:1.3fr 1.6fr 64px;align-items:center;gap:8px;padding:2px 0;display:grid}#od-dev label span{text-overflow:ellipsis;white-space:nowrap;opacity:.85;overflow:hidden}#od-dev input[type=number]{color:#fff;width:100%;font:inherit;background:#0b0f26;border:1px solid #fff2;border-radius:4px;padding:2px 4px}#od-dev input[type=range]{accent-color:#56e8ff;width:100%}#od-dev footer{border-top:1px solid #ffffff1a;align-items:center;gap:6px;padding:8px 12px;display:flex}#od-dev footer small{opacity:.6;margin-left:auto}.od-wave b small{color:#fff9;letter-spacing:2px;font-size:13px}.od-xp{border:2px solid var(--ki);background:#0008;width:min(420px,50vw);height:10px;margin:8px auto 0;position:relative;transform:skew(-20deg)}.od-xp i{background:linear-gradient(90deg,#3fd8ff,#b4fbff);height:100%;transition:width .12s;display:block}.od-xp b{color:var(--ki);position:absolute;top:-6px;left:-58px;transform:skew(20deg);font:900 15px var(--display)!important;letter-spacing:2px!important}#od-menu .od-level{max-width:900px}.od-perks{grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px;display:grid}#od-menu .od-perks button{text-align:left;background:var(--cream);flex-direction:column;gap:8px;min-width:0;margin:0;padding:18px 18px 16px;display:flex;transform:skew(-6deg)}#od-menu .od-perks button:hover,#od-menu .od-perks button.sel{background:var(--gold);transform:skew(-6deg)translateY(-4px)}#od-menu .od-perks button.sel{outline:3px solid var(--coral);outline-offset:3px}#od-menu>section>button kbd{font:900 15px var(--display);background:var(--navy);color:var(--cream);margin-right:12px;padding:3px 10px;display:inline-block;transform:skew(10deg)}.od-perks kbd{font:900 13px var(--display);background:var(--navy);color:var(--cream);align-self:flex-start;padding:2px 8px}.od-perks b{font:900 22px var(--display);letter-spacing:2px;color:var(--navy)}.od-perks span{letter-spacing:.5px;color:#3a3a5a;text-transform:none;font:700 13px system-ui}.od-perks i{color:var(--coral);letter-spacing:3px;font-style:normal}@media (max-width:760px){.od-perks{grid-template-columns:1fr}}#od-perf{z-index:12;pointer-events:none;color:#bff8d0;background:#0b0e22cc;border-left:3px solid #7dffad;padding:6px 9px;font:700 11px/1.45 ui-monospace,Consolas,monospace;position:fixed;top:12px;right:12px}#od-perf pre{font:inherit;white-space:pre;margin:0}#od-perf canvas{background:#0006;width:240px;height:48px;margin-top:6px;display:block}#od-perf.mini canvas{display:none}#od-hud.edge:after{content:"";pointer-events:none;animation:.7s infinite od-blink;position:absolute;inset:0;box-shadow:inset 0 0 110px #ff7a2a4d}#od-hud.falling:after{animation:.3s infinite od-blink;box-shadow:inset 0 0 160px #ff3b2a99}.bossfight .od-callout{top:21%}.bossfight .od-callout.tone4{top:26%}.od-clash{transition:none}@media (max-height:800px){#od-menu h1{margin:8px 0;font-size:72px}#od-menu p{margin:6px 0;font-size:14px;line-height:1.4}#od-menu .od-keys{gap:2px 14px;margin:8px 0;font-size:11px}#od-menu button{margin-top:6px;padding:12px 22px}#od-menu .od-perks button{padding:14px}}