@font-face{font-family:Manrope;src:url("assets/manrope.ttf") format("truetype");font-weight:200 800;font-display:swap}
:root{color-scheme:dark;--paper:#f1f3eb;--dim:#b4bec6;--mint:#99ead4;--apricot:#ffb77c;--line:#34404a;--bg:#11141c;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);--stage:none;--photo-opacity:.59;font-family:Manrope,"Noto Sans JP","Yu Gothic UI",Meiryo,system-ui,sans-serif}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0}body{background:#090b11;color:var(--paper);display:grid;place-items:center;overflow:hidden}body::before{content:"";position:fixed;inset:-40px;background:linear-gradient(#0a0c14ce,#07090ff5),var(--stage) center/cover;filter:blur(22px);pointer-events:none}
button,input{font:inherit}button{color:inherit;cursor:pointer;border:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible,input:focus-visible{outline:2px solid #ffe4a8;outline-offset:3px}button:disabled{cursor:wait;opacity:.68}[hidden]{display:none!important}
#app{width:min(100%,540px,74vh);width:min(100%,540px,74dvh);height:100vh;height:100dvh;position:relative;isolation:isolate;overflow:hidden;background:var(--bg);box-shadow:0 0 110px #000b;container-type:inline-size}
.screen{position:absolute;inset:0;overflow:hidden}
.sequence,.section-id,.eyebrow,.result-track small,.score-card>small{letter-spacing:.11em;font-size:10px;font-weight:750}
.sequence{color:#aeb7be}.eyebrow,.section-id{display:flex;align-items:center;gap:9px}.sheet-mark{display:block;width:24px;height:2px;background:currentColor}
.primary{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:50px;border-radius:12px;background:linear-gradient(115deg,#a2f1d9,#79dfcf);color:#14272c;padding:12px 19px;font-size:15px;font-weight:750}
.primary:hover{filter:brightness(1.055)}.arrow{font-size:23px;font-weight:450;line-height:1}.play-tri{display:inline-block;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:12px solid currentColor}
.result-screen{background:radial-gradient(ellipse at 95% 25%,#2b2635 0%,transparent 55%),linear-gradient(145deg,#191f29,#10151d 75%)}.result-track{display:flex;align-items:center;gap:18px}
.section-line,.paused-track,.sheet-kicker,.gauge-text,.hud-bottom{display:flex;justify-content:space-between;align-items:center}.section-line{margin:4px 0 8px}.section-line span:first-child{font-weight:680}
.text-action{display:block;background:transparent;width:100%;height:41px;color:#d5deda;font-size:13px}.error{font-size:12px;margin:0}
.game-screen{background:#10131b;user-select:none;-webkit-user-select:none;touch-action:none}.stage-photo{position:absolute;top:0;width:100%;height:67%;background:var(--stage) 46% 24%/cover;opacity:var(--photo-opacity)}.stage-shade{position:absolute;inset:0;background:linear-gradient(to bottom,#10131b55 0%,#10131b06 16%,#10131b40 27%,#10131bbd 44%,#10131bf5 62%,#10131b 67%,#11151c 100%)}#field,#keys{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#hud{position:absolute;top:0;left:0;right:0;padding:max(11px,calc(var(--safe-t) + 5px)) 5% 5px;background:linear-gradient(120deg,#191b22f8,#10151bf8);border-bottom:1px solid #f3e1dd23}.hud-main{display:grid;grid-template-columns:minmax(0,1fr) auto 43px;align-items:center;gap:9px}.track-h,.score-h{display:flex;flex-direction:column;gap:2px}.track-h small,.score-h small,.gauge-text small{font-size:9px;color:#c6cbd0;letter-spacing:.05em}.track-h strong{font-size:clamp(16px,5.4cqw,29px);white-space:nowrap;letter-spacing:-.055em;font-weight:620;line-height:1.15}.score-h{text-align:right}.score-h b{font-variant-numeric:tabular-nums;font-weight:500;font-size:clamp(17px,5cqw,26px);letter-spacing:-.045em}.hud-main>button{height:43px;display:flex;align-items:center;justify-content:center;gap:4px;background:transparent;position:relative}.hud-main>button:before{content:"";position:absolute;inset:4px;border:1px solid #a8b9b94d;border-radius:10px;background:#ffffff09}.hud-main>button i{display:block;width:3px;height:13px;background:#edf0e9;border-radius:1px}.hud-bottom{gap:12px;margin-top:5px}.mode-badge{display:flex;align-items:center;gap:5px;color:#ffc18e;border:1px solid #be926266;border-radius:6px;background:#ffb87c0c;padding:3px 6px;font-size:10px;white-space:nowrap}.mode-badge span{border-left:1px solid #ffb87c66;padding-left:5px;color:#f2eee7;font-weight:650}.mini-bars{font-style:normal}.gauge-wrap{flex:1;max-width:65%;padding-bottom:10px;position:relative}.gauge-text b{color:var(--mint);font-size:12px;line-height:1}.gauge{height:4px;background:#41464c;border-radius:5px;position:relative;margin-top:3px}.gauge i{display:block;width:0;height:100%;border-radius:4px;background:linear-gradient(90deg,#448d92,#9bf2d4)}.gauge span{position:absolute;left:70%;top:-2px;height:9px;width:1.5px;background:#fff2d2}.gauge-target{position:absolute;bottom:0;left:70%;transform:translateX(-50%);font-size:7px;font-weight:760;letter-spacing:.04em;color:#ffc18e;white-space:nowrap}
#combo,#judgement,#count-in{position:absolute;left:50%;transform:translate(-50%,-50%);pointer-events:none;text-align:center;text-shadow:0 2px 10px #090c13}#combo b{display:block;font-size:clamp(24px,7cqw,38px);font-weight:390;line-height:1}#combo small,#count-in span{font-size:9px;font-weight:650;letter-spacing:.18em}#judgement{font-size:clamp(13px,3.9cqw,22px);font-weight:740;letter-spacing:.13em;white-space:nowrap;line-height:1.1}.jtime{display:block;letter-spacing:.09em;font-size:8px;opacity:.85;margin-top:3px}#count-in{top:51%;background:#111720e8;padding:10px 18px;border:1px solid #96decc68;border-radius:13px;z-index:2}#count-in span,#count-in b{display:block}#count-in b{font-size:31px;font-weight:550;color:#abf1d9}.pad{position:absolute;pointer-events:auto;background:transparent;padding:0;touch-action:none;border-radius:16px;display:grid;place-items:center}.pad::before{content:"";position:absolute;inset:6% 4%;border-radius:26%;background:var(--ink);box-shadow:0 0 10px var(--ink);opacity:0;pointer-events:none}.pad.down::before{opacity:.55}.pad img{position:relative;width:96%;height:91%;object-fit:fill;pointer-events:none;transform:rotate(var(--tilt,0deg));filter:drop-shadow(0 3px 3px #0009)}.pad.down img{transform:translateY(3px) rotate(var(--tilt,0deg)) scale(.91);filter:brightness(1.55) saturate(1.22) drop-shadow(0 0 7px var(--ink))}#song-progress{position:absolute;left:5%;right:5%;display:flex;align-items:center;gap:13px;color:#bdc4ca;font-size:9px;letter-spacing:.06em;font-variant-numeric:tabular-nums;pointer-events:none}#song-progress>div{height:2px;background:#68717b55;flex:1}#song-progress i{display:block;height:100%;background:#dce1dfaa;width:0}
#overlay{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:max(12px,var(--safe-t)) 6% max(14px,var(--safe-b));background:#070b12c9}.sheet{width:100%;max-width:405px;max-height:100%;overflow:auto;background:linear-gradient(140deg,#252d35,#171e27);border:1px solid #68778179;border-radius:18px;padding:clamp(16px,5cqw,27px);box-shadow:0 10px 35px #0006}.sheet-mark{color:var(--mint);width:19px;margin-bottom:12px}.sheet h2{margin:0;font-size:clamp(23px,6.8cqw,35px);font-weight:620;letter-spacing:-.035em}.sheet-kicker time{font-size:10px;color:#bfc7d0}.paused-track{gap:5px;margin:10px 0 18px}.paused-track strong{font-weight:620;letter-spacing:-.03em;font-size:17px}.paused-track span{color:var(--apricot);font-size:10px;white-space:nowrap;font-weight:680}.sheet #resume{justify-content:flex-start}.sheet-row{width:100%;min-height:48px;display:flex;align-items:center;gap:12px;background:transparent;border-bottom:1px solid #b5c3ce20;text-align:left;font-size:14px}.sheet-row:last-child{border:0}.sheet-row i{font-style:normal;color:#c1ded8;width:19px;text-align:center}.sheet-row b{margin-left:auto;color:#bec9ce;font-size:20px;font-weight:500}.settings-scroll{overflow:auto;max-height:55dvh}.setting{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:3px 10px;margin:12px 0}.setting label,.setting>span{font-size:13px;font-weight:650}.setting output{justify-self:end;color:var(--mint);font-size:12px}.setting input,.setting p,.photo-setting>div{grid-column:1/-1}.setting input{width:100%;accent-color:#99ead4;height:23px;margin:0}.setting p{font-size:10px;color:#b8c4ca;margin:0}.photo-setting>div{display:flex;gap:5px;margin-top:4px}.photo-setting button{flex:1;border-radius:7px;background:#121920;min-height:38px;font-size:12px}.photo-setting button[aria-pressed=true]{background:#9ae7d3;color:#10272c}.options .primary{margin-top:12px}
.result-screen{overflow:auto}.result-inner{padding:max(20px,var(--safe-t)) 7% max(18px,var(--safe-b));min-height:100%;display:flex;flex-direction:column}.result-track{margin:12px 0}.result-track img{width:52px;aspect-ratio:1;object-fit:cover;border-radius:5px}.result-track small{color:var(--apricot)}.result-track h2{font-size:20px;font-weight:600;letter-spacing:-.04em;margin:2px 0}.result-verdict{margin:auto 0 10px}.result-verdict .eyebrow{color:var(--mint)}.result-verdict h1{font-size:clamp(28px,9cqw,48px);margin:4px 0;letter-spacing:-.055em}.result-verdict>span{font-size:11px;color:var(--apricot)}.result-verdict>span:empty{display:none}.score-card{border-top:1px solid #c3d1d130;border-bottom:1px solid #c3d1d130;padding:12px 0}.score-card small,.score-card strong,.score-card>span{display:block}.score-card strong{font-size:clamp(34px,11cqw,62px);letter-spacing:-.055em;font-weight:600;line-height:1.1}.score-card>span{font-size:10px;color:var(--apricot);min-height:14px}#result-metrics{display:grid;grid-template-columns:repeat(3,1fr);margin:12px 0}#result-metrics div,#result-counts div{display:flex;flex-direction:column;gap:3px}#result-metrics small,#result-counts small{font-size:9px;letter-spacing:.035em;color:#bac6cc}#result-metrics b{font-size:17px;font-weight:650}#result-counts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #ffffff19;padding-top:10px;margin:0 0 auto}#result-counts b{font-size:17px}#result-screen .primary{margin-top:16px}.notice{position:absolute;bottom:10%;left:10%;right:10%;border-radius:8px;background:#18232af5;padding:10px;color:#e9f0ed;text-align:center;font-size:12px;z-index:8}
@media(max-height:610px){.result-verdict{margin-top:3px}.result-track{margin:5px 0}.score-card{padding:6px 0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
:root{--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px)}
.track-h strong{letter-spacing:-.025em;font-weight:590}
.track-h strong{line-height:1.19;}
.jp-song .track-h strong{font-size:clamp(13px,4.15cqw,22px);white-space:normal;line-break:strict;}
.jp-song .ticket-mast h2{font-family:Manrope,"Yu Gothic UI",Meiryo,sans-serif;font-weight:850;font-size:clamp(23px,7.7cqw,40px);line-height:1.17;line-break:strict;text-wrap:balance;}
.title-word{font-weight:inherit;white-space:nowrap}
#fever-banner{position:absolute;left:50%;transform:translate(-50%,-50%) skewX(-8deg);pointer-events:none;z-index:1;color:#ffe88b;white-space:nowrap;font:400 clamp(26px,9.3cqw,47px)/1 TicketDisplay,Impact,sans-serif;letter-spacing:.08em;text-shadow:2px 2px 0 #ad3264,-1px -1px 0 #fff8cc,0 0 12px #ffaf3eaa;}
#fever-banner span{display:inline-block;color:#ffe88b;background:linear-gradient(#fff8ce 0%,#ffe575 44%,#ff9b53 65%,#fff4a5 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(2px 2px 0 #aa3464) drop-shadow(0 0 6px #ffae43ad);}
#fever-banner::before,#fever-banner::after{content:"✦";display:inline-block;margin:0 .45em;color:#86f8e5;font:700 .49em/1 Manrope,sans-serif;vertical-align:middle;}
.fever-on #fever-banner{animation:fever-enter 500ms cubic-bezier(.16,.8,.22,1) both;}
.fever-on::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 3px 0 14px #ff629359,inset -3px 0 14px #70f7e760;}
.fever-on #gauge-fill{background:linear-gradient(90deg,#ff82ba,#ffc665,#fff3a8,#75f6de);box-shadow:0 0 7px #ffe189;}
.fever-on #gauge-value{color:#fff0a0}.fever-on .mode-badge{border-color:#ffe0a0aa}
@keyframes fever-enter{0%{transform:translate(-50%,-50%) skewX(-8deg) scale(.65);opacity:0}45%{transform:translate(-50%,-50%) skewX(-8deg) scale(1.16);opacity:1}100%{transform:translate(-50%,-50%) skewX(-8deg) scale(1)}}
.game-screen[inert] #fever-banner{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.fever-on #fever-banner{animation:none}}