/* ==========================================================================
   二次元恋爱心理测试 V1 - Galgame Mobile Design System
   Visual Slice: Phase 7B Visual Fix V2 (Root Cause Fix)
   核心修正：
   1. 统一全局 Box Model，根治宽度计算漂移与横向溢出；
   2. 移动端容器 100% 满屏无黑边，桌面端自适应居中；
   3. 背景层改为绝对贴合 inset: 0，废除 position: fixed + translateX 偏置；
   4. 答题页中轴统一：题目卡与4个选项卡共享同一 content-column，严格对齐；
   5. 结果页修复：Grid minmax(0, 1fr) 杜绝 COMPATIBILITY 卡片右侧裁切。
   ========================================================================== */

/* 1. 严格统一全局 Box Model */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

:root {
  /* 基础色彩规范 (Design Tokens) */
  --bg-deep-night: #090d16;
  --bg-container: #0b0f1a;
  
  /* 半透明与材质玻璃 */
  --glass-card-bg: rgba(18, 24, 38, 0.85);
  --glass-card-border: rgba(255, 235, 245, 0.16);
  --glass-card-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);

  /* 选项条材质 */
  --option-bg: rgba(13, 17, 28, 0.86);
  --option-border: rgba(255, 255, 255, 0.14);
  --option-border-hover: rgba(244, 114, 182, 0.45);
  --option-text: #f8fafc;
  --option-sub: #cbd5e1;

  /* 选中态高光 */
  --option-selected-bg: rgba(42, 28, 48, 0.94);
  --option-selected-border: rgba(244, 63, 94, 0.85);
  --option-selected-glow: 0 0 20px rgba(244, 63, 94, 0.45);

  /* 品牌 Accent 色系 */
  --accent-heart: #ff4b72;       /* HEART 心动桃粉 */
  --accent-comp: #38bdf8;        /* COMPATIBILITY 契合天青 */
  --accent-friction: #fbbf24;    /* FRICTION 预警暖金 */
  --accent-gold: #f59e0b;
  --accent-violet: #a855f7;

  /* 文字层级 */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.85);
  --text-muted: rgba(255, 255, 255, 0.55);

  /* 字体家族 */
  --font-base: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-serif: "Yu Mincho", "Hiragino Mincho ProN", "Source Han Serif CN", "Songti SC", serif;
}

html, body {
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #030508;
  color: var(--text-primary);
  font-family: var(--font-base);
  -webkit-font-smoothing: antialiased;
}

/* 2. 手机主容器严格对齐 (390px 视口下 width = 100%，无左右黑缝) */
.game-container {
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  background-color: var(--bg-deep-night);
  display: flex;
  flex-direction: column;
}

/* 桌面大屏下 (> 480px) 居中自适应容器 */
@media (min-width: 481px) {
  .game-container {
    max-width: 430px;
    margin: 0 auto;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.85);
  }
}

/* ==========================================================================
   状态栏与视图隔离规则 (HUD View Isolation)
   ========================================================================== */
.game-header {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: linear-gradient(to bottom, rgba(9, 13, 22, 0.8), transparent);
  pointer-events: none;
}

.game-container[data-view="QUESTION"] .game-header {
  display: block;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px 8px 16px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.slot-counter {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.stage-tag {
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(244, 63, 94, 0.2);
  border: 1px solid rgba(244, 63, 94, 0.4);
  color: #ff94a8;
  letter-spacing: 0.5px;
}

/* 返回上一题悬浮按钮 (Question View 右下角轻量毛玻璃胶囊) */
.btn-prev-question {
  display: none;
  position: fixed;
  right: max(18px, calc(50% - 215px + 18px));
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  width: 86px;
  height: 44px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  color: #f1f5f9;
  font-size: 0.88rem;
  font-weight: 500;
  border-radius: 22px;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 60;
}

.btn-prev-question:hover {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(244, 114, 182, 0.5);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(244, 114, 182, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.btn-prev-question:active {
  transform: translateY(1px) scale(0.97);
  background: rgba(15, 23, 42, 0.9);
}

.btn-prev-icon {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  margin-top: -1px;
}

.btn-prev-text {
  letter-spacing: 1px;
}

/* ==========================================================================
   BGM 唱片与音量浮动组件 (Bottom-Left Floating Vinyl Widget)
   ========================================================================== */
.bgm-widget {
  position: fixed;
  left: max(16px, calc(50% - 215px + 16px));
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 60;
  pointer-events: auto;
}

/* 黑胶唱片按钮 (48×48px, 目标 44~50px) */
.bgm-disc-btn {
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.15);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  outline: none;
}

.bgm-disc-btn:hover {
  transform: scale(1.06);
}

.bgm-disc-btn:active {
  transform: scale(0.95);
}

/* 黑胶盘体 */
.bgm-disc {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, #22252e 0%, #111318 68%, #090a0d 100%);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  animation: bgmDiscRotate 6.5s linear infinite;
  animation-play-state: paused;
}

.bgm-disc.playing {
  animation-play-state: running;
}

/* 黑胶同心环细纹 (Grooves) */
.disc-grooves {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle at 50% 50%,
    transparent 0px,
    transparent 2px,
    rgba(255, 255, 255, 0.04) 2.5px,
    transparent 3px
  );
  pointer-events: none;
}

/* 盘心彩色标签 (Center label - Galgame 樱粉/冰蓝渐变) */
.disc-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(135deg, #f472b6 0%, #fda4af 50%, #93c5fd 100%);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 唱片轴心孔 */
.disc-hole {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #090d16;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.8);
}

/* 唱片微弱光泽扫射 (Shine) */
.disc-shine {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    45deg,
    transparent 35%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 65%
  );
  pointer-events: none;
}

@keyframes bgmDiscRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 音量展开微型按钮 */
.bgm-vol-toggle-btn {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.75);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all 0.2s ease;
  padding: 0;
}

.bgm-vol-toggle-btn:hover {
  background: rgba(30, 41, 59, 0.85);
  color: #fff;
  border-color: rgba(244, 114, 182, 0.5);
}

/* 音量滑动调节面板 (半透明胶囊) */
.bgm-vol-panel {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 4px 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  animation: bgmFadeIn 0.2s ease;
}

@keyframes bgmFadeIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

.bgm-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 64px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.bgm-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f472b6;
  box-shadow: 0 0 6px rgba(244, 114, 182, 0.8);
  cursor: pointer;
}

.bgm-volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f472b6;
  border: none;
  cursor: pointer;
}

.bgm-volume-text {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  min-width: 26px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.header-right {
  pointer-events: auto;
}

/* 生产环境下严格隐藏 DEBUG */
.btn-debug-ghost {
  display: none;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.game-container.debug-mode-active .btn-debug-ghost {
  display: block;
}

.btn-debug-ghost:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* 进度条 */
.progress-track {
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-heart), var(--accent-comp));
  box-shadow: 0 0 8px rgba(244, 63, 94, 0.6);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 主视口 */
.main-viewport {
  flex: 1;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* 视图面板统一规范 */
.view-panel {
  display: none;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  flex-direction: column;
}

.view-panel.active {
  display: flex;
}

/* ==========================================================================
   视图 1: 首页封面 (HOME)
   ========================================================================== */
.view-home-scene {
  justify-content: space-between;
  align-items: center;
  padding: calc(env(safe-area-inset-top, 20px) + 24px) 16px calc(env(safe-area-inset-bottom, 20px) + 28px) 16px;
  position: relative;
  /* 首页为全幅舞台层：呼吸与推进镜头会刻意放大画面，需在场景层裁切；
     不使用 overflow-x: hidden 掩盖任何横向布局溢出（横向溢出仍由 box model 修正）。 */
  overflow: hidden;
}

/* 镜头推进层：入场时对本层做 scale 推进，内部所有层同步位移，保证门板与背景严格同轴 */
.home-scene-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transform-origin: 50% 58%;
}

/* 呼吸层：独立嵌套，避免与推进镜头的 transform 互相覆盖 */
.home-breathe-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  animation: coverSubtleBreathe 20s ease-in-out infinite alternate;
}

/* 背景层独立且贴满 inset: 0，不参与文档流宽度 */
.home-bg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-image: url('../assets/backgrounds/home_bg_v2.png');
  background-size: cover;
  background-position: center;
}

/* ==========================================================================
   Home Ambient Motion V1.2: 局部 SVG 水面微折射系统 (Local SVG Water Distortion)
   保持原 home_bg_v2.png 静止，白门（72.8%）绝对0移动；
   深层水面通过 feTurbulence + feDisplacementMap 产生真实水体有机起伏与倒影折光；
   水面与门下叠加柔和波光呼吸 (0.065~0.105)，彻底解决手机端“看不出水动”的问题。
   ========================================================================== */
.home-water-ambient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.home-water-ambient * {
  pointer-events: none;
}

/* 局部 SVG 容器：绝对贴满整个视口，由 preserveAspectRatio="xMidYMid slice" 保证与底图严格吻合 */
.home-water-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.home-water-distorted-image,
.home-water-ripple-distortion {
  pointer-events: none;
}

.home-water-layers-group {
  pointer-events: none;
}

/* 门源扁椭圆扩散水波组：极柔和水纹折射环，自然叠加于水面之上，非刺眼光圈 */
.door-ripples-group {
  mix-blend-mode: screen;
  pointer-events: none;
}

.door-ripple,
.ripple-dist-band {
  pointer-events: none;
}

.door-ripple-1,
.ripple-dist-band-1 {
  transform-origin: 466px 1219px;
}

.door-ripple-2,
.ripple-dist-band-2 {
  transform-origin: 472px 1216px;
}

/* 2. 水面微光与门下光纹 (Layer: Water Highlight)
   不移动原图背景像素；
   由门下柔和放射微光 (74% 椭圆羽化) + 整个水面轻波反光组成；
   V1.3.3 中高光在 V1.3.2 基础上适度回升约 25%（基础 opacity 0.045），辅助增强首眼可捕捉度，依然不呈刺眼光圈。 */
.home-water-highlight {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(
      ellipse 66% 22% at 50% 74%,
      rgba(255, 252, 238, 0.048) 0%,
      rgba(254, 240, 199, 0.024) 48%,
      transparent 82%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      transparent 68.5%,
      rgba(254, 243, 199, 0.024) 75%,
      rgba(253, 230, 138, 0.038) 84%,
      rgba(254, 243, 199, 0.022) 93%,
      rgba(253, 230, 138, 0.011) 100%
    );
  mix-blend-mode: screen;
  opacity: 0.045;
  animation: waterHighlightBreathe 20s ease-in-out infinite alternate;
}

@keyframes waterHighlightBreathe {
  0% {
    opacity: 0.038;
    transform: translate3d(-0.4px, 0, 0) scale(1);
  }
  50% {
    opacity: 0.058;
    transform: translate3d(0.6px, 0, 0) scale(1.001);
  }
  100% {
    opacity: 0.041;
    transform: translate3d(-0.3px, 0, 0) scale(0.999);
  }
}

/* 减弱动效：直接隐藏水面叠层，完整退化为原静态 Home Visual V2 */
@media (prefers-reduced-motion: reduce) {
  .home-water-ambient {
    display: none !important;
  }
}

@keyframes coverSubtleBreathe {
  0% { transform: scale(1.0); }
  100% { transform: scale(1.04); }
}

/* 门内白光（揭示层）：位置尺寸由 JS 依据真实门像素坐标写入 CSS 变量。
   它位于门板之下、背景之上：门板闭合时被门板完全遮住（画面即原图门体），
   门板绕轴开启时被"露出"，形成门内透出白光的效果。
   四周内缩 2px：门板裁切边存在约 0.8px 抗锯齿半透明带，内缩可确保白光不渗出一圈亮边。 */
.door-light {
  position: absolute;
  left: calc(var(--door-left, 0px) + 2px);
  top: calc(var(--door-top, 0px) + 2px);
  width: calc(var(--door-w, 0px) - 4px);
  height: calc(var(--door-h, 0px) - 4px);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 92% 94% at 50% 52%,
    rgba(255, 255, 253, 1) 0%,
    rgba(255, 252, 241, 0.98) 36%,
    rgba(255, 247, 222, 0.9) 62%,
    rgba(255, 242, 206, 0.62) 84%,
    rgba(255, 238, 190, 0.35) 100%
  );
}

/* 门外溢光（增强层）：门开启到位后向外扩散，表现"门内白光增强" */
.door-glow {
  position: absolute;
  left: var(--door-left, 0px);
  top: var(--door-top, 0px);
  width: var(--door-w, 0px);
  height: var(--door-h, 0px);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
  transform-origin: 50% 50%;
  background: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    rgba(255, 250, 232, 0.96) 0%,
    rgba(255, 247, 220, 0.62) 40%,
    rgba(255, 243, 208, 0.24) 66%,
    rgba(255, 240, 200, 0) 82%
  );
}

/* 门板：与背景层完全同源（同图/同 cover/同居中），仅用 clip-path 裁到真实门像素区域，
   因此与背景门逐像素重合，不存在缩放重采样误差；再绕左门轴做 rotateY 开启。 */
.door-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  background-image: url('../assets/backgrounds/home_bg_v2.png');
  background-size: cover;
  background-position: center;
  clip-path: inset(
    var(--door-top, 0px)
    calc(100% - var(--door-left, 0px) - var(--door-w, 0px))
    calc(100% - var(--door-top, 0px) - var(--door-h, 0px))
    var(--door-left, 0px)
  );
  transform-origin: var(--door-left, 0px) 50%;
}

/* 几何变量写入成功后才显示门板/门内白光，避免变量缺失时出现错位画面 */
.home-scene-layer.door-ready .door-panel { opacity: 1; }
.home-scene-layer.door-ready .door-light { opacity: 1; }

.home-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  background: linear-gradient(
    to bottom,
    rgba(9, 13, 22, 0.34) 0%,
    rgba(9, 13, 22, 0.16) 16%,
    rgba(9, 13, 22, 0.05) 40%,
    rgba(9, 13, 22, 0.12) 62%,
    rgba(9, 13, 22, 0.30) 84%,
    rgba(9, 13, 22, 0.46) 100%
  );
}

.home-stage-container {
  position: relative;
  z-index: 10;
  width: 100%;
  margin: 20px 0 0 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-title-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-sub-badge {
  display: inline-block;
  font-size: 0.65rem;
  letter-spacing: 2.5px;
  font-weight: 600;
  color: #fce7f3;
  background: rgba(244, 63, 94, 0.22);
  border: 1px solid rgba(244, 114, 182, 0.38);
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
  backdrop-filter: blur(8px);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.home-main-title {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 1.35;
  color: #ffffff;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(244, 63, 94, 0.45);
  margin-bottom: 10px;
  text-align: center;
  width: 100%;
}

.home-main-title .title-num {
  font-family: var(--font-base);
  color: #fda4af;
  font-size: 2rem;
  margin: 0 2px;
}

.home-tagline {
  font-size: 0.82rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  font-style: italic;
  max-width: 320px;
  margin: 0 auto;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  text-align: center;
}

/* 底部轻触提示 */
.home-start-trigger {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 20px) + 24px);
  left: 0;
  width: 100%;
  z-index: 10;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 16px 0;
  outline: none;
}

.tap-hint-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  animation: pulseTapHint 2.4s ease-in-out infinite;
}

.tap-hint-text {
  font-size: 0.92rem;
  letter-spacing: 4px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.8), 0 2px 6px rgba(0, 0, 0, 0.9);
}

.tap-hint-sub {
  font-size: 0.62rem;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.55);
}

.tap-hint-line {
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  margin: 3px 0;
}

@keyframes pulseTapHint {
  0%, 100% { opacity: 0.55; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

/* ==========================================================================
   首页入场转场 V1 (Home Entrance Transition V1)
   时间轴（点击后）：
     0.10s → 0.62s  中央白门绕左门轴向内开启 (rotateY 0° → 72°)
     0.32s → 1.08s  镜头向门推进 (scale 1 → 1.15)
     0.50s → 1.20s  门内白光增强 (opacity 0 → 1)
     0.70s → 1.25s  首页文案与轻触提示淡出
     1.02s → 1.38s  柔白覆盖全屏 (由 JS 驱动过渡)
     1.35s          切换到 Question View，Q01 自白光中升起
     1.40s → 1.78s  白光消散，露出 Q01
   仅动画 transform / opacity，不引入实时 filter 逐帧计算。
   ========================================================================== */
.view-home-scene.entering .home-scene-layer,
.view-home-scene.entering .door-panel,
.view-home-scene.entering .door-light,
.view-home-scene.entering .door-glow {
  will-change: transform, opacity;
}

.view-home-scene.entering .door-panel {
  animation: doorOpenV1 520ms cubic-bezier(0.34, 0.02, 0.18, 1) 100ms forwards;
}

.view-home-scene.entering .home-scene-layer {
  animation: homeCameraPushV1 760ms cubic-bezier(0.32, 0, 0.22, 1) 320ms forwards;
}

/* 门内白光：门板一开就被露出，并在 0.10s → 0.72s 内由柔和转为饱满 */
.view-home-scene.entering .door-light {
  animation: doorRevealV1 620ms cubic-bezier(0.4, 0, 0.5, 1) 100ms forwards;
}

/* 门外溢光：0.46s → 1.24s 向外扩散并增强 */
.view-home-scene.entering .door-glow {
  animation: doorGlowV1 780ms cubic-bezier(0.35, 0, 0.5, 1) 460ms forwards;
}

.view-home-scene.entering .home-stage-container,
.view-home-scene.entering .home-start-trigger {
  animation: homeChromeFadeV1 550ms ease-out 700ms forwards;
}

.view-home-scene.entering .home-start-trigger {
  pointer-events: none;
}

@keyframes doorOpenV1 {
  0%   { transform: perspective(760px) rotateY(0deg); }
  100% { transform: perspective(760px) rotateY(72deg); }
}

@keyframes homeCameraPushV1 {
  0%   { transform: scale(1); }
  100% { transform: scale(1.15); }
}

@keyframes doorRevealV1 {
  0%   { opacity: 0.5; }
  100% { opacity: 1; }
}

@keyframes doorGlowV1 {
  0%   { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(2.1); }
}

@keyframes homeChromeFadeV1 {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* 跨视图柔白转场层：覆盖整个手机容器，跨越 HOME → QUESTION 视图切换 */
.home-entrance-flash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 118% 92% at 50% 58%,
    #ffffff 0%,
    #fffdf8 58%,
    #fff7ea 100%
  );
}

/* Q01 自白光中升起 */
.view-question-scene.q-enter-from-white .question-stage-container {
  animation: questionRiseFromWhiteV1 430ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes questionRiseFromWhiteV1 {
  0%   { opacity: 0; transform: translateY(10px) scale(0.985); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 降级：用户偏好减少动效时，取消门开启/镜头推进/呼吸，仅保留一段短柔白淡出 */
@media (prefers-reduced-motion: reduce) {
  .home-breathe-layer,
  .tap-hint-wrapper {
    animation: none;
  }

  .view-home-scene.entering .home-scene-layer,
  .view-home-scene.entering .door-panel,
  .view-home-scene.entering .door-light,
  .view-home-scene.entering .door-glow,
  .view-home-scene.entering .home-stage-container,
  .view-home-scene.entering .home-start-trigger,
  .view-question-scene.q-enter-from-white .question-stage-container {
    animation: none;
  }

  /* 门板保持闭合（与静态首页完全一致），仅弱化门外溢光，避免任何门体运动 */
  .view-home-scene.entering .door-glow {
    opacity: 0;
    transform: scale(0.8);
  }

  .tap-hint-wrapper {
    opacity: 0.9;
  }
}

/* ==========================================================================
   视图 2: 答题场景 (QUESTION) - 严格同轴居中
   ========================================================================== */
.view-question-scene {
  justify-content: flex-start;
  overflow-y: auto;
  padding: calc(env(safe-area-inset-top, 0px) + 56px) 16px calc(env(safe-area-inset-bottom, 0px) + 20px) 16px;
  position: relative;
}

/* 背景层：直接在容器内绝对贴合，消除 fixed translateX 偏置 */
.question-bg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-image: url('../assets/backgrounds/question_bg.png');
  background-size: cover;
  background-position: center bottom;
  pointer-events: none;
}

.question-scene-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(9, 13, 22, 0.72) 0%,
    rgba(9, 13, 22, 0.38) 42%,
    rgba(9, 13, 22, 0.12) 75%,
    rgba(9, 13, 22, 0.55) 100%
  );
  pointer-events: none;
}

/* ==========================================================================
   Question View 答题场景环境微动层 (Question Ambient Motion V1)
   位于背景(z-index: 1~2)之上，题目舞台(z-index: 10)与控件(z-index: 60)之下
   ========================================================================== */
.question-ambient-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  overflow: hidden;
  pointer-events: none !important;
}

.question-ambient-layer * {
  pointer-events: none !important;
}

/* 1. 暖光层 (2 处超柔和呼吸光晕，极低频低饱和，不造成白雾与闪烁) */
.ambient-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(44px);
  will-change: transform, opacity;
  pointer-events: none;
}

.glow-balcony {
  top: 10%;
  right: -6%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(254, 215, 170, 0.08) 0%, rgba(253, 186, 116, 0.03) 55%, transparent 75%);
  animation: ambientGlowBreathe1 12s ease-in-out infinite;
}

.glow-easel {
  top: 54%;
  left: -8%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(254, 240, 199, 0.07) 0%, rgba(251, 191, 36, 0.02) 55%, transparent 75%);
  animation: ambientGlowBreathe2 14s ease-in-out infinite -5s;
}

@keyframes ambientGlowBreathe1 {
  0%, 100% {
    opacity: 0.06;
    transform: scale(0.99);
  }
  50% {
    opacity: 0.09;
    transform: scale(1.02);
  }
}

@keyframes ambientGlowBreathe2 {
  0%, 100% {
    opacity: 0.06;
    transform: scale(1.01);
  }
  50% {
    opacity: 0.09;
    transform: scale(0.99);
  }
}

/* 2. 空气微尘 (3 粒极微小暖金光斑，慢速漂浮，模拟夏日临海画室室内丁达尔) */
.ambient-dust {
  position: absolute;
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  background: rgba(254, 243, 199, 0.7);
  box-shadow: 0 0 3px rgba(253, 224, 71, 0.35);
  will-change: transform, opacity;
  pointer-events: none;
}

.dust-1 {
  left: 32%;
  top: 66%;
  animation: ambientDustFloat1 13s ease-in-out infinite -3s;
}

.dust-2 {
  left: 75%;
  top: 40%;
  animation: ambientDustFloat2 16s ease-in-out infinite -8s;
}

.dust-3 {
  left: 20%;
  top: 52%;
  animation: ambientDustFloat3 14s ease-in-out infinite -11s;
}

@keyframes ambientDustFloat1 {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  25% {
    opacity: 0.42;
  }
  65% {
    opacity: 0.30;
    transform: translate3d(14px, -36px, 0);
  }
  90% {
    opacity: 0.08;
  }
  100% {
    opacity: 0;
    transform: translate3d(20px, -55px, 0);
  }
}

@keyframes ambientDustFloat2 {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  30% {
    opacity: 0.38;
  }
  60% {
    opacity: 0.28;
    transform: translate3d(-12px, -42px, 0);
  }
  85% {
    opacity: 0.10;
  }
  100% {
    opacity: 0;
    transform: translate3d(-16px, -65px, 0);
  }
}

@keyframes ambientDustFloat3 {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  28% {
    opacity: 0.35;
  }
  70% {
    opacity: 0.24;
    transform: translate3d(10px, -38px, 0);
  }
  90% {
    opacity: 0.07;
  }
  100% {
    opacity: 0;
    transform: translate3d(15px, -52px, 0);
  }
}

/* 3. 慢速稀疏花瓣 (6 片固定节点，错峰落点，峰值透明度 ≤ 0.50，同屏可见仅 2~3 片) */
.ambient-petal {
  position: absolute;
  top: -24px;
  width: 11px;
  height: 16px;
  pointer-events: none;
  will-change: transform, opacity;
}

.petal-shape {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  background: linear-gradient(135deg, rgba(255, 238, 242, 0.65) 0%, rgba(253, 164, 175, 0.38) 100%);
  box-shadow: 0 1px 3px rgba(244, 114, 182, 0.16);
  will-change: transform;
}

/* 花瓣单体属性矩阵 (错峰 delay 保证初始进入画面时落点均匀分散) */
.petal-1 {
  left: 14%;
  animation: petalFall1 16s cubic-bezier(0.35, 0.1, 0.25, 1) infinite -3s;
}
.petal-1 .petal-shape {
  animation: petalSway1 4.5s ease-in-out infinite alternate;
}

.petal-2 {
  left: 58%;
  animation: petalFall2 20s cubic-bezier(0.35, 0.1, 0.25, 1) infinite -9s;
}
.petal-2 .petal-shape {
  animation: petalSway2 5.5s ease-in-out infinite alternate;
}

.petal-3 {
  left: 36%;
  animation: petalFall3 14s cubic-bezier(0.35, 0.1, 0.25, 1) infinite -14s;
}
.petal-3 .petal-shape {
  animation: petalSway3 4.0s ease-in-out infinite alternate;
}

.petal-4 {
  left: 82%;
  animation: petalFall4 22s cubic-bezier(0.35, 0.1, 0.25, 1) infinite -6s;
}
.petal-4 .petal-shape {
  animation: petalSway1 6.0s ease-in-out infinite alternate;
}

.petal-5 {
  left: 24%;
  animation: petalFall5 17s cubic-bezier(0.35, 0.1, 0.25, 1) infinite -12s;
}
.petal-5 .petal-shape {
  animation: petalSway2 4.8s ease-in-out infinite alternate;
}

.petal-6 {
  left: 68%;
  animation: petalFall6 19s cubic-bezier(0.35, 0.1, 0.25, 1) infinite -18s;
}
.petal-6 .petal-shape {
  animation: petalSway3 5.2s ease-in-out infinite alternate;
}

/* 花瓣下落位移动画 (仅驱动 transform & opacity，限制最大透明度在 0.48 左右) */
@keyframes petalFall1 {
  0% {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  14% {
    opacity: 0.48;
  }
  80% {
    opacity: 0.42;
  }
  100% {
    opacity: 0;
    transform: translate3d(42px, 940px, 0);
  }
}

@keyframes petalFall2 {
  0% {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  12% {
    opacity: 0.45;
  }
  82% {
    opacity: 0.40;
  }
  100% {
    opacity: 0;
    transform: translate3d(52px, 940px, 0);
  }
}

@keyframes petalFall3 {
  0% {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  15% {
    opacity: 0.50;
  }
  78% {
    opacity: 0.42;
  }
  100% {
    opacity: 0;
    transform: translate3d(36px, 940px, 0);
  }
}

@keyframes petalFall4 {
  0% {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  10% {
    opacity: 0.44;
  }
  85% {
    opacity: 0.38;
  }
  100% {
    opacity: 0;
    transform: translate3d(28px, 940px, 0);
  }
}

@keyframes petalFall5 {
  0% {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  14% {
    opacity: 0.46;
  }
  80% {
    opacity: 0.40;
  }
  100% {
    opacity: 0;
    transform: translate3d(46px, 940px, 0);
  }
}

@keyframes petalFall6 {
  0% {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  12% {
    opacity: 0.48;
  }
  82% {
    opacity: 0.41;
  }
  100% {
    opacity: 0;
    transform: translate3d(38px, 940px, 0);
  }
}

/* 花瓣翻转与角度摇曳 */
@keyframes petalSway1 {
  0% {
    transform: rotate(18deg) rotateY(0deg) scale(0.95);
  }
  100% {
    transform: rotate(44deg) rotateY(180deg) scale(1.05);
  }
}

@keyframes petalSway2 {
  0% {
    transform: rotate(-15deg) rotateY(180deg) scale(1.02);
  }
  100% {
    transform: rotate(25deg) rotateY(0deg) scale(0.96);
  }
}

@keyframes petalSway3 {
  0% {
    transform: rotate(30deg) rotateX(0deg);
  }
  100% {
    transform: rotate(60deg) rotateX(180deg);
  }
}

/* 4. 减弱动效适配 (系统开启 reduce motion 时彻底隐藏环境层，0 GPU 占用) */
@media (prefers-reduced-motion: reduce) {
  .question-ambient-layer {
    display: none !important;
  }
}

/* 题目区域中轴舞台容器：严格 width: 100%，由父级 padding-inline: 16px 决定两边留白 */
.question-stage-container {
  position: relative;
  z-index: 10;
  width: 100%;
  margin: 8px 0 0 0;
}

.question-content-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 题目区域：悬浮叙事文字层 (Galgame Floating Narration Layer - Production Baseline) */
.question-card {
  width: 100%;
  background: radial-gradient(
    ellipse 100% 120% at 50% 0%,
    rgba(7, 11, 20, 0.38) 0%,
    rgba(7, 11, 20, 0.18) 60%,
    transparent 100%
  );
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
  border: none;
  border-radius: 0;
  padding: 10px 10px 14px 10px;
  box-shadow: none;
}

.q-title {
  font-family: var(--font-serif);
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #ffffff;
  margin-bottom: 8px;
  line-height: 1.45;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95), 0 0 4px rgba(0, 0, 0, 0.9);
  word-break: break-word;
}

.q-stem {
  font-size: 0.88rem;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.85);
  word-break: break-word;
}

/* 选项容器：100% 充满父级 column */
.options-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* 选项长条按钮：Galgame / VN Choice UI 精致半透明玻璃卡片 */
.gal-option-card {
  width: 100%;
  min-height: 52px;
  background: linear-gradient(
    135deg,
    rgba(16, 22, 38, 0.65) 0%,
    rgba(10, 14, 25, 0.52) 100%
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-align: left;
  outline: none;
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.gal-option-card:hover {
  background: linear-gradient(
    135deg,
    rgba(24, 32, 52, 0.76) 0%,
    rgba(14, 20, 36, 0.64) 100%
  );
  border-color: rgba(253, 164, 175, 0.38);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}

.gal-option-key {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fda4af;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.gal-option-text {
  flex: 1;
  min-width: 0;
  font-size: 0.88rem;
  line-height: 1.48;
  color: #f8fafc;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
  word-break: break-word;
}

.gal-option-arrow {
  flex-shrink: 0;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.3);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.2s;
}

.gal-option-card:hover .gal-option-arrow {
  color: #fda4af;
  transform: translateX(2px);
}

/* 选中态高光：优雅心动紫粉微透玻璃与柔和微光 */
.gal-option-card.selected {
  background: linear-gradient(
    135deg,
    rgba(48, 24, 42, 0.85) 0%,
    rgba(30, 16, 32, 0.82) 100%
  ) !important;
  border-color: rgba(255, 75, 114, 0.75) !important;
  box-shadow: 0 4px 20px rgba(255, 75, 114, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
  transform: translateY(-2px) scale(1.008) !important;
}

.gal-option-card.selected .gal-option-key {
  background: var(--accent-heart);
  color: #fff;
  border-color: #fff;
  box-shadow: 0 0 10px rgba(244, 63, 94, 0.7);
}

.gal-option-card.selected .gal-option-arrow {
  color: #fff;
}

/* 返回上一题后，原先选中过的选项做温和微光提示 */
.gal-option-card.was-selected {
  border-color: rgba(244, 114, 182, 0.45);
  background: rgba(244, 114, 182, 0.07);
}

.gal-option-card.was-selected .gal-option-arrow {
  color: #f472b6;
}

/* 底部留白呼吸区 */
.question-bottom-breathing-space {
  min-height: 160px;
  width: 100%;
  pointer-events: none;
}

/* ==========================================================================
   视图 3: 存读档与分析转场 (ANALYZING)
   ========================================================================== */
.view-analyzing-scene {
  justify-content: center;
  align-items: center;
  padding: 24px;
}

.analyzing-bg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-image: url('../assets/backgrounds/question_bg.png');
  background-size: cover;
  background-position: center;
  filter: blur(12px) brightness(0.35);
}

.analyzing-content {
  position: relative;
  z-index: 10;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 320px;
}

.analyzing-spinner {
  width: 44px;
  height: 44px;
  border: 2px solid rgba(244, 63, 94, 0.2);
  border-top-color: var(--accent-heart);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  box-shadow: 0 0 16px rgba(244, 63, 94, 0.3);
}

.analyzing-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  letter-spacing: 1px;
  color: #fff;
}

.analyzing-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.analyzing-ticker {
  font-size: 0.72rem;
  font-family: monospace;
  color: rgba(244, 114, 182, 0.75);
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   视图 4: 角色揭晓与结果页 (RESULT)
   ========================================================================== */
.view-result-scene {
  justify-content: flex-start;
  position: relative;
}

/* 结果页背景：使用 absolute 贴满，废除 fixed 偏置，保持临海画室通透微光感 (V5 Polish) */
.result-bg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-image: url('../assets/backgrounds/question_bg.png');
  background-size: cover;
  background-position: center top;
  filter: blur(5px) brightness(0.82) saturate(1.18);
  pointer-events: none;
}

.result-bg-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 20%,
    rgba(255, 228, 230, 0.22) 0%,
    rgba(18, 24, 42, 0.38) 45%,
    rgba(12, 16, 30, 0.72) 100%
  );
}

.result-scroll-wrapper {
  position: relative;
  z-index: 10;
  width: 100%;
  min-height: 100vh;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) 16px calc(env(safe-area-inset-bottom, 0px) + 32px) 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.result-top-header {
  width: 100%;
  text-align: center;
  padding: 2px 0;
}

.result-top-badge {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 2.5px;
  font-weight: 700;
  color: #fff1f2;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.32);
  padding: 4px 14px;
  border-radius: 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.result-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

/* 角色舞台视窗：Cinematic Reveal, 破除封闭暗相框感 (V5 Seamless) */
.character-stage-card {
  position: relative;
  width: 100%;
  height: 350px;
  border-radius: 20px;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

.character-stage-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 38%,
    rgba(254, 215, 170, 0.22) 0%,
    rgba(251, 207, 232, 0.26) 30%,
    rgba(244, 114, 182, 0.08) 55%,
    transparent 75%
  );
  z-index: 1;
}

.character-stage-img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 6%;
  display: block;
  mask-image: linear-gradient(to bottom, black 42%, rgba(0, 0, 0, 0.85) 62%, rgba(0, 0, 0, 0.25) 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 42%, rgba(0, 0, 0, 0.85) 62%, rgba(0, 0, 0, 0.25) 85%, transparent 100%);
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.25));
}

.character-stage-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 50%,
    rgba(20, 26, 44, 0.32) 75%,
    rgba(20, 26, 44, 0.85) 100%
  );
}

.character-stage-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 215, 0, 0.4);
  color: #fef08a;
  font-size: 0.68rem;
  letter-spacing: 1.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  backdrop-filter: blur(8px);
}

/* 命定相遇英雄卡片 (V5: 半透明通透玻璃 + 与立绘无缝覆盖) */
.match-hero-card {
  width: 100%;
  margin-top: -38px;
  position: relative;
  z-index: 15;
  background: linear-gradient(
    180deg,
    rgba(32, 40, 62, 0.58) 0%,
    rgba(18, 24, 40, 0.74) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 235, 240, 0.28);
  border-radius: 20px;
  padding: 24px 18px 18px 18px;
  box-shadow: 0 16px 40px rgba(10, 14, 26, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-align: center;
  overflow: hidden;
}

.match-header-tag {
  font-size: 0.68rem;
  letter-spacing: 3px;
  font-weight: 700;
  color: #fbcfe8;
  margin-bottom: 6px;
  text-transform: uppercase;
  opacity: 0.9;
}

.match-character-name {
  font-family: var(--font-serif);
  font-size: 2.15rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: #ffffff;
  text-shadow: 0 0 18px rgba(251, 207, 232, 0.5), 0 2px 8px rgba(0, 0, 0, 0.6);
  margin-bottom: 4px;
  line-height: 1.15;
}

.match-character-sub {
  font-size: 0.8rem;
  color: #cbd5e1;
  margin-bottom: 14px;
  letter-spacing: 0.5px;
}

.match-character-source {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.match-tagline {
  font-size: 0.84rem;
  line-height: 1.6;
  color: #fff1f2;
  font-style: italic;
  padding: 10px 14px;
  background: rgba(244, 63, 94, 0.1);
  border-radius: 10px;
  margin-bottom: 16px;
  border-left: 3px solid #fda4af;
  text-align: left;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* 双核心指数勋章：二次元半透明轻芯片 + 细进度线 */
.match-scores-grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 6px;
}

.score-badge-card {
  min-width: 0;
  overflow: hidden;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.score-badge-card.heart-theme {
  border: 1px solid rgba(244, 63, 94, 0.35);
  background: linear-gradient(145deg, rgba(244, 63, 94, 0.15) 0%, rgba(20, 26, 44, 0.7) 100%);
}

.score-badge-card.comp-theme {
  border: 1px solid rgba(56, 189, 248, 0.35);
  background: linear-gradient(145deg, rgba(56, 189, 248, 0.15) 0%, rgba(20, 26, 44, 0.7) 100%);
}

.score-badge-header {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
}

.score-badge-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.score-badge-card.heart-theme .score-badge-label {
  color: #fda4af;
}

.score-badge-card.comp-theme .score-badge-label {
  color: #7dd3fc;
}

.score-badge-value {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
}

.score-badge-card.heart-theme .score-badge-value {
  color: #ffffff;
  text-shadow: 0 0 12px rgba(244, 63, 94, 0.6);
}

.score-badge-card.comp-theme .score-badge-value {
  color: #ffffff;
  text-shadow: 0 0 12px rgba(56, 189, 248, 0.6);
}

.score-progress-track {
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.score-badge-card.heart-theme .score-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #fb7185, #f43f5e);
  border-radius: 2px;
}

.score-badge-card.comp-theme .score-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #0ea5e9);
  border-radius: 2px;
}

.score-badge-sub {
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  letter-spacing: 0.2px;
}

.match-scroll-hint {
  width: 100%;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.42);
  letter-spacing: 0.5px;
}

.match-scroll-hint .hint-arrow {
  font-size: 0.8rem;
  color: #fda4af;
  animation: breathe 2s infinite ease-in-out;
}

/* 下部卡片流：100% 居中等宽，半透明 Galgame 层次 */
.result-card {
  width: 100%;
  background: linear-gradient(
    180deg,
    rgba(25, 31, 48, 0.72) 0%,
    rgba(15, 20, 32, 0.85) 100%
  );
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 18px 16px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
}

.result-card-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fbcfe8;
  background: rgba(244, 63, 94, 0.12);
  border: 1px solid rgba(244, 114, 182, 0.25);
  padding: 2px 8px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.result-card-title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.result-narrative-text {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.opening-card .persona-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 6px;
}

.opening-card .persona-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.opening-card .persona-badge-item {
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #cbd5e1;
}

.bridge-card {
  border-left: 3px solid #c084fc;
}

.friction-card {
  border-left: 3px solid var(--accent-friction);
}

.friction-score-row {
  margin-top: 8px;
  font-size: 0.78rem;
  color: #fef08a;
}

.callback-item {
  background: rgba(9, 13, 22, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 8px;
}

.callback-q-title {
  font-size: 0.75rem;
  color: #fda4af;
  margin-bottom: 4px;
}

.callback-choice {
  font-size: 0.82rem;
  color: #fff;
  font-weight: 600;
}

.ending-card {
  text-align: center;
  padding: 20px 18px;
}

.ending-quote {
  font-family: var(--font-serif);
  font-size: 0.92rem;
  font-style: italic;
  line-height: 1.7;
  color: #fce7f3;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.result-footer {
  width: 100%;
  margin-top: 8px;
  padding-bottom: 16px;
}

.btn-gal-restart {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  outline: none;
}

.btn-gal-restart:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
}

/* ==========================================================================
   Result Reveal Motion V1 (角色揭晓轻演出编排)
   总时长约 1.28s，作用于统一 wrapper，12位角色构图与 scale 严格 0 侵入
   ========================================================================== */

/* 1. T+0ms: 背景建立 (400ms) 与顶部徽章淡入 (300ms) */
.view-result-scene.active .result-bg-layer {
  animation: resultBgEstablishV1 400ms ease-out 0ms both;
}

.view-result-scene.active .result-top-badge {
  animation: resultBadgeFadeInV1 300ms ease-out 0ms both;
}

@keyframes resultBgEstablishV1 {
  0% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

@keyframes resultBadgeFadeInV1 {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2. T+120ms: 角色背后专属微光弥散 (750ms) */
.view-result-scene.active .character-stage-glow {
  animation: resultGlowSpreadV1 750ms ease-out 120ms both;
}

@keyframes resultGlowSpreadV1 {
  0% {
    opacity: 0;
    transform: scale(0.88);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 3. T+180ms: 角色舞台统一视窗平滑站入 (700ms, cubic-bezier(0.16, 1, 0.3, 1))
   特别保证：动画严格挂在 .character-stage-card，绝对不改动 img.character-stage-img 行内 scale / object-position */
.view-result-scene.active .character-stage-card {
  animation: resultCharacterRevealV1 700ms cubic-bezier(0.16, 1, 0.3, 1) 180ms both;
  will-change: transform, opacity;
}

@keyframes resultCharacterRevealV1 {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 4. T+380ms: 命定相遇英雄卡片浮现 (550ms) */
.view-result-scene.active .match-hero-card {
  animation: resultHeroCardRevealV1 550ms cubic-bezier(0.16, 1, 0.3, 1) 380ms both;
  will-change: transform, opacity;
}

@keyframes resultHeroCardRevealV1 {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 5. T+580ms: 英雄卡片顶沿 1 次性微光掠影 (650ms, 播放完永久静止) */
.match-hero-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 55%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 241, 242, 0.22) 50%,
    transparent 100%
  );
  opacity: 0;
  pointer-events: none !important;
  transform: translateX(-120%);
}

.view-result-scene.active .match-hero-card::after {
  animation: resultHeroShimmerV1 650ms ease-in-out 580ms 1 forwards;
}

@keyframes resultHeroShimmerV1 {
  0% {
    opacity: 0;
    transform: translateX(-120%);
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(260%);
  }
}

/* 6. T+620ms: HEART 核心指数勋章进入 (380ms) */
.view-result-scene.active .score-badge-card.heart-theme {
  animation: resultScoreItemRevealV1 380ms cubic-bezier(0.16, 1, 0.3, 1) 620ms both;
}

/* 7. T+720ms: COMP 核心指数勋章进入 (380ms, 错峰 100ms) */
.view-result-scene.active .score-badge-card.comp-theme {
  animation: resultScoreItemRevealV1 380ms cubic-bezier(0.16, 1, 0.3, 1) 720ms both;
}

@keyframes resultScoreItemRevealV1 {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 8. T+880ms: 下滑提示与下部卡片流淡入 (400ms，至 T+1280ms 全流程完全落定静止) */
.view-result-scene.active .match-scroll-hint,
.view-result-scene.active .result-card,
.view-result-scene.active .result-footer {
  animation: resultContentFadeInV1 400ms ease-out 880ms both;
}

@keyframes resultContentFadeInV1 {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 9. 减弱动效适配 (系统开启 reduce motion 时立即呈现静态完整状态，0 延迟、0 丢字) */
@media (prefers-reduced-motion: reduce) {
  .view-result-scene.active .result-bg-layer,
  .view-result-scene.active .result-top-badge,
  .view-result-scene.active .character-stage-glow,
  .view-result-scene.active .character-stage-card,
  .view-result-scene.active .match-hero-card,
  .view-result-scene.active .score-badge-card.heart-theme,
  .view-result-scene.active .score-badge-card.comp-theme,
  .view-result-scene.active .match-scroll-hint,
  .view-result-scene.active .result-card,
  .view-result-scene.active .result-footer {
    animation: none !important;
    transition-delay: 0s !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .view-result-scene.active .match-hero-card::after {
    animation: none !important;
    opacity: 0 !important;
    display: none !important;
  }
}

/* 开发者抽屉 */
.debug-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 48vh;
  overflow-y: auto;
  z-index: 1000;
  background: rgba(11, 15, 25, 0.96);
  border-top: 2px solid var(--accent-heart);
  padding: 14px;
  font-size: 0.75rem;
}

.debug-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-debug-action {
  background: rgba(244, 63, 94, 0.25);
  border: 1px solid var(--accent-heart);
  color: #fff;
  font-size: 0.7rem;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
}

/* 布局调试辅助边框模式 (仅在 ?layout_debug=1 时开启) */
body.layout-debug-mode {
  outline: 2px solid #ef4444 !important; /* viewport 红线 */
}

body.layout-debug-mode .game-container {
  outline: 2px solid #3b82f6 !important; /* root 蓝线 */
}

body.layout-debug-mode .question-stage-container,
body.layout-debug-mode .result-layout,
body.layout-debug-mode .home-stage-container {
  outline: 2px dashed #10b981 !important; /* content column 绿线 */
}