: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}
}