.online-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 5%;background:#123247;border-bottom:1px solid #6198ad}.online-header .brand{margin:0}.online-main{max-width:1250px;margin:auto;padding:35px 5%}.online-main h1{font:600 34px 'Barlow Condensed',sans-serif}.online-main #login{max-width:500px;margin:50px auto;background:#194459;padding:30px;border:2px solid #649bb2;border-radius:22px}#login-form{display:flex;flex-direction:column;gap:20px}#login-form label{display:flex;flex-direction:column;gap:10px}#login-form input{padding:12px;border-radius:10px;border:1px solid #70a4b9;background:#0d2a3e;color:white}#connection{font-size:12px;color:#92e7d0}#identity{font-size:12px;color:#badce9}#feedback{color:#ffcfad;min-height:24px}#lobby-hint{color:#9abdd0;font-size:12px}#online-rooms{margin-top:25px}.online-main .room-card{padding:18px}.online-main .room-card img{width:100%;height:125px;object-fit:cover;border-radius:12px}.online-main .room-card h2{font-size:17px}.online-main .room-card p{font-size:11px;color:#b1d3e2}.online-main .chat-panel{padding-bottom:0}.online-main .chat-panel h2{font-size:13px}.online-main .player-slot{min-height:130px}.online-main .large-avatar{display:grid;place-items:center}.online-main .player-slot h3{margin:0;font-size:14px}.online-main .chat-message{display:block}.online-main .chat-message b{color:#acf3e8;font-size:10px}.online-main .chat-message p{margin-top:4px}.online-main .inside-room-grid{margin-top:25px}#song-cover{width:100%;height:100%;object-fit:cover}#song{margin-top:10px}#ready-count{font-size:12px;color:#a6ebd7}@media(max-width:600px){.online-header{flex-wrap:wrap}.online-header .brand{font-size:22px}.online-main{padding:25px 16px}}
/* Side-scrolling song selection, controlled by the room host. */
.song-carousel{outline:none}.carousel-window{position:relative;overflow:hidden;padding:8px 14px 0;margin-inline:-6px}.song-slide{position:relative;z-index:1}.song-slide .room-song-art{height:145px}.song-slide .room-song-title{font-size:25px;text-align:center;min-height:60px;display:grid;place-items:center;margin:12px 0 0;line-height:1.1}.song-peek{position:absolute;top:22px;width:56px;height:118px;object-fit:cover;opacity:.3;filter:brightness(.6);border:1px solid #82b7ca;border-radius:10px}.peek-left{left:-34px;transform:rotate(-8deg)}.peek-right{right:-34px;transform:rotate(8deg)}.carousel-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}.carousel-controls>div{text-align:center}.carousel-caption{display:block;font-size:7px;color:#a2c5d5;letter-spacing:1px}.carousel-controls strong{display:block;font-size:12px;letter-spacing:3px;color:#d0eff7;margin-top:5px}.carousel-controls button{width:58px;height:44px;display:grid;place-items:center;font-size:22px;color:white;background:linear-gradient(#35cee8,#079ec6);border:2px solid #a1dfec;border-radius:12px;box-shadow:inset 0 2px #e2fbff88,0 3px #075578;text-shadow:0 2px #047ca4;flex-shrink:0}.carousel-controls button:hover:enabled{background:linear-gradient(#69e7f7,#1bb6da)}.carousel-controls button:active:enabled{transform:translateY(2px);box-shadow:inset 0 1px #e2fbff88,0 1px #075578}.carousel-controls button:disabled{opacity:.35;cursor:not-allowed;filter:saturate(.25)}.song-available{font-size:7px;letter-spacing:.5px;line-height:1.7;text-align:center;color:#a7dccc;margin:13px 0 16px}.song-carousel:focus-visible{outline:2px solid #9be8f6;outline-offset:5px;border-radius:12px}@media(max-width:900px){.song-panel .song-carousel{grid-column:1;grid-row:2 / span 4}}@media(max-width:540px){.song-slide .room-song-art{height:160px}}

/* Animated arcade welcome screen. Effects stop when the lobby is entered. */
.login-backdrop{display:none;pointer-events:none;position:fixed;inset:0;overflow:hidden;z-index:0;background:radial-gradient(ellipse at 15% 80%,#086b8066,transparent 55%),radial-gradient(ellipse at 90% 0,#2953c97a,transparent 65%),#071632}.login-screen .login-backdrop{display:block}.login-screen .online-header{position:relative;z-index:2;background:#0c203b8c;backdrop-filter:blur(12px);border-color:#8ed5ef22}.login-screen .online-main{position:relative;z-index:1;max-width:1280px;min-height:calc(100svh - 100px);display:flex;align-items:center;padding-block:42px}.login-screen #feedback{position:absolute;bottom:0;left:5%;font-size:12px}.login-tiles{position:absolute;inset:-60px;background-image:linear-gradient(90deg,#071632b8 5px,transparent 5px),linear-gradient(#071632b8 5px,transparent 5px),linear-gradient(115deg,#188ba7aa,#264ba9bb 55%,#427fba99);background-size:32px 32px,32px 32px,100% 100%;opacity:.42;transform:perspective(1000px) rotateY(-5deg) scale(1.1);animation:tile-drift 22s linear infinite;mask-image:linear-gradient(90deg,#000,transparent 80%)}.login-aura{position:absolute;width:70vw;height:70vw;right:-15%;top:-40%;background:radial-gradient(ellipse,#1d67d93b,transparent 66%);animation:aura-drift 13s ease-in-out infinite alternate}.login-lines{position:absolute;inset:-40%;background:repeating-linear-gradient(35deg,transparent 0 170px,#4ef0fc0d 171px 173px,transparent 175px 330px),repeating-linear-gradient(125deg,transparent 0 230px,#7dc8ff10 231px 233px,transparent 235px 410px);animation:line-drift 24s ease-in-out infinite alternate}.login-particles i{position:absolute;left:10%;top:85%;font-style:normal;color:#b2edff;font-size:26px;opacity:0;animation:particle-rise 16s linear infinite;text-shadow:0 0 16px #66d9ff66}.login-particles i:nth-child(2){left:28%;animation-delay:-5s;font-size:18px;color:#a3f6d9}.login-particles i:nth-child(3){left:43%;animation-delay:-10s;font-size:36px}.login-particles i:nth-child(4){left:67%;animation-delay:-3s}.login-particles i:nth-child(5){left:86%;animation-delay:-12s;font-size:19px}.login-particles i:nth-child(6){left:57%;animation-delay:-8s;font-size:16px}.login-particles i:nth-child(7){left:5%;animation-delay:-14s}.login-particles i:nth-child(8){left:94%;animation-delay:-6s;color:#b5ffdd}
.online-main #login{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:65px;align-items:center;width:100%;max-width:none;margin:0;padding:0;background:none;border:0;border-radius:0}.online-main #login[hidden]{display:none}.login-kicker{font-size:10px;font-weight:700;letter-spacing:3px;color:#9ad8e8}.login-emblem{width:90px;height:90px;margin-top:28px;transform:rotate(-8deg);filter:drop-shadow(0 10px 15px #0005)}.login-emblem img{width:100%;height:100%}.online-main .login-intro h1{font:800 italic clamp(74px,8vw,122px)/.95 'Barlow Condensed',sans-serif;letter-spacing:3px;margin:18px 0 20px;color:#d1faff;text-shadow:0 4px #176782,0 8px 0 #061c40,0 12px 35px #29b9de33}.login-intro h1>span{display:block;font:700 15px 'DM Sans';letter-spacing:6px;margin-top:16px;color:#92d3ea;text-shadow:none}.login-intro>p{font-size:17px;line-height:1.8;color:#adcede}.login-pad-legend{display:flex;gap:9px;margin-top:28px}.login-pad-legend>span{display:grid;place-items:center;width:38px;height:38px;font-size:24px;border:1px solid #89cbf177;border-radius:9px;background:linear-gradient(#3fbbeb77,#13649777);color:#c5f4ff;box-shadow:inset 0 1px #fff5,0 3px #031b35}.login-pad-legend>span:nth-child(2),.login-pad-legend>span:nth-child(4){background:linear-gradient(#ed7f8877,#9d3c6277);border-color:#ed9aa177;color:#ffe0e4}.login-pad-legend>span:nth-child(3){background:linear-gradient(#f5d36eaa,#b5893477);border-color:#e9d59988;color:#fff5be}.login-ambient-label{display:block;margin-top:24px;font-size:7px;letter-spacing:2px;color:#6899b7}
.login-entry{border:1px solid #8fc9e380;border-radius:24px;padding:28px;background:linear-gradient(145deg,#1d4765e8,#102d4beF);box-shadow:inset 0 2px #d2f3ff44,0 7px 0 #061a36aa,0 25px 70px #020b2355;backdrop-filter:blur(14px);min-width:0}.login-player-card{position:relative;display:flex;align-items:center;gap:13px;min-height:80px;padding:11px 16px 11px 10px;border:1px solid #98c5e4aa;border-radius:12px;background:repeating-linear-gradient(120deg,transparent 0 27px,#75c5e910 28px 30px),linear-gradient(110deg,#07182aeF,#224369);box-shadow:inset 0 1px #d8f5ff44,0 4px 12px #0003;margin-bottom:32px;overflow:hidden}.login-player-card:after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,#b3e8ff12 50%,transparent 65%);transform:translateX(-130%);animation:card-sheen 8s ease-in-out infinite;pointer-events:none}.login-card-avatar{width:53px;height:53px;flex-shrink:0;padding:5px;border:1px solid #88bedc;border-radius:8px;background:#153449}.login-card-avatar img{width:100%;height:100%}.login-player-card>div:nth-child(2){min-width:0;flex:1}.login-player-card strong{display:block;font:700 24px 'Barlow Condensed';letter-spacing:1px;color:white;overflow-wrap:anywhere;line-height:1.1;margin:4px 0}.login-player-card span:not(.login-card-spark){font-size:7px;letter-spacing:2px;color:#9ad3ec}.login-player-card small{font-size:7px;color:#88afca;letter-spacing:.8px}.login-card-spark{color:#a9e7f5;font-size:25px}.login-entry-kicker{font-size:8px;letter-spacing:2px;color:#86d7d4}.login-entry h2{font:600 34px 'Barlow Condensed';margin:8px 0 10px;color:#edfaff}.login-entry>p{font-size:12px;line-height:1.8;color:#a8c9dd}.login-entry #login-form{margin-top:23px;gap:19px}.login-entry #login-form label{font-size:11px;color:#c1dfed;gap:9px}.login-entry #login-form input{padding:14px;border:1px solid #71a6c5;background:#09243dcc;box-shadow:inset 0 2px 6px #0002;font-size:12px;color:#effaff}.login-entry #login-form input::placeholder{color:#7399b3}.login-entry #login-form .primary{justify-content:space-between;padding:15px 18px;font-size:12px;letter-spacing:1px}.login-entry #login-form .primary>span:last-child{font-size:20px;line-height:1}.login-status{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:24px;font-size:7px;letter-spacing:1px;color:#87c6cf}.login-status>span{width:5px;height:5px;border-radius:50%;background:#78e4c1;box-shadow:0 0 10px #78e4c155}.login-entry .login-local-note{font-size:9px;text-align:center;color:#789cb7;margin:18px 0 0;line-height:1.7}
@keyframes tile-drift{from{background-position:0 0,0 0,0 0}to{background-position:32px 32px,32px 32px,0 0}}@keyframes aura-drift{to{transform:translate(-12%,20%) scale(1.15)}}@keyframes line-drift{to{transform:translate(5%,4%) rotate(4deg)}}@keyframes particle-rise{0%{opacity:0;transform:translateY(40px) rotate(0)}15%{opacity:.5}80%{opacity:.4}100%{opacity:0;transform:translateY(-80vh) rotate(130deg)}}@keyframes card-sheen{0%,65%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
@media(max-width:850px){.online-main #login{gap:32px;grid-template-columns:1fr 1.1fr}.login-entry{padding:22px}.login-intro>p{font-size:14px}.login-kicker{font-size:8px;letter-spacing:2px}}@media(max-width:600px){.login-screen .online-main{padding:24px 19px 35px}.online-main #login{display:flex;flex-direction:column;gap:25px;align-items:stretch}.online-main #login[hidden]{display:none}.login-intro{text-align:center}.login-emblem{width:50px;height:50px;margin:16px auto 0}.online-main .login-intro h1{font-size:65px;margin-top:12px}.login-intro h1>span{font-size:10px;letter-spacing:4px;margin-top:10px}.login-intro>p,.login-pad-legend,.login-ambient-label{display:none}.login-entry{padding:22px}.login-player-card{margin-bottom:24px}.login-screen .online-header{padding:16px 20px}.login-screen .online-header .brand{font-size:21px}.login-screen #connection{font-size:9px}.login-screen .online-header #identity{display:none}}
@media(prefers-reduced-motion:reduce){.login-backdrop *,.login-player-card:after{animation:none!important}.login-particles i{opacity:.25}.login-tiles{transform:none}}
/* Translucent Pump diagonals drifting across the animated login. */
.login-tiles{animation-duration:8s;opacity:.48}.login-lines{animation-duration:14s}.login-aura{animation-duration:9s}.login-arrow-field{position:absolute;inset:0;overflow:hidden;pointer-events:none}.floating-pump-arrow{position:absolute;width:var(--size);height:var(--size);opacity:var(--alpha);animation:pump-arrow-drift 18s ease-in-out infinite alternate;will-change:transform;filter:drop-shadow(0 0 12px #53d9ff33)}.floating-pump-arrow.red{filter:drop-shadow(0 0 12px #ed7b9733)}
@keyframes pump-arrow-drift{0%{transform:translate3d(-15px,100px,0) rotate(-7deg)}50%{transform:translate3d(var(--drift),-20px,0) rotate(var(--turn))}100%{transform:translate3d(35px,-200px,0) rotate(9deg)}}
@media(max-width:600px){.floating-pump-arrow:nth-child(n+11){display:none}.floating-pump-arrow{width:calc(var(--size)*.75);height:calc(var(--size)*.75)}}
@media(prefers-reduced-motion:reduce){.floating-pump-arrow{animation:none!important;will-change:auto}}

/* Original XSanity 6-frame sprite, first frame shown without altering the source. */
.pump-native-sprite{display:block;width:100%;height:100%;background-repeat:no-repeat;background-size:600% 100%;background-position:0 0;transform:rotate(var(--angle))}

/* One consistent XSanity noteskin for the welcome legend and dance pad. */
.login-pad-legend>span{position:relative;width:47px;height:47px;background:linear-gradient(#183a52,#0b2237)!important;border:1px solid #739cb4!important;border-radius:9px;box-shadow:inset 0 1px #c9eaff44,0 3px #031b35}.login-pad-legend>span:before{content:'';position:absolute;inset:4px;background-image:url('./lobby-assets/pump-xsanity-up.png');background-size:600% 100%;background-repeat:no-repeat;background-position:0 0}.login-pad-legend>.pad-dl:before,.login-pad-legend>.pad-dr:before{background-image:url('./lobby-assets/pump-xsanity-down.png')}.login-pad-legend>.pad-ur:before{transform:rotate(90deg)}.login-pad-legend>.pad-dr:before{transform:rotate(270deg)}.login-pad-legend>.pad-center:before{background-image:url('./lobby-assets/pump-xsanity-center.png')}.login-emblem{width:106px;height:106px}.login-card-avatar{padding:2px;border-radius:9px;background:#071c30}.login-card-avatar img{display:block}.login-screen .brand .brand-mark{width:45px;height:45px}@media(max-width:600px){.login-emblem{width:65px;height:65px}}
/* Connected lobby: emerald atmosphere with warm amber light. */
body{min-height:100svh;background-attachment:fixed;background-repeat:no-repeat}
body:not(.login-screen) .login-backdrop{display:block;background:radial-gradient(ellipse at 8% 85%,#126f6944,transparent 58%),radial-gradient(ellipse at 82% 25%,#a04c932d,transparent 52%),radial-gradient(ellipse at 95% 10%,#b88c3726,transparent 48%),linear-gradient(135deg,#071e27,#0a2b32 55%,#211e30)}
body:not(.login-screen) .login-tiles{opacity:.24;background-image:linear-gradient(90deg,#081e2999 4px,transparent 4px),linear-gradient(#081e2999 4px,transparent 4px),linear-gradient(120deg,#24796499,#24535c99 58%,#987b3899);background-size:38px 38px,38px 38px,100% 100%;mask-image:linear-gradient(120deg,#000 0%,#0006 48%,#000 100%);animation:lobby-tile-flow 16s linear infinite;transform:perspective(1200px) rotateY(-4deg) scale(1.1)}
body:not(.login-screen) .login-aura{background:radial-gradient(ellipse at 35% 65%,#c875bb26,transparent 57%),radial-gradient(ellipse,#d9b15c18,transparent 65%);width:85vw;height:85vw;top:-60%;right:-25%;animation:lobby-warm-glow 14s ease-in-out infinite alternate}
body:not(.login-screen) .login-lines{background:repeating-linear-gradient(35deg,transparent 0 190px,#80f5d50b 191px 193px,transparent 195px 360px),repeating-linear-gradient(125deg,transparent 0 260px,#f5d7970b 261px 263px,transparent 265px 440px);animation-duration:22s}
body:not(.login-screen) .login-particles i{color:#b3f0da;opacity:.2}body:not(.login-screen) .login-particles i:nth-child(even){color:#f2d59d}
body:not(.login-screen) .floating-pump-arrow{opacity:calc(var(--alpha)*.65);filter:drop-shadow(0 0 10px #78d8c71c)}
body:not(.login-screen) .online-header{position:relative;z-index:2;background:#102d3de0;backdrop-filter:blur(14px);border-bottom:1px solid #83c3b84d;box-shadow:0 5px 30px #02141833}
body:not(.login-screen) .online-main{position:relative;z-index:1;min-height:calc(100svh - 100px)}
body:not(.login-screen) #lobby>.section-heading{border-bottom:1px solid #83c3b833;padding-bottom:20px;position:relative}body:not(.login-screen) #lobby>.section-heading:after{content:'';position:absolute;left:0;bottom:-2px;width:90px;height:3px;border-radius:4px;background:linear-gradient(90deg,#7ad9c7,#e7c57d)}
body:not(.login-screen) #lobby-hint{color:#aad5d1}body:not(.login-screen) #online-rooms>p{padding:38px 25px;border:1px solid #74aa9e4d;border-radius:18px;background:linear-gradient(115deg,#173e4ba6,#13333d70);backdrop-filter:blur(8px);color:#c4e3de;box-shadow:inset 0 1px #c9f6e810}
body.in-game .login-backdrop{display:none}
@keyframes lobby-tile-flow{from{background-position:0 0,0 0,0 0}to{background-position:76px -38px,76px -38px,0 0}}@keyframes lobby-warm-glow{to{transform:translate(-25%,35%) scale(1.12)}}
@media(prefers-reduced-motion:reduce){body:not(.login-screen) .login-backdrop *{animation:none!important}body:not(.login-screen) .login-tiles{transform:none}}

/* Pump room setup: original pad artwork and four-player preparation. */
#room-dialog.pump-create-dialog{width:min(540px,calc(100% - 28px));max-height:92svh;overflow:auto;padding:25px 28px 20px;border:2px solid #8ed9e7;border-radius:22px;background:radial-gradient(ellipse at 100% 0,#3d6f8b55,transparent 60%),linear-gradient(145deg,#1a435c,#0f2b43);box-shadow:inset 0 2px #d8faff55,0 7px 0 #071d30,0 24px 100px #0009}#room-dialog::backdrop{background:#030d1ac4;backdrop-filter:blur(9px)}.create-room-header{display:flex;align-items:center;gap:14px;position:relative;padding-bottom:18px;border-bottom:1px solid #6aafc555}.create-room-header:after{content:'';position:absolute;bottom:-2px;left:0;width:100px;height:3px;background:linear-gradient(90deg,#68dbef,#d6afdf);border-radius:5px}.create-room-header>img{width:58px;height:58px;transform:rotate(-5deg);filter:drop-shadow(0 4px 3px #0004)}.create-room-header>div>span{font-size:7px;color:#91cadd;letter-spacing:2px}.create-room-header h2{font:700 italic 32px 'Barlow Condensed',sans-serif;letter-spacing:1px;margin:4px 0 0;color:#edfaff;text-shadow:0 2px #08334d}.create-room-badge{margin-left:auto;align-self:center;font-size:8px;font-weight:700;letter-spacing:1px;border:1px solid #dcc98d77;border-radius:6px;padding:6px 8px;color:#f2dfa6;background:#c6a65a12;white-space:nowrap}.create-room-intro{font-size:11px;color:#a2c8da;line-height:1.7;margin:17px 0 0}#room-dialog #room-form{gap:19px;margin-top:20px}.create-room-label{font-size:8px!important;letter-spacing:1.3px;color:#aacddd!important}#room-dialog input{border-radius:10px;background:#0a2238;border:1px solid #6498b5;padding:13px 14px;font-size:12px;letter-spacing:0;color:#ecf9ff;box-shadow:inset 0 2px 6px #0003}#room-dialog input::placeholder{color:#6c94af}.create-room-modes{padding:0;margin:0;border:0;min-width:0}.create-room-modes legend{font-size:8px;color:#aacddd;letter-spacing:1.3px;margin-bottom:10px}.create-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.create-mode{display:flex;align-items:center;gap:10px;padding:12px 10px;border:1px solid #70d9df;border-radius:11px;background:linear-gradient(130deg,#1e6475,#1c455e);min-width:0;box-shadow:inset 0 1px #d9ffff44}.create-mode>img{width:40px;height:40px}.create-mode strong{display:block;font:700 21px 'Barlow Condensed';color:#e9faff;letter-spacing:.5px}.create-mode small{display:block;font-size:6px;letter-spacing:1px;color:#91d2dd;margin-top:3px}.mode-check{font-size:16px;color:#9af3d0;margin-left:auto}.create-mode.upcoming{border-color:#527085;background:#102b40;box-shadow:none;opacity:.6}.double-pads{display:flex;gap:1px;flex-shrink:0}.double-pads img{width:24px;height:32px;object-fit:contain}.create-party-heading{display:flex;justify-content:space-between;margin-bottom:10px;color:#aacddd;font-size:8px;letter-spacing:1.3px}.create-party-heading small{font-size:7px;letter-spacing:.7px;color:#78a2b9}.create-party-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.create-party-slots>span{border:1px dashed #4e768c;background:#0d293d;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;height:70px;gap:4px}.create-party-slots b{font-size:20px;line-height:1;color:#6293ad;font-weight:400}.create-party-slots small{font-size:6px;letter-spacing:.8px;color:#759ab1}.create-party-slots .party-host{border:1px solid #b9b78199;background:linear-gradient(#4c614c55,#1f4549);gap:3px}.party-host b{color:#efdca0;font-size:18px}.party-host strong{font-size:9px;color:#edebd7}.party-host small{color:#c7bf8b}.create-room-submit{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px!important}.center-step-icon{width:32px;height:32px;flex-shrink:0;background:url('./lobby-assets/pump-xsanity-center.png') 0 0/600% 100% no-repeat}.create-room-submit>span:nth-child(2){font-size:12px;letter-spacing:1px}.create-room-submit small{display:block;font-size:6px;letter-spacing:1.5px;font-weight:500;margin-top:4px;color:#d6faff}.create-room-submit>span:last-child{font-size:23px}#cancel-room{border:1px solid #63869e;border-radius:10px;background:linear-gradient(#244a63,#193b53);box-shadow:inset 0 1px #c9eaff22,0 2px #082336;color:#b5d2e3;padding:11px;font-size:9px;letter-spacing:1px}#cancel-room:hover{background:#2b5570;color:#edfaff}.create-room-footnote{font-size:8px;line-height:1.7;text-align:center;color:#80a6bd;margin:18px 10px 0}@media(max-width:540px){#room-dialog.pump-create-dialog{padding:20px 18px}.create-room-header h2{font-size:28px}.create-room-header>img{width:45px;height:45px}.create-mode{gap:7px;padding:10px 7px}.create-mode>img{width:33px;height:33px}.create-mode strong{font-size:18px}.double-pads img{width:19px}.create-room-badge{font-size:7px;padding:5px}.create-party-slots{gap:6px}}
/* Live judgments read from the engine, never from keypress totals. */
.judgment-hud{position:absolute;z-index:2;right:22px;top:90px;width:170px;padding:18px;border:1px solid #70acc388;border-radius:15px;background:#092338dd;backdrop-filter:blur(10px);box-shadow:0 8px 30px #0004}.hud-label{font-size:8px;letter-spacing:2px;color:#8eb8ce;text-align:center}.hud-combo{text-align:center;margin:15px 0 4px}.hud-combo>span,.hud-max>span,.hud-score>span{font-size:8px;letter-spacing:1px;color:#a6c7d9}.hud-combo strong{display:block;font:700 48px 'Barlow Condensed';line-height:1.1;color:#ecfaff}.hud-last{text-align:center;font:700 italic 22px 'Barlow Condensed';margin-bottom:17px;color:#c5eaff}.hud-count{display:flex;justify-content:space-between;margin:10px 0;font-size:10px;font-weight:700}.hud-count strong{font-variant-numeric:tabular-nums;color:#f1faff}.grade-p{color:#7ff5ff}.grade-gr{color:#8bf08c}.grade-go{color:#ffdc7f}.grade-b{color:#e7a1ed}.grade-m{color:#ff8491}.hud-max,.hud-score{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #5f8ba744;padding-top:12px;margin-top:12px;font-size:13px;color:white}.hud-score{display:block}.hud-score strong{display:block;font-size:22px;margin-top:5px}.judgment-results{position:absolute;z-index:3;inset:12% auto auto 50%;transform:translateX(-50%);width:min(580px,calc(100% - 30px));padding:30px;border:2px solid #9adce5;border-radius:20px;background:linear-gradient(140deg,#1c4c65f5,#112b44fa);box-shadow:0 10px 80px #000a;text-align:center}.result-kicker{font-size:9px;letter-spacing:3px;color:#97d7df}.judgment-results h2{font:700 italic 35px 'Barlow Condensed';color:white;margin:12px 0}.judgment-results>p{font-size:12px;color:#a9cbdc}.result-grades{margin:25px 0}.result-grades>div{display:flex;justify-content:space-between;border-bottom:1px solid #719bb633;padding:9px 15px;font-size:13px;font-weight:700}.result-grades strong{font-size:20px;color:white}.result-totals{display:flex;justify-content:space-around;margin:20px 0}.result-totals span{display:block;font-size:8px;letter-spacing:1px;color:#afd0de}.result-totals strong{display:block;font:700 30px 'Barlow Condensed';margin-top:7px;color:#b1f3e4}.judgment-results>small{font-size:8px;color:#7da6bd;line-height:1.7}#game-exit{position:relative;z-index:4}@media(max-width:800px){.judgment-hud{right:8px;top:65px;width:115px;padding:10px}.hud-combo strong{font-size:35px}.hud-count{font-size:8px}.hud-last{font-size:18px}.hud-score strong{font-size:17px}}@media(max-width:540px){.judgment-hud{width:88px;padding:8px;right:4px;top:55px;background:#092338c9}.hud-max{font-size:10px}.hud-combo strong{font-size:28px}.hud-last{font-size:15px}.hud-label,.hud-max>span,.hud-score>span{font-size:6px}.judgment-results{padding:20px;top:8%}.judgment-results h2{font-size:27px}}
/* XSanity artwork: central judgment and three-digit hit/miss streak. */
.xsanity-judgment{position:absolute;z-index:3;pointer-events:none;left:50%;top:47%;width:clamp(180px,23vw,300px);transform:translate(-50%,0);text-align:center;opacity:0}.xsanity-judgment[hidden],.xsanity-combo-group[hidden]{display:none}.xsanity-grade-sprite{width:100%;aspect-ratio:392 / 60;background:url('./lobby-assets/xsanity-judgments.png') 0 0/100% 600% no-repeat}.xsanity-combo-label{width:44%;height:auto;aspect-ratio:360 / 64;margin:8px auto -3px;background:url('./lobby-assets/xsanity-combo-label.png') center/contain no-repeat}.xsanity-combo-number{display:flex;justify-content:center;gap:0;height:auto}.xsanity-digit{display:block;width:22%;aspect-ratio:78 / 104;background-image:url('./lobby-assets/xsanity-combo-digits.png');background-size:400% 400%;background-repeat:no-repeat;margin-inline:-1%}.miss-streak .xsanity-combo-group{filter:sepia(1) saturate(8) hue-rotate(315deg) brightness(.85)}.judgment-hud .hud-combo,.judgment-hud .hud-last{display:none}.judgment-hud{width:145px;padding:13px;background:#092338b8;border-color:#70acc344}.judgment-hud .hud-label{margin-bottom:15px}.judgment-hud .hud-count{font-size:9px}.judgment-hud .hud-score strong{font-size:19px}@media(max-width:800px){.judgment-hud{width:100px;padding:9px}.judgment-hud .hud-count{font-size:7px}.xsanity-judgment{width:clamp(170px,25vw,240px)}}@media(max-width:540px){.judgment-hud{width:82px;padding:7px}.xsanity-judgment{width:185px}}
/* Ready prompt uses the original XSanity wordmark and yellow center panel. */
#ready.quick-ready{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:145px;min-height:112px;padding:8px 12px;border:0!important;border-radius:0!important;clip-path:none;background:none!important;box-shadow:none!important;text-shadow:none;overflow:visible;flex-shrink:0;transition:filter .2s}#ready.quick-ready:hover:enabled{filter:brightness(1.2)}.pump-ready-prompt{font:800 italic 12px 'DM Sans',sans-serif;color:#f5fbff;letter-spacing:2px;text-shadow:0 2px 2px #000}.pump-ready-logo{width:116px;height:45px;object-fit:contain;filter:drop-shadow(0 0 9px #ff9e3555)}.pump-ready-step{display:block;width:38px;height:38px;margin-top:-5px;background:url('./lobby-assets/pump-xsanity-center.png') 0 0/600% 100% no-repeat;transform:perspective(80px) rotateX(35deg);filter:drop-shadow(0 0 9px #ffd32b88);animation:ready-step-pulse 1.5s ease-in-out infinite alternate}.pump-ready-hint{font-size:6px;letter-spacing:1px;color:#e9d98f;margin-top:2px}.selected .pump-ready-prompt{color:#a5f5d0;font-size:9px}.selected .pump-ready-logo{filter:drop-shadow(0 0 7px #69dba166)}.selected .pump-ready-step{animation:none;filter:drop-shadow(0 0 3px #91c98c66)}.selected .pump-ready-hint{color:#96c5ba}#ready.quick-ready:disabled{opacity:.5}.pump-ready-loading{font-size:10px;letter-spacing:1px;color:#ffe392}.players-panel>.panel-heading{align-items:center}@keyframes ready-step-pulse{from{opacity:.55;filter:drop-shadow(0 0 3px #ffd32b44)}to{opacity:1;filter:drop-shadow(0 0 13px #ffd32baa)}}@media(max-width:540px){#ready.quick-ready{width:115px;min-height:100px}.pump-ready-logo{width:100px;height:40px}.pump-ready-step{width:32px;height:32px}}@media(prefers-reduced-motion:reduce){.pump-ready-step{animation:none!important}}
/* Gameplay fills the viewport; lobby main sizing never constrains the canvas. */
#game-screen>#game-stage{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;padding:0;min-height:0;overflow:hidden}#game-stage canvas{display:block;width:100%;height:100%}#game-screen>#game-status{position:absolute;z-index:4;top:0;left:50%;transform:translateX(-50%);max-width:calc(100% - 30px);font-size:11px;padding:7px 18px;border-radius:0 0 10px 10px;background:#071c2bd9;pointer-events:none}#game-screen>#game-exit{position:absolute;left:18px;bottom:16px;margin:0;padding:10px 14px;font-size:9px;z-index:5;opacity:.75}#game-screen>#game-exit:hover{opacity:1}#game-fullscreen{position:absolute;bottom:16px;right:18px;z-index:5;padding:10px 14px;color:#d6f7ff;border:1px solid #7db6ca99;background:#103247d9;border-radius:9px;font-size:9px;letter-spacing:.4px}#game-fullscreen:hover{background:#23536d}.in-game .judgment-hud{top:35px}#game-results:empty{display:none}@media(max-width:540px){#game-screen>#game-exit{left:8px;bottom:8px;font-size:7px;padding:8px}#game-fullscreen{right:8px;bottom:8px;font-size:7px;padding:8px}.in-game .judgment-hud{top:40px}}
html:has(body.in-game){overflow:hidden}#game-screen>#game-status{left:12px;top:10px;transform:none;border-radius:8px;font-size:9px;padding:6px 10px;max-width:35%;text-align:left;opacity:.75}
/* Keep utility controls and song information clear of the center lanes. */
#game-screen>#game-status{position:absolute;left:14px;bottom:14px;top:auto;transform:none;max-width:calc(50% - 150px);padding:5px 8px;background:#071c2b70;font-size:9px;line-height:1.4;color:#9dc0ce;border-radius:5px;opacity:.7;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.game-utility-dock{position:absolute;right:14px;bottom:12px;z-index:5;display:flex;gap:7px;opacity:.45;transition:opacity .2s}.game-utility-dock:hover,.game-utility-dock:focus-within{opacity:1}.game-utility-dock #game-exit,.game-utility-dock #game-fullscreen{position:static;display:grid;place-items:center;width:32px;height:32px;min-width:0;margin:0;padding:0;border:1px solid #74a8bd66;border-radius:7px;background:#0b263bd9;color:#cae8f4;box-shadow:none;font-size:0;letter-spacing:0;opacity:1}.game-utility-dock #game-exit[hidden]{display:none}.game-utility-dock #game-exit:before{content:'←';font-size:19px}.game-utility-dock #game-fullscreen:before{content:'⛶';font-size:21px}.game-utility-dock button:hover{background:#24536d!important;border-color:#b7e5ed!important}@media(max-width:800px){#game-screen>#game-status{max-width:45%;font-size:8px;left:8px;bottom:10px}.game-utility-dock{right:8px;bottom:8px}.game-utility-dock #game-exit,.game-utility-dock #game-fullscreen{width:28px;height:28px}}
/* Cover reveal during the server-synchronized lead-in. */
/* Full-screen song artwork fades directly into the synchronized stage. */
#song-intro{position:absolute;inset:0;z-index:8;padding:0;margin:0;background:#000;pointer-events:none;opacity:1;overflow:hidden;transition:opacity .45s linear}
#song-intro[hidden]{display:none}
#song-intro.is-leaving{opacity:0}
#song-intro>img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center;border:0;box-shadow:none;animation:none}
#song-intro>:not(img){display:none}
@media(prefers-reduced-motion:reduce){#song-intro{transition:none}}

/* PUMPET energy: restrained neon frame, contained fill, no legacy overlays. */
.pumpet-energy{position:absolute;z-index:3;top:var(--energy-top,3.8vh);left:50%;transform:translateX(-50%);width:min(52vw,760px);height:24px;box-sizing:border-box;padding:5px 9px;border:1px solid #65dcf3;border-bottom-color:#e56dd6;border-radius:7px;background:linear-gradient(180deg,#203343,#090f1b 48%,#172235);box-shadow:0 0 7px #43d6ff38,0 2px 6px #df47c62b,inset 0 1px #e9fbff40;pointer-events:none}
.pumpet-energy-track{position:relative;width:100%;height:100%;overflow:hidden;border-radius:2px;background:#030812;box-shadow:inset 0 1px 4px #000,0 0 0 1px #b4e6f52b}
.pumpet-energy-fill{position:absolute;inset:0 auto 0 0;width:50%;background:linear-gradient(90deg,#8d56ed,#d55be0 35%,#40caea 76%,#b1fff3);box-shadow:inset 0 1px #ffffff6b,inset 0 -2px #173f7b70;transition:width .12s linear}
.pumpet-energy-fill:after{content:'';position:absolute;right:0;top:0;bottom:0;width:2px;background:#e8ffff;box-shadow:0 0 5px #c0ffff}
.pumpet-energy-segments{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(5% - 1px),#03081280 calc(5% - 1px),#03081280 5%)}
.pumpet-energy.is-low{border-color:#f783ab;border-bottom-color:#e8507b;box-shadow:0 0 7px #f14a7538}
.pumpet-energy.is-low .pumpet-energy-fill{background:linear-gradient(90deg,#9c2857,#ec547e,#ffc0b9)}
@media(max-width:650px){.pumpet-energy{width:76vw;height:19px;padding:4px 7px;top:var(--energy-top,3vh)}}
@media(prefers-reduced-motion:reduce){.pumpet-energy-fill{transition:none}}

/* Bright leading edge follows the actual energy; full energy adds a soft pulse. */
.pumpet-energy-tip-rail{position:absolute;inset:5px 9px;pointer-events:none}
.pumpet-energy-tip{position:absolute;left:50%;top:50%;height:22px;width:3px;border-radius:4px;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 3px #fff,0 0 7px #96fcff,0 0 14px #40cfff,0 0 19px #d658f9a0;transition:left .12s linear}
.pumpet-energy-tip[hidden]{display:none}
.pumpet-energy-tip:before{content:'';position:absolute;inset:-5px -12px;background:radial-gradient(ellipse,#c6ffff99, #42d8ff40 35%,transparent 70%);border-radius:50%}
.pumpet-energy.is-full{animation:pumpet-full-energy 1.4s ease-in-out infinite alternate}
.pumpet-energy.is-full .pumpet-energy-fill:before{content:'';position:absolute;inset:0 auto 0 -40%;width:35%;background:linear-gradient(90deg,transparent,#fff9,transparent);animation:pumpet-energy-sheen 2.4s ease-in-out infinite}
.pumpet-energy.is-low .pumpet-energy-tip{box-shadow:0 0 3px #fff,0 0 7px #ffbecd,0 0 14px #ff467e}
@keyframes pumpet-full-energy{from{box-shadow:0 0 7px #43d6ff55,0 2px 7px #df47c655,inset 0 1px #e9fbff60}to{box-shadow:0 0 12px #43d6ff99,0 2px 13px #df47c688,inset 0 1px #fff9}}
@keyframes pumpet-energy-sheen{0%,15%{left:-40%;opacity:0}25%{opacity:1}80%,100%{left:110%;opacity:0}}
@media(max-width:650px){.pumpet-energy-tip-rail{inset:4px 7px}.pumpet-energy-tip{height:18px}}
@media(prefers-reduced-motion:reduce){.pumpet-energy-tip{transition:none}.pumpet-energy.is-full,.pumpet-energy.is-full .pumpet-energy-fill:before{animation:none}}

/* During gameplay, do not composite the hidden lobby/login animations. */
body.in-game .login-backdrop,
body.in-game #active-room,
body.in-game .online-header,
body.in-game #lobby { display:none !important; }
body.in-game::before,body.in-game::after { display:none !important; }
body.in-game { overflow:hidden; }

/* Evaluation screen: native judgment artwork over Pumpet's dark magenta stage. */
#game-screen .neon-results{position:absolute;z-index:8;inset:0;width:auto;max-width:none;transform:none;box-sizing:border-box;padding:clamp(18px,3vh,40px) clamp(24px,5vw,100px);border:0;border-radius:0;overflow:auto;color:#f7f2ff;background:radial-gradient(ellipse at 18% 62%,#75124e66,transparent 50%),radial-gradient(ellipse at 90% 15%,#3e0e7455,transparent 48%),repeating-linear-gradient(135deg,#ffffff03 0 1px,transparent 1px 7px),#080610;box-shadow:none;display:flex;flex-direction:column;gap:clamp(12px,3vh,28px);text-align:left}
.neon-results:before{content:'';position:absolute;inset:0;pointer-events:none;border-top:3px solid #ff64d1;box-shadow:inset 0 10px 40px #f0007922}
.neon-results{animation:result-arrival .9s ease-out both}
.neon-results:after{content:'';position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,#ff37b600 43%,#ff37b64d 48%,#ffe7fbcc 50%,#67ecff66 51%,transparent 58%);animation:result-scan .85s cubic-bezier(.22,.61,.36,1) both}
.neon-results>.evaluation-heading,.neon-results>.evaluation-layout,.neon-results>footer{animation:result-content .55s cubic-bezier(.16,1,.3,1) .3s both}
.neon-results>.evaluation-layout{animation-delay:.4s}.neon-results>footer{animation-delay:.5s}
@keyframes result-arrival{0%{opacity:0}35%{opacity:.88}100%{opacity:1}}
@keyframes result-scan{0%{transform:translateX(-110%);opacity:0}15%{opacity:1}75%{opacity:.8}100%{transform:translateX(110%);opacity:0}}
@keyframes result-content{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.neon-results,.neon-results>.evaluation-heading,.neon-results>.evaluation-layout,.neon-results>footer{animation:none}.neon-results:after{display:none}}
.neon-results .evaluation-heading{text-align:center;border-bottom:1px solid #d65eb94d;padding-bottom:18px}
.evaluation-heading>span{font:800 10px Arial,sans-serif;letter-spacing:5px;color:#ed85cf}
.neon-results .evaluation-heading h2{font:900 clamp(28px,4vw,54px)/1.1 'Arial Black',Arial,sans-serif;margin:8px 0;color:white;text-shadow:0 0 20px #ff36b744}
.evaluation-heading p{font:700 13px Arial,sans-serif;color:#d0b9d8;margin:8px 0 0}
.evaluation-layout{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,1.05fr) minmax(280px,1.15fr);align-items:center;gap:clamp(25px,4vw,80px);max-width:1500px;width:100%;margin:auto}
.evaluation-art{text-align:center;min-width:0}.evaluation-art img{width:100%;max-height:300px;object-fit:contain;filter:drop-shadow(0 0 18px #ff009933)}
.evaluation-art>span{display:block;margin-top:20px;font:900 italic 22px Arial,sans-serif;color:#ffb4e3;letter-spacing:3px}.evaluation-art>strong{display:block;font:900 clamp(50px,8vw,110px)/1 'Arial Black',Arial,sans-serif;color:#ff59bd;text-shadow:0 3px #5a0b48}
.evaluation-row{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid #9c5b9140;min-height:clamp(42px,6vh,65px);background:linear-gradient(90deg,transparent,#b02a7930,transparent)}
.evaluation-label{display:block;width:clamp(145px,16vw,250px);aspect-ratio:392/60;background-image:url('./lobby-assets/xsanity-judgments.png');background-repeat:no-repeat;background-size:100% 600%}
.evaluation-row>strong{font:800 clamp(23px,2.4vw,38px)/1 'Arial Black',Arial,sans-serif;font-variant-numeric:tabular-nums;color:white;text-shadow:2px 3px #000}
.evaluation-combo{margin-top:12px;border-color:#f183d3}.evaluation-combo>span{font:900 italic clamp(16px,2vw,25px) Arial,sans-serif;white-space:nowrap;color:white}
.evaluation-score-box{padding:18px 22px;border:1px solid #b05c9e80;border-radius:7px;background:linear-gradient(125deg,#ffffff0c,#260c2999);box-shadow:0 0 25px #ce187412;text-align:center}
.evaluation-score-box>span{font:900 italic 24px Arial,sans-serif;letter-spacing:2px}.evaluation-score-box>strong{display:block;font:900 clamp(30px,4vw,62px)/1.25 'Arial Black',Arial,sans-serif;letter-spacing:1px;color:#fff;text-shadow:0 2px 1px #000}
.evaluation-score-box>small{font:700 12px Arial,sans-serif;color:#ffa7de;letter-spacing:1px}
.evaluation-rank{text-align:center;font:900 italic clamp(100px,16vw,240px)/1.05 'Arial Black',Arial,sans-serif;letter-spacing:-12px;color:#efedf4;text-shadow:4px 5px #28112c,0 0 25px #ff41bc77;margin:8px 0 18px}
.evaluation-rank[data-length="2"]{font-size:clamp(80px,12vw,180px)}.evaluation-rank[data-length="3"]{font-size:clamp(65px,10vw,150px)}
.evaluation-best{padding:13px 18px;border-left:3px solid #f74db7;background:#ffffff07}.evaluation-best>span{display:block;font:700 9px Arial,sans-serif;letter-spacing:1px;color:#daa5ce}.evaluation-best>strong{display:block;font:800 26px Arial,sans-serif;color:white;margin-top:5px;font-variant-numeric:tabular-nums}
.neon-results footer{text-align:center}.neon-results .evaluation-return{padding:13px 30px;border:1px solid #ef75cd;border-radius:5px;background:linear-gradient(#6a174e,#30142e);color:white;font:800 15px Arial,sans-serif;cursor:pointer;box-shadow:0 0 20px #ff25b022}.evaluation-return small{display:block;font:700 9px Arial,sans-serif;color:#e9bbdf;letter-spacing:2px;margin-top:5px}
@media(max-width:850px){.evaluation-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}.evaluation-art{display:none}.evaluation-rank{font-size:130px;letter-spacing:-8px}.evaluation-score-box>strong{font-size:32px}.neon-results .evaluation-heading h2{font-size:28px}}
@media(max-width:480px){#game-screen .neon-results{padding:20px 14px;gap:15px}.evaluation-layout{gap:14px;grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}.evaluation-label{width:110px}.evaluation-row>strong{font-size:20px}.evaluation-combo>span{font-size:12px}.evaluation-score-box{padding:12px 5px}.evaluation-score-box>strong{font-size:23px}.evaluation-rank{font-size:85px;letter-spacing:-5px}.evaluation-best{padding:10px 7px}.evaluation-best>strong{font-size:20px}}
@media(max-height:800px){#game-screen .neon-results{padding:16px 4vw;gap:12px}.neon-results .evaluation-heading{padding-bottom:10px}.neon-results .evaluation-heading h2{font-size:32px;margin:5px 0}.evaluation-heading p{margin-top:5px;font-size:12px}.evaluation-art img{max-height:180px}.evaluation-art>span{font-size:18px;margin-top:8px}.evaluation-art>strong{font-size:70px}.evaluation-row{min-height:38px}.evaluation-row>strong{font-size:28px}.evaluation-score-box{padding:10px 15px}.evaluation-score-box>strong{font-size:40px}.evaluation-rank,.evaluation-rank[data-length="2"],.evaluation-rank[data-length="3"]{font-size:130px;letter-spacing:-7px;margin:4px 0 10px}.evaluation-rank[data-length="3"]{font-size:95px}.evaluation-best{padding:9px 14px}.evaluation-best>strong{font-size:22px}.neon-results .evaluation-return{padding:9px 24px}}
/* Reserve a real strip above the playfield, rather than covering the HUD. */
#game-screen:has(>#pumpet-frame-stats)>#game-stage{top:18px;height:calc(100% - 18px)}
#game-screen:has(>#pumpet-frame-stats)>#game-status{top:18px;bottom:auto;height:auto}
#game-screen:has(>#pumpet-frame-stats)>.neon-results{top:18px}
#game-screen[data-gameplay-info="basic"] .judgment-hud{display:none}