/* ============================================================
   Battle board scenery (src/arena/scene.mjs)
   A persistent layer fixed behind the arena. It is never re-rendered,
   so ambient loops keep running while the arena above updates.
   The board painting is anchored so its battle line lies on the
   battlefield's centre line at every window size.
   ============================================================ */
/* Board sizes (--h-h, --side) come from the shared .arena,#board-scene rule in arena.css. */
#board-scene{display:none;position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#2c3a18;
  /* The battlefield's centre line: (viewport + hand-peek row - hand row) / 2, from the .arena grid. */
  --split:calc(50vh - var(--h-h)*.36 - 3px);
  /* Where the board's battle line crosses the painting, as a fraction of its height (set per board by scene.mjs BOARDS). */
  --trail:.489;
  /* Painting height: at least the window width at 3:2, and tall enough to cover above and below the trail. */
  --bh:max(calc(100vw / 1.5),calc(var(--split) / var(--trail)),calc((100vh - var(--split)) / (1 - var(--trail))))}
body[data-screen="battle"] #board-scene{display:block}
body[data-screen="battle"] .arena{z-index:1}

.scene{position:absolute;inset:0;overflow:hidden}
.scene>i{position:absolute;display:block}
.board-art{position:absolute;left:50%;top:calc(var(--split) - var(--bh) * var(--trail));width:calc(var(--bh) * 1.5);height:var(--bh);max-width:none;translate:-50% 0}

/* A soft darkening toward the screen edges so the HUD in the side columns reads over the foliage. */
.scene-light{inset:0;background:
  linear-gradient(180deg,rgba(10,14,6,.35),transparent 14%,transparent 84%,rgba(10,14,6,.45)),
  radial-gradient(125% 110% at 50% var(--split),transparent 58%,rgba(8,12,4,.5) 100%)}
/* A cloud's shadow drifting slowly across the meadow. */
.scene-cloud{left:-40%;top:8%;width:55%;height:75%;border-radius:50%;background:radial-gradient(closest-side,rgba(10,20,5,.22),transparent);filter:blur(14px);animation:cloud 110s linear infinite}
@keyframes cloud{from{transform:translateX(0)}to{transform:translateX(260%)}}
/* Dust and pollen catching the sunlight. */
.motes{position:absolute;inset:0}
.motes i{position:absolute;left:calc(8% * var(--i) + 4%);bottom:-10px;width:3px;height:3px;border-radius:50%;background:#ffe6a8;box-shadow:0 0 8px 2px rgba(255,220,150,.6);opacity:0;
  animation:mote calc(10s + var(--i) * .8s) linear infinite;animation-delay:calc(var(--i) * -1.5s)}
@keyframes mote{0%{transform:translate(0,0);opacity:0}12%{opacity:.8}88%{opacity:.5}100%{transform:translate(50px,-100vh);opacity:0}}

/* motion off: freeze ambient loops */
body.no-motion #board-scene *,body.no-motion #board-scene *::before,body.no-motion #board-scene *::after{animation:none!important}
body.no-motion .scene-cloud,body.no-motion .motes{display:none}
@media (prefers-reduced-motion:reduce){#board-scene *{animation:none!important}.scene-cloud,.motes{display:none}}