/* scene.css — agent-mutable.
 *
 * Layout and component styles for the cozy cabin scene. Day 0: hand-placed
 * sprite cabin from Sprout Lands tilesets, a few trees, a bush, all sitting
 * on a sage-green meadow under a warm cream dawn sky. The agent evolves
 * this from here — adds tappable items, a path, a mailbox, weather, etc. */

#cabin-scene {
  display: block;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-4) var(--gutter) var(--sp-3);
}

#cabin-nav {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-2) var(--gutter);
  display: flex;
  gap: var(--sp-5);
  font-family: var(--font-pixel);
  font-size: var(--fs-marker);
}

#cabin-nav a {
  display: inline-flex;
  align-items: center;
  color: var(--c-wood-dark);
}

@media (prefers-color-scheme: dark) {
  #cabin-nav a { color: var(--c-cream); }
}

#cabin-nav a[aria-current="page"] {
  color: var(--c-plum);
  border-bottom: 2px solid var(--c-rose);
}

#day-marker {
  width: 100%;
  max-width: var(--content-max);
  margin: var(--sp-3) auto var(--sp-6);
  padding: var(--sp-2) var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--fg-muted);
}

#build-sha-label {
  opacity: 0.55;
  font-size: var(--fs-tiny);
  font-family: var(--font-mono);
}

/* The scene viewport — a square-ish frame containing the cabin world. */
.scene {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 4px solid var(--c-wood-dark);
  border-radius: 6px;
  box-shadow: var(--shadow-frame);
  overflow: hidden;
  background: var(--c-sky-light);
}

.scene__sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--c-sky-light) 0%,
    var(--c-sky-mid) 55%,
    var(--c-sky-mid) 60%
  );
  pointer-events: none;
}

.scene__ground {
  position: absolute;
  inset: 60% 0 0 0;
  background: linear-gradient(
    to bottom,
    var(--c-grass-light) 0%,
    var(--c-grass) 30%,
    var(--c-grass) 100%
  );
  border-top: 2px solid var(--c-grass-shadow);
  pointer-events: none;
}

/* All sprites: integer-scale, no smoothing, positioned absolutely. */
.sprite {
  position: absolute;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
}

/* Cabin: 48×80 native, scaled 3x = 144×240. Centered, sitting on the ground line. */
.sprite--cabin {
  width: calc(48px * 3);
  height: calc(80px * 3);
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  z-index: 2;
}

/* Tree (medium) — 28×33 native, scaled 3x. Sitting to the left of the cabin. */
.sprite--tree {
  width: calc(28px * 3);
  height: calc(33px * 3);
  z-index: 1;
}
.sprite--tree-left {
  left: 4%;
  bottom: 14%;
}

/* Small tree on the right. */
.sprite--tree-small {
  width: calc(15px * 3);
  height: calc(33px * 3);
  z-index: 1;
}
.sprite--tree-right {
  right: 6%;
  bottom: 18%;
}

/* Bush — 32×28 native, scaled 2.5x. Front-right corner. */
.sprite--bush {
  width: calc(32px * 2.5);
  height: calc(28px * 2.5);
  right: 22%;
  bottom: 4%;
  z-index: 3;
}

/* Smoke from the chimney. Three small pixel-art puffs rising on
 * staggered timers, drawn from scratch — a single 6x6 px block plus
 * box-shadow neighbours forms a four-block puff cluster. White against
 * the warm cream sky for contrast. The container anchors above the
 * cabin chimney; tweak `bottom`/`left` if the cabin moves. */
.sprite--smoke {
  width: 6px;
  height: 78px;
  /* Chimney cap sits roughly above cabin centre at 3x scale. Cabin top
   * is at scene-bottom + 6% + 240px; chimney cap is ~12px below that. */
  left: 50%;
  bottom: calc(6% + 228px);
  margin-left: -3px;
  z-index: 3;
}

.smoke-puff {
  position: absolute;
  display: block;
  width: 6px;
  height: 6px;
  background: #fff8ec;
  opacity: 0;
  bottom: 0;
  left: 0;
  /* Pixel-art cluster: the puff plus three neighbouring pixel blocks
   * make a chunky 12x12 cloud while keeping integer pixel edges. */
  box-shadow:
     6px  0   0 #fff8ec,
     0   -6px 0 #fff8ec,
     6px -6px 0 #fdeed0;
  animation: smoke-rise 4.5s linear infinite;
}
.smoke-puff--1 { animation-delay: 0s;    left:  0px;  }
.smoke-puff--2 { animation-delay: 1.5s;  left: -4px;  }
.smoke-puff--3 { animation-delay: 3.0s;  left:  4px;  }

@keyframes smoke-rise {
  0%   { transform: translateY(0)     scale(0.7); opacity: 0;    }
  12%  {                                           opacity: 0.95; }
  60%  {                                           opacity: 0.55; }
  100% { transform: translateY(-72px) scale(1.3); opacity: 0;    }
}

/* Footpath: five pixel-art stepping stones emerging from behind the
 * cabin's right (east) side and descending diagonally to exit the
 * scene at the bottom-right corner. The front face of the cabin is a
 * window, not a door (see messages/open/2026-05-11-door-or-window.md)
 * — the door lives on the cabin's east face, visible in the around
 * view, and this front-view path is the same path seen from a
 * different angle.
 *
 * Cross-view geometry (RULES.md Article XIII): the path leaves the
 * around-view door heading east (toward the around-view viewer) and
 * curves south, exiting the around view at its bottom-left. The same
 * path, seen from the front, emerges around the cabin's right-side
 * silhouette and sweeps south-east, exiting bottom-right here.
 *
 * The back stone sits at mid-cabin-height pressed against the right
 * wall, mostly occluded by the cabin (which has higher z-index): only
 * its outer few pixels poke out, which is the load-bearing detail
 * telling the viewer "the path comes from behind here, not from in
 * front of the window." From there, four more stones step diagonally
 * toward the bottom-right exit. Day 8 shipped three stones along this
 * trajectory and a fresh look read as scattered objects rather than a
 * path; Day 9 added the two intermediate stones to make the path-
 * reading unambiguous.
 *
 * Stones drawn from scratch — each is a small earth-brown rectangle
 * with a one-pixel darker band below for depth. They grow toward the
 * viewer so the path reads as receding off into the unseen behind. */
.sprite--path {
  inset: 0;
  z-index: 1;
}

.path-stone {
  position: absolute;
  display: block;
  background: #c19465;
  /* One-pixel darker band below each stone, stamped via box-shadow. */
  box-shadow: 0 1px 0 #6e4a3a;
}
/* Stone 1 (back) — pressed against cabin's right edge at mid-cabin-
 * height, mostly hidden behind the cabin (cabin is at left: 50%, width
 * 144px at 3x, so its right edge is at 50% + 72px). Stone spans
 * 50%+65 to 50%+79, so ~7px of it sticks out past the cabin's
 * silhouette. */
.path-stone--1 { width: 14px; height: 4px; bottom: calc(6% + 100px); left: calc(50% + 65px); }
/* Stone 2 (between back and mid) — fully visible just past the
 * cabin's right edge, stepping down and slightly right. */
.path-stone--2 { width: 18px; height: 4px; bottom: calc(6% + 72px);  left: calc(50% + 80px); }
/* Stone 3 (mid) — well right of the cabin, mid-air between cabin's
 * foot and the bottom of the scene. */
.path-stone--3 { width: 22px; height: 4px; bottom: calc(6% + 42px);  left: calc(50% + 98px); }
/* Stone 4 (between mid and front) — closer to viewer, still on the
 * grass strip below the cabin. */
.path-stone--4 { width: 27px; height: 5px; bottom: calc(6% + 10px);  left: calc(50% + 118px); }
/* Stone 5 (front) — at the scene's bottom edge, exiting right partly
 * off-frame. */
.path-stone--5 { width: 32px; height: 5px; bottom: 0;                left: calc(50% + 132px); }

/* Mobile narrow: scale down to 2x for 320–379 px viewports. */
@media (max-width: 379px) {
  .sprite--cabin       { width: calc(48px * 2); height: calc(80px * 2); bottom: 8%; }
  .sprite--tree        { width: calc(28px * 2); height: calc(33px * 2); }
  .sprite--tree-small  { width: calc(15px * 2); height: calc(33px * 2); }
  .sprite--smoke       { bottom: calc(8% + 152px); }
  /* Path stones rebased to the 2x cabin (96×160, foot at 8%, right edge
   * at 50% + 48px). Stone widths/heights stay constant — pixel art needs
   * its minimum-feature-width to stay legible at the smaller scale. */
  .path-stone--1       { bottom: calc(8% + 70px); left: calc(50% + 41px); height: 3px; }
  .path-stone--2       { bottom: calc(8% + 50px); left: calc(50% + 53px); height: 3px; }
  .path-stone--3       { bottom: calc(8% + 28px); left: calc(50% + 66px); }
  .path-stone--4       { bottom: calc(8% + 8px);  left: calc(50% + 80px); }
  .path-stone--5       { bottom: 0;               left: calc(50% + 92px); }
}