/* V4 4.10.1 — readable battle flow and actual projectile visuals. */
html{scroll-behavior:auto}
.arena{isolation:isolate}
.battle-guide{position:absolute;top:8px;left:12px;right:12px;z-index:7;display:flex;justify-content:space-between;gap:7px;font-size:.77rem;font-weight:900;color:#fff7dd;pointer-events:none}
.battle-guide span{padding:3px 8px;border:1px solid #f0d19b;border-radius:8px;background:#172c35e8;box-shadow:0 3px 8px #0009}
.battle-guide span:first-child{border-color:#ffad91;background:#542c38eb}
.lane-names{top:42px;z-index:2}
.enemies{top:83px;bottom:210px;z-index:3}
.gate{z-index:2;bottom:202px}
.board{z-index:4}
.enemy{transition:none}
.enemy.marked{border-color:#e0adff;box-shadow:0 0 18px #d77eff,0 5px 16px #0009}
.enemy.chilled{filter:drop-shadow(0 0 5px #b9e5ff)}
.projectiles,.impacts{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.projectiles{z-index:6}.impacts{z-index:7}
.shot{position:absolute;left:0;top:0;width:13px;height:13px;border-radius:50%;background:var(--shot);border:2px solid #fffaf0;box-shadow:0 0 5px 2px var(--shot),0 0 18px 5px var(--shot);transform:translate(-50%,-50%)}
.shot::after{content:"";position:absolute;top:3px;left:-24px;width:24px;height:4px;border-radius:8px;background:linear-gradient(90deg,transparent,var(--shot));filter:drop-shadow(0 0 3px var(--shot))}
.shot.coffee{--shot:#ffab4b;width:16px;height:11px;border-radius:7px}
.shot.tea{--shot:#9ffb8f;width:12px;height:17px;border-radius:90% 10% 90% 10%}
.shot.lamp{--shot:#ffec8c;width:18px;height:18px}
.shot.tarot{--shot:#d5a2ff;width:16px;height:16px;border-radius:3px;transform:translate(-50%,-50%) rotate(45deg)}
.shot.bazi{--shot:#8de3ff;width:18px;height:18px;border:3px double #fff;border-radius:50%}
.impact{position:absolute;left:0;top:0;transform:translate(-50%,-50%);color:#fff;font-weight:900;text-shadow:0 2px 5px #000,0 0 12px var(--impact);white-space:nowrap;animation:impact-pop .48s ease-out forwards}
.impact .ring{display:block;width:35px;height:35px;border:3px solid var(--impact);border-radius:50%;box-shadow:0 0 14px var(--impact);margin:auto}
.impact .number{display:block;text-align:center;font-size:1rem;line-height:1.15}
.impact.kill .number{color:#ffe292;font-size:1.15rem}
.impact.breach .number{color:#ffadb0;font-size:1.15rem}
.slot.firing{border-color:#fff7b8;box-shadow:0 0 17px 5px #ffe18b9e,inset 0 0 15px #fff7aa55}
.arena.under-attack{box-shadow:inset 0 0 70px #fa676477,0 18px 50px #0008}
.arena.skill-active{box-shadow:inset 0 0 95px #8ee9d299,0 0 28px #a5f8e188}
.recruit-jump{position:absolute;right:10px;bottom:214px;z-index:8;display:none;padding:6px 9px;border:1px solid #ffe1a1;border-radius:10px;background:#153a41eb;color:#fff0bf;font-size:.75rem;font-weight:900;text-decoration:none;box-shadow:0 4px 12px #0008}
.message{padding:7px 10px;margin:3px 0 9px;border:1px solid #8bab83;border-radius:10px;background:#29443f;color:#fff2c7;line-height:1.35}
.advance{width:100%;margin:7px 0 16px}
.top button:disabled{opacity:.6;cursor:not-allowed}
.battle{scroll-margin-top:8px}.command{scroll-margin-top:10px}
@keyframes impact-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.18)}100%{opacity:0;transform:translate(-50%,-105%) scale(1)}}
@media(max-width:800px){
  .command{order:initial}
  .recruit-jump{display:block}
  .battle-guide{font-size:.68rem}
  .arena{min-height:478px}
  .enemies{top:77px;bottom:194px}
  .gate{bottom:187px}
  .board{bottom:9px}
  .recruit-jump{bottom:196px}
}
@media(max-width:520px){
  .arena{min-height:468px}
  .battle-guide{left:6px;right:6px;font-size:.61rem}
  .battle-guide span{padding:3px 5px}
  .lane-names{top:40px}
  .enemies{top:74px;bottom:194px}
  .enemy{min-height:44px}
  .message{font-size:.83rem}
  .hud>div{min-height:39px}
}
@media(prefers-reduced-motion:reduce){.impact{animation:none;opacity:1}.shot::after{display:none}}