/* 字体定义 */
/* 重置与基础 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.7;
}

/* 答题页满宽:脱离 .q2-page 的 420px 限制 */
/* 答题页激活时锁定背景滚动, 结果页激活时 body 可正常纵向滚动 */
#screen-quiz.active {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding: 0;
  margin: 0;
  z-index: 100;
  overflow: hidden;
}

/* 页面容器 - 背景图 */
.page-container {
  min-height: 100vh;
  min-height: 100dvh;
  background: url('assets/quiz2-webp/scenes/scene-t15.webp?v=2') center center / cover no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 20px 48px;
  position: relative;
  overflow: hidden;
}

.page-container::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 55vw;
  height: 40vh;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255, 235, 100, 0.95) 0%, rgba(245, 224, 176, 0.6) 35%, rgba(245, 224, 176, 0) 70%);
  z-index: 0;
  pointer-events: none;
  animation: lampBreath 1.5s ease-in-out infinite;
}

.page-container > * {
  position: relative;
  z-index: 1;
}

@keyframes lampBreath {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 0.90; }
}



/* 内容保护层 - 文字区域极淡渐变蒙版 */
.content-protection {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(251, 246, 238, 0) 0%,
    rgba(251, 246, 238, 0.10) 25%,
    rgba(251, 246, 238, 0.14) 45%,
    rgba(251, 246, 238, 0.10) 65%,
    rgba(251, 246, 238, 0) 82%
  );
}



/* 柔光扫过遮罩 */
.bg-fade-layer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 150%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    90deg,
    rgba(251, 246, 238, 0) 0%,
    rgba(251, 246, 238, 0.18) 25%,
    rgba(251, 246, 238, 0.52) 45%,
    rgba(251, 246, 238, 0.65) 50%,
    rgba(251, 246, 238, 0.52) 55%,
    rgba(251, 246, 238, 0.18) 75%,
    rgba(251, 246, 238, 0) 100%
  );
}

.bg-fade-layer.sweep {
  opacity: 1;
  animation: lightSweep 0.6s ease-in-out forwards;
}

@keyframes lightSweep {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* 答题中间提示 (随柔光转场出现,1.3秒后消失) */
.quiz-midtip {
  position: absolute;
  top: 62%;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 28px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  font-size: 15px;
  font-weight: 500;
  color: rgba(46, 42, 36, 0.75);
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: opacity 0.3s ease-in-out;
}
.quiz-midtip.show {
  opacity: 1;
}

/* 窗外星星 */
.star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 248, 220, 0.95);
  box-shadow: 0 0 4px rgba(255, 248, 220, 0.5);
  z-index: 0;
  pointer-events: none;
}

.star-1 {
  top: 16%;
  right: 14%;
  animation: starTwinkle1 4s ease-in-out infinite;
}

.star-2 {
  top: 20%;
  right: 20%;
  animation: starTwinkle2 3.2s ease-in-out infinite;
  animation-delay: -1.2s;
}

.star-3 {
  top: 13%;
  right: 22%;
  animation: starTwinkle3 5s ease-in-out infinite;
  animation-delay: -2.5s;
}

.star-4 {
  top: 24%;
  right: 10%;
  animation: starTwinkle1 4.5s ease-in-out infinite;
  animation-delay: -3s;
}

@keyframes starTwinkle1 {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.95; }
}

@keyframes starTwinkle2 {
  0%, 100% { opacity: 0.35; }
  40% { opacity: 0.9; }
  70% { opacity: 0.5; }
}

@keyframes starTwinkle3 {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.85; }
}

/* 手机屏幕微光 */
.phone-glow {
  position: absolute;
  bottom: 14%;
  left: 65%;
  width: 6vw;
  height: 10vh;
  background: radial-gradient(ellipse at center, rgba(200, 220, 255, 0.75) 0%, rgba(200, 220, 255, 0.3) 50%, rgba(200, 220, 255, 0) 80%);
  z-index: 0;
  pointer-events: none;
  animation: phoneGlow 4s ease-in-out infinite;
  animation-delay: -1.5s;
}

@keyframes phoneGlow {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.9; }
}

/* 环境光尘层 - 外层固定容器(带蒙版 + screen混合) */
.ambient-dust {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,0) 70%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,0) 70%);
  mix-blend-mode: screen;
  overflow: hidden;
}

/* 环境光尘层 - 内层(做位移动画 + 呼吸) */
.ambient-dust-sink {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform, opacity;
}

.ambient-dust-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300%;
  background: url('assets/quiz2-webp/ambient/ambient-dust.webp?v=2') 0 0 / 230% repeat;
  opacity: 0.4;
  animation: dustDrift 40s linear infinite, dustBreath 8s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes dustDrift {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, -33.333%, 0); }
}

@keyframes dustBreath {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.45; }
}

/* 第二题 A 好奇:全屏飘心粒子层(背景层之上、内容层之下) */
.heart-rain-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  pointer-events: none;
  overflow: hidden;
}

.heart-rain {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

@keyframes heartRain {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(0deg) scale(0.6);
  }
  6% {
    opacity: 0.5;
  }
  85% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: translate(var(--sway, 0px), calc(-100vh - 60px)) rotate(var(--rot, 0deg)) scale(0.4);
  }
}

/* 第一题 A 爆发:全向炸开粒子层(复用 heart-rain-layer) */
.burst-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

@keyframes burstParticle {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
  }
  8% {
    opacity: 1;
    transform: translate(calc(-50% + var(--tx, 0px) * 0.5), calc(-50% + var(--ty, 0px) * 0.5)) scale(1) rotate(calc(var(--rot, 0deg) * 0.3));
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(0.1) rotate(var(--rot, 0deg));
  }
}

/* 第一题 B 快乐:横向跳跃掠过粒子层(复用 heart-rain-layer) */
.happy-particle {
  position: absolute;
  left: -60px;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  animation: happyRun 1500ms cubic-bezier(0.3, 0.2, 0.5, 1) forwards;
}

.happy-particle-inner {
  will-change: transform;
  animation: happyBounce var(--bounce-dur, 600ms) ease-in-out infinite;
}

@keyframes happyRun {
  0% {
    opacity: 0;
    transform: translateX(0) scale(0.6);
  }
  6% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(calc(100vw + 120px)) scale(0.5);
  }
}

@keyframes happyBounce {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50%      { transform: translateY(var(--bounce, -30px)) rotate(8deg); }
}

/* 第二题 B 馋:从天而降粒子层(复用 heart-rain-layer) */
.hungry-particle {
  position: absolute;
  top: -60px;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  animation: hungryFall 1800ms cubic-bezier(0.3, 0.05, 0.7, 0.95) forwards;
}

.hungry-particle-inner {
  will-change: transform;
  animation: hungrySwayFall var(--sway-dur, 700ms) ease-in-out infinite;
}

@keyframes hungryFall {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.6);
  }
  6% {
    opacity: 0.5;
  }
  85% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: translateY(calc(100vh + 120px)) scale(0.4);
  }
}

@keyframes hungrySwayFall {
  0%, 100% { transform: translateX(0) rotate(-12deg); }
  50%      { transform: translateX(var(--sway, 15px)) rotate(12deg); }
}

/* 第一题 E 平和:涟漪扩散层(复用 heart-rain-layer) */
.ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(
    circle,
    transparent 0%,
    transparent 46%,
    rgba(251, 246, 238, 0.55) 50%,
    rgba(251, 246, 238, 0.25) 53%,
    transparent 57%,
    transparent 100%
  );
}

.ripple.r1 {
  animation: rippleSpread 1200ms ease-out forwards;
}

.ripple.r2 {
  animation: rippleSpread 1200ms ease-out forwards;
  animation-delay: 250ms;
}

@keyframes rippleSpread {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* 背景响应层 - 点击选项时背景轻微明暗回应 */
.bg-response-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
}

.bg-response-layer.flash-a {
  background: rgba(255, 255, 255, 1);
  animation: bgFlashA 600ms ease-out forwards;
}

.bg-response-layer.dim-d {
  background: rgba(0, 0, 0, 1);
  animation: bgDimD 1600ms ease-out forwards;
}

.bg-response-layer.warm-b {
  background: rgba(255, 220, 140, 1);
  animation: bgWarmB 1400ms ease-out forwards;
}

.bg-response-layer.subtle-c {
  background: rgba(255, 255, 255, 1);
  animation: bgSubtleC 500ms ease-out forwards;
}

.bg-response-layer.soft-e {
  background: rgba(255, 250, 230, 1);
  animation: bgSoftE 1800ms ease-out forwards;
}

/* 浅色背景上的反向响应(压暗) */
.bg-response-layer.flash-a-inv {
  background: rgba(0, 0, 0, 1);
  animation: bgFlashA 600ms ease-out forwards;
}

.bg-response-layer.warm-b-inv {
  background: rgba(0, 0, 0, 1);
  animation: bgWarmB 1400ms ease-out forwards;
}

.bg-response-layer.soft-e-inv {
  background: rgba(0, 0, 0, 1);
  animation: bgSoftE 1800ms ease-out forwards;
}

/* 第二题 A 好奇:短促亮闪+微暖(深色),浅色反向压暗 */
.bg-response-layer.curious-q2 {
  background: rgba(255, 248, 225, 1);
  animation: bgCurious 900ms ease-out forwards;
}

.bg-response-layer.curious-q2-inv {
  background: rgba(0, 0, 0, 1);
  animation: bgCurious 900ms ease-out forwards;
}

/* 第二题 B 馋:整体加暖加浓(深色),浅色反向压暗 */
.bg-response-layer.hungry-q2 {
  background: rgba(255, 200, 115, 1);
  animation: bgHungry 1400ms ease-out forwards;
}

.bg-response-layer.hungry-q2-inv {
  background: rgba(0, 0, 0, 1);
  animation: bgHungry 1400ms ease-out forwards;
}

/* 第二题 C 使坏:快速一沉+立刻弹回(两种背景都变暗,不反向) */
.bg-response-layer.mischief-q2 {
  background: rgba(0, 0, 0, 1);
  animation: bgMischief 600ms ease-out forwards;
}

@keyframes bgFlashA {
  0%   { opacity: 0; }
  12%  { opacity: 0.22; }
  100% { opacity: 0; }
}

@keyframes bgDimD {
  0%   { opacity: 0; }
  38%  { opacity: 0.18; }
  100% { opacity: 0; }
}

@keyframes bgWarmB {
  0%   { opacity: 0; }
  28%  { opacity: 0.24; }
  100% { opacity: 0; }
}

@keyframes bgSubtleC {
  0%   { opacity: 0; }
  20%  { opacity: 0.08; }
  100% { opacity: 0; }
}

@keyframes bgSoftE {
  0%   { opacity: 0; }
  33%  { opacity: 0.14; }
  100% { opacity: 0; }
}

/* 第二题 A 好奇:变化300ms(33%)+恢复600ms,短促一闪 */
@keyframes bgCurious {
  0%   { opacity: 0; }
  33%  { opacity: 0.20; }
  100% { opacity: 0; }
}

/* 第二题 B 馋:变化400ms(28%)+恢复1秒,温热绵长 */
@keyframes bgHungry {
  0%   { opacity: 0; }
  28%  { opacity: 0.24; }
  100% { opacity: 0; }
}

/* 第二题 C 使坏:沉200ms(33%)+恢复400ms,快速一沉立刻弹回 */
@keyframes bgMischief {
  0%   { opacity: 0; }
  33%  { opacity: 0.16; }
  100% { opacity: 0; }
}

/* 题目滑块 */
.question-slide {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity 250ms ease-in-out;
}

/* 题目导航 */
.question-nav {
  width: 100%;
  max-width: 400px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
  z-index: 1;
  position: relative;
}

.nav-btn {
  flex: 1;
  padding: 12px 0;
  border-radius: 24px;
  border: none;
  background: rgba(251, 246, 238, 0.85);
  color: #3D3A36;
  font-family: 'Noto Sans SC', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(61, 58, 54, 0.06);
  transition: transform 0.2s ease-out, background-color 0.2s ease-out;
}

.nav-btn:active {
  transform: scale(0.97);
}

.nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* 题干区 */
.question-header {
  width: 100%;
  max-width: 400px;
  text-align: center;
  margin-bottom: 24px;
}

.question-number {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: #F08C7D;
  margin-bottom: 12px;
}

/* 山路曲线进度条(原稿交付文档第三节) */
.quiz-path {
  width: 100%;
  height: 34px;
  display: block;
  margin: 0 0 6px;
  overflow: visible;
}

.quiz-path-fill {
  transition: stroke-dashoffset 400ms ease-out;
}

.quiz-path-dot {
  transition: cx 400ms ease-out, cy 400ms ease-out, stroke 400ms ease-out;
}

.question-type-tag {
  display: inline-block;
  font-family: 'Noto Sans SC', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #8B7E6E;
  background: rgba(255, 255, 255, 0.55);
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}

.question-title {
  font-family: 'Noto Serif SC', serif;
  font-size: 22px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.6;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.quiz-intro-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.98);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
  pointer-events: none;
}

.quiz-intro-elephant {
  width: 84px;
  height: auto;
  display: block;
  margin-bottom: 4px;
  animation: elephantBreath 3s ease-in-out infinite;
}

.quiz-intro-sub {
  font-size: 14px;
  font-weight: 400;
  color: #8B857D;
  letter-spacing: 0.12em;
}

.quiz-intro-main {
  font-family: 'Noto Serif SC', serif;
  font-size: 30px;
  font-weight: 900;
  color: #2E2A24;
  line-height: 1.4;
  text-align: center;
}

.quiz-intro-text.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.quiz-intro-text.hide {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.02);
}

/* 开场期间纯色底(遮住第一题场景图) */
.page-container.is-intro {
  background: #FFF8E7 !important;
}
.page-container.is-intro::before {
  display: none;
}

/* 选项区 */
.options-container {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 单个选项卡片 */
.option-card {
  background: rgba(251, 246, 238, 0.88);
  border-radius: 24px;
  padding: 14px 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  box-shadow: 0 8px 28px rgba(61, 58, 54, 0.07);
  transition: background-color 250ms ease-out, box-shadow 250ms ease-out;
  position: relative;
  z-index: 60;
}

/* 选中态:背景染上对应情绪的淡色调 */
.option-card.selected[data-emotion="emotion-burst.png"] {
  background: rgba(240, 140, 125, 0.36);
}
.option-card.selected[data-emotion="emotion-happy.png"] {
  background: rgba(245, 213, 110, 0.44);
}
.option-card.selected[data-emotion="emotion-calm.png"] {
  background: rgba(150, 175, 200, 0.40);
}
.option-card.selected[data-emotion="emotion-lazy.png"] {
  background: rgba(175, 160, 210, 0.40);
}
.option-card.selected[data-emotion="emotion-peace.png"] {
  background: rgba(165, 195, 155, 0.44);
}
.option-card.selected[data-emotion="emotion-social.png"] {
  background: rgba(255, 159, 64, 0.40);
}
.option-card.selected[data-emotion="emotion-curious.png"] {
  background: rgba(220, 170, 180, 0.40);
}
.option-card.selected[data-emotion="emotion-hungry.png"] {
  background: rgba(210, 150, 100, 0.40);
}
.option-card.selected[data-emotion="emotion-mischief.png"] {
  background: rgba(155, 130, 185, 0.44);
}

/* 选中态:字母序号染上对应情绪的主色 + 加粗 */
.option-card.selected[data-emotion="emotion-burst.png"]    .option-letter { color: #D9685A; font-weight: 800; }
.option-card.selected[data-emotion="emotion-happy.png"]    .option-letter { color: #B8900F; font-weight: 800; }
.option-card.selected[data-emotion="emotion-calm.png"]     .option-letter { color: #5A7A98; font-weight: 800; }
.option-card.selected[data-emotion="emotion-lazy.png"]     .option-letter { color: #6E5FA0; font-weight: 800; }
.option-card.selected[data-emotion="emotion-peace.png"]    .option-letter { color: #5A8049; font-weight: 800; }
.option-card.selected[data-emotion="emotion-social.png"]   .option-letter { color: #E89020; font-weight: 800; }
.option-card.selected[data-emotion="emotion-curious.png"]  .option-letter { color: #C49098; font-weight: 800; }
.option-card.selected[data-emotion="emotion-hungry.png"]   .option-letter { color: #B0764A; font-weight: 800; }
.option-card.selected[data-emotion="emotion-mischief.png"] .option-letter { color: #7B5FA8; font-weight: 800; }

.option-card.selected .option-letter {
  transition: color 250ms ease-out, font-weight 250ms ease-out;
}

.option-letter {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 700;
  color: #F08C7D;
  flex-shrink: 0;
  width: 24px;
  transition: color 250ms ease-out, font-weight 250ms ease-out;
}

.option-text {
  font-family: 'Noto Sans SC', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #3D3A36;
  line-height: 1.5;
}

/* split 上图下题布局 */
.question-slide.layout-split {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  z-index: 0;
}

.question-slide.layout-split .slide-illustration {
  position: relative;
  width: 100%;
  height: 32vh;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  z-index: 1;
}

/* 场景图移入滚动区后, 它是滚动区内的一个块, 不再是 .slide-content 的 flex 子项 */
.question-slide.layout-split .slide-scroll-area .slide-illustration {
  flex-shrink: 0;
  margin: -14px -20px 0;
  width: calc(100% + 40px);
}

.question-slide.layout-split .illustration-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80%;
  pointer-events: none;
  z-index: 2;
}

.question-slide.layout-split .slide-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 2;
  position: relative;
  height: 100%;
}

.question-slide.layout-split .slide-scroll-area {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 20px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.question-slide.layout-split .question-header {
  margin-top: -40px;
  margin-bottom: 14px;
  width: 100%;
  max-width: 400px;
  position: relative;
  z-index: 3;
}

.question-slide.layout-split .question-number {
  margin-bottom: 14px;
}

.question-slide.layout-split .quiz-path {
  margin: 0 0 8px;
}

.question-slide.layout-split .question-title {
  color: #3D3A36;
  text-shadow: none;
  font-size: 20px;
}

.question-slide.layout-split .question-type-tag {
  color: #7A6F60;
  background: rgba(61, 58, 54, 0.08);
}

.question-slide.layout-split .question-nav {
  flex-shrink: 0;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 10px 20px 14px;
  z-index: 100;
}

/* 移动端适配 */
@media (max-width: 375px) {
  .page-container {
    padding-top: 36px;
    padding-bottom: 32px;
  }
  
  .question-title {
    font-size: 19px;
  }
  
  .option-card {
    padding: 14px 16px;
  }
  
  .option-text {
    font-size: 14px;
  }
}

/* 大屏微调 */
@media (min-width: 500px) {
  .question-header {
    margin-top: 40px;
  }
}

/* 点击反馈动画 */
.option-card {
  cursor: pointer;
  transition: transform 0.25s ease-out;
}

.option-card:active {
  transform: scale(1.03);
}

.option-card.max-shake {
  animation: maxShake 0.35s ease-in-out;
}

@keyframes maxShake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-4px); }
  40%  { transform: translateX(4px); }
  60%  { transform: translateX(-3px); }
  80%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

.emotion-symbol {
  position: fixed;
  width: 56px;
  height: 56px;
  pointer-events: none;
  z-index: 70;
  opacity: 0;
  transform: translate(-50%, 0) scale(0.8);
}

/* 第二题 A 好奇:小爱心粒子爆发 */
.curious-particle {
  position: fixed;
  pointer-events: none;
  z-index: 70;
  opacity: 0;
  transform: translate(-50%, 0) scale(0.4);
  animation: curiousParticle 800ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

@keyframes curiousParticle {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.4) rotate(0deg);
  }
  25% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1) rotate(calc(var(--rot, 0deg) * 0.3));
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tx, 0px)), var(--ty, -100px)) scale(0.2) rotate(var(--rot, 0deg));
  }
}

.emotion-symbol.show {
  animation: emotionPopup 0.8s ease-out forwards;
}

.emotion-symbol.burst {
  animation: emotionBurst 0.65s cubic-bezier(0.2, 1.4, 0.3, 1) forwards;
}

.option-card.card-shake {
  animation: cardShake 0.2s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

.emotion-symbol.happy {
  animation: emotionHappy 1.1s cubic-bezier(0.34, 1.56, 0.4, 1) forwards;
}

.emotion-symbol.calm {
  animation: emotionCalm 1.5s cubic-bezier(0.34, 1.56, 0.4, 1) forwards;
}

.emotion-symbol.lazy {
  animation: emotionLazy 1.5s cubic-bezier(0.4, 0, 0.55, 1) forwards;
}

.emotion-symbol.peace {
  animation: emotionPeace 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.emotion-symbol.hungry {
  animation: emotionHungry 1.5s cubic-bezier(0.45, 0, 0.55, 1) forwards;
}

.emotion-symbol.mischief {
  animation: emotionMischief 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.emotion-symbol.curious {
  animation: emotionCurious 1.4s cubic-bezier(0.34, 1.56, 0.4, 1) forwards;
}

@keyframes emotionPopup {
  0% {
    opacity: 0;
    transform: translate(-50%, 10px) scale(0.8);
  }
  25% {
    opacity: 1;
    transform: translate(-50%, -8px) scale(1.15);
  }
  40% {
    opacity: 1;
    transform: translate(-50%, -10px) scale(1);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -10px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -20px) scale(0.95);
  }
}

@keyframes emotionBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.1) rotate(-5deg);
  }
  35% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.15) rotate(3deg);
  }
  55% {
    opacity: 1;
    transform: translate(-50%, 0) scale(0.95) rotate(-2deg);
  }
  68% {
    opacity: 1;
    transform: translate(-50%, -2px) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-20%, -60px) scale(0.3) rotate(420deg);
  }
}

@keyframes cardShake {
  0% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(2px, -1px) scale(1.015); }
  50% { transform: translate(-2px, 1px) scale(0.995); }
  75% { transform: translate(1px, -1px) scale(1.005); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes emotionHappy {
  0% {
    opacity: 0;
    transform: translate(-50%, 10px) scale(0.6) rotate(-5deg);
  }
  12% {
    opacity: 1;
    transform: translate(-50%, 0px) scale(1.15) rotate(5deg);
  }
  22% {
    opacity: 1;
    transform: translate(-42%, -4px) scale(0.95) rotate(-4deg);
  }
  34% {
    opacity: 1;
    transform: translate(-34%, 2px) scale(1.08) rotate(4deg);
  }
  46% {
    opacity: 1;
    transform: translate(-22%, -3px) scale(1) rotate(-3deg);
  }
  58% {
    opacity: 1;
    transform: translate(-8%, 1px) scale(1.05) rotate(3deg);
  }
  68% {
    opacity: 1;
    transform: translate(8%, -2px) scale(1) rotate(-2deg);
  }
  78% {
    opacity: 1;
    transform: translate(22%, 0px) scale(1) rotate(1deg);
  }
  86% {
    opacity: 0.7;
    transform: translate(45%, -18px) scale(0.95) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(80%, -40px) scale(0.85) rotate(0deg);
  }
}

@keyframes emotionCalm {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.6) rotate(0deg);
  }
  12% {
    opacity: 0.8;
    transform: translate(-50%, 0) scale(1.12) rotate(0deg);
  }
  18% {
    opacity: 0.8;
    transform: translate(calc(-50% + 0px), 0) scale(1) rotate(-3deg);
  }
  24% {
    opacity: 0.8;
    transform: translate(calc(-50% + 8px), 6px) scale(1) rotate(-4deg);
  }
  30% {
    opacity: 0.8;
    transform: translate(calc(-50% + 10px), 0) scale(1) rotate(-2deg);
  }
  36% {
    opacity: 0.8;
    transform: translate(calc(-50% + 8px), -6px) scale(1) rotate(3deg);
  }
  42% {
    opacity: 0.8;
    transform: translate(calc(-50% + 0px), -10px) scale(1) rotate(4deg);
  }
  48% {
    opacity: 0.8;
    transform: translate(calc(-50% - 8px), -6px) scale(1) rotate(3deg);
  }
  54% {
    opacity: 0.8;
    transform: translate(calc(-50% - 10px), 0) scale(1) rotate(-2deg);
  }
  60% {
    opacity: 0.8;
    transform: translate(calc(-50% - 8px), 6px) scale(1) rotate(-4deg);
  }
  66% {
    opacity: 0.8;
    transform: translate(calc(-50% + 0px), 10px) scale(1) rotate(-3deg);
  }
  72% {
    opacity: 0.8;
    transform: translate(calc(-50% + 8px), 6px) scale(1) rotate(2deg);
  }
  78% {
    opacity: 0.8;
    transform: translate(calc(-50% + 10px), 0) scale(1) rotate(0deg);
  }
  84% {
    opacity: 0.8;
    transform: translate(-50%, 0) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.92) rotate(0deg);
  }
}

@keyframes emotionLazy {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.7) rotate(-3deg);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.05) rotate(2deg);
  }
  28% {
    opacity: 1;
    transform: translate(-48%, 6px) scale(1) rotate(0deg);
  }
  38% {
    opacity: 1;
    transform: translate(-52%, 12px) scale(1) rotate(-2deg);
  }
  50% {
    opacity: 1;
    transform: translate(-49%, 20px) scale(1) rotate(1deg);
  }
  62% {
    opacity: 1;
    transform: translate(-51%, 28px) scale(0.98) rotate(-1deg);
  }
  74% {
    opacity: 0.7;
    transform: translate(-50%, 36px) scale(0.95) rotate(0deg);
  }
  86% {
    opacity: 0.3;
    transform: translate(-50%, 44px) scale(0.92) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 52px) scale(0.9) rotate(0deg);
  }
}

@keyframes emotionPeace {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.7);
  }
  22% {
    opacity: 1;
    transform: translate(-50%, -6px) scale(1.08);
  }
  40% {
    opacity: 1;
    transform: translate(-50%, -8px) scale(1);
  }
  58% {
    opacity: 1;
    transform: translate(-50%, -10px) scale(1.06);
  }
  75% {
    opacity: 1;
    transform: translate(-50%, -8px) scale(1);
  }
  88% {
    opacity: 0.5;
    transform: translate(-50%, -6px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -4px) scale(0.96);
  }
}

/* 馋:猛地放大凑近 + 停顿 + 回弹 + 柔淡出 */
@keyframes emotionHungry {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.6);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  32% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.3);
  }
  44% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.3);
  }
  54% {
    opacity: 1;
    transform: translate(-50%, 0) scale(0.95);
  }
  62% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.05);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, 0) scale(0.98);
  }
  82% {
    opacity: 0.55;
    transform: translate(-50%, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.95);
  }
}

/* 好奇(心跳):快速放大缩小两下 + 柔淡出 */
@keyframes emotionCurious {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.6);
  }
  16% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  26% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.12);
  }
  36% {
    opacity: 1;
    transform: translate(-50%, 0) scale(0.96);
  }
  46% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.10);
  }
  56% {
    opacity: 1;
    transform: translate(-50%, 0) scale(0.98);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  85% {
    opacity: 0.55;
    transform: translate(-50%, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.95);
  }
}

/* 使坏:俏皮摇摆 + 缓慢放大 + 柔淡出 */
@keyframes emotionMischief {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.6) rotate(0deg);
  }
  16% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1) rotate(0deg);
  }
  28% {
    opacity: 1;
    transform: translate(calc(-50% - 8px), -2px) scale(1.02) rotate(-6deg);
  }
  42% {
    opacity: 1;
    transform: translate(calc(-50% + 8px), -3px) scale(1.05) rotate(6deg);
  }
  56% {
    opacity: 1;
    transform: translate(calc(-50% - 5px), -4px) scale(1.08) rotate(-4deg);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -5px) scale(1.1) rotate(0deg);
  }
  82% {
    opacity: 0.6;
    transform: translate(-50%, -6px) scale(1.08) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -5px) scale(1.05) rotate(0deg);
  }
}

/* ════════ 章节卡与过场屏（整段复制 commit e28f7fc 原版「幻想一下」屏，加 q2is- 前缀避冲突） ════════ */

/* 根容器: absolute inset:0 覆盖 .page-container 整个 padding box（含 36/20/48 padding），彻底盖住 scene-*.webp；
   z-index 继承 .page-container > * 的 1，高于背景(0) 低于 bg-fade-layer(2) 与右上角音符角标(fixed 1000) */
.question-slide.slide-interstitial {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFF8E7 !important;
  cursor: pointer;
  overflow: hidden;
}

/* 内容保护层 (文字区域极淡渐变蒙版) */
.q2is-content-protection {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(251, 246, 238, 0) 0%,
    rgba(251, 246, 238, 0.10) 25%,
    rgba(251, 246, 238, 0.14) 45%,
    rgba(251, 246, 238, 0.10) 65%,
    rgba(251, 246, 238, 0) 82%
  );
}

/* 窗外星星 */
.q2is-star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 248, 220, 0.95);
  box-shadow: 0 0 4px rgba(255, 248, 220, 0.5);
  z-index: 0;
  pointer-events: none;
}
.q2is-star-1 { top: 16%; right: 14%; animation: q2isTwinkle1 4s ease-in-out infinite; }
.q2is-star-2 { top: 20%; right: 20%; animation: q2isTwinkle2 3.2s ease-in-out infinite; animation-delay: -1.2s; }
.q2is-star-3 { top: 13%; right: 22%; animation: q2isTwinkle3 5s ease-in-out infinite; animation-delay: -2.5s; }
.q2is-star-4 { top: 24%; right: 10%; animation: q2isTwinkle1 4.5s ease-in-out infinite; animation-delay: -3s; }
@keyframes q2isTwinkle1 { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.95; } }
@keyframes q2isTwinkle2 { 0%, 100% { opacity: 0.35; } 40% { opacity: 0.9; } 70% { opacity: 0.5; } }
@keyframes q2isTwinkle3 { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.85; } }

/* 手机屏幕微光 */
.q2is-phone-glow {
  position: absolute;
  bottom: 14%;
  left: 65%;
  width: 6vw;
  height: 10vh;
  background: radial-gradient(ellipse at center, rgba(200, 220, 255, 0.75) 0%, rgba(200, 220, 255, 0.3) 50%, rgba(200, 220, 255, 0) 80%);
  z-index: 0;
  pointer-events: none;
  animation: q2isPhoneGlow 4s ease-in-out infinite;
  animation-delay: -1.5s;
}
@keyframes q2isPhoneGlow { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.9; } }

/* 环境光尘层 */
.q2is-ambient-dust {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,0) 70%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,0) 70%);
  mix-blend-mode: screen;
  overflow: hidden;
}
.q2is-ambient-dust-sink {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform, opacity;
}
.q2is-ambient-dust-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300%;
  background: url('assets/quiz2-webp/ambient/ambient-dust.webp?v=2') 0 0 / 230% repeat;
  opacity: 0.4;
  animation: q2isDustDrift 40s linear infinite, q2isDustBreath 8s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes q2isDustDrift {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, -33.333%, 0); }
}
@keyframes q2isDustBreath {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.45; }
}

/* 文字内容居中容器：原屏 quiz-intro-text 照搬，宽度内容居中（q2-page min(420px,100vw) 规则通过 max-width 表达）
   --q2is-shift: 内容块整体上移量 ≈ (小象高度 + 间距) / 2，让主标题落在屏幕垂直中心而非整块居中 */
.q2is-text {
  --q2is-shift: -40px;
  position: relative;
  z-index: 100;
  width: min(420px, 100vw);
  margin: 0 auto;
  padding: 0 32px;
  opacity: 0;
  transform: translateY(var(--q2is-shift)) scale(0.98);
  transition: opacity 0.8s ease, transform 0.8s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: none;
}
.question-slide.show-interstitial .q2is-text {
  opacity: 1;
  transform: translateY(var(--q2is-shift)) scale(1);
}
.question-slide.hide-interstitial .q2is-text {
  opacity: 0;
  transform: translateY(var(--q2is-shift)) scale(1.02);
}

/* 小象插画 */
.q2is-elephant {
  width: 84px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin-bottom: 4px;
  animation: q2isElephantBreath 3s ease-in-out infinite;
}
@keyframes q2isElephantBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

/* 主标题：原屏 quiz-intro-main 全量照搬；pre-line 让数据中的 \n 生效（章内过场强制断行），overflow-wrap 兜底防溢出 */
.q2is-main {
  font-family: 'Noto Serif SC', serif;
  font-size: 30px;
  font-weight: 900;
  color: #2E2A24;
  line-height: 1.4;
  text-align: center;
  margin: 0;
  white-space: pre-line;
  overflow-wrap: break-word;
}

/* 章节卡副标题：新增，主标题同族，字号小一档，颜色浅一档，紧贴下方 */
.q2is-sub {
  font-family: 'Noto Serif SC', serif;
  font-size: 14px;
  font-weight: 400;
  color: #8B857D;
  letter-spacing: 0.12em;
  line-height: 1.6;
  text-align: center;
  margin: -6px 0 0 0;
}

/* 过渡屏只有单行主标题时，去掉 gap 产生的下方空白；章内过场文案字号小一档（字体/字重不变） */
.slide-transition .q2is-text { gap: 0; }
.slide-transition .q2is-main { margin-bottom: 0; font-size: 24px; }

/* 进度条驿站节点（沿用） */
.quiz-path-station {
  transition: fill 0.3s ease, stroke 0.3s ease;
}

/* 移动端微调：小象缩窄→重算上移量，主标题与章内过场文案同步降档 */
@media (max-width: 375px) {
  .q2is-text { --q2is-shift: -36px; }
  .q2is-main { font-size: 26px; }
  .slide-transition .q2is-main { font-size: 21px; }
  .q2is-sub  { font-size: 13px; }
  .q2is-elephant { width: 72px; }
}