:root {
  --tp-green: #00A33C;
  --tp-green-l: #6FE08A;
  --tp-blue: #0364B2;
  --tp-blue-l: #35C6FF;
  --tp-teal: #0B7B8E;
  --tp-teal-l: #1F9181;
  --tp-silver: #93C7C8;
  --tp-deep: #124155;
  --danger: #FF5252;
  --gold: #F7C948;
  --ink: #04182C;
  --glass: rgba(18, 65, 85, 0.82);
  --glass-border: rgba(147, 199, 200, 0.22);
}

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

/* 移动端 H5 UX 规范：
   · 触控目标 ≥ 48px（Apple HIG）；· 正文 ≥ 13px 保证可读；
   · 安全区 env() 适配刘海/Home 指示条；· 关闭 300ms 点击延迟。 */
button, input, .btn, .link-btn, .name-input { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--tp-teal-l); outline-offset: 2px; border-radius: 10px; }

html, body {
  margin: 0; padding: 0; height: 100%;
  overflow: hidden;
  background: #04182C;
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  color: #EAF6FF;
  user-select: none;
}

#app { position: relative; width: 100%; height: 100%; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.hidden { display: none !important; }
[hidden] { display: none !important; }

/* ---------- HUD（V3f 升级：分组+胶囊+能量条+暂停） ---------- */
#hud {
  position: absolute; inset: 0;
  pointer-events: none;
  padding: calc(12px + env(safe-area-inset-top)) 14px 0;
}

/* 顶部行：左信息堆 / 右小地图 */
.hud-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px;
}
.hud-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 8px;
}
/* 时间胶囊：用一个小绿点 + "用时"标签 + 数字，34px 裸数字降为 26px 胶囊数字 */
.hud-time-pill {
  display: inline-flex; align-items: center; gap: 8px;
  width: fit-content; max-width: 100%;
  padding: 7px 14px 7px 11px;
  background: rgba(4, 22, 30, 0.55);
  border: 1px solid rgba(147, 199, 200, 0.28);
  border-radius: 22px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 30, 25, 0.4);
}
.tp-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--tp-green-l, #6FE08A);
  box-shadow: 0 0 8px rgba(111, 224, 138, 0.9);
  animation: tpDotPulse 1.4s ease-in-out infinite;
  flex: none;
}
@keyframes tpDotPulse {
  0%, 100% { opacity: .55; transform: scale(.85); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
.tp-label { font-size: 12px; color: #93C7C8; letter-spacing: 1px; flex: none; }
.tp-num {
  font-size: 26px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums; line-height: 1;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 10px rgba(0, 80, 60, 0.5);
}
.tp-num.penalty { color: #FF8A80; text-shadow: 0 2px 12px rgba(255, 82, 82, 0.6); }

/* 距终点：单独一行胶囊，跟时间组成信息堆 */
.hud-distance {
  display: inline-flex; align-items: baseline; gap: 5px;
  width: fit-content; padding: 5px 12px;
  background: rgba(4, 22, 30, 0.42);
  border: 1px solid rgba(147, 199, 200, 0.18);
  border-radius: 18px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.dist-label { font-size: 11px; color: #93C7C8; letter-spacing: 1px; }
.dist-num   { font-size: 13px; color: #CFE8FA; }
.dist-num b {
  color: var(--gold, #F7C948); font-size: 16px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 8px rgba(247, 201, 72, 0.4);
  display: inline-block;
  transition: transform .18s ease-out;
}
.dist-num b.bump { animation: distBump .32s ease-out; }
@keyframes distBump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.32); color: #fff; }
  100% { transform: scale(1); }
}

/* 暂停按钮：≥48px 触控目标 */
.hud-pause {
  flex: none; pointer-events: auto;
  position: absolute; right: 14px; top: calc(12px + env(safe-area-inset-top));
  width: 44px; height: 44px;
  background: rgba(4, 22, 30, 0.55);
  border: 1px solid rgba(147, 199, 200, 0.28);
  border-radius: 50%;
  color: #EAF6FF; font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer; touch-action: manipulation;
  transition: background .15s, transform .12s;
}
.hud-pause:active { background: rgba(0, 163, 60, 0.4); transform: scale(.94); }

#minimap {
  width: 92px; height: 92px;
  border-radius: 12px;
  background: rgba(4, 22, 30, 0.6);
  border: 1.5px solid rgba(147, 199, 200, 0.36);
  box-shadow: 0 4px 16px rgba(0, 30, 25, 0.4), inset 0 0 14px rgba(0, 120, 90, 0.2);
  flex: none;
}

/* 底部行：踩坑/知识能量条 + 数字 */
.hud-bottom {
  position: absolute; left: 14px; right: 14px;
  bottom: calc(72px + env(safe-area-inset-bottom));
  display: flex; gap: 10px;
}
.hud-stat {
  flex: 1;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px;
  background: rgba(4, 22, 30, 0.55);
  border: 1px solid rgba(147, 199, 200, 0.22);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hud-stat.trap { border-left: 3px solid var(--danger); }
.hud-stat.know { border-left: 3px solid var(--tp-green); }
.stat-icon {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; line-height: 1;
}
.hud-stat.trap .stat-icon { background: rgba(255, 82, 82, 0.18); color: #FF7B72; }
.hud-stat.know .stat-icon { background: rgba(0, 163, 60, 0.18); color: var(--tp-green-l); }
.stat-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.stat-label {
  font-size: 11px; color: #93C7C8; letter-spacing: 1px;
}
.stat-bar {
  height: 4px; border-radius: 2px; overflow: hidden;
  background: rgba(147, 199, 200, 0.12);
}
.bar-fill {
  display: block; height: 100%;
  width: 0%;
  transition: width .35s cubic-bezier(.22, 1.4, .36, 1);
  border-radius: 2px;
}
.trap-fill {
  background: linear-gradient(90deg, var(--danger), #FF8A80);
  box-shadow: 0 0 6px rgba(255, 82, 82, 0.55);
}
.know-fill {
  background: linear-gradient(90deg, var(--tp-green), var(--tp-green-l, #6FE08A));
  box-shadow: 0 0 6px rgba(0, 163, 60, 0.55);
}
.stat-num {
  font-size: 18px; font-weight: 700; color: #fff; flex: none;
  font-variant-numeric: tabular-nums; min-width: 32px; text-align: right;
  text-shadow: 0 1px 6px rgba(0, 30, 25, 0.5);
}
.hud-stat.trap .stat-num { color: #FF7B72; }
.hud-stat.know .stat-num { color: var(--tp-green-l, #6FE08A); }

.hud-tip {
  position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  text-align: center; font-size: 14px; color: rgba(234, 246, 255, 0.96);
  background: rgba(4, 22, 30, 0.62);
  border: 1px solid rgba(147, 199, 200, 0.22);
  padding: 9px 18px; border-radius: 24px;
  display: inline-block; width: fit-content;
  transition: opacity .6s;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(0, 30, 25, 0.45);
  letter-spacing: 0.5px;
}

/* ---------- 陷阱知识卡 ---------- */
.toast {
  position: absolute; left: 14px; right: 14px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 90, 90, 0.45);
  border-left: 4px solid var(--danger);
  border-radius: 14px;
  padding: 13px 15px;
  opacity: 0; transform: translateY(24px);
  transition: opacity .28s, transform .28s;
  pointer-events: none;
  z-index: 20;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast .t-name {
  font-size: 17px; font-weight: 600; color: #FF7B72; margin-bottom: 5px;
  display: flex; align-items: center; gap: 8px;
}
.toast .t-name small {
  font-size: 11px; font-weight: 400; color: #FFB4AE;
  border: 1px solid rgba(255,120,110,.5); border-radius: 20px; padding: 1px 7px;
}
.toast .t-talk { font-size: 13px; color: #9FC4DE; line-height: 1.55; margin-bottom: 6px; }
.toast .t-tip { font-size: 14px; color: #E8F6FF; line-height: 1.6; }

/* ---------- 全屏面板 ---------- */
.screen {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: radial-gradient(120% 90% at 50% 0%, rgba(47, 194, 168, .42), rgba(22, 128, 137, .68) 55%, rgba(10, 52, 66, .85));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow-y: auto;
}
.panel {
  position: relative; z-index: 1;
  width: 100%; max-width: 360px;
  background: linear-gradient(180deg, rgba(10, 40, 34, .82) 0%, rgba(6, 28, 26, .9) 100%);
  border: 1px solid rgba(0, 200, 140, .35);
  border-radius: 22px;
  padding: 26px 22px 22px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, .5),
    0 0 26px rgba(0, 200, 140, .28),
    inset 0 1px 0 rgba(147, 255, 210, .18),
    inset 0 0 26px rgba(0, 160, 110, .12);
  text-align: center;
  animation: panelGlow 4.2s ease-in-out infinite;
}
@keyframes panelGlow {
  0%, 100% { box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 22px rgba(0,200,140,.22), inset 0 1px 0 rgba(147,255,210,.18), inset 0 0 26px rgba(0,160,110,.10); }
  50%      { box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 34px rgba(0,220,150,.42), inset 0 1px 0 rgba(147,255,210,.22), inset 0 0 30px rgba(0,180,120,.18); }
}

/* ---------- V4：背景漂浮方块（迷宫碎片感） ---------- */
.screen-bg {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 0;
}
.screen-bg .cube {
  position: absolute;
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(0, 220, 150, .20), rgba(0, 150, 200, .10));
  border: 1px solid rgba(120, 255, 205, .35);
  box-shadow: 0 0 14px rgba(0, 220, 150, .28), inset 0 0 10px rgba(0, 220, 150, .18);
  transform: rotate(var(--rot, 0deg));
  opacity: .55;
  animation: cubeFloat linear infinite;
  will-change: transform, opacity;
}
@keyframes cubeFloat {
  0%   { transform: translateY(0) rotate(var(--rot, 0deg)) scale(1); opacity: .25; }
  50%  { transform: translateY(-22px) rotate(calc(var(--rot, 0deg) + 18deg)) scale(1.08); opacity: .7; }
  100% { transform: translateY(0) rotate(var(--rot, 0deg)) scale(1); opacity: .25; }
}

/* 开始页 logo + 品牌行（V3e 重构为小角标） */
.brand-mini {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 0 6px;
}
.brand-logo-mini {
  display: block; height: 20px; width: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 120, 80, 0.25));
}
/* 游戏大标题（V3e）—— "一路避坑 / 夺分夺秒" 渐变+发光 */
.title-3d {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 4px 0 14px;
}
.hero-title {
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1;
  text-align: right;
}
.ht-line {
  font-size: 34px; font-weight: 800; letter-spacing: 5px;
  background: linear-gradient(135deg, #5CFFA0 0%, #00D98C 45%, #00A33C 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 16px rgba(0, 217, 140, .45));
  animation: htGlow 2.6s ease-in-out infinite;
}
.ht-line.ht-accent {
  font-size: 22px; letter-spacing: 9px; font-weight: 700;
  background: linear-gradient(135deg, #FFE9A8 0%, #F7C948 50%, #E0A93B 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 6px;
  animation: htGlowGold 2.6s ease-in-out infinite;
}
@keyframes htGlowGold {
  0%, 100% { filter: drop-shadow(0 2px 10px rgba(247, 201, 72, .35)); }
  50%      { filter: drop-shadow(0 2px 20px rgba(247, 201, 72, .75)); }
}
@keyframes htGlow {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 6px rgba(0, 163, 60, .25)); }
  50%      { filter: brightness(1.12) drop-shadow(0 0 14px rgba(0, 163, 60, .55)); }
}

/* 3D 旋转装饰（V4）—— 标题左侧的"发光星球+倾斜光环"，暗示 3D 玩法 */
.hero-orb {
  position: relative; width: 64px; height: 64px; flex: none;
  perspective: 240px;
  animation: orbFloat 3.2s ease-in-out infinite;
}
.orb-glow {
  position: absolute; inset: -14px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 220, 150, .5) 0%, rgba(0, 220, 150, 0) 70%);
  filter: blur(4px);
  animation: orbPulse 2.4s ease-in-out infinite;
}
.orb-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid transparent;
  animation: orbSpin 4s linear infinite;
}
.orb-ring.r1 {
  border-top-color: rgba(0, 230, 150, .9);
  border-right-color: rgba(0, 230, 150, .35);
  transform: rotateX(72deg);
}
.orb-ring.r2 {
  border-bottom-color: rgba(53, 230, 255, .8);
  border-left-color: rgba(53, 230, 255, .3);
  transform: rotateX(72deg) rotate(60deg);
  animation-duration: 6s; animation-direction: reverse;
}
.orb-ball {
  position: absolute; left: 50%; top: 50%;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #C6FFE0 0%, #00D98C 38%, #0B7B8E 100%);
  box-shadow: 0 0 22px rgba(0, 220, 150, .8), inset -3px -4px 8px rgba(0, 0, 0, .35);
  animation: orbBob 2.4s ease-in-out infinite;
}
@keyframes orbSpin { to { transform: rotateX(72deg) rotate(360deg); } }
@keyframes orbBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes orbFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@keyframes orbPulse {
  0%, 100% { opacity: .55; transform: scale(.92); }
  50%      { opacity: 1;   transform: scale(1.12); }
}

/* 主 CTA 按钮（V3e）—— 呼吸光晕 + GO 角标；开始按钮位于姓名输入框下方，需与上方留白 */
.btn.primary.cta-glow {
  margin-top: 18px;
  position: relative; overflow: visible;
  background: linear-gradient(135deg, #00C24A 0%, #00A33C 50%, #0B7B8E 120%);
  color: #fff;
  box-shadow: 0 10px 28px rgba(0, 130, 70, .5), 0 0 0 0 rgba(0, 194, 74, .55);
  animation: ctaPulse 2s ease-in-out infinite;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 0; font-size: 17px; font-weight: 700; letter-spacing: 4px;
}
.cta-go {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 22px; line-height: 22px; text-align: center;
  background: rgba(255, 255, 255, .22);
  border-radius: 6px; font-size: 12px; font-weight: 800; letter-spacing: 1px;
  transform: translateX(0);
  transition: transform .25s;
}
.btn.primary.cta-glow:hover .cta-go,
.btn.primary.cta-glow:active .cta-go { transform: translateX(3px); }
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 10px 28px rgba(0, 130, 70, .5), 0 0 0 0 rgba(0, 194, 74, .55); }
  50%      { box-shadow: 0 10px 28px rgba(0, 130, 70, .5), 0 0 0 14px rgba(0, 194, 74, 0); }
}

/* 通用标题（校准/结算/失败页用） */
.panel h2 { font-size: 21px; margin: 0 0 10px; font-weight: 600; }
.lead { font-size: 14px; line-height: 1.7; color: #CDEDE6; margin: 0 0 16px; }

/* 状态芯片（V3e 替代旧 .foot 文字） */
.status-chip {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 12px; padding: 6px 14px;
  background: rgba(4, 30, 28, 0.55);
  border: 1px solid rgba(147, 199, 200, 0.18);
  border-radius: 18px;
  font-size: 12px; color: #A9D3D2; letter-spacing: 0;
  width: fit-content;
}
.sc-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #FFC847; box-shadow: 0 0 8px #FFC847;
  animation: scDot 1.2s ease-in-out infinite;
}
.status-chip.ok .sc-dot { background: var(--tp-green-l); box-shadow: 0 0 10px var(--tp-green-l); }
.status-chip.ok       { color: #B6F2D0; }
.status-chip.touch .sc-dot { background: var(--tp-blue-l); box-shadow: 0 0 10px var(--tp-blue-l); }
.status-chip.touch    { color: #B6E0FA; }
.status-chip.warn .sc-dot { background: #FFC847; box-shadow: 0 0 8px #FFC847; }
@keyframes scDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.75); }
}

/* 姓名输入块（V3e）—— 标题+输入框垂直组合 */
.name-block { text-align: left; margin: 14px 0 6px; }
.name-label {
  display: block; font-size: 12px; color: #A9D3D2; margin-bottom: 6px; letter-spacing: 1px;
}

/* V4 规则三卡片：图标方块 + 彩色辉光，轻微浮动 */
.rules { list-style: none; padding: 0; margin: 2px 0 4px; text-align: left; display: flex; gap: 8px; }
.rule-card {
  flex: 1; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  background: rgba(6, 30, 26, 0.55);
  border: 1px solid rgba(147, 199, 200, 0.16);
  border-radius: 12px;
  padding: 10px 4px 9px; margin-bottom: 0;
  text-align: center;
  animation: ruleFloat 4.5s ease-in-out infinite;
}
.rule-card:nth-child(2) { animation-delay: -1.5s; }
.rule-card:nth-child(3) { animation-delay: -3s; }
.rule-card .rc-ico {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
  box-shadow: 0 4px 12px rgba(0,0,0,.35), inset 0 0 8px rgba(255,255,255,.08);
}
.rule-card.red   { border-color: rgba(255, 82, 82, .4); box-shadow: 0 0 14px rgba(255, 82, 82, .18); }
.rule-card.red   .rc-ico { background: linear-gradient(135deg, #FF7B72, #D6342F); color: #fff; }
.rule-card.green { border-color: rgba(0, 200, 120, .4); box-shadow: 0 0 14px rgba(0, 200, 120, .18); }
.rule-card.green .rc-ico { background: linear-gradient(135deg, #5CFFA0, #00A33C); color: #042; }
.rule-card.blue  { border-color: rgba(53, 198, 255, .4); box-shadow: 0 0 14px rgba(53, 198, 255, .18); }
.rule-card.blue  .rc-ico { background: linear-gradient(135deg, #6FD8FF, #0364B2); color: #fff; }
.rule-card .rc-text { font-size: 12px; color: #DDF3EE; line-height: 1.3; font-weight: 500; letter-spacing: .5px; }
@keyframes ruleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

.name-input {
  width: 100%; padding: 14px 14px; margin-top: 4px;
  background: rgba(4, 24, 30, .7);
  border: 1px solid rgba(147, 199, 200, .25);
  border-radius: 12px; color: #EAF6FF; font-size: 16px;
  font-family: inherit; text-align: center; outline: none;
  box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s;
}
.name-input::placeholder { color: #6A918F; }
.name-input:focus {
  border-color: rgba(0, 163, 60, .6);
  box-shadow: 0 0 0 3px rgba(0, 163, 60, 0.16);
}
.name-err { min-height: 18px; margin-top: 6px; font-size: 13px; color: #FF7B72; text-align: center; }

.btn {
  display: block; width: 100%; margin-top: 10px;
  padding: 15px 0; border: none; border-radius: 14px;
  font-size: 16px; font-weight: 500; font-family: inherit;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: transform .12s, filter .2s, box-shadow .2s;
}
.btn:active { transform: scale(.975); }
.btn.primary {
  background: linear-gradient(135deg, #00C24A 0%, #00A33C 55%, #0B7B8E 130%);
  color: #fff; box-shadow: 0 8px 22px rgba(0, 120, 70, .45);
}
.btn.primary:active { filter: brightness(1.08); }
.btn.ghost {
  background: transparent; color: var(--tp-silver);
  border: 1px solid rgba(147, 199, 200, .35);
}
.btn.ghost:active { background: rgba(147, 199, 200, 0.1); }
.foot { margin-top: 12px; font-size: 12px; color: #7FB0A8; line-height: 1.6; }

.calib-box { display: flex; justify-content: center; margin: 18px 0 22px; position: relative; }
.calib-phone {
  width: 74px; height: 132px; border-radius: 14px;
  border: 2px solid rgba(0, 163, 60, .5);
  background: rgba(10, 60, 55, .5);
  position: relative; overflow: hidden;
}
.calib-ball {
  position: absolute; left: 50%; top: 50%;
  width: 22px; height: 22px;
  transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 18px rgba(247, 201, 72, .9);
  transition: transform .08s linear;
}
/* 校准完成光波：从手机中心扩散的青绿涟漪 */
.calib-wave {
  position: absolute; left: 50%; top: 50%;
  width: 84px; height: 84px; margin: -42px 0 0 -42px;
  border-radius: 50%; border: 2px solid var(--tp-teal-l);
  opacity: 0; transform: scale(.4); pointer-events: none;
}
.calib-wave.go { animation: calibWave .7s ease-out; }
@keyframes calibWave {
  0%   { opacity: .9; transform: scale(.4); }
  100% { opacity: 0;  transform: scale(2.6); }
}

/* ---------- 结算 ---------- */
.res-label { font-size: 12px; color: var(--tp-silver); letter-spacing: 3px; margin-bottom: 2px; }
.res-time { font-variant-numeric: tabular-nums; line-height: 1; }
.res-time span {
  font-size: 64px; font-weight: 700; color: #fff;
  text-shadow: 0 4px 30px rgba(0, 163, 60, .4);
  letter-spacing: -1px;
}
.res-time small { font-size: 18px; color: #9FC4DE; margin-left: 5px; }
.res-rank {
  margin-top: 12px; font-size: 16px; font-weight: 600; color: #9FC4DE;
}
.res-rank.top1 { color: var(--gold); font-size: 18px; text-shadow: 0 2px 16px rgba(247, 201, 72, .5); }
.res-rank.top2 { color: #D8E8F5; }
.res-rank.top3 { color: #E8C39A; }
.res-sub { font-size: 13.5px; color: #8FB8B0; margin-top: 4px; }

.res-meta {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 16px 0 14px; padding: 10px 0;
  border-top: 1px solid rgba(147, 199, 200, .14);
  border-bottom: 1px solid rgba(147, 199, 200, .14);
}
.grade {
  font-size: 38px; font-weight: 800; line-height: 1;
  color: var(--gold); text-shadow: 0 4px 24px rgba(247, 201, 72, .6);
  flex: none; position: relative; display: inline-block; z-index: 1;
}
/* V4：圆形奖牌 + 双环反向旋转 + 金色脉冲 */
.res-medal-wrap {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 110px; height: 110px; margin: 0 auto 14px;
}
.res-medal-wrap::before {
  content: ''; position: absolute; inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247,201,72,.28) 0%, rgba(247,201,72,0) 70%);
  animation: medalHalo 2.2s ease-in-out infinite;
  z-index: 0;
}
@keyframes medalHalo {
  0%, 100% { transform: scale(.9);  opacity: .5; }
  50%      { transform: scale(1.2); opacity: 1; }
}
.medal-ring { position: absolute; border-radius: 50%; pointer-events: none; }
.medal-ring.r-outer {
  inset: -14px;
  border: 2px dashed rgba(247, 201, 72, .6);
  animation: medalSpin 7s linear infinite;
}
.medal-ring.r-inner {
  inset: -6px;
  border: 2px dotted rgba(247, 201, 72, .75);
  animation: medalSpinRev 4.5s linear infinite;
}
@keyframes medalSpin    { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes medalSpinRev { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
.res-medal-wrap .grade {
  position: relative; z-index: 2;
  font-size: 44px; font-weight: 800; line-height: 1;
  width: 78px; height: 78px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #FFE9A8;
  background: radial-gradient(circle at 38% 32%, #FFE9A8 0%, #F7C948 45%, #C8862B 100%);
  border: 2px solid rgba(255, 240, 180, .8);
  box-shadow: 0 0 24px rgba(247, 201, 72, .6), inset 0 2px 8px rgba(255,255,255,.45), inset 0 -4px 10px rgba(140, 90, 20, .5);
  text-shadow: 0 2px 6px rgba(120, 75, 15, .6);
}
/* S级/王者保留文字脉动 + 额外金粉旋转 */
.grade.flash { animation: gradePulse 1.4s ease-in-out infinite; }
@keyframes gradePulse {
  0%, 100% { box-shadow: 0 0 24px rgba(247, 201, 72, .55), inset 0 2px 8px rgba(255,255,255,.45), inset 0 -4px 10px rgba(140,90,20,.5); }
  50%      { box-shadow: 0 0 40px rgba(247, 201, 72, 1),   inset 0 2px 8px rgba(255,255,255,.6),  inset 0 -4px 10px rgba(140,90,20,.5); }
}

/* V3f：破纪录角标 */
.record-tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  color: #fff;
  background: linear-gradient(135deg, #FF8A80, #F7C948);
  border-radius: 20px;
  box-shadow: 0 0 12px rgba(247, 201, 72, .55);
  animation: recordTagPulse 1.6s ease-in-out infinite;
}
@keyframes recordTagPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 12px rgba(247, 201, 72, .55); }
  50%      { transform: scale(1.08); box-shadow: 0 0 18px rgba(247, 201, 72, .9); }
}

.res-meta {
  margin: 12px 0 14px; padding: 0;
  text-align: center;
  border-top: none; border-bottom: none;
}
.res-detail { font-size: 13px; color: #A6C8C0; line-height: 1.7; text-align: center; }
.board {
  text-align: left; margin-bottom: 14px;
  max-height: 248px; overflow-y: auto; overflow-x: hidden;
  border-radius: 12px; background: rgba(4, 24, 30, .55); padding: 10px 12px;
  border: 1px solid rgba(147, 199, 200, .14);
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 180, 130, .35) rgba(4, 24, 30, .25);
}
.board::-webkit-scrollbar { width: 5px; }
.board::-webkit-scrollbar-track { background: rgba(4, 24, 30, .25); border-radius: 3px; }
.board::-webkit-scrollbar-thumb { background: rgba(0, 180, 130, .35); border-radius: 3px; }
.board-start { max-height: none; margin-bottom: 16px; }
.board-title {
  font-size: 12px; color: var(--tp-silver); letter-spacing: 1px; margin-bottom: 6px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.board-title .bt-left { font-size: 12px; color: var(--tp-silver); letter-spacing: 1px; }
.board-title .bt-right { display: inline-flex; align-items: center; gap: 6px; }
.rank-badge {
  display: inline-block; padding: 2px 9px;
  font-size: 11px; font-weight: 800; letter-spacing: .5px; color: #2A1B0A;
  background: linear-gradient(135deg, #FFE9A8, #F7C948);
  border-radius: 20px; box-shadow: 0 0 12px rgba(247, 201, 72, .5);
}
.board ol { margin: 0; padding: 0; list-style: none; }
.board li {
  font-size: 14px; color: #CFE8FA; line-height: 1.9;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 6px;
  overflow: hidden;
}
.board li .b-idx { flex: none; width: 18px; color: #7FA5A0; text-align: right; }
.board li .b-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board li .b-time { flex: none; color: #9FC4DE; font-size: 13.5px; }
.board li.me { color: var(--gold); font-weight: 600; }
.board li.me .b-time { color: var(--gold); }
/* 前三名奖牌底色 */
.board li.top1 { background: linear-gradient(90deg, rgba(247,201,72,.16), rgba(247,201,72,0)); border-radius: 7px; padding: 0 6px; }
.board li.top2 { background: linear-gradient(90deg, rgba(216,232,245,.14), rgba(216,232,245,0)); border-radius: 7px; padding: 0 6px; }
.board li.top3 { background: linear-gradient(90deg, rgba(232,195,154,.14), rgba(232,195,154,0)); border-radius: 7px; padding: 0 6px; }
.b-tag {
  flex: none; font-style: normal; font-size: 10px; font-weight: 400;
  border: 1px solid rgba(111, 224, 138, .5); color: var(--tp-green-l);
  border-radius: 20px; padding: 0 5px; line-height: 16px;
}
.b-tag.now { border-color: rgba(247, 201, 72, .6); color: var(--gold); }
.rank-empty { font-size: 13px; color: #6A918F; list-style: none; }

/* V8：结果页排行榜「我的名次」分隔行（前 10 之外时追加显示） */
.rank-sep {
  list-style: none; text-align: center; font-size: 11px; letter-spacing: 2px;
  color: rgba(147, 199, 200, .55); margin: 8px 0 4px; position: relative;
}
.rank-sep::before, .rank-sep::after {
  content: ''; position: absolute; top: 50%; width: 28%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(147, 199, 200, .35));
}
.rank-sep::before { left: 4%; }
.rank-sep::after { right: 4%; transform: scaleX(-1); }

.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; margin-top: 8px; padding: 14px 0; font-size: 15px; }

/* V3e 链接式次按钮（用于结算页导出） */
.link-btn {
  display: block; width: 100%; margin-top: 8px; padding: 6px;
  background: none; border: none;
  font-size: 12px; font-family: inherit; cursor: pointer; color: #6FB5AC;
  text-decoration: underline; text-underline-offset: 3px;
}

.link-btn {
  display: block; width: 100%; margin-top: 10px; padding: 6px;
  background: none; border: none;
  font-size: 12px; font-family: inherit; cursor: pointer; color: #6FB5AC;
  text-decoration: underline; text-underline-offset: 3px;
}

.loading {
  position: absolute; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 0%, #18A8A0, #0E8094 55%, #0A4E60);
  color: #EAFBF5; font-size: 15px; letter-spacing: 1px;
}
.loading.hidden { display: none; }

/* ---------- 失败弹窗 ---------- */
.screen.fail {
  background: rgba(2, 12, 20, 0.32);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.screen.fail .panel { animation: failIn .5s cubic-bezier(.22, 1.4, .36, 1); }
@keyframes failIn {
  0%   { transform: scale(.86) translateY(18px); opacity: 0; }
  55%  { transform: scale(1.03) translateY(0); opacity: 1; }
  70%  { transform: translateX(-6px); }
  85%  { transform: translateX(5px); }
  100% { transform: translateX(0); }
}
.fail-icon {
  width: 56px; height: 56px; margin: 0 auto 12px;
  border-radius: 50%;
  background: rgba(255, 82, 82, 0.16);
  border: 2px solid var(--danger);
  color: #FF7B72; font-size: 32px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 24px rgba(255, 82, 82, 0.4);
}
/* 失败弹窗内：融合的陷阱知识卡（替代原底部 toast） */
.fail-trap {
  margin: 4px 0 14px;
  text-align: left;
  background: rgba(20, 12, 14, 0.55);
  border: 1px solid rgba(255, 90, 90, 0.45);
  border-left: 4px solid var(--danger);
  border-radius: 12px;
  padding: 11px 13px;
}
.fail-trap[hidden] { display: none; }
.fail-trap .ft-name {
  font-size: 16px; font-weight: 600; color: #FF7B72; margin-bottom: 5px;
  display: flex; align-items: center; gap: 8px;
}
.fail-trap .ft-name small {
  font-size: 11px; font-weight: 400; color: #FFB4AE;
  border: 1px solid rgba(255,120,110,.5); border-radius: 20px; padding: 1px 7px;
}
.fail-trap .ft-talk { font-size: 13px; color: #9FC4DE; line-height: 1.55; margin-bottom: 6px; }
.fail-trap .ft-tip { font-size: 14px; color: #E8F6FF; line-height: 1.6; }


/* ---------- 结算屏 V5j：套通关页设计图 + 绿色/金色柔和光效 ---------- */
.screen-result {
  background:
    radial-gradient(130% 58% at 50% 46%, rgba(0, 150, 95, .28) 0%, rgba(2, 46, 32, 0) 58%),
    linear-gradient(180deg, #03251A 0%, #062A1E 48%, #021A12 100%);
  padding: 0;
}
.screen-result .result-stage {
  position: relative;
  width: 100%;
  max-width: min(100vw, calc(100vh * 1096 / 1435));
  aspect-ratio: 1096 / 1435;
  max-height: 100%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
}
.screen-result .result-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: fill;
  display: block; pointer-events: none;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 6.5%, #000 93.5%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6.5%, #000 93.5%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right,  transparent 0, #000 6.5%, #000 93.5%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6.5%, #000 93.5%, transparent 100%);
          mask-composite: intersect;
}
/* 结算页柔和光效层：绿色/金色呼吸光 + 漂浮光点，数量比首页克制 */
.screen-result .result-fx {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, rgba(0, 200, 110, .16) 0%, rgba(0, 200, 110, 0) 55%);
  animation: resultGlow 4.5s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes resultGlow {
  0%, 100% { opacity: .45; transform: scale(1); }
  50%      { opacity: .9;  transform: scale(1.05); }
}
.screen-result .result-fx::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 62%, rgba(247, 201, 72, .10) 0%, rgba(247, 201, 72, 0) 50%);
  animation: resultGlowGold 6s ease-in-out infinite;
}
@keyframes resultGlowGold {
  0%, 100% { opacity: .3; transform: scale(1); }
  50%      { opacity: .7; transform: scale(1.08); }
}
.screen-result .result-fx .fx-particle {
  position: absolute; bottom: -10px; border-radius: 50%;
  background: radial-gradient(circle, rgba(120, 255, 200, .85) 0%, rgba(0, 200, 140, 0) 70%);
  animation: resultFxFloat linear infinite;
}
@keyframes resultFxFloat {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-110vh) translateX(var(--dx)); opacity: 0; }
}
/* 结算页面板：按设计图深绿玻璃拟态升级 */
.screen-result .panel {
  position: relative; z-index: 2;
  width: 82%; max-width: 520px; min-width: 280px;
  /* V5j 修复：完全不透明深色面板，遮住设计图里的示例文字/按钮，避免与 DOM 重影 */
  background: linear-gradient(180deg, #0B2A24 0%, #061B19 100%);
  border: 1px solid rgba(0, 200, 130, .42);
  border-radius: 22px;
  padding: 24px 20px 20px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, .55),
    0 0 30px rgba(0, 200, 130, .22),
    inset 0 1px 0 rgba(147, 255, 210, .16),
    inset 0 0 28px rgba(0, 160, 110, .12);
  text-align: center;
  animation: resultPanelGlow 4s ease-in-out infinite;
}
@keyframes resultPanelGlow {
  0%, 100% { box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 24px rgba(0,200,130,.16), inset 0 1px 0 rgba(147,255,210,.16), inset 0 0 26px rgba(0,160,110,.10); }
  50%      { box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 42px rgba(0,220,140,.34), inset 0 1px 0 rgba(147,255,210,.20), inset 0 0 32px rgba(0,180,120,.16); }
}
/* 结算页内部元素按设计图调优 */
.screen-result .res-medal-wrap { margin-bottom: 8px; }
.screen-result .res-medal-wrap::before {
  box-shadow: 0 0 30px rgba(247, 201, 72, .45), inset 0 0 16px rgba(247, 201, 72, .25);
}
.screen-result .res-medal-wrap .grade {
  color: #FFE9A8;
  text-shadow: 0 0 18px rgba(247, 201, 72, .7), 0 2px 8px rgba(0,0,0,.4);
}
.screen-result .res-rank { color: #5CFFA0; text-shadow: 0 0 14px rgba(0, 220, 120, .45); }
.screen-result .res-rank.top1 { color: var(--gold); font-size: 18px; text-shadow: 0 0 16px rgba(247,201,72,.55); }
.screen-result .board {
  background: rgba(3, 20, 24, .62);
  border-color: rgba(0, 180, 130, .22);
  box-shadow: inset 0 0 18px rgba(0, 160, 110, .08);
  overflow-x: hidden;
}
.screen-result .board-title .bt-left { color: #A6C8C0; }
.screen-result .link-btn { color: #8FD4C8; }

/* ---------- DOM 全屏特效层（踩陷阱红闪 / 知识点金闪 / 结算彩带） ---------- */
#fxLayer {
  position: fixed; inset: 0; z-index: 40;
  pointer-events: none; overflow: hidden;
}

/* 踩中陷阱：全屏红色警戒闪烁（两次脉冲） */
.fx-danger {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,60,60,0) 34%, rgba(255,45,45,.52) 100%);
  animation: fxDanger .7s ease-out forwards;
}
@keyframes fxDanger {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  38%  { opacity: .25; }
  58%  { opacity: .9; }
  100% { opacity: 0; }
}

/* 收集知识点：全屏金色微光闪光 */
.fx-gold {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(247,201,72,.30) 0%, rgba(247,201,72,0) 62%);
  animation: fxGoldFlash .5s ease-out forwards;
}
@keyframes fxGoldFlash {
  0%   { opacity: 0; }
  25%  { opacity: 1; }
  100% { opacity: 0; }
}

/* 收集知识点：中央 "+1 防坑知识" 金色飘字 */
.fx-pop {
  position: absolute; left: 50%; top: 38%;
  transform: translate(-50%, -50%);
  color: var(--gold, #F7C948); font-size: 24px; font-weight: 800;
  text-shadow: 0 2px 10px rgba(247, 201, 72, .55), 0 0 2px rgba(0,0,0,.4);
  white-space: nowrap; letter-spacing: 1px;
  animation: fxPopUp .95s cubic-bezier(.18, .9, .3, 1) forwards;
}
@keyframes fxPopUp {
  0%   { opacity: 0; transform: translate(-50%, -30%) scale(.6); }
  22%  { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  40%  { transform: translate(-50%, -54%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -130%) scale(1); }
}

/* 结算页 DOM 彩带：小色块从顶部落下旋转 */
.fx-confetti i {
  position: absolute; top: -4%;
  display: block; width: 9px; height: 14px; border-radius: 2px;
  animation: fxConfettiFall linear forwards;
}
@keyframes fxConfettiFall {
  0%   { transform: translateY(-6vh) rotate(0deg) rotateX(0); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(108vh) rotate(660deg) rotateX(340deg); opacity: 0; }
}

/* 失败弹窗期间：红色边缘脉冲光晕（挂在 fxLayer） */
.fx-fail-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,50,50,0) 52%, rgba(255,35,35,.34) 100%);
  animation: fxFailGlow 2.6s ease-in-out forwards;
}
@keyframes fxFailGlow {
  0%, 100% { opacity: .35; }
  25%      { opacity: 1; }
  50%      { opacity: .45; }
  75%      { opacity: .9; }
}

/* 破纪录：金色中心爆裂 + 中心光环 + 顶部横幅 */
.fx-record-banner {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 14px 0 16px;
  background: linear-gradient(180deg, rgba(247,201,72,.92) 0%, rgba(247,201,72,0) 100%);
  text-align: center; color: #2A1B0A;
  font-size: 18px; font-weight: 800; letter-spacing: 4px;
  text-shadow: 0 1px 2px rgba(255,255,255,.4);
  animation: fxRecordBanner 2.4s ease-out forwards;
  transform-origin: top center;
}
@keyframes fxRecordBanner {
  0%   { transform: translateY(-100%) scaleY(.6); opacity: 0; }
  18%  { transform: translateY(0) scaleY(1); opacity: 1; }
  72%  { transform: translateY(0) scaleY(1); opacity: 1; }
  100% { transform: translateY(-100%) scaleY(.7); opacity: 0; }
}
.fx-record-burst {
  position: absolute; left: 50%; top: 50%;
  width: 220px; height: 220px; margin: -110px 0 0 -110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247,201,72,.75) 0%, rgba(247,201,72,0) 60%);
  animation: fxRecordBurst 1.4s ease-out forwards;
}
@keyframes fxRecordBurst {
  0%   { transform: scale(.2); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: scale(2.6); opacity: 0; }
}
.fx-record-ring {
  position: absolute; left: 50%; top: 50%;
  width: 80px; height: 80px; margin: -40px 0 0 -40px;
  border-radius: 50%;
  border: 4px solid rgba(247, 201, 72, .8);
  animation: fxRecordRing 1.6s cubic-bezier(.18,.9,.3,1) forwards;
}
@keyframes fxRecordRing {
  0%   { transform: scale(.4); opacity: 0; border-width: 8px; }
  20%  { opacity: 1; }
  100% { transform: scale(3.2); opacity: 0; border-width: 1px; }
}

/* 暂停弹窗：覆盖整个 3D 画布，弹出"继续/放弃"双按钮 */
.pause-mask {
  position: absolute; inset: 0; z-index: 25;
  background: rgba(4, 20, 30, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  pointer-events: auto;
}
.pause-card {
  background: rgba(8, 30, 38, .78);
  border: 1px solid rgba(147, 199, 200, .22);
  border-radius: 14px;
  padding: 22px 24px 18px;
  text-align: center;
  min-width: 220px;
  box-shadow: 0 8px 32px rgba(0, 30, 25, .5);
  animation: pauseCardIn .35s cubic-bezier(.22, 1.4, .36, 1);
}
@keyframes pauseCardIn {
  0%   { transform: scale(.86) translateY(10px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.pause-card h3 { margin: 0 0 6px; font-size: 18px; color: #fff; font-weight: 600; }
.pause-card p  { margin: 0 0 16px; font-size: 13px; color: #93C7C8; }
.pause-card .btn { width: 100%; margin-top: 6px; padding: 12px 0; font-size: 14px; }
.pause-card .btn + .btn { margin-top: 8px; }

/* ---------- V5：首页直接使用设计图背景 + 仅覆盖必要交互层 ---------- */
.screen-start {
  /* 保留 .screen 的 position:absolute; inset:0 全屏覆盖，z-index:30 也保持不变。
     下面这层渐变作为兜底背景；真正的“图片与背景融合”由 ::before 模糊背景层实现。 */
  background:
    radial-gradient(130% 58% at 50% 46%, rgba(0, 150, 95, .30) 0%, rgba(2, 46, 32, 0) 58%),
    linear-gradient(180deg, #03251A 0%, #062A1E 48%, #021A12 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
}
/* 模糊背景层：同一张 start_bg_v7.jpg 放大+高斯模糊后铺满全屏，作为清晰设计图的“延伸” */
.screen-start::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: url('./assets/start_bg_v7.jpg?v=V8') center/cover no-repeat;
  filter: blur(34px) brightness(0.62) saturate(1.05);
  transform: scale(1.18);
  opacity: 0.96;
  pointer-events: none;
}
.screen-start .start-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: min(100vw, calc(100vh * 1097 / 1434));
  aspect-ratio: 1097 / 1434;
  max-height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.screen-start .start-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: fill;
  display: block;
  pointer-events: none;
  /* 四边羽化（顶部/底部加强，参考首次 6.5% 但更柔）：顶部 16%、底部 20%、左右 9% */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 16%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right,  transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 16%, #000 80%, transparent 100%);
          mask-composite: intersect;
}
/* V5 首页特效层：位于背景图之上、交互层之下，纯装饰不挡点击 */
.screen-start .start-fx {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
/* 主背景光：强呼吸脉冲，呼应设计图中央绿色辉光（screen 混合让亮度真正叠加） */
.screen-start .start-fx::before {
  content: '';
  position: absolute; left: 50%; top: 46%;
  width: 110%; height: 74%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
      rgba(0, 255, 150, .62) 0%,
      rgba(0, 230, 140, .30) 24%,
      rgba(0, 190, 120, .12) 46%,
      rgba(0, 160, 110, 0) 72%);
  filter: blur(22px);
  mix-blend-mode: screen;
  animation: startGlow 3.6s ease-in-out infinite;
}
@keyframes startGlow {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;  transform: translate(-50%, -50%) scale(1.18); }
}
/* 辅助背景光：青蓝色慢速漂移，增加层次感 */
.screen-start .start-fx::after {
  content: '';
  position: absolute; left: 50%; top: 46%;
  width: 96%; height: 64%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
      rgba(53, 255, 255, .42) 0%,
      rgba(0, 220, 220, .18) 34%,
      rgba(0, 160, 160, 0) 66%);
  filter: blur(28px);
  mix-blend-mode: screen;
  animation: startGlowCyan 6.2s ease-in-out infinite;
}
@keyframes startGlowCyan {
  0%, 100% { opacity: .35; transform: translate(-50%, -50%) scale(.92); }
  50%      { opacity: .95; transform: translate(-50%, -50%) scale(1.14); }
}
/* 扫光：一道柔和高光沿中央面板缓慢扫过 */
.screen-start .fx-shimmer {
  position: absolute; left: 50%; top: 46%;
  width: 82%; height: 56%;
  transform: translate(-50%, -50%);
  background: linear-gradient(105deg,
      rgba(255,255,255,0) 28%,
      rgba(210,255,235,.18) 48%,
      rgba(255,255,255,0) 68%);
  filter: blur(8px);
  mix-blend-mode: screen;
  animation: cardShimmer 5s ease-in-out infinite;
}
@keyframes cardShimmer {
  0% { transform: translate(-50%, -50%) translateX(-26%) skewX(-14deg); opacity: 0; }
  18% { opacity: 1; }
  48% { transform: translate(-50%, -50%) translateX(26%) skewX(-14deg); opacity: 0; }
  100% { opacity: 0; }
}
/* 旋转光束（柔和版）：极淡薄荷光晕缓慢旋转，仅作背景微动，不抢视线 */
.screen-start .fx-rays {
  position: absolute; left: 50%; top: 46%;
  width: 165%; height: 120%;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    rgba(150, 235, 205, 0) 0deg 22deg,
    rgba(150, 235, 205, .03) 28deg,
    rgba(150, 235, 205, 0) 34deg 44deg
  );
  filter: blur(38px);
  opacity: .82;
  mix-blend-mode: screen;
  animation: raysRotate 34s linear infinite;
  pointer-events: none;
}
@keyframes raysRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
/* 暗角脉冲：边缘轻微压暗，让中央呼吸光更明显 */
.screen-start .fx-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 46%, rgba(0, 30, 20, .72) 100%);
  mix-blend-mode: multiply;
  animation: vignettePulse 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes vignettePulse {
  0%, 100% { opacity: .62; }
  50%      { opacity: .94; }
}

/* 大光斑：缓慢漂移的柔和光球 */
.screen-start .fx-orb {
  position: absolute; border-radius: 50%;
  filter: blur(22px);
  opacity: .75;
  mix-blend-mode: screen;
  animation: orbDrift linear infinite;
}
@keyframes orbDrift {
  0% { transform: translate(0, 0) scale(1); opacity: .25; }
  28% { opacity: .75; }
  50% { transform: translate(var(--dx, 30px), var(--dy, -20px)) scale(1.32); opacity: .55; }
  78% { opacity: .65; }
  100% { transform: translate(0, 0) scale(1); opacity: .25; }
}
/* 漂浮粒子：呼应设计图的粒子氛围 */
.screen-start .fx-particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #E6FFF2 0%, #00FF92 42%, rgba(0, 230, 118, 0) 76%);
  box-shadow: 0 0 14px rgba(0, 255, 140, .9), 0 0 34px rgba(0, 255, 140, .45);
  opacity: 0;
  mix-blend-mode: screen;
  will-change: top;
  animation-name: fxFloat;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes fxFloat {
  0%   { top: 100%; opacity: 0;   transform: translateX(0) scale(.55); }
  12%  { opacity: 1; }
  88%  { opacity: .65; }
  100% { top: -14%; opacity: 0;   transform: translateX(var(--dx, 10px)) scale(1); }
}
/* 输入框：复刻设计图的墨绿玻璃药丸输入区，自然盖住图片 baked 的"例如 张三" */
/* 输入框：透明覆盖层，对齐新背景图已画好的深色圆角输入框（v7 测量值） */
.screen-start .ov-input {
  position: absolute;
  z-index: 3;
  left: 23%; top: 59.1%;
  width: 58%; height: 6.5%;
  padding: 0 14px;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  color: #E6F4EE;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  letter-spacing: 1px;
  line-height: 1;
  outline: none;
  caret-color: #00A33C;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  transition: text-shadow .2s, color .2s;
  -webkit-appearance: none;
  appearance: none;
}
.screen-start .ov-input::placeholder {
  color: rgba(190, 212, 205, .6);
  font-weight: 400;
  text-align: center;
}
.screen-start .ov-input:focus {
  color: #FFFFFF;
  text-shadow: 0 0 8px rgba(0, 220, 140, .5);
}

/* 姓名错误提示：贴在输入框底部内侧，不遮挡开始按钮 */
.screen-start .name-err {
  position: absolute;
  z-index: 4;
  left: 50%; top: 67%;
  transform: translateX(-50%) translateY(4px);
  width: auto; min-width: 120px; max-width: 76%;
  padding: 1px 12px;
  background: rgba(90, 20, 20, .88);
  border: 1px solid rgba(255, 120, 120, .5);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  font-size: 11px; font-weight: 500; color: #FFB4AE;
  line-height: 1.25;
  text-align: center; text-shadow: none; white-space: nowrap;
  pointer-events: none; opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
}
.screen-start .name-err:not(:empty) {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 开始按钮：透明覆盖层，仅提供点击区域和按压反馈 */
.screen-start .ov-btn {
  position: absolute;
  z-index: 3;
  left: 20.1%; top: 68.5%;
  width: 59.1%; height: 9.7%;
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s ease, filter .15s ease;
}
.screen-start .ov-btn:active {
  transform: scale(.97);
  filter: drop-shadow(0 0 18px rgba(0, 255, 120, .55));
}

/* V5：状态 chip 已移除（背景图已含“正在检测重力感应”文案，避免重复） */

/* 小屏安全适配：确保舞台不超出视口 */
@media (max-height: 680px) {
  .screen-start .start-stage { max-width: min(100vw, calc(100vh * 1097 / 1434)); }
}