/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Cinzel+Decorative:wght@400;700&display=swap');

:root {
  --gates-offset: -40px;
  --ring-color: #a47e3c;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* 4K Cinematic: hide all scrollbars globally — no browser chrome in the void */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }

/* 4K quality: crisp rendering for all images and media */
img, video { image-rendering: high-quality; }

html, body {
  height: 100%;
  background: #050505;
  color: #eaeaea;
  font-family: Georgia, serif; /* default = undertitler / brødtekst */
}

body {
  overscroll-behavior: none;
}

/* No-scroll and 100vh lock: act pages only (do not apply to homepage/intro) */
.page--act,
.page--act-playback,
.page--act-interior,
.page--act-chapter,
.page--act-prelude,
.page--after {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* GUARDRAIL: Act-only scope. Selectors below apply only inside act pages; never to homepage/intro. */
.page--act .act-inner,
.page--act-playback .act-inner,
.page--act-interior .act-inner,
.page--act-chapter .act-inner,
.page--act-prelude .act-inner,
.page--after .act-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(12px, 2vh, 28px);
}

.page--act .act-title,
.page--act-playback .act-title,
.page--act-interior .act-title,
.page--act-chapter .act-title,
.page--act-prelude .act-title,
.page--after .act-title {
  font-size: clamp(34px, 4.2vh, 64px);
  font-weight: 700;
  letter-spacing: 0.30em;
  opacity: 0.92;
  color: var(--ring-color);
}

.page--act .act-subtitle,
.page--act-playback .act-subtitle,
.page--act-interior .act-subtitle,
.page--act-chapter .act-subtitle,
.page--act-prelude .act-subtitle,
.page--after .act-subtitle {
  margin-top: clamp(8px, 1.2vh, 18px);
  font-size: 18px;
  letter-spacing: 0.38em;
  opacity: 0.7;
}

.page--act .act-hint,
.page--act-playback .act-hint,
.page--act-interior .act-hint,
.page--act-chapter .act-hint,
.page--act-prelude .act-hint,
.page--after .act-hint {
  margin-top: 34px;
  font-size: 13px;
  letter-spacing: 0.12em;
  opacity: 0.45;
}

.hidden { display: none !important; }

/* Fullscreen CTA overlay (shown after editions load so all editions get same treatment); does not block interaction; only the button is clickable */
.fullscreen-cta-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.78);
  pointer-events: none;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}

.fullscreen-cta-overlay.hidden {
  display: none !important;
}

.fullscreen-cta-btn {
  pointer-events: auto;
  font-family: Georgia, serif;
  font-size: clamp(14px, 2.5vw, 18px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #a47e3c;
  opacity: 0.95;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5em 1em;
}

.page {
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  position: relative;
}

/* STARTSIDE */
.page--hero {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, #111 0%, #050505 45%, #000 100%);
  overflow: hidden; /* ingen scrolling */
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 12px 18px;
  transition: transform 600ms ease-out;
}

.page--hero.portal-push-in .hero-inner {
  transform: scale(1.02);
}

/* Typografi-regler (punkt 2–4) */
.heading { 
  font-family: "Cinzel Decorative", serif; 
  font-weight: 700;
}

.subheading {
  font-family: Georgia, serif;
  font-weight: 400;
}

/* Lange tekster = Cinzel BOLD */
.longtext{
  font-family: "Cinzel", serif;
  font-weight: 700;
}

/* Tekst over ring: samme avstand */
.hero-text--top .title{
  font-size: 40px;
  letter-spacing: 0.05em;
  opacity: 0.95;
  margin-bottom: 8px;
  text-transform: uppercase;
  color: var(--ring-color);
}

.hero-text--top .subtitle{
  font-size: 18px;
  letter-spacing: 0.22em;
  opacity: 0.7;
  text-transform: uppercase;
}

.hero-text--top {
  margin-bottom: -5vh;
  transform: translateY(3vh);
}

/* Mobile: reduce vh-based compression on short viewports so title/ring/status don't overlap */
@media (max-height: 600px) {
  .hero-text--top {
    margin-bottom: -2vh;
    transform: translateY(1.5vh);
  }
  .status {
    transform: translateY(-6vh);
  }
}

/* Ring */
.ring-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  line-height: 0;
  transition: transform 600ms ease;
  animation: ringPulse 3.5s ease-in-out infinite;
}

.ring-btn:hover { transform: scale(1.02); }

.ring-btn.is-locked {
  opacity: 0.65;
  cursor: default;
  transform: none;
}

.ring-img {
  width: 625px;
  max-width: 86vw;
  height: auto;
  filter: drop-shadow(0 0 46px rgba(255,255,255,0.18));
  transition: filter 600ms ease;
}

.ring-btn:hover .ring-img {
  filter: drop-shadow(0 0 78px rgba(255,255,255,0.28));
}

/* Status */
.status {
  margin-top: 6px;
  font-size: 13px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  transform: translateY(-11vh);
  opacity: 0.75;
  color: #a47e3c;
}

.enter-link {
  display: inline-block;
  margin-top: 1em;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.enter-link:hover {
  opacity: 1;
}

/* SIDE 2 — Act gates (per-act backgrounds; fallback: rename to act1.jpg–act4.jpg if needed) */
.page--act {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #050505;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: clamp(18px, 3vh, 64px) 20px;
}

#act1Gate {
  background-image: url("images/ACT I — BEFORE THE WALLS.jpg");
}
#act2Gate {
  background-image: url("images/ACT II — THE FACES THAT FADED.jpg");
}
#act3Gate {
  background-image: url("images/act3.jpg");
}
#act4Gate {
  background-image: url("images/ACT IV — BEYOND THE SHADOWS.jpg");
}
/* Fallback if filenames with spaces fail: rename to act1.jpg, act2.jpg, act3.jpg, act4.jpg and use those in url() above. */

.page--act::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.page--act .act-inner {
  position: relative;
  z-index: 1;
}

#act3Gate .act-inner {
  transform: translateY(-14px);
}

.page--act.fade-in {
  animation: fadeIn 1s ease-in forwards;
}

/* Deep-link only: gate is clickable to enter playback */
.page--act.deep-link-entry {
  cursor: pointer;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ACT INTERIOR (locked to viewport; no page scroll) */
.page--act-interior {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #000;
  cursor: default;
  position: relative;
}

/* Manifesto Void: bg image permanently suppressed — pure black is the stage */
.page--act-interior .act-interior-bg {
  display: none !important;
}

.page--act-interior .act-interior-overlay {
  display: none !important;
}

.page--act-interior .act-interior-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  padding: clamp(18px, 4vh, 64px) 20px;
  padding-bottom: clamp(100px, 16vh, 140px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.page--act-interior .act-interior-fragment {
  max-width: 600px;
  text-align: center;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.65;
  font-size: clamp(13px, 2vh, 19px);
  padding-top: clamp(6px, 1.5vh, 20px);
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.page--act-interior .intro-line {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 1.2s ease, transform 1.2s ease;
  will-change: opacity, transform;
}

.page--act-interior .intro-line.visible {
  opacity: 1;
  transform: translateY(0);
}

.page--act-interior .manifest-continue-cue {
  position: absolute;
  bottom: clamp(28px, 5vh, 64px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  z-index: 3;
}

.page--act-interior .manifest-cue-text {
  font-family: Georgia, serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  opacity: 0.85;
}

.page--act-interior .manifest-continue-btn {
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #a47e3c;
  font-family: Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 10px 24px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 200ms ease;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 1px 2px rgba(255, 255, 255, 0.1) inset,
    0 -1px 2px rgba(0, 0, 0, 0.8) inset;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.page--act-interior .manifest-continue-btn:hover {
  background: rgba(0, 0, 0, 0.9);
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.6),
    0 1px 2px rgba(255, 255, 255, 0.15) inset,
    0 -1px 2px rgba(0, 0, 0, 0.9) inset;
}

.page--act-interior {
  cursor: default;
}

/* ACT I Tracklist (after intro text, before ACT I Gate) */
.page--act-tracklist {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #000;
  cursor: pointer;
  padding: clamp(18px, 3vh, 64px) 20px;
  box-sizing: border-box;
}

.page--act-tracklist.fade-in {
  animation: fadeIn 1s ease-in forwards;
}

.page--act-tracklist .act-tracklist-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.page--act-tracklist .act-tracklist-title {
  font-size: 52px;
  letter-spacing: 0.30em;
  color: var(--ring-color);
  opacity: 0.92;
  margin-bottom: 0.5em;
}

.page--act-tracklist .act-tracklist-subtitle {
  font-size: 16px;
  letter-spacing: 0.28em;
  color: var(--ring-color);
  opacity: 0.85;
  margin-bottom: 3em;
  text-transform: uppercase;
}

.page--act-tracklist .act-tracklist-tracks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6em;
  list-style: none;
}

.page--act-tracklist .act-track-item {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.12em;
  color: var(--ring-color);
  opacity: 0.88;
  text-transform: none;
}

/* CINEMA MODE */
.cinema-mode {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  height: 100vh;
  height: 100dvh;
}

.cinema-video-container {
  position: relative;
  width: 100%;
  max-width: calc(100vh * 16 / 9);
  height: 100vh;
  height: 100dvh;
  max-height: calc(100vw * 9 / 16);
  background: #000;
}

.cinema-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  will-change: transform;
  transform: translateZ(0);
}

.cinema-controls {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 12px;
  z-index: 1001;
}

.cinema-btn {
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.7);
  color: #a47e3c;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  cursor: pointer;
  font-family: Georgia, serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 200ms ease;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 1px 2px rgba(255, 255, 255, 0.1) inset,
    0 -1px 2px rgba(0, 0, 0, 0.8) inset;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.cinema-btn:hover {
  background: rgba(0, 0, 0, 0.9);
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.6),
    0 1px 2px rgba(255, 255, 255, 0.15) inset,
    0 -1px 2px rgba(0, 0, 0, 0.9) inset;
}

/* Final frontend: hide creator/skip UI from user-facing experience (bypass remains Shift+click / long-press) */
.creator-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Post Manifest Choice Page */
.page--choice {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  background-image: url("images/choice_bg.jpg");
  background-repeat: no-repeat;
  background-position: center 40%;
  background-size: cover;
  padding: clamp(18px, 3vh, 64px) 20px;
  box-sizing: border-box;
}

.page--choice::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center 60%, transparent 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.5) 100%),
              linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.2) 100%);
  pointer-events: none;
}

/* Gates Transition (full-screen, then auto Act 1) */
.page--gates-transition {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  background-image: url("images/choice_bg.jpg");
  background-repeat: no-repeat;
  background-position: center 40%;
  background-size: cover;
  z-index: 90;
  overflow: hidden;
}

/* Gradient overlay removed for all editions so main, frank, kim render with equal sharpness (was only disabled for Kim before) */
.page--gates-transition::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}

.gates-center {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gates-band {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + var(--gates-offset)));
  width: min(1100px, 92vw);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.gates-deboss {
  display: inline-block;
  line-height: 1;
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 4.2vw, 56px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(18, 18, 18, 0.9);
  -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.4);
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.18),
    0 -2px 0 rgba(0, 0, 0, 0.75),
    0 8px 22px rgba(0, 0, 0, 0.45),
    0 0 8px rgba(0, 0, 0, 0.2);
  max-width: 100%;
}

.page--gates-transition.fade-out .gates-deboss {
  animation: gatesDebossOut 1.1s ease-in forwards;
}

@keyframes gatesDebossOut {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}

/* Kim edition: Black gates + debossed gold */
body.edition-kim,
body.edition-kim .app,
body.edition-kim .screen,
body.edition-kim .gates,
body.edition-kim .gates-screen,
html[data-edition="kim"] .page--gates-transition {
  background: #000 !important;
  background-image: none !important;
}

body.edition-kim .gates-title,
body.edition-kim .gates-subtitle,
body.edition-kim .gates-text,
html[data-edition="kim"] .gates-deboss {
  color: #a47e3c;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06),
    0 -1px 0 rgba(0, 0, 0, 0.72);
  letter-spacing: 2px;
  filter: none !important;
}

.page--choice .choice-inner {
  position: relative;
  z-index: 1;
  padding-top: 22vh;
}

.choice-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.6em;
  text-align: center;
}

.choice-link {
  font-family: "Cinzel Decorative", serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #a47e3c;
  text-decoration: none;
  padding: 12px 28px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  transition: border-color 0.2s ease;
}

.choice-link:hover {
  color: #a47e3c;
  border-color: rgba(255, 255, 255, 0.85);
}

/* Act Prelude (typewriter then auto-enter Act Playback) */
.page--act-prelude {
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #050505;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: clamp(18px, 3vh, 64px) 20px;
  box-sizing: border-box;
}

.page--act-prelude.act-prelude--act1 { background-image: url("images/ACT I — BEFORE THE WALLS.jpg"); }
.page--act-prelude.act-prelude--act2 { background-image: url("images/ACT II — THE FACES THAT FADED.jpg"); }
.page--act-prelude.act-prelude--act3 { background-image: url("images/ACT III — THE LIGHTS THAT CARRIED ME.jpg"); }
.page--act-prelude.act-prelude--act4 { background-image: url("images/ACT IV — BEYOND THE SHADOWS.jpg"); }

.page--act-prelude::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.page--act-prelude .act-prelude-inner {
  position: relative;
  z-index: 1;
  max-width: 560px;
  text-align: center;
}

.page--act-prelude .act-prelude-line1 {
  font-family: Georgia, serif;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 1.2em;
}

.page--act-prelude .act-prelude-line2 {
  font-family: "Cinzel Decorative", serif;
  font-size: 18px;
  color: #a47e3c;
  min-height: 1.4em;
  border-right: 2px solid #a47e3c;
  padding-right: 4px;
  display: inline-block;
  animation: actPreludeCaret 0.8s step-end infinite;
}

@keyframes actPreludeCaret {
  0%, 100% { border-color: #a47e3c; }
  50% { border-color: transparent; }
}

/* Act Intro Screen (black screen between acts) */
.page--act-intro {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  padding: 40px 18px;
  z-index: 100;
}

.page--act-intro .act-intro-skip {
  position: absolute;
  top: 20px;
  right: 24px;
  font-family: Georgia, serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a47e3c;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
  z-index: 2;
}

.page--act-intro .act-intro-skip:hover {
  color: #c99a4a;
  border-color: rgba(255, 255, 255, 0.75);
}

.page--act-intro .act-intro-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 24px;
  text-align: center;
}

.page--act-intro .act-intro-title {
  font-family: "Cinzel Decorative", serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #a47e3c;
  margin-bottom: 1.5em;
  line-height: 1.3;
}

.page--act-intro .act-intro-text-wrap {
  position: relative;
  text-align: left;
  min-height: 2em;
}

.page--act-intro .act-intro-text {
  font-family: Georgia, serif;
  font-size: 18px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
  transition: opacity 350ms ease;
}

.page--act-intro .act-intro-caret {
  display: none;
  width: 2px;
  height: 1em;
  background: #a47e3c;
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: actNarrationCaret 0.7s step-end infinite;
}

.page--act-intro .act-intro-text-wrap.is-typing .act-intro-caret {
  display: inline-block;
}

/* Act Playback (full album, one view per act) */
.page--act-playback {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #050505;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: clamp(18px, 3vh, 64px) 20px;
  box-sizing: border-box;
}

.page--act-playback.act-playback--act1 { background-image: url("images/ACT I — BEFORE THE WALLS.jpg"); }
.page--act-playback.act-playback--act2 { background-image: url("images/ACT II — THE FACES THAT FADED.jpg"); }
.page--act-playback.act-playback--act3 { background-image: url("images/act3.jpg"); }
.page--act-playback.act-playback--act4 { background-image: url("images/ACT IV — BEYOND THE SHADOWS.jpg"); }

.page--act-playback::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* Act container: locked portrait stage – same composition on all devices, centered */
.page--act-playback .act-playback-inner.act-container {
  position: relative;
  z-index: 1;
  width: min(100%, 56.25vh);
  height: 100%;
  max-height: 100vh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(10px, 1.5vh, 22px);
  padding: clamp(14px, 2.5vh, 48px) 20px;
  margin: 0 auto;
  font-size: 1.05rem;
  box-sizing: border-box;
}

/* When header/subtitle/narration are faded, collapse their layout space so ring/track/progress/controls sit closer */
body.act-playback-minimal .page--act-playback .act-playback-top.act-header,
body.act-playback-minimal .page--act-playback .act-narration,
body.act-playback-minimal .page--act-playback .act-scroll-overlay,
body.edition-kim.kim-minimal .page--act-playback .act-playback-top.act-header,
body.edition-kim.kim-minimal .page--act-playback .act-narration,
body.edition-kim.kim-minimal .page--act-playback .act-scroll-overlay {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  pointer-events: none;
}

body.act-playback-minimal .page--act-playback .act-playback-inner.act-container,
body.edition-kim.kim-minimal .page--act-playback .act-playback-inner.act-container {
  gap: clamp(8px, 1vh, 16px);
}

.page--act-playback .act-playback-top {
  margin: 0;
  padding: 0;
}

.page--act-playback .act-for {
  display: none;
  font-size: 14px;
  letter-spacing: 6px;
  margin: 0;
  margin-top: 10px;
  color: #a47e3c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 -1px 0 rgba(0, 0, 0, 0.5);
}

.page--act-playback .act-for:not(:empty) {
  display: block;
}

.page--act-playback .act-playback-title.act-title {
  font-size: clamp(34px, 4.2vh, 64px);
  font-weight: 700;
  letter-spacing: 0.30em;
  color: #a47e3c;
  opacity: 0.92;
  margin: 0;
  margin-top: clamp(8px, 1.2vh, 18px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.page--act-playback .act-playback-title.dimmed { opacity: 0.4; }

.page--act-playback .act-playback-subtitle.act-subtitle {
  font-size: 22px;
  letter-spacing: 0.38em;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  margin-top: clamp(8px, 1.2vh, 18px);
  max-width: 100%;
  line-height: 1.6;
  transition: opacity 600ms ease, transform 600ms ease;
}

.page--act-playback .act-playback-subtitle.dimmed { opacity: 0.4; }

.page--act-playback .act-playback-hint {
  font-family: Georgia, serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0.6em;
  margin-bottom: 0;
  transition: opacity 600ms ease, transform 600ms ease;
}

.fade-out {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.page--act-playback .act-playback-hint.fade-out {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 600ms ease, transform 600ms ease;
}

/* Cinematic scroll overlay (Kim edition only) – centered, readable, subtle drift */
.page--act-playback .act-scroll-overlay {
  display: none;
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  width: min(720px, 85vw);
  min-height: 14vh;
  max-height: 22vh;
  text-align: center;
  pointer-events: none;
  contain: layout paint;
  will-change: transform, opacity;
  overflow: hidden;
}

body.edition-kim .page--act-playback .act-scroll-overlay {
  display: block;
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  width: min(720px, 85vw);
  min-height: 14vh;
  max-height: 22vh;
  flex-shrink: 0;
}

body.edition-kim .page--act-playback .act-scroll-overlay.hidden {
  display: none !important;
}

.page--act-playback .act-scroll-mask {
  position: relative;
  height: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

.page--act-playback .act-scroll-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  font-family: Georgia, serif;
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.6;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 -1px 0 rgba(0, 0, 0, 0.8);
  will-change: transform;
  contain: layout paint;
  padding: 0 1em;
  transition: opacity 200ms ease;
  box-sizing: border-box;
}

.page--act-playback .act-scroll-content.fade-out {
  opacity: 0;
}

.page--act-playback .act-scroll-content.act-scroll-drift {
  animation: actScrollDrift 18s ease-in-out forwards;
}

.page--act-playback .act-scroll-content.act-scroll-paused {
  animation-play-state: paused;
}

@keyframes actScrollDrift {
  0% { transform: translate3d(-50%, -50%, 0); opacity: 1; }
  50% { opacity: 1; }
  100% { transform: translate3d(-50%, calc(-50% - 12vh), 0); opacity: 0.88; }
}

.page--act-playback .act-scroll-line {
  margin: 0 0 0.35em 0;
  text-align: center;
}

.page--act-playback .act-scroll-line:last-child {
  margin-bottom: 0;
}

/* Scroll overlay responsive media queries */
@media (max-width: 768px) {
  .page--act-playback .act-scroll-content {
    font-size: clamp(14px, 1.8vw, 20px);
  }
}

@media (max-width: 520px) {
  body.edition-kim .page--act-playback .act-scroll-overlay {
    min-height: 12vh;
    max-height: 20vh;
  }
  
  .page--act-playback .act-scroll-content {
    font-size: clamp(12px, 1.6vw, 18px);
    line-height: 1.5;
  }
  
  .page--act-playback .act-scroll-line {
    margin: 0 0 0.3em 0;
  }
}

/* Kim edition: Act I subtitle gold debossed */
body.edition-kim .page--act-playback .act-playback-subtitle {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 -1px 0 rgba(0, 0, 0, 0.5);
}

/* Global 20s fade: header/subtitle/narration fade out; ring + track + progress + controls stay (no center narration block) */
body.act-playback-minimal .page--act-playback .act-playback-top.act-header,
body.act-playback-minimal .page--act-playback .act-playback-title,
body.act-playback-minimal .page--act-playback .act-playback-subtitle,
body.act-playback-minimal .page--act-playback .act-playback-hint,
body.act-playback-minimal .page--act-playback .act-narration,
body.act-playback-minimal .page--act-playback .act-narration-text,
body.act-playback-minimal .page--act-playback .act-scroll-overlay {
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
}

/* Kim minimal mode: same as global minimal — all text (including scroll overlay) fades */
body.edition-kim.kim-minimal .page--act-playback .act-playback-top.act-header,
body.edition-kim.kim-minimal .page--act-playback .act-playback-title,
body.edition-kim.kim-minimal .page--act-playback .act-playback-subtitle,
body.edition-kim.kim-minimal .page--act-playback .act-playback-hint,
body.edition-kim.kim-minimal .page--act-playback .act-track-name,
body.edition-kim.kim-minimal .page--act-playback .act-narration,
body.edition-kim.kim-minimal .page--act-playback .act-narration-text,
body.edition-kim.kim-minimal .page--act-playback .act-scroll-overlay {
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
}

/* Kim Act I delayed reveal: utility classes (opacity + transition only) */
.kim-reveal-hidden { opacity: 0; pointer-events: none; transition: opacity 900ms ease; }
.kim-reveal-show   { opacity: 1; pointer-events: auto; }

/* Kim Act I: subtitle transition (static → fade out → dynamic in same area) */
.page--act-playback .act-playback-subtitle.kim-subtitle-faded {
  opacity: 0;
  transition: opacity 900ms ease;
  pointer-events: none;
}

/* Cinematic fade-in for dynamic subtitle (no typewriter) */
.page--act-playback .act-playback-subtitle.act-subtitle-cinematic-in {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(6px);
  transition: opacity 1.2s ease, transform 1.2s ease, filter 1.2s ease;
  pointer-events: none;
}
.page--act-playback .act-playback-subtitle.act-subtitle-cinematic-in.act-subtitle-cinematic-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Global music text: subtitle area only; lower narration not used for playback text */
.page--act-playback.act-playback-subtitle-only .act-narration {
  visibility: hidden;
  pointer-events: none;
  min-height: 0;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* Kim Act I: same (kept for specificity if needed) */
.page--act-playback.act-playback-kim-act1 .act-narration {
  visibility: hidden;
  pointer-events: none;
  min-height: 0;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* ── Kim Cinematic Rute (single fixed point for all three phases) ──────────── */
.page--act-playback .universal-cinematic-rute {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(640px, 88vw);
  text-align: center;
  pointer-events: none;
  z-index: 30;
}

.page--act-playback .rute-phase {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
  line-height: 1.7;
  will-change: opacity;
  transform: translateZ(0);
}
.page--act-playback .rute-phase.visible { opacity: 1; }

.page--act-playback .rute-act-label {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(10px, 1vw, 13px);
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 0.9em;
}

.page--act-playback .rute-dedication {
  font-family: Georgia, serif;
  font-size: clamp(24px, 3.5vw, 42px);
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 -1px 0 rgba(0,0,0,0.5);
}

.page--act-playback .rute-white {
  font-family: Georgia, serif;
  font-size: clamp(17px, 2.2vw, 26px);
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 -1px 0 rgba(0,0,0,0.6);
  padding: 0 0.5em;
}

/* Gold Cinzel phase — elegant reflection text */
.page--act-playback .rute-gold {
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(14px, 1.8vw, 22px);
  font-weight: 400;
  letter-spacing: 0.09em;
  color: #c4973e;
  text-shadow: 0 0 24px rgba(196, 151, 62, 0.45), 0 1px 0 rgba(0,0,0,0.7);
  line-height: 1.9;
  padding: 0 0.5em;
}

/* UI suppression: hide ring/header/trackbar/controls during Kim intro (0–12s) */
body.cinematic-intro-active .page--act-playback .act-ring,
body.cinematic-intro-active .page--act-playback .act-sigil--playback,
body.cinematic-intro-active .page--act-playback .act-for,
body.cinematic-intro-active .page--act-playback .act-playback-top,
body.cinematic-intro-active .page--act-playback .act-playback-trackbar,
body.cinematic-intro-active .page--act-playback .act-playback-controls,
body.cinematic-intro-active .page--act-playback .act-narration {
  opacity: 0 !important;
  transition: opacity 800ms ease !important;
  pointer-events: none !important;
}

/* cinematic-rute-active: keep header + track name hidden for the entire rute sequence (0–21.5s) */
/* trackbar/controls reappear at 12s when cinematic-intro-active is removed — intentional */
/* track name fades in at 21.5s when cinematic-rute-active is removed */
body.cinematic-rute-active .page--act-playback .act-playback-top {
  opacity: 0 !important;
  pointer-events: none !important;
}
body.cinematic-rute-active .page--act-playback .act-ring,
body.cinematic-rute-active .page--act-playback .act-sigil--playback,
body.cinematic-rute-active .page--act-playback .act-for {
  opacity: 0 !important;
  pointer-events: none !important;
}
body.cinematic-rute-active .page--act-playback .act-track-name,
body.cinematic-rute-active .page--act-playback .act-playback-controls {
  opacity: 0 !important;
  transition: opacity 800ms ease !important;
  pointer-events: none !important;
}

/* Universal Cinematic Standard: all text flows through #universalCinematicRute */
/* Legacy text areas and status bar are globally hidden — Zero-UI Cinematic Experience */
.page--act-playback .act-playback-top,
.page--act-playback .act-narration,
.page--act-playback .act-scroll-overlay,
.page--act-playback .act-progress-wrap,
.page--act-playback .act-progress-bar,
.page--act-playback .act-playback-missing {
  display: none !important;
}

.page--act-playback .act-playback-trackbar {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
}

/* Hero composition: Cinzel song title — elegant centerpiece beneath the ring */
.page--act-playback .act-track-name,
.page--act-playback .act-track-name.now-playing-title {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 400;
  font-size: clamp(15px, 2.2vh, 26px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(196, 160, 90, 0.92);
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
  transition: opacity 900ms ease;
}

.page--act-playback .act-track-name.act-track-name-enter {
  opacity: 0;
}

.page--act-playback .act-playback-missing.hidden { display: none !important; }
.page--act-playback .act-playback-missing { font-size: 13px; color: rgba(255,255,255,0.6); margin-bottom: 0.5em; }

.page--act-playback .act-progress-wrap {
  width: 100%;
  max-width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.18);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 4px;
}

.page--act-playback .act-progress-bar {
  height: 100%;
  width: 0%;
  background: rgba(164, 126, 60, 0.9);
  transition: width 100ms linear;
  border-radius: 4px;
}

.page--act-playback .act-narration {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto 2em;
  min-height: 3em;
  text-align: center;
}

.page--act-playback .act-narration-text {
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  transition: opacity 350ms ease;
}

.page--act-playback .act-narration-caret {
  display: none;
  width: 2px;
  height: 1em;
  background: #a47e3c;
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: actNarrationCaret 0.7s step-end infinite;
}

.page--act-playback .act-narration.is-typing .act-narration-caret {
  display: inline-block;
}

.page--act-playback .act-narration-caret.hidden { display: none !important; }

/* Act sigil/ring: gate pages and playback only (never homepage) */
.page--act .act-sigil,
.page--act-playback .act-sigil {
  display: block;
  width: 92px;
  height: auto;
  margin: 22px auto 0 auto;
  opacity: 0.55;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
  pointer-events: none;
  user-select: none;
}

.page--act-playback .act-sigil--playback {
  opacity: 0.6;
  animation: sigilBreath 5.2s ease-in-out infinite;
}

.page--act-playback .act-sigil--playback,
.page--act-playback .act-ring {
  transition: transform 900ms ease, opacity 900ms ease;
  will-change: transform;
}

.page--act-playback .act-ring {
  width: clamp(200px, 30vh, 380px);
  height: clamp(200px, 30vh, 380px);
  object-fit: contain;
  margin: 0;
  margin-bottom: 8px;
}

body.edition-kim .page--act-playback .act-sigil--playback.act-ring {
  animation: none; /* suppressed during gates/intro — replaced by ring-pulse in hero-mode */
}

/* Kim hero-mode: ring pulses with golden breathing glow after cinematic intro clears */
body.edition-kim.hero-mode .page--act-playback .act-ring {
  animation: ring-pulse 5s ease-in-out infinite;
  transition: opacity 900ms ease; /* drop transform transition — animation handles it */
}

body.edition-kim.kim-minimal .page--act-playback .act-ring,
body.edition-kim.kim-minimal .page--act-playback .act-sigil--playback,
body.act-playback-minimal .page--act-playback .act-ring,
body.act-playback-minimal .page--act-playback .act-sigil--playback {
  transform: scale(1.16);
  transition: transform 1.8s ease, opacity 900ms ease;
}

@keyframes sigilBreath {
  0%, 100% { transform: translateY(0); opacity: 0.58; }
  50% { transform: translateY(-3px); opacity: 0.68; }
}

/* Kim exclusive: breathing ring — slow pulse with golden glow */
@keyframes ring-pulse {
  0%, 100% {
    transform: scale(1.0);
    filter: brightness(1) drop-shadow(0 0 6px rgba(196, 160, 90, 0));
  }
  50% {
    transform: scale(1.05);
    filter: brightness(1.06) drop-shadow(0 0 22px rgba(196, 160, 90, 0.32));
  }
}

/* Frank edition: static ring — no rotation, no scale. Metallic shadow breathes subtly. */
body.edition-frank .page--act-playback .act-sigil--playback.act-ring,
body.edition-frank .page--act-playback .act-ring {
  animation: frank-ring-pulse 12s ease-in-out infinite;
  transform: none;
}
body.edition-frank.hero-mode .page--act-playback .act-ring {
  animation: frank-ring-pulse 12s ease-in-out infinite;
  transition: opacity 900ms ease;
}
@keyframes frank-ring-pulse {
  0%, 100% { filter: drop-shadow(0 2px 8px rgba(0,0,0,0.95)) drop-shadow(0 0 8px rgba(200,210,220,0.18)); }
  50%       { filter: drop-shadow(0 2px 14px rgba(0,0,0,0.98)) drop-shadow(0 0 24px rgba(200,210,220,0.42)); }
}

/* Frank manifesto: hide continue cue — auto-proceeds after 15s hold */
body.edition-frank .page--act-interior .manifest-continue-cue {
  display: none !important;
}

/* Frank manifesto centering: fragment must not grow — let the flex parent center it.
   Remove the CTA-reserved bottom padding since the button is hidden for Frank. */
body.edition-frank .page--act-interior .act-interior-inner {
  padding-bottom: clamp(18px, 4vh, 64px);
}
body.edition-frank .page--act-interior .act-interior-fragment {
  flex: 0 0 auto;
  text-shadow: 0 2px 12px rgba(164, 126, 60, 0.6), 0 0 28px rgba(164, 126, 60, 0.25);
}

/* Frank finale overlay: full-screen image reveal at t=40s */
.finale-overlay {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  opacity: 0;
  transition: opacity 1.4s ease;
  pointer-events: none;
}
.finale-overlay.visible {
  opacity: 1;
}
.finale-overlay.hidden {
  display: none;
}
.finale-overlay-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 520px) {
  .page--act .act-sigil { width: 78px; }
  .page--act-playback .act-sigil--playback.act-ring {
    width: clamp(160px, 20vh, 280px);
    height: clamp(160px, 20vh, 280px);
  }
}

@keyframes actNarrationCaret {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.page--act-playback .act-playback-controls {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.5vh, 18px);
  margin-top: clamp(10px, 1.5vh, 20px);
  justify-content: center;
  align-items: center;
  max-width: 100%;
  width: min(100%, 22em);
}

.page--act-playback .act-playback-btn {
  font-family: Georgia, serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a47e3c;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  padding: 12px 18px;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.15s ease, filter 0.15s ease;
}

@media (max-width: 520px) {
  .page--act-playback .act-playback-btn { padding: 10px 14px; font-size: 12px; }
}

.page--act-playback .act-playback-btn:hover {
  border-color: rgba(255, 255, 255, 0.85);
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.page--act-playback .act-playback-btn:active {
  transform: translateY(1px);
  filter: brightness(0.95);
}

/* Hero Mode: controls float at bottom, out of flex flow — ring+title stay perfectly centered */
body.hero-mode .page--act-playback .act-playback-controls {
  position: absolute;
  bottom: clamp(24px, 4vh, 60px);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  width: max-content;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease;
}
body.hero-mode.controls-peek .page--act-playback .act-playback-controls {
  opacity: 0.65;
  pointer-events: auto;
  transition: opacity 300ms ease;
}

/* Hero composition: ring enlarged to ~50% stage; title locked beneath it */
body.hero-mode .page--act-playback .act-ring {
  width: clamp(260px, 42vh, 520px);
  height: clamp(260px, 42vh, 520px);
}
body.hero-mode .page--act-playback .act-playback-trackbar {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
body.hero-mode .page--act-playback .act-track-name,
body.hero-mode .page--act-playback .act-track-name.now-playing-title {
  font-size: clamp(16px, 2.8vh, 30px);
  letter-spacing: 0.22em;
  text-align: center;
  max-width: 90%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* Act chapter screens */
.page--act-chapter {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #050505;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: clamp(18px, 3vh, 64px) 20px;
  box-sizing: border-box;
}

#act1Chapter { background-image: url("images/ACT I — BEFORE THE WALLS.jpg"); }
#act2Chapter { background-image: url("images/ACT II — THE FACES THAT FADED.jpg"); }
#act3Chapter { background-image: url("images/ACT III — THE LIGHTS THAT CARRIED ME.jpg"); }
#act4Chapter { background-image: url("images/ACT IV — BEYOND THE SHADOWS.jpg"); }

.page--act-chapter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.page--act-chapter .act-chapter-inner {
  position: relative;
  z-index: 1;
  max-width: 560px;
  text-align: center;
}

.page--act-chapter .act-chapter-order-text {
  font-family: Georgia, serif;
  font-size: 17px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2em;
}

.page--act-chapter .act-chapter-btn {
  font-family: "Cinzel Decorative", serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #a47e3c;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  padding: 12px 28px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.page--act-chapter .act-chapter-btn:hover {
  border-color: rgba(255, 255, 255, 0.85);
}

.page--act-chapter .act-track-player {
  margin-top: 2em;
}

.page--act-chapter .act-track-player.hidden {
  display: none !important;
}

.page--act-chapter .act-track-current {
  font-family: "Cinzel Decorative", serif;
  font-size: 18px;
  color: #a47e3c;
  margin-bottom: 1em;
}

.page--act-chapter .act-track-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.page--act-chapter .act-track-ctrl {
  font-family: Georgia, serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 8px 16px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.page--act-chapter .act-track-ctrl:hover {
  border-color: rgba(255, 255, 255, 0.7);
}

.page--act-chapter .act-track-next-act.hidden {
  display: none !important;
}

/* After the story */
.page--after {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  padding: clamp(18px, 3vh, 64px) 20px;
  box-sizing: border-box;
}

.page--after .after-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8em;
  text-align: center;
}

.page--after .after-title {
  font-family: "Cinzel Decorative", serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.28em;
  color: #a47e3c;
  margin-bottom: 0.5em;
}

.page--after .after-link {
  font-family: "Cinzel Decorative", serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.2em;
  color: #a47e3c;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.55);
  padding: 12px 24px;
  transition: border-color 0.2s ease;
}

.page--after .after-link:hover {
  border-color: rgba(255, 255, 255, 0.85);
}

.page--after .after-btn {
  background: transparent;
  cursor: pointer;
}

@keyframes ringPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* -------------------------------------------------------------------------- */
/* Responsive hardening: small viewports (phones / short-height screens)      */
/* -------------------------------------------------------------------------- */

@media (max-height: 720px) {
  /* Manifesto Void: no scrolling at any viewport — content scales via clamp() */
  /* Tracklist and after-story screens: scroll-safe on short viewports */
  .page--act-tracklist {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-y: auto;
  }
}

@media (max-width: 600px) {
  /* On narrow phones, let the act playback container use full width so text
     and controls do not feel overly cramped while preserving portrait staging
     on larger screens. */
  .page--act-playback .act-playback-inner.act-container {
    width: 100%;
    max-width: 100%;
  }
}

/* -------------------------------------------------------------------------- */
/* Mobile responsiveness: narrow screens, portrait video, safe-area, 100dvh   */
/* -------------------------------------------------------------------------- */

/* ACT gate subtitle: fluid size and tighter letter-spacing on narrow so long lines (e.g. ACT III) wrap readably */
@media (max-width: 480px) {
  .page--act .act-subtitle {
    font-size: clamp(14px, 3.5vw, 18px);
    letter-spacing: 0.28em;
  }
  .page--act {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Playback subtitle: fluid size on narrow for dynamic copy (main/Kim/Frank) */
@media (max-width: 480px) {
  .page--act-playback .act-playback-subtitle.act-subtitle {
    font-size: clamp(16px, 4vw, 22px);
    letter-spacing: 0.28em;
  }
}

/* Manifest fragment: slightly smaller font on very narrow to reduce line count and CTA overlap risk */
@media (max-width: 380px) {
  .page--act-interior .act-interior-fragment {
    font-size: 1.1rem;
  }
}

/* Kim Act I scroll overlay: more vertical space on short viewports so copy is readable */
@media (max-height: 700px) {
  .page--act-playback .act-scroll-overlay,
  body.edition-kim .page--act-playback .act-scroll-overlay {
    min-height: 18vh;
    max-height: 28vh;
  }
}

/* Cinema video: portrait mobile – use full viewport height so video is not a thin strip (object-fit: contain letterboxes horizontally) */
@media (orientation: portrait) and (max-width: 768px) {
  .cinema-video-container {
    height: 100vh;
    height: 100dvh;
    max-height: none;
    width: 100%;
    max-width: 100%;
  }
}

/* Tracklist title: fluid size on narrow so it does not dominate or overflow */
@media (max-width: 600px) {
  .page--act-tracklist .act-tracklist-title {
    font-size: clamp(28px, 8vw, 52px);
  }
}

/* Landscape/short: playback container full width when 56.25vh would squeeze the column */
@media (max-height: 500px) and (orientation: landscape) {
  .page--act-playback .act-playback-inner.act-container {
    width: 100%;
    max-width: 100%;
  }
}

/* -------------------------------------------------------------------------- */
/* Mobile landscape: preferred cinematic 16:9 video (main / kim / frank)      */
/* -------------------------------------------------------------------------- */

/* Cinema: in landscape on mobile/small tablet, fill width with 16:9 height so video uses full screen */
@media (orientation: landscape) and (max-height: 700px) {
  .cinema-mode {
    height: 100vh;
    height: 100dvh;
  }
  .cinema-video-container {
    width: 100%;
    max-width: 100%;
    height: 56.25vw;
    max-height: 100vh;
    max-height: 100dvh;
  }
  .cinema-video {
    object-fit: contain;
  }
}