/* Every spoken beat belongs to the same illustrated room. */
.comic-reader { container-type: inline-size; --frame-width: 100cqw; background: #0c1524; color: #f5edf2; }
.comic-reader .comic-panel { background: #0c1524; }
.comic-reader .comic-panel::after { content: ''; position: absolute; pointer-events: none; inset: 0; background: linear-gradient(#0c152430, transparent 15%, transparent 85%, #0c1524); }
.comic-reader .comic-panel .speech, .comic-reader .panel-sfx { z-index: 2; }
.episode-intro { background: linear-gradient(#141622,#0c1524); padding-bottom: 0; }
.episode-intro .reader-demo { margin-bottom: 28px; }
.episode-star { margin-top: 28px; margin-bottom: 20px; }
.first-narration { font-size: 14px; }

.comic-reader .comic-gutter, .comic-reader .comic-gutter.small {
  min-height: 0;
  padding: 30px 20px 32px;
  background: #0c1524;
}
.comic-reader .narration { color: #c7c4d4; font-size: 14px; line-height: 1.9; }
.comic-reader .reading-panel { border-bottom: 2px solid #0c1524; }
.comic-reader .dialogue-sequence, .comic-reader .closing-dialogue {
  padding: 0;
  margin: 0;
  background: #0c1524;
}
.story-sequence { display: block; }
.story-frame {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  min-height: var(--frame-width);
  overflow: hidden;
  background: #0c1524;
}
.story-art { position: absolute; z-index: -2; inset: 0; background-repeat: no-repeat; background-size: 100% 300%; background-position: center var(--shot-position); }
.story-frame-reading .story-art { background-image: url('assets/yuran-reading-strip-v6.png'); }
.story-frame-closing .story-art { background-image: url('assets/yuran-closing-strip-v6.png'); }
.story-frame::after { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(#0c152455,transparent 7%,transparent 93%,#0c152470); }
.frame-dialogue { position: relative; width: 53%; padding: 27px 0 32px 6%; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
#main .story-balloon, #main .closing-dialogue .story-balloon {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 15px 13px 17px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: -.035em;
  color: #302b38;
  background: none;
  text-align: center;
  white-space: pre-line;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
#main .story-balloon::before, #main .closing-dialogue .story-balloon::before {
  content: '';
  position: absolute;
  inset: -5px -10px -10px;
  z-index: -1;
  background: #fffefa;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M48 8C104 2 240 4 272 12C294 17 305 33 305 62L304 134C302 159 293 174 270 179L264 180Q269 190 282 198Q260 195 249 184C206 190 102 188 55 181C21 177 10 160 10 132L10 55C11 28 22 13 48 8Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform: none;
}
#main .story-balloon + .story-balloon { margin-left: 5px; }
#main .story-balloon.key-dialogue { font-size: 17px; font-weight: 600; line-height: 1.85; padding: 20px 12px; }
.story-frame .reveal { transform: translateY(8px); }
.story-frame .reveal.is-visible, .reduce-motion .story-frame .reveal { transform: none; }

/* The interactive lights remain above the book inside the illustrated scene. */
.constellation-scene { isolation: isolate; background: #0c1524; padding-bottom: 34px; }
.constellation-scene::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(#0c152450,#0c1524c9 50%,#0c1524f5), url('assets/yuran-reading-strip-v6.png') center / cover; opacity: .8; }
.book-insert { height: calc(var(--frame-width) * .55); border: 0; }
.book-insert .shot { width: 100%; aspect-ratio: 1; top: calc(var(--frame-width) * -.37); left: 0; background-image: url('assets/yuran-reading-strip-v6.png'); background-size: 100% 300%; background-position: center 50%; }
.book-insert::after { background: linear-gradient(transparent 50%,#0c1524); }
.constellation-intro { padding-top: 25px; }
.element-stars { margin-top: 0; }
.element-stars::before { border: 0; background: radial-gradient(ellipse,#8071a219,transparent 70%); }
.element-response { border: 0; margin: 0 28px; padding-top: 10px; }
.star-instruction, .demo-explanation { color: #b8aeca; }
.episode-end { background: radial-gradient(ellipse at top,#2c2538,#0c1524 75%); color: #ddd1df; padding: 35px 25px 45px; }
.episode-end .end-whisper { color: #b8aabb; }
.reader-footer { background: #0c1524; border-top: 1px solid #ffffff16; }
.reader-footer>p:first-child, .reader-note { color: #aea2b8; }
.reader-footer .primary-button { background: #eadde4; color: #452632; }

@media (min-width:700px) {
  .frame-dialogue { padding-top: 39px; gap: 40px; }
  #main .story-balloon, #main .closing-dialogue .story-balloon { font-size: 17px; padding: 19px 18px 22px; }
  #main .story-balloon.key-dialogue { font-size: 20px; padding: 25px 18px; }
}
@media (max-width:359px) {
  .frame-dialogue { width: 55%; padding-top: 22px; gap: 24px; }
  #main .story-balloon, #main .closing-dialogue .story-balloon { font-size: 14px; padding: 13px 11px 15px; line-height: 1.65; }
  #main .story-balloon.key-dialogue { font-size: 16px; padding: 16px 10px; }
}