/* ───────────────────────── 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%; }

/* The root is a size container: the stage takes the largest 16:9 box that fits it, clear of notches
   and the home bar, whichever way the screen is turned. Taps fire at once (no double-tap zoom). */
.battle-scope .battle-root {
  position: fixed; inset: 0; display: grid; place-items: center; container-type: size;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  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;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}

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

/* A phone held upright: the battle turns sideways onto the long side of the screen, as if the phone
   were turned (upright, the 16:9 field would be a strip a few centimetres high). The physical top
   (the notch) is now the root's left edge, so the safe areas turn with it. */
@media (orientation: portrait) and (max-width: 900px) {
  .battle-scope .battle-root {
    inset: 0 auto auto 100%; width: 100vh; width: 100dvh; height: 100vw; height: 100dvw;
    transform: rotate(90deg); transform-origin: top left;
    padding: env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) env(safe-area-inset-top);
  }
}

/* ── 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: 12cqw; pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 8, 18, .88), rgba(2, 8, 18, .55) 55%, transparent); }
.battle-scope .switch-side { position: absolute; top: 8cqw; 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; }

/* The scoreboard: one glass band, your side left, the clock between, the front line along its foot. */
.battle-scope .scoreboard { position: absolute; left: 1.2cqw; right: 1.2cqw; top: .8cqw; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1.6cqw;
  padding: .6cqw 1.2cqw 2.2cqw; border-radius: 1cqw; background: rgba(6, 12, 22, .72); backdrop-filter: blur(.6cqw);
  box-shadow: inset 0 0 0 .08cqw rgba(255, 255, 255, .1), 0 .4cqw 1.6cqw rgba(0, 0, 0, .5); text-shadow: 0 .1cqw .3cqw #000; }
.battle-scope .sb-side { --tone: var(--blue); display: flex; align-items: center; gap: .9cqw; min-width: 0; }
.battle-scope .sb-side.right { --tone: var(--red); flex-direction: row-reverse; }
.battle-scope .sb-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.battle-scope .sb-side.right .sb-who { align-items: flex-end; }
.battle-scope .sb-who .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.35cqw; font-weight: 800; color: color-mix(in srgb, var(--tone) 25%, #fff); }
.battle-scope .sb-who .role { font-size: .75cqw; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.battle-scope .sb-rounds { display: flex; gap: .25cqw; margin-left: auto; }
.battle-scope .sb-side.right .sb-rounds { margin: 0 auto 0 0; }
.battle-scope .sb-rounds i { width: 1.2cqw; height: .45cqw; border-radius: .2cqw; background: rgba(255, 255, 255, .16); }
.battle-scope .sb-rounds i.on { background: var(--tone); box-shadow: 0 0 .5cqw var(--tone); }
.battle-scope .sb-dmg { font-size: 2.3cqw; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 0 1cqw color-mix(in srgb, var(--tone) 70%, transparent); }
.battle-scope .clock { display: flex; flex-direction: column; align-items: center; gap: .2cqw; text-align: center; }
.battle-scope .clock .time { font: 800 1.9cqw ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .06em; }
.battle-scope .clock .time.low { color: #ff7a6a; animation: blink 1s steps(2) infinite; }
.battle-scope .clock .title { font-size: .9cqw; font-weight: 700; opacity: .75; white-space: nowrap; }
@keyframes blink { 50% { opacity: .35; } }
/* The front line: blue is your share from the left, the glowing line moves, the tick marks an even fight. */
.battle-scope .front { position: absolute; left: 1.2cqw; right: 1.2cqw; bottom: .7cqw; height: .5cqw; border-radius: .3cqw; background: color-mix(in srgb, var(--red) 80%, #000); }
.battle-scope .front .fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--blue); transition: width .7s cubic-bezier(.2, .8, .2, 1); }
.battle-scope .front .mid { position: absolute; left: 50%; top: -.25cqw; bottom: -.25cqw; width: .1cqw; background: rgba(255, 255, 255, .35); }
.battle-scope .front .line { position: absolute; top: -.4cqw; bottom: -.4cqw; width: .25cqw; margin-left: -.125cqw; border-radius: .2cqw; background: #fff;
  box-shadow: 0 0 .5cqw #fff, 0 0 1.2cqw rgba(255, 255, 255, .6); transition: left .7s cubic-bezier(.2, .8, .2, 1); }
.battle-scope .front .lead { position: absolute; bottom: calc(100% + .35cqw); font-size: .85cqw; font-weight: 800; font-variant-numeric: tabular-nums; }
.battle-scope .front .lead.l { left: 0; color: var(--blue-text); } .battle-scope .front .lead.r { right: 0; color: var(--red-text); }
@media (prefers-reduced-motion: reduce) { .battle-scope .front .fill, .battle-scope .front .line { transition: none; } }

.battle-scope .tools { position: absolute; left: 50%; top: 8cqw; 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: 10.8cqw; 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; }

/* The NPC opponent across from you: a player's tank with a health bar over it. Hits drain the
   red bar at once and the pale one a beat later; at zero it burns out and the next one rolls in. */
.battle-scope .tank.npc { animation: npc-in .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes npc-in { from { translate: 5cqw 0; opacity: 0; } to { translate: 0 0; opacity: 1; } }
.battle-scope .tank .hp { position: absolute; left: 50%; bottom: 104%; width: 4.6cqw; height: max(.45cqw, 3px); transform: translateX(-50%); overflow: hidden;
  border-radius: .3cqw; background: rgba(10, 14, 20, .8); box-shadow: 0 .1cqw .3cqw rgba(0, 0, 0, .5), inset 0 0 0 .08cqw rgba(255, 255, 255, .14); }
.battle-scope .tank .hp i { position: absolute; inset: 0 auto 0 0; }
.battle-scope .tank .hp .lag { background: rgba(255, 236, 200, .85); transition: width .45s ease-in .18s; }
.battle-scope .tank .hp .fill { background: linear-gradient(180deg, color-mix(in srgb, var(--red) 75%, #fff), var(--red) 55%, color-mix(in srgb, var(--red) 70%, #000)); transition: width .12s ease-out; }
.battle-scope .tank.npc.down .rig { animation: npc-down .7s ease-in forwards; }
.battle-scope .tank.npc.down .tag, .battle-scope .tank.npc.down .hp { opacity: 0; transition: opacity .25s; }
@keyframes npc-down { 0% { filter: brightness(1.8); scale: 1; opacity: 1; } 25% { filter: grayscale(1) brightness(.4); } 100% { filter: grayscale(1) brightness(.25); scale: .9; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .battle-scope .tank.npc, .battle-scope .tank.npc.down .rig { animation: none; } .battle-scope .tank.npc.down { opacity: 0; } }

/* Flags: real images, never emoji. */
.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 .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-damage, .battle-scope .con-kills { display: inline-flex; align-items: center; gap: .4cqw; }
.battle-scope .con-kills { padding-left: .7cqw; border-left: .1cqw solid rgba(255, 255, 255, .14); color: #f3d98b; }
.battle-scope .con-kills .icon { width: 1.05cqw; height: 1.05cqw; }
.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); }

/* ── Small screens (a phone on its side: the stage is ~700 px wide) ──
   Sizes in cqw would shrink text to 5 px and buttons to 20 px. The controls grow from their anchor
   and text keeps a readable floor; the field itself still scales as one picture. */
@container (max-width: 900px) {
  /* The console, the deploy panel and the messages above it grow about one point, the bottom centre
     of the stage (each origin is its own height plus its distance from the bottom), so they keep
     their places relative to each other. */
  .battle-scope .console, .battle-scope .deploy-panel, .battle-scope .bmsgs { transform: translateX(-50%) scale(1.25); }
  .battle-scope .console { transform-origin: 50% calc(100% + .6cqw); }
  .battle-scope .deploy-panel { transform-origin: 50% calc(100% + 12.4cqw); }
  .battle-scope .bmsgs { transform-origin: 50% calc(100% + 13cqw); }
  .battle-scope .tools { transform: translateX(-50%) scale(1.45); transform-origin: 50% 0; }
  .battle-scope .tank .tag { font-size: max(.72cqw, 9px); }
  .battle-scope .panel { font-size: max(1.05cqw, 9px); }
  .battle-scope .panel h4 { font-size: max(.95cqw, 8px); }
  .battle-scope .sb-who .name, .battle-scope .clock .title { font-size: max(1.35cqw, 10px); }
  .battle-scope .sb-who .role, .battle-scope .front .lead { font-size: max(.85cqw, 8px); }
}