/* 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; }

/* The canvas is taken OUT OF FLOW. Its size is set in script from this box, so
   while it was in flow the two fed each other: a taller canvas grew the stage,
   which grew the page past 100svh, which clipped the title off the top and
   pushed the strip off the bottom. Absolute means the canvas can never change
   the box it is measured against. */
#stage {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 0 12px;
  overflow: hidden;
}

#village {
  image-rendering: pixelated;
  /* the size is set in script: fit() picks the largest box that divides
     exactly by the zoom, so the pixels stay square at every step */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  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); }

/* THE PREMISE, on a first visit. Pip landed here and cannot speak yet: that is
   the whole reason a child walks to a door, so it is said once, in four lines,
   with the drawing doing most of the work. */
#hello {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  backdrop-filter: blur(2px);
  z-index: 3;
}
#hello canvas { image-rendering: pixelated; }
#hello > canvas:first-child { width: 128px; height: 112px; }
#hello p {
  margin: 0;
  max-width: 34ch;
  font-size: 14px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--fg) 82%, transparent);
}
#hello button {
  border: 0;
  border-radius: 999px;
  padding: 11px 22px;
  font: inherit;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  color: var(--ink);
  background: var(--accent, #ffd93d);
}

/* the canvas takes focus so an embedded island hears the arrow keys, but it
   should not draw a focus ring round the whole world when it does */
#village:focus { outline: none; }
#village:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* COMING SOON, inside a frame. The island is playable in the proposal page, but
   a door that navigated would walk the frame off the demo and strand whoever is
   reading on another page with no way back. */
#soon {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: blur(2px);
  z-index: 4;
}
#soon canvas { image-rendering: pixelated; }
#soon p { margin: 0; font-size: 14px; color: color-mix(in srgb, var(--fg) 70%, transparent); }
#soon .soon {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
#soon button {
  margin-top: 6px;
  border: 0;
  border-radius: 999px;
  padding: 11px 22px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  color: var(--ink);
  background: var(--accent);
}