*{box-sizing:border-box;touch-action:manipulation}body{margin:0;background:#060616;color:#f0f8ff;font:14px system-ui;overflow:hidden;-webkit-user-select:none;user-select:none}button,select,input{font:inherit;color:inherit}button,select{background:#16132e;border:1px solid #625284;padding:12px;cursor:pointer}button:active{transform:scale(.96);background:#50307c}button{transition:transform .08s,background .12s}small{color:#abb9d6}h1,h2,p{margin:0}h1{font-weight:1000;line-height:.9;letter-spacing:-4px;color:#fff;text-shadow:3px 3px 0 #ab33a3,0 0 35px #5b48db99}h2{letter-spacing:1px;font-size:23px}.brand{letter-spacing:4px;font-size:10px;color:#74f7ff;font-weight:900}.brand span{display:block;letter-spacing:2px;font-size:8px;color:#a59bbd;margin-top:5px}.eyebrow{font-size:9px;letter-spacing:3px;color:#9ceefb;font-weight:800}.screen{position:absolute;inset:0}#menu{display:flex;flex-direction:column;padding:max(15px,env(safe-area-inset-top)) 22px max(13px,env(safe-area-inset-bottom));gap:14px;isolation:isolate;background:radial-gradient(ellipse at 50% 45%,#36134499,transparent 65%),#070716}#lobbyFX{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}.lobbyTop{display:flex;justify-content:space-between;align-items:center}.iconButton{padding:5px 10px;font-size:23px;background:#08071c88;border-color:#75608755}.titleBlock{text-align:center;padding-top:4px}.titleBlock h1{font-size:clamp(49px,16vw,80px);font-style:italic;margin-top:10px;animation:titleGlow 3s infinite alternate}.titleBlock h1 span{color:#68f5ff}.edition{font-size:10px;letter-spacing:6px;margin-top:12px;color:#ccbfe7}#stage{position:relative;flex:1;min-height:95px;max-height:250px;display:flex;align-items:center;justify-content:center;overflow:hidden}#hologram{position:absolute;width:100%;height:100%;object-fit:contain}.orbit{position:absolute;left:15%;width:70%;height:42%;border:1px solid #4ff8ff66;border-radius:50%;box-shadow:0 0 30px #7b36f344;transform:rotate(-15deg);animation:orbit 6s infinite alternate}.orbit2{transform:rotate(22deg);width:80%;left:10%;border-color:#ff4be755;animation-direction:alternate-reverse}.stageBadge{align-self:flex-end;font-size:8px;font-weight:800;letter-spacing:3px;color:#c0b3de;margin-bottom:2px}.stageBadge span{color:#5affff}#deck{flex-shrink:0;position:relative;padding:11px 10px 9px;background:linear-gradient(120deg,#182137e6,#211330e6);border-left:3px solid #6affff;border-right:3px solid #f35fff;box-shadow:0 0 25px #be3fff22;clip-path:polygon(0 0,94% 0,100% 15%,100% 100%,6% 100%,0 85%)}.deckTop{display:flex;justify-content:space-between;font-size:9px;color:#a6c7e0;font-weight:900;letter-spacing:2px;padding:0 9px}.deckSelect{display:flex;align-items:center;gap:2px;margin:6px 0}.deckSelect>button{border:0;background:transparent;font-size:20px;padding:9px}.deckSelect #selectedTrack{flex:1;min-width:0;font-size:17px;padding:5px 0}.deckSelect strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.4px}.deckSelect #trackGenre{font-size:9px;letter-spacing:4px;display:block;margin-top:7px;color:#dc88f8}.deckBottom{display:flex;gap:8px;justify-content:center;align-items:center;font-size:8px;letter-spacing:1px;color:#a5f1f3;height:18px}.equalizer{height:16px;display:flex;gap:2px;align-items:center}.equalizer i{display:block;width:3px;height:12px;background:#6affff;animation:equalize .6s infinite alternate}.equalizer i:nth-child(2n){animation-delay:-.4s;background:#dd65ff}.equalizer i:nth-child(3n){animation-delay:-.2s}.lobbyActions{display:flex;flex-direction:column;gap:10px;flex-shrink:0}.setlistButton{display:flex;justify-content:space-between;align-items:center;border:0;border-bottom:1px solid #735a9366;background:#0b0b2077;font-size:9px;font-weight:900;letter-spacing:.5px;padding:12px 9px}.setlistButton b{color:#ec9cff}.modeRow{display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:2px;color:#c2adcf}.modeRow select{font-size:10px;font-weight:900;padding:9px 5px;letter-spacing:1px;border:0;background:#201b35}.launch{width:100%;display:flex;justify-content:space-between;align-items:center;padding:18px 13px;border:1px solid #86f7ff;background:linear-gradient(105deg,#167a92,#5c35a9 60%,#bd328b);font-weight:1000;letter-spacing:2px;box-shadow:0 5px 0 #27164c,0 0 25px #7448bb55;clip-path:polygon(4% 0,100% 0,100% 76%,96% 100%,0 100%,0 24%)}.launch span{font-size:11px;color:#aefcff}.lobbyFooter{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#b9a7d0;letter-spacing:1px}.lobbyFooter button{border:0;background:transparent;padding:8px 0;font-size:9px;color:#74e7f0}.modal{display:none;position:absolute;inset:0;background:linear-gradient(155deg,#10182d,#160b27 65%);z-index:10;padding:22px;flex-direction:column;gap:14px}.modalHeading{display:flex;align-items:center;justify-content:space-between;gap:8px}.modalHeading .eyebrow{font-size:8px;margin-bottom:6px}.modalHeading button{font-size:10px;font-weight:900;padding:10px}.catalogToolbar{display:flex;gap:10px;justify-content:space-between;align-items:center}.catalogToolbar span{font-size:8px;color:#c7a7e1}.catalogToolbar select{max-width:50%;font-size:11px}#songs{display:grid;gap:8px;overflow:auto;flex:1;min-height:0}.song{text-align:left;display:flex;justify-content:space-between;align-items:center;padding:13px;background:#18172f;border-color:#504264}.song strong{font-size:12px}.song small{font-size:10px}.song.active{border-color:#6efff8;box-shadow:inset 3px 0 #5df6ff;background:#14313d}.tag{font-size:10px;color:#82f5f8}.catalogFooter{text-align:center;letter-spacing:1px;color:#bb9acb;font-size:8px}.settingsBody{overflow:auto;line-height:1.6;color:#b9bed7;font-size:12px}.settingsBody h2{font-size:15px;margin:25px 0 12px;color:#fff}.settingsBody p{margin:12px 0}.setting{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:24px 0;font-size:11px;color:#91eaf4}.setting input{flex:1;min-width:95px}.check{display:block;font-size:11px;margin:18px 0;color:#d9ceeb}
#game{position:absolute;inset:0;display:none;flex-direction:column;padding:max(10px,env(safe-area-inset-top)) 12px max(9px,env(safe-area-inset-bottom));gap:7px;background:radial-gradient(ellipse at 50% 50%,#35164e88,transparent 80%),#060616}header{display:flex;justify-content:space-between;align-items:center;min-height:36px}header strong{font-size:15px}header button{padding:7px 13px;border-radius:5px}#next{font-size:10px;letter-spacing:2px;color:#90f6ff}#stats{display:flex;justify-content:space-between;font-weight:900;font-size:18px}#stats small{display:block;font-size:8px;letter-spacing:2px;color:#a9b8d4}#stats>div{font-variant-numeric:tabular-nums}#streakHud{border:1px solid #7049ad;background:linear-gradient(110deg,#211536,#0e233a);padding:7px 11px 5px;box-shadow:0 0 15px #60339933;position:relative;flex-shrink:0}.streakMain{display:flex;align-items:center;gap:10px;height:36px}.streakMain small{font-size:8px;letter-spacing:3px;display:block;color:#c4b4e5}.streakMain #streak{font-size:30px;line-height:29px;font-weight:1000;color:#77ffff;font-variant-numeric:tabular-nums}.streakMain b{font-size:10px;letter-spacing:2px;color:#b7a9d3;margin-left:7px}.streakIcon{font-size:35px;color:#ea79fc;text-shadow:0 0 15px #e849ff}.bestCombo{margin-left:auto;text-align:right;color:#cbb4e1;font-size:8px;letter-spacing:2px}.bestCombo span{display:block;font-size:19px;font-weight:900;color:#fff}#comboRail{height:3px;background:#101325;margin:5px 0}#comboFill{height:100%;width:0;background:linear-gradient(90deg,#73fbff,#ee63fe);transition:width .12s}#streakCallout{height:12px;line-height:12px;font-size:8px;font-weight:900;color:#d9b9f9;text-align:center;letter-spacing:2px}#streakHud.hit{animation:comboHit .2s}#streakHud.milestone{animation:milestone .65s}#streakHud.broken{animation:breakCombo .4s}#trackProgress{height:13px;background:#211735;position:relative;flex-shrink:0;overflow:hidden}#trackFill{height:100%;background:#7139bc66;width:0}#intensityLabel{position:absolute;inset:0;text-align:center;font-size:8px;line-height:13px;font-weight:800;letter-spacing:2px;color:#a99cc4}#game.overdrive #trackProgress{background:#4b133c;box-shadow:0 0 15px #ff48ae44}#game.overdrive #trackFill{background:#e5398f77}#game.overdrive #intensityLabel{color:#ffcaee}#field{position:relative;flex:1;min-height:0;display:flex;justify-content:center}#board{height:100%;max-width:100%;aspect-ratio:1/2;width:auto;object-fit:contain;border:1px solid #526897;border-radius:3px;box-shadow:0 0 25px #8a39b933}#rail{height:6px;background:#181a35;flex-shrink:0}#pulse{height:100%;background:linear-gradient(90deg,#3dfaff,#ba47ff,#ff3ea6);width:0}#cue{text-align:center;height:22px;line-height:22px;font-size:12px;font-weight:900;letter-spacing:2px;color:#4effed;text-shadow:0 0 14px currentColor;flex-shrink:0}#controls{display:grid;grid-template-columns:1fr 1fr 1.4fr 1.4fr;gap:7px;flex-shrink:0}#controls button{height:54px;font-size:22px;font-weight:800;padding:6px;border-radius:5px;background:#15172f}#controls small{font-size:8px;display:block}#controls button:nth-child(3){border-color:#bb5eff;color:#dab5ff}#controls button:nth-child(4){border-color:#4affef;color:#6ffff0}#now{text-align:center;font-size:9px;height:12px;line-height:12px;flex-shrink:0;color:#b9a2d4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#overlay{display:none;position:absolute;inset:0;background:#07071af5;z-index:5;padding:28px;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:20px}#overlay h1{font-size:48px;letter-spacing:-2px}#overlay #summary{line-height:1.8;color:#c9bbdf}#overlay button{min-width:230px;font-weight:900;letter-spacing:2px}#celebration{display:none;position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,#501a68,#08071c 80%);z-index:15;overflow:hidden}#victoryFX{position:absolute;inset:0;width:100%;height:100%}.victoryContent{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center;padding:25px}.victoryContent .eyebrow{font-size:10px;color:#fff1b7}.victoryCrown{font-size:70px;line-height:1;color:#ffe27d;filter:drop-shadow(0 0 20px #ffaf5099);animation:crown 1s infinite alternate}.victoryContent h1{font-size:clamp(70px,22vw,110px);font-style:italic;line-height:.88;text-shadow:5px 5px #8d3cc0,0 0 45px #5df7ff77;animation:titleGlow 1.5s infinite alternate}#victoryMessage{font-size:11px;letter-spacing:4px;color:#c5ffff;font-weight:900}#victoryScore{font-size:38px;font-weight:1000;color:#fff1a6;letter-spacing:1px}#victoryStats{font-size:11px;color:#decbed;line-height:1.8}.victoryRail{width:80%;height:4px;background:#6f447a}#victoryFill{height:100%;width:100%;background:linear-gradient(90deg,#70ffff,#f18bff,#fff19d)}#victoryCountdown{font-size:9px;letter-spacing:3px;color:#d8c0ec}
@keyframes equalize{from{transform:scaleY(.2)}to{transform:scaleY(1)}}@keyframes titleGlow{from{filter:drop-shadow(0 0 3px #8e43c944)}to{filter:drop-shadow(0 0 17px #6b55df77)}}@keyframes orbit{to{transform:rotate(20deg) scale(.9)}}@keyframes comboHit{50%{transform:scale(1.025);border-color:#8bffff}}@keyframes milestone{30%{transform:scale(1.045);box-shadow:0 0 35px #f477ed99;border-color:#ffdb83}80%{transform:scale(.99)}}@keyframes breakCombo{40%{transform:translateX(-4px);border-color:#ff426a}70%{transform:translateX(4px)}}@keyframes crown{to{transform:translateY(-8px) rotate(4deg)}}
@media(max-height:700px){#menu{padding:12px 18px;gap:9px}.titleBlock h1{font-size:56px;margin-top:7px}.edition{font-size:8px;margin-top:8px}.eyebrow{font-size:8px}#stage{min-height:65px}.launch{padding:14px 10px}.lobbyActions{gap:7px}#deck{padding-top:8px;padding-bottom:6px}.deckSelect{margin:3px 0}.setlistButton{padding:9px}.lobbyTop .brand{font-size:9px}.lobbyFooter{font-size:8px}#game{gap:5px;padding-top:8px}#streakHud{padding:5px 9px 3px}.streakMain{height:30px}.streakMain #streak{font-size:25px}#stats{font-size:16px}#controls button{height:48px}header{min-height:32px}.victoryContent{gap:15px}.victoryCrown{font-size:50px}.victoryContent h1{font-size:75px}}
/* Beatfall 1.2: carousel, rhythm chart and growing action notifications */
.genreBar{display:flex;align-items:center;justify-content:space-between;font-size:9px;font-weight:900;letter-spacing:2px;color:#d4bfe5;flex-shrink:0}.genreBar select{font-size:11px;font-weight:800;min-width:175px;border:1px solid #74599a;background:#14152c;padding:8px 10px;color:#a5ffff}.rhythmShortcut{display:flex;align-items:center;justify-content:space-between;background:#23183566;border:0;font-size:9px;letter-spacing:1px;padding:7px 9px;color:#d6b4e8}.rhythmShortcut b{color:#83faff}#deck{padding:10px 0 7px;clip-path:polygon(0 0,96% 0,100% 10%,100% 100%,4% 100%,0 90%)}.deckTop{padding:0 15px;margin-bottom:6px}#trackCarousel{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding:2px 24px 3px;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x;overscroll-behavior-x:contain}#trackCarousel::-webkit-scrollbar{display:none}.carouselCard{flex:0 0 100%;min-width:0;scroll-snap-align:center;scroll-snap-stop:always;display:flex;align-items:center;gap:11px;padding:12px 10px;text-align:left;border:1px solid #64507e88;background:linear-gradient(100deg,#122534,#301a40);opacity:.55;transition:opacity .2s,border-color .2s}.carouselCard.active{opacity:1;border-color:#8bfff2;box-shadow:inset 3px 0 #65f7ff}.carouselGlyph{font-size:29px;font-weight:1000;color:var(--trackColor);text-shadow:0 0 15px var(--trackColor)}.carouselText{min-width:0;flex:1}.carouselText strong{display:block;font-size:14px;font-weight:1000;letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.carouselText small{display:block;font-size:8px;letter-spacing:3px;margin-top:6px;color:#e3b5fa}.carouselText em{display:block;font-size:8px;font-style:normal;margin-top:6px;color:#77f6e8;letter-spacing:1px}.carouselNav{display:flex;align-items:center;justify-content:space-between;padding:0 11px;height:23px}.carouselNav button{padding:2px 8px;background:transparent;border:0;color:#90ecff;font-size:12px}.carouselNav span{font-size:8px;letter-spacing:1.5px;color:#d0bedf}.deckBottom{font-size:7px;letter-spacing:.6px;height:16px}.noteChoices{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.noteChoice{border:1px solid #604c7e;padding:10px 3px;background:#1b1830;text-align:center;font-size:10px;cursor:pointer}.noteChoice:has(input:checked){border-color:#6bf7ea;background:#173b43;color:#9ffff3}.noteChoice input{display:block;margin:0 auto 6px;accent-color:#6affff}.noteChoice small{display:block;font-size:8px;margin-top:5px}.rhythmPresets{display:flex;gap:6px;margin:12px 0}.rhythmPresets button{flex:1;font-size:9px;font-weight:900;padding:8px}#rhythmLane{position:relative;height:27px;flex-shrink:0;border-top:1px solid #8060af55;border-bottom:1px solid #8060af55;background:#10162d;overflow:hidden}#rhythmCanvas{width:100%;height:100%;display:block}#rhythmLabel{position:absolute;right:4px;top:1px;font-size:6px;letter-spacing:1px;color:#d8b6ef;pointer-events:none}#moveToast{position:absolute;z-index:3;left:50%;top:23%;width:82%;max-width:280px;text-align:center;opacity:0;pointer-events:none;transform:translate(-50%,-50%);filter:drop-shadow(0 0 14px #592377);color:#b4ffff;font-weight:1000;text-shadow:0 2px 8px #070515,0 0 18px currentColor}#moveToast strong{display:block;line-height:1.2;letter-spacing:1px}#moveToast span{display:block;font-size:.66em;letter-spacing:2px;margin-top:7px;color:#fff7da}#moveToast.pop{animation:movePop var(--toastDuration,.65s) ease-out both}#moveToast.lost{color:#ff688f;animation:lostPop .8s ease-out both}#streakHud.hit,#streakHud.milestone{animation:growingCombo .24s}#streakHud.milestone{animation:growingCombo .5s}
@keyframes movePop{0%{opacity:0;transform:translate(-50%,-20%) scale(.7)}18%{opacity:1;transform:translate(-50%,-50%) scale(var(--toastPeak,1.15))}45%{opacity:1;transform:translate(-50%,-58%) scale(var(--toastBase,1))}100%{opacity:0;transform:translate(-50%,-110%) scale(var(--toastBase,1))}}@keyframes lostPop{0%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}35%{opacity:1;transform:translate(-48%,-47%) scale(1)}100%{opacity:0;transform:translate(-50%,-20%) scale(.8)}}@keyframes growingCombo{45%{transform:scale(var(--hudPeak,1.025));border-color:#b5fff3;box-shadow:0 0 var(--hudGlow,16px) #bb65ee88}}
@media(max-height:850px){#menu{gap:10px}#stage{min-height:70px}.titleBlock h1{font-size:62px}.edition{margin-top:9px;font-size:8px}.lobbyActions{gap:7px}.launch{padding:15px 12px}}@media(max-height:700px){#menu{gap:6px}.titleBlock h1{font-size:49px;margin-top:5px}.titleBlock .eyebrow{font-size:7px}.edition{margin-top:6px;font-size:7px;letter-spacing:4px}#stage{min-height:38px}.stageBadge{font-size:6px;letter-spacing:2px}#hologram{transform:scale(.86)}.lobbyTop .brand span{font-size:7px;margin-top:3px}.iconButton{font-size:18px;padding:3px 8px}.genreBar select{padding:6px 8px;font-size:10px}#deck{padding-top:7px;padding-bottom:5px}.carouselCard{padding:8px;gap:8px}.carouselText strong{font-size:12px}.carouselGlyph{font-size:23px}.carouselText small,.carouselText em{margin-top:4px;font-size:7px}.deckTop{margin-bottom:3px;font-size:8px}.carouselNav{height:20px}.carouselNav span{font-size:7px}.lobbyActions{gap:5px}.setlistButton{padding:8px;font-size:8px}.rhythmShortcut{font-size:8px;padding:6px 8px}.modeRow select{padding:7px 5px;font-size:9px}.launch{padding:12px 10px;font-size:12px}.lobbyFooter button{padding:5px 0}#rhythmLane{height:24px}#cue{font-size:10px;letter-spacing:1px}}
.freestyleBadge{display:flex;justify-content:space-between;align-items:center;padding:7px 9px;background:#1b213344;font-size:8px;letter-spacing:.7px;color:#b8bfdc}.freestyleBadge b{color:#83fff3}.freestyleBadge span{font-size:7px;color:#d7b8ee}.rhythmShortcut b{max-width:63%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#timingHelp{margin:18px 0;padding:14px;border:1px solid #59698c;background:#111a30}#timingHelp button{width:100%;font-size:10px;letter-spacing:1px;font-weight:900}#timingHelp p{font-size:10px;color:#c5cfe9}#timingReport{width:100%;height:140px;margin-top:12px;background:#060c1b;color:#beeeff;font:10px monospace;user-select:text;-webkit-user-select:text}#calibration{z-index:30;justify-content:center;text-align:center;background:radial-gradient(ellipse at center,#351a55,#08091b)}#calibration p{color:#c7d8ef;line-height:1.6}#calibrationPad{height:180px;border:2px solid #72ffff;background:radial-gradient(ellipse,#275278,#19213a);font-size:23px;font-weight:1000;box-shadow:0 0 30px #68cfff44}#calibrationPad:active{background:#7747a6}#calibrationProgress{letter-spacing:3px;color:#7dffeb;font-weight:900}
#preparingAudio{z-index:40;align-items:center;justify-content:center;text-align:center;background:radial-gradient(ellipse,#26274d,#070918);gap:25px}#preparingAudio h2{max-width:320px;line-height:1.3;color:#a6ffff}#preparingAudio p{color:#ccbee7;line-height:1.8}#preparingAudio button{min-width:200px}

#controls button,#calibrationPad{touch-action:none;-webkit-tap-highlight-color:transparent}#controls button:active{transform:none}#controls button.touchReceived{animation:touchReceived .16s ease-out}@keyframes touchReceived{0%{background:#6470a8;box-shadow:inset 0 0 0 2px #d7ffff,0 0 12px #73ffff}100%{background:#15172f;box-shadow:none}}

#browserEntry{position:fixed;inset:0;z-index:999;background:radial-gradient(ellipse at center,#351450,#060616 75%);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;text-align:center;padding:24px}#browserEntry h1{font-size:clamp(48px,14vw,100px)}#browserEntry button{padding:20px 36px;border-color:#6effff;box-shadow:0 0 30px #7f3ad966;font-weight:900;letter-spacing:3px}#browserEntryStatus{font-size:12px;color:#acb7d2}#shareGame{font-size:10px;padding:8px;letter-spacing:1px}