:root {
  --stage-width: 520px;
  --cream: #fffef0;
  --ink: #5d4434;
  --pink-dark: #df7078;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100svh;
  overflow: hidden;
  background: #f2ede1;
  color: var(--ink);
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

button {
  font: inherit;
}

.app-shell {
  position: relative;
  width: min(100vw, var(--stage-width));
  height: 100svh;
  min-height: 520px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--cream);
}

.page {
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.scene-page,
.emotion-page {
  background-image: url("01_无字场景背景_重建/bg_spring_春日小巷.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.quiz-header {
  position: absolute;
  inset: max(24px, env(safe-area-inset-top)) 28px auto;
  z-index: 8;
  height: 44px;
}

.question-count,
.sound-button {
  position: absolute;
  top: 7px;
  color: var(--ink);
  font-size: 15px;
  letter-spacing: 0.04em;
}

.question-count {
  left: 62px;
}

.sound-button {
  right: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.sound-button[aria-pressed="true"] {
  color: var(--pink-dark);
}

.page.is-active {
  display: block;
}

.page.is-visible {
  opacity: 1;
}

.mascot {
  position: absolute;
  z-index: 1;
  bottom: clamp(150px, 25vh, 220px);
  left: 50%;
  width: min(180px, 48vw);
  height: auto;
  transform: translateX(-50%);
}

.home-eyebrow {
  position: absolute;
  top: clamp(24px, 5vh, 46px);
  left: 24px;
  z-index: 2;
  margin: 0;
  color: #80604c;
  font-family: "STKaiti", "KaiTi", "Microsoft YaHei", sans-serif;
  font-size: 17px;
  letter-spacing: 0.12em;
}

.home-title {
  position: absolute;
  top: clamp(88px, 16vh, 145px);
  right: 20px;
  left: 20px;
  z-index: 2;
  margin: 0;
  color: #4a3a32;
  font-family: "STKaiti", "KaiTi", "Microsoft YaHei", sans-serif;
  font-size: clamp(27px, 7.8vw, 36px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-align: center;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.65);
}

.home-actions {
  position: absolute;
  z-index: 2;
  bottom: clamp(28px, 5vh, 48px);
  left: 50%;
  display: flex;
  width: min(260px, 72vw);
  flex-direction: column;
  gap: 9px;
  transform: translateX(-50%);
}

.primary-button,
.secondary-button,
.emotion-button,
.text-button {
  min-height: 44px;
  padding: 8px 22px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.primary-button {
  color: #fff;
  background: var(--pink-dark);
  box-shadow: 0 5px 0 rgba(155, 87, 77, 0.18);
}

.secondary-button {
  color: var(--pink-dark);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 3px 12px rgba(111, 73, 52, 0.12);
}

.text-button {
  min-height: 34px;
  color: var(--ink);
  background: transparent;
  font-size: 14px;
}

.primary-button:hover,
.secondary-button:hover,
.emotion-button:hover,
.text-button:hover,
.history-card:hover,
.primary-button:focus-visible,
.secondary-button:focus-visible,
.emotion-button:focus-visible,
.text-button:focus-visible,
.history-card:focus-visible {
  transform: translateY(-2px);
}

.question-title {
  position: absolute;
  top: 10%;
  right: 42px;
  left: 42px;
  z-index: 6;
  margin: 0;
  color: var(--ink);
  font-family: "Zhi Mang Xing", "STKaiti", "KaiTi", sans-serif;
  font-size: clamp(28px, 6.7vw, 40px);
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.question-stage {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
}

.question-choice {
  position: absolute;
  display: block;
  width: auto;
  max-width: 42%;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.question-choice img {
  display: block;
  width: 100%;
  max-width: 170px;
  max-height: 150px;
  object-fit: contain;
}

.question-choice span {
  display: block;
  width: max-content;
  max-width: 190px;
  margin-top: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid currentColor;
  font-size: clamp(15px, 3.2vw, 20px);
  line-height: 1.35;
}

.question-choice:hover span,
.question-choice:focus-visible span {
  color: var(--pink-dark);
}

.question-stage-1 .question-choice-0 {
  top: 38%;
  right: 12%;
  width: 80px;
}

.question-stage-1 .question-choice-1 {
  right: 10%;
  bottom: 17%;
  width: 90px;
}

.question-stage-1 .question-choice-2 {
  bottom: 30%;
  left: 10%;
  width: 120px;
}

.question-stage-2 .question-choice-0 {
  top: 28%;
  left: 9%;
  width: 120px;
}

.question-stage-2 .question-choice-1 {
  bottom: 18%;
  left: 9%;
  width: 90px;
}

.question-stage-2 .question-choice-2 {
  bottom: 17%;
  left: 42%;
  width: 135px;
}

.question-stage-2 .question-choice-3 {
  right: 9%;
  bottom: 18%;
  width: 105px;
}

.question-stage-3 .question-choice-0 {
  top: 25%;
  left: 8%;
  width: 125px;
}

.question-stage-3 .question-choice-1 {
  top: 25%;
  right: 8%;
  width: 155px;
}

.question-stage-3 .question-choice-2 {
  bottom: 18%;
  left: 9%;
  width: 115px;
}

.question-stage-3 .question-choice-3 {
  right: 9%;
  bottom: 18%;
  width: 135px;
}

.question-stage-4 .question-choice-0 {
  top: 28%;
  left: 7%;
  width: 230px;
}

.question-stage-4 .question-choice-1 {
  right: 8%;
  bottom: 24%;
  width: 145px;
}

.question-stage-5 .question-choice-0 {
  top: 31%;
  left: 8%;
  width: 130px;
}

.question-stage-5 .question-choice-1 {
  top: 31%;
  right: 8%;
  width: 145px;
}

.question-stage-5 .question-choice-2 {
  bottom: 22%;
  right: 10%;
  width: 95px;
}

.question-stage-5 .question-choice-3 {
  bottom: 22%;
  left: 8%;
  width: 120px;
}

.question-stage-6 .question-choice-0 {
  top: 43%;
  left: 9%;
  width: 145px;
}

.question-stage-6 .question-choice-1 {
  top: 43%;
  right: 9%;
  width: 145px;
}

.question-stage-6 .question-choice-2 {
  bottom: 15%;
  left: 9%;
  width: 145px;
}

.quiz-dark {
  color: #fff;
  background-color: #1d3762;
  transition: background-color 350ms ease, background-image 350ms ease;
}

.quiz-dark .question-title {
  top: 29%;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);
}

.quiz-dark .season-caption,
.quiz-dark .question-choice {
  color: #fff;
}

.quiz-dark .question-choice span {
  border-color: rgba(255, 255, 255, 0.88);
}

.question-stage-7 .question-choice-0 {
  top: 40%;
  left: 10%;
  width: 80px;
}

.question-stage-7 .question-choice-1 {
  top: 40%;
  right: 10%;
  width: 100px;
}

.question-stage-7 .question-choice-2 {
  top: 60%;
  left: 30%;
  width: 120px;
}

.question-stage-8 .question-choice-0 {
  top: 50%;
  left: 15%;
  width: 120px;
}

.question-stage-8 .question-choice-1 {
  top: 50%;
  right: 15%;
  width: 120px;
}

.question-8 .question-title {
  top: 64%;
}

.q01-options {
  position: absolute;
  inset: 0;
  z-index: 4;
}

.q01-options[hidden] {
  display: none;
}

.q01-choice {
  position: absolute;
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.q01-choice img {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
}

.q01-choice span {
  display: block;
  width: max-content;
  max-width: 180px;
  margin-top: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid currentColor;
  font-size: clamp(15px, 3.2vw, 20px);
  line-height: 1.35;
}

.q01-choice:hover span,
.q01-choice:focus-visible span {
  color: var(--pink-dark);
}

.q01-choice-windchime {
  top: 38%;
  right: 12%;
}

.q01-choice-windchime img {
  width: 80px;
}

.q01-choice-cat {
  right: 10%;
  bottom: 17%;
}

.q01-choice-cat img {
  width: 90px;
}

.q01-choice-music {
  bottom: 30%;
  left: 10%;
}

.q01-choice-music img {
  width: 120px;
}

.back-button {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  font-size: 25px;
  line-height: 1;
  transition: background 160ms ease, transform 160ms ease;
}

.back-button:hover,
.back-button:focus-visible {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}

.q02-svg-host {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: var(--cream);
}

.q02-svg-host[hidden] {
  display: none;
}

.q02-svg-host svg {
  display: block;
  width: 100%;
  height: 100%;
}

.q02-svg-host .svg-choice {
  cursor: pointer;
  transition: opacity 160ms ease, filter 160ms ease;
}

.q02-svg-host .svg-choice:hover,
.q02-svg-host .svg-choice:focus {
  filter: drop-shadow(0 0 5px rgba(223, 112, 120, 0.85));
  opacity: 0.86;
}

.q02-svg-host .svg-choice text,
.q02-svg-host .svg-choice tspan {
  cursor: pointer;
}

.q02-svg-error {
  align-self: center;
  max-width: 290px;
  padding: 20px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.8;
  text-align: center;
}

.answer-option {
  position: absolute;
  z-index: 2;
  display: block;
  width: auto;
  height: auto;
  cursor: pointer;
  transition: transform 220ms ease;
}

.answer-choice {
  position: absolute;
  z-index: 4;
  display: block;
  width: 35%;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.answer-choice[hidden] {
  display: none;
}

.answer-choice .answer-label {
  display: block;
  width: fit-content;
  max-width: 190px;
  margin-top: 5px;
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
  font-size: clamp(15px, 3.2vw, 20px);
  line-height: 1.35;
}

.answer-choice .answer-option {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 150px;
  object-fit: contain;
  transform: none;
}

.answer-choice .answer-option.is-visible {
  display: block;
}

.answer-choice:hover .answer-label,
.answer-choice:focus-visible .answer-label {
  color: var(--pink-dark);
}



.option-windchime {
  top: clamp(190px, 29vh, 275px);
  left: 7%;
  width: 80px;
}

.option-cat {
  bottom: clamp(42px, 8vh, 76px);
  left: 3%;
  width: 90px;
}

.option-music {
  top: clamp(78px, 12vh, 120px);
  left: 7%;
  width: 120px;
}

.option-ticket {
  top: 31%;
  left: 8%;
  width: min(145px, 37vw);
}

.option-door {
  top: clamp(180px, 28vh, 260px);
  left: 50%;
  width: min(150px, 38vw);
  transform: translateX(-50%);
}

.option-placeholder {
  top: 42%;
  left: 50%;
  width: 96px;
  height: 96px;
  opacity: 0;
  pointer-events: none;
}

.option-envelope {
  top: clamp(210px, 34vh, 320px);
  left: 8%;
  width: min(140px, 36vw);
}

.option-cloud {
  top: clamp(165px, 27vh, 250px);
  right: 4%;
  width: min(190px, 48vw);
}

.option-shell {
  right: 11%;
  bottom: clamp(48px, 10vh, 90px);
  width: min(115px, 30vw);
}

.option-bridge,
.option-ripple {
  width: min(170px, 43vw);
}

.option-bridge {
  top: 35%;
  left: 4%;
}

.option-ripple {
  right: 4%;
  bottom: 20%;
}

.option-lantern,
.option-map,
.option-notebook {
  width: min(125px, 32vw);
}

.option-lantern {
  right: 7%;
  bottom: 23%;
  left: auto;
}

.option-lantern {
  top: 30%;
  left: 7%;
}

.option-map {
  top: 26%;
  right: 7%;
}

.option-notebook {
  bottom: 16%;
  left: 35%;
}

.option-yarnball,
.option-bow {
  width: min(165px, 42vw);
  left: 50%;
  transform: translateX(-50%);
}

.option-coil {
  bottom: 16%;
  left: 8%;
}

.option-yarnball {
  top: 25%;
}

.option-bow {
  bottom: 15%;
}

.option-held,
.option-unsaid,
.option-walked,
.option-coil,
.option-onward {
  width: min(145px, 37vw);
}

.option-held {
  top: 28%;
  left: 6%;
}

.option-unsaid {
  top: 24%;
  right: 7%;
}

.option-walked {
  bottom: 15%;
  left: 35%;
}

.option-coil {
  width: min(145px, 37vw);
}

.season-caption {
  position: absolute;
  right: 24px;
  bottom: max(22px, env(safe-area-inset-bottom));
  left: 24px;
  z-index: 5;
  margin: 0;
  color: #947f70;
  font-size: clamp(13px, 3.2vw, 18px);
  letter-spacing: 0.05em;
  text-align: center;
}

@font-face {
  font-family: "Zhi Mang Xing";
  src: url("10_字体与色卡/zhi-mang-xing-chinese-simplified-400-normal.woff2") format("woff2");
  font-display: swap;
}

.option-onward {
  right: 8%;
  bottom: 20%;
}

.emotion-content,
.detail-content,
.share-content {
  position: absolute;
  top: 50%;
  right: 24px;
  left: 24px;
  transform: translateY(-50%);
}

.emotion-title,
.section-title {
  margin: 0 0 28px;
  color: var(--ink);
  font-size: clamp(22px, 6vw, 28px);
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

.emotion-actions,
.result-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.emotion-button {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 4px 14px rgba(111, 73, 52, 0.14);
  font-size: 18px;
}

.status-page,
.result-page,
.simple-page {
  background: var(--cream);
  text-align: center;
}

.status-page.is-active,
.result-page.is-active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.status-page p,
.result-text,
.poster-explanation {
  margin: 0;
  font-size: 21px;
  line-height: 1.6;
}

.loading-dots {
  display: inline-flex;
  gap: 5px;
  margin-left: 5px;
  vertical-align: middle;
}

.loading-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink-dark);
  animation: dot-bounce 900ms ease-in-out infinite;
}

.loading-dots i:nth-child(2) {
  animation-delay: 150ms;
}

.loading-dots i:nth-child(3) {
  animation-delay: 300ms;
}

@keyframes dot-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(-6px);
  }
}

#failure-state p {
  margin-bottom: 20px;
}

.poster-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(340px, 88vw);
  min-height: 440px;
  padding: 24px 22px;
  border: 1px solid rgba(185, 143, 95, 0.35);
  border-radius: 18px;
  background: #fffaf0;
  box-shadow: 0 14px 32px rgba(104, 72, 43, 0.2);
  text-align: center;
}

.result-page .poster-container {
  margin: 20px auto 12px;
}

.poster-kicker {
  margin: 0 0 12px;
  color: #b48654;
  font-size: 12px;
  letter-spacing: 0.16em;
}

.poster-title {
  margin: 0 0 16px;
  color: var(--ink);
  font-size: clamp(25px, 7vw, 32px);
  line-height: 1.35;
}

.poster-art {
  display: flex;
  width: 100%;
  min-height: 215px;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 12px;
  background: rgba(255, 246, 222, 0.7);
}

.result-image {
  display: block;
  width: min(220px, 64vw);
  max-height: 245px;
  object-fit: contain;
}

.poster-traits {
  margin: 14px 0 0;
  color: #a26d45;
  font-size: 13px;
  letter-spacing: 0.12em;
}

.result-text {
  margin: 8px 0 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.7;
}

.poster-explanation {
  margin-top: 16px;
  color: #7a604d;
  font-size: 14px;
  line-height: 1.8;
}

.result-actions {
  display: flex;
  width: min(270px, 74vw);
  margin: 0 auto 18px;
  flex-direction: column;
  gap: 10px;
}

.culture-page,
.detail-page,
.share-page {
  padding: 32px 20px;
}

.culture-page .section-title {
  margin-bottom: 18px;
}

.history-cards {
  display: flex;
  height: calc(100% - 60px);
  flex-direction: column;
  gap: 10px;
}

.history-card {
  min-height: 0;
  flex: 1;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(111, 73, 52, 0.16);
  cursor: pointer;
  transition: transform 160ms ease;
}

.history-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-content {
  padding-bottom: 24px;
}

.detail-content p {
  margin: 0 auto 28px;
  max-width: 310px;
  font-size: 17px;
  line-height: 2;
}

.share-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 100%;
  overflow: auto;
}

.share-heading {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 600;
}

.share-page .poster-container {
  width: min(340px, 88vw);
  min-height: 390px;
  padding: 18px;
}

.share-page .poster-art {
  min-height: 175px;
}

.share-page .result-image {
  max-height: 190px;
}

.share-actions {
  display: flex;
  width: min(270px, 74vw);
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.save-status {
  min-height: 22px;
  margin: 8px 0 0;
  color: var(--pink-dark);
  font-size: 13px;
}

@media (max-height: 620px) {
  .mascot {
    bottom: 135px;
  }

  .home-actions {
    bottom: 14px;
  }

  .history-cards {
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .answer-option,
  .primary-button,
  .secondary-button,
  .emotion-button,
  .text-button,
  .history-card {
    transition: none;
  }
}