/* The pixel-art scene: the homepage hero. One fixed-aspect stage, full width; every layer inside
   it is positioned in percentages of the 1600 × 700 scene, so artwork and hotspots always line up. */

.scene { position: relative; }

.scene-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #f1c9a8; /* shows while the art loads */
}

/* The scene art is high-resolution pixel art exported for this size, so scale it smoothly */
.scene-bg,
.scene-prop {
  image-rendering: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.scene-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.scene-prop { position: absolute; display: block; object-fit: contain; object-position: bottom; pointer-events: none; transition: filter 0.15s, transform 0.15s; }
/* One highlight for every way a destination can be "chosen": hovered, keyboard-focused, or the
   avatar standing at it. The nook lifts slightly and glows like its lanterns. */
.scene-prop.lit,
.scene-prop.near { filter: brightness(1.08) drop-shadow(0 0 12px rgba(255, 210, 120, 0.8)); transform: translateY(-1.5%); }

.avatar { position: absolute; pointer-events: none; z-index: 1; }
/* The front walls come after the avatar at the same level, so they're drawn over his legs */
.scene-front { z-index: 1; pointer-events: none; }
.avatar-sprite {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  filter: drop-shadow(0 6px 4px rgba(40, 20, 10, 0.3));
}
/* One layer per animation strip, all loaded up front; only the current one is shown. Swapping a
   single element's image instead can leave him invisible for a frame while it's drawn. */
.avatar-strip {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  /* The sprite is high-resolution art, so scale it smoothly (pixelated scaling would make it jagged) */
  image-rendering: auto;
  visibility: hidden;
}
.avatar-strip.current { visibility: visible; }
.avatar-sprite.facing-left { transform: scaleX(-1); } /* only used when there's no left-facing strip */

/* ---------- Hotspots: invisible links over each nook (the nook's own sign labels it) ---------- */
.hotspot {
  position: absolute;
  z-index: 2;
  border-radius: 12px;
  text-decoration: none;
}
.hotspot:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Compact tag for phones: sits just above its nook, within the nook's width
   (long names wrap onto two lines), so the four tags never overlap each other or the art. */
.hotspot-tag { display: none; }

@media (max-width: 760px) {
  .hotspot-tag {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translate(-50%, -3px);
    width: max-content;
    max-width: 100%;
    padding: 3px 6px;
    border: 2px solid #5a3418;
    border-radius: 3px;
    background: linear-gradient(180deg, #c98d50, #a8693a);
    color: #fff6e2;
    font: 700 clamp(10px, 2.9vw, 12px) / 1.05 var(--font);
    text-align: center;
    text-shadow: 0 1px 0 #5a3418;
    box-shadow: 0 2px 0 #3d2410;
  }
  .hotspot:hover .hotspot-tag,
  .hotspot:focus-visible .hotspot-tag,
  .hotspot:active .hotspot-tag,
  .hotspot[aria-current="true"] .hotspot-tag { filter: brightness(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .scene-prop { transition: none; }
}

/* ---------- Avatar movement (desktop, while the scene has focus) ---------- */
.scene-stage.playable { cursor: pointer; }
.scene-stage:focus { outline: none; }
/* Inset ring, so it's never cut off at the edges of the full-width scene */
.scene-stage.playable:focus-visible,
.scene-stage.playable:focus { box-shadow: inset 0 0 0 4px var(--focus); }

/* "Enter: Work" above the avatar's head */
.avatar-prompt {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  padding: 0.35em 0.65em;
  border: 2px solid #5a3418;
  border-radius: 6px;
  background: #fffaf0;
  color: var(--ink);
  font: 700 clamp(12px, 1.1vw, 15px) / 1 var(--font);
  white-space: nowrap;
  box-shadow: 0 3px 0 #3d2410;
}
.avatar-prompt kbd { font: inherit; padding: 0.1em 0.35em; border-radius: 3px; background: var(--ink); color: #fff; }
/* Only worth showing when the keyboard can act on it */
.scene-stage:not(:focus) .avatar-prompt { display: none; }

/* How to walk: one line when idle, the full controls once the scene has focus.
   Top-right, because the intro sits over the top-left. */
.scene-hint {
  position: absolute;
  z-index: 3;
  right: 1.5%;
  top: 3%;
  margin: 0;
  padding: 0.45em 0.8em;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 252, 245, 0.92);
  color: var(--ink);
  font: 600 clamp(12px, 1vw, 14px) / 1.3 var(--font);
  box-shadow: var(--shadow);
  pointer-events: none;
}
.scene-hint kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 0.35em;
  border: 1px solid #cfc4b4;
  border-radius: 4px;
  background: #fff;
  font: inherit;
  text-align: center;
}
.hint-active { display: none; }
.scene-stage:focus .hint-idle { display: none; }
.scene-stage:focus .hint-active { display: inline; }
.scene-stage:not(.playable) .scene-hint { display: none; }

/* ---------- ?guides: art-slot outlines and measurements, shown at 1:1 ---------- */
.show-guides .scene-stage { width: 1600px; max-width: none; }
.show-guides .scene-hint { display: none; }
.show-guides .hero .intro { display: none; }
.show-guides .hero::before { display: none; }
.scene-guides { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.guide { position: absolute; outline: 2px dashed #00e5ff; background: rgba(0, 229, 255, 0.08); }
.guide span {
  position: absolute;
  left: 0;
  bottom: 0; /* inside the box, so the signposts above stay visible */
  padding: 2px 6px;
  background: #00e5ff;
  color: #001014;
  font: 700 12px / 1.3 Inter, sans-serif;
  white-space: nowrap;
}
.guide-avatar { outline-color: #ff4fd8; background: rgba(255, 79, 216, 0.1); }
.guide-avatar span { background: #ff4fd8; color: #fff; top: 100%; bottom: auto; }
.guide-line { outline: none; border-top: 2px dashed #ffe14d; background: none; }
.guide-line span { background: #ffe14d; left: auto; right: 0; top: 4px; bottom: auto; }