#placementPreview { position:fixed; z-index:1100; left:50%; top:100px; transform:translateX(-50%); width:min(420px,80vw); padding:12px 18px; background:#09141ff2; border:1px solid #12d9f4; border-left:4px solid #b7f20c; color:#eafaff; box-shadow:0 6px 25px #0009; pointer-events:none; font:13px/1.4 var(--body); }
#placementPreview strong,#placementPreview span { display:block; }
#placementPreview strong { color:#b7f20c; margin-bottom:4px; }
#placementPreview.preview-denied { border-color:#ff315f; }
#placementPreview.preview-denied strong { color:#ff6387; }
.drag-active .preview-valid { outline:1px dashed #b7f20c88; outline-offset:-2px; box-shadow:inset 0 0 16px #b7f20c18; }
.battle-effect { position:absolute; z-index:35; inset:0; border:2px solid #b7f20c; box-shadow:0 0 20px #b7f20c88,inset 0 0 25px #b7f20c55; pointer-events:none; }
.battle-effect span { position:absolute; top:35%; left:50%; transform:translateX(-50%); white-space:nowrap; background:#07111ef0; padding:5px 8px; color:#caff46; font:900 15px var(--display); text-shadow:0 0 10px currentColor; }
.effect-glitch { border-color:#ff315f; box-shadow:0 0 20px #ff315f88; background:repeating-linear-gradient(0deg,transparent 0 9px,#ff315f33 10px 12px); }
.effect-glitch span { color:#ff6387; }
.effect-bonus::after { content:''; position:absolute; inset:10%; border:2px solid #b7f20c; border-radius:50%; animation:bonus-wave .9s ease-out both; }
.effect-glitch { animation:malus-glitch .18s steps(2) 4; }
@keyframes bonus-wave { from { transform:scale(.3); opacity:1; } to { transform:scale(1.65); opacity:0; } }
@keyframes malus-glitch { 25% { translate:-3px 0; } 75% { translate:3px 0; } }
@media(prefers-reduced-motion:reduce) { .effect-bonus::after,.effect-glitch { animation:none; } }
.effect-implant::before { content:''; position:absolute; left:50%; bottom:50%; height:85%; width:3px; background:#12d9f4; box-shadow:0 0 14px 4px #12d9f477; transform:rotate(18deg); transform-origin:bottom; }

#combatVfx { position:fixed; inset:0; z-index:1150; pointer-events:none; overflow:hidden; }
.combat-hit,.combat-beam { --fx:#b7f20c; position:absolute; pointer-events:none; }
.combat-laser { --fx:#ff4366; }.combat-hack { --fx:#bc83ff; }.combat-move,.combat-implant,.combat-draw { --fx:#12d9f4; }.combat-copy,.combat-memory { --fx:#dfadff; }
.combat-hit { width:var(--fx-size); height:var(--fx-size); margin-left:calc(var(--fx-size) / -2); margin-top:calc(var(--fx-size) / -2); animation:combat-hit-in .85s var(--fx-delay) both; }
.combat-hit::before,.combat-hit::after { content:''; position:absolute; inset:0; border:2px solid var(--fx); border-radius:50%; box-shadow:0 0 14px var(--fx); animation:combat-ring .75s var(--fx-delay) both; }
.combat-hit::after { inset:15%; animation-delay:calc(var(--fx-delay) + .08s); }
.combat-hit span { position:absolute; top:85%; left:50%; transform:translateX(-50%); white-space:nowrap; color:var(--fx); background:#07111ef0; border-bottom:2px solid var(--fx); padding:4px 8px; font:900 14px/1.2 var(--display); }
.combat-laser.combat-hit::before { border-radius:0; border-width:3px; transform:rotate(45deg); }
.combat-hack.combat-hit::before { border-radius:0; background:repeating-linear-gradient(0deg,transparent 0 8px,#bc83ff44 9px 11px); }
.combat-implant.combat-hit::before { border-radius:18%; border-width:3px; }
.combat-copy.combat-hit::before,.combat-draw.combat-hit::before { border-radius:5%; inset:-10% 15%; }
.combat-beam { height:3px; transform-origin:left; background:var(--fx); box-shadow:0 0 10px var(--fx); animation:combat-ray .55s var(--fx-delay) both; }
.combat-move.combat-beam { height:5px; background:linear-gradient(90deg,transparent,var(--fx)); }
@keyframes combat-ray { 0% { opacity:0; transform:rotate(var(--angle)) scaleX(0); } 25% { opacity:1; transform:rotate(var(--angle)) scaleX(1); } 100% { opacity:0; transform:rotate(var(--angle)) scaleX(1); } }
@keyframes combat-hit-in { 0% { opacity:0; } 18%,65% { opacity:1; } 100% { opacity:0; translate:0 -12px; } }
@keyframes combat-ring { from { opacity:1; scale:.35; } to { opacity:0; scale:1.25; } }
@media(prefers-reduced-motion:reduce) { .combat-hit { animation:combat-still .65s both; }.combat-hit::before,.combat-hit::after { animation:none; box-shadow:none; }.combat-beam { display:none; } @keyframes combat-still { 0%,75% { opacity:1; } 100% { opacity:0; } } }