/* Light, ground haze and cloud shadows sit beneath units and move markers.
   Rain/leaves pass in front, with bounded coverage and no input interception.
   CSS handles motion; JavaScript changes the atmosphere only every two seconds. */
.board { isolation:isolate; --scenery-width:640px; --scenery-height:640px; --rain-slant:.32; --rain-angle:18deg; }
.board > .square { z-index:1; }
.board > .square.selected { z-index:2; }
.scenery, .scenery span { position:absolute; pointer-events:none; }
.scenery { display:contents; }
.scenery-light, .scenery-weather { inset:1px; overflow:hidden; }
.scenery-light { inset:0; z-index:0; }
.scenery-weather { z-index:4; }
/* Same bounds as the airborne layer, but beneath squares and troops. */
.scenery-light > .scenery-ground { inset:1px; overflow:hidden; }
.scenery-light > span { inset:0; transition:opacity 2.1s linear; }
.scenery-dim { background:#01050d; opacity:var(--scenery-dim,0); }
.scenery-warm { background:linear-gradient(135deg,#ffc25c,#e68239 55%,#a13e36); opacity:var(--scenery-warm,.07); }
/* Moonlight reuses the aligned terrain, so its stones/leaves keep their detail.
   A static color treatment and directional mask replace the flat blue wash.
   Only opacity changes with time; the filter and mask never animate. */
.scenery-moon {
  background-image:linear-gradient(#a8c8ee,#a8c8ee),var(--terrain);
  background-size:cover;
  background-blend-mode:multiply;
  filter:saturate(.55) contrast(1.08) brightness(1.18);
  -webkit-mask-image:linear-gradient(135deg,#000 0%,#000 18%,#000b3 38%,#00040 62%,transparent 82%);
  mask-image:linear-gradient(135deg,#000 0%,#000 18%,#000b3 38%,#00040 62%,transparent 82%);
  opacity:var(--scenery-moon,0);
}
.scenery-dawn { background:linear-gradient(155deg,#ffd0b5,#c386b3 60%,transparent); opacity:var(--scenery-dawn,0); }
.scenery-lamps { background:radial-gradient(ellipse at 6% 14%,#ffe3a1 0%,#eaaa5270 3%,#cd6e242b 7%,transparent 15%),radial-gradient(ellipse at 94% 86%,#ffe3a1 0%,#eaaa5270 3%,#cd6e242b 7%,transparent 15%),radial-gradient(ellipse at 5% 85%,#ffd08d 0%,#db8b4166 3%,transparent 12%),radial-gradient(ellipse at 95% 15%,#ffd08d 0%,#db8b4166 3%,transparent 12%); opacity:var(--scenery-lamps,0); }
.scenery-light > .scenery-clouds { inset:-30%; background:radial-gradient(ellipse at 15% 22%,#102034 0%,#10203488 16%,transparent 36%),radial-gradient(ellipse at 72% 76%,#102034 0%,#10203477 20%,transparent 43%); opacity:var(--scenery-clouds,.1); animation:scenery-cloud-drift 38s ease-in-out infinite alternate; }
.scenery-light > .scenery-mist { inset:5% -35% -25%; background:radial-gradient(ellipse at 23% 72%,#e2fff1 0%,#cbe9e877 15%,transparent 35%),radial-gradient(ellipse at 80% 40%,#dbeef8 0%,transparent 29%); opacity:var(--scenery-mist,.1); animation:scenery-ground-drift 24s ease-in-out infinite alternate; }
.scenery-light > .scenery-dust { inset:0 -40% -25%; background:radial-gradient(ellipse at 10% 76%,#f6d99e 0%,#e5b46d99 18%,transparent 42%),radial-gradient(ellipse at 74% 40%,#f4cf90 0%,transparent 31%); opacity:var(--scenery-dust,.1); animation:scenery-ground-drift 15s ease-in-out infinite alternate; }
/* The small outer particle fades with weather strength; its ink fades during
   each flight. Keeping those opacities separate prevents keyframes overriding
   the smooth density transition. The particle pool never changes with weather. */
.scenery-particle { left:var(--x); top:var(--y); width:var(--size); height:var(--size); opacity:0; transition:opacity 2.1s linear; }
.scenery-particle, .scenery-ink { animation-duration:var(--duration); animation-delay:var(--delay); animation-timing-function:linear; animation-iteration-count:infinite; }
.scenery-ink { inset:0; animation-name:scenery-flight-fade; }
.scenery-rain { width:0; height:0; }
.scenery-rain > .scenery-ink { background:linear-gradient(transparent,#b1d7ee88 28%,#e6f5ff); }
.scenery-rain.scenery-landing { top:var(--y); width:0; height:0; animation-name:scenery-rain-land; }
.scenery-rain.scenery-landing > .scenery-ink { inset:auto; left:calc((-.625px - var(--scenery-storm,0) * .325px) * var(--scenery-scale,1)); bottom:0; width:calc((1.25px + var(--scenery-storm,0) * .65px) * var(--scenery-scale,1)); height:calc((12px + var(--depth) * 12px) * (1 + var(--scenery-storm,0) * .75) * var(--scenery-scale,1)); transform-origin:50% 100%; transform:rotate(var(--rain-angle)); animation-name:scenery-drop-fade; }
.scenery-impact { width:calc((6px + var(--depth) * 5px) * (1 + var(--scenery-storm,0) * .5) * var(--scenery-scale,1)); height:calc((3px + var(--depth) * 2px) * (1 + var(--scenery-storm,0) * .5) * var(--scenery-scale,1)); transform:translate(-50%,-50%); }
/* The ring and three tiny spray flecks are one painted shape, with one fade
   and scale animation. No new particles, animated blur or accumulated puddles. */
.scenery-impact > .scenery-ink { border-radius:50%; background:radial-gradient(ellipse at 50% 60%,transparent 39%,#d7edf7 43% 51%,transparent 57%),radial-gradient(circle at 20% 18%,#e6f7ff 0 .8px,transparent 1.2px),radial-gradient(circle at 75% 9%,#e6f7ff 0 .8px,transparent 1.2px),radial-gradient(circle at 94% 48%,#d7edf7 0 .7px,transparent 1.1px); opacity:0; animation-name:scenery-impact-pulse; }
.scenery-leaf { left:-20px; width:var(--size); height:calc(var(--size) * .55); animation-name:scenery-leaf-drift; }
.scenery-leaf, .scenery-resting-leaf { width:calc(var(--size) * (1 + var(--scenery-storm,0) * .3) * var(--scenery-scale,1)); height:calc(var(--size) * .55 * (1 + var(--scenery-storm,0) * .3) * var(--scenery-scale,1)); }
.scenery-leaf > .scenery-ink, .scenery-resting-leaf > .scenery-ink { border-radius:70% 12% 70% 12%; background:var(--leaf-color,#d6b965); box-shadow:1px 1px 0 #3b502aaa; }
.scenery-leaf.scenery-landing { left:var(--x); animation-name:scenery-leaf-land; }
.scenery-leaf.scenery-landing > .scenery-ink { animation-name:scenery-landing-leaf-fade; }
.scenery-resting-leaf { transform:rotate(calc(var(--rotation) + 180deg)) scale(.78,.55); }
.scenery-resting-leaf > .scenery-ink { opacity:0; filter:brightness(.8); box-shadow:0 1px 2px #13201488; animation-name:scenery-leaf-rest; }
.scenery-firefly { animation-name:scenery-firefly-drift; }
.scenery-firefly > .scenery-ink { background:#f3ffbb; border-radius:50%; box-shadow:0 0 5px 2px #e9ff8b88,0 0 12px 3px #ddff6e33; animation-name:scenery-firefly-fade; }
.scenery-mote { left:-15px; animation-name:scenery-mote-drift; }
.scenery-mote > .scenery-ink { background:#ffe0a1; border-radius:50%; box-shadow:1px 1px 0 #88613155; }
.scenery-mote.scenery-skimming { left:var(--x); width:calc((5px + var(--scenery-storm,0) * 13px) * var(--scenery-scale,1)); height:1.5px; animation-name:scenery-sand-skim; }
.scenery-mote.scenery-skimming > .scenery-ink { background:linear-gradient(90deg,transparent,#d8ad68,#fff0c4,transparent); border-radius:50%; box-shadow:none; }
.scenery-wind { left:-150px; width:calc(70px + var(--depth) * 80px); height:1px; animation-name:scenery-wind-drift; }
.scenery-wind > .scenery-ink { background:linear-gradient(90deg,transparent,#f2d6a5,transparent); }
.scenery-off .scenery { display:none; }
.scenery-paused .scenery span { animation-play-state:paused; }
.scenery .scenery-dormant, .scenery .scenery-dormant > .scenery-ink { animation-play-state:paused; }
.scenery-controls { margin:7px 0 0 22px; display:flex; justify-content:space-between; align-items:center; gap:8px 14px; flex-wrap:wrap; }
.scenery-status { color:#bbcedb; font-size:.82rem; line-height:1.35; }
.scenery-toggle { display:flex; align-items:center; gap:2px; padding:3px; border:1px solid #43515e; border-radius:7px; background:#111a22; }
.scenery-toggle button { border:0; border-radius:4px; background:transparent; color:#9eafbd; font:inherit; font-size:.82rem; min-height:30px; padding:4px 9px; }
.scenery-toggle button:hover { background:#253749; color:#eef7ff; }
.scenery-toggle button[aria-pressed="true"] { color:#e7f6ff; background:#344c60; box-shadow:inset 0 0 0 1px #718ea4; }
@keyframes scenery-cloud-drift { from { transform:translate(-10%,-6%); } to { transform:translate(12%,9%); } }
@keyframes scenery-ground-drift { from { transform:translate(-12%,4%); } to { transform:translate(14%,-5%); } }
@keyframes scenery-flight-fade { 0%,100% { opacity:0; } 12%,82% { opacity:1; } }
/* A drop ends at 64%; its paired ground ring begins at that exact instant. */
@keyframes scenery-drop-fade { 0%,64%,100% { opacity:0; } 8%,62% { opacity:1; } }
@keyframes scenery-impact-pulse {
  0%,64% { opacity:0; transform:scale(.3); }
  67% { opacity:1; transform:scale(.55); }
  94%,100% { opacity:0; transform:scale(1.6); }
}
/* The leaf lands at 60%, rests through 93%, then fades before reusing its mark. */
@keyframes scenery-landing-leaf-fade { 0%,60%,100% { opacity:0; } 12%,58% { opacity:1; } }
@keyframes scenery-leaf-rest { 0%,58%,100% { opacity:0; } 60%,93% { opacity:1; } }
@keyframes scenery-firefly-fade { 0%,100% { opacity:0; } 25%,65% { opacity:1; } }
@keyframes scenery-rain-land {
  0% { transform:translate(calc(var(--scenery-height) * var(--fall-height) * (1 + var(--scenery-storm,0) * .6) * var(--rain-slant)),calc(var(--scenery-height) * var(--fall-height) * (1 + var(--scenery-storm,0) * .6) * -1)); }
  64%,100% { transform:translate(0,0); }
}
@keyframes scenery-leaf-land {
  0% { transform:translate(calc(var(--scenery-width) * var(--leaf-travel) * -1),calc(var(--scenery-height) * var(--fall-height) * -1)) rotate(var(--rotation)); }
  38% { transform:translate(calc(var(--scenery-width) * var(--leaf-travel) * -.48),calc(var(--scenery-height) * var(--fall-height) * -.58)) rotate(calc(var(--rotation) + 100deg)); }
  53% { transform:translate(-7px,-9px) rotate(calc(var(--rotation) + 165deg)) scale(.9,.8); }
  60%,100% { transform:translate(0,0) rotate(calc(var(--rotation) + 180deg)) scale(.78,.55); }
}
@keyframes scenery-leaf-drift {
  0% { transform:translate(0,-25px) rotate(var(--rotation)); }
  45% { transform:translate(calc(var(--scenery-width) * .47),var(--sway)) rotate(calc(var(--rotation) + 155deg)); }
  100% { transform:translate(calc(var(--scenery-width) + 45px),90px) rotate(calc(var(--rotation) + 310deg)); }
}
@keyframes scenery-firefly-drift {
  0%,100% { transform:translate(0,0); }
  50% { transform:translate(var(--sway),-25px); }
}
@keyframes scenery-mote-drift {
  from { transform:translate(0,25px); }
  to { transform:translate(calc(var(--scenery-width) + 35px),-70px); }
}
@keyframes scenery-wind-drift {
  from { transform:translate(0,0) rotate(-7deg); }
  to { transform:translate(calc(var(--scenery-width) + 220px),-80px) rotate(-7deg); }
}
@keyframes scenery-sand-skim {
  from { transform:translate(calc(var(--scenery-width) * -.07),4px) rotate(-7deg); }
  to { transform:translate(calc(var(--scenery-width) * (.10 + var(--scenery-storm,0) * .18)),-4px) rotate(-7deg); }
}
@media (prefers-reduced-motion:reduce) {
  .scenery span { animation:none !important; transition:none !important; }
  .scenery-weather, .scenery-ground { display:none; }
}
@media (min-width:1050px) and (min-height:600px) { .game-layout { grid-template-columns:minmax(0,calc(100dvh - 220px)) clamp(320px,28vw,440px); } }
@media (max-width:700px) { .scenery-controls { margin-left:18px; } .scenery-toggle { margin-left:auto; } }