/* ---- DOM MODE ----
 * the butterfly, souls, and scenes when nothing opens a window.
 * fonts + vars come from index.css (same :root).
 * scene layer rules are scoped copies of it.css / butterfly.css so
 * nothing leaks into the world or popup mode.
 */

/* dev panel — clickable preview controls (both modes, when Config.debug) */
#dev-panel {
  position: fixed;
  top: 40px;   /* clear of the top-right corner coords */
  right: 16px;
  bottom: 16px;   /* full page height; body fills and scrolls */
  z-index: 10001;   /* topmost — above scene takeover (1000) and warp overlay (9999) */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;   /* the stretched shell must not eat world clicks */
  font-family: monospace;
  font-size: 0.7rem;
  letter-spacing: 1px;
  color: rgba(0, 0, 0, 0.7);
  text-align: right;
  user-select: none;
  -webkit-user-select: none;
}
#dev-toggle {
  display: inline-block;
  cursor: pointer;
  pointer-events: auto;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.35);
  color: #000;
}
#dev-toggle:hover {
  background: #000;
  color: #fff;
}
#dev-body {
  display: none;
  pointer-events: auto;
  margin-top: 6px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  text-align: left;
  min-width: 210px;
  max-width: 240px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
#dev-panel.open #dev-body {
  display: block;
}

/* In debug mode, backslash toggles a clean presentation view. The controls
   and readouts disappear, while the world itself keeps running unchanged. */
body.debug-clean #dev-panel,
body.debug-clean [id^="dbg-"],
body.debug-clean #hud,
body.debug-clean .debug-hitbox,
body.debug-clean .fx-zone-marker {
  display: none !important;
}

/* live status readout */
#dev-status {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 8px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  opacity: 0.65;
}
#dev-status span { white-space: nowrap; }

/* flags + story sections */
.dev-section {
  margin: 8px 0;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.dev-head {
  opacity: 0.5;
  margin-bottom: 4px;
  cursor: pointer;
}
.dev-head::before { content: "▸ "; }
.dev-section.open .dev-head::before { content: "▾ "; }
.dev-head:hover { opacity: 1; }
.dev-sec-body { display: none; }
.dev-section.open .dev-sec-body { display: block; }

/* fx lab — per-effect parameter workbench */
.dev-fx { margin: 4px 0 8px; }
.dev-fx-head {
  display: flex;
  align-items: center;
  gap: 4px;
}
.dev-fx-name {
  flex: 1;
  color: #000;
  cursor: pointer;
}
.dev-fx-note { opacity: 0.35; }
/* group header in the overlay toggle row — breaks each cluster onto its
   own line (weather, life, …) */
.dev-fx-group {
  display: block;
  width: 100%;
  margin: 6px 0 2px;
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  opacity: 0.4;
}
.dev-fx-group:first-child { margin-top: 0; }
.dev-fx-head button {
  padding: 0 5px;
  font-size: 0.65rem;
}
.dev-fx-params {
  display: none;
  margin: 4px 0 0 10px;
}
.dev-fx.open .dev-fx-params { display: block; }
.dev-param {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px 0;
}
.dev-param-k {
  opacity: 0.5;
  min-width: 52px;
}
.dev-param.touched .dev-param-k {
  opacity: 1;
  color: #000;
}
.dev-param input[type=range] {
  flex: 1;
  min-width: 0;
  accent-color: #000;
}
.dev-param-v {
  min-width: 4ch;
  text-align: right;
  opacity: 0.7;
}
.dev-param .dev-param-t { flex: 1; width: auto; }
#dev-flags, #dev-story {
  max-height: 22vh;
  overflow-y: auto;
}
.dev-empty { opacity: 0.35; }

.dev-flag, .dev-beat {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 1px 0;
}
.dev-flag-k { color: #000; }
.dev-flag-v {
  flex: 1;
  opacity: 0.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dev-beat-id {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dev-beat.fired .dev-beat-id { opacity: 0.4; }
.dev-flag button, .dev-beat button {
  padding: 0 5px;
  font-size: 0.65rem;
}
.dev-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
  flex-wrap: wrap;
}
.dev-label {
  opacity: 0.5;
  min-width: 36px;
}
#dev-panel button {
  all: unset;
  cursor: pointer;
  padding: 2px 7px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.55);
}
#dev-panel button:hover {
  color: #000;
  border-color: rgba(0, 0, 0, 0.4);
}
#dev-panel button.current {
  color: #000;
  border-color: rgba(0, 0, 0, 0.6);
}
#dev-panel input[type=text] {
  width: 48px;
  font: inherit;
  color: inherit;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  outline: none;
  background: transparent;
  padding: 2px;
}
#dev-panel select {
  font: inherit;
  max-width: 145px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #fff;
  color: rgba(0, 0, 0, 0.6);
}
#dev-panel label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
#dev-speed-val {
  cursor: pointer;
  min-width: 3.5ch;
  text-align: center;
}

/* landing toggle — hidden for now; delete this display line to bring it back */
#landing-mode {
  display: none;
  cursor: pointer;
  text-decoration: underline;
  opacity: 0.6;
}
#landing-mode:hover {
  opacity: 1;
}

/* ---- butterfly ---- */
#butterfly-dom {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 300;
  pointer-events: none;
}
#butterfly-dom img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

#butterfly-sparkles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 301;
}

/* ---- soul followers ---- */
.soul-dom {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 298;
  pointer-events: none;
  /* opacity only — the translate() is frame-driven, so it must not transition */
  transition: opacity .5s ease;
}
.soul-dom img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  /* tint eases in; rotation stays a per-frame snap (stop-motion feel) */
  transition: filter .4s ease;
}

/* ---- scene takeover ---- */
#scene-takeover {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg, #fff);
  font-family: var(--bodyFont), monospace;
  cursor: pointer;
  overflow: hidden;
}
#scene-takeover.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* clear scenes — the world stays visible behind the text (butterflyMarch) */
#scene-takeover.clear {
  background: transparent;
}
#scene-takeover.clear #dream {
  display: none;
}

/* dream layers — scoped port of it.css */
#scene-takeover #dream {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.2);
  transform-origin: center center;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

#scene-takeover .img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
}
#scene-takeover img:not([src]),
#scene-takeover img[src=""] {
  display: none;
}

#scene-takeover #tint {
  z-index: 100;
  pointer-events: none;
  mix-blend-mode: overlay;
}
#scene-takeover #decor {
  z-index: 200;
  pointer-events: none;
}
#scene-takeover #aboveground {
  z-index: 3;
}
#scene-takeover #foreground {
  z-index: 1;
}
#scene-takeover #foreground img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
#scene-takeover #background {
  z-index: 0;
}
#scene-takeover #background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* placed objects — images positioned in percent of the frame (ctx.objects).
   above the backdrop layers, below the tint/decor/text, so the tint washes
   over them like the rest of the scene */
#scene-takeover #scene-objects {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}
#scene-takeover #scene-objects img {
  image-rendering: pixelated;
}

/* text layer for scenes that use the Text API directly */
#scene-takeover #text {
  position: absolute;
  z-index: 250;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.5rem;
  color: var(--text, #000);
  font-size: 1.25rem;
  line-height: 120%;
  text-align: center;
  mix-blend-mode: difference;
  pointer-events: none;
}
#scene-takeover #text .wrapper {
  text-align: center;
  padding: 0.25rem;
}

/* step text — scoped port of butterfly.css scene overlay */
#scene-takeover #scene-text {
  position: relative;
  z-index: 500;
  background: #fff;
  padding: 0.35rem 0.75rem;
  opacity: 0;
  transition: opacity 0.4s ease;
  max-width: 90%;
}
#scene-takeover #scene-text.visible {
  opacity: 1;
}

#scene-takeover #scene-hint {
  position: absolute;
  z-index: 500;
  bottom: 10px;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.3;
}