/* =============================================================
   Comic panels + lettering
   Shared by the phone reader and the admin scene editor so that
   what Soprano places is exactly what readers see.
   All sizes use em, and em is tied to the panel width (cqw),
   so bubbles keep their proportions on every screen size.
   ============================================================= */

.panel {
  position: relative;
  margin: 0;
  container-type: inline-size;
  line-height: 0;
}
.panel > img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.bubble-layer {
  position: absolute;
  inset: 0;
  line-height: normal;
  pointer-events: none;
}

.bubble-pos {
  position: absolute;
  font-size: 14px;                     /* fallback for very old browsers */
  font-size: clamp(8px, 3.4cqw, 30px);
}

.bubble {
  --b-bg: #ffffff;
  --b-line: #1e1240;
  --b-ink: #1e1240;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: .85em 1.15em;
  background: var(--b-bg);
  color: var(--b-ink);
  border: .14em solid var(--b-line);
  border-radius: 48% / 44%;
  font-family: "Comic Neue", "Comic Sans MS", "Chalkboard SE", cursive;
  font-weight: 700;
  line-height: 1.18;
  text-align: center;
  overflow-wrap: break-word;
}
.bubble-text {
  position: relative;
  z-index: 2;
  display: block;
  white-space: pre-wrap;
}
.bubble.sz-s  .bubble-text { font-size: .8em; }
.bubble.sz-l  .bubble-text { font-size: 1.3em; }
.bubble.sz-xl .bubble-text { font-size: 1.7em; }

/* ---------- Speech + whisper tails ---------- */
.b-speech::after,
.b-whisper::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 1.2em;
  height: 1.2em;
  background: var(--b-bg);
}
.b-speech.tail-bl::after, .b-speech.tail-br::after,
.b-whisper.tail-bl::after, .b-whisper.tail-br::after {
  bottom: -.58em;
  border-right: .14em solid var(--b-line);
  border-bottom: .14em solid var(--b-line);
}
.b-speech.tail-tl::after, .b-speech.tail-tr::after,
.b-whisper.tail-tl::after, .b-whisper.tail-tr::after {
  top: -.58em;
  border-left: .14em solid var(--b-line);
  border-top: .14em solid var(--b-line);
}
.b-speech.tail-bl::after, .b-whisper.tail-bl::after { left: 22%;  transform: rotate(55deg) skew(18deg, 18deg); }
.b-speech.tail-br::after, .b-whisper.tail-br::after { right: 22%; transform: rotate(35deg) skew(18deg, 18deg); }
.b-speech.tail-tl::after, .b-whisper.tail-tl::after { left: 22%;  transform: rotate(35deg) skew(18deg, 18deg); }
.b-speech.tail-tr::after, .b-whisper.tail-tr::after { right: 22%; transform: rotate(55deg) skew(18deg, 18deg); }
.tail-none::after { display: none; }

/* ---------- Whisper ---------- */
.b-whisper {
  border-style: dashed;
  font-weight: 400;
  font-style: italic;
}

/* ---------- Thought cloud ---------- */
.b-thought {
  border-radius: 50%;
  padding: 1.1em 1.35em;
  font-weight: 400;
}
.b-thought::before,
.b-thought::after {
  content: "";
  position: absolute;
  background: var(--b-bg);
  border: .14em solid var(--b-line);
  border-radius: 50%;
}
.b-thought::before { width: .95em; height: .8em; }
.b-thought::after  { width: .55em; height: .5em; }
.b-thought.tail-bl::before { left: 20%;  bottom: -1.15em; }
.b-thought.tail-bl::after  { left: 12%;  bottom: -1.95em; }
.b-thought.tail-br::before { right: 20%; bottom: -1.15em; }
.b-thought.tail-br::after  { right: 12%; bottom: -1.95em; }
.b-thought.tail-tl::before { left: 20%;  top: -1.15em; }
.b-thought.tail-tl::after  { left: 12%;  top: -1.95em; }
.b-thought.tail-tr::before { right: 20%; top: -1.15em; }
.b-thought.tail-tr::after  { right: 12%; top: -1.95em; }
.b-thought.tail-none::before, .b-thought.tail-none::after { display: none; }

/* ---------- Shout burst ---------- */
.b-shout {
  --burst: polygon(50.0% 1.7%, 59.2% 15.6%, 74.6% 7.5%, 75.0% 25.0%, 92.3% 25.6%, 85.2% 40.6%, 97.6% 50.0%, 85.8% 59.6%, 91.2% 73.8%, 76.0% 76.0%, 73.8% 91.3%, 59.2% 84.2%, 50.0% 98.6%, 40.1% 87.0%, 26.1% 91.4%, 24.6% 75.4%, 7.5% 74.5%, 12.5% 60.0%, 1.1% 50.0%, 14.7% 40.5%, 6.8% 25.0%, 25.1% 25.1%, 25.2% 7.0%, 40.6% 15.1%);
  background: var(--b-line);
  border: 0;
  border-radius: 0;
  padding: 2.1em 1.9em;
  clip-path: var(--burst);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.b-shout::before {
  content: "";
  position: absolute;
  inset: .2em;
  z-index: 1;
  background: var(--b-bg);
  clip-path: var(--burst);
}

/* ---------- Narration box ---------- */
.b-narration {
  border-radius: .2em;
  padding: .6em .9em;
  text-align: left;
  font-weight: 400;
  box-shadow: .22em .22em 0 var(--b-line);
}

/* ---------- Sound effect ---------- */
.b-sfx {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-family: "Bangers", Impact, "Arial Black", sans-serif;
  font-weight: 400;
  font-size: 2.1em;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--b-ink);
  -webkit-text-stroke: .09em var(--b-line);
  paint-order: stroke fill;
  text-shadow: .07em .07em 0 var(--b-line);
  transform: rotate(-7deg);
}

/* =============================================================
   Scene text block (sits under the scene's images)
   ============================================================= */
.scene-text {
  container-type: inline-size;
  padding: 6% 6% 4%;
  background: #fff;
  line-height: normal;
}
.scene-text .bubble {
  width: fit-content;
  max-width: 86%;
  margin: 0 auto 1.4em;
  font-size: 14px;
  font-size: clamp(13px, 3.6cqw, 22px);
}
.scene-text .b-shout { max-width: 92%; }
.scene-text.is-plain p {
  max-width: 32em;
  margin: 0 auto;
  font-family: "Fredoka", system-ui, sans-serif;
  font-size: clamp(15px, 4cqw, 20px);
  line-height: 1.55;
  white-space: pre-wrap;
}