/* Moonlight theme: one scene per song, one shared four-column playfield. */
:root{color-scheme:dark;--ink:#edf5ff;--muted:#b2c4dd;--mint:#99ffd4;--line:#56728d;--song-art:url('assets/moon-city-refined.jpg');--scene-glow:#73baff}
body,body:not([data-screen=game]):not([data-screen=result]),body[data-screen=game],body[data-screen=result]{background:#030b18;color:var(--ink);--mint:#99ffd4;--ink:#edf5ff;--muted:#b2c4dd;--line:#56728d;color-scheme:dark}
main,body:not([data-screen=game]):not([data-screen=result]) main,body[data-screen=game] main,body[data-screen=result] main{position:relative;isolation:isolate;max-width:480px;min-height:100dvh;padding:24px 22px 18px;background:#041023;overflow:hidden}
main::before{content:'';position:absolute;inset:0;z-index:-2;background-image:var(--song-art);background-size:cover;background-position:center;opacity:.92;transition:opacity .4s;pointer-events:none}
main::after{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 65% 35%,color-mix(in srgb,var(--scene-glow) 12%,transparent),transparent 60%),linear-gradient(180deg,#020b19b8 0%,#020b1910 22%,#020b1900 42%,#020b19e8 72%,#020b19 100%);pointer-events:none}
body[data-screen=game] main::after{background:linear-gradient(180deg,#020b19f5 0%,#020b19e5 20%,#020b1966 45%,#020b1938 75%,#020b1980 100%)}
body[data-screen=result] main::after{background:#020b19b8}
header{margin:0 0 20px;position:relative;z-index:1}header a{font-size:20px;gap:9px;letter-spacing:.2px}header img,body[data-screen=game] header img,body[data-screen=result] header img{width:28px;height:28px;filter:invert(85%) sepia(65%) saturate(650%) hue-rotate(91deg)}header span{font-size:10px;color:#b6c6e0}
.player-top{font-size:11px;color:#daeaff;margin:0;letter-spacing:1px}.player-caption{font-size:10px;color:#b3c7df}.cover{opacity:0!important;pointer-events:none;height:clamp(225px,40dvh,380px)!important;max-height:none!important;width:100%!important;aspect-ratio:auto!important;margin:0!important;box-shadow:none}
.songline{margin:12px 0 4px}.songline h2{font-size:30px;font-weight:700;letter-spacing:.5px}.songline p{font-size:13px;color:#bdcfe8;letter-spacing:.6px}.song-title-row{gap:12px}.play-song-inline{min-height:36px;padding:7px 16px;color:#e9fff5;border:1px solid #9dffcb80;background:#087e59c9;box-shadow:inset 0 1px 5px #d5fff536,0 0 17px #3affe525;font-size:12px}.play-song-inline:hover{background:#15956b;box-shadow:0 0 23px #3affe540}
#spectrum{width:100%;height:26px;margin:15px 0 10px;opacity:.85}.listening{margin:0}#previewProgress{accent-color:#89ffba;height:4px}.time-labels{color:#c7d7ec;margin-top:10px;font-size:11px}.music-controls{margin:22px 0 20px}.music-controls button,.music-controls #openLibrary{color:#f1f7ff}.music-controls img{filter:invert(1);opacity:.95}.music-controls span{color:#b8cee4;font-size:10px}.music-controls .round{width:70px;height:70px;background:#00b67d;box-shadow:0 8px 32px #00da9d21}.music-controls .round:hover{background:#09c78a}.music-controls .round img{width:32px;height:32px}.music-controls button{transition:transform .18s,background .18s,box-shadow .18s}.music-controls button:active{transform:scale(.94)}
.player-secondary,.player-secondary .upload,#playerStatus{color:#a8bed6;font-size:10px}.player-secondary{margin-top:8px}#playerStatus{margin:10px 0 0;line-height:1.6}footer{color:#8399b5;font-size:9px;margin-top:18px}
body[data-preview=true] main::before{animation:scene-breathe 12s ease-in-out infinite alternate}body.scene-changing main::before{animation:scene-reveal .65s ease-out}
@keyframes scene-breathe{from{transform:scale(1)}to{transform:scale(1.025)}}@keyframes scene-reveal{from{opacity:.2;transform:scale(1.025)}to{opacity:.92;transform:scale(1)}}
#difficultySheet,#librarySheet{background:#091a2cf5;backdrop-filter:blur(24px);color:#edf5ff;border:1px solid #6681a54d;box-shadow:0 20px 80px #0008}.sheet-subtitle,.sheet-song span,.clip-controls p,.sectionlabel small,.feedback-settings p,details,#status,#libraryStatus,.library-note{color:#b2c4dd}.clip-controls,.difficulties button{background:#183047a8}.difficulties button{border-color:#314c65}.difficulties span{color:#b7cce1}.difficulties .selected{background:#11624960;border-color:#65deb0}.difficulties .selected strong,.readyline{color:#9fffd1}select,input[type=number]{background:#10263d;color:#edf5ff;border-color:#446079}summary{color:#edf5ff}.primary{background:#00bc81;color:#021f17;transition:filter .2s,transform .2s}.ghost{border-color:#55738f;background:#10273b50}.library-song{background:#122b40;color:#edf5ff;border-color:#3b546c}.library-song small{color:#b5c5de}.song-choice{color:#9fffd1}.library-song[aria-pressed=true]{background:#154e4266;border-color:#67dcb3}#challengeInvite{background:#0c293bef;border-color:#4c8e87;color:#e5f6ff}.resultcard{background:#0b2136d9;border-color:#3e5870;backdrop-filter:blur(12px)}

/* A received challenge is the focus of the screen, including on tall phones. */
main:has(#challengeInvite:not([hidden]))::after{content:"";position:fixed;inset:0;z-index:80;background:#0413219c;backdrop-filter:blur(4px)}
#challengeInvite{position:fixed;top:50%;left:50%;z-index:99;transform:translate(-50%,-50%);width:min(382px,calc(100vw - 36px));max-height:calc(100dvh - 44px);overflow:auto;margin:0;padding:24px 20px;border:1px solid #83c7c0;border-radius:22px;background:linear-gradient(150deg,#1b3d51f5,#0b2237fa 68%);box-shadow:0 30px 80px #020e19ba,inset 0 1px #d6fff47a;text-align:left}
#challengeInvite strong{display:block;font-size:18px;line-height:1.4;letter-spacing:.2px}
#challengeInvite p{color:#dcecf1;font-size:12px;line-height:1.65}
#challengeInvite .primary{margin:14px 0 12px;background:#71dfad;box-shadow:0 9px 22px #28bb8440}
#challengeInvite .ghost{min-height:42px;padding:10px 14px;color:#edf9f8;border-color:#82bdb8}
#inviteStatus{margin-bottom:0;color:#b7d4d9!important}
@media(max-height:520px){#challengeInvite{top:calc(50% + env(safe-area-inset-top)/2);padding:16px 20px}}
/* Header is outside the canvas: track lines can never leak into it. */
.gamehead{display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:8px 10px;align-items:center;position:relative}.game-cover{width:50px;height:64px;grid-column:1;grid-row:1/3;border-radius:8px;border:1px solid #7596b755}.gamehead>div:not(.score-box){grid-column:2;grid-row:1/3}.gamehead strong{font-size:20px;max-width:100%;line-height:1.4}.gamehead p{font-size:10px;margin-top:6px}.gamehead #pause{grid-column:3;grid-row:1;display:flex;align-items:center;gap:6px;margin:0;font-size:12px;padding:9px 12px}.gamehead #pause img{width:16px;height:16px;filter:invert(1)}.gamehead #quit{grid-column:3;grid-row:2;border:0;background:none;color:#aabed6;padding:3px;font-size:10px;justify-self:end}.gamehead .score-box{grid-column:1/-1;grid-row:3;width:auto;margin:5px 0 0;text-align:right}.score-box small{color:#9cdbbd;font:10px ui-monospace,monospace;letter-spacing:1.5px}#score{font:800 30px ui-monospace,monospace;letter-spacing:2px;color:#a6ffd0;text-shadow:0 0 16px #79ffb624}.life-row{margin:-32px 43% 0 0;gap:7px;height:30px;font-size:12px;color:#acffd3}.life-icon{width:20px;height:20px;filter:invert(87%) sepia(39%) saturate(600%) hue-rotate(90deg)}.life-row progress{height:7px;min-width:0}.life-row progress::-webkit-progress-bar{background:#274057}.life-row progress::-webkit-progress-value{background:#9dffd0}.progress{margin:18px 0 0;background:#486a8633;height:2px}.progress i{background:#78eeef}.game-clock{display:block;text-align:right;font:11px ui-monospace,monospace;color:#bdd1ea;margin:7px 0 10px}
.arena{background:transparent!important;background-image:none!important;border-radius:0;min-height:270px;height:calc(100dvh - 272px);max-height:700px;overflow:hidden}.arena::before{display:none}#canvas{position:absolute;inset:0;display:block;width:100%;height:100%}.laneButtons{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}.laneButtons button{width:auto;min-width:0;border:0;padding:0;background:transparent!important;position:relative;touch-action:none}.laneButtons button span{left:7px;right:7px;top:85%;bottom:3%;border-radius:12px;border:1px solid #84e7f9;box-shadow:inset 0 1px 3px #d7ffff8c,inset 0 -6px 18px #00476a50,0 4px 14px #00172f5c;background:linear-gradient(145deg,#23577991,#0b2845d9);color:#d8efff;font:17px ui-monospace,monospace;transition:background .1s,box-shadow .12s}.laneButtons button span::before{content:'';position:absolute;top:0;left:33%;right:33%;height:2px;border-radius:4px;background:#bdffff;box-shadow:0 0 7px #62efff}.laneButtons button:active span,.laneButtons button.is-held span,.laneButtons button.is-hit span{background:linear-gradient(145deg,#4ac8d280,#0c688edb);border-color:#d7ffff;box-shadow:inset 0 0 22px #52e6ff70,0 0 16px #34d5ff50}.laneButtons button b{font:inherit;font-weight:500}.hint{font-size:9px;line-height:1.6;margin:9px 0 0}.gamehead+#life{display:none}body[data-screen=game] footer{display:none}#countdown{font-size:64px;text-shadow:0 0 28px #68f2d9aa}#pauseOverlay{background:#07182de8;backdrop-filter:blur(14px)}
/* Actual input capabilities, not merely narrow desktop window width. */
@media(pointer:coarse){.laneButtons button b{visibility:hidden}}
body[data-touch-ui=true] .laneButtons button b{visibility:hidden}
@media(min-width:700px){main,body:not([data-screen=game]):not([data-screen=result]) main,body[data-screen=game] main,body[data-screen=result] main{margin:18px auto;border-radius:22px;border:1px solid #284763;min-height:calc(100dvh - 36px);padding:24px 24px 18px;box-shadow:0 20px 100px #0009}.arena{height:calc(100dvh - 306px)}.cover{height:clamp(200px,38dvh,340px)!important}#difficultySheet{margin:auto;border-radius:24px}}
@media(max-width:380px){main,body:not([data-screen=game]):not([data-screen=result]) main,body[data-screen=game] main,body[data-screen=result] main{padding:18px 14px 12px}header a{font-size:18px}header span{font-size:9px}.gamehead strong{font-size:18px}.game-cover{display:block}.songline h2{font-size:27px}.arena{height:calc(100dvh - 253px)}.laneButtons button span{left:5px;right:5px;border-radius:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* A compact, recognizable game entry beside the song title. */
.play-song-inline{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:8px 14px;font-size:13px;font-weight:650;background:#069d6de8;border-color:#9dffcbba;box-shadow:inset 0 1px 3px #e1fff54d,0 0 18px #3affe533;transition:background .18s,box-shadow .18s,transform .18s}
.play-song-inline img{width:20px;height:20px;flex-shrink:0;filter:invert(1);opacity:.96}
.play-song-inline:hover{background:#0bb87e;box-shadow:inset 0 1px 3px #e1fff560,0 0 23px #3affe54a}
.play-song-inline:active{transform:scale(.97)}
/* Compact rounded rectangle for the contextual game entry. */
.play-song-inline{border-radius:10px;min-height:42px;padding:9px 15px;border:1px solid #9dffcbba;background:#069d6de8;box-shadow:inset 0 1px 3px #e1fff54d,0 3px 14px #00b87a24}
.play-song-inline:hover{background:#0bb87e;box-shadow:inset 0 1px 3px #e1fff560,0 4px 18px #00b87a38}
.play-song-inline:focus-visible{outline:2px solid #baffdf;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.play-song-inline:active{transform:none}}

.remix-chart{display:block;width:100%;margin-top:10px;min-height:42px;color:#baffdf;border-color:#61a28f}.remix-chart:hover{background:#174b4266}.remix-note{font-size:11px;line-height:1.6;color:var(--muted);text-align:center;margin:9px 0}.readyline{flex-wrap:wrap;line-height:1.7}

#popularSheet{width:min(460px,calc(100% - 24px));max-height:88dvh;border:1px solid #6681a54d;border-radius:22px;padding:24px;background:#091a2cf5;color:#edf5ff;overflow:auto;backdrop-filter:blur(24px)}#popularSheet::backdrop{background:#020b19b0}#popularTitle{font-size:22px}.popular-row{padding:16px 0;border-bottom:1px solid #45658066}.popular-row h3{font-size:17px;color:#baffdf;margin:0 0 8px}.popular-row p{font-size:12px;color:#b2c4dd;margin:7px 0}.popular-actions{display:flex;gap:10px;margin-top:12px}.popular-actions button{flex:1;min-height:40px}.popular-actions button:first-child{background:#087e59;color:#fff;border-color:#67dcb3}.popular-empty{padding:17px 0;border-bottom:1px solid #45658044;color:#8da6bf;font-size:13px}.popular-rewards{border-top:1px solid #45658066;margin-top:22px;padding-top:15px}#popularLink{width:100%;margin:10px 0;padding:10px;color:#eef8ff;background:#10263d;border:1px solid #55738f;border-radius:8px}#popularShare{font-size:12px;margin-top:16px}#openPopular{font-size:11px;color:#baffdf;min-height:40px}#likePlayed{margin:14px 0 0;color:#baffdf}

/* One short celebration on completion; the achievement remains readable. */
.full-combo{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;margin:0 0 20px;padding:20px 10px 23px;border:1px solid #a6ffe5a0;border-radius:18px;background:radial-gradient(ellipse at 50% 0%,#68ffce32,transparent 72%),linear-gradient(125deg,#102f43eb,#071525f2);box-shadow:0 0 28px #6effcf20,inset 0 1px #e1fff530;animation:fc-arrive .7s cubic-bezier(.16,1,.3,1) both;pointer-events:none}
.full-combo[hidden]{display:none}
.full-combo strong{font:900 clamp(25px,7vw,36px)/1.1 ui-sans-serif,system-ui,sans-serif;letter-spacing:2px;color:#d7ffed;text-shadow:0 0 18px #5bffc78c;animation:fc-letter .85s cubic-bezier(.16,1,.3,1) both}
.fc-caption{font-size:11px;letter-spacing:1px;color:#bcdccd}.fc-spark{font-size:23px;line-height:1;color:#ffe4a6;text-shadow:0 0 16px #ffdc96;animation:fc-star 1s ease-out both}
.full-combo::before{content:'';position:absolute;z-index:-1;inset:-50%;background:linear-gradient(110deg,transparent 40%,#d6fff530 49%,transparent 58%);transform:translateX(-80%);animation:fc-sweep 1.3s .15s ease-out both}
.full-combo::after{content:'';position:absolute;left:50%;top:40%;width:4px;height:4px;background:#baffdf;box-shadow:-96px -20px #baffdf,105px -25px #ffdca4,-130px 22px #8bddff,130px 28px #baffdf,-63px 48px #ffdca4,68px 48px #8bddff;animation:fc-particles 1.15s .15s ease-out both}
@keyframes fc-arrive{from{opacity:0;transform:translateY(14px) scale(.92)}to{opacity:1;transform:none}}
@keyframes fc-letter{from{opacity:0;transform:scale(.75);filter:blur(5px)}to{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes fc-star{from{transform:scale(.3) rotate(-90deg)}to{transform:scale(1) rotate(0)}}
@keyframes fc-sweep{to{transform:translateX(80%)}}
@keyframes fc-particles{0%{opacity:0;transform:scale(.3)}20%{opacity:1}100%{opacity:0;transform:scale(1.2) translateY(12px)}}
@media(prefers-reduced-motion:reduce){.full-combo,.full-combo strong,.fc-spark{animation:none}.full-combo::before,.full-combo::after{display:none}}

/* v19: readable creator cards and medal podium. */
#popularSheet{padding:20px;width:min(470px,calc(100% - 20px));max-height:94dvh;background:linear-gradient(155deg,#132c40f9,#071625fc);border-color:#6bbaa986;box-shadow:0 24px 90px #000a,inset 0 1px #c5fff324}
#popularSheet .sheet-header{align-items:center;gap:8px;margin-bottom:8px}#popularTitle{font-size:22px;letter-spacing:.02em;margin:0}#popularSong{margin:4px 0 8px;color:#d0fce5;font-weight:600}#popularSheet>.muted{font-size:11px;line-height:1.6;color:#c9dce9;margin:6px 0 12px}
#popularSheet .popular-row{position:relative;margin:10px 0;padding:13px 14px;border:1px solid #6f98b24d;border-radius:17px;background:linear-gradient(120deg,#233d526e,#102438c9);box-shadow:inset 0 1px #ffffff0d}
#popularSheet .rank-1{border-color:#d9bb697d;background:linear-gradient(120deg,#8e744326,#173245cf);box-shadow:0 0 25px #ecc7730b,inset 0 1px #ffedb62b}
.rank-header{display:flex;align-items:center;gap:12px}.rank-medal{display:block;flex:0 0 44px;width:44px;color:#f8d77e;filter:drop-shadow(0 3px 5px #0005)}.rank-medal svg{width:44px;height:54px;display:block}.rank-2 .rank-medal{color:#d2e1f6}.rank-3 .rank-medal{color:#d89e7c}.rank-info{min-width:0;flex:1}
#popularSheet .rank-info h3{font-size:16px;line-height:1.3;margin:0 0 7px;color:#f2fff9;font-weight:700}.rank-author{display:flex;align-items:center;gap:8px}.rank-avatar{width:30px;height:30px;box-sizing:border-box;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;padding:5px;border-radius:9px;background:hsl(var(--avatar-hue) 35% 18%);border:1px solid hsl(var(--avatar-hue) 50% 60% / .55);flex-shrink:0}.rank-avatar i.on{background:hsl(var(--avatar-hue) 72% 76%)}.rank-credit{min-width:0;display:flex;flex-direction:column;gap:2px}.rank-credit strong{font-size:12px;color:#edf7ff;font-weight:650}.rank-credit small{font-size:10px;line-height:1.35;color:#c0d2e4;letter-spacing:.03em}
#popularSheet .rank-meta{font-size:11px;font-weight:500;color:#d2e2ef;margin:10px 0 5px}#popularSheet .rank-counts{font-size:11px;color:#d3f5e5;margin:0;font-weight:600}.popular-actions{gap:7px;margin-top:10px}.popular-actions button{font-size:12px;padding:7px 8px;min-height:34px;border-radius:10px;border-color:#6889a15e;color:#e7f0f8;font-weight:600}.popular-actions button:first-child{background:linear-gradient(115deg,#baf9d7,#71dfb5);color:#103b2c;border-color:#c3ffdf;box-shadow:0 3px 12px #68e7aa1a}.popular-actions button:disabled{color:#acbfce;opacity:.85}#popularSheet .popular-rewards{font-size:10px;line-height:1.6;color:#b8cfde;margin-top:14px;padding-top:12px}#popularSheet #closePopular{font-size:12px;padding:8px 12px;min-height:36px}#popularSheet #refreshPopular{min-height:34px;font-size:12px}
@media(prefers-reduced-motion:no-preference){.popular-row{animation:rank-rise .35s ease-out both}.rank-2{animation-delay:.07s}.rank-3{animation-delay:.14s}@keyframes rank-rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}}

/* v22 · Smoked gradient glass. Keep the artwork sharp behind a quiet reading surface. */
:root{--glass-rim:#e4f8f166;--glass-rim-soft:#cadcdf35;--glass-ink:#f7fcff;--glass-muted:#d4e2e8}
body[data-screen=game] main::after{background:linear-gradient(180deg,#06131de0 0%,#06131db5 20%,#06131d57 48%,#06131d29 74%,#06131d9c 100%)}
.gamehead{isolation:isolate}
.gamehead::before{content:"";position:absolute;z-index:-1;inset:-10px -11px -7px;border-radius:21px;border:1px solid var(--glass-rim);background:linear-gradient(145deg,#eaf7f722 0%,#6d858b25 24%,#182b32a8 58%,#0b1b25d1 100%);backdrop-filter:blur(16px) saturate(125%);-webkit-backdrop-filter:blur(16px) saturate(125%);box-shadow:inset 0 1px #ffffff65,inset 0 -1px #b7d2cf18,0 14px 34px #020c15a3}
.gamehead::after{content:"";position:absolute;z-index:-1;left:22px;right:34px;top:-7px;height:1px;border-radius:2px;background:linear-gradient(90deg,transparent,#f6fffcad 33%,#e1fff067 70%,transparent)}
.gamehead strong{color:var(--glass-ink);font-weight:700;text-shadow:0 1px 3px #00121ba0}
.gamehead p,.score-box small,.game-clock{color:var(--glass-muted)}
.gamehead .score-box{font-variant-numeric:tabular-nums}
#score{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-style:normal;font-variant-numeric:tabular-nums;letter-spacing:.08em;color:#d6ffe7;text-shadow:0 1px 2px #001a20,0 0 18px #8cffe351}
.gamehead #pause{border:1px solid #e6f6f17a;border-radius:12px;background:linear-gradient(150deg,#eefcff24,#132d3bad 80%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 1px #ffffff6b,0 5px 15px #01111d7a;color:#f3fbff}
.gamehead #quit{color:#d5e2e8}
.game-cover{border:1px solid #e2f5ee7a;box-shadow:inset 0 1px #fff6,0 5px 16px #010c1780}
.life-row{position:relative;z-index:2;margin:16px 0 0;gap:9px;height:20px;color:#e4ffef}.life-row progress{appearance:none;-webkit-appearance:none;border:1px solid #e4faf559;border-radius:20px;overflow:hidden;box-shadow:inset 0 1px 3px #001319}.life-row progress::-webkit-progress-bar{background:#1b2e35c9}.life-row progress::-webkit-progress-value{background:linear-gradient(90deg,#73dfae,#bbffe2)}
.life-row #lifeValue{min-width:3ch;text-align:right;font-variant-numeric:tabular-nums}
.arena{height:calc(100dvh - 326px)}
.progress{height:3px;border-radius:20px;background:#d8f0ef36;box-shadow:inset 0 1px 3px #02131d}.progress i{border-radius:20px;background:linear-gradient(90deg,#58dcbc,#c1fff2);box-shadow:0 0 9px #79efd2aa}
.laneButtons button span{border:1px solid #ddf6f382;border-radius:17px;background:linear-gradient(145deg,#f0ffff29 0%,#859da23a 20%,#263f4f98 60%,#102839c5 100%);backdrop-filter:blur(11px) saturate(115%);-webkit-backdrop-filter:blur(11px) saturate(115%);box-shadow:inset 0 1px #ffffff91,inset 0 -8px 18px #0a202b48,0 8px 18px #00152173;color:#f5fbff}
.laneButtons button span::before{left:18%;right:18%;height:1px;background:linear-gradient(90deg,transparent,#f4fffcaa,transparent);box-shadow:none}
.laneButtons button:active span,.laneButtons button.is-held span,.laneButtons button.is-hit span{border-color:#d5ffec;background:linear-gradient(145deg,#d6fff58a,#3c9a98a8 42%,#174050d8);box-shadow:inset 0 1px #ffffffcb,inset 0 0 24px #96ffdd60,0 0 18px #6affd75a}
#pauseOverlay{background:linear-gradient(150deg,#1a303bcf,#07151fe8);backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%)}
.resultcard,#difficultySheet,#librarySheet,#popularSheet,#challengeInvite{border:1px solid var(--glass-rim);background:linear-gradient(145deg,#d0e1df27 0%,#526b7040 20%,#142b32d9 57%,#0a1a25ee 100%);backdrop-filter:blur(20px) saturate(120%);-webkit-backdrop-filter:blur(20px) saturate(120%);box-shadow:inset 0 1px #ffffff68,inset 0 -1px #bed7d41c,0 24px 70px #010b15a8;color:var(--glass-ink)}
.resultcard{border-radius:25px}.result-cover{border:1px solid #e3f6f178;box-shadow:0 5px 18px #0008}
#challengeInvite{background:linear-gradient(145deg,#d9e9e83d 0%,#48616691 26%,#142934f3 78%);box-shadow:inset 0 1px #ffffffa3,0 26px 70px #010b15bd}
#popularSheet .popular-row{border-color:#e1f1eb4d;background:linear-gradient(140deg,#dcebe025,#526b6c39 28%,#152c35c2 100%);box-shadow:inset 0 1px #ffffff41,0 8px 25px #0004}
.full-combo{border-color:#d5fff0a6;background:linear-gradient(145deg,#d9fff538,#20504477 40%,#09232edb);box-shadow:inset 0 1px #ffffff8c,0 0 28px #65ffcc31}
@media(max-width:380px){.laneButtons button span{border-radius:13px}.arena{height:calc(100dvh - 307px)}}
@media(min-width:700px){.arena{height:calc(100dvh - 360px)}}

/* v25 · Optical glass: translucent artwork, soft reflected light, silver lip. */
:root{--glass-rim:#edf8f28c;--glass-rim-soft:#d9ebe54d}
.gamehead::before{border-color:var(--glass-rim);background:radial-gradient(ellipse 72% 66% at 14% -8%,#f3ffff40 0%,#dae6e921 37%,transparent 80%),radial-gradient(ellipse 58% 80% at 90% 5%,#afdbe522 0%,transparent 80%),linear-gradient(155deg,#aebcb43e 0%,#64777b55 26%,#1a303b9c 62%,#0e202bc9 100%);backdrop-filter:blur(22px) saturate(145%) brightness(1.04);-webkit-backdrop-filter:blur(22px) saturate(145%) brightness(1.04);box-shadow:inset 0 1px #ffffffb0,inset 1px 0 #f6ffff45,inset 0 -1px #30475291,0 18px 42px #020c16a6}
.gamehead::after{background:linear-gradient(90deg,transparent,#ffffffdc 21%,#e7fff79a 56%,transparent 85%)}
.gamehead #pause{border-color:#effff39c;background:radial-gradient(ellipse at 18% 0%,#eaffff4d,transparent 65%),linear-gradient(155deg,#b8d2d03f,#183140a8 72%);backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%);box-shadow:inset 0 1px #ffffffa8,inset 1px 0 #f9ffff4a,0 8px 18px #00111d7d}
.laneButtons button span{border-color:#e5f6f4a3;background:radial-gradient(ellipse 100% 75% at 13% -12%,#f4ffff5b 0%,#d5e7e522 48%,transparent 77%),linear-gradient(155deg,#91acac61 0%,#48636c8a 38%,#162e3dc9 100%);backdrop-filter:blur(16px) saturate(135%);-webkit-backdrop-filter:blur(16px) saturate(135%);box-shadow:inset 0 1px #ffffffc9,inset 1px 0 #eaffff52,inset 0 -1px #061a2491,0 9px 20px #00152080}
.laneButtons button span::before{background:linear-gradient(90deg,transparent,#ffffffd5 25%,#e6fffab3 62%,transparent 95%)}
.laneButtons button span::after{content:"";position:absolute;left:3px;top:24%;bottom:23%;width:1px;background:linear-gradient(180deg,transparent,#eaffff7b,transparent)}
.resultcard,#difficultySheet,#librarySheet,#popularSheet,#challengeInvite{border-color:var(--glass-rim);background:radial-gradient(ellipse 66% 34% at 12% -1%,#f2ffff40 0%,#d8edeb17 56%,transparent 100%),radial-gradient(ellipse 45% 44% at 100% 0%,#9ccfd11e,transparent 100%),linear-gradient(155deg,#91a7a347 0%,#536c7059 26%,#1b3039c7 64%,#0b1c28e6 100%);backdrop-filter:blur(26px) saturate(145%) brightness(1.02);-webkit-backdrop-filter:blur(26px) saturate(145%) brightness(1.02);box-shadow:inset 0 1px #ffffffaa,inset 1px 0 #f4ffff46,inset 0 -1px #35505677,0 28px 70px #010b15b8}
#challengeInvite{background:radial-gradient(ellipse 72% 45% at 10% 0%,#f7ffff4f,transparent 85%),linear-gradient(150deg,#aec8bb66 0%,#536c6d78 28%,#20333cca 66%,#0e202dde 100%)}
#popularSheet .popular-row{border-color:#e6f4ed72;background:radial-gradient(ellipse at 5% 0%,#f2ffff2e,transparent 70%),linear-gradient(155deg,#93aaa43e,#34515b87 62%,#122c38c1);box-shadow:inset 0 1px #ffffff69,inset 1px 0 #ecffff35,0 8px 26px #0005}

/* The cover, title and score share two rows instead of leaving a third-row void. */
.gamehead{grid-template-columns:64px minmax(0,1fr) 88px;grid-template-rows:auto auto;column-gap:12px;row-gap:5px;min-height:104px}
.game-cover{width:64px;height:80px;grid-column:1;grid-row:1/3;border-radius:13px}
.gamehead>div:not(.score-box){grid-column:2;grid-row:1;align-self:end}
.gamehead .score-box{grid-column:2;grid-row:2;align-self:start;margin:0;text-align:left;width:100%}
.gamehead #pause{grid-column:3;grid-row:1;justify-self:end;padding:9px 10px}
.gamehead #quit{grid-column:3;grid-row:2;justify-self:end;align-self:start}
#score{font-size:28px;letter-spacing:.055em}
.gamehead strong{font-size:20px}.gamehead p{margin-top:3px}
.arena{height:calc(100dvh - 306px)}
@media(max-width:380px){.gamehead{grid-template-columns:52px minmax(0,1fr) 76px;column-gap:9px;min-height:96px}.game-cover{width:52px;height:70px}.gamehead strong{font-size:18px}.gamehead #pause{font-size:11px;padding:8px}.arena{height:calc(100dvh - 290px)}}
@media(min-width:700px){.arena{height:calc(100dvh - 340px)}}

/* Pause is a floating control surface, not an opaque playfield-sized sheet. */
.arena:has(#pauseOverlay:not([hidden]))::after{content:"";position:absolute;inset:0;z-index:3;background:#05142188;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);border-radius:22px}
#pauseOverlay{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:min(360px,calc(100% - 26px));max-height:calc(100% - 24px);padding:25px 24px 23px;gap:0;border:1px solid #e5f8f19e;border-radius:27px;background:radial-gradient(ellipse 78% 45% at 14% -6%,#f5ffff58,transparent 90%),linear-gradient(150deg,#829b9d9e 0%,#284553da 58%,#102735ee 100%);backdrop-filter:blur(25px) saturate(145%);-webkit-backdrop-filter:blur(25px) saturate(145%);box-shadow:inset 0 1px #ffffffbe,inset 1px 0 #f6ffff4d,0 24px 55px #000b1cbd;text-align:center;overflow:auto}
#pauseOverlay::after{content:"";position:absolute;left:12%;right:12%;top:2px;height:2px;background:linear-gradient(90deg,transparent,#ffffffd9 28%,#e0fff798 67%,transparent)}
.pause-mark{display:flex;align-items:center;justify-content:center;gap:8px;width:62px;height:62px;margin:0 auto 15px;border-radius:20px;border:1px solid #e7fff0a6;background:linear-gradient(145deg,#f0fff26e,#275b628d 52%,#12323eba);box-shadow:inset 0 1px #ffffffca,0 8px 20px #0016228c}
.pause-mark i{display:block;width:7px;height:23px;border-radius:5px;background:#e9fff5;box-shadow:0 0 12px #9bffe88a}
#pauseOverlay h2{font-size:25px;letter-spacing:.03em;color:#f8fffd}
#pauseOverlay p{font-size:12px;color:#d8e8e9;margin:9px 0 12px}
#pauseOverlay .primary{max-width:none;min-height:51px;margin:12px 0 9px;border-radius:15px;background:linear-gradient(120deg,#b9ffdd,#62dcb0);box-shadow:inset 0 1px #f2fff8,0 8px 21px #1aad8270;color:#0a3027;font-size:16px}
#pauseOverlay .ghost{border-color:#d8f5ed81;border-radius:13px;background:linear-gradient(145deg,#eefeff25,#1433418c);box-shadow:inset 0 1px #ffffff5e;color:#edf9f5;padding:12px 14px;font-size:12px}

/* Carry the same material through the controls inside the song setup sheet. */
#difficultySheet .clip-controls{border:1px solid #e6f8ef4f;background:radial-gradient(ellipse at 6% 0%,#f3ffff2e,transparent 75%),linear-gradient(155deg,#5c798179,#20374691 62%,#102838ad);backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);box-shadow:inset 0 1px #ffffff5b,0 8px 20px #0003}
#difficultySheet select,#difficultySheet input[type=number]{border:1px solid #defff18c;border-radius:11px;background:radial-gradient(ellipse at 16% 0%,#ecfffb41,transparent 78%),linear-gradient(145deg,#73979b5d,#1a3444b8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 1px #ffffff8c,inset 0 -1px #081c2b8c;color:#f5fffc}
#difficultySheet .difficulties button{position:relative;border:1px solid #e2f5ed78;border-radius:18px;background:radial-gradient(ellipse 110% 78% at 12% -9%,#efffff4b,transparent 76%),linear-gradient(150deg,#6a898d6b,#2541519b 61%,#132b3abe);backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%);box-shadow:inset 0 1px #ffffffa8,inset 1px 0 #f2ffff35,0 9px 22px #0005;color:#f5fffb;transition:transform .17s,box-shadow .17s,border-color .17s}
#difficultySheet .difficulties button::before{content:"";position:absolute;left:18px;right:24px;top:2px;height:1px;background:linear-gradient(90deg,#ffffffca,#e6fff78a,transparent)}
#difficultySheet .difficulties button span{color:#d8e9e8}
#difficultySheet .difficulties .selected{border-color:#bcffe6d9;background:radial-gradient(ellipse 95% 73% at 15% -7%,#f3fff983,transparent 81%),linear-gradient(145deg,#97debd83,#2b8f79a8 47%,#164e50c7);box-shadow:inset 0 1px #ffffffd6,inset 1px 0 #eaffff5e,0 0 0 1px #baffdd37,0 11px 28px #34d49e42}
#difficultySheet .difficulties .selected strong{color:#f2fff8}
#difficultySheet .primary{border:1px solid #e1fff0b8;border-radius:17px;background:radial-gradient(ellipse 92% 84% at 12% -9%,#f5ffffb5,transparent 79%),linear-gradient(145deg,#acffe1d6,#58d9adca 58%,#2caa90d9);backdrop-filter:blur(15px) saturate(145%);-webkit-backdrop-filter:blur(15px) saturate(145%);box-shadow:inset 0 1px #ffffffed,inset 1px 0 #effff5b0,inset 0 -2px #2579646e,0 12px 27px #12bc886b;color:#05372c;text-shadow:0 1px #ffffff35}
#difficultySheet .ghost{border:1px solid #d9f6ed8a;border-radius:15px;background:radial-gradient(ellipse at 12% -8%,#efffff47,transparent 75%),linear-gradient(155deg,#7e9a9866,#1e3c4ca8 77%);backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%);box-shadow:inset 0 1px #ffffff93,inset 1px 0 #ecffff41,0 7px 18px #00132370;color:#f5fffb}
#difficultySheet .primary:hover,#difficultySheet .ghost:hover,#difficultySheet .difficulties button:hover{filter:brightness(1.09);transform:translateY(-1px)}

/* v28 · Quiet material hierarchy after reviewing Apple's iOS 27 kit. */
#difficultySheet{border-color:#e5f4ec51;background:linear-gradient(153deg,#9eaeaa2f 0%,#3c59675d 34%,#112936da 100%);backdrop-filter:blur(28px) saturate(115%);-webkit-backdrop-filter:blur(28px) saturate(115%);box-shadow:inset 0 1px #ffffff51,0 22px 54px #00111c93}
#difficultySheet .clip-controls{border-color:#effff02b;border-radius:15px;background:linear-gradient(155deg,#e7f3f415,#1735426c);backdrop-filter:blur(9px) saturate(110%);-webkit-backdrop-filter:blur(9px) saturate(110%);box-shadow:inset 0 1px #ffffff2b}
#difficultySheet select,#difficultySheet input[type=number]{border-color:#e8f5f048;background:#0d2a398f;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);box-shadow:inset 0 1px #ffffff29}
#difficultySheet .difficulties button{border-color:#e9f5ef3d;background:linear-gradient(155deg,#eef8f61a,#27445066);backdrop-filter:blur(10px) saturate(110%);-webkit-backdrop-filter:blur(10px) saturate(110%);box-shadow:inset 0 1px #ffffff30,0 4px 13px #0002}
#difficultySheet .difficulties button::before{content:none}
#difficultySheet .difficulties .selected{border-color:#a5efd19e;background:linear-gradient(145deg,#5bc79c4b,#164b438a);box-shadow:inset 0 1px #eaffdd4d,0 5px 16px #03281b4f}
#difficultySheet .primary{border-color:#d5fce488;background:linear-gradient(145deg,#a7e6c8d9,#68cba7c7 62%,#47a98ecb);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);box-shadow:inset 0 1px #ffffff69,0 8px 18px #0b5a443c;color:#06382c;text-shadow:none}
#difficultySheet .ghost{border-color:#e4f4eb4a;background:linear-gradient(155deg,#f2ffff18,#23404b63);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 1px #ffffff32,0 4px 12px #0002}
#difficultySheet .primary:hover,#difficultySheet .ghost:hover,#difficultySheet .difficulties button:hover{filter:brightness(1.04)}
#difficultySheet .primary:active,#difficultySheet .ghost:active,#difficultySheet .difficulties button:active{filter:brightness(1.13);transform:scale(.99)}
.gamehead::before{border-color:#e8f5ed69;background:radial-gradient(ellipse 62% 48% at 13% 0%,#f3ffff1d,transparent 80%),linear-gradient(155deg,#8caba038,#38545d78 43%,#112936ca 100%);backdrop-filter:blur(20px) saturate(116%);-webkit-backdrop-filter:blur(20px) saturate(116%);box-shadow:inset 0 1px #ffffff57,0 14px 34px #020c167d}
.gamehead::after{opacity:.45}
.gamehead #pause,.laneButtons button span{border-color:#e6f5ec65;background:linear-gradient(155deg,#e7f8f22b,#21404c9d 72%);backdrop-filter:blur(12px) saturate(112%);-webkit-backdrop-filter:blur(12px) saturate(112%);box-shadow:inset 0 1px #ffffff52,0 6px 15px #00152057}
.laneButtons button span::before{opacity:.48}.laneButtons button span::after{opacity:.38}
#pauseOverlay{border-color:#ecf8ec78;background:linear-gradient(150deg,#78958a72,#2a4854c7 48%,#102735df);backdrop-filter:blur(23px) saturate(115%);-webkit-backdrop-filter:blur(23px) saturate(115%);box-shadow:inset 0 1px #ffffff73,0 20px 46px #000b1ca8}
#pauseOverlay::after{opacity:.45}.pause-mark{border-color:#e7fff077;background:linear-gradient(145deg,#e3fae550,#1c49539b);box-shadow:inset 0 1px #ffffff6e,0 7px 16px #00162278}
#afterPlayActions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:19px 0 12px;padding-top:16px;border-top:1px solid #e2f4e646;text-align:left}
#afterPlayActions[hidden]{display:none!important}
.after-play-label{grid-column:1/-1;margin:0 0 4px;color:#e8f5f0;font-size:13px;font-weight:650}
#afterPlayActions .ghost{min-height:48px;padding:10px 7px;border-color:#e8f4ec4f;border-radius:13px;background:linear-gradient(155deg,#f2ffff19,#20404b66);box-shadow:inset 0 1px #ffffff36;color:#effaf6;font-size:12px}
#afterPlayActions #publishStatus{grid-column:1/-1;margin:0;color:#c9dfd8;font-size:11px;line-height:1.6}
#afterPlayActions #publishStatus:empty{display:none}
#result{padding:8px 0}.resultcard{padding:18px 20px 21px}.result-cover{height:108px}#result h1{margin:8px 0 14px;font-size:30px}#grade{font-size:66px;margin:8px 0 0}#finalScore{font-size:29px}.stats{margin:17px 0}#breakdown{margin:10px 0 13px}#afterPlayActions{margin:14px 0 10px;padding-top:12px}

/* v30 · No drop shadows between glass surfaces in the setup dialog. */
#difficultySheet{box-shadow:inset 0 1px #ffffff35;scrollbar-width:none}
#difficultySheet::-webkit-scrollbar{display:none}
#difficultySheet .clip-controls,#difficultySheet select,#difficultySheet input[type=number],#difficultySheet .difficulties button,#difficultySheet .difficulties .selected,#difficultySheet .primary,#difficultySheet .ghost{box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}

/* v32 · Failure has its own brief, restrained counterpart to FULL COMBO. */
.game-over-moment{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;margin:0 0 20px;padding:18px 10px 21px;border:1px solid #f6a7a87d;border-radius:18px;background:radial-gradient(ellipse 70% 90% at 50% -20%,#d9687840,transparent 85%),linear-gradient(145deg,#2c3443eb,#171e31f2 65%,#111c2df5);box-shadow:inset 0 1px #ffe8e85a,0 0 25px #d26c7a24;animation:fail-arrive .75s cubic-bezier(.19,1,.27,1) both;pointer-events:none}
.game-over-moment[hidden]{display:none}
.game-over-moment strong{font:900 clamp(23px,6.4vw,34px)/1.1 ui-sans-serif,system-ui,sans-serif;letter-spacing:1.7px;color:#ffe5e7;animation:fail-type .7s .08s both}
.fail-caption{font-size:11px;letter-spacing:1px;color:#e8bfc7}
.fail-mark{position:relative;display:grid;place-items:center;width:34px;height:34px;margin-bottom:2px;border:1.5px solid #ffc4c8;border-radius:50%;color:#ffdfe2;font-size:22px;line-height:1;animation:fail-mark .8s ease-out both}
.fail-mark::after{content:'';position:absolute;left:15px;top:-5px;width:4px;height:43px;background:linear-gradient(#f5c3c8,transparent);transform:rotate(31deg);opacity:.72}
.game-over-moment::before{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(100deg,transparent 25%,#ffadbb23 42%,transparent 57%);transform:translateX(-100%);animation:fail-sweep 1.1s .12s ease-out both}
.game-over-moment::after{content:'';position:absolute;left:50%;top:35%;width:3px;height:3px;background:#ffd1d8;box-shadow:-84px -15px #ffc0cb,92px -28px #d8e8ff,-112px 30px #ed8b9e,115px 24px #ffd1d8,-48px 49px #d8e8ff,53px 54px #ed8b9e;animation:fail-particles 1.1s .12s ease-out both}
@keyframes fail-arrive{0%{opacity:0;transform:translateY(-8px) scale(1.035);filter:blur(3px)}60%{opacity:1;filter:blur(0)}100%{transform:none}}
@keyframes fail-type{from{opacity:0;letter-spacing:4px;transform:translateY(-5px)}to{opacity:1;letter-spacing:1.7px;transform:none}}
@keyframes fail-mark{0%{opacity:0;transform:rotate(-30deg) scale(1.45)}100%{opacity:1;transform:none}}
@keyframes fail-sweep{to{transform:translateX(100%)}}
@keyframes fail-particles{0%{opacity:0;transform:scale(.3)}25%{opacity:1}100%{opacity:0;transform:translateY(24px) scale(1.3)}}
@media(prefers-reduced-motion:reduce){.game-over-moment,.game-over-moment strong,.fail-mark{animation:none}.game-over-moment::before,.game-over-moment::after{display:none}}

/* v39 · A centered finish moment that lets the night scene show through. */
#game .full-combo{position:fixed;z-index:5;top:50dvh;left:50%;right:auto;width:min(480px,100vw);min-height:0;margin:0;padding:45px 16px 49px;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible;transform:translate(-50%,-50%);animation:fc-scene-enter .82s cubic-bezier(.2,.85,.25,1) both}
#game .full-combo::before{content:"";position:absolute;z-index:-1;inset:-12px 0;border:0;border-radius:50%;background:radial-gradient(ellipse 59% 42% at 50% 51%,#071b2cba 0%,#15394d70 43%,transparent 100%);box-shadow:none;filter:blur(15px);transform:none;animation:fc-scene-halo 1.8s ease-out both}
#game .full-combo::after{content:"";position:absolute;left:50%;top:49%;width:3px;height:3px;background:#d9fff1;box-shadow:-132px -27px #d7fff095,111px -43px #e8dda8a8,-108px 39px #b6e9ffc4,125px 30px #c9ffe8ad,-59px 67px #f0e3a9a6,68px 56px #b6e9ff9e;animation:fc-scene-motes 1.55s .1s ease-out both}
#game .full-combo strong{font:750 clamp(31px,8.5vw,51px)/1.08 -apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;letter-spacing:.105em;white-space:nowrap;color:#d8fff0;background:linear-gradient(180deg,#f5fffc,#c1f5e5 63%,#a3dacd);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 2px 9px #62e9c446);animation:fc-scene-type .9s .08s cubic-bezier(.2,.85,.25,1) both}
#game .fc-spark{position:relative;margin-bottom:5px;color:#f4dfad;font-size:23px;text-shadow:0 0 13px #ffe5a18c;animation:fc-scene-spark .95s .05s ease-out both}
#game .fc-spark::before,#game .fc-spark::after{content:"";position:absolute;top:50%;width:64px;height:1px;background:linear-gradient(90deg,transparent,#d7fff2a8)}
#game .fc-spark::before{right:calc(100% + 17px)}#game .fc-spark::after{left:calc(100% + 17px);transform:rotate(180deg)}
#game .fc-caption{margin-top:7px;color:#e4f7f2;font-size:11px;font-weight:500;letter-spacing:.15em;text-shadow:0 2px 8px #00111be0}
@keyframes fc-scene-enter{from{opacity:0;transform:translate(-50%,calc(-50% + 19px)) scale(.96);filter:blur(9px)}to{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}}
@keyframes fc-scene-type{from{opacity:0;letter-spacing:.18em;filter:blur(7px)}to{opacity:1;letter-spacing:.105em;filter:drop-shadow(0 2px 9px #62e9c446)}}
@keyframes fc-scene-spark{from{opacity:0;transform:translateY(9px) scale(.55)}70%{opacity:1}to{transform:none}}
@keyframes fc-scene-halo{from{opacity:0;transform:scale(.75)}55%{opacity:1}to{opacity:.75;transform:scale(1.08)}}
@keyframes fc-scene-motes{from{opacity:0;transform:scale(.55)}30%{opacity:.85}to{opacity:0;transform:translateY(17px) scale(1.15)}}
@media(prefers-reduced-motion:reduce){#game .full-combo,#game .full-combo strong,#game .fc-spark{animation:none;filter:none}#game .full-combo::before{animation:none;opacity:.75;transform:none}#game .full-combo::after{display:none}}
#game .full-combo[hidden]{display:none}
#result .resultcard{overflow:visible}
@media(max-width:699px){
 #result{padding:3px 0 0}
 #result .eyebrow{margin:3px 0;font-size:10px}
 #result h1{font-size:25px;margin:3px 0 9px}
 #result .resultcard{padding:12px 15px 14px;border-radius:22px}
 #result .result-cover{height:66px;border-radius:12px}
 #result #resultSong{margin:6px 0 0;font-size:11px}
 #result #grade{font-size:48px;line-height:1;margin:4px 0 0}
 #result #finalScore{font-size:27px;line-height:1.18;margin-top:2px}
 #result .stats{margin:10px 0 7px}
 #result .stats strong{font-size:17px}
 #result .stats span{margin-top:2px;font-size:9px}
 #result #breakdown{font-size:9px;margin:5px 0 8px;line-height:1.35}
 #result #retry,#result #shareChallenge{min-height:47px;margin:3px 0 0;padding:9px 10px}
 #result #afterPlayActions{gap:7px;margin:8px 0 5px;padding-top:8px}
 #result .after-play-label{font-size:11px;margin:0}
 #result #afterPlayActions .ghost{min-height:38px;padding:6px 4px;font-size:11px}
 #result #back{min-height:30px;margin:2px 0 5px;padding:4px 12px;font-size:11px}
 #result #sharePanel{margin-top:7px}
}

/* Video and live UI use the same numeral face; only U+0030–0039 changes. */
@font-face{font-family:RhythmTimesNumerals;src:local('Times New Roman');unicode-range:U+0030-0039}
body,body *{font-family:RhythmTimesNumerals,'PingFang SC',-apple-system,BlinkMacSystemFont,sans-serif!important}

/* v32 · Settings controls use the same quiet material as the setup sheet. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
#difficultySheet .sync-settings{padding-bottom:6px}
#difficultySheet .setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:19px 0 13px;color:#edf8f5;font-size:12px;font-weight:600;line-height:1.5}
#difficultySheet .setting-row>span,#difficultySheet .setting-row>label{flex:0 0 auto;min-width:92px}
#difficultySheet .glass-picker{min-width:0;flex:1;max-width:268px}
#difficultySheet #chartModeToggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:46px;padding:10px 13px;border:1px solid #d9f2e77b;border-radius:14px;background:linear-gradient(150deg,#e7f8f226,#1935439c);color:#f5fffc;text-align:left;font-size:12px;font-weight:600;box-shadow:inset 0 1px #ffffff4b}
#difficultySheet #chartModeToggle i{flex:0 0 auto;width:8px;height:8px;border-right:1.5px solid #e7fff4;border-bottom:1.5px solid #e7fff4;transform:translateY(-2px) rotate(45deg);transition:transform .18s}
#difficultySheet #chartModeToggle[aria-expanded=true] i{transform:translateY(2px) rotate(225deg)}
#difficultySheet .glass-options{display:grid;gap:3px;margin-top:8px;padding:6px;border:1px solid #d9f2e764;border-radius:15px;background:linear-gradient(150deg,#63848780,#193441e8);box-shadow:inset 0 1px #ffffff47}
#difficultySheet .glass-options[hidden]{display:none}
#difficultySheet .glass-options button{width:100%;min-height:40px;padding:9px 11px;border:0;border-radius:10px;background:transparent;color:#ecf7f4;text-align:left;font-size:12px;line-height:1.45}
#difficultySheet .glass-options button:hover,#difficultySheet .glass-options button:focus-visible{background:#d8fff528}
#difficultySheet .glass-options button[aria-selected=true]{background:#84d8b246;color:#f7fff9;font-weight:700}
#difficultySheet .glass-options button:disabled{opacity:.45}
#difficultySheet .glass-stepper{display:flex;align-items:center;gap:4px;flex:0 0 auto;width:166px;padding:4px;border:1px solid #d9f2e77b;border-radius:14px;background:linear-gradient(150deg,#e7f8f222,#1935439c);box-shadow:inset 0 1px #ffffff47}
#difficultySheet .glass-stepper button{flex:0 0 34px;height:34px;border:0;border-radius:10px;background:#d5fff421;color:#f0fff8;font-size:21px;line-height:1}
#difficultySheet .glass-stepper button:hover{background:#d5fff438}
#difficultySheet .glass-stepper input[type=number]{min-width:0;width:100%;height:34px;padding:0 2px;border:0;background:transparent;color:#f7fffd;text-align:center;font-size:13px;font-variant-numeric:tabular-nums;appearance:textfield;-moz-appearance:textfield;box-shadow:none}
#difficultySheet .glass-stepper input[type=number]::-webkit-inner-spin-button,#difficultySheet .glass-stepper input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
@media(max-width:390px){#difficultySheet .setting-row{gap:9px}#difficultySheet .glass-stepper{width:145px}#difficultySheet #chartModeToggle{padding:8px 10px;font-size:11px}}

/* v33 · The time range uses the same quiet glass controls as synchronization. */
#difficultySheet .clip-controls{padding:9px 13px 10px}
#difficultySheet .clip-controls .setting-row{margin:3px 0 12px;min-height:46px}
#difficultySheet .clip-controls .setting-row>label,#difficultySheet .clip-controls .setting-row>span{min-width:96px}
#difficultySheet .clip-controls .glass-picker{max-width:250px}
#difficultySheet .clip-controls .glass-stepper{width:166px}
#difficultySheet #clipLengthToggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:46px;padding:10px 13px;border:1px solid #d9f2e77b;border-radius:14px;background:linear-gradient(150deg,#e7f8f226,#1935439c);color:#f5fffc;text-align:left;font-size:12px;font-weight:600;box-shadow:inset 0 1px #ffffff4b}
#difficultySheet #clipLengthToggle i{flex:0 0 auto;width:8px;height:8px;border-right:1.5px solid #e7fff4;border-bottom:1.5px solid #e7fff4;transform:translateY(-2px) rotate(45deg);transition:transform .18s}
#difficultySheet #clipLengthToggle[aria-expanded=true] i{transform:translateY(2px) rotate(225deg)}
#difficultySheet .clip-controls #clipInfo{margin:0;padding:2px 0 0;line-height:1.6}
#difficultySheet .glass-picker button:focus-visible,#difficultySheet .glass-stepper button:focus-visible,#difficultySheet .glass-stepper input:focus-visible{outline:2px solid #a9f3d5;outline-offset:2px}
@media(max-width:390px){#difficultySheet .clip-controls{padding:8px 10px}#difficultySheet .clip-controls .setting-row{gap:9px}#difficultySheet .clip-controls .setting-row>label,#difficultySheet .clip-controls .setting-row>span{min-width:84px}#difficultySheet .clip-controls .glass-stepper{width:145px}#difficultySheet #clipLengthToggle{padding:8px 10px;font-size:11px}}
#difficultySheet .setting-row.setting-duration,#difficultySheet .setting-row.setting-mode{align-items:flex-start}
#difficultySheet .setting-row.setting-duration>span,#difficultySheet .setting-row.setting-mode>span{padding-top:13px}

/* v35 · The tertiary result action shares the full-width glass rhythm. */
#result #back{display:block;width:100%;min-height:42px;margin:3px 0 4px;padding:8px 12px;border:1px solid #e8f4ec4f;border-radius:13px;background:linear-gradient(155deg,#f2ffff19,#20404b66);box-shadow:inset 0 1px #ffffff36;color:#effaf6;font-size:12px;font-weight:600;letter-spacing:.2px}

/* v38 · The glass shell stays still while its content scrolls beneath narrow optical edges. */
#difficultySheet,#librarySheet,#popularSheet,.resultcard,#challengeInvite{isolation:isolate}
#difficultySheet{padding:0;overflow:hidden;--edge-top:0;--edge-bottom:0;background:radial-gradient(ellipse 68% 29% at 13% -2%,#e6f7f226,transparent 100%),linear-gradient(155deg,#35505ce5 0%,#304958ef 28%,#122b39f2 100%);backdrop-filter:blur(30px) saturate(118%);-webkit-backdrop-filter:blur(30px) saturate(118%)}
#difficultySheet::backdrop{background:#061521ab}
#difficultySheet .sheet-scroll{max-height:calc(90dvh - 2px);overflow-y:auto;overscroll-behavior:contain;padding:35px 24px max(28px,env(safe-area-inset-bottom));scrollbar-width:none;mask-image:linear-gradient(to bottom,rgb(0 0 0 / var(--edge-top-mask,1)) 0,#000 52px,#000 calc(100% - 46px),rgb(0 0 0 / var(--edge-bottom-mask,1)) 100%);-webkit-mask-image:linear-gradient(to bottom,rgb(0 0 0 / var(--edge-top-mask,1)) 0,#000 52px,#000 calc(100% - 46px),rgb(0 0 0 / var(--edge-bottom-mask,1)) 100%)}
#difficultySheet .sheet-scroll::-webkit-scrollbar{display:none}
@media(max-width:360px){#difficultySheet .sheet-scroll{padding:29px 18px max(24px,env(safe-area-inset-bottom))}}
@media(max-height:800px){#difficultySheet .sheet-scroll{padding-top:24px;padding-bottom:16px}#difficultySheet .sheet-subtitle{margin-bottom:16px}#difficultySheet .sheet-song{margin-bottom:16px}#difficultySheet .sectionlabel{margin:17px 0 10px}#difficultySheet details{margin-top:12px;padding-top:10px}}

#launchGate{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:24px;background:#071723ee;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#f3fffa}
#launchGate[hidden]{display:none!important}
.launch-card{width:min(420px,100%);padding:30px;border:1px solid #defbf464;border-radius:25px;background:linear-gradient(145deg,#66858352,#102c3ce8);box-shadow:inset 0 1px #ffffff52}
.launch-kicker{color:#a9eed6;font-size:12px;letter-spacing:.08em}
.launch-card h1{margin:14px 0 10px;font-size:25px;letter-spacing:0}
.launch-card p{color:#d5e7e4;font-size:14px;line-height:1.7}
.launch-card button{width:100%;margin:12px 0;padding:13px 18px;border:1px solid #c6ffe5a6;border-radius:14px;background:#89d9b8;color:#10372c;font-weight:700}
.launch-card button:disabled{opacity:.55}
.launch-card .launch-hint{margin-bottom:0;color:#adcbc9;font-size:12px}

/* v40 · Keep the replay and return actions as two distinct decisions. */
#result #back{margin-top:17px;margin-bottom:7px}

/* v42 · FULL COMBO text is solid with a soft glow: iOS WebKit drops gradient-clipped text (background-clip:text) when a filter is applied. */
#game .full-combo strong{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;color:#dcfff3;filter:none;text-shadow:0 1px 0 #f7fffd70,0 2px 10px #62e9c452,0 0 24px #3fd6b030;animation:fc-scene-type-solid .9s .08s cubic-bezier(.2,.85,.25,1) both}
@keyframes fc-scene-type-solid{from{opacity:0;letter-spacing:.18em}to{opacity:1;letter-spacing:.105em}}
@media(prefers-reduced-motion:reduce){#game .full-combo strong{animation:none}}

/* v42 · Game → result. Leaf elements fade on their own (never a glass element's ancestor) so backdrop blur stays intact while dissolving. */
body[data-leaving=game] #game .gamehead::before,body[data-leaving=game] #game .gamehead>*,body[data-leaving=game] #game .life-row,body[data-leaving=game] #game .progress,body[data-leaving=game] #game .game-clock,body[data-leaving=game] #game #canvas,body[data-leaving=game] #game .laneButtons button span,body[data-leaving=game] #game #countdown,body[data-leaving=game] #game .hint{animation:game-leave .42s ease forwards}
body[data-leaving=game] #game .full-combo{animation:fc-scene-leave .42s ease-in forwards}
@keyframes game-leave{to{opacity:0}}
@keyframes fc-scene-leave{from{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}to{opacity:0;transform:translate(-50%,calc(-50% - 12px)) scale(1.04);filter:blur(8px)}}
@media(prefers-reduced-motion:no-preference){
 body[data-screen=result] #result .eyebrow,body[data-screen=result] #result h1{animation:result-rise .5s cubic-bezier(.2,.85,.25,1) both}
 body[data-screen=result] #result h1{animation-delay:.05s}
 body[data-screen=result] #result .resultcard{animation:result-card-rise .62s .1s cubic-bezier(.2,.85,.25,1) both}
 body[data-screen=result] #result #grade{animation:result-rise .5s .26s cubic-bezier(.2,.85,.25,1) both}
 body[data-screen=result] #result #finalScore{animation:result-rise .5s .32s cubic-bezier(.2,.85,.25,1) both}
 body[data-screen=result] #result .stats{animation:result-rise .5s .38s cubic-bezier(.2,.85,.25,1) both}
}
@keyframes result-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes result-card-rise{from{opacity:0;transform:translateY(22px) scale(.975)}to{opacity:1;transform:none}}
/* Game and result share one veil gradient; only the transitionable base colour darkens (during the fade-out), so the scene never jumps in brightness. */
body[data-screen=game] main::after,body[data-screen=result] main::after{background-image:linear-gradient(180deg,#06131de0 0%,#06131db5 20%,#06131d57 48%,#06131d29 74%,#06131d9c 100%);background-color:transparent;transition:background-color .42s ease}
body[data-screen=result] main::after,body[data-leaving=game] main::after{background-color:#020b1999}

/* v48 · Public demo: first-visit Wi-Fi hint floating over the player (does not push the layout). Same glass language as the sheets. */
.network-tip{position:absolute;z-index:30;top:66px;left:14px;right:14px;display:flex;align-items:center;gap:12px;padding:11px 12px 11px 15px;border:1px solid var(--glass-rim,#e6f4ed72);border-radius:16px;background:radial-gradient(ellipse 70% 60% at 8% 0%,#f3ffff33,transparent 80%),linear-gradient(150deg,#a9c4bc47 0%,#3d575f99 40%,#10232ee6 100%);box-shadow:inset 0 1px #ffffff5c,0 10px 28px #010b1580;backdrop-filter:blur(16px) saturate(115%);-webkit-backdrop-filter:blur(16px) saturate(115%);color:#eaf8f4;animation:tip-in .45s cubic-bezier(.2,.85,.25,1) both}
.network-tip[hidden]{display:none}
.network-tip p{flex:1;margin:0;display:flex;flex-direction:column;gap:2px;min-width:0}
.network-tip strong{font-size:13px;font-weight:650;letter-spacing:.3px}
.network-tip span{font-size:11px;color:#bcd3d0;line-height:1.45}
.network-tip button{flex:none;min-height:34px;padding:6px 13px;border-radius:11px;border:1px solid #d9f1ea8c;background:linear-gradient(155deg,#e7f8f22e,#1f3d489e 75%);color:#eefbf7;font-size:12px}
@keyframes tip-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.network-tip{animation:none}}

/* v49 · Failure moment on the playfield, mirroring FULL COMBO: centred, scene shows through, solid glowing type (no gradient-clipped text). */
#game .game-over-scene{position:fixed;z-index:5;top:50dvh;left:50%;width:min(480px,100vw);display:flex;flex-direction:column;align-items:center;padding:42px 16px 46px;transform:translate(-50%,-50%);pointer-events:none;animation:fc-scene-enter .8s cubic-bezier(.2,.85,.25,1) both}
#game .game-over-scene[hidden]{display:none}
#game .game-over-scene::before{content:"";position:absolute;z-index:-1;inset:-12px 0;border-radius:50%;background:radial-gradient(ellipse 60% 44% at 50% 50%,#1d0d18c4 0%,#3a1a2a75 45%,transparent 100%);filter:blur(15px);animation:fc-scene-halo 1.8s ease-out both}
#game .game-over-scene::after{content:"";position:absolute;left:50%;top:48%;width:3px;height:3px;background:#ffd1d8;box-shadow:-128px -24px #ffc0cbad,112px -40px #d8e8ff8c,-104px 38px #ed8b9ea8,122px 30px #ffd1d8a0,-56px 64px #d8e8ff80,64px 58px #ed8b9e90;animation:fc-scene-motes 1.55s .1s ease-out both}
#game .game-over-scene .fail-mark{display:block;width:46px;height:46px;margin:0 0 9px;border:0;animation:fail-mark-in .7s cubic-bezier(.2,.85,.25,1) both}
#game .game-over-scene .fail-mark::after{content:none}
#game .fail-mark svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:#ffc9cf;stroke-linecap:round;filter:drop-shadow(0 0 6px #ff8fa04d)}
#game .fail-mark .ring{stroke-width:1.6;stroke-dasharray:120;stroke-dashoffset:120;animation:fail-draw .55s .1s ease-out forwards}
#game .fail-mark .cross{stroke-width:2.4;stroke-dasharray:19;stroke-dashoffset:19;animation:fail-draw .35s .45s ease-out forwards}
#game .game-over-scene strong{font:750 clamp(23px,6.6vw,33px)/1.08 -apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;letter-spacing:.09em;white-space:nowrap;color:#ffe4e7;text-shadow:0 1px 0 #fff6f780,0 2px 12px #ff7d9147,0 0 26px #d9546a33;animation:fail-scene-type .85s .12s cubic-bezier(.2,.85,.25,1) both}
#game .game-over-scene .fail-caption{margin-top:8px;color:#f3d6db;font-size:11px;font-weight:500;letter-spacing:.15em;text-shadow:0 2px 8px #00111be0}
@keyframes fail-draw{to{stroke-dashoffset:0}}
@keyframes fail-mark-in{from{opacity:0;transform:scale(.7) rotate(-18deg)}to{opacity:1;transform:none}}
@keyframes fail-scene-type{from{opacity:0;letter-spacing:.16em}to{opacity:1;letter-spacing:.09em}}
body[data-leaving=game] #game .game-over-scene{animation:fc-scene-leave .42s ease-in forwards}
@media(prefers-reduced-motion:reduce){#game .game-over-scene,#game .game-over-scene strong,#game .game-over-scene .fail-mark{animation:none}#game .fail-mark .ring,#game .fail-mark .cross{animation:none;stroke-dashoffset:0}#game .game-over-scene::after{display:none}}