/* Staged scenes: characters stand ON the floor painted in the arena art.
 *
 * Every arena render is square, with its walkable floor in the lower part of
 * the image. A staged section draws the art full width and pinned to the
 * bottom (so its height equals the section width), which puts the floor in
 * the bottom band of the section at every screen size. Actors stand --depth
 * of the way into that band, so their feet always land on painted stone, and a
 * contact shadow grounds them.
 *
 *   <section class="scene staged" style="--art:url(/assets/art-arena/temple.webp); --floor:.38">
 *     ...copy...
 *     <div class="floor"><span class="actor"><span class="sprite" style="--pb:16;..."></span></span></div>
 *   </section>
 *
 * --floor  height of the floor band as a fraction of the art (1 − where the floor starts).
 *          fire .36 · throne .45 · temple .38 · colosseum .43 · castle .40 · bone .32 · widow .30
 * --depth  how far into the floor the feet stand: 0 = front edge, 1 = back wall. Default .3.
 * --pb/--pl/--pr on the sprite: empty pixel rows under the feet and columns at the sides (union bbox
 *          of all frames), so the feet touch the floor and the box hugs the art.
 * --stage-h  the tallest actor's visible height; the section pads itself so copy never sits behind it.
 * Widths use vw because the art is sized to the section, and staged sections are full bleed. */

.scene.staged {
  --depth: 0.3;
  --feet: calc(var(--floor, 0.36) * var(--depth) * 100vw);
  background:
    linear-gradient(180deg, var(--night) 0, var(--night) calc(100% - 100vw), rgba(13, 15, 23, 0) calc(100% - 72vw)),
    var(--art) center bottom / 100% auto no-repeat,
    var(--night);
}
/* Lighter at the floor than the stock scrim, so the ground the actors stand on reads as ground. */
.scene.staged::before {
  background: linear-gradient(180deg, rgba(13, 15, 23, 0.82) 0%, rgba(13, 15, 23, 0.74) 50%, rgba(13, 15, 23, 0.28) 82%, rgba(13, 15, 23, 0.4) 100%);
}
.scene.scene-left.staged::before {
  background:
    linear-gradient(180deg, rgba(13, 15, 23, 0) 60%, rgba(13, 15, 23, 0.35) 100%),
    linear-gradient(90deg, rgba(13, 15, 23, 0.92) 0%, rgba(13, 15, 23, 0.66) 50%, rgba(13, 15, 23, 0.18) 100%);
}

.floor {
  position: absolute; left: 0; right: 0; bottom: var(--feet); z-index: 0;
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none;
}
.actor { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-end; }
/* Trim the sprite frame's empty columns and rows (--pl/--pr/--pb, sprite pixels) so the box hugs the art. */
.actor .sprite {
  margin: 0 calc(var(--pr, 0) * var(--s) * -1px) calc(var(--pb, 0) * var(--s) * -1px) calc(var(--pl, 0) * var(--s) * -1px);
}
/* Contact shadow on the floor, under the feet. --hover lifts a floating foe off its shadow. */
.actor::after {
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: -7px;
  width: 78%; height: 18px; translate: -50% 0;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
}
.actor.hover .sprite { translate: 0 calc(var(--hover, 20px) * -1); }
/* Dark sprites (the Lord of Flames) read as holes in a dark floor. .rim adds a warm glow around the
 * silhouette's alpha edge only; the sprite pixels themselves are not blurred, so they stay crisp. */
.sprite.rim {
  filter: drop-shadow(0 0 1px rgba(255, 186, 110, 0.9)) drop-shadow(0 0 9px rgba(255, 112, 40, 0.5));
}
.actor.hover::after { width: 60%; opacity: 0.7; }