*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--pink:#ff3fbe;--cyan:#43d8ff;--violet:#7b4cff;--ink:#080611}
html,body{margin:0;height:100%;overflow:hidden;background:#05030a;color:#fff;font-family:Arial,Helvetica,sans-serif}
button{font:inherit}
.game{position:relative;width:min(100vw,520px);height:100dvh;margin:auto;overflow:hidden;background:#080611;box-shadow:0 0 80px #bd20ff33}
header{height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#090912ee;border-bottom:1px solid #42cfff55;letter-spacing:.08em;position:relative;z-index:20}
header b{font-size:18px}header small{font-size:9px;color:#aaa3b8;letter-spacing:.2em;margin-top:2px}
.sound-toggle{position:absolute;right:10px;top:9px;width:36px;height:36px;padding:0;border:1px solid #55d8ff66;border-radius:50%;background:#0e0d19d9;color:#fff;font-size:16px;box-shadow:0 0 12px #31cfff33}
.arena{position:absolute;inset:54px 0 0;background:linear-gradient(#10061b44,#07050c22),url('./assets/brainrot-boulevard.png') center/cover;overflow:hidden;touch-action:none;isolation:isolate}
.arena:after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;box-shadow:inset 0 35px 55px #000b,inset 0 -75px 65px #0009}
.hud{position:absolute;z-index:15;top:54px;left:0;right:0;padding:9px;display:grid;grid-template-columns:1.2fr 1fr;gap:7px;background:linear-gradient(#07060fde,transparent);pointer-events:none}
.avatar{display:flex;gap:7px;align-items:center}.avatar img{width:50px;height:50px;border-radius:50%;object-fit:cover;object-position:50% 18%;border:2px solid #3cd4ff;background:#281039}
.avatar span{flex:1;display:flex;flex-direction:column;font-size:12px}.avatar i,.wallet i{height:6px;border:1px solid #3cd4ff;border-radius:9px;overflow:hidden;margin:4px 0}.avatar em,.wallet em{display:block;width:60%;height:100%;background:linear-gradient(90deg,#ff38c4,#8247ff)}
.avatar small{font-size:9px}.wallet,.stats{background:#080917dc;border:1px solid #47cfff;border-radius:9px;box-shadow:0 0 14px #218bd844}
.wallet{padding:8px;font-size:10px;display:grid;grid-template-columns:1fr auto;align-items:center}.wallet b{color:#ff4e72;font-size:13px}.wallet i{grid-column:1/-1;margin-bottom:0}.wallet em{width:100%;background:linear-gradient(90deg,#ff386a,#ff3bc4)}
.stats{grid-column:1/-1;height:32px;display:flex;align-items:center;justify-content:space-around;font-size:11px}
.mission{position:absolute;z-index:8;top:112px;left:11px;padding:8px 10px;display:flex;flex-direction:column;background:#080913e5;border:1px solid #48cdff;border-radius:9px}
.mission b{font-size:10px;color:#ffe275}.mission small{font-size:9px;margin-top:2px}
.toast{position:absolute;z-index:9;top:166px;left:50%;transform:translateX(-50%);white-space:nowrap;max-width:86%;overflow:hidden;text-overflow:ellipsis;padding:6px 10px;border:1px solid #ff41bd77;border-radius:30px;background:#090611df;font-size:10px;font-weight:bold;box-shadow:0 0 16px #ff2dbb55;transition:opacity .2s,transform .2s}
.entities,.fx-layer{position:absolute;inset:0;pointer-events:none}.entities{z-index:4}.fx-layer{z-index:8}
.player,.enemy,.pickup,.hazard{position:absolute;transform:translate(-50%,-50%)}
.player{z-index:5;width:62px;height:86px;left:50%;top:53%;filter:drop-shadow(0 6px 4px #000a) drop-shadow(0 0 5px #ff3cc755);transform-origin:50% 85%}
.player img{width:100%;height:100%;object-fit:contain;display:block;image-rendering:auto}
.player.face-left img{transform:scaleX(-1)}
.player.running{animation:runCycle .28s steps(2,end) infinite}
@keyframes runCycle{0%{transform:translate(-50%,-50%) rotate(-2deg) translateY(0) scaleY(1)}50%{transform:translate(-50%,-50%) rotate(2deg) translateY(-3px) scaleY(.97)}100%{transform:translate(-50%,-50%) rotate(-2deg) translateY(0) scaleY(1)}}
.player.attacking{animation:attackBody .18s ease-out}
@keyframes attackBody{45%{transform:translate(-50%,-50%) rotate(7deg) scale(1.06);filter:drop-shadow(0 0 16px #ffe86e) brightness(1.25)}}
.racket-visual{position:absolute;display:block;width:28px;height:54px;right:-8px;top:26px;opacity:0;transform-origin:8px 43px;pointer-events:none}
.racket-visual:before{content:"";position:absolute;left:3px;top:0;width:20px;height:26px;border:3px solid #ffe97f;border-radius:50%;background:repeating-linear-gradient(45deg,#fff0 0 4px,#fff7 4px 5px);box-shadow:0 0 8px #ffe874}
.racket-visual i{position:absolute;left:12px;top:25px;width:5px;height:29px;border-radius:4px;background:linear-gradient(#eef,#ff43bd);transform:rotate(-10deg);transform-origin:50% 0}
.player.face-left .racket-visual{right:auto;left:-8px;transform:scaleX(-1)}
.player.attacking .racket-visual{opacity:1;animation:racketSwing .18s ease-out}
@keyframes racketSwing{0%{transform:rotate(-75deg) scale(.85)}65%{transform:rotate(38deg) scale(1.12)}100%{transform:rotate(18deg) scale(1)}}
.impact-arc{position:absolute;right:-32px;top:15px;width:58px;height:58px;border-radius:50%;border:5px solid transparent;border-top-color:#fff3a6;border-right-color:#ff4fc4;opacity:0;filter:drop-shadow(0 0 7px #fff08b);transform:rotate(25deg)}
.player.face-left .impact-arc{right:auto;left:-32px;transform:scaleX(-1) rotate(25deg)}
.player.attacking .impact-arc{animation:impactArc .2s ease-out}
@keyframes impactArc{0%{opacity:0;scale:.55}35%{opacity:1}100%{opacity:0;scale:1.28}}
.enemy{z-index:4;width:62px;height:62px;filter:drop-shadow(0 5px 3px #000b);transition:filter .06s}
.enemy img{width:100%;height:100%;object-fit:contain;display:block;animation:enemyIdle .8s ease-in-out infinite alternate}
.enemy:nth-of-type(even) img{animation-delay:-.35s}
@keyframes enemyIdle{to{transform:translateY(-3px) rotate(2deg)}}
.enemy.hit img{filter:brightness(2.2) saturate(.25) drop-shadow(0 0 10px #fff)}
.enemy.dying{z-index:7;animation:enemyVanish .32s ease-out forwards}
.enemy.dying img{animation:none}
@keyframes enemyVanish{0%{opacity:1;scale:1;filter:brightness(2)}45%{opacity:1;scale:1.18;filter:brightness(2.4)}100%{opacity:0;scale:.55;filter:brightness(3) blur(2px)}}
.pickup{z-index:3;width:40px;height:40px;display:grid;place-items:center;font-size:23px;filter:drop-shadow(0 0 8px #36d9ff);animation:pickupFloat 1.05s ease-in-out infinite alternate}
.pickup:after{content:"";position:absolute;inset:-7px;border:1px solid #74ebff99;border-radius:50%;animation:pickupRing 1.2s ease-out infinite}
.pickup .glyph{position:relative;z-index:2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffffff33,#070811bb 65%);border:1px solid #fff4}
.pickup.brain .glyph{background:radial-gradient(circle,#38dfff66,#0a4c72cc);border-color:#69eeff;box-shadow:0 0 15px #2bdcff}.pickup.coin .glyph{color:#ffe35d;background:radial-gradient(circle,#ffef7d,#b86b05 72%);box-shadow:0 0 12px #ffbf38}.pickup.eggplant .glyph{background:radial-gradient(circle,#cf66ff66,#401365cc);box-shadow:0 0 12px #b93cff}.pickup.heart .glyph{background:radial-gradient(circle,#ff768866,#6b1123cc);box-shadow:0 0 12px #ff4266}.pickup.mystery-pill{filter:drop-shadow(0 0 12px #ff4fce)}.pickup.mystery-pill .glyph{background:radial-gradient(circle at 35% 30%,#fff7,#ff35bd88 45%,#4b126fcc 78%);border-color:#ff80d8;box-shadow:0 0 18px #ff39c9;font-size:24px}
@keyframes pickupFloat{to{transform:translate(-50%,-64%) scale(1.08)}}@keyframes pickupRing{0%{opacity:.9;scale:.75}100%{opacity:0;scale:1.35}}
.pickup.collected{animation:pickupCollect .24s ease-out forwards}@keyframes pickupCollect{to{opacity:0;scale:1.8;filter:brightness(2)}}
.hazard{z-index:2}
.hazard.trap{width:58px;height:58px;border-radius:50%;border:1px solid #ffdd6766;background:radial-gradient(circle,#ffdc2630 0 38%,#45151bbb 42%,#090810 72%);box-shadow:0 0 18px #ff8d2a55}
.hazard.trap:after{content:"";position:absolute;inset:-5px;border:2px dashed #ffdc5d99;border-radius:50%;animation:trapRingSpin 2.4s linear reverse infinite}
.trap-racket{position:absolute;left:50%;top:50%;width:23px;height:43px;transform:translate(-50%,-50%);transform-origin:50% 50%;animation:trapRacketSpin .82s linear infinite;filter:drop-shadow(0 0 5px #fff5a7)}
.trap-racket:before{content:"";position:absolute;left:2px;top:0;width:19px;height:24px;border:3px solid #ffe87f;border-radius:50%;background:repeating-linear-gradient(45deg,#fff0 0 4px,#fff8 4px 5px)}
.trap-racket i{position:absolute;left:10px;top:23px;width:5px;height:20px;border-radius:4px;background:linear-gradient(#f4f5ff,#ff45bd);transform:rotate(-8deg);transform-origin:50% 0}
@keyframes trapRacketSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes trapRingSpin{to{transform:rotate(360deg)}}
.hazard.cloud{width:102px;height:72px;opacity:.82;filter:drop-shadow(0 0 16px #6c20aa)}
.hazard.cloud:before{content:"☁️";position:absolute;inset:0;display:grid;place-items:center;font-size:69px;filter:grayscale(1) brightness(.46) sepia(.15) hue-rotate(220deg) saturate(3);animation:cloudPulse 1.7s ease-in-out infinite alternate}
.hazard.cloud:after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:20px;border-radius:50%;background:#8b36c540;filter:blur(8px);animation:cloudPulse 1.3s ease-in-out infinite alternate-reverse}
@keyframes cloudPulse{to{transform:scale(1.08);opacity:.66}}
.clouded .player{filter:drop-shadow(0 0 9px #a038ff) saturate(.7)}
.hit-spark{position:absolute;width:16px;height:16px;transform:translate(-50%,-50%);border-radius:50%;background:#fff6a8;box-shadow:0 0 0 6px #ff4cc566,0 0 18px #fff38a;animation:sparkOut .3s ease-out forwards}
@keyframes sparkOut{to{opacity:0;scale:2.3}}
.score-pop{position:absolute;transform:translate(-50%,-50%);font-size:12px;font-weight:900;color:#fff79b;text-shadow:0 0 8px #ff48c8;animation:scorePop .55s ease-out forwards}
@keyframes scorePop{to{opacity:0;transform:translate(-50%,-130%);scale:1.15}}
.joystick{position:absolute;z-index:12;left:18px;bottom:26px;width:110px;height:110px;border:1px solid #fff7;border-radius:50%;background:#dce4f01c;display:grid;place-items:center}
.joystick:after{content:"DRAG";position:absolute;bottom:-17px;font-size:7px;font-weight:900;letter-spacing:.18em;color:#ffffff88}
.joystick i{width:55px;height:55px;border:1px solid #fff7;border-radius:50%;background:#ccd3e24d;transform:translate(0,0);box-shadow:inset 0 0 12px #fff2}
.actions{position:absolute;z-index:12;right:10px;bottom:29px;display:flex;gap:7px;align-items:flex-end}
.actions button{position:relative;width:59px;height:59px;border-radius:50%;border:2px solid #ff50c5;background:#371026e8;color:#fff;font-size:24px;box-shadow:0 0 17px #ff2bb177}
.actions button:active{transform:scale(.92)}.actions .dash{width:67px;height:67px;border-color:#36baff;background:#0d4e87e8}.actions small{position:absolute;top:62px;left:50%;transform:translateX(-50%);font-size:8px;font-weight:900}.actions .dash small{top:70px}
.actions button:disabled{filter:grayscale(.8);opacity:.55}.actions button>i{position:absolute;z-index:-1;bottom:0;left:0;right:0;height:0;border-radius:50%;background:linear-gradient(#ff39be,#743dff)}
.racket-btn.ready{animation:racketReady 1.15s ease-in-out infinite}@keyframes racketReady{50%{box-shadow:0 0 26px #fff06799}}
.brain-mode{filter:saturate(1.4) brightness(1.08)}.brain-mode:before{content:"";position:absolute;inset:0;z-index:7;border:4px solid #54e7ff;box-shadow:inset 0 0 40px #2dd6ff;pointer-events:none}.brain-mode.overdrive{filter:saturate(1.75) brightness(1.14) contrast(1.08)}.brain-mode.overdrive:before{border-color:#ff54d8;box-shadow:inset 0 0 55px #35dcff88,0 0 28px #ff3dc988;animation:overdriveBorder .48s ease-in-out infinite alternate}.overdrive .player{filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 22px #36e5ff) drop-shadow(0 0 28px #ff42cb)}@keyframes overdriveBorder{to{opacity:.68;box-shadow:inset 0 0 75px #ff37ca77,0 0 38px #39e6ff99}}.dashing .player{filter:drop-shadow(-22px 3px 2px #35d9ffaa)}
.impact{animation:shake .18s}@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.overlay{position:absolute;z-index:30;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px;background:radial-gradient(circle at 50% 42%,#471353ef,#060409f7);backdrop-filter:blur(4px)}
.overlay>div:first-child{font-size:67px}.overlay h1{font-size:28px;margin:8px 0;color:#ff55c7;text-shadow:0 0 22px #ff2fc7}.overlay p{font-weight:900;line-height:1.45}
.overlay button,.tutorial button{border:0;border-radius:50px;margin:18px 0 12px;padding:14px 26px;background:linear-gradient(135deg,#ff35bd,#7145ff);color:#fff;font-weight:900;box-shadow:0 0 28px #ff32bd88}
.overlay>small{font-size:9px;color:#aaa3b6}.overlay section{width:90%;padding:12px;border:1px solid #3dcfff;border-radius:12px;background:#080a15cc;display:flex;flex-direction:column}.overlay section>small{font-size:10px;color:#51d4ff}.overlay section>b{font-size:34px}.overlay section>em{font-size:9px;color:#aaa3b6;font-style:normal}
.tutorial{position:absolute;z-index:31;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;background:#06040bed;backdrop-filter:blur(5px)}
.tutorial-title{font-size:20px;font-weight:1000;color:#ff55c7;text-shadow:0 0 18px #ff42c888;margin-bottom:26px}
.tutorial-demos{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:min(100%,390px)}
.tutorial-demo{min-height:180px;padding:18px 10px 14px;border:1px solid #43d8ff88;border-radius:16px;background:#0c0b18dd;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 24px #6533a527}
.tutorial-demo>b{margin-top:18px;font-size:12px;color:#ffe77d;letter-spacing:.08em}.tutorial-demo>small{margin-top:5px;font-size:9px;color:#c8c1d0}
.demo-joystick{position:relative;width:86px;height:86px;border:2px solid #ffffff66;border-radius:50%;background:#ffffff0d;display:grid;place-items:center}.demo-joystick>span{width:42px;height:42px;border-radius:50%;background:#ffffff3f;border:1px solid #fff8;animation:demoDrag 1.5s ease-in-out infinite}.demo-finger{position:absolute;font-style:normal;font-size:28px;filter:drop-shadow(0 3px 3px #000);z-index:2}.move-demo .demo-finger{left:38px;top:38px;animation:fingerDrag 1.5s ease-in-out infinite}
@keyframes demoDrag{0%,15%,100%{transform:translate(0,0)}50%,70%{transform:translate(24px,-18px)}}@keyframes fingerDrag{0%,15%,100%{transform:translate(0,0) rotate(-12deg);opacity:.55}50%,70%{transform:translate(24px,-18px) rotate(-12deg);opacity:1}}
.demo-slap{position:relative;width:86px;height:86px;border-radius:50%;border:3px solid #ff50c5;background:#371026;display:grid;place-items:center;font-size:38px;box-shadow:0 0 18px #ff2bb177}.slap-demo .demo-finger{right:-7px;bottom:-3px;animation:fingerTap 1.15s ease-in-out infinite}.demo-slap>span{position:absolute;inset:-12px;border:4px solid transparent;border-top-color:#ffe98b;border-right-color:#ff5bc8;border-radius:50%;opacity:0;animation:demoArc 1.15s ease-out infinite}
@keyframes fingerTap{0%,100%{transform:translate(0,8px) scale(1)}40%{transform:translate(-5px,-3px) scale(.88)}60%{transform:translate(-5px,-3px) scale(.88)}}@keyframes demoArc{0%,35%{opacity:0;transform:rotate(-35deg) scale(.7)}55%{opacity:1}100%{opacity:0;transform:rotate(30deg) scale(1.25)}}
.tutorial button{margin-top:28px}
.result{justify-content:center}.result .result-icon{font-size:58px!important;animation:resultPop .45s cubic-bezier(.2,1.5,.4,1)}@keyframes resultPop{from{transform:scale(.2) rotate(-16deg)}}
.result h1{margin-bottom:3px}.result p{font-size:12px;margin:4px 0 12px;max-width:320px}.result-card{width:min(92%,370px)!important;padding:14px!important;background:linear-gradient(180deg,#0e1020ee,#080913ee)!important;box-shadow:0 0 28px #3fd9ff24}
.result-card>small{font-size:9px!important;letter-spacing:.17em}.result-card>#finalScore{font-size:42px!important;line-height:1.05;color:#fff38a;text-shadow:0 0 15px #ff3fbd88}.result-card>em{margin-top:3px!important}
.result-grid{display:grid!important;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px;font-size:inherit!important}
.result-grid span{padding:7px 3px;border-radius:8px;background:#ffffff08;border:1px solid #ffffff12;display:flex;flex-direction:column}.result-grid small{font-size:7px;color:#8fdfff}.result-grid b{font-size:13px;margin-top:2px}
.best-score{font-size:9px!important;margin-top:10px;padding-top:9px;border-top:1px solid #ffffff14;color:#f0c8ff;letter-spacing:.15em}
.result-actions{font-size:inherit!important;display:flex;gap:8px;align-items:center}.result-actions button{margin:14px 0 0;padding:12px 18px}.result-actions .secondary{background:#0b0b18;border:1px solid #54d4ff;box-shadow:0 0 15px #31bfff44}
.hidden{display:none!important}
@media(max-width:380px){.joystick{width:96px;height:96px;left:10px}.actions{gap:4px;right:7px}.actions button{width:53px;height:53px}.actions .dash{width:60px;height:60px}.actions small{top:56px}.actions .dash small{top:63px}.player{width:58px;height:80px}.tutorial-demos{gap:8px}.tutorial-demo{min-height:160px;padding-left:6px;padding-right:6px}}
@media(max-height:650px){.mission{top:105px}.toast{top:155px}.player{width:55px;height:76px}.tutorial-title{margin-bottom:14px}.tutorial-demo{min-height:145px}.tutorial button{margin-top:16px}.result-card{padding:10px!important}.result .result-icon{font-size:45px!important}.result h1{font-size:24px;margin-top:3px}}


/* ===== V3.2 — STREET COLLISION / MINI-BOSS / MOBILE PERFORMANCE ===== */
.player,.enemy,.pickup,.hazard,.boss{
  left:0;top:0;
  will-change:transform;
  contain:layout style paint;
}
.player{--face:1}
.player.face-left{--face:-1}
.player.face-left img{transform:scaleX(-1)}
.player.running,.player.attacking{animation:none}
.player.running img{animation:runSpriteR .28s steps(2,end) infinite}
.player.face-left.running img{animation:runSpriteL .28s steps(2,end) infinite}
.player.attacking img{animation:attackSpriteR .18s ease-out}
.player.face-left.attacking img{animation:attackSpriteL .18s ease-out}
@keyframes runSpriteR{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-3px) rotate(2deg) scaleY(.97)}
}
@keyframes runSpriteL{
  0%,100%{transform:scaleX(-1) translateY(0) rotate(-2deg)}
  50%{transform:scaleX(-1) translateY(-3px) rotate(2deg) scaleY(.97)}
}
@keyframes attackSpriteR{
  45%{transform:rotate(7deg) scale(1.06);filter:brightness(1.25)}
}
@keyframes attackSpriteL{
  0%,100%{transform:scaleX(-1)}
  45%{transform:scaleX(-1) rotate(7deg) scale(1.06);filter:brightness(1.25)}
}

.pickup{animation:none}
.pickup .glyph{animation:pickupFloatGlyph 1.05s ease-in-out infinite alternate}
@keyframes pickupFloatGlyph{to{transform:translateY(-5px) scale(1.08)}}
.pickup.collected{animation:pickupFade .24s ease-out forwards}
.pickup.collected .glyph{animation:pickupCollectGlyph .24s ease-out forwards}
@keyframes pickupFade{to{opacity:0}}
@keyframes pickupCollectGlyph{to{transform:scale(1.8);filter:brightness(2)}}

.enemy.dying{animation:enemyFade .32s ease-out forwards}
.enemy.dying img{animation:enemyVanishSprite .32s ease-out forwards}
@keyframes enemyFade{to{opacity:0}}
@keyframes enemyVanishSprite{
  0%{transform:scale(1);filter:brightness(2)}
  45%{transform:scale(1.18);filter:brightness(2.4)}
  100%{transform:scale(.55);filter:brightness(3) blur(2px)}
}

.boss{
  z-index:5;width:92px;height:92px;
  filter:drop-shadow(0 7px 5px #000c) drop-shadow(0 0 14px #ff355f88);
  transform-origin:center;
}
.boss img{width:100%;height:100%;object-fit:contain;display:block;animation:bossIdle .65s ease-in-out infinite alternate}
.boss-crown{position:absolute;left:50%;top:-18px;transform:translateX(-50%);font-size:25px;filter:drop-shadow(0 0 6px #ffe75d);animation:bossCrown .7s ease-in-out infinite alternate}
.boss:before{content:"";position:absolute;inset:-9px;border:3px solid #ff3c6c88;border-radius:50%;box-shadow:0 0 18px #ff2a5f55;pointer-events:none}
.boss.hit img{filter:brightness(2.4) saturate(.3) drop-shadow(0 0 12px #fff)}
.boss.telegraph:before{border-color:#ffef6c;animation:bossTelegraph .15s linear infinite alternate}
.boss.telegraph img{animation:bossTelegraphBody .15s linear infinite alternate}
.boss.charging:after{content:"";position:absolute;left:50%;top:50%;width:125px;height:20px;transform:translate(-95%,-50%);background:linear-gradient(90deg,transparent,#ff325a55);filter:blur(5px);z-index:-1}
.boss.dying{animation:bossFade .52s ease-out forwards}
.boss.dying img{animation:bossVanish .52s ease-out forwards}
@keyframes bossIdle{to{transform:translateY(-4px) scale(1.03)}}
@keyframes bossCrown{to{transform:translateX(-50%) translateY(-4px) rotate(4deg)}}
@keyframes bossTelegraph{to{box-shadow:0 0 30px #ffef72,0 0 48px #ff315f}}
@keyframes bossTelegraphBody{to{transform:scale(1.08);filter:brightness(1.45)}}
@keyframes bossFade{to{opacity:0}}
@keyframes bossVanish{
  0%{transform:scale(1) rotate(0);filter:brightness(1)}
  55%{transform:scale(1.22) rotate(8deg);filter:brightness(2.2)}
  100%{transform:scale(.35) rotate(-18deg);filter:brightness(3)}
}

.boss-hud{
  position:absolute;z-index:16;top:112px;right:10px;width:168px;padding:7px 8px;
  display:grid;grid-template-columns:1fr auto;gap:3px 7px;align-items:center;
  border:1px solid #ff456f;background:#100812e8;border-radius:9px;
  box-shadow:0 0 16px #ff365844;pointer-events:none;
}
.boss-hud span{grid-column:1/-1;font-size:8px;font-weight:900;letter-spacing:.1em;color:#ff8a9f}
.boss-hud i{height:6px;border:1px solid #ff5a78;border-radius:8px;overflow:hidden}
.boss-hud em{display:block;width:100%;height:100%;background:linear-gradient(90deg,#ff3b5c,#ffbd45);transition:width .15s}
.boss-hud b{font-size:9px;color:#ffeaa0}

.zone-exit{
  position:absolute;z-index:3;width:112px;height:58px;pointer-events:none;
  border:2px solid #45e8ff;border-radius:10px;
  background:linear-gradient(180deg,#073249dc,#090716e8);
  box-shadow:0 0 22px #34ddff99,inset 0 0 16px #35d8ff33;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  animation:exitGlow .9s ease-in-out infinite alternate;
}
.zone-exit div{font-size:15px;font-weight:1000;letter-spacing:.12em;color:#ecfbff;text-shadow:0 0 8px #44e5ff}
.zone-exit small{font-size:7px;letter-spacing:.18em;color:#72f3c8;margin-top:2px}
.zone-exit i{position:absolute;bottom:-18px;font-style:normal;color:#75f7ff;animation:exitArrow .65s ease-in-out infinite alternate}
@keyframes exitGlow{to{box-shadow:0 0 34px #34ddffcc,inset 0 0 24px #35d8ff55}}
@keyframes exitArrow{to{transform:translateY(-4px)}}

.phase-banner{
  position:absolute;z-index:20;left:50%;top:43%;transform:translate(-50%,-50%);
  width:min(86%,360px);padding:14px 18px;text-align:center;
  border:1px solid #ffdc73;background:#090611ee;border-radius:12px;
  box-shadow:0 0 30px #ff3fbd55;
  animation:phaseBanner 1.5s ease-out forwards;
}
.phase-banner b{display:block;font-size:20px;letter-spacing:.09em;color:#ffe476;text-shadow:0 0 12px #ff42bb}
.phase-banner small{display:block;margin-top:4px;font-size:9px;letter-spacing:.14em;color:#9feaff}
@keyframes phaseBanner{
  0%{opacity:0;transform:translate(-50%,-40%) scale(.8)}
  15%,72%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-62%) scale(1.03)}
}

/* Mobile asset profile + cheaper visual effects. */
html.mobile-lite .arena{
  background-image:linear-gradient(#10061b3a,#07050c20),url('./assets/brainrot-boulevard-mobile.webp');
}
html.mobile-lite .overlay,html.mobile-lite .tutorial{backdrop-filter:none}
html.mobile-lite .player{filter:drop-shadow(0 4px 3px #0009)}
html.mobile-lite .enemy{filter:drop-shadow(0 3px 2px #0009)}
html.mobile-lite .boss{filter:drop-shadow(0 5px 3px #000b) drop-shadow(0 0 8px #ff355f77)}
html.mobile-lite .hazard.cloud{filter:none}
html.mobile-lite .hazard.cloud:after{filter:blur(4px)}
html.mobile-lite .pickup{filter:none}
html.mobile-lite .pickup .glyph{box-shadow:none}
html.mobile-lite .game{box-shadow:none}
html.mobile-lite .arena:after{box-shadow:inset 0 28px 38px #0008,inset 0 -55px 48px #0007}

html.low-fx .enemy img,
html.low-fx .boss img,
html.low-fx .boss-crown,
html.low-fx .pickup .glyph{animation:none}
html.low-fx .pickup:after,
html.low-fx .hazard.cloud:after,
html.low-fx .boss.charging:after{display:none}
html.low-fx .boss:before{box-shadow:none}
html.low-fx .brain-mode:before{box-shadow:none}
html.low-fx .phase-banner{box-shadow:none}

@media(max-width:420px){
  .boss-hud{top:110px;right:7px;width:148px;padding:6px}
  .boss-hud span{font-size:7px}
  .mission{max-width:165px}
  .boss{width:82px;height:82px}
  .zone-exit{width:98px;height:52px}
}


/* ===== V3.2.1 — UI POLISH / CANON CN1 / RESULT SCREEN ===== */

/* Approved Brainrot Boulevard key art is used only on the home overlay.
   A dark translucent veil preserves text contrast on small Telegram screens. */
#intro.overlay{
  background:
    linear-gradient(180deg,rgba(5,3,12,.43) 0%,rgba(8,3,17,.58) 38%,rgba(6,3,12,.72) 100%),
    radial-gradient(circle at 50% 42%,rgba(75,12,91,.20),rgba(4,3,9,.34) 72%),
    url('./assets/home-v321.webp') center center/cover no-repeat;
  backdrop-filter:none;
  text-shadow:0 2px 12px #05030c,0 0 20px #16051f;
}
#intro>div:first-child{
  font-size:56px;
  filter:drop-shadow(0 0 15px #ff3ec6aa);
}
#intro h1{
  max-width:390px;
  text-shadow:0 2px 10px #07030b,0 0 26px #ff2fc7aa;
}
#intro p{
  max-width:360px;
  padding:8px 14px;
  border-radius:14px;
  background:linear-gradient(90deg,transparent,#07050ca8 18%,#07050ca8 82%,transparent);
}
#intro>small{
  padding:5px 10px;
  border-radius:20px;
  background:#07050c8f;
  color:#d6cde0;
}

/* Canonical CN1 character supplied for V3.2.1. */
.player{
  width:72px;
  height:96px;
}
.avatar img{
  object-position:50% 28%;
  background:radial-gradient(circle at 50% 30%,#522062,#12091b 72%);
}

/* Premium result icon: neon brain instead of the flying-money placeholder. */
.result .result-icon{
  position:relative;
  width:116px;
  height:116px;
  margin-bottom:1px;
  font-size:0!important;
  animation:resultBrainPop .5s cubic-bezier(.2,1.45,.35,1);
  filter:drop-shadow(0 0 10px #ff48c6aa) drop-shadow(0 0 22px #9a43ff66);
}
.result .result-icon img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:50%;
  -webkit-mask-image:radial-gradient(circle,#000 54%,rgba(0,0,0,.92) 64%,transparent 79%);
  mask-image:radial-gradient(circle,#000 54%,rgba(0,0,0,.92) 64%,transparent 79%);
}
.result .result-icon:before{
  content:"";
  position:absolute;
  inset:13px;
  border:1px solid #ff68d899;
  border-radius:50%;
  box-shadow:0 0 18px #ff3fc899,inset 0 0 17px #6236ff55;
  animation:brainHalo 1.25s ease-in-out infinite alternate;
}
.result .result-icon i{
  position:absolute;
  width:8px;height:8px;
  background:linear-gradient(135deg,#fff1fb,#ff49c7 45%,#7148ff);
  transform:rotate(45deg);
  border:1px solid #fff7;
  box-shadow:0 0 9px #ff4dcc;
  animation:brainShard 1.5s ease-in-out infinite alternate;
}
.result .result-icon i:nth-of-type(1){left:5px;top:33px}
.result .result-icon i:nth-of-type(2){right:4px;top:51px;animation-delay:-.45s;scale:.72}
.result .result-icon i:nth-of-type(3){right:21px;bottom:8px;animation-delay:-.9s;scale:.58}
@keyframes resultBrainPop{
  from{opacity:0;transform:scale(.28) rotate(-10deg)}
  to{opacity:1;transform:scale(1) rotate(0)}
}
@keyframes brainHalo{to{transform:scale(1.07);opacity:.65}}
@keyframes brainShard{to{transform:rotate(135deg) translateY(-4px);opacity:.55}}

.result{
  justify-content:center;
  background:
    radial-gradient(circle at 50% 32%,#55145ce8 0%,#190920f0 34%,#060409fa 78%);
}
.result h1{
  margin-top:2px;
  margin-bottom:2px;
}
.result p{
  margin:5px 0 13px;
  font-size:12px;
  letter-spacing:.035em;
  color:#fff;
  text-shadow:0 0 12px #ff45c788;
}
.result-card{
  border-color:#48dfff!important;
  background:linear-gradient(180deg,#0d1020f2,#080913f4)!important;
  box-shadow:0 0 32px #38cfff22,0 12px 30px #0007!important;
}

/* Stable stacked actions on every screen width: no more SHARE SCORE offset. */
.result-actions{
  width:min(92%,370px);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  margin-top:14px;
}
.result-actions button{
  width:100%;
  min-height:50px;
  margin:0!important;
  padding:12px 18px!important;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1;
  white-space:nowrap;
}
.result-actions #againBtn{
  box-shadow:0 0 25px #ff35bd66;
}
.result-actions #shareBtn{
  background:#0a0b16;
  border:1px solid #54d4ff;
  box-shadow:0 0 15px #31bfff35;
}

html.mobile-lite #intro.overlay{
  background:
    linear-gradient(180deg,rgba(5,3,12,.47) 0%,rgba(8,3,17,.61) 40%,rgba(6,3,12,.76) 100%),
    url('./assets/home-v321-mobile.webp') center center/cover no-repeat;
}

@media(max-width:380px){
  .player{width:66px;height:90px}
  .result .result-icon{width:96px;height:96px}
  .result-actions{width:94%;gap:8px;margin-top:11px}
  .result-actions button{min-height:48px}
}
@media(max-height:650px){
  .result .result-icon{width:76px;height:76px}
  .result p{margin-bottom:8px}
  .result-actions{margin-top:9px;gap:7px}
  .result-actions button{min-height:44px}
}


/* ===== V3.2.2 — VISUAL POLISH / UNCLIPPED BOSS / CN1 INTEGRATION ===== */

/* Result screen:
   HUD remains visible above the arena, so content starts below it instead of
   being vertically centered underneath the HUD. Scrolling is allowed on very
   short Telegram WebViews. */
.result{
  justify-content:flex-start!important;
  overflow-x:hidden;
  overflow-y:auto;
  padding-top:112px!important;
  padding-bottom:max(24px,env(safe-area-inset-bottom))!important;
}
.result .result-icon{
  flex:0 0 auto;
  width:104px;
  height:104px;
  margin:0 0 7px!important;
  overflow:visible!important;
  filter:drop-shadow(0 0 8px #ff48c6bb) drop-shadow(0 0 20px #9a43ff66);
}
.result .result-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:0;
  -webkit-mask-image:none;
  mask-image:none;
  filter:drop-shadow(0 0 5px #ff68d8aa);
}
.result .result-icon:before{
  inset:8px;
  border-color:#ff68d877;
  box-shadow:0 0 20px #ff3fc888,inset 0 0 18px #6236ff44;
}
.result h1{margin-top:0!important}
.result p{margin-top:4px!important}

/* Boss:
   .boss is now the logical position/hitbox anchor. It intentionally has no
   painted containment. .boss-visual can extend outside the anchor. */
.boss{
  width:76px;
  height:76px;
  contain:layout style!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  filter:none!important;
  isolation:visible;
}
.boss:before,
.boss:after{content:none!important;display:none!important}

.boss-visual{
  position:absolute;
  left:50%;
  top:50%;
  width:126px;
  height:126px;
  transform:translate(-50%,-50%);
  overflow:visible;
  pointer-events:none;
  filter:drop-shadow(0 8px 5px #000c) drop-shadow(0 0 13px #ff355f88);
  transform-origin:50% 50%;
}
.boss-visual img{
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  overflow:visible;
}
.boss-aura{
  position:absolute;
  inset:5px;
  z-index:-1;
  border-radius:50%;
  border:2px solid #ff3c6c7d;
  background:radial-gradient(circle,#ff2e7c22 0 42%,transparent 70%);
  box-shadow:0 0 20px #ff2a5f66,0 0 42px #9c34ff44;
  animation:bossAuraPulse .72s ease-in-out infinite alternate;
}
@keyframes bossAuraPulse{
  to{transform:scale(1.08);opacity:.68;box-shadow:0 0 27px #ff2a5f88,0 0 52px #9c34ff55}
}
.boss-crown{
  top:-10px!important;
  z-index:3;
}
.boss.telegraph .boss-aura{
  border-color:#ffef6c;
  background:radial-gradient(circle,#ffef6c26 0 42%,transparent 72%);
  box-shadow:0 0 28px #ffef72aa,0 0 52px #ff315f88;
  animation:bossTelegraphAura .15s linear infinite alternate;
}
@keyframes bossTelegraphAura{
  to{transform:scale(1.12);opacity:.65}
}
.boss.charging .boss-visual:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  z-index:-2;
  width:180px;
  height:34px;
  transform:translate(-92%,-50%);
  border-radius:50%;
  background:linear-gradient(90deg,transparent,#ff325a22 25%,#ff325a88 76%,#fff0);
  filter:blur(7px);
  opacity:.88;
  pointer-events:none;
}
.boss.hit .boss-visual{
  filter:drop-shadow(0 8px 5px #000c) drop-shadow(0 0 22px #fff);
}
.boss.dying .boss-visual{
  animation:bossVisualCollapse .52s ease-out forwards;
}
@keyframes bossVisualCollapse{
  0%{transform:translate(-50%,-50%) scale(1);filter:brightness(1)}
  55%{transform:translate(-50%,-50%) scale(1.18) rotate(7deg);filter:brightness(1.7)}
  100%{transform:translate(-50%,-50%) scale(.34) rotate(-16deg);filter:brightness(2.7)}
}

/* CN1 stays exactly the same character art; only environment integration
   changes: darker grade, two-colour edge light and a wet-street contact glow. */
.player{
  contain:layout style!important;
  overflow:visible!important;
  filter:none!important;
}
.player:before{
  content:"";
  position:absolute;
  z-index:0;
  left:50%;
  bottom:-3px;
  width:54px;
  height:15px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse,#05020bbd 0 32%,#ff39c433 52%,transparent 76%);
  filter:blur(2px);
  pointer-events:none;
}
.player:after{
  content:"";
  position:absolute;
  z-index:0;
  left:50%;
  bottom:-8px;
  width:38px;
  height:24px;
  transform:translateX(-50%) scaleY(.42);
  border-radius:50%;
  background:radial-gradient(ellipse,#ff39c43d 0 20%,#744cff24 48%,transparent 76%);
  filter:blur(3px);
  opacity:.72;
  pointer-events:none;
}
.player img{
  position:relative;
  z-index:2;
  filter:
    brightness(.91)
    contrast(1.08)
    saturate(1.10)
    drop-shadow(-1px 0 1px #ff45c8b8)
    drop-shadow(1px 0 1px #46dfff9b)
    drop-shadow(0 5px 3px #0009);
}
.player .racket-visual,
.player .impact-arc{z-index:3}

/* Preserve the integration grade through attack keyframes. */
@keyframes attackSpriteR{
  0%,100%{
    transform:none;
    filter:brightness(.91) contrast(1.08) saturate(1.10)
      drop-shadow(-1px 0 1px #ff45c8b8)
      drop-shadow(1px 0 1px #46dfff9b)
      drop-shadow(0 5px 3px #0009);
  }
  45%{
    transform:rotate(7deg) scale(1.06);
    filter:brightness(1.18) contrast(1.08) saturate(1.12)
      drop-shadow(-2px 0 2px #ff45c8dd)
      drop-shadow(2px 0 2px #46dfffbb)
      drop-shadow(0 0 12px #ffe86e88);
  }
}
@keyframes attackSpriteL{
  0%,100%{
    transform:scaleX(-1);
    filter:brightness(.91) contrast(1.08) saturate(1.10)
      drop-shadow(-1px 0 1px #ff45c8b8)
      drop-shadow(1px 0 1px #46dfff9b)
      drop-shadow(0 5px 3px #0009);
  }
  45%{
    transform:scaleX(-1) rotate(7deg) scale(1.06);
    filter:brightness(1.18) contrast(1.08) saturate(1.12)
      drop-shadow(-2px 0 2px #ff45c8dd)
      drop-shadow(2px 0 2px #46dfffbb)
      drop-shadow(0 0 12px #ffe86e88);
  }
}

/* Mobile keeps the same look with cheaper light effects. */
html.mobile-lite .player img{
  filter:brightness(.92) contrast(1.06) saturate(1.07)
    drop-shadow(-1px 0 1px #ff45c87a)
    drop-shadow(0 4px 2px #0008);
}
html.mobile-lite .player:after{
  filter:blur(2px);
  opacity:.42;
}
html.mobile-lite .boss-visual{
  width:112px;
  height:112px;
  filter:drop-shadow(0 6px 4px #000b) drop-shadow(0 0 8px #ff355f70);
}
html.low-fx .boss-aura{animation:none;box-shadow:none}
html.low-fx .boss.charging .boss-visual:after{display:none}
html.low-fx .player:after{display:none}

@media(max-width:420px){
  .result{padding-top:108px!important}
  .result .result-icon{width:88px;height:88px;margin-bottom:5px!important}
  .boss{width:70px;height:70px}
}
@media(max-height:650px){
  .result{padding-top:96px!important;padding-bottom:18px!important}
  .result .result-icon{width:70px;height:70px}
  .result .result-card{padding:9px!important}
  .result-grid{margin-top:8px}
  .best-score{margin-top:7px;padding-top:6px}
  .result-actions{margin-top:8px;gap:6px}
  .result-actions button{min-height:42px}
}


/* ===== V3.2.3 — CHARACTER POLISH / GROUNDED MOTION / CLEAN RESULT BRAIN ===== */

/* The source brain artwork contains a built-in REKT word at the bottom.
   Keep the art untouched, but crop that lower label visually so CLEARED
   and REKT result titles can use the same clean brain icon. */
.result .result-icon{
  width:98px!important;
  height:92px!important;
  margin:2px 0 10px!important;
}
.result .result-icon img{
  position:absolute!important;
  inset:-2px 0 auto 0!important;
  width:100%!important;
  height:108%!important;
  object-fit:contain!important;
  object-position:50% 0!important;
  clip-path:inset(0 0 18% 0);
  transform:scale(1.04);
  transform-origin:50% 15%;
}
.result .result-icon:before{
  inset:7px 8px 15px!important;
}
.result .result-icon>i{display:none!important}
.result h1{
  position:relative;
  z-index:2;
}

/* CN1 keeps the canonical character art. The body is wrapped separately so
   animation no longer fights the world-position transform. */
.player{
  --lean:0deg;
  --dash-x:-18px;
  --dash-y:0px;
  width:64px;
  height:84px;
  transform-origin:50% 92%;
}
.player-body{
  position:absolute;
  inset:0;
  z-index:2;
  transform-origin:50% 92%;
  will-change:transform;
}
.player-body img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  transform:scaleX(1.055);
  transform-origin:50% 92%;
  animation:none!important;
}
.player.face-left .player-body img{
  transform:scaleX(-1.055)!important;
}

/* Smooth 4-phase run cycle: the player keeps a single source illustration,
   but gains readable weight transfer and direction lean. */
.player.running .player-body{
  animation:cn1RunBody .34s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes cn1RunBody{
  0%{
    transform:translateY(0) rotate(var(--lean)) scaleX(1) scaleY(1);
  }
  25%{
    transform:translateY(-3px) rotate(var(--lean)) scaleX(1.025) scaleY(.975);
  }
  50%{
    transform:translateY(.7px) rotate(var(--lean)) scaleX(.99) scaleY(1.012);
  }
  75%{
    transform:translateY(-2.4px) rotate(var(--lean)) scaleX(1.018) scaleY(.982);
  }
  100%{
    transform:translateY(0) rotate(var(--lean)) scaleX(1) scaleY(1);
  }
}
.player.moving-up .player-body{
  animation-duration:.31s;
}
.player.moving-down .player-body{
  animation-duration:.36s;
}

/* Attack overrides the locomotion animation on the body wrapper, while the
   canonical racket in the source sprite stays visually attached to CN1. */
.player.attacking .player-body{
  animation:cn1AttackBody .21s cubic-bezier(.2,.8,.25,1)!important;
}
@keyframes cn1AttackBody{
  0%{transform:translateY(0) rotate(0deg) scale(1)}
  38%{transform:translateY(-2px) rotate(5deg) scaleX(1.07) scaleY(.96)}
  72%{transform:translateY(1px) rotate(-2deg) scaleX(.985) scaleY(1.02)}
  100%{transform:translateY(0) rotate(0deg) scale(1)}
}

/* Keep the environmental grade on the real body sprite, with a slightly
   stronger cyan/magenta edge separation than 3.2.2. */
.player .player-body img{
  filter:
    brightness(.89)
    contrast(1.13)
    saturate(1.13)
    drop-shadow(-1.5px 0 1px #ff3fcaaf)
    drop-shadow(1.5px 0 1px #40ddff9c)
    drop-shadow(0 5px 3px #000b);
}

/* Grounding responds to the run rhythm instead of remaining static. */
.player.running:before{
  animation:cn1ShadowStep .34s ease-in-out infinite;
}
.player.running:after{
  animation:cn1WetReflection .34s ease-in-out infinite;
}
@keyframes cn1ShadowStep{
  0%,50%,100%{transform:translateX(-50%) scaleX(1);opacity:.95}
  25%,75%{transform:translateX(-50%) scaleX(.82);opacity:.7}
}
@keyframes cn1WetReflection{
  0%,50%,100%{transform:translateX(-50%) scale(.92,.38);opacity:.62}
  25%,75%{transform:translateX(-50%) scale(.72,.30);opacity:.34}
}

/* A low-cost duplicate silhouette is only visible during dash. It adds
   motion smear without spawning full player clones every frame. */
.motion-trail{
  position:absolute;
  inset:0;
  z-index:1;
  opacity:0;
  pointer-events:none;
  will-change:transform,opacity;
  mix-blend-mode:screen;
}
.motion-trail img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  transform:scaleX(1.055);
  filter:
    brightness(1.15)
    saturate(1.5)
    opacity(.52)
    drop-shadow(0 0 9px #ff36cc)
    drop-shadow(0 0 15px #40dfff);
}
.player.face-left .motion-trail img{
  transform:scaleX(-1.055)!important;
}
.arena.dashing .player .motion-trail{
  animation:cn1DashGhost .36s ease-out infinite;
}
@keyframes cn1DashGhost{
  0%{
    opacity:.44;
    transform:translate(var(--dash-x),var(--dash-y)) scale(.98);
  }
  70%{
    opacity:.13;
    transform:translate(var(--dash-x),var(--dash-y)) scale(1.01);
  }
  100%{
    opacity:0;
    transform:translate(0,0) scale(1.02);
  }
}

/* Small wet-neon footprints: brief enough to read as movement, not particles. */
.footstep-glow{
  position:absolute;
  width:13px;
  height:6px;
  transform:translate(-50%,-50%) rotate(-8deg);
  border-radius:50%;
  background:radial-gradient(ellipse,#fff7 0 8%,#54ddff88 22%,#ff41c95e 48%,transparent 74%);
  box-shadow:0 0 7px #4edcff99,0 0 11px #ff3fc777;
  opacity:.8;
  animation:footstepFade .46s ease-out forwards;
}
@keyframes footstepFade{
  0%{opacity:.82;scale:.76}
  45%{opacity:.46;scale:1}
  100%{opacity:0;scale:1.32}
}

/* Dash streaks are emitted only on dash start, keeping mobile DOM cost low. */
.dash-streak{
  position:absolute;
  width:42px;
  height:5px;
  transform:translate(-50%,-50%) rotate(var(--angle));
  transform-origin:center;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#57dfff99,#ff47cbdd,#fff8);
  box-shadow:0 0 8px #54ddffaa,0 0 12px #ff3ec799;
  animation:dashStreakOut .34s ease-out forwards;
}
@keyframes dashStreakOut{
  from{opacity:.9;scale:.65 1}
  to{opacity:0;scale:1.45 .45}
}

/* The extra racket graphic now behaves as a translucent energy ghost instead
   of a second solid racket. This supports the canonical racket already drawn
   in the player artwork. */
.racket-visual{
  width:30px!important;
  height:56px!important;
  opacity:0;
  filter:drop-shadow(0 0 7px #ff45ce) drop-shadow(0 0 10px #50dfff);
  mix-blend-mode:screen;
}
.racket-visual:before{
  border:2px solid #fff8d6!important;
  background:
    repeating-linear-gradient(45deg,#fff0 0 4px,#60e5ff88 4px 5px)!important;
  box-shadow:0 0 8px #ff4dcc,0 0 12px #52dfff!important;
  opacity:.78;
}
.racket-visual i{
  width:4px!important;
  background:linear-gradient(#fff7c9,#60e5ff,#ff43bd)!important;
  opacity:.78;
}
.player.attacking .racket-visual{
  opacity:.82!important;
  animation:racketEnergySwingR .21s cubic-bezier(.15,.75,.25,1)!important;
}
.player.face-left.attacking .racket-visual{
  animation:racketEnergySwingL .21s cubic-bezier(.15,.75,.25,1)!important;
}
@keyframes racketEnergySwingR{
  0%{transform:rotate(-72deg) scale(.8);opacity:.1}
  58%{transform:rotate(42deg) scale(1.14);opacity:.9}
  100%{transform:rotate(18deg) scale(1);opacity:0}
}
@keyframes racketEnergySwingL{
  0%{transform:scaleX(-1) rotate(-72deg) scale(.8);opacity:.1}
  58%{transform:scaleX(-1) rotate(42deg) scale(1.14);opacity:.9}
  100%{transform:scaleX(-1) rotate(18deg) scale(1);opacity:0}
}
.player .impact-arc{
  border-width:4px!important;
  border-top-color:#fff7bd!important;
  border-right-color:#ff4dcc!important;
  box-shadow:0 0 8px #4fe4ff77;
}

/* Low-FX/mobile preserve the motion cues but remove the costliest glow stack. */
html.mobile-lite .player .player-body img{
  filter:
    brightness(.91)
    contrast(1.10)
    saturate(1.09)
    drop-shadow(-1px 0 1px #ff43c47a)
    drop-shadow(0 4px 2px #0009);
}
html.mobile-lite .motion-trail{
  mix-blend-mode:normal;
}
html.mobile-lite .motion-trail img{
  filter:brightness(1.08) saturate(1.25) opacity(.38) drop-shadow(0 0 6px #ff42c477);
}
html.mobile-lite .footstep-glow{
  box-shadow:0 0 5px #54dfff77;
}
html.low-fx .footstep-glow{
  box-shadow:none;
  background:radial-gradient(ellipse,#58ddff66 0 22%,#ff41c944 42%,transparent 72%);
}
html.low-fx .motion-trail img{
  filter:opacity(.28);
}
html.low-fx .player.running:after{
  animation:none;
  opacity:.35;
}

/* Prevent old sprite-level animations from reappearing after the wrapper
   animation introduced in this release. */
.player.running img,
.player.attacking img,
.player.face-left.running img,
.player.face-left.attacking img{
  animation:none!important;
}

@media(max-width:420px){
  .player{width:61px;height:82px}
  .result .result-icon{width:84px!important;height:79px!important;margin-bottom:8px!important}
  .result .result-icon:before{inset:5px 7px 12px!important}
  .footstep-glow{width:11px;height:5px}
}
@media(max-height:650px){
  .result .result-icon{width:66px!important;height:61px!important;margin-bottom:5px!important}
}


/* ===== V3.2.4 — MAIN CHARACTER REWORK / TRUE SPRITES / EXIT GUIDANCE ===== */

/* CN1 now uses dedicated in-game poses rather than one static illustration.
   Sprite art includes the racket, so the old CSS racket overlay is disabled. */
.player{
  width:72px!important;
  height:92px!important;
  overflow:visible!important;
  filter:none!important;
  contain:layout style!important;
  transform-origin:50% 92%;
}
.player-body{
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  overflow:visible!important;
  transform-origin:50% 92%;
  will-change:transform;
}
.player-body img{
  position:absolute!important;
  top:0!important;
  left:50%!important;
  right:auto!important;
  bottom:auto!important;
  height:100%!important;
  width:auto!important;
  max-width:none!important;
  object-fit:unset!important;
  transform:translateX(-50%)!important;
  transform-origin:50% 92%!important;
  animation:none!important;
  filter:
    brightness(.94)
    contrast(1.10)
    saturate(1.12)
    drop-shadow(-1px 0 1px #ff44c9a8)
    drop-shadow(1px 0 1px #48dcff92)
    drop-shadow(0 5px 3px #000b)!important;
}
.player.face-left .player-body img{
  transform:translateX(-50%) scaleX(-1)!important;
}

/* Dedicated run frames supply the leg motion; CSS only adds a restrained
   weight shift so the art does not look like it is sliding over the street. */
.player.running .player-body{
  animation:cn1V324Step .27s ease-in-out infinite!important;
}
.player.moving-up .player-body{animation-duration:.24s!important}
.player.moving-down .player-body{animation-duration:.30s!important}
@keyframes cn1V324Step{
  0%,100%{transform:translateY(0) rotate(var(--lean))}
  50%{transform:translateY(-2px) rotate(var(--lean))}
}
.player.attacking .player-body{
  animation:cn1V324Slap .23s cubic-bezier(.17,.85,.25,1)!important;
}
@keyframes cn1V324Slap{
  0%{transform:translateX(-1px) translateY(0) scale(.98)}
  42%{transform:translateX(4px) translateY(-1px) scale(1.035)}
  100%{transform:translateX(0) translateY(0) scale(1)}
}
.player.face-left.attacking .player-body{
  animation-name:cn1V324SlapLeft!important;
}
@keyframes cn1V324SlapLeft{
  0%{transform:translateX(1px) translateY(0) scale(.98)}
  42%{transform:translateX(-4px) translateY(-1px) scale(1.035)}
  100%{transform:translateX(0) translateY(0) scale(1)}
}

/* The racket and swing arc are painted directly into the dedicated attack
   pose. This avoids the disconnected "second racket" look from 3.2.3. */
.player .racket-visual,
.player .impact-arc{
  display:none!important;
}
.player.swing-flash .player-body img{
  filter:
    brightness(1.16)
    contrast(1.08)
    saturate(1.24)
    drop-shadow(0 0 7px #fff3c5)
    drop-shadow(-2px 0 3px #ff45cb)
    drop-shadow(2px 0 3px #4be3ff)!important;
}

/* Ground shadow is wider/softer to anchor the new art. */
.player:before{
  bottom:-4px!important;
  width:48px!important;
  height:13px!important;
  background:radial-gradient(ellipse,#020109d9 0 34%,#ff39c42e 54%,transparent 78%)!important;
  filter:blur(2px)!important;
}
.player:after{
  bottom:-9px!important;
  width:34px!important;
  height:22px!important;
  opacity:.48!important;
  background:radial-gradient(ellipse,#48ddff2e 0 20%,#ff3fc329 46%,transparent 76%)!important;
}

/* Dash ghost follows the currently selected dash sprite. */
.motion-trail{
  inset:0!important;
  z-index:2!important;
  overflow:visible!important;
}
.motion-trail img{
  position:absolute!important;
  top:0!important;
  left:50%!important;
  height:100%!important;
  width:auto!important;
  max-width:none!important;
  transform:translateX(-50%)!important;
  filter:brightness(1.2) saturate(1.42) opacity(.5)
    drop-shadow(0 0 8px #ff40ca)
    drop-shadow(0 0 12px #46ddff)!important;
}
.player.face-left .motion-trail img{
  transform:translateX(-50%) scaleX(-1)!important;
}

/* Clear, persistent direction cue once the mini-boss is defeated. */
.exit-guide{
  position:absolute;
  z-index:24;
  left:50%;
  top:112px;
  transform:translateX(-50%);
  width:118px;
  min-height:72px;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-align:center;
  filter:drop-shadow(0 0 9px #ff42d6) drop-shadow(0 0 12px #43e4ff);
  animation:exitGuidePulse .7s ease-in-out infinite alternate;
}
.exit-guide i{
  display:block;
  font-style:normal;
  font-size:42px;
  line-height:.72;
  color:#fff;
  text-shadow:0 0 6px #fff,0 0 14px #ff42d6,0 0 22px #43e4ff;
  animation:exitGuideArrow .55s ease-in-out infinite alternate;
}
.exit-guide b{
  margin-top:5px;
  padding:4px 9px;
  border:1px solid #70ebff;
  border-radius:999px;
  background:#090713dc;
  font-size:10px;
  letter-spacing:.13em;
  box-shadow:0 0 13px #ff3fc65c;
}
.exit-guide small{
  margin-top:3px;
  font-size:7px;
  letter-spacing:.2em;
  color:#8ff5ff;
}
.exit-guide.near-exit b{
  color:#8fffcf;
  border-color:#8fffcf;
}
@keyframes exitGuidePulse{
  from{opacity:.7;transform:translateX(-50%) scale(.96)}
  to{opacity:1;transform:translateX(-50%) scale(1.04)}
}
@keyframes exitGuideArrow{
  from{transform:translateY(5px)}
  to{transform:translateY(-5px)}
}
.zone-exit:not(.hidden){
  box-shadow:
    0 0 18px #3ee6ff,
    0 0 34px #ff3ecb7a,
    inset 0 0 18px #43e8ff44!important;
}

/* Clean brain asset: no embedded REKT text, so no crop hack is needed. */
.result .result-icon{
  width:94px!important;
  height:84px!important;
  margin:8px 0 11px!important;
  overflow:visible!important;
}
.result .result-icon img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  clip-path:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  border-radius:0!important;
  transform:none!important;
}
.result .result-icon:before{
  inset:8px 10px 7px!important;
  border-radius:50%!important;
}

/* Mobile keeps the visual change obvious, but trims only costly glow. */
html.mobile-lite .player .player-body img{
  filter:
    brightness(.96)
    contrast(1.08)
    saturate(1.10)
    drop-shadow(-1px 0 1px #ff43c48a)
    drop-shadow(0 4px 2px #000a)!important;
}
html.mobile-lite .player.swing-flash .player-body img{
  filter:brightness(1.12) saturate(1.18) drop-shadow(0 0 5px #ff4dcc)!important;
}
html.low-fx .exit-guide{
  filter:none;
}
html.low-fx .exit-guide i{
  text-shadow:0 0 8px #ff42d6;
}

@media(max-width:420px){
  .player{width:68px!important;height:88px!important}
  .exit-guide{top:108px;width:106px;min-height:64px}
  .exit-guide i{font-size:36px}
  .exit-guide b{font-size:9px}
  .result .result-icon{width:82px!important;height:73px!important;margin-top:6px!important}
}
@media(max-height:650px){
  .player{width:64px!important;height:82px!important}
  .exit-guide{top:99px;min-height:56px}
  .exit-guide i{font-size:31px}
  .result .result-icon{width:68px!important;height:60px!important;margin:3px 0 6px!important}
}


/* ===== V3.2.5 — PICKUP REWORK + EXIT PRESSURE ===== */

/* Premium pickup art: Brain Fragments and Neuro Tokens replace generic glyphs. */
.pickup.brain{
  width:58px;
  height:58px;
  filter:drop-shadow(0 0 9px #ff3cd7) drop-shadow(0 0 5px #45eaff);
}
.pickup.coin{
  width:48px;
  height:48px;
  filter:drop-shadow(0 0 8px #ffc83d) drop-shadow(0 0 5px #ff43d6);
}
.pickup.brain .pickup-art,
.pickup.coin .pickup-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  transform-origin:50% 56%;
  animation:pickupArtPulse .86s ease-in-out infinite alternate;
  pointer-events:none;
}
.pickup.brain:after{
  inset:-4px;
  border-color:#ff4fd899;
  box-shadow:0 0 12px #ff33ca44;
}
.pickup.coin:after{
  inset:-4px;
  border-color:#ffd95eaa;
  box-shadow:0 0 10px #ffca3544;
}
@keyframes pickupArtPulse{
  from{transform:scale(.94) rotate(-2deg);filter:brightness(.94)}
  to{transform:scale(1.05) rotate(2deg);filter:brightness(1.12)}
}

/* Racket traps are retired visually. The same hazard slot is now a
   corrupted Brain Fragment: darker core + red warning pulse + knockback. */
.hazard.trap{
  width:64px;
  height:64px;
  border-radius:50%;
  border:1px solid #ff3d7499;
  background:radial-gradient(circle,#4a072877 0 39%,#100714dd 58%,#08060de8 75%);
  box-shadow:0 0 18px #ff2f7777,inset 0 0 18px #ff2f5538;
}
.hazard.trap:after{
  content:"";
  position:absolute;
  inset:-5px;
  border:2px solid #ff426f99;
  border-radius:50%;
  animation:corruptTrapPulse .7s ease-in-out infinite alternate;
}
.hazard.trap:before{
  content:"!";
  position:absolute;
  z-index:4;
  right:-3px;
  top:-6px;
  width:18px;
  height:18px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:12px;
  line-height:1;
  font-weight:1000;
  color:#fff;
  background:#ff285d;
  border:1px solid #ffd3df;
  box-shadow:0 0 10px #ff285d;
}
.corrupt-fragment{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  width:52px;
  height:52px;
  object-fit:contain;
  transform:translate(-50%,-50%);
  filter:hue-rotate(318deg) saturate(1.35) brightness(.82) contrast(1.13)
         drop-shadow(0 0 7px #ff225f);
  animation:corruptFragmentBeat .58s ease-in-out infinite alternate;
}
.trap-racket{display:none!important}
@keyframes corruptTrapPulse{
  from{opacity:.48;transform:scale(.86)}
  to{opacity:1;transform:scale(1.08)}
}
@keyframes corruptFragmentBeat{
  from{transform:translate(-50%,-50%) scale(.92) rotate(-3deg)}
  to{transform:translate(-50%,-50%) scale(1.03) rotate(3deg)}
}

/* Exit pressure timer lives inside the already-visible NEXT ZONE guide. */
.exit-guide .exit-countdown{
  margin-top:5px;
  min-width:42px;
  padding:4px 7px 3px;
  border-radius:8px;
  border:1px solid #ff5ccb;
  background:#0b0715e8;
  color:#fff59b;
  font-size:13px;
  font-weight:1000;
  letter-spacing:.08em;
  line-height:1;
  box-shadow:0 0 12px #ff36c96b;
  text-shadow:0 0 8px #ffce55;
  animation:exitCountdownPulse .55s ease-in-out infinite alternate;
}
@keyframes exitCountdownPulse{
  to{transform:scale(1.08);color:#fff}
}

html.mobile-lite .pickup.brain{width:52px;height:52px;filter:drop-shadow(0 0 5px #ff3cd7)}
html.mobile-lite .pickup.coin{width:43px;height:43px;filter:drop-shadow(0 0 4px #ffc83d)}
html.mobile-lite .hazard.trap{width:58px;height:58px;box-shadow:0 0 10px #ff2f7755}
html.mobile-lite .corrupt-fragment{width:47px;height:47px}
html.low-fx .pickup .pickup-art,
html.low-fx .corrupt-fragment,
html.low-fx .hazard.trap:after,
html.low-fx .exit-countdown{animation:none}


/* ===== PLATFORM FOUNDATION V1 ===== */
.platform-gate{
  z-index:80!important;
  background:
    radial-gradient(circle at 50% 38%,#51154fee,#090611fa 58%,#050309fd)!important;
}
.platform-gate-icon{
  font-size:48px!important;
  filter:drop-shadow(0 0 16px #ff42cc);
}
.platform-back{
  margin-top:12px;
  padding:11px 18px;
  border:1px solid #50dfff;
  border-radius:999px;
  color:#fff;
  background:#0a0b17dd;
  text-decoration:none;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.08em;
  box-shadow:0 0 14px #3ccfff33;
}
.platform-reward{
  margin-top:9px;
  padding:8px 9px;
  border:1px solid #ff4fc766;
  border-radius:9px;
  background:linear-gradient(90deg,#ff3eb214,#42ddff12);
  color:#fff18b;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.09em;
  text-shadow:0 0 8px #ff39c966;
}

.games-back{
  position:absolute;
  left:9px;
  top:10px;
  min-width:48px;
  height:34px;
  padding:0 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #55d8ff66;
  border-radius:999px;
  background:#0e0d19d9;
  color:#fff;
  text-decoration:none;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.08em;
  box-shadow:0 0 12px #31cfff22;
}


/* =========================================================
   V3.2.6 — Shared XP Live
   ========================================================= */
.platform-reward{
  text-align:left;
  padding:10px 11px;
}
.xp-sync-head,
.xp-profile-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.xp-sync-head span{
  color:#69e8ff;
  font-size:8px;
  letter-spacing:.14em;
}
.xp-sync-head b{
  color:#fff18b;
  font-size:12px;
  text-shadow:0 0 9px #ff3ec8aa;
}
.xp-reward-lines{
  display:grid;
  gap:3px;
  margin:7px 0 8px;
  padding:7px 0;
  border-top:1px solid #ffffff14;
  border-bottom:1px solid #ffffff14;
}
.xp-reward-lines>span{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:8px;
  letter-spacing:.03em;
  color:#f3dff8;
}
.xp-reward-lines>span>i{
  font-style:normal;
  opacity:.9;
}
.xp-reward-lines>span>b{
  color:#7fffe0;
}
.xp-reward-lines>em{
  display:block;
  margin-top:3px;
  color:#ffcf57;
  font-size:7px;
  font-style:normal;
  text-align:center;
  letter-spacing:.08em;
}
.xp-profile-row{
  color:#bdb1c8;
  font-size:7px;
  letter-spacing:.08em;
}
.xp-profile-row b{
  color:#fff;
  font-size:9px;
}
.retry-xp{
  width:100%;
  margin-top:8px;
  min-height:34px;
  border:1px solid #55ddff;
  border-radius:9px;
  background:#0c1020;
  color:#fff;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.08em;
}
.retry-xp.hidden{display:none!important}


/* =========================================================
   Bad Decisions V3.3 — Shared XP Risk Mode
   ========================================================= */
.economy-picker{
  width:min(94%,430px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:8px auto 6px;
}
.economy-mode{
  min-height:62px;
  padding:9px 8px !important;
  border-radius:12px !important;
  border:1px solid rgba(255,255,255,.15) !important;
  background:rgba(8,5,16,.68) !important;
  color:#fff !important;
  box-shadow:none !important;
  transform:none !important;
}
.economy-mode b{
  display:block;
  font-size:12px;
  letter-spacing:.055em;
}
.economy-mode small{
  display:block;
  margin-top:4px;
  font-size:9px;
  line-height:1.2;
  opacity:.72;
}
.economy-mode.active{
  border-color:#59efff !important;
  box-shadow:0 0 0 1px rgba(89,239,255,.28),0 0 16px rgba(89,239,255,.13) !important;
}
.economy-mode.risk.active{
  border-color:#ff4fcf !important;
  box-shadow:0 0 0 1px rgba(255,79,207,.28),0 0 17px rgba(255,79,207,.16) !important;
}
.economy-mode.disabled,
.economy-mode:disabled{
  opacity:.4 !important;
  filter:saturate(.45);
}
.risk-status{
  width:min(94%,430px);
  margin:2px auto 9px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  font-size:10px;
}
.risk-status b{color:#fff}
.risk-status small{
  text-align:right;
  color:#9eefff;
  font-size:8px;
  line-height:1.15;
  max-width:62%;
}
@media (max-width:420px){
  .economy-picker{gap:6px}
  .economy-mode{min-height:58px;padding:7px 6px !important}
  .economy-mode b{font-size:11px}
  .economy-mode small{font-size:8px}
  .risk-status{font-size:9px}
  .risk-status small{font-size:7.5px}
}


/* =========================================================
   CN1 Bad Decisions V3.3.1 — Combat Anti-Spam Polish
   ========================================================= */
.racket-btn.recovering{
  opacity:.68;
  filter:saturate(.72);
  transform:scale(.96);
  box-shadow:0 0 10px rgba(255,72,200,.24) !important;
}
.racket-btn.recovering small::after{
  content:" · BUFFER";
  opacity:.8;
}
.combat-pop{
  position:absolute;
  transform:translate(-50%,-50%);
  z-index:12;
  pointer-events:none;
  white-space:nowrap;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.08em;
  color:#fff3a6;
  text-shadow:0 0 8px #ff48c8,0 2px 0 #391234;
  animation:scorePop .55s ease-out forwards;
}


/* =========================================================
   CN1 Bad Decisions V3.3.2 — Combat Mobility
   ========================================================= */
.racket-btn.needs-reposition{
  opacity:.52;
  filter:saturate(.55) brightness(.82);
  transform:scale(.94);
  box-shadow:0 0 8px rgba(255,232,110,.18) !important;
}
.racket-btn.needs-reposition small::after{
  content:" · MOVE";
  color:#ffe86e;
  opacity:1;
}


/* =========================================================
   V3.5 — ROOM 2 MAP PROTOTYPE: EXIT LIQUIDITY MALL
   CSS-only environment so layout can be tuned quickly after testing.
   ========================================================= */
.room-decor{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}

body[data-room="room_02"] .arena{
  background:
    radial-gradient(ellipse at 50% 38%,rgba(103,240,255,.08),transparent 28%),
    linear-gradient(90deg,rgba(255,44,185,.07),transparent 24%,transparent 76%,rgba(59,229,255,.08)),
    linear-gradient(180deg,#100b1d 0%,#090914 44%,#100817 100%);
}
html.mobile-lite body[data-room="room_02"] .arena{
  background:
    radial-gradient(ellipse at 50% 38%,rgba(103,240,255,.06),transparent 30%),
    linear-gradient(180deg,#100b1d,#090914 44%,#100817);
}

body[data-room="room_02"] .arena:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg,transparent 0 10%,rgba(255,255,255,.025) 10.2% 10.5%,transparent 10.7% 20%),
    repeating-linear-gradient(0deg,transparent 0 8%,rgba(79,230,255,.04) 8.2% 8.45%,transparent 8.7% 16%);
  transform:perspective(350px) rotateX(2deg);
}

.mall-floor-lines{
  position:absolute;left:15%;right:15%;top:4%;bottom:3%;
  border-left:1px solid rgba(68,226,255,.16);
  border-right:1px solid rgba(255,61,196,.16);
  background:
    linear-gradient(90deg,transparent 49.65%,rgba(255,220,96,.11) 49.8% 50.2%,transparent 50.35%),
    repeating-linear-gradient(0deg,transparent 0 7.8%,rgba(255,255,255,.025) 8%,transparent 8.3%);
}

.mall-sign{
  position:absolute;
  left:50%;transform:translateX(-50%);
  text-align:center;
  border:1px solid rgba(68,227,255,.65);
  background:linear-gradient(180deg,rgba(15,34,49,.92),rgba(16,7,26,.92));
  box-shadow:0 0 18px rgba(57,220,255,.26),inset 0 0 13px rgba(255,63,197,.12);
  border-radius:8px;
}
.mall-sign-top{top:7%;width:42%;padding:5px 7px}
.mall-sign b{display:block;font-size:8px;letter-spacing:.16em;color:#8cf4ff;text-shadow:0 0 7px #25d9ff}
.mall-sign small{display:block;margin-top:2px;font-size:5px;letter-spacing:.1em;color:#ff86d7}

.mall-store{
  position:absolute;
  width:24%;
  height:12%;
  padding:8px 5px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1px solid rgba(255,75,198,.42);
  border-radius:7px;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 8px,transparent 8px 16px),
    linear-gradient(180deg,rgba(39,11,48,.94),rgba(8,9,18,.97));
  box-shadow:inset 0 -14px 20px rgba(0,0,0,.35),0 0 12px rgba(255,40,190,.12);
}
.mall-store b{font-size:7px;letter-spacing:.1em;color:#ffd86c;text-shadow:0 0 7px #ff3abd}
.mall-store small{font-size:5px;margin-top:3px;color:#7eefff;letter-spacing:.12em}
.store-a{left:-3%;top:17%;transform:rotate(-1deg)}
.store-b{right:-3%;top:30%;transform:rotate(1deg)}
.store-c{left:-3%;top:57%;transform:rotate(1deg)}
.store-d{right:-3%;top:70%;transform:rotate(-1deg)}

.mall-block{
  position:absolute;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(114,239,255,.36);
  background:
    linear-gradient(135deg,rgba(255,53,190,.13),rgba(38,219,255,.08)),
    #0a0c17e8;
  box-shadow:0 6px 18px #0009,inset 0 0 13px rgba(61,221,255,.13);
  color:#c9faff;
  text-align:center;
}
.mall-block span{font-size:5px;line-height:1.35;letter-spacing:.1em;opacity:.9}
.kiosk-block{left:42%;top:28%;width:16%;height:10%;border-radius:8px}
.escalator-block{
  left:43%;top:48%;width:14%;height:14%;
  transform:skewY(-8deg);
  background:
    repeating-linear-gradient(0deg,#141826 0 5px,#2d3442 5px 7px),
    #0a0c17;
}
.escalator-block span{transform:skewY(8deg);background:#090b14d9;padding:4px;border-radius:4px}

.mall-cart{
  position:absolute;
  font-size:22px;
  filter:grayscale(.15) drop-shadow(0 4px 4px #000a) drop-shadow(0 0 5px #ff47c566);
  transform:rotate(-15deg);
}
.cart-left{left:22%;top:72%}
.cart-right{right:21%;top:19%;transform:rotate(18deg)}

.mall-atrium-label{
  position:absolute;left:50%;top:42%;transform:translateX(-50%) rotate(-90deg);
  transform-origin:center;
  font-size:6px;font-weight:900;letter-spacing:.28em;color:rgba(116,234,255,.17);
  white-space:nowrap;
}

body[data-room="room_02"] .mission{
  border-color:#ff55c6;
  box-shadow:0 0 14px rgba(255,53,190,.14);
}
body[data-room="room_02"] .zone-exit{
  border-color:#ff55c6;
  box-shadow:0 0 24px #ff35bd77,inset 0 0 16px #38ddff22;
}
body[data-room="room_02"] .zone-exit div{color:#ffb5e8}
body[data-room="room_02"] .zone-exit small{color:#7eefff}

.room-test-btn{
  width:min(88vw,340px);
  margin-top:6px;
  border:1px solid #51e5ff !important;
  background:linear-gradient(135deg,#271040,#092a38) !important;
  box-shadow:0 0 18px rgba(64,224,255,.22);
}
.room-test-btn b,.room-test-btn small{display:block}
.room-test-btn b{font-size:12px;color:#fff}
.room-test-btn small{font-size:8px;margin-top:3px;color:#8ff4ff;letter-spacing:.05em}

@media(max-width:420px){
  .mall-store{width:25%;padding:5px 3px}
  .mall-store b{font-size:6px}
  .mall-store small{font-size:4px}
  .mall-sign-top{width:48%}
}


/* =========================================================
   CN1 Bad Decisions V3.5.1 — Room 2 Enemy Prototype
   ========================================================= */

body[data-room="room_02"] .enemy-shiller,
body[data-room="room_02"] .enemy-bagholder{
  overflow:visible;
}

body[data-room="room_02"] .enemy-tag{
  position:absolute;
  left:50%;
  top:-12px;
  transform:translateX(-50%);
  white-space:nowrap;
  padding:2px 5px;
  border-radius:7px;
  font-size:7px;
  line-height:1;
  font-weight:900;
  letter-spacing:.08em;
  color:#fff;
  background:#0b0714dc;
  border:1px solid #ffffff2e;
  pointer-events:none;
  z-index:5;
}

body[data-room="room_02"] .enemy-shiller .enemy-tag{
  color:#56f5ff;
  border-color:#56f5ff7a;
  box-shadow:0 0 8px #31eaff45;
}

body[data-room="room_02"] .enemy-bagholder{
  width:69px;
  height:69px;
}

body[data-room="room_02"] .enemy-bagholder .enemy-tag{
  color:#ffd45f;
  border-color:#ffd45f75;
  box-shadow:0 0 8px #ffd45f38;
}

body[data-room="room_02"] .enemy-mini-hp{
  position:absolute;
  left:50%;
  bottom:-6px;
  transform:translateX(-50%);
  min-width:28px;
  padding:2px 5px;
  border-radius:8px;
  background:#120916e8;
  color:#ffe16b;
  border:1px solid #ffe16b66;
  font:900 8px/1 system-ui,sans-serif;
  text-align:center;
  z-index:7;
}

body[data-room="room_02"] .enemy-warning{
  position:absolute;
  pointer-events:none;
  opacity:0;
  z-index:-1;
}

/* Shiller: cyan lane shows exactly where the shot will travel. */
body[data-room="room_02"] .enemy-shiller .enemy-warning{
  left:50%;
  top:50%;
  width:min(210px,44vw);
  height:10px;
  transform-origin:0 50%;
  transform:translate(0,-50%) rotate(var(--enemy-aim-angle,0deg));
  border-radius:999px;
  background:
    linear-gradient(90deg,
      #69f7ffdd 0%,
      #69f7ff77 55%,
      #ff4ed84a 100%);
  border:1px solid #9bfbffcc;
  box-shadow:0 0 12px #40e9ff85;
}

body[data-room="room_02"] .enemy-shiller.aiming .enemy-warning{
  opacity:.58;
  animation:shillerAim .24s ease-in-out infinite alternate;
}

body[data-room="room_02"] .enemy-shiller.firing .enemy-warning{
  opacity:1;
  height:15px;
  background:#efffff;
  box-shadow:0 0 18px #56f5ff,0 0 32px #ff44cd;
}

/* Bagholder: amber ring grows before the slam. */
body[data-room="room_02"] .enemy-bagholder .enemy-warning{
  left:50%;
  top:50%;
  width:150px;
  height:150px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:4px solid #ffd65b;
  box-shadow:0 0 16px #ffcb3c77,inset 0 0 18px #ff497d2e;
  background:radial-gradient(circle,#ffcf4b18 0 48%,#ff4e8b24 49% 58%,transparent 59%);
}

body[data-room="room_02"] .enemy-bagholder.slam-priming .enemy-warning{
  opacity:.72;
  animation:bagholderPrime .32s ease-in-out infinite alternate;
}

body[data-room="room_02"] .enemy-bagholder.slam-firing .enemy-warning{
  opacity:1;
  border-color:#fff;
  background:radial-gradient(circle,#fff7bd55 0 35%,#ff5a7a66 36% 62%,transparent 63%);
  box-shadow:0 0 28px #ffdc65,0 0 42px #ff3c8e;
}

.shiller-callout,
.bagholder-callout{
  position:absolute;
  transform:translate(-50%,-50%);
  z-index:20;
  padding:3px 7px;
  border-radius:8px;
  background:#09040de8;
  font:1000 8px/1 system-ui,sans-serif;
  letter-spacing:.06em;
  pointer-events:none;
  animation:scoreRise .7s ease-out forwards;
}
.shiller-callout{color:#62f6ff;border:1px solid #62f6ff88}
.bagholder-callout{color:#ffdc66;border:1px solid #ffdc6688}

.shiller-shot,
.bagholder-blast{
  position:absolute;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:9;
}

.shiller-shot{
  width:40px;
  height:40px;
  border-radius:50%;
  border:3px solid #7bf8ff;
  box-shadow:0 0 20px #7bf8ff,0 0 34px #ff4fd8;
  animation:enemyAttackPop .32s ease-out forwards;
}

.bagholder-blast{
  width:160px;
  height:160px;
  border-radius:50%;
  border:5px solid #fff2a7;
  box-shadow:0 0 24px #ffc94f,0 0 40px #ff3b84;
  animation:bagBlast .42s ease-out forwards;
}

@keyframes shillerAim{
  from{filter:brightness(.8);opacity:.38}
  to{filter:brightness(1.45);opacity:.78}
}
@keyframes bagholderPrime{
  from{transform:translate(-50%,-50%) scale(.82);opacity:.42}
  to{transform:translate(-50%,-50%) scale(1);opacity:.85}
}
@keyframes enemyAttackPop{
  from{transform:translate(-50%,-50%) scale(.45);opacity:1}
  to{transform:translate(-50%,-50%) scale(1.7);opacity:0}
}
@keyframes bagBlast{
  from{transform:translate(-50%,-50%) scale(.55);opacity:1}
  to{transform:translate(-50%,-50%) scale(1.18);opacity:0}
}


/* =========================================================
   CN1 Bad Decisions V3.5.2 — Room 2 Visual Combat Polish
   ========================================================= */

/* Remove the "UI square" feeling around Room 2 enemies. */
body[data-room="room_02"] .enemy-shiller,
body[data-room="room_02"] .enemy-bagholder{
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

body[data-room="room_02"] .enemy-shiller > img,
body[data-room="room_02"] .enemy-bagholder > img{
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  transform:scale(1.10);
  transform-origin:center center;
}

/* Enemy names remain readable but stop looking like boxed UI cards. */
body[data-room="room_02"] .enemy-tag{
  top:-10px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  font-size:7px !important;
  letter-spacing:.07em !important;
  text-shadow:
    0 1px 2px #000,
    0 0 5px #000,
    0 0 8px currentColor;
}

/* Bagholder HP becomes a small floating counter instead of a dark rectangle. */
body[data-room="room_02"] .enemy-mini-hp{
  bottom:-3px !important;
  min-width:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:#ffe16b !important;
  font-size:8px !important;
  text-shadow:
    0 1px 2px #000,
    0 0 5px #000,
    0 0 8px #ffcf46;
}

/* Keep the warning line readable but less like a permanent rectangle. */
body[data-room="room_02"] .enemy-shiller .enemy-warning{
  height:6px !important;
  border:0 !important;
  background:linear-gradient(
    90deg,
    rgba(111,249,255,.95) 0%,
    rgba(111,249,255,.58) 42%,
    rgba(255,78,216,.20) 100%
  ) !important;
  box-shadow:
    0 0 8px rgba(86,245,255,.95),
    0 0 16px rgba(86,245,255,.42) !important;
}

body[data-room="room_02"] .enemy-shiller.firing .enemy-warning{
  height:9px !important;
  background:linear-gradient(
    90deg,
    #ffffff 0%,
    #83fbff 35%,
    rgba(255,76,220,.25) 100%
  ) !important;
}

/* Real visible Shiller projectile.
   It travels along the exact same visual axis as the telegraph line. */
.room2-shiller-projectile{
  position:absolute;
  width:22px;
  height:8px;
  z-index:24;
  pointer-events:none;
  transform-origin:center center;
  animation:room2ShillerProjectile .38s linear forwards;
  will-change:transform,opacity;
}

.room2-shiller-projectile-core{
  position:absolute;
  inset:0;
  display:block;
  border-radius:999px;
  background:linear-gradient(90deg,#fff 0 22%,#9affff 23% 55%,#40dcff 56% 100%);
  box-shadow:
    0 0 7px #fff,
    0 0 13px #64f7ff,
    0 0 22px rgba(255,61,210,.72);
}

.room2-shiller-projectile-core::before{
  content:"";
  position:absolute;
  right:70%;
  top:50%;
  width:34px;
  height:5px;
  transform:translateY(-50%);
  border-radius:999px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,72,217,.20),
    rgba(91,239,255,.88)
  );
  filter:blur(.4px);
}

.room2-shiller-projectile-core::after{
  content:"";
  position:absolute;
  left:4px;
  top:50%;
  width:8px;
  height:8px;
  transform:translateY(-50%);
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 8px #fff,0 0 16px #72fbff;
}

@keyframes room2ShillerProjectile{
  0%{
    transform:
      translate(-50%,-50%)
      rotate(var(--shot-angle,0deg))
      translateX(0)
      scale(.82);
    opacity:1;
  }
  12%{opacity:1}
  100%{
    transform:
      translate(-50%,-50%)
      rotate(var(--shot-angle,0deg))
      translateX(min(210px,44vw))
      scale(1.06);
    opacity:.10;
  }
}

@media(max-width:420px){
  .room2-shiller-projectile{
    width:19px;
    height:7px;
  }
}


/* =========================================================
   CN1 Bad Decisions V3.5.3 — HUD + Enemy Footprint Polish
   ========================================================= */

/* Replace the large mission card with one small status capsule.
   Same treatment in Room 1 and Room 2. */
.mission,
body[data-room="room_02"] .mission{
  top:112px !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:auto !important;
  max-width:72vw !important;
  min-height:0 !important;
  padding:4px 9px !important;
  display:block !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  background:rgba(6,7,16,.64) !important;
  border:1px solid rgba(91,222,255,.50) !important;
  border-radius:999px !important;
  box-shadow:0 0 9px rgba(54,202,255,.12) !important;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

body[data-room="room_02"] .mission{
  border-color:rgba(255,83,198,.48) !important;
  box-shadow:0 0 9px rgba(255,53,190,.12) !important;
}

.mission b{
  display:block !important;
  font-size:8px !important;
  line-height:1.15 !important;
  letter-spacing:.08em !important;
  color:#fff4a3 !important;
  text-align:center !important;
  text-shadow:0 1px 2px #000 !important;
}

body[data-room="room_02"] .mission b{
  color:#fff !important;
}

/* Detailed mission text is still updated in JS but no longer takes play space. */
.mission small{
  display:none !important;
}

/* The toast can sit closer to the compact mission pill. */
.toast{
  top:143px !important;
}

/* ---------------------------------------------------------
   Circular enemy footprint
   --------------------------------------------------------- */

.enemy{
  --enemy-footprint:rgba(255,77,199,.28);
  --enemy-footprint-line:rgba(255,116,216,.35);
  overflow:visible !important;
}

/* A soft round aura makes the entity read as a character in the world,
   instead of a square image card. */
.enemy::before{
  content:"";
  position:absolute;
  left:50%;
  top:54%;
  width:88%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle,
      rgba(255,255,255,.035) 0 43%,
      var(--enemy-footprint) 58%,
      transparent 75%);
  border:1px solid var(--enemy-footprint-line);
  box-shadow:0 0 10px var(--enemy-footprint);
  opacity:.72;
}

/* Clip only the actual sprite image to a circle.
   Labels, HP, telegraphs and attack effects stay outside the circle. */
.enemy > img{
  position:relative !important;
  z-index:1 !important;
  border-radius:50% !important;
  clip-path:circle(49% at 50% 50%) !important;
  -webkit-clip-path:circle(49% at 50% 50%) !important;
  background:transparent !important;
}

/* Room-specific aura colours. */
body[data-room="room_01"] .enemy{
  --enemy-footprint:rgba(255,66,193,.23);
  --enemy-footprint-line:rgba(80,218,255,.30);
}

body[data-room="room_02"] .enemy-shiller{
  --enemy-footprint:rgba(70,235,255,.24);
  --enemy-footprint-line:rgba(92,244,255,.42);
}

body[data-room="room_02"] .enemy-bagholder{
  --enemy-footprint:rgba(255,197,62,.23);
  --enemy-footprint-line:rgba(255,216,91,.40);
}

/* Keep enemy UI/effects above the circular sprite treatment. */
body[data-room="room_02"] .enemy-tag,
body[data-room="room_02"] .enemy-mini-hp,
body[data-room="room_02"] .enemy-warning{
  z-index:6 !important;
}

@media(max-height:650px){
  .mission,
  body[data-room="room_02"] .mission{
    top:105px !important;
  }
  .toast{
    top:136px !important;
  }
}


/* =========================================================
   CN1 Bad Decisions V3.5.4 — Mall Entrance Transition
   ========================================================= */

/* Exterior street approach before the validated mall interior. */
body[data-room="room_02"][data-room-scene="entrance"] .arena{
  background:
    linear-gradient(180deg,rgba(5,4,15,.20),rgba(6,4,13,.42)),
    url('./assets/brainrot-boulevard.png') center/cover !important;
}

body[data-room="room_02"][data-room-scene="entrance"] .arena:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,48,187,.10),transparent 22%,transparent 78%,rgba(55,218,255,.10)),
    linear-gradient(180deg,rgba(8,7,18,.05),rgba(5,4,13,.24));
  transform:none;
}

.mall-entry-road{
  position:absolute;
  left:20%;
  right:20%;
  top:23%;
  bottom:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.04),transparent 7%,transparent 93%,rgba(255,255,255,.04)),
    repeating-linear-gradient(180deg,transparent 0 11%,rgba(82,228,255,.035) 11.2% 11.5%,transparent 11.8% 22%);
  clip-path:polygon(19% 0,81% 0,100% 100%,0 100%);
  opacity:.9;
}

.mall-entry-sidewalk{
  position:absolute;
  top:23%;
  bottom:0;
  width:20%;
  opacity:.38;
  background:
    repeating-linear-gradient(180deg,rgba(255,255,255,.08) 0 1px,transparent 1px 26px),
    linear-gradient(180deg,#28202f,#13111b);
}
.mall-entry-sidewalk.left{left:0;clip-path:polygon(0 0,100% 0,76% 100%,0 100%)}
.mall-entry-sidewalk.right{right:0;clip-path:polygon(0 0,100% 0,100% 100%,24% 100%)}

.mall-entry-facade{
  position:absolute;
  left:10%;
  right:10%;
  top:5%;
  height:24%;
  border:1px solid rgba(109,231,255,.38);
  border-bottom:2px solid rgba(255,59,192,.46);
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 13px,transparent 13px 26px),
    linear-gradient(180deg,#151222 0%,#0d0b16 58%,#171020 100%);
  box-shadow:0 7px 24px rgba(0,0,0,.62),0 0 22px rgba(255,54,189,.13);
}

.mall-entry-sign{
  position:absolute;
  left:50%;
  top:10%;
  transform:translateX(-50%);
  width:58%;
  text-align:center;
  padding:7px 7px 6px;
  border:1px solid #69ebff99;
  border-radius:7px;
  background:#090a13e8;
  box-shadow:0 0 16px #3be9ff44,0 0 22px #ff3cbe33;
}
.mall-entry-sign b{
  display:block;
  color:#83f5ff;
  font-size:9px;
  letter-spacing:.14em;
  text-shadow:0 0 8px #26e4ff;
}
.mall-entry-sign small{
  display:block;
  margin-top:3px;
  color:#ff83d6;
  font-size:5px;
  letter-spacing:.12em;
}

.mall-entry-window{
  position:absolute;
  top:47%;
  width:27%;
  height:41%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,73,197,.32);
  background:
    linear-gradient(180deg,rgba(48,219,255,.09),rgba(255,48,184,.06)),
    #070911;
  box-shadow:inset 0 0 14px rgba(54,222,255,.10);
}
.mall-entry-window.left{left:5%}
.mall-entry-window.right{right:5%}
.mall-entry-window span{
  font-size:6px;
  color:#ffd675;
  letter-spacing:.09em;
  text-shadow:0 0 7px #ff36bf;
}

.mall-entry-door{
  position:absolute;
  left:42%;
  width:16%;
  bottom:-1%;
  height:49%;
  border:1px solid rgba(103,239,255,.72);
  background:linear-gradient(90deg,rgba(45,222,255,.11) 49%,rgba(255,255,255,.5) 49.5% 50.5%,rgba(255,62,190,.10) 51%);
  box-shadow:0 0 17px rgba(54,226,255,.30),inset 0 0 16px rgba(255,53,186,.14);
}
.mall-entry-door i{
  position:absolute;
  top:10%;
  bottom:8%;
  width:1px;
  background:rgba(111,238,255,.28);
}
.mall-entry-door i:first-child{left:25%}
.mall-entry-door i:nth-child(2){right:25%}
.mall-entry-door b{
  position:absolute;
  left:50%;
  bottom:7%;
  transform:translateX(-50%);
  color:#a9f9ff;
  font-size:5px;
  letter-spacing:.14em;
  text-shadow:0 0 6px #44eaff;
}

.mall-entry-neon{
  position:absolute;
  padding:3px 5px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:4px;
  background:#080813cf;
  font-size:5px;
  font-weight:900;
  letter-spacing:.12em;
}
.mall-entry-neon-a{left:8%;top:36%;color:#ff6dce;transform:rotate(-4deg);box-shadow:0 0 10px #ff3fbd44}
.mall-entry-neon-b{right:7%;top:41%;color:#80f5ff;transform:rotate(4deg);box-shadow:0 0 10px #45e8ff44}

.mall-entry-cart{
  position:absolute;
  font-size:19px;
  filter:drop-shadow(0 4px 5px #000b) drop-shadow(0 0 5px #ff4ac766);
}
.mall-entry-cart-a{left:25%;top:49%;transform:rotate(-13deg)}
.mall-entry-cart-b{right:25%;top:65%;transform:rotate(14deg)}

.mall-entry-puddle{
  position:absolute;
  width:17%;
  height:3.5%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(79,232,255,.18),rgba(255,56,190,.07) 48%,transparent 72%);
  filter:blur(.2px);
}
.puddle-a{left:39%;top:54%;transform:rotate(-6deg)}
.puddle-b{left:48%;top:76%;transform:rotate(8deg)}

body[data-room="room_02"][data-room-scene="entrance"] .mission{
  border-color:#5ce8ff !important;
  box-shadow:0 0 10px rgba(65,226,255,.12) !important;
}

.mall-continue-btn{
  width:100%;
  margin-bottom:8px;
  border:1px solid #59e9ff !important;
  background:linear-gradient(135deg,#321041,#082d3a) !important;
  box-shadow:0 0 20px rgba(57,226,255,.20),0 0 15px rgba(255,53,190,.16);
}
.mall-continue-btn b,.mall-continue-btn small{display:block}
.mall-continue-btn b{font-size:12px}
.mall-continue-btn small{margin-top:3px;font-size:8px;color:#9cf7ff;letter-spacing:.05em}

@media(max-width:420px){
  .mall-entry-sign{width:64%}
  .mall-entry-sign b{font-size:8px}
  .mall-entry-cart{font-size:17px}
}


/* =========================================================
   CN1 Bad Decisions V3.5.5 — Automatic Mall Walk Transition
   ========================================================= */

body.mall-auto-walk .joystick,
body.mall-auto-walk .actions{
  opacity:.16 !important;
  pointer-events:none !important;
  transition:opacity .22s ease;
}

body.mall-auto-walk .mission{
  border-color:rgba(107,239,255,.62) !important;
  background:rgba(8,9,17,.70) !important;
  box-shadow:0 0 14px rgba(72,228,255,.16) !important;
}

body.mall-transition-pending .actions,
body.mall-transition-pending .joystick{
  pointer-events:none !important;
  opacity:.12 !important;
}

.mall-scene-fade{
  position:absolute;
  inset:-2px;
  z-index:80;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 34%,rgba(106,244,255,.38),transparent 34%),
    linear-gradient(180deg,rgba(255,62,196,.18),rgba(5,5,12,.94));
  animation:mallSceneFade .50s ease-out forwards;
}

@keyframes mallSceneFade{
  0%{opacity:0}
  24%{opacity:.96}
  48%{opacity:.82}
  100%{opacity:0}
}


/* =========================================================
   CN1 Bad Decisions V3.5.6 — Grand Mall Entrance Polish
   Bigger focal entrance + shorter cinematic approach.
   ========================================================= */

body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-road{
  top:38% !important;
  left:17% !important;
  right:17% !important;
  clip-path:polygon(26% 0,74% 0,100% 100%,0 100%) !important;
}

body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-sidewalk{
  top:38% !important;
  width:18% !important;
}

body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-facade{
  left:4% !important;
  right:4% !important;
  top:1.5% !important;
  height:40% !important;
  border:1px solid rgba(117,240,255,.54) !important;
  border-bottom:3px solid rgba(255,61,194,.68) !important;
  border-radius:7px 7px 2px 2px;
  overflow:visible;
  background:
    linear-gradient(90deg,rgba(255,67,199,.08),transparent 18%,transparent 82%,rgba(74,229,255,.08)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.032) 0 14px,transparent 14px 28px),
    linear-gradient(180deg,#1b1426 0%,#0d0b16 64%,#171020 100%) !important;
  box-shadow:
    0 10px 32px rgba(0,0,0,.78),
    0 0 30px rgba(51,227,255,.18),
    0 0 38px rgba(255,58,190,.13) !important;
}

body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-roof-glow{
  position:absolute;
  left:7%;
  right:7%;
  top:-2px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#ff55ca,#94f9ff,#ff55ca,transparent);
  box-shadow:0 0 12px #58edff,0 0 18px rgba(255,73,200,.58);
}

body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-sign{
  top:6% !important;
  width:76% !important;
  padding:9px 10px 8px !important;
  border:1px solid rgba(120,241,255,.95) !important;
  border-radius:9px !important;
  background:linear-gradient(180deg,rgba(10,10,20,.97),rgba(17,7,26,.95)) !important;
  box-shadow:
    0 0 14px rgba(75,235,255,.76),
    0 0 27px rgba(255,55,191,.42),
    inset 0 0 13px rgba(255,255,255,.05) !important;
}

body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-sign b{
  font-size:13px !important;
  letter-spacing:.11em !important;
  color:#b6fbff !important;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #37e9ff,
    0 0 18px rgba(255,61,194,.48) !important;
}

body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-sign small{
  margin-top:4px !important;
  font-size:6px !important;
  color:#ff8ad8 !important;
  letter-spacing:.15em !important;
}

body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-canopy{
  position:absolute;
  left:25%;
  right:25%;
  top:33%;
  height:11%;
  display:flex;
  align-items:center;
  justify-content:center;
  clip-path:polygon(4% 0,96% 0,100% 100%,0 100%);
  border-top:1px solid rgba(255,104,215,.78);
  background:linear-gradient(180deg,rgba(255,55,193,.20),rgba(59,229,255,.08));
  box-shadow:0 5px 15px rgba(0,0,0,.58),0 0 10px rgba(255,63,197,.26);
}

body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-canopy span{
  color:#ffd86f;
  font-size:5px;
  font-weight:900;
  letter-spacing:.16em;
  text-shadow:0 0 7px rgba(255,71,196,.92);
}

body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-window{
  top:51% !important;
  width:20% !important;
  height:38% !important;
  border-color:rgba(255,78,202,.42) !important;
}

body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-window.left{
  left:4% !important;
}

body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-window.right{
  right:4% !important;
}

body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-window span{
  font-size:7px !important;
}

body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-column{
  position:absolute;
  top:43%;
  bottom:0;
  width:2.2%;
  border:1px solid rgba(120,240,255,.22);
  background:linear-gradient(90deg,#11131d,#28202f,#11131d);
  box-shadow:0 0 8px rgba(63,224,255,.18);
}
body[data-room="room_02"][data-room-scene="entrance"] .column-left{left:29%}
body[data-room="room_02"][data-room-scene="entrance"] .column-right{right:29%}

body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-door-glow{
  position:absolute;
  left:30%;
  right:30%;
  top:42%;
  bottom:-5%;
  border-radius:18% 18% 5% 5%;
  background:radial-gradient(ellipse at 50% 54%,
    rgba(169,252,255,.34),
    rgba(73,225,255,.16) 34%,
    rgba(255,62,198,.10) 56%,
    transparent 76%);
  filter:blur(4px);
  animation:mallDoorPulse 1.4s ease-in-out infinite alternate;
  pointer-events:none;
}

body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-door{
  left:32% !important;
  width:36% !important;
  bottom:-1.5% !important;
  height:59% !important;
  border:2px solid rgba(124,246,255,.92) !important;
  border-radius:10px 10px 2px 2px;
  overflow:hidden;
  background:
    linear-gradient(90deg,
      rgba(57,228,255,.17) 0 48.8%,
      rgba(255,255,255,.86) 49.4% 50.6%,
      rgba(255,65,195,.15) 51.2% 100%) !important;
  box-shadow:
    0 0 14px rgba(86,241,255,.86),
    0 0 30px rgba(61,225,255,.38),
    0 0 36px rgba(255,55,191,.22),
    inset 0 0 20px rgba(255,255,255,.08) !important;
}

body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-door::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.13),transparent 24%),
    repeating-linear-gradient(90deg,transparent 0 24%,rgba(255,255,255,.08) 24.4% 24.8%,transparent 25.2% 50%);
  pointer-events:none;
}

body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-door i{
  top:6% !important;
  bottom:5% !important;
  background:rgba(145,249,255,.45) !important;
}

body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-door b{
  bottom:12% !important;
  font-size:8px !important;
  letter-spacing:.19em !important;
  color:#fff !important;
  text-shadow:0 0 5px #fff,0 0 10px #5bf1ff,0 0 15px #ff4cc7 !important;
}

body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-door small{
  position:absolute;
  left:50%;
  bottom:4%;
  transform:translateX(-50%);
  white-space:nowrap;
  color:#ff8bd9;
  font-size:4.5px;
  font-weight:900;
  letter-spacing:.14em;
  text-shadow:0 0 6px #ff44bd;
}

body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-neon-a{
  left:4% !important;
  top:45% !important;
}
body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-neon-b{
  right:3% !important;
  top:48% !important;
}

body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-cart-a{
  left:20% !important;
  top:61% !important;
}
body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-cart-b{
  right:20% !important;
  top:70% !important;
}

body[data-room="room_02"][data-room-scene="entrance"] .puddle-a{
  left:40% !important;
  top:61% !important;
}
body[data-room="room_02"][data-room-scene="entrance"] .puddle-b{
  left:49% !important;
  top:79% !important;
}

@keyframes mallDoorPulse{
  0%{opacity:.56;transform:scale(.98)}
  100%{opacity:1;transform:scale(1.025)}
}

@media(max-width:420px){
  body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-sign{
    width:80% !important;
  }
  body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-sign b{
    font-size:11px !important;
  }
  body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-door{
    left:30% !important;
    width:40% !important;
  }
  body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-door-glow{
    left:28% !important;
    right:28% !important;
  }
}


/* =========================================================
   CN1 Bad Decisions V3.5.7
   Room 2 Entrance Cinematic + Zero-Flash Room Swap
   ========================================================= */

.room-transition-curtain{
  position:absolute;
  inset:0;
  z-index:999;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  pointer-events:auto;
  opacity:1;
  background:
    radial-gradient(circle at 50% 48%,rgba(255,62,195,.16),transparent 31%),
    linear-gradient(180deg,#05040b 0%,#090611 54%,#030309 100%);
}

.room-transition-curtain.hidden{display:none !important}

.room-transition-curtain.reveal{
  pointer-events:none;
  animation:roomCurtainReveal .50s ease forwards;
}

.room-transition-noise{
  position:absolute;
  inset:-12%;
  opacity:.18;
  background:
    repeating-linear-gradient(0deg,transparent 0 3px,rgba(108,239,255,.05) 3px 4px),
    repeating-linear-gradient(90deg,transparent 0 9px,rgba(255,62,194,.035) 9px 10px);
  animation:roomTransitionNoise .24s steps(2,end) infinite;
}

.room-transition-card{
  position:relative;
  width:min(78%,310px);
  text-align:center;
  padding:18px 14px 16px;
  border:1px solid rgba(113,241,255,.65);
  border-radius:11px;
  background:rgba(7,7,15,.90);
  box-shadow:
    0 0 20px rgba(73,230,255,.23),
    0 0 32px rgba(255,55,191,.18);
}

.room-transition-card small,
.room-transition-card b,
.room-transition-card span{display:block}

.room-transition-card small{
  color:#ff82d5;
  font-size:7px;
  font-weight:900;
  letter-spacing:.18em;
}

.room-transition-card b{
  margin-top:7px;
  color:#fff;
  font-size:18px;
  letter-spacing:.07em;
  text-shadow:0 0 8px rgba(255,255,255,.55),0 0 14px rgba(255,56,193,.38);
}

.room-transition-card span{
  margin-top:9px;
  color:#8ff7ff;
  font-size:8px;
  font-weight:900;
  letter-spacing:.15em;
  text-shadow:0 0 8px #36e7ff;
}

body.room-scene-locked .arena{
  overflow:hidden !important;
}

@keyframes roomCurtainReveal{
  0%{opacity:1;transform:scale(1)}
  62%{opacity:.96}
  100%{opacity:0;transform:scale(1.025)}
}

@keyframes roomTransitionNoise{
  0%{transform:translate(0,0)}
  50%{transform:translate(1.5%,-1%)}
  100%{transform:translate(-1%,1.2%)}
}

/* Entrance now reads as a destination, not distant background. */
body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-facade{
  transform-origin:50% 14%;
  transition:transform .34s ease,filter .34s ease;
}

body.mall-approach-mid[data-room="room_02"][data-room-scene="entrance"] .mall-entry-facade{
  transform:scale(1.045);
}

body.mall-approach-close[data-room="room_02"][data-room-scene="entrance"] .mall-entry-facade{
  transform:scale(1.085);
  filter:brightness(1.06);
}

.mall-entry-crown{
  position:absolute;
  left:50%;
  top:-7%;
  transform:translateX(-50%);
  width:57%;
  padding:3px 5px;
  border:1px solid rgba(255,82,205,.58);
  border-radius:999px;
  text-align:center;
  color:#ff91db;
  background:#090711e8;
  font-size:4.6px;
  font-weight:900;
  letter-spacing:.15em;
  text-shadow:0 0 7px #ff42bf;
  box-shadow:0 0 12px rgba(255,57,190,.22);
}

.mall-entry-window i{
  position:absolute;
  left:0;
  right:0;
  bottom:8%;
  font-style:normal;
  color:#78f5ff;
  font-size:4px;
  letter-spacing:.10em;
  text-shadow:0 0 6px #3ce8ff;
}

.mall-entry-arrow{
  position:absolute;
  left:50%;
  bottom:-9%;
  transform:translateX(-50%) rotate(180deg);
  color:#b7fcff;
  font-size:16px;
  line-height:1;
  text-shadow:0 0 8px #5ff2ff,0 0 17px #ff4ac7;
  animation:mallEntryArrow 1s ease-in-out infinite alternate;
}

@keyframes mallEntryArrow{
  from{opacity:.48;transform:translate(-50%,0) rotate(180deg)}
  to{opacity:1;transform:translate(-50%,5px) rotate(180deg)}
}

/* Actual two-panel door treatment. */
.mall-entry-door .mall-door-panel{
  position:absolute;
  top:0;
  bottom:0;
  width:50%;
  z-index:0;
  background:
    linear-gradient(180deg,rgba(170,253,255,.13),transparent 27%),
    linear-gradient(90deg,rgba(50,218,255,.15),rgba(8,9,17,.42));
  border-color:rgba(132,248,255,.42);
  transition:transform .42s cubic-bezier(.2,.75,.2,1),opacity .36s ease;
}

.mall-entry-door .mall-door-left{
  left:0;
  border-right:1px solid rgba(211,255,255,.56);
  transform-origin:left center;
}

.mall-entry-door .mall-door-right{
  right:0;
  border-left:1px solid rgba(211,255,255,.56);
  transform-origin:right center;
  background:
    linear-gradient(180deg,rgba(255,126,218,.10),transparent 27%),
    linear-gradient(270deg,rgba(255,51,190,.12),rgba(8,9,17,.42));
}

body.mall-doors-ready .mall-entry-door .mall-door-left{
  transform:translateX(-72%);
  opacity:.35;
}

body.mall-doors-ready .mall-entry-door .mall-door-right{
  transform:translateX(72%);
  opacity:.35;
}

body.mall-doors-ready .mall-entry-door{
  box-shadow:
    0 0 22px rgba(159,252,255,.95),
    0 0 43px rgba(73,229,255,.55),
    0 0 52px rgba(255,55,191,.34),
    inset 0 0 28px rgba(255,255,255,.20) !important;
}

body.mall-doors-ready .mall-entry-door-glow{
  opacity:1 !important;
  transform:scale(1.12);
}

body.mall-approach-close .mall-entry-sign b{
  text-shadow:
    0 0 5px #fff,
    0 0 12px #37e9ff,
    0 0 22px rgba(255,61,194,.72) !important;
}

@media(max-width:420px){
  .room-transition-card{width:82%}
  .room-transition-card b{font-size:16px}
  .mall-entry-crown{width:63%;font-size:4px}
}


/* =========================================================
   CN1 Bad Decisions V3.5.8 — Illustrated Mall Door Polish
   ========================================================= */

body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-door{
  overflow:visible !important;
  border:0 !important;
  border-radius:7px 10px 3px 5px !important;
  background:
    radial-gradient(circle at 50% 44%,rgba(123,249,255,.17),transparent 42%),
    linear-gradient(90deg,
      rgba(44,216,255,.14) 0 48.8%,
      rgba(255,255,255,.30) 49.3% 50.7%,
      rgba(255,68,199,.12) 51.2% 100%) !important;
  box-shadow:
    0 0 13px rgba(90,244,255,.82),
    0 0 27px rgba(64,225,255,.33),
    0 0 32px rgba(255,58,193,.19) !important;
  transform:rotate(-.25deg);
}

body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-door::after{
  content:"";
  position:absolute;
  inset:-3px -4px -4px -3px;
  z-index:5;
  pointer-events:none;
  border:3px solid rgba(8,8,14,.92);
  border-radius:8px 11px 4px 6px;
  clip-path:polygon(
    1% 3%,17% 1%,34% 2%,51% 0%,68% 2%,84% 1%,99% 3%,
    98% 22%,100% 43%,98% 63%,100% 83%,98% 99%,
    80% 98%,61% 100%,41% 98%,22% 100%,2% 98%,
    1% 79%,2% 61%,0% 42%,2% 22%
  );
  box-shadow:
    0 0 0 1px rgba(106,242,255,.55),
    0 0 11px rgba(76,229,255,.44);
}

.mall-door-art{
  position:absolute;
  inset:-4px -5px -5px -4px;
  width:calc(100% + 9px);
  height:calc(100% + 9px);
  z-index:4;
  overflow:visible;
  pointer-events:none;
  filter:drop-shadow(0 0 4px rgba(76,232,255,.22));
}
.mall-door-art path,.mall-door-art circle{
  vector-effect:non-scaling-stroke;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.door-sketch-frame{stroke:#0b0910;stroke-width:6.5}
.door-sketch-center{stroke:rgba(15,10,19,.95);stroke-width:5.5}
.door-sketch-glass{stroke:rgba(133,246,255,.68);stroke-width:2.2;fill:rgba(51,218,255,.035)}
.door-crack{stroke:rgba(224,255,255,.72);stroke-width:1.45;opacity:.75}
.door-grime{stroke:rgba(5,4,9,.62);stroke-width:4;opacity:.62}
.door-handle{stroke:#09070d;stroke-width:4.5;fill:#ff72cd}

body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-door::before{
  z-index:1 !important;
  background:
    radial-gradient(circle at 24% 31%,rgba(255,255,255,.12) 0 1%,transparent 1.4%),
    radial-gradient(circle at 73% 57%,rgba(255,255,255,.09) 0 1.4%,transparent 1.8%),
    linear-gradient(108deg,transparent 0 26%,rgba(255,255,255,.07) 27% 28%,transparent 29% 58%,rgba(255,255,255,.05) 59% 60%,transparent 61%),
    repeating-linear-gradient(180deg,transparent 0 17px,rgba(4,4,8,.09) 17px 19px,transparent 19px 32px) !important;
  opacity:.78;
}

.mall-entry-door .mall-door-panel{
  top:3% !important;
  bottom:3% !important;
  width:49.4% !important;
  border:0 !important;
  filter:saturate(1.1);
}
.mall-entry-door .mall-door-left{
  left:1.2% !important;
  clip-path:polygon(2% 1%,98% 3%,100% 98%,0 100%);
}
.mall-entry-door .mall-door-right{
  right:1.2% !important;
  clip-path:polygon(1% 3%,98% 1%,100% 100%,0 98%);
}

.mall-door-sticker{
  position:absolute;
  z-index:8;
  padding:2px 3px;
  border:2px solid #08070d;
  border-radius:2px;
  font-weight:1000;
  line-height:1;
  box-shadow:0 2px 0 rgba(0,0,0,.5);
  pointer-events:none;
  white-space:nowrap;
}
.sticker-a{
  left:8%;top:32%;color:#111;background:#ffdd61;font-size:4.3px;
  transform:rotate(-8deg);
}
.sticker-b{
  right:11%;top:24%;color:#fff;background:#ff46b9;font-size:6px;
  transform:rotate(9deg);text-shadow:0 1px #8d175f;
}
.sticker-c{
  right:6%;top:57%;color:#051017;background:#7bf5ff;font-size:3.9px;
  transform:rotate(-5deg);
}

.mall-door-tape{
  position:absolute;
  z-index:7;
  width:19%;
  height:4%;
  background:rgba(238,220,155,.52);
  border:1px solid rgba(50,42,25,.43);
  box-shadow:0 1px 2px rgba(0,0,0,.45);
  pointer-events:none;
}
.tape-a{left:17%;top:69%;transform:rotate(24deg)}
.tape-b{right:16%;top:43%;transform:rotate(-31deg)}

body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-door b{
  z-index:9 !important;
  padding:2px 5px;
  border:2px solid #08070e;
  background:#ff5fc5;
  color:#fff !important;
  transform:translateX(-50%) rotate(-1.5deg);
  box-shadow:2px 2px 0 rgba(7,6,11,.72);
  text-shadow:1px 1px 0 #6f164e,0 0 7px #ff74d3 !important;
}
body[data-room="room_02"][data-room-scene="entrance"] .mall-entry-door small{
  z-index:9 !important;
  padding:1px 4px;
  background:#0b1018d9;
  border:1px solid rgba(115,240,255,.56);
  transform:translateX(-50%) rotate(.8deg);
}

body.mall-doors-ready .mall-entry-door{
  box-shadow:
    0 0 20px rgba(169,252,255,.98),
    0 0 40px rgba(73,229,255,.56),
    0 0 48px rgba(255,55,191,.34) !important;
}
body.mall-doors-ready .mall-door-art{
  filter:
    drop-shadow(0 0 5px rgba(136,249,255,.54))
    drop-shadow(0 0 8px rgba(255,72,203,.22));
}
body.mall-doors-ready .mall-entry-door .mall-door-left{
  transform:translateX(-73%) rotate(-1.5deg) !important;
}
body.mall-doors-ready .mall-entry-door .mall-door-right{
  transform:translateX(73%) rotate(1.5deg) !important;
}

@media(max-width:420px){
  .sticker-a{font-size:3.8px}
  .sticker-b{font-size:5.2px}
  .sticker-c{font-size:3.4px}
}


/* =========================================================
   CN1 Bad Decisions V3.6
   Room 2 Visual Final + Underground Teaser
   ========================================================= */

/* Rich vector illustration layer: map art, not collision geometry. */
.mall-final-map-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  opacity:.98;
  pointer-events:none;
}

.mall-art-tiles path{
  fill:none;
  stroke:rgba(125,239,255,.22);
  stroke-width:.18;
  vector-effect:non-scaling-stroke;
}

.mall-art-shop{
  stroke:#09070f;
  stroke-width:1.2;
  vector-effect:non-scaling-stroke;
}
.mall-art-shop.pink{fill:url(#shopGlassPink)}
.mall-art-shop.cyan{fill:url(#shopGlassCyan)}

.mall-art-shop-lines path{
  fill:none;
  stroke:rgba(255,221,112,.32);
  stroke-width:.28;
  vector-effect:non-scaling-stroke;
}

.mall-art-ring{
  fill:none;
  stroke-width:.35;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:2.2 1.1;
}
.mall-art-ring.pink-ring{stroke:rgba(255,77,199,.38)}
.mall-art-ring.cyan-ring{stroke:rgba(104,241,255,.34)}

.mall-art-kiosk{
  fill:#0a0d18;
  stroke:rgba(255,85,198,.52);
  stroke-width:.3;
  vector-effect:non-scaling-stroke;
}
.mall-art-escalator{
  fill:#111421;
  stroke:rgba(112,241,255,.44);
  stroke-width:.3;
  vector-effect:non-scaling-stroke;
}
.mall-art-escalator-steps path{
  fill:none;
  stroke:rgba(255,255,255,.16);
  stroke-width:.2;
  vector-effect:non-scaling-stroke;
}

.mall-art-route,
.mall-art-route-dash{
  fill:none;
  vector-effect:non-scaling-stroke;
}
.mall-art-route{
  stroke:rgba(255,222,104,.09);
  stroke-width:1.1;
  filter:drop-shadow(0 0 2px rgba(255,77,199,.18));
}
.mall-art-route-dash{
  stroke:rgba(102,239,255,.33);
  stroke-width:.4;
  stroke-linecap:round;
  stroke-dasharray:1.2 1;
}

.mall-art-basement-shadow{
  fill:rgba(2,3,8,.92);
}
.mall-art-basement-frame{
  fill:none;
  stroke:rgba(255,68,195,.42);
  stroke-width:.5;
  vector-effect:non-scaling-stroke;
}

/* Final map header. */
.mall-final-header{
  position:absolute;
  left:50%;
  top:13.5%;
  transform:translateX(-50%) rotate(-.4deg);
  width:45%;
  padding:4px 6px;
  text-align:center;
  border:1px solid rgba(117,242,255,.50);
  border-radius:5px;
  background:#080913d4;
  box-shadow:0 0 12px rgba(66,225,255,.16),0 0 11px rgba(255,58,191,.12);
}
.mall-final-header b{
  display:block;
  color:#9bf8ff;
  font-size:7px;
  letter-spacing:.15em;
  text-shadow:0 0 7px #37e7ff;
}
.mall-final-header small{
  display:block;
  margin-top:2px;
  color:#ff7fd1;
  font-size:4px;
  letter-spacing:.12em;
}

/* Storefronts look less like UI cards and more like physical facades. */
.mall-store-final{
  border:2px solid #08070f !important;
  border-radius:4px 7px 3px 6px !important;
  outline:1px solid rgba(255,84,198,.30);
  background:
    linear-gradient(111deg,rgba(255,255,255,.055),transparent 26% 67%,rgba(96,237,255,.035)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.024) 0 7px,transparent 7px 15px),
    linear-gradient(180deg,rgba(45,12,53,.96),rgba(7,8,16,.98)) !important;
}
.mall-store-final:after{
  content:"";
  position:absolute;
  left:7%;
  right:7%;
  bottom:8%;
  height:23%;
  border-top:1px solid rgba(128,242,255,.17);
  background:linear-gradient(90deg,rgba(76,233,255,.06),rgba(255,68,192,.07));
}
.mall-store-final i{
  position:relative;
  z-index:2;
  margin-top:4px;
  color:#cbc4d4;
  font-size:3.5px;
  font-style:normal;
  letter-spacing:.08em;
  opacity:.72;
}

/* Neon scam ads. */
.mall-neon-ad{
  position:absolute;
  width:16%;
  min-height:6%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:2px solid #07070d;
  border-radius:3px;
  background:#0a0911df;
  transform:rotate(-4deg);
  box-shadow:0 0 9px rgba(255,68,194,.20);
}
.mall-neon-ad b{
  font-size:5px;
  color:#ff73cc;
  letter-spacing:.10em;
  text-shadow:0 0 7px #ff35b9;
}
.mall-neon-ad small{
  margin-top:2px;
  font-size:3.4px;
  color:#75f4ff;
  letter-spacing:.08em;
}
.ad-left{left:2%;top:40%}
.ad-right{right:2%;top:48%;transform:rotate(4deg)}

/* Existing blockers gain final-world dressing. */
.final-kiosk{
  border:2px solid #090810 !important;
  outline:1px solid rgba(255,69,194,.45);
  transform:rotate(-1.4deg);
}
.final-kiosk:before{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  top:-12%;
  height:8%;
  border-radius:999px;
  background:#ff58c6;
  box-shadow:0 0 8px #ff44bf;
}
.final-kiosk i{
  position:absolute;
  bottom:6%;
  font-style:normal;
  color:#ff7dcf;
  font-size:3.5px;
}

.final-escalator{
  border:2px solid #080810 !important;
  outline:1px solid rgba(103,239,255,.38);
}
.final-escalator i{
  display:block;
  margin-top:3px;
  color:#ff70cc;
  font-size:5px;
  font-style:normal;
  text-shadow:0 0 6px #ff3fbb;
}

/* Small environment storytelling pieces. */
.mall-bench{
  position:absolute;
  width:12%;
  height:2.5%;
  display:flex;
  gap:2px;
  opacity:.76;
  transform:rotate(-3deg);
}
.mall-bench i{
  flex:1;
  border:1px solid rgba(4,4,8,.9);
  background:#35233b;
  box-shadow:0 2px 3px #0009;
}
.bench-a{left:24%;top:44%}
.bench-b{right:21%;top:59%;transform:rotate(4deg)}

.mall-vending{
  position:absolute;
  right:10%;
  top:40%;
  width:8%;
  height:7%;
  padding:2px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:2px solid #08070e;
  border-radius:3px;
  background:linear-gradient(180deg,#20354a,#0a0b14);
  box-shadow:0 0 8px rgba(62,228,255,.20);
  transform:rotate(2deg);
}
.mall-vending b{color:#7ef5ff;font-size:4px;letter-spacing:.09em}
.mall-vending small{margin-top:2px;color:#ff6bc9;font-size:3px}

.mall-caution{
  position:absolute;
  left:31%;
  top:82%;
  font-size:14px;
  transform:rotate(-9deg);
  filter:drop-shadow(0 3px 3px #000a);
}

/* The future path is physically visible at the north of Room 2. */
.mall-basement-entry{
  position:absolute;
  left:33%;
  top:1.2%;
  width:34%;
  height:12%;
  z-index:2;
  border:2px solid #08070e;
  border-radius:4px 4px 7px 7px;
  background:
    linear-gradient(180deg,rgba(255,65,190,.08),transparent 25%),
    #070912;
  box-shadow:0 8px 18px #000c,0 0 10px rgba(255,62,190,.13);
  overflow:visible;
}

.basement-warning{
  position:absolute;
  left:50%;
  top:-13%;
  transform:translateX(-50%) rotate(-1deg);
  padding:2px 5px;
  border:2px solid #08070e;
  background:#ffdf57;
  color:#17100a;
  font-size:4px;
  font-weight:1000;
  letter-spacing:.15em;
  white-space:nowrap;
}

.basement-sign{
  position:absolute;
  left:50%;
  top:7%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
}
.basement-sign small{
  display:flex;
  width:18px;height:18px;
  align-items:center;justify-content:center;
  border:2px solid #09080f;
  background:#ff4ebc;
  color:white;
  font-size:7px;
  font-weight:1000;
  box-shadow:0 0 7px rgba(255,64,186,.52);
}
.basement-sign b{
  color:#84f5ff;
  font-size:6px;
  letter-spacing:.14em;
  text-shadow:0 0 6px #3ce9ff;
}

.basement-door{
  position:absolute;
  left:20%;
  right:20%;
  top:38%;
  bottom:9%;
  border:2px solid #111019;
  background:
    repeating-linear-gradient(90deg,#11131d 0 15%,#1d202c 15% 17%,#0d0f18 17% 32%);
  box-shadow:inset 0 0 13px #000;
}
.basement-door i{
  position:absolute;
  top:0;bottom:0;
  width:1px;
  background:rgba(255,255,255,.08);
}
.basement-door i:nth-child(1){left:25%}
.basement-door i:nth-child(2){left:50%}
.basement-door i:nth-child(3){left:75%}
.basement-door span{
  position:absolute;
  left:50%;top:50%;
  width:6px;height:6px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#f34a67;
  box-shadow:0 0 7px #f34a67;
}

.basement-status{
  position:absolute;
  left:50%;
  bottom:-15%;
  transform:translateX(-50%);
  padding:2px 5px;
  border:2px solid #08070e;
  background:#0a0910;
  font-size:3.8px;
  font-weight:1000;
  letter-spacing:.11em;
  white-space:nowrap;
}
.basement-status .locked-copy{color:#ff5c72}
.basement-status .open-copy{display:none;color:#77f6cf}

.basement-arrow{
  position:absolute;
  left:50%;
  bottom:-43%;
  transform:translateX(-50%);
  color:#5ceeff;
  font-size:10px;
  opacity:.22;
}

/* When enemies are cleared, this becomes the final objective. */
body[data-room="room_02"] .arena.room2-underground-open .mall-basement-entry{
  outline:1px solid rgba(107,246,222,.54);
  box-shadow:
    0 8px 18px #000c,
    0 0 16px rgba(93,246,221,.34),
    0 0 25px rgba(255,66,194,.17);
}
body[data-room="room_02"] .arena.room2-underground-open .basement-door{
  background:
    linear-gradient(90deg,transparent 46%,rgba(101,246,225,.12) 48% 52%,transparent 54%),
    repeating-linear-gradient(90deg,#11131d 0 15%,#202a2c 15% 17%,#0d1218 17% 32%);
  box-shadow:inset 0 0 13px #000,0 0 9px rgba(101,246,225,.26);
}
body[data-room="room_02"] .arena.room2-underground-open .basement-door span{
  background:#66f2d1;
  box-shadow:0 0 9px #66f2d1;
}
body[data-room="room_02"] .arena.room2-underground-open .basement-status .locked-copy{display:none}
body[data-room="room_02"] .arena.room2-underground-open .basement-status .open-copy{display:inline}
body[data-room="room_02"] .arena.room2-underground-open .basement-arrow{
  opacity:1;
  animation:room2BasementArrow .72s ease-in-out infinite alternate;
  text-shadow:0 0 8px #56f1ff;
}
@keyframes room2BasementArrow{
  to{transform:translate(-50%,5px)}
}

/* The generic exit marker is demoted: the physical B1 door is the destination. */
body[data-room="room_02"][data-room-scene="interior"] .zone-exit{
  width:62px;
  height:28px;
  border:0;
  background:transparent;
  box-shadow:none;
  opacity:.58;
}
body[data-room="room_02"][data-room-scene="interior"] .zone-exit div,
body[data-room="room_02"][data-room-scene="interior"] .zone-exit small{
  display:none;
}

/* =========================================================
   Room 3 coming-soon ending
   ========================================================= */
.room3-teaser{
  z-index:980 !important;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 40%,rgba(36,217,220,.12),transparent 28%),
    radial-gradient(circle at 50% 52%,rgba(255,56,187,.09),transparent 43%),
    linear-gradient(180deg,rgba(3,4,9,.96),rgba(7,5,13,.99)) !important;
  backdrop-filter:none !important;
}

.room3-teaser-noise{
  position:absolute;
  inset:-8%;
  pointer-events:none;
  opacity:.28;
  background:
    repeating-linear-gradient(0deg,transparent 0 4px,rgba(90,239,255,.028) 4px 5px),
    linear-gradient(90deg,transparent,rgba(255,63,193,.035),transparent);
  animation:room3Noise .35s steps(2,end) infinite;
}

@keyframes room3Noise{
  50%{transform:translate(1%,-.5%)}
}

.room3-teaser-content{
  position:relative;
  z-index:2;
  width:min(86vw,360px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.room3-kicker{
  color:#79f5ff;
  font-size:7px;
  font-weight:900;
  letter-spacing:.19em;
  text-shadow:0 0 7px #36e9ff;
}

.room3-teaser h1{
  margin:6px 0 0;
  color:#fff;
  font-size:36px;
  letter-spacing:.08em;
  text-shadow:0 0 12px #ff3cbd77;
}

.room3-basement-visual{
  position:relative;
  width:190px;
  height:164px;
  margin:6px 0 2px;
  perspective:350px;
}

.room3-service-door{
  position:absolute;
  left:29px;right:29px;
  top:24px;bottom:10px;
  border:5px solid #10101a;
  background:
    repeating-linear-gradient(90deg,#151821 0 17px,#272b34 17px 20px,#0e1018 20px 37px);
  box-shadow:
    0 16px 25px #000,
    0 0 0 1px #5deaf155,
    0 0 18px rgba(76,233,244,.15);
  transform:rotateX(-2deg) rotate(-.5deg);
}
.room3-service-door:before{
  content:"";
  position:absolute;
  inset:9px;
  border:1px solid rgba(255,255,255,.09);
}
.room3-service-door b{
  position:absolute;
  left:50%;top:14px;
  transform:translateX(-50%) rotate(-2deg);
  padding:4px 6px;
  border:2px solid #111;
  background:#ffdf57;
  color:#16110a;
  font-size:8px;
  letter-spacing:.15em;
  white-space:nowrap;
}
.room3-service-door small{
  position:absolute;
  left:50%;bottom:14px;
  transform:translateX(-50%);
  color:#ff6acb;
  font-size:20px;
  font-weight:1000;
  text-shadow:0 0 9px #ff3abb;
}
.room3-service-door i{
  position:absolute;
  left:16%;
  right:16%;
  height:2px;
  background:#08090e;
}
.room3-service-door i:nth-of-type(1){top:44%}
.room3-service-door i:nth-of-type(2){top:50%}
.room3-service-door i:nth-of-type(3){top:56%}

.room3-lamp{
  position:absolute;
  left:50%;top:5px;
  width:48px;height:9px;
  transform:translateX(-50%) rotate(1deg);
  border:2px solid #0a0a0e;
  background:#9bffff;
  box-shadow:0 0 15px #6ef7ff,0 0 35px rgba(103,245,255,.28);
  animation:room3Lamp 1.8s steps(2,end) infinite;
}
@keyframes room3Lamp{
  0%,82%,100%{opacity:1}
  84%,88%{opacity:.2}
  90%{opacity:.75}
}

.room3-shadow{
  position:absolute;
  left:50%;bottom:0;
  width:130px;height:20px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#000;
  filter:blur(8px);
  opacity:.85;
}

.room3-coming{
  margin-top:3px;
  padding:5px 9px;
  border:2px solid #111019;
  background:#ff4bbd;
  color:#fff;
  font-size:14px;
  letter-spacing:.15em;
  transform:rotate(-1deg);
  box-shadow:3px 3px 0 #111019,0 0 14px rgba(255,61,188,.30);
}

.room3-teaser p{
  margin:10px 0 10px;
  color:#d2cbd8;
  font-size:11px;
  line-height:1.5;
}

.room3-run-state{
  width:100%;
  padding:8px 10px;
  margin-bottom:9px;
  border:1px solid rgba(99,238,255,.24);
  border-radius:9px;
  background:#090b13bd;
}
.room3-run-state span,
.room3-run-state small{display:block}
.room3-run-state span{
  color:#d7faff;
  font-size:8px;
  letter-spacing:.09em;
}
.room3-run-state span b{color:#ff78cf}
.room3-run-state small{
  margin-top:4px;
  color:#75f0d0;
  font-size:6px;
  letter-spacing:.06em;
}

#room3AgainBtn{
  width:100%;
  border-color:#5eeeff !important;
  background:linear-gradient(135deg,#27103b,#083343) !important;
}

.room3-back{
  display:block;
  margin-top:8px;
  color:#aaa4b1;
  font-size:8px;
  font-weight:900;
  letter-spacing:.09em;
  text-decoration:none;
}

@media(max-width:420px){
  .mall-final-header{width:50%}
  .mall-neon-ad{width:17%}
  .mall-basement-entry{left:31%;width:38%}
  .room3-basement-visual{width:168px;height:145px}
  .room3-teaser h1{font-size:31px}
}


/* ===== V3.6.1 — ROOM 2 ILLUSTRATED MAP + HEART PICKUP ANTI-CLIP ===== */

body[data-room="room_02"][data-room-scene="interior"] .room-decor{
  background:
    linear-gradient(180deg,rgba(7,6,15,.06),rgba(10,8,18,.16)),
    url('./assets/room2-exit-liquidity-mall-v361.webp') center/cover no-repeat;
}

body[data-room="room_02"][data-room-scene="interior"] .room-decor > *{
  display:none !important;
}

body[data-room="room_02"][data-room-scene="interior"] .arena{
  background:
    linear-gradient(180deg,rgba(8,7,18,.24),rgba(5,4,13,.34)),
    linear-gradient(180deg,#0f0b17 0%,#090914 52%,#110818 100%);
}

body[data-room="room_02"][data-room-scene="interior"] .arena:before{
  background:
    linear-gradient(90deg,rgba(255,48,187,.05),transparent 22%,transparent 78%,rgba(55,218,255,.05)),
    linear-gradient(180deg,rgba(8,7,18,.03),rgba(5,4,13,.12));
  transform:none;
}

.pickup{
  overflow:visible;
}

.pickup.heart{
  width:54px;
  height:54px;
  filter:drop-shadow(0 0 10px #ff6684) drop-shadow(0 0 5px #ff42c5);
}

.pickup.heart .glyph{
  transform-origin:50% 56%;
  animation:pickupHeartPulse .76s ease-in-out infinite alternate;
}

.pickup.heart:after{
  inset:-6px;
  border-color:#ff6f96bb;
  box-shadow:0 0 12px #ff456755;
}

@keyframes pickupHeartPulse{
  from{transform:scale(.94)}
  to{transform:scale(1.14)}
}

html.mobile-lite .pickup.heart{
  width:48px;
  height:48px;
  filter:drop-shadow(0 0 8px #ff6684) drop-shadow(0 0 4px #ff42c5);
}


/* ===== V3.6.2 — ROOM 2 DUAL BOSS PROTOTYPE ===== */

body[data-room="room_02"] .boss-world-label{
  position:absolute;
  left:50%;
  bottom:-8px;
  transform:translateX(-50%) rotate(-1deg);
  z-index:5;
  padding:2px 5px;
  border:2px solid #08070e;
  border-radius:3px;
  background:#0a0911e8;
  color:#fff;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.08em;
  white-space:nowrap;
  text-shadow:0 0 6px currentColor;
}

body[data-room="room_02"] .boss-stage-1 .boss-aura{
  border-color:#ffd35f99;
  background:radial-gradient(circle,#ffbe3029 0 42%,transparent 72%);
  box-shadow:0 0 26px #ffb52f66,0 0 48px #ff42bd44;
}
body[data-room="room_02"] .boss-stage-1 .boss-world-label{
  color:#ffe38a;
}
body[data-room="room_02"] .boss-stage-1 .boss-visual{
  width:132px;
  height:132px;
}

body[data-room="room_02"] .boss-stage-2 .boss-aura{
  border-color:#70f4ffcc;
  background:radial-gradient(circle,#48e8ff2d 0 40%,#ff3ebb19 46%,transparent 72%);
  box-shadow:0 0 30px #50edff88,0 0 58px #ff38c866;
}
body[data-room="room_02"] .boss-stage-2 .boss-world-label{
  color:#7ff7ff;
  background:#16091be8;
  box-shadow:0 0 10px #ff42c855;
}
body[data-room="room_02"] .boss-stage-2 .boss-visual{
  width:142px;
  height:142px;
}
body[data-room="room_02"] .boss-stage-2 .boss-visual img{
  filter:saturate(1.18) contrast(1.05);
}

.pickup.boss-heart{
  z-index:7;
  animation:bossHeartArrival .48s cubic-bezier(.2,.9,.25,1.15);
}
.pickup.boss-heart .glyph{
  color:#ff5e7b;
  font-size:26px;
  box-shadow:0 0 16px #ff496b,0 0 30px #ff3fbd66;
}
.pickup.boss-heart:after{
  border-width:2px;
  border-color:#ff84a5dd;
  box-shadow:0 0 18px #ff476d88,0 0 24px #ff3dba55;
}
@keyframes bossHeartArrival{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.15) rotate(-16deg)}
  65%{opacity:1;transform:translate(-50%,-50%) scale(1.28) rotate(5deg)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

html.mobile-lite body[data-room="room_02"] .boss-stage-1 .boss-visual{
  width:118px;
  height:118px;
}
html.mobile-lite body[data-room="room_02"] .boss-stage-2 .boss-visual{
  width:126px;
  height:126px;
}


/* ===== V3.6.3 — ROOM 2 COLLISION ALIGNMENT =====
   Collision geometry now follows the approved illustrated map:
   carts are visual-only, escalator collision is aligned/tighter,
   and lower side lanes are slightly more forgiving. */


/* ===== V3.6.4 — ROOM 2 COORDINATE-LOCKED MAP / COLLISION ===== */

/*
   IMPORTANT:
   The Room 2 image is a gameplay surface, not decorative wallpaper.
   `cover` cropped the square image differently on tall phones while JS
   collision coordinates stayed 0–100 across the full arena.
   The image is now mapped exactly to the arena coordinate system.
*/
body[data-room="room_02"][data-room-scene="interior"] .room-decor{
  background-image:
    linear-gradient(180deg,rgba(7,6,15,.04),rgba(10,8,18,.12)),
    url('./assets/room2-exit-liquidity-mall-v361.webp') !important;
  background-position:center center,center center !important;
  background-repeat:no-repeat,no-repeat !important;
  background-size:100% 100%,100% 100% !important;
}

/* The illustrated image itself supplies the physical mall scenery. */
body[data-room="room_02"][data-room-scene="interior"] .room-decor > *{
  display:none !important;
}

/*
   A little extra breathing room around CN1 visually.
   Collision still blocks the true kiosk / escalator footprints.
*/
body[data-room="room_02"][data-room-scene="interior"] .player{
  filter:
    drop-shadow(0 6px 4px #000a)
    drop-shadow(0 0 5px #ff3cc755);
}


/* ===== V3.6.5 — FINAL TEST POLISH ===== */

/* Clean start screen: no Room 1/Room 2 image bleeding behind intro text. */
#intro.overlay{
  background:
    radial-gradient(circle at 50% 34%,#421044 0%,#16091f 34%,#08050d 67%,#040307 100%) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Subtle depth without exposing the gameplay map underneath. */
#intro.overlay:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 22% 20%,rgba(255,61,190,.13),transparent 24%),
    radial-gradient(circle at 79% 72%,rgba(67,216,255,.09),transparent 28%);
}

/* Boss 2 heart remains comfortably inside its larger anti-clip zone. */
.pickup.boss-heart{
  overflow:visible !important;
}


/* =========================================================
   CN1 Bad Decisions V3.6.6
   Final Start Screen + Boss Balance
   ========================================================= */

#intro.overlay{
  justify-content:flex-start !important;
  padding:
    max(132px,calc(env(safe-area-inset-top) + 116px))
    14px
    max(18px,env(safe-area-inset-bottom))
    !important;
  overflow-y:auto;
  text-shadow:none !important;
}

#intro .intro-panel{
  width:min(100%,430px);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
}

#intro .intro-zone{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin:0 auto 8px;
  color:#bdb5c8;
  font-size:7px;
  font-weight:900;
  letter-spacing:.15em;
}

#intro .intro-zone span{
  padding:3px 6px;
  border:1px solid rgba(88,232,255,.44);
  border-radius:999px;
  color:#7af3ff;
  background:rgba(7,12,20,.72);
}

#intro .intro-zone b{
  color:#d5cedd;
  font-size:7px;
  letter-spacing:.16em;
}

#intro .intro-objective{
  width:100%;
  padding:12px 14px 11px;
  margin-bottom:14px;
  border:1px solid rgba(255,78,200,.24);
  border-radius:13px;
  background:
    linear-gradient(135deg,rgba(255,59,191,.08),rgba(67,216,255,.045)),
    rgba(7,7,14,.74);
  box-shadow:inset 0 0 22px rgba(255,71,196,.035);
  text-align:center;
}

#intro .intro-objective b{
  display:block;
  color:#fff;
  font-size:16px;
  line-height:1.1;
  letter-spacing:.055em;
}

#intro .intro-objective span{
  display:block;
  margin-top:5px;
  color:#c7bfcd;
  font-size:10px;
  font-weight:800;
  line-height:1.25;
}

#intro .intro-mode-label{
  margin:0 0 6px;
  color:#80798a;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.18em;
  text-align:left;
}

#intro .economy-picker{
  width:100%;
  margin:0 0 7px;
  gap:7px;
}

#intro .economy-mode{
  min-height:62px;
  margin:0 !important;
  padding:9px 8px !important;
}

#intro .economy-mode b{
  font-size:12px;
}

#intro .economy-mode small{
  font-size:8px;
  line-height:1.25;
}

#intro .risk-status{
  width:100%;
  min-height:25px;
  margin:0 0 12px;
  padding:0 2px;
}

#intro .risk-status b{
  font-size:9px;
}

#intro .risk-status small{
  font-size:7px;
}

#intro #playBtn.intro-play{
  width:min(78%,320px);
  min-height:52px;
  align-self:center;
  margin:2px auto 9px !important;
  padding:13px 22px !important;
  font-size:18px;
  letter-spacing:.02em;
  box-shadow:0 0 22px rgba(255,50,189,.50);
}

#intro #rulesBtn.intro-rules{
  width:min(58%,250px);
  min-height:42px;
  align-self:center;
  margin:0 auto 10px !important;
  padding:9px 18px !important;
  border:1px solid #50ddff !important;
  background:#090b16e8 !important;
  box-shadow:0 0 12px rgba(55,220,255,.11) !important;
  font-size:13px;
}

#intro .room3-private-entry{
  width:100%;
  min-height:42px;
  margin:5px 0 4px;
  padding:8px 12px;
  border-color:#67efff88;
  background:linear-gradient(135deg,#091626,#25102c);
  box-shadow:0 0 15px rgba(72,231,255,.17);
}
#intro .room3-private-entry b,
#intro .room3-private-entry small{display:block}
#intro .room3-private-entry b{color:#8af7ff;font-size:10px;letter-spacing:.08em}
#intro .room3-private-entry small{margin-top:3px;color:#b2aaba;font-size:7px}

#intro .intro-footnote{
  display:block;
  margin:0 auto !important;
  padding:3px 8px !important;
  background:transparent !important;
  color:#8f8998 !important;
  font-size:7px !important;
  line-height:1.2;
}

/* Prevent old generic overlay typography from affecting the new layout. */
#intro.overlay > .intro-panel:first-child{
  font-size:inherit !important;
  filter:none !important;
}

@media(max-width:420px){
  #intro.overlay{
    padding-top:max(124px,calc(env(safe-area-inset-top) + 108px)) !important;
    padding-left:9px !important;
    padding-right:9px !important;
  }

  #intro .intro-objective{
    padding:10px 10px 9px;
    margin-bottom:11px;
  }

  #intro .intro-objective b{
    font-size:15px;
  }

  #intro .intro-objective span{
    font-size:9px;
  }

  #intro .economy-mode{
    min-height:58px;
    padding:7px 6px !important;
  }

  #intro #playBtn.intro-play{
    min-height:49px;
    font-size:17px;
  }

  #intro #rulesBtn.intro-rules{
    min-height:39px;
  }
}

@media(max-height:690px){
  #intro.overlay{
    padding-top:112px !important;
  }
  #intro .intro-zone{margin-bottom:5px}
  #intro .intro-objective{margin-bottom:8px;padding:8px 10px}
  #intro .intro-mode-label{margin-bottom:4px}
  #intro .economy-picker{margin-bottom:4px}
  #intro .economy-mode{min-height:52px}
  #intro .risk-status{margin-bottom:7px}
  #intro #playBtn.intro-play{min-height:45px;margin-bottom:6px !important}
  #intro #rulesBtn.intro-rules{min-height:36px;margin-bottom:5px !important}
}


/* =========================================================
   CN1 Bad Decisions V3.6.7 — X Share Card
   ========================================================= */

.x-share-btn,
.room3-share-x{
  border:1px solid rgba(255,255,255,.78) !important;
  color:#fff !important;
  background:
    linear-gradient(135deg,#050507,#11111a) !important;
  box-shadow:
    0 0 13px rgba(255,255,255,.10),
    0 0 18px rgba(80,231,255,.08) !important;
  letter-spacing:.04em;
}

.x-share-btn:active,
.room3-share-x:active{
  transform:scale(.975);
}

#room3ShareBtn.room3-share-x{
  width:100%;
  margin-bottom:8px;
  min-height:44px;
  font-weight:1000;
  font-size:13px;
}


/* =========================================================
   CN1 Bad Decisions V3.6.8 — X + Telegram Share Buttons
   ========================================================= */

.tg-share-btn,
.room3-share-tg{
  border:1px solid rgba(83,222,255,.86) !important;
  color:#eaffff !important;
  background:
    linear-gradient(135deg,#072536,#0b1531) !important;
  box-shadow:
    0 0 12px rgba(56,206,255,.20),
    0 0 22px rgba(53,154,255,.10) !important;
  letter-spacing:.035em;
}

.tg-share-btn:active,
.room3-share-tg:active{
  transform:scale(.975);
}

#room3TelegramShareBtn.room3-share-tg{
  width:100%;
  margin-bottom:8px;
  min-height:44px;
  font-weight:1000;
  font-size:13px;
}

.result-actions .tg-share-btn{
  width:100%;
}



/* === V3.6.9 verified share card === */
.verified-share-wrap{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.verified-share-wrap.hidden{display:none!important}
.verified-share-wrap.compact{margin-top:12px}
.verified-share-image{
  width:min(100%,420px);
  display:block;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 14px 40px rgba(0,0,0,.35),0 0 28px rgba(255,0,144,.12);
  background:rgba(9,12,22,.92);
}
.room3-teaser .verified-share-image{
  width:min(100%,390px);
}
.verified-share-note{
  font-size:11px;
  letter-spacing:.08em;
  opacity:.82;
  text-transform:uppercase;
  text-align:center;
}
.brand-share-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.share-logo{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.share-logo svg{
  width:100%;
  height:100%;
  fill:currentColor;
  display:block;
}
.x-logo{
  color:#ffffff;
}
.tg-logo{
  color:#2AABEE;
}


/* ===== V3.6.11.3 — CN1 DIRECTIONAL ATTACK REWORK =====
   Consolidated validated visual state.
   Gameplay collision/hit logic is unchanged.
*/
.player .player-body img{
  height:80%!important;
  top:10%!important;
}

.player.attacking .player-body img{
  height:70%!important;
  top:15%!important;
  max-width:none!important;
}

.player.attacking .player-body{
  overflow:visible!important;
}

.player.attacking{
  overflow:visible!important;
}


.overdrive-hud{
  position:absolute;z-index:18;top:202px;left:50%;transform:translateX(-50%);
  min-width:188px;padding:7px 12px;border:1px solid #ff6dda;border-radius:12px;
  background:#090713e8;box-shadow:0 0 24px #ff3dca77,0 0 34px #35ddff55;
  display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;
  pointer-events:none;text-align:left;animation:overdriveHudPulse .55s ease-in-out infinite alternate;
}
.overdrive-hud b{font-size:10px;letter-spacing:.12em;color:#fff}
.overdrive-hud span{font-size:18px;font-weight:1000;color:#62ebff;text-shadow:0 0 10px #33dcff}
.overdrive-hud small{grid-column:1/-1;font-size:7px;letter-spacing:.08em;color:#ff9ae3}
@keyframes overdriveHudPulse{to{transform:translateX(-50%) scale(1.035);box-shadow:0 0 32px #ff3dc999,0 0 44px #35ddff77}}


/* =========================================================
   CN1 Bad Decisions V3.6.16 — Racket Timing / Home Run
   ========================================================= */
.combat-pop.critical-pop{
  color:#7ef3ff;
  font-size:12px;
  text-shadow:0 0 7px #fff,0 0 14px #39dfff,0 2px 0 #173f50;
}
.combat-pop.perfect-pop{
  color:#fff7a8;
  font-size:13px;
  text-shadow:0 0 7px #fff,0 0 15px #ffe54a,0 0 20px #ff48c8;
}
.combat-pop.home-run-pop{
  color:#fff;
  font-size:16px;
  letter-spacing:.11em;
  text-shadow:0 0 8px #fff,0 0 16px #ffef5a,0 0 26px #ff3bbd,0 3px 0 #45102f;
  animation:homeRunPop .72s cubic-bezier(.2,.85,.24,1) forwards;
}
.combat-pop.home-run-collateral{
  color:#ff9df0;
  font-size:11px;
  text-shadow:0 0 8px #fff,0 0 16px #ff3bc8,0 2px 0 #3a1030;
}
@keyframes homeRunPop{
  0%{opacity:0;transform:translate(-50%,-35%) scale(.72) rotate(-4deg)}
  18%{opacity:1;transform:translate(-50%,-55%) scale(1.2) rotate(2deg)}
  100%{opacity:0;transform:translate(-50%,-170%) scale(1.02) rotate(0)}
}


/* =========================================================
   CN1 Bad Decisions V3.6.17 — Room 1 Pre-Boss Wave
   ========================================================= */
body[data-room="room_01"] .enemy.preboss-elite{
  overflow:visible;
  filter:drop-shadow(0 0 8px #ff4bc8) drop-shadow(0 0 12px #ffe86e55);
}
body[data-room="room_01"] .enemy .enemy-mini-hp{
  position:absolute;
  left:50%;
  bottom:-7px;
  transform:translateX(-50%);
  min-width:31px;
  padding:2px 5px;
  border-radius:8px;
  background:#120916ee;
  color:#fff08a;
  border:1px solid #fff08a88;
  font:900 8px/1 system-ui,sans-serif;
  text-align:center;
  z-index:7;
  box-shadow:0 0 9px #ff48c855;
}


/* =========================================================
   CN1 Bad Decisions V3.6.18 — Combat Readability / Variation
   ========================================================= */

/* Dialogue is feedback, not permanent scenery. */
.toast{
  opacity:0;
  top:151px;
  max-width:72%;
  padding:4px 8px;
  background:#090611c7;
  font-size:9px;
  transition:opacity .16s ease,transform .16s ease;
}

/* Phase changes stay out of the combat center. */
.phase-banner{
  top:76px;
  width:min(74%,300px);
  padding:7px 10px;
  border-radius:9px;
  background:#090611db;
  box-shadow:0 0 18px #ff3fbd3d;
  animation:phaseBannerV3618 .76s ease-out forwards;
}
.phase-banner b{
  font-size:12px;
  letter-spacing:.08em;
}
.phase-banner small{
  margin-top:2px;
  font-size:7px;
  letter-spacing:.10em;
}
@keyframes phaseBannerV3618{
  0%{opacity:0;transform:translate(-50%,-35%) scale(.92)}
  18%,68%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-70%) scale(1)}
}

/* Overdrive becomes a compact status chip instead of another panel. */
.overdrive-hud{
  top:112px;
  left:auto;
  right:10px;
  transform:none;
  min-width:0;
  padding:4px 7px;
  display:flex;
  gap:6px;
  border-radius:999px;
  background:#090713cf;
  box-shadow:0 0 14px #ff3dca4f,0 0 18px #35ddff38;
  animation:none;
}
.overdrive-hud b{
  font-size:8px;
  letter-spacing:.08em;
}
.overdrive-hud span{
  font-size:12px;
}
.overdrive-hud small{
  display:none;
}

/* During a boss fight, the boss HUD is the objective. Don't stack mission cards. */
.arena .mission{
  transition:opacity .16s ease,transform .16s ease;
}
.arena.boss-active .mission{
  opacity:0;
  transform:translateY(-5px);
}
.arena.boss-active .overdrive-hud{
  top:164px;
}

/* Room 1 elites use readable HP pips ABOVE the sprite. */
body[data-room="room_01"] .enemy .enemy-mini-hp{
  top:-8px;
  bottom:auto;
  min-width:0;
  padding:2px 4px;
  letter-spacing:2px;
  white-space:nowrap;
  color:#fff08a;
  background:#0d0712d6;
  border:1px solid #fff08a66;
  box-shadow:0 0 8px #ff48c844;
  font:900 8px/1 system-ui,sans-serif;
}

@media(max-width:420px){
  .toast{top:148px;max-width:68%;font-size:8px}
  .phase-banner{top:72px;width:min(70%,270px)}
  .overdrive-hud{top:110px;right:7px}
  .arena.boss-active .overdrive-hud{top:157px}
}