/* ====================[split: defense.css]==================== */
#worldBars{position:absolute;inset:0;pointer-events:none;z-index:14;overflow:hidden;}
.wbar{position:absolute;transform:translate(-50%,-100%);height:10px;display:none;
  border:2.5px solid var(--navy);border-radius:999px;
  background:rgba(255,255,255,.85);overflow:hidden;}
.wbar i{display:block;height:100%;background:#6ecf6e;}
.wbar.small{height:7px;border-width:2px;}
/* 襲来ゲージとボスHPは時間帯が重ならない(準備タイム/中盤以降)ので同じ位置に置く。
   トースト側で下限を確保しているため、出現情報とも重ならない。 */
#bossWrap{position:absolute;left:50%;transform:translateX(-50%);
  top:calc(74px + env(safe-area-inset-top));z-index:21;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  pointer-events:none;}
#bossWrap.hidden{display:none;}
#bossLabel{font-size:12px;font-weight:800;color:#fff;
  background:#8a2f70;padding:3px 12px;border-radius:999px;
  border:2.5px solid var(--navy);}
#bossBar{width:min(64vw,260px);height:13px;border-radius:999px;
  background:rgba(255,255,255,.85);border:2.5px solid var(--navy);
  overflow:hidden;}
#bossFill{height:100%;width:100%;background:#ff4bd8;transition:width .25s;}
#bossBox{position:absolute;transform:translate(-50%,-50%);
  border:3.5px solid #ff4bd8;border-radius:10px;pointer-events:none;z-index:14;
  box-shadow:0 0 12px rgba(255,75,216,.55);}
#bossBox span{position:absolute;left:50%;bottom:-19px;transform:translateX(-50%);
  font-size:11px;font-weight:800;color:#ff4bd8;white-space:nowrap;}
#prepWrap{position:absolute;left:50%;transform:translateX(-50%);
  top:calc(74px + env(safe-area-inset-top));z-index:21;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  pointer-events:none;}
#prepWrap.hidden{display:none;}
#prepLabel{font-size:12px;font-weight:800;color:var(--navy);
  background:rgba(255,255,255,.9);padding:3px 12px;border-radius:999px;
  border:2.5px solid var(--navy);}
#prepBar{width:min(58vw,240px);height:12px;border-radius:999px;
  background:rgba(255,255,255,.85);border:2.5px solid var(--navy);
  overflow:hidden;}
#prepFill{height:100%;width:100%;border-radius:999px;
  background:linear-gradient(90deg,#ffd35c,#ff9b3d);}
#turBtn{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(38px + env(safe-area-inset-bottom));
  width:78px;height:78px;border-radius:50%;
  background:#fff;border:4px solid var(--navy);
  box-shadow:0 5px 0 rgba(44,58,85,.35);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;transition:transform .07s;z-index:30;
  pointer-events:auto;touch-action:manipulation;
  font-family:'Fredoka','M PLUS Rounded 1c',sans-serif;color:var(--navy);}
#turBtn b{font-size:16px;font-weight:800;}
#turBtn span{font-size:11px;font-weight:800;opacity:.75;}
#turBtn:active{transform:translateX(-50%) translateY(4px) scale(.96);}
#turBtn.hidden{display:none;}
/* まだ置ける砲台が残っているあいだ、ボタンから波紋を出して気づかせる */
#turBtn::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:3px solid var(--orange);opacity:0;pointer-events:none;}
#turBtn.ready::after{animation:turRipple 1.8s ease-out infinite;}
@keyframes turRipple{
  0%{transform:scale(1);opacity:.9;}
  70%{opacity:.25;}
  100%{transform:scale(1.9);opacity:0;}}
.turtype{display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  text-align:left;padding:11px 16px;}
.turtype span{font-size:11px;font-weight:700;opacity:.72;}
/* のこり0の砲台は、押せないことがひと目でわかるようにグレーアウト */
.turtype:disabled{background:#d7dbe2;color:#8a91a0;border-color:#b3bac6;
  box-shadow:0 3px 0 rgba(44,58,85,.12);text-shadow:none;cursor:default;}
.turtype:disabled span{opacity:.85;}
.btn.dusk{background:#b3542e;color:#ffe9c9;border-color:#5c2a14;
  text-shadow:0 2px 0 rgba(0,0,0,.35);}
.btn.dusk.mode span{opacity:.85;}
#hawkCam.nv span{display:none;}   /* ドローンカメラではタカアイ表記を出さない */
#hawkCam.nv{border-color:#59ffa0;
  box-shadow:0 0 10px rgba(80,255,150,.55),0 4px 14px rgba(0,0,0,.35);
  background:linear-gradient(rgba(90,255,150,.16),rgba(70,220,130,.16)),
    repeating-linear-gradient(0deg,rgba(8,40,20,.22) 0 2px,transparent 2px 4px);}
/* 映していた敵を撃墜したときの砂嵐。カメラ本体(緑の枠・グロー・ラベル)は生きたまま、
   映像部分だけが砂嵐になる。そのため inset:0 でボーダーの内側だけを覆う。
   ::afterは"DRONE CAM"の表示に使うのでノイズは::beforeで敷き、ラベルはその上に残す */
#hawkCam.dead::before{content:"";position:absolute;inset:0;border-radius:11px;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.5) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,transparent 1px 2px),
    linear-gradient(180deg,#5c6a60,#333d37);   /* 同じ機体の映像が落ちた感じを残す緑寄りの灰 */
  animation:camNoise .07s steps(3) infinite;}
/* 枠の内側に収めたいので、要素ごと動かさずに背景だけをずらす */
@keyframes camNoise{
  0%{background-position:0 0,0 0,0 0;}
  33%{background-position:0 2px,2px 0,0 0;}
  66%{background-position:0 -1px,-1px 0,0 0;}
  100%{background-position:0 -2px,1px 0,0 0;}}
#hawkCam.nv::after{content:"DRONE CAM";position:absolute;left:6px;top:4px;
  font-family:'Fredoka',sans-serif;font-size:9px;font-weight:800;
  color:#7dffb0;letter-spacing:.08em;text-shadow:0 0 4px rgba(0,0,0,.8);}
#photoUI{position:fixed;inset:0;z-index:40;touch-action:none;}
#photoHint{position:absolute;top:calc(14px + env(safe-area-inset-top));left:50%;
  transform:translateX(-50%);font-size:12px;font-weight:700;color:#fff;
  background:rgba(44,58,85,.75);padding:6px 14px;border-radius:999px;}
#photoTools{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));
  transform:translateX(-50%);display:flex;gap:6px;flex-wrap:wrap;
  justify-content:center;width:min(96vw,430px);}
#photoTools .btn{padding:10px 13px;font-size:14px;box-shadow:0 3px 0 rgba(44,58,85,.3);}
#photoResult{position:fixed;inset:0;z-index:60;background:rgba(20,26,40,.92);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));
  overflow-y:auto;}
#photoResult.hidden{display:none;}
#photoImg{max-width:88vw;max-height:62vh;border:4px solid #fff;border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);}
.pr-note{color:#fff;font-size:13px;font-weight:700;opacity:.85;}
.pr-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
#photoBtn{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(38px + env(safe-area-inset-bottom));    /* 下部センター(両親指の中間) */
  width:70px;height:70px;border-radius:50%;
  background:#fff;border:4px solid var(--navy);
  box-shadow:0 5px 0 rgba(44,58,85,.35);
  display:flex;align-items:center;justify-content:center;
  transition:transform .07s;z-index:30;
  pointer-events:auto;touch-action:manipulation;}
#photoBtn.alt{left:auto;right:18px;transform:none;
  bottom:calc(248px + env(safe-area-inset-bottom));}
#photoBtn.alt:active{transform:translateY(4px) scale(.96);}
#photoBtn.hidden,#photoUI.hidden{display:none;}
#photoBtn:active{transform:translateX(-50%) translateY(4px) scale(.96);}
#tgtBoxes{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:14;}
.tgt.def{border-color:#ff5ae0;}
.tgt.def span{color:#ff5ae0;}
.tgt{position:absolute;display:none;border:2px solid rgba(89,255,160,.9);
  box-shadow:0 0 7px rgba(89,255,160,.45);transform:translate(-50%,-50%);}
.tgt span{position:absolute;left:50%;top:100%;transform:translateX(-50%);
  margin-top:3px;font-size:10px;font-weight:800;color:#7dffb0;
  font-family:'Fredoka',sans-serif;text-shadow:0 0 4px rgba(0,0,0,.8);}
.tgt.alert{border-color:rgba(255,155,61,.95);
  box-shadow:0 0 7px rgba(255,155,61,.55);}
.tgt.alert span{color:#ffb267;}
.tgt.aim{border-color:#ff2612;border-width:3px;
  box-shadow:0 0 9px rgba(255,40,20,.6),inset 0 0 5px rgba(255,40,20,.3);
  animation:blink .22s steps(2) infinite;}
.tgt.aim span{color:#ff7a64;}
#combatUI{position:absolute;inset:0;pointer-events:none;z-index:21;}
#dmg{position:absolute;inset:0;opacity:0;transition:opacity .25s;
  background:radial-gradient(ellipse at center,transparent 45%,rgba(232,69,44,.55) 100%);}
#dmg.flash{opacity:1;transition:none;}
#reticle{position:absolute;left:50%;top:50%;width:26px;height:26px;z-index:14;
  transform:translate(-50%,-50%);border:2.5px solid rgba(159,243,255,.9);
  border-radius:50%;box-shadow:0 0 8px rgba(159,243,255,.5);
  transition:transform .08s;}
#reticle::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;
  transform:translate(-50%,-50%);background:rgba(159,243,255,.95);border-radius:50%;}
#reticle.hit{transform:translate(-50%,-50%) scale(1.55);
  border-color:#ffd35c;box-shadow:0 0 14px rgba(255,211,92,.9);}
@media (min-width:900px){ #stickBase,#flapBtn{opacity:.75;} }