/* ========== AMBIENT HUNTING BACKGROUND ========== */
/* Layered pine forest with parallax drift, rolling mist, and falling leaves.
   Sits behind everything; pointer-events: none; respects body theme vars. */

body { position: relative; }
#root { position: relative; z-index: 1; }

.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* color used by SVG fills via currentColor */
  color: var(--ink);
}

/* hide entirely if disabled */
body.ambient-off .ambient { display: none; }

/* ----- SKY WASH / VIGNETTE ----- */
.ambient__sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(184,137,58,.08), transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 110%, rgba(43,58,42,.18), transparent 65%);
  mix-blend-mode: multiply;
}
body.theme-timber .ambient__sky {
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(224,181,107,.05), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 110%, rgba(0,0,0,.55), transparent 65%);
  mix-blend-mode: normal;
}
body.theme-blackout .ambient__sky {
  background:
    radial-gradient(ellipse 80% 60% at 50% 15%, rgba(200,154,74,.06), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 110%, rgba(0,0,0,.7), transparent 60%);
  mix-blend-mode: normal;
}

/* ----- DISTANT MOUNTAIN MIST ----- */
.ambient__mountains {
  position: absolute;
  left: -10%; right: -10%;
  bottom: 22%;
  height: 220px;
  opacity: .14;
  color: var(--ink);
  background-repeat: repeat-x;
  background-size: 1200px 220px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 220' preserveAspectRatio='none'><path fill='%231f1a14' d='M0 220 L0 160 L80 110 L160 140 L240 70 L320 120 L400 90 L500 50 L580 100 L660 80 L760 130 L840 90 L940 60 L1020 110 L1100 80 L1200 130 L1200 220 Z'/></svg>");
  animation: ambient-drift-x 240s linear infinite;
}
body.theme-timber .ambient__mountains { opacity: .35; }
body.theme-blackout .ambient__mountains {
  opacity: .25;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 220' preserveAspectRatio='none'><path fill='%23f2ece0' d='M0 220 L0 160 L80 110 L160 140 L240 70 L320 120 L400 90 L500 50 L580 100 L660 80 L760 130 L840 90 L940 60 L1020 110 L1100 80 L1200 130 L1200 220 Z'/></svg>");
}

/* ----- MID TREES (parallax slow) ----- */
.ambient__trees-mid {
  position: absolute;
  left: -10%; right: -10%;
  bottom: 10%;
  height: 180px;
  opacity: .22;
  background-repeat: repeat-x;
  background-size: 600px 180px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 180' preserveAspectRatio='none'><path fill='%231f1a14' d='M0 180 L0 130 L18 110 L8 110 L30 70 L20 70 L42 30 L62 78 L52 78 L78 120 L68 120 L92 90 L112 130 L138 88 L130 88 L156 40 L178 90 L170 90 L196 130 L222 100 L246 60 L266 110 L292 80 L320 130 L344 90 L370 50 L394 100 L420 80 L446 130 L470 95 L496 55 L520 110 L546 80 L574 130 L600 100 L600 180 Z'/></svg>");
  animation: ambient-drift-mid 140s linear infinite;
}
body.theme-timber .ambient__trees-mid { opacity: .55; }
body.theme-blackout .ambient__trees-mid {
  opacity: .35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 180' preserveAspectRatio='none'><path fill='%23f2ece0' d='M0 180 L0 130 L18 110 L8 110 L30 70 L20 70 L42 30 L62 78 L52 78 L78 120 L68 120 L92 90 L112 130 L138 88 L130 88 L156 40 L178 90 L170 90 L196 130 L222 100 L246 60 L266 110 L292 80 L320 130 L344 90 L370 50 L394 100 L420 80 L446 130 L470 95 L496 55 L520 110 L546 80 L574 130 L600 100 L600 180 Z'/></svg>");
}

/* ----- FRONT TREES (closer, darker, slower drift) ----- */
.ambient__trees-front {
  position: absolute;
  left: -10%; right: -10%;
  bottom: 0;
  height: 240px;
  opacity: .38;
  background-repeat: repeat-x;
  background-size: 480px 240px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 240' preserveAspectRatio='none'><path fill='%231f1a14' d='M0 240 L0 180 L14 160 L6 160 L26 120 L18 120 L38 76 L28 76 L52 30 L72 80 L62 80 L86 124 L76 124 L98 96 L120 144 L142 100 L132 100 L156 50 L178 102 L168 102 L194 150 L218 112 L240 70 L262 124 L286 96 L312 148 L334 110 L360 64 L382 118 L406 94 L432 144 L456 108 L480 150 L480 240 Z'/></svg>");
  animation: ambient-drift-front 200s linear infinite;
}
body.theme-timber .ambient__trees-front { opacity: .85; }
body.theme-rodrifle .ambient__trees-front { opacity: .32; }
body.theme-blackout .ambient__trees-front {
  opacity: .65;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 240' preserveAspectRatio='none'><path fill='%23f2ece0' d='M0 240 L0 180 L14 160 L6 160 L26 120 L18 120 L38 76 L28 76 L52 30 L72 80 L62 80 L86 124 L76 124 L98 96 L120 144 L142 100 L132 100 L156 50 L178 102 L168 102 L194 150 L218 112 L240 70 L262 124 L286 96 L312 148 L334 110 L360 64 L382 118 L406 94 L432 144 L456 108 L480 150 L480 240 Z'/></svg>");
}

/* ----- ROLLING FOG / MIST ----- */
.ambient__fog {
  position: absolute;
  left: -50%; right: -50%;
  height: 180px;
  opacity: .35;
  background-repeat: repeat-x;
  background-size: 1400px 180px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 180'><g fill='%23f5efdf' opacity='0.9'><ellipse cx='120' cy='100' rx='180' ry='28'/><ellipse cx='420' cy='130' rx='220' ry='22'/><ellipse cx='760' cy='90' rx='240' ry='30'/><ellipse cx='1080' cy='120' rx='200' ry='24'/><ellipse cx='1320' cy='100' rx='160' ry='20'/></g></svg>");
  filter: blur(8px);
  mix-blend-mode: screen;
}
.ambient__fog--1 { bottom: 18%; animation: ambient-drift-fog 90s linear infinite; }
.ambient__fog--2 { bottom: 6%;  opacity: .25; animation: ambient-drift-fog 140s linear infinite reverse; }

body.theme-timber .ambient__fog {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 180'><g fill='%23d8c9a8' opacity='0.7'><ellipse cx='120' cy='100' rx='180' ry='28'/><ellipse cx='420' cy='130' rx='220' ry='22'/><ellipse cx='760' cy='90' rx='240' ry='30'/><ellipse cx='1080' cy='120' rx='200' ry='24'/><ellipse cx='1320' cy='100' rx='160' ry='20'/></g></svg>");
  opacity: .22;
  mix-blend-mode: screen;
}

/* ----- BIRDS (occasional flock) ----- */
.ambient__birds {
  position: absolute;
  top: 12%;
  left: -10%;
  width: 200px; height: 60px;
  opacity: .55;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60'><g fill='none' stroke='%231f1a14' stroke-width='1.6' stroke-linecap='round'><path d='M10 30 Q18 22 26 30 Q34 22 42 30'/><path d='M70 18 Q78 10 86 18 Q94 10 102 18'/><path d='M120 36 Q128 28 136 36 Q144 28 152 36'/><path d='M160 14 Q166 8 172 14 Q178 8 184 14'/></g></svg>");
  animation: ambient-birds 60s linear infinite;
  animation-delay: 8s;
}
body.theme-timber .ambient__birds {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60'><g fill='none' stroke='%23d8c9a8' stroke-width='1.6' stroke-linecap='round'><path d='M10 30 Q18 22 26 30 Q34 22 42 30'/><path d='M70 18 Q78 10 86 18 Q94 10 102 18'/><path d='M120 36 Q128 28 136 36 Q144 28 152 36'/><path d='M160 14 Q166 8 172 14 Q178 8 184 14'/></g></svg>");
  opacity: .35;
}
body.theme-blackout .ambient__birds {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60'><g fill='none' stroke='%23f2ece0' stroke-width='1.6' stroke-linecap='round'><path d='M10 30 Q18 22 26 30 Q34 22 42 30'/><path d='M70 18 Q78 10 86 18 Q94 10 102 18'/><path d='M120 36 Q128 28 136 36 Q144 28 152 36'/><path d='M160 14 Q166 8 172 14 Q178 8 184 14'/></g></svg>");
  opacity: .5;
}

/* ----- FALLING LEAVES ----- */
.ambient__leaves {
  position: absolute;
  inset: 0;
}
.ambient__leaf {
  position: absolute;
  top: -40px;
  width: 14px; height: 10px;
  background: var(--oxblood);
  border-radius: 60% 10% 60% 10%;
  opacity: .55;
  transform-origin: center;
  animation: ambient-leaf-fall linear infinite;
}
.ambient__leaf:nth-child(1)  { left: 4%;  width: 12px; height: 8px;  background: var(--leather); animation-duration: 22s; animation-delay: 0s; }
.ambient__leaf:nth-child(2)  { left: 12%; width: 16px; height: 11px; background: var(--gold);    animation-duration: 28s; animation-delay: 4s; }
.ambient__leaf:nth-child(3)  { left: 19%; width: 10px; height: 7px;  background: var(--oxblood); animation-duration: 19s; animation-delay: 9s; }
.ambient__leaf:nth-child(4)  { left: 27%; width: 14px; height: 9px;  background: var(--leather); animation-duration: 26s; animation-delay: 2s; }
.ambient__leaf:nth-child(5)  { left: 34%; width: 18px; height: 12px; background: var(--gold);    animation-duration: 30s; animation-delay: 11s; }
.ambient__leaf:nth-child(6)  { left: 41%; width: 11px; height: 7px;  background: var(--oxblood); animation-duration: 21s; animation-delay: 6s; }
.ambient__leaf:nth-child(7)  { left: 49%; width: 14px; height: 9px;  background: var(--leather); animation-duration: 25s; animation-delay: 1s; }
.ambient__leaf:nth-child(8)  { left: 57%; width: 16px; height: 11px; background: var(--gold);    animation-duration: 32s; animation-delay: 14s; }
.ambient__leaf:nth-child(9)  { left: 64%; width: 12px; height: 8px;  background: var(--oxblood); animation-duration: 23s; animation-delay: 3s; }
.ambient__leaf:nth-child(10) { left: 71%; width: 14px; height: 9px;  background: var(--leather); animation-duration: 27s; animation-delay: 8s; }
.ambient__leaf:nth-child(11) { left: 79%; width: 18px; height: 12px; background: var(--gold);    animation-duration: 33s; animation-delay: 5s; }
.ambient__leaf:nth-child(12) { left: 86%; width: 11px; height: 7px;  background: var(--oxblood); animation-duration: 20s; animation-delay: 12s; }
.ambient__leaf:nth-child(13) { left: 93%; width: 14px; height: 9px;  background: var(--leather); animation-duration: 26s; animation-delay: 7s; }

body.theme-timber .ambient__leaf { opacity: .35; }
body.theme-blackout .ambient__leaf { opacity: .45; }

/* ===== ANIMATIONS ===== */
@keyframes ambient-drift-x {
  from { background-position: 0 0; }
  to   { background-position: -1200px 0; }
}
@keyframes ambient-drift-mid {
  from { background-position: 0 0; }
  to   { background-position: -600px 0; }
}
@keyframes ambient-drift-front {
  from { background-position: 0 0; }
  to   { background-position: -480px 0; }
}
@keyframes ambient-drift-fog {
  from { transform: translateX(-10%); }
  to   { transform: translateX(10%); }
}
@keyframes ambient-birds {
  0%   { transform: translate(0, 0)        scale(0.6); opacity: 0; }
  6%   { opacity: .55; }
  40%  { transform: translate(60vw, -30px) scale(0.7); }
  70%  { transform: translate(95vw, 10px)  scale(0.8); opacity: .55; }
  100% { transform: translate(120vw, -20px) scale(0.9); opacity: 0; }
}
@keyframes ambient-leaf-fall {
  0%   { transform: translate(0, -40px) rotate(0deg);    opacity: 0; }
  8%   { opacity: .55; }
  50%  { transform: translate(40px, 50vh) rotate(220deg); }
  92%  { opacity: .55; }
  100% { transform: translate(-30px, 110vh) rotate(540deg); opacity: 0; }
}

/* Variation A: leaf intensity high */
body.ambient-intense .ambient__leaf { opacity: .8; }
body.ambient-intense .ambient__fog  { opacity: .55; }

/* Variation B: subtle */
body.ambient-subtle .ambient__trees-front { opacity: .18; }
body.ambient-subtle .ambient__trees-mid   { opacity: .12; }
body.ambient-subtle .ambient__mountains   { opacity: .08; }
body.ambient-subtle .ambient__fog         { opacity: .2; }
body.ambient-subtle .ambient__leaf        { opacity: .3; }
body.ambient-subtle .ambient__birds       { opacity: .25; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .ambient__mountains,
  .ambient__trees-mid,
  .ambient__trees-front,
  .ambient__fog,
  .ambient__birds,
  .ambient__leaf,
  .ambient__snow span,
  .ambient__embers span,
  .ambient__topo,
  .ambient__stars span { animation: none !important; }
}

/* =========================================================================
   SCENE SYSTEM
   ========================================================================= */
/* By default hide scene-specific layers; each .bg-scene-* shows what it needs */
.ambient__night,
.ambient__topo,
.ambient__stars,
.ambient__snow,
.ambient__ember-glow,
.ambient__embers { display: none; }

/* ---------- SCENE: FOREST (default — keeps the original look) ---------- */
.bg-scene-forest .ambient__sky,
.bg-scene-forest .ambient__mountains,
.bg-scene-forest .ambient__fog,
.bg-scene-forest .ambient__trees-mid,
.bg-scene-forest .ambient__trees-front,
.bg-scene-forest .ambient__birds,
.bg-scene-forest .ambient__leaves { display: block; }

/* ---------- SCENE: SNOWFALL ---------- */
.bg-scene-snow .ambient__mountains,
.bg-scene-snow .ambient__trees-front { display: block; }
.bg-scene-snow .ambient__fog,
.bg-scene-snow .ambient__trees-mid,
.bg-scene-snow .ambient__birds,
.bg-scene-snow .ambient__leaves { display: none; }
.bg-scene-snow .ambient__snow { display: block; }

.ambient__snow {
  position: absolute; inset: 0;
}
.ambient__snow span {
  position: absolute;
  top: -20px;
  width: 6px; height: 6px;
  background: #f6f4ec;
  border-radius: 50%;
  opacity: .8;
  box-shadow: 0 0 4px rgba(255,255,255,.4);
  animation: ambient-snowfall linear infinite;
}
body.theme-blackout .ambient__snow span,
body.theme-timber .ambient__snow span { opacity: .65; }
.ambient__snow span:nth-child(1)  { left: 3%;  width: 5px; height: 5px; animation-duration: 14s; animation-delay: 0s; }
.ambient__snow span:nth-child(2)  { left: 7%;  width: 8px; height: 8px; animation-duration: 22s; animation-delay: 3s; }
.ambient__snow span:nth-child(3)  { left: 11%; width: 4px; height: 4px; animation-duration: 11s; animation-delay: 7s; }
.ambient__snow span:nth-child(4)  { left: 15%; width: 6px; height: 6px; animation-duration: 18s; animation-delay: 1s; }
.ambient__snow span:nth-child(5)  { left: 19%; width: 7px; height: 7px; animation-duration: 20s; animation-delay: 5s; }
.ambient__snow span:nth-child(6)  { left: 24%; width: 5px; height: 5px; animation-duration: 13s; animation-delay: 9s; }
.ambient__snow span:nth-child(7)  { left: 28%; width: 8px; height: 8px; animation-duration: 24s; animation-delay: 2s; }
.ambient__snow span:nth-child(8)  { left: 32%; width: 4px; height: 4px; animation-duration: 12s; animation-delay: 6s; }
.ambient__snow span:nth-child(9)  { left: 36%; width: 6px; height: 6px; animation-duration: 17s; animation-delay: 10s; }
.ambient__snow span:nth-child(10) { left: 40%; width: 7px; height: 7px; animation-duration: 21s; animation-delay: 0s; }
.ambient__snow span:nth-child(11) { left: 44%; width: 5px; height: 5px; animation-duration: 15s; animation-delay: 4s; }
.ambient__snow span:nth-child(12) { left: 48%; width: 8px; height: 8px; animation-duration: 23s; animation-delay: 8s; }
.ambient__snow span:nth-child(13) { left: 52%; width: 4px; height: 4px; animation-duration: 10s; animation-delay: 1s; }
.ambient__snow span:nth-child(14) { left: 56%; width: 6px; height: 6px; animation-duration: 19s; animation-delay: 5s; }
.ambient__snow span:nth-child(15) { left: 60%; width: 7px; height: 7px; animation-duration: 22s; animation-delay: 9s; }
.ambient__snow span:nth-child(16) { left: 64%; width: 5px; height: 5px; animation-duration: 14s; animation-delay: 3s; }
.ambient__snow span:nth-child(17) { left: 68%; width: 8px; height: 8px; animation-duration: 25s; animation-delay: 7s; }
.ambient__snow span:nth-child(18) { left: 72%; width: 4px; height: 4px; animation-duration: 11s; animation-delay: 11s; }
.ambient__snow span:nth-child(19) { left: 76%; width: 6px; height: 6px; animation-duration: 18s; animation-delay: 2s; }
.ambient__snow span:nth-child(20) { left: 80%; width: 7px; height: 7px; animation-duration: 20s; animation-delay: 6s; }
.ambient__snow span:nth-child(21) { left: 83%; width: 5px; height: 5px; animation-duration: 13s; animation-delay: 10s; }
.ambient__snow span:nth-child(22) { left: 86%; width: 8px; height: 8px; animation-duration: 23s; animation-delay: 0s; }
.ambient__snow span:nth-child(23) { left: 89%; width: 4px; height: 4px; animation-duration: 12s; animation-delay: 4s; }
.ambient__snow span:nth-child(24) { left: 92%; width: 6px; height: 6px; animation-duration: 17s; animation-delay: 8s; }
.ambient__snow span:nth-child(25) { left: 95%; width: 7px; height: 7px; animation-duration: 21s; animation-delay: 1s; }
.ambient__snow span:nth-child(26) { left: 97%; width: 5px; height: 5px; animation-duration: 15s; animation-delay: 5s; }
.ambient__snow span:nth-child(27) { left: 50%; width: 8px; height: 8px; animation-duration: 24s; animation-delay: 9s; }
.ambient__snow span:nth-child(28) { left: 65%; width: 4px; height: 4px; animation-duration: 11s; animation-delay: 3s; }
.ambient__snow span:nth-child(29) { left: 35%; width: 6px; height: 6px; animation-duration: 18s; animation-delay: 7s; }
.ambient__snow span:nth-child(30) { left: 22%; width: 7px; height: 7px; animation-duration: 20s; animation-delay: 11s; }

@keyframes ambient-snowfall {
  0%   { transform: translate(0, -20px)    rotate(0); opacity: 0; }
  8%   { opacity: .8; }
  100% { transform: translate(-60px, 110vh) rotate(360deg); opacity: 0; }
}

/* ---------- SCENE: EMBERS (campfire) ---------- */
.bg-scene-embers .ambient__trees-front,
.bg-scene-embers .ambient__ember-glow,
.bg-scene-embers .ambient__embers { display: block; }
.bg-scene-embers .ambient__mountains,
.bg-scene-embers .ambient__fog,
.bg-scene-embers .ambient__trees-mid,
.bg-scene-embers .ambient__birds,
.bg-scene-embers .ambient__leaves { display: none; }

.ambient__ember-glow {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 60vh;
  background: radial-gradient(ellipse 70% 100% at 50% 100%,
    rgba(216,90,28,.55) 0%,
    rgba(216,90,28,.25) 25%,
    rgba(216,90,28,.08) 50%,
    transparent 80%);
  mix-blend-mode: screen;
  animation: ambient-glow-pulse 6s ease-in-out infinite;
}
body.theme-blackout .ambient__ember-glow,
body.theme-timber .ambient__ember-glow { mix-blend-mode: screen; }

@keyframes ambient-glow-pulse {
  0%, 100% { opacity: .85; }
  50%      { opacity: 1; }
}

.ambient__embers span {
  position: absolute;
  bottom: -10px;
  width: 4px; height: 4px;
  background: #f4a836;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(244,168,54,.9), 0 0 14px rgba(216,90,28,.6);
  opacity: 0;
  animation: ambient-ember-rise ease-out infinite;
}
.ambient__embers span:nth-child(1)  { left: 6%;  width: 3px; height: 3px; animation-duration: 7s; animation-delay: 0s; }
.ambient__embers span:nth-child(2)  { left: 13%; width: 5px; height: 5px; animation-duration: 9s; animation-delay: 2s; }
.ambient__embers span:nth-child(3)  { left: 21%; width: 4px; height: 4px; animation-duration: 8s; animation-delay: 4s; }
.ambient__embers span:nth-child(4)  { left: 28%; width: 3px; height: 3px; animation-duration: 6s; animation-delay: 1s; }
.ambient__embers span:nth-child(5)  { left: 35%; width: 5px; height: 5px; animation-duration: 10s; animation-delay: 3s; }
.ambient__embers span:nth-child(6)  { left: 41%; width: 4px; height: 4px; animation-duration: 7s; animation-delay: 5s; }
.ambient__embers span:nth-child(7)  { left: 47%; width: 3px; height: 3px; animation-duration: 9s; animation-delay: 0s; }
.ambient__embers span:nth-child(8)  { left: 52%; width: 5px; height: 5px; animation-duration: 8s; animation-delay: 2s; }
.ambient__embers span:nth-child(9)  { left: 58%; width: 4px; height: 4px; animation-duration: 11s; animation-delay: 4s; }
.ambient__embers span:nth-child(10) { left: 64%; width: 3px; height: 3px; animation-duration: 6s; animation-delay: 1s; }
.ambient__embers span:nth-child(11) { left: 71%; width: 5px; height: 5px; animation-duration: 10s; animation-delay: 3s; }
.ambient__embers span:nth-child(12) { left: 78%; width: 4px; height: 4px; animation-duration: 8s; animation-delay: 5s; }
.ambient__embers span:nth-child(13) { left: 84%; width: 3px; height: 3px; animation-duration: 7s; animation-delay: 0s; }
.ambient__embers span:nth-child(14) { left: 89%; width: 5px; height: 5px; animation-duration: 9s; animation-delay: 2s; }
.ambient__embers span:nth-child(15) { left: 93%; width: 4px; height: 4px; animation-duration: 8s; animation-delay: 4s; }
.ambient__embers span:nth-child(16) { left: 18%; width: 3px; height: 3px; animation-duration: 7s; animation-delay: 6s; }
.ambient__embers span:nth-child(17) { left: 38%; width: 5px; height: 5px; animation-duration: 11s; animation-delay: 1s; }
.ambient__embers span:nth-child(18) { left: 55%; width: 3px; height: 3px; animation-duration: 6s; animation-delay: 3s; }
.ambient__embers span:nth-child(19) { left: 73%; width: 5px; height: 5px; animation-duration: 9s; animation-delay: 5s; }
.ambient__embers span:nth-child(20) { left: 87%; width: 4px; height: 4px; animation-duration: 8s; animation-delay: 7s; }

@keyframes ambient-ember-rise {
  0%   { transform: translate(0, 0)        scale(1);   opacity: 0; }
  10%  { opacity: 1; }
  40%  { transform: translate(20px, -40vh)  scale(1);   opacity: .9; }
  70%  { transform: translate(-15px, -70vh) scale(.7);  opacity: .5; }
  100% { transform: translate(10px, -100vh) scale(.3);  opacity: 0; }
}

/* In embers scene boost the front tree silhouette for firelit forest feel */
.bg-scene-embers .ambient__trees-front { opacity: .85; bottom: 0; }
body.theme-blackout.bg-scene-embers .ambient__trees-front,
body.theme-timber.bg-scene-embers   .ambient__trees-front { opacity: .95; }

/* ---------- SCENE: TOPO MAP ---------- */
.bg-scene-topo .ambient__topo { display: block; }
.bg-scene-topo .ambient__sky,
.bg-scene-topo .ambient__mountains,
.bg-scene-topo .ambient__fog,
.bg-scene-topo .ambient__trees-mid,
.bg-scene-topo .ambient__trees-front,
.bg-scene-topo .ambient__birds,
.bg-scene-topo .ambient__leaves { display: none; }

.ambient__topo {
  position: absolute; inset: -10% -10%;
  opacity: .18;
  background-repeat: repeat;
  background-size: 800px 600px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'><g fill='none' stroke='%231f1a14' stroke-width='1.2'><path d='M-50 120 Q120 60 280 140 T580 100 T880 160'/><path d='M-50 180 Q140 130 310 200 T620 170 T880 220'/><path d='M-50 250 Q160 200 340 270 T660 240 T880 290'/><path d='M-50 320 Q180 270 370 340 T700 310 T880 360'/><path d='M-50 390 Q200 340 400 410 T740 380 T880 430'/><path d='M-50 460 Q220 410 430 480 T780 450 T880 500'/></g><g fill='none' stroke='%231f1a14' stroke-width='0.6' opacity='0.5'><path d='M-50 90  Q120 30 280 110 T580 70  T880 130'/><path d='M-50 150 Q140 100 310 170 T620 140 T880 190'/><path d='M-50 220 Q160 170 340 240 T660 210 T880 260'/><path d='M-50 290 Q180 240 370 310 T700 280 T880 330'/><path d='M-50 360 Q200 310 400 380 T740 350 T880 400'/><path d='M-50 430 Q220 380 430 450 T780 420 T880 470'/></g><g fill='%231f1a14' font-family='monospace' font-size='10' opacity='0.4'><text x='200' y='115'>2840</text><text x='480' y='175'>2700</text><text x='180' y='245'>2560</text><text x='560' y='315'>2420</text><text x='240' y='385'>2280</text><text x='600' y='455'>2140</text></g></svg>");
  animation: ambient-topo-drift 180s linear infinite;
}
body.theme-blackout .ambient__topo,
body.theme-timber   .ambient__topo {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'><g fill='none' stroke='%23f2ece0' stroke-width='1.2'><path d='M-50 120 Q120 60 280 140 T580 100 T880 160'/><path d='M-50 180 Q140 130 310 200 T620 170 T880 220'/><path d='M-50 250 Q160 200 340 270 T660 240 T880 290'/><path d='M-50 320 Q180 270 370 340 T700 310 T880 360'/><path d='M-50 390 Q200 340 400 410 T740 380 T880 430'/><path d='M-50 460 Q220 410 430 480 T780 450 T880 500'/></g><g fill='none' stroke='%23f2ece0' stroke-width='0.6' opacity='0.5'><path d='M-50 90  Q120 30 280 110 T580 70  T880 130'/><path d='M-50 150 Q140 100 310 170 T620 140 T880 190'/><path d='M-50 220 Q160 170 340 240 T660 210 T880 260'/><path d='M-50 290 Q180 240 370 310 T700 280 T880 330'/><path d='M-50 360 Q200 310 400 380 T740 350 T880 400'/><path d='M-50 430 Q220 380 430 450 T780 420 T880 470'/></g></svg>");
  opacity: .14;
}

@keyframes ambient-topo-drift {
  from { background-position: 0 0; }
  to   { background-position: -800px -600px; }
}

/* ---------- SCENE: STARLIT NIGHT ---------- */
.bg-scene-stars .ambient__night,
.bg-scene-stars .ambient__stars,
.bg-scene-stars .ambient__trees-front { display: block; }
.bg-scene-stars .ambient__sky,
.bg-scene-stars .ambient__mountains,
.bg-scene-stars .ambient__fog,
.bg-scene-stars .ambient__trees-mid,
.bg-scene-stars .ambient__birds,
.bg-scene-stars .ambient__leaves { display: none; }

.ambient__night {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(46,70,84,.35) 0%, transparent 60%),
    linear-gradient(180deg, rgba(10,12,18,.55) 0%, rgba(10,12,18,.85) 70%, rgba(10,12,18,.95) 100%);
  mix-blend-mode: multiply;
}
body.theme-blackout .ambient__night,
body.theme-timber .ambient__night {
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(80,110,140,.25) 0%, transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.3) 100%);
  mix-blend-mode: normal;
}

.ambient__stars {
  position: absolute; inset: 0;
}
.ambient__stars::before,
.ambient__stars::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 5%  12%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px   at 11% 27%, #fff 50%, transparent 100%),
    radial-gradient(2px 2px   at 18%  8%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px   at 24% 22%, #fff 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 31% 14%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px   at 37% 32%, #fff 50%, transparent 100%),
    radial-gradient(2px 2px   at 44%  6%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px   at 51% 26%, #fff 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 58% 18%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px   at 64% 11%, #fff 50%, transparent 100%),
    radial-gradient(2px 2px   at 71% 30%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px   at 77% 15%, #fff 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 84% 23%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px   at 90%  9%, #fff 50%, transparent 100%),
    radial-gradient(2px 2px   at 96% 28%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px   at 8%  40%, #fff 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 22% 45%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px   at 41% 50%, #fff 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 67% 42%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px   at 88% 48%, #fff 50%, transparent 100%);
  animation: ambient-twinkle 4s ease-in-out infinite;
}
.ambient__stars::after {
  animation-delay: 2s;
  background-image:
    radial-gradient(1px 1px   at 14% 35%, #fff 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 29% 38%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px   at 48% 33%, #fff 50%, transparent 100%),
    radial-gradient(2px 2px   at 60% 36%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px   at 75% 39%, #fff 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 93% 34%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px   at 3%  20%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px   at 16% 18%, #fff 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 35% 24%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px   at 55% 16%, #fff 50%, transparent 100%),
    radial-gradient(2px 2px   at 80% 21%, #fff 50%, transparent 100%);
}

@keyframes ambient-twinkle {
  0%, 100% { opacity: .6; }
  50%      { opacity: 1; }
}

/* In stars scene the front trees become solid silhouette regardless of theme */
.bg-scene-stars .ambient__trees-front { opacity: .9; }