:root{font-family:Hiragino Kaku Gothic ProN,Yu Gothic,system-ui,sans-serif;color:#223c43;background:#b9e4e7;font-synthesis:none}*{box-sizing:border-box}html,body{position:fixed;top:0;right:0;bottom:0;left:0;margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none}#app{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;height:100dvh;overflow:hidden;touch-action:none}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}button:focus-visible{outline:3px solid #254954;outline-offset:3px}button:disabled{opacity:.35;cursor:default}#game{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none}.vignette{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;box-shadow:inset 0 0 100px #163e3a15}header{position:absolute;top:max(20px,env(safe-area-inset-top));left:max(25px,env(safe-area-inset-left));right:max(25px,env(safe-area-inset-right));display:flex;align-items:center;justify-content:space-between;z-index:2}.brand{text-decoration:none;color:#243d43;font-weight:900;font-size:25px;letter-spacing:-1.5px;line-height:1;transform:rotate(-3deg);white-space:nowrap}.brand>span:not(.brand-ball){color:#e35c3c}.brand small{display:block;font:700 8px system-ui;letter-spacing:2px;margin:9px 0 0 25px}.brand-ball{color:#75a934;font-size:29px;vertical-align:middle}.top-actions{display:flex;gap:8px;align-items:center}.top-actions button{width:36px;height:36px;background:#fff9eccc;border:1px solid #fff;border-radius:50%;color:#314950;font-size:19px}.live{font-size:10px;letter-spacing:1px;margin-right:10px;font-weight:700}.live i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#e66742;margin-right:6px}#hud{position:absolute;top:95px;left:28px;right:28px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;gap:15px}.stat{display:flex;flex-direction:column;gap:4px}.stat small{font-size:9px;letter-spacing:1.5px;font-weight:800}.stat strong{font-size:35px;line-height:1;font-weight:900;font-variant-numeric:tabular-nums}.stat>span{font-size:8px;color:#46656a}.outs{text-align:right}.outs>div{font-size:26px;letter-spacing:4px;line-height:1.1}.lost{color:#df4d36}.timer{text-align:center}.timer>span{font-size:9px;font-weight:700;letter-spacing:1px}.timer strong{display:block;font-size:35px;line-height:1.1;font-weight:900;font-variant-numeric:tabular-nums}.timer strong span{font-size:11px;margin-left:4px}.time-track{width:65px;height:3px;background:#ffffff75;border-radius:4px;margin:4px auto 0;overflow:hidden}.time-track i{display:block;background:#e96c43;width:100%;height:100%}.court-tag{display:none}#combo{position:absolute;bottom:max(24px,calc(env(safe-area-inset-bottom) + 12px));right:max(18px,env(safe-area-inset-right));width:65px;display:flex;flex-direction:column;align-items:center;opacity:0;pointer-events:none}#combo.active{opacity:1}#combo strong{font-size:33px;font-style:italic;line-height:1;font-weight:900;color:#fff7df;text-shadow:2px 2px #e86e43}#combo span{font-size:7px;letter-spacing:.5px;font-weight:800}#combo b{font-size:13px;margin-top:3px;color:#c84d2e}#hit-feedback{position:absolute;left:max(18px,env(safe-area-inset-left));right:90px;bottom:max(24px,calc(env(safe-area-inset-bottom) + 12px));display:flex;flex-direction:column;align-items:flex-start;gap:4px;pointer-events:none}.hit{opacity:0;font-weight:900;font-size:clamp(21px,3vw,35px);white-space:nowrap;line-height:1.25;color:#fff9df;text-shadow:2px 3px #df633b,-1px -1px #df633b;transform:rotate(-3deg);transform-origin:left center}.hit.out{color:#e9573d;text-shadow:1px 2px white}.hit.perfect{color:#ffed5d}#points{opacity:0;color:#fff9e2;font-weight:900;font-size:15px;line-height:1.3;text-shadow:1px 2px #bd5639;transform-origin:left center}@keyframes hit{0%{opacity:0;scale:.85}12%,65%{opacity:1;scale:1}to{opacity:0;scale:1.02}}#controller{position:absolute;bottom:max(17px,calc(env(safe-area-inset-bottom) + 9px));left:50%;transform:translate(-50%);display:none;grid-template-columns:repeat(4,1fr);gap:12px;width:min(380px,calc(100% - 36px));z-index:3;touch-action:none}.playing #controller{display:grid}#controller button{height:72px;border:1px solid #fff9;border-bottom:4px solid #8a5e4138;border-radius:18px;background:#fff8e9dd;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#314c53;font-size:38px;line-height:1;box-shadow:0 4px 15px #4b3c2220;transition:background .08s,transform .08s}#controller button:active,#controller button.pressed{background:#ed7b4b;color:#fff;transform:translateY(3px);border-bottom-width:1px}#overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#183d3c22;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);padding:78px max(18px,env(safe-area-inset-left)) max(18px,env(safe-area-inset-bottom));z-index:4;overflow:hidden}.panel{text-align:center;background:#fff9eafa;border:1px solid #fff;padding:25px 32px;border-radius:22px;box-shadow:0 24px 65px #1c41442b;width:min(540px,100%);max-height:100%;overflow:hidden}.eyebrow{font:800 9px system-ui;letter-spacing:2px;color:#5e7776}.title-sticker{display:table;margin:17px auto 10px;font-size:11px;font-weight:900;letter-spacing:1px;background:#f4cd4e;color:#4f4933;transform:rotate(-3deg);padding:6px 14px}h1{font-size:clamp(38px,6vw,65px);font-weight:900;letter-spacing:-4px;margin:10px 0;line-height:1.3;transform:rotate(-3deg);white-space:nowrap}h1 span{color:#e4643e}.panel p{font-size:12px;line-height:1.8;color:#587071;margin:13px 0}.primary{display:block;width:100%;border:0;border-bottom:4px solid #b34b2d;background:#e9673f;color:#fff8e5;border-radius:10px;padding:14px 18px;font-weight:900;font-size:16px;letter-spacing:1px;margin-top:18px;box-shadow:0 6px 15px #dd6c3e26}.primary:hover{background:#f17b4d}.primary span{float:right;font-size:22px;line-height:1}.secondary{display:block;width:100%;padding:11px 15px;margin-top:12px;background:transparent;border:1px solid #a1b0a5;border-radius:9px;color:#375953;font-size:12px;font-weight:700}.secondary span{margin-left:5px}.panel .music-note{font-size:8px;opacity:.7;margin:13px 0 0}.hidden{display:none!important}h2{font-size:25px;letter-spacing:-1px;margin:14px 0}.result-score{font-size:65px;font-weight:900;color:#e4683f;line-height:1.2}.result-grid{display:flex;gap:30px;justify-content:center;font-size:10px}.result-grid strong{display:block;font-size:27px;margin-top:5px}label{display:flex;align-items:center;justify-content:space-between;padding:12px 6px;gap:15px;border-bottom:1px solid #dfdfce;font-size:12px}input{accent-color:#e9673f}.panel .audio-credits{font-size:10px;line-height:1.6;margin:10px 0}.audio-credits a{color:#376c70}#rules-panel{width:min(470px,100%)}#rule-art{width:min(280px,100%);margin:auto;line-height:0}#rule-art svg{display:block;width:100%;height:auto;max-height:31dvh}#rule-caption{font-size:12px;min-height:34px;line-height:1.6;margin:10px 0}.rule-navigation{display:flex;gap:10px;align-items:center}.rule-navigation .secondary{width:55px;flex:none;margin:0;padding:10px}.rule-navigation .primary{margin:0;font-size:13px;padding:11px}.text-button{border:0;background:none;color:#6b827c;font-size:10px;padding:9px 10px 0}#rule-step{margin-left:8px;color:#db6d41}@media(max-width:600px){header{left:18px;right:18px;top:max(16px,env(safe-area-inset-top))}.brand{font-size:21px}.brand small{font-size:7px;letter-spacing:1px}.brand-ball{font-size:25px}.live{display:none}.top-actions{gap:6px}.top-actions button{width:32px;height:32px}#hud{top:81px;left:18px;right:18px;gap:8px}.stat strong{font-size:29px}.stat small{font-size:8px;letter-spacing:1px}.stat>span{font-size:7px}.timer strong{font-size:30px}.timer>span{font-size:8px}.outs>div{font-size:23px;letter-spacing:2px}.panel{padding:21px 20px;border-radius:18px}h1{font-size:43px;letter-spacing:-3px}.panel p{font-size:11px}.eyebrow{font-size:8px}.title-sticker{font-size:10px}.primary{font-size:14px;padding:13px 15px}.panel .music-note{font-size:8px}#controller{gap:10px}#controller button{height:70px;font-size:36px;border-radius:16px}#hit-feedback,#combo{bottom:max(110px,calc(env(safe-area-inset-bottom) + 103px))}.hit{font-size:22px}#points{font-size:12px}h2{font-size:22px}.result-score{font-size:55px}.result-grid{gap:25px}.panel .audio-credits{font-size:9px}#rule-art{width:260px}#rule-art svg{max-height:33dvh}}@media(orientation:landscape)and (max-height:600px){header{top:max(10px,env(safe-area-inset-top));left:max(15px,env(safe-area-inset-left));right:max(15px,env(safe-area-inset-right))}.brand{font-size:19px;letter-spacing:-1px}.brand-ball{font-size:23px}.brand small{font-size:6px;letter-spacing:1px;margin:5px 0 0 20px}.top-actions button{width:30px;height:30px;font-size:17px}.top-actions{gap:5px}.live{display:none}#hud{top:max(10px,env(safe-area-inset-top));left:max(190px,calc(env(safe-area-inset-left) + 170px));right:max(155px,calc(env(safe-area-inset-right) + 130px));gap:12px;align-items:flex-start}.stat{gap:2px}.stat small{font-size:7px;letter-spacing:1px}.stat strong{font-size:25px}.stat>span{display:none}.timer>span{font-size:7px;letter-spacing:0}.timer strong{font-size:25px}.timer strong span{font-size:9px}.time-track{width:45px;height:2px;margin-top:2px}.outs>div{font-size:20px;letter-spacing:2px}#controller{width:280px;gap:10px;bottom:max(11px,calc(env(safe-area-inset-bottom) + 5px))}#controller button{height:52px;font-size:31px;border-radius:13px}#hit-feedback,#combo{bottom:max(16px,calc(env(safe-area-inset-bottom) + 9px))}#hit-feedback{right:auto;max-width:calc(50% - 165px)}.hit{font-size:19px}#points{font-size:11px}#combo strong{font-size:28px}#overlay{padding:62px max(18px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-bottom))}.panel{padding:16px 24px;border-radius:16px;width:min(600px,100%)}#title{display:grid;grid-template-columns:1.15fr 1fr;column-gap:24px;align-items:center}#title .eyebrow{grid-column:1/-1;font-size:7px;margin-bottom:7px}#title .title-sticker{grid-column:1;grid-row:2;margin:6px auto;font-size:9px;padding:5px 10px}#title h1{grid-column:1;grid-row:3;font-size:39px;letter-spacing:-3px;margin:5px 0}#title>p:not(.music-note){grid-column:1;grid-row:4;font-size:9px;margin:6px 0}#title .primary{grid-column:2;grid-row:2/4;align-self:center;font-size:13px;margin:0;padding:14px 12px}#title .secondary{grid-column:2;grid-row:4;font-size:10px;margin:0;padding:9px}#title .music-note{grid-column:2;grid-row:5;font-size:7px;margin:6px 0 0}.panel h2{font-size:20px;margin:6px 0}.panel .primary{margin-top:10px;font-size:13px;padding:11px}.panel p{font-size:10px;margin:7px 0}.result-score{font-size:40px}.result-grid strong{font-size:21px;margin-top:2px}.result-grid{font-size:8px}#rules-panel{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;width:min(600px,100%)}#rules-panel .eyebrow{grid-column:1/-1;font-size:7px}#rules-panel h2{grid-column:2;grid-row:2;font-size:18px;align-self:end}#rule-art{grid-column:1;grid-row:2/6;width:220px;max-width:100%}#rule-art svg{max-height:46dvh}#rule-caption{grid-column:2;grid-row:3;font-size:10px;min-height:0}#rules-panel .rule-navigation{grid-column:2;grid-row:4}#rules-panel .rule-navigation .primary{margin:0}#rules-panel .text-button{grid-column:2;grid-row:5;font-size:9px}.panel .audio-credits{font-size:8px;line-height:1.4;margin:5px 0}#settings-panel{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}#settings-panel .eyebrow{grid-column:1/-1}#settings-panel h2{grid-column:1;grid-row:2}#settings-panel label{grid-column:1;padding:8px;font-size:10px}#settings-panel>p:not(.audio-credits){display:none}#settings-panel .audio-credits{grid-column:2;grid-row:2/5}#settings-panel .primary{grid-column:1/-1}label{gap:10px}}@media(orientation:landscape)and (max-width:700px){.brand{font-size:16px}.brand small{display:none}#hud{left:max(145px,calc(env(safe-area-inset-left) + 120px));right:max(125px,calc(env(safe-area-inset-right) + 105px))}.top-actions button{width:27px;height:27px}.stat strong,.timer strong{font-size:22px}.stat small{font-size:6px;letter-spacing:0}.outs>div{font-size:18px;letter-spacing:0}#controller{width:244px}#controller button{height:48px}#hit-feedback{max-width:calc(50% - 145px)}.hit{font-size:16px}#points{font-size:9px}#overlay{padding-top:48px}#title h1{font-size:34px}#title{column-gap:15px}.panel{padding:12px 18px}#rule-art svg{max-height:42dvh}#rule-caption{font-size:9px}}@media(max-height:600px)and (orientation:portrait){#overlay{padding-top:65px}.panel{padding:14px 18px}h1{font-size:36px;margin:6px 0}.title-sticker{margin:10px auto 6px}.panel p{font-size:10px;margin:8px 0}.primary{margin-top:12px;padding:11px}#rule-art svg{max-height:29dvh}#rule-caption{font-size:10px;min-height:0}h2{margin:8px 0}.panel .audio-credits{font-size:8px;line-height:1.4}label{padding:8px;font-size:10px}}#controller{width:194px;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(3,48px);gap:6px;bottom:max(14px,calc(env(safe-area-inset-bottom) + 7px))}#controller button{height:48px;font-size:31px;border-radius:13px;padding:0}#controller [data-direction=left]{grid-column:1;grid-row:2}#controller [data-direction=right]{grid-column:3;grid-row:2}#controller [data-direction=down]{grid-column:2;grid-row:3}#hit-feedback,#combo{bottom:max(25px,calc(env(safe-area-inset-bottom) + 12px))}#hit-feedback{right:auto;max-width:calc(50% - 112px)}.hit{font-size:clamp(15px,2.3vw,25px)}#points{font-size:clamp(10px,1.5vw,14px)}#title .music-note{display:block;margin:12px auto 0;padding:5px 10px;color:#466b6d;border:1px solid #c6d4c7;border-radius:20px;font-size:10px;opacity:1}.result-actions{display:flex;flex-direction:column;gap:10px;margin-top:18px}.result-actions .primary{margin:0}.share-button{display:block;text-decoration:none;color:#fff;background:#253b41;border-radius:9px;padding:12px 16px;font-size:13px;font-weight:800;line-height:1.2}.share-button:focus-visible{outline:3px solid #e9673f;outline-offset:3px}@media(max-width:600px)and (orientation:portrait){#hit-feedback,#combo{bottom:max(185px,calc(env(safe-area-inset-bottom) + 178px))}#hit-feedback{right:88px;max-width:none}.hit{font-size:22px}#points{font-size:12px}.result-actions{margin-top:14px;gap:9px}#result .primary{font-size:13px}.share-button{font-size:12px;padding:11px}}@media(orientation:landscape)and (max-height:600px){#controller{width:162px;grid-template-columns:repeat(3,50px);grid-template-rows:repeat(3,38px);gap:4px;bottom:max(9px,calc(env(safe-area-inset-bottom) + 4px))}#controller button{height:38px;font-size:27px;border-radius:10px}#hit-feedback{max-width:calc(50% - 96px)}#title .music-note{grid-column:2;grid-row:5;font-size:8px;margin:6px auto 0;padding:4px 10px}#result{width:min(720px,100%);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;gap:6px 24px;align-items:center;padding:14px 22px}#result-label{grid-column:1;grid-row:1;font-size:8px}#result-title{grid-column:1;grid-row:2;align-self:start;font-size:19px;margin:0}#result-score{grid-column:1;grid-row:2;align-self:end;font-size:48px;padding-top:25px;line-height:1.15}#record{grid-column:1;grid-row:3;font-size:9px;margin:0}#result .result-grid{grid-column:2;grid-row:1/3;align-self:center;gap:15px;font-size:9px}#result .result-grid strong{font-size:26px}#result .result-actions{grid-column:2;grid-row:3;margin:0;gap:7px}#result .primary{font-size:12px;padding:10px;margin:0}#result .share-button{font-size:11px;padding:9px}}@media(orientation:landscape)and (max-height:320px){#result{padding:10px 16px;gap:4px 18px}#result-title{font-size:17px}#result-score{font-size:40px;padding-top:22px}#result .result-grid strong{font-size:23px}#result .primary{font-size:11px;padding:8px}#result .share-button{font-size:10px;padding:8px}#result .result-actions{gap:6px}}header{z-index:5}@media(orientation:landscape)and (max-height:600px){#result #result-title{grid-column:1;grid-row:2;font-size:17px;line-height:1.35;align-self:center}#result #result-score{grid-column:1;grid-row:3;padding-top:0;align-self:center}#result #record{grid-column:1;grid-row:4}#result .result-grid{grid-column:2;grid-row:1/3}#result .result-actions{grid-column:2;grid-row:3/5}}#controller{width:min(760px,calc(100% - 24px));height:clamp(160px,28dvh,240px);grid-template-columns:1fr 1.15fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:4px;bottom:max(8px,env(safe-area-inset-bottom))}#controller button{width:100%;height:100%;min-height:0;font-size:clamp(36px,6vw,60px);border-radius:15px;transform:none}#controller [data-direction=left]{grid-column:1;grid-row:1/3}#controller [data-direction=center]{grid-column:2;grid-row:1}#controller [data-direction=down]{grid-column:2;grid-row:2}#controller [data-direction=right]{grid-column:3;grid-row:1/3}#controller button:active,#controller button.pressed{transform:none;background:#ed7b4b;border-bottom-width:1px}#counter-streak{position:absolute;bottom:calc(100% + 5px);left:50%;transform:translate(-50%);white-space:nowrap;font-size:9px;font-weight:800;letter-spacing:.3px;color:#496a63;pointer-events:none}#hit-feedback,#combo{bottom:max(calc(clamp(160px,28dvh,240px) + 37px),calc(env(safe-area-inset-bottom) + clamp(160px,28dvh,240px) + 29px))}#hit-feedback{right:90px;max-width:none}@media(orientation:landscape)and (max-height:600px){#controller{width:calc(100% - max(24px,env(safe-area-inset-left)) - max(24px,env(safe-area-inset-right)));height:clamp(100px,31dvh,155px);bottom:max(6px,env(safe-area-inset-bottom));gap:4px}#controller button{font-size:37px;border-radius:11px}#hit-feedback,#combo{bottom:max(calc(clamp(100px,31dvh,155px) + 32px),calc(env(safe-area-inset-bottom) + clamp(100px,31dvh,155px) + 26px))}#hit-feedback{max-width:calc(100% - 110px)}.hit{font-size:18px}#counter-streak{font-size:8px}}#hit-feedback{left:max(22px,calc(env(safe-area-inset-left) + 10px));right:auto;bottom:max(17px,calc(env(safe-area-inset-bottom) + 9px));max-width:calc((min(760px,100vw - 24px) - 8px)/3.15 - 20px);gap:2px}.hit{font-size:clamp(12px,1.8vw,18px);white-space:normal;line-height:1.2}#points{font-size:9px;line-height:1.2}#combo{bottom:max(15px,calc(env(safe-area-inset-bottom) + 7px));right:max(24px,calc(env(safe-area-inset-right) + 12px));width:auto;flex-direction:row;gap:4px;align-items:baseline}#combo strong{font-size:21px}#combo span{font-size:6px}#combo b{font-size:11px;margin:0}@media(min-width:784px){#hit-feedback{left:calc(50% - 368px)}#combo{right:calc(50% - 355px)}}@media(orientation:landscape)and (max-height:600px){#hit-feedback{left:max(34px,calc(env(safe-area-inset-left) + 16px));bottom:max(13px,calc(env(safe-area-inset-bottom) + 7px));max-width:calc(30% - 30px)}.hit{font-size:13px}#points{font-size:9px}#combo{right:max(34px,calc(env(safe-area-inset-right) + 16px));bottom:max(12px,calc(env(safe-area-inset-bottom) + 6px))}}:root{--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}#timing-feedback{opacity:0;font-size:10px;font-weight:700;line-height:1.2;color:#3b5c5b;pointer-events:none;transform-origin:left center}.landscape-game #controller{left:var(--pad-left);right:var(--pad-right);top:58px;bottom:var(--pad-bottom);width:auto;height:auto;transform:none;grid-template-columns:var(--rail-width) minmax(0,1fr) var(--rail-width);grid-template-rows:minmax(0,1fr) var(--pad-row) var(--pad-row);gap:4px;pointer-events:none}.landscape-game #controller button{pointer-events:auto;font-size:40px;background:#fff8e9e8}.landscape-game #controller [data-direction=left]{grid-column:1;grid-row:1/4}.landscape-game #controller [data-direction=right]{grid-column:3;grid-row:1/4}.landscape-game #controller [data-direction=center]{grid-column:2;grid-row:2}.landscape-game #controller [data-direction=down]{grid-column:2;grid-row:3}.landscape-game #counter-streak{bottom:auto;top:auto;left:50%;transform:translate(-50%);grid-column:2;grid-row:2;align-self:start;margin-top:-17px;font-size:8px}.landscape-game #hud{position:static;display:block}.landscape-game #hud .score{position:absolute;top:73px;left:calc(var(--pad-left) + 12px);z-index:3}.landscape-game #hud .timer{position:absolute;top:126px;left:calc(var(--pad-left) + 12px);text-align:left;z-index:3}.landscape-game #hud .outs{position:absolute;top:73px;right:calc(var(--pad-right) + 12px);z-index:3}.landscape-game .stat strong{font-size:29px}.landscape-game .timer strong{font-size:25px}.landscape-game #hit-feedback{left:calc(var(--pad-left) + 12px);bottom:calc(var(--pad-bottom) + 9px);max-width:calc(var(--rail-width) - 24px);z-index:3}.landscape-game .hit{font-size:15px}.landscape-game #points,.landscape-game #timing-feedback{font-size:10px}.landscape-game #combo{right:calc(var(--pad-right) + 12px);bottom:calc(var(--pad-bottom) + 9px);z-index:3;max-width:calc(var(--rail-width) - 24px)}.landscape-game #game{top:0}@media(orientation:landscape)and (max-height:320px){.landscape-game #controller{top:48px}.landscape-game #hud .score,.landscape-game #hud .outs{top:58px}.landscape-game #hud .timer{top:105px}.landscape-game .stat strong{font-size:25px}.landscape-game .timer strong{font-size:21px}.landscape-game #controller button{font-size:34px}.landscape-game .hit{font-size:13px}}#hit-feedback,#combo,.landscape-game #hud .score,.landscape-game #hud .timer,.landscape-game #hud .outs,.landscape-game #hit-feedback,.landscape-game #combo{z-index:4}.landscape-game #controller [data-direction=left],.landscape-game #controller [data-direction=right]{padding-top:20px}.landscape-game #controller{top:170px}.landscape-game #hud:before,.landscape-game #hud:after{content:"";position:absolute;top:58px;width:var(--rail-width);height:100px;background:#fff9eaba;border:1px solid #fff9;border-radius:12px;pointer-events:none;z-index:2}.landscape-game #hud:before{left:var(--pad-left)}.landscape-game #hud:after{right:var(--pad-right)}.landscape-game #hud .score{top:70px;left:calc(var(--pad-left) + 12px)}.landscape-game #hud .timer{top:116px;left:calc(var(--pad-left) + 12px)}.landscape-game #hud .outs{top:70px;right:calc(var(--pad-right) + 12px)}.landscape-game #combo{top:116px;bottom:auto;right:calc(var(--pad-right) + 12px)}.landscape-game #controller [data-direction=left],.landscape-game #controller [data-direction=right]{padding:0}#hit-feedback,.landscape-game #hit-feedback{left:50%;right:auto;top:54%;bottom:auto;transform:translate(-50%);max-width:min(300px,calc(100% - 36px));width:max-content;padding:5px 12px;border:1px solid #fff9;border-radius:10px;background:#fff8e8c7;align-items:center;text-align:center;gap:2px;visibility:hidden;pointer-events:none;z-index:4}#hit-feedback.active-feedback{visibility:visible}#hit-feedback .hit{font-size:19px;line-height:1.2;white-space:nowrap;transform:none;transform-origin:center}#hit-feedback #points{font-size:12px;line-height:1.2;transform-origin:center}#hit-feedback #timing-feedback{font-size:12px;font-weight:800;color:#284f50;line-height:1.2;transform-origin:center}.landscape-game #hit-feedback{left:calc(var(--game-x) + var(--game-width)/2);top:calc(var(--game-height)*.66);max-width:calc(var(--game-width) - 20px)}.landscape-game #hit-feedback .hit{font-size:18px}@media(orientation:landscape)and (max-height:320px){.landscape-game #controller{top:144px}.landscape-game #hud:before,.landscape-game #hud:after{top:48px;height:84px}.landscape-game #hud .score,.landscape-game #hud .outs{top:56px}.landscape-game #hud .timer{top:96px}.landscape-game #combo{top:96px;bottom:auto}.landscape-game #hit-feedback{padding:4px 9px;top:calc(var(--game-height)*.63)}.landscape-game #hit-feedback .hit{font-size:15px}.landscape-game #hit-feedback #points,.landscape-game #hit-feedback #timing-feedback{font-size:11px}}.landscape-game #hud .timer>span{display:block;line-height:1;font-size:8px}.landscape-game #hud .timer strong{line-height:1;margin-top:3px}#app:not(.landscape-game) #combo{bottom:max(calc(clamp(160px,28dvh,240px) + 25px),calc(env(safe-area-inset-bottom) + clamp(160px,28dvh,240px) + 17px));right:18px}#hit-feedback,.landscape-game #hit-feedback{background:none;border:0;border-radius:0;box-shadow:none;padding:0;gap:0}#hit-feedback #points,#hit-feedback #timing-feedback{display:none}#hit-feedback .hit{color:#284e50;text-shadow:0 1px 2px #fff9e6;font-size:21px;font-weight:900}#hit-feedback .hit.perfect{color:#e76a35;text-shadow:1px 2px 1px #fff7df;font-size:25px}#hit-feedback .hit.out{color:#c94d35;text-shadow:0 1px 2px #fff9e6}.landscape-game #hit-feedback .hit{font-size:19px}.landscape-game #hit-feedback .hit.perfect{font-size:23px}.ranking-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;padding:18px;background:#071923b8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.ranking-modal.hide{display:none}.ranking-card{width:min(520px,100%);max-height:min(80dvh,720px);overflow:auto;padding:22px 24px;border-radius:18px;background:#fff9eafa;color:#243b40;box-shadow:0 24px 65px #061a2480}.ranking-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.ranking-heading h2{margin:0;font-size:22px}.ranking-heading .secondary{width:auto;margin:0;padding:8px 13px}#ranking-note{margin:12px 0;color:#587071;font-size:12px}#ranking-list{list-style:none;padding:0;margin:0;counter-reset:rank;max-height:55dvh;overflow:auto}#ranking-list li{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;padding:10px 8px;border-bottom:1px solid #d9e0d7;font-size:14px}#ranking-list li .rank-number{font-weight:900;color:#e9673f;text-align:center}#ranking-list li.ranking-empty{grid-column:1/-1;display:block;width:100%;min-width:0;text-align:center;line-height:1.7;overflow-wrap:anywhere}#ranking-list li strong{font-variant-numeric:tabular-nums}.score-form{margin-top:14px;padding:12px;border-radius:12px;background:#f0f0e7;text-align:left}.score-form>label{padding:0 0 8px;border:0;font-size:13px;font-weight:800}.score-form>div{display:flex;gap:8px}.score-form input{flex:1;min-width:0;border:1px solid #aab8af;border-radius:8px;padding:10px;font-size:14px;background:#fff;color:#243b40}.score-form .primary{width:auto;flex:none;margin:0;padding:10px 14px;font-size:12px;letter-spacing:0}.score-form small,#submit-message{display:block;margin-top:7px;color:#587071;font-size:10px}.result-actions .secondary{margin:0;color:#375953}@media(max-width:600px){.ranking-card{padding:18px 16px}.ranking-heading h2{font-size:18px}.score-form>div{flex-wrap:wrap}.score-form input{flex-basis:100%}.score-form .primary{width:100%}#result{overflow:auto;max-height:calc(100dvh - 100px)}}html,body,#app{touch-action:pan-y}#overlay.result-view{display:block;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding:max(78px,calc(env(safe-area-inset-top) + 68px)) max(18px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-right))}#overlay.result-view #result{width:min(720px,100%);max-height:none;overflow:visible;margin:0 auto;touch-action:pan-y}#ranking-modal,.ranking-card{touch-action:pan-y;overscroll-behavior:contain}@media(orientation:landscape)and (max-height:600px){#overlay.result-view{padding:54px max(18px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-right))}#overlay.result-view #result{max-height:none;overflow:visible}}