/* THE VILLAGE, in the game's own clothes: the same page colours, the same
   strip along the bottom, the same pixel letters, and a canvas scaled by whole
   numbers with nearest neighbour so it belongs to the same world as the room. */

#island {
  display: flex;
  flex-direction: column;
  height: 100svh;
  background: var(--ink);
}

#title { display: grid; place-items: center; padding: 10px 0 4px; }
#title canvas { image-rendering: pixelated; }

#stage {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0 12px;
}

#village {
  image-rendering: pixelated;
  width: min(100%, calc((100svh - 190px) * 480 / 300));
  max-width: 100%;
  aspect-ratio: 480 / 300;
  border-radius: 14px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--fg) 14%, transparent),
              0 18px 50px rgba(0, 0, 0, 0.45);
  touch-action: none;
  cursor: grab;
}
#village:active { cursor: grabbing; }

/* the sign over a door, in the game's letters */
#label {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 18px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--strip) 92%, transparent);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
  text-align: center;
  pointer-events: none;
}
#label canvas { image-rendering: pixelated; }
#label span { font-size: 12px; color: color-mix(in srgb, var(--fg) 60%, transparent); }
#label i { font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: 0.08em; color: color-mix(in srgb, var(--fg) 40%, transparent); }