:root{--bg: #0b0d16;--panel: rgba(16, 18, 32, .82);--text: #f4efe6;--muted: #b9b2a6;--accent: #ffb547;--ok: #5fd38d;--good: #9fd35f;--bad: #ff5a5a}html,body,#root{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:system-ui,sans-serif}.app{position:fixed;top:0;right:0;bottom:0;left:0}.stage{position:absolute!important;top:0;right:0;bottom:0;left:0}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.overlay>*{pointer-events:auto}.panel{position:absolute;background:var(--panel);border-radius:16px;padding:24px 28px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);max-width:420px;display:flex;flex-direction:column;gap:10px}.panel.center{top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;align-items:center}.panel.side{top:24px;left:24px}h1{margin:0;font-size:44px;letter-spacing:1px}h2{margin:0}.subtitle{color:var(--muted);margin:0 0 8px}button{font:inherit;padding:10px 18px;border-radius:10px;border:1px solid #ffffff33;background:#ffffff14;color:var(--text);cursor:pointer}button:hover{background:#ffffff26}button:disabled{opacity:.6;cursor:default}button.primary{background:var(--accent);color:#1b1408;border-color:transparent;font-weight:600}button.link{background:none;border:none;color:var(--muted);text-decoration:underline;padding:4px}.toggle{color:var(--muted);font-size:14px;display:flex;gap:8px;align-items:center}.progression{display:flex;gap:10px}.chord{padding:8px 14px;border-radius:10px;background:#ffffff14;font-size:22px;font-weight:600}.chord.active{background:var(--accent);color:#1b1408}.big{font-size:36px;font-weight:700}.error{color:var(--bad)}.stars{font-size:48px;color:var(--accent);margin:0}.hud.top{position:absolute;top:16px;left:50%;transform:translate(-50%);display:flex;gap:18px;align-items:center;background:var(--panel);padding:10px 18px;border-radius:12px}.mood{width:120px;height:10px;border-radius:5px;background:#fff2;overflow:hidden}.mood-fill{height:100%;background:linear-gradient(90deg,var(--bad),var(--accent),var(--ok));transition:width .3s}.judgement{position:absolute;top:34%;left:50%;transform:translate(-50%);font-size:40px;font-weight:800;animation:pop .6s ease-out forwards;pointer-events:none}.judgement.perfect{color:var(--ok)}.judgement.good{color:var(--good)}.judgement.off{color:var(--accent)}.judgement.miss{color:var(--bad)}.badge{position:absolute;bottom:12px;right:12px;font-size:12px;color:var(--muted);background:var(--panel);padding:6px 10px;border-radius:8px}@keyframes pop{0%{opacity:0;transform:translate(-50%,10px) scale(.8)}20%{opacity:1;transform:translate(-50%) scale(1.1)}to{opacity:0;transform:translate(-50%,-20px) scale(1)}}.fade{position:fixed;top:0;right:0;bottom:0;left:0;background:#000;opacity:0;pointer-events:none;transition:opacity .4s;z-index:10}.fade.on{opacity:1;pointer-events:auto}.hud{position:absolute;background:var(--panel);padding:8px 14px;border-radius:10px;pointer-events:none}.objective{top:16px;left:16px;font-weight:600}.door-prompt{bottom:90px;left:50%;transform:translate(-50%);font-size:18px}.dance-hint{top:84px;left:16px;font-size:14px;opacity:.85}.toast{top:40%;left:50%;transform:translate(-50%);font-size:20px;font-weight:700}.controls-hint{bottom:16px;left:50%;transform:translate(-50%);font-size:12px;color:var(--muted);text-align:center;width:max-content;max-width:calc(100vw - 440px)}.minimap{position:absolute;bottom:16px;right:16px;border-radius:10px;border:2px solid #ffffff55;pointer-events:none}.minimap.round{border-radius:50%}.quality{top:16px;right:16px;pointer-events:auto;font-size:13px}.quality select{margin-left:6px;background:#1b1626;color:var(--text);border:1px solid #ffffff33;border-radius:6px;padding:2px 6px}.credits-button{top:60px;right:16px;pointer-events:auto;font-size:13px;cursor:pointer}.exit-button{top:16px;right:16px;pointer-events:auto;font-size:13px;cursor:pointer}.credits{max-width:560px;max-height:80vh;overflow-y:auto;text-align:left;align-items:stretch;z-index:5}.credits h3{margin:12px 0 6px;font-size:15px;color:var(--accent)}.credits ul{margin:0;padding-left:18px;font-size:13px;line-height:1.5}.credits a{color:var(--text)}.credits .muted{color:var(--muted)}.transport{position:absolute;top:14px;left:50%;transform:translate(-50%);display:flex;gap:16px;align-items:center;background:#0a0e18eb;border:1px solid #2f6fb0;border-radius:12px;padding:8px 16px;box-shadow:0 0 16px #3ca0ff40}.transport .play{min-width:96px;font-weight:700}.transport .play.on{background:#ff3c78;border-color:#ff3c78;color:#fff}.transport .bpm{display:flex;align-items:center;gap:8px}.transport .bpm button{padding:4px 12px}.transport .pulse{width:14px;height:14px;border-radius:50%;background:#2a2f3c}.transport .record{display:flex;align-items:center;gap:6px}.transport .rec{min-width:92px;color:#ff6b8a;border-color:#ff3c78}.transport .rec.on{background:#ff3c78;color:#fff;animation:rec-blink 1s steps(2) infinite}.transport .formats{display:flex;gap:2px}.transport .formats button{padding:2px 6px;font-size:11px}.transport .formats button.on{background:#2f6fb0;color:#fff;border-color:#5fd0ff}.transport .rec-error{color:#ff8fa3;font-size:12px}@keyframes rec-blink{50%{opacity:.7}}.transport .pulse.on{background:#ffb35c;box-shadow:0 0 10px #ffb35c}.knob{display:inline-flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:#c9d4ee;cursor:ns-resize;-webkit-user-select:none;user-select:none;touch-action:none}.gear-panel{position:absolute;left:3%;right:3%;bottom:3%;max-height:52%;overflow:auto;background:#0a0e18f0;border:1px solid #ff3c78;border-radius:14px;box-shadow:0 0 24px #ff3c7859;padding:12px 16px;color:#e6ecff;display:flex;flex-direction:column;gap:8px}.gear-panel.synth{border-color:#5fd0ff;box-shadow:0 0 24px #3cb4ff59}.gear-panel header{display:flex;align-items:center;gap:16px}.gear-panel h3{margin:0;flex:1;font-size:16px;color:#ff86ad}.gear-panel.synth h3{color:#8fdcff}.gear-panel .wave{display:flex;gap:6px}.gear-panel .wave button.on{background:#5fd0ff;color:#08121f;border-color:#5fd0ff}.gear-panel .knobs{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}.drum-row{display:flex;align-items:center;gap:10px}.drum-row .voice{width:92px;font-size:13px;color:#c9d4ee}.steps{display:grid;grid-template-columns:repeat(16,1fr);gap:4px;flex:1}.step{padding:0;height:26px;border-radius:4px;background:#232a3a;border:1px solid #ffffff12;font-size:11px;color:#c9d4ee}.step.beat{border-color:#ffffff3a}.step.on{background:#ff3c78;box-shadow:0 0 6px #ff3c78;color:#fff}.synth-steps .step{height:36px}.synth-steps .step.on{background:#5fd0ff;box-shadow:0 0 6px #5fd0ff;color:#08121f;font-weight:700}.synth-steps .step.tie{background:#2c6f90}.step.now{outline:2px solid #ffe08a;outline-offset:1px}.gear-panel .hint{margin:0;font-size:12px;color:#8b95b2}.accent-steps .step{height:18px;font-size:10px}.accent-steps .step.on{background:#d7dbe3;color:#111;box-shadow:0 0 6px #d7dbe3}.gear-panel.acid{border-color:#d7dbe3;box-shadow:0 0 24px #d7dbe340}.gear-panel.acid h3{color:#e8ebf1}.gear-panel.arp{border-color:#b48cff;box-shadow:0 0 24px #b48cff4d}.gear-panel.arp h3{color:#cdb4ff}.gear-panel.lead{border-color:#ffc94d;box-shadow:0 0 24px #ffc94d4d}.gear-panel.lead h3{color:#ffd77a}.gear-panel.keys{border-color:#ffb35c;box-shadow:0 0 24px #ffb35c4d}.gear-panel.keys h3{color:#ffc98a}.gear-panel.drums808{border-color:#ff8a3c}.gear-panel.drums808 h3{color:#ffab73}.transport.inline{position:static;transform:none;box-shadow:none;padding:4px 12px}.gear-panel.mixer{max-height:62%;border-color:#7dffb0;box-shadow:0 0 24px #7dffb04d}.gear-panel.mixer h3{color:#a8ffcb}.gear-panel .strips{display:grid;grid-template-columns:repeat(7,minmax(110px,1fr));gap:8px;overflow-x:auto}.gear-panel .strip{display:flex;flex-direction:column;align-items:center;gap:6px;background:#ffffff08;border:1px solid #263048;border-radius:10px;padding:8px 4px}.gear-panel .strip h4{margin:0;font-size:13px;color:#e6ecff}.gear-panel .strip .fx{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 6px;border-top:1px solid #263048;padding-top:4px;width:100%}.gear-panel .strip .fx>span{width:100%;text-align:center;font-size:11px;color:#8b95b2;text-transform:uppercase;letter-spacing:.08em}.gear-panel .strip .times{display:flex;gap:2px}.gear-panel .strip .times button{padding:2px 4px;font-size:10px}.gear-panel .strip .times button.on{background:#ff86ad;color:#1a0a12;border-color:#ff86ad}.arp-options{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}button.hold.on{background:#b48cff;color:#12091f;border-color:#b48cff;box-shadow:0 0 10px #b48cff}.loop-box{display:flex;align-items:center;gap:10px;flex-wrap:wrap}button.record.on{background:#ff3c78;border-color:#ff3c78;color:#fff}.now-playing{position:absolute;right:16px;bottom:16px;width:360px;background:var(--panel);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;font-size:13px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.np-title{font-weight:700;font-size:14px}.np-next,.np-status{color:var(--muted)}.np-tap{background:var(--accent);color:#1b1408;font-weight:700;border-color:transparent}.np-volume{display:flex;align-items:center;gap:8px;color:var(--muted)}.np-volume input{flex:1}.np-player{width:100%;height:100px;border:0;border-radius:8px}.club-banner{position:absolute;top:16px;left:50%;transform:translate(-50%);background:var(--panel);padding:8px 16px;border-radius:10px;font-weight:700;pointer-events:none}.twitch-panel{position:absolute;right:16px;bottom:16px;background:var(--panel);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:6px}.twitch-panel.big{right:50%;bottom:50%;transform:translate(50%,50%)}.twitch-panel.waiting{bottom:auto;top:64px}.twitch-bar{display:flex;justify-content:space-between;align-items:center;font-size:13px}.twitch-host iframe{display:block;border:0}.twitch-host.big iframe{width:min(960px,90vw)!important;height:min(540px,70vh)!important}.auth-screen{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 50% 30%,#1b1430,#05060a 70%);display:flex;align-items:center;justify-content:center}.auth-panel{min-width:320px}.auth-panel label{display:flex;flex-direction:column;gap:4px;width:100%;text-align:left;font-size:13px;color:var(--muted)}.auth-panel input{background:#120f1c;color:var(--text);border:1px solid #ffffff33;border-radius:8px;padding:8px 10px;font-size:15px}.auth-panel button.link{background:none;border:none;color:var(--muted);text-decoration:underline;cursor:pointer}.auth-title{margin:0 0 4px;letter-spacing:4px;color:#ff2d6f;text-shadow:0 0 12px #ff2d6f88}.auth-error{color:#ff6b6b;margin:0;font-size:13px}.auth-notice{color:var(--accent);margin:0;font-size:13px}.auth-checking{color:var(--muted)}.online-badge{top:104px;right:16px;pointer-events:auto;font-size:13px;display:flex;gap:8px;align-items:center}.online-badge.solo{color:var(--muted);pointer-events:none}.online-badge button{font-size:12px;padding:2px 8px}.chat-box{position:fixed;left:16px;bottom:56px;width:420px;max-width:calc(100vw - 32px);z-index:5;font-size:13px;transition:opacity .6s;pointer-events:auto}.chat-box.idle{opacity:.35}.chat-tabs{display:flex;gap:2px}.chat-tabs button{flex:1;background:#08081099;color:var(--muted);border:0;border-radius:6px 6px 0 0;padding:3px 0;font-size:11px;cursor:pointer}.chat-tabs button.on{background:#080810cc;color:#ffd27a}.chat-lines{max-height:180px;overflow-y:auto;background:#0808108c;border-radius:0;padding:6px 8px;display:flex;flex-direction:column;gap:2px;text-shadow:0 1px 2px #000}.chat-line{word-break:break-word}.chat-input{width:100%;box-sizing:border-box;background:#080810d9;color:#fff;border:1px solid #5fd0ff88;border-radius:0 0 8px 8px;padding:6px 8px;font-size:13px;outline:none}.chat-hint{background:#08081073;border-radius:0 0 8px 8px;padding:3px 8px;color:var(--muted);font-size:11px}.game-hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:6}.game-hud>*{pointer-events:auto}.top-bar{top:16px;left:16px;padding:8px 14px;border:1px solid #ffffff22;pointer-events:none!important}.top-bar-name{font-weight:700;font-size:15px}.top-bar-place{font-size:12px;color:var(--muted)}.top-bar-solo{font-size:11px;color:var(--accent);margin-top:2px}.hud-buttons{position:absolute;top:16px;right:16px;display:flex;gap:8px}.hud-button{position:relative;width:40px;height:40px;border-radius:9px;background:#101220e6;border:1px solid #ffffff55;color:#fff;font-weight:700;font-size:15px;cursor:pointer;padding:0}.hud-button .gear-icon{display:block;margin:auto}.hud-button.active{border-color:var(--accent);color:var(--accent)}.hud-button-label{position:absolute;top:44px;left:50%;transform:translate(-50%);font-size:10px;font-weight:400;color:var(--muted);white-space:nowrap}.hud-dot{position:absolute;top:-4px;right:-4px;width:11px;height:11px;border-radius:50%;background:#ff2d6f;box-shadow:0 0 6px #ff2d6f}.gesture-wheel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:auto}.wheel-slice{fill:#101220d1;stroke:#fff3;stroke-width:1.5;cursor:pointer;transition:fill .08s}.wheel-slice.on{stroke:var(--accent)}.wheel-slice.hover{fill:#ff2d6f8c;stroke:#ff86ad}.wheel-label{fill:#fff;font-size:14px;font-weight:600;text-anchor:middle;dominant-baseline:middle;pointer-events:none}.wheel-center{fill:#080a12e6;stroke:#fff2;pointer-events:none}.wheel-caption{padding:4px 12px;border-radius:8px;background:#080a12d9;color:var(--muted);font-size:13px}.hud-panel{position:absolute;top:80px;right:16px;width:360px;max-width:calc(100vw - 32px);max-height:calc(100vh - 120px);overflow-y:auto;background:var(--panel);border:1px solid #ffffff22;border-radius:14px;padding:14px 16px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;flex-direction:column;gap:10px}.hud-panel-head{display:flex;justify-content:space-between;align-items:center}.hud-panel-head h2{margin:0;font-size:18px}.hud-row{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}.hud-row select,.hud-row input[type=range]{width:100%}.hud-muted{color:var(--muted);margin:0}.hud-signout{border-color:#ff6b6b88;color:#ff9b9b}.news-item{border-top:1px solid #ffffff1a;padding-top:8px}.news-item h3{margin:2px 0 4px;font-size:15px}.news-item p{margin:0;font-size:13px;line-height:1.45}.news-date{font-size:11px;color:var(--muted)}.guide-tabs{display:flex;flex-wrap:wrap;gap:6px}.guide-tabs button{font-size:12px;padding:4px 8px}.guide-tabs button.active{border-color:var(--accent);color:var(--accent)}.guide-lines{margin:0;padding-left:18px;font-size:13px;line-height:1.5;display:flex;flex-direction:column;gap:6px}.game-hud button.link{background:none;border:none;color:var(--muted);text-decoration:underline;cursor:pointer;align-self:flex-start;padding:0}.context-menu{position:fixed;width:190px;background:#101220f5;border:1px solid #ffb35c88;border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:2px;z-index:20}.context-menu-title{color:#ffb35c;font-weight:700;padding:4px 8px 6px;border-bottom:1px solid #ffffff22;margin-bottom:2px}.context-menu button{text-align:left;background:none;border:none;padding:6px 8px;border-radius:6px;font-size:13px}.context-menu button:hover:not(:disabled){background:#ffb35c26}.context-menu button:disabled{color:#8a8494;cursor:default}.invite-popup{position:fixed;top:22%;left:50%;transform:translate(-50%);width:320px;background:#101220f5;border:2px solid #ff2d6f99;border-radius:14px;padding:16px 18px;text-align:center;z-index:20}.invite-popup h3{margin:0 0 4px}.invite-popup p{margin:0 0 12px;color:var(--muted);font-size:13px}.invite-buttons{display:flex;gap:10px;justify-content:center;margin-bottom:8px}.invite-buttons button{min-width:110px}.invite-popup small{color:var(--muted)}.map-panel{position:fixed;top:24px;right:24px;bottom:24px;left:24px;background:#0c0a18f5;border:1px solid #ffffff22;border-radius:16px;padding:16px 20px;display:flex;flex-direction:column;gap:12px;z-index:15}.map-panel h2{color:#ff2d6f;letter-spacing:1px}.map-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:16px;min-height:0}.map-city{width:100%;height:100%;border-radius:10px}.map-barrio{background:#1b1830;border:1px solid #ffffff22;border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;overflow-y:auto}.map-barrio h3{margin:0}.map-legend{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--muted)}.map-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:middle;margin-right:4px}.map-legend i.dot{border-radius:50%;background:#7dff9a}.map-lots{display:grid;gap:5px;grid-template-columns:repeat(auto-fill,minmax(66px,1fr))}.map-lot{position:relative;border-radius:5px;padding:4px 2px;text-align:center;font-size:10px;min-height:34px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}.map-lot.mine{outline:2px solid #ffb35c}.map-lot-name{font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.map-lot-n{color:#e8e2d8}.map-lot-dot{position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:50%;background:#7dff9a}.auth-backdrop{position:absolute!important;top:0;right:0;bottom:0;left:0}.auth-screen>form{z-index:1}.auth-screen>.character-layout{position:relative;z-index:1}.auth-tagline{margin:-4px 0 6px;color:var(--muted);font-size:12px;letter-spacing:1px}.auth-title.small{font-size:22px;letter-spacing:1px}.character-layout{display:flex;align-items:center;gap:20px;justify-content:center}.character-preview{width:240px;height:340px;flex-shrink:0}.character-layout .auth-panel{max-width:380px}@media (max-width: 680px){.character-preview{display:none}}.name-status{margin:0;font-size:12px;min-height:16px;color:var(--muted)}.name-status.free{color:#7dff9a}.name-status.taken,.name-status.invalid{color:#ff6b6b}.character-layout .panel{position:relative}.map-view{position:relative;min-height:0}.map-view .map-city{cursor:grab;touch-action:none}.map-view .map-city:active{cursor:grabbing}.map-zoom{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px}.map-zoom button{min-width:36px;height:32px;border-radius:8px;background:#141225e6;color:#fff;border:1px solid #ffffff33;font-weight:700;cursor:pointer}.map-zoom button:hover{border-color:#5fd0ff}.bus-panel .bus-destinations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}.bus-panel .bus-destinations button{padding:12px;border-radius:10px;background:#1c1930;color:#fff;border:1px solid #f2c20055;font-weight:700;cursor:pointer}.bus-panel .bus-destinations button:hover{border-color:#f2c200;background:#2a2440}.strips .strip.master{border-left:2px solid #ffd27a55;justify-content:flex-end}.strips .strip.master h4{color:#ffd27a}.steps .step.on[style*=--vel]{position:relative}.steps .step.on[style*=--vel]:after{content:"";position:absolute;left:2px;bottom:2px;height:3px;width:calc(var(--vel, 100%) - 4px);background:#fffc;border-radius:2px;pointer-events:none}.career-panel{width:400px}.career-row{display:flex;flex-direction:column;gap:4px}.career-row-head{display:flex;justify-content:space-between;font-size:13px}.career-now{color:#7dff9a;font-style:normal}.career-bar{height:6px;background:#ffffff18;border-radius:3px;overflow:hidden}.career-bar>div{height:100%;background:linear-gradient(90deg,#f2c200,#ffd27a)}.career-kind h3{margin:6px 0 4px;font-size:13px;color:var(--muted)}.career-rewards{display:flex;flex-wrap:wrap;gap:6px}.career-reward{padding:5px 9px;border-radius:8px;background:#1c1930;color:#fff;border:1px solid #ffffff22;font-size:12px;cursor:pointer}.career-reward.on{border-color:#f2c200;background:#2a2440}.career-reward:disabled{opacity:.45;cursor:default}.hud-error{color:#ff8a8a;margin:0;font-size:12px}.map-place{cursor:pointer}.map-places{display:flex;flex-direction:column;gap:4px}.map-places button{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;background:#14121c;color:#fff;border:1px solid transparent;cursor:pointer;text-align:left;font-size:13px}.map-places button:hover,.map-places button.on{border-color:#5fd0ff;background:#221f33}.map-places i{display:inline-flex;width:20px;height:20px;border-radius:50%;align-items:center;justify-content:center;font-style:normal;font-size:11px;font-weight:800;color:#14121c}.map-places small{color:var(--muted)}