/* ZQ Stage4 — ラスボスの攻撃 v0.1.0
   足すだけ。既存の見た目は変えない。外せば演出だけが消える。 */

/* ---- 撃つ前のため（王者が光る） ---- */
#bgOgre.zqa-charge .ogre{ animation: zqaCharge .72s ease-out; }
@keyframes zqaCharge{
  0%{ filter:none; transform:translateX(-50%) scale(1); }
  45%{ filter:drop-shadow(0 0 26px rgba(190,120,255,.95)) brightness(1.25);
       transform:translateX(-50%) scale(1.035); }
  100%{ filter:none; transform:translateX(-50%) scale(1); }
}

/* ---- 飛んでくる球 ---- */
.zqa-ball{
  position:fixed; z-index:120; border-radius:50%; pointer-events:none;
  transform:translate(-50%,-50%);
  will-change:transform,opacity;
}
.zqa-ball.zqa-t0{ background:radial-gradient(circle at 36% 32%,#fff,#c98bff 34%,#7a2fd0 68%,rgba(60,10,110,.15) 78%);
  box-shadow:0 0 26px rgba(180,110,255,.85),0 0 60px rgba(140,60,230,.5); }
.zqa-ball.zqa-t1{ background:radial-gradient(circle at 36% 32%,#fff,#8fd6ff 34%,#2f7fd6 68%,rgba(10,50,110,.15) 78%);
  box-shadow:0 0 22px rgba(110,190,255,.85),0 0 48px rgba(60,140,230,.45); }
.zqa-ball.zqa-t2{ background:radial-gradient(circle at 36% 32%,#fff,#ffd98a 34%,#ff8a1a 68%,rgba(110,50,0,.15) 78%);
  box-shadow:0 0 20px rgba(255,190,90,.85),0 0 44px rgba(255,140,30,.45); }
/* 尾を引かせる */
.zqa-ball::after{
  content:''; position:absolute; inset:-30% -30%; border-radius:50%;
  background:inherit; opacity:.32; filter:blur(7px);
}

/* ---- 着弾 ---- */
.zqa-boom{
  position:fixed; z-index:121; width:12px; height:12px; pointer-events:none;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle,#fff,#ffd18a 34%,#ff5a4a 62%,transparent 70%);
  animation:zqaBoom .78s ease-out forwards;
}
@keyframes zqaBoom{
  0%{ opacity:0; width:14px; height:14px; }
  12%{ opacity:1; }
  100%{ opacity:0; width:330px; height:330px; }
}
.zqa-boom::after{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:18px; height:18px; border-radius:50%; border:4px solid rgba(255,160,120,.9);
  animation:zqaRing .78s ease-out forwards;
}
@keyframes zqaRing{
  0%{ opacity:.9; width:18px; height:18px; }
  100%{ opacity:0; width:380px; height:380px; border-width:1px; }
}

/* ---- 画面がゆれる ---- */
body.zqa-quake{ animation:zqaQuake .6s cubic-bezier(.36,.07,.19,.97); }
@keyframes zqaQuake{
  0%,100%{ transform:translate(0,0); }
  12%{ transform:translate(-9px,4px); }
  26%{ transform:translate(8px,-5px); }
  40%{ transform:translate(-6px,3px); }
  56%{ transform:translate(5px,3px); }
  72%{ transform:translate(-3px,-2px); }
  88%{ transform:translate(2px,1px); }
}

/* ---- 赤いフラッシュ（強い一撃のとき） ---- */
.zqa-flash{
  position:fixed; inset:0; z-index:119; pointer-events:none;
  background:radial-gradient(ellipse at 50% 70%,rgba(255,60,60,.34),rgba(255,0,0,.08) 60%,transparent 75%);
  animation:zqaFlash .5s ease-out forwards;
}
@keyframes zqaFlash{ 0%{opacity:0} 18%{opacity:1} 100%{opacity:0} }

/* ---- 当たったチーム ---- */
#heroes.zqa-hurt{ animation:zqaHurt .68s ease; }
@keyframes zqaHurt{
  0%{ transform:translateX(-50%) translateY(0); filter:none; }
  14%{ transform:translateX(-50%) translateY(7px) scale(.965);
       filter:brightness(1.7) saturate(.4) drop-shadow(0 0 12px rgba(255,90,90,.9)); }
  38%{ transform:translateX(-50%) translateY(0) scale(1.01); filter:brightness(1.2); }
  62%{ transform:translateX(-50%) translateY(3px); }
  100%{ transform:translateX(-50%) translateY(0); filter:none; }
}

/* ---- -10 の表示 ---- */
.zqa-dmg{
  position:fixed; z-index:122; transform:translate(-50%,-50%); pointer-events:none;
  font-family:-apple-system,BlinkMacSystemFont,'Hiragino Sans','Noto Sans JP',sans-serif;
  font-size:34px; font-weight:900; color:#ff6b6b;
  text-shadow:0 2px 0 #7a1010,0 0 18px rgba(255,80,80,.8);
  animation:zqaDmg 1.2s cubic-bezier(.2,.9,.3,1) forwards;
}
@keyframes zqaDmg{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.6); }
  16%{ opacity:1; transform:translate(-50%,-58%) scale(1.22); }
  34%{ transform:translate(-50%,-62%) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-135%) scale(.95); }
}

/* 動きを抑えたい人の設定を尊重する（数字だけ出す） */
@media (prefers-reduced-motion: reduce){
  .zqa-ball,.zqa-boom,.zqa-flash{ display:none!important; }
  body.zqa-quake,#heroes.zqa-hurt,#bgOgre.zqa-charge .ogre{ animation:none!important; }
}