* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #030816;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* 视口全屏容器：绝对居中，深邃星空底色自然衔接 */
#app-viewport {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle at center, #071536 0%, #030816 100%);
}

/* 
 * 750 x 1334 精准设计舞台：
 * 动态根据核心内容区 (安全区高 1120px) 对齐
 * 保证在带浏览器工具栏/地址栏等任何比例屏幕下，顶部多余黑空被自然裁出，红框核心画面顶天立地呈现！
 */
.stage {
  position: absolute;
  width: 750px;
  height: 1334px;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  z-index: 2;
  overflow: hidden;
}

/* 页面切换控制 */
.page-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.page-view.active {
  display: block;
  opacity: 1;
}

/* 页面单底图通用样式：唯一底图，铺满舞台 */
.view-single-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 1;
}

/* ========== 页面 1：首页 (Splash) ========== */
#view-splash {
  position: relative;
}

.btn-skip {
  position: absolute;
  top: 40px;
  right: 36px;
  padding: 10px 24px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 26px;
  letter-spacing: 2px;
  cursor: pointer;
  z-index: 10;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.2s, transform 0.1s;
}

.btn-skip:active {
  transform: scale(0.95);
  background: rgba(0, 0, 0, 0.65);
}

/* ========== 页面 2：轮播选图 (Carousel) ========== */
#view-carousel {
  position: relative;
}

.carousel-container {
  position: absolute;
  top: 325px; /* 原 360px，整体向上微移，充分利用上方纯黑区域，确保下方按钮绝不被切 */
  left: 0;
  width: 750px;
  height: 640px;
  display: flex;
  justify-content: center;
  align-items: center;
  touch-action: pan-y;
  z-index: 5;
}

.carousel-card {
  position: absolute;
  width: 280px;
  height: 500px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), filter 0.35s ease, opacity 0.35s ease, border-color 0.35s ease;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid transparent;
}

/* 轮播卡片状态：左、中（高亮）、右 */
.carousel-card.pos-left {
  transform: translateX(-200px) scale(0.78);
  opacity: 0.65;
  filter: brightness(0.65) blur(0.5px);
  z-index: 2;
}

.carousel-card.pos-center {
  transform: translateX(0px) scale(1);
  opacity: 1;
  filter: brightness(1);
  border: 3px solid #38bdf8;
  box-shadow: 0 0 25px rgba(56, 189, 248, 0.6), 0 12px 35px rgba(0, 0, 0, 0.7);
  z-index: 5;
}

.carousel-card.pos-right {
  transform: translateX(200px) scale(0.78);
  opacity: 0.65;
  filter: brightness(0.65) blur(0.5px);
  z-index: 2;
}

/* 开始按钮：使用截取的高清按钮图 */
.btn-start-wrap {
  position: absolute;
  top: 1005px; /* 原 1045px，上提40px，在任何被工具栏压缩的手机视口下都完整展现 */
  left: 182px;
  width: 386px;
  height: 88px;
  cursor: pointer;
  z-index: 10;
  border-radius: 44px;
  background: url('../assets/btn-start.png') no-repeat center center / contain;
  transition: transform 0.15s ease, filter 0.15s;
}

.btn-start-wrap:active {
  transform: scale(0.96);
  filter: brightness(1.15);
}

/* ========== 页面 3：拼图内页 (Puzzle Play) ========== */
#view-puzzle {
  position: relative;
}

/* 顶部返回按钮 */
.btn-puzzle-back {
  position: absolute;
  top: 40px;
  left: 36px;
  padding: 8px 18px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #e0f2fe;
  font-size: 24px;
  cursor: pointer;
  z-index: 15;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* 上方拼图大框 (400 x 712) */
.puzzle-target-board {
  position: absolute;
  left: 175px;
  top: 253px;
  width: 400px;
  height: 712px;
  border-radius: 12px;
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: 356px 356px;
  overflow: hidden;
  background: rgba(4, 10, 26, 0.5);
  z-index: 5;
}

/* 始终置顶的发光外框覆盖层：pointer-events: none，z-index 高于一切拼图，永不被遮挡 */
.puzzle-board-border-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  border: 2px solid #00d2ff;
  box-shadow: 0 0 20px rgba(0, 210, 255, 0.45), inset 0 0 10px rgba(0, 210, 255, 0.25);
  pointer-events: none;
  z-index: 25;
}

/* 内嵌已落位拼图容器：严格约束在圆角大框内 */
.puzzle-pieces-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  pointer-events: none;
  z-index: 10;
}

/* 大框内的透明目标预览原图 */
.puzzle-preview-ghost {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0.22;
  filter: blur(0.8px);
  pointer-events: none;
  z-index: 1;
}

/* 十字裁切：4个 2x2 目标槽位 (每个 200 x 356) */
.puzzle-slot {
  position: relative;
  width: 200px;
  height: 356px;
  z-index: 2;
  border-right: 1px dashed rgba(0, 210, 255, 0.25);
  border-bottom: 1px dashed rgba(0, 210, 255, 0.25);
  transition: background-color 0.2s, box-shadow 0.2s;
}

.puzzle-slot:nth-child(2),
.puzzle-slot:nth-child(4) {
  border-right: none;
}

.puzzle-slot:nth-child(3),
.puzzle-slot:nth-child(4) {
  border-bottom: none;
}

.puzzle-slot.hover-slot {
  background: rgba(0, 210, 255, 0.15);
  box-shadow: inset 0 0 15px rgba(0, 210, 255, 0.4);
}

/* 下方拼图碎块托盘外框装饰 (540 x 214) */
.puzzle-tray-frame {
  position: absolute;
  left: 105px;
  top: 1015px;
  width: 540px;
  height: 214px;
  border-radius: 14px;
  border: 2px solid #00b4d8;
  box-shadow: 0 0 20px rgba(0, 180, 216, 0.3);
  background: rgba(2, 6, 18, 0.4);
  pointer-events: none;
  z-index: 4;
}

/* 托盘里4个待放槽位 */
.puzzle-dock-slots {
  position: absolute;
  left: 105px;
  top: 1015px;
  width: 540px;
  height: 214px;
  z-index: 6;
  pointer-events: none;
}

.dock-slot {
  position: absolute;
  top: 22px;
  width: 97px;
  height: 172px;
  border-radius: 4px;
  border: 1px solid rgba(0, 210, 255, 0.4);
  background: rgba(0, 0, 0, 0.35);
}

.dock-slot:nth-child(1) { left: 30px; }
.dock-slot:nth-child(2) { left: 157px; }
.dock-slot:nth-child(3) { left: 285px; }
.dock-slot:nth-child(4) { left: 413px; }

/* 拼图碎块：十字裁切 (2x2 四等分) */
.puzzle-piece {
  position: absolute;
  border-radius: 4px;
  cursor: grab;
  touch-action: none;
  z-index: 10;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  border: 1.5px solid #00d2ff;
  transition: border-color 0.25s, box-shadow 0.25s;
}

/* 在下方托盘中的大小 (97 x 172) */
.puzzle-piece.in-dock {
  width: 97px;
  height: 172px;
  background-size: 194px 344px; /* 2列 x 2行 总尺寸：97*2=194, 172*2=344 */
}

/* 在上方目标槽中的大小 (200 x 356) */
.puzzle-piece.in-slot {
  width: 200px;
  height: 356px;
  background-size: 400px 712px; /* 2列 x 2行 总尺寸：200*2=400, 356*2=712 */
  border-radius: 0;
  border: none;
  box-shadow: none;
  pointer-events: auto; /* 允许从大框中再次拖出 */
}

/* 正在被拖拽的拼图块：处于高层级并放大到大框比例，避免落地跳变 */
.puzzle-piece.dragging {
  cursor: grabbing;
  z-index: 100 !important;
  width: 200px;
  height: 356px;
  background-size: 400px 712px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8), 0 0 25px rgba(0, 210, 255, 0.7);
  border: 2px solid #38bdf8;
  opacity: 0.95;
}

/* 拼图正确彩蛋爆发：全屏彩带与纸屑 Canvas */
.confetti-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 750px;
  height: 1334px;
  pointer-events: none;
  z-index: 150;
  display: none;
}

.confetti-canvas.active {
  display: block;
}

/* 拼图成功合体胜利动效：外框高亮爆发、金色与青蓝光晕扩散、整幅拼图微微弹动融合 */
.puzzle-target-board.puzzle-win-anim {
  animation: boardWinPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.puzzle-target-board.puzzle-win-anim .puzzle-board-border-overlay {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 45px rgba(56, 189, 248, 0.95), inset 0 0 25px rgba(254, 240, 138, 0.6) !important;
  transition: all 0.5s ease;
}

/* 拼图完成时划过的青蓝白高光融合层（纯白青光，无黄底） */
.puzzle-board-win-flash {
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent 10%,
    rgba(255, 255, 255, 0.15) 35%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(56, 189, 248, 0.5) 60%,
    transparent 80%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 30;
  opacity: 0;
}

.puzzle-target-board.puzzle-win-anim .puzzle-board-win-flash {
  opacity: 1;
  animation: winFlashSweep 0.85s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes boardWinPop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.05);
    box-shadow: 0 0 50px rgba(56, 189, 248, 0.9), 0 0 80px rgba(254, 240, 138, 0.5);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 30px rgba(0, 210, 255, 0.6);
  }
}

@keyframes winFlashSweep {
  0% {
    left: -150%;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    left: 150%;
    opacity: 0;
  }
}
.puzzle-piece.error-border {
  outline: 4px solid #ef4444 !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.9) !important;
  animation: pieceShake 0.4s ease-in-out;
}

@keyframes pieceShake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-4px, 0); }
  40% { transform: translate(4px, 0); }
  60% { transform: translate(-3px, 0); }
  80% { transform: translate(3px, 0); }
}

/* ========== 弹窗提示框 (Popup Modal) ========== */
.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 200;
  display: none;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-overlay.active {
  display: flex;
  opacity: 1;
}

.modal-content {
  position: relative;
  width: 650px;
  height: 447px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: scale(0.85);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay.active .modal-content {
  transform: scale(1);
}

/* 弹窗右上角关闭按钮热区 */
.modal-close-btn {
  position: absolute;
  top: 45px;
  right: 50px;
  width: 60px;
  height: 60px;
  cursor: pointer;
  z-index: 10;
}

/* 错误弹窗内的文字居中渲染 */
.modal-error-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  z-index: 5;
  margin-top: -20px;
}

.error-title {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #f87171;
  text-shadow: 0 0 15px rgba(248, 113, 113, 0.6);
  margin-bottom: 35px;
}

.error-sub {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #e0f2fe;
  line-height: 1.5;
  text-shadow: 0 0 10px rgba(0, 210, 255, 0.4);
}

/* ========== 页面 12：完成结算页 (End Page) - 分层素材与序列动效 ========== */
#view-end {
  position: relative;
  overflow: hidden;
}

/* 底图入场柔和渐显与极轻微沉浸呼吸 */
.end-bg-layer {
  animation: endBgReveal 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards, endBgBreathe 10s ease-in-out infinite alternate 1.2s;
  will-change: transform, opacity;
}

@keyframes endBgReveal {
  0% {
    opacity: 0;
    transform: scale(1.03);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes endBgBreathe {
  0% { transform: scale(1); }
  100% { transform: scale(1.02); }
}

/* 分层通用基础样式 */
.end-layer {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  will-change: transform, opacity;
}

/* 1. 文字1.png (感谢您 为中国多发性骨髓瘤事业) */
.end-text1 {
  left: 171px;
  top: 376px;
  width: 408px;
  height: 119px;
  animation: endFadeSlideUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.3s forwards;
}

/* 2. 横条幅容器 + 横条幅.png + 文字22.png */
.end-banner-wrap {
  position: absolute;
  left: 0;
  top: 508px;
  width: 750px;
  height: 196px;
  pointer-events: none;
  z-index: 12;
}

.end-banner {
  left: 18px;
  top: 0;
  width: 714px;
  height: 196px;
  animation: endBannerPop 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s forwards, bannerPulse 4s ease-in-out infinite 1.45s;
}

.end-text22 {
  left: 103px;
  top: 66px; /* 574 - 508 = 66px */
  width: 544px;
  height: 76px;
  animation: endTextPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.75s forwards;
}

@keyframes endBannerPop {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bannerPulse {
  0%, 100% {
    filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 25px rgba(56, 189, 248, 0.9)) brightness(1.08);
  }
}

@keyframes endTextPop {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 3. 向下箭头.png (带循环浮动律动) */
.end-arrow {
  left: 343px;
  top: 767px;
  width: 64px;
  height: 39px;
  animation: endFadeSlideUp 0.7s cubic-bezier(0.25, 1, 0.5, 1) 0.95s forwards, arrowFloat 2.2s ease-in-out infinite 1.65s;
}

@keyframes arrowFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}

/* 4. 文字3.png (未来“珂”期 感谢您与强生制药同行 期待与您携手共进) */
.end-text3 {
  left: 188px;
  top: 850px;
  width: 373px;
  height: 205px;
  animation: endFadeSlideUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1.15s forwards;
}

/* 5. 文字4.png (强生制药 T09-T10, T13-T14 号展位) */
.end-text4 {
  left: 233px;
  top: 1155px;
  width: 283px;
  height: 79px;
  animation: endFadeSlideUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1.35s forwards;
}

/* 6. 返回按钮.png (根据参考图置于右下角 x:602, y:1157) */
.end-btn-back-wrap {
  position: absolute;
  left: 602px;
  top: 1157px;
  width: 74px;
  height: 73px;
  cursor: pointer;
  z-index: 25;
  opacity: 0;
  animation: endFadeScale 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) 1.45s forwards, btnBackBreath 3s ease-in-out infinite 2.2s;
  transition: transform 0.15s ease, filter 0.15s;
}

.end-btn-back-img {
  width: 100%;
  height: 100%;
  display: block;
}

.end-btn-back-wrap:active {
  transform: scale(0.92);
  filter: brightness(1.2);
}

@keyframes btnBackBreath {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.6));
  }
  50% {
    transform: scale(1.06);
    filter: drop-shadow(0 0 18px rgba(56, 189, 248, 0.95)) brightness(1.1);
  }
}

/* 入场通用缓动动画 */
@keyframes endFadeSlideUp {
  0% {
    opacity: 0;
    transform: translateY(22px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes endFadeScale {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 动效 1：斜向下划过的流星群 */
.meteor-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 600px;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.meteor {
  position: absolute;
  width: 180px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(56, 189, 248, 0.6), transparent);
  transform: rotate(-38deg);
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.8));
}

.meteor-1 {
  top: 60px;
  right: -50px;
  animation: meteorShoot 4s ease-in-out infinite 0.8s;
}

.meteor-2 {
  top: 180px;
  right: 120px;
  width: 240px;
  animation: meteorShoot 5.5s ease-in-out infinite 2.6s;
}

.meteor-3 {
  top: 260px;
  right: -80px;
  width: 160px;
  animation: meteorShoot 4.8s ease-in-out infinite 4.2s;
}

@keyframes meteorShoot {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(-38deg);
  }
  15% {
    opacity: 1;
  }
  45% {
    opacity: 0;
    transform: translate(-550px, 430px) rotate(-38deg);
  }
  100% {
    opacity: 0;
    transform: translate(-550px, 430px) rotate(-38deg);
  }
}

/* 动效 2：顶部黄金字上的耀眼星芒闪烁 (Sparkle) */
.star-sparkle {
  position: absolute;
  width: 24px;
  height: 24px;
  background: radial-gradient(circle, #ffffff 15%, rgba(254, 240, 138, 0.8) 45%, transparent 70%);
  pointer-events: none;
  z-index: 8;
  opacity: 0;
  transform: scale(0.5) rotate(0deg);
  filter: drop-shadow(0 0 8px #fef08a);
}

.star-sparkle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -12px;
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  transform: translateY(-50%);
}

.star-sparkle::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -12px;
  height: 48px;
  width: 2px;
  background: linear-gradient(180deg, transparent, #fff, transparent);
  transform: translateX(-50%);
}

/* 轮播页黄金字笔画星芒闪烁位置 */
.sparkle-c1 {
  top: 130px;
  left: 360px;
  animation: sparkleTwinkle 3.2s ease-in-out infinite 0.5s;
}

.sparkle-c2 {
  top: 165px;
  left: 580px;
  animation: sparkleTwinkle 3.8s ease-in-out infinite 1.8s;
}

.sparkle-c3 {
  top: 180px;
  left: 200px;
  animation: sparkleTwinkle 3.5s ease-in-out infinite 2.9s;
}

.sparkle-c4 {
  top: 120px;
  left: 470px;
  animation: sparkleTwinkle 4.2s ease-in-out infinite 4s;
}

/* 闪烁点位置：恰好落在“治”、“珂”、“期”等黄金笔画尖端 */
.sparkle-1 {
  top: 135px;
  left: 360px;
  animation: sparkleTwinkle 3.2s ease-in-out infinite 1.2s;
}

.sparkle-2 {
  top: 175px;
  left: 585px;
  animation: sparkleTwinkle 4s ease-in-out infinite 2.5s;
}

.sparkle-3 {
  top: 185px;
  left: 210px;
  animation: sparkleTwinkle 3.6s ease-in-out infinite 3.8s;
}

@keyframes sparkleTwinkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0.3) rotate(0deg);
  }
  30%, 60% {
    opacity: 1;
    transform: scale(1.1) rotate(45deg);
  }
  85% {
    opacity: 0;
    transform: scale(0.4) rotate(90deg);
  }
}

/* 动效 3：顶部黄金大字表面光影流光扫光 */
.title-sweep-light {
  position: absolute;
  top: 100px;
  left: 60px;
  width: 630px;
  height: 180px;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
  border-radius: 10px;
}

.title-sweep-light::before {
  content: '';
  position: absolute;
  top: 0;
  left: -200%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(255, 255, 255, 0.1) 40%,
    rgba(254, 240, 138, 0.45) 50%,
    rgba(255, 255, 255, 0.65) 54%,
    rgba(254, 240, 138, 0.45) 58%,
    rgba(255, 255, 255, 0.1) 68%,
    transparent 80%
  );
  transform: skewX(-25deg);
  animation: titleLightSweep 5s ease-in-out infinite 1.5s;
}

@keyframes titleLightSweep {
  0% { left: -200%; }
  35%, 100% { left: 200%; }
}

/* 动效 4：核心发光区域「拼出您的一份力量」蓝光脉冲与横向激光 */
.core-box-pulse {
  position: absolute;
  top: 535px;
  left: 65px;
  width: 620px;
  height: 145px;
  pointer-events: none;
  z-index: 7;
  overflow: hidden;
  border-radius: 8px;
}

.core-laser-line {
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(56, 189, 248, 0.15) 30%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(56, 189, 248, 0.8) 60%,
    transparent 100%
  );
  animation: laserScan 4.2s cubic-bezier(0.4, 0, 0.2, 1) infinite 2s;
  box-shadow: 0 0 25px rgba(56, 189, 248, 0.5);
}

@keyframes laserScan {
  0% { left: -150%; }
  40%, 100% { left: 150%; }
}

/* 动效 5：轻盈漂浮的微星辰粒子 */
.particles-field {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(224, 242, 254, 0.8);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.9);
  animation: particleFloat 6s ease-in-out infinite;
}

.p1 { top: 380px; left: 180px; width: 3px; height: 3px; animation-duration: 5.5s; animation-delay: 0.3s; }
.p2 { top: 480px; left: 560px; width: 5px; height: 5px; animation-duration: 6.8s; animation-delay: 1.4s; }
.p3 { top: 720px; left: 240px; width: 4px; height: 4px; animation-duration: 7.2s; animation-delay: 2.1s; }
.p4 { top: 880px; left: 490px; width: 3px; height: 3px; animation-duration: 5.9s; animation-delay: 0.9s; }
.p5 { top: 1050px; left: 320px; width: 4px; height: 4px; animation-duration: 6.4s; animation-delay: 3.2s; }

@keyframes particleFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-25px) scale(1.3);
    opacity: 0.9;
  }
}

/* 右下角「再玩一次」按钮（带能量波纹呼吸） */
.btn-replay {
  position: absolute;
  bottom: 50px;
  right: 40px;
  padding: 16px 36px;
  border-radius: 30px;
  background: linear-gradient(135deg, #38bdf8 0%, #2563eb 100%);
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: #ffffff;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 2px;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.8);
  cursor: pointer;
  z-index: 20;
  animation: replayPulse 2.8s ease-in-out infinite;
  transition: transform 0.15s ease, box-shadow 0.2s;
}

.btn-replay:active {
  transform: scale(0.94);
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.4);
}

@keyframes replayPulse {
  0%, 100% {
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.6), 0 0 0 0 rgba(56, 189, 248, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.8), 0 0 15px 5px rgba(56, 189, 248, 0.3);
    transform: scale(1.03);
  }
}