:root{--bg:#060812;--line:rgba(255,255,255,.12);--text:#f7f8fc;--muted:#8e98b0;--p1:#56d8ff;--p2:#ff64d2;--danger:#ff5d69;--gold:#ffd76b;--ok:#72efb2}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}body{overflow:hidden}button{font:inherit}
.screen{display:none;min-height:100vh}.screen.active{display:flex}#startScreen,#resultScreen{align-items:center;justify-content:center;padding:28px}.start-card,.resultCard{width:min(980px,94vw);text-align:center}
.eyebrow{font-size:11px;letter-spacing:.22em;color:var(--muted);font-weight:800}h1{font-size:clamp(58px,9vw,118px);line-height:.8;letter-spacing:-.06em;margin:22px 0}h1 span{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.72)}
.lead{color:#c7cfdf}.btn{min-height:52px;border:0;border-radius:14px;background:linear-gradient(135deg,#168fbe,#7357da);color:white;padding:0 28px;font-weight:900;cursor:pointer;margin-top:18px}.btn:disabled{opacity:.55}
.status{min-height:25px;color:#c7d1e8;font-size:13px;margin-top:14px}.diag{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:10px 0}.diag span{font-size:11px;color:var(--muted);border:1px solid var(--line);padding:6px 9px;border-radius:999px}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:left;margin-top:24px}.rules article{border:1px solid var(--line);border-radius:16px;padding:16px;background:rgba(255,255,255,.025)}.rules b{font-size:14px}.rules p{margin:6px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
#gameScreen{flex-direction:column}.hud{height:90px;display:grid;grid-template-columns:1fr 180px 1fr;align-items:center;padding:12px 24px;border-bottom:1px solid var(--line);background:#080b14;z-index:5}.player{display:flex;flex-direction:column;gap:2px}.player.p2{text-align:right;align-items:flex-end}.player span{font-size:10px;letter-spacing:.18em;color:var(--muted);font-weight:800}.player strong{font-size:30px}.player.p1 strong{color:var(--p1)}.player.p2 strong{color:var(--p2)}.player small{font-size:11px;color:#c1c7d5}.centerHud{text-align:center}.centerHud>span{font-size:10px;color:var(--muted)}.centerHud>strong{display:block;font-size:32px}.base{height:5px;width:130px;margin:8px auto 0;background:#222735;border-radius:99px;overflow:hidden}.base i{display:block;width:100%;height:100%;background:var(--ok)}
#arena{position:relative;flex:1;overflow:hidden;background:radial-gradient(circle at 50% 50%,rgba(69,102,186,.18),transparent 24%),radial-gradient(circle at 50% 75%,rgba(92,64,150,.18),transparent 38%),linear-gradient(#090d17,#04060b)}
#arena:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}
#arena.shake{animation:shake .18s linear}@keyframes shake{25%{transform:translateX(-6px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:104px;height:104px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(114,239,178,.6);box-shadow:0 0 52px rgba(114,239,178,.18),inset 0 0 22px rgba(114,239,178,.08);z-index:1}.core:before{content:"";position:absolute;inset:18px;border-radius:50%;border:1px solid rgba(114,239,178,.32)}.core span{font-size:10px;letter-spacing:.18em;color:#c5ffe2}
#alienLayer,#fxLayer{position:absolute;inset:0}.alien{position:absolute;will-change:transform;filter:drop-shadow(0 12px 18px rgba(0,0,0,.55));border-radius:22%;overflow:hidden;border:1px solid rgba(255,255,255,.16);background:#10131b}.alien img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.05)}.alien.hit{animation:hit .13s linear}@keyframes hit{50%{filter:brightness(2.5) saturate(1.5);scale:.92}}
.alien .hp{position:absolute;left:8px;right:8px;bottom:6px;height:4px;background:rgba(0,0,0,.55);border-radius:99px;overflow:hidden}.alien .hp i{display:block;height:100%;background:#ff6a74}
.hand-orb{position:absolute;width:46px;height:46px;margin:-23px;border-radius:50%;border:2px solid currentColor;box-shadow:0 0 18px currentColor;z-index:5;pointer-events:none;opacity:0}.hand-orb:before{content:"";position:absolute;inset:9px;border-radius:50%;background:currentColor;opacity:.24}.hand-orb.p1{color:var(--p1)}.hand-orb.p2{color:var(--p2)}.hand-orb.live{opacity:1}.hand-orb.heavy{transform:scale(1.35);box-shadow:0 0 35px currentColor}
.slash{position:absolute;border:3px solid currentColor;border-radius:50%;pointer-events:none;z-index:4;animation:slash .34s ease-out forwards;transform-origin:center}.slash:after{content:"";position:absolute;inset:14%;border:1px solid currentColor;border-radius:50%}@keyframes slash{0%{opacity:.95;scale:.35}100%{opacity:0;scale:1.45}}
.energy-trail{position:absolute;height:8px;border-radius:99px;transform-origin:left center;pointer-events:none;z-index:4;filter:blur(.2px);animation:trail .24s ease-out forwards}@keyframes trail{to{opacity:0;filter:blur(5px)}}
.explosion{position:absolute;border-radius:50%;pointer-events:none;z-index:6;background:radial-gradient(circle,#fff 0 7%,#ffd36a 8% 20%,#ff6d3c 21% 42%,rgba(255,60,30,.15) 43% 68%,transparent 70%);animation:boom .42s ease-out forwards}@keyframes boom{0%{opacity:1;scale:.25}100%{opacity:0;scale:1.7}}
.cameraBox{position:absolute;right:14px;bottom:14px;width:220px;aspect-ratio:16/10;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#05060b;z-index:7}#video,#skeleton{position:absolute;inset:0;width:100%;height:100%}#video{object-fit:cover;transform:scaleX(-1)}#skeleton{pointer-events:none}.cameraMeta{position:absolute;left:8px;right:8px;top:8px;display:flex;justify-content:space-between;gap:6px;font-size:9px}.cameraMeta span{background:rgba(0,0,0,.58);padding:4px 6px;border-radius:7px}
#message{position:absolute;inset:0;display:grid;place-items:center;font-weight:950;font-size:clamp(40px,7vw,88px);pointer-events:none;text-shadow:0 10px 30px #000;z-index:8}#message:empty{display:none}#modeBadge{position:absolute;left:14px;bottom:14px;border:1px solid var(--line);border-radius:10px;padding:7px 10px;background:rgba(0,0,0,.5);font-size:10px;letter-spacing:.12em;color:var(--muted)}
.controlBar{min-height:50px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px}.resultCard h2{font-size:clamp(42px,7vw,90px);margin:18px 0}.resultGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0}.resultGrid article{border:1px solid var(--line);border-radius:18px;padding:20px}.resultGrid strong{display:block;font-size:42px}.resultGrid p,#baseResult{color:var(--muted)}
@media(max-width:700px){body{overflow:auto}.hud{grid-template-columns:1fr 90px 1fr;padding:8px}.cameraBox{width:145px}.resultGrid,.rules{grid-template-columns:1fr}}

#arena{background:linear-gradient(rgba(3,6,12,.16),rgba(3,6,12,.34)),url("./assets/alien_city_bg.jpg") center/cover no-repeat!important}
#pickupLayer{position:absolute;inset:0;z-index:3}
.pickup{position:absolute;width:76px;height:76px;margin:-38px;border-radius:50%;background:radial-gradient(circle,#fff 0 8%,#8cf6ff 10% 24%,#735dff 42%,rgba(105,93,255,.12) 68%,transparent 70%);box-shadow:0 0 32px #68dfff;animation:pickupPulse 1s ease-in-out infinite alternate;z-index:5}
@keyframes pickupPulse{to{transform:scale(1.15);filter:brightness(1.35)}}
.phase-meter{position:absolute;left:50%;top:16px;transform:translateX(-50%);width:min(430px,60%);z-index:10}
.phase-meter>span{display:block;text-align:center;font-size:10px;letter-spacing:.16em;margin-bottom:6px}
.phase-meter>div{height:9px;border-radius:99px;background:rgba(0,0,0,.58);overflow:hidden}
.phase-meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#56d8ff,#9676ff,#ff64d2);transition:width .1s}
.goo{position:absolute;width:14px;height:14px;border-radius:50% 42% 56% 38%;pointer-events:none;z-index:8;animation:gooFly .72s ease-out forwards}
@keyframes gooFly{to{transform:translate(var(--gx),var(--gy)) rotate(240deg) scale(.4);opacity:0}}
.alien{min-width:92px;min-height:92px}
.alien.boss{border-radius:12%;box-shadow:0 0 40px rgba(255,65,95,.5);z-index:5}
.alien.boss:after{content:"BOSS";position:absolute;top:8px;left:10px;font-size:10px;letter-spacing:.14em;font-weight:900;color:#ffd9dd;background:rgba(0,0,0,.6);padding:5px 7px;border-radius:8px}

/* v11: visible cinematic escalation, hand tracking core unchanged from v8 */
#arena:before{
  content:"";position:absolute;inset:-6%;z-index:0;pointer-events:none;
  background:url("./assets/alien_city_bg.jpg") center/cover no-repeat;
  opacity:.18;mix-blend-mode:screen;
  animation:bgDrift 12s ease-in-out infinite alternate;
}
@keyframes bgDrift{
  0%{transform:scale(1.03) translate(-1%,1%)}
  100%{transform:scale(1.12) translate(1.5%,-1.5%)}
}
.alien{transition:filter .15s}
.alien.basic{min-width:116px!important;min-height:116px!important}
.alien.fast{min-width:98px!important;min-height:98px!important}
.alien.tank{min-width:145px!important;min-height:145px!important}
.alien.elite{min-width:170px!important;min-height:170px!important}
.alien.boss{width:min(42vw,440px)!important;height:min(58vh,520px)!important;z-index:8!important;
  filter:drop-shadow(0 0 38px rgba(255,42,63,.65)) drop-shadow(0 28px 36px rgba(0,0,0,.9))!important}
.alien.boss img{filter:contrast(1.25) saturate(1.1) brightness(.82)}
#arena.extreme{animation:dangerPulse .28s steps(2) infinite}
@keyframes dangerPulse{50%{filter:brightness(.72) saturate(1.4) sepia(.15)}}
.rank-alert{position:fixed;inset:0;z-index:999;display:grid;place-items:center;background:#030000}
.rank-alert.hidden{display:none!important}
.rank-bg{position:absolute;inset:0;background:linear-gradient(rgba(10,0,0,.35),rgba(0,0,0,.48)),url("./assets/danger_alert.jpg") center/cover no-repeat;animation:rankZoom .8s ease-out}
.rank-box{position:relative;z-index:2;text-align:center;background:rgba(5,0,0,.74);border:2px solid #ff3543;padding:30px 48px;box-shadow:0 0 55px rgba(255,0,40,.55)}
.rank-box p{color:#ff5c68;font-weight:950;letter-spacing:.18em}
.rank-box h2{font-size:clamp(56px,9vw,118px);margin:6px;color:white;text-shadow:0 0 28px #f22}
.rank-box strong{display:block;font-size:clamp(24px,4vw,48px);color:#ff6974}
.rank-box span{display:block;margin-top:12px;color:#ffd0d4;font-size:12px;letter-spacing:.12em}
@keyframes rankZoom{from{transform:scale(1.12);filter:blur(3px)}to{transform:scale(1);filter:none}}

/* ===== v12: cover replacement; camera/MediaPipe CSS untouched ===== */
#startScreen{position:relative;overflow:hidden;background:#02040a!important}
.cover-art-v12{
  position:absolute;inset:0;z-index:0;
  background:url("./assets/cover_v12.png") center/cover no-repeat;
  animation:coverBreath 10s ease-in-out infinite alternate;
}
.cover-shade-v12{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.08) 55%,rgba(0,0,0,.70) 100%);
}
#startScreen>*:not(.cover-art-v12):not(.cover-shade-v12){position:relative;z-index:2}
@keyframes coverBreath{from{transform:scale(1.01)}to{transform:scale(1.055)}}

/* Monster life-like motion: no hand tracking code involved */
.alien img{transform-origin:50% 70%;animation:alienIdle 1.7s ease-in-out infinite alternate}
.alien.fast img{animation:alienFast .42s ease-in-out infinite alternate}
.alien.tank img{animation:alienTank 2.1s ease-in-out infinite alternate}
.alien.elite img{animation:alienElite .85s ease-in-out infinite alternate}
.alien.hit img{animation:alienHit .13s linear 2!important}
@keyframes alienIdle{
  from{transform:translateY(2px) rotate(-1deg) scale(1)}
  to{transform:translateY(-7px) rotate(1.2deg) scale(1.035)}
}
@keyframes alienFast{
  from{transform:translateX(-5px) rotate(-3deg)}
  to{transform:translateX(7px) rotate(3deg)}
}
@keyframes alienTank{
  from{transform:scale(.99) translateY(2px)}
  to{transform:scale(1.045) translateY(-3px)}
}
@keyframes alienElite{
  from{filter:brightness(.82) saturate(1.15);transform:scale(1)}
  to{filter:brightness(1.25) saturate(1.5);transform:scale(1.055)}
}

/* Boss behavior visuals */
.alien.boss img{animation:bossBreathe 1.25s ease-in-out infinite alternate!important}
.alien.boss.boss-charge img{animation:bossCharge .52s ease-in-out infinite alternate!important}
.alien.boss.boss-roar img{animation:bossRoarVisual .09s linear 7!important}
.alien.boss.boss-rage img{animation:bossRage .28s ease-in-out infinite alternate!important}
@keyframes bossBreathe{
 from{transform:scale(.98);filter:brightness(.75) contrast(1.25)}
 to{transform:scale(1.045);filter:brightness(.98) contrast(1.35) drop-shadow(0 0 25px #8f4cff)}
}
@keyframes bossCharge{
 from{transform:scale(1);filter:brightness(.7)}
 to{transform:scale(1.10);filter:brightness(1.45) drop-shadow(0 0 45px #ff315c)}
}
@keyframes bossRoarVisual{
 0%{transform:translate(-7px,1px) scale(1.06)}
 50%{transform:translate(8px,-2px) scale(1.09)}
 100%{transform:translate(-4px,3px) scale(1.06)}
}
@keyframes bossRage{
 from{transform:scale(1.03);filter:brightness(.82) saturate(1.3)}
 to{transform:scale(1.10);filter:brightness(1.25) saturate(1.8) drop-shadow(0 0 48px #ff183f)}
}

.boss-telegraph{
 position:absolute;left:50%;top:19%;transform:translateX(-50%);z-index:30;
 min-width:250px;padding:12px 24px;text-align:center;
 background:rgba(15,0,4,.82);border:1px solid #ff3b53;
 box-shadow:0 0 28px rgba(255,30,60,.5);pointer-events:none
}
.boss-telegraph.hidden{display:none!important}
.boss-telegraph b{display:block;color:#ff4d61;font-size:20px;letter-spacing:.15em}
.boss-telegraph span{display:block;color:#fff;margin-top:4px;font-size:11px;letter-spacing:.2em}
#arena.boss-impact{animation:bossImpact .18s linear 3}
@keyframes bossImpact{
 0%{transform:translate(0,0);filter:none}
 25%{transform:translate(-8px,3px);filter:brightness(1.35)}
 50%{transform:translate(7px,-4px);filter:brightness(.72)}
 75%{transform:translate(-4px,5px)}
 100%{transform:none}
}

/* v13 clean cover: preserve the artwork, only show CTA */
#startScreen .start-card{
  position:absolute!important;
  inset:auto 0 5.5% 0!important;
  width:100%!important;
  z-index:3!important;
  text-align:center!important;
  pointer-events:none;
}
#startScreen .start-card .btn{
  pointer-events:auto;
  min-width:220px;
  min-height:58px;
  padding:0 34px;
  font-size:18px;
  letter-spacing:.04em;
  border:1px solid rgba(163,204,255,.5);
  background:linear-gradient(135deg,rgba(27,122,178,.94),rgba(110,80,218,.94));
  box-shadow:0 10px 28px rgba(0,0,0,.5),0 0 24px rgba(101,125,255,.25);
}
#startScreen .start-card .status{
  margin:8px auto 0;
  max-width:520px;
  min-height:18px;
  font-size:11px;
  color:rgba(221,229,245,.72);
  text-shadow:0 2px 8px #000;
}

/* v14: keep required runtime diagnostics without covering the cover */
.runtime-diag-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  pointer-events:none!important;
}

/* Make CTA definitely clickable above all cover layers */
#startScreen .start-card{
  pointer-events:auto!important;
}
#startScreen #startCamera{
  position:relative!important;
  z-index:20!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}
.cover-art-v12,.cover-shade-v12{
  pointer-events:none!important;
}


/* =========================================================
   v15 RESULT SCREEN
   Keeps game data dynamic while matching supplied cover style.
   ========================================================= */
.result-screen-v15{
  position:relative;
  align-items:stretch!important;
  justify-content:stretch!important;
  overflow:hidden;
  background:#03040b;
}

.result-bg-v15{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(rgba(5,3,14,.05),rgba(5,3,14,.12)),
    url("./assets/result_screen_bg.jpg") center/cover no-repeat;
}

/* Soft masks cover the sample text/numbers already baked into the reference art. */
.result-dynamic-v15{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}

.winner-mask-v15{
  position:absolute;
  left:18%;
  right:18%;
  top:17%;
  height:20%;
  background:
    radial-gradient(ellipse at center,rgba(18,10,39,.97) 0%,rgba(12,8,28,.94) 55%,rgba(12,8,28,0) 79%);
  filter:blur(4px);
}

.winner-title-v15{
  position:absolute;
  left:50%;
  top:18.5%;
  transform:translateX(-50%);
  width:72%;
  margin:0;
  text-align:center;
  font-size:clamp(52px,7.7vw,118px);
  line-height:.95;
  letter-spacing:.018em;
  font-weight:950;
  color:#f5f2ff;
  text-shadow:
    0 3px 0 #8b7dcc,
    0 8px 0 rgba(26,16,58,.82),
    0 0 26px rgba(164,113,255,.86),
    0 0 52px rgba(112,65,255,.52);
  -webkit-text-stroke:1px rgba(255,255,255,.68);
}

.score-panel-v15{
  position:absolute;
  top:39.7%;
  width:31.2%;
  height:30.7%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,rgba(12,8,30,.92),rgba(8,6,22,.88));
  border:1px solid rgba(175,131,255,.65);
  box-shadow:
    inset 0 0 30px rgba(93,64,170,.22),
    0 0 18px rgba(136,92,255,.28);
  clip-path:polygon(3% 0,95% 0,100% 7%,100% 92%,94% 100%,4% 100%,0 93%,0 8%);
}

.p1-result-v15{left:16.2%}
.p2-result-v15{right:16.2%}

.score-panel-v15 span{
  font-size:clamp(15px,2.05vw,34px);
  letter-spacing:.055em;
  font-weight:900;
  color:#b892ff;
  text-shadow:0 0 16px rgba(151,94,255,.72);
}

.score-panel-v15 strong{
  display:block;
  margin:12px 0 4px;
  font-size:clamp(62px,8.7vw,138px);
  line-height:.9;
  letter-spacing:.025em;
  color:#f4f2ff;
  -webkit-text-stroke:1px rgba(255,255,255,.58);
  text-shadow:
    0 5px 0 rgba(91,77,143,.76),
    0 10px 18px rgba(0,0,0,.7),
    0 0 25px rgba(150,102,255,.4);
}

.score-panel-v15 p{
  margin:18px 0 0;
  color:#d9ccff;
  font-size:clamp(11px,1.35vw,23px);
  font-weight:650;
  text-align:center;
  white-space:nowrap;
  text-shadow:0 2px 10px #000;
}

.core-result-v15{
  position:absolute;
  left:50%;
  top:72.3%;
  transform:translateX(-50%);
  padding:6px 24px;
  min-width:330px;
  text-align:center;
  color:#c39bff;
  font-size:clamp(14px,1.75vw,28px);
  font-weight:850;
  letter-spacing:.055em;
  text-shadow:0 0 18px rgba(142,95,255,.75),0 2px 8px #000;
  background:rgba(9,6,22,.72);
  border-radius:999px;
}

.restart-v15{
  position:absolute;
  left:50%;
  top:81.8%;
  transform:translateX(-50%);
  min-width:270px;
  min-height:72px;
  padding:0 42px;
  pointer-events:auto;
  cursor:pointer;
  color:#f5f1ff;
  font:900 clamp(18px,2.3vw,36px)/1 Inter,system-ui,sans-serif;
  letter-spacing:.035em;
  background:
    linear-gradient(180deg,rgba(41,27,80,.96),rgba(17,11,41,.96));
  border:2px solid #a779ff;
  clip-path:polygon(11% 0,89% 0,100% 24%,100% 76%,89% 100%,11% 100%,0 76%,0 24%);
  box-shadow:
    inset 0 0 22px rgba(118,76,214,.38),
    0 0 20px rgba(127,75,255,.45),
    0 10px 30px rgba(0,0,0,.6);
  text-shadow:0 0 14px rgba(189,151,255,.78);
}

.restart-v15:hover{
  filter:brightness(1.22);
  transform:translateX(-50%) scale(1.035);
}

@media(max-width:800px){
  .winner-title-v15{top:19.5%;font-size:clamp(40px,9vw,74px)}
  .score-panel-v15{top:40%;width:35%;height:30%}
  .p1-result-v15{left:11%}
  .p2-result-v15{right:11%}
  .score-panel-v15 p{white-space:normal}
  .core-result-v15{top:73%;min-width:250px}
  .restart-v15{top:82.5%;min-width:220px;min-height:60px}
}

/* v16 — remove the baked-in CORE SURVIVAL / PLAY AGAIN artwork behind live controls */
.result-screen-v15::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:29%;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(4,3,13,0) 0%,
      rgba(4,3,13,.82) 27%,
      rgba(3,3,11,.96) 56%,
      rgba(3,3,10,.99) 100%);
}
.result-dynamic-v15{z-index:3!important}
.core-result-v15{
  top:75%!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.restart-v15{
  top:84%!important;
  z-index:10!important;
  pointer-events:auto!important;
}


/* =========================================================
   v17 VISUAL FX PASS
   Cinematic battlefield / energy combat polish only.
   Camera + MediaPipe hand tracking core intentionally unchanged.
   ========================================================= */

#gameScreen{background:#02040a}

.hud{
  background:linear-gradient(180deg,rgba(3,7,17,.96),rgba(4,8,18,.82));
  box-shadow:0 10px 30px rgba(0,0,0,.42);
  backdrop-filter:blur(10px);
}

#arena{
  isolation:isolate;
  background:
    linear-gradient(180deg,rgba(2,5,16,.14),rgba(2,4,12,.42)),
    radial-gradient(ellipse at 50% 14%,rgba(121,63,255,.28),transparent 36%),
    url("./assets/alien_city_bg.jpg") center 48%/cover no-repeat!important;
  box-shadow:inset 0 0 110px rgba(0,0,0,.64);
}

#arena:before{
  content:"";
  position:absolute;
  inset:-7%;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(15,16,45,.04),rgba(0,0,0,.30)),
    url("./assets/alien_city_bg.jpg") center 48%/cover no-repeat;
  opacity:.42;
  mix-blend-mode:screen;
  filter:saturate(1.22) contrast(1.08) brightness(.90);
  animation:bgDriftV17 13s ease-in-out infinite alternate;
}

@keyframes bgDriftV17{
  0%{transform:scale(1.035) translate(-.6%,.5%)}
  100%{transform:scale(1.095) translate(.8%,-1.1%)}
}

#arena:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 24% 15% at 50% 4%,
      rgba(255,255,255,.33) 0 2%,
      rgba(170,115,255,.28) 5%,
      rgba(100,49,255,.18) 18%,
      transparent 48%),
    radial-gradient(circle at 50% 45%,rgba(69,153,255,.12),transparent 24%),
    linear-gradient(90deg,rgba(0,0,0,.28),transparent 14%,transparent 86%,rgba(0,0,0,.28)),
    linear-gradient(180deg,rgba(0,0,0,.08),transparent 24%,transparent 70%,rgba(0,0,0,.42));
  box-shadow:inset 0 0 105px rgba(0,0,0,.44),inset 0 -90px 110px rgba(0,0,0,.36);
  animation:portalPulseV17 2.8s ease-in-out infinite alternate;
}

@keyframes portalPulseV17{to{filter:brightness(1.18) saturate(1.18)}}

.alien{
  overflow:visible!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.72)) drop-shadow(0 0 12px rgba(104,79,255,.12))!important;
}

.alien img{
  border-radius:28%;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 54%,rgba(0,0,0,.95) 66%,transparent 83%);
  mask-image:radial-gradient(ellipse at center,#000 54%,rgba(0,0,0,.95) 66%,transparent 83%);
  filter:contrast(1.22) saturate(1.10) brightness(.90);
}

.alien.fast img{filter:contrast(1.18) saturate(1.28) brightness(1.02)}
.alien.tank img{filter:contrast(1.28) saturate(.94) brightness(.82)}
.alien.elite img{filter:contrast(1.30) saturate(1.32) brightness(.92)}
.alien.boss img{
  -webkit-mask-image:radial-gradient(ellipse at center,#000 64%,rgba(0,0,0,.96) 76%,transparent 92%);
  mask-image:radial-gradient(ellipse at center,#000 64%,rgba(0,0,0,.96) 76%,transparent 92%);
  filter:contrast(1.38) saturate(1.12) brightness(.78)!important;
}

.core{
  width:116px;
  height:116px;
  border:1px solid rgba(123,232,255,.72);
  background:radial-gradient(circle,rgba(255,255,255,.98) 0 4%,rgba(98,215,255,.84) 5% 12%,rgba(86,117,255,.18) 24%,transparent 58%);
  box-shadow:0 0 24px rgba(104,219,255,.58),0 0 70px rgba(83,95,255,.30),inset 0 0 28px rgba(138,236,255,.18);
  animation:corePulseV17 1.35s ease-in-out infinite alternate;
}
.core:before{
  inset:12px;
  border:1px solid rgba(149,218,255,.46);
  box-shadow:0 0 18px rgba(99,205,255,.34);
}
.core span{
  color:#e8fbff;
  font-weight:900;
  text-shadow:0 0 10px rgba(90,218,255,.75);
}
@keyframes corePulseV17{to{transform:translate(-50%,-50%) scale(1.055);filter:brightness(1.17)}}

.hand-orb{
  width:52px;
  height:52px;
  margin:-26px;
  border:1px solid currentColor;
  background:radial-gradient(circle,currentColor 0 8%,transparent 42%);
  box-shadow:0 0 12px currentColor,0 0 34px currentColor,inset 0 0 16px currentColor;
}
.hand-orb:before{
  inset:-10px;
  border:1px solid currentColor;
  background:transparent;
  opacity:.26;
  animation:handRingV17 .85s linear infinite;
}
@keyframes handRingV17{
  from{transform:scale(.72);opacity:.48}
  to{transform:scale(1.22);opacity:0}
}

.slash{
  border-style:solid;
  border-color:currentColor transparent currentColor transparent!important;
  background:
    radial-gradient(circle at center,rgba(255,255,255,.16),transparent 45%),
    conic-gradient(from 25deg,transparent 0 18%,currentColor 20% 27%,transparent 30% 59%,currentColor 61% 67%,transparent 70%);
  opacity:.96;
  filter:drop-shadow(0 0 8px currentColor) drop-shadow(0 0 22px currentColor);
  mix-blend-mode:screen;
  animation:slashV17 .36s cubic-bezier(.12,.72,.28,1) forwards;
}
.slash:after{
  inset:22%;
  border:2px solid rgba(255,255,255,.68);
  box-shadow:0 0 14px currentColor;
}
@keyframes slashV17{
  0%{opacity:1;scale:.20;rotate:-9deg}
  42%{opacity:.96}
  100%{opacity:0;scale:1.68;rotate:10deg}
}

.energy-trail{
  height:12px;
  border-radius:50%;
  filter:blur(.2px) drop-shadow(0 0 8px currentColor);
  box-shadow:0 0 18px currentColor;
  mix-blend-mode:screen;
  animation:trailV17 .28s cubic-bezier(.12,.65,.28,1) forwards;
}
@keyframes trailV17{
  0%{opacity:1;scale:1 1.15}
  100%{opacity:0;scale:1.18 .15;filter:blur(7px)}
}

.swing-ribbon{
  position:absolute;
  height:4px;
  border-radius:999px;
  transform-origin:left center;
  pointer-events:none;
  z-index:5;
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 8px currentColor) drop-shadow(0 0 18px currentColor);
  animation:ribbonV17 .34s ease-out forwards;
}
@keyframes ribbonV17{
  0%{opacity:1;scale:1 1}
  100%{opacity:0;scale:1.22 .2}
}

.shockwave-v17{
  position:absolute;
  border:2px solid rgba(255,255,255,.8);
  border-radius:50%;
  pointer-events:none;
  z-index:6;
  mix-blend-mode:screen;
  box-shadow:0 0 18px currentColor,inset 0 0 14px currentColor;
  animation:shockV17 .42s ease-out forwards;
}
@keyframes shockV17{
  0%{opacity:.9;scale:.12}
  100%{opacity:0;scale:1.55}
}

.spark-v17{
  position:absolute;
  width:4px;
  height:18px;
  border-radius:999px;
  pointer-events:none;
  z-index:8;
  transform-origin:center;
  background:linear-gradient(#fff,currentColor 35%,transparent);
  box-shadow:0 0 8px currentColor;
  animation:sparkV17 .52s ease-out forwards;
}
@keyframes sparkV17{
  to{transform:translate(var(--sx),var(--sy)) rotate(var(--sr)) scaleY(.12);opacity:0}
}

.impact-flash-v17{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:7;
  background:radial-gradient(circle,#fff 0 7%,currentColor 12%,rgba(255,255,255,.28) 26%,transparent 68%);
  mix-blend-mode:screen;
  filter:blur(.3px) drop-shadow(0 0 18px currentColor);
  animation:flashV17 .24s ease-out forwards;
}
@keyframes flashV17{
  0%{opacity:1;scale:.18}
  100%{opacity:0;scale:1.35}
}

.explosion{
  background:radial-gradient(circle,#fff 0 5%,#c9f6ff 6% 10%,#7a73ff 11% 20%,#ff5f93 21% 32%,rgba(255,98,56,.46) 33% 48%,transparent 70%);
  box-shadow:0 0 40px rgba(124,91,255,.64),0 0 70px rgba(255,91,76,.28);
  mix-blend-mode:screen;
  animation:boomV17 .46s ease-out forwards;
}
@keyframes boomV17{
  0%{opacity:1;scale:.16;filter:brightness(2.2)}
  48%{opacity:.94}
  100%{opacity:0;scale:1.92;filter:blur(6px)}
}

#fxLayer{z-index:6;pointer-events:none}

#arena.extreme:after{
  background:
    radial-gradient(ellipse 26% 16% at 50% 5%,rgba(255,54,105,.28),transparent 46%),
    radial-gradient(circle at 50% 45%,rgba(119,53,255,.17),transparent 28%),
    linear-gradient(90deg,rgba(80,0,12,.33),transparent 16%,transparent 84%,rgba(80,0,12,.33)),
    linear-gradient(180deg,rgba(90,0,13,.12),transparent 32%,rgba(70,0,8,.28));
  box-shadow:inset 0 0 120px rgba(116,0,20,.36);
}

@media(max-width:700px){
  .core{width:88px;height:88px}
  .alien.basic{min-width:92px!important;min-height:92px!important}
  .alien.fast{min-width:82px!important;min-height:82px!important}
  .alien.tank{min-width:112px!important;min-height:112px!important}
  .alien.elite{min-width:128px!important;min-height:128px!important}
}


/* v18 cinematic arcade polish — visual layer only; MediaPipe/hand tracking core untouched */
.hud{height:82px;background:linear-gradient(180deg,rgba(3,7,18,.96),rgba(5,9,20,.78));backdrop-filter:blur(10px);border-bottom:1px solid rgba(110,177,255,.18);box-shadow:0 10px 40px rgba(0,0,0,.34)}
.player{position:relative;padding:8px 14px;min-width:220px}
.player:before{content:"";position:absolute;inset:0;border-top:1px solid currentColor;border-bottom:1px solid rgba(255,255,255,.04);opacity:.32;clip-path:polygon(0 0,90% 0,100% 50%,90% 100%,0 100%)}
.player.p1{color:var(--p1)}.player.p2{color:var(--p2)}
.player span,.player small{position:relative;z-index:1}.player strong{position:relative;z-index:1;text-shadow:0 0 16px currentColor}
.centerHud{position:relative;padding:5px 18px;border-left:1px solid rgba(255,255,255,.08);border-right:1px solid rgba(255,255,255,.08)}
#arena{isolation:isolate;background:#02040b}
.battle-atmosphere{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.portal-glow{position:absolute;left:50%;top:-15%;width:38vw;height:38vw;min-width:340px;min-height:340px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,#fff 0 1%,#b59aff 2% 5%,rgba(117,64,255,.62) 8%,rgba(89,38,255,.22) 26%,transparent 62%);filter:blur(1px) drop-shadow(0 0 45px rgba(130,73,255,.65));animation:portalBreath 2.4s ease-in-out infinite alternate}
@keyframes portalBreath{to{transform:translateX(-50%) scale(1.08);filter:brightness(1.28) drop-shadow(0 0 70px rgba(132,76,255,.9))}}
.fog{position:absolute;width:70%;height:45%;border-radius:50%;filter:blur(40px);opacity:.18;background:radial-gradient(ellipse,rgba(91,120,255,.5),transparent 70%);animation:fogDrift 9s ease-in-out infinite alternate}
.fog-a{left:-20%;bottom:2%}.fog-b{right:-22%;top:28%;animation-delay:-4s}
@keyframes fogDrift{to{transform:translate(8%,-4%) scale(1.12);opacity:.26}}
.embers{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(125,210,255,.8) 0 1px,transparent 1.5px),radial-gradient(circle,rgba(178,92,255,.72) 0 1px,transparent 1.5px);background-size:90px 90px,130px 130px;background-position:0 0,35px 50px;opacity:.15;animation:embersFloat 12s linear infinite}
@keyframes embersFloat{to{background-position:35px -90px,5px -80px}}
#alienLayer,#pickupLayer{z-index:3}.core{z-index:2}.cameraBox{width:180px;opacity:.38;transition:.2s}.cameraBox:hover{opacity:.9}
.controlBar{min-height:38px;background:rgba(3,6,14,.96);border-top:1px solid rgba(118,176,255,.13);font-size:11px;letter-spacing:.05em}
.alien{transition:filter .08s linear,opacity .1s linear;transform-origin:center center}
.alien:before{content:"";position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(circle,rgba(141,95,255,.16),transparent 64%);z-index:-1;filter:blur(8px)}
.alien.fast{animation:fastJitter .42s ease-in-out infinite alternate}.alien.tank{filter:drop-shadow(0 18px 26px rgba(0,0,0,.8)) saturate(.85)!important}.alien.elite:before{background:radial-gradient(circle,rgba(255,79,201,.23),transparent 66%)}
@keyframes fastJitter{to{margin-left:3px;filter:brightness(1.12) saturate(1.28) drop-shadow(0 12px 18px rgba(0,0,0,.7))!important}}
.alien.hit:after{content:"";position:absolute;inset:-16%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.92),rgba(134,211,255,.25) 23%,transparent 62%);mix-blend-mode:screen;animation:hitFlash18 .16s ease-out forwards}
@keyframes hitFlash18{from{opacity:1;scale:.45}to{opacity:0;scale:1.12}}
.alien-dead{animation:alienDeath18 .26s ease-in forwards!important;pointer-events:none}
@keyframes alienDeath18{to{opacity:0;scale:1.35;filter:brightness(2.2) blur(5px)}}
.floating-score{position:absolute;z-index:12;transform:translate(-50%,-50%);font-weight:1000;font-size:clamp(18px,2vw,30px);letter-spacing:.04em;text-shadow:0 0 8px #fff,0 0 22px currentColor;pointer-events:none;animation:scoreFloat18 .72s cubic-bezier(.12,.72,.24,1) forwards}.floating-score.p1{color:var(--p1)}.floating-score.p2{color:var(--p2)}
@keyframes scoreFloat18{0%{opacity:0;scale:.5;translate:0 8px}18%{opacity:1;scale:1.15}100%{opacity:0;scale:.9;translate:0 -58px}}
.death-fragment{position:absolute;width:6px;height:18px;z-index:11;border-radius:2px;box-shadow:0 0 10px currentColor;pointer-events:none;animation:frag18 .58s ease-out forwards}
@keyframes frag18{to{transform:translate(var(--fx),var(--fy)) rotate(var(--fr)) scale(.15);opacity:0}}
.boss-hp-wrap{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:min(540px,64%);z-index:12;text-align:center;pointer-events:none}.boss-hp-wrap.hidden{display:none!important}.boss-hp-wrap>span{font-size:10px;letter-spacing:.28em;font-weight:900;color:#ffd6e8;text-shadow:0 0 12px #ff4d91}.boss-hp-track{height:10px;margin-top:7px;border:1px solid rgba(255,104,161,.7);background:rgba(4,0,11,.75);box-shadow:0 0 20px rgba(255,56,128,.22);overflow:hidden;clip-path:polygon(2% 0,98% 0,100% 50%,98% 100%,2% 100%,0 50%)}.boss-hp-track i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#ff315e,#b64dff,#68c9ff);box-shadow:0 0 16px #ff4d93;transition:width .16s ease-out}
#arena.boss-enter:before{animation:bossEnterDark18 1.1s ease-out}
@keyframes bossEnterDark18{0%,42%{filter:brightness(.28) saturate(.7)}100%{filter:none}}
#arena.boss-enter{animation:bossEnterShake18 .11s linear 8}
@keyframes bossEnterShake18{25%{transform:translate(-4px,2px)}50%{transform:translate(5px,-2px)}75%{transform:translate(-2px,3px)}}
@media(max-width:700px){.hud{height:72px}.player{min-width:0;padding:6px 4px}.cameraBox{width:125px}.boss-hp-wrap{top:8px;width:72%}.controlBar{display:none}}


/* === v19 FORWARD ASSAULT / THREE LEVELS === */
#arena{perspective:900px;transform-style:preserve-3d;background:#02030a!important}
.world-depth{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;transform-style:preserve-3d}
.world-depth:before{content:"";position:absolute;inset:-7%;background:var(--scene-bg),url("./assets/alien_city_bg.jpg") center/cover no-repeat;transform:scale(1.07);animation:worldPush 4.8s linear infinite;filter:brightness(.62) contrast(1.18) saturate(1.15)}
.world-depth:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 38%,rgba(130,72,255,.30),transparent 20%),linear-gradient(90deg,rgba(0,0,0,.58),transparent 24% 76%,rgba(0,0,0,.58)),linear-gradient(transparent 56%,rgba(0,0,0,.52));mix-blend-mode:screen}
@keyframes worldPush{0%{transform:scale(1.04) translateY(-1%)}100%{transform:scale(1.16) translateY(2%)}}
.road-grid{position:absolute;left:-30%;right:-30%;bottom:-32%;height:75%;transform-origin:50% 100%;transform:perspective(520px) rotateX(64deg);background:repeating-linear-gradient(90deg,rgba(96,151,255,.08) 0 1px,transparent 1px 92px),repeating-linear-gradient(0deg,rgba(160,90,255,.10) 0 1px,transparent 1px 74px);animation:gridRush .78s linear infinite;opacity:.9}
@keyframes gridRush{to{background-position:0 74px}}
.side-geo{position:absolute;top:15%;bottom:0;width:24%;opacity:.82;filter:blur(.2px)}
.side-geo.left{left:-4%;background:linear-gradient(90deg,rgba(0,0,0,.95),rgba(30,47,78,.68),transparent);clip-path:polygon(0 0,80% 14%,62% 100%,0 100%)}
.side-geo.right{right:-4%;background:linear-gradient(270deg,rgba(0,0,0,.95),rgba(54,28,84,.68),transparent);clip-path:polygon(20% 14%,100% 0,100% 100%,38% 100%)}
.speed-lines{position:absolute;inset:0;background:repeating-linear-gradient(88deg,transparent 0 12%,rgba(160,210,255,.05) 12.2% 12.35%,transparent 12.6% 25%);animation:speedPulse .42s linear infinite;opacity:.65}
@keyframes speedPulse{50%{transform:scaleX(1.04);opacity:.9}}

#arena.scene-1{--scene-bg:linear-gradient(rgba(2,8,18,.14),rgba(2,4,10,.36))}
#arena.scene-2{--scene-bg:radial-gradient(circle at 50% 42%,rgba(100,255,153,.16),transparent 24%),linear-gradient(rgba(4,18,17,.22),rgba(1,7,8,.46));filter:saturate(1.12)}
#arena.scene-2 .world-depth:before{filter:hue-rotate(42deg) brightness(.49) contrast(1.32) saturate(1.35)}
#arena.scene-2 .road-grid{background:repeating-linear-gradient(90deg,rgba(74,255,181,.08) 0 1px,transparent 1px 86px),repeating-linear-gradient(0deg,rgba(186,65,255,.11) 0 1px,transparent 1px 68px)}
#arena.scene-3{--scene-bg:radial-gradient(circle at 50% 34%,rgba(202,54,255,.24),transparent 22%),linear-gradient(rgba(7,1,15,.12),rgba(0,0,0,.56))}
#arena.scene-3 .world-depth:before{filter:hue-rotate(-34deg) brightness(.42) contrast(1.5) saturate(1.62);animation-duration:3.4s}
#arena.scene-3 .road-grid{animation-duration:.48s;opacity:1}
#arena.scene-transition:after{content:"";position:absolute;inset:0;z-index:25;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.24),rgba(104,53,255,.22) 35%,transparent 72%);animation:sceneFlash .9s ease-out forwards}
@keyframes sceneFlash{0%{opacity:1}100%{opacity:0}}
.level-banner{position:absolute;left:50%;top:14%;z-index:30;transform:translate(-50%,-12px) scale(.95);opacity:0;text-align:center;letter-spacing:.16em;text-shadow:0 0 24px #7a50ff;pointer-events:none;transition:.24s ease}
.level-banner b{display:block;font-size:clamp(14px,1.5vw,22px);color:#ff5b79}.level-banner span{display:block;font-size:clamp(18px,2.4vw,38px);font-weight:1000;color:white}
.level-banner.show{opacity:1;transform:translate(-50%,0) scale(1)}

/* Fake volumetric monster presentation: no rectangular card feel. */
.alien{background:transparent!important;border:0!important;overflow:visible!important;border-radius:42% 46% 38% 50%!important;transform-style:preserve-3d;will-change:transform,filter,opacity}
.alien:before{content:"";position:absolute;inset:12% 8% -8%;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.72),transparent 70%);filter:blur(12px);transform:translateZ(-30px) translateY(18px);z-index:-1}
.alien img{border-radius:44% 48% 42% 50%;-webkit-mask-image:radial-gradient(ellipse at center,#000 48%,rgba(0,0,0,.94) 62%,transparent 84%);mask-image:radial-gradient(ellipse at center,#000 48%,rgba(0,0,0,.94) 62%,transparent 84%);box-shadow:inset -22px 0 26px rgba(0,0,0,.28),inset 16px 0 22px rgba(130,80,255,.12);backface-visibility:hidden}
.alien.fast img{animation-duration:.30s!important}.alien.elite img{animation-duration:.58s!important}
.alien.hit{filter:brightness(2.2) contrast(1.4)!important}
.alien-dead{animation:monsterBurst .28s ease-out forwards!important}
@keyframes monsterBurst{to{opacity:0;filter:brightness(2.4) blur(6px);transform:scale(1.45) rotateZ(10deg)}}

/* stronger impact without increasing particle count too much */
#arena.shake{animation:shakeV19 .22s linear}
@keyframes shakeV19{20%{transform:translate3d(-9px,3px,0) rotate(-.25deg)}45%{transform:translate3d(8px,-4px,0) rotate(.22deg)}70%{transform:translate3d(-5px,2px,0)}100%{transform:none}}
.impact-flash-v17{filter:blur(1px) drop-shadow(0 0 24px currentColor)!important}
.energy-trail,.swing-ribbon{mix-blend-mode:screen;filter:drop-shadow(0 0 10px currentColor)}
.cameraBox{transform:scale(.74);transform-origin:bottom right;opacity:.46;transition:opacity .2s}.cameraBox:hover{opacity:.88}

/* keep the tracking thread responsive: cap costly decorative elements */
.goo:nth-of-type(n+13),.spark-v17:nth-of-type(n+13){display:none}

/* v20 PERFORMANCE-FIRST debug monitor: only created with ?debug=1 */
.perf-monitor{position:absolute;left:10px;bottom:10px;z-index:9999;margin:0;padding:8px 10px;border:1px solid rgba(120,220,255,.35);background:rgba(0,8,18,.72);color:#bfefff;font:11px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;pointer-events:none;white-space:pre}


/* v22 — gesture-only attacks + explicit level/rank progression */
.rank-badge,.level-progress{display:block;font-size:9px;letter-spacing:.12em;color:rgba(230,244,255,.82);margin-top:2px}.rank-badge{color:#ffe88a;font-weight:900}.level-progress{opacity:.74}
.level-banner small{display:block;margin-top:5px;font-size:10px;letter-spacing:.22em;color:rgba(235,244,255,.72)}
.level-transition{position:absolute;inset:0;z-index:95;display:grid;place-items:center;background:radial-gradient(circle at 50% 46%,rgba(27,55,96,.34),rgba(0,0,0,.82) 58%,rgba(0,0,0,.94));pointer-events:none;opacity:1;transition:opacity .25s ease}.level-transition.hidden{display:none}.level-transition.out{opacity:0}.level-transition-box{text-align:center;padding:34px 44px;border-top:1px solid rgba(125,224,255,.55);border-bottom:1px solid rgba(210,119,255,.48);background:linear-gradient(90deg,transparent,rgba(5,12,29,.78),transparent);min-width:min(680px,86%);animation:levelPulse .72s ease both}.level-transition-box p{margin:0 0 8px;font-size:12px;letter-spacing:.36em;color:#79e9ff;font-weight:900}.level-transition-box h2{margin:0;font-size:clamp(28px,5vw,64px);line-height:1;text-shadow:0 0 24px rgba(88,216,255,.38);letter-spacing:.04em}.level-transition-box span{display:block;margin-top:14px;font-size:11px;letter-spacing:.16em;color:rgba(235,242,255,.72)}.level-transition-box strong{display:block;margin-top:18px;font-size:15px;letter-spacing:.16em;color:#ffe57d}.level-freeze #alienLayer{filter:blur(1px);opacity:.55}.level-freeze .speed-lines{animation-play-state:paused!important}
.hand-orb{opacity:.42}.hand-orb.live{opacity:.76}.hand-orb.swinging{opacity:1;box-shadow:0 0 0 7px rgba(255,255,255,.08),0 0 30px currentColor;transform:translate(-50%,-50%) scale(1.18)}
.alien{filter:drop-shadow(0 18px 28px rgba(0,0,0,.82)) contrast(1.16) saturate(1.12)}
@keyframes levelPulse{0%{transform:scale(.91);opacity:0}55%{transform:scale(1.035);opacity:1}100%{transform:scale(1);opacity:1}}

/* =========================================================
   v23 — DEPTH / THREAT / HUD CLARITY
   Visual/gameplay-only. Webcam + MediaPipe core untouched.
   ========================================================= */
.hud-v23{height:102px;grid-template-columns:minmax(210px,1fr) minmax(300px,420px) minmax(210px,1fr);background:linear-gradient(180deg,rgba(3,7,17,.98),rgba(3,7,17,.86));backdrop-filter:blur(8px)}
.hud-v23 .player{padding:4px 20px;min-width:0}
.hud-v23 .player strong{font-size:34px;line-height:1;text-shadow:0 0 22px currentColor}
.player-rank{margin-top:5px;font-style:normal;font-size:9px;letter-spacing:.18em;color:#ffe777;font-weight:900}
.centerHud{border:0!important;padding:0!important;display:grid;place-items:center;align-content:center;gap:1px}
.centerHud>#hudLevel{font-size:10px;letter-spacing:.26em;color:#8ea1bd;font-weight:850}
.centerHud>#hudScene{font-size:18px;line-height:1.05;letter-spacing:.12em;color:#fff;text-shadow:0 0 18px rgba(126,167,255,.35)}
.centerHud>#phaseLabel{font-size:9px;letter-spacing:.23em;color:#aab5ca}
.hud-subline{display:flex;align-items:center;gap:12px;margin-top:4px;color:#dbe8ff}.hud-subline b{font-size:15px}.hud-subline span{font-size:9px;letter-spacing:.12em;color:#8c9bb3}
.hud-hidden-compat{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}

/* Core becomes an in-world energy device instead of a cursor-like circle. */
.core-v23{width:118px!important;height:118px!important;border:0!important;background:radial-gradient(circle,rgba(143,231,255,.18),rgba(83,80,255,.08) 42%,transparent 70%)!important;box-shadow:0 0 70px rgba(94,172,255,.25)!important;overflow:visible!important;z-index:4!important}
.core-v23:before{display:none!important}.core-v23 span{position:relative;z-index:4;font-size:10px;font-weight:900;color:#effcff;text-shadow:0 0 14px #65d9ff}
.core-v23 small{position:absolute;left:50%;top:-29px;transform:translateX(-50%);width:190px;text-align:center;font-size:8px;letter-spacing:.18em;color:rgba(222,238,255,.72)}
.core-beam{position:absolute;left:50%;top:-170%;width:22px;height:440%;transform:translateX(-50%);background:linear-gradient(180deg,transparent,rgba(119,220,255,.06) 18%,rgba(112,194,255,.42) 48%,rgba(123,114,255,.18) 70%,transparent);filter:blur(6px);animation:coreBeam23 1.55s ease-in-out infinite alternate;pointer-events:none}
.core-ring{position:absolute;left:50%;top:50%;border:1px solid rgba(118,223,255,.62);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 18px rgba(96,207,255,.15);pointer-events:none}.ring-a{width:76px;height:76px;animation:coreRing23 5s linear infinite}.ring-b{width:118px;height:86px;transform:translate(-50%,-50%) rotateX(66deg);animation:coreRing23b 3.6s linear infinite reverse}.ring-c{width:150px;height:150px;border-color:rgba(162,103,255,.24);animation:corePulse23 2.2s ease-in-out infinite}
.core-stability{position:absolute;left:50%;top:-15px;transform:translateX(-50%);width:150px;height:5px;background:rgba(0,0,0,.56);border-radius:99px;overflow:hidden}.core-stability i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#5ce7ff,#77f0c0);box-shadow:0 0 12px rgba(103,232,255,.8)}
@keyframes coreBeam23{to{opacity:.62;transform:translateX(-50%) scaleX(1.35)}}@keyframes coreRing23{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes coreRing23b{to{transform:translate(-50%,-50%) rotateX(66deg) rotateZ(360deg)}}@keyframes corePulse23{50%{opacity:.4;transform:translate(-50%,-50%) scale(1.1)}}
#arena.core-hit .core-v23{animation:coreDamage23 .11s linear 2}#arena.core-hit .core-beam{background:linear-gradient(180deg,transparent,rgba(255,40,68,.18),rgba(255,45,73,.7),transparent)}
@keyframes coreDamage23{50%{transform:translate(-50%,-50%) scale(1.13);filter:hue-rotate(135deg) brightness(1.5)}}

/* Stronger forward parallax: several layers move at different speeds. */
.far-structures{position:absolute;left:-4%;right:-4%;bottom:14%;height:42%;background:repeating-linear-gradient(91deg,transparent 0 9%,rgba(55,78,127,.12) 9.2% 10.2%,transparent 10.5% 18%);transform:perspective(700px) translateZ(-60px);animation:farDrift23 5.4s ease-in-out infinite alternate;opacity:.52}
.near-structures{position:absolute;left:-9%;right:-9%;bottom:-8%;height:52%;background:linear-gradient(78deg,rgba(0,0,0,.76) 0 8%,transparent 9% 41%,transparent 59% 91%,rgba(0,0,0,.78) 92%),repeating-linear-gradient(88deg,transparent 0 16%,rgba(92,69,133,.13) 16.2% 17%,transparent 17.4% 29%);animation:nearRush23 .95s linear infinite;opacity:.68}
.forward-debris{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(194,219,255,.38) 0 1px,transparent 1.8px),radial-gradient(circle,rgba(177,104,255,.25) 0 1px,transparent 2px);background-size:160px 140px,230px 190px;animation:debrisRush23 .82s linear infinite;opacity:.34;mix-blend-mode:screen}
@keyframes farDrift23{to{transform:perspective(700px) translateZ(-30px) scale(1.05)}}@keyframes nearRush23{to{transform:scale(1.045) translateY(2.5%)}}@keyframes debrisRush23{to{background-position:28px 70px,-34px 95px}}
#arena.scene-2 .near-structures{opacity:.92;background:linear-gradient(78deg,rgba(5,25,20,.88) 0 15%,transparent 24% 76%,rgba(22,5,31,.9) 85%),repeating-linear-gradient(86deg,transparent 0 13%,rgba(76,255,187,.08) 13.2% 14%,transparent 14.3% 26%)}
#arena.scene-2 .side-geo{width:31%;opacity:.96}#arena.scene-2 .speed-lines{opacity:.82}
#arena.scene-3 .near-structures{opacity:.95;background:linear-gradient(80deg,rgba(8,0,14,.92) 0 13%,transparent 23% 77%,rgba(18,0,25,.94) 87%),repeating-linear-gradient(90deg,transparent 0 10%,rgba(255,38,78,.08) 10.2% 10.8%,transparent 11% 20%)}
#arena.scene-3:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 98%,rgba(255,35,68,.05) 98.2% 100%);animation:redThreat23 .55s steps(2) infinite;opacity:.45}@keyframes redThreat23{50%{opacity:.12}}

/* Depth tiers: FAR stays subtle, NEAR can invade/crop beyond frame edges. */
.alien.depth-far{filter:drop-shadow(0 8px 16px rgba(0,0,0,.68)) contrast(1.06) saturate(.86);opacity:.7}
.alien.depth-mid{filter:drop-shadow(0 18px 28px rgba(0,0,0,.84)) contrast(1.16) saturate(1.12)}
.alien.depth-near{filter:drop-shadow(0 28px 42px rgba(0,0,0,.94)) contrast(1.25) saturate(1.18);z-index:18}
.alien.depth-near img{-webkit-mask-image:radial-gradient(ellipse at center,#000 62%,rgba(0,0,0,.96) 76%,transparent 96%);mask-image:radial-gradient(ellipse at center,#000 62%,rgba(0,0,0,.96) 76%,transparent 96%)}
.alien.entry-left img{transform-origin:24% 52%}.alien.entry-right img{transform-origin:76% 52%}
.alien.hit,.alien.hit-strong{animation:none!important}.alien.hit img{filter:brightness(2.65) saturate(.3)!important;transform:scale(1.07)!important;transition:filter .08s,transform .08s}.alien.hit-strong img{filter:brightness(3) saturate(.15)!important;transform:scale(1.13) rotate(-2deg)!important;transition:filter .08s,transform .08s}

/* Tracking = subtle locator. Only SWING reads as an attack. */
.hand-orb{width:24px!important;height:24px!important;margin:-12px!important;border-width:1px!important;opacity:.12!important;box-shadow:0 0 8px currentColor!important;background:rgba(255,255,255,.02);transition:opacity .08s,transform .08s,box-shadow .08s}
.hand-orb:before{inset:7px!important;opacity:.18!important}.hand-orb.live{opacity:.30!important}.hand-orb.swinging{opacity:1!important;transform:scale(1.22)!important;box-shadow:0 0 0 5px rgba(255,255,255,.08),0 0 32px currentColor!important}
.energy-trail,.swing-ribbon{transform-origin:0 50%!important;border-radius:999px;filter:drop-shadow(0 0 10px currentColor) blur(.1px)}
.slash{opacity:.68}

/* Boss states visibly read as approach / roar / charge / retreat / rage. */
.alien.boss.boss-approach img{animation:bossApproach23 1.35s cubic-bezier(.18,.68,.2,1) both!important}.alien.boss.boss-retreat img{animation:bossRetreat23 .65s ease both!important}
@keyframes bossApproach23{0%{transform:scale(.45);filter:brightness(.45) blur(2px)}55%{transform:scale(1.12);filter:brightness(.95)}100%{transform:scale(1);filter:none}}@keyframes bossRetreat23{to{transform:scale(.84);filter:brightness(.55)}}

/* Portal meter no longer sits on top of the main level HUD. */
.phase-meter{top:auto!important;bottom:74px!important;width:min(360px,46%)!important;opacity:.82}.boss-hp-wrap{top:112px!important}

@media(max-width:820px){.hud-v23{grid-template-columns:1fr 190px 1fr;height:88px;padding:8px 10px}.hud-v23 .player{padding:2px 6px}.hud-v23 .player strong{font-size:25px}.centerHud>#hudScene{font-size:14px}.player-rank{font-size:8px}.core-v23{transform:translate(-50%,-50%) scale(.78)!important}.boss-hp-wrap{top:96px!important}}

/* v24 accuracy calibration: visible only with ?debug=1 */
.debug-attack-segment{position:absolute;height:2px;transform-origin:0 50%;pointer-events:none;z-index:9999;opacity:.8;background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(255,255,255,.28),transparent);box-shadow:0 0 10px currentColor}
.debug-attack-segment.p1{color:#56d8ff}.debug-attack-segment.p2{color:#ff64d2}


/* =========================================================
   v30 — MISSION HIGHLIGHT / REPLAY
   ========================================================= */
.result-screen-v15 .result-dynamic-v15{overflow:auto;padding-bottom:24px}
.highlight-panel-v30{position:absolute;left:50%;bottom:88px;transform:translateX(-50%);width:min(900px,88vw);display:grid;grid-template-columns:180px minmax(300px,1fr) 160px;gap:16px;align-items:center;padding:14px 16px;border:1px solid rgba(99,221,255,.24);background:linear-gradient(135deg,rgba(4,12,26,.90),rgba(16,7,29,.88));box-shadow:0 18px 55px rgba(0,0,0,.42),inset 0 0 28px rgba(85,213,255,.035);backdrop-filter:blur(12px);z-index:12}
.highlight-copy-v30 span{display:block;font-size:9px;letter-spacing:.22em;color:#65e4ff}.highlight-copy-v30 strong{display:block;margin-top:6px;font-size:16px;color:#fff}.highlight-copy-v30 small{display:block;margin-top:7px;line-height:1.45;color:#9fb2ca;font-size:10px}
.highlight-replay-v30{width:100%;aspect-ratio:16/9;object-fit:cover;background:#02050b;border:1px solid rgba(255,255,255,.1);box-shadow:0 0 28px rgba(62,202,255,.09)}
.highlight-actions-v30{display:grid;justify-items:center;gap:7px}.highlight-actions-v30 button{width:100%;padding:10px 8px;border:1px solid rgba(96,228,255,.42);background:rgba(50,202,255,.08);color:#e9fbff;font-weight:800;letter-spacing:.06em;cursor:pointer}.highlight-actions-v30 button:disabled{opacity:.35;cursor:not-allowed}.highlight-qr-v30{width:112px;height:112px;display:grid;place-items:center;background:#fff;color:#0a1420;font-weight:900;font-size:18px}.highlight-qr-v30 img,.highlight-qr-v30 canvas{width:112px!important;height:112px!important}.highlight-actions-v30 small{text-align:center;color:#91a5bd;font-size:9px;line-height:1.35}
@media(max-width:900px){.highlight-panel-v30{position:relative;left:auto;bottom:auto;transform:none;margin:18px auto 90px;grid-template-columns:1fr}.highlight-copy-v30{text-align:center}.highlight-actions-v30{grid-template-columns:1fr 112px;align-items:center}.highlight-actions-v30 small{grid-column:1/-1}}

/* v32 single-player layout */
.solo-mission-hud{text-align:right;display:flex;flex-direction:column;gap:3px}.solo-mission-hud span{font-size:10px;letter-spacing:.18em;color:var(--muted);font-weight:800}.solo-mission-hud strong{font-size:18px;color:#8beaff}.solo-mission-hud small{font-size:11px;color:#c1c7d5}.p2-result-v15{display:none!important}.highlight-replay-v30{aspect-ratio:16/9!important;max-height:none;width:100%!important;max-width:100%;object-fit:cover;background:#02050b}.highlight-panel-v30{align-items:center}.score-panel-v15.p1-result-v15{max-width:420px;margin-left:auto;margin-right:auto}