/* style.css - 南方电网开屏界面样式 */

/* 页面整体布局 */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100dvh;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  /* background-color: #000000; */
  overflow: hidden; /* 禁止下拉回弹 */
  overscroll-behavior: none;
  overscroll-behavior-y: none;
  touch-action: none;
  font-family:
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑",
    "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  max-width: 600px;
  margin: 0 auto;
}

/* ================================================================
   0. 科技感 3 秒伪 Loading 预加载覆盖层样式
   ================================================================ */
.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background: radial-gradient(
    circle at center,
    #0a3d62 0%,
    #031525 70%,
    #010a12 100%
  );
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.6s cubic-bezier(0.2, 0, 0, 1),
    visibility 0.6s cubic-bezier(0.2, 0, 0, 1);
}

.loading-container.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 85%;
  max-width: 360px;
  text-align: center;
  color: #ffffff;
}

.loading-logo-wrapper {
  margin-bottom: 24px;
}

.loading-logo {
  width: 90px;
  height: auto;
  filter: drop-shadow(0 0 12px rgba(0, 255, 204, 0.4));
}

.loading-spinner {
  position: relative;
  width: 68px;
  height: 68px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 3px solid rgba(0, 255, 204, 0.15);
  border-top-color: #00ffcc;
  border-radius: 50%;
  animation: spinner-rotate 1s linear infinite;
  box-shadow: 0 0 15px rgba(0, 255, 204, 0.5);
  box-sizing: border-box;
}

.spinner-core {
  font-size: 24px;
  color: #00ffcc;
  text-shadow: 0 0 10px rgba(0, 255, 204, 0.8);
  animation: core-pulse 1.2s ease-in-out infinite alternate;
}

.loading-text {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 16px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.loading-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  margin-bottom: 10px;
}

.loading-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #00d9ae 0%, #00ffcc 100%);
  border-radius: 3px;
  box-shadow: 0 0 12px rgba(0, 255, 204, 0.9);
  transition: width 0.05s linear;
}

.loading-percent {
  font-size: 1.4rem;
  font-weight: 800;
  color: #00ffcc;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 8px rgba(0, 255, 204, 0.6);
}

.loading-ai-notice {
  position: absolute;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.5px;
  user-select: none;
  pointer-events: none;
}

@keyframes spinner-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes core-pulse {
  0% {
    transform: scale(0.9);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.15);
    opacity: 1;
  }
}

/* 顶部工具栏 (Logo 与 静音控制) */
.top-bar-container {
  position: absolute;
  top: 2.4rem;
  left: 2.4rem;
  right: 2.4rem;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-image {
  display: block;
  width: 6.2rem;
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.top-bar-actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.mute-btn,
.speed-btn {
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  width: 3.2rem;
  height: 3.2rem;
  min-width: 28px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  box-sizing: border-box;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.speed-btn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.9);
}

.speed-btn.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
}

.mute-btn:active,
.speed-btn:active {
  transform: scale(0.9);
}

.speed-btn.active {
  border-color: rgba(0, 255, 204, 0.8);
  background: rgba(0, 255, 204, 0.18);
  box-shadow: 0 4px 14px rgba(0, 255, 204, 0.35);
}

.speed-btn .speed-text {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: color 0.2s ease;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  transform: translateY(-0.5px);
}

.speed-btn.active .speed-text {
  color: #00ffcc;
  text-shadow: 0 0 6px rgba(0, 255, 204, 0.6);
}

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

.mute-btn {
  padding: 0.6rem;
}

.mute-icon {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
  animation: spinSoundIcon 3.5s linear infinite;
  transform-origin: center center;
}

.mute-btn.muted .mute-icon {
  animation: none;
}

@media (min-width: 600px) {
  .top-bar-container {
    left: calc(50% - 300px + 2.4rem);
    right: calc(50% - 300px + 2.4rem);
  }
}

/* 开屏容器 */
.splash-container {
  position: relative;
  width: 100%;
  height: 100dvh; /* 使用动态视口高度，适配移动端浏览器地址栏伸缩 */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 推广标 */
.advertorial-badge {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
  /* background: rgba(61, 61, 61, 0.6); */
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  opacity: 0.6;
  line-height: 1.4;
  user-select: none;
  pointer-events: none;
}

@media (max-width: 768px) {
  .advertorial-badge {
    font-size: 10px;
    padding: 3px 8px;
  }
}

/* 背景图层 */
.splash-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/splash-bg.png") no-repeat center center;
  background-size: cover; /* 保证在各种长宽比的手机屏上完美覆盖 */
  z-index: 1;
  transform: scale(1.08); /* 初始略微放大，为进入缩放动画做准备 */
  opacity: 0;
  animation: bg-fade-in 1.6s cubic-bezier(0.2, 0, 0, 1) 4.0s forwards;
  will-change: transform, opacity;
}

/* 内容布局层 */
.splash-content {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
}

/* 品牌标识容器 - 包含弹跳入场动画 */
.brand-container {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  opacity: 0;
  animation: brand-fade-up 1.2s cubic-bezier(0.2, 0, 0, 1) 4.3s forwards;
  will-change: transform, opacity;
  z-index: 9;
  perspective: 1000px;
}

/* 标题卡片 - 3D 翻转容器 */
.brand-card {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  animation: title-flip-loop 13.6s ease-in-out 5.5s infinite;
  will-change: transform;
}

.brand-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.brand-front {
  position: relative;
  z-index: 2;
  transform: rotateY(0deg);
}

.brand-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
}

.ip-container {
  position: absolute;
  top: 32.5%; /* 根据图片实际高度微调，让脚部刚好接触地面 */
  left: 46%;
  transform: translateX(-50%);
  width: 80%; /* 初始宽度 */
  opacity: 0;
  z-index: 10;

  /* IP人物进入动画 */
  animation: ip-enter 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 4.6s forwards;
  will-change: transform, opacity;

  /* 平滑布局过渡效果 */
  transition:
    bottom 0.3s cubic-bezier(0.2, 0, 0, 1),
    left 0.3s cubic-bezier(0.2, 0, 0, 1),
    width 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.ip-image {
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.normal-ip {
  display: block;
  animation: ip-float 2s ease-in-out infinite alternate;
  will-change: transform;
}

.shock-ip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  display: block;
  pointer-events: none;
}

.line-container {
  position: absolute;
  top: 67%;
  right: -50px;
  width: 30%;
  z-index: 11;
  pointer-events: auto; /* 允许点击 */
  cursor: pointer;
  opacity: 0;
  animation: content-fade-up 1.2s cubic-bezier(0.2, 0, 0, 1) 0.4s forwards;
  will-change: transform, opacity;
  transform-origin: 50% 100%; /* 旋转轴心：电线底部 */
}

.line-image {
  width: 100%;
  height: auto;
  display: block;
  transform: scaleX(-1); /* 水平翻转 */
  filter: drop-shadow(0 0 4px rgba(255, 223, 0, 0.8))
    drop-shadow(0 0 10px rgba(255, 223, 0, 0.6));
  animation: electric-glow 3s ease-in-out infinite alternate;
}

/* 隐藏触发器选中后的状态：电线倒下、IP消失、触电IP显现并播放触电特效 */
.wire-checkbox:checked ~ .line-container {
  animation: wire-fall 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.wire-checkbox:checked ~ .ip-container .normal-ip {
  animation: ip-hide 0.1s forwards 1s;
}

.wire-checkbox:checked ~ .ip-container .shock-ip {
  animation:
    ip-shock 0.6s ease-in-out forwards 1s,
    ip-float 2s ease-in-out infinite alternate 1.6s;
}

/* 触电后的位置和尺寸变化（在 1s 电线触碰到时开始平滑位移） */
.wire-checkbox:checked ~ .ip-container {
  top: 30.5%;
  left: 52%;
  width: 85%;
  transition-delay: 1s;
}

@keyframes wire-fall {
  0% {
    opacity: 1;
    transform: rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: rotate(-20deg); /* 朝左旋转触碰到IP */
  }
}

@keyframes ip-hide {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes ip-shock {
  0% {
    opacity: 1;
    transform: scale(1) translate(0, 0);
    filter: brightness(1) invert(0) drop-shadow(0 0 0px transparent);
  }
  12.5%,
  37.5%,
  62.5%,
  87.5% {
    transform: scale(1.08) translate(-5px, 3px);
    filter: brightness(2) invert(0.85) drop-shadow(0 0 20px #ffd700);
  }
  25%,
  50%,
  75% {
    transform: scale(0.95) translate(5px, -3px);
    filter: brightness(0.7) invert(0)
      drop-shadow(0 0 8px rgba(255, 223, 0, 0.6));
  }
  100% {
    opacity: 1;
    transform: scale(1) translate(0, 0);
    filter: brightness(1) invert(0);
  }
}

@keyframes electric-glow {
  0% {
    filter: drop-shadow(0 0 3px rgba(255, 223, 0, 0.7))
      drop-shadow(0 0 6px rgba(255, 223, 0, 0.4));
  }
  100% {
    filter: drop-shadow(0 0 5px rgba(255, 223, 0, 0.9))
      drop-shadow(0 0 16px rgba(255, 223, 0, 0.85));
  }
}

/* IP人物飞入动画 */
@keyframes ip-enter {
  0% {
    opacity: 0;
    transform: translateX(-300%) translateY(50%);
  }
  40% {
    opacity: 1;
    transform: translateX(-50%) translateY(10%);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* 按钮容器 */
.btn-container {
  position: absolute;
  bottom: 10%; /* 往上移动，使用绝对定位 */
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  z-index: 15;
}

/* 进入按钮与继续按钮 */
.splash-btn {
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  width: 55%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;

  /* 动效过渡 */
  opacity: 0;
  transform: translateY(30px);
  transition:
    transform 0.25s cubic-bezier(0.2, 0, 0, 1),
    width 0.3s ease;

  /* 进入动画 */
  animation: content-fade-up 1.2s cubic-bezier(0.2, 0, 0, 1) 4.6s forwards;

  will-change: transform, opacity;

  /* 确保有足够的点击热区 */
  min-width: 44px;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent; /* 移除移动端默认点击高亮蓝框 */
}

/* 当双按钮同时存在时，enterBtn (开始) 稍小 (38%)，continueBtn (继续) 稍大 (54%) */
.btn-container.dual-btn #enterBtn {
  width: 40%;
}

.btn-container.dual-btn #continueBtn {
  width: 52%;
}

.splash-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none; /* 防止长按图片弹出系统菜单 */
  animation: btn-breath 2.4s ease-in-out infinite alternate;
  will-change: transform;
}

/* 触摸反馈：按下时微缩放 0.96 */
.splash-btn:active {
  transform: scale(0.96);
}
.splash-btn:active img {
  animation-play-state: paused;
}

/* 桌面端悬停反馈 */
@media (hover: hover) {
  .splash-btn:hover {
    transform: scale(1.05);
  }
  .splash-btn:hover img {
    animation-play-state: paused;
  }
}

/* 动画关键帧 */

/* IP人物轻微悬浮抖动 */
@keyframes ip-float {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-8px);
  }
}

/* 进入按钮呼吸缩放效果 */
@keyframes btn-breath {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.05);
  }
}

/* 背景淡入及缓慢拉远动画 */
@keyframes bg-fade-in {
  from {
    opacity: 0;
    transform: scale(1.08);
  }
  to {
    opacity: 1;
    transform: scale(1.001); /* 微小值避免某些浏览器硬件加速闪烁 */
  }
}

/* 内容/按钮淡入上浮动画 */
@keyframes content-fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 品牌标识标题淡入上浮动画 */
@keyframes brand-fade-up {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* 标题卡片持续水平翻转动画 (6s 显示正面 -> 0.8s 水平翻转 -> 6s 显示反面 -> 0.8s 翻转回正面) */
@keyframes title-flip-loop {
  0%,
  44.12% {
    transform: rotateY(0deg);
  }
  50%,
  94.12% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

/* 欢迎页淡出过渡 */
.splash-container.fade-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s cubic-bezier(0.2, 0, 0, 1);
}

/* 视频播放主容器 */
.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background-color: #000000;
  z-index: 10;
  display: none; /* 初始隐藏 */
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.2, 0, 0, 1);
}

.video-container.visible {
  display: block;
  opacity: 1;
}

/* 视频画面元素 */
.video-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 全屏覆盖，防变形 */
  opacity: 0;
  z-index: 1;
  transition: opacity 0.6s cubic-bezier(0.2, 0, 0, 1);
}

.video-element.active {
  opacity: 1;
  z-index: 2;
}

/* 分支选项层 */
.choices-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: 18px;
  box-sizing: border-box;

  /* 动效过渡：淡入与渐隐消失 */
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease-in-out,
    backdrop-filter 0.2s ease-in-out,
    -webkit-backdrop-filter 0.2s ease-in-out;
}

.choices-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* 选项卡片面板：最外层 choices-box 彻底移除边框、背景色与阴影 */
.choices-box {
  position: relative;
  width: min(92%, 400px);
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  text-align: left;
  color: #ffffff;
  box-sizing: border-box;

  /* 弹出与渐隐缩放不透明度动画 */
  transform: scale(0.95) translateY(12px);
  opacity: 0;
  transition:
    transform 0.2s ease-in-out,
    opacity 0.2s ease-in-out;
}

.choices-overlay.active .choices-box {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* 插画配图：保持上方无遮挡且完全透明，层级置顶实现人物冲出卡片的立体感 */
.choices-box .illustration {
  position: relative;
  width: 100%;
  margin-bottom: -32px;
  z-index: 2;
  overflow: visible;
  background: transparent;
  border: none;
  box-shadow: none;
  height: auto;
  margin-top: 5%;
}

.choices-box .illustration img {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  object-fit: contain;
  animation: heroFloat 4s ease-in-out infinite;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

.float-mark,
.spark {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  text-shadow: 0 4px 0 rgba(4, 82, 145, 0.38);
}

.float-mark {
  color: #ffffff;
  font-weight: 950;
  font-size: 34px;
  animation: bob 2.5s ease-in-out infinite;
}

.mark-one {
  left: 10%;
  top: 18%;
  transform: rotate(-18deg);
}

.mark-two {
  right: 8%;
  top: 22%;
  color: #ffe46e;
  animation-delay: -0.8s;
}

.spark {
  color: #ffdf55;
  font-size: 20px;
  animation: twinkle 1.8s ease-in-out infinite;
}

.spark-one {
  left: 20%;
  top: 8%;
}

.spark-two {
  right: 22%;
  top: 12%;
  animation-delay: -0.7s;
}

/* 答题内容区：承载 3D 蓝色背景、纯白边框与沉浸式外阴影 */
.choices-box .content {
  position: relative;
  z-index: 1;
  border: 2px solid;
  border-color: rgba(191, 201, 207, 0.95);
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  background: linear-gradient(180deg, #1077e5 0%, #0a5bb8 60%, #074a9a 100%);
  padding: 42px 16px 20px 16px;
  box-sizing: border-box;
  padding-top: 30%;
  margin: -30% auto 0;
  width: 99.5%;
}

/* 眉标 "安全小课堂" */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: #d2f0ff;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.15em;
}
.eyebrow span {
  flex-shrink: 0;
}
.eyebrow i {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.4), transparent);
}

@keyframes heroFloat {
  0%,
  100% {
    transform: translateY(0) scale(1.01);
  }
  50% {
    transform: translateY(-6px) scale(1.015);
  }
}

@keyframes bob {
  0%,
  100% {
    transform: translateY(0) rotate(-12deg);
  }
  50% {
    transform: translateY(-11px) rotate(7deg);
  }
}

@keyframes twinkle {
  0%,
  100% {
    transform: scale(0.65) rotate(0);
    opacity: 0.45;
  }
  50% {
    transform: scale(1.25) rotate(35deg);
    opacity: 1;
  }
}

/* 选项面板描述 */
.node-desc {
  font-size: 1.3rem;
  color: #bcecff;
  line-height: 1.5;
  margin-bottom: 16px;
}

/* 按钮列表容器 */
.options-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* 单个选项按钮 (高质感 3D 光影玻璃卡片样式) */
.option-btn {
  min-height: 58px;
  display: flex;
  align-items: center;
  text-align: left;
  width: 100%;
  padding: 8px 14px 8px 10px;
  border: 2px solid transparent;
  border-radius: 16px;
  color: #ffffff;
  background:
    linear-gradient(
        180deg,
        rgb(125 141 232 / 94%) 0%,
        rgb(16 161 255 / 96%) 100%
      )
      padding-box,
    linear-gradient(
        180deg,
        rgb(172 234 236 / 90%) 0%,
        rgb(240 248 255 / 75%) 45%,
        rgb(35 124 244 / 85%) 100%
      )
      border-box;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    inset 0 -3px 8px rgba(1, 25, 65, 0.5),
    0 5px 0 #053b78,
    0 8px 20px rgba(0, 25, 70, 0.35);
  cursor: pointer;
  box-sizing: border-box;
  transition:
    transform 0.2s cubic-bezier(0.2, 0, 0, 1),
    background 0.2s ease,
    box-shadow 0.2s ease;
  outline: none;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.option-btn:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(
        180deg,
        rgba(30, 125, 235, 0.98) 0%,
        rgba(14, 90, 185, 0.98) 100%
      )
      padding-box,
    linear-gradient(180deg, #ffffff 0%, #75d8ff 50%, #1c82ff 100%) border-box;
  box-shadow:
    inset 0 2.5px 0 rgba(255, 255, 255, 0.6),
    inset 0 -3px 8px rgba(1, 25, 65, 0.4),
    0 0 16px rgba(80, 200, 255, 0.45),
    0 6px 0 #053b78,
    0 10px 24px rgba(0, 35, 95, 0.45);
}

.option-btn:active {
  transform: translateY(3px);
  background:
    linear-gradient(
        180deg,
        rgba(10, 75, 150, 0.95) 0%,
        rgba(4, 48, 115, 0.98) 100%
      )
      padding-box,
    linear-gradient(180deg, #66c4ff 0%, #1f7ce6 100%) border-box;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.4),
    0 2px 0 #053b78,
    0 3px 8px rgba(0, 20, 60, 0.3);
}

/* 选项字母 A B C 3D 立体小方块前缀 */
.option-btn::before {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, #ffd359 0%, #ff9514 50%, #e66200 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.7),
    0 3px 0 #a34200,
    0 4px 10px rgba(0, 0, 0, 0.35);
  font-size: 2.1rem;
  font-weight: 950;
  flex-shrink: 0;
  text-shadow: 0 1.5px 0 #853300;
}

.option-btn:nth-child(1)::before {
  content: "A";
}

.option-btn:nth-child(2)::before {
  content: "B";
}

.option-btn:nth-child(3)::before {
  content: "C";
}

/* 选项按钮内双语文本排版 */
.option-btn .lang-zh {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.25;
  color: #ffffff;
  text-wrap: pretty;
}

.option-btn .lang-en {
  display: block;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  color: #d7f8ff;
  opacity: 0.9;
  margin-top: 2px;
  text-wrap: pretty;
}

/* 双语文字包裹容器 */
.bilingual-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
}

/* 通关成功层 (透明热区遮罩层，不遮挡结尾视频画面) */
.success-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  z-index: 30;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background: transparent;
  padding: 0;
  box-sizing: border-box;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-in-out;
}

.success-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* 结尾视频下方独立定位的透明点击热区：分享给朋友 */
.share-hotspot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20%;
  width: min(84%, 320px);
  height: 10%;
  background: #fb000000;
  border: none;
  outline: none;
  cursor: pointer;
  z-index: 32;
  -webkit-tap-highlight-color: transparent;
}

/* 结尾视频下方独立定位的透明点击热区：再玩一次 */
.restart-hotspot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 32%;
  width: min(84%, 320px);
  height: 10%;
  background: #fe000000;
  border: none;
  outline: none;
  cursor: pointer;
  z-index: 32;
  -webkit-tap-highlight-color: transparent;
}

/* 海报弹窗覆盖层 */
.poster-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  z-index: 40;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
  padding: 20px;
  box-sizing: border-box;
}

.poster-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.poster-container {
  position: relative;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.poster-img {
  max-width: 100%;
  max-height: 65vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.poster-close-btn {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  color: #333333;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

/* 修改 01 start */
.poster-tip {
  position: absolute;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.5px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  user-select: none;
}
/* 修改 01 end */

/* ================================================================
   交互反馈层样式 (参考 power-safety-quiz 答题卡片 3D 精致立体风格)
   ================================================================ */
.feedback-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  z-index: 25;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: 18px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.2, 0, 0, 1);
}

.feedback-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.feedback-box {
  position: relative;
  width: min(92%, 400px);
  overflow: visible;
  border: 4px solid #ffffff;
  border-radius: 30px;
  background: linear-gradient(180deg, #1077e5 0%, #0a5bb8 60%, #074a9a 100%);
  box-shadow:
    0 0 0 3px #084c98,
    0 16px 40px rgba(0, 15, 50, 0.5);
  padding: 28px 22px 24px 22px;
  text-align: center;
  color: #ffffff;
  box-sizing: border-box;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.5s cubic-bezier(0.2, 0, 0, 1);
}

.feedback-overlay.active .feedback-box {
  transform: scale(1) translateY(0);
}

.feedback-status {
  font-size: 2.2rem;
  font-weight: 950;
  line-height: 1.35;
  margin-bottom: 22px;
  letter-spacing: 0.03em;
  text-align: center;
}

.feedback-status.correct {
  color: #ffffff;
  text-shadow:
    0 3px 0 #056c48,
    0 0 20px rgba(93, 255, 195, 0.7);
}

.feedback-status.incorrect {
  color: #ffffff;
  text-shadow:
    0 3px 0 #7d1028,
    0 0 20px rgba(255, 99, 125, 0.7);
}

.feedback-btn {
  width: 100%;
  min-height: 56px;
  padding: 12px 20px;
  font-size: 1.7rem;
  font-weight: 950;
  border-radius: 16px;
  cursor: pointer;
  outline: none;
  border: 2px solid transparent;
  box-sizing: border-box;
  transition:
    transform 0.2s cubic-bezier(0.2, 0, 0, 1),
    background 0.2s ease,
    box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  text-shadow: 0 1.5px 2px rgba(0, 0, 0, 0.3);
}

.feedback-btn.correct {
  color: #ffffff;
  background:
    linear-gradient(180deg, #32d698 0%, #10a874 50%, #067850 100%) padding-box,
    linear-gradient(180deg, #d2ffec 0%, #68f5c3 45%, #056342 100%) border-box;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    inset 0 -3px 8px rgba(0, 40, 25, 0.5),
    0 5px 0 #045237,
    0 8px 22px rgba(9, 163, 122, 0.4);
}

.feedback-btn.correct:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(180deg, #42e6a7 0%, #13ba82 50%, #088a5e 100%) padding-box,
    linear-gradient(180deg, #ffffff 0%, #88ffd6 50%, #0ab879 100%) border-box;
  box-shadow:
    inset 0 2.5px 0 rgba(255, 255, 255, 0.65),
    inset 0 -3px 8px rgba(0, 40, 25, 0.4),
    0 0 18px rgba(50, 230, 165, 0.55),
    0 6px 0 #045237,
    0 10px 24px rgba(9, 163, 122, 0.5);
}

.feedback-btn.correct:active {
  transform: translateY(3px);
  background:
    linear-gradient(180deg, #0f9868 0%, #066e4a 100%) padding-box,
    linear-gradient(180deg, #58e8b6 0%, #089462 100%) border-box;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.4),
    0 2px 0 #045237,
    0 3px 8px rgba(0, 30, 20, 0.3);
}

.feedback-btn.incorrect {
  color: #ffffff;
  background:
    linear-gradient(180deg, #ff5e74 0%, #e32b49 50%, #af152f 100%) padding-box,
    linear-gradient(180deg, #ffe0e5 0%, #ff8ca0 45%, #850b1f 100%) border-box;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    inset 0 -3px 8px rgba(60, 5, 15, 0.5),
    0 5px 0 #7a0c20,
    0 8px 22px rgba(225, 40, 70, 0.4);
}

.feedback-btn.incorrect:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(180deg, #ff7084 0%, #f23a57 50%, #c21b36 100%) padding-box,
    linear-gradient(180deg, #ffffff 0%, #ffa8b6 50%, #e62342 100%) border-box;
  box-shadow:
    inset 0 2.5px 0 rgba(255, 255, 255, 0.65),
    inset 0 -3px 8px rgba(60, 5, 15, 0.4),
    0 0 18px rgba(255, 90, 115, 0.55),
    0 6px 0 #7a0c20,
    0 10px 24px rgba(225, 40, 70, 0.5);
}

.feedback-btn.incorrect:active {
  transform: translateY(3px);
  background:
    linear-gradient(180deg, #d4223e 0%, #9e0e24 100%) padding-box,
    linear-gradient(180deg, #ff7a8f 0%, #b8142e 100%) border-box;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.4),
    0 2px 0 #7a0c20,
    0 3px 8px rgba(40, 0, 10, 0.3);
}

/* ================================================================
   选项与反馈卡片交错淡入入场动画 (Scheme 2)
   ================================================================ */
.choices-box .node-title,
.choices-box .node-desc,
.choices-box .options-list > * {
  opacity: 0;
  transform: translateY(15px);
  will-change: transform, opacity;
}

.choices-overlay.active .node-title {
  animation: fade-slide-in 0.5s cubic-bezier(0.2, 0, 0, 1) 0.08s forwards;
}
.choices-overlay.active .node-desc {
  animation: fade-slide-in 0.5s cubic-bezier(0.2, 0, 0, 1) 0.16s forwards;
}
.choices-overlay.active .options-list > *:nth-child(1) {
  animation: fade-slide-in 0.5s cubic-bezier(0.2, 0, 0, 1) 0.24s forwards;
}
.choices-overlay.active .options-list > *:nth-child(2) {
  animation: fade-slide-in 0.5s cubic-bezier(0.2, 0, 0, 1) 0.32s forwards;
}
.choices-overlay.active .options-list > *:nth-child(3) {
  animation: fade-slide-in 0.5s cubic-bezier(0.2, 0, 0, 1) 0.4s forwards;
}

.feedback-box .feedback-status,
.feedback-box .feedback-btn {
  opacity: 0;
  transform: translateY(15px);
  will-change: transform, opacity;
}

.feedback-overlay.active .feedback-status {
  animation: fade-slide-in 0.5s cubic-bezier(0.2, 0, 0, 1) forwards;
}
.feedback-overlay.active .feedback-btn {
  animation: fade-slide-in 0.5s cubic-bezier(0.2, 0, 0, 1) 0.2s forwards;
}

@keyframes fade-slide-in {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================================================================
   HUD 科技感平视显示器设计 (Scheme 1)
   ================================================================ */

/* HUD 底部进度与指示器 */
.hud-footer {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 440px;
  z-index: 18; /* 位于视频上层，弹窗下层 */
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none; /* 穿透鼠标点击 */
  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;
}

.hud-footer.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.hud-level-indicator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.5);
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
}

.hud-level-num {
  color: #00ffcc; /* 荧光青色 */
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(0, 255, 204, 0.8);
}

.hud-progress-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

.hud-progress-bar {
  width: 11.1%; /* 默认第一关进度：1/9 ≈ 11.1% */
  height: 100%;
  background: linear-gradient(90deg, #00d9ae 0%, #00ffcc 100%);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(0, 255, 204, 0.8);
  transition: width 0.6s cubic-bezier(0.2, 0, 0, 1);
}

/* ================================================================
   自定义分支选项弹窗辅助样式
   ================================================================ */

/* 问题展示容器 */
.question-container {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  width: 100%;
}

/* 标题样式 (参考 power-safety-quiz 3D 立体文字与阴影) */
.node-title {
  margin: 0;
  font-size: 2.2rem;
  font-weight: 950;
  color: #ffffff;
  line-height: 1.3;
  text-align: left;
  letter-spacing: 0.03em;
  text-shadow: 0 3px 0 rgba(4, 69, 137, 0.5);
}

/* 双语语言包裹样式 */
.node-title .lang-zh {
  display: block;
  font-size: 1.9rem;
  color: #ffffff;
  font-weight: 950;
  text-shadow: 0 3px 0 rgba(4, 69, 137, 0.5);
  margin-bottom: 4px;
  text-wrap: pretty;
}

.node-title .lang-en {
  display: block;
  font-size: 1.4rem;
  color: #d7f8ff;
  font-weight: 700;
  text-shadow: 0 2px 0 rgba(4, 69, 137, 0.4);
  text-wrap: pretty;
}