/* ==========================================================================
   Star Letter — Expansion refinements
   V2 legibility, shared controls, progress rail, reading chrome and new canvas shells.
   ========================================================================== */

/* ==========================================================================
   V2 EXPANSION — more scenes, more ceremony, same Midnight Observatory.
   Kept as a second block so the verified four-act foundation stays intact.
   ========================================================================== */

/* ---------- Legibility & proportion refinements ---------- */
.masthead__label .lat { font-size: clamp(10px, 0.95vw, 11px); }
.masthead__label .cn { font-size: clamp(10px, 0.95vw, 11px); }

.heart-copy { margin-top: clamp(104px, 14.3vh, 146px); }
.heart-title { font-size: clamp(26px, 3.45vw, 46px); letter-spacing: 0.085em; }
.heart-sub {
  font-size: 12px;
  letter-spacing: 0.48em;
  color: rgba(255, 188, 204, 0.82);
}
.heart-bpm {
  margin: 11px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-latin);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: rgba(255, 217, 160, 0.82);
}
.heart-bpm > span:last-child {
  font-size: 9px;
  letter-spacing: 0.24em;
  color: rgba(255, 217, 160, 0.48);
}
.bpm-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff9fbe;
  box-shadow: 0 0 10px rgba(255, 122, 168, 0.8);
  animation: bpmPulse 1.2s ease-in-out infinite;
}

.poem-line.is-past { opacity: 0.42; }

.prologue-foot {
  font-size: 11.5px;
  letter-spacing: 0.15em;
  color: rgba(230, 220, 255, 0.58);
}
.prologue-foot .foot-alt { color: rgba(230, 220, 255, 0.44); }
.prologue-foot .foot-dot { color: rgba(255, 217, 160, 0.65); }

.dodge-hint {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: rgba(230, 220, 255, 0.56);
}

.question-actions .dodge-slot {
  transition: width 0.6s var(--ease-out), opacity 0.35s ease;
}
.question-actions.is-solo { column-gap: 0; }
.question-actions.is-solo .dodge-slot {
  width: 0 !important;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
}

/* ---------- Fixes for the retired secondary composition ---------- */
.heart-action { z-index: 3; }

/* ---------- Shared small controls for the new acts ---------- */
.scene-skip,
.scene-advance {
  position: absolute;
  z-index: 3;
  left: 50%;
  transform: translateX(-50%);
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  background: transparent;
  color: rgba(255, 236, 212, 0.58);
  font-family: var(--font-serif);
  font-size: 11.5px;
  letter-spacing: 0.24em;
  cursor: pointer;
  transition: color 0.3s ease, opacity 0.3s ease;
}

.scene-skip::after,
.scene-advance::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 9px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 217, 160, 0.4), transparent);
  transition: background 0.3s ease;
}

.scene-skip:hover,
.scene-advance:hover { color: #ffe4bc; }

.scene-advance { bottom: calc(env(safe-area-inset-bottom) + clamp(82px, 11vh, 112px)); }

.scene-advance.is-ready {
  color: #ffe4bc;
  border: 1px solid rgba(255, 217, 160, 0.38);
  border-radius: 2px;
  padding: 10px 24px;
  background: rgba(255, 217, 160, 0.055);
  box-shadow: 0 0 34px rgba(255, 217, 160, 0.1);
}

.scene-advance.is-ready::after { display: none; }

.skip-poem {
  position: absolute;
  z-index: 3;
  left: var(--pad-x);
  bottom: calc(env(safe-area-inset-bottom) + 48px);
  min-height: 44px;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: rgba(230, 220, 255, 0.38);
  font-family: var(--font-serif);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.6s ease, color 0.3s ease, visibility 0s 0.6s, transform 0.6s ease;
}

.skip-poem.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.6s ease, color 0.3s ease, visibility 0s, transform 0.6s ease;
}

.skip-poem:hover { color: rgba(255, 231, 197, 0.8); }

/* ---------- Progress rail ---------- */
.progress-rail {
  position: fixed;
  z-index: 6;
  left: clamp(14px, 1.9vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: none;
  transition: opacity 1.2s ease;
}

.progress-rail::before {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 217, 160, 0.16), transparent);
}

.progress-dot {
  position: relative;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 247, 240, 0.22);
  transition: background 0.5s ease, width 0.5s ease, height 0.5s ease, box-shadow 0.5s ease;
}

.progress-dot.is-done { background: rgba(255, 217, 160, 0.55); }

.progress-dot.is-current {
  width: 7px;
  height: 7px;
  background: #ffe4b8;
  box-shadow: 0 0 13px rgba(255, 217, 160, 0.7);
}

body[data-scene="dawn"] .progress-dot,
body[data-scene="finale"] .progress-dot {
  background: rgba(5, 6, 15, 0.28);
}
body[data-scene="dawn"] .progress-dot.is-done,
body[data-scene="finale"] .progress-dot.is-done { background: rgba(5, 6, 15, 0.55); }
body[data-scene="dawn"] .progress-dot.is-current,
body[data-scene="finale"] .progress-dot.is-current {
  background: #4b202a;
  box-shadow: 0 0 10px rgba(74, 32, 40, 0.3);
}

/* ---------- Mobile reading chrome for dawn/finale ---------- */
.chrome-scrim {
  position: fixed;
  z-index: 8;
  top: 0;
  left: 0;
  right: 0;
  height: calc(env(safe-area-inset-top) + 64px);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: rgba(19, 10, 22, 0.9);
  border-bottom: 1px solid rgba(255, 236, 214, 0.08);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: opacity 0.8s ease, visibility 0s 0.8s;
}

.chrome-scrim__label {
  position: absolute;
  left: 18px;
  top: calc(env(safe-area-inset-top) + 18px);
  font-family: var(--font-latin);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: rgba(255, 236, 214, 0.5);
}

body[data-scene="dawn"] .chrome-scrim,
body[data-scene="finale"] .chrome-scrim {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease, visibility 0s;
}

@media (min-width: 901px) {
  .chrome-scrim { display: none; }
}

/* ---------- New full-screen layers ---------- */
#finale-bg {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2.2s ease;
  background:
    radial-gradient(ellipse 64% 22% at 50% 104%, rgba(255, 171, 116, 0.55), rgba(255, 171, 116, 0.12) 45%, transparent 72%),
    radial-gradient(ellipse 40% 28% at 82% 82%, rgba(255, 122, 168, 0.12), transparent 70%),
    linear-gradient(180deg, #050611 0%, #0a0a1e 34%, #19102e 68%, #34172d 100%);
}

body[data-scene="finale"] #finale-bg { opacity: 1; }
body[data-scene="finale"] #sky-canvas { opacity: 0.55; }
body[data-scene="finale"] .masthead,
body[data-scene="finale"] .side-rail { opacity: 0; }
body[data-scene="finale"] .moon-wrap { opacity: 0.16; }
body[data-scene="finale"] .vignette { opacity: 0.82; }
body[data-scene="finale"] .aurora { opacity: 0; }
body[data-scene="wishes"] .aurora { opacity: 0.6; }
body[data-scene="chronicle"] .aurora { opacity: 0.52; }
body[data-scene="cover"] .aurora { opacity: 0.28; }

#cosmos-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
#cosmos-canvas.is-live { opacity: 1; }

#celebration-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

#wipe-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  pointer-events: none;
}

.music-toggle { z-index: 10; }