/* FRENTE CENA 21 — fonte visual única do Pergaminho da Cena. */
.scene-canonical-story,
.scene-exploration-story-panel.scene-exploration-overlay {
  --story-title-font: "Palatino Linotype","Book Antiqua",Georgia,serif;
  --story-body-font: Georgia,"Times New Roman",serif;
  --story-ink: #241914;
  --story-accent: #68251f;
  --story-ink-speed: .8s;
  --story-body-line: 1.30;
  --story-paragraph-gap: .32em;
  position: fixed !important;
  top: var(--story-runtime-top,50%) !important;
  left: var(--story-runtime-left,50vw) !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%,-50%) !important;
  z-index: 150 !important;
  display: flex;
  flex-direction: column;
  width: var(--story-runtime-width,499px) !important;
  height: var(--story-runtime-height,690px) !important;
  max-width: calc(100vw - 28px) !important;
  max-height: calc(100dvh - 28px) !important;
  overflow: hidden !important;
  border: 1px solid rgba(69,48,31,.48) !important;
  border-radius: 16px !important;
  background: linear-gradient(rgba(245,232,196,.06),rgba(110,80,47,.07)),
    url("/assets/story-themes/corvamar-parchment-v1.jpg") center/100% 100% no-repeat !important;
  color: var(--story-ink) !important;
  box-shadow: 0 24px 70px rgba(22,15,11,.48),0 0 0 1px rgba(255,244,213,.25) inset !important;
  isolation: isolate;
}
.scene-canonical-story[hidden],
.scene-exploration-story-panel[hidden],
[data-scene-story-root][hidden] { display:none !important; }

.scene-canonical-story::before,
.scene-exploration-story-panel.scene-exploration-overlay::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:6% 25% 7% 5%;
  pointer-events:none;
  background:radial-gradient(ellipse at 43% 42%,rgba(249,238,209,.90) 0,rgba(241,226,190,.76) 52%,rgba(229,205,161,.24) 80%,transparent 100%);
  filter:blur(4px);
}

.scene-canonical-story > header,
.scene-exploration-story-panel.scene-exploration-overlay > header {
  position:relative !important;
  z-index:4 !important;
  flex:0 0 auto;
  display:block;
  padding:11% 30% 0 9% !important;
  border:0 !important;
  background:transparent !important;
  backdrop-filter:none !important;
  text-align:center;
}
.scene-canonical-story > header span,
.scene-exploration-story-panel > header span {
  color:var(--story-accent) !important;
  font:800 .59rem/1 Arial,sans-serif !important;
  letter-spacing:.17em !important;
}
.scene-canonical-story > header h4,
.scene-exploration-story-panel > header h4 {
  margin:.35rem 0 0 !important;
  color:#241914 !important;
  font-family:var(--story-title-font) !important;
  font-size:1.55rem !important;
  line-height:1.12 !important;
  text-shadow:none !important;
}
.scene-canonical-story > header button,
.scene-exploration-story-panel > header button {
  position:absolute !important;
  top:16px;
  right:16px;
  width:34px !important;
  height:34px !important;
  border:1px solid rgba(73,47,30,.42) !important;
  border-radius:50% !important;
  background:rgba(239,224,190,.82) !important;
  color:#4d2d25 !important;
  box-shadow:0 4px 14px rgba(43,28,20,.15);
}
.scene-canonical-story__body,
.scene-exploration-story-panel .scene-exploration-story-copy {
  position:relative;
  z-index:2;
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:4% 30% 11% 9% !important;
  background:transparent !important;
  scrollbar-color:rgba(92,63,42,.5) transparent;
}
.scene-canonical-story__body h5,
.scene-exploration-story-panel .scene-exploration-story-copy h5 {
  margin:0 0 1rem !important;
  color:var(--story-accent) !important;
  font:700 1.15rem/1.18 var(--story-title-font) !important;
  text-align:center;
  letter-spacing:.02em !important;
  text-shadow:none !important;
}
.scene-canonical-story .scene-rich-content,
.scene-exploration-story-panel .scene-rich-content {
  color:var(--story-ink) !important;
  font-family:var(--story-body-font) !important;
  font-size:1rem !important;
  font-weight:500 !important;
  line-height:var(--story-body-line) !important;
  letter-spacing:.004em;
  text-align:justify;
  text-justify:inter-word;
  text-align-last:left;
  hyphens:auto;
  overflow-wrap:break-word;
  text-shadow:none !important;
  text-rendering:optimizeLegibility;
}
.scene-exploration-story-panel .scene-exploration-story-copy p {
  color:var(--story-ink) !important;
  font-family:var(--story-body-font) !important;
  font-size:inherit !important;
  font-weight:500 !important;
  line-height:var(--story-body-line) !important;
  text-shadow:none !important;
}
.scene-canonical-story .scene-rich-content p,
.scene-canonical-story .scene-rich-content div,
.scene-exploration-story-panel .scene-rich-content p,
.scene-exploration-story-panel .scene-rich-content div {
  margin:0 0 var(--story-paragraph-gap) !important;
}
.scene-canonical-story .scene-rich-content > :last-child,
.scene-exploration-story-panel .scene-rich-content > :last-child {
  margin-bottom:0 !important;
}
.scene-story-dropcap {
  float:left;
  margin:.07em .10em 0 0;
  color:var(--story-accent);
  font:700 3.65em/.72 var(--story-title-font);
  text-shadow:1px 1px rgba(255,236,196,.45);
}
.scene-canonical-story footer,
.scene-exploration-story-panel > footer { display:none !important; }

.scene-canonical-story:not(.scene-story-needs-scroll) .scene-canonical-story__body,
.scene-exploration-story-panel:not(.scene-story-needs-scroll) .scene-exploration-story-copy {
  scrollbar-width:none;
}
.scene-canonical-story:not(.scene-story-needs-scroll) .scene-canonical-story__body::-webkit-scrollbar,
.scene-exploration-story-panel:not(.scene-story-needs-scroll) .scene-exploration-story-copy::-webkit-scrollbar {
  display:none;
}

@keyframes sceneStoryInkReveal {
  0% { opacity:0; filter:blur(3px); transform:translateY(5px); }
  45% { opacity:.62; filter:blur(1.2px); }
  100% { opacity:1; filter:blur(0); transform:none; }
}
.scene-canonical-story:not([hidden]) .scene-rich-content > *,
.scene-exploration-story-panel:not([hidden]) .scene-rich-content > * {
  opacity:0;
  animation:sceneStoryInkReveal var(--story-ink-speed) ease-out forwards;
}
.scene-canonical-story:not([hidden]) .scene-rich-content > :nth-child(1),
.scene-exploration-story-panel:not([hidden]) .scene-rich-content > :nth-child(1) { animation-delay:.08s; }
.scene-canonical-story:not([hidden]) .scene-rich-content > :nth-child(2),
.scene-exploration-story-panel:not([hidden]) .scene-rich-content > :nth-child(2) { animation-delay:.24s; }
.scene-canonical-story:not([hidden]) .scene-rich-content > :nth-child(3),
.scene-exploration-story-panel:not([hidden]) .scene-rich-content > :nth-child(3) { animation-delay:.40s; }
.scene-canonical-story:not([hidden]) .scene-rich-content > :nth-child(n+4),
.scene-exploration-story-panel:not([hidden]) .scene-rich-content > :nth-child(n+4) { animation-delay:.56s; }

@media (max-width:600px) {
  .scene-canonical-story,
  .scene-exploration-story-panel.scene-exploration-overlay {
    border-radius:12px !important;
  }
  .scene-canonical-story::before,
  .scene-exploration-story-panel.scene-exploration-overlay::before {
    inset:5% 5% 6%;
    background:radial-gradient(ellipse at 45% 40%,rgba(247,235,203,.90),rgba(239,222,184,.76) 60%,rgba(229,205,161,.30) 85%,transparent);
  }
  .scene-canonical-story > header,
  .scene-exploration-story-panel > header {
    padding:12% 11% 0 !important;
  }
  .scene-canonical-story__body,
  .scene-exploration-story-panel .scene-exploration-story-copy {
    padding:4% 11% 11% !important;
  }
  .scene-canonical-story .scene-rich-content,
  .scene-exploration-story-panel .scene-rich-content {
    font-size:.91rem !important;
    line-height:1.34 !important;
  }
}
@media (prefers-reduced-motion:reduce) {
  .scene-canonical-story .scene-rich-content > *,
  .scene-exploration-story-panel .scene-rich-content > * {
    animation:none !important;
    opacity:1 !important;
    filter:none !important;
    transform:none !important;
  }
}

/* FRENTE CENA 21 — player local da narração do Pergaminho. */
.scene-story-narration-controls {
  box-sizing:border-box;
  position:absolute;
  z-index:6;
  top:7.4%;
  left:5.6%;
  display:grid;
  grid-template-columns:repeat(2,24px);
  grid-template-areas:
    "status status"
    "play stop";
  align-items:center;
  justify-items:center;
  justify-content:center;
  gap:3px 4px;
  width:66px;
  min-height:0;
  margin:0;
  padding:4px;
  border:1px solid rgba(93,58,38,.22);
  border-radius:10px;
  background:rgba(242,225,187,.76);
  box-shadow:0 3px 10px rgba(54,35,23,.10);
}
.scene-story-narration-controls button {
  box-sizing:border-box;
  display:grid;
  place-items:center;
  width:24px;
  min-width:24px;
  max-width:24px;
  height:24px;
  min-height:24px;
  max-height:24px;
  aspect-ratio:1 / 1;
  padding:0;
  margin:0;
  line-height:1;
  border:1px solid rgba(93,58,38,.42);
  border-radius:50%;
  background:rgba(246,231,195,.90);
  color:#5e2a24;
  font:700 .82rem/1 Arial,sans-serif;
  box-shadow:0 2px 7px rgba(54,35,23,.10);
  cursor:pointer;
}
.scene-story-narration-controls button:hover { background:rgba(251,239,208,.96); }
.scene-story-narration-controls span {
  grid-area:status;
  width:100%;
  min-width:0;
  overflow:hidden;
  color:#765548;
  font:700 .50rem/1.15 Arial,sans-serif;
  text-align:center;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.scene-story-narration-controls [data-scene-story-narration-play] { grid-area:play; }
.scene-story-narration-controls [data-scene-story-narration-stop] { grid-area:stop; }
.scene-story-narration-controls button svg {
  display:block;
  width:10px;
  height:10px;
  margin:0;
  fill:currentColor;
  pointer-events:none;
}
@media (max-width:600px) {
  .scene-story-narration-controls { top:6.8%; left:5%; width:62px; grid-template-columns:repeat(2,22px); }
  .scene-story-narration-controls button {
    width:22px;
    min-width:22px;
    max-width:22px;
    height:22px;
    min-height:22px;
    max-height:22px;
    aspect-ratio:1 / 1;
    font-size:.62rem;
  }
  .scene-story-narration-controls span { font-size:.48rem; }
}
/* Narração: a barra acompanha o currentTime sem interpolação paralela do navegador. */
.scene-story-narration-autoscroll {
  scroll-behavior:auto !important;
  overscroll-behavior:contain;
}