:root{color:#fff;--ink:#080321;--panel:#111044;--cyan:#39ddff;--pink:#ff40c7;--coral:#ff536f;--lime:#baff25;--gold:#ffd123;font-synthesis:none;background:#080321;font-family:Trebuchet MS,Arial,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#app{background:#080321;width:100%;height:100%;margin:0;overflow:hidden}button{cursor:pointer;touch-action:manipulation;font:900 15px/1 Trebuchet MS,Arial,sans-serif}button:focus-visible{outline:3px solid var(--lime);outline-offset:2px}#app{place-items:center;display:grid}#game{isolation:isolate;background:#080321;width:min(100vw,72dvh);height:100dvh;max-height:100vh;position:relative;overflow:hidden;box-shadow:0 0 80px #000}#arena-backdrop,#game-canvas,#stage-wash,#impact{width:100%;height:100%;position:absolute;inset:0}#arena-backdrop{z-index:0;filter:saturate(1.1)contrast(1.04);background:url(../assets/environment/concert-arena.webp) 50%/cover no-repeat}#game-canvas{z-index:1;touch-action:none;display:block}#stage-wash{z-index:2;pointer-events:none;background:linear-gradient(#03021c2e,#0000 46%,#08032140)}#impact{z-index:5;opacity:0;pointer-events:none;background:radial-gradient(circle at 55% 58%,#fff,#ff40c794 12%,#0000 42%)}#game.impact #impact{animation:.24s ease-out flash}#game.riot #stage-wash{animation:.72s ease-out riot}#game.glitch #arena-backdrop{animation:2s steps(2,end) infinite glitch}@keyframes flash{0%{opacity:1}to{opacity:0}}@keyframes riot{40%{filter:hue-rotate(70deg);background:radial-gradient(circle,#ff40c788,#0000 58%)}}@keyframes glitch{50%{filter:saturate(1.6)contrast(1.2)hue-rotate(22deg)}}.hidden{display:none!important}.screen{z-index:20;display:none;position:absolute;inset:0}.screen.active{display:flex}.atlas{background-position:50%;background-repeat:no-repeat;background-size:contain}.cell-00{background-image:url(../assets/atlas/cell-00.png)}.cell-02{background-image:url(../assets/atlas/cell-02.png)}.cell-04{background-image:url(../assets/atlas/cell-04.png)}.cell-05{background-image:url(../assets/atlas/cell-05.png)}.cell-06{background-image:url(../assets/atlas/cell-06.png)}.cell-07{background-image:url(../assets/atlas/cell-07.png)}.cell-14{background-image:url(../assets/atlas/cell-14.png)}#audio{z-index:45;top:max(130px,calc(env(safe-area-inset-top) + 130px));color:#fff;background:#121034e8;border:1px solid #a6a4ca;border-radius:20px;min-width:78px;height:38px;padding:0 12px;font-size:9px;position:absolute;right:12px}#hud{z-index:12;top:max(10px,env(safe-area-inset-top));pointer-events:none;grid-template-rows:58px 22px 36px;grid-template-columns:105px 1fr 116px;gap:4px 8px;height:130px;display:grid;position:absolute;left:12px;right:12px}.time,.score{background:#0b073ddd;border:2px solid #9c8aff;border-radius:16px;flex-direction:column;justify-content:center;padding:7px 10px;display:flex;box-shadow:0 5px #05021c,0 0 18px #4e36ff55}.time span,.score span{letter-spacing:1px;font-size:9px}.time strong,.score strong{font-size:25px;line-height:1}.score{text-align:right;border-color:var(--pink)}.score strong{color:var(--cyan)}#hype{text-align:center;align-self:center}#hype b{color:var(--gold);text-shadow:0 3px #41158b,0 0 8px #ff42c9;font-size:30px;line-height:.8;display:block}#hype span{font-size:10px;font-weight:900}#hype i{background:#080321;border:1px solid #8cecff;border-radius:8px;height:8px;margin-top:4px;display:block;overflow:hidden}#hype em{transform-origin:0;background:linear-gradient(90deg,var(--pink),var(--gold));width:100%;height:100%;transition:transform .15s;display:block}#band-pips{grid-column:1;gap:4px;display:flex}#band-pips i{background:#090524;border:3px solid #7890a9;border-radius:50%;width:22px;height:18px}#band-pips i.on{border-color:var(--cyan);background:var(--lime);box-shadow:0 0 10px var(--cyan)}#callout{border:2px solid var(--pink);letter-spacing:.2px;background:#1b073ddd;border-radius:12px;grid-column:1/4;place-items:center;font-size:12px;font-weight:900;display:grid}#toast{z-index:42;border:2px solid var(--lime);text-align:center;opacity:0;pointer-events:none;background:#11103bea;border-radius:14px;place-items:center;min-height:42px;padding:8px;font-size:13px;font-weight:900;display:grid;position:absolute;top:156px;left:36px;right:36px;transform:translateY(-12px)}#toast.show{animation:1.25s toast}@keyframes toast{0%,to{opacity:0;transform:translateY(-12px)}12%,75%{opacity:1;transform:translateY(0)}}#menu{padding:max(18px,env(safe-area-inset-top)) 18px max(16px,env(safe-area-inset-bottom));background:linear-gradient(#08032114,#0803215c 57%,#080321 100%);flex-direction:column}.brand h1{letter-spacing:-4px;color:var(--cyan);text-shadow:3px 4px #222069,-2px -2px #fff;margin:0;font:1000 49px/.78 Trebuchet MS,sans-serif}.brand h1 em{color:var(--pink);font-style:normal}.brand p{color:#fff;letter-spacing:1px;background:#25125e;border-radius:5px;margin:9px 0 0;padding:5px 12px;font-size:11px;font-weight:900;display:inline-block}.kiki{width:145px;height:145px;position:absolute;top:108px;right:8px}.lineup{border:1.5px solid var(--pink);background:#0b073ee8;border-radius:17px;margin-top:auto;padding:10px 11px 12px}.lineup h2{text-align:center;color:var(--lime);margin:0 0 7px;font-size:14px}#beast-grid{grid-template-columns:repeat(4,1fr);gap:5px;display:grid}.beast{color:#fff;background:#151044;border:2px solid #504d83;border-radius:12px;height:116px;padding:1px 2px 7px;position:relative;overflow:hidden}.beast.selected{border-color:var(--cyan);background:linear-gradient(#162957,#1c0d48);box-shadow:0 0 13px #39ddff66}.beast span{height:75px;display:block}.beast b{color:var(--cyan);font-size:10px;display:block}.beast small{color:#d8d6ff;font-size:7px}.primary{background:var(--coral);color:#100522;border:0;border-radius:16px;height:58px;font-size:18px;box-shadow:0 8px #a72558}.primary:active{transform:translateY(5px);box-shadow:0 3px #a72558}#start{width:100%;margin-top:8px}.key-hint{text-align:center;color:#b8b6d2;margin:13px 0 0;font-size:9px;font-weight:900}#controls{z-index:30;left:0;right:0;bottom:max(14px,env(safe-area-inset-bottom));pointer-events:none;height:132px;position:absolute}#joystick,#strike,#remix{pointer-events:auto;position:absolute}#joystick{background:radial-gradient(circle,#12286b 0 39%,#09102edd 41% 68%,#385e9c99);border:3px solid #b8c9f5;border-radius:50%;width:122px;height:122px;bottom:2px;left:17px;box-shadow:0 0 22px #2fbeff55,inset 0 0 16px #000}#knob{background:radial-gradient(circle at 35% 30%,#fff,var(--cyan) 33%,#0874dc 75%);width:43px;height:43px;box-shadow:0 0 15px var(--cyan);border:2px solid #fff;border-radius:50%;position:absolute;top:37px;left:37px}#strike{background:var(--coral);color:#fff;text-shadow:0 3px #9b2754;border:7px solid #fff;border-radius:50%;width:128px;height:128px;font-size:21px;bottom:0;right:15px;box-shadow:0 0 0 5px #ff4dc9aa,0 8px #a92357,0 0 26px #ff43bd}#strike span,#remix span{font-size:20px;display:block}#remix{color:#aca4cb;background:#15103f;border:3px solid #8b5bab;border-radius:24px;width:69px;height:82px;font-size:10px;bottom:9px;left:50%;transform:translate(-50%);box-shadow:0 5px #07031e}#remix.ready{border-color:var(--lime);color:#fff;box-shadow:0 0 22px var(--pink),0 5px 0 #07031e;background:linear-gradient(#7f20b9,#24115b);animation:.5s infinite alternate pulse}@keyframes pulse{to{transform:translate(-50%)scale(1.05)}}#pause{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#080321bb;justify-content:center;align-items:center}.modal{border:2px solid var(--pink);text-align:center;background:#0d0a38;border-radius:22px;width:82%;padding:28px}.modal h2{color:var(--cyan)}.modal .primary{width:100%}#hit{z-index:35;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#080321aa;flex-direction:column;justify-content:center;align-items:center}.hit-icon{width:120px;height:120px}#hit h2{color:#fff;text-shadow:0 3px 0 #8b145e,0 0 13px var(--pink);margin:0;font-size:30px}#hit p{color:var(--lime);font-size:10px;font-weight:900}#results{-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);background:#080321dc;justify-content:center;align-items:center;padding:16px}.result-panel{border:2px solid var(--pink);text-align:center;background:linear-gradient(#17104bee,#08052eee);border-radius:23px;width:100%;padding:14px 14px 18px}.result-panel h2{color:#fff;text-shadow:0 3px 0 #701568,0 0 12px var(--pink);margin:0;font-size:34px}.podium{justify-content:center;align-items:end;height:130px;display:flex}.podium span{width:33%;height:108px}.podium span:nth-child(2){height:128px}.result-stats{border:1px solid var(--cyan);border-radius:13px;grid-template-columns:repeat(3,1fr);display:grid;overflow:hidden}.result-stats div{background:#0f0b3b;padding:8px 3px}.result-stats div+div{border-left:1px solid #594b9b}.result-stats strong{font-size:18px;display:block}.result-stats span{color:var(--cyan);font-size:7px;font-weight:900}.token{background:#110a32;border:1px solid #8a2a94;border-radius:12px;justify-content:center;align-items:center;gap:8px;height:47px;margin:9px 0;display:flex}.token span{width:38px;height:38px}.token strong{color:var(--pink);font-size:18px}#upgrade{border:2px solid var(--lime);color:#fff;background:#142718;border-radius:13px;width:100%;height:44px;font-size:10px}#encore{width:100%;margin-top:8px}.text-button{color:var(--cyan);background:0 0;border:0;margin-top:12px;font-size:10px}.boot-error{text-align:center;background:#080321;place-content:center;gap:10px;display:grid;position:absolute;inset:0}.boot-error strong{color:var(--pink);font-size:32px}@media (max-height:700px) and (orientation:portrait){.brand h1{font-size:39px}.kiki{width:110px;height:110px;top:86px}.beast{height:96px}.beast span{height:58px}.lineup{padding:7px}.key-hint{display:none}#controls{height:105px}#joystick{width:98px;height:98px}#knob{width:37px;height:37px;top:29px;left:29px}#strike{width:103px;height:103px;font-size:17px}#remix{width:60px;height:67px}.podium{height:90px}.podium span{height:78px}.podium span:nth-child(2){height:90px}.result-panel{padding:8px}.result-panel h2{font-size:28px}}@media (orientation:landscape){#game{width:min(100vw,215dvh);height:100dvh}.brand h1{font-size:35px}.brand p{margin-top:5px}.kiki{width:95px;height:95px;top:55px;right:34%}.lineup{position:absolute;bottom:62px;left:18px;right:18px}.beast{height:70px}.beast span{float:left;width:45%;height:65px}#start{width:260px;position:absolute;bottom:9px;right:22px}.key-hint{position:absolute;bottom:12px;left:26px}#hud{grid-template-rows:48px 17px 29px;grid-template-columns:135px 1fr 145px;height:100px;left:120px;right:120px}.time strong,.score strong{font-size:21px}#hype b{font-size:24px}#callout{font-size:10px}#audio{top:13px;right:13px}#toast{top:104px;left:28%;right:28%}#controls{height:110px;bottom:5px}#joystick{width:96px;height:96px;left:calc(50% - 230px)}#knob{width:36px;height:36px;top:28px;left:28px}#strike{width:98px;height:98px;font-size:16px;right:calc(50% - 230px)}#remix{width:60px;height:68px}.result-panel{max-width:520px;padding:8px}.result-panel h2{font-size:25px}.podium{height:64px}.podium span{height:58px}.podium span:nth-child(2){height:68px}.result-stats div{padding:4px}.token{height:34px;margin:5px}.token span{height:28px}.primary{height:40px}}#menu .lineup{margin-bottom:91px}#venue-card{left:18px;right:18px;bottom:max(95px,calc(env(safe-area-inset-bottom) + 95px));border:2px solid var(--venue,#39ddff);background:#0b073ef2;border-radius:16px;grid-template-columns:36px minmax(0,1fr) 36px;align-items:center;height:78px;display:grid;position:absolute;overflow:hidden;box-shadow:0 8px #05021c,0 0 18px #4e36ff55}#venue-card>button{height:100%;color:var(--venue,#39ddff);background:#ffffff08;border:0;font-size:27px}#venue-card>button:disabled{opacity:.2}#venue-card>div{grid-template-columns:1fr auto;gap:3px 7px;min-width:0;padding:7px;display:grid}#venue-card span,#venue-card small,#venue-card em{letter-spacing:.08em;color:#aaa8cf;white-space:nowrap;text-overflow:ellipsis;font:900 8px/1 Arial,sans-serif;overflow:hidden}#venue-card strong{color:var(--venue,#39ddff);grid-column:1/3;font:900 15px/1 Trebuchet MS,Arial,sans-serif}#venue-card small{color:#fff;grid-column:1/3}#venue-card em{color:var(--gold);text-align:right;font-style:normal}#venue-dots{align-items:center;gap:4px;display:flex}#venue-dots b{background:#4a4672;border-radius:4px;width:9px;height:3px}#venue-dots b.on{background:var(--venue,#39ddff);width:17px;box-shadow:0 0 7px var(--venue,#39ddff)}@media (max-height:700px) and (orientation:portrait){#menu .lineup{margin-bottom:82px}#venue-card{height:70px;bottom:80px}#start{margin-top:4px}}@media (orientation:landscape){#menu .lineup{margin:0;bottom:7px;right:50%}#venue-card{height:70px;bottom:59px;left:51%;right:18px}#start{width:calc(49% - 34px)}}