/* ============================================================================
   SCENIC BACKGROUND
   ----------------------------------------------------------------------------
   Gives the castles land to stand on instead of floating in the sky: a layered
   parallax backdrop anchored to a JS-tracked horizon.

   On by default for everyone (body[data-scene="1"], set in
   generatePropsMiddleware.js). `?scene=0` is a sticky per-session kill-switch
   that turns it off; with the attribute absent this whole file is inert.

   Depth stack, back to front (z-index within the fixed #background layer):
     sky (body --primary-bg) → far mountains (::before, z1) → flat ground band
     (::after, z2, masks the mountains' base at the horizon) → hill layers
     mid/near (.scene-hills*, z4/5) → grass (.scene-grass, z6) → foreground
     (.scene-foreground, z7, only on a high horizon). Clouds drift over the top.

   The horizon height is computed in JS (updateExperimentalScene in main.js) so it
   always rides above the lowest castle bottom across every responsive layout;
   --scene-ground-height below is the fallback for pages without castles / before
   JS runs. The scene re-fits on resize, scroll, DOM swap and game-state updates.
   ========================================================================== */

body[data-scene="1"] {
  /* Fallback ground-band height (overridden inline by JS). Measured up from the
     bottom of the viewport; its TOP edge is the horizon. */
  --scene-ground-height: 42vh;

  /* Ground fill below the grass: the grass base colour (sampled from
     cwl_grass.png's bottom edge) so the flat band continues the grass seamlessly
     below the blade tips, which define the horizon edge. */
  --scene-grass-base: #619b56;
  --scene-ground-color: var(--scene-grass-base);

  /* Mountains: the theme-aware rock scene (--bg-mtn-far) scaled to -height and
     pushed DOWN by -sink so its own foreground falls below the horizon (masked by
     the ground band), leaving only the peaks in the sky. */
  --scene-mtn-height: 52vh;
  --scene-mtn-sink: 17vh;

  /* Hills: two true-colour itch.io landscape layers receding back→front — 2.png
     (further) behind 3.png (closer). -height sizes each; -sink is how far the base
     sits below the horizon (bigger = lower on screen / nearer). */
  --scene-hill-mid-img: url("/assets/backgrounds/itchio/1/2.png");
  --scene-hill-mid-height: 22vh;
  --scene-hill-mid-sink: 12vh;

  --scene-hill-near-img: url("/assets/backgrounds/itchio/1/3.png");
  --scene-hill-near-height: 28vh;
  --scene-hill-near-sink: 20vh;

  /* Grass: one image filling bottom→horizon, over-scaled past the screen width
     (-width) so it bleeds off the sides; its top feathers out (-feather) into the
     hills at the horizon. */
  --scene-grass-img: url("/assets/backgrounds/cwl_grass.png");
  --scene-grass-width: 120%;
  --scene-grass-feather: 35%;

  /* Closest foreground (4.png), pinned to the screen bottom — shown only when the
     horizon is high (e.g. mobile portrait) to fill the tall ground. */
  --scene-foreground-img: url("/assets/backgrounds/itchio/1/4.png");

  /* Corner-layout castle scale (see the media query at the bottom). */
  --scene-castle-scale: 1.7;

  /* Ground contact shadow under each castle+wall: -strength darkness, -width
     spread across the base, -y nudge to the contact line. */
  --scene-castle-shadow-strength: 1;
  --scene-castle-shadow-width: 125%;
  --scene-castle-shadow-y: -8px;

  /* Night dimming for the foreground art (grass / hills / foreground). Day =
     none; the dark-theme blocks below switch it on. */
  --scene-night-filter: none;
}

/* Hide the legacy scenery — the old mountain silhouettes (.horizon) and clip-path
   ground strips (.parallax-ground) in clouds.jsx. We draw our own layers below. */
body[data-scene="1"] #background .horizon,
body[data-scene="1"] #background .parallax-ground {
  display: none !important;
}

/* Far mountain range, rising from behind the horizon (theme-aware --bg-mtn-far).
   Sunk below the horizon so its foreground is masked by the ground band; z1 keeps
   it behind the band and the hills. */
body[data-scene="1"] #background::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--scene-ground-height) - var(--scene-mtn-sink));
  height: var(--scene-mtn-height);
  background: var(--bg-mtn-far);
  background-size: auto 100%;
  pointer-events: none;
  z-index: 1;
}

/* Flat ground band filling bottom→horizon in the grass base colour; masks the
   mountains' foreground at the horizon. The whole #background is z-index:-1 in the
   root, so cards/castles/UI stay interactive on top regardless. */
body[data-scene="1"] #background::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--scene-ground-height);
  background: var(--scene-ground-color);
  pointer-events: none;
  z-index: 2;
}

/* These layer elements ship in clouds.jsx on every page; inert unless the scene
   flag turns them on below. */
.scene-hills,
.scene-grass,
.scene-foreground {
  display: none;
}

/* Hills: true-colour itch.io landscape layers, full image height fit into each
   layer box and tiled across x (the art tiles seamlessly), bottom-anchored and
   anchored to the JS horizon. Behind the grass (z4/5 < grass z6). */
body[data-scene="1"] #background .scene-hills {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: auto 100%;
  filter: var(--scene-night-filter);
  pointer-events: none;
}
body[data-scene="1"] #background .scene-hills-mid {
  bottom: calc(var(--scene-ground-height) - var(--scene-hill-mid-sink));
  height: var(--scene-hill-mid-height);
  background-image: var(--scene-hill-mid-img);
  z-index: 4;
}
body[data-scene="1"] #background .scene-hills-near {
  bottom: calc(var(--scene-ground-height) - var(--scene-hill-near-sink));
  height: var(--scene-hill-near-height);
  background-image: var(--scene-hill-near-img);
  z-index: 5;
}

/* Grass: one image filling bottom→horizon, over-scaled past the screen width so
   it bleeds off the sides. Its top feathers to transparent (mask gradient) so it
   dissolves into the hills at the horizon. z6 = in front of the hills. */
body[data-scene="1"] #background .scene-grass {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--scene-ground-height);
  background-image: var(--scene-grass-img);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: var(--scene-grass-width) 100%;
  -webkit-mask-image: linear-gradient(
    to top,
    #000 calc(100% - var(--scene-grass-feather)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to top,
    #000 calc(100% - var(--scene-grass-feather)),
    transparent 100%
  );
  filter: var(--scene-night-filter);
  pointer-events: none;
  z-index: 6;
}

/* Closest foreground (4.png), pinned to the SCREEN BOTTOM (not the horizon).
   Shown only when JS flags a high horizon (data-scene-high-horizon, e.g. mobile
   portrait) to fill the big empty ground. z7 = frontmost. */
body[data-scene="1"][data-scene-high-horizon="1"] #background .scene-foreground {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background-image: var(--scene-foreground-img);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;
  filter: var(--scene-night-filter);
  pointer-events: none;
  z-index: 7;
}

/* --- Night theme -----------------------------------------------------------
   No separate night assets: dim + desaturate the foreground art and darken the
   ground base so the scene reads as moonlit. Keyed on BOTH signals — the in-game
   toggle (html[data-theme="dark"]) and the OS preference (prefers-color-scheme) —
   with an explicit day override so a forced-light toggle wins over a dark OS. */
:root[data-theme="dark"] body[data-scene="1"] {
  --scene-grass-base: #24402a;
  --scene-night-filter: brightness(0.42) saturate(0.62) hue-rotate(6deg);
}
@media (prefers-color-scheme: dark) {
  body[data-scene="1"] {
    --scene-grass-base: #24402a;
    --scene-night-filter: brightness(0.42) saturate(0.62) hue-rotate(6deg);
  }
}
:root[data-theme="light"] body[data-scene="1"] {
  --scene-grass-base: #619b56;
  --scene-night-filter: none;
}

/* Ground contact shadow: a soft, flattened ellipse pooled at the base of the
   castle+wall so they read as standing ON the grass. Drawn as a ::before on
   .castle-and-wall-stacked (position:relative, bases at its bottom via
   align-items:flex-end) at z0, behind the castle/wall shells (z2). It lives inside
   the transformed element, so it scales with the castle in the corner layout. */
body[data-scene="1"] #game .castle-and-wall-stacked::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: var(--scene-castle-shadow-y);
  transform: translateX(-50%);
  width: var(--scene-castle-shadow-width);
  height: 26px;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.38) 45%,
    rgba(0, 0, 0, 0) 75%
  );
  opacity: var(--scene-castle-shadow-strength);
  filter: blur(4px);
  pointer-events: none;
  z-index: 0;
}

/* --- Corner-layout castle scaling ------------------------------------------
   Wide screens (>=1280) in the 821–939px height band — e.g. 1500x900. Here the
   stacked castles otherwise sit small in the bottom corners with dead space out to
   the screen edges (the proven >=940 "big castle" scale-up doesn't reach this
   band). Scale them up anchored at each player's outer-top corner so they fill out
   into the corner. Cards stay above via their own z-index. Active with the scene
   (now default-on); tune via --scene-castle-scale. */
@media (min-width: 1280px) and (min-height: 821px) and (max-height: 939px) {
  body[data-scene="1"] #game .castle-and-wall-stacked {
    margin-bottom: -130px;
  }
  body[data-scene="1"] #game .castle-and-wall-stacked .stacked-wall-shell {
    top: 139px;
    bottom: auto;
  }
  body[data-scene="1"] #game .castle-and-wall-stacked.castle-and-wall-stacked-red {
    transform: translate(-30px, 100px) scale(var(--scene-castle-scale));
    transform-origin: left top;
  }
  body[data-scene="1"] #game .castle-and-wall-stacked.castle-and-wall-stacked-blue {
    transform: translate(30px, 100px) scale(var(--scene-castle-scale));
    transform-origin: right top;
  }
}