/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── Root variables ─────────────────────────────────────── */
:root {
  --stage-width:  900px;
  --stage-height: 506px; /* 16:9 */
  --duration-scene: 20s;
}

/* ─── Page ───────────────────────────────────────────────── */
html, body {
  width: 100%;
  height: 100%;
  background: #0a0a0a;
  overflow: hidden;
  font-family: 'Georgia', serif;
  /* Stage is positioned absolutely by JS — no flex needed */
  position: relative;
}

/* ─── Stage ──────────────────────────────────────────────── */
/* Internal coordinate system is always 900 × 506.
   JS scales the whole stage to fit any viewport via
   transform: scale() — all animation values stay in px. */
#stage {
  position: absolute;
  width:  var(--stage-width);
  height: var(--stage-height);
  overflow: hidden;
  background: #fff;
  transform-origin: top left;
  /* JS sets top / left / transform at runtime */
}

/* ─── Scene base ─────────────────────────────────────────── */
.scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  overflow: hidden; /* prevent SVG overflow from leaking into other scenes */
}

.scene.active {
  opacity: 1;
}

/* ─── Dialogue bubble ────────────────────────────────────── */
.dialogue {
  position: absolute;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 15px;
  line-height: 1.5;
  max-width: 220px;
  opacity: 0;
  transform: translateY(6px);
  color: #1a1a1a;
}

.dialogue::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 20px;
  border: 10px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.92);
  border-bottom: 0;
}