.chapter-page {
  --reader-control-min: 48px;
  position: relative;
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  flex-direction: column;
  color: var(--ink);
  background: #211812;
}

.dialog-backdrop {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    var(--modal-top)
    max(12rpx, var(--safe-right))
    max(12rpx, var(--safe-bottom))
    max(12rpx, var(--safe-left));
  background: rgba(18, 12, 8, 0.82);
}

.decision-dialog {
  position: relative;
  display: grid;
  width: min(1420rpx, 95vw);
  height: min(760rpx, 89vh);
  overflow: hidden;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  grid-template-rows: minmax(0, 1fr);
  border-radius: 10rpx;
}

.dialog-close {
  position: absolute;
  z-index: 6;
  top: 14rpx;
  right: 16rpx;
  display: flex;
  width: 50px;
  height: 50px;
  align-items: center;
  justify-content: center;
  color: #4d392a;
  background: #f2e3bd;
  border: 2rpx solid #9d825d;
  border-radius: 50%;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 34px;
}

.character-story {
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  height: 100%;
  padding: 0;
  color: #f2e6c7;
  background:
    radial-gradient(circle at 12% 16%, rgba(181, 57, 44, 0.2), transparent 35%),
    #293844;
  border-right: 7rpx solid #822a23;
}

.character-story-inner {
  box-sizing: border-box;
  min-height: 100%;
  padding: 30rpx 34rpx 48rpx;
}

.story-label {
  display: block;
  margin-top: 20rpx;
  color: #e8c477;
  font-size: 21rpx;
  font-weight: 850;
}

.action-description {
  display: block;
  margin-top: 7rpx;
  font-size: 29rpx;
  font-weight: 750;
  line-height: 1.55;
}

.speech-box,
.evidence-box {
  display: flex;
  margin-top: 16rpx;
  padding: 16rpx 18rpx;
  border-left: 7rpx solid #d0a654;
  flex-direction: column;
  font-size: 24rpx;
  line-height: 1.58;
}

.speech-box {
  background: rgba(246, 225, 180, 0.11);
}

.evidence-box {
  background: rgba(122, 164, 139, 0.14);
  border-left-color: #76a286;
}

.speech-box .story-label,
.evidence-box .story-label {
  margin-top: 0;
}

.font-xlarge .action-description {
  font-size: 33rpx;
}

.font-xlarge .speech-box,
.font-xlarge .evidence-box {
  font-size: 27rpx;
}

.judgement-side {
  display: grid;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  height: 100%;
  overflow: hidden;
  grid-template-rows: minmax(0, 1fr) auto;
  background:
    repeating-linear-gradient(0deg, rgba(85, 54, 31, 0.025) 0, rgba(85, 54, 31, 0.025) 1px, transparent 1px, transparent 6px),
    #f2e5bd;
}

.judgement-scroll {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: auto;
  max-height: 100%;
  padding: 0;
}

.judgement-scroll-inner {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-height: 100%;
  padding: 18px 20px 14px;
  flex-direction: column;
}

.judgement-scroll-inner.is-choice {
  justify-content: center;
}

.judgement-scroll-inner.is-result {
  padding: 12px;
}

.judgement-scroll-inner.is-result .result-box {
  min-height: 100%;
  flex: 1 0 auto;
  justify-content: center;
}

.judgement-lead {
  display: block;
  padding-right: 48px;
  color: #6b5138;
  font-size: 17px;
  font-weight: 850;
  line-height: 1.35;
}

.judgement-question {
  display: block;
  margin-top: 7px;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.3;
}

.font-xlarge .judgement-question {
  font-size: 31px;
}

.font-xlarge .judgement-title {
  font-size: 22px;
}

.font-xlarge .judgement-subtitle {
  font-size: 17px;
}

.font-xlarge .result-box {
  font-size: 20px;
}

.font-xlarge .reason {
  font-size: 21px;
}

.font-xlarge .advice-label {
  font-size: 17px;
}

.judgement-options {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.judgement-button {
  display: grid;
  min-height: 72px;
  grid-template-columns: 50px 1fr;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  color: #3f3328;
  background: #f4e8c5;
  border: 3px solid #8a7355;
  border-radius: 10px;
  text-align: left;
}

.judgement-button.observe,
.judgement-button.continue {
  color: #3f3328;
  background: #f4e8c5;
  border-color: #8a7355;
}

.judgement-icon {
  display: flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  color: #5e4934;
  background: #e8d6ab;
  border: 3px solid #8a7355;
  border-radius: 50%;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 29px;
  font-weight: 900;
}

.judgement-button-copy {
  display: flex;
  flex-direction: column;
}

.judgement-title {
  font-size: 20px;
  font-weight: 900;
}

.judgement-subtitle {
  margin-top: 2px;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 16px;
}

.result-box {
  display: flex;
  margin-top: 14px;
  padding: 14px;
  border: 2px solid;
  border-radius: 9px;
  flex-direction: column;
  font-size: 18px;
  line-height: 1.5;
}

.result-box.retry,
.result-box.correct {
  color: #43372b;
  background: #efe2bd;
  border-color: #947a59;
}

.result-title {
  margin-bottom: 5px;
  font-size: 22px;
  font-weight: 900;
}

.reason {
  display: block;
  margin-top: 9px;
  font-size: 19px;
  font-weight: 750;
}

.action-advice {
  display: flex;
  margin-top: 4px;
  padding: 10px;
  color: #4c3f31;
  background: rgba(255, 251, 235, 0.72);
  border-left: 5px solid var(--cinnabar);
  flex-direction: column;
}

.advice-label {
  color: #8b3028;
  font-size: 16px;
  font-weight: 850;
}

.decision-footer {
  position: relative;
  z-index: 8;
  display: flex;
  flex: none;
  min-height: 66px;
  align-items: center;
  padding: 8px 14px max(8px, var(--safe-bottom));
  background: #ead9af;
  border-top: 2px solid rgba(126, 91, 52, 0.34);
}

.decision-footer-button {
  display: flex;
  width: 100%;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  color: #f8e8c5;
  background: #4b3628;
  border: 2px solid #806247;
  border-radius: 8px;
  font-size: 20px;
  font-weight: 900;
}

.decision-footer-button.primary {
  background: #8f3028;
  border-color: #ad5a4e;
}

.decision-footer-button.retry {
  color: #f5e7c9;
  background: #5a4634;
  border-color: #80694d;
}

.emotion-prompt {
  margin-top: 18rpx;
  color: #7f2a23;
  font-size: 34rpx;
  font-weight: 900;
}

.emotion-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18rpx;
  margin-top: 20rpx;
}

.emotion-choice {
  display: grid;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 138rpx;
  grid-template-columns: 52rpx 1fr;
  align-items: start;
  gap: 14rpx;
  padding: 20rpx;
  color: #3e4f43;
  background: #dfe8d9;
  border: 3rpx solid #719078;
  border-radius: 12rpx;
  font-size: 25rpx;
  line-height: 1.5;
  text-align: left;
}

.emotion-choice > text:last-child {
  min-width: 0;
  word-break: break-word;
}

.choice-number {
  display: flex;
  width: 48rpx;
  height: 48rpx;
  align-items: center;
  justify-content: center;
  color: #f4e8c8;
  background: var(--jade);
  border-radius: 50%;
  font-family: Georgia, serif;
  font-size: 25rpx;
}

.emotion-note {
  margin-top: 16rpx;
  color: #6d533a;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 19rpx;
  text-align: center;
}

.feedback {
  margin-top: 26rpx;
  color: #3f503f;
  font-size: 31rpx;
  font-weight: 750;
  line-height: 1.62;
}

.table-echo {
  display: flex;
  margin: 22rpx 0;
  padding: 20rpx 24rpx;
  color: #f4e5bf;
  background: #3c2b20;
  border-left: 9rpx solid var(--cinnabar);
  flex-direction: column;
  font-size: 30rpx;
  font-weight: 780;
  line-height: 1.55;
}

.echo-label {
  margin-bottom: 5rpx;
  color: #e7bd70;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 19rpx;
  letter-spacing: 4rpx;
}

/* 横屏手机的 rpx 会按屏幕宽度放大。短高屏的纵向尺寸必须使用 px。 */
@media (max-height: 620px) {
.compact-height .dialog-backdrop {
  align-items: stretch;
  justify-content: stretch;
  padding:
    var(--modal-top)
    max(8px, var(--safe-right))
    max(8px, var(--safe-bottom))
    max(8px, var(--safe-left));
}

.compact-height .decision-dialog {
  width: 100%;
  height: 100%;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  grid-template-rows: minmax(0, 1fr);
  border-radius: 7px;
}

.compact-height .dialog-close {
  top: 6px;
  right: calc(40% + 6px);
  width: 48px;
  height: 48px;
  border-width: 1px;
  font-size: 30px;
}

.compact-height .character-story {
  padding: 0;
  border-right-width: 4px;
}

.compact-height .character-story-inner {
  min-height: 100%;
  padding: 12px 16px 30px;
}

.compact-height .story-label {
  margin-top: 12px;
  font-size: 15px;
}

.compact-height .action-description {
  margin-top: 4px;
  font-size: 20px;
  line-height: 1.4;
}

.compact-height .speech-box,
.compact-height .evidence-box {
  margin-top: 10px;
  padding: 10px 12px;
  border-left-width: 4px;
  font-size: 16px;
  line-height: 1.42;
}

.compact-height.font-xlarge .action-description {
  font-size: 22px;
}

.compact-height.font-xlarge .speech-box,
.compact-height.font-xlarge .evidence-box {
  font-size: 18px;
}

.compact-height .judgement-side {
  padding: 0;
}

.compact-height .judgement-scroll {
  box-sizing: border-box;
  padding: 0;
}

.compact-height .judgement-scroll-inner {
  padding: 10px 12px;
}

.compact-height .judgement-scroll-inner.is-result {
  padding: 8px 10px;
}

.compact-height .judgement-lead {
  display: none;
}

.compact-height .judgement-question {
  margin-top: 0;
  font-size: 21px;
  line-height: 1.18;
}

.compact-height.font-xlarge .judgement-question {
  font-size: 23px;
}

.compact-height .judgement-options {
  gap: 6px;
  margin-top: 8px;
}

.compact-height .judgement-button {
  min-height: 58px;
  grid-template-columns: 38px 1fr;
  gap: 8px;
  padding: 5px 8px;
  border-width: 3px;
  border-radius: 9px;
}

.compact-height .judgement-icon {
  width: 38px;
  height: 38px;
  border-width: 2px;
  font-size: 25px;
}

.compact-height .judgement-title {
  font-size: 18px;
  line-height: 1.15;
}

.compact-height.font-xlarge .judgement-title {
  font-size: 20px;
}

.compact-height .judgement-subtitle {
  font-size: 14px;
  line-height: 1.2;
}

.compact-height.font-xlarge .judgement-subtitle {
  font-size: 15px;
}

.compact-height .result-box {
  margin-top: 0;
  padding: 13px;
  border-width: 2px;
  border-radius: 8px;
  font-size: 17px;
  line-height: 1.45;
}

.compact-height .result-box.retry {
  margin-top: 0;
  padding: 10px 12px;
  line-height: 1.35;
}

.compact-height .result-box.retry .result-title {
  margin-bottom: 4px;
}

.compact-height .result-title {
  font-size: 22px;
}

.compact-height .reason {
  font-size: 19px;
}

.compact-height.font-xlarge .result-box {
  font-size: 18px;
}

.compact-height.font-xlarge .reason {
  font-size: 20px;
}

.compact-height .action-advice {
  margin-top: 4px;
  padding: 10px;
  border-left-width: 4px;
}

.compact-height .advice-label {
  font-size: 15px;
}

.compact-height.font-xlarge .advice-label {
  font-size: 16px;
}

.compact-height .emotion-prompt {
  margin-top: 10px;
  font-size: 23px;
}

.compact-height .emotion-choices {
  gap: 10px;
  margin-top: 12px;
}

.compact-height .emotion-choice {
  min-height: 88px;
  grid-template-columns: 34px 1fr;
  gap: 9px;
  padding: 12px;
  border-width: 2px;
  border-radius: 8px;
  font-size: 17px;
  line-height: 1.4;
}

.compact-height .choice-number {
  width: 32px;
  height: 32px;
  font-size: 17px;
}

.compact-height .emotion-note {
  margin-top: 9px;
  font-size: 14px;
}

.compact-height .feedback {
  margin-top: 14px;
  font-size: 21px;
  line-height: 1.46;
}

.compact-height .table-echo {
  margin: 13px 0;
  padding: 12px 15px;
  border-left-width: 5px;
  font-size: 20px;
  line-height: 1.43;
}

.compact-height .echo-label {
  font-size: 14px;
  letter-spacing: 2px;
}
}

/* V3.5 连环画样板：主阅读页只有画、画下文字和翻页。 */
.comic-topbar {
  position: relative;
  z-index: 20;
  display: flex;
  flex: none;
  width: 100%;
  align-items: center;
  gap: 14px;
  color: #ead9b5;
  background: #2b1f18;
  border-bottom: 3px solid #8f2c25;
}

.comic-catalog-button,
.comic-font-button,
.comic-top-previous-button,
.c1-front-action-button {
  display: flex;
  min-width: 92px;
  min-height: 48px;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  color: #f1dfb9;
  border: 1px solid #8b704e;
  border-radius: 7px;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 18px;
  font-weight: 750;
}

.comic-catalog-button {
  width: 92px;
}

.comic-font-button {
  width: 104px;
  min-width: 104px;
  margin-left: auto;
}

.comic-top-previous-button {
  width: 48px;
  min-width: 48px;
  padding: 0;
  font-size: 30px;
  line-height: 1;
}

.comic-top-previous-button.is-disabled {
  visibility: hidden;
  pointer-events: none;
}

.c1-front-action-button {
  width: 142px;
  min-width: 142px;
  margin-left: auto;
  padding: 0 12px;
  color: #fff0c8;
  background: #873029;
  border-color: #b96556;
  font-size: 17px;
}

.comic-top-previous-button::after,
.c1-front-action-button::after {
  border: 0;
}

.comic-page-audio-slot {
  display: grid;
  box-sizing: border-box;
  width: 142px;
  min-width: 142px;
  height: 48px;
  min-height: 48px;
  flex: none;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  color: #f3dfb7;
  background: #3c2c22;
  border: 1px solid #8b704e;
  border-radius: 7px;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  text-align: left;
}

.comic-page-audio-slot::after {
  border: 0;
}

.comic-page-audio-slot.is-text-mode {
  opacity: 1;
  color: #ddcca9;
  background: #382a22;
  border-color: #756147;
}

.text-reading-backdrop {
  z-index: 80;
  align-items: center;
  justify-content: center;
}

.text-reading-dialog {
  display: grid;
  box-sizing: border-box;
  width: min(760px, calc(100vw - var(--safe-left) - var(--safe-right) - 28px));
  height: min(520px, calc(100vh - var(--modal-top) - var(--safe-bottom) - 24px));
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 22px 26px 20px;
  color: #2e241d;
  background: #f2e3bd;
  border: 3px solid #8c372d;
  border-radius: 10px;
  box-shadow: 0 16px 42px rgba(15, 9, 5, 0.45);
}

.text-reading-kicker {
  padding-right: 58px;
  color: #8e3027;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.text-reading-scroll {
  min-height: 0;
  border-top: 1px solid rgba(126, 79, 43, 0.35);
  border-bottom: 1px solid rgba(126, 79, 43, 0.35);
}

.text-reading-sheet {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 4px 22px;
}

.text-reading-title {
  color: #752820;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.28;
}

.text-reading-body {
  font-size: 28px;
  font-weight: 750;
  line-height: 1.55;
}

.font-xlarge .text-reading-title {
  font-size: 34px;
}

.font-xlarge .text-reading-body {
  font-size: 31px;
}

.font-xlarge .text-reading-secondary,
.font-xlarge .text-reading-prompt {
  font-size: 25px;
}

.text-reading-secondary {
  color: #5f4a3d;
  font-size: 22px;
  line-height: 1.5;
}

.text-reading-prompt {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px 16px;
  font-size: 22px;
  line-height: 1.45;
  background: rgba(255, 250, 231, 0.66);
  border-left: 5px solid #8e3027;
}

.text-reading-label {
  color: #8e3027;
  font-size: 17px;
  font-weight: 900;
}

.text-reading-return {
  min-height: 54px;
  color: #fff5d9;
  background: #8e3027;
  border: 0;
  border-radius: 8px;
  font-size: 24px;
  font-weight: 900;
}

.text-reading-return::after {
  border: 0;
}

.compact-height .text-reading-dialog {
  width: min(720px, calc(100vw - var(--safe-left) - var(--safe-right) - 20px));
  height: calc(100vh - var(--modal-top) - var(--safe-bottom) - 14px);
  gap: 8px;
  padding: 14px 20px 12px;
}

.compact-height .text-reading-kicker {
  font-size: 15px;
}

.compact-height .text-reading-sheet {
  gap: 10px;
  padding: 10px 3px 14px;
}

.compact-height .text-reading-title {
  font-size: 24px;
}

.compact-height .text-reading-body {
  font-size: 23px;
  line-height: 1.42;
}

.compact-height.font-xlarge .text-reading-title {
  font-size: 27px;
}

.compact-height.font-xlarge .text-reading-body {
  font-size: 25px;
}

.compact-height.font-xlarge .text-reading-secondary,
.compact-height.font-xlarge .text-reading-prompt {
  font-size: 20px;
}

.compact-height .text-reading-secondary,
.compact-height .text-reading-prompt {
  font-size: 18px;
}

.compact-height .text-reading-return {
  min-height: 48px;
  font-size: 21px;
}

.comic-page-audio-slot.is-playing {
  color: #fff0c8;
  background: #7f2a24;
  border-color: #c26e5e;
}

.comic-page-audio-slot.is-replay {
  color: #f1e7ca;
  background: #355344;
  border-color: #76927e;
}

.comic-page-audio-icon {
  display: flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

.comic-page-audio-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.comic-page-audio-label,
.comic-page-audio-meta {
  display: block;
  overflow: hidden;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comic-page-audio-label {
  font-size: 16px;
  font-weight: 850;
}

.comic-page-audio-meta {
  margin-top: 2px;
  color: #c9b995;
  font-size: 12px;
}

.comic-bookmark {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 16px;
  color: #dbc79f;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
}

.comic-bookmark-label,
.comic-page-count {
  white-space: nowrap;
}

.comic-page-count {
  color: #f1cb73;
}

.compact-height .comic-topbar {
  gap: 7px;
}

.compact-height .comic-catalog-button {
  width: 78px;
  min-width: 78px;
  min-height: 48px;
  padding: 0 9px;
  font-size: 17px;
}

.compact-height .comic-font-button {
  width: 76px;
  min-width: 76px;
  min-height: 48px;
  padding: 0 8px;
  font-size: 17px;
}

.compact-height .comic-top-previous-button {
  width: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
}

.compact-height .c1-front-action-button {
  width: 118px;
  min-width: 118px;
  min-height: 48px;
  padding: 0 7px;
  font-size: 16px;
}

.compact-height .comic-page-audio-slot {
  width: 128px;
  min-width: 128px;
  padding: 4px 6px;
  grid-template-columns: 26px minmax(0, 1fr);
}

.compact-height .comic-page-audio-icon {
  width: 26px;
  height: 26px;
}

.compact-height .comic-page-audio-label {
  font-size: 15px;
}

.compact-height .comic-page-audio-meta {
  font-size: 11px;
}

.compact-height .comic-bookmark {
  gap: 7px;
  overflow: hidden;
  font-size: 16px;
}

.comic-reader {
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  padding-right: var(--safe-right);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  background: #17100c;
  flex-direction: column;
}

/* 第一章试行母版：正面看画，点击后选择，解释放在纸页背面。 */
.c1-book-topbar {
  gap: 10px;
  background: #2b1c15;
  border-bottom: 3px solid #913027;
}

.c1-book-topbar.is-front {
  position: absolute;
  z-index: 30;
  inset: 0 0 auto 0;
  background: rgba(33, 24, 19, 0.94);
  border-bottom: 1px solid rgba(205, 171, 106, 0.34);
  box-shadow: none;
  transition: opacity 160ms ease, background-color 160ms ease;
}

.c1-book-topbar.is-front.is-controls-hidden {
  opacity: 0;
  background: transparent;
  border-bottom-color: transparent;
  pointer-events: none;
}

.c1-book-topbar.is-front.is-controls-revealed {
  opacity: 1;
  pointer-events: auto;
}

.c1-book-topbar.is-front .comic-bookmark {
  justify-content: center;
}

.c1-book-topbar .comic-bookmark {
  margin-right: auto;
}

.c1-audio-slot {
  width: 104px;
  min-width: 104px;
}

.c1-audio-slot .comic-page-audio-meta {
  display: none;
}

/* “直接看文字”与“试听本页”都保持整词显示。文字占位态不再挤进图标，
 * 让四个字在最窄横屏上也完整显示，同时保留同一个固定槽位。 */
.c1-audio-slot.is-text-mode {
  grid-template-columns: minmax(0, 1fr);
  text-align: center;
}

.c1-audio-slot.is-text-mode .comic-page-audio-icon {
  display: none;
}

.c1-comic-page {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  background: #17100c;
}

.c1-front-stage {
  position: relative;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  background: #1e1510;
  border: 1px solid rgba(213, 178, 112, 0.42);
  box-shadow: inset 0 0 36px rgba(0, 0, 0, 0.2);
}

.c1-front-image,
.c1-front-grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.c1-front-reveal-gate {
  position: absolute;
  z-index: 12;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.c1-front-reveal-gate::after {
  border: 0;
}

.c1-front-first-hint {
  position: absolute;
  z-index: 13;
  bottom: max(18px, calc(var(--safe-bottom) + 12px));
  left: 50%;
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  color: #fff1c9;
  background: rgba(31, 21, 15, 0.9);
  border: 1px solid rgba(239, 205, 136, 0.76);
  border-radius: 24px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.46);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
  pointer-events: none;
  transform: translateX(-50%);
  white-space: nowrap;
}

.c1-front-image {
  z-index: 1;
  display: block;
}

.c1-front-grain {
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgba(30, 18, 11, 0.22), transparent 28%),
    repeating-linear-gradient(0deg, rgba(61, 40, 24, 0.02) 0, rgba(61, 40, 24, 0.02) 1px, transparent 1px, transparent 5px);
  box-shadow: inset 0 0 48px rgba(42, 25, 15, 0.16);
}

.c1-front-fallback {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 30px;
  color: #4e3b2b;
  background: #d8c49d;
  flex-direction: column;
  font-size: 20px;
  line-height: 1.5;
  text-align: center;
}

.c1-full-page-tap {
  position: absolute;
  z-index: 5;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.c1-person-hotspot {
  position: absolute;
  z-index: 7;
  min-width: 104px;
  min-height: 104px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.c1-person-hotspot::after,
.c1-full-page-tap::after,
.c1-previous-page::after,
.c1-back-button::after,
.c1-natural-choice::after,
.c1-retry-button::after,
.c1-tray-close::after {
  border: 0;
}

.c1-hotspot-ring {
  position: absolute;
  inset: -4px;
  opacity: 0.3;
  border: 0;
  border-radius: 48% 52% 46% 54%;
  background: radial-gradient(ellipse at center, rgba(244, 215, 151, 0.2) 0 45%, rgba(151, 69, 52, 0.16) 58%, transparent 72%);
  box-shadow: none;
  animation: c1-ink-breathe 2.8s ease-in-out infinite;
}

@keyframes c1-ink-breathe {
  0%, 100% { opacity: 0.28; transform: scale(0.98); }
  50% { opacity: 0.62; transform: scale(1.025); }
}

.c1-front-folio {
  position: absolute;
  z-index: 9;
  right: 18px;
  bottom: 16px;
  left: auto;
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  color: #f3dfb6;
  background: rgba(35, 24, 18, 0.5);
  border: 0;
  border-radius: 5px;
  box-shadow: none;
  pointer-events: none;
}

.c1-front-folio-copy {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 12px;
}

.c1-front-kicker {
  flex: none;
  color: #e8c675;
  font-size: 16px;
  font-weight: 850;
  letter-spacing: 2px;
}

.c1-front-title {
  overflow: hidden;
  font-family: "Songti SC", "STSong", serif;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c1-front-hint {
  color: #f0d797;
  font-size: 15px;
  font-weight: 750;
  white-space: nowrap;
}

.c1-previous-page {
  position: absolute;
  z-index: 11;
  bottom: 16px;
  left: 15px;
  display: flex;
  width: 50px;
  height: 58px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  color: #ebd6aa;
  background: rgba(43, 29, 20, 0.62);
  border: 1px solid rgba(181, 142, 86, 0.72);
  border-radius: 6px;
  font-size: 35px;
  font-weight: 700;
  line-height: 1;
}

.c1-back-paper {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: #34271d;
  background:
    repeating-linear-gradient(0deg, rgba(83, 55, 32, 0.028) 0, rgba(83, 55, 32, 0.028) 1px, transparent 1px, transparent 5px),
    #f1e2bd;
  grid-template-columns: minmax(210px, 2fr) minmax(0, 3fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
}

.c1-back-evidence {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(232, 202, 143, 0.025) 0, rgba(232, 202, 143, 0.025) 1px, transparent 1px, transparent 5px),
    #38271f;
  border-right: 3px solid #883028;
  grid-column: 1;
  grid-row: 1 / span 3;
}

.c1-back-image {
  width: 100%;
  height: 100%;
}

.c1-back-image-fallback {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 22px;
  color: #5b4835;
  background: #d2bd93;
  font-size: 18px;
  line-height: 1.45;
  text-align: center;
}

.c1-back-stamp {
  position: absolute;
  bottom: 14px;
  left: 14px;
  padding: 3px 0 3px 9px;
  color: #e9c879;
  background: transparent;
  border: 0;
  border-left: 3px solid #a64236;
  border-radius: 0;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 1px;
  pointer-events: none;
}

.c1-scroll-hint {
  z-index: 4;
  display: block;
  width: 100%;
  margin: 0;
  padding: 3px 12px;
  color: #6f4b35;
  background: rgba(233, 214, 170, 0.72);
  border-top: 1px solid rgba(119, 82, 52, 0.22);
  border-right: 3px solid rgba(145, 49, 40, 0.72);
  box-shadow: 0 -10px 14px rgba(241, 226, 189, 0.86);
  font-size: 16px;
  font-weight: 750;
  grid-column: 2;
  grid-row: 2;
  pointer-events: none;
  text-align: right;
}

.c1-back-copy {
  min-width: 0;
  min-height: 0;
  height: 100%;
  grid-column: 2;
  grid-row: 1;
}

.c1-back-copy-inner {
  display: flex;
  min-height: 100%;
  justify-content: center;
  gap: 9px;
  padding: 18px 24px 15px;
  flex-direction: column;
}

.c1-back-kicker {
  display: block;
  color: #8f3028;
  font-size: 16px;
  font-weight: 850;
  letter-spacing: 1px;
}

.c1-back-title {
  display: block;
  color: #2f231a;
  font-family: "Songti SC", "STSong", serif;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.25;
}

.font-xlarge .c1-back-title {
  font-size: 31px;
}

.c1-back-body,
.c1-back-secondary,
.c1-back-reason,
.c1-back-family,
.c1-back-callout,
.c1-back-action {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

.font-xlarge .c1-back-body,
.font-xlarge .c1-back-secondary,
.font-xlarge .c1-back-reason,
.font-xlarge .c1-back-family,
.font-xlarge .c1-back-callout,
.font-xlarge .c1-back-action {
  font-size: 23px;
}

.c1-back-secondary,
.c1-back-reason {
  color: #654f39;
}

.c1-back-callout,
.c1-back-action {
  padding: 10px 13px;
  background: rgba(255, 250, 232, 0.54);
  border-left: 5px solid #a58954;
}

.c1-back-action {
  border-left-color: #8f3028;
}

.c1-back-label {
  display: block;
  margin-bottom: 3px;
  color: #8f3028;
  font-size: 16px;
  font-weight: 900;
}

.c1-back-family {
  color: #6c332c;
  font-family: "Songti SC", "STSong", serif;
}

.c1-memory-secondary-actions {
  display: grid;
  gap: 8px;
  margin-top: 2px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.c1-memory-secondary-action {
  display: flex;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 6px 10px;
  color: #604632;
  background: transparent;
  border: 1px solid rgba(118, 87, 58, 0.46);
  border-radius: 5px;
  font-size: 16px;
  font-weight: 760;
}

.c1-memory-secondary-action::after {
  border: 0;
}

.c1-back-footer {
  display: flex;
  min-width: 0;
  overflow: hidden;
  gap: 10px;
  padding: 9px 12px;
  background: rgba(106, 74, 44, 0.09);
  border-top: 1px solid rgba(107, 77, 46, 0.28);
  grid-column: 2;
  grid-row: 3;
  justify-self: stretch;
}

.c1-back-button {
  display: flex;
  width: 0;
  min-width: 0;
  min-height: 54px;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 7px 12px;
  color: #f6e8c6;
  background: #4b3427;
  border: 2px solid #806247;
  border-radius: 8px;
  font-size: 19px;
  font-weight: 850;
}

.c1-back-button.primary {
  background: #913128;
  border-color: #ad5a4e;
}

.c1-memory-footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.c1-memory-footer .c1-back-button {
  width: 100%;
  min-height: 54px;
  padding: 7px 10px;
  font-size: 18px;
}

.c1-back-button.report,
.c1-back-button.share {
  color: #513a28;
  background: #ead9ad;
  border-color: #9d8059;
}

.c1-decision-layer {
  position: fixed;
  z-index: 80;
  top: var(--topbar-height);
  right: var(--safe-right);
  bottom: var(--safe-bottom);
  left: var(--safe-left);
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  background: #17100c;
}

.c1-interaction-paper {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: #34271d;
  background:
    repeating-linear-gradient(0deg, rgba(83, 55, 32, 0.028) 0, rgba(83, 55, 32, 0.028) 1px, transparent 1px, transparent 5px),
    #f1e2bd;
  grid-template-columns: minmax(210px, 2fr) minmax(0, 3fr);
  grid-template-rows: minmax(0, 1fr);
}

.c1-emotion-interaction-paper {
  position: absolute;
  z-index: 10;
  top: var(--topbar-height);
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
}

.c1-interaction-evidence {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(232, 202, 143, 0.025) 0, rgba(232, 202, 143, 0.025) 1px, transparent 1px, transparent 5px),
    #38271f;
  border-right: 3px solid #883028;
  grid-column: 1;
  grid-row: 1;
}

.c1-interaction-image {
  display: block;
  width: 100%;
  height: 100%;
}

.c1-interaction-panel {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
  padding: 16px 18px;
  flex-direction: column;
  grid-column: 2;
  grid-row: 1;
}

.c1-interaction-panel .c1-tray-heading {
  padding-right: 94px;
}

.c1-choice-stack {
  display: grid;
  min-width: 0;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(70px, auto));
}

.c1-retry-panel {
  align-items: stretch;
}

.c1-decision-tray,
.c1-emotion-tray {
  position: relative;
  z-index: 30;
  display: grid;
  width: 100%;
  min-height: 118px;
  align-items: stretch;
  gap: 10px;
  padding: 13px 104px 13px 15px;
  color: #34271d;
  background: rgba(244, 231, 196, 0.98);
  border: 3px solid #9e845e;
  border-radius: 11px;
  box-shadow: 0 13px 30px rgba(0, 0, 0, 0.34);
  grid-template-columns: minmax(210px, 1.05fr) repeat(2, minmax(0, 1fr));
}

.c1-emotion-tray {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  width: auto;
}

.c1-tray-heading {
  display: flex;
  min-width: 0;
  justify-content: center;
  gap: 4px;
  flex-direction: column;
}

.c1-tray-kicker {
  color: #8f3028;
  font-size: 15px;
  font-weight: 900;
}

.c1-tray-question {
  font-size: 20px;
  font-weight: 850;
  line-height: 1.36;
}

.c1-natural-choice {
  display: flex;
  min-width: 0;
  min-height: 70px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 8px 12px;
  color: #3e2d21;
  background: #f1dfb3;
  border: 3px solid #8d7353;
  border-radius: 9px;
  font-size: 18px;
  font-weight: 850;
  line-height: 1.35;
  text-align: left;
}

.c1-natural-choice:active {
  background: #e6c98b;
}

.c1-tray-close {
  position: absolute;
  top: 9px;
  right: 9px;
  display: flex;
  width: auto;
  min-width: 82px;
  height: 48px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  color: #4a3527;
  background: #f4e2b7;
  border: 2px solid #8d7353;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 800;
}

.c1-retry-tray {
  grid-template-columns: minmax(0, 1.3fr) minmax(210px, 0.7fr);
  grid-template-rows: auto auto;
}

.c1-retry-title {
  align-self: end;
  color: #713329;
  font-size: 22px;
  font-weight: 900;
}

.c1-retry-copy {
  align-self: start;
  color: #5f4a36;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.c1-retry-button {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 8px 12px;
  color: #f8e8c5;
  background: #8f3028;
  border: 2px solid #ad5a4e;
  border-radius: 8px;
  font-size: 19px;
  font-weight: 850;
  grid-column: 2;
  grid-row: 1 / span 2;
}

.c1-event-result-back {
  height: 100%;
}

.comic-normal-page {
  display: grid;
  width: 100%;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  grid-template-rows: minmax(0, 1fr);
  color: #34271d;
  background: #17100c;
}

.comic-art-column {
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 6px;
  background:
    repeating-linear-gradient(0deg, rgba(204, 173, 117, 0.035) 0, rgba(204, 173, 117, 0.035) 1px, transparent 1px, transparent 5px),
    #241811;
}

.comic-art-stage {
  position: relative;
  flex: none;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  background: #cbb78d;
  border: 1px solid rgba(222, 194, 143, 0.46);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.comic-art-image,
.comic-paper-grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.comic-art-image {
  z-index: 0;
  display: block;
}

.comic-paper-grain {
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgba(45, 28, 17, 0.12), transparent 38%),
    repeating-linear-gradient(0deg, rgba(62, 43, 25, 0.025) 0, rgba(62, 43, 25, 0.025) 1px, transparent 1px, transparent 4px);
  box-shadow: inset 0 0 42px rgba(56, 38, 24, 0.18);
}

.comic-evidence-composite {
  position: absolute;
  z-index: 6;
  right: 5%;
  bottom: 7%;
  display: flex;
  box-sizing: border-box;
  width: min(62%, 430px);
  max-height: 78%;
  overflow: hidden;
  gap: 5px;
  padding: 14px 16px 15px;
  color: #f7e9c9;
  background: rgba(43, 31, 23, 0.92);
  border: 2px solid rgba(220, 184, 112, 0.88);
  border-left: 7px solid #a63b2e;
  border-radius: 7px;
  box-shadow: 0 12px 28px rgba(20, 12, 8, 0.34);
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  pointer-events: none;
}

.comic-evidence-kicker {
  color: #e9c576;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: 2px;
}

.comic-evidence-label {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.22;
}

.comic-evidence-detail {
  display: -webkit-box;
  overflow: hidden;
  color: #eadcc1;
  font-size: 17px;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.comic-art-fallback {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px;
  color: #5c4935;
  background:
    radial-gradient(circle at 38% 42%, rgba(151, 86, 58, 0.14), transparent 32%),
    #d4c39d;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 18px;
  line-height: 1.55;
  text-align: center;
}

.cover-copy {
  position: absolute;
  z-index: 5;
  top: 12%;
  left: 8%;
  display: flex;
  max-width: 58%;
  padding: 18px 24px;
  color: #f5e7c8;
  background: rgba(41, 29, 21, 0.82);
  border-left: 7px solid #9f3028;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  flex-direction: column;
}

.cover-kicker {
  color: #e2bf75;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 18px;
  letter-spacing: 3px;
}

.cover-title {
  margin-top: 7px;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 3px;
}

.comic-actor-hotspot {
  position: absolute;
  z-index: 10;
  min-width: 96px;
  min-height: 96px;
  overflow: visible;
  padding: 0;
  color: transparent;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.comic-actor-hotspot.is-quiet {
  background: transparent;
  box-shadow: none;
}

.comic-fallback-actor-button {
  position: absolute;
  z-index: 10;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: flex;
  box-sizing: border-box;
  width: calc(100% - 36px);
  min-width: 0;
  min-height: 62px;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 9px 16px;
  color: #f8e8c7;
  background: rgba(51, 35, 24, 0.92);
  border: 2px solid #d4ad62;
  border-left: 7px solid #9b3028;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  text-align: left;
}

.comic-fallback-actor-button.is-seen {
  color: #e6f1e2;
  background: rgba(40, 76, 58, 0.94);
  border-color: #98bd9d;
}

.fallback-proof-label {
  flex: none;
  padding: 4px 8px;
  color: #6c251f;
  background: #e6c87f;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 850;
}

.fallback-actor-action {
  min-width: 0;
  flex: 1 1 auto;
  font-size: 19px;
  font-weight: 850;
  line-height: 1.25;
  white-space: nowrap;
}

.hotspot-ink-ring {
  position: absolute;
  inset: -5px;
  opacity: 0.44;
  border: 3px solid rgba(210, 169, 92, 0.82);
  border-radius: 48% 52% 45% 55%;
  box-shadow: 0 0 0 6px rgba(159, 48, 40, 0.12);
  animation: comic-ink-hint 2.8s ease-in-out 0.35s infinite;
}

.hotspot-guide-label {
  position: absolute;
  right: 50%;
  bottom: 4px;
  min-width: 82px;
  transform: translateX(50%);
  padding: 5px 10px;
  color: #fff0c8;
  background: rgba(70, 42, 27, 0.9);
  border: 2px solid rgba(224, 190, 119, 0.88);
  border-radius: 999px;
  box-shadow: 0 5px 12px rgba(31, 18, 10, 0.28);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}

.comic-actor-hotspot.is-seen .hotspot-ink-ring {
  display: none;
}

@keyframes comic-ink-hint {
  0%, 100% { opacity: 0.32; transform: scale(0.97); }
  50% { opacity: 0.68; transform: scale(1.04); }
}

.comic-caption-strip {
  display: grid;
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
  color: #34271d;
  background:
    repeating-linear-gradient(0deg, rgba(85, 54, 31, 0.028) 0, rgba(85, 54, 31, 0.028) 1px, transparent 1px, transparent 5px),
    #f0e1b9;
  border-left: 4px solid #8f2c25;
}

.comic-caption-copy {
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 18px 22px 16px;
}

.comic-cover-caption-layout {
  display: grid;
  min-width: 0;
  min-height: 100%;
  align-items: center;
  gap: 18px;
  grid-template-columns: minmax(190px, 0.9fr) minmax(0, 1.1fr);
}

.comic-cover-caption-heading {
  min-width: 0;
}

.comic-cover-caption-layout .comic-caption-heading,
.comic-cover-caption-layout .comic-caption-kicker {
  margin-bottom: 0;
}

.comic-cover-caption-text {
  min-width: 0;
  padding-left: 18px;
  border-left: 2px solid rgba(143, 48, 40, 0.34);
}

.comic-ensemble-caption-layout,
.comic-event-caption-layout {
  display: grid;
  min-width: 0;
  min-height: 100%;
  align-items: center;
  gap: 16px;
}

.comic-ensemble-caption-layout {
  grid-template-columns: minmax(150px, 0.72fr) minmax(0, 1.28fr);
}

.comic-ensemble-caption-layout > .comic-caption-heading {
  margin-bottom: 0;
}

.comic-ensemble-caption-copy,
.comic-event-caption-copy,
.comic-event-cue {
  min-width: 0;
}

.comic-ensemble-caption-copy,
.comic-event-cue {
  padding-left: 16px;
  border-left: 2px solid rgba(143, 48, 40, 0.28);
}

.comic-event-caption-layout {
  grid-template-columns: minmax(0, 1.62fr) minmax(150px, 0.88fr);
}

.comic-event-caption-layout .comic-caption {
  font-size: 19px;
  line-height: 1.42;
}

.comic-event-caption-layout .comic-tap-prompt {
  margin-top: 0;
}

.comic-outside-actor-button {
  display: flex;
  box-sizing: border-box;
  width: 160px;
  max-width: 100%;
  min-width: 0;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 7px 9px;
  color: #f7e8c5;
  background: #8f3028;
  border: 2px solid #ad5a4e;
  border-radius: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 17px;
  font-weight: 850;
  line-height: 1.3;
  text-align: center;
}

.comic-art-tap-note { display: block; color: #76533d; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; font-size: 14px; font-weight: 750; line-height: 1.25; }
.comic-event-cue .comic-art-tap-note { margin-bottom: 6px; }

.comic-event-caption-layout .comic-seen-row {
  align-items: flex-start;
  margin-top: 0;
  flex-direction: column;
}

.comic-caption-heading {
  display: block;
  margin-bottom: 10px;
  color: #8f3028;
  font-family: "Songti SC", "STSong", serif;
  font-size: 25px;
  font-weight: 900;
  line-height: 1.3;
}

.comic-caption-kicker {
  display: block;
  margin-bottom: 5px;
  color: #8f3028;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 18px;
  font-weight: 850;
  letter-spacing: 2px;
}

.comic-caption {
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 21px;
  font-weight: 750;
  line-height: 1.52;
}

.comic-secondary-caption {
  display: block;
  margin-top: 4px;
  color: #735b42;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 18px;
  line-height: 1.48;
}

.comic-tap-prompt {
  display: block;
  margin-top: 5px;
  color: #8e2f27;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.45;
}

.comic-tap-prompt.is-seen {
  color: #37614c;
}

.comic-seen-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
}

.seen-chip {
  flex: none;
  transform: rotate(-3deg);
  padding: 3px 7px;
  color: #8d2923;
  border: 2px double #9f3028;
  border-radius: 4px;
  font-size: 17px;
  font-weight: 900;
}

.comic-seen-row .comic-tap-prompt {
  margin-top: 0;
}

.comic-page-nav {
  display: grid;
  box-sizing: border-box;
  min-width: 0;
  align-items: center;
  gap: 5px;
  padding: 9px 10px;
  grid-template-columns: minmax(72px, 1fr) auto minmax(72px, 1fr);
  background: rgba(105, 74, 45, 0.08);
  border-left: 1px solid rgba(107, 77, 46, 0.26);
}

.page-turn-button {
  position: relative;
  display: flex;
  width: auto;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 6px;
  color: #f6e8c6;
  background: #493326;
  border: 2px solid #806247;
  border-radius: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.page-turn-button::after,
.special-page-button::after,
.memory-action-cell::after {
  border: 0;
}

.page-turn-button.next {
  background: #8f3028;
  border-color: #ad5a4e;
}

.page-turn-button.is-locked {
  color: #735f47;
  background: #ddcba2;
  border-color: #a9936e;
}

.page-turn-button.is-disabled {
  opacity: 0.58;
}

.folio {
  min-width: 48px;
  color: #715b40;
  font-family: Georgia, serif;
  font-size: 17px;
  text-align: center;
}

.comic-special-page {
  display: grid;
  width: 100%;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  color: #35281e;
  background: #eedfb8;
}

.special-art {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(65, 42, 25, 0.04) 0, rgba(65, 42, 25, 0.04) 1px, transparent 1px, transparent 5px),
    #2c1e16;
  border-right: 5px solid #8e3027;
}

.special-art-image,
.special-art-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.special-art-fallback {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px;
  color: #eadbb9;
  background:
    radial-gradient(circle at 38% 42%, rgba(151, 86, 58, 0.2), transparent 32%),
    #3a2a20;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 18px;
  line-height: 1.55;
  text-align: center;
}

.special-art-shade {
  pointer-events: none;
  background: linear-gradient(0deg, rgba(34, 22, 15, 0.82), transparent 48%);
}

.special-art-copy {
  position: absolute;
  z-index: 2;
  right: 24px;
  bottom: 24px;
  left: 24px;
  display: flex;
  color: #f4e5c4;
  flex-direction: column;
}

.special-kicker {
  color: #e8c877;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 2px;
}

.special-title {
  margin-top: 5px;
  font-size: 32px;
  font-weight: 900;
}

.special-caption {
  margin-top: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 19px;
  line-height: 1.55;
}

.emotion-panel {
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  grid-template-rows: minmax(0, 1fr) auto auto;
}

.memory-panel {
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  grid-template-rows: minmax(0, 1fr) auto;
}

.emotion-paper {
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 22px 26px 18px;
}

.emotion-context {
  display: flex;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(143, 48, 40, 0.28);
  flex-direction: column;
}

.emotion-context-kicker {
  color: #8f3028;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: 1px;
}

.emotion-context-title {
  margin-top: 3px;
  font-size: 25px;
  font-weight: 900;
  line-height: 1.25;
}

.emotion-context-caption {
  margin-top: 6px;
  color: #5c4632;
  font-size: 18px;
  line-height: 1.4;
}

.emotion-paper .emotion-prompt {
  display: block;
  margin-top: 0;
  font-size: 26px;
  line-height: 1.38;
}

.emotion-choice-dock {
  display: grid;
  min-width: 0;
  gap: 6px;
  padding: 6px 10px;
  grid-template-columns: 1fr;
  background: rgba(111, 79, 45, 0.07);
  border-top: 1px solid rgba(107, 77, 46, 0.22);
}

.emotion-choice-dock .emotion-choice {
  width: auto;
  max-width: none;
  min-height: 58px;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-width: 2px;
  border-radius: 8px;
  font-size: 16px;
  justify-self: stretch;
  line-height: 1.25;
}

.emotion-choice-dock .choice-number {
  width: 30px;
  height: 30px;
  font-size: 16px;
}

.emotion-page-footer.single-action {
  grid-template-columns: minmax(0, 1fr);
}

.emotion-page-footer .special-page-button {
  width: 100%;
}

.comic-emotion-result .feedback {
  display: block;
  margin-top: 14px;
  font-size: 20px;
  line-height: 1.48;
}

.special-page-footer {
  display: grid;
  min-width: 0;
  flex: none;
  gap: 8px;
  padding: 9px 12px max(9px, var(--safe-bottom));
  grid-template-columns: minmax(92px, 2fr) minmax(0, 3fr);
  background: rgba(111, 79, 45, 0.1);
  border-top: 1px solid rgba(107, 77, 46, 0.28);
}

.special-page-button {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 7px 10px;
  color: #f3e2bd;
  background: #4b3628;
  border: 2px solid #806247;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 850;
  line-height: 1.25;
}

.special-page-button.primary {
  background: #8f3028;
  border-color: #ad5a4e;
}

.special-page-button.is-disabled {
  opacity: 0.35;
}

.comic-control-visible {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  pointer-events: none;
  line-height: 24px;
  text-align: center;
  white-space: nowrap;
}

.season-close-page {
  display: grid;
  width: 100%;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  grid-template-rows: minmax(0, 1fr) minmax(62px, auto);
  color: #35281e;
  background: #ead9af;
}

.season-close-body {
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.season-close-art {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(204, 173, 117, 0.035) 0, rgba(204, 173, 117, 0.035) 1px, transparent 1px, transparent 5px),
    #241811;
  border-right: 5px solid #8e3027;
}

.season-close-main-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.season-close-art-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  color: #f0dfba;
  flex-direction: column;
  font-size: 18px;
  line-height: 1.45;
  text-align: center;
}

.season-close-detail-inset {
  position: absolute;
  z-index: 3;
  width: 112px;
  height: 112px;
  overflow: hidden;
  background: #d3bd8e;
  border: 3px solid #f1dfb7;
  border-radius: 8px;
  box-shadow: 0 7px 18px rgba(19, 12, 8, 0.42);
}

.season-close-detail-inset.anchor-top-right {
  top: 10px;
  right: 10px;
}

.season-close-detail-image {
  position: absolute;
  max-width: none;
  max-height: none;
}

.season-close-detail-label {
  position: absolute;
  z-index: 2;
  right: 5px;
  bottom: 5px;
  padding: 3px 7px;
  color: #fff1cb;
  background: rgba(52, 34, 23, 0.9);
  border-radius: 4px;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.2;
}

.season-close-copy {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(0deg, rgba(85, 54, 31, 0.028) 0, rgba(85, 54, 31, 0.028) 1px, transparent 1px, transparent 6px),
    #f0e2bd;
}

.season-close-copy-sheet {
  box-sizing: border-box;
  display: flex;
  min-height: 100%;
  padding: 12px 15px 16px;
  flex-direction: column;
}

.season-close-kicker {
  color: #913128;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 2px;
}

.season-close-caption {
  display: block;
  margin-top: 5px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.34;
}

.season-close-memory-card {
  display: flex;
  margin-top: 9px;
  padding: 9px 11px;
  background: #f6ebce;
  border: 2px solid #9d8058;
  box-shadow: 0 6px 15px rgba(62, 42, 28, 0.12);
  flex-direction: column;
}

.season-close-card-label,
.season-close-line-label {
  color: #913128;
  font-size: 15px;
  font-weight: 850;
}

.season-close-era {
  margin-top: 2px;
  color: #6d533a;
  font-size: 15px;
}

.season-close-quote {
  margin-top: 4px;
  font-size: 20px;
  font-weight: 850;
  line-height: 1.32;
}

.season-close-life-line,
.season-close-family-line {
  display: flex;
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid rgba(113, 83, 50, 0.24);
  flex-direction: column;
  font-size: 16px;
  line-height: 1.32;
}

.season-close-tail {
  display: block;
  margin-top: 8px;
  color: #604934;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.season-close-actions {
  position: relative;
  min-height: 62px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.season-close-actions .memory-action-cell {
  min-height: 54px;
}

.font-xlarge .season-close-caption {
  font-size: 23px;
}

.font-xlarge .season-close-quote {
  font-size: 21px;
}

.font-xlarge .season-close-life-line,
.font-xlarge .season-close-family-line {
  font-size: 17px;
}

.memory-page {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  padding: 0;
  gap: 0;
  background:
    repeating-linear-gradient(0deg, rgba(85, 54, 31, 0.028) 0, rgba(85, 54, 31, 0.028) 1px, transparent 1px, transparent 6px),
    #e9d8ab;
}

.memory-art {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #2c1e16;
  border-right: 5px solid #8e3027;
}

.memory-art-image,
.memory-art-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.memory-cliffhanger-copy {
  display: flex;
  margin-bottom: 9px;
  padding: 9px 11px;
  color: #4d3929;
  background: #ead7aa;
  border-left: 5px solid #8f3028;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 18px;
  font-weight: 750;
  line-height: 1.38;
}

.memory-art-shade {
  pointer-events: none;
  background: linear-gradient(0deg, rgba(34, 22, 15, 0.86), transparent 44%);
}

.memory-cliffhanger {
  position: absolute;
  z-index: 2;
  right: 22px;
  bottom: 18px;
  left: 22px;
  display: flex;
  color: #f2e3bd;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
}

.memory-paper {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 14px 16px 12px;
}

.memory-card-sheet {
  position: relative;
  display: flex;
  box-sizing: border-box;
  min-width: 0;
  justify-content: center;
  min-height: 100%;
  padding: 18px 22px;
  background: #f3e8c9;
  border: 2px solid #9d8058;
  box-shadow: 0 9px 22px rgba(62, 42, 28, 0.16);
  flex-direction: column;
}

.memory-stamp {
  position: absolute;
  top: 18px;
  right: 20px;
  transform: rotate(6deg);
  padding: 8px;
  color: #923026;
  border: 3px double #9f3028;
  font-size: 17px;
  font-weight: 850;
}

.memory-era {
  color: #6d533a;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 18px;
}

.memory-person {
  margin-top: 3px;
  color: #8f2f27;
  font-size: 27px;
  font-weight: 900;
}

.memory-quote {
  display: block;
  max-width: 88%;
  margin-top: 10px;
  font-size: 24px;
  font-weight: 850;
  line-height: 1.48;
}

.memory-action,
.memory-family {
  display: flex;
  margin-top: 9px;
  padding-top: 8px;
  color: #574431;
  border-top: 1px solid rgba(113, 83, 50, 0.24);
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 18px;
  line-height: 1.5;
}

.memory-family-toggle {
  display: flex;
  min-height: 48px;
  margin-top: 8px;
  padding: 6px 14px;
  align-items: center;
  justify-content: center;
  color: #6b3d2d;
  background: rgba(255, 248, 226, 0.72);
  border: 2rpx solid rgba(126, 77, 45, 0.45);
  border-radius: 10px;
  font-size: 18px;
  font-weight: 750;
  line-height: 1.25;
}

.memory-label {
  margin-bottom: 3px;
  color: #8f3028;
  font-size: 17px;
  font-weight: 850;
}

.memory-ending-label {
  margin-bottom: 9px;
  color: #8f3028;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 18px;
  font-weight: 850;
}

.memory-actions {
  display: grid;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  gap: 7px;
  padding: 8px 10px max(8px, var(--safe-bottom));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: rgba(111, 79, 45, 0.1);
  border-top: 1px solid rgba(107, 77, 46, 0.28);
}

.memory-action-cell {
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 5px 8px;
  color: #f3e2bd;
  background: #4b3628;
  border: 2px solid #806247;
  border-radius: 7px;
  font-size: 17px;
  font-weight: 850;
  justify-self: stretch;
  line-height: 22px;
}

.memory-action-visible {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  pointer-events: none;
  line-height: 22px;
  text-align: center;
  white-space: nowrap;
}

.memory-action-cell.report {
  color: #315545;
  background: #dce7d9;
  border-color: #64826e;
}

.memory-action-cell.share {
  color: #5c432f;
  background: #ead9b2;
  border-color: #9a7e56;
}

.memory-action-cell.primary {
  background: #8f3028;
  border-color: #ad5a4e;
}

.c09-p08 .memory-paper-content { display: grid; height: 100%; min-height: 0; gap: 6px; grid-template-rows: auto minmax(0, 1fr); }
.c09-p08 .memory-card-sheet { display: flex; height: 100%; min-height: 0; align-items: stretch; justify-content: flex-start; flex-direction: column; }
.c09-p08 .memory-short-lines { display: flex; min-height: 0; justify-content: space-evenly; gap: 3px; margin-top: 2px; flex: 1; flex-direction: column; }
.c09-p08 .memory-short-line { display: block; padding: 2px 0; color: #574431; border-top: 1px solid rgba(113, 83, 50, 0.24); font-size: 17px; font-weight: 750; line-height: 1.2; }
.c09-p08 .memory-actions { display: flex; flex-wrap: wrap; }
.c09-p08 .memory-action-cell { flex: 1 1 0; }
.c09-p08 .memory-action-cell.primary { min-width: 100%; flex: 1 0 100%; }

.memory-action-cell.is-disabled {
  opacity: 0.42;
}

.comic-focus-visual {
  position: relative;
  height: 210px;
  overflow: hidden;
  margin: -30rpx -34rpx 18rpx;
  background:
    repeating-linear-gradient(0deg, rgba(65, 42, 25, 0.04) 0, rgba(65, 42, 25, 0.04) 1px, transparent 1px, transparent 5px),
    #201711;
}

.comic-focus-scene,
.comic-focus-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.comic-focus-shade {
  pointer-events: none;
  background: linear-gradient(0deg, rgba(28, 20, 15, 0.86), transparent 55%);
}

.comic-focus-name {
  position: absolute;
  z-index: 3;
  bottom: 12px;
  left: 16px;
  display: flex;
  color: #e5c98c;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 17px;
}

.focus-name {
  margin-top: 1px;
  color: #fff0ca;
  font-family: "Songti SC", "STSong", serif;
  font-size: 31px;
  font-weight: 900;
}

.font-xlarge .comic-caption {
  font-size: 24px;
}

.font-xlarge .comic-secondary-caption,
.font-xlarge .comic-tap-prompt {
  font-size: 19px;
}

.font-xlarge .memory-action,
.font-xlarge .memory-family {
  font-size: 21px;
}

.font-xlarge .emotion-context-title {
  font-size: 28px;
}

.font-xlarge .emotion-choice-dock .emotion-choice {
  font-size: 17px;
}

.font-xlarge .emotion-context-caption,
.font-xlarge .memory-cliffhanger-copy {
  font-size: 20px;
}

@media (max-height: 620px) {
  .comic-normal-page {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .comic-art-column {
    padding: 6px;
  }

  .comic-caption-strip {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    border-top: 0;
    border-left: 4px solid #8f2c25;
  }

  .comic-special-page {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }

  .comic-caption-copy {
    padding: 8px 12px;
  }

  .comic-cover-caption-layout {
    align-content: start;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr);
  }

  .comic-cover-caption-layout .comic-caption-kicker {
    font-size: 14px;
    line-height: 1.15;
    letter-spacing: 0;
  }

  .comic-cover-caption-layout .comic-caption-heading {
    margin-top: 2px;
    font-size: 20px;
    line-height: 1.18;
  }

  .comic-cover-caption-layout .comic-cover-caption-text {
    padding-top: 9px;
    padding-left: 0;
    border-top: 2px solid rgba(143, 48, 40, 0.28);
    border-left: 0;
    font-size: 18px;
    line-height: 1.35;
  }

  .comic-ensemble-caption-layout,
  .comic-event-caption-layout {
    align-content: start;
    gap: 9px;
    grid-template-columns: minmax(0, 1fr);
  }

  .comic-ensemble-caption-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .comic-ensemble-caption-layout > .comic-caption-heading {
    font-size: 20px;
    line-height: 1.2;
  }

  .comic-ensemble-caption-copy,
  .comic-event-cue {
    padding-top: 8px;
    padding-left: 0;
    border-top: 2px solid rgba(143, 48, 40, 0.24);
    border-left: 0;
  }

  .comic-ensemble-caption-layout .comic-caption {
    font-size: 18px;
    line-height: 1.35;
  }

  .comic-event-caption-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .comic-event-caption-layout .comic-caption,
  .font-xlarge .comic-event-caption-layout .comic-caption {
    font-size: 20px;
    line-height: 1.38;
  }

  .comic-event-caption-layout .comic-tap-prompt,
  .font-xlarge .comic-event-caption-layout .comic-tap-prompt {
    font-size: 19px;
    line-height: 1.34;
  }

  .comic-caption-heading {
    margin-bottom: 7px;
    font-size: 23px;
  }

  .comic-caption {
    font-size: 20px;
    line-height: 1.45;
  }

  .font-xlarge .comic-caption {
    font-size: 23px;
  }

  .comic-secondary-caption,
  .comic-tap-prompt {
    margin-top: 5px;
    font-size: 18px;
    line-height: 1.42;
  }

  .font-xlarge .comic-secondary-caption,
  .font-xlarge .comic-tap-prompt {
    font-size: 20px;
  }

  .comic-page-nav {
    display: grid;
    gap: 4px;
    padding: 7px 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(107, 77, 46, 0.26);
    border-left: 0;
  }

  .page-turn-button {
    min-width: 0;
    min-height: 52px;
    font-size: 17px;
  }

  .comic-page-nav .folio {
    display: none;
  }

  .cover-copy {
    top: 8%;
    padding: 13px 18px;
  }

  .cover-title {
    font-size: 29px;
  }

  .special-art-copy {
    right: 18px;
    bottom: 18px;
    left: 18px;
  }

  .special-title {
    font-size: 27px;
  }

  .special-caption {
    font-size: 18px;
    line-height: 1.42;
  }

  .emotion-paper {
    padding: 10px 12px 8px;
  }

  .emotion-context {
    margin-bottom: 8px;
    padding-bottom: 7px;
  }

  .emotion-context-title {
    font-size: 21px;
  }

  .emotion-context-caption {
    margin-top: 3px;
    font-size: 16px;
    line-height: 1.3;
  }

  .emotion-paper .emotion-prompt {
    font-size: 21px;
    line-height: 1.28;
  }

  .emotion-choice-dock {
    gap: 5px;
    padding: 5px 8px;
  }

  .emotion-choice-dock .emotion-choice {
    min-height: 52px;
    gap: 6px;
    padding: 5px 7px;
    grid-template-columns: 30px minmax(0, 1fr);
    font-size: 16px;
    line-height: 1.22;
  }

  .emotion-choice-dock .choice-number {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }

  .emotion-page-footer {
    gap: 6px;
    padding: 6px 8px max(6px, var(--safe-bottom));
  }

  .emotion-page-footer .special-page-button {
    min-height: 52px;
  }

  .memory-page {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    padding: 0;
    gap: 0;
  }

  .memory-cliffhanger-copy {
    margin-bottom: 5px;
    padding: 6px 8px;
    font-size: 18px;
    line-height: 1.3;
  }

  .memory-paper {
    padding: 8px;
  }

  .memory-card-sheet {
    display: grid;
    min-height: 100%;
    align-content: start;
    column-gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px 10px;
  }

  .memory-stamp {
    top: 8px;
    right: 8px;
    padding: 4px;
    border-width: 2px;
    font-size: 14px;
  }

  .memory-era {
    grid-column: 1 / -1;
    padding-right: 72px;
    font-size: 15px;
  }

  .memory-person {
    grid-column: 1 / -1;
    margin-top: 1px;
    font-size: 22px;
  }

  .memory-quote {
    grid-column: 1 / -1;
    max-width: 100%;
    margin-top: 4px;
    font-size: 19px;
    line-height: 1.3;
  }

  .memory-action,
  .memory-family {
    min-width: 0;
    margin-top: 4px;
    padding-top: 3px;
    font-size: 16px;
    line-height: 1.2;
  }

  .memory-label {
    margin-bottom: 1px;
    font-size: 14px;
  }

  .memory-actions {
    gap: 4px;
    padding: 6px max(6px, var(--safe-right)) max(6px, var(--safe-bottom)) 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .memory-action-cell {
    min-height: 54px;
    padding: 4px 3px;
    font-size: 17px;
    line-height: 22px;
  }

  .comic-focus-visual {
    height: 128px;
    margin: -12px -16px 10px;
  }

  .comic-focus-name {
    right: 12px;
    bottom: 9px;
    left: 12px;
  }

  .comic-fallback-actor-button {
    left: 10px;
    right: 10px;
    bottom: 9px;
    width: calc(100% - 20px);
    min-width: 0;
    min-height: 56px;
    gap: 7px;
    padding: 7px 11px;
  }

  .fallback-proof-label {
    font-size: 14px;
  }

  .fallback-actor-action {
    font-size: 17px;
  }
}

@media (max-width: 700px) and (max-height: 400px) {
  .compact-height.font-xlarge .emotion-paper .emotion-prompt {
    font-size: 23px;
  }

  .compact-height.font-xlarge .emotion-choice-dock .emotion-choice {
    font-size: 17px;
  }

  .compact-height.font-xlarge .emotion-choice-dock {
    gap: 5px;
  }

  .compact-height .memory-page {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }

  .compact-height .memory-paper {
    padding: 5px;
  }

  .compact-height .memory-card-sheet {
    column-gap: 6px;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    padding: 5px 8px;
  }

  .compact-height .memory-stamp {
    top: 5px;
    right: 5px;
    padding: 3px;
    font-size: 13px;
  }

  .compact-height .memory-era {
    padding-right: 62px;
    font-size: 15px;
    line-height: 1.15;
  }

  .compact-height .memory-person {
    font-size: 21px;
    line-height: 1.12;
  }

  .compact-height .memory-quote {
    margin-top: 2px;
    font-size: 18px;
    line-height: 1.18;
  }

  .compact-height .memory-action,
  .compact-height .memory-family {
    margin-top: 2px;
    padding-top: 2px;
    font-size: 17px;
    line-height: 1.16;
  }

  .compact-height.font-xlarge .memory-action,
  .compact-height.font-xlarge .memory-family {
    font-size: 19px;
  }

  .compact-height.font-xlarge .memory-era {
    font-size: 17px;
  }

  .compact-height.font-xlarge .memory-person {
    font-size: 24px;
  }

  .compact-height.font-xlarge .memory-quote {
    font-size: 21px;
  }

  .compact-height.font-xlarge .memory-label {
    font-size: 16px;
  }

  .compact-height .memory-label {
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.1;
  }

  .compact-height .memory-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compact-height .memory-action-cell {
    min-height: 50px;
    padding: 4px 8px;
  }

  .compact-height .c09-p08 .memory-paper { padding: 4px 5px; }
  .compact-height .c09-p08 .memory-paper-content { gap: 2px; }
  .compact-height .c09-p08 .memory-cliffhanger-copy { display: block; margin-bottom: 0; padding: 2px 5px; font-size: 14px; line-height: 1.12; }
  .compact-height .c09-p08 .memory-ending-label { margin-right: 5px; color: #8f3028; font-size: 12px; line-height: 1.12; }
  .compact-height .c09-p08 .memory-card-sheet { display: flex; padding: 4px 6px; border-width: 1px; flex-direction: column; }
  .compact-height .c09-p08 .memory-stamp { top: 4px; right: 4px; padding: 2px; border-width: 1px; font-size: 11px; line-height: 1.05; }
  .compact-height .c09-p08 .memory-era { padding-right: 63px; font-size: 13px; line-height: 1.08; }
  .compact-height .c09-p08 .memory-person { margin-top: 0; font-size: 17px; line-height: 1.06; }
  .compact-height .c09-p08 .memory-short-lines { gap: 2px; margin-top: 1px; }
  .compact-height .c09-p08 .memory-short-line { padding: 1px 0; font-size: 17px; line-height: 1.16; }
  .compact-height .c09-p08 .memory-actions { gap: 4px; padding: 3px 6px max(3px, var(--safe-bottom)); }
  .compact-height .c09-p08 .memory-action-cell { min-height: 48px; padding: 2px 3px; font-size: 14px; line-height: 18px; }

  .compact-height .season-close-actions {
    min-height: 62px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .compact-height .season-close-actions .memory-action-cell {
    min-height: 54px;
    padding: 4px 6px;
  }

  .compact-height .season-close-copy-sheet {
    padding: 9px 11px 13px;
  }

  .compact-height .decision-dialog {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }

  .compact-height .character-story-inner {
    padding: 10px 14px 28px;
  }

  .compact-height .comic-focus-visual {
    height: 108px;
    margin: -10px -14px 8px;
  }

  .compact-height .judgement-scroll-inner {
    padding: 8px 9px;
  }

  .compact-height .judgement-question {
    font-size: 20px;
    line-height: 1.16;
  }

  .compact-height.font-xlarge .judgement-question {
    font-size: 21px;
  }

  .compact-height .judgement-options {
    gap: 5px;
    margin-top: 6px;
  }

  .compact-height .judgement-button {
    min-height: 56px;
  }
}

@media (min-height: 621px) {
  .comic-normal-page {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .comic-caption-strip {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    border-top: 0;
    border-left: 4px solid #8f2c25;
  }

  .comic-page-nav {
    border-top: 1px solid rgba(107, 77, 46, 0.26);
    border-left: 0;
  }
}

/*
 * WeChat DevTools can report the portrait media-query height after the
 * simulator has rotated to landscape.  The page logic already derives the
 * real short-landscape state, so keep the lianhuanhua spread tied to that
 * state as the authoritative fallback.
 */
.compact-height .comic-normal-page {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  grid-template-rows: minmax(0, 1fr);
}

.compact-height .comic-art-column {
  padding: 6px;
}

.compact-height .comic-caption-strip {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  border-top: 0;
  border-left: 4px solid #8f2c25;
}

.compact-height .comic-caption-strip.has-outside-actor-guide {
  grid-template-rows: minmax(0, 1fr) auto auto;
}

.compact-height .comic-caption-copy {
  padding: 8px 12px;
}

.compact-height .emotion-context {
  margin-bottom: 4px;
  padding-bottom: 4px;
}

.compact-height .emotion-context-kicker,
.compact-height .emotion-context-title {
  display: none;
}

.compact-height .emotion-context-caption {
  margin-top: 0;
  font-size: 17px;
  line-height: 1.28;
}

.compact-height.font-xlarge .emotion-context-caption {
  font-size: 18px;
}

.compact-height .comic-outside-action-dock { display: grid; min-width: 0; align-items: center; gap: 6px; padding: 0 12px 6px; grid-template-columns: minmax(0, 1fr); }
.compact-height .comic-outside-action-dock.has-art-tap-note { grid-template-columns: auto minmax(0, 1fr); }
.compact-height .comic-outside-action-dock .comic-art-tap-note { max-width: 82px; font-size: 13px; line-height: 1.2; text-align: center; }
.compact-height .comic-outside-action-dock .comic-outside-actor-dock { width: 100%; min-height: 52px; margin: 0; padding: 6px; font-size: 16px; line-height: 1.25; }

.compact-height .comic-cover-caption-layout,
.compact-height .comic-ensemble-caption-layout,
.compact-height .comic-event-caption-layout {
  align-content: start;
  gap: 9px;
  grid-template-columns: minmax(0, 1fr);
}

.compact-height .comic-cover-caption-text,
.compact-height .comic-ensemble-caption-copy,
.compact-height .comic-event-cue {
  padding-top: 8px;
  padding-left: 0;
  border-top: 2px solid rgba(143, 48, 40, 0.26);
  border-left: 0;
}

.compact-height .comic-event-caption-layout .comic-caption {
  font-size: 18px;
  line-height: 1.35;
}

.compact-height .comic-event-caption-layout .comic-tap-prompt {
  font-size: 17px;
  line-height: 1.3;
}

.compact-height.font-xlarge .comic-event-caption-layout .comic-caption {
  font-size: 21px;
  line-height: 1.4;
}

.compact-height.font-xlarge .comic-event-caption-layout .comic-tap-prompt {
  font-size: 19px;
  line-height: 1.35;
}

.compact-height .comic-page-nav {
  display: grid;
  gap: 4px;
  padding: 7px 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(107, 77, 46, 0.26);
  border-left: 0;
}

.compact-height .page-turn-button {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  font-size: 17px;
}

.compact-height .comic-page-nav .folio {
  display: none;
}

.compact-height .c1-book-topbar {
  gap: 7px;
}

.compact-height .c1-audio-slot {
  width: 92px;
  min-width: 92px;
}

.compact-height .c1-front-folio {
  right: 10px;
  bottom: 9px;
  left: auto;
  min-height: 40px;
  padding: 0 13px;
}

.compact-height .c1-front-title {
  font-size: 21px;
}

.compact-height .c1-front-hint {
  font-size: 15px;
}

.compact-height .c1-previous-page {
  bottom: 9px;
  left: 9px;
  width: 48px;
  height: 52px;
}

.compact-height .c1-back-paper {
  grid-template-columns: minmax(190px, 2fr) minmax(0, 3fr);
}

.compact-height .c1-back-copy-inner {
  gap: 5px;
  padding: 9px 14px 8px;
}

.compact-height .c1-back-kicker,
.compact-height .c1-back-label {
  font-size: 14px;
}

.compact-height .c1-back-title {
  font-size: 24px;
  line-height: 1.16;
}

.compact-height.font-xlarge .c1-back-title {
  font-size: 27px;
}

.compact-height .c1-back-body,
.compact-height .c1-back-secondary,
.compact-height .c1-back-reason,
.compact-height .c1-back-family,
.compact-height .c1-back-callout,
.compact-height .c1-back-action {
  font-size: 18px;
  line-height: 1.35;
}

.compact-height.font-xlarge .c1-back-body,
.compact-height.font-xlarge .c1-back-secondary,
.compact-height.font-xlarge .c1-back-reason,
.compact-height.font-xlarge .c1-back-family,
.compact-height.font-xlarge .c1-back-callout,
.compact-height.font-xlarge .c1-back-action {
  font-size: 20px;
}

.compact-height .c1-back-callout,
.compact-height .c1-back-action {
  padding: 6px 9px;
}

.compact-height .c1-back-footer {
  gap: 7px;
  padding: 6px 8px;
}

.compact-height .c1-memory-footer {
  gap: 5px;
}

.compact-height .c1-memory-footer .c1-back-button {
  min-height: 48px;
  font-size: 16px;
}

.compact-height .c1-back-button {
  min-height: 50px;
  font-size: 17px;
}

.compact-height .c1-decision-layer {
  padding: 0;
}

.compact-height .c1-interaction-paper {
  grid-template-columns: minmax(190px, 2fr) minmax(0, 3fr);
}

.compact-height .c1-interaction-panel {
  gap: 7px;
  padding: 10px 12px;
}

.compact-height .c1-interaction-panel .c1-tray-heading {
  padding-right: 88px;
}

.compact-height .c1-choice-stack {
  gap: 7px;
  grid-template-rows: repeat(2, minmax(62px, auto));
}

.compact-height .c1-decision-tray,
.compact-height .c1-emotion-tray {
  min-height: 105px;
  gap: 7px;
  padding: 9px 49px 9px 10px;
  grid-template-columns: minmax(185px, 1fr) repeat(2, minmax(0, 1fr));
}

.compact-height .c1-emotion-tray {
  right: 8px;
  bottom: 8px;
  left: 8px;
}

.compact-height .c1-tray-question {
  font-size: 18px;
  line-height: 1.28;
}

.compact-height .c1-natural-choice {
  min-height: 62px;
  padding: 6px 9px;
  font-size: 17px;
  line-height: 1.28;
}

.compact-height .c1-tray-close {
  top: 7px;
  right: 7px;
  width: auto;
  min-width: 82px;
  height: 48px;
  min-height: 48px;
  font-size: 16px;
}

.compact-height .c1-retry-tray {
  grid-template-columns: minmax(0, 1.3fr) minmax(190px, 0.7fr);
}

.compact-height .c1-retry-title {
  font-size: 20px;
}

.compact-height .c1-retry-copy {
  font-size: 17px;
  line-height: 1.3;
}

.compact-height .c1-retry-button {
  min-height: 52px;
  font-size: 17px;
}