:root{--ink:#05060c;--teal:#7ff3ff;--gold:#ffd77a;--violet:#b98cff;--red:#ff4d6a;--text:#f2f5ff}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--ink);height:100%;color:var(--text);-webkit-user-select:none;user-select:none;touch-action:none;margin:0;font-family:Pretendard,Apple SD Gothic Neo,Noto Sans KR,system-ui,sans-serif;overflow:hidden}#app,#app canvas{width:100%;height:100%;display:block;position:fixed;inset:0}#boot{letter-spacing:.2em;color:#8a93b8;background:var(--ink);z-index:50;place-items:center;font-size:14px;transition:opacity .4s;display:grid;position:fixed;inset:0}#boot.gone{opacity:0;pointer-events:none}#hud{pointer-events:none;z-index:10;position:fixed;inset:0}#boss-bar{top:max(10px, env(safe-area-inset-top));text-align:center;width:min(560px,62vw);position:absolute;left:50%;transform:translate(-50%)}#boss-bar .boss-name{letter-spacing:.08em;text-shadow:0 1px 4px #000;margin-bottom:4px;font-size:13px}#boss-bar .lv{color:var(--gold);margin-right:4px;font-weight:700}#boss-bar .bar{background:#0a0c18b3;border:1px solid #ffffff2e;height:8px;position:relative;overflow:hidden;transform:skew(-18deg)}#boss-bar .bar .fill,#boss-bar .bar .trail{transform-origin:0;position:absolute;inset:0}#boss-bar .bar .trail{background:#fff;transition:transform .6s cubic-bezier(.3,.7,.2,1) .25s}#boss-bar .bar .fill{background:linear-gradient(90deg,#ff3d6e,#ff8a5c)}#boss-bar .break{background:#ffffff1f;width:70%;height:3px;margin:3px auto 0;transform:skew(-18deg)}#boss-bar .break .fill{background:var(--gold);transform-origin:0;height:100%}#player{left:max(16px, env(safe-area-inset-left));bottom:max(14px, env(safe-area-inset-bottom));width:220px;position:absolute}#player .name{text-shadow:0 1px 4px #000;font-size:13px;font-weight:700}#player .name span{color:#9ba6cc;margin-left:4px;font-size:11px;font-weight:400}#player .bar{background:#0a0c18b3;border:1px solid #ffffff2e;height:6px;margin-top:4px;transform:skew(-18deg)}#player .bar .fill{transform-origin:0;background:linear-gradient(90deg,#4ef0c0,#9dffdf);height:100%;transition:transform .2s}#combo{right:max(18px, env(safe-area-inset-right));text-align:right;opacity:0;font-style:italic;transition:opacity .2s;position:absolute;top:34%}#combo.on{opacity:1}#combo b{background:linear-gradient(#fff, var(--teal));color:#0000;filter:drop-shadow(0 2px 3px #000c);-webkit-background-clip:text;background-clip:text;font-size:42px;font-weight:900;line-height:1;display:block}#combo span{letter-spacing:.3em;color:var(--teal);font-size:12px}#combo.pop b{animation:.14s ease-out comboPop}@keyframes comboPop{0%{transform:scale(1.35)}to{transform:scale(1)}}#callout{letter-spacing:.25em;color:var(--teal);text-shadow:0 0 12px #7ff3ffcc,0 2px 3px #000;opacity:0;white-space:nowrap;font-size:15px;font-style:italic;font-weight:900;position:absolute;top:74px;left:50%;transform:translate(-50%)}#callout.show{animation:1.1s ease-out forwards callout}@keyframes callout{0%{opacity:0;letter-spacing:.6em}12%{opacity:1;letter-spacing:.25em}75%{opacity:1}to{opacity:0}}#buttons{right:max(18px, env(safe-area-inset-right));bottom:max(18px, env(safe-area-inset-bottom));pointer-events:none;width:230px;height:200px;position:absolute}.b{pointer-events:auto;color:var(--text);cursor:pointer;touch-action:none;background:radial-gradient(circle at 50% 35%,#3c466ebf,#0c0e1cd1);border:1.5px solid #ffffff59;border-radius:50%;place-items:center;padding:0;display:grid;position:absolute}.b i{font-size:22px;font-style:normal;line-height:1}.b small{letter-spacing:.1em;color:#8d97bd;font-size:9px;position:absolute;bottom:-16px}.b.down{border-color:var(--teal);transform:scale(.92)}.b.attack{width:84px;height:84px;bottom:0;right:0}.b.attack i{font-size:30px}.b.dash{width:58px;height:58px;bottom:0;right:100px}.b.skill{width:58px;height:58px;bottom:74px;right:92px;overflow:visible}.b.skill .cd{background:conic-gradient(#000000a6 var(--cd,0%), transparent 0);border-radius:50%;position:absolute;inset:0}.b.ult{width:72px;height:72px;bottom:112px;right:6px}.b.ult svg{width:calc(100% + 12px);height:calc(100% + 12px);position:absolute;inset:-6px;transform:rotate(-90deg)}.b.ult .track{fill:none;stroke:#ffffff1f;stroke-width:5px}.b.ult .gauge{fill:none;stroke:var(--violet);stroke-width:5px;stroke-dasharray:289;stroke-dashoffset:289px;transition:stroke-dashoffset .2s}.b.ult.ready{border-color:var(--gold);animation:1.2s ease-in-out infinite ready;box-shadow:0 0 18px #ffd77ab3,inset 0 0 14px #ffd77a80}.b.ult.ready .gauge{stroke:var(--gold)}.b.ult i{font-size:26px;font-weight:900}@keyframes ready{50%{box-shadow:0 0 28px #ffd77af2,inset 0 0 18px #ffd77ab3}}#stick{background:#0a0c1859;border:1.5px solid #ffffff40;border-radius:50%;width:120px;height:120px;display:none;position:absolute;transform:translate(-50%,-50%)}#stick.on{display:block}#stick .knob{background:#7ff3ff59;border:1.5px solid #7ff3ffcc;border-radius:50%;width:48px;height:48px;margin:-24px 0 0 -24px;position:absolute;top:50%;left:50%}#help{left:50%;bottom:max(8px, env(safe-area-inset-bottom));color:#c8d2f08c;white-space:nowrap;font-size:11px;position:absolute;transform:translate(-50%)}@media (pointer:coarse){#help{display:none}}@media (pointer:fine){#buttons{opacity:.85}}#cutin{pointer-events:none;z-index:20;opacity:0;position:fixed;inset:0}#cutin.on{opacity:1}#cutin .band{border-top:2px solid var(--gold);border-bottom:2px solid var(--violet);background:linear-gradient(90deg,#05060cf5,#120e28eb);width:120%;height:17vh;position:absolute;left:-10%;transform:rotate(-8deg)translate(-110%)}#cutin .b1{top:-4vh}#cutin .b2{bottom:-4vh;transform:rotate(-8deg)translate(110%)}#cutin.on .b1{animation:.16s cubic-bezier(.2,.9,.2,1) forwards bandIn}#cutin.on .b2{animation:.16s cubic-bezier(.2,.9,.2,1) forwards bandIn2}@keyframes bandIn{to{transform:rotate(-8deg)translate(0)}}@keyframes bandIn2{to{transform:rotate(-8deg)translate(0)}}#cutin .title{text-align:right;letter-spacing:.06em;background:linear-gradient(#fff 30%, var(--gold));color:#0000;filter:drop-shadow(0 0 10px #ffd77a99);opacity:0;-webkit-background-clip:text;background-clip:text;font-size:clamp(26px,5vw,54px);font-style:italic;font-weight:900;position:absolute;bottom:3.2vh;right:6vw;transform:rotate(-8deg)}#cutin.on .title{animation:.22s ease-out 80ms forwards titleIn}#cutin .title small{letter-spacing:.5em;color:var(--violet);-webkit-text-fill-color:var(--violet);font-size:.3em;display:block}#cutin .title span{letter-spacing:.4em;font-size:.32em;display:block}@keyframes titleIn{0%{opacity:0;transform:rotate(-8deg)translate(40px)}to{opacity:1;transform:rotate(-8deg)translate(0)}}#dmg{pointer-events:none;z-index:15;position:fixed;inset:0;overflow:hidden}#dmg .n{white-space:nowrap;will-change:transform, opacity;-webkit-text-stroke:1px #140a1ed9;paint-order:stroke fill;font-style:italic;font-weight:900;position:absolute;top:0;left:0}#dmg .n.normal{color:#fff;text-shadow:0 2px 2px #0009;font-size:22px}#dmg .n.crit{color:var(--gold);text-shadow:0 0 10px #ffbe50b3,0 2px 2px #0009;font-size:32px}#dmg .n.ult{background:linear-gradient(#fff 20%, var(--gold) 55%, #ff9b5c);color:#0000;-webkit-text-stroke:0;filter:drop-shadow(0 0 14px #ffc86ed9)drop-shadow(0 3px 2px #000000b3);-webkit-background-clip:text;background-clip:text;font-size:clamp(48px,8vw,96px)}#dmg .n.player{color:var(--red);font-size:20px}#dmg .n.perfect{color:var(--teal);letter-spacing:.2em;font-size:18px}@media (max-height:500px){#combo{top:16%;right:max(130px, calc(env(safe-area-inset-right) + 130px))}#combo b{font-size:34px}}