/* v2.2.0: animated selection, song caption, preview meter, play forecasts. */
.gr-title-panel .gr-pad-guide{border:0!important;background:none!important;opacity:.55;padding:2px 0 12px!important}
.gr-title-panel:after,.gr-title-screen:before{display:none!important}
.gr-title-panel{grid-template-areas:"mini" "title" "songs" "caption" "difficulty" "level" "start" "return" "guide"!important;grid-template-columns:1fr!important;grid-template-rows:auto auto minmax(0,1fr) auto auto auto auto auto auto!important}
.gr-title-panel .gr-song-title{display:block!important;grid-area:caption;margin:3px auto 7px!important;max-width:90%;font-size:clamp(17px,2vw,25px)!important;font-weight:900;line-height:1.25;color:#fff;text-align:center;white-space:nowrap;text-shadow:0 2px 6px #000,0 0 12px #8456ca66}
.gr-title-panel .gr-image-title{height:clamp(100px,16vh,160px);margin-bottom:7px!important}
.gr-title-panel .gr-song-card{background-size:cover!important;background-position:center!important}
.gr-card-character{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center 40%;z-index:1;filter:drop-shadow(0 6px 10px #0005);transform:translateY(0) scale(.94);pointer-events:none}
.gr-card-character[hidden]{display:none}.gr-title-panel .is-selected .gr-card-character{animation:grCardFloat 3.6s ease-in-out infinite}
@keyframes grCardFloat{0%,100%{transform:translateY(1%) scale(.94)}50%{transform:translateY(-2%) scale(.96)}}
.gr-title-panel .gr-song-card b{font-size:clamp(12px,1.2vw,17px)!important;bottom:13px!important;opacity:.8}.gr-title-panel .gr-song-card:after{font-size:30px!important;bottom:40px!important;opacity:.8}
.gr-card-preview{position:absolute;z-index:4;top:12px;left:12px;display:none;align-items:center;gap:3px;padding:5px 8px;border:1px solid #6ce9ff66;border-radius:5px;background:#070b29d9;height:26px}
.gr-preview-playing .is-selected .gr-card-preview{display:flex}.gr-card-preview i{height:12px;width:3px;background:#6ef2ff;transform-origin:bottom;animation:grPreviewMeter .7s ease-in-out infinite alternate}.gr-card-preview i:nth-child(2){animation-delay:-.3s}.gr-card-preview i:nth-child(3){animation-delay:-.6s}.gr-card-preview i:nth-child(4){animation-delay:-.2s}.gr-card-preview i:nth-child(5){animation-delay:-.4s}.gr-card-preview small{font-size:8px;letter-spacing:.12em;margin-left:5px;color:#cdfaff}
@keyframes grPreviewMeter{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.gr-launching .gr-title-screen{pointer-events:none;animation:grLaunchOut .4s ease-in forwards}.gr-launching .gr-song-card.is-selected{animation:grLaunchCard .4s ease-out forwards!important;z-index:10}.gr-launching .gr-song-card:not(.is-selected){opacity:.2!important}.gr-launching .gr-bg{transform:scale(1.09)}
@keyframes grLaunchOut{0%,30%{opacity:1}100%{opacity:0}}
@keyframes grLaunchCard{to{transform:translateY(-8px) scale(1.2)}}
.gr-target-ring{transform:scale(calc(1 + var(--beat-pulse,0)*.022));opacity:calc(.6 + var(--beat-pulse,0)*.3);border-color:#b5f7ff!important}
.gr-perfect-wave{position:absolute;inset:5%;border:3px solid #eaffff;border-radius:50%;pointer-events:none;box-shadow:0 0 14px #45e9ff,0 0 24px #f26dde88;animation:grPerfectWave .5s ease-out forwards;z-index:4}
@keyframes grPerfectWave{from{transform:scale(.98);opacity:.95}to{transform:scale(1.42);opacity:0}}
.gr-note-forecast{position:absolute;left:50%;bottom:27%;transform:translateX(-50%);z-index:8;width:min(230px,45vw);text-align:center;pointer-events:none;background:#090d25c9;padding:7px 16px 10px;border:1px solid #87b3ea33;border-radius:8px}
.gr-note-forecast[hidden]{display:none}.gr-note-forecast>span{font-size:8px;letter-spacing:.2em;color:#b6d3ed}.gr-forecast-track{position:relative;height:15px;margin-top:4px;background:repeating-linear-gradient(90deg,#79d3f533 0 1px,transparent 1px 25%);border-bottom:1px solid #75dcff55}
.gr-forecast-track b{position:absolute;left:0;top:0;bottom:-2px;width:2px;background:#fff;box-shadow:0 0 6px #7fefff}.gr-forecast-track i{position:absolute;top:5px;width:6px;height:6px;background:#78ebff;border-radius:50%;box-shadow:0 0 5px #45cffa}.gr-forecast-track i.accent{background:#ff94e2;width:8px;height:8px;top:4px}.gr-forecast-track i[hidden]{display:none}
@media(min-width:701px){.gr-title-panel .gr-song-card{width:min(24vw,33vh,390px);flex-basis:min(24vw,33vh,390px)}}
@media(max-width:700px){.gr-title-panel .gr-image-title{height:clamp(90px,13dvh,120px)}.gr-title-panel .gr-song-title{font-size:clamp(16px,4.8vw,21px)!important;margin:3px auto 6px!important}.gr-title-panel .gr-song-card{width:min(73vw,34dvh);flex-basis:min(73vw,34dvh)}.gr-title-panel .gr-song-list{padding-left:calc((100vw - min(73vw,34dvh))/2);padding-right:calc((100vw - min(73vw,34dvh))/2)}.gr-note-forecast{bottom:22%;width:170px;padding:4px 13px 7px}.gr-title-panel .gr-pad-guide{font-size:8px}.gr-title-panel .gr-song-card b{font-size:12px!important}}
@media(prefers-reduced-motion:reduce){.gr-title-panel .is-selected .gr-card-character,.gr-card-preview i,.gr-launching .gr-title-screen,.gr-launching .gr-song-card.is-selected{animation:none!important}.gr-perfect-wave{display:none}}
#gr-game-ftp .gr-title-panel .gr-song-card,#gr-game-ftp .gr-title-panel .gr-song-card.is-selected,#gr-game-ftp .gr-title-panel .gr-song-card:hover{background-size:cover!important;background-position:center!important}

/* Shared volume controls: keep calibration and volume separate. */
#gr-game-ftp .gr-volume{display:flex;align-items:center;gap:6px;white-space:nowrap;color:#d9f6ff;font-size:11px;font-weight:800}
#gr-game-ftp .gr-volume input{width:90px;height:28px;margin:0;accent-color:#63eeff;cursor:pointer;touch-action:pan-y}
#gr-game-ftp .gr-volume output{min-width:34px;text-align:right;font-variant-numeric:tabular-nums}
#gr-game-ftp .gr-volume input:focus-visible{outline:2px solid #ff73d7;outline-offset:2px;border-radius:4px}
#gr-game-ftp .gr-controls .gr-volume{position:absolute;left:50%;bottom:36px;transform:translateX(-50%)}
#gr-game-ftp .gr-controls label:not(.gr-volume){position:absolute;left:50%;bottom:7px;transform:translateX(-50%);font-size:10px;gap:6px}
#gr-game-ftp .gr-controls label:not(.gr-volume) input{width:110px}
#gr-game-ftp #gr-preview-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:380px){#gr-game-ftp .gr-preview-controls{gap:3px}#gr-game-ftp .gr-preview-controls button{padding:3px 5px}#gr-game-ftp .gr-preview-controls .gr-volume input{width:65px}}
/* Reserve the centre for TAP; settings sit beside it on desktop. */
@media(min-width:701px){
 #gr-game-ftp .gr-controls .gr-volume{left:calc(50% - 215px);bottom:88px}
 #gr-game-ftp .gr-controls label:not(.gr-volume){left:calc(50% + 215px);bottom:88px}
 #gr-game-ftp .gr-controls input{min-height:36px}
}
@media(max-width:700px){
 #gr-game-ftp .gr-tap-button{bottom:calc(88px + env(safe-area-inset-bottom))}
 #gr-game-ftp .gr-note-forecast{bottom:calc(216px + env(safe-area-inset-bottom))}
 #gr-game-ftp .gr-controls{padding-bottom:90px}
 #gr-game-ftp .gr-controls .gr-volume,#gr-game-ftp .gr-controls label:not(.gr-volume){display:grid;grid-template-columns:1fr auto;gap:0 6px;width:min(38vw,180px);bottom:6px;font-size:11px}
 #gr-game-ftp .gr-controls .gr-volume{left:25%}
 #gr-game-ftp .gr-controls label:not(.gr-volume){left:75%}
 #gr-game-ftp .gr-controls label input,#gr-game-ftp .gr-controls label:not(.gr-volume) input{grid-row:2;grid-column:1 / -1;width:100%;height:40px;margin:0}
 #gr-game-ftp .gr-controls label output{grid-row:1;grid-column:2;text-align:right}
}
/* A slim forecast leaves more room for the character and target. */
#gr-game-ftp .gr-note-forecast{display:flex;align-items:center;gap:10px;height:24px;width:min(260px,76vw);padding:3px 10px}
#gr-game-ftp .gr-note-forecast[hidden]{display:none}
#gr-game-ftp .gr-note-forecast>span{font-size:7px;letter-spacing:.08em;white-space:nowrap}
#gr-game-ftp .gr-forecast-track{flex:1;height:14px;margin:0}
@media(min-width:701px){
 #gr-game-ftp .gr-hit-zone{width:min(46vw,460px,calc(100dvh - 320px));margin-top:-32px}
 #gr-game-ftp .gr-note-forecast{bottom:204px}
}
@media(max-width:700px){
 #gr-game-ftp .gr-hit-zone{width:min(82vw,400px,calc(100dvh - 348px));margin-top:-52px}
 #gr-game-ftp .gr-note-forecast{bottom:calc(209px + env(safe-area-inset-bottom))}
}
/* Fill taller phone screens without crowding compact phones. */
@media(max-width:700px) and (min-height:800px){
 #gr-game-ftp .gr-hit-zone{width:min(94vw,430px,calc(200dvh - 1280px));margin-top:8px}
 #gr-game-ftp .gr-note-forecast{bottom:calc(235px + env(safe-area-inset-bottom))}
}
/* Mobile chorus: animate transforms, avoid full-screen filter repaints. */
@media(max-width:700px),(pointer:coarse){
 #gr-game-ftp.gr-playing .gr-bg,#gr-game-ftp.gr-chorus .gr-bg{filter:none;transform:none;transition:none}
 #gr-game-ftp.gr-playing .gr-bg i{animation:none}
 #gr-game-ftp .gr-energy-ring{display:none}
 #gr-game-ftp .gr-hit-zone,#gr-game-ftp .gr-scorpion,#gr-game-ftp.gr-chorus .gr-scorpion{filter:none}
 #gr-game-ftp.gr-playing .gr-scorpion,#gr-game-ftp.gr-playing .gr-approach-ring{will-change:transform}
 #gr-game-ftp .gr-target-ring{transform:none;opacity:.85;box-shadow:0 0 12px #56edff88}
 #gr-game-ftp .gr-target-ring:after{animation:none}
 #gr-game-ftp .gr-approach-ring{box-shadow:0 0 12px #ffe16988}
 #gr-game-ftp.gr-chorus .gr-target-ring{box-shadow:0 0 16px #ffe16999}
 #gr-game-ftp.gr-chorus .gr-tap-button{animation:none;box-shadow:0 0 20px #ffe16999,inset 0 0 12px #fff}
 #gr-game-ftp .gr-particles i{box-shadow:none}
}
/* The full-width settings layer must not intercept the TAP button. */
#gr-game-ftp .gr-controls{pointer-events:none}
#gr-game-ftp .gr-controls button,#gr-game-ftp .gr-controls label{pointer-events:auto}
/* Keep touch targets above decorative layers, below the real menus. */
#gr-game-ftp .gr-tap-button{z-index:20;touch-action:none!important;-webkit-touch-callout:none}
#gr-game-ftp .gr-tap-button>span{pointer-events:none}
/* Strong press and spring release, without new particles or blur. */
#gr-game-ftp .gr-tap-button{scale:1;translate:0 0;transition:scale .18s cubic-bezier(.2,1.7,.4,1),translate .18s cubic-bezier(.2,1.7,.4,1),opacity .12s ease-out}
#gr-game-ftp .gr-tap-button.gr-held{scale:.85;translate:0 6px;opacity:1;transition:none;animation:none!important}
@media(prefers-reduced-motion:reduce){#gr-game-ftp .gr-tap-button{transition:none}}

#gr-game-ftp .gr-tap-button.gr-held:before{border-color:#fff;border-width:4px;background:#ffffff24}
#gr-game-ftp .gr-tap-button.gr-held>span{color:#fff;text-shadow:0 2px 0 #32135f}