/* OUT cinematic / club presentation layer */
:root{
  --fx-energy:.15;
  --mv-opacity:.10;
  --mv-blur:13px;
  --mv-bright:.34;
  --mv-sat:1;
  --board-alpha:.45;
}

body.aaa-loaded{position:relative;background:#02050b;isolation:isolate}
body.aaa-loaded>.ambient,body.aaa-loaded>.mountains{opacity:.55}

.cinema-layer{position:fixed;inset:0;z-index:-30;overflow:hidden;pointer-events:none;background:radial-gradient(circle at 50% 42%,#101a33 0,#050914 54%,#010205 100%)}
.cinema-video-shell{position:absolute;inset:-4%;overflow:hidden;transform:scale(1.07)}
.yt-background{position:absolute;left:50%;top:50%;width:177.77777778vh;height:100vh;min-width:100vw;min-height:56.25vw;transform:translate(-50%,-50%) scale(1.04);opacity:var(--mv-opacity);filter:blur(var(--mv-blur)) brightness(var(--mv-bright)) saturate(var(--mv-sat)) contrast(1.08);transition:opacity .24s ease,filter .28s ease;will-change:opacity,filter,transform}
.yt-background iframe{width:100%;height:100%;border:0;pointer-events:none}
.cinema-layer:not(.mv-ready) .yt-background{opacity:0}
.arena-canvas{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;opacity:.8}
.cinema-aurora{position:absolute;inset:-25%;background:radial-gradient(circle at 18% 25%,rgba(52,187,255,.22),transparent 25%),radial-gradient(circle at 80% 20%,rgba(168,63,255,.18),transparent 26%),radial-gradient(circle at 62% 78%,rgba(255,166,54,.14),transparent 25%);filter:blur(56px);mix-blend-mode:screen;opacity:calc(.25 + var(--fx-energy));animation:aaa-aurora 11s ease-in-out infinite alternate}
.cinema-lasers{position:absolute;inset:-20%;background:repeating-linear-gradient(112deg,transparent 0 12vw,rgba(105,221,255,.028) 12.1vw 12.25vw,transparent 12.35vw 21vw);transform:translateX(-5vw);mix-blend-mode:screen;opacity:calc(.15 + var(--fx-energy));animation:aaa-lasers 9s linear infinite}
.cinema-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,3,7,.58),rgba(2,6,13,.23) 35%,rgba(2,5,12,.32) 70%,rgba(0,2,7,.74));backdrop-filter:saturate(1.08)}
.cinema-vignette{position:absolute;inset:0;box-shadow:inset 0 0 18vw rgba(0,0,0,.88),inset 0 -16vh 20vh rgba(0,0,0,.64)}
.cinema-grain{position:absolute;inset:-60%;opacity:.055;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");animation:aaa-grain .28s steps(2) infinite}

@keyframes aaa-aurora{to{transform:translate3d(3%,-2%,0) scale(1.08);filter:blur(72px) hue-rotate(17deg)}}
@keyframes aaa-lasers{to{transform:translateX(16vw)}}
@keyframes aaa-grain{0%{transform:translate(0,0)}25%{transform:translate(3%,-2%)}50%{transform:translate(-2%,3%)}75%{transform:translate(4%,2%)}100%{transform:translate(-3%,-4%)}}

.aaa-loaded .game-shell{z-index:3;position:relative}
.aaa-loaded .game-shell:before,.aaa-loaded .game-shell:after{filter:drop-shadow(0 0 8px rgba(105,221,255,.35))}
.aaa-loaded .game-header h1{position:relative;text-shadow:0 0 5px rgba(255,255,255,.25),0 0 28px rgba(105,221,255,.22),0 16px 40px rgba(0,0,0,.45)}
.aaa-loaded .game-header h1:after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:linear-gradient(90deg,#69ddff,rgba(255,255,255,.7),#ffd46f,transparent);box-shadow:0 0 14px rgba(105,221,255,.6);transform-origin:left;animation:aaa-title-line 3.2s ease-in-out infinite alternate}
@keyframes aaa-title-line{from{transform:scaleX(.36);opacity:.45}to{transform:scaleX(1);opacity:1}}

.aaa-loaded .music-deck,.aaa-loaded .message-row,.aaa-loaded .stat-card,.aaa-loaded .controls .button{background:linear-gradient(145deg,rgba(8,18,34,.62),rgba(3,8,18,.38));border-color:rgba(169,220,255,.15);box-shadow:inset 0 1px rgba(255,255,255,.035),0 12px 34px rgba(0,0,0,.18);backdrop-filter:blur(13px) saturate(1.35)}
.aaa-loaded .music-deck{box-shadow:0 15px 44px rgba(0,0,0,.26),inset 0 0 30px rgba(105,221,255,.025)}
.aaa-loaded .song-progress{height:7px;box-shadow:inset 0 0 10px rgba(0,0,0,.45)}
.aaa-loaded .song-progress i{background:linear-gradient(90deg,#6be4ff 0%,#e7fbff 30%,#fff2a8 63%,#ff78ca 100%);box-shadow:0 0 8px #69ddff,0 0 22px rgba(105,221,255,.45)}

.aaa-loaded .board-wrap{background:rgba(2,7,16,.30);border-color:rgba(184,229,255,.18);backdrop-filter:blur(6px) saturate(1.4);box-shadow:0 26px 90px rgba(0,0,0,.52),0 0 32px rgba(105,221,255,.08),inset 0 0 44px rgba(105,221,255,.025);overflow:visible}
.aaa-loaded .board-wrap:before{box-shadow:-4px -4px 18px rgba(105,221,255,.22)}
.aaa-loaded .board-wrap:after{box-shadow:4px 4px 18px rgba(255,212,111,.20)}
.aaa-loaded .board{background:linear-gradient(to right,rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.055) 1px,transparent 1px),radial-gradient(circle at 50% 46%,rgba(63,167,255,.12),transparent 54%),linear-gradient(145deg,rgba(10,29,52,var(--board-alpha)),rgba(3,9,20,var(--board-alpha)));background-size:calc(100%/9) calc(100%/9),calc(100%/9) calc(100%/9),auto,auto;box-shadow:inset 0 0 42px rgba(0,0,0,.28),inset 0 0 2px rgba(255,255,255,.18)}
.aaa-loaded .board:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(100deg,transparent 0 44%,rgba(105,221,255,.045) 49%,rgba(255,255,255,.06) 50%,rgba(255,212,111,.035) 52%,transparent 58%);transform:translateX(-125%);animation:aaa-board-scan 4.8s cubic-bezier(.55,.08,.35,1) infinite}
@keyframes aaa-board-scan{0%,58%{transform:translateX(-125%)}85%,100%{transform:translateX(125%)}}
.aaa-loaded .piece{filter:drop-shadow(0 7px 8px rgba(0,0,0,.38)) drop-shadow(0 0 6px rgba(255,255,255,.035));will-change:top,left,transform,filter}
.aaa-loaded .piece:hover{filter:brightness(1.12) saturate(1.08) drop-shadow(0 7px 10px rgba(0,0,0,.42)) drop-shadow(0 0 12px rgba(105,221,255,.16))}

.aaa-loaded .score-stack>strong{background:linear-gradient(180deg,#fff,#c7f4ff 58%,#8cddff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 12px rgba(105,221,255,.25))}
.aaa-loaded .stat-card strong{filter:drop-shadow(0 0 8px rgba(105,221,255,.16))}
.aaa-loaded .stage-pip{backdrop-filter:blur(8px)}
.aaa-loaded .stage-pip.current{background:linear-gradient(135deg,#fff0a2,#ffca52);box-shadow:0 0 12px rgba(255,212,111,.48),0 0 32px rgba(255,212,111,.22)}

.aaa-loaded .button{position:relative;overflow:hidden;transition:transform .15s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease}
.aaa-loaded .button:before{content:"";position:absolute;top:-150%;bottom:-150%;left:-45%;width:24%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);transition:left .5s ease;pointer-events:none}
.aaa-loaded .button:hover:before{left:130%}
.aaa-loaded .button:hover:not(:disabled){border-color:rgba(159,229,255,.34);box-shadow:0 0 20px rgba(105,221,255,.10),inset 0 0 20px rgba(105,221,255,.035)}
.aaa-loaded .button.primary{background:linear-gradient(135deg,#f8fbff,#ccefff);box-shadow:0 0 20px rgba(105,221,255,.12)}
.aaa-loaded .mix-toggle.active{border-color:rgba(255,212,111,.5);color:#fff0ae;box-shadow:0 0 18px rgba(255,212,111,.12)}
.aaa-muted #sound{opacity:.6}

.audio-mixer{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:120;width:min(330px,calc(100vw - 28px));padding:14px;border-radius:18px;background:linear-gradient(145deg,rgba(7,16,31,.94),rgba(3,8,18,.92));border:1px solid rgba(169,225,255,.2);box-shadow:0 22px 70px rgba(0,0,0,.55),0 0 40px rgba(105,221,255,.07),inset 0 1px rgba(255,255,255,.04);backdrop-filter:blur(24px) saturate(1.35)}
.audio-mixer[hidden]{display:none}
.mixer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:9px;letter-spacing:.16em;color:#9fb4d0}.mixer-head b{color:#fff;font-size:11px}.mixer-head .ready{color:#72efb0}.mixer-head .bad{color:#ff8290}
.audio-mixer label{display:grid;grid-template-columns:58px 1fr 42px;align-items:center;gap:8px;padding:7px 0;font-size:9px;font-weight:900;color:#b6c6d9}.audio-mixer output{text-align:right;color:#fff;font-variant-numeric:tabular-nums}
.audio-mixer input[type=range]{width:100%;accent-color:#69ddff;cursor:pointer}
.mixer-chip{width:100%;margin-top:5px;border:1px solid rgba(255,255,255,.12);border-radius:11px;padding:9px;background:rgba(255,255,255,.045);color:#fff;font:900 9px/1 system-ui;letter-spacing:.12em;cursor:pointer}

body.aaa-live .game-shell{filter:saturate(1.08)}
body.aaa-live .board-wrap{box-shadow:0 26px 90px rgba(0,0,0,.52),0 0 34px rgba(105,221,255,.14),inset 0 0 46px rgba(105,221,255,.03)}
body.aaa-perfect .board-wrap{animation:aaa-perfect .42s ease-out}
body.aaa-clear:after,body.aaa-finale:after{content:"";position:fixed;inset:0;z-index:80;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.42),rgba(105,221,255,.2) 18%,rgba(255,212,111,.10) 34%,transparent 62%);animation:aaa-clear-bloom .72s ease-out forwards}
body.aaa-finale:after{animation-duration:1.6s;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.62),rgba(105,221,255,.26) 22%,rgba(255,104,199,.18) 43%,transparent 70%)}
@keyframes aaa-perfect{0%{filter:brightness(1)}24%{filter:brightness(1.22) saturate(1.18);box-shadow:0 0 65px rgba(105,221,255,.32),0 0 110px rgba(255,212,111,.14)}100%{filter:brightness(1)}}
@keyframes aaa-clear-bloom{0%{opacity:0;transform:scale(.76)}18%{opacity:1}100%{opacity:0;transform:scale(1.18)}}

body.aaa-hit-l .board-wrap{animation:aaa-kick-l .17s cubic-bezier(.2,.8,.2,1)}
body.aaa-hit-r .board-wrap{animation:aaa-kick-r .17s cubic-bezier(.2,.8,.2,1)}
body.aaa-hit-u .board-wrap{animation:aaa-kick-u .17s cubic-bezier(.2,.8,.2,1)}
body.aaa-hit-d .board-wrap{animation:aaa-kick-d .17s cubic-bezier(.2,.8,.2,1)}
body.aaa-out-hit .board-wrap{filter:brightness(1.08) saturate(1.12)}
@keyframes aaa-kick-l{0%{transform:none}38%{transform:translateX(-3px) skewX(-.22deg)}100%{transform:none}}
@keyframes aaa-kick-r{0%{transform:none}38%{transform:translateX(3px) skewX(.22deg)}100%{transform:none}}
@keyframes aaa-kick-u{0%{transform:none}38%{transform:translateY(-3px) scale(1.002)}100%{transform:none}}
@keyframes aaa-kick-d{0%{transform:none}38%{transform:translateY(3px) scale(.998)}100%{transform:none}}

.aaa-loaded .overlay{background:radial-gradient(circle at 50% 30%,rgba(24,66,112,.32),rgba(2,6,14,.88) 55%,rgba(0,2,7,.94));backdrop-filter:blur(18px) saturate(1.35)}
.aaa-loaded .overlay-card{position:relative}
.aaa-loaded .overlay-card:before{content:"";position:absolute;inset:-18px;border-radius:26px;border:1px solid rgba(143,220,255,.10);box-shadow:inset 0 0 32px rgba(105,221,255,.025);pointer-events:none}
.aaa-loaded .overlay.result-mode .overlay-card{animation:aaa-result-in .7s cubic-bezier(.16,.84,.24,1) both}
.aaa-loaded .overlay.result-mode .result-item{border-color:rgba(163,220,255,.13);background:linear-gradient(145deg,rgba(17,38,66,.52),rgba(6,12,25,.56));backdrop-filter:blur(14px)}
.aaa-loaded .share-result{box-shadow:0 0 18px rgba(105,221,255,.25),0 0 42px rgba(255,212,111,.10)!important}
@keyframes aaa-result-in{from{opacity:0;transform:translateY(14px) scale(.965);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}

@media(max-width:720px){.aaa-loaded .controls{grid-template-columns:1fr 1fr}.aaa-loaded .controls #newRun{grid-column:auto}.aaa-loaded .controls .mix-toggle{grid-column:auto}.cinema-grain{opacity:.04}}
@media(max-height:700px) and (orientation:landscape){.audio-mixer{right:8px;bottom:8px;width:280px;padding:10px}.aaa-loaded .game-header h1:after{display:none}}
@media(prefers-reduced-motion:reduce){.cinema-aurora,.cinema-lasers,.cinema-grain,.aaa-loaded .board:before,.aaa-loaded .game-header h1:after{animation:none!important}body.aaa-hit-l .board-wrap,body.aaa-hit-r .board-wrap,body.aaa-hit-u .board-wrap,body.aaa-hit-d .board-wrap{animation:none!important}}