html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;background:#0b0812;font-family:Trebuchet MS,Segoe UI,ui-rounded,system-ui,sans-serif;-webkit-user-select:none;user-select:none;touch-action:none}#app canvas{display:block;margin:0 auto;image-rendering:pixelated}#hud-root{position:fixed;inset:0;pointer-events:none;z-index:10;color:#f4ecff;text-shadow:2px 2px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;font-weight:800}#hud-root button{pointer-events:auto;font:inherit}.hud-run{position:absolute;inset:0;padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left));display:flex;justify-content:space-between;align-items:flex-start}.hud-hearts{display:flex;gap:4px}.hud-heart{width:34px;height:34px;image-rendering:pixelated;filter:drop-shadow(2px 2px 0 #000)}.hud-right{text-align:right;line-height:1.15}.hud-distance{font-size:clamp(20px,4.5vh,34px);color:#fff}.hud-zone{font-size:clamp(12px,2.6vh,18px);color:#b9a7ff}.hud-cult{font-size:clamp(12px,2.6vh,18px);color:#ffd27a}.hud-toast{position:absolute;left:50%;top:22%;transform:translate(-50%,-50%) scale(.8);opacity:0;font-size:clamp(18px,4.5vh,34px);color:#fff;text-align:center;transition:opacity .15s,transform .15s;white-space:nowrap}.hud-toast.big{font-size:clamp(26px,8vh,56px);color:#ff5f7a}.hud-toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.hud-battle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:max(10px,env(safe-area-inset-top)) 14px max(10px,env(safe-area-inset-bottom))}.hud-battle-top{width:100%;display:flex;justify-content:space-between;align-items:flex-start}.hud-enemy{text-align:right;min-width:42%}.hud-enemy-name{font-size:clamp(14px,3.2vh,22px);color:#ffb3c1}.hud-hp{height:14px;border:3px solid #000;background:#2a1030;border-radius:8px;overflow:hidden;box-shadow:0 0 0 2px #7a3a8a inset}.hud-hp-fill{height:100%;width:100%;background:linear-gradient(#ff7a9a,#c81e4a);transition:width .25s}.hud-legend{margin-top:6px;display:flex;gap:14px;font-size:clamp(10px,2.2vh,14px);color:#8f80c0;font-weight:600}.hud-legend-item{padding:1px 6px;border-radius:8px;transition:color .15s,background .15s}.hud-legend-item b{color:#cbbcff}.hud-legend-item.active{color:#ffe08a;background:#3c1e5ad9;box-shadow:0 0 0 2px #ffe08a}.hud-legend-item.active b{color:#fff}.hud-command{margin-top:auto;font-size:clamp(22px,7vh,48px);color:#ffe08a;min-height:1.2em;text-align:center;transition:transform .1s}.hud-command.bad{color:#ff5f7a}.hud-command.enemy{color:#ff9ab0}.hud-command.info{color:#b9a7ff;font-size:clamp(16px,4.5vh,30px)}.hud-grade{height:1.3em;font-size:clamp(14px,3.5vh,24px);opacity:0;transition:opacity .1s}.hud-grade.show{opacity:1}.hud-grade.perfect{color:#7dffb3}.hud-grade.good{color:#ffe08a}.hud-grade.miss{color:#ff5f7a}.hud-beats{position:relative;display:flex;gap:14px;margin:6px 0 10px;padding-top:30px}.hud-ball{position:absolute;left:0;top:30px;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6c8,#ffe08a 55%,#d0a030);border:3px solid #000;box-shadow:0 0 10px #ffe08acc;opacity:0;pointer-events:none;will-change:transform}.hud-ball.show{opacity:1}.hud-battle .hud-pad{transition:transform .08s,background .08s,opacity .2s,filter .2s,box-shadow .15s}.hud-battle.listen .hud-pad,.hud-battle.call .hud-pad,.hud-battle.result .hud-pad{opacity:.45;filter:saturate(.5)}.hud-battle.reply .hud-pad{opacity:1;filter:none}.hud-battle.reply .hud-beats{filter:drop-shadow(0 0 8px rgba(125,255,179,.5))}.hud-pad.next{transform:scale(1.12);box-shadow:0 6px #000,0 0 0 5px #ffe08a,0 0 18px #ffe08a;animation:padnext .35s infinite alternate}@keyframes padnext{to{transform:scale(1.18)}}.hud-threat{margin-top:4px;display:inline-block;padding:2px 10px;border:3px solid #000;border-radius:10px;background:#c81e4a;color:#fff;font-size:clamp(11px,2.6vh,16px);font-weight:800;opacity:0;transform:scale(.9);transition:opacity .15s,transform .15s}.hud-threat.show{opacity:1;transform:scale(1);animation:threatpulse .5s infinite alternate}@keyframes threatpulse{to{background:#ff5f7a;transform:scale(1.06)}}.hud-command.turn{color:#7dffb3}.hud-grade.wait{color:#b9a7ff}.hud-beat{width:18px;height:18px;border-radius:50%;border:3px solid #000;background:#3a2a55;box-shadow:0 0 0 2px #8a6ac0 inset;transition:transform .05s,background .05s}.hud-beat.listen{background:#2a3a55}.hud-beat.on{background:#ffe08a;transform:scale(1.35)}.hud-pads{width:100%;display:flex;justify-content:space-between;align-items:flex-end;padding:0 4vw}.hud-pad{width:clamp(64px,16vh,110px);height:clamp(64px,16vh,110px);border-radius:50%;border:4px solid #000;display:grid;place-items:center;font-size:clamp(18px,5vh,32px);color:#fff;background:#5a2a8a;box-shadow:0 6px #000,0 0 0 3px #a06ad0 inset;transition:transform .08s,background .08s}.hud-pad.pa{background:#8a2a4a;box-shadow:0 6px #000,0 0 0 3px #d06a8a inset}.hud-pad.hit{transform:scale(.92) translateY(4px)}.hud-pad.perfect{background:#2aa06a}.hud-pad.good{background:#b08a2a}.hud-pad.miss{background:#555}.hud-screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;background:radial-gradient(ellipse at center,#1408288c,#05020cd9);pointer-events:auto}.hud-logo{width:min(70vw,60vh);image-rendering:pixelated;filter:drop-shadow(0 6px 0 #000)}.hud-title{font-size:clamp(26px,9vh,64px);color:#ffe08a}.end.lost .hud-title{color:#ff5f7a}.hud-sub{font-size:clamp(13px,3.2vh,22px);color:#cbbcff;max-width:80vw}.hud-prompt{font-size:clamp(16px,4.5vh,30px);color:#fff;animation:blink 1s steps(2) infinite}@keyframes blink{50%{opacity:.25}}.hud-best,.hud-help{font-size:clamp(11px,2.4vh,15px);color:#9a8ac0;font-weight:600;max-width:90vw}.hud-button{margin-top:6px;padding:10px 26px;font-size:clamp(16px,4.2vh,28px);font-weight:900;color:#fff;background:#c81e4a;border:4px solid #000;border-radius:14px;box-shadow:0 6px #000;cursor:pointer;text-shadow:2px 2px 0 #000}.hud-button:active{transform:translateY(4px);box-shadow:0 2px #000}.hud-button.secondary{background:#4a2a7a}.hud-row{display:flex;gap:14px}.hud-stats{display:flex;gap:18px;font-size:clamp(14px,3.5vh,24px);color:#fff}#rotate-hint{position:fixed;inset:0;z-index:20;display:none;place-items:center;background:#0b0812;color:#fff;font:900 22px Trebuchet MS,system-ui,sans-serif;text-align:center;padding:20px}#rotate-hint.show{display:grid}.hud-jump{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));width:clamp(64px,17vh,110px);height:clamp(64px,17vh,110px);border-radius:50%;border:4px solid #000;background:#c81e4abf;box-shadow:0 6px #000,0 0 0 3px #ff7a9a inset;display:grid;place-items:center;font-size:clamp(14px,3.6vh,24px);color:#fff;transition:transform .08s}.hud-jump.hit{animation:jumphit .25s}@keyframes jumphit{30%{transform:scale(.85) translateY(6px)}}.hud-tilt{position:absolute;bottom:max(28px,env(safe-area-inset-bottom));font-size:clamp(11px,2.6vh,16px);color:#cbbcff8c;font-weight:700;transition:color .1s,transform .1s}.hud-tilt.left{left:max(16px,env(safe-area-inset-left))}.hud-tilt.right{right:calc(max(16px,env(safe-area-inset-right)) + clamp(64px,17vh,110px) + 12px)}.hud-tilt.on{color:#ffe08a;transform:scale(1.15)}.hud-call{font-size:clamp(14px,3.6vh,24px);color:#cbbcff;min-height:1.3em}.hud-slot{width:clamp(48px,11vh,76px);height:clamp(40px,9vh,60px);border-radius:12px;border:3px solid #000;background:#2a2040;box-shadow:0 0 0 2px #6a5a90 inset;display:grid;place-items:center;font-size:clamp(14px,3.6vh,24px);color:#ffffff8c;transition:transform .06s,background .06s}.hud-slot.tu{box-shadow:0 0 0 2px #a06ad0 inset}.hud-slot.pa{box-shadow:0 0 0 2px #d06a8a inset}.hud-slot.lit{transform:scale(1.18);color:#fff}.hud-slot.call{background:#7a4ab0}.hud-slot.call.pa{background:#b04a6a}.hud-slot.perfect{background:#2aa06a;color:#fff}.hud-slot.good{background:#b08a2a;color:#fff}.hud-slot.miss{background:#555;color:#fff}.hud-pad.beat{animation:padbeat .18s}@keyframes padbeat{40%{transform:scale(1.08)}}.hud-slot.now{outline:4px solid #ffe08a;outline-offset:2px;transform:scale(1.22) translateY(-4px);color:#fff;animation:slotnow .3s}@keyframes slotnow{0%{transform:scale(1.4) translateY(-10px)}}.hud-tutorial{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);max-width:80vw;padding:10px 18px;border:4px solid #000;border-radius:14px;background:#140828e6;color:#ffe08a;font-size:clamp(16px,4.2vh,28px);text-align:center;opacity:0;transition:opacity .2s;animation:tutpulse 1s ease-in-out infinite}.hud-tutorial.show{opacity:1}@keyframes tutpulse{50%{transform:translate(-50%,-50%) scale(1.04)}}.hud-lesson{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;background:#05020ce0;pointer-events:auto}.hud-lesson-title{font-size:clamp(20px,6vh,40px);color:#ffe08a}.hud-lesson-steps{margin:0;padding-left:1.4em;max-width:82vw;font-size:clamp(13px,3.4vh,22px);color:#f4ecff;line-height:1.35;text-align:left}.hud-lesson-steps li{margin:4px 0}.hud-button.small{font-size:clamp(12px,3vh,20px);padding:8px 16px}