:root {
  --text: #fff4dc;
  --muted: rgba(255, 244, 220, .72);
  --line: rgba(255, 244, 220, .3);
  --s1: 8px; --s2: 16px;
}
html, body { margin: 0; height: 100%; overflow: hidden; background: #f0a25a; }
body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.player { z-index: 1; }
.player__credit { margin: 0; }

.scene { position: fixed; inset: 0; overflow: hidden; display: block; }

/* js/index.js lifts the sky out of the stage: it covers the viewport on its own, anchored bottom. */
.scene > .layer--sky { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }

/* 815x640 reference space (assets/layout.json); js/index.js scales it so the cloud top keeps a 5% margin. */
.stage { position: absolute; left: 0; top: 0; width: 815px; height: 640px; transform-origin: 0 0; }

.layer { position: absolute; left: 0; top: 0; }
.layer img { position: absolute; display: block; }

.layer--cloud { left: 130px; top: 30px; width: 580px; height: 248px; will-change: transform; }
.cloud { left: 0; top: 0; width: 580px; height: 248px; }
.rain { position: absolute; left: 85px; top: 170px; width: 385px; height: 340px; }

.layer--ground { width: 815px; height: 640px; }
.foreground { left: 0; top: 505px; width: 814px; height: 135px; }
/* Water past the foreground's edges on wide screens: its 2px edge columns stretched
   3000px outwards (border-image side slices), so the seam is pixel-continuous. */
.layer--ground::before {
  content: ''; position: absolute; left: -3000px; top: 505px; width: 814px; height: 135px;
  border: solid transparent; border-width: 0 3000px;
  border-image: url(../assets/foreground.webp) 0 2 0 2 / 0 3000px stretch;
}
.umbrella { left: 270px; top: 320px; width: 235px; height: 230px; }
.fox { left: 302px; top: 390px; width: 148px; height: 168px; }