/* Apuntar a cada robot convierte la batalla en un campo táctico. */
.field-unit{position:relative;width:clamp(48px,6.5vw,105px);padding:0;border:0;background-color:transparent;cursor:default}
.red-army .field-unit{cursor:crosshair}
.red-army .field-unit:hover,.red-army .field-unit.selected{z-index:5;outline:3px solid #ffdf6d;outline-offset:-12px;filter:hue-rotate(135deg) saturate(1.7) brightness(1.35) drop-shadow(0 0 22px #ffdf6d)}
.field-unit span{position:absolute;left:18%;right:18%;bottom:8%;height:5px;border:1px solid #ffffff88;background:#03101ddd;transform:scaleX(var(--flip,1))}
.field-unit span:after{content:"";display:block;width:var(--unit-hp,100%);height:100%;background:#55f0ff;transition:width .35s}
.red-army .field-unit span{--flip:-1}.red-army .field-unit span:after{background:#ff6c67}
.field-unit.destroyed{pointer-events:none;filter:grayscale(1) brightness(.35);opacity:.28;translate:0 24px}.field-unit.destroyed span{display:none}
.projectile{position:absolute;z-index:8;left:34%;top:48%;width:20px;height:8px;border-radius:50%;opacity:0;background:#dfffff;box-shadow:0 0 12px #63ecff,0 0 28px #63ecff;pointer-events:none}
.projectile.fire{animation:projectileBolt .48s cubic-bezier(.2,.7,.3,1)}
.projectile.fire.pulse{width:28px;height:28px;border:4px solid #fff17d;background:#ff9c42;box-shadow:0 0 18px #fff,0 0 40px #ff9b42}
.projectile.fire.emp{width:34px;height:34px;border:5px double #cf85ff;background:#6d3bff;box-shadow:0 0 22px #da8cff,0 0 50px #603cff}
.projectile.enemy{left:66%;background:#ffded9;box-shadow:0 0 12px #ff6c67,0 0 28px #ff6c67;animation-name:projectileEnemy}
@keyframes projectileBolt{0%{left:34%;opacity:1;scale:.5}70%{left:66%;opacity:1;scale:1.35}100%{left:68%;opacity:0;scale:2}}
@keyframes projectileEnemy{0%{left:66%;opacity:1;scale:.5}70%{left:34%;opacity:1;scale:1.35}100%{left:32%;opacity:0;scale:2}}
@media(max-width:700px){.field-unit{width:12vw}.red-army .field-unit.selected{outline-offset:-6px}.field-unit span{bottom:4%}}

/* Cámara en primera persona: los rivales corren por el terreno; el equipo propio queda detrás de la cámara. */
.battlefield .blue-army{display:none}.battlefield .red-army{left:7%;right:7%;top:16%;bottom:18%;width:auto;align-content:center;justify-content:space-around;gap:0}.battlefield .field-unit{width:clamp(70px,9vw,145px);aspect-ratio:.445;background-image:url('assets/equipo-coral.png');background-size:400% 100%;background-position:var(--battle-pos) 50%;filter:drop-shadow(0 20px 14px #000b);transform:none;animation:enemyStrafe var(--move-speed,2.4s) ease-in-out infinite alternate;will-change:translate}.battlefield .red-army .field-unit:hover,.battlefield .red-army .field-unit.selected{outline:3px solid #fff17b;outline-offset:-4px;filter:brightness(1.18) drop-shadow(0 0 24px #ffda55)}.battlefield .field-unit.fleeing{filter:drop-shadow(18px 12px 10px #0009) drop-shadow(0 0 14px #ffb24a99);animation-duration:.38s}.battlefield .field-unit.destroyed{filter:grayscale(1) brightness(.45);animation:unitDisable .45s forwards}.fp-weapon{position:absolute;z-index:10;right:-2%;bottom:-7%;width:min(72vw,940px);aspect-ratio:1.777;background:url('assets/blaster-primera-persona.png') center/contain no-repeat;filter:drop-shadow(0 28px 30px #000b);pointer-events:none;transform-origin:80% 85%}.fp-weapon.recoil{animation:recoil .28s ease-out}.crosshair{position:absolute;z-index:9;left:50%;top:48%;width:42px;height:42px;transform:translate(-50%,-50%);border:2px solid #bffaff;border-radius:50%;box-shadow:0 0 16px #50e7ff;pointer-events:none}.crosshair:before,.crosshair:after{content:"";position:absolute;background:#dfffff}.crosshair:before{left:19px;top:-10px;width:2px;height:60px}.crosshair:after{left:-10px;top:19px;width:60px;height:2px}.crosshair i{position:absolute;inset:17px;border-radius:50%;background:#fff}.damage-flash{position:absolute;z-index:12;inset:0;pointer-events:none}.damage-flash.hit{animation:damageFlash .38s}.projectile{top:45%;left:62%;transform:rotate(-14deg)}.projectile.fire{animation-name:fpBolt}.projectile.enemy{left:50%;transform:none;animation-name:enemyBolt}@keyframes enemyStrafe{from{translate:calc(var(--ai-x,0px) - 8px) calc(var(--ai-y,0px) + 3px)}to{translate:calc(var(--ai-x,0px) + 10px) calc(var(--ai-y,0px) - 4px)}}@keyframes unitDisable{to{translate:var(--ai-x,0px) calc(var(--ai-y,0px) + 35px);opacity:.2;filter:grayscale(1) brightness(.3)}}@keyframes recoil{35%{transform:translate(18px,16px) rotate(2deg)}100%{transform:none}}@keyframes fpBolt{0%{left:62%;top:66%;opacity:1;scale:.4}80%{left:50%;top:45%;opacity:1;scale:1.4}100%{left:50%;top:45%;opacity:0;scale:3}}@keyframes enemyBolt{0%{left:50%;top:42%;opacity:1;scale:.5}80%{left:62%;top:70%;opacity:1;scale:1.8}100%{left:65%;top:76%;opacity:0;scale:3}}@keyframes damageFlash{0%,100%{box-shadow:inset 0 0 0 0 #ff554400}45%{box-shadow:inset 0 0 90px 28px #ff5544aa}}
/* Mandos de un juego libre: selector de munición y cruceta táctil. */
.battlefield{cursor:none}.battlefield .orders,.battlefield .battle-hud,.battlefield .move-pad{cursor:auto}.orders button.active{border-color:#fff17b;background:linear-gradient(180deg,#264458,#102132);color:#fff7b8;box-shadow:inset 0 0 0 2px #fff17b44,0 0 22px #ffe76944}.move-pad{position:absolute;z-index:15;left:20px;bottom:20px;display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(2,52px);gap:6px}.move-pad button{border:1px solid #a8f7ff88;background:#071c2ddd;color:#d9fdff;font:900 22px system-ui;border-radius:10px;box-shadow:inset 0 0 16px #3ce8ff18;touch-action:none}.move-pad button:active{background:#35dceb;color:#07101c;transform:scale(.94)}.move-pad button:nth-child(1){grid-column:2}.move-pad button:nth-child(2){grid-column:1}.move-pad button:nth-child(3){grid-column:2}.move-pad button:nth-child(4){grid-column:3}.field-unit.hit{animation:targetHit .22s steps(2)!important}@keyframes targetHit{50%{filter:brightness(2.4) saturate(.25) drop-shadow(0 0 30px #fff17b);transform:scale(.94)}}
@media(max-width:700px){.battlefield .red-army{left:2%;right:2%;top:20%;bottom:24%}.battlefield .field-unit{width:16vw}.fp-weapon{width:92vw;right:-17%;bottom:5%}.crosshair{top:44%}.move-pad{left:10px;bottom:104px;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:4px}.move-pad button{font-size:18px}.orders{max-width:96%;gap:4px}.orders button{font-size:11px;padding:9px 6px}}

/* Visor Prisma: radar vivo, profundidad cinematográfica y respuesta de impacto. */
.battlefield:before{content:"";position:absolute;z-index:6;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 43%,transparent 22%,#02071122 60%,#020711cc 120%),repeating-linear-gradient(0deg,#74efff06 0 1px,transparent 1px 5px);mix-blend-mode:screen}.visor-frame{position:absolute;z-index:13;inset:86px 15px 106px;pointer-events:none}.visor-frame i{position:absolute;width:65px;height:65px;border-color:#8ef8ff;border-style:solid;filter:drop-shadow(0 0 8px #4defff)}.visor-frame i:nth-child(1){left:0;top:0;border-width:2px 0 0 2px}.visor-frame i:nth-child(2){right:0;top:0;border-width:2px 2px 0 0}.visor-frame i:nth-child(3){right:0;bottom:0;border-width:0 2px 2px 0}.visor-frame i:nth-child(4){left:0;bottom:0;border-width:0 0 2px 2px}.combat-radar{position:absolute;z-index:14;left:22px;top:105px;width:112px;padding:8px;border:1px solid #63efff66;background:#031321cc;backdrop-filter:blur(8px);clip-path:polygon(0 0,88% 0,100% 12%,100% 100%,0 100%)}.combat-radar strong,.combat-streak small,.energy-heat small{display:block;color:#8aefff;font:900 7px monospace;letter-spacing:.16em}.radar-dial{position:relative;width:88px;height:88px;margin:7px auto 0;border:1px solid #58eaff88;border-radius:50%;overflow:hidden;background:repeating-radial-gradient(circle,#49e9ff18 0 1px,transparent 1px 17px),linear-gradient(90deg,transparent 49%,#55ecff44 50%,transparent 51%),linear-gradient(transparent 49%,#55ecff44 50%,transparent 51%)}.radar-dial>i{position:absolute;inset:50% 50% 0 0;transform-origin:100% 0;background:linear-gradient(35deg,transparent,#67f3ff66);animation:radarSweep 2.2s linear infinite}.radar-dial:after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;translate:-50% -50%;border-radius:50%;background:#fff;box-shadow:0 0 10px #65efff}.radar-dial span{position:absolute;width:5px;height:5px;translate:-50% -50%;border-radius:50%;background:#ff6c67;box-shadow:0 0 8px #ff605b;transition:left .08s linear,top .08s linear}.combat-streak{position:absolute;z-index:14;right:22px;top:106px;min-width:135px;padding:10px 14px;border-right:3px solid #ffe36d;background:linear-gradient(90deg,transparent,#081423dd);text-align:right}.combat-streak b{display:block;color:#ffe36d;font:900 36px Impact;text-shadow:0 0 18px #ffb52f}.combat-streak b.pop{animation:streakPop .25s}.energy-heat{position:absolute;z-index:14;right:25px;bottom:125px;width:190px;padding:8px;background:#041421cc}.energy-heat i{display:block;height:7px;margin-top:5px;background:#ffffff16;transform:skewX(-18deg)}.energy-heat em{display:block;width:0;height:100%;background:linear-gradient(90deg,#4ff5ff,#9b78ff);box-shadow:0 0 12px #4defff}.energy-heat.hot small{color:#ffbd55}.energy-heat.hot em{background:linear-gradient(90deg,#ffba49,#ff554c);box-shadow:0 0 14px #ff4d42}.muzzle-flash{position:absolute;z-index:11;right:31%;bottom:32%;width:20px;height:20px;border-radius:50%;pointer-events:none}.muzzle-flash.fire{animation:muzzleFire .18s}.hit-marker{position:absolute;z-index:14;left:50%;top:48%;translate:-50% -50%;color:#fff;font:900 54px/1 Arial;opacity:0;text-shadow:0 0 10px #fff,0 0 25px #ffcf62;pointer-events:none}.hit-marker.show{animation:hitMarker .28s}.speed-lines{position:absolute;z-index:7;inset:-20%;opacity:0;pointer-events:none;background:repeating-conic-gradient(from 0deg at 50% 50%,transparent 0deg 8deg,#8cf5ff18 8.2deg 8.5deg);transition:opacity .15s}.battlefield.moving .speed-lines{opacity:1;animation:speedRush .8s linear infinite}.battlefield.moving .fp-weapon{animation:weaponBob .28s ease-in-out infinite alternate}.combat-intro{position:absolute;z-index:30;inset:0;display:grid;place-content:center;text-align:center;background:radial-gradient(circle,#082844aa,#020611f2);transition:opacity .4s,visibility .4s}.combat-intro.gone{opacity:0;visibility:hidden;pointer-events:none}.combat-intro small{color:#72edff;font:900 11px monospace;letter-spacing:.42em}.combat-intro b{font:900 clamp(110px,22vw,260px)/.9 Impact;color:#fff;text-shadow:0 0 30px #52eaff,0 0 90px #8b5cff}.combat-intro span{color:#ffe16d;font:900 20px Impact;letter-spacing:.25em}@keyframes radarSweep{to{rotate:360deg}}@keyframes streakPop{50%{scale:1.45;color:#fff}}@keyframes muzzleFire{0%{box-shadow:0 0 5px 3px #fff,0 0 25px 17px #55edff,0 0 70px 42px #9571ff;scale:.2;opacity:1}100%{box-shadow:0 0 0 40px transparent;scale:3;opacity:0}}@keyframes hitMarker{0%{opacity:1;scale:1.7}100%{opacity:0;scale:.7}}@keyframes speedRush{to{rotate:2deg;scale:1.04}}@keyframes weaponBob{to{transform:translateY(8px) rotate(.6deg)}}
@media(max-width:700px){.visor-frame{inset:72px 8px 100px}.combat-radar{left:8px;top:78px;width:82px}.radar-dial{width:60px;height:60px}.combat-streak{right:8px;top:80px;min-width:96px}.combat-streak small{display:none}.combat-streak b{font-size:28px}.energy-heat{right:8px;bottom:98px;width:135px}.energy-heat small{font-size:6px}.muzzle-flash{right:22%;bottom:36%}}

/* Arsenal especial ilustrado: tecnología ficticia, luminosa y de estilo arcade. */
.battlefield .orders{grid-template-columns:repeat(5,1fr);width:min(1050px,96vw)}.arsenal-icon{display:block;width:58px;height:38px;margin:-5px auto 3px;background-image:url('assets/arsenal-mega-prisma.png');background-repeat:no-repeat;background-size:200% 100%;filter:drop-shadow(0 0 8px #62ebff)}.arsenal-icon.mega{background-position:left center}.arsenal-icon.missile{background-position:right center}.orders button[data-order="missile"]{border-color:#42ddeb77}.orders button[data-order="mega"]{border-color:#b26cff88;background:linear-gradient(160deg,#25134a,#0c2034)}.orders button[data-order="mega"].active{box-shadow:inset 0 0 25px #9b5dff66,0 0 24px #8d56ff66}.orders button.spent{filter:grayscale(1);opacity:.38}.projectile.fire.missile{width:135px;height:72px;border:0;border-radius:0;background:url('assets/arsenal-mega-prisma.png') right center/200% 100% no-repeat;box-shadow:none;animation:missileFlight .72s cubic-bezier(.15,.55,.25,1)}.projectile.fire.mega{width:120px;height:120px;border:0;border-radius:0;background:url('assets/arsenal-mega-prisma.png') left center/200% 100% no-repeat;box-shadow:none;animation:megaFlight .95s cubic-bezier(.15,.55,.2,1)}.mega-shock{position:absolute;z-index:25;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0}.mega-shock i{width:170px;height:170px;background:url('assets/arsenal-mega-prisma.png') left center/200% 100% no-repeat;filter:drop-shadow(0 0 35px #6ef4ff)}.mega-shock.activate{animation:megaSky 1.25s ease-out}.mega-shock.activate i{animation:megaCore 1.05s ease-out}@keyframes missileFlight{0%{left:62%;top:67%;opacity:1;scale:.25;rotate:-18deg}72%{left:49%;top:43%;opacity:1;scale:1.15;rotate:-12deg}100%{left:49%;top:43%;opacity:0;scale:2;rotate:8deg}}@keyframes megaFlight{0%{left:62%;top:68%;opacity:1;scale:.18;rotate:0deg}65%{left:50%;top:45%;opacity:1;scale:.8;rotate:180deg}100%{left:50%;top:45%;opacity:0;scale:2.2;rotate:360deg}}@keyframes megaSky{0%{opacity:0;background:#7c52ff00}28%{opacity:1;background:#7c52ff28}65%{opacity:1;background:#d8fbffbb;box-shadow:inset 0 0 180px 80px #7255ff}100%{opacity:0;background:#fff}}@keyframes megaCore{0%{scale:.15;rotate:0deg}55%{scale:1;rotate:220deg}100%{scale:7;rotate:420deg;opacity:0}}
@media(max-width:700px){.battlefield .orders{grid-template-columns:repeat(5,1fr);gap:3px;padding:6px}.battlefield .orders button{padding:6px 3px;font-size:8px}.arsenal-icon{width:35px;height:24px}.projectile.fire.missile{width:88px;height:48px}.projectile.fire.mega{width:82px;height:82px}.mega-shock i{width:115px;height:115px}}

/* Canal diplomático: la paz requiere la decisión de los dos ejércitos. */
.peace-call{position:absolute;z-index:16;left:22px;top:226px;display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid #6ff0c1;background:#05251fdd;color:#9affd8;cursor:pointer;clip-path:polygon(0 0,90% 0,100% 30%,100% 100%,0 100%)}.peace-call b{font-size:20px}.peace-call span{font:900 9px monospace;letter-spacing:.1em}.peace-call:hover{background:#116149;color:#fff;box-shadow:0 0 24px #55f0b577}.peace-dialog{position:absolute;z-index:40;inset:0;display:grid;place-items:center;padding:20px;background:radial-gradient(circle,#12443dcc,#020711ee);backdrop-filter:blur(8px)}.peace-dialog[hidden]{display:none}.peace-dialog>div{width:min(560px,94vw);padding:36px;border:1px solid #7affce;background:linear-gradient(145deg,#092d2a,#071523);text-align:center;box-shadow:0 0 80px #4ff0b766;clip-path:polygon(0 0,94% 0,100% 10%,100% 100%,6% 100%,0 90%)}.peace-dialog small{color:#73eec2;font:900 9px monospace;letter-spacing:.24em}.peace-dialog b{display:block;margin:13px 0;color:#fff;font:900 clamp(38px,8vw,70px)/.95 Impact;text-shadow:0 0 20px #5fe8ba}.peace-dialog p{color:#b8dbd2;font-weight:700}.peace-dialog section{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}.peace-dialog section[hidden]{display:none}.peace-dialog button{padding:15px;border:1px solid #75f0c6;background:#0a6048;color:#fff;font:900 14px Impact;letter-spacing:.08em;cursor:pointer}.peace-dialog button+button{border-color:#ff8d87;background:#52232a}.peace-dialog button:hover{filter:brightness(1.25);transform:translateY(-2px)}
@media(max-width:700px){.peace-call{left:8px;top:158px;padding:6px 8px}.peace-call b{font-size:17px}.peace-call span{font-size:7px}.peace-dialog>div{padding:26px 18px}.peace-dialog section{grid-template-columns:1fr}}