:root{color-scheme:light;font-family:system-ui,-apple-system,"Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;background:#f7fcfd;color:#253a41}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;display:grid;place-items:center;padding:16px}
#stage{position:relative;width:min(1200px,100%);aspect-ratio:3/2;overflow:hidden;isolation:isolate;border-radius:22px;background:#f7fcfd;perspective:1400px}
.background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% center;z-index:0}
.sprite{position:absolute;background-repeat:no-repeat;pointer-events:none}
.flag{z-index:1}.hero,#walkers{z-index:2}.counter{z-index:3}.arm{z-index:4}
#walkers{position:absolute;inset:0;pointer-events:none}
#rotor{position:absolute;width:0;height:0;z-index:5;transform-style:preserve-3d;transform-origin:0 0}
.cone,.hanging{backface-visibility:visible}
.fx{position:absolute;inset:0;z-index:6;pointer-events:none}
.bubble{position:absolute;padding:10px 16px;border-radius:24px;background:#f7fcfd;color:#647b82;font-weight:700;font-size:clamp(16px,2.3vw,28px);white-space:nowrap}
.fx-sprite{position:absolute}
#tap{font:inherit;color:#253a41;position:absolute;z-index:7;display:grid;place-items:center;border:0;border-radius:50%;padding:0;touch-action:manipulation;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.core{display:block;position:absolute;inset:0;border-radius:50%;background:#f7fcfd;border:2px solid #647b82;box-shadow:0 2px 0 #647b8233}
#rings{position:absolute;inset:0;pointer-events:none}
.ring{position:absolute;inset:0;border:3px solid #647b82;border-radius:50%;transform-origin:center;opacity:.8}
#judgement{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;color:#00bed8;pointer-events:none}
.overlay{position:absolute;inset:0;z-index:8;background:#f7fcfdb8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;backdrop-filter:blur(2px)}
.overlay[hidden]{display:none}
h1{margin:0;font-size:clamp(38px,6vw,70px);font-weight:800;letter-spacing:.09em;color:#253a41}
#action{font:inherit;font-size:22px;letter-spacing:.12em;color:#253a41;border:0;background:#f7fcfd;border-radius:32px;padding:16px 32px;cursor:pointer}
button:focus-visible{outline:4px solid #00bed8;outline-offset:7px}
button:disabled{opacity:.55;cursor:wait}
@media(max-width:600px){body{padding:0;display:block}#stage{width:100vw;height:100svh;aspect-ratio:auto;border-radius:0}#action{font-size:20px}}
@media(prefers-reduced-motion:reduce){.overlay{backdrop-filter:none}}

#polePatch{position:absolute;z-index:0;pointer-events:none;background-repeat:no-repeat}

#track{position:absolute;z-index:7;border-radius:18px;background:#f7fcfdaa;border:1px solid #647b8255;pointer-events:none}
#track:after{content:"";position:absolute;right:-20px;top:-5px;width:40px;height:40px;border:2px solid #00bed8;border-radius:50%;transform:scale(var(--pulse,1));background:#f7fcfd33}
#beatLines{position:absolute;inset:0}
#trackNotes{position:absolute;z-index:7;pointer-events:none}
.track-note{position:absolute;top:6px;width:18px;height:18px;border:3px solid #f7fcfd;background:#647b82;border-radius:50%;transform:translateX(-50%)}
.track-note.accent{width:24px;height:24px;top:3px;background:#00bed8}
.beat-line{position:absolute;top:7px;height:16px;border-left:1px solid #647b8255}
.bar-line{top:3px;height:24px;border-left:2px solid #647b8288}
#track[data-countdown=on]{border-color:#00bed8;background:#f7fcfdaa}
#combo,#countdown{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-weight:700;color:#253a41;font-size:20px}
#countdown{font-size:28px}
#judgement{inset:auto;left:-20px;bottom:calc(100% + 12px);width:calc(100% + 40px);height:25px;font-size:18px;font-weight:700;white-space:nowrap;color:#00bed8}
#judgement[data-kind=Good]{color:#647b82}#judgement[data-kind=Miss]{color:#253a41}
.hit-halo{position:absolute;border:3px solid #00bed8;border-radius:50%;pointer-events:none;transform-origin:center}
.hit-halo[data-kind=Good]{border-color:#647b82}
#tap[data-feedback=Perfect] .core{border-color:#00bed8}#tap[data-feedback=Good] .core{border-color:#647b82}#tap[data-feedback=Miss] .core{border-color:#253a41}
@media(prefers-reduced-motion:reduce){#track:after{transform:none}}