/* ───────────────────────── Battlefield ─────────────────────────
   Everything inside .stage is sized in `cqw` (1% of the stage width), so the whole scene scales as
   one picture, like the original game's fixed-size battlefield. Stage coordinates are percentages
   of its 16:9 box. */

/* Side colours (--blue, --red, --gold, --ink, --panel …) come from the dark theme tokens in
   styles/tokens.css: the battlefield is always rendered inside data-theme="dark". */

html, body { height: 100%; }

.battle-scope .battle-root {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: radial-gradient(ellipse at center, #0b1626 0%, #02060c 75%);
  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: #fff; user-select: none; -webkit-user-select: none;
}

.battle-scope .stage {
  position: relative; overflow: hidden;
  width: min(100vw, calc(100vh * 16 / 9)); aspect-ratio: 16 / 9;
  container-type: size; background: #1b2b17;
  box-shadow: 0 0 6cqw rgba(0, 0, 0, .8);
}

/* ── Map ── */
/* The ground is still. It used to drift (a 46 s scale-and-shift) but this is a full-screen layer with a
   filter on it and blended layers above it (map-tint, scorch), so every frame of the drift re-processed
   all of it: switching it off removed the 100+ ms hitches (about one a second) in a 40-bot battle. */
.battle-scope .map { position: absolute; inset: -3%; background: url("assets/battleground.svg") center / cover; }
.battle-scope .map-tint { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(40, 120, 255, .20), rgba(40, 120, 255, 0) 38%, rgba(0, 0, 0, 0) 62%, rgba(255, 60, 40, .20)),
    radial-gradient(ellipse at 50% 38%, rgba(255, 244, 214, .22), transparent 55%); mix-blend-mode: soft-light; }
.battle-scope .vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55)); }

/* ── Screen shake (two names so the animation restarts on every shot) ── */
.battle-scope .world.shake-a { animation: shake-a .32s cubic-bezier(.36, .07, .19, .97); }
.battle-scope .world.shake-b { animation: shake-b .32s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake-a { 10%, 90% { transform: translate(-.15cqw, .1cqw); } 20%, 80% { transform: translate(.3cqw, -.2cqw); } 30%, 50%, 70% { transform: translate(-.5cqw, .25cqw); } 40%, 60% { transform: translate(.5cqw, -.25cqw); } }
@keyframes shake-b { 10%, 90% { transform: translate(-.15cqw, .1cqw); } 20%, 80% { transform: translate(.3cqw, -.2cqw); } 30%, 50%, 70% { transform: translate(-.5cqw, .25cqw); } 40%, 60% { transform: translate(.5cqw, -.25cqw); } }
.battle-scope .world { position: absolute; inset: 0; }
/* Tanks glide as the front line moves (FRONT_PUSH_MAX_PCT in battle/view.rs, layout::pushed). */
.battle-scope .tank { transition: left 2.4s cubic-bezier(.25, .8, .3, 1); }
@media (prefers-reduced-motion: reduce) { .battle-scope .tank { transition: none; } }

/* ── The formation grid: a faint hexagon under every place a tank can stand, the front-centre one (the
   viewer's, or the opponent's) lit. A still SVG in stage units, drawn under the tanks. ── */
.battle-scope .hexgrid { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.battle-scope .hexgrid polygon { fill: rgba(80, 160, 255, .05); stroke: rgba(150, 205, 255, .3); stroke-width: 1.2px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.battle-scope .hexgrid polygon.front { fill: rgba(80, 160, 255, .16); stroke: rgba(190, 225, 255, .75); }
/* The cell numbers, above the tanks, in each cell's upper-left corner. */
.battle-scope .hexnums { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.battle-scope .hexnums text { fill: #fff; stroke: rgba(0, 20, 50, .85); stroke-width: .35; paint-order: stroke; font: 800 1.45px var(--font-ui, sans-serif); text-anchor: middle; dominant-baseline: central; }
.battle-scope .hexnums.theirs text { stroke: rgba(50, 8, 4, .85); }
.battle-scope .hexgrid.theirs polygon { fill: rgba(255, 90, 70, .05); stroke: rgba(255, 170, 150, .3); }
.battle-scope .hexgrid.theirs polygon.front { fill: rgba(255, 90, 70, .16); stroke: rgba(255, 190, 170, .75); }

/* ── Who matters: your own gun is bright and big, everyone else's is smaller and fainter. In calm mode
   other tanks' flashes, damage numbers and hit shakes are not drawn at all. ── */
.battle-scope .tank:not(.you) .flash { filter: opacity(.5); scale: .65; }
.battle-scope .tank.you .flash { scale: 1.35; }
.battle-scope .tank:not(.you) .popup { filter: opacity(.6); font-size: 1.35cqw; }
.battle-scope .tank.you .popup { font-size: 2.3cqw; }
.battle-scope .battle-root.calm .tank:not(.you) .flash, .battle-scope .battle-root.calm .tank:not(.you) .popup { display: none; }
.battle-scope .battle-root.calm .tank:not(.you) .hitbox { animation: none; }

/* ── Tanks ── */
.battle-scope .tank { position: absolute; width: 9.6cqw; aspect-ratio: 200 / 120; transform: translate(-50%, -50%); pointer-events: none; }
.battle-scope .tank .rig { position: absolute; inset: 0; animation: idle 1.7s ease-in-out infinite; }
.battle-scope .tank .hitbox { position: absolute; inset: 0; }
@keyframes idle { 50% { transform: translateY(.08cqw) scale(1.004); } }
.battle-scope .tank img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.battle-scope .tank.enemy .body { transform: scaleX(-1); }
.battle-scope .tank .turret { position: absolute; inset: 0; transform-origin: 46% 50%; transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.battle-scope .tank .recoil-a { animation: recoil-a .42s cubic-bezier(.1, .8, .2, 1); }
.battle-scope .tank .recoil-b { animation: recoil-b .42s cubic-bezier(.1, .8, .2, 1); }
@keyframes recoil-a { 0% { transform: translateX(0); } 12% { transform: translateX(-7%); } 100% { transform: translateX(0); } }
@keyframes recoil-b { 0% { transform: translateX(0); } 12% { transform: translateX(-7%); } 100% { transform: translateX(0); } }
.battle-scope .tank .hit-a { animation: hit-a .45s ease-out; }
.battle-scope .tank .hit-b { animation: hit-b .45s ease-out; }
@keyframes hit-a { 0%, 100% { transform: translate(0, 0); } 15% { transform: translate(-.4cqw, .2cqw); } 35% { transform: translate(.35cqw, -.2cqw); } 60% { transform: translate(-.15cqw, .1cqw); } }
@keyframes hit-b { 0%, 100% { transform: translate(0, 0); } 15% { transform: translate(-.4cqw, .2cqw); } 35% { transform: translate(.35cqw, -.2cqw); } 60% { transform: translate(-.15cqw, .1cqw); } }

.battle-scope .tank .flash { position: absolute; left: 94%; top: 50%; width: 5cqw; height: 5cqw; margin: -2.5cqw 0 0 -1.2cqw; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 30% 50%, #fff 0 14%, #fff3a8 22%, #ffa42c 46%, rgba(255, 90, 0, 0) 72%); border-radius: 50%; transform-origin: 20% 50%; } /* plain alpha: a blended layer per tank (42) is composited against the whole scene */
.battle-scope .tank .flash-a { animation: flash-a .28s ease-out; }
.battle-scope .tank .flash-b { animation: flash-b .28s ease-out; }
@keyframes flash-a { 0% { opacity: 1; transform: scale(.4); } 35% { opacity: 1; transform: scale(1.1, .8); } 100% { opacity: 0; transform: scale(1.5, .6); } }
@keyframes flash-b { 0% { opacity: 1; transform: scale(.4); } 35% { opacity: 1; transform: scale(1.1, .8); } 100% { opacity: 0; transform: scale(1.5, .6); } }

.battle-scope .tank .tag { position: absolute; left: 50%; top: 96%; transform: translateX(-50%); white-space: nowrap; max-width: 15cqw; overflow: hidden; text-overflow: ellipsis;
  padding: .12cqw .8cqw .18cqw; border-radius: 1cqw; font-size: 1.05cqw; font-weight: 800; letter-spacing: .02em;
  background: rgba(10, 14, 20, .78); box-shadow: 0 .15cqw .5cqw rgba(0, 0, 0, .5), inset 0 0 0 .1cqw rgba(255, 255, 255, .12); }
.battle-scope .tank.friendly .tag { border-bottom: .22cqw solid var(--blue); }
.battle-scope .tank.enemy .tag { border-bottom: .22cqw solid var(--red); }
.battle-scope .tank.you .tag { background: rgba(12, 70, 26, .9); border-bottom-color: #54e07a; }

.battle-scope .tank .popup { position: absolute; left: 50%; top: -6%; transform: translateX(-50%); opacity: 0; font-size: 1.9cqw; font-weight: 900; color: var(--gold);
  /* A real outline instead of four offset shadows: one popup per shot, so this runs constantly. */
  -webkit-text-stroke: .3cqw #3a1c00; paint-order: stroke fill; text-shadow: 0 0 .6cqw rgba(255, 170, 0, .9); }
.battle-scope .tank .popup-a { animation: popup-a 1.15s ease-out; }
.battle-scope .tank .popup-b { animation: popup-b 1.15s ease-out; }
@keyframes popup-a { 0% { opacity: 0; transform: translate(-50%, 40%) scale(.5); } 15% { opacity: 1; transform: translate(-50%, -20%) scale(1.25); } 30% { transform: translate(-50%, -30%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -190%) scale(1); } }
@keyframes popup-b { 0% { opacity: 0; transform: translate(-50%, 40%) scale(.5); } 15% { opacity: 1; transform: translate(-50%, -20%) scale(1.25); } 30% { transform: translate(-50%, -30%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -190%) scale(1); } }

/* ── Shells and blasts ── */
.battle-scope .fx { position: absolute; pointer-events: none; }
.battle-scope .shell { position: absolute; width: 0; height: 0; left: var(--x0); top: var(--y0); animation: fly var(--ms) cubic-bezier(.35, 0, .85, .6) forwards; }
/* A shell starts at its muzzle (left/top, set once) and slides by (--dx, --dy) in stage units: `translate`
   runs on the compositor, where animating left/top made every shell in flight (up to ~100) re-lay-out each frame. */
@keyframes fly { to { translate: var(--dx) var(--dy); } }
.battle-scope .shell .body { position: absolute; width: 1.9cqw; height: .62cqw; margin: -.31cqw 0 0 -.95cqw; transform: rotate(var(--ang)); border-radius: .4cqw;
  background: linear-gradient(90deg, #ff7a1c, #fff4b0 55%, #fff); box-shadow: 0 0 1.2cqw .4cqw rgba(255, 130, 30, .75); animation: arc var(--ms) ease-in-out forwards; }
.battle-scope .shell .trail { position: absolute; width: 11cqw; height: .55cqw; margin: -.27cqw 0 0 -11cqw; transform: rotate(var(--ang)); transform-origin: 100% 50%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 190, 110, .55) 60%, rgba(255, 245, 200, .95)); border-radius: 1cqw; opacity: .9; }
@keyframes arc { 50% { scale: 1.45; } }

.battle-scope .blast { position: absolute; width: 0; height: 0; }
.battle-scope .blast .core { position: absolute; width: 12cqw; height: 12cqw; margin: -6cqw 0 0 -6cqw; border-radius: 50%; mix-blend-mode: screen; animation: core .6s ease-out forwards;
  background: radial-gradient(circle, #fff 0 18%, #fff0a0 28%, #ff9a2a 48%, #ff4a0a 62%, rgba(255, 60, 0, 0) 74%); }
@keyframes core { 0% { transform: scale(.15); opacity: 1; } 30% { opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.battle-scope .blast .wave { position: absolute; width: 13cqw; height: 13cqw; margin: -6.5cqw 0 0 -6.5cqw; border-radius: 50%; border: .3cqw solid rgba(255, 235, 200, .8); animation: wave .7s ease-out forwards; }
@keyframes wave { 0% { transform: scale(.1); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.battle-scope .blast .spark { position: absolute; width: .9cqw; height: .24cqw; margin: -.12cqw 0 0 -.45cqw; border-radius: 1cqw; background: linear-gradient(90deg, #fff, #ffb43a); box-shadow: 0 0 .5cqw #ff8a1c;
  transform: rotate(var(--a)); animation: spark .75s ease-out forwards; }
@keyframes spark { 0% { transform: rotate(var(--a)) translateX(0); opacity: 1; } 100% { transform: rotate(var(--a)) translateX(var(--d)); opacity: 0; } }
.battle-scope .blast .smoke { position: absolute; width: 5.5cqw; height: 5.5cqw; margin: -2.75cqw 0 0 -2.75cqw; border-radius: 50%;
  background: radial-gradient(circle, rgba(60, 56, 52, .85), rgba(30, 28, 26, 0) 70%); animation: smoke 1.6s ease-out forwards; animation-delay: var(--dl); opacity: 0; }
@keyframes smoke { 0% { transform: translate(0, 0) scale(.3); opacity: 0; } 20% { opacity: .9; } 100% { transform: translate(var(--sx), var(--sy)) scale(1.9); opacity: 0; } }

/* ── HUD shell ── */
.battle-scope .hud { position: absolute; inset: 0; pointer-events: none; }
.battle-scope .hud > * { pointer-events: auto; }
.battle-scope .hud-top { position: absolute; left: 0; right: 0; top: 0; height: 16cqw; pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 8, 18, .88), rgba(2, 8, 18, .55) 55%, transparent); }
.battle-scope .country { position: absolute; top: 1cqw; display: flex; align-items: center; gap: .7cqw; font-size: 1.7cqw; font-weight: 800; text-shadow: 0 .1cqw .4cqw #000; }
.battle-scope .country.left { left: 1.6cqw; } .battle-scope .country.right { right: 1.6cqw; flex-direction: row-reverse; }
.battle-scope .country .flag { font-size: 2.6cqw; line-height: 1; filter: drop-shadow(0 .15cqw .35cqw rgba(0, 0, 0, .7)); }
.battle-scope .country .role { font-size: 2cqw; line-height: 1; opacity: .9; filter: drop-shadow(0 .1cqw .3cqw #000); }
.battle-scope .country.left .name { color: #cfe6ff; } .battle-scope .country.right .name { color: #ffd6d0; }
.battle-scope .switch-side { position: absolute; top: 4.4cqw; right: 1.6cqw; display: inline-flex; align-items: center; gap: .4cqw; padding: .35cqw .8cqw; border: 1px solid rgba(255, 214, 208, .45); border-radius: 99px; background: rgba(2, 6, 12, .6); color: #ffd6d0; font: inherit; font-size: .9cqw; font-weight: 700; cursor: pointer; }
.battle-scope .switch-side:hover { background: rgba(120, 30, 20, .7); border-color: #ffd6d0; }
.battle-scope .clock { position: absolute; left: 50%; top: .8cqw; transform: translateX(-50%); text-align: center; text-shadow: 0 .1cqw .4cqw #000; }
.battle-scope .clock .time { font: 800 1.6cqw ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .08em; }
.battle-scope .clock .time.low { color: #ff7a6a; animation: blink 1s steps(2) infinite; }
.battle-scope .clock .title { font-size: 1.15cqw; font-weight: 700; margin-left: .8cqw; opacity: .92; }
.battle-scope .clock .where { font-size: 1.15cqw; font-weight: 600; opacity: .8; margin-top: .1cqw; font-variant-numeric: tabular-nums; }
@keyframes blink { 50% { opacity: .35; } }

/* scoreboard */
.battle-scope .scorebar { position: absolute; left: 0; right: 0; top: 4.2cqw; height: 5.8cqw; display: grid; grid-template-columns: 17cqw 1fr 17cqw; align-items: center; pointer-events: none; }
.battle-scope .score { position: relative; height: 5.4cqw; filter: drop-shadow(0 0 1.1cqw var(--glow)); }
.battle-scope .score.left { --glow: rgba(58, 160, 255, .85); margin-left: 1.4cqw; } .battle-scope .score.right { --glow: rgba(255, 75, 58, .85); margin-right: 1.4cqw; }
.battle-scope .score .frame { position: absolute; inset: 0; clip-path: polygon(9% 0, 91% 0, 100% 50%, 91% 100%, 9% 100%, 0 50%);
  background: linear-gradient(180deg, #dfe9f7, #6f84a3 40%, #2b3a52 52%, #9fb2cf); }
.battle-scope .score.right .frame { background: linear-gradient(180deg, #f7e2df, #a37a72 40%, #52302b 52%, #cfa59f); }
.battle-scope .score .glass { position: absolute; inset: .28cqw; clip-path: polygon(9% 0, 91% 0, 100% 50%, 91% 100%, 9% 100%, 0 50%);
  background: linear-gradient(180deg, var(--c1), var(--c2) 55%, var(--c3)); display: flex; align-items: center; justify-content: center; gap: .32cqw; padding: 0 1.3cqw; }
.battle-scope .score.left { --c1: #1d63c4; --c2: #0b2f6e; --c3: #081d45; } .battle-scope .score.right { --c1: #c4321d; --c2: #6e1a0b; --c3: #451008; }
.battle-scope .score .glass::after { content: ""; position: absolute; left: 6%; right: 6%; top: 4%; height: 38%; border-radius: 3cqw 3cqw 40% 40%; background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0)); pointer-events: none; }
.battle-scope .digit { position: relative; width: 2cqw; height: 3.5cqw; display: grid; place-items: center; border-radius: .35cqw; overflow: hidden;
  background: linear-gradient(180deg, #000, #0d1118 50%, #000); box-shadow: inset 0 0 .4cqw rgba(0, 0, 0, .9), 0 0 0 .1cqw rgba(255, 255, 255, .18);
  font: 900 3cqw/1 ui-monospace, "SF Mono", Menlo, monospace; color: #fff; text-shadow: 0 0 .7cqw var(--glow); }
.battle-scope .digit::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: .08cqw; background: rgba(0, 0, 0, .8); }
.battle-scope .digit.pop { animation: roll .45s cubic-bezier(.2, .9, .2, 1); }
.battle-scope .digit.dim { opacity: .28; }
@keyframes roll { 0% { transform: translateY(-70%); opacity: 0; filter: blur(.25cqw); } 100% { transform: none; opacity: 1; } }

.battle-scope .tug { position: relative; margin: 0 .3cqw; align-self: end; }
.battle-scope .tug .count { position: absolute; top: -2.4cqw; font-size: 1.2cqw; font-weight: 800; display: flex; align-items: center; gap: .5cqw; text-shadow: 0 .1cqw .3cqw #000; }
.battle-scope .tug .count.l { left: 0; } .battle-scope .tug .count.r { right: 0; flex-direction: row-reverse; }
.battle-scope .pips { display: flex; gap: .22cqw; } .battle-scope .pip { width: 1.7cqw; height: .7cqw; transform: skewX(-24deg); border-radius: .12cqw; background: rgba(255, 255, 255, .15); }
.battle-scope .pips.l .pip.on { background: linear-gradient(180deg, #8fd2ff, #2f8fe8); box-shadow: 0 0 .5cqw rgba(60, 160, 255, .8); }
.battle-scope .pips.r .pip.on { background: linear-gradient(180deg, #ff9c8f, #e8412f); box-shadow: 0 0 .5cqw rgba(255, 80, 60, .8); }
.battle-scope .bar { position: relative; height: 1.9cqw; border-radius: 1cqw; overflow: hidden; background: #0a0f18; box-shadow: 0 0 0 .2cqw #1c2635, 0 .2cqw .8cqw rgba(0, 0, 0, .7); }
.battle-scope .bar .l { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #8fd8ff, #2a8ff0 50%, #165ec0); transition: width .7s cubic-bezier(.2, .8, .2, 1); }
.battle-scope .bar .r { position: absolute; right: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #ffb48a, #f0652a 50%, #c03a16); transition: width .7s cubic-bezier(.2, .8, .2, 1); }
.battle-scope .bar .seam { position: absolute; top: -20%; bottom: -20%; width: 1.4cqw; margin-left: -.7cqw; transition: left .7s cubic-bezier(.2, .8, .2, 1); background: radial-gradient(closest-side, #fff, rgba(255, 255, 255, 0)); mix-blend-mode: screen; animation: seam 1.4s ease-in-out infinite; }
@keyframes seam { 50% { opacity: .55; transform: scaleX(.7); } }
.battle-scope .bar::after { content: ""; position: absolute; inset: 0 0 50% 0; background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0)); }
.battle-scope .bar .pct { position: absolute; top: 50%; transform: translateY(-50%); font-size: 1.2cqw; font-weight: 800; text-shadow: 0 .1cqw .3cqw #000; z-index: 2; }
.battle-scope .bar .pct.l { left: 1cqw; } .battle-scope .bar .pct.r { right: 1cqw; }

.battle-scope .tools { position: absolute; left: 50%; top: 10.6cqw; transform: translateX(-50%); display: flex; gap: .6cqw; }
.battle-scope .tool { width: 3cqw; height: 3cqw; display: grid; place-items: center; font-size: 1.5cqw; cursor: pointer; border-radius: .7cqw; color: #dbe7f6; border: .12cqw solid rgba(255, 255, 255, .22);
  background: linear-gradient(180deg, rgba(40, 56, 80, .85), rgba(14, 22, 36, .9)); transition: transform .12s, border-color .12s; }
.battle-scope .tool:hover { transform: translateY(-.15cqw); border-color: var(--gold); }
/* Line icons (calm, stats) scale with the bar like the emoji glyphs, not at their fixed 18px. */
.battle-scope .tool .icon { width: 1.1em; height: 1.1em; }

/* side panels */
.battle-scope .panel { position: absolute; top: 14.2cqw; width: 12.5cqw; padding: .7cqw .8cqw; border-radius: 1cqw; background: var(--panel); backdrop-filter: blur(.6cqw); font-size: 1.05cqw;
  box-shadow: 0 .4cqw 1.6cqw rgba(0, 0, 0, .5), inset 0 0 0 .1cqw rgba(255, 255, 255, .14); }
.battle-scope .panel.left { left: 1.2cqw; border-top: .25cqw solid var(--blue); } .battle-scope .panel.right { right: 1.2cqw; border-top: .25cqw solid var(--red); }
.battle-scope .panel h4 { margin: 0 0 .5cqw; font-size: .95cqw; letter-spacing: .14em; text-transform: uppercase; opacity: 1; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.battle-scope .row { display: grid; grid-template-columns: 1.4cqw 1fr auto; gap: .5cqw; align-items: center; padding: .25cqw 0; }
.battle-scope .row .n { font-weight: 900; color: var(--gold); } .battle-scope .row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; } .battle-scope .row .d { font-variant-numeric: tabular-nums; opacity: .9; font-weight: 700; }
.battle-scope .row.me .nm { color: #7dffa0; } .battle-scope .empty { opacity: .5; font-style: italic; padding: .3cqw 0; }

/* The damage feed of each side (named hit-feed: the home page's .feed card is another thing). */
.battle-scope .hit-feed { position: absolute; left: 1.4cqw; bottom: 9.5cqw; display: flex; flex-direction: column; gap: .35cqw; font-size: 1.05cqw; font-weight: 700; pointer-events: none; }
.battle-scope .hit-feed .it { padding: .25cqw .8cqw; border-radius: .8cqw; background: var(--panel); border-left: .25cqw solid var(--blue); animation: slide-in .35s ease-out, fade-out .6s ease-in 5.4s forwards; }
.battle-scope .hit-feed .it.enemy { border-left-color: var(--red); }
@keyframes slide-in { from { transform: translateX(-3cqw); opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

.battle-scope .weapon { position: absolute; left: 1.4cqw; bottom: 1.4cqw; display: flex; align-items: center; gap: .9cqw; padding: .6cqw 1.1cqw .6cqw .7cqw; border-radius: 1cqw; background: var(--panel); font-size: 1cqw; font-weight: 700;
  box-shadow: inset 0 0 0 .1cqw rgba(255, 255, 255, .16), 0 .4cqw 1.4cqw rgba(0, 0, 0, .5); }
.battle-scope .weapon .ico { width: 4.2cqw; height: 4.2cqw; border-radius: .8cqw; display: grid; place-items: center; font-size: 2.2cqw; background: linear-gradient(135deg, #ff9a3c, #b53a12); box-shadow: inset 0 0 .6cqw rgba(0, 0, 0, .5), 0 0 1cqw rgba(255, 120, 40, .45); }
.battle-scope .weapon small { display: block; opacity: .65; font-weight: 600; font-size: .9cqw; }

/* bottom centre: pill, FIRE, energy */
.battle-scope .bottom { position: absolute; left: 50%; bottom: 1.1cqw; transform: translateX(-50%); width: 25cqw; display: flex; flex-direction: column; align-items: center; gap: .6cqw; }
.battle-scope .pill { min-width: 12cqw; padding: .5cqw 1.6cqw; border-radius: 1.4cqw; font-size: 1.5cqw; font-weight: 900; display: flex; justify-content: center; gap: 1.2cqw; align-items: center; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, rgba(20, 26, 36, .92), rgba(8, 12, 20, .92)); box-shadow: inset 0 0 0 .12cqw rgba(255, 255, 255, .18), 0 .3cqw 1cqw rgba(0, 0, 0, .55); }
.battle-scope .pill .gold { color: var(--gold); }
.battle-scope .fire { position: relative; width: 19cqw; height: 6.2cqw; border: 0; border-radius: 1.4cqw; cursor: pointer; overflow: hidden; color: #fff; font: 900 2.5cqw/1 "Avenir Next", "Segoe UI", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase;
  text-shadow: 0 .18cqw .3cqw rgba(80, 10, 0, .85); padding: 0; outline: none;
  background: linear-gradient(180deg, #ff9467 0%, #ee4a1c 46%, #c6310f 54%, #e2511f 100%);
  box-shadow: 0 0 0 .3cqw #3a0f06, 0 0 0 .5cqw rgba(255, 190, 150, .55), 0 .8cqw 1.6cqw rgba(0, 0, 0, .65), 0 0 2.4cqw rgba(255, 90, 30, .55), inset 0 .25cqw .3cqw rgba(255, 255, 255, .55), inset 0 -.4cqw .6cqw rgba(90, 10, 0, .5);
  transition: transform .08s, filter .15s; animation: glow 2.2s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 .3cqw #3a0f06, 0 0 0 .5cqw rgba(255, 190, 150, .55), 0 .8cqw 1.6cqw rgba(0, 0, 0, .65), 0 0 3.6cqw rgba(255, 110, 40, .85), inset 0 .25cqw .3cqw rgba(255, 255, 255, .55), inset 0 -.4cqw .6cqw rgba(90, 10, 0, .5); } }
.battle-scope .fire::before { content: ""; position: absolute; inset: 0 0 52% 0; background: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .02)); }
.battle-scope .fire:hover { filter: brightness(1.12); } .battle-scope .fire:active { transform: translateY(.3cqw) scale(.985); }
.battle-scope .fire .cd { position: absolute; inset: 0; background: rgba(5, 8, 14, .62); transform-origin: right center; animation: cd var(--cd) linear forwards; }
@keyframes cd { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.battle-scope .fire[disabled] { filter: grayscale(.85) brightness(.7); cursor: not-allowed; animation: none; }
.battle-scope .fire .lbl { position: relative; z-index: 2; } .battle-scope .fire .cost { position: relative; z-index: 2; display: block; margin-top: .35cqw; font-size: .95cqw; letter-spacing: .08em; opacity: .9; }
.battle-scope .energy { position: relative; width: 17cqw; height: 1.2cqw; border-radius: 1cqw; background: #070b12; box-shadow: 0 0 0 .18cqw #1c2635; overflow: visible; }
.battle-scope .energy .fill { height: 100%; border-radius: 1cqw; background: linear-gradient(180deg, #8fd8ff, #2a8ff0 55%, #165ec0); box-shadow: 0 0 .9cqw rgba(60, 160, 255, .7); transition: width .4s ease-out; }
.battle-scope .energy .fill.low { background: linear-gradient(180deg, #ffb48a, #f0652a 55%, #c03a16); box-shadow: 0 0 .9cqw rgba(255, 90, 40, .7); }
.battle-scope .energy .txt { position: absolute; right: -4.6cqw; top: 50%; transform: translateY(-50%); font-size: 1cqw; font-weight: 800; opacity: .85; }

/* overlays */
.battle-scope .overlay { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; text-align: center; pointer-events: auto; background: rgba(2, 6, 12, .72); backdrop-filter: blur(.5cqw); animation: fade-in .4s ease-out; }
@keyframes fade-in { from { opacity: 0; } }
.battle-scope .overlay.result { background: radial-gradient(ellipse at center, rgba(2, 6, 12, .55), rgba(2, 6, 12, .88)); }
.battle-scope .overlay h2 { margin: 0; font-size: 7cqw; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; animation: slam .6s cubic-bezier(.2, 1.4, .3, 1); }
.battle-scope .overlay h2.win { color: var(--gold); text-shadow: 0 0 3cqw rgba(255, 190, 40, .8), 0 .4cqw 0 #6a3d00; } .battle-scope .overlay h2.lose { color: #ff6a58; text-shadow: 0 0 3cqw rgba(255, 70, 40, .7), 0 .4cqw 0 #5a0f06; }
@keyframes slam { from { transform: scale(2.4); opacity: 0; } }
.battle-scope .overlay p { margin: 1cqw 0 0; font-size: 1.8cqw; font-weight: 700; opacity: .92; } .battle-scope .overlay .sub { font-size: 1.3cqw; opacity: .7; margin-top: 2cqw; }
.battle-scope .spinner { width: 5cqw; height: 5cqw; margin: 0 auto 2cqw; border-radius: 50%; border: .5cqw solid rgba(255, 255, 255, .15); border-top-color: var(--gold); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.battle-scope .choose { display: flex; gap: 3cqw; margin-top: 3cqw; }
.battle-scope .side-card { width: 22cqw; padding: 2.4cqw 1.6cqw; border-radius: 1.6cqw; cursor: pointer; border: .2cqw solid rgba(255, 255, 255, .25); color: #fff; font: inherit;
  background: linear-gradient(180deg, rgba(30, 44, 66, .9), rgba(10, 16, 28, .95)); transition: transform .15s, box-shadow .15s, border-color .15s; }
.battle-scope .side-card:hover { transform: translateY(-.6cqw) scale(1.03); border-color: var(--gold); box-shadow: 0 0 3cqw rgba(255, 210, 90, .45); }
.battle-scope .side-card .side-flag { display: flex; justify-content: center; } .battle-scope .side-card .nm { font-size: 2cqw; font-weight: 900; margin-top: 1.2cqw; } .battle-scope .side-card .rl { font-size: 1.2cqw; opacity: .7; margin-top: .4cqw; letter-spacing: .12em; text-transform: uppercase; }
.battle-scope .banner { position: absolute; left: 50%; top: 11cqw; transform: translateX(-50%); z-index: 15; padding: .4cqw 1.6cqw; border-radius: 2cqw; font-size: 1.15cqw; font-weight: 800; background: rgba(150, 90, 0, .92); box-shadow: 0 .3cqw 1cqw rgba(0, 0, 0, .5); }
/* Battlefield messages (src/battle/view.rs `BattleMessages`): compact one-line chips stacked just
   above the console, newest at the bottom. A colour and an icon per kind; a refusal can carry its
   fix. */
.battle-scope .bmsgs { position: absolute; left: 50%; bottom: 13cqw; transform: translateX(-50%); z-index: 15; width: 34cqw;
  display: flex; flex-direction: column; align-items: center; gap: .3cqw; pointer-events: none; }
.battle-scope .bmsg { --tone: #94a3b8; display: flex; align-items: center; gap: .5cqw; max-width: 100%; padding: .28cqw .7cqw .28cqw .32cqw;
  border-radius: .7cqw; font-size: .92cqw; font-weight: 700; line-height: 1.25; color: #f2f5fb; pointer-events: auto;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 30%, rgba(8, 11, 16, .92)), rgba(8, 11, 16, .9) 55%);
  border: .08cqw solid color-mix(in srgb, var(--tone) 55%, transparent); box-shadow: 0 .3cqw 1cqw rgba(0, 0, 0, .55);
  animation: bmsg-in .22s cubic-bezier(.2, .8, .2, 1); }
.battle-scope .bmsg-ico { flex: none; display: grid; place-items: center; width: 1.45cqw; height: 1.45cqw; border-radius: 50%;
  color: #0b0d10; background: var(--tone); box-shadow: 0 0 .6cqw color-mix(in srgb, var(--tone) 60%, transparent); }
.battle-scope .bmsg-ico .icon { width: .95cqw; height: .95cqw; }
.battle-scope .bmsg-ico img { width: 1.1cqw; height: 1.1cqw; object-fit: contain; }
.battle-scope .bmsg-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.battle-scope .bmsg-fix { flex: none; margin-left: .2cqw; padding: .12cqw .55cqw; border-radius: .45cqw; cursor: pointer;
  font: inherit; font-size: .8cqw; font-weight: 800; color: #0b0d10; background: var(--tone); border: 0; }
.battle-scope .bmsg-fix:hover { filter: brightness(1.12); }
.battle-scope .bmsg.refusal { --tone: #ff5a47; }
.battle-scope .bmsg.energy { --tone: #9be03a; }
.battle-scope .bmsg.deployment { --tone: #4fb0ff; }
.battle-scope .bmsg.promotion { --tone: #ffd25a; }
.battle-scope .bmsg.loot { --tone: #f5a524; }
.battle-scope .bmsg.note { --tone: #a7b4c8; }
@keyframes bmsg-in { from { opacity: 0; transform: translateY(.5cqw) scale(.97); } }
@keyframes slide-up { from { transform: translate(-50%, 1.5cqw); opacity: 0; } }
.battle-scope .leave { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; opacity: .8; margin-top: 2cqw; }

.battle-scope .refill { margin-top: .2cqw; padding: .35cqw 1.4cqw; border-radius: 1cqw; cursor: pointer; font: 800 1.05cqw/1.2 "Avenir Next", "Segoe UI", Arial, sans-serif; letter-spacing: .06em; color: #dff1ff;
  background: linear-gradient(180deg, rgba(40, 110, 190, .92), rgba(14, 50, 104, .95)); border: .12cqw solid rgba(140, 200, 255, .55);
  box-shadow: 0 .3cqw 1cqw rgba(0, 0, 0, .5), 0 0 1.2cqw rgba(60, 160, 255, .35); transition: transform .1s, filter .15s; }
.battle-scope .refill:hover { filter: brightness(1.18); } .battle-scope .refill:active { transform: translateY(.2cqw); }

/* ═════════════════════════ NUKE ═════════════════════════
   One strike is a set of elements whose animations are all timed from two variables:
   --t     ms from launch to impact (the fall)        --life   ms of radiation after impact
   Elements start invisible and `forwards` animations switch them on at `var(--t)`.            */

.battle-scope .quake-wrap { position: absolute; inset: 0; }
.battle-scope .quake-wrap.quake-a { animation: quake-a 2.4s cubic-bezier(.2, .7, .3, 1); }
.battle-scope .quake-wrap.quake-b { animation: quake-b 2.4s cubic-bezier(.2, .7, .3, 1); }
@keyframes quake-a { 0% { transform: scale(1.09); } 4% { transform: scale(1.09) translate(1.6cqw, -1cqw) rotate(.5deg); } 9% { transform: scale(1.08) translate(-1.7cqw, 1.1cqw) rotate(-.6deg); } 14% { transform: scale(1.07) translate(1.4cqw, .9cqw) rotate(.4deg); } 20% { transform: scale(1.06) translate(-1.1cqw, -.8cqw) rotate(-.4deg); } 28% { transform: scale(1.05) translate(.8cqw, .6cqw); } 38% { transform: scale(1.04) translate(-.5cqw, -.4cqw); } 52% { transform: scale(1.025) translate(.3cqw, .2cqw); } 70% { transform: scale(1.01) translate(-.1cqw, 0); } 100% { transform: none; } }
@keyframes quake-b { 0% { transform: scale(1.09); } 4% { transform: scale(1.09) translate(1.6cqw, -1cqw) rotate(.5deg); } 9% { transform: scale(1.08) translate(-1.7cqw, 1.1cqw) rotate(-.6deg); } 14% { transform: scale(1.07) translate(1.4cqw, .9cqw) rotate(.4deg); } 20% { transform: scale(1.06) translate(-1.1cqw, -.8cqw) rotate(-.4deg); } 28% { transform: scale(1.05) translate(.8cqw, .6cqw); } 38% { transform: scale(1.04) translate(-.5cqw, -.4cqw); } 52% { transform: scale(1.025) translate(.3cqw, .2cqw); } 70% { transform: scale(1.01) translate(-.1cqw, 0); } 100% { transform: none; } }

.battle-scope .nuke { position: absolute; inset: 0; pointer-events: none; }
.battle-scope .nuke > * { position: absolute; opacity: 0; }

/* green light over the struck half while it burns */
.battle-scope .n-halftint { top: 0; bottom: 0; width: 50%; mix-blend-mode: screen; background: radial-gradient(ellipse at center, rgba(170, 255, 90, .02), rgba(110, 255, 60, .22));
  animation: rad-life var(--life) linear var(--t) forwards; }
@keyframes rad-life { 0% { opacity: 0; } 6% { opacity: 1; } 78% { opacity: .9; } 100% { opacity: 0; } }

/* scorched ground */
.battle-scope .n-scorch { left: var(--x); top: var(--y); width: 40cqw; height: 32cqw; margin: -16cqw 0 0 -20cqw; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 0, 0, .9) 0, rgba(34, 16, 6, .75) 38%, rgba(0, 0, 0, 0) 70%);
  animation: scorch calc(var(--life) + 2800ms) ease-out var(--t) forwards; }
@keyframes scorch { 0% { opacity: 0; transform: scale(.2); } 5% { opacity: 1; transform: scale(1); } 70% { opacity: .85; } 100% { opacity: 0; } }

/* target reticle on the ground, until impact */
.battle-scope .n-reticle { left: var(--x); top: var(--y); width: 0; height: 0; animation: reticle var(--t) linear forwards; }
@keyframes reticle { 0% { opacity: 0; } 8% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } }
.battle-scope .n-reticle .zone { position: absolute; width: 36cqw; height: 36cqw; margin: -18cqw 0 0 -18cqw; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 40, 30, .30), rgba(255, 40, 30, .12) 55%, transparent 70%); animation: zone-pulse .7s ease-in-out infinite alternate; }
@keyframes zone-pulse { from { opacity: .45; transform: scale(.96); } to { opacity: 1; transform: scale(1.02); } }
.battle-scope .n-reticle .r { position: absolute; border-radius: 50%; border: .26cqw dashed rgba(255, 70, 50, .95); box-shadow: 0 0 1.2cqw rgba(255, 40, 30, .8), inset 0 0 1.2cqw rgba(255, 40, 30, .5); }
.battle-scope .n-reticle .r1 { width: 34cqw; height: 34cqw; margin: -17cqw 0 0 -17cqw; animation: spin 9s linear infinite; }
.battle-scope .n-reticle .r2 { width: 22cqw; height: 22cqw; margin: -11cqw 0 0 -11cqw; border-style: solid; border-width: .18cqw; animation: spin 6s linear infinite reverse; }
.battle-scope .n-reticle .r3 { width: 9cqw; height: 9cqw; margin: -4.5cqw 0 0 -4.5cqw; border-width: .3cqw; animation: lock .5s ease-in-out infinite alternate; }
@keyframes lock { from { transform: scale(1.25); opacity: .5; } to { transform: scale(.85); opacity: 1; } }
.battle-scope .n-reticle .mark { position: absolute; width: 8cqw; height: 8cqw; margin: -4cqw 0 0 -4cqw; display: grid; place-items: center; font-size: 5cqw; color: #ff6a50; text-shadow: 0 0 1.4cqw #ff2a1a; animation: blink .5s steps(2) infinite; }
.battle-scope .n-reticle::before, .battle-scope .n-reticle::after { content: ""; position: absolute; background: rgba(255, 90, 70, .85); box-shadow: 0 0 .8cqw #ff2a1a; }
.battle-scope .n-reticle::before { width: 40cqw; height: .14cqw; margin: -.07cqw 0 0 -20cqw; }
.battle-scope .n-reticle::after { height: 40cqw; width: .14cqw; margin: -20cqw 0 0 -.07cqw; }

/* the bomb */
/* Placed at the impact point and slid there from (50%, -14%) with a transform, not left/top: a
   composited move instead of a layout on every frame. The nuke layer fills the stage (the size
   container), so 1cqw / 1cqh are 1% of it. */
.battle-scope .n-bomb { left: var(--x); top: var(--y); width: 0; height: 0; opacity: 1; animation: bomb-fall var(--t) cubic-bezier(.42, 0, .92, .56) forwards; z-index: 3; }
@keyframes bomb-fall {
  0% { transform: translate(calc((50 - var(--xn)) * 1cqw), calc((-14 - var(--yn)) * 1cqh)); opacity: 1; }
  97% { opacity: 1; }
  100% { transform: none; opacity: 0; } }
.battle-scope .n-bomb .sc { position: absolute; inset: 0; animation: bomb-scale var(--t) linear forwards; }
@keyframes bomb-scale { from { transform: scale(2.2); } to { transform: scale(.9); } }
.battle-scope .n-bomb .trail { position: absolute; width: 38cqw; height: 1.7cqw; margin: -.85cqw 0 0 -38cqw; transform: rotate(var(--ang)); transform-origin: 100% 50%; border-radius: 2cqw; filter: blur(.35cqw);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 110, 20, .5) 55%, rgba(255, 240, 190, .95)); }
.battle-scope .n-bomb .body { position: absolute; width: 8cqw; height: 2.3cqw; margin: -1.15cqw 0 0 -4cqw; transform: rotate(var(--ang)); border-radius: 1.1cqw 2.2cqw 2.2cqw 1.1cqw;
  background: linear-gradient(180deg, #8c9488, #4c544a 55%, #262b25); box-shadow: 0 0 2cqw 0 rgba(255, 120, 30, .85), 0 .6cqw 1cqw rgba(0, 0, 0, .6); }
.battle-scope .n-bomb .nose { position: absolute; right: -.1cqw; top: 0; bottom: 0; width: 2.4cqw; border-radius: 0 2.2cqw 2.2cqw 0; background: linear-gradient(180deg, #ff8a6a, #c01a0a 60%, #6a0a04); }
.battle-scope .n-bomb .band { position: absolute; left: 3.4cqw; top: 0; bottom: 0; width: .9cqw; background: repeating-linear-gradient(0deg, #ffd400 0 .35cqw, #111 .35cqw .7cqw); }
.battle-scope .n-bomb .fin { position: absolute; left: -.2cqw; width: 2.2cqw; height: 1.8cqw; background: linear-gradient(90deg, #2c322b, #5a6358); }
.battle-scope .n-bomb .f1 { top: -1.4cqw; clip-path: polygon(0 100%, 100% 100%, 0 0); } .battle-scope .n-bomb .f2 { bottom: -1.4cqw; clip-path: polygon(0 0, 100% 0, 0 100%); }

/* fireball */
.battle-scope .n-core { left: var(--x); top: var(--y); width: 36cqw; height: 36cqw; margin: -18cqw 0 0 -18cqw; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, #fff 0 14%, #fff7b8 24%, #ffb52a 42%, #ff5a12 58%, rgba(255, 36, 0, .75) 70%, rgba(255, 36, 0, 0) 78%);
  animation: core 3.4s ease-out var(--t) forwards; }
@keyframes core { 0% { opacity: 1; transform: scale(.04); } 10% { transform: scale(.85); } 30% { opacity: 1; transform: scale(1.2); filter: blur(0); } 100% { opacity: 0; transform: scale(2); filter: blur(1.6cqw); } }

/* shockwaves: three rings, the last one pale blue-white */
.battle-scope .n-ring { left: var(--x); top: var(--y); width: 20cqw; height: 20cqw; margin: -10cqw 0 0 -10cqw; border-radius: 50%; border: 1.6cqw solid rgba(255, 246, 224, .95);
  box-shadow: 0 0 3cqw 1cqw rgba(255, 220, 160, .8), inset 0 0 3cqw rgba(255, 220, 160, .7); animation: ring 2.4s cubic-bezier(.08, .7, .2, 1) var(--t) forwards; }
.battle-scope .n-ring.b { border-color: rgba(255, 150, 60, .9); box-shadow: 0 0 3cqw 1cqw rgba(255, 110, 20, .7), inset 0 0 3cqw rgba(255, 110, 20, .5); animation-delay: calc(var(--t) + 200ms); }
.battle-scope .n-ring.c { border-color: rgba(190, 225, 255, .9); box-shadow: 0 0 3.4cqw 1.2cqw rgba(140, 200, 255, .75), inset 0 0 3cqw rgba(140, 200, 255, .5); animation-delay: calc(var(--t) + 420ms); }
@keyframes ring { 0% { opacity: 1; transform: scale(.05); border-width: 2.4cqw; } 70% { opacity: .7; } 100% { opacity: 0; transform: scale(6); border-width: .12cqw; } }

/* mushroom cloud: a billboard standing on the impact point */
.battle-scope .n-mush { left: var(--x); top: var(--y); width: 0; height: 0; opacity: 1; }
.battle-scope .n-mush > * { position: absolute; bottom: 0; opacity: 0; transform-origin: 50% 100%; }
.battle-scope .n-mush .stem { left: -3.2cqw; width: 6.4cqw; height: 17cqw; border-radius: 45% 45% 30% 30% / 8% 8% 6% 6%;
  background: linear-gradient(90deg, rgba(34, 24, 20, .96), rgba(120, 76, 44, .96) 48%, rgba(34, 24, 20, .96)); box-shadow: 0 0 2.4cqw rgba(255, 120, 20, .85), inset 0 -3cqw 2cqw rgba(255, 140, 30, .5);
  animation: stem 1.8s cubic-bezier(.1, .8, .2, 1) calc(var(--t) + 100ms) forwards, mush-fade 3.4s linear calc(var(--t) + 5200ms) forwards; }
@keyframes stem { 0% { opacity: 1; transform: scaleY(0) scaleX(1.6); } 100% { opacity: 1; transform: scale(1); } }
@keyframes mush-fade { from { opacity: 1; } to { opacity: 0; } }
.battle-scope .n-mush .skirt { left: -9cqw; width: 18cqw; height: 4cqw; border-radius: 50%; bottom: -1.4cqw; background: radial-gradient(ellipse, rgba(255, 220, 160, .85), rgba(255, 120, 30, .4) 55%, transparent 72%);
  animation: skirt 1.6s ease-out calc(var(--t) + 50ms) forwards, mush-fade 3.4s linear calc(var(--t) + 5200ms) forwards; }
@keyframes skirt { 0% { opacity: 1; transform: scale(.1); } 100% { opacity: .8; transform: scale(1.2); } }
.battle-scope .n-mush .cap { border-radius: 50%; filter: blur(.25cqw);
  background: radial-gradient(ellipse at 50% 72%, #fff3b8 0, #ffb035 20%, #e24f18 42%, #6a2c16 66%, rgba(40, 28, 26, .0) 76%);
  animation: bloom 2.4s cubic-bezier(.1, .8, .2, 1) calc(var(--t) + 350ms) forwards, mush-fade 3.4s linear calc(var(--t) + 5200ms) forwards; }
@keyframes bloom { 0% { opacity: 0; transform: translateY(5cqw) scale(.05); } 25% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) scale(1); } }
.battle-scope .n-mush .p1 { left: -12cqw; width: 14cqw; height: 9cqw; bottom: 14cqw; } .battle-scope .n-mush .p2 { left: -2cqw; width: 14cqw; height: 9cqw; bottom: 14cqw; animation-delay: calc(var(--t) + 450ms), calc(var(--t) + 5200ms); }
.battle-scope .n-mush .p3 { left: -9cqw; width: 18cqw; height: 11cqw; bottom: 17cqw; animation-delay: calc(var(--t) + 550ms), calc(var(--t) + 5200ms); }
.battle-scope .n-mush .p4 { left: -7cqw; width: 14cqw; height: 8cqw; bottom: 12.5cqw; filter: blur(.5cqw); animation-delay: calc(var(--t) + 400ms), calc(var(--t) + 5200ms); }
.battle-scope .n-mush .top { left: -6cqw; width: 12cqw; height: 8cqw; bottom: 22cqw; filter: blur(.7cqw);
  background: radial-gradient(ellipse at 50% 80%, #c26a38 0, #5a3322 38%, rgba(30, 24, 24, .85) 62%, rgba(30, 24, 24, 0) 76%); animation-delay: calc(var(--t) + 800ms), calc(var(--t) + 5200ms); }

/* radiation: ten seconds of poisonous light */
.battle-scope .n-rad { left: var(--x); top: var(--y); width: 0; height: 0; opacity: 1; }
.battle-scope .n-rad > * { position: absolute; opacity: 0; }
.battle-scope .n-rad .glow { width: 40cqw; height: 40cqw; margin: -20cqw 0 0 -20cqw; border-radius: 50%;
  background: radial-gradient(circle, rgba(235, 255, 170, .6) 0, rgba(190, 255, 90, .46) 38%, rgba(120, 255, 55, .3) 58%, rgba(110, 255, 50, 0) 72%);
  animation: rad-life var(--life) linear var(--t) forwards; }
.battle-scope .n-rad .trefoil { width: 30cqw; height: 30cqw; margin: -15cqw 0 0 -15cqw; border-radius: 50%;
  background: conic-gradient(rgba(255, 238, 70, .75) 0 38deg, transparent 38deg 120deg, rgba(255, 238, 70, .75) 120deg 158deg, transparent 158deg 240deg, rgba(255, 238, 70, .75) 240deg 278deg, transparent 278deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 36%, #000 38%, #000 96%, transparent 100%); mask: radial-gradient(circle, transparent 36%, #000 38%, #000 96%, transparent 100%);
  animation: rad-life var(--life) linear var(--t) forwards; }
.battle-scope .n-rad .rays { width: 52cqw; height: 52cqw; margin: -26cqw 0 0 -26cqw; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 255, 215, .5) 0 2.5deg, transparent 2.5deg 11deg);
  -webkit-mask: radial-gradient(circle, #000 0, transparent 70%); mask: radial-gradient(circle, #000 0, transparent 70%);
  animation: rays 4.5s ease-out var(--t) forwards; }
@keyframes rays { 0% { opacity: 0; } 8% { opacity: 1; } 100% { opacity: 0; } }
.battle-scope .n-rad .sym { width: 8cqw; height: 8cqw; margin: -4cqw 0 0 -4cqw; display: grid; place-items: center; font-size: 6.5cqw; color: #f4ff7a; text-shadow: 0 0 1.6cqw #b6ff2a, 0 0 4cqw #6aff1a;
  animation: rad-life var(--life) linear var(--t) forwards; }
.battle-scope .n-rad .spore { width: .9cqw; height: .9cqw; border-radius: 50%; left: var(--dx); top: var(--dy); background: radial-gradient(circle, #f6ffb0, #9eff3a 55%, transparent 72%);
  box-shadow: 0 0 .8cqw #b6ff2a; animation: spore 2.6s ease-out 4; animation-delay: calc(var(--t) + var(--dl)); }
@keyframes spore { 0% { opacity: 0; transform: translateY(0) scale(.5); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(var(--rise) * -1)) scale(1.4); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Full-screen strike layers (above the HUD) ── */
.battle-scope .n-over { position: absolute; inset: 0; z-index: 12; pointer-events: none; }
.battle-scope .n-over > *, .battle-scope .n-pre > * { position: absolute; }

/* RED ALERT, from launch until impact */
.battle-scope .n-pre { inset: 0; animation: pre var(--t) linear forwards; }
@keyframes pre { 0%, 96% { opacity: 1; } 100% { opacity: 0; } }
.battle-scope .n-warn { inset: 0; background: radial-gradient(ellipse at center, transparent 58%, rgba(255, 0, 0, .22) 100%);
  box-shadow: inset 0 0 9cqw 2cqw rgba(255, 0, 0, .9), inset 0 0 32cqw rgba(255, 0, 0, .38); animation: warn .5s ease-in-out infinite alternate; }
@keyframes warn { from { opacity: .15; } to { opacity: 1; } }
.battle-scope .n-alert { left: 50%; top: 17cqw; transform: translateX(-50%); width: 50cqw; padding: 1cqw 2cqw; display: flex; align-items: center; gap: 1.6cqw; border-radius: .6cqw; color: #fff;
  border: .3cqw solid #ff2a1a; background: linear-gradient(180deg, rgba(150, 0, 0, .95), rgba(70, 0, 0, .96)); animation: alert-in .45s cubic-bezier(.2, 1.5, .3, 1);
  box-shadow: 0 0 3cqw rgba(255, 0, 0, .9), 0 0 0 .35cqw rgba(0, 0, 0, .7), inset 0 0 2cqw rgba(255, 60, 40, .5); }
.battle-scope .n-alert::before, .battle-scope .n-alert::after { content: ""; position: absolute; left: -.3cqw; right: -.3cqw; height: 1cqw; background: repeating-linear-gradient(45deg, #ffd400 0 1.1cqw, #111 1.1cqw 2.2cqw); background-size: 3.1cqw 100%; animation: stripes .6s linear infinite; }
.battle-scope .n-alert::before { top: -1.3cqw; } .battle-scope .n-alert::after { bottom: -1.3cqw; }
@keyframes stripes { to { background-position: 3.1cqw 0; } }
@keyframes alert-in { from { opacity: 0; transform: translateX(-50%) scale(1.8); } }
.battle-scope .n-alert .sym { font-size: 4.4cqw; line-height: 1; color: #ffe14a; text-shadow: 0 0 1.4cqw #ff9a00; animation: spin 3s linear infinite; }
.battle-scope .n-alert .txt { display: flex; flex-direction: column; flex: 1; }
.battle-scope .n-alert b { font-size: 2.7cqw; letter-spacing: .3em; font-weight: 900; text-shadow: 0 0 1.4cqw #ff2a1a, 0 .15cqw 0 #3a0000; animation: blink .55s steps(2) infinite; }
.battle-scope .n-alert .txt span { font-size: 1.25cqw; font-weight: 800; letter-spacing: .08em; opacity: .95; text-transform: uppercase; }
.battle-scope .n-alert .count { font: 900 3.4cqw ui-monospace, "SF Mono", Menlo, monospace; color: #ffe14a; text-shadow: 0 0 1cqw #ff9a00; min-width: 7.5cqw; text-align: right; }

/* impact flash */
.battle-scope .n-flash { inset: 0; opacity: 0; background: radial-gradient(circle at var(--fx) var(--fy), #fff 0, #fff 32%, #fff0c8 62%, #ffc880 100%); animation: nflash 1.6s ease-out var(--t) forwards; }
@keyframes nflash { 0% { opacity: 1; } 12% { opacity: 1; } 100% { opacity: 0; } }

/* radiation readout + feed */
.battle-scope .rad-chip { position: absolute; left: 50%; top: 14cqw; transform: translateX(-50%); padding: .35cqw 1.6cqw; border-radius: 2cqw; font-size: 1.3cqw; font-weight: 900; letter-spacing: .12em; color: #eaff8a;
  background: rgba(24, 40, 6, .86); border: .15cqw solid rgba(190, 255, 70, .8); box-shadow: 0 0 1.6cqw rgba(160, 255, 50, .6); animation: blink 1s steps(2) infinite; }
.battle-scope .hit-feed .it.nuke { border-left-color: #ffd400; background: rgba(110, 20, 8, .85); color: #ffe14a; }

/* the button */
.battle-scope .nuke-btn { position: absolute; right: 2.2cqw; bottom: 1.6cqw; width: 9cqw; height: 9cqw; border-radius: 50%; border: 0; padding: 0; cursor: pointer; overflow: hidden; color: #fff; outline: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  background: radial-gradient(circle at 50% 35%, #ff6a4a 0, #c4200e 45%, #5a0804 100%);
  box-shadow: 0 0 0 .35cqw #2a0300, 0 0 0 .75cqw #ffd400, 0 0 0 1.05cqw #181818, 0 .8cqw 1.8cqw rgba(0, 0, 0, .7), 0 0 3cqw rgba(255, 70, 30, .7), inset 0 .3cqw .5cqw rgba(255, 255, 255, .45);
  animation: nuke-glow 1.8s ease-in-out infinite; transition: transform .08s, filter .15s; }
@keyframes nuke-glow { 50% { box-shadow: 0 0 0 .35cqw #2a0300, 0 0 0 .75cqw #ffd400, 0 0 0 1.05cqw #181818, 0 .8cqw 1.8cqw rgba(0, 0, 0, .7), 0 0 5cqw rgba(255, 110, 30, .95), inset 0 .3cqw .5cqw rgba(255, 255, 255, .45); } }
.battle-scope .nuke-btn::before { content: ""; position: absolute; inset: 0 0 52% 0; background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0)); }
.battle-scope .nuke-btn:hover { filter: brightness(1.15); } .battle-scope .nuke-btn:active { transform: scale(.96); }
.battle-scope .nuke-btn .sym { position: relative; z-index: 2; font-size: 3.6cqw; color: #ffe14a; text-shadow: 0 0 1cqw #ff9a00, 0 .15cqw 0 #3a0000; }
.battle-scope .nuke-btn .lbl { position: relative; z-index: 2; font: 900 1.45cqw/1 "Avenir Next", "Segoe UI", Arial, sans-serif; letter-spacing: .16em; margin-top: .2cqw; text-shadow: 0 .12cqw .2cqw rgba(60, 0, 0, .9); }
.battle-scope .nuke-btn .cost { position: relative; z-index: 2; font-size: .85cqw; font-weight: 700; opacity: .85; margin-top: .25cqw; letter-spacing: .06em; }
.battle-scope .nuke-btn .cd { position: absolute; inset: 0; z-index: 3; background: rgba(8, 10, 16, .72); transform-origin: 50% 100%; animation: cd-up var(--cd) linear forwards; }
@keyframes cd-up { from { transform: scaleY(1); } to { transform: scaleY(0); } }
.battle-scope .nuke-btn[disabled] { filter: grayscale(.85) brightness(.65); cursor: not-allowed; animation: none; }

.battle-scope .hit-feed .it.nuke { white-space: nowrap; }

/* Citizen names link to their profile (new tab). Tanks and alerts ignore the pointer; their names do not. */
.battle-scope .plink { color: inherit; text-decoration: none; pointer-events: auto; cursor: pointer; }
.battle-scope .plink:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; }

/* ══ A grimmer war zone ══════════════════════════════════════════════════════════════════════════
   The map art is bright and cartoonish; these layers mute it into a scorched, smoky front line. */
.battle-scope .stage { background: #0e100c; }
.battle-scope .map { filter: saturate(.32) sepia(.28) brightness(.52) contrast(1.18); }
.battle-scope .map-tint {
  mix-blend-mode: normal;
  background:
    linear-gradient(90deg, rgba(30, 60, 110, .22), rgba(0, 0, 0, 0) 36%, rgba(0, 0, 0, 0) 64%, rgba(110, 28, 18, .22)),
    linear-gradient(180deg, rgba(8, 10, 8, .55), rgba(8, 10, 8, 0) 30%, rgba(8, 10, 8, 0) 70%, rgba(8, 10, 8, .6));
}
/* Craters and burnt fields. */
.battle-scope .scorch { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .9;
  background:
    radial-gradient(ellipse 7cqw 4cqw at 18% 34%, rgba(20, 12, 6, .85), transparent 70%),
    radial-gradient(ellipse 9cqw 5cqw at 31% 71%, rgba(24, 14, 8, .8), transparent 70%),
    radial-gradient(ellipse 6cqw 3.5cqw at 44% 48%, rgba(18, 12, 8, .7), transparent 70%),
    radial-gradient(ellipse 8cqw 4.5cqw at 63% 30%, rgba(24, 14, 8, .8), transparent 70%),
    radial-gradient(ellipse 10cqw 5cqw at 79% 66%, rgba(20, 12, 6, .85), transparent 70%),
    radial-gradient(ellipse 5cqw 3cqw at 88% 40%, rgba(18, 10, 6, .75), transparent 70%),
    radial-gradient(ellipse 30cqw 14cqw at 50% 55%, rgba(40, 30, 20, .35), transparent 70%); }
/* Smoke columns rising from burning positions. */
.battle-scope .vignette { background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, .78)); }
/* Film grain. */

/* The enemy's damage feed sits on the enemy's side, above the nuke button. */
.battle-scope .hit-feed.theirs { left: auto; right: 1.4cqw; bottom: 12.5cqw; align-items: flex-end; }
.battle-scope .hit-feed.theirs .it { border-left: 0; border-right: .25cqw solid var(--red); }

/* A labelled way home. */
.battle-scope .tool.home { width: auto; padding: 0 1cqw; font-size: 1.05cqw; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }


/* ══ Battlefield v3: the new battleground, 20 tanks a side, a tidy command bar ══════════════════ */
.battle-scope .map { background-image: url("assets/battleground.svg"); filter: saturate(.85) brightness(.82) contrast(1.08); }
.battle-scope .scorch { opacity: .55; }

/* Smaller tanks: a full formation of 20 a side fits. */
.battle-scope .tank { width: 5.4cqw; }
.battle-scope .tank .tag { top: 92%; max-width: 9cqw; padding: .05cqw .5cqw .1cqw; font-size: .72cqw; border-radius: .6cqw; }
.battle-scope .tank.friendly .tag, .battle-scope .tank.enemy .tag { border-bottom-width: .15cqw; }
.battle-scope .tank .popup { font-size: 1.25cqw; }
.battle-scope .tank .flash { width: 3cqw; height: 3cqw; margin: -1.5cqw 0 0 -.7cqw; }

/* Country names: real flags, the role in words. */
.battle-scope .flag-img { width: 2.6cqw; height: 1.8cqw; object-fit: cover; border-radius: .2cqw; box-shadow: 0 .1cqw .4cqw rgba(0, 0, 0, .7); display: block; }
.battle-scope .flag-img.none { background: #444; }
.battle-scope .country .role { font-size: .85cqw; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .7; filter: none; padding-top: .3cqw; }
.battle-scope .side-card .side-flag .flag-img { width: 8cqw; height: 5.4cqw; }

/* Command bar. */
.battle-scope .command { position: absolute; left: 50%; bottom: .9cqw; transform: translateX(-50%); display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 1.2cqw;
  width: 62cqw; padding: .8cqw 1.1cqw; border-radius: 1.2cqw; background: linear-gradient(180deg, rgba(14, 16, 14, .82), rgba(6, 7, 6, .92));
  border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 .6cqw 2cqw rgba(0, 0, 0, .6); backdrop-filter: blur(.4cqw); }
.battle-scope .command .weapon { position: static; flex: 1; min-width: 0; padding: .45cqw .7cqw .45cqw .5cqw; font-size: .85cqw; gap: .6cqw; cursor: pointer; text-align: left; color: inherit; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); }
.battle-scope .command .weapon .ico { width: 2.8cqw; height: 2.8cqw; font-size: 1.5cqw; flex: none; }
.battle-scope .command .weapon small { font-size: .72cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.battle-scope .command .pill { min-width: 0; padding: .15cqw 1cqw; font-size: 1.05cqw; background: none; box-shadow: none; }
.battle-scope .command .fire { width: 16cqw; height: 4.4cqw; font-size: 1.9cqw; border-radius: 1cqw; }
.battle-scope .command .fire .cost { font-size: .72cqw; margin-top: .2cqw; }
.battle-scope .command .energy { width: 14cqw; height: .8cqw; }
.battle-scope .command .energy .txt { right: -3.6cqw; font-size: .8cqw; }
.battle-scope .command .refill { font-size: .75cqw; padding: .2cqw 1cqw; margin: 0; }
.battle-scope .command .nuke-btn { position: relative; right: auto; bottom: auto; width: 5.6cqw; height: 5.6cqw; flex: none; }
.battle-scope .command .nuke-btn .sym { font-size: 1.5cqw; } .battle-scope .command .nuke-btn .lbl { font-size: 1cqw; } .battle-scope .command .nuke-btn .cost { font-size: .6cqw; }

/* Feeds and the radiation chip sit in the outer columns, clear of the command bar. */
.battle-scope .hit-feed { left: 1.2cqw; bottom: 1.2cqw; justify-content: flex-end; font-size: .85cqw; max-width: 13cqw; }
.battle-scope .hit-feed.theirs { left: auto; right: 1.2cqw; bottom: 1.2cqw; }
/* Slimmer command bar: it must never cover the formation. */
.battle-scope .command { width: 58cqw; padding: .55cqw .9cqw; bottom: .7cqw; align-items: center; }
.battle-scope .command .fire { width: 14cqw; height: 3.8cqw; font-size: 1.7cqw; }
.battle-scope .command .nuke-btn { width: 4.8cqw; height: 4.8cqw; }
.battle-scope .command .nuke-btn .sym { font-size: 1.2cqw; } .battle-scope .command .nuke-btn .lbl { font-size: .85cqw; letter-spacing: .1em; }

/* ══ Deployments ═══════════════════════════════════════════════════════════════════════════════ */
.battle-scope .command .fire.deploy .cost { letter-spacing: .04em; text-transform: none; }
.battle-scope .deploying { width: 16cqw; display: flex; flex-direction: column; gap: .35cqw; align-items: stretch; }
.battle-scope .dep-line { display: flex; justify-content: space-between; align-items: center; gap: .6cqw; font-size: .8cqw; font-weight: 800; font-variant-numeric: tabular-nums; }
.battle-scope .dep-live { color: #ff6a5a; letter-spacing: .1em; animation: blink 1.2s steps(2) infinite; }
.battle-scope .dep-bar { height: .7cqw; border-radius: 1cqw; background: #070b12; box-shadow: 0 0 0 .15cqw #1c2635; overflow: hidden; }
.battle-scope .dep-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffb13a, #ff5a2a); box-shadow: 0 0 .8cqw rgba(255, 120, 40, .7); transition: width .5s ease-out; }
.battle-scope .deploying .stop { padding: .4cqw 0; border-radius: .7cqw; cursor: pointer; font: 900 .95cqw/1 "Avenir Next", "Segoe UI", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, #4a4f58, #2a2e35); border: 1px solid rgba(255, 255, 255, .18); }
.battle-scope .deploying .stop:hover { background: linear-gradient(180deg, #c3392b, #8d1f14); }

.battle-scope .deploy-panel { position: absolute; left: 50%; bottom: 8.6cqw; transform: translateX(-50%); z-index: 14; width: 30cqw; padding: 1cqw 1.2cqw 1.2cqw; border-radius: 1.1cqw;
  background: linear-gradient(180deg, rgba(20, 23, 20, .97), rgba(8, 9, 8, .98)); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .7);
  display: flex; flex-direction: column; gap: .9cqw; font-size: .9cqw; animation: slide-up .2s ease-out; }
.battle-scope .dp-head { display: flex; justify-content: space-between; align-items: center; } .battle-scope .dp-head b { font-size: 1.1cqw; letter-spacing: .08em; text-transform: uppercase; }
.battle-scope .dp-head .x { background: none; border: 0; color: inherit; cursor: pointer; font-size: 1.1cqw; opacity: .7; } .battle-scope .dp-head .x:hover { opacity: 1; }
.battle-scope .dp-sec { display: flex; flex-direction: column; gap: .45cqw; }
.battle-scope .dp-label { display: flex; justify-content: space-between; font-size: .75cqw; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.battle-scope .dp-label b { font-size: 1.1cqw; letter-spacing: 0; color: var(--gold); opacity: 1; }
.battle-scope .deploy-panel input[type=range] { width: 100%; accent-color: #ffb13a; }
.battle-scope .dp-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4cqw; }
.battle-scope .dp-quick button, .battle-scope .dp-weapons .w { cursor: pointer; color: inherit; border-radius: .6cqw; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); font: 800 .8cqw/1.2 "Avenir Next", "Segoe UI", Arial, sans-serif; padding: .35cqw 0; }
.battle-scope .dp-quick button:hover, .battle-scope .dp-weapons .w:hover { border-color: var(--gold); }
.battle-scope .dp-weapons { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4cqw; }
.battle-scope .dp-weapons .w { display: flex; flex-direction: column; align-items: center; gap: .1cqw; padding: .45cqw .2cqw; }
.battle-scope .dp-weapons .w .w-art { width: 2.4cqw; height: 2.4cqw; object-fit: contain; }
.battle-scope .dp-weapons .w .q { font-size: 1cqw; font-weight: 900; color: var(--gold); } .battle-scope .dp-weapons .w small { opacity: .65; font-size: .7cqw; }
.battle-scope .dp-weapons .w.on { border-color: var(--gold); background: rgba(255, 196, 0, .14); box-shadow: 0 0 0 1px var(--gold); }
.battle-scope .dp-note { font-size: .75cqw; opacity: .7; } .battle-scope .dp-note.warn { color: #ffb48a; opacity: 1; }
.battle-scope .dp-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4cqw; padding: .6cqw; border-radius: .7cqw; background: rgba(0, 0, 0, .35); }
.battle-scope .dp-summary div { display: flex; flex-direction: column; align-items: center; } .battle-scope .dp-summary small { font-size: .65cqw; opacity: .65; text-transform: uppercase; letter-spacing: .08em; }
.battle-scope .dp-summary b { font-size: 1.05cqw; font-variant-numeric: tabular-nums; } .battle-scope .dp-summary .warn b { color: #ffb48a; }
.battle-scope .deploy-panel .fire.go { width: 100%; height: 3.6cqw; font-size: 1.5cqw; }
.battle-scope .deploy-panel .fire.go .cost { font-size: .7cqw; letter-spacing: .02em; text-transform: none; }
.battle-scope .deploying { width: 19cqw; } .battle-scope .dep-line { white-space: nowrap; font-size: .75cqw; } .battle-scope .dep-line > span:last-child { overflow: hidden; text-overflow: ellipsis; }

/* ══ Console (replaces the command bar) ═══════════════════════════════════════════════════════════
   One compact block: damage tab on top, [food | DEPLOY | nuke], rank strip underneath. */
.battle-scope .console { position: absolute; left: 50%; bottom: .6cqw; transform: translateX(-50%); width: 34cqw; z-index: 6;
  padding: .55cqw .7cqw .6cqw; border-radius: 1.2cqw;
  background: linear-gradient(180deg, #3a3d40 0%, #23262a 18%, #16181b 100%);
  border: .14cqw solid #0b0c0d; box-shadow: inset 0 .12cqw 0 rgba(255, 255, 255, .14), inset 0 -.2cqw .5cqw rgba(0, 0, 0, .6), 0 .8cqw 2.2cqw rgba(0, 0, 0, .7); }
.battle-scope .con-tab { position: absolute; left: 50%; top: -1.9cqw; transform: translateX(-50%); display: flex; align-items: center; gap: .5cqw; height: 2.2cqw; padding: 0 1.6cqw;
  border-radius: .8cqw .8cqw 0 0; background: linear-gradient(180deg, #34373a, #23262a); border: .14cqw solid #0b0c0d; border-bottom: 0;
  box-shadow: inset 0 .12cqw 0 rgba(255, 255, 255, .14); font-variant-numeric: tabular-nums; }
.battle-scope .con-tab b { font-size: 1.15cqw; color: #f3d98b; letter-spacing: .03em; text-shadow: 0 .1cqw 0 #000; } .battle-scope .con-tab span { font-size: 1cqw; }
.battle-scope .con-row { display: grid; grid-template-columns: 5.6cqw 1fr 5.6cqw; gap: .55cqw; align-items: stretch; }
.battle-scope .con-tile { position: relative; height: 5.6cqw; border-radius: .9cqw; border: .14cqw solid #0b0c0d; cursor: pointer; color: #fff; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15cqw;
  box-shadow: inset 0 .14cqw 0 rgba(255, 255, 255, .3), inset 0 -.3cqw .6cqw rgba(0, 0, 0, .45); transition: filter .15s, transform .1s; }
.battle-scope .con-tile:hover:not(:disabled) { filter: brightness(1.15); } .battle-scope .con-tile:active:not(:disabled) { transform: translateY(.12cqw); }
.battle-scope .con-tile.food { background: linear-gradient(180deg, #f08a3a, #c4521a 60%, #9a3a10); }
.battle-scope .con-tile.food .ico { font-size: 2.1cqw; filter: drop-shadow(0 .15cqw .2cqw rgba(0, 0, 0, .5)); }
.battle-scope .con-tile .num { position: absolute; right: .45cqw; bottom: .3cqw; font-size: .85cqw; font-weight: 900; font-variant-numeric: tabular-nums; text-shadow: 0 .1cqw .2cqw #000; }
.battle-scope .con-tile .num.low { color: #ffe0d6; animation: blink 1s steps(2) infinite; }
/* The nuke as a steel-blue tile (its cooldown sweep and states come from .nuke-btn). */
.battle-scope .console .nuke-btn.con-tile { position: relative; right: auto; bottom: auto; width: auto; height: 5.6cqw; border-radius: .9cqw; animation: none;
  background: linear-gradient(180deg, #4f9cc0, #24678b 60%, #154660); }
.battle-scope .console .nuke-btn.con-tile::before, .battle-scope .console .nuke-btn.con-tile::after { display: none; }
.battle-scope .console .nuke-btn .sym { font-size: 2cqw; color: #fff; text-shadow: 0 .15cqw .3cqw rgba(0, 0, 0, .6); }
.battle-scope .console .nuke-btn .lbl { display: none; }
.battle-scope .console .nuke-btn .cost { position: absolute; right: .45cqw; bottom: .3cqw; margin: 0; font-size: .75cqw; font-weight: 900; opacity: 1; text-shadow: 0 .1cqw .2cqw #000; }
.battle-scope .console .nuke-btn[disabled] { filter: grayscale(.7) brightness(.6); }
/* DEPLOY: a battle-scarred plate. */
.battle-scope .con-main { display: flex; align-items: stretch; justify-content: center; min-width: 0; }
.battle-scope .con-main .fire.deploy { width: 100%; height: 5.6cqw; border-radius: .9cqw; border: .14cqw solid #0b0c0d; font-size: 2.2cqw; letter-spacing: .14em;
  background: radial-gradient(circle at 24% 42%, rgba(60, 10, 4, .75) 0 5%, rgba(120, 30, 12, .35) 6%, transparent 16%),
    repeating-conic-gradient(from 10deg at 24% 42%, rgba(255, 210, 180, .12) 0 2deg, transparent 2deg 23deg),
    linear-gradient(180deg, #d9603a, #b13a1e 55%, #8c2a14);
  box-shadow: inset 0 .14cqw 0 rgba(255, 255, 255, .25), inset 0 -.3cqw .6cqw rgba(0, 0, 0, .4); }
.battle-scope .con-main .fire.deploy .cost { font-size: .7cqw; letter-spacing: .06em; opacity: .85; }
.battle-scope .con-main .deploying { width: 100%; height: 5.6cqw; justify-content: center; padding: 0 .3cqw; }
/* Rank strip. */
.battle-scope .con-rank { display: flex; align-items: center; gap: .7cqw; margin-top: .5cqw; padding: 0 .3cqw; }
.battle-scope .con-rank img { width: 2.4cqw; height: 2.4cqw; object-fit: contain; filter: drop-shadow(0 .1cqw .2cqw #000); }
.battle-scope .con-rank .grow { flex: 1; min-width: 0; }
.battle-scope .con-rank-line { display: flex; justify-content: space-between; align-items: baseline; gap: .6cqw; font-size: .78cqw; color: #b9bec4; white-space: nowrap; }
.battle-scope .con-rank-line b { color: #fff; font-size: .85cqw; }
.battle-scope .con-bar { height: .55cqw; margin-top: .25cqw; border-radius: .3cqw; background: #050607; box-shadow: inset 0 0 0 .1cqw #2a2e33; overflow: hidden; }
.battle-scope .con-bar i { display: block; height: 100%; background: linear-gradient(180deg, #6cc0ff, #2a7fd6); transition: width .5s ease-out; }
.battle-scope .con-refill { flex: none; padding: .2cqw .6cqw; border-radius: .5cqw; cursor: pointer; font: 800 .7cqw/1.2 "Avenir Next", "Segoe UI", Arial, sans-serif; color: #cfe7ff;
  background: rgba(42, 127, 214, .25); border: 1px solid rgba(108, 192, 255, .4); }
.battle-scope .con-refill:hover { background: rgba(42, 127, 214, .45); }
.battle-scope .deploy-panel { bottom: 12.4cqw; }
.battle-scope .console .nuke-btn.con-tile { box-shadow: inset 0 .14cqw 0 rgba(255, 255, 255, .3), inset 0 -.3cqw .6cqw rgba(0, 0, 0, .45); }
.battle-scope .console .nuke-btn .cd { border-radius: 0; }
.battle-scope .console .nuke-btn .sym { font-size: 2.8cqw; margin-bottom: .6cqw; }

/* The special slot: nuke or bazooka, picked with two small chips above the tile. */
.battle-scope .special-slot { position: relative; display: flex; flex-direction: column; min-width: 0; }
.battle-scope .special-slot > .con-tile { width: 100%; }
.battle-scope .special-pick { position: absolute; left: 50%; bottom: calc(100% + .35cqw); transform: translateX(-50%); display: flex; gap: .25cqw; padding: .2cqw; border-radius: 99px;
  background: linear-gradient(180deg, #3a3d40, #23262a 60%, #16181b); border: .1cqw solid #0b0c0d; box-shadow: 0 .4cqw 1cqw rgba(0, 0, 0, .55), inset 0 .1cqw 0 rgba(255, 255, 255, .12); }
.battle-scope .special-pick .pick { display: flex; align-items: center; gap: .2cqw; height: 1.7cqw; min-width: 1.9cqw; padding: 0 .45cqw; border: 0; border-radius: 99px; background: transparent; color: #c9d2e4;
  font: 900 .8cqw/1 "Avenir Next", "Segoe UI", Arial, sans-serif; cursor: pointer; transition: background .15s, color .15s; }
.battle-scope .special-pick .pick img { width: 1.3cqw; height: 1.3cqw; }
.battle-scope .special-pick .pick b { font-variant-numeric: tabular-nums; }
.battle-scope .special-pick .pick:hover { color: #fff; }
.battle-scope .special-pick .pick.on { background: linear-gradient(180deg, #ffe95a, #fad804 55%, #d8b800); color: #231c00; box-shadow: inset 0 .1cqw 0 rgba(255, 255, 255, .5); }
.battle-scope .special-pick .pick:focus-visible { outline: .12cqw solid #fad804; outline-offset: .1cqw; }
/* The bazooka tile: olive drab, matching its art. */
.battle-scope .con-tile.bazooka-btn { display: flex; align-items: center; justify-content: center; padding: 0; background: linear-gradient(180deg, #8a9470, #5f6a4e 55%, #3a4230); box-shadow: inset 0 .1cqw 0 rgba(255, 255, 255, .25); }
.battle-scope .con-tile.bazooka-btn img { width: 3.6cqw; height: 3.6cqw; filter: drop-shadow(0 .2cqw .3cqw rgba(0, 0, 0, .6)); }
.battle-scope .con-tile.bazooka-btn .cost { position: absolute; right: .45cqw; bottom: .3cqw; font-size: .75cqw; font-weight: 900; font-variant-numeric: tabular-nums; text-shadow: 0 .1cqw .2cqw #000; }
.battle-scope .con-tile.bazooka-btn[disabled] { filter: grayscale(.7) brightness(.6); cursor: not-allowed; }
.battle-scope .con-tile.bar { background: linear-gradient(180deg, #a3e635, #84cc16 55%, #4d7c0f); }
.battle-scope .con-tile.bar img { width: 3cqw; height: 3cqw; filter: drop-shadow(0 .2cqw .3cqw rgba(0, 0, 0, .6)); }
.battle-scope .con-tile.bar[disabled] { filter: grayscale(.7) brightness(.6); cursor: not-allowed; }

/* Dropped bazooka parts: a glowing sphere that floats until its finder clicks it. */
.battle-scope .drop { position: absolute; width: 4.4cqw; height: 4.4cqw; transform: translate(-50%, -50%); padding: 0; border: 0; background: none; cursor: pointer; z-index: 5;
  display: grid; place-items: center; animation: drop-in .45s cubic-bezier(.2, 1.4, .4, 1) both, drop-bob 2.2s ease-in-out .45s infinite; }
.battle-scope .drop .orb { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), rgba(255, 246, 200, .22) 40%, rgba(250, 216, 4, .12) 65%, transparent 72%);
  box-shadow: 0 0 1.4cqw rgba(255, 240, 160, .55), inset 0 0 .8cqw rgba(255, 255, 255, .45); border: .1cqw solid rgba(255, 250, 220, .6); animation: drop-glow 1.6s ease-in-out infinite; }
.battle-scope .drop img { position: relative; width: 2.8cqw; height: 2.8cqw; filter: drop-shadow(0 .15cqw .2cqw rgba(0, 0, 0, .6)); }
.battle-scope .drop:hover .orb { box-shadow: 0 0 2.2cqw rgba(255, 240, 160, .85), inset 0 0 1cqw rgba(255, 255, 255, .6); }
.battle-scope .drop:focus-visible { outline: .12cqw solid #fad804; outline-offset: .2cqw; border-radius: 50%; }
@keyframes drop-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.2); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes drop-bob { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - .5cqw)); } }
@keyframes drop-glow { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .battle-scope .drop, .battle-scope .drop .orb { animation: none; } }

/* The console's Deploy button while the orders panel is open: it now starts the deployment. */
.battle-scope .con-main .fire.deploy.armed { box-shadow: 0 0 0 .14cqw #fad804, 0 0 1.6cqw rgba(250, 216, 4, .45); animation: deploy-armed 1.4s ease-in-out infinite; }
.battle-scope .con-main .fire.deploy.armed .lbl { font-size: 1.6cqw; }
@keyframes deploy-armed { 0%, 100% { box-shadow: 0 0 0 .14cqw #fad804, 0 0 1.2cqw rgba(250, 216, 4, .35); } 50% { box-shadow: 0 0 0 .14cqw #fad804, 0 0 2cqw rgba(250, 216, 4, .6); } }
@media (prefers-reduced-motion: reduce) { .battle-scope .con-main .fire.deploy.armed { animation: none; } }

/* Console energy bar: current energy, plus a lighter segment for what one press of the consume tile adds. */
.battle-scope .con-energy { display: flex; align-items: center; gap: .6cqw; margin-top: .5cqw; padding: 0 .3cqw; }
.battle-scope .con-energy .lbl { width: 2.4cqw; text-align: center; font-size: 1.2cqw; }
.battle-scope .con-energy .con-bar { flex: 1; margin-top: 0; height: .8cqw; display: flex; }
.battle-scope .con-bar.energy i { background: linear-gradient(180deg, #a3e635, #65a30d); }
.battle-scope .con-bar.energy i.low { background: linear-gradient(180deg, #ff7a62, #e4361f); }
.battle-scope .con-bar.energy i.gain { background: repeating-linear-gradient(135deg, rgba(163, 230, 53, .55) 0 .3cqw, rgba(163, 230, 53, .3) .3cqw .6cqw); }
.battle-scope .con-energy b { min-width: 7cqw; text-align: right; font-size: .95cqw; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.battle-scope .con-energy b small { font-size: .75cqw; color: #b9bec4; font-weight: 700; }
.battle-scope .con-energy b em { font-style: normal; font-size: .8cqw; color: #a3e635; }
.battle-scope .con-tile .num.gain { font-weight: 900; font-variant-numeric: tabular-nums; }
.battle-scope .con-tile .num.gain.none { opacity: .8; font-size: .8cqw; }

/* ── Prestige vehicles: each fires its own way (shared::vehicles::FireStyle) ── */
.battle-scope .tank .charge, .battle-scope .tank .pods { position: absolute; pointer-events: none; opacity: 0; }

/* Aurum Strider: a two-round burst from the stacked autocannons; the walker dips on its legs. */
.battle-scope .tank.veh4 .flash { width: 3.4cqw; height: 2.4cqw; margin: -1.2cqw 0 0 -.8cqw; background: radial-gradient(ellipse at 30% 50%, #fff 0 16%, #ffe680 30%, #ffb800 52%, rgba(255, 170, 0, 0) 72%); }
.battle-scope .tank.veh4 .flash-a { translate: 0 -9%; } .battle-scope .tank.veh4 .flash-b { translate: 0 9%; }
.battle-scope .tank.veh4 .recoil-a, .battle-scope .tank.veh4 .recoil-b { animation-duration: .2s; }
.battle-scope .tank.veh4 .stomp-a { animation: stomp-a .26s ease-out; } .battle-scope .tank.veh4 .stomp-b { animation: stomp-b .26s ease-out; }
@keyframes stomp-a { 30% { translate: -.12cqw .14cqw; scale: .985; } }
@keyframes stomp-b { 30% { translate: -.12cqw .14cqw; scale: .985; } }
.battle-scope .shell.tracer .body { width: 1.5cqw; height: .32cqw; margin: -.16cqw 0 0 -.75cqw; background: linear-gradient(90deg, #ffb800, #fff6c0 60%, #fff); box-shadow: 0 0 .6cqw .15cqw rgba(255, 210, 60, .9); animation: none; }
.battle-scope .shell.tracer .trail { width: 14cqw; height: .22cqw; margin-top: -.11cqw; margin-left: -14cqw; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 220, 90, .7) 70%, #fff8d0); filter: none; }
.battle-scope .blast.tracer .core { scale: .5; } .battle-scope .blast.tracer .wave { scale: .45; } .battle-scope .blast.tracer .smoke { scale: .55; } .battle-scope .blast.tracer .spark { scale: .7; }

/* Glacier NX-9: both cryo-cannons glow while they charge, then twin ice bolts and a frost burst. */
.battle-scope .tank.veh5 .charge { left: 54%; top: 37%; width: 45%; height: 26%; border-radius: .4cqw; mix-blend-mode: screen;
  background: linear-gradient(90deg, rgba(95, 243, 255, 0), #5ff3ff 40%, #e9fdff) 0 0 / 100% 22% no-repeat, linear-gradient(90deg, rgba(95, 243, 255, 0), #5ff3ff 40%, #e9fdff) 0 100% / 100% 22% no-repeat;
  filter: drop-shadow(0 0 .35cqw #5ff3ff) drop-shadow(0 0 .8cqw rgba(95, 243, 255, .8)); }
.battle-scope .tank.veh5 .charge-a { animation: charge-a .62s ease-in forwards; } .battle-scope .tank.veh5 .charge-b { animation: charge-b .62s ease-in forwards; }
@keyframes charge-a { 0% { opacity: 0; } 20% { opacity: .35; } 55% { opacity: .55; } 83% { opacity: 1; filter: drop-shadow(0 0 .5cqw #fff) drop-shadow(0 0 1.4cqw #5ff3ff); } 86%, 100% { opacity: 0; } }
@keyframes charge-b { 0% { opacity: 0; } 20% { opacity: .35; } 55% { opacity: .55; } 83% { opacity: 1; filter: drop-shadow(0 0 .5cqw #fff) drop-shadow(0 0 1.4cqw #5ff3ff); } 86%, 100% { opacity: 0; } }
.battle-scope .tank.veh5 .flash { background: radial-gradient(circle at 30% 44%, #fff 0 9%, #b8fbff 16%, rgba(95, 243, 255, .8) 26%, rgba(95, 243, 255, 0) 40%), radial-gradient(circle at 30% 56%, #fff 0 9%, #b8fbff 16%, rgba(95, 243, 255, .8) 26%, rgba(95, 243, 255, 0) 40%); }
.battle-scope .shell.cryo .body { width: 2.2cqw; height: .5cqw; margin: -.25cqw 0 0 -1.1cqw; background: linear-gradient(90deg, #2bd9ff, #c9fbff 55%, #fff); box-shadow: 0 0 .8cqw .25cqw rgba(95, 243, 255, .95), 0 0 2cqw .5cqw rgba(40, 180, 255, .5); animation: none; }
.battle-scope .shell.cryo .trail { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(95, 243, 255, .6) 60%, #e9fdff); }
.battle-scope .blast.cryo .core { background: radial-gradient(circle, #fff 0 18%, #d9fdff 30%, #5ff3ff 50%, rgba(40, 160, 255, .6) 62%, rgba(40, 160, 255, 0) 74%); }
.battle-scope .blast.cryo .wave { border-color: rgba(200, 250, 255, .9); box-shadow: 0 0 1cqw rgba(95, 243, 255, .7); }
.battle-scope .blast.cryo .spark { background: linear-gradient(90deg, #fff, #5ff3ff); box-shadow: 0 0 .5cqw #5ff3ff; }
.battle-scope .blast.cryo .smoke { background: radial-gradient(circle, rgba(225, 248, 255, .7), rgba(160, 220, 240, 0) 70%); }

/* Hellstorm: a ripple salvo of missiles from the two pods, curving in on smoke trails. */
.battle-scope .tank.veh6 .pods { left: 14%; top: 14%; width: 26%; height: 72%;
  background: radial-gradient(ellipse at 35% 21%, #fff 0 8%, #ffd27a 16%, rgba(255, 120, 30, .85) 30%, rgba(255, 90, 20, 0) 48%) no-repeat, radial-gradient(ellipse at 35% 79%, #fff 0 8%, #ffd27a 16%, rgba(255, 120, 30, .85) 30%, rgba(255, 90, 20, 0) 48%) no-repeat;
  background-size: 100% 100%, 0 0; mix-blend-mode: screen; }
.battle-scope .tank.veh6 .launch-a { animation: launch-a .3s ease-out; }
.battle-scope .tank.veh6 .launch-b { background-size: 0 0, 100% 100%; animation: launch-b .3s ease-out; }
@keyframes launch-a { 0% { opacity: 1; scale: 1.15; } 100% { opacity: 0; scale: .9; } }
@keyframes launch-b { 0% { opacity: 1; scale: 1.15; } 100% { opacity: 0; scale: .9; } }
.battle-scope .tank.veh6 .flash { display: none; }
.battle-scope .tank.veh6 .recoil-a, .battle-scope .tank.veh6 .recoil-b { animation: none; }
.battle-scope .shell.missile { animation: fly var(--ms) cubic-bezier(.5, 0, .7, 1) forwards, sway var(--ms) ease-in-out forwards; }
@keyframes sway { 0% { transform: translate(0, 0); } 45% { transform: translate(var(--bx), var(--by)); } 100% { transform: translate(0, 0); } }
.battle-scope .shell.missile .body { width: 1.6cqw; height: .42cqw; margin: -.21cqw 0 0 -.8cqw; border-radius: .2cqw .5cqw .5cqw .2cqw; animation: none;
  background: linear-gradient(90deg, #ffb02e 0 18%, #3a3c3e 18% 78%, #c8442c 78%); box-shadow: -.5cqw 0 .7cqw .1cqw rgba(255, 140, 30, .9); }
.battle-scope .shell.missile .trail { width: 9cqw; height: .9cqw; margin-top: -.45cqw; margin-left: -9cqw; filter: blur(.25cqw);
  background: linear-gradient(90deg, rgba(160, 160, 160, 0), rgba(190, 185, 175, .55) 55%, rgba(255, 170, 60, .9) 92%, #fff3c0); }
.battle-scope .blast.missile .core { scale: .7; } .battle-scope .blast.missile .wave { scale: .6; }

/* ── Detail tiers (src/battle/quality.rs): the game steps these in by itself when frames run slow, and
   the gauge button in the toolbar forces tier 1. Nothing here changes damage or totals. ── */
.battle-scope .tool.on { color: var(--gold); border-color: var(--gold); }
/* A crowded field: 20+ tanks do not each need their idle breathing. */
.battle-scope .battle-root.crowded .tank .rig { animation: none; }
/* Tier 1: no smoke, shock rings, sparks or tracer trails. */
.battle-scope .battle-root:is(.fx-1, .fx-2) .blast .smoke,
.battle-scope .battle-root:is(.fx-1, .fx-2) .blast .wave,
.battle-scope .battle-root:is(.fx-1, .fx-2) .blast .spark,
.battle-scope .battle-root:is(.fx-1, .fx-2) .shell .trail { display: none; }
/* Tier 2: also no shaking or zooming of the whole scene, and no idle tank motion. */
.battle-scope .battle-root.fx-2 .quake-wrap, .battle-scope .battle-root.fx-2 .world { animation: none !important; }
.battle-scope .battle-root.fx-2 .cam, .battle-scope .battle-root.fx-2 .cam.hero { transform: none; transition: none; }
.battle-scope .battle-root.fx-2 .tank .rig { animation: none; }
.battle-scope .battle-root.fx-2 .nuke .n-mush, .battle-scope .battle-root.fx-2 .nuke .n-rad .spore { display: none; }

@media (prefers-reduced-motion: reduce) {
  .battle-scope .tank.veh4 .stomp-a, .battle-scope .tank.veh4 .stomp-b { animation: none; }
  .battle-scope .shell.missile { animation: fly var(--ms) linear forwards; }
  .battle-scope .tank.veh5 .charge-a, .battle-scope .tank.veh5 .charge-b { animation: none; }
}

/* ── Crowded battles ── */
/* A tank rotating onto the field (the side had 21 already) rolls in from its own back line. */
.battle-scope .tank { animation: tank-in .5s cubic-bezier(.2, .9, .3, 1) both; contain: layout style; }
@keyframes tank-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } }
/* Light strikes: no full-screen layers, smaller blast. */
.battle-scope .nuke.light .n-core { transform: scale(.55); }
.battle-scope .nuke.light .n-ring { opacity: .6; }
.battle-scope .nuke.light .n-rad .glow { opacity: .55; }
/* Only the newest red alert shows; the count says how many more are falling. */
.battle-scope .n-over:not(:last-of-type) .n-pre { display: none; }
.battle-scope .n-many { position: absolute; left: 50%; top: 18cqw; transform: translateX(-50%); z-index: 13; padding: .3cqw 1cqw; border-radius: 99px; font-size: .9cqw; font-weight: 900; letter-spacing: .12em;
  color: #fff; background: rgba(180, 20, 10, .85); border: .1cqw solid #ff7a62; box-shadow: 0 0 1.2cqw rgba(255, 60, 40, .5); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .battle-scope .tank { animation: none; } }
.battle-scope .geo-fact { max-width: 46cqw; margin: .8cqw auto 0; font-size: 1.25cqw; line-height: 1.4; opacity: .85; }


/* ───────────────────────── Signature moments ─────────────────────────
   Fewer, stronger effects: a heavy hit freezes the frame and punches the camera, the field keeps
   its scars, a nuke dims and whites out the screen, the hero gets the camera, the finish gets a
   heartbeat and a cinematic. */

/* The camera: everything in the world moves with it. */
.battle-scope .cam { position: absolute; inset: 0; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.battle-scope .cam.hero { transform: scale(1.16); transition-duration: 1s; }

/* Heavy hit: the frame freezes for a heartbeat, then the camera punches towards the impact. */
.battle-scope .world.hitstop, .battle-scope .world.hitstop * { animation-play-state: paused !important; }
.battle-scope .world.punch-a { transform-origin: var(--px) var(--py); animation: punch-a .42s cubic-bezier(.2, .9, .3, 1); }
.battle-scope .world.punch-b { transform-origin: var(--px) var(--py); animation: punch-b .42s cubic-bezier(.2, .9, .3, 1); }
@keyframes punch-a { 0% { transform: scale(1); } 18% { transform: scale(1.035) rotate(.25deg); } 100% { transform: none; } }
@keyframes punch-b { 0% { transform: scale(1); } 18% { transform: scale(1.035) rotate(-.25deg); } 100% { transform: none; } }

.battle-scope .shockwave { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 6; }
.battle-scope .shockwave i { position: absolute; left: 0; top: 0; width: 16cqw; height: 10cqw; margin: -5cqw 0 0 -8cqw; border-radius: 50%;
  border: .35cqw solid rgba(255, 236, 200, .85); box-shadow: 0 0 1.4cqw rgba(255, 190, 90, .7), inset 0 0 1cqw rgba(255, 190, 90, .5);
  animation: shock-wave .8s cubic-bezier(.1, .7, .3, 1) forwards; }
.battle-scope .shockwave i + i { border-width: .15cqw; border-color: rgba(255, 255, 255, .5); animation-delay: .08s; animation-duration: 1s; }
@keyframes shock-wave { 0% { transform: scale(.1); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }

/* Lasting scars: scorched earth where the heavy fighting was, nuke craters with a molten rim. The glow in
   the middle is a still, plain-alpha layer: an 8 s fading, blended ember on each of 36 scars cost frames. */
.battle-scope .scars { position: absolute; inset: 0; pointer-events: none; }
.battle-scope .scar { position: absolute; transform: translate(-50%, -50%) rotate(var(--rot)); border-radius: 50%; opacity: 0; animation: scar-in 1.2s ease-out .2s forwards;
  background:
    repeating-conic-gradient(from var(--rot), rgba(0, 0, 0, .35) 0deg 7deg, transparent 7deg 19deg),
    radial-gradient(closest-side, rgba(6, 4, 3, .92), rgba(20, 14, 10, .78) 38%, rgba(48, 36, 26, .5) 58%, rgba(150, 132, 108, .28) 72%, transparent 88%);
  -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent); mask-image: radial-gradient(closest-side, #000 60%, transparent); }
.battle-scope .scar::after { content: ""; position: absolute; inset: 28%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 130, 40, .6), rgba(255, 80, 20, .2) 60%, transparent); opacity: .5; }
.battle-scope .scar.nuke { background:
    repeating-conic-gradient(from var(--rot), rgba(0, 0, 0, .45) 0deg 4deg, transparent 4deg 11deg),
    radial-gradient(closest-side, rgba(4, 3, 2, .96), rgba(16, 10, 6, .9) 34%, rgba(46, 30, 16, .7) 52%, rgba(160, 130, 90, .3) 68%, rgba(60, 46, 30, .2) 80%, transparent 92%); }
.battle-scope .scar.nuke::after { inset: 18%; background: radial-gradient(closest-side, transparent 55%, rgba(255, 110, 30, .45) 72%, transparent 85%); opacity: .6; }
@keyframes scar-in { from { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot)) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot)) scale(1); } }

/* The nuke as an event: the field darkens while it falls, then a slow white-out at detonation. */
.battle-scope .nuke-dim { position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(30, 0, 0, .5)); }
.battle-scope .nuke-dim.on { opacity: 1; animation: alarm 1.6s ease-in-out infinite; }
@keyframes alarm { 50% { opacity: .65; } }
.battle-scope .nuke-flash { position: absolute; inset: 0; z-index: 25; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 55%, #fff, #fff6d8 35%, #ffb35c 70%, rgba(255, 120, 40, .6)); }
.battle-scope .nuke-flash.flash-a { animation: whiteout-a 2.2s cubic-bezier(.1, .6, .2, 1); }
.battle-scope .nuke-flash.flash-b { animation: whiteout-b 2.2s cubic-bezier(.1, .6, .2, 1); }
@keyframes whiteout-a { 0% { opacity: 0; } 6% { opacity: 1; } 30% { opacity: .9; } 100% { opacity: 0; } }
@keyframes whiteout-b { 0% { opacity: 0; } 6% { opacity: 1; } 30% { opacity: .9; } 100% { opacity: 0; } }

/* Hero of the front: the camera leans in, a spotlight on the tank, a banner across the top. */
.battle-scope .hero-spot { position: absolute; inset: 0; pointer-events: none; z-index: 5; animation: fade-in .5s ease-out;
  background: radial-gradient(circle at var(--hx) var(--hy), transparent 7cqw, rgba(0, 0, 0, .55) 16cqw); }
.battle-scope .hero-banner { position: absolute; left: 50%; top: 13.6cqw; transform: translateX(-50%); z-index: 12; display: flex; flex-direction: column; align-items: center; gap: .15cqw;
  padding: .8cqw 3cqw 1cqw; text-align: center; pointer-events: none; animation: hero-banner-in 3.2s cubic-bezier(.2, .8, .2, 1) forwards;
  background: linear-gradient(90deg, transparent, rgba(10, 42, 92, .92) 18%, rgba(10, 42, 92, .92) 82%, transparent); border-top: 1px solid rgba(58, 160, 255, .7); border-bottom: 1px solid rgba(58, 160, 255, .7); }
.battle-scope .hero-banner.enemy { background: linear-gradient(90deg, transparent, rgba(92, 20, 16, .92) 18%, rgba(92, 20, 16, .92) 82%, transparent); border-color: rgba(255, 75, 58, .7); }
.battle-scope .hero-banner small { font-size: .8cqw; font-weight: 900; letter-spacing: .4em; text-transform: uppercase; color: var(--gold); }
.battle-scope .hero-banner b { font-size: 2.2cqw; font-weight: 900; letter-spacing: .04em; text-shadow: 0 .2cqw .6cqw rgba(0, 0, 0, .8); }
.battle-scope .hero-banner span { font-size: .9cqw; font-weight: 700; opacity: .8; }
@keyframes hero-banner-in { 0% { opacity: 0; transform: translateX(-50%) scaleX(.4); } 12% { opacity: 1; transform: translateX(-50%) scaleX(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-1cqw); } }

/* The finish: a pulsing clock and a red heartbeat at the edges for the last 30 seconds. */
.battle-scope .clock .time.final { color: #ff5a46; animation: final-pulse 1s ease-in-out infinite; display: inline-block; text-shadow: 0 0 1.2cqw rgba(255, 70, 40, .8); }
@keyframes final-pulse { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.18); } 24% { transform: scale(1.02); } 36% { transform: scale(1.1); } }
.battle-scope .final-edge { position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: 0; transition: opacity 1s;
  box-shadow: inset 0 0 6cqw rgba(255, 40, 20, .55); }
.battle-scope .final-edge.on { opacity: 1; animation: edge-beat 1s ease-in-out infinite; }
@keyframes edge-beat { 0%, 100% { opacity: .45; } 12% { opacity: 1; } 36% { opacity: .8; } }

/* Victory / defeat: a cinematic instead of a card. */
.battle-scope .cine { position: fixed; inset: 0; z-index: 30; container-type: size; display: grid; place-items: center; text-align: center; overflow: hidden; animation: fade-in .6s ease-out;
  background: radial-gradient(ellipse at center, rgba(2, 6, 12, .62), rgba(2, 6, 12, .94)); }
.battle-scope .cine.lose { background: radial-gradient(ellipse at center, rgba(20, 4, 2, .7), rgba(4, 1, 0, .96)); backdrop-filter: grayscale(.8); }
.battle-scope .cine-bar { position: absolute; left: 0; right: 0; height: 3.5cqw; background: #000; z-index: 2; animation: cine-bar-in .9s cubic-bezier(.7, 0, .2, 1) forwards; }
.battle-scope .cine-bar.cine-top { top: 0; transform: translateY(-100%); } .battle-scope .cine-bar.cine-bottom { bottom: 0; transform: translateY(100%); }
@keyframes cine-bar-in { to { transform: none; } }
.battle-scope .cine-rays { position: absolute; left: 50%; top: 46%; width: 140cqw; height: 140cqw; margin: -70cqw 0 0 -70cqw; opacity: 0; animation: rays-in 1.4s ease-out .5s forwards, spin 60s linear infinite;
  background: repeating-conic-gradient(from 0deg, rgba(255, 210, 90, .16) 0deg 6deg, transparent 6deg 18deg); -webkit-mask-image: radial-gradient(circle, #000 10%, transparent 60%); mask-image: radial-gradient(circle, #000 10%, transparent 60%); }
.battle-scope .cine.lose .cine-rays { background: repeating-conic-gradient(from 0deg, rgba(255, 70, 40, .08) 0deg 4deg, transparent 4deg 22deg); }
@keyframes rays-in { to { opacity: 1; } }
.battle-scope .cine-body { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 1.8cqw; }
.battle-scope .cine-kicker { font-size: 1cqw; font-weight: 800; letter-spacing: .5em; text-transform: uppercase; opacity: 0; animation: cine-rise .6s ease-out .7s forwards; }
.battle-scope .cine-title { margin: 0; font-size: 11cqw; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; line-height: 1; }
.battle-scope .cine-title span { display: inline-block; opacity: 0; transform: translateY(2cqw) scale(1.4); filter: blur(.6cqw); animation: cine-letter .7s cubic-bezier(.2, 1.3, .3, 1) forwards; animation-delay: calc(.9s + var(--i) * .07s); }
.battle-scope .cine.win .cine-title { color: var(--gold); text-shadow: 0 0 3cqw rgba(255, 190, 40, .75), 0 .4cqw 0 #6a3d00; }
.battle-scope .cine.lose .cine-title { color: #ff6a58; text-shadow: 0 0 3cqw rgba(255, 70, 40, .6), 0 .4cqw 0 #5a0f06; }
@keyframes cine-letter { to { opacity: 1; transform: none; filter: none; } }
.battle-scope .cine-line { margin: 0; font-size: 1.7cqw; font-weight: 700; opacity: 0; animation: cine-rise .6s ease-out 1.6s forwards; }
.battle-scope .cine-stats { display: flex; justify-content: center; gap: 4cqw; margin-top: 2cqw; padding: 2.6cqw 2.4cqw; border-top: 1px solid rgba(255, 255, 255, .15); border-bottom: 1px solid rgba(255, 255, 255, .15); opacity: 0; animation: cine-rise .6s ease-out 1.9s forwards; }
.battle-scope .cine-stats div { display: flex; flex-direction: column; align-items: center; gap: .3cqw; min-width: 8cqw; } .battle-scope .cine-stats small { font-size: .9cqw; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; opacity: .65; }
.battle-scope .cine-stats b { font: 900 2.6cqw ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums; }
/* Your share of your country's damage, on the closing card. */
.battle-scope .cine-part { margin-top: 1.4cqw; font-size: 1.15cqw; opacity: 0; animation: cine-rise .6s ease-out 2.3s forwards; }
/* A new personal record (src/records.rs): the damage glows gold and a badge stamps in. */
.battle-scope .cine-stats .record b { color: #ffd25a; text-shadow: 0 0 1.4cqw rgba(255, 200, 60, .7); }
.battle-scope .record-badge { margin-top: .4cqw; padding: .3cqw .8cqw; border-radius: .4cqw; background: #ffd25a; color: #2a1d00;
  font: 800 .85cqw/1 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; animation: record-in .5s cubic-bezier(.2, 1.4, .3, 1) 2.4s both; }
@keyframes record-in { 0% { transform: scale(2) rotate(-12deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.battle-scope .cine .leave { opacity: 0; animation: cine-rise .6s ease-out 2.2s forwards; margin-top: 2.4cqw; padding: 1.4cqw 3.6cqw; border-radius: 1cqw; text-decoration: none;
  font: 900 1.2cqw/1 "Avenir Next", "Segoe UI", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #231c00;
  background: linear-gradient(180deg, #fff09a, #fad804 60%, #b89a00); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 .6cqw 1.6cqw rgba(250, 216, 4, .3); }
.battle-scope .cine .leave:hover { filter: brightness(1.08); }
@keyframes cine-rise { from { opacity: 0; transform: translateY(1cqw); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .battle-scope .cam, .battle-scope .cam.hero { transition: none; transform: none; } .battle-scope .world.punch-a, .battle-scope .world.punch-b, .battle-scope .clock .time.final, .battle-scope .final-edge.on, .battle-scope .nuke-dim.on, .battle-scope .cine-rays { animation: none; }
  .battle-scope .cine-title span, .battle-scope .cine-kicker, .battle-scope .cine-line, .battle-scope .cine-stats, .battle-scope .cine .leave, .battle-scope .cine-bar { animation-duration: .01s; animation-delay: 0s; }
}

/* ── Round stats panel (opened from the stats button next to Home) ──
   A regular dialog from the design system, so it is sized in rem, not in stage units. */
.battle-scope .round-stats { width: min(920px, 100%); display: flex; flex-direction: column; gap: var(--sp-4); }
/* The round pills: never scroll or clip (a pulsing live dot on the last one was cut by the scroll edge); a
   campaign has few rounds, so they simply wrap on a narrow screen. */
.battle-scope .round-stats .tabs { align-self: flex-start; overflow: visible; flex-wrap: wrap; max-width: 100%; }
.battle-scope .round-stats .tab { min-width: 88px; gap: var(--sp-2); }
.battle-scope .round-stats .tab .live-dot { flex: none; }
.battle-scope .rs-head { display: flex; flex-direction: column; gap: var(--sp-1); padding-right: var(--sp-8); }
.battle-scope .rs-head h2, .battle-scope .rs-head p { margin: 0; }
.battle-scope .rs-skeleton { display: block; height: 220px; border-radius: var(--r-lg); }
.battle-scope .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: live 1.6s ease-in-out infinite; }
.battle-scope .rs-winner { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); color: var(--gold-text); }
.battle-scope .rs-winner b { font: var(--fw-semibold) var(--fs-h3) / 1.2 var(--font-display); letter-spacing: var(--ls-display); color: var(--text); }
.battle-scope .rs-split { display: flex; flex-direction: column; gap: var(--sp-2); }
.battle-scope .rs-nums { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.battle-scope .rs-nums .friend { color: var(--blue-text); } .battle-scope .rs-nums .enemy { color: var(--red-text); }
.battle-scope .rs-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.battle-scope .rs-side { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; padding: var(--sp-4); }
.battle-scope .rs-side.friend { border-color: color-mix(in srgb, var(--blue) 45%, transparent); }
.battle-scope .rs-side.enemy { border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.battle-scope .rs-side-head { display: flex; align-items: center; gap: var(--sp-2); min-height: 28px; }
.battle-scope .rs-total { margin-left: auto; font: var(--fw-bold) var(--fs-h3) / 1 var(--font-display); }
.battle-scope .rs-side .who { font-weight: var(--fw-semibold); color: var(--text); }
@media (max-width: 720px) { .battle-scope .rs-sides { grid-template-columns: minmax(0, 1fr); } }
.battle-scope .rs-bar { display: flex; height: 10px; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-sunken); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
.battle-scope .rs-bar > span { height: 100%; transition: width .9s var(--ease); }
.battle-scope .rs-bar > .friend { background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 70%, #000), var(--blue)); }
.battle-scope .rs-bar > .enemy { background: linear-gradient(90deg, var(--red), color-mix(in srgb, var(--red) 70%, #000)); }
.battle-scope .rs-bar.neutral > span { background: color-mix(in srgb, var(--text-3) 70%, transparent); }
.battle-scope .rs-bar.neutral > span + span { background: color-mix(in srgb, var(--text-3) 40%, transparent); }
.battle-scope .rs-gap td { padding: 0; text-align: center; color: var(--text-3); line-height: 1; letter-spacing: .3em; }
.battle-scope .rs-me td { background: color-mix(in srgb, var(--brand) 14%, transparent); }
.battle-scope .rs-you { margin-left: var(--sp-2); padding: 0 var(--sp-2); border-radius: var(--r-pill); font: var(--fw-semibold) var(--fs-xs) / 1.6 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--brand-text); background: var(--brand-soft); }
.battle-scope .rs-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid var(--border);
  font: var(--fw-semibold) var(--fs-xs) / 1.4 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.battle-scope .rs-pill.bad { color: var(--red-text); background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 30%, transparent); }
.battle-scope .rs-pill.gold { color: var(--gold-text); background: var(--gold-soft); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }