:root{--ink:oklch(27% .07 290);--ink-soft:oklch(45% .06 290);--grape:oklch(53% .21 300);--grape-deep:oklch(44% .19 300);--mint:oklch(87% .15 168);--sunshine:oklch(90% .16 92);--tangerine:oklch(83% .13 62);--coral:oklch(76% .14 24);--sky:oklch(83% .09 235);--bubblegum:oklch(78% .15 350);--lavender-mist:oklch(96.5% .015 300);--white:#fff;--font:"Nunito", "Trebuchet MS", system-ui, sans-serif;--radius-sm:12px;--radius-md:20px;--radius-lg:32px;--radius-pill:999px;--shadow-card:0 18px 50px -12px oklch(27% .07 290/.35);--shadow-float:0 10px 30px -8px oklch(27% .07 290/.35);--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-out-expo:cubic-bezier(.16, 1, .3, 1);--fast:.18s;--z-fx:10;--z-hud:20;--z-hint:30;--z-screens:40;--z-camera:50;--edge:clamp(14px, 2.4vw, 28px);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);font:600 16px/1.45 var(--font);-webkit-font-smoothing:antialiased;background:#b48cf0;margin:0;overflow:hidden}[hidden]{display:none!important}#scene{width:100vw;height:100vh;display:block;position:fixed;inset:0}#screens{pointer-events:none;z-index:var(--z-screens);position:fixed;inset:0}#screens button{pointer-events:auto}h1,h2,h3{font-family:var(--font);text-wrap:balance;margin:0;font-weight:900}h2{color:var(--ink);font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.1}h3{color:var(--ink);margin-bottom:10px;font-size:1.05rem;font-weight:900}p{text-wrap:pretty}.muted{color:var(--ink-soft);margin:0}.chip{border-radius:var(--radius-pill);background:var(--lavender-mist);color:var(--grape-deep);font:900 .95rem/1.2 var(--font);align-self:flex-start;margin:0 0 12px;padding:6px 14px;display:inline-flex}.chip-record{background:var(--sunshine);color:var(--ink)}.screen{animation:fade-in .24s var(--ease-out) both;padding:clamp(16px,4vw,48px);display:flex;position:absolute;inset:0}.screen.center{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:14px}.screen.side{justify-content:flex-start;align-items:flex-start;padding-top:clamp(96px,16vh,150px)}.panel,.intro-card,.over-card{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);color:var(--ink)}.intro{justify-content:center;align-items:center}.intro-card{pointer-events:auto;width:min(880px,100%);max-height:100%;padding:clamp(24px,4vw,44px);overflow:auto}.logo{letter-spacing:-.02em;color:var(--ink);font-size:clamp(2.8rem,7vw,5.2rem);line-height:.95}.logo span{color:var(--grape)}.lead{color:var(--ink);max-width:60ch;margin:18px 0 24px;font-size:clamp(1.05rem,1.8vw,1.25rem)}.gesture-grid{flex-wrap:wrap;gap:12px;margin:0 0 28px;padding:0;list-style:none;display:flex}.gesture-card{border-radius:var(--radius-md);color:var(--ink);flex:150px;align-items:center;gap:12px;padding:12px 16px 12px 12px;font-size:1rem;display:flex}.gesture-card:first-child{--picto:var(--bubblegum);background:oklch(93% .07 350)}.gesture-card:nth-child(2){--picto:oklch(62% .13 235);background:oklch(93% .05 235)}.gesture-card:nth-child(3){--picto:oklch(62% .12 168);background:oklch(94% .07 168)}.gesture-card:nth-child(4){--picto:oklch(68% .14 75);background:oklch(95% .08 92)}.gesture-card strong{font:900 1.05rem/1.2 var(--font)}.gesture-icon{width:58px;height:58px;color:var(--picto);flex:none}.gesture-icon svg,.tutorial-icon svg,.picto svg{width:100%;height:100%;overflow:visible}.song-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin:10px 0 12px;padding:0;list-style:none;display:grid}.song-card{text-align:left;width:100%;height:100%;font:inherit;color:var(--ink);background:var(--lavender-mist);border-radius:var(--radius-md);cursor:pointer;pointer-events:auto;transition:border-color var(--fast) var(--ease-out), background var(--fast) var(--ease-out), transform var(--fast) var(--ease-out);border:3px solid #0000;grid-template-columns:44px 1fr;align-items:center;gap:10px;padding:10px 14px;display:grid}div.song-card{cursor:default}button.song-card:hover{border-color:oklch(80% .1 300);transform:translateY(-2px)}.song-card:focus-visible{outline:3px solid var(--grape);outline-offset:2px}.song-card.selected{background:var(--white);border-color:var(--grape);box-shadow:var(--shadow-float)}.song-icon{width:44px;height:44px;color:var(--grape)}.song-icon svg{width:100%;height:100%;overflow:visible}.song-text{gap:1px;font-size:.85rem;line-height:1.25;display:grid}.song-text strong{font:900 1.05rem/1.15 var(--font)}.song-text em{color:var(--grape);font-style:normal;font-weight:700}.song-text small{color:var(--ink-soft);font-size:.8rem}.song-about{margin:0 0 12px;font-size:.95rem}.song-warning{color:oklch(55% .16 30);margin:-4px 0 12px;font-size:.9rem;font-weight:800}.file-pick{border-radius:var(--radius-md);cursor:pointer;pointer-events:auto;border:3px dashed oklch(80% .1 300);gap:2px;margin:14px 0 10px;padding:12px 16px;display:grid;position:relative}.file-pick:hover,.file-pick:focus-within{background:var(--lavender-mist);border-color:var(--grape)}.file-pick input{opacity:0;width:1px;height:1px;position:absolute}.file-pick strong{font:900 1rem var(--font);color:var(--grape)}.file-pick span{color:var(--ink-soft);font-size:.85rem}.file-error{border-color:var(--coral)}.file-error span{color:var(--ink);font-weight:800}.song-switch{flex-wrap:wrap;justify-content:space-between;gap:12px;margin:0 0 6px;font-size:.9rem;display:flex}.restart p{margin:0}.cta{font:900 1.25rem/1 var(--font);color:var(--white);background:var(--grape);border-radius:var(--radius-pill);cursor:pointer;box-shadow:0 6px 0 var(--grape-deep), var(--shadow-float);transition:transform var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out), background var(--fast) var(--ease-out);border:0;padding:20px 38px}.cta:hover{box-shadow:0 8px 0 var(--grape-deep), var(--shadow-float);background:oklch(57% .21 300);transform:translateY(-2px)}.cta:active{box-shadow:0 1px 0 var(--grape-deep);transform:translateY(5px)}.cta:focus-visible{outline:4px solid var(--sunshine);outline-offset:4px}.fineprint{color:var(--ink-soft);max-width:64ch;margin:18px 0 0;font-size:.95rem}.credit{color:var(--ink-soft);margin:14px 0 0;font-size:.85rem}.panel{width:min(360px,100%);animation:rise-in .26s var(--ease-out-expo) both;flex-direction:column;gap:10px;padding:22px 24px 24px;display:flex}.panel-done{box-shadow:0 0 0 6px var(--mint), var(--shadow-card)}.panel-skipped{box-shadow:0 0 0 6px var(--tangerine), var(--shadow-card)}.step-back{border-radius:var(--radius-md);background:var(--coral);color:var(--ink);text-align:center;flex-direction:column;align-items:center;gap:6px;padding:14px 16px;display:flex}.step-back h2,.step-back p{margin:0}.step-back-arrow{animation:step-back-nudge .9s var(--ease-out) infinite alternate;font-size:44px;font-weight:900;line-height:1}@keyframes step-back-nudge{to{transform:translateY(6px)}}@media (prefers-reduced-motion:reduce){.step-back-arrow{animation:none}}.tutorial-icon{background:var(--lavender-mist);width:132px;height:132px;color:var(--grape);border-radius:50%;align-self:center;margin:4px 0;padding:16px}.panel-done .tutorial-icon{color:oklch(55% .12 168);background:oklch(94% .07 168)}.dots{gap:6px;display:flex}.dots i{background:var(--lavender-mist);border-radius:4px;width:28px;height:8px}.dots i.on{background:var(--grape)}.step-warn{color:oklch(50% .13 50);min-height:1.4em;margin:0;font-size:1rem;font-weight:800}.hold-bar{background:var(--lavender-mist);border-radius:6px;height:12px;overflow:hidden}.hold-bar i{height:100%;width:calc(var(--p,0) * 100%);background:var(--mint);transition:width .1s linear;display:block}.ring{--p:0;background:conic-gradient(var(--grape) calc(var(--p) * 360deg), var(--lavender-mist) 0);border-radius:50%;align-self:center;place-items:center;width:140px;height:140px;margin-top:10px;display:grid;position:relative}.ring:before{content:"";background:var(--white);border-radius:50%;position:absolute;inset:14px}.ring span{font:900 1.8rem var(--font);color:var(--ink);position:relative}.banner{left:var(--edge);bottom:var(--edge);width:min(760px, calc(60vw - var(--edge)));border-radius:var(--radius-lg);border:5px solid var(--white);background:var(--white);color:var(--ink);box-shadow:var(--shadow-card);animation:rise-in .22s var(--ease-out-expo) both;z-index:var(--z-hint);grid-template-columns:1fr;gap:8px;padding:18px 26px 22px;display:grid;position:fixed}.banner-label{border-radius:var(--radius-pill);font:900 1rem/1.2 var(--font);background:var(--lavender-mist);color:var(--ink);justify-self:start;padding:5px 14px}.banner-text{font:900 clamp(1.5rem, 2.8vw, 2.2rem)/1.2 var(--font)}.banner-meter{background:var(--lavender-mist);border-radius:6px;height:12px;overflow:hidden}.banner-meter i{height:100%;width:calc(var(--p,0) * 100%);background:var(--grape);transition:width .1s linear;display:block}.banner[data-tone=fix] .banner-label{background:var(--sunshine)}.banner[data-tone=fix] .banner-meter i{background:oklch(72% .15 80)}.banner[data-tone=miss] .banner-label,.banner[data-tone=frame] .banner-label{background:var(--coral)}.banner[data-tone=frame]{box-shadow:0 0 0 5px var(--coral), var(--shadow-card)}.banner[data-tone=calib] .banner-label{background:var(--sky)}.banner[data-tone=good] .banner-label{background:var(--mint)}.banner[data-tone=fix]{border-color:var(--sunshine);background:oklch(98% .05 95)}.banner[data-tone=miss]{border-color:var(--coral);background:oklch(97% .03 25)}.banner[data-tone=good]{border-color:var(--mint)}.banner.has-cue{grid-template-columns:auto 1fr;column-gap:20px}.banner.has-cue>:not(.banner-cue){grid-column:2}.banner-cue{display:none}.banner.has-cue .banner-cue{aspect-ratio:1;background:var(--sunshine);width:clamp(64px,7vw,96px);color:var(--ink);border-radius:50%;grid-area:1/1/span 3;align-self:center;place-items:center;display:grid}.banner[data-tone=miss] .banner-cue{background:var(--coral)}.banner-cue svg{width:64%;height:64%;animation:.7s ease-in-out infinite alternate cue-nudge}.banner-cue[data-cue=down] svg{rotate:180deg}.banner-cue[data-cue=left] svg{rotate:-90deg}.banner-cue[data-cue=right] svg{rotate:90deg}.banner-cue[data-cue=bend] svg,.banner-cue[data-cue=straighten] svg,.banner-cue[data-cue=look] svg{animation:.7s ease-in-out infinite alternate cue-throb}@keyframes cue-nudge{to{transform:translateY(-5px)}}@keyframes cue-throb{to{transform:scale(1.12)}}.banner.pop{animation:hint-pop .42s var(--ease-out-expo) both}.banner.shake{animation:hint-shake .42s var(--ease-out) both}@keyframes hint-pop{0%{transform:scale(.9)}55%{transform:scale(1.04)}to{transform:scale(1)}}@keyframes hint-shake{0%,to{transform:translate(0)}20%{transform:translate(-10px)}40%{transform:translate(9px)}60%{transform:translate(-6px)}80%{transform:translate(3px)}}.pip.alert{animation:.5s ease-out 3 pip-alert}@keyframes pip-alert{0%{box-shadow:0 0 0 0 oklch(76% .14 24/.9), var(--shadow-float)}to{box-shadow:0 0 0 18px oklch(76% .14 24/0), var(--shadow-float)}}.hud{pointer-events:none;z-index:var(--z-hud);position:fixed;inset:0}.score-chip{top:var(--edge);left:var(--edge);border-radius:var(--radius-md);background:var(--white);box-shadow:var(--shadow-float);justify-items:start;padding:10px 20px 12px;display:grid;position:absolute}.score-label{font:800 .9rem/1 var(--font);color:var(--ink-soft)}.score-chip strong{font:900 2.2rem/1.1 var(--font);font-variant-numeric:tabular-nums;color:var(--ink)}.combo{border-radius:var(--radius-pill);background:var(--mint);font:900 .9rem/1.2 var(--font);color:var(--ink);margin-top:2px;padding:3px 10px}.gauge{left:calc(var(--edge) + 10px);width:44px;height:min(42vh,340px);position:absolute;top:50%;transform:translateY(-50%)}.gauge-track{width:18px;box-shadow:var(--shadow-float);background:oklch(100% 0 0/.75);border-radius:9px;position:absolute;top:0;bottom:0;left:13px;overflow:hidden}.gauge-track i{height:calc(var(--p,0) * 100%);background:var(--grape);transition:height .3s var(--ease-out);border-radius:9px;position:absolute;bottom:0;left:0;right:0}.gauge-stars i{left:0;bottom:calc(var(--at) * 100% - 22px);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);background:oklch(88% .04 300);width:44px;height:44px;position:absolute}.gauge-stars{filter:drop-shadow(0 2px 3px oklch(27% .07 290/.45));position:absolute;inset:0}.gauge-stars i.on{background:var(--sunshine)}.gauge-stars i.new{animation:star-pop .6s var(--ease-out-expo) both}.verdict{font:italic 900 clamp(3rem, 7vw, 5.5rem)/1 var(--font);color:var(--white);-webkit-text-stroke:10px var(--white);paint-order:stroke fill;filter:drop-shadow(0 6px oklch(27% .07 290/.28));z-index:var(--z-fx);pointer-events:none;white-space:nowrap;opacity:0;position:fixed;top:11vh;left:50%;transform:translate(-50%)rotate(-4deg)}.verdict[data-rating=perfect]{color:oklch(62% .14 168)}.verdict[data-rating=good]{color:oklch(66% .15 55)}.verdict[data-rating=ok]{color:oklch(60% .12 240)}.verdict[data-rating=miss]{color:oklch(62% .16 20)}.verdict.pop{animation:verdict-pop .9s var(--ease-out-expo) both}.pictos{right:var(--edge);bottom:var(--edge);width:min(560px,40vw);height:124px;z-index:var(--z-hud);position:fixed;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 78%,#0000);mask-image:linear-gradient(90deg,#000 78%,#0000)}.pictos-now{width:104px;height:104px;box-shadow:inset 0 0 0 5px var(--white), var(--shadow-float);background:oklch(100% 0 0/.55);border-radius:50%;position:absolute;top:10px;left:10px}.pictos-track{position:absolute;inset:0}.picto{width:96px;height:96px;color:var(--picto,var(--grape));will-change:transform;transition:scale var(--fast) var(--ease-out);margin-left:-48px;position:absolute;top:14px;left:0}.picto.now{scale:1.12}.pip{top:var(--edge);right:var(--edge);border-radius:var(--radius-md);border:5px solid var(--white);width:clamp(160px,21vw,290px);box-shadow:var(--shadow-card);z-index:var(--z-camera);background:#1d1740;position:fixed;overflow:hidden}.pip canvas{width:100%;height:auto;display:block}.pip-label{border-radius:var(--radius-pill);background:var(--white);color:var(--ink);font:900 .75rem/1.2 var(--font);padding:4px 10px;position:absolute;bottom:8px;left:8px}.countdown .count{font:italic 900 clamp(7rem, 22vw, 14rem)/1 var(--font);color:var(--white);-webkit-text-stroke:14px var(--grape);paint-order:stroke fill;filter:drop-shadow(0 10px oklch(27% .07 290/.25))}.countdown .muted{font:900 1.3rem var(--font);color:var(--ink);background:var(--white);border-radius:var(--radius-pill);box-shadow:var(--shadow-float);padding:10px 20px}.count.pop{animation:count-pop .6s var(--ease-out-expo) both}.over{background:oklch(72% .12 285/.35)}.over-card{text-align:left;width:min(860px,100%);max-height:100%;padding:clamp(22px,4vw,38px);overflow:auto}.star-row{gap:6px;margin-bottom:4px;display:flex}.star-row i{background:var(--lavender-mist);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);width:46px;height:46px}.star-row i.on{background:var(--sunshine)}.big-score{font:900 clamp(3.5rem, 8vw, 5.5rem)/1 var(--font);color:var(--ink);font-variant-numeric:tabular-nums}.stats{flex-wrap:wrap;gap:10px;margin:16px 0 22px;padding:0;list-style:none;display:flex}.stats li{border-radius:var(--radius-md);background:var(--lavender-mist);padding:8px 16px;display:grid}.stats strong{font:900 1.5rem/1.2 var(--font)}.stats span{color:var(--ink-soft);font-size:.9rem;font-weight:800}.stats .rating-perfect{background:oklch(94% .07 168)}.stats .rating-good{background:oklch(94% .06 62)}.stats .rating-ok{background:oklch(94% .04 235)}.stats .rating-miss{background:oklch(94% .05 24)}.over-columns{grid-template-columns:1.4fr 1fr;gap:26px;display:grid}.accuracy{gap:8px;margin:0 0 18px;padding:0;list-style:none;display:grid}.accuracy li{grid-template-columns:124px 1fr 48px;align-items:center;gap:10px;font-weight:800;display:grid}.accuracy b{background:var(--lavender-mist);border-radius:6px;height:12px;overflow:hidden}.accuracy b i{height:100%;width:calc(var(--p) * 100%);background:var(--grape);display:block}.accuracy em{text-align:right;font-style:normal;font-weight:900}.advice{gap:8px;margin:0;padding-left:22px;font-weight:700;display:grid}.advice li::marker{color:var(--grape);font-weight:900}.board{counter-reset:place;gap:6px;margin:0;padding:0;list-style:none;display:grid}.board li{counter-increment:place;border-radius:var(--radius-sm);background:var(--lavender-mist);grid-template-columns:26px 1fr auto;align-items:baseline;gap:8px;padding:8px 12px;display:grid}.board li:before{content:counter(place);font:900 .95rem var(--font);color:var(--ink-soft)}.board li span{font:900 1.1rem var(--font)}.board li em{color:var(--ink-soft);font-size:.85rem;font-style:normal}.board li.me{background:var(--sunshine)}.board li.me:before,.board li.me em{color:var(--ink)}.restart{font:900 1.2rem var(--font);color:var(--ink-soft);background:var(--lavender-mist);margin:20px calc(-1*clamp(22px,4vw,38px)) calc(-1*clamp(22px,4vw,38px));padding:16px clamp(22px,4vw,38px);position:sticky;bottom:calc(-1*clamp(22px,4vw,38px))}.restart.ready{color:var(--white);background:var(--grape)}.screen.center:not(.over):not(.countdown){background:oklch(72% .12 285/.4)}.screen.center:not(.over):not(.countdown)>h2{color:var(--white)}.screen.center:not(.over):not(.countdown)>.muted{color:var(--white);font-weight:800}.spinner{border:7px solid oklch(100% 0 0/.45);border-top-color:var(--white);border-radius:50%;width:56px;height:56px;animation:.9s linear infinite spin}.error-text{max-width:540px;color:var(--ink);background:var(--white);border-radius:var(--radius-md);box-shadow:0 0 0 5px var(--coral), var(--shadow-card);padding:16px 20px;font-weight:800}.load-bar{background:oklch(100% 0 0/.45);border-radius:8px;width:min(380px,80vw);height:16px;margin:8px 0;overflow:hidden}.load-bar i{height:100%;width:calc(var(--p,0) * 100%);background:var(--white);transition:width .2s linear;display:block}.fx-layer{pointer-events:none;z-index:var(--z-fx);position:fixed;inset:0;overflow:hidden}@keyframes fade-in{0%{opacity:0}}@keyframes rise-in{0%{opacity:0;transform:translateY(12px)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes verdict-pop{0%{opacity:0;transform:translate(-50%)rotate(-4deg)scale(.6)}18%{opacity:1;transform:translate(-50%)rotate(-4deg)scale(1)}75%{opacity:1;transform:translate(-50%)rotate(-4deg)scale(1)}to{opacity:0;transform:translate(-50%)rotate(-4deg)translateY(-16px)scale(.98)}}@keyframes count-pop{0%{opacity:0;transform:scale(1.5)}}@keyframes star-pop{0%{transform:scale(1.8)}}@media (width<=720px){.intro-card{padding:20px 18px}.logo{font-size:clamp(2.4rem,13vw,3.2rem)}.lead{margin:12px 0 16px;font-size:1rem}.gesture-grid{flex-wrap:nowrap;gap:8px;margin-bottom:18px}.gesture-card{text-align:center;flex-direction:column;flex:1 1 0;gap:4px;min-width:0;padding:10px 4px 8px}.gesture-card strong{font-size:clamp(.66rem,3.1vw,.8rem);line-height:1.15}.gesture-icon{width:40px;height:40px}.intro-card .cta{width:100%;padding:18px 20px;font-size:1.1rem}.fineprint{margin-top:12px;font-size:.85rem}.song-grid{grid-template-columns:1fr}.song-card{padding:6px 10px}.over-columns{grid-template-columns:1fr}.screen.side{justify-content:center;align-items:flex-end;padding:12px 12px 16px}.panel{gap:6px;padding:14px 16px 16px}.panel h2{font-size:1.35rem}.tutorial-icon{align-self:flex-start;width:64px;height:64px;margin:0;padding:6px}.ring{width:96px;height:96px}.banner{border-width:4px;gap:6px;width:auto;padding:12px 16px 14px;bottom:12px;left:12px;right:12px}.banner-text{font-size:1.15rem}.banner-label{padding:3px 10px;font-size:.85rem}.banner-meter{height:8px}.banner.has-cue{column-gap:12px}.banner.has-cue .banner-cue{width:52px}.pictos{width:auto;height:96px;bottom:150px;left:12px;right:12px}.pictos-now{width:80px;height:80px}.picto{width:72px;height:72px;margin-left:-36px;top:12px}.pip{border-width:3px;width:108px}.pip-label{display:none}.score-chip{padding:6px 12px 8px}.score-chip strong{font-size:1.5rem}.gauge{width:32px;height:30vh;left:12px}.gauge-track{width:12px;left:10px}.gauge-stars i{width:32px;height:32px;bottom:calc(var(--at) * 100% - 16px)}.accuracy li{grid-template-columns:110px 1fr 42px}.star-row i{width:34px;height:34px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation-duration:.01ms!important}.verdict.pop{opacity:1}}#screens input{pointer-events:auto}.screen.over,.screen.lobby{justify-content:flex-start}.over-card{pointer-events:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;margin:auto;position:relative}.lobby-card{pointer-events:auto;flex-direction:column;width:min(1060px,100%);max-height:100%;margin:auto;padding:clamp(18px,3vw,30px);display:flex;position:relative;overflow:hidden}.lobby-head{flex:none}.lobby-head h2{margin:0 0 2px}.lobby-head .muted{margin:0}.lobby-body{overscroll-behavior:contain;flex:auto;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:start;gap:8px 28px;min-height:0;margin:10px -8px 0;padding:4px 8px 12px;display:grid;overflow:auto}.lobby-card h3{margin:16px 0 8px;font-size:1.05rem}.lobby-songs>h3:first-child,.lobby-side>:first-child{margin-top:0}.lobby-songs .song-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin:0 0 10px}.lobby-songs .song-card{gap:10px;padding:8px 12px}.lobby-songs .song-icon{width:36px;height:36px}.lobby-songs .file-pick{padding:10px 14px}.lobby-side{flex-direction:column;display:flex}.lobby-side .song-about{border-radius:var(--radius-md);background:var(--lavender-mist);margin:0;padding:12px 14px}.lobby-side .board li{padding:6px 12px}.lobby-friends{margin-top:6px}.lobby-friends .lobby-actions{margin:0}.lobby-foot{border-top:2px solid var(--lavender-mist);flex-wrap:wrap;flex:none;align-items:center;gap:10px 18px;padding-top:14px;display:flex}.lobby-foot .cta{min-width:min(280px,100%)}.lobby-wait{font:900 1.1rem var(--font);color:var(--grape);margin:0}.cta.cta-secondary{background:var(--lavender-mist);color:var(--grape-deep);box-shadow:0 4px oklch(86% .05 300)}.cta.cta-secondary:hover{background:oklch(93% .04 300);box-shadow:0 6px oklch(86% .05 300)}.cta.cta-secondary:active{box-shadow:0 1px oklch(86% .05 300)}@media (width<=860px){.lobby-body{grid-template-columns:minmax(0,1fr)}}@media (width<=720px){.lobby-songs .song-grid{grid-template-columns:minmax(0,1fr)}.lobby-foot .cta{width:100%}.lobby-card .lobby-actions .cta,.lobby-card .lobby-join .cta{flex:auto;padding:12px 18px;font-size:1rem}}.lobby-name{gap:8px;margin:12px 0;display:grid}.lobby-name .cta{justify-self:start;padding:14px 28px;font-size:1.05rem}.lobby-actions .cta,.lobby-join .cta{padding:14px 26px;font-size:1.05rem}.lobby-name label{font:900 1rem var(--font);color:var(--ink)}.lobby-name input,.lobby-join input{font:800 1.1rem var(--font);color:var(--ink);background:var(--lavender-mist);border-radius:var(--radius-md);transition:border-color var(--fast) var(--ease-out);border:3px solid #0000;outline:none;padding:12px 16px}.lobby-name input::placeholder,.lobby-join input::placeholder{color:var(--ink-soft)}.lobby-name input:focus,.lobby-join input:focus{border-color:var(--grape)}.lobby-actions{flex-wrap:wrap;gap:10px;margin:12px 0;display:flex}.lobby-join{flex-wrap:wrap;gap:10px;margin:10px 0;display:flex}.room-code-wrap{align-items:baseline;gap:10px;margin:12px 0 4px;font-weight:800;display:flex}.room-code{letter-spacing:.12em;color:var(--grape-deep);background:var(--lavender-mist);border-radius:var(--radius-sm);padding:4px 14px;font:900 2rem ui-monospace,Menlo,Consolas,monospace}.link-btn{color:var(--ink-soft);cursor:pointer;font:800 .95rem var(--font);pointer-events:auto;background:0 0;border:none;padding:4px;text-decoration:underline}.link-btn:hover{color:var(--ink)}.link-btn:focus-visible{outline:3px solid var(--grape);outline-offset:2px;border-radius:6px}.lobby-players{gap:6px;margin:8px 0 12px;padding:0;list-style:none;display:grid}.lobby-players li{border-radius:var(--radius-sm);background:var(--lavender-mist);align-items:center;gap:8px;padding:10px 14px;font-weight:800;display:flex}.host-badge{font:900 .8rem/1.2 var(--font);color:var(--ink);background:var(--sunshine);border-radius:var(--radius-pill);padding:3px 10px;font-style:normal}.lobby-players em{color:var(--ink-soft);margin-left:auto;font-size:.9rem;font-style:normal}.mp-podium{border-radius:var(--radius-md);background:var(--lavender-mist);margin-top:18px;padding:16px}.podium{gap:8px;margin:10px 0;padding:0;list-style:none;display:grid}.podium li{border-radius:var(--radius-sm);background:var(--white);grid-template-columns:32px 1fr auto auto;align-items:baseline;gap:10px;padding:10px 14px;display:grid}.podium li.winner{background:var(--sunshine)}.pod-place{font:900 1.1rem var(--font);color:var(--grape)}.podium li.winner .pod-place{color:var(--ink)}.pod-name{font-weight:900}.pod-score{font:900 1.1rem var(--font);font-variant-numeric:tabular-nums}.pod-stars{color:oklch(62% .14 70)}#scoreboard{top:calc(var(--edge) + clamp(160px, 21vw, 290px) * .75 + 26px);right:var(--edge);z-index:var(--z-hud);background:var(--white);border-radius:var(--radius-md);min-width:150px;max-width:230px;box-shadow:var(--shadow-float);font:800 .95rem/1.3 var(--font);color:var(--ink);pointer-events:none;flex-direction:column;gap:4px;padding:10px 14px;display:flex;position:fixed}#scoreboard .sb-row{white-space:nowrap;text-overflow:ellipsis;font-variant-numeric:tabular-nums;justify-content:space-between;gap:8px;display:flex;overflow:hidden}#scoreboard .sb-row.self{color:var(--grape-deep)}#scoreboard .sb-row.leader{font-weight:900}#scoreboard .sb-row.leader:before{content:"★";color:oklch(72% .15 80);margin-right:4px}.menu-x{background:var(--lavender-mist);width:44px;height:44px;color:var(--ink);font:900 1.6rem/1 var(--font);cursor:pointer;pointer-events:auto;transition:background var(--fast) var(--ease-out);border:0;border-radius:50%;padding:0 0 3px;position:absolute;top:14px;right:14px}.menu-x:hover{background:oklch(92% .04 300)}.menu-x:focus-visible{outline:3px solid var(--grape);outline-offset:2px}.over-card,.lobby-card,.intro-card{scrollbar-width:thin;scrollbar-color:var(--grape) var(--lavender-mist)}@media (width<=720px){.room-code{font-size:1.6rem}.lobby-card{padding:clamp(16px,4vw,24px)}.podium li{grid-template-columns:28px 1fr auto}.pod-stars{display:none}#scoreboard{min-width:0;max-width:160px;padding:6px 10px;font-size:.85rem;top:109px;right:12px}.screen{padding:12px}button{min-height:44px}}.crew-tags{pointer-events:none;z-index:var(--z-fx);position:fixed;inset:0}.crew-tag{border-radius:var(--radius-pill);background:var(--white);color:var(--ink);font:900 .95rem/1.2 var(--font);font-variant-numeric:tabular-nums;white-space:nowrap;box-shadow:var(--shadow-float);padding:4px 12px;position:absolute;top:0;left:0}.song-best{font-weight:800;color:var(--grape)!important}.board li em b{color:var(--ink)}.crew-pop{border-radius:var(--radius-pill);font:900 1.15rem/1.2 var(--font);color:var(--white);opacity:0;white-space:nowrap;padding:4px 14px;position:absolute;top:0;left:0}.crew-pop.miss{background:var(--coral);color:var(--ink)}.crew-pop.perfect{background:var(--mint);color:var(--ink)}.crew-pop.show{animation:crew-pop 1.1s var(--ease-out) both}@keyframes crew-pop{0%{opacity:0;translate:0 10px;scale:.6}15%{opacity:1;translate:0;scale:1.15}30%{scale:1}75%{opacity:1}to{opacity:0;translate:0 -18px}}.crew-pop.miss.show{animation-name:crew-pop,crew-shake;animation-duration:1.1s,.4s}@keyframes crew-shake{0%,to{rotate:0deg}25%{rotate:-8deg}75%{rotate:8deg}}#scoreboard .sb-row.missed{color:oklch(55% .2 24);animation:sb-miss .5s var(--ease-out)}#scoreboard .sb-row .sb-note{font-weight:900}@keyframes sb-miss{0%,to{translate:0}25%{translate:-5px}75%{translate:5px}}@media (prefers-reduced-motion:reduce){.crew-pop.show,.crew-pop.miss.show{animation:1.1s linear both crew-pop}#scoreboard .sb-row.missed{animation:none}}.lang-switch{pointer-events:auto;justify-content:flex-end;gap:4px;margin:0 0 8px;display:flex}.lobby-card .lang-switch{margin-right:52px}.lang-switch button{border-radius:var(--radius-pill);background:var(--lavender-mist);min-width:48px;min-height:36px;color:var(--ink-soft);font:800 .9rem/1 var(--font);cursor:pointer;transition:background var(--fast) var(--ease-out), color var(--fast) var(--ease-out);border:2px solid #0000;padding:4px 12px}.lang-switch button:hover{color:var(--ink)}.lang-switch button[aria-pressed=true]{background:var(--grape);color:var(--white)}.lang-switch button:focus-visible{outline:3px solid var(--grape);outline-offset:2px}.screen.title-screen{isolation:isolate;text-align:center;flex-direction:column;justify-content:space-between;align-items:center;padding:clamp(14px,3vh,32px) 16px clamp(16px,3vh,28px)}.title-lang{position:absolute;top:clamp(12px,2.4vh,24px);right:clamp(12px,2.4vw,28px)}.title-lang .lang-switch{margin:0}.title-lang .lang-switch button{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:oklch(100% 0 0/.75)}.title-lang .lang-switch button[aria-pressed=true]{background:var(--grape)}.title-logo{margin-top:clamp(8px,2.5vh,40px)}.title-screen .logo{white-space:nowrap;color:var(--white);-webkit-text-stroke:0;text-shadow:0 5px 0 var(--grape-deep), 0 14px 34px oklch(27% .07 290/.45);animation:title-in .6s var(--ease-out-expo) both;font-size:clamp(2.2rem,min(12vw,14vh),7rem)}.title-screen .logo span{color:var(--sunshine)}.tagline{border-radius:var(--radius-pill);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--white);font:800 clamp(.95rem, 1.9vw, 1.2rem)/1.3 var(--font);animation:title-in .6s .12s var(--ease-out-expo) both;background:oklch(27% .07 290/.55);margin:0;padding:8px 18px;display:inline-block}.title-bottom{flex-direction:column;align-items:center;gap:12px;width:min(720px,100%);display:flex;position:relative}.screen.title-screen:after{content:"";pointer-events:none;z-index:-1;background:linear-gradient(oklch(27% .07 290/0),oklch(27% .07 290/.62));height:42%;position:absolute;inset:auto 0 0}.title-menu{flex-direction:column;align-items:center;gap:10px;width:min(560px,100%);display:flex}.title-menu .cta-hero{width:100%}.title-menu-row{grid-template-columns:1fr 1fr;gap:10px;width:100%;display:grid}.title-menu-row .cta{width:100%;animation:title-in .6s .3s var(--ease-out-expo) both;background:oklch(100% 0 0/.92);padding:16px 14px;font-size:clamp(1rem,1.6vw,1.15rem)}.title-shop-btn{justify-content:center;align-items:center;gap:4px;display:inline-flex}.title-shop-btn .coin{width:1.5em;height:1.5em;margin-right:6px}.shop-text{text-align:left;justify-items:start;gap:2px;display:grid}.shop-text small{font:800 .8rem/1 var(--font);color:var(--ink-soft);white-space:nowrap}.cta.cta-hero{animation:title-in .6s .22s var(--ease-out-expo) both, hero-pulse 2.4s 1s ease-in-out infinite;padding:22px clamp(28px,5vw,56px);font-size:clamp(1.25rem,2.6vw,1.6rem)}.title-tips{flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none;display:flex}.title-tips li{border-radius:var(--radius-pill);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--ink);font:800 .85rem/1.25 var(--font);box-shadow:var(--shadow-float);background:oklch(100% 0 0/.82);padding:6px 14px}.title-screen .credit{color:oklch(100% 0 0/.9);font:800 .8rem/1.2 var(--font);text-shadow:0 1px 4px oklch(27% .07 290/.8);margin:0}.title-logo{flex-direction:column;align-items:center;gap:10px;display:flex}.tagline-bottom{display:none!important}@media (aspect-ratio<=1){.tagline-top{display:none!important}.tagline-bottom{display:inline-block!important}}.title-lang .lang-switch button{min-width:52px;min-height:44px}@keyframes title-in{0%{opacity:0;transform:translateY(14px)scale(.97)}}@keyframes hero-pulse{50%{box-shadow:0 6px 0 var(--grape-deep), 0 0 0 10px oklch(53% .21 300/.18), var(--shadow-float)}}@media (width<=720px){.title-logo{margin-top:52px}.cta.cta-hero{width:100%;padding:18px 20px}.title-menu-row .cta{white-space:normal;padding:12px 8px;font-size:.95rem}.title-tips{gap:2px 10px}.title-tips li{box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--white);text-shadow:0 1px 4px oklch(27% .07 290/.8);background:0 0;padding:0;font-size:.75rem}.title-screen .tagline{padding:6px 14px;font-size:.9rem}}@media (prefers-reduced-motion:reduce){.cta.cta-hero{animation:none}}@media (width<=720px) and (height<=640px){.title-screen .tagline,.title-screen .credit{display:none!important}.title-bottom{gap:8px}.title-tips{gap:6px}}.coin{vertical-align:-.15em;background:radial-gradient(circle at 35% 30%, #fff7c2 0 18%, var(--sunshine) 40%, oklch(75% .15 80) 100%);border-radius:50%;width:1.05em;height:1.05em;margin-right:6px;display:inline-block;box-shadow:inset 0 0 0 2px oklch(70% .14 75)}.coin-btn{border-radius:var(--radius-pill);background:var(--white);color:var(--ink);font:900 .95rem/1 var(--font);box-shadow:var(--shadow-float);cursor:pointer;transition:transform var(--fast) var(--ease-out);border:0;align-items:center;gap:2px;padding:8px 14px;display:inline-flex}.coin-btn span{color:var(--grape);margin-left:4px}.coin-btn:hover{transform:translateY(-2px)}.coin-btn:focus-visible{outline:3px solid var(--grape);outline-offset:2px}.lobby-head .coin-btn{background:var(--lavender-mist);box-shadow:none;margin-top:8px}.shop{border-radius:var(--radius-lg);background:var(--white);width:min(400px,100% - 24px);box-shadow:var(--shadow-card);color:var(--ink);text-align:left;pointer-events:auto;z-index:2;animation:shop-in .28s var(--ease-out-expo) both;flex-direction:column;padding:18px 18px 12px;display:flex;position:absolute;top:clamp(12px,2.4vh,24px);bottom:clamp(12px,2.4vh,24px);right:clamp(12px,2.4vw,28px)}@keyframes shop-in{0%{opacity:0;transform:translate(24px)}}.shop-head{align-items:center;gap:10px;padding-right:44px;display:flex}.shop-head h2{margin:0;font-size:1.4rem}.shop-head .menu-x{top:10px;right:10px}.coin-pill{border-radius:var(--radius-pill);font:900 .95rem/1 var(--font);white-space:nowrap;background:oklch(96% .06 92);align-items:center;padding:6px 12px;display:inline-flex}.shop-note{color:var(--ink-soft);margin:8px 0 4px;font-size:.85rem}.shop-body{overscroll-behavior:contain;flex:auto;min-height:0;margin:0 -6px;padding:0 6px 6px;overflow:auto}.shop-body h3{margin:14px 0 8px;font-size:1rem}.shop-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;margin:0;padding:0;list-style:none;display:grid}.shop-item{border-radius:var(--radius-md);background:var(--lavender-mist);text-align:center;border:3px solid #0000;flex-direction:column;align-items:center;gap:6px;padding:10px 8px 8px;display:flex}.shop-item.worn{border-color:var(--grape);background:var(--white)}.shop-item strong{font:900 .85rem/1.15 var(--font)}.shop-grid.shop-grid-characters{grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:6px}.shop-grid-characters .shop-item.shop-character{gap:4px;padding:8px 4px 6px}.shop-grid-characters .shop-item .portrait{width:56px;height:56px}.shop-grid-characters strong{align-items:center;min-height:2.2em;font-size:.74rem;line-height:1.1;display:flex}.shop-grid-characters .shop-btn{padding:6px 4px;font-size:.72rem}.portrait{object-fit:cover;background:linear-gradient(oklch(93% .06 300),oklch(97% .03 350));border-radius:50%;width:72px;height:72px;box-shadow:inset 0 0 0 3px oklch(100% 0 0/.7)}.shop-btn.worn:disabled{background:var(--grape-deep);color:var(--white);cursor:default}.swatch{background:var(--c);border-radius:50%;width:40px;height:40px;box-shadow:inset 0 0 0 3px oklch(100% 0 0/.6),0 2px 6px oklch(27% .07 290/.25)}.swatch-hat{border-bottom:6px solid color-mix(in oklch, var(--c), black 25%);border-radius:50% 50% 8px 8px/70% 70% 8px 8px;height:30px;margin-top:6px}.shop-btn{border-radius:var(--radius-pill);background:var(--white);width:100%;color:var(--grape-deep);font:900 .8rem/1.1 var(--font);cursor:pointer;border:0;padding:8px 6px}.shop-btn.buy{background:var(--grape);color:var(--white)}.shop-btn.worn{background:var(--grape-deep);color:var(--white)}.shop-btn:disabled{color:var(--ink-soft);cursor:not-allowed;background:oklch(90% .02 300)}.shop-btn:focus-visible{outline:3px solid var(--sunshine);outline-offset:2px}.coins-earned{border-radius:var(--radius-pill);font:900 1.1rem/1 var(--font);background:oklch(96% .06 92);align-items:center;margin:6px 0 0;padding:6px 14px;display:inline-flex}@media (width<=720px){.shop{width:auto;height:58%;animation-name:shop-up;inset:auto 8px 8px}@keyframes shop-up{0%{opacity:0;transform:translateY(24px)}}.shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}:is(.title-screen:has(~.shop) .title-logo,.title-screen:has(~.shop) .title-bottom,.lobby:has(~.shop) .lobby-card){visibility:hidden}@media (width<=720px){.shop{height:44%;padding:14px 12px 8px}.shop-note{display:none}.shop-head h2{font-size:1.15rem}.shop-item{gap:4px;padding:8px 4px 6px}.swatch{width:30px;height:30px}.portrait{width:56px;height:56px}.swatch-hat{height:22px}.shop-btn{padding:6px 4px;font-size:.72rem}}.lobby-friends.focus{border-radius:var(--radius-md);animation:friends-focus 1.4s var(--ease-out) 2}@keyframes friends-focus{0%{box-shadow:0 0 oklch(53% .21 300/.55)}to{box-shadow:0 0 0 16px oklch(53% .21 300/0)}}@media (width<=720px){.shop-grid.shop-grid-characters{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.shop-grid-characters .shop-item .portrait{width:48px;height:48px}}