/* Shared dialogue treatment. Each viewer keeps its own positioning. */
.cv-dialog, .sp-dialog, .tmm-copy {
  gap: 12px;
  padding: 12px 19px;
  text-align: left;
}
.cv-dialog, .sp-dialog, .tmm-copy, .tm-arrival .tm-arrival-copy, .tm-quiz-intro, .tm-quiz-card {
  border: 4px double #a56a24;
  border-radius: 19px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22grain%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.72%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22/%3E%3C/filter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23grain%29%22%20opacity%3D%22.25%22/%3E%3C/svg%3E"), radial-gradient(ellipse at 48% 42%, #fff4d6 18%, #e9c189 100%);
  background-blend-mode: multiply;
  color: #30261d;
  box-shadow: inset 0 0 0 1px #ffeac1, inset 0 0 19px #9e632055, 0 4px 14px #19120e55;
}
.cv-avatar, .sp-avatar, .tmm-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 1px solid #bd8747;
  border-radius: 50%;
  background: #f7e0b4;
  color: #583b24;
  font-size: 21px;
}
.cv-body, .sp-body, .tmm-body { min-width: 0; }
.cv-name, .sp-name, .tmm-speaker {
  display: block;
  margin: 0 0 3px;
  padding: 0;
  background: none;
  color: #754225;
  font-size: clamp(12px, 1.4vw, 15px);
  font-weight: 800;
  line-height: 1.35;
}
.cv-text, .sp-text, .tmm-line {
  display: block;
  font-size: clamp(14px, 1.8vw, 21px);
  font-weight: 650;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.tmm-copy { display: flex; align-items: center; margin: 8px 16px; }
.tmm-copy[hidden], .tmm-avatar[hidden], .tmm-speaker[hidden] { display: none; }
@media (max-height: 430px) and (orientation: landscape) {
  .cv-dialog, .tmm-copy { padding: 7px 10px; gap: 8px; }
  .cv-avatar, .tmm-avatar { flex-basis: 28px; width: 28px; height: 28px; font-size: 16px; }
  .cv-text, .tmm-line { font-size: 14px; }
}

/* Scene progress is shown by the artwork and navigation. */
.cv .cv-count, .cv.cv-clean .cv-count, .sp .sp-count { display: none; }

.cv-avatar, .sp-avatar, .tmm-avatar { overflow: hidden; }
#story .cv-avatar img, .tm-quiz-intro .cv-avatar img, .sp-avatar img, .tmm-avatar img {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.tm-quiz-intro {
  box-sizing: border-box;
  width: min(440px, calc(100% - 32px));
  padding: 22px;
  text-align: center;
  font-family: system-ui, sans-serif;
}
.tm-quiz-intro::backdrop { background: #21170e99; }
.tm-quiz-intro-copy { display: flex; align-items: flex-start; gap: 12px; text-align: left; }
.tm-quiz-card { box-sizing: border-box; max-height: 100%; overflow: auto; }
.tm-quiz-intro-speaker { color: #754225; margin: 0 0 6px; font-weight: 800; }
.tm-quiz-intro h2 { margin: 0 0 16px; font-size: clamp(20px, 4vw, 26px); }
.tm-quiz-intro button {
  min-height: 44px;
  padding: 8px 22px;
  border: 1px solid #a56a24;
  border-radius: 999px;
  background: #ffe4a6;
  color: #432d18;
  font: 800 16px system-ui, sans-serif;
  cursor: pointer;
}

.tm-quiz-skip {
  min-height: 44px;
  padding: 6px 14px;
  border: 1px solid #bf965b;
  border-radius: 999px;
  background: #fff5dc;
  color: #573820;
  font: 700 15px system-ui, sans-serif;
  cursor: pointer;
}
.tm-quiz-skip:disabled { opacity: .55; cursor: default; }