/* ===================================================================
   江淮水脉守护者 · 精致化样式
   设计要点：分层阴影 / 玻璃拟态 / 微交互动效 / 自定义控件 / 入场动画
   =================================================================== */

:root {
  /* —— 主色板 —— */
  --sky: #bcecff;
  --lake: #56d5ff;
  --blue: #42a5ff;
  --blue-deep: #147fcf;
  --green: #6ccc68;
  --deep-green: #2f8f5b;
  --gold: #ffc94a;
  --gold-deep: #f0a92e;
  --card: #fffdf3;
  --red: #ff6b6b;
  --ink: #24445f;
  --muted: #5e7d91;

  /* —— 分层阴影（柔光 + 落影） —— */
  --shadow-sm: 0 4px 10px rgba(43, 125, 168, .12);
  --shadow: 0 10px 24px rgba(43, 125, 168, .18), 0 2px 6px rgba(43, 125, 168, .12);
  --shadow-lg: 0 22px 50px rgba(43, 125, 168, .28), 0 6px 16px rgba(43, 125, 168, .16);
  --shadow-gold: 0 12px 26px rgba(240, 169, 46, .35), 0 3px 8px rgba(240, 169, 46, .25);

  /* —— 玻璃拟态 —— */
  --glass: rgba(255, 253, 243, .82);
  --glass-line: rgba(255, 255, 255, .65);
  --blur: 14px;

  /* —— 过渡曲线 —— */
  --ease: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --t-fast: .18s var(--ease-out);
  --t: .28s var(--ease);
}

/* —— 基础重置 —— */
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.6), transparent 22%),
    radial-gradient(circle at 88% 92%, rgba(180,233,255,.5), transparent 26%),
    linear-gradient(160deg, #e8faff 0%, #c9efff 45%, #b6e6ff 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: .2px;
  line-height: 1.6;
}
button, input { font: inherit; }
button {
  border: 0;
  cursor: pointer;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
}
button:focus-visible, input:focus-visible {
  outline: 4px solid rgba(255, 201, 74, .75);
  outline-offset: 3px;
}

/* —— 应用容器 —— */
.app {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* —— 屏幕通用 —— */
.home-screen,
.level-screen,
.report-screen {
  min-height: 100vh;
  padding: 24px;
  animation: fadeInUp .5s var(--ease-out) both;
}

/* ============== 首页 ============== */
.home-screen {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  gap: 26px;
  align-items: center;
}

.hero-copy {
  padding: 30px;
  border-radius: 30px;
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  animation: fadeInLeft .55s var(--ease-out) both;
}
/* 卡片顶部高光带 */
.hero-copy::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--lake), var(--blue), var(--green), var(--gold));
  opacity: .9;
}
.hero-copy h1 {
  margin: 0;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--blue-deep);
  text-shadow: 0 2px 0 rgba(255,255,255,.6);
  background: linear-gradient(120deg, #147fcf 30%, #2f8f5b 70%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-copy p {
  margin: 14px 0 0;
  font-size: 20px;
  line-height: 1.7;
  color: var(--muted);
}
.hero-copy p + p { color: var(--ink); font-weight: 600; }
.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

/* —— 水脉地图 / 舞台通用背景 —— */
.water-map,
.stage-visual {
  position: relative;
  min-height: 620px;
  border-radius: 34px;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.8) 0 5%, transparent 14%),
    radial-gradient(circle at 82% 16%, rgba(255,255,255,.72) 0 6%, transparent 15%),
    radial-gradient(circle at 50% 100%, rgba(118,212,123,.4), transparent 40%),
    linear-gradient(#a7e5ff 0 32%, #8bdc88 33% 48%, #56d5ff 49% 78%, #77d47b 79%);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.4);
  animation: fadeInRight .55s var(--ease-out) both;
}
/* 首页地图：水体延伸至底部 */
.water-map {
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.8) 0 5%, transparent 14%),
    radial-gradient(circle at 82% 16%, rgba(255,255,255,.72) 0 6%, transparent 15%),
    linear-gradient(#a7e5ff 0 32%, #8bdc88 33% 48%, #56d5ff 49% 100%);
}
/* 河流 */
.water-map::before,
.stage-visual::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: -6%;
  right: -6%;
  top: 48%;
  height: 32%;
  background: linear-gradient(120deg, #20a9ef, #72e0ff 45%, #198bd2);
  clip-path: polygon(0 42%, 18% 20%, 35% 38%, 52% 12%, 71% 32%, 100% 18%, 100% 100%, 0 100%);
  filter: drop-shadow(0 6px 14px rgba(20,127,207,.3));
}
/* 首页河流：延伸至底部 */
.water-map::before {
  height: 52%;
  clip-path: polygon(0 42%, 18% 20%, 35% 38%, 52% 12%, 71% 32%, 100% 18%, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #20a9ef 0%, #72e0ff 30%, #198bd2 70%, #0d72b8 100%);
}
/* 第一关舞台：水体延伸至底部（与首页一致） */
.stage-visual {
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.8) 0 5%, transparent 14%),
    radial-gradient(circle at 82% 16%, rgba(255,255,255,.72) 0 6%, transparent 15%),
    linear-gradient(#a7e5ff 0 32%, #8bdc88 33% 48%, #56d5ff 49% 100%);
}
/* 第一关河流：延伸至底部（与首页一致） */
.stage-visual::before {
  height: 52%;
  clip-path: polygon(0 42%, 18% 20%, 35% 38%, 52% 12%, 71% 32%, 100% 18%, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #20a9ef 0%, #72e0ff 30%, #198bd2 70%, #0d72b8 100%);
}
/* 第五关：背景水体改为青绿色 */
.stage-visual.stage-sponge {
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.8) 0 5%, transparent 14%),
    radial-gradient(circle at 82% 16%, rgba(255,255,255,.72) 0 6%, transparent 15%),
    linear-gradient(#a7e5ff 0 32%, #8bdc88 33% 48%, #4ad9b0 49% 100%);
}
.stage-visual.stage-sponge::before {
  background: linear-gradient(180deg, #2dbfa0 0%, #5fe0c0 30%, #1a9c80 70%, #0d7060 100%);
}

/* —— 远山（雪顶 + 雾感） —— */
.mountain-far {
  position: absolute;
  z-index: 0;
  left: -4%;
  right: -4%;
  top: 14%;
  height: 38%;
  background: linear-gradient(180deg, #a8c4d8 0%, #8eb4cc 30%, #7aa5bc 60%, #6b9aaf 100%);
  clip-path: polygon(
    0% 100%,
    0% 90%, 3% 75%, 7% 48%, 14% 55%, 20% 35%, 27% 42%, 33% 25%, 40% 38%,
    47% 20%, 54% 33%, 61% 18%, 68% 30%, 75% 22%, 82% 36%, 89% 28%,
    96% 40%, 98% 58%, 99% 78%, 100% 92%, 100% 100%
  );
  opacity: .45;
  filter: blur(1.5px);
}
/* 远山雪顶 */
.mountain-far::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.3) 8%, transparent 14%);
  clip-path: polygon(
    14% 55%, 16% 50%, 18% 54%, 20% 35%, 23% 40%, 25% 44%, 27% 42%,
    31% 36%, 33% 25%, 36% 30%, 38% 38%, 40% 38%,
    44% 30%, 47% 20%, 50% 26%, 52% 31%, 54% 33%,
    58% 25%, 61% 18%, 64% 24%, 66% 28%, 68% 30%,
    72% 25%, 75% 22%, 78% 30%, 80% 33%, 82% 36%,
    86% 31%, 89% 28%, 92% 35%, 95% 33%, 96% 40%
  );
  opacity: .7;
}

/* —— 中山（层叠翠绿） —— */
.mountain-mid {
  position: absolute;
  z-index: 1;
  left: -2%;
  right: -2%;
  top: 22%;
  height: 36%;
  background: linear-gradient(180deg, #5fae6e 0%, #4d9a5e 35%, #3d8550 70%, #357a47 100%);
  clip-path: polygon(
    0% 100%,
    0% 92%, 3% 80%, 5% 55%, 10% 62%, 16% 40%, 22% 50%, 28% 35%, 35% 48%,
    42% 30%, 49% 42%, 56% 28%, 63% 40%, 70% 35%, 77% 48%, 84% 38%,
    91% 50%, 96% 42%, 98% 60%, 99% 80%, 100% 92%, 100% 100%
  );
  opacity: .72;
  filter: drop-shadow(0 4px 10px rgba(30,80,50,.2));
}
/* 中山高光面（阳光照射的右侧） */
.mountain-mid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%);
  clip-path: polygon(
    0% 100%,
    0% 92%, 3% 80%, 5% 55%, 10% 62%, 16% 40%, 22% 50%, 28% 35%, 35% 48%,
    42% 30%, 49% 42%, 56% 28%, 63% 40%, 70% 35%, 77% 48%, 84% 38%,
    91% 50%, 96% 42%, 98% 60%, 99% 80%, 100% 92%, 100% 100%
  );
}

/* —— 近丘（前景，最深色 + 圆润） —— */
.water-map::after,
.stage-visual::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 4%;
  right: 4%;
  top: 32%;
  height: 34%;
  background: linear-gradient(140deg, #4a9658 0%, #3a8048 40%, #2f6e3c 80%, #286234 100%);
  clip-path: polygon(
    0% 100%,
    0% 96%, 3% 90%, 6% 70%, 12% 80%, 18% 55%, 25% 72%, 32% 48%, 40% 65%,
    48% 42%, 56% 58%, 64% 45%, 72% 62%, 80% 50%, 88% 68%, 95% 55%,
    98% 72%, 99% 86%, 100% 95%, 100% 100%
  );
  opacity: .92;
  filter: drop-shadow(0 6px 16px rgba(25,70,40,.25));
}

/* —— 路径虚线（SVG，串联各节点，高于山体低于图标） —— */
.map-path-svg {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ============== 地图节点 ============== */
.map-node {
  position: absolute;
  z-index: 3;
  width: 118px;
  min-height: 108px;
  display: grid;
  justify-items: center;
  gap: 5px;
  background: transparent;
  font-weight: 900;
  transition: transform var(--t);
}
.map-node:hover { transform: translateY(-8px) scale(1.04); }
.map-node:active { transform: translateY(-4px) scale(.99); }

.map-node.done .node-icon {
  background: radial-gradient(circle at 35% 25%, #fff, #91ef8c 28%, #45af47 78%);
  box-shadow: 0 6px 0 #1f7a3b, 0 0 22px rgba(108,204,104,.85);
}
.map-node.done .node-icon::after {
  content: "✓";
  position: absolute;
  right: -6px;
  top: -6px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 16px;
  border: 3px solid #fff;
  box-shadow: var(--shadow-sm);
}

.node-icon {
  position: relative;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 31px;
  background: radial-gradient(circle at 35% 25%, #fff, #7ceaff 28%, #1298e8 78%);
  border: 5px solid rgba(255,255,255,.92);
  box-shadow: 0 6px 0 #177bc2, 0 0 18px rgba(86,213,255,.7);
  transition: box-shadow var(--t), transform var(--t);
}
/* 节点呼吸光晕 */
.node-icon::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(86,213,255,.5);
  animation: pulse 2.4s var(--ease-out) infinite;
}
.map-node:hover .node-icon {
  box-shadow: 0 8px 0 #177bc2, 0 0 28px rgba(86,213,255,.95);
}
.node-name {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,253,243,.95);
  box-shadow: var(--shadow-sm);
  font-size: 14px;
  white-space: nowrap;
}
.node-0 { left: 8%;  top: 60%; }
.node-1 { left: 21%; top: 48%; }
.node-2 { left: 36%; top: 40%; }
.node-3 { left: 51%; top: 34%; }
.node-4 { left: 65%; top: 46%; }
.node-5 { left: 78%; top: 58%; }

/* ============== 首页地图动态装饰 ============== */

/* —— 太阳 —— */
.map-sun {
position: absolute;
z-index: 6;
top: 8%;
right: 12%;
width: 60px;
height: 60px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fff8d0, #ffd66e 50%, #ffb732 100%);
box-shadow:
0 0 30px rgba(255,210,80,.6),
0 0 60px rgba(255,200,60,.3),
0 0 90px rgba(255,190,40,.15);
animation: sunPulse 3.5s ease-in-out infinite;
cursor: grab;
user-select: none;
touch-action: none;
transition: left .5s ease, top .5s ease, background .6s ease, box-shadow .6s ease;
}
.map-sun::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,220,100,.25), transparent 65%);
  animation: sunPulse 3.5s ease-in-out infinite reverse;
}
@keyframes sunPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* —— 太阳拖拽 —— */
.map-sun.dragging {
  cursor: grabbing;
  transition: none;
}
.map-sun.night {
  background: radial-gradient(circle at 35% 30%, #f5f5f0, #d8d8d0 50%, #b0b0a8 100%);
  box-shadow:
    0 0 20px rgba(220,220,200,.4),
    0 0 40px rgba(200,200,180,.2);
}
.map-sun.night::before {
  background: radial-gradient(circle, rgba(230,230,210,.18), transparent 65%);
}

/* —— 黑夜遮罩 —— */
.map-night-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(180deg, rgba(8,12,35,.88) 0%, rgba(18,22,55,.72) 50%, rgba(12,16,40,.55) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}

/* —— 星星 —— */
.map-stars {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}
.map-stars span {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px rgba(255,255,255,.8);
  animation: twinkle 2s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: .3; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.4); }
}

/* —— 云朵 —— */
.map-cloud {
  position: absolute;
  z-index: 0;
  opacity: .85;
  filter: drop-shadow(0 4px 8px rgba(100,150,200,.15));
}
.map-cloud::before,
.map-cloud::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #fff;
}
.map-cloud-1 {
  top: 14%; left: -8%;
  width: 80px; height: 28px;
  animation: cloudDrift1 28s linear infinite;
}
.map-cloud-1::before { width: 40px; height: 40px; top: -16px; left: 8px; }
.map-cloud-1::after  { width: 32px; height: 32px; top: -12px; left: 36px; }

.map-cloud-2 {
  top: 6%; left: -12%;
  width: 60px; height: 22px;
  opacity: .65;
  transform: scale(.8);
  animation: cloudDrift2 36s linear infinite;
}
.map-cloud-2::before { width: 30px; height: 30px; top: -12px; left: 6px; }
.map-cloud-2::after  { width: 24px; height: 24px; top: -8px; left: 28px; }

.map-cloud-3 {
  top: 20%; left: -6%;
  width: 50px; height: 18px;
  opacity: .55;
  transform: scale(.7);
  animation: cloudDrift3 42s linear infinite;
}
.map-cloud-3::before { width: 24px; height: 24px; top: -10px; left: 4px; }
.map-cloud-3::after  { width: 20px; height: 20px; top: -7px; left: 22px; }

@keyframes cloudDrift1 {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(100vw + 120px)); }
}
@keyframes cloudDrift2 {
  0%   { transform: translateX(0) scale(.8); }
  100% { transform: translateX(calc(100vw + 120px)) scale(.8); }
}
@keyframes cloudDrift3 {
  0%   { transform: translateX(0) scale(.7); }
  100% { transform: translateX(calc(100vw + 120px)) scale(.7); }
}

/* —— 飞鸟画布（与第一关相同的 V 形扇翅模型） —— */
.map-bird-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* —— 河流生态画布（流水波纹 + 鱼群 + 水草 + 闪光，高于山体低于图标） —— */
.map-river-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* —— 萤火虫 / 花粉粒子（生态图层，z-index 4 与河流画布同层） —— */
.map-firefly {
  position: absolute;
  z-index: 4;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,245,150,.9), rgba(255,230,80,.2) 60%, transparent);
  pointer-events: none;
  animation: fireflyFloat 6s ease-in-out infinite;
}
.map-firefly-1 { top: 45%; left: 15%; animation-delay: 0s; }
.map-firefly-2 { top: 52%; left: 42%; animation-delay: 1.2s; }
.map-firefly-3 { top: 38%; left: 68%; animation-delay: 2.4s; }
.map-firefly-4 { top: 60%; left: 82%; animation-delay: 3.6s; }
.map-firefly-5 { top: 48%; left: 30%; animation-delay: 4.8s; }
@keyframes fireflyFloat {
  0%, 100% { transform: translate(0, 0); opacity: .3; }
  25%      { transform: translate(12px, -10px); opacity: 1; }
  50%      { transform: translate(-8px, -18px); opacity: .6; }
  75%      { transform: translate(6px, -8px); opacity: .9; }
}

/* ============== 按钮 ============== */
.primary, .secondary {
  min-height: 52px;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .5px;
  box-shadow: var(--shadow);
  transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
}
.primary {
  color: #6a3d00;
  background: linear-gradient(135deg, #ffe77a, var(--gold) 60%, var(--gold-deep));
  box-shadow: var(--shadow-gold);
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.primary:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(240,169,46,.45); filter: brightness(1.04); }
.primary:active { transform: translateY(-1px) scale(.98); }
.secondary {
  background: rgba(255,253,243,.95);
  border: 2px solid #d7f1ff;
  color: var(--blue-deep);
}
.secondary:hover { transform: translateY(-3px); border-color: var(--lake); box-shadow: var(--shadow-lg); }
.secondary:active { transform: translateY(-1px) scale(.98); }

/* ============== 关卡页 ============== */
.level-screen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-rows: auto auto minmax(360px, 1fr) auto;
  gap: 16px;
  max-width: 1220px;
  margin: 0 auto;
}
.level-screen[hidden], .home-screen[hidden], .report-screen[hidden] { display: none; }

.level-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: end;
  gap: 14px;
  animation: fadeInUp .4s var(--ease-out) both;
}
.level-header p {
  margin: 0;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-sm);
  font-weight: 900;
  color: var(--blue-deep);
}
.level-header h1 {
  margin: 0;
  color: var(--blue-deep);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  letter-spacing: 1px;
  background: linear-gradient(120deg, #147fcf, #2f8f5b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.level-question {
  grid-column: 1 / -1;
  padding: 18px 24px;
  border-radius: 22px;
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow);
  font-size: 22px;
  font-weight: 900;
  animation: fadeInUp .45s var(--ease-out) .05s both;
}
.level-question::before {
  content: "❓";
  margin-right: 10px;
}
.level-stage {
  position: relative;
  min-height: 430px;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.35);
  animation: fadeInUp .5s var(--ease-out) .1s both;
}
.stage-visual {
  position: absolute;
  inset: 0;
  min-height: 100%;
  border-radius: 0;
}
.stage-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}
.science-card {
  padding: 20px;
  border-radius: 26px;
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow);
  animation: fadeInRight .5s var(--ease-out) .12s both;
}
.science-card h2 {
  margin: 0 0 14px;
  color: var(--blue-deep);
  font-size: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.science-card h2::before { content: "💡"; }
.science-card p {
  margin: 10px 0;
  line-height: 1.7;
  font-weight: 700;
  padding-left: 18px;
  position: relative;
  color: var(--ink);
}
.science-card p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lake), var(--green));
}
.level-controls {
  grid-column: 1 / 2;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 14px;
  min-height: 112px;
  padding: 18px;
  border-radius: 26px;
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow);
  animation: fadeInUp .5s var(--ease-out) .15s both;
}
.level-nav {
  grid-column: 2 / 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 10px;
}
.level-nav button {
  min-height: 58px;
  border-radius: 20px;
  font-weight: 900;
  background: rgba(255,253,243,.95);
  box-shadow: var(--shadow);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.level-nav button:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.level-nav button:active { transform: translateY(-1px) scale(.97); }
#continueBtn {
  color: #6a3d00;
  background: linear-gradient(135deg, #ffe77a, var(--gold) 60%, var(--gold-deep));
  box-shadow: var(--shadow-gold);
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

/* ============== 控件 ============== */
.control {
  min-width: 160px;
  flex: 1;
  display: grid;
  gap: 8px;
  font-weight: 900;
}
.control output {
  justify-self: end;
  color: var(--blue-deep);
  font-variant-numeric: tabular-nums;
}

/* —— 自定义 range —— */
input[type="range"] {
  width: 100%;
  height: 24px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--lake));
  box-shadow: inset 0 1px 3px rgba(43,125,168,.3);
}
input[type="range"]::-moz-range-track {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--lake));
  box-shadow: inset 0 1px 3px rgba(43,125,168,.3);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--gold) 70%);
  border: 3px solid #fff;
  box-shadow: 0 3px 8px rgba(240,169,46,.5);
  transition: transform var(--t-fast);
}
input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--gold) 70%);
  box-shadow: 0 3px 8px rgba(240,169,46,.5);
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.18); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.05); }

/* —— 选择卡片 —— */
.choice-card {
  width: 150px;
  min-height: 90px;
  display: grid;
  gap: 8px;
  place-items: center;
  padding: 12px;
  border-radius: 22px;
  background: rgba(255,253,243,.95);
  border: 3px solid #d7f1ff;
  box-shadow: 0 5px 0 #9bd4ec, var(--shadow-sm);
  font-weight: 900;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.choice-card:hover { transform: translateY(-4px); box-shadow: 0 9px 0 #9bd4ec, var(--shadow); }
.choice-card.selected {
  border-color: var(--gold);
  box-shadow: 0 5px 0 var(--gold-deep), var(--shadow-gold), 0 0 0 0 rgba(240,169,46,.4);
  background: linear-gradient(160deg, #fffdf3, #fff7e0);
  animation: cardPulse 1.8s var(--ease-out) infinite;
  position: relative;
  overflow: hidden;
}
.choice-card.selected::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: cardShimmer 2.5s ease-in-out infinite;
}
@keyframes cardPulse {
  0%, 100% { box-shadow: 0 5px 0 var(--gold-deep), var(--shadow-gold), 0 0 0 0 rgba(240,169,46,.35); }
  50% { box-shadow: 0 5px 0 var(--gold-deep), var(--shadow-gold), 0 0 0 8px rgba(240,169,46,0); }
}
@keyframes cardShimmer {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}
.choice-card:active { transform: scale(.96); }
.choice-name { font-size: 16px; color: #1a4a6e; }
.choice-price { font-size: 14px; color: #e8862a; font-weight: 800; }
.choice-card.selected .choice-price { color: var(--gold-deep); }

/* ============== 状态条 ============== */
.status-mini {
  position: absolute;
  z-index: 4;
  right: 18px;
  top: 18px;
  width: 210px;
  display: grid;
  gap: 10px;
}
.bar {
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-line);
  font-weight: 900;
  font-size: 14px;
  box-shadow: var(--shadow-sm);
}
.bar-head { display: flex; justify-content: space-between; margin-bottom: 7px; }
.bar-head b { color: var(--blue-deep); font-variant-numeric: tabular-nums; }
.track {
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(200,219,228,.7);
  box-shadow: inset 0 1px 3px rgba(43,125,168,.25);
}
.fill {
  display: block;
  height: 100%;
  width: var(--v);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--green));
  transition: width .35s var(--ease-out);
  position: relative;
  overflow: hidden;
}
/* 扫光高光 */
.fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-100%);
  animation: shine 2.6s var(--ease-out) infinite;
}
.fill.warn { background: linear-gradient(90deg, var(--red), var(--gold)); }

/* ============== 流程步骤 ============== */
.process-strip {
  position: absolute;
  z-index: 4;
  left: 18px;
  top: 18px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 60%;
}
.step {
  padding: 8px 13px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(255,255,255,.9);
  font-weight: 900;
  font-size: 13px;
  color: #000;
  box-shadow: var(--shadow-sm);
  transition: all var(--t-fast);
}
.step.on {
  background: #fff;
  color: #000;
  border-color: rgba(255,255,255,.9);
}

/* ============== 热点 ============== */
.hotspot {
  position: absolute;
  z-index: 4;
  width: 86px;
  height: 72px;
  border-radius: 24px;
  border: 4px dashed rgba(255,255,255,.95);
  background: rgba(86,213,255,.24);
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  box-shadow: 0 0 18px rgba(86,213,255,.55);
  transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast);
  animation: floatY 3s var(--ease-out) infinite;
}
.hotspot::before {
  content: "";
  position: absolute;
  inset: -28px;
  border-radius: 36px;
}
.hotspot:nth-child(odd) { animation-delay: .6s; }
.hotspot:hover { transform: scale(1.08); }
.hotspot.filled {
  border-style: solid;
  border-color: rgba(255,255,255,.7);
  background: linear-gradient(135deg, rgba(108,204,104,.55), rgba(47,143,91,.45));
  animation: none;
}
.h1 { left: 28%; top: 48%; }
.h2 { left: 48%; top: 38%; }
.h3 { left: 62%; top: 56%; }

/* ============== 湿地网格 ============== */
.wetland-grid {
  position: absolute;
  z-index: 4;
  left: 28%;
  top: 16%;
  width: 330px;
  height: 330px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.cell {
  position: relative;
  border-radius: 20px;
  border: 4px dashed rgba(255,255,255,.95);
  background: rgba(86,213,255,.22);
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  transition: transform var(--t-fast), background var(--t-fast);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* 透明扩展触摸区域（不改变视觉尺寸） */
.cell::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 24px;
}
.cell:hover { transform: scale(1.05); }
.cell.filled {
  border-style: solid;
  border-color: rgba(255,255,255,.7);
  background: linear-gradient(135deg, rgba(108,204,104,.55), rgba(47,143,91,.45));
  animation: pop .4s var(--ease);
}

/* —— 第四关选择卡片：扩大触发范围 —— */
.controls-wetland .choice-card {
  width: 170px;
  min-height: 110px;
  padding: 14px;
}

/* ============== 报告页 ============== */
.report-screen {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.75), transparent 12%),
    radial-gradient(circle at 84% 82%, rgba(255,233,160,.4), transparent 24%),
    linear-gradient(#a7e5ff, #bcecff 36%, #72d87c);
}
.report-card {
  width: min(720px, calc(100vw - 32px));
  padding: 36px 32px;
  border-radius: 32px;
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: pop .55s var(--ease) both;
}
/* 证书顶部彩条 */
.report-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 7px;
  background: linear-gradient(90deg, var(--lake), var(--blue), var(--green), var(--gold), var(--red));
}
/* 角落水印光斑 */
.report-card::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,201,74,.3), transparent 70%);
  pointer-events: none;
}
.report-card h1 {
  margin: 0;
  color: var(--blue-deep);
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 900;
  letter-spacing: 1px;
}
.report-card h2 {
  color: var(--gold-deep);
  font-size: clamp(28px, 4.5vw, 40px);
  margin: 8px 0 0;
  text-shadow: 0 2px 0 rgba(255,255,255,.5);
}
.report-card > p {
  font-size: 20px;
  font-weight: 900;
  color: var(--muted);
  margin: 6px 0 0;
}
.report-card > p span { color: var(--blue-deep); font-size: 30px; }
.report-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin: 22px 0;
}
.report-grid div {
  padding: 16px 12px;
  border-radius: 18px;
  background: linear-gradient(160deg, #e9f8ff, #d7f1ff);
  border: 1px solid rgba(86,213,255,.3);
  font-weight: 900;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
  transition: transform var(--t-fast);
}
.report-grid div:hover { transform: translateY(-4px); }
.report-grid div b { display: block; font-size: 30px; color: var(--blue-deep); }
.report-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ============== 弹窗 ============== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(52,120,155,.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease-out);
}
.modal.show { opacity: 1; pointer-events: auto; }
.modal-card {
  position: relative;
  width: min(520px, 100%);
  padding: 28px;
  border-radius: 28px;
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-lg);
  transform: translateY(24px) scale(.96);
  transition: transform .35s var(--ease);
}
.modal.show .modal-card { transform: translateY(0) scale(1); }
.modal-card h2 {
  margin: 0 0 12px;
  color: var(--blue-deep);
  font-size: 26px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-card h2::before { content: "🎉"; }
.modal-card p {
  margin: 0;
  line-height: 1.8;
  font-weight: 700;
  color: var(--ink);
}
#modalClose {
  position: absolute;
  right: -12px;
  top: -12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff8585, var(--red));
  color: white;
  font-size: 24px;
  font-weight: 900;
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
  transition: transform var(--t-fast);
}
#modalClose:hover { transform: rotate(90deg) scale(1.1); }

/* ============== Toast ============== */
.toast {
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%) translateY(16px);
  opacity: 0;
  padding: 13px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1a8de0, var(--blue-deep));
  color: white;
  font-weight: 900;
  letter-spacing: .5px;
  box-shadow: var(--shadow-lg);
  transition: .3s var(--ease);
  z-index: 30;
  max-width: 80vw;
  text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============== 关键帧动画 ============== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-26px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pop {
  0%   { opacity: 0; transform: scale(.88); }
  60%  { transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes pulse {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes shine {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* ============== 确认弹窗 ============== */
.confirm-card { text-align: center; }
.confirm-card h2 {
  justify-content: center;
  color: var(--red);
}
.confirm-card h2::before { content: "⚠️"; }
.confirm-card p {
  color: var(--muted);
  margin-bottom: 22px;
}
.confirm-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
}
.confirm-actions .secondary { min-width: 110px; }
.confirm-actions .primary {
  min-width: 110px;
  background: linear-gradient(135deg, #ff8585, var(--red));
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
  box-shadow: 0 12px 26px rgba(255,107,107,.35), 0 3px 8px rgba(255,107,107,.25);
}
.confirm-actions .primary:hover {
  box-shadow: 0 16px 32px rgba(255,107,107,.45);
  filter: brightness(1.05);
}

/* —— 重置进度按钮 —— */
.reset-btn {
  min-height: 52px;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .5px;
  background: rgba(255,253,243,.9);
  border: 2px dashed rgba(255,107,107,.5);
  color: var(--red);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.reset-btn:hover {
  transform: translateY(-3px);
  border-color: var(--red);
  border-style: solid;
  background: rgba(255,245,245,.95);
  box-shadow: var(--shadow);
}
.reset-btn:active { transform: translateY(-1px) scale(.98); }

/* ============== 响应式 ============== */
@media (max-width: 860px) {
  .home-screen { grid-template-columns: 1fr; padding: 14px; }
  .water-map { min-height: 430px; }
  .level-screen {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(360px, 1fr) auto auto;
    padding: 12px;
  }
  .science-card, .level-controls, .level-nav { grid-column: 1; }
  .level-nav { grid-template-columns: repeat(3, 1fr); }
  .level-stage { min-height: 360px; }
  .status-mini { width: 170px; font-size: 13px; }
  .process-strip { max-width: 52%; }
  .wetland-grid { left: 18%; width: 250px; height: 250px; }
  .choice-card { width: 120px; }
  .controls-wetland .choice-card { width: 140px; min-height: 90px; }
  .report-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-copy h1 { font-size: clamp(32px, 9vw, 48px); }
}

/* 尊重减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}