:root{--ink: #1b1530;--panel: rgba(22, 22, 48, .84);--panel-2: rgba(38, 34, 74, .92);--line: rgba(255, 255, 255, .14);--yellow: #ffc928;--yellow-2: #ffe066;--yellow-dk: #d98f00;--green: #3ce27f;--blue: #3aa4ff;--red: #ff4d5e;--orange: #ffb020;--grey: #7b8394;--text: #fff;--muted: rgba(255, 255, 255, .72);--safe-t: env(safe-area-inset-top, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px);--safe-r: env(safe-area-inset-right, 0px);color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:#1b1530;color:var(--text);font-family:Fredoka,Arial Rounded MT Bold,system-ui,sans-serif;-moz-user-select:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:none;touch-action:manipulation}#app{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden}#scene{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;image-rendering:auto;touch-action:none}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}button:disabled{cursor:default;opacity:.45;filter:grayscale(.4)}button:focus-visible,input:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}svg{width:1em;height:1em}.hidden{display:none!important}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:none}.screen.show{display:flex}.logo{position:relative;display:flex;flex-direction:column;align-items:center;line-height:.86;font-weight:700;font-style:italic;text-transform:uppercase;transform:rotate(-6deg) skew(-6deg);filter:drop-shadow(0 6px 0 rgba(0,0,0,.35));pointer-events:none}.logo-step,.logo-racers{display:block;font-size:clamp(64px,19vw,118px);letter-spacing:.01em;-webkit-text-stroke:.06em #10193d;paint-order:stroke fill}.logo-step{background:linear-gradient(180deg,#fff,#d7ecff 45%,#6db8ff);-webkit-background-clip:text;background-clip:text;color:transparent;margin-right:.9em}.logo-racers{background:linear-gradient(180deg,#fff27a,#ffc928 45%,#ff7a1a);-webkit-background-clip:text;background-clip:text;color:transparent;margin-left:.5em}.logo-runner{position:absolute;right:3%;top:-.28em;width:clamp(58px,16vw,100px);height:clamp(58px,16vw,100px);color:#fff;filter:drop-shadow(0 0 0 #10193d) drop-shadow(3px 3px 0 #10193d)}.logo-tag{margin-top:12px;font-size:clamp(15px,4.2vw,20px);font-style:normal;text-transform:none;letter-spacing:.02em;color:#fff;background:#10193dc7;padding:7px 16px 8px;border-radius:99px;transform:skew(6deg)}.logo.small .logo-step,.logo.small .logo-racers{font-size:clamp(46px,13vw,78px)}#loading{flex-direction:column;align-items:center;justify-content:center;gap:28px;background:radial-gradient(circle at 50% 30%,#3b2f7a,#1b1530 70%);z-index:50}.load-bar{width:min(260px,70vw);height:12px;border-radius:99px;background:#ffffff1f;overflow:hidden}.load-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--yellow),#ff8a1a);border-radius:inherit;transition:width .2s}#load-text{margin:0;color:var(--muted);font-size:16px}#menu{flex-direction:column;justify-content:space-between;align-items:stretch;padding:calc(12px + var(--safe-t)) calc(14px + var(--safe-r)) calc(16px + var(--safe-b)) calc(14px + var(--safe-l));background:linear-gradient(180deg,#141e4659,#0000 22%,#0000 58%,#120e28bf)}#menu .logo{margin-top:2vh}.menu-top{display:flex;align-items:center;gap:10px}.icon-btn{width:48px;height:48px;flex:none;display:grid;place-items:center;border-radius:14px;background:var(--panel);border:1px solid var(--line);font-size:22px;color:#fff;text-decoration:none;box-shadow:0 3px #00000059}.icon-btn svg{width:24px;height:24px}.chip{display:flex;align-items:center;gap:10px;padding:5px 16px 5px 5px;border-radius:99px;background:var(--panel);border:1px solid var(--line);min-width:0;margin-right:auto;box-shadow:0 3px #00000059}.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#3aa4ff,#7a4fe0);border:3px solid var(--yellow);font-size:22px;overflow:hidden;flex:none}.avatar img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.chip-text{display:flex;flex-direction:column;align-items:flex-start;min-width:0;line-height:1.1}.chip-text b{font-size:17px;max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chip-text small{display:flex;align-items:center;gap:4px;color:var(--yellow);font-weight:600;font-size:14px}.chip-text small svg{width:15px;height:15px}.menu-bottom{display:flex;flex-direction:column;gap:14px;align-items:stretch;max-width:460px;width:100%;margin:0 auto}.btn-play{display:flex;align-items:center;justify-content:center;gap:14px;height:clamp(78px,11vh,96px);border-radius:24px;font-size:clamp(38px,10vw,48px);font-weight:700;font-style:italic;letter-spacing:.04em;color:#2a1600;background:linear-gradient(180deg,var(--yellow-2) 0%,var(--yellow) 48%,#f5a300 100%);border:3px solid #fff3b8;box-shadow:0 7px 0 var(--yellow-dk),0 12px 24px #00000059;transition:transform .08s,box-shadow .08s}.btn-play svg{width:44px;height:44px;color:#2a1600}.btn-play:active{transform:translateY(5px);box-shadow:0 2px 0 var(--yellow-dk),0 6px 14px #00000059}.menu-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.menu-tabs button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px 9px;border-radius:18px;background:linear-gradient(180deg,#4b3aa3,#33277a);border:2px solid rgba(255,255,255,.18);box-shadow:0 4px #1f174d;font-weight:600;font-size:14px}.menu-tabs svg{width:28px;height:28px;color:var(--yellow)}.menu-tabs button:active{transform:translateY(3px);box-shadow:0 1px #1f174d}.sheet-wrap{align-items:center;justify-content:center;padding:calc(14px + var(--safe-t)) 14px calc(14px + var(--safe-b));background:#0a081a8c;z-index:20}.sheet-wrap.bottom{align-items:flex-end;background:linear-gradient(180deg,#0000 30%,#0a081a99)}.sheet{position:relative;width:min(440px,100%);max-height:100%;overflow-y:auto;padding:22px 18px 18px;border-radius:26px;background:linear-gradient(180deg,#2f2566,#211a4a);border:2px solid rgba(255,255,255,.14);box-shadow:0 18px 50px #00000080;display:flex;flex-direction:column;gap:12px;animation:pop .22s ease-out;scrollbar-width:thin}@keyframes pop{0%{transform:translateY(18px) scale(.97);opacity:0}to{transform:none;opacity:1}}.sheet h2{margin:0 34px 2px;text-align:center;font-size:28px;font-style:italic;letter-spacing:.01em}.sheet-close{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:12px;background:#ffffff1a;font-size:28px;line-height:1}.muted{color:var(--muted);margin:0;font-size:15px;line-height:1.35}.center{text-align:center}.note{margin:0;font-size:13px;color:#ffffff8c;text-align:center}.error{margin:0;min-height:1.2em;color:#ff9aa4;text-align:center;font-weight:600}.mode-card{display:flex;align-items:center;gap:14px;text-align:left;padding:14px;border-radius:20px;background:#ffffff12;border:2px solid rgba(255,255,255,.12);box-shadow:0 4px #00000040}.mode-card.friends{background:linear-gradient(135deg,#ffc92847,#ff7a1a2e);border-color:#ffd65a8c}.mode-card strong{display:block;font-size:20px}.mode-card small{display:block;color:var(--muted);font-size:14px;line-height:1.25;margin-top:2px}.mode-icon{width:52px;height:52px;flex:none;display:grid;place-items:center;font-size:30px;border-radius:16px;background:#00000040}.mode-card:active{transform:translateY(3px);box-shadow:0 1px #00000040}.option-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:600}.seg{display:flex;padding:4px;gap:4px;border-radius:14px;background:#0000004d}.seg button{padding:8px 10px;border-radius:10px;font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap}.seg button.on{background:var(--yellow);color:#2a1600;box-shadow:0 2px 0 var(--yellow-dk)}.btn-yellow,.btn-blue,.btn-ghost{height:58px;border-radius:18px;font-size:21px;font-weight:700;padding:0 18px;transition:transform .08s}.btn-yellow{color:#2a1600;background:linear-gradient(180deg,var(--yellow-2),var(--yellow) 55%,#f5a300);box-shadow:0 5px 0 var(--yellow-dk)}.btn-blue{color:#fff;background:linear-gradient(180deg,#6cc0ff,var(--blue) 60%,#1f7fe0);box-shadow:0 5px #1a5fab}.btn-ghost{background:#ffffff17;border:2px solid rgba(255,255,255,.16);font-size:18px;height:50px}.btn-ghost.wide{width:100%}.btn-yellow:active,.btn-blue:active{transform:translateY(4px);box-shadow:0 1px 0 var(--yellow-dk)}.divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--line)}.code-row{display:flex;gap:10px}.code-row input{flex:1;min-width:0;height:58px;border-radius:18px;border:2px solid rgba(255,255,255,.2);background:#0000004d;color:#fff;font:700 30px Fredoka,sans-serif;letter-spacing:.4em;text-align:center;padding-left:.4em}.code-row .btn-blue{flex:none;width:110px}.room-view{display:none;flex-direction:column;gap:12px}.room-view.show{display:flex}.code-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px;border-radius:20px;background:#00000047;border:2px dashed rgba(255,214,90,.5)}.code-card small{letter-spacing:.2em;color:var(--muted);font-weight:600}.code-card b{font-size:54px;letter-spacing:.22em;color:var(--yellow);line-height:1;padding-left:.22em}.code-actions{display:flex;gap:8px}.code-actions .btn-ghost{height:42px;font-size:15px}.qr{background:#fff;padding:10px;border-radius:14px;margin-top:4px}.qr svg{width:180px;height:180px;display:block}.roster-head{display:flex;justify-content:space-between;font-weight:600;color:var(--muted);padding:0 4px}.roster-head b{color:#fff}.roster{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.roster li{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:14px;background:#ffffff12;font-weight:600;font-size:17px}.roster li.empty{color:#fff6;background:#ffffff08;border:1px dashed rgba(255,255,255,.14)}.roster li .dot{width:26px;height:26px;border-radius:50%;border:3px solid rgba(255,255,255,.85);flex:none}.roster li .tag{margin-left:auto;font-size:13px;padding:3px 9px;border-radius:99px;background:#ffffff1f;color:var(--muted)}.roster li.me .tag{background:var(--yellow);color:#2a1600}.how-card{padding:14px 14px 12px;border-radius:20px;background:#00000040;border:1px solid var(--line)}.how-card h3{margin:0 0 6px;font-size:20px;font-style:italic;color:var(--yellow)}.how-card p{margin:0 0 8px;font-size:16px;line-height:1.35}.how-card p.small{font-size:14px;color:var(--muted);margin:8px 0 0}.how-card b.l{color:var(--green)}.how-card b.r{color:var(--blue)}.how-card b.g{color:var(--green)}.how-shoes{display:flex;align-items:center;justify-content:center;gap:16px;font-weight:700}.shoe-mini{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:99px;font-size:18px}.shoe-mini svg{width:40px;height:26px}.shoe-mini.left{background:#3ce27f2e;color:var(--green);border:2px solid var(--green)}.shoe-mini.right{background:#3aa4ff2e;color:var(--blue);border:2px solid var(--blue)}.how-arrow{font-size:26px;color:var(--muted)}.field{display:flex;flex-direction:column;gap:8px;font-weight:600}.field input{height:52px;border-radius:16px;border:2px solid rgba(255,255,255,.2);background:#0000004d;color:#fff;font:600 20px Fredoka,sans-serif;padding:0 16px;-moz-user-select:text;user-select:text;-webkit-user-select:text}.swatches{display:flex;flex-wrap:wrap;gap:10px}.swatches button{width:46px;height:46px;border-radius:50%;border:3px solid rgba(255,255,255,.35);box-shadow:0 3px #0000004d;position:relative}.swatches button.on{border-color:var(--yellow);transform:scale(1.1);box-shadow:0 0 0 3px #ffc92859}.swatches button.kit:after{content:"";position:absolute;left:25%;right:25%;bottom:7px;height:8px;border-radius:4px;background:var(--shorts)}.records{display:grid;grid-template-columns:1fr 1fr;gap:10px}.records div{padding:14px 12px;border-radius:18px;background:#00000040;border:1px solid var(--line);text-align:center}.records small{display:block;color:var(--muted);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase}.records b{display:block;font-size:30px;color:var(--yellow);margin-top:4px}.toggle{display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:18px;padding:6px 2px;cursor:pointer}.toggle input{position:absolute;opacity:0;pointer-events:none}.toggle i{width:56px;height:32px;border-radius:99px;background:#ffffff2e;position:relative;transition:background .2s;flex:none}.toggle i:after{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .2s}.toggle input:checked+i{background:var(--green)}.toggle input:checked+i:after{transform:translate(24px)}#hud{flex-direction:column;justify-content:space-between;pointer-events:none}#hud button{pointer-events:auto}.hud-top{display:flex;align-items:center;gap:10px;padding:calc(10px + var(--safe-t)) calc(12px + var(--safe-r)) 0 calc(12px + var(--safe-l))}.rank-card{display:grid;grid-template-columns:auto auto;align-items:baseline;-moz-column-gap:2px;column-gap:2px;padding:6px 12px 7px;border-radius:16px;background:var(--panel);border:2px solid rgba(255,255,255,.16);box-shadow:0 3px #0000004d;min-width:84px}.rank-card b{font-size:34px;line-height:1;font-style:italic;color:var(--yellow);text-shadow:0 2px 0 #7a4a00}.rank-card small{font-size:16px;color:var(--muted);font-weight:600}.rank-card em{grid-column:1 / 3;font-style:normal;font-size:12px;color:var(--muted);font-weight:600;margin-top:1px}.progress-card{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}.progress-track{position:relative;width:100%;height:14px;border-radius:99px;background:#121228bf;border:2px solid rgba(255,255,255,.2)}.progress-track i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;background:linear-gradient(90deg,#ffe066,#ffc928)}#hud-me-dot{position:absolute;top:50%;left:0;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#fff;border:4px solid var(--yellow);box-shadow:0 2px 4px #0006}.progress-track .flag{position:absolute;right:-8px;top:-14px;width:30px;height:30px;color:#fff;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}#hud-remaining{font-size:20px;text-shadow:0 2px 4px rgba(0,0,0,.6)}.progress-track .rv{position:absolute;top:50%;left:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 3px #00000080;transition:left .12s linear}.progress-track .rv.left{opacity:.35}#hud-me-dot{z-index:2}.rivals{position:absolute;left:0;right:0;top:calc(84px + var(--safe-t));display:flex;flex-direction:column;align-items:center;gap:6px}.rival{display:none;align-items:center;gap:7px;padding:4px 12px 5px 8px;border-radius:99px;background:#10193dd1;border:2px solid rgba(255,255,255,.18);font-size:15px;font-weight:700;color:#fff;white-space:nowrap;max-width:80vw;overflow:hidden;text-overflow:ellipsis}.rival.show{display:inline-flex}.rival:before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:var(--c);border:2px solid #fff}.rival.lead{color:var(--yellow);border-color:#ffd23f99}.rival.lead:before{display:none}.rival.behind{font-size:13px;opacity:.85}.countdown{position:absolute;left:0;right:0;top:30%;text-align:center;font-size:clamp(44px,13vw,84px);font-weight:700;font-style:italic;color:#fff;-webkit-text-stroke:.05em #10193d;paint-order:stroke fill;text-shadow:0 6px 0 rgba(0,0,0,.3);opacity:0}.countdown.show{animation:count .9s ease-out forwards}.countdown.go{color:var(--yellow);animation:count-go 1.1s ease-out forwards}@keyframes count{0%{transform:scale(1.5);opacity:0}15%{transform:scale(1);opacity:1}80%{opacity:1}to{opacity:.9}}@keyframes count-go{0%{transform:scale(2);opacity:0}15%{transform:scale(1);opacity:1}70%{opacity:1}to{transform:scale(1.3);opacity:0}}.judge{position:absolute;left:0;right:0;top:38%;text-align:center;font-size:clamp(28px,8vw,46px);font-weight:700;font-style:italic;-webkit-text-stroke:.05em rgba(10,12,30,.8);paint-order:stroke fill;opacity:0}.judge.show{animation:judge .55s ease-out forwards}@keyframes judge{0%{transform:translateY(12px) scale(.8);opacity:0}18%{transform:translateY(0) scale(1.08);opacity:1}60%{transform:scale(1);opacity:1}to{transform:translateY(-16px);opacity:0}}.coach{position:absolute;left:50%;top:calc(22% + var(--safe-t));transform:translate(-50%);max-width:min(88vw,420px);padding:10px 18px 11px;border-radius:18px;background:#10193de0;border:2px solid rgba(255,214,90,.65);font-size:18px;font-weight:600;text-align:center;line-height:1.25;opacity:0;transition:opacity .25s}.coach.show{opacity:1}.coach b{color:var(--yellow)}.finish-banner{position:absolute;left:0;right:0;top:24%;text-align:center;opacity:0;pointer-events:none}.finish-banner.show{animation:count 1s ease-out forwards}.finish-banner b{display:block;font-size:clamp(60px,18vw,110px);font-style:italic;color:var(--yellow);-webkit-text-stroke:.05em #10193d;paint-order:stroke fill;line-height:1}.finish-banner span{display:inline-block;margin-top:6px;font-size:26px;font-weight:700;padding:4px 16px;border-radius:99px;background:#10193dd9}.wobble{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;box-shadow:inset 0 0 90px #ff3c4600;transition:box-shadow .15s}.hud-bottom{display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 calc(10px + var(--safe-r)) calc(12px + var(--safe-b)) calc(10px + var(--safe-l))}.jump-cue{font-size:34px;font-weight:700;font-style:italic;color:#2a1600;background:linear-gradient(180deg,var(--yellow-2),var(--yellow));padding:4px 22px 6px;border-radius:18px;box-shadow:0 4px 0 var(--yellow-dk);display:flex;align-items:baseline;gap:8px;opacity:0;transform:scale(.8);transition:opacity .12s,transform .12s}.jump-cue small{font-size:16px;font-style:normal}.jump-cue.ready{opacity:.55;transform:scale(.9)}.jump-cue.now{opacity:1;transform:scale(1.05);animation:throb .3s ease-in-out infinite alternate}@keyframes throb{to{transform:scale(1.14)}}.meter{position:relative;width:min(330px,78vw);height:34px;padding-top:12px}.meter-bar{display:flex;height:16px;border-radius:99px;overflow:hidden;border:2px solid rgba(255,255,255,.7);box-shadow:0 2px 6px #0006}.meter-bar i{display:block;height:100%;transition:filter .1s}.z-rushed{width:27.5%;background:#6f7688}.z-good{width:12.5%;background:var(--blue)}.z-perfect{width:20%;background:var(--green)}.z-late{width:25%;background:var(--orange)}.z-slow{width:15%;background:var(--red)}.meter-bar i.flash{filter:brightness(1.8)}.meter-marker{position:absolute;top:0;left:0;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:14px solid #fff;margin-left:-10px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.6));will-change:transform}.meter.idle{opacity:.45}.meter-marker.demo{animation:sweep 1.8s ease-in-out infinite}@keyframes sweep{0%{transform:translate(0)}50%{transform:translate(160px)}to{transform:translate(0)}}.meter.demo{width:100%;max-width:320px;margin:0 auto}.shoes{display:flex;justify-content:space-between;gap:18px;width:min(520px,100%)}.shoe{position:relative;width:clamp(118px,36vw,172px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 38%,#282c50f2,#0e1024f5);border:5px solid currentColor;box-shadow:0 0 0 4px #00000059,0 0 22px currentColor,inset 0 0 26px #ffffff0f;touch-action:none;transition:transform .06s,box-shadow .12s,opacity .15s;opacity:.55}.shoe.left{color:var(--green)}.shoe.right{color:var(--blue)}.shoe svg{width:58%;height:58%;color:#fff;filter:drop-shadow(0 3px 0 rgba(0,0,0,.4))}.shoe.right svg{transform:scaleX(-1)}.shoe b{position:absolute;bottom:12%;font-size:17px;color:currentColor;letter-spacing:.1em}.shoe .chev{position:absolute;top:-34px;font-size:32px;font-weight:700;line-height:1;color:currentColor;letter-spacing:-.12em;opacity:.25;text-shadow:0 0 10px currentColor}.shoe.next{opacity:1;box-shadow:0 0 0 4px #00000059,0 0 34px currentColor,0 0 70px currentColor,inset 0 0 26px #ffffff1a}.shoe.next .chev{opacity:1;animation:chev .6s ease-in-out infinite alternate}@keyframes chev{to{transform:translateY(-6px)}}.shoe.pressed{transform:scale(.92)}.shoe.bad{color:var(--red)!important}.shoe.locked{color:var(--red);opacity:.45;box-shadow:0 0 0 4px #00000059}.shoe.locked svg{opacity:.45}.shoe.locked.bad{animation:nope .26s ease-out}@keyframes nope{20%{transform:translate(-8px)}45%{transform:translate(7px)}70%{transform:translate(-4px)}}.shoe.jump{color:var(--yellow)!important;opacity:1}.meter,.shoes{pointer-events:auto}.beat-halo,.beat-ring,.beat-burst{position:absolute;left:50%;top:50%;width:100%;aspect-ratio:1;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%)}.beat-halo{--in: 80%;opacity:0;background:radial-gradient(circle closest-side,transparent calc(var(--in) - 2.5%),rgba(255,255,255,.95) calc(var(--in) - 2.5%),rgba(255,255,255,.95) var(--in),rgba(60,226,127,.55) var(--in),rgba(60,226,127,.55) 97%,rgba(255,255,255,.95) 97%,rgba(255,255,255,.95) 100%,transparent 100%);transition:opacity .15s}.beat-ring{opacity:0;border:5px solid rgba(255,255,255,.95);will-change:transform,opacity}.beat-ring.early{border-color:#ffffff73}.beat-ring.good{border-color:#fff}.beat-ring.perfect{border-color:#3ce27f;box-shadow:0 0 14px #3ce27f}.beat-ring.late{border-color:#ffb020}.beat-ring.slow{border-color:#ff4d5e}.beat-burst{opacity:0;border:6px solid #fff}.beat-burst.pop{animation:beat-pop .32s ease-out}.beat-burst.perfect{border-color:#3ce27f}.beat-burst.good{border-color:#9fd3ff}.beat-burst.early,.beat-burst.late,.beat-burst.slow{border-color:#ffb020}.beat-burst.rushed{border-color:#c9ced8}@keyframes beat-pop{0%{opacity:.95;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(1.45)}}.beat-demo{position:relative;width:72px;height:72px;margin:26px auto}.bd-shoe{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;display:grid;place-items:center;border:3px solid var(--green);background:#0e1024e6}.bd-shoe svg{width:58%;height:58%;color:#fff}.bd-halo,.bd-ring{position:absolute;left:50%;top:50%;width:100%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%)}.bd-halo{width:128%;background:radial-gradient(circle closest-side,transparent 72%,rgba(60,226,127,.5) 72%,rgba(60,226,127,.5) 97%,transparent 100%)}.bd-ring{border:4px solid #fff;animation:bd-close 1.1s linear infinite}@keyframes bd-close{0%{transform:translate(-50%,-50%) scale(1.9);opacity:0;border-color:#fff}20%{opacity:1}78%{border-color:#fff}86%{transform:translate(-50%,-50%) scale(1);border-color:#3ce27f}to{transform:translate(-50%,-50%) scale(.85);opacity:0;border-color:#3ce27f}}.gear-meter{position:absolute;right:calc(12px + var(--safe-r));top:calc(150px + var(--safe-t));display:flex;flex-direction:column-reverse;gap:5px;padding:6px;width:38px;height:min(32vh,240px);border-radius:14px;background:#10193db8;border:2px solid rgba(255,255,255,.18);box-shadow:0 3px #0000004d}.gear-meter i{--fill: 0;--c: #3aa4ff;flex:1;border-radius:6px;background:linear-gradient(0deg,color-mix(in srgb,var(--c) 70%,transparent) calc(var(--fill) * 100%),#ffffff1f calc(var(--fill) * 100%));transition:background .15s,box-shadow .15s}.gear-meter i:nth-child(2){--c: #3ce27f}.gear-meter i:nth-child(3){--c: #c6e83c}.gear-meter i:nth-child(4){--c: #ffb020}.gear-meter i:nth-child(5){--c: #ff4d3c}.gear-meter i.on{background:var(--c);box-shadow:0 0 10px color-mix(in srgb,var(--c) 70%,transparent)}.gear-meter i.gained{animation:seg-gain .6s ease-out}.gear-meter i.lost{animation:seg-lost .7s ease-out}.gear-meter.up{animation:meter-up .45s ease-out}.gear-meter.down{animation:meter-down .4s ease-out}@keyframes seg-gain{0%{filter:brightness(2.2);transform:scaleX(1.35)}to{filter:brightness(1);transform:scaleX(1)}}@keyframes seg-lost{0%,60%{background:#ff4d5e;box-shadow:0 0 14px #ff4d5e}}@keyframes meter-up{40%{transform:scale(1.08)}}@keyframes meter-down{0%,to{transform:translate(0)}20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}.results-sheet h2{font-size:34px;color:var(--yellow);margin-top:4px}.podium{display:flex;align-items:flex-end;justify-content:center;gap:8px;min-height:150px;padding-top:6px}.podium div{flex:1;max-width:120px;display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:700}.podium .bar{width:100%;border-radius:14px 14px 6px 6px;display:grid;place-items:center;font-size:30px;color:#2a1600;box-shadow:0 4px #00000040}.podium .p1 .bar{height:96px;background:linear-gradient(180deg,#fff27a,#ffc928)}.podium .p2 .bar{height:70px;background:linear-gradient(180deg,#f1f4f8,#b9c2cf)}.podium .p3 .bar{height:52px;background:linear-gradient(180deg,#ffc58f,#d9853e)}.podium .who{display:flex;align-items:center;gap:6px;font-size:15px;max-width:100%}.podium .who i{width:16px;height:16px;border-radius:50%;flex:none;border:2px solid #fff}.podium .who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.podium small{color:var(--muted);font-size:14px}.results-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.results-list li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:14px;background:#ffffff12;font-weight:600}.results-list li.me{background:#ffc92833;border:2px solid rgba(255,201,40,.6)}.results-list .pl{width:34px;font-size:18px;color:var(--yellow);font-style:italic}.results-list .dot{width:18px;height:18px;border-radius:50%;border:2px solid #fff;flex:none}.results-list .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.results-list .tm{font-variant-numeric:tabular-nums}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stats div{padding:8px 6px;border-radius:14px;background:#00000040;text-align:center}.stats small{display:block;color:var(--muted);font-size:12px;font-weight:600}.stats b{font-size:20px}.badge-pb{align-self:center;padding:5px 14px;border-radius:99px;background:linear-gradient(90deg,#ff7a1a,#ffc928);color:#2a1600;font-weight:700;animation:throb .6s ease-in-out infinite alternate}#toast{position:absolute;left:50%;bottom:calc(24px + var(--safe-b));transform:translate(-50%,20px);padding:12px 20px;border-radius:16px;background:#10193df0;border:2px solid rgba(255,255,255,.2);font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:60;max-width:90vw;text-align:center}#toast.show{opacity:1;transform:translate(-50%)}.results-actions{position:sticky;bottom:-18px;margin:4px -18px -18px;padding:10px 18px 18px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(180deg,#211a4a00,#211a4a 22%)}#menu .logo,#menu .menu-bottom{transition:opacity .2s}#menu.dim .logo,#menu.dim .menu-bottom{opacity:0;pointer-events:none}#jersey.sheet-wrap{align-items:flex-end;background:linear-gradient(180deg,#0000 45%,#0a081a8c)}#jersey .sheet{max-height:56%}@media(max-height:720px){.results-sheet{gap:8px;padding-top:16px}.results-sheet h2{font-size:28px}.podium{min-height:104px}.podium .p1 .bar{height:62px;font-size:24px}.podium .p2 .bar{height:46px;font-size:22px}.podium .p3 .bar{height:34px;font-size:20px}.results-list li{padding:6px 10px}.results-actions .btn-yellow{height:52px}.results-actions .btn-ghost{height:42px}}@media(orientation:landscape){#menu{align-items:flex-start;background:linear-gradient(90deg,#120e28b8,#120e2859 38%,#0000 58%)}#menu .menu-top{align-self:stretch}#menu .logo{align-self:flex-start;margin:2vh 0 0 max(3vw,12px)}.logo-step,.logo-racers{font-size:clamp(50px,8.2vw,104px)}.menu-bottom{margin:0 0 0 max(2vw,8px);width:min(420px,44vw)}#jersey.sheet-wrap{align-items:center;justify-content:flex-start;background:linear-gradient(90deg,#0a081a99,#0000 55%)}#jersey .sheet{max-height:100%;width:min(400px,46vw)}.hud-bottom{position:absolute;left:0;right:0;bottom:0}.shoes{width:100%;justify-content:space-between}.shoe{width:clamp(108px,20vh + 40px,168px)}.meter{position:absolute;left:0;right:0;margin:0 auto;bottom:calc(26px + var(--safe-b));width:min(330px,38vw)}.jump-cue{position:absolute;left:0;right:0;margin:0 auto;width:-moz-fit-content;width:fit-content;bottom:calc(84px + var(--safe-b))}}@media(orientation:landscape)and (max-height:560px){.btn-play{height:68px;font-size:38px}.menu-tabs button{padding:7px 4px 6px}.menu-tabs svg{width:22px;height:22px}.logo-tag{margin-top:6px;font-size:14px}.rivals{top:calc(70px + var(--safe-t));flex-direction:row;justify-content:center;gap:10px}.countdown,.judge{top:24%}.gear-meter{top:calc(64px + var(--safe-t));height:36vh}.coach{top:calc(16% + var(--safe-t))}}@media(prefers-reduced-motion:reduce){.shoe.next .chev,.jump-cue.now,.badge-pb,.meter-marker.demo,.gear-meter.up,.gear-meter.down,.gear-meter i.gained,.beat-burst.pop,.bd-ring,.shoe.locked.bad{animation:none}}
