/* ══════════════════════════════════════════════════════════════════════════════
   BROKEN ARROW TCG — BATTLEFIELD TERRAIN BIOME SYSTEM v1.0
   10 biomes: urban, woodland, arctic, desert, ocean, mountain, tropical,
              steppe, volcanic, night-ops
   Each biome: arena bg → terrain silhouette → fog layer → particles
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── SHARED PARTICLE SYSTEM ─────────────────────────────────────────────────── */
.terrain-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.terrain-particles .tp {
  position: absolute;
  bottom: var(--py, 20%);
  left: var(--px, 50%);
  width: var(--pw, 3px);
  height: var(--ph, 3px);
  border-radius: 50%;
  background: var(--pc, #fff);
  opacity: 0;
  animation: var(--pa, tpFloat) var(--pd, 4s) var(--dl, 0s) ease-in infinite;
  will-change: transform, opacity;
}

@keyframes tpFloat {
  0%   { opacity: var(--po, 0.9); transform: translateY(0) translateX(0) scale(1); }
  80%  { opacity: var(--po, 0.5); }
  100% { opacity: 0; transform: translateY(calc(var(--rise, -180px))) translateX(var(--dx, 0px)) scale(0.2); }
}
@keyframes tpDrift {
  0%   { opacity: 0; transform: translateY(0) translateX(-8px); }
  20%  { opacity: var(--po, 0.6); }
  80%  { opacity: var(--po, 0.4); }
  100% { opacity: 0; transform: translateY(calc(var(--rise, -60px))) translateX(30px); }
}
@keyframes tpSparkle {
  0%, 100% { opacity: 0; transform: scale(0); }
  50%       { opacity: var(--po, 0.8); transform: scale(1); }
}
@keyframes tpSnow {
  0%   { opacity: 0; transform: translateY(-10px) translateX(0); }
  20%  { opacity: var(--po, 0.7); }
  80%  { opacity: var(--po, 0.5); }
  100% { opacity: 0; transform: translateY(var(--rise, 150px)) translateX(var(--dx, 20px)); }
}
@keyframes tpLeaf {
  0%   { opacity: 0; transform: translateY(0) rotate(0deg); }
  30%  { opacity: var(--po, 0.7); }
  100% { opacity: 0; transform: translateY(var(--rise, -100px)) translateX(var(--dx, 40px)) rotate(180deg); }
}


/* ══ 1. URBAN / MODERN ══════════════════════════════════════════════════════════
   Hard grey angular concrete. Cold steel palette. Angular geometry.
   ─────────────────────────────────────────────────────────────────────────────── */
.battle-arena[data-biome="urban"] {
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent 59px, rgba(140,160,185,0.04) 60px),
    repeating-linear-gradient(0deg,  transparent 0, transparent 59px, rgba(140,160,185,0.04) 60px),
    repeating-linear-gradient(45deg, transparent 0, transparent 119px, rgba(100,120,140,0.02) 120px),
    linear-gradient(180deg, #0a0c10 0%, #0e1016 40%, #0c0e14 70%, #080a0e 100%);
}

.battle-arena[data-biome="urban"] .terrain-layer {
  background-image:
    /* Cityscape skyline silhouette */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='1.5' result='blur'/%3E%3CfeMerge%3E%3CfeMergeNode in='blur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3C!-- Distant buildings back layer --%3E%3Crect x='0' y='160' width='30' height='140' fill='rgba(60,75,95,0.35)'/%3E%3Crect x='28' y='180' width='20' height='120' fill='rgba(55,70,88,0.35)'/%3E%3Crect x='60' y='145' width='18' height='155' fill='rgba(65,80,100,0.35)'/%3E%3Crect x='76' y='170' width='35' height='130' fill='rgba(50,65,82,0.35)'/%3E%3Crect x='109' y='140' width='24' height='160' fill='rgba(70,85,108,0.35)'/%3E%3Crect x='131' y='155' width='15' height='145' fill='rgba(60,75,95,0.35)'/%3E%3Crect x='160' y='135' width='40' height='165' fill='rgba(65,80,100,0.35)'/%3E%3Crect x='198' y='150' width='28' height='150' fill='rgba(55,68,88,0.35)'/%3E%3Crect x='224' y='140' width='20' height='160' fill='rgba(72,88,110,0.35)'/%3E%3Crect x='242' y='160' width='36' height='140' fill='rgba(58,72,92,0.35)'/%3E%3Crect x='276' y='148' width='22' height='152' fill='rgba(66,82,104,0.35)'/%3E%3Crect x='296' y='135' width='30' height='165' fill='rgba(60,75,95,0.35)'/%3E%3Crect x='324' y='155' width='18' height='145' fill='rgba(68,84,106,0.35)'/%3E%3Crect x='340' y='142' width='28' height='158' fill='rgba(62,78,98,0.35)'/%3E%3Crect x='366' y='160' width='34' height='140' fill='rgba(56,70,90,0.35)'/%3E%3C!-- Foreground detail buildings --%3E%3Crect x='10' y='200' width='45' height='100' fill='rgba(80,95,120,0.5)'/%3E%3Crect x='53' y='220' width='30' height='80' fill='rgba(75,90,112,0.5)'/%3E%3Crect x='100' y='185' width='55' height='115' fill='rgba(85,100,125,0.5)'/%3E%3Crect x='153' y='210' width='38' height='90' fill='rgba(78,94,118,0.5)'/%3E%3Crect x='188' y='195' width='50' height='105' fill='rgba(82,98,122,0.5)'/%3E%3Crect x='236' y='200' width='42' height='100' fill='rgba(76,92,116,0.5)'/%3E%3Crect x='276' y='188' width='48' height='112' fill='rgba(84,100,124,0.5)'/%3E%3Crect x='322' y='205' width='36' height='95' fill='rgba(79,95,120,0.5)'/%3E%3Crect x='356' y='195' width='44' height='105' fill='rgba(81,97,122,0.5)'/%3E%3C!-- Window grids on buildings --%3E%3Crect x='15' y='205' width='4' height='3' fill='rgba(200,220,255,0.6)'/%3E%3Crect x='22' y='205' width='4' height='3' fill='rgba(200,220,255,0.4)'/%3E%3Crect x='29' y='205' width='4' height='3' fill='rgba(200,220,255,0.6)'/%3E%3Crect x='36' y='205' width='4' height='3' fill='rgba(200,220,255,0.2)'/%3E%3Crect x='15' y='212' width='4' height='3' fill='rgba(200,220,255,0.3)'/%3E%3Crect x='22' y='212' width='4' height='3' fill='rgba(200,220,255,0.7)'/%3E%3Crect x='29' y='212' width='4' height='3' fill='rgba(200,220,255,0.5)'/%3E%3Crect x='36' y='212' width='4' height='3' fill='rgba(200,220,255,0.6)'/%3E%3Crect x='108' y='190' width='5' height='4' fill='rgba(200,220,255,0.5)'/%3E%3Crect x='116' y='190' width='5' height='4' fill='rgba(200,220,255,0.7)'/%3E%3Crect x='124' y='190' width='5' height='4' fill='rgba(200,220,255,0.3)'/%3E%3Crect x='108' y='198' width='5' height='4' fill='rgba(200,220,255,0.6)'/%3E%3Crect x='116' y='198' width='5' height='4' fill='rgba(200,220,255,0.4)'/%3E%3Crect x='196' y='200' width='5' height='4' fill='rgba(200,220,255,0.6)'/%3E%3Crect x='204' y='200' width='5' height='4' fill='rgba(200,220,255,0.4)'/%3E%3Crect x='212' y='200' width='5' height='4' fill='rgba(200,220,255,0.7)'/%3E%3Crect x='220' y='200' width='5' height='4' fill='rgba(200,220,255,0.3)'/%3E%3C!-- Antenna spires --%3E%3Cline x1='42' y1='200' x2='42' y2='185' stroke='rgba(140,160,190,0.6)' stroke-width='1'/%3E%3Cline x1='125' y1='185' x2='125' y2='168' stroke='rgba(140,160,190,0.6)' stroke-width='1'/%3E%3Cline x1='213' y1='195' x2='213' y2='175' stroke='rgba(140,160,190,0.6)' stroke-width='1'/%3E%3Cline x1='300' y1='188' x2='300' y2='168' stroke='rgba(140,160,190,0.6)' stroke-width='1'/%3E%3Ccircle cx='42' cy='184' r='2' fill='rgba(255,80,80,0.8)' filter='url(%23glow)'/%3E%3Ccircle cx='125' cy='167' r='2' fill='rgba(255,80,80,0.8)' filter='url(%23glow)'/%3E%3Ccircle cx='213' cy='174' r='2' fill='rgba(255,80,80,0.8)' filter='url(%23glow)'/%3E%3C!-- Ground level / road --%3E%3Crect x='0' y='290' width='400' height='10' fill='rgba(30,35,45,0.9)'/%3E%3Cline x1='0' y1='293' x2='400' y2='293' stroke='rgba(255,215,0,0.2)' stroke-width='0.5' stroke-dasharray='20,15'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center bottom;
  mix-blend-mode: screen;
  animation: urbanFlicker 8s ease-in-out infinite;
}
.battle-arena[data-biome="urban"] .fog-layer {
  background:
    radial-gradient(ellipse 100% 25% at 50% 0%, rgba(8,12,18,0.9) 0%, transparent 100%),
    radial-gradient(ellipse 100% 20% at 50% 100%, rgba(10,14,20,0.85) 0%, transparent 100%),
    radial-gradient(ellipse 30% 100% at 0% 50%, rgba(0,0,0,0.35) 0%, transparent 100%),
    radial-gradient(ellipse 30% 100% at 100% 50%, rgba(0,0,0,0.35) 0%, transparent 100%),
    radial-gradient(ellipse 60% 40% at 50% 85%, rgba(50,80,120,0.12) 0%, transparent 100%);
}
@keyframes urbanFlicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.85; }
  94% { opacity: 1; }
  96% { opacity: 0.9; }
  97% { opacity: 1; }
}
/* Urban particles: distant light glints */
.battle-arena[data-biome="urban"] .tp {
  border-radius: 0;
  --pa: tpSparkle;
}


/* ══ 2. WOODLAND ════════════════════════════════════════════════════════════════
   Pine & deciduous canopy silhouettes. Dappled light shafts. Earth tones.
   ─────────────────────────────────────────────────────────────────────────────── */
.battle-arena[data-biome="woodland"] {
  background:
    linear-gradient(180deg,
      #020804 0%,
      #040e05 25%,
      #060f06 50%,
      #04080405 70%,
      #030604 100%
    );
}

.battle-arena[data-biome="woodland"] .terrain-layer {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='xMidYMax slice'%3E%3C!-- Back forest layer --%3E%3Cpolygon points='0,240 15,195 30,215 40,175 55,200 70,160 85,190 100,155 115,185 130,160 145,180 160,150 175,175 190,148 205,172 220,145 235,168 250,148 265,172 280,152 295,175 310,150 325,178 340,155 355,180 370,158 385,182 400,168 400,300 0,300' fill='rgba(15,40,12,0.6)'/%3E%3C!-- Mid forest layer --%3E%3Cpolygon points='0,260 20,215 35,235 50,200 65,225 80,190 98,218 115,188 132,212 148,185 165,208 182,178 200,205 218,182 235,205 252,178 270,202 288,180 305,202 322,178 340,200 358,182 375,205 400,185 400,300 0,300' fill='rgba(20,55,16,0.65)'/%3E%3C!-- Foreground trees --%3E%3Cpolygon points='-5,300 12,255 22,275 32,245 42,268 52,238 62,260 72,232 82,255 92,228 102,250 115,222 127,248 140,218 153,244 166,215 180,242 194,212 208,238 222,208 236,235 250,205 264,230 278,200 292,228 306,200 320,225 334,198 348,222 362,195 376,218 390,198 405,220 405,300 -5,300' fill='rgba(25,65,18,0.75)'/%3E%3C!-- Light shafts --%3E%3Crect x='60' y='0' width='12' height='300' fill='rgba(80,160,40,0.04)' transform='rotate(-8 60 0)'/%3E%3Crect x='160' y='0' width='8' height='300' fill='rgba(80,160,40,0.05)' transform='rotate(5 160 0)'/%3E%3Crect x='260' y='0' width='14' height='300' fill='rgba(80,160,40,0.04)' transform='rotate(-6 260 0)'/%3E%3Crect x='340' y='0' width='9' height='300' fill='rgba(80,160,40,0.06)' transform='rotate(7 340 0)'/%3E%3C!-- Ground undergrowth --%3E%3Crect x='0' y='285' width='400' height='15' fill='rgba(18,45,12,0.8)'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center bottom;
  mix-blend-mode: screen;
  animation: woodlandSway 6s ease-in-out infinite;
}
.battle-arena[data-biome="woodland"] .fog-layer {
  background:
    radial-gradient(ellipse 100% 30% at 50% 0%, rgba(4,10,4,0.88) 0%, transparent 100%),
    radial-gradient(ellipse 100% 25% at 50% 100%, rgba(5,12,4,0.85) 0%, transparent 100%),
    radial-gradient(ellipse 30% 100% at 0% 50%, rgba(0,5,0,0.40) 0%, transparent 100%),
    radial-gradient(ellipse 30% 100% at 100% 50%, rgba(0,5,0,0.40) 0%, transparent 100%),
    radial-gradient(ellipse 80% 50% at 50% 60%, rgba(10,30,6,0.18) 0%, transparent 100%);
}
@keyframes woodlandSway {
  0%, 100% { transform: skewX(0deg) translateX(0); }
  33%       { transform: skewX(0.4deg) translateX(2px); }
  66%       { transform: skewX(-0.3deg) translateX(-1px); }
}
/* Woodland particles: dappled light motes */
.battle-arena[data-biome="woodland"] .tp {
  border-radius: 50%;
  --pa: tpSparkle;
}


/* ══ 3. ARCTIC ══════════════════════════════════════════════════════════════════
   Smooth rolling snowpack. Frost shimmer. Ice-blue palette.
   ─────────────────────────────────────────────────────────────────────────────── */
.battle-arena[data-biome="arctic"] {
  background:
    linear-gradient(180deg,
      #040c14 0%,
      #060e18 30%,
      #08101c 55%,
      #060c16 75%,
      #040a10 100%
    );
}

.battle-arena[data-biome="arctic"] .terrain-layer {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3ClinearGradient id='snowGrad' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba(180,220,240,0.8)'/%3E%3Cstop offset='1' stop-color='rgba(120,170,200,0.6)'/%3E%3C/linearGradient%3E%3C/defs%3E%3C!-- Far snow hills --%3E%3Cellipse cx='50' cy='270' rx='120' ry='50' fill='rgba(100,150,190,0.25)'/%3E%3Cellipse cx='200' cy='265' rx='150' ry='45' fill='rgba(110,160,195,0.25)'/%3E%3Cellipse cx='350' cy='268' rx='130' ry='48' fill='rgba(105,155,192,0.25)'/%3E%3C!-- Mid snow drifts --%3E%3Cellipse cx='80' cy='280' rx='100' ry='35' fill='rgba(140,190,220,0.35)'/%3E%3Cellipse cx='220' cy='278' rx='130' ry='38' fill='rgba(145,195,225,0.35)'/%3E%3Cellipse cx='370' cy='282' rx='110' ry='32' fill='rgba(138,188,218,0.35)'/%3E%3C!-- Foreground snow mounds --%3E%3Cellipse cx='60' cy='292' rx='90' ry='22' fill='rgba(180,220,245,0.5)'/%3E%3Cellipse cx='190' cy='288' rx='120' ry='26' fill='rgba(175,215,242,0.5)'/%3E%3Cellipse cx='340' cy='291' rx='100' ry='22' fill='rgba(182,222,246,0.5)'/%3E%3C!-- Ice surface shimmer lines --%3E%3Cline x1='0' y1='278' x2='400' y2='278' stroke='rgba(200,230,255,0.15)' stroke-width='0.5'/%3E%3Cline x1='0' y1='285' x2='400' y2='285' stroke='rgba(200,230,255,0.1)' stroke-width='0.5'/%3E%3C!-- Distant aurora suggestion --%3E%3Crect x='0' y='0' width='400' height='120' fill='url(%23auroraGrad)' opacity='0.3'/%3E%3ClinearGradient id='auroraGrad' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='rgba(0,255,120,0)' /%3E%3Cstop offset='0.3' stop-color='rgba(0,255,120,0.15)'/%3E%3Cstop offset='0.5' stop-color='rgba(0,200,255,0.2)'/%3E%3Cstop offset='0.7' stop-color='rgba(100,0,255,0.1)'/%3E%3Cstop offset='1' stop-color='rgba(100,0,255,0)' /%3E%3C/linearGradient%3E%3C/svg%3E");
  background-size: cover;
  background-position: center bottom;
  mix-blend-mode: screen;
  animation: arcticShimmer 4s ease-in-out infinite;
}
.battle-arena[data-biome="arctic"] .fog-layer {
  background:
    radial-gradient(ellipse 100% 30% at 50% 0%, rgba(4,10,18,0.88) 0%, transparent 100%),
    radial-gradient(ellipse 100% 20% at 50% 100%, rgba(6,12,20,0.8) 0%, transparent 100%),
    radial-gradient(ellipse 30% 100% at 0% 50%, rgba(0,5,12,0.35) 0%, transparent 100%),
    radial-gradient(ellipse 30% 100% at 100% 50%, rgba(0,5,12,0.35) 0%, transparent 100%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(60,100,140,0.08) 0%, transparent 100%);
}
@keyframes arcticShimmer {
  0%, 100% { opacity: 0.9; filter: brightness(1); }
  50%       { opacity: 1;   filter: brightness(1.08) hue-rotate(5deg); }
}
/* Arctic particles: snow flakes */
.battle-arena[data-biome="arctic"] .tp {
  --pa: tpSnow;
  border-radius: 50%;
}


/* ══ 4. DESERT ══════════════════════════════════════════════════════════════════
   Sandy dunes. Warm gradient. Heat haze distortion.
   ─────────────────────────────────────────────────────────────────────────────── */
.battle-arena[data-biome="desert"] {
  background:
    linear-gradient(180deg,
      #100800 0%,
      #180d02 30%,
      #1c1005 55%,
      #140c02 75%,
      #0e0800 100%
    );
}

.battle-arena[data-biome="desert"] .terrain-layer {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3ClinearGradient id='dune1' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba(180,120,40,0.6)'/%3E%3Cstop offset='1' stop-color='rgba(140,85,20,0.8)'/%3E%3C/linearGradient%3E%3ClinearGradient id='dune2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba(200,145,55,0.65)'/%3E%3Cstop offset='1' stop-color='rgba(160,105,30,0.8)'/%3E%3C/linearGradient%3E%3C/defs%3E%3C!-- Far dunes --%3E%3Cellipse cx='100' cy='270' rx='180' ry='60' fill='rgba(140,90,25,0.4)'/%3E%3Cellipse cx='320' cy='275' rx='160' ry='55' fill='rgba(145,92,26,0.38)'/%3E%3C!-- Mid dunes --%3E%3Cellipse cx='60' cy='285' rx='140' ry='40' fill='url(%23dune1)'/%3E%3Cellipse cx='240' cy='282' rx='180' ry='45' fill='url(%23dune1)'/%3E%3Cellipse cx='400' cy='288' rx='120' ry='35' fill='url(%23dune1)'/%3E%3C!-- Foreground dune crests --%3E%3Cellipse cx='150' cy='294' rx='200' ry='25' fill='url(%23dune2)'/%3E%3Cellipse cx='380' cy='296' rx='140' ry='20' fill='url(%23dune2)'/%3E%3C!-- Dune ridge highlight lines --%3E%3Cpath d='M 20 280 Q 100 265 180 278 Q 260 292 340 275 Q 380 268 410 272' stroke='rgba(240,190,80,0.3)' stroke-width='1.5' fill='none'/%3E%3Cpath d='M -10 290 Q 80 278 170 286 Q 250 294 350 282 Q 390 278 420 282' stroke='rgba(240,185,75,0.2)' stroke-width='1' fill='none'/%3E%3C!-- Heat shimmer bands --%3E%3Crect x='0' y='200' width='400' height='8' fill='rgba(200,140,50,0.04)' rx='4'/%3E%3Crect x='0' y='220' width='400' height='6' fill='rgba(200,140,50,0.03)' rx='3'/%3E%3Crect x='0' y='238' width='400' height='7' fill='rgba(200,140,50,0.04)' rx='4'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center bottom;
  mix-blend-mode: screen;
  animation: desertHaze 3s ease-in-out infinite;
}
.battle-arena[data-biome="desert"] .fog-layer {
  background:
    radial-gradient(ellipse 100% 30% at 50% 0%, rgba(12,8,2,0.88) 0%, transparent 100%),
    radial-gradient(ellipse 100% 20% at 50% 100%, rgba(15,10,3,0.82) 0%, transparent 100%),
    radial-gradient(ellipse 30% 100% at 0% 50%, rgba(8,4,0,0.35) 0%, transparent 100%),
    radial-gradient(ellipse 30% 100% at 100% 50%, rgba(8,4,0,0.35) 0%, transparent 100%),
    radial-gradient(ellipse 100% 50% at 50% 80%, rgba(120,70,10,0.12) 0%, transparent 100%);
}
@keyframes desertHaze {
  0%, 100% { transform: scaleY(1) translateY(0); filter: blur(0px); }
  50%       { transform: scaleY(1.006) translateY(-1px); filter: blur(0.4px); }
}
/* Desert particles: dust motes */
.battle-arena[data-biome="desert"] .tp {
  --pa: tpDrift;
  --pc: rgba(200,150,60,0.7);
  border-radius: 50%;
}


/* ══ 5. OCEAN / NAVAL ═══════════════════════════════════════════════════════════
   Deep blue waves. Horizon glow. Gentle undulation.
   ─────────────────────────────────────────────────────────────────────────────── */
.battle-arena[data-biome="ocean"] {
  background:
    linear-gradient(180deg,
      #020810 0%,
      #030c18 30%,
      #040e1c 55%,
      #030a14 75%,
      #020608 100%
    );
}

.battle-arena[data-biome="ocean"] .terrain-layer {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3ClinearGradient id='seaHorizon' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba(0,80,160,0)' /%3E%3Cstop offset='0.4' stop-color='rgba(0,80,160,0.15)'/%3E%3Cstop offset='0.7' stop-color='rgba(0,60,130,0.4)'/%3E%3Cstop offset='1' stop-color='rgba(0,40,100,0.8)'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' width='400' height='300' fill='url(%23seaHorizon)'/%3E%3C!-- Horizon glow --%3E%3Crect x='0' y='145' width='400' height='6' fill='rgba(0,160,255,0.12)'/%3E%3Crect x='0' y='150' width='400' height='3' fill='rgba(0,140,220,0.08)'/%3E%3C!-- Wave layer 1 (back) --%3E%3Cpath d='M 0 210 C 50 200 100 220 150 210 C 200 200 250 220 300 210 C 350 200 380 215 400 210 L 400 300 L 0 300 Z' fill='rgba(0,80,160,0.35)'/%3E%3C!-- Wave layer 2 (mid) --%3E%3Cpath d='M 0 230 C 40 218 80 238 130 228 C 180 218 230 240 280 228 C 330 218 370 235 400 228 L 400 300 L 0 300 Z' fill='rgba(0,100,180,0.4)'/%3E%3C!-- Wave layer 3 (front) --%3E%3Cpath d='M 0 252 C 30 240 70 258 120 248 C 170 238 210 258 265 248 C 315 238 360 255 400 248 L 400 300 L 0 300 Z' fill='rgba(0,120,200,0.5)'/%3E%3C!-- Wave crests (whitecaps) --%3E%3Cpath d='M 20 210 C 35 206 55 210 75 208' stroke='rgba(160,210,255,0.4)' stroke-width='1.5' fill='none'/%3E%3Cpath d='M 140 210 C 160 205 185 210 210 207' stroke='rgba(160,210,255,0.35)' stroke-width='1.5' fill='none'/%3E%3Cpath d='M 280 210 C 300 205 325 210 350 207' stroke='rgba(160,210,255,0.4)' stroke-width='1.5' fill='none'/%3E%3Cpath d='M 40 230 C 60 225 90 230 110 227' stroke='rgba(160,210,255,0.3)' stroke-width='1' fill='none'/%3E%3Cpath d='M 180 230 C 205 225 235 231 255 228' stroke='rgba(160,210,255,0.3)' stroke-width='1' fill='none'/%3E%3Cpath d='M 320 230 C 345 225 375 231 400 228' stroke='rgba(160,210,255,0.3)' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-position: center;
  mix-blend-mode: screen;
  animation: oceanWave 4s ease-in-out infinite;
}
.battle-arena[data-biome="ocean"] .fog-layer {
  background:
    radial-gradient(ellipse 100% 30% at 50% 0%, rgba(2,8,16,0.9) 0%, transparent 100%),
    radial-gradient(ellipse 100% 20% at 50% 100%, rgba(3,8,15,0.82) 0%, transparent 100%),
    radial-gradient(ellipse 30% 100% at 0% 50%, rgba(0,3,10,0.35) 0%, transparent 100%),
    radial-gradient(ellipse 30% 100% at 100% 50%, rgba(0,3,10,0.35) 0%, transparent 100%),
    radial-gradient(ellipse 100% 35% at 50% 50%, rgba(0,50,100,0.08) 0%, transparent 100%);
}
@keyframes oceanWave {
  0%, 100% { transform: translateY(0) scaleX(1); }
  25%       { transform: translateY(-3px) scaleX(1.005); }
  50%       { transform: translateY(0) scaleX(1); }
  75%       { transform: translateY(3px) scaleX(0.995); }
}
/* Ocean particles: sea spray */
.battle-arena[data-biome="ocean"] .tp {
  --pa: tpFloat;
  --pc: rgba(150,210,255,0.6);
  border-radius: 50%;
}


/* ══ 6. MOUNTAIN ════════════════════════════════════════════════════════════════
   Jagged dark peaks. Snow-capped tips. Dramatic shadow contrast.
   ─────────────────────────────────────────────────────────────────────────────── */
.battle-arena[data-biome="mountain"] {
  background:
    linear-gradient(180deg,
      #04060c 0%,
      #060810 30%,
      #070a12 55%,
      #05070e 75%,
      #03050a 100%
    );
}

.battle-arena[data-biome="mountain"] .terrain-layer {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3ClinearGradient id='mtGrad' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba(80,90,110,0.6)'/%3E%3Cstop offset='1' stop-color='rgba(40,48,62,0.9)'/%3E%3C/linearGradient%3E%3ClinearGradient id='snowGrad' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba(220,230,245,0.9)'/%3E%3Cstop offset='1' stop-color='rgba(180,195,215,0.3)'/%3E%3C/linearGradient%3E%3C/defs%3E%3C!-- Background far peaks --%3E%3Cpolygon points='0,250 30,190 55,215 80,170 110,200 135,158 165,185 190,150 220,178 245,152 270,175 295,148 320,170 345,145 370,165 400,152 400,300 0,300' fill='rgba(35,42,56,0.5)'/%3E%3C!-- Mid peaks --%3E%3Cpolygon points='0,270 25,228 45,248 68,210 95,235 118,195 145,222 168,185 195,218 218,188 245,215 268,182 295,210 318,178 345,205 368,175 395,200 410,185 410,300 0,300' fill='url(%23mtGrad)'/%3E%3C!-- Snow caps on mid peaks --%3E%3Cpolygon points='68,210 75,220 82,212 95,235 104,220 118,195 126,208 133,196 145,222 152,212 160,202 168,185 176,198 183,190 195,218 204,205 212,195 218,188 225,198 235,210 245,215 253,203 260,192 268,182 276,193 284,195 295,210 302,200 312,187 318,178 325,188 333,195 345,205 352,195 360,183 368,175 375,185 385,192 395,200 410,185 410,210 0,210' fill='rgba(210,225,240,0.15)'/%3E%3C!-- Snow highlights on tallest peaks --%3E%3Cpolygon points='135,158 140,168 148,160 155,170 165,185 170,178 180,168 190,150' fill='rgba(230,238,252,0.55)'/%3E%3Cpolygon points='295,148 300,160 308,152 316,162 320,170 325,162 332,155 345,145' fill='rgba(230,238,252,0.55)'/%3E%3Cpolygon points='190,150 196,162 203,154 210,165 220,178 225,168 230,158 245,152' fill='rgba(228,236,250,0.5)'/%3E%3C!-- Cliff shadow lines --%3E%3Cline x1='30' y1='190' x2='55' y2='248' stroke='rgba(20,25,35,0.6)' stroke-width='2'/%3E%3Cline x1='135' y1='158' x2='165' y2='222' stroke='rgba(20,25,35,0.6)' stroke-width='2'/%3E%3Cline x1='295' y1='148' x2='318' y2='210' stroke='rgba(20,25,35,0.6)' stroke-width='2'/%3E%3C!-- Ground line --%3E%3Crect x='0' y='290' width='400' height='10' fill='rgba(30,36,48,0.8)'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center bottom;
  mix-blend-mode: screen;
  animation: mountainCloud 10s ease-in-out infinite;
}
.battle-arena[data-biome="mountain"] .fog-layer {
  background:
    radial-gradient(ellipse 100% 30% at 50% 0%, rgba(4,6,12,0.9) 0%, transparent 100%),
    radial-gradient(ellipse 100% 20% at 50% 100%, rgba(5,7,14,0.82) 0%, transparent 100%),
    radial-gradient(ellipse 30% 100% at 0% 50%, rgba(0,2,6,0.45) 0%, transparent 100%),
    radial-gradient(ellipse 30% 100% at 100% 50%, rgba(0,2,6,0.45) 0%, transparent 100%),
    radial-gradient(ellipse 80% 30% at 50% 45%, rgba(20,25,40,0.15) 0%, transparent 100%);
}
@keyframes mountainCloud {
  0%, 100% { filter: brightness(1) contrast(1); }
  40%       { filter: brightness(0.92) contrast(1.05); }
  70%       { filter: brightness(1.05) contrast(0.98); }
}


/* ══ 7. TROPICAL / JUNGLE ══════════════════════════════════════════════════════
   Dense humid canopy. Layered foliage silhouettes. Vibrant greens.
   ─────────────────────────────────────────────────────────────────────────────── */
.battle-arena[data-biome="tropical"] {
  background:
    linear-gradient(180deg,
      #010600 0%,
      #020a01 30%,
      #030c02 55%,
      #020802 75%,
      #010500 100%
    );
}

.battle-arena[data-biome="tropical"] .terrain-layer {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='xMidYMax slice'%3E%3C!-- Back canopy layer --%3E%3Cellipse cx='30' cy='220' rx='60' ry='80' fill='rgba(10,60,8,0.5)'/%3E%3Cellipse cx='90' cy='210' rx='70' ry='90' fill='rgba(12,65,10,0.5)'/%3E%3Cellipse cx='160' cy='200' rx='65' ry='100' fill='rgba(8,55,6,0.5)'/%3E%3Cellipse cx='230' cy='205' rx='75' ry='95' fill='rgba(14,68,12,0.5)'/%3E%3Cellipse cx='310' cy='210' rx='70' ry='90' fill='rgba(10,60,8,0.5)'/%3E%3Cellipse cx='380' cy='215' rx='60' ry='85' fill='rgba(12,65,10,0.5)'/%3E%3C!-- Mid canopy layer --%3E%3Cellipse cx='0' cy='240' rx='50' ry='65' fill='rgba(15,80,12,0.6)'/%3E%3Cellipse cx='65' cy='232' rx='65' ry='75' fill='rgba(18,88,14,0.6)'/%3E%3Cellipse cx='140' cy='226' rx='72' ry='82' fill='rgba(12,72,10,0.6)'/%3E%3Cellipse cx='210' cy='228' rx='68' ry='78' fill='rgba(20,90,16,0.6)'/%3E%3Cellipse cx='285' cy='232' rx='72' ry='76' fill='rgba(14,76,11,0.6)'/%3E%3Cellipse cx='355' cy='230' rx='65' ry='78' fill='rgba(18,84,14,0.6)'/%3E%3Cellipse cx='410' cy='236' rx='55' ry='70' fill='rgba(15,80,12,0.6)'/%3E%3C!-- Foreground big leaves --%3E%3Cellipse cx='20' cy='265' rx='55' ry='50' fill='rgba(25,110,18,0.7)'/%3E%3Cellipse cx='100' cy='260' rx='70' ry='55' fill='rgba(28,120,20,0.7)'/%3E%3Cellipse cx='185' cy='255' rx='75' ry='58' fill='rgba(22,105,16,0.7)'/%3E%3Cellipse cx='265' cy='258' rx='72' ry='55' fill='rgba(30,125,22,0.7)'/%3E%3Cellipse cx='345' cy='262' rx='70' ry='52' fill='rgba(24,112,18,0.7)'/%3E%3Cellipse cx='415' cy='268' rx='55' ry='48' fill='rgba(26,115,19,0.7)'/%3E%3C!-- Accent bright leaf edges --%3E%3Cellipse cx='100' cy='255' rx='40' ry='20' fill='rgba(50,180,30,0.15)'/%3E%3Cellipse cx='265' cy='252' rx='38' ry='18' fill='rgba(50,180,30,0.12)'/%3E%3C!-- Humidity haze --%3E%3Crect x='0' y='150' width='400' height='150' fill='rgba(10,40,5,0.08)'/%3E%3C!-- Ground shadow --%3E%3Crect x='0' y='290' width='400' height='10' fill='rgba(5,20,2,0.9)'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center bottom;
  mix-blend-mode: screen;
  animation: tropicalSway 5s ease-in-out infinite;
}
.battle-arena[data-biome="tropical"] .fog-layer {
  background:
    radial-gradient(ellipse 100% 30% at 50% 0%, rgba(2,6,1,0.9) 0%, transparent 100%),
    radial-gradient(ellipse 100% 20% at 50% 100%, rgba(3,8,2,0.85) 0%, transparent 100%),
    radial-gradient(ellipse 30% 100% at 0% 50%, rgba(0,4,0,0.45) 0%, transparent 100%),
    radial-gradient(ellipse 30% 100% at 100% 50%, rgba(0,4,0,0.45) 0%, transparent 100%),
    radial-gradient(ellipse 80% 60% at 50% 60%, rgba(8,30,5,0.18) 0%, transparent 100%);
}
@keyframes tropicalSway {
  0%, 100% { transform: skewX(0deg) scaleX(1); }
  25%       { transform: skewX(0.6deg) scaleX(1.002); }
  75%       { transform: skewX(-0.5deg) scaleX(0.998); }
}
/* Tropical particles: humidity motes + leaf drift */
.battle-arena[data-biome="tropical"] .tp {
  --pa: tpLeaf;
  --pc: rgba(50,160,30,0.5);
  border-radius: 2px;
}


/* ══ 8. STEPPE / GRASSLAND ══════════════════════════════════════════════════════
   Rolling golden-green hills. Wide open sky. Wind ripple animation.
   ─────────────────────────────────────────────────────────────────────────────── */
.battle-arena[data-biome="steppe"] {
  background:
    linear-gradient(180deg,
      #070800 0%,
      #0a0c01 30%,
      #0d1002 55%,
      #090b01 75%,
      #060700 100%
    );
}

.battle-arena[data-biome="steppe"] .terrain-layer {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3ClinearGradient id='stepGrad' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba(120,110,20,0.5)'/%3E%3Cstop offset='1' stop-color='rgba(80,70,10,0.8)'/%3E%3C/linearGradient%3E%3C/defs%3E%3C!-- Far rolling hills --%3E%3Cellipse cx='100' cy='255' rx='200' ry='60' fill='rgba(80,90,15,0.35)'/%3E%3Cellipse cx='300' cy='260' rx='180' ry='55' fill='rgba(75,85,12,0.35)'/%3E%3C!-- Mid grass hills --%3E%3Cellipse cx='50' cy='272' rx='160' ry='42' fill='rgba(100,110,20,0.45)'/%3E%3Cellipse cx='220' cy='270' rx='200' ry='45' fill='rgba(105,115,22,0.45)'/%3E%3Cellipse cx='400' cy='274' rx='150' ry='40' fill='rgba(98,108,18,0.45)'/%3E%3C!-- Foreground grass band --%3E%3Crect x='0' y='280' width='400' height='20' fill='rgba(120,130,25,0.55)'/%3E%3C!-- Grass texture lines (wind ripples) --%3E%3Cpath d='M 0 282 C 40 280 80 284 120 281 C 160 278 200 283 240 280 C 280 277 320 282 360 279 C 380 278 395 280 410 279' stroke='rgba(160,175,35,0.3)' stroke-width='1' fill='none'/%3E%3Cpath d='M 0 286 C 30 283 70 287 110 284 C 150 281 190 286 230 283 C 270 280 310 285 360 282 C 385 281 400 283 420 282' stroke='rgba(155,170,30,0.25)' stroke-width='0.8' fill='none'/%3E%3C!-- Distant tree line --%3E%3Crect x='0' y='248' width='400' height='8' fill='rgba(30,50,8,0.35)'/%3E%3C!-- Horizon sky glow --%3E%3Crect x='0' y='240' width='400' height='12' fill='rgba(120,100,20,0.08)'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center bottom;
  mix-blend-mode: screen;
  animation: steppeWind 3.5s ease-in-out infinite;
}
.battle-arena[data-biome="steppe"] .fog-layer {
  background:
    radial-gradient(ellipse 100% 25% at 50% 0%, rgba(8,8,2,0.88) 0%, transparent 100%),
    radial-gradient(ellipse 100% 18% at 50% 100%, rgba(10,10,2,0.8) 0%, transparent 100%),
    radial-gradient(ellipse 25% 100% at 0% 50%, rgba(4,4,0,0.35) 0%, transparent 100%),
    radial-gradient(ellipse 25% 100% at 100% 50%, rgba(4,4,0,0.35) 0%, transparent 100%),
    radial-gradient(ellipse 100% 40% at 50% 80%, rgba(60,65,8,0.10) 0%, transparent 100%);
}
@keyframes steppeWind {
  0%, 100% { transform: translateX(0) scaleX(1); }
  50%       { transform: translateX(4px) scaleX(1.008); }
}
/* Steppe particles: wind-blown seeds */
.battle-arena[data-biome="steppe"] .tp {
  --pa: tpDrift;
  --pc: rgba(180,160,40,0.5);
  border-radius: 50%;
  width: 2px;
  height: 2px;
}


/* ══ 9. VOLCANIC / SCORCHED ═════════════════════════════════════════════════════
   Black cracked earth. Ember particles. Ominous orange underglow.
   ─────────────────────────────────────────────────────────────────────────────── */
.battle-arena[data-biome="volcanic"] {
  background:
    radial-gradient(ellipse 100% 50% at 50% 100%, rgba(80,20,0,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 60% 30% at 30% 80%, rgba(60,10,0,0.25) 0%, transparent 70%),
    linear-gradient(180deg,
      #030100 0%,
      #060200 30%,
      #080402 55%,
      #050200 75%,
      #020100 100%
    );
}

.battle-arena[data-biome="volcanic"] .terrain-layer {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3ClinearGradient id='lavaGrad' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba(200,60,0,0.7)'/%3E%3Cstop offset='1' stop-color='rgba(100,20,0,0.9)'/%3E%3C/linearGradient%3E%3C/defs%3E%3C!-- Volcanic silhouette cone --%3E%3Cpolygon points='100,300 200,120 300,300' fill='rgba(18,8,2,0.85)'/%3E%3Cpolygon points='220,300 290,155 360,300' fill='rgba(15,6,1,0.80)'/%3E%3Cpolygon points='0,300 60,175 130,300' fill='rgba(16,7,2,0.82)'/%3E%3C!-- Lava crater glow at peak --%3E%3Cellipse cx='200' cy='124' rx='18' ry='8' fill='rgba(220,80,0,0.6)'/%3E%3Cellipse cx='200' cy='124' rx='10' ry='5' fill='rgba(255,140,0,0.5)'/%3E%3Cellipse cx='290' cy='158' rx='14' ry='6' fill='rgba(200,70,0,0.55)'/%3E%3Cellipse cx='290' cy='158' rx='7' ry='3' fill='rgba(245,120,0,0.45)'/%3E%3C!-- Cracked earth texture --%3E%3Cpath d='M 0 260 L 25 255 L 40 265 L 60 258 L 80 268 L 100 260 L 120 270 L 140 262 L 160 272 L 175 265 L 195 275 L 210 268 L 230 278 L 250 270 L 270 280 L 290 272 L 310 282 L 330 274 L 350 284 L 370 276 L 390 286 L 400 280' stroke='rgba(80,20,0,0.5)' stroke-width='1.5' fill='none'/%3E%3Cpath d='M 0 275 L 30 270 L 50 278 L 75 272 L 95 280 L 120 274 L 145 282 L 170 276 L 195 284 L 220 278 L 245 286 L 270 280 L 295 288 L 320 282 L 345 290 L 375 284 L 400 290' stroke='rgba(70,15,0,0.4)' stroke-width='1' fill='none'/%3E%3C!-- Lava flow lines --%3E%3Cpath d='M 200 135 L 195 180 L 190 210 L 185 240 L 183 270 L 185 300' stroke='rgba(180,60,0,0.4)' stroke-width='3' fill='none'/%3E%3Cpath d='M 200 135 L 208 175 L 215 205 L 220 235 L 225 265 L 228 300' stroke='rgba(150,45,0,0.3)' stroke-width='2' fill='none'/%3E%3C!-- Underglow on rocks --%3E%3Cellipse cx='200' cy='300' rx='200' ry='30' fill='rgba(100,30,0,0.3)'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center bottom;
  mix-blend-mode: screen;
  animation: volcanicPulse 2s ease-in-out infinite;
}
.battle-arena[data-biome="volcanic"] .fog-layer {
  background:
    radial-gradient(ellipse 100% 30% at 50% 0%, rgba(5,2,0,0.9) 0%, transparent 100%),
    radial-gradient(ellipse 100% 20% at 50% 100%, rgba(8,3,0,0.82) 0%, transparent 100%),
    radial-gradient(ellipse 30% 100% at 0% 50%, rgba(4,1,0,0.40) 0%, transparent 100%),
    radial-gradient(ellipse 30% 100% at 100% 50%, rgba(4,1,0,0.40) 0%, transparent 100%),
    radial-gradient(ellipse 100% 50% at 50% 100%, rgba(100,25,0,0.18) 0%, transparent 100%),
    radial-gradient(ellipse 60% 35% at 50% 85%, rgba(80,20,0,0.15) 0%, transparent 100%);
}
@keyframes volcanicPulse {
  0%, 100% { filter: brightness(1); }
  50%       { filter: brightness(1.12) saturate(1.1); }
}
/* Volcanic particles: rising embers */
.battle-arena[data-biome="volcanic"] .tp {
  --pa: tpFloat;
  --pc: rgba(255,100,0,0.85);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(255,80,0,0.6);
}


/* ══ 10. NIGHT OPS ══════════════════════════════════════════════════════════════
   NVG visor filter. Moonlight blue-wash. Phosphor scan lines.
   Applied as an overlay — stacks on top of any other biome.
   ─────────────────────────────────────────────────────────────────────────────── */

/* Night Ops standalone (no base biome) */
.battle-arena[data-biome="night-ops"] {
  background:
    repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0,60,0,0.015) 3px),
    linear-gradient(180deg, #000200 0%, #010400 40%, #010300 100%);
}
.battle-arena[data-biome="night-ops"] .terrain-layer {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='xMidYMax slice'%3E%3C!-- Generic terrain horizon shapes --%3E%3Cpolygon points='0,260 40,220 75,238 105,205 140,228 165,195 200,220 230,190 265,215 295,185 330,210 360,182 400,208 400,300 0,300' fill='rgba(0,40,0,0.7)'/%3E%3Cellipse cx='200' cy='300' rx='250' ry='30' fill='rgba(0,30,0,0.5)'/%3E%3C!-- NVG scan line overlay --%3E%3Crect x='0' y='0' width='400' height='300' fill='url(%23nvgScan)'/%3E%3ClinearGradient id='nvgScan' x1='0' y1='0' x2='0' y2='1' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='rgba(0,80,0,0)' /%3E%3Cstop offset='0.48' stop-color='rgba(0,80,0,0.06)'/%3E%3Cstop offset='0.5' stop-color='rgba(0,100,0,0.1)'/%3E%3Cstop offset='0.52' stop-color='rgba(0,80,0,0.06)'/%3E%3Cstop offset='1' stop-color='rgba(0,80,0,0)' /%3E%3C/linearGradient%3E%3C!-- Moonlight shaft --%3E%3Crect x='170' y='0' width='60' height='300' fill='rgba(100,140,80,0.04)' transform='rotate(-3 170 0)'/%3E%3C/svg%3E");
  background-size: cover;
  mix-blend-mode: screen;
  animation: nvgScan 6s linear infinite;
}
.battle-arena[data-biome="night-ops"] .fog-layer {
  background:
    radial-gradient(ellipse 100% 30% at 50% 0%, rgba(0,3,0,0.92) 0%, transparent 100%),
    radial-gradient(ellipse 100% 20% at 50% 100%, rgba(0,4,0,0.88) 0%, transparent 100%),
    radial-gradient(ellipse 30% 100% at 0% 50%, rgba(0,2,0,0.50) 0%, transparent 100%),
    radial-gradient(ellipse 30% 100% at 100% 50%, rgba(0,2,0,0.50) 0%, transparent 100%),
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,25,0,0.12) 0%, transparent 100%);
}
@keyframes nvgScan {
  0%   { filter: brightness(0.95) hue-rotate(0deg); }
  25%  { filter: brightness(1.0)  hue-rotate(2deg); }
  50%  { filter: brightness(0.98) hue-rotate(0deg); }
  75%  { filter: brightness(1.02) hue-rotate(-2deg); }
  100% { filter: brightness(0.95) hue-rotate(0deg); }
}

/* Night Ops as overlay modifier on another biome */
.battle-arena.night-ops-active::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0,40,0,0.025) 3px),
    radial-gradient(ellipse 100% 100% at 50% 50%, rgba(0,20,0,0.55) 0%, rgba(0,10,0,0.75) 100%);
  mix-blend-mode: multiply;
  animation: nvgOverlay 5s ease-in-out infinite;
}
@keyframes nvgOverlay {
  0%, 100% { opacity: 0.88; }
  50%       { opacity: 1.0; }
}

/* Night Ops particles: NVG phosphor flicker sparks */
.battle-arena[data-biome="night-ops"] .tp,
.battle-arena.night-ops-active .terrain-particles .tp {
  --pa: tpSparkle;
  --pc: rgba(0,200,60,0.7);
  border-radius: 50%;
}


/* ══ BIOME PREVIEW THUMBNAILS (for HQ cosmetics UI) ════════════════════════════
   Mini 120×70px animated previews of each biome
   ─────────────────────────────────────────────────────────────────────────────── */
.biome-thumb {
  position: relative;
  width: 100%;
  height: 70px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.biome-thumb[data-biome="urban"]    { background: linear-gradient(180deg, #0a0c10 0%, #0e1016 100%); }
.biome-thumb[data-biome="woodland"] { background: linear-gradient(180deg, #020804 0%, #040e05 100%); }
.biome-thumb[data-biome="arctic"]   { background: linear-gradient(180deg, #040c14 0%, #08101c 100%); }
.biome-thumb[data-biome="desert"]   { background: linear-gradient(180deg, #100800 0%, #1c1005 100%); }
.biome-thumb[data-biome="ocean"]    { background: linear-gradient(180deg, #020810 0%, #040e1c 100%); }
.biome-thumb[data-biome="mountain"] { background: linear-gradient(180deg, #04060c 0%, #070a12 100%); }
.biome-thumb[data-biome="tropical"] { background: linear-gradient(180deg, #010600 0%, #030c02 100%); }
.biome-thumb[data-biome="steppe"]   { background: linear-gradient(180deg, #070800 0%, #0d1002 100%); }
.biome-thumb[data-biome="volcanic"] { background: radial-gradient(ellipse 100% 60% at 50% 100%, rgba(80,20,0,0.5) 0%, transparent 70%), linear-gradient(180deg, #030100 0%, #080402 100%); }
.biome-thumb[data-biome="night-ops"]{ background: linear-gradient(180deg, #000200 0%, #010400 100%); }

.biome-thumb .bt-terrain {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center bottom;
  mix-blend-mode: screen;
  opacity: 0.9;
}
.biome-thumb[data-biome="urban"] .bt-terrain    { background: linear-gradient(180deg, transparent 30%, rgba(70,85,108,0.6) 70%, rgba(40,50,70,0.8) 100%); }
.biome-thumb[data-biome="woodland"] .bt-terrain  { background: linear-gradient(180deg, transparent 20%, rgba(15,60,10,0.7) 65%, rgba(20,65,15,0.9) 100%); }
.biome-thumb[data-biome="arctic"] .bt-terrain    { background: linear-gradient(180deg, transparent 40%, rgba(140,190,220,0.5) 80%, rgba(180,220,245,0.7) 100%); }
.biome-thumb[data-biome="desert"] .bt-terrain    { background: linear-gradient(180deg, transparent 35%, rgba(160,100,25,0.5) 75%, rgba(200,140,50,0.8) 100%); }
.biome-thumb[data-biome="ocean"] .bt-terrain     { background: linear-gradient(180deg, transparent 30%, rgba(0,80,160,0.5) 65%, rgba(0,100,180,0.8) 100%); }
.biome-thumb[data-biome="mountain"] .bt-terrain  { background: linear-gradient(180deg, transparent 20%, rgba(60,72,92,0.6) 60%, rgba(40,48,62,0.9) 100%); }
.biome-thumb[data-biome="tropical"] .bt-terrain  { background: linear-gradient(180deg, transparent 15%, rgba(10,55,6,0.7) 55%, rgba(20,80,12,0.9) 100%); }
.biome-thumb[data-biome="steppe"] .bt-terrain    { background: linear-gradient(180deg, transparent 40%, rgba(80,90,12,0.5) 75%, rgba(110,120,22,0.8) 100%); }
.biome-thumb[data-biome="volcanic"] .bt-terrain  { background: linear-gradient(180deg, transparent 20%, rgba(60,15,0,0.5) 55%, rgba(100,25,0,0.9) 100%); }
.biome-thumb[data-biome="night-ops"] .bt-terrain { background: linear-gradient(180deg, transparent 30%, rgba(0,25,0,0.7) 70%, rgba(0,40,0,0.9) 100%); }

.biome-thumb .bt-fog {
  position: absolute;
  inset: 0;
}
.biome-thumb[data-biome="urban"] .bt-fog     { background: radial-gradient(ellipse 100% 30% at 50% 0%, rgba(8,12,18,0.8) 0%, transparent 100%); }
.biome-thumb[data-biome="woodland"] .bt-fog  { background: radial-gradient(ellipse 100% 30% at 50% 0%, rgba(4,10,4,0.8) 0%, transparent 100%); }
.biome-thumb[data-biome="arctic"] .bt-fog    { background: radial-gradient(ellipse 100% 30% at 50% 0%, rgba(4,10,18,0.8) 0%, transparent 100%); }
.biome-thumb[data-biome="desert"] .bt-fog    { background: radial-gradient(ellipse 100% 30% at 50% 0%, rgba(12,8,2,0.8) 0%, transparent 100%); }
.biome-thumb[data-biome="ocean"] .bt-fog     { background: radial-gradient(ellipse 100% 30% at 50% 0%, rgba(2,8,16,0.85) 0%, transparent 100%); }
.biome-thumb[data-biome="mountain"] .bt-fog  { background: radial-gradient(ellipse 100% 30% at 50% 0%, rgba(4,6,12,0.85) 0%, transparent 100%); }
.biome-thumb[data-biome="tropical"] .bt-fog  { background: radial-gradient(ellipse 100% 30% at 50% 0%, rgba(2,6,1,0.85) 0%, transparent 100%); }
.biome-thumb[data-biome="steppe"] .bt-fog    { background: radial-gradient(ellipse 100% 25% at 50% 0%, rgba(8,8,2,0.8) 0%, transparent 100%); }
.biome-thumb[data-biome="volcanic"] .bt-fog  { background: radial-gradient(ellipse 100% 30% at 50% 0%, rgba(5,2,0,0.85) 0%, transparent 100%), radial-gradient(ellipse 100% 40% at 50% 100%, rgba(80,20,0,0.25) 0%, transparent 80%); }
.biome-thumb[data-biome="night-ops"] .bt-fog { background: radial-gradient(ellipse 100% 30% at 50% 0%, rgba(0,3,0,0.88) 0%, transparent 100%); }

/* Thumbnail label */
.biome-thumb .bt-label {
  position: absolute;
  bottom: 4px;
  left: 6px;
  right: 6px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.85);
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  z-index: 5;
}

/* ══ COSMETICS PANEL STYLES ════════════════════════════════════════════════════ */
.cosmetics-section {
  margin-top: 1.5rem;
  padding: 0 0.5rem;
}
.cosmetics-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255,215,0,0.6);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(255,215,0,0.12);
}
.biome-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}
.biome-card {
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  overflow: hidden;
  padding-bottom: 0.4rem;
}
.biome-card:hover {
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
  transform: scale(1.02);
}
.biome-card.selected {
  border-color: rgba(255,215,0,0.6);
  background: rgba(255,215,0,0.06);
}
.biome-card.selected .biome-card-name {
  color: rgba(255,215,0,0.9);
}
.biome-card.rarity-common    .biome-card-rarity { color: rgba(160,175,190,0.7); }
.biome-card.rarity-uncommon  .biome-card-rarity { color: rgba(60,190,80,0.8); }
.biome-card.rarity-rare      .biome-card-rarity { color: rgba(80,140,255,0.8); }
.biome-card.rarity-legendary .biome-card-rarity { color: rgba(255,190,0,0.9); }
.biome-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0.5rem 0;
}
.biome-card-name {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.85);
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
}
.biome-card-rarity {
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: 'Rajdhani', sans-serif;
}
.biome-equip-badge {
  display: none;
  font-size: 0.55rem;
  font-weight: 700;
  color: rgba(255,215,0,0.9);
  letter-spacing: 0.06em;
  padding: 0.35rem 0.5rem 0;
  font-family: 'Rajdhani', sans-serif;
}
.biome-card.selected .biome-equip-badge { display: block; }

/* Night Ops special modifier indicator */
.night-ops-toggle-row {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(0,40,0,0.2);
  border: 1.5px solid rgba(0,200,60,0.15);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
}
.night-ops-toggle-row.active {
  border-color: rgba(0,200,60,0.45);
  background: rgba(0,50,0,0.3);
}
.night-ops-toggle-label {
  flex: 1;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(0,200,60,0.8);
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
}
.night-ops-toggle-sub {
  font-size: 0.55rem;
  font-weight: 400;
  color: rgba(0,200,60,0.5);
  text-transform: none;
  letter-spacing: 0.02em;
  display: block;
  margin-top: 0.15rem;
}
.night-ops-toggle-btn {
  background: rgba(0,60,0,0.5);
  border: 1px solid rgba(0,200,60,0.3);
  border-radius: 4px;
  color: rgba(0,200,60,0.7);
  font-size: 0.6rem;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  transition: all 0.15s;
}
.night-ops-toggle-row.active .night-ops-toggle-btn {
  background: rgba(0,150,40,0.3);
  border-color: rgba(0,220,60,0.6);
  color: rgba(0,220,60,0.9);
}


/* ══ BIOME PLAYER ACCENT COLORS ════════════════════════════════════════════════
   Player-side UI color shifts per biome (battle-only).
   Enemy side stays awe orange (#ff6b35) always — never touched here.
   Scoped to .battle-screen[data-biome] so they only apply during a match
   and auto-reset the moment the battle screen is removed from DOM.
   Desert = default shock blue (#00f0ff) — no override needed.
   ─────────────────────────────────────────────────────────────────────────────── */

/* ── WOODLAND / European Forest → dark green ── */
.battle-screen[data-biome="woodland"] .btb-side-player             { color: #2e8b2e !important; }
.battle-screen[data-biome="woodland"] .btb-dot-player              { background: #2e8b2e !important; box-shadow: 0 0 5px rgba(46,139,46,0.8) !important; }
.battle-screen[data-biome="woodland"] .btb-player .btb-hp-val      { color: #2e8b2e !important; }
.battle-screen[data-biome="woodland"] .btb-player-hp-fill.hp-fill-green  { background: #2e8b2e !important; }
.battle-screen[data-biome="woodland"] .btb-player-hp-fill.hp-fill-yellow { background: rgba(46,120,46,0.75) !important; }
.battle-screen[data-biome="woodland"] .btb-dp-num                  { color: #2e8b2e !important; }
.battle-screen[data-biome="woodland"] .btb-dp-lbl                  { color: rgba(46,139,46,0.6) !important; }
.battle-screen[data-biome="woodland"] .btb-dp-box {
  border-color: rgba(46,139,46,0.5) !important;
  background: rgba(46,139,46,0.05) !important;
  box-shadow: 0 0 14px rgba(46,139,46,0.12), inset 0 0 8px rgba(46,139,46,0.04) !important;
}
.battle-screen[data-biome="woodland"] .btb-player .btb-hp-track    { border-color: rgba(46,139,46,0.22) !important; }
.battle-screen[data-biome="woodland"] .player-half .player-field-v2 {
  border-color: rgba(46,139,46,0.28) !important;
  background: rgba(46,139,46,0.028) !important;
  box-shadow: inset 0 0 24px rgba(46,139,46,0.05), 0 0 0 1px rgba(46,139,46,0.1) !important;
}

/* ── ARCTIC / Winter-Snow → light ice blue ── */
.battle-screen[data-biome="arctic"] .btb-side-player               { color: #7dd4f0 !important; }
.battle-screen[data-biome="arctic"] .btb-dot-player                { background: #7dd4f0 !important; box-shadow: 0 0 5px rgba(125,212,240,0.8) !important; }
.battle-screen[data-biome="arctic"] .btb-player .btb-hp-val        { color: #7dd4f0 !important; }
.battle-screen[data-biome="arctic"] .btb-player-hp-fill.hp-fill-green  { background: #7dd4f0 !important; }
.battle-screen[data-biome="arctic"] .btb-player-hp-fill.hp-fill-yellow { background: rgba(100,185,215,0.75) !important; }
.battle-screen[data-biome="arctic"] .btb-dp-num                    { color: #7dd4f0 !important; }
.battle-screen[data-biome="arctic"] .btb-dp-lbl                    { color: rgba(125,212,240,0.6) !important; }
.battle-screen[data-biome="arctic"] .btb-dp-box {
  border-color: rgba(125,212,240,0.5) !important;
  background: rgba(125,212,240,0.05) !important;
  box-shadow: 0 0 14px rgba(125,212,240,0.12), inset 0 0 8px rgba(125,212,240,0.04) !important;
}
.battle-screen[data-biome="arctic"] .btb-player .btb-hp-track      { border-color: rgba(125,212,240,0.22) !important; }
.battle-screen[data-biome="arctic"] .player-half .player-field-v2  {
  border-color: rgba(125,212,240,0.28) !important;
  background: rgba(125,212,240,0.028) !important;
  box-shadow: inset 0 0 24px rgba(125,212,240,0.05), 0 0 0 1px rgba(125,212,240,0.1) !important;
}

/* ── URBAN / Urban Rubble → amber/industrial ── */
.battle-screen[data-biome="urban"] .btb-side-player                { color: #d4860a !important; }
.battle-screen[data-biome="urban"] .btb-dot-player                 { background: #d4860a !important; box-shadow: 0 0 5px rgba(212,134,10,0.8) !important; }
.battle-screen[data-biome="urban"] .btb-player .btb-hp-val         { color: #d4860a !important; }
.battle-screen[data-biome="urban"] .btb-player-hp-fill.hp-fill-green  { background: #d4860a !important; }
.battle-screen[data-biome="urban"] .btb-player-hp-fill.hp-fill-yellow { background: rgba(185,105,8,0.75) !important; }
.battle-screen[data-biome="urban"] .btb-dp-num                     { color: #d4860a !important; }
.battle-screen[data-biome="urban"] .btb-dp-lbl                     { color: rgba(212,134,10,0.6) !important; }
.battle-screen[data-biome="urban"] .btb-dp-box {
  border-color: rgba(212,134,10,0.5) !important;
  background: rgba(212,134,10,0.05) !important;
  box-shadow: 0 0 14px rgba(212,134,10,0.12), inset 0 0 8px rgba(212,134,10,0.04) !important;
}
.battle-screen[data-biome="urban"] .btb-player .btb-hp-track       { border-color: rgba(212,134,10,0.22) !important; }
.battle-screen[data-biome="urban"] .player-half .player-field-v2   {
  border-color: rgba(212,134,10,0.28) !important;
  background: rgba(212,134,10,0.028) !important;
  box-shadow: inset 0 0 24px rgba(212,134,10,0.05), 0 0 0 1px rgba(212,134,10,0.1) !important;
}

/* ── OCEAN / Coastal Cliffs → muted slate blue ── */
.battle-screen[data-biome="ocean"] .btb-side-player                { color: #5a9fd4 !important; }
.battle-screen[data-biome="ocean"] .btb-dot-player                 { background: #5a9fd4 !important; box-shadow: 0 0 5px rgba(90,159,212,0.8) !important; }
.battle-screen[data-biome="ocean"] .btb-player .btb-hp-val         { color: #5a9fd4 !important; }
.battle-screen[data-biome="ocean"] .btb-player-hp-fill.hp-fill-green  { background: #5a9fd4 !important; }
.battle-screen[data-biome="ocean"] .btb-player-hp-fill.hp-fill-yellow { background: rgba(70,135,185,0.75) !important; }
.battle-screen[data-biome="ocean"] .btb-dp-num                     { color: #5a9fd4 !important; }
.battle-screen[data-biome="ocean"] .btb-dp-lbl                     { color: rgba(90,159,212,0.6) !important; }
.battle-screen[data-biome="ocean"] .btb-dp-box {
  border-color: rgba(90,159,212,0.5) !important;
  background: rgba(90,159,212,0.05) !important;
  box-shadow: 0 0 14px rgba(90,159,212,0.12), inset 0 0 8px rgba(90,159,212,0.04) !important;
}
.battle-screen[data-biome="ocean"] .btb-player .btb-hp-track       { border-color: rgba(90,159,212,0.22) !important; }
.battle-screen[data-biome="ocean"] .player-half .player-field-v2   {
  border-color: rgba(90,159,212,0.28) !important;
  background: rgba(90,159,212,0.028) !important;
  box-shadow: inset 0 0 24px rgba(90,159,212,0.05), 0 0 0 1px rgba(90,159,212,0.1) !important;
}

/* ── TROPICAL / Jungle Ravine → tropical green ── */
.battle-screen[data-biome="tropical"] .btb-side-player             { color: #22cc44 !important; }
.battle-screen[data-biome="tropical"] .btb-dot-player              { background: #22cc44 !important; box-shadow: 0 0 5px rgba(34,204,68,0.8) !important; }
.battle-screen[data-biome="tropical"] .btb-player .btb-hp-val      { color: #22cc44 !important; }
.battle-screen[data-biome="tropical"] .btb-player-hp-fill.hp-fill-green  { background: #22cc44 !important; }
.battle-screen[data-biome="tropical"] .btb-player-hp-fill.hp-fill-yellow { background: rgba(28,170,50,0.75) !important; }
.battle-screen[data-biome="tropical"] .btb-dp-num                  { color: #22cc44 !important; }
.battle-screen[data-biome="tropical"] .btb-dp-lbl                  { color: rgba(34,204,68,0.6) !important; }
.battle-screen[data-biome="tropical"] .btb-dp-box {
  border-color: rgba(34,204,68,0.5) !important;
  background: rgba(34,204,68,0.05) !important;
  box-shadow: 0 0 14px rgba(34,204,68,0.12), inset 0 0 8px rgba(34,204,68,0.04) !important;
}
.battle-screen[data-biome="tropical"] .btb-player .btb-hp-track    { border-color: rgba(34,204,68,0.22) !important; }
.battle-screen[data-biome="tropical"] .player-half .player-field-v2 {
  border-color: rgba(34,204,68,0.28) !important;
  background: rgba(34,204,68,0.028) !important;
  box-shadow: inset 0 0 24px rgba(34,204,68,0.05), 0 0 0 1px rgba(34,204,68,0.1) !important;
}