/* ===== 坦克小英雄 · 圆润大按钮 UI + 写实风坦克插画 ===== */
:root {
  --ink: #4A3B2A;          /* 描边色 */
  --cream: #FFF8E7;        /* 背景米色 */
  --card: #FFFFFF;
  --green: #7FA857;
  --green-dark: #5F8A3E;
  --yellow: #FFD54A;
  --orange: #FF9F43;
  --red: #FF6B6B;
  --sky: #A8D8F0;
  --shadow: 0 5px 0 var(--ink);
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Heiti SC", sans-serif;
}

/* 关键兜底：hidden 属性永远赢过任何 display 声明（修复结果浮层开局可见的 bug） */
[hidden] { display: none !important; }

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

html { height: 100%; }

body {
  font-family: var(--font);
  font-weight: 700;
  background: var(--cream);
  background-image: radial-gradient(#FFE9B8 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  color: var(--ink);
  min-height: 100dvh;
  overscroll-behavior-y: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hidden { display: none !important; }

/* ===== 封面启动页 ===== */
#cover {
  position: fixed;
  inset: 0;
  z-index: 50;
  height: 100dvh;
  background: linear-gradient(180deg, #9FC7E8 0%, #CBE4F4 55%, #B8D9A8 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  transition: opacity .45s ease;
}
#cover.cover-hide { opacity: 0; pointer-events: none; }
#cover-art { width: min(330px, 80vw); }
#cover-art svg { width: 100%; height: auto; display: block; }
.cover-title {
  font-size: clamp(34px, 9vw, 46px);
  letter-spacing: 6px;
  color: #3E5C2E;
  text-shadow: 2px 2px 0 #FFF, 4px 4px 0 var(--ink);
}
.cover-sub { font-size: 16px; opacity: .85; }
#btn-start { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* ===== 通用大字幕条（语音降级/识字辅助） ===== */
#subtitle-bar {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 92%;
  background: #FFF;
  border: 3px solid var(--ink);
  border-radius: 16px;
  padding: 10px 16px;
  font-size: 17px;
  line-height: 1.6;
  z-index: 40;
  box-shadow: 4px 4px 0 var(--ink);
  text-align: center;
}
#subtitle-bar.reading .hl,
#bubble-text.reading .hl { background: var(--yellow); border-radius: 4px; }

/* ===== 按钮 ===== */
.btn-big {
  font-family: var(--font);
  font-weight: 900;
  font-size: 20px;
  color: var(--ink);
  background: var(--yellow);
  border: 4px solid var(--ink);
  border-radius: 999px;
  padding: 13px 30px;
  margin-top: 8px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn-big:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--ink);
}
.btn-round {
  font-family: var(--font);
  font-size: 22px;
  background: #FFF;
  border: 4px solid var(--ink);
  border-radius: 50%;
  width: 54px;
  height: 54px;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-round:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn-listen {
  font-family: var(--font);
  font-weight: 900;
  font-size: 17px;
  color: #FFF;
  background: var(--orange);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 10px 22px;
  box-shadow: 0 4px 0 var(--ink);
  cursor: pointer;
}
.btn-listen:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn-demo { background: #6C8EBF; }

/* ===== 头部 ===== */
#header {
  position: sticky;
  top: 0;
  z-index: 30;
  width: 100%;
  max-width: 560px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 18px;
  background: rgba(255, 248, 231, .95);
  border-bottom: 4px solid var(--ink);
}
#header h1 { font-size: 22px; letter-spacing: 2px; color: var(--green-dark); text-shadow: 2px 2px 0 #FFF; }
.logo-tank { height: .92em; width: auto; vertical-align: -0.14em; }
#header h1 { display: flex; align-items: center; gap: 6px; }


/* ===== 主容器与视图 ===== */
#main {
  width: 100%;
  max-width: 560px;
  padding: 18px 14px 40px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.view { display: flex; flex-direction: column; gap: 18px; }

/* ===== 大厅 ===== */
.hall-title { font-size: 26px; text-align: center; color: var(--green-dark); letter-spacing: 2px; }
.hall-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hall-card {
  font-family: var(--font);
  background: var(--card);
  border: 4px solid var(--ink);
  border-radius: 22px;
  padding: 20px 10px 14px;
  box-shadow: 5px 5px 0 var(--ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: transform .08s ease, box-shadow .08s ease;
}
.hall-card:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.hall-card .hc-emoji { font-size: 40px; }
.hall-card .hc-name { font-size: 19px; font-weight: 900; color: var(--ink); }
.hall-card small { font-size: 13px; color: #8A7A5E; font-weight: 700; }
.hall-card.disabled {
  background: #F0EBDE;
  cursor: not-allowed;
  filter: grayscale(.7);
  opacity: .75;
  box-shadow: 3px 3px 0 #B9AE97;
}
.hall-best { text-align: center; font-size: 17px; margin-top: 6px; }

/* ===== 页签 ===== */
.tabs { display: flex; gap: 10px; }
.tab {
  flex: 1;
  font-family: var(--font);
  font-weight: 900;
  font-size: 15px;
  background: #FFF;
  color: var(--ink);
  border: 4px solid var(--ink);
  border-radius: 999px;
  padding: 10px 2px;
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
}
.tab.active { background: var(--yellow); }
.tab-page { display: flex; flex-direction: column; gap: 16px; }

/* ===== 透视坦克 ===== */
#tank-wrap { position: relative; }
#tank-svg-box svg { width: 100%; height: auto; display: block; }

/* 俯视图互动控制条 */
.top-ctl { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.top-status { font-size: 14px; opacity: .85; min-height: 20px; }
.top-ctl-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.top-ctl-btns .btn-listen { padding: 8px 12px; font-size: 14px; }
.top-ctl-btns .btn-big { padding: 10px 16px; font-size: 16px; }
.top-fire { background: var(--red); color: #FFF; border-color: var(--ink); }

.tank-part, .crew { cursor: pointer; }
.part-halo { fill: none; stroke: transparent; stroke-width: 5; pointer-events: all; }
.tank-part:hover .part-halo, .crew:hover .part-halo { stroke: rgba(255, 179, 0, .55); }
.tank-part.active .part-halo, .crew.active .part-halo { stroke: #FFB300; }
.tank-part.active, .crew.active { animation: glow-pulse 1s ease-in-out infinite; }
@keyframes glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 179, 0, .6)); }
  50% { filter: drop-shadow(0 0 9px rgba(255, 179, 0, .95)); }
}

/* 讲解气泡（放在坦克下方，不遮挡画面） */
.bubble {
  background: #FFF;
  border: 4px solid var(--ink);
  border-radius: 20px;
  padding: 12px 16px;
  margin-top: 10px;
  z-index: 10;
  animation: pop .25s ease;
  box-shadow: 4px 4px 0 var(--ink);
}
@keyframes pop {
  from { transform: scale(.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
#bubble-emoji { font-size: 26px; }
#bubble-title { font-size: 18px; margin: 2px 0 4px; color: var(--green-dark); }
#bubble-text { font-size: 15px; line-height: 1.55; font-weight: 700; }
#bubble-action {
  font-family: var(--font);
  font-weight: 900;
  font-size: 15px;
  color: #FFF;
  background: var(--red);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 8px 14px;
  margin-top: 8px;
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
}
/* 首次引导手指 */
#hint-finger {
  position: absolute;
  left: 60%;
  top: 10%;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: finger-bob 1.1s ease-in-out infinite;
  transition: opacity .6s ease;
}
#hint-finger.hint-hide { opacity: 0; }
.finger { font-size: 40px; }
.hint-tag {
  background: var(--red);
  color: #FFF;
  font-size: 15px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
  box-shadow: 3px 3px 0 var(--ink);
}
@keyframes finger-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ===== 口径实验室 ===== */
#caliber-lab { margin-top: 6px; text-align: center; }
#caliber-lab h3 { font-size: 20px; margin-bottom: 10px; color: var(--green-dark); }
#caliber-buttons { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.cal-btn {
  font-family: var(--font);
  font-weight: 900;
  font-size: 15px;
  background: #FFF;
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--ink);
}
.cal-btn.active { background: var(--yellow); transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
#caliber-ref { font-size: 16px; margin-bottom: 8px; min-height: 24px; }
#caliber-ref b { color: var(--red); }
#caliber-scene-box svg { width: 100%; height: auto; display: block; }
#btn-fire { display: inline-block; }

/* ===== 物理知识点卡片 ===== */
.phys-card {
  background: #FFFDF3;
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 4px 4px 0 var(--ink);
}
.phys-svg-box svg { width: 100%; height: auto; display: block; }
.phys-card h3 { font-size: 19px; margin: 10px 0 6px; color: var(--green-dark); }
.phys-say { font-size: 16px; line-height: 1.65; }
.phys-say strong { color: var(--red); }
.phys-life {
  font-size: 14px;
  margin-top: 8px;
  background: #F0F7E6;
  border-radius: 12px;
  padding: 8px 12px;
  line-height: 1.55;
}
.phys-btns { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

/* ①后坐动画（点按触发） */
#svg-recoil .anim-shell, #svg-recoil .anim-tank { opacity: 1; }
#svg-recoil .flash { opacity: 0; }
#svg-recoil.play .anim-shell { animation: recoil-shell 2.2s ease-out 1; }
#svg-recoil.play .anim-tank { animation: recoil-tank 2.2s ease-out 1; }
#svg-recoil.play .flash { animation: boom-flash 2.2s ease-out 1; }
@keyframes recoil-shell {
  0% { transform: translateX(0); opacity: 0; }
  8% { opacity: 1; }
  55% { transform: translateX(150px); opacity: 1; }
  62%, 100% { transform: translateX(150px); opacity: 0; }
}
@keyframes recoil-tank {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-9px); }
  24% { transform: translateX(0); }
}
/* ②压强动画（点按触发）：双车行进对比 */
#svg-pressure.play .anim-wheel-car { animation: drive-sink 3s ease-out 1; }
#svg-pressure.play .anim-track-tank { animation: drive-flat 3s ease-out 1; }
@keyframes drive-sink {
  0% { transform: translate(0, 0); }
  30% { transform: translate(27px, 4px); }
  60% { transform: translate(54px, 8px); }
  100% { transform: translate(90px, 12px); }
}
@keyframes drive-flat {
  0% { transform: translate(0, 0); }
  100% { transform: translate(36px, 0); }
}
/* ③斜装甲上下双图对比（点按触发）：上直板打穿、下斜板朝下弹飞 */
#svg-slope .anim-shell-straight, #svg-slope .anim-shell-slope { opacity: 0; }
#svg-slope .flash-straight, #svg-slope .spark-slope, #svg-slope .crack-straight,
#svg-slope .result-straight, #svg-slope .result-slope { opacity: 0; }
#svg-slope.play .anim-shell-straight { animation: straight-hit 3s ease-in 1; }
#svg-slope.play .anim-shell-slope { animation: slope-deflect 3s ease-in 1; }
#svg-slope.play .flash-straight { animation: slope-flash 3s ease-in 1; }
#svg-slope.play .spark-slope { animation: slope-flash 3s ease-in 1; }
#svg-slope.play .crack-straight { animation: crack-show 3s ease-in 1; }
#svg-slope.play .result-straight { animation: result-show 3s ease-in 1 forwards; }
#svg-slope.play .result-slope { animation: result-show 3s ease-in 1 forwards; }
@keyframes straight-hit {
  0% { transform: translate(0, 0); opacity: 0; }
  8% { opacity: 1; }
  45% { transform: translate(202px, 0); opacity: 1; }   /* 抵达钢板 */
  58% { transform: translate(244px, 0); opacity: 1; }   /* 穿过钢板 */
  66%, 100% { transform: translate(244px, 0); opacity: 0; }
}
@keyframes slope-deflect {
  0% { transform: translate(0, 0) rotate(0); opacity: 0; }
  8% { opacity: 1; }
  45% { transform: translate(240px, 0) rotate(0); opacity: 1; }           /* 击中斜面 */
  58% { transform: translate(262px, -46px) rotate(-60deg); opacity: 1; }   /* 向右上方弹飞 */
  66%, 100% { transform: translate(322px, -112px) rotate(-60deg); opacity: 0; }
}
@keyframes slope-flash {
  0%, 44% { opacity: 0; }
  50% { opacity: 1; }
  66%, 100% { opacity: 0; }
}
@keyframes crack-show {
  0%, 46% { opacity: 0; }
  56%, 100% { opacity: 1; }
}
@keyframes result-show {
  0%, 58% { opacity: 0; }
  72%, 100% { opacity: 1; }
}
@keyframes boom-flash {
  0%, 40% { opacity: 0; }
  46% { opacity: 1; }
  62%, 100% { opacity: 0; }
}

/* ④ 抛物线：三发对比 */
#svg-parabola .pa-low, #svg-parabola .pa-perf, #svg-parabola .pa-high { opacity: 0; }
#svg-parabola.play .pa-low { animation: pa-low 3s ease-in 1; }
#svg-parabola.play .pa-perf { animation: pa-perf 3s ease-in 1; }
#svg-parabola.play .pa-high { animation: pa-high 3s ease-in 1; }
@keyframes pa-low {
  0%, 4% { transform: translate(0, 0); opacity: 0; }
  6% { opacity: 1; }
  42% { transform: translate(60px, -10px); opacity: 1; }
  52% { transform: translate(130px, 32px); opacity: 1; }
  56%, 100% { transform: translate(130px, 32px); opacity: 0; }
}
@keyframes pa-perf {
  0%, 24% { transform: translate(0, 0); opacity: 0; }
  27% { transform: translate(6px, -8px); opacity: 1; }
  60% { transform: translate(112px, -62px); opacity: 1; }
  82% { transform: translate(224px, -30px); opacity: 1; }
  86%, 100% { transform: translate(224px, -30px); opacity: 0; }
}
@keyframes pa-high {
  0%, 46% { transform: translate(0, 0); opacity: 0; }
  49% { transform: translate(8px, -14px); opacity: 1; }
  75% { transform: translate(150px, -118px); opacity: 1; }
  93% { transform: translate(254px, 32px); opacity: 1; }
  96%, 100% { transform: translate(254px, 32px); opacity: 0; }
}
#svg-parabola.play .pa-dirt1 { animation: pa-dirt 3s ease-in 1; }
#svg-parabola.play .pa-ding { animation: pa-ding 3s ease-in 1; }
#svg-parabola.play .pa-dirt2 { animation: pa-dirt2 3s ease-in 1; }
@keyframes pa-dirt {
  0%, 52% { opacity: 0; }
  55%, 70% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes pa-ding {
  0%, 82% { opacity: 0; }
  85%, 96% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes pa-dirt2 {
  0%, 93% { opacity: 0; }
  95%, 100% { opacity: 1; }
}
#svg-parabola.play .pa-t1 { animation: pa-t1 3s ease-in 1 forwards; }
#svg-parabola.play .pa-t2 { animation: pa-t2 3s ease-in 1 forwards; }
#svg-parabola.play .pa-t3 { animation: pa-t3 3s ease-in 1 forwards; }
#svg-parabola.play .pa-result { animation: pa-result 3s ease-in 1 forwards; }
@keyframes pa-t1 { 0%, 56% { opacity: 0; } 62%, 100% { opacity: 1; } }
@keyframes pa-t2 { 0%, 86% { opacity: 0; } 92%, 100% { opacity: 1; } }
@keyframes pa-t3 { 0%, 96% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes pa-result { 0%, 97% { opacity: 0; } 99%, 100% { opacity: 1; } }

/* ⑤ 惯性：急刹车往前扑 */
#svg-inertia.play .in-tank { animation: in-tank 3s ease-in-out 1 forwards; }
@keyframes in-tank {
  0% { transform: translateX(0); }
  40% { transform: translateX(120px); }
  100% { transform: translateX(120px); }
}
#svg-inertia.play .in-crew { animation: in-crew 3s ease-in-out 1 forwards; }
@keyframes in-crew {
  0% { transform: translateX(0) rotate(0); }
  40% { transform: translateX(120px) rotate(0); }
  52% { transform: translateX(178px) rotate(-10deg); }
  62% { transform: translateX(166px) rotate(-5deg); }
  100% { transform: translateX(120px) rotate(0); }
}
#svg-inertia.play .in-skid { animation: in-skid 3s ease-in 1 forwards; }
@keyframes in-skid { 0%, 38% { opacity: 0; } 44%, 100% { opacity: 1; } }
#svg-inertia.play .in-text { animation: in-text 3s ease-in 1 forwards; }
@keyframes in-text { 0%, 52% { opacity: 0; } 58%, 100% { opacity: 1; } }
#svg-inertia.play .in-result { animation: in-result 3s ease-in 1 forwards; }
@keyframes in-result { 0%, 86% { opacity: 0; } 92%, 100% { opacity: 1; } }

/* ⑥ 抓地：爬坡对比 */
#svg-grip.play .gr-car { animation: gr-car 3s ease-in-out 1 forwards; }
@keyframes gr-car {
  0% { transform: translateX(0); }
  30% { transform: translateX(80px); }
  45% { transform: translateX(108px) translateY(-16px); }
  62% { transform: translateX(70px) translateY(0); }
  80% { transform: translateX(86px) translateY(0); }
  100% { transform: translateX(78px) translateY(0); }
}
#svg-grip.play .gr-tank { animation: gr-tank 3s ease-in-out 1 forwards; }
@keyframes gr-tank {
  0% { transform: translateX(0) translateY(0); }
  35% { transform: translateX(90px) translateY(0); }
  60% { transform: translateX(140px) translateY(-28px); }
  80% { transform: translateX(186px) translateY(-44px); }
  100% { transform: translateX(188px) translateY(-44px); }
}
#svg-grip.play .gr-t1 { animation: gr-t1 3s ease-in 1 forwards; }
@keyframes gr-t1 { 0%, 60% { opacity: 0; } 66%, 100% { opacity: 1; } }
#svg-grip.play .gr-t2 { animation: gr-t2 3s ease-in 1 forwards; }
@keyframes gr-t2 { 0%, 80% { opacity: 0; } 86%, 100% { opacity: 1; } }


/* ===== 小游戏 ===== */

/* ===== 坦克博物馆 ===== */
.museum-intro { font-size: 15px; opacity: .8; margin-bottom: 4px; }
.museum-card {
  background: #FFFDF3;
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.tank-profile svg { width: 100%; height: auto; display: block; }
.museum-card h3 { font-size: 20px; margin: 10px 0 6px; color: var(--green-dark); }
.m-country { font-size: 13px; color: #8A7A5E; font-weight: 700; }
.m-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 14px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 6px;
}
.m-badge b { color: var(--red); font-size: 16px; }
.m-nick { font-size: 16px; color: #B3541E; margin-bottom: 4px; }
.m-story { font-size: 15px; line-height: 1.6; margin-bottom: 10px; }
.museum-card .btn-listen { align-self: flex-start; }

/* 口径对比尺 */
/* 指标切换按钮 */
.cmp-metrics { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.cmp-btn {
  font-family: var(--font);
  font-weight: 900;
  font-size: 15px;
  background: #FFF;
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 8px 14px;
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
}
.cmp-btn.active { background: var(--yellow); }
.cmp-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }

.ruler-box {
  background: #FFFDF3;
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 4px 4px 0 var(--ink);
}
.ruler-box h3 { font-size: 19px; color: var(--green-dark); }
.ruler-tip { font-size: 13px; opacity: .8; margin: 4px 0 12px; }
.ruler-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 2px dashed #E0D5BC;
}
.ruler-row:last-child { border-bottom: none; }
.ruler-name { width: 52px; font-size: 14px; font-weight: 900; flex-shrink: 0; }
.ruler-sil { width: 64px; height: 25px; flex-shrink: 0; }
.ruler-bar {
  flex: 1;
  height: 14px;
  background: #F0EBDE;
  border: 2px solid var(--ink);
  border-radius: 8px;
  overflow: hidden;
}
.ruler-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #FF9F43, #FF6B6B);
  border-radius: 6px;
}
.ruler-cal { width: 48px; font-size: 13px; font-weight: 900; text-align: right; flex-shrink: 0; }
.ruler-soon {
  font-size: 11px;
  color: #FFF;
  background: #B9AE97;
  border-radius: 999px;
  padding: 2px 8px;
  flex-shrink: 0;
}
.ruler-row.inactive { opacity: .55; }

/* ===== 百年进化时间轴 ===== */
.tl-box {
  background: #FFFDF3;
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 4px 4px 0 var(--ink);
}
.tl-box h3 { font-size: 19px; color: var(--green-dark); }
.tl-tip { font-size: 13px; opacity: .8; margin: 4px 0 10px; }
.tl-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 14px 4px 10px;
  border-top: 4px solid var(--ink);
  position: relative;
  scrollbar-width: thin;
}
.tl-node {
  flex: 0 0 104px;
  background: #FFF;
  border: 3px solid var(--ink);
  border-radius: 16px;
  padding: 10px 8px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .15s ease, background .15s ease;
}
.tl-node:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.tl-node.active {
  background: var(--yellow);
  transform: translateY(-6px);
  box-shadow: 3px 9px 0 var(--ink);
}
.tl-sil { width: 72px; height: 28px; }
.tl-event { background: #EAF3F7; }
.tl-icon { font-size: 30px; line-height: 1; }
.tl-year { font-size: 15px; font-weight: 900; color: #B3541E; }
.tl-name { font-size: 14px; font-weight: 900; }
.tl-cal { font-size: 12px; color: #8A7A5E; font-weight: 700; }
#tl-play { margin-top: 8px; }

/* ===== 坦克兵的一天 ===== */
.crewday-h2 { font-size: 24px; color: var(--green-dark); letter-spacing: 1px; }
.crewday-intro { font-size: 15px; opacity: .8; margin-bottom: 4px; }
.crewday-card {
  background: #FFFDF3;
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 4px 4px 0 var(--ink);
  display: flex;
  flex-direction: column;
}
.crewday-svg svg { width: 100%; height: auto; aspect-ratio: 340 / 150; display: block; border-radius: 14px; }
.crewday-card h3 { font-size: 19px; margin: 10px 0 6px; color: var(--green-dark); }
.crewday-text { font-size: 15px; line-height: 1.6; margin-bottom: 10px; }
.crewday-card .btn-listen { align-self: flex-start; }

/* ===== 坦克怎么造（工厂流水线） ===== */
.factory-intro { font-size: 15px; opacity: .8; margin-bottom: 4px; }
.factory-card {
  background: #FFFDF3;
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 4px 4px 0 var(--ink);
  display: flex;
  flex-direction: column;
}
.factory-svg svg { width: 100%; height: auto; aspect-ratio: 340 / 150; display: block; border-radius: 14px; }
.factory-card h3 { font-size: 19px; margin: 10px 0 6px; color: var(--green-dark); }
.factory-text { font-size: 15px; line-height: 1.6; margin-bottom: 10px; }
.factory-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.factory-end { text-align: center; font-size: 16px; font-weight: 900; margin-top: 4px; }

/* ① 画图纸：轮廓描边 */
.fp-blueprint { stroke-dasharray: 420; stroke-dashoffset: 420; }
.factory-svg svg.play .fp-blueprint { animation: fp-draw 2.5s ease-out 1 forwards; }
@keyframes fp-draw {
  0% { stroke-dashoffset: 420; }
  100% { stroke-dashoffset: 0; }
}
/* ② 切割：火焰移动 + 火花闪烁 + 钢板分离 */
.factory-svg svg.play .fp-torch { animation: fp-cut 1.6s ease-in-out 1 forwards; }
@keyframes fp-cut {
  0% { transform: translateX(0); }
  100% { transform: translateX(132px); }
}
.factory-svg svg.play .fp-topplate { animation: fp-splitup .5s ease-out 1.5s 1 forwards; }
@keyframes fp-splitup {
  0% { transform: translateY(0); }
  100% { transform: translateY(-15px); }
}
.factory-svg svg.play .fp-bottomplate { animation: fp-splitdown .5s ease-out 1.5s 1 forwards; }
@keyframes fp-splitdown {
  0% { transform: translateY(0); }
  100% { transform: translateY(15px); }
}
.factory-svg svg.play .fp-cutguide { animation: fp-hideguide .3s ease-in 1.5s 1 forwards; }
@keyframes fp-hideguide {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
.factory-svg svg.play .fp-sparks { animation: fp-spark .3s steps(2) .2s 6; }
@keyframes fp-spark {
  0% { opacity: .25; }
  100% { opacity: 1; }
}
/* ③ 焊接：钢板合拢 + 焊点闪光 + 焊缝显现 */
.factory-svg svg.play .fp-weldright { animation: fp-join .6s ease-out .3s 1 forwards; }
@keyframes fp-join {
  0% { transform: translateX(0); }
  100% { transform: translateX(-28px); }
}
.fp-weld-flash { opacity: 0; }
.factory-svg svg.play .fp-weld-flash { animation: fp-weldflash .45s ease-in-out .9s 5; }
@keyframes fp-weldflash {
  0% { opacity: 0; transform: scale(.4); }
  50% { opacity: 1; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(.6); }
}
.factory-svg svg.play .fp-seam { animation: fp-seamshow .5s ease-in 1.2s 1 forwards; }
@keyframes fp-seamshow {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
/* ④ 浇铸：钢水流下 + 模具发亮 */
.fp-stream { transform: scaleY(0); transform-box: fill-box; transform-origin: top; }
.factory-svg svg.play .fp-stream { animation: fp-pour 1.3s ease-in 1 forwards; }
@keyframes fp-pour {
  0% { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}
.factory-svg svg.play .fp-mold-glow { animation: fp-glow 1.6s ease-in 1.4s 1 forwards; }
@keyframes fp-glow {
  0% { opacity: .35; }
  100% { opacity: .9; }
}
/* ⑤ 履带：从上落下安装 */
.factory-svg svg.play .fp-trackdrop { animation: fp-drop 1.1s ease-in 1 forwards; }
@keyframes fp-drop {
  0% { transform: translateY(0); }
  60% { transform: translateY(46px); }
  75% { transform: translateY(40px); }
  100% { transform: translateY(46px); }
}
/* ⑥ 流水线：传送带滚动 + 坦克前进 */
.factory-svg svg.play .fp-belt { animation: fp-beltmove .5s linear infinite; }
@keyframes fp-beltmove {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 24; }
}
.factory-svg svg.play .fp-linetank { animation: fp-linestep 2.8s ease-in-out infinite alternate; }
@keyframes fp-linestep {
  0% { transform: translateX(0); }
  100% { transform: translateX(150px); }
}
/* ⑦ 喷漆：坦克变绿 + 漆雾 */
.factory-svg svg.play .fp-painttank .gt-body,
.factory-svg svg.play .fp-painttank .gt-turret,
.factory-svg svg.play .fp-painttank .gt-barrel { fill: #6E7F45; }
.fp-painttank .gt-body, .fp-painttank .gt-turret, .fp-painttank .gt-barrel { transition: fill 1.4s ease; }
.factory-svg svg.play .fp-spray { animation: fp-spray .5s ease-in-out infinite alternate; }
@keyframes fp-spray {
  0% { opacity: .4; transform: scale(.8); }
  100% { opacity: 1; transform: scale(1.3); }
}
/* ⑧ 试炮：炮弹飞出 + 后坐 + 炮口星芒 */
.fp-muzzle { opacity: 0; transform-box: fill-box; transform-origin: center; }
.fp-shell { opacity: 0; }
.factory-svg svg.play .fp-shell { animation: fp-shellfly .9s ease-out .05s 1 forwards; }
@keyframes fp-shellfly {
  0% { opacity: 0; transform: translateX(0); }
  12% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateX(100px); }
}
.factory-svg svg.play .fp-recoiltank { animation: fp-recoil 1.3s ease-out .1s 1 forwards; }
@keyframes fp-recoil {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-11px); }
  40% { transform: translateX(0); }
}
.factory-svg svg.play .fp-muzzle { animation: fp-muzzleflash .9s ease-out .1s 1 forwards; }
@keyframes fp-muzzleflash {
  0% { opacity: 0; transform: scale(.4); }
  25% { opacity: 1; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(1.8); }
}

/* ===== 勋章墙 ===== */
.medal-wall {
  background: #FFFDF3;
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 4px 4px 0 var(--ink);
  margin-top: 4px;
}
.medal-wall h3 { font-size: 19px; color: var(--green-dark); }
#medal-slots { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.medal-slot {
  flex: 1 1 130px;
  max-width: 170px;
  border: 3px dashed #B8AC8F;
  border-radius: 16px;
  padding: 10px 6px;
  text-align: center;
  background: #F6F1E2;
  filter: grayscale(1);
  opacity: .75;
}
.medal-slot.got {
  border: 3px solid var(--ink);
  background: #FFF6D6;
  filter: none;
  opacity: 1;
  box-shadow: 3px 3px 0 var(--ink);
}
.medal-icon { font-size: 32px; line-height: 1.1; }
.medal-name { font-size: 14px; font-weight: 900; margin-top: 2px; }
.medal-hint { font-size: 11.5px; color: #8A7A5E; margin-top: 2px; }
#medal-hero {
  margin: 12px 0 0;
  text-align: center;
  font-size: 18px;
  font-weight: 900;
  color: #B3541E;
  animation: hero-pop .6s ease-out;
}
@keyframes hero-pop {
  0% { transform: scale(.5); opacity: 0; }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

/* ===== 知识问答 ===== */
.q-sub { font-size: 14px; opacity: .8; }
.q-dots { display: flex; gap: 8px; justify-content: center; margin: 6px 0; }
.q-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  background: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  box-shadow: 2px 2px 0 var(--ink);
}
.q-dot.done { background: var(--green); color: #FFF; }
.q-dot.now { background: var(--yellow); transform: scale(1.15); }
.q-card {
  background: #FFFDF3;
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: 18px 14px;
  box-shadow: 4px 4px 0 var(--ink);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.q-emoji { font-size: 52px; text-align: center; line-height: 1; }
.q-text { font-size: 20px; font-weight: 900; text-align: center; line-height: 1.5; }
.q-opts { display: flex; flex-direction: column; gap: 12px; }
.q-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 700;
  text-align: left;
  background: #FFF;
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
}
.q-opt:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.q-letter {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--yellow);
  border: 2.5px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}
.q-opt.right { background: #D8F0D0; border-color: #3E7A2E; }
.q-opt.right .q-letter { background: #7FC46B; }
.q-opt.wrong { background: #F6D9D3; opacity: .6; text-decoration: line-through; }
.q-opt.wrong .q-letter { background: #E8A79B; }
.q-opt:disabled { cursor: not-allowed; }
.q-result-card {
  background: #FFF6D6;
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: 18px 14px;
  box-shadow: 4px 4px 0 var(--ink);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.q-stars { font-size: 42px; letter-spacing: 6px; }
.q-result-text { font-size: 19px; font-weight: 900; }
.q-medal { font-size: 15px; }

/* ===== 双人对战 ===== */
.duel-intro { font-size: 15px; opacity: .8; margin-bottom: 4px; }
.duel-modes { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.duel-mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: #FFFDF3;
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: 18px 14px;
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  font-family: var(--font);
}
.duel-mode-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.dm-icon { font-size: 44px; line-height: 1; }
.dm-name { font-size: 21px; font-weight: 900; color: var(--green-dark); }
.dm-sub { font-size: 14px; opacity: .75; }
.duel-mode-tag { font-size: 14px; color: #B3541E; }
.duel-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.duel-side { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 900; }
.duel-red { color: #B3541E; }
.duel-blue { color: #2E6BA8; }
.duel-hearts .on { color: #E24B2F; }
.duel-hearts span { color: #CCC; font-size: 18px; }
.duel-timer {
  font-size: 26px;
  font-weight: 900;
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 4px 18px;
  box-shadow: 2px 2px 0 var(--ink);
}
.duel-field { position: relative; margin: 6px 0; }
#duel-canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 360 / 330;
  display: block;
  background: #D8E8C0;
  border: 4px solid var(--ink);
  border-radius: 18px;
  touch-action: none;
}
#duel-result { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.72); border-radius: 16px; }
.duel-result-card {
  background: #FFF6D6;
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: 18px 22px;
  box-shadow: 4px 4px 0 var(--ink);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.duel-result-text { font-size: 22px; font-weight: 900; }
.duel-result-score { font-size: 16px; }
.duel-result-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.duel-ctrl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px;
  gap: 8px;
}
.duel-ctrl-blue { flex-direction: row-reverse; }
.ctrl-tag { font-weight: 900; font-size: 16px; color: #555; }
.joy {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 4px solid var(--ink);
  background: rgba(255,255,255,.55);
  position: relative;
  touch-action: none;
}
.joy-red { border-color: #B3541E; background: rgba(233,150,110,.18); }
.joy-blue { border-color: #2E6BA8; background: rgba(110,160,220,.18); }
.joy-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--yellow);
  border: 3px solid var(--ink);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.joy-arrow { position: absolute; font-size: 11px; color: #888; pointer-events: none; }
.ja-up { left: 50%; top: 5px; transform: translateX(-50%); }
.ja-down { left: 50%; bottom: 5px; transform: translateX(-50%); }
.ja-left { left: 7px; top: 50%; transform: translateY(-50%); }
.ja-right { right: 7px; top: 50%; transform: translateY(-50%); }
.fire-btn {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 4px solid var(--ink);
  color: #FFF;
  font-size: 28px;
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  touch-action: none;
}
.fire-red { background: #E24B2F; }
.fire-blue { background: #2E6BA8; }
.fire-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.duel-help { display: block; margin: 4px auto 0; }
.duel-music-btn { display: block; margin: 6px auto 0; }
.duel-tut {
  position: fixed;
  inset: 0;
  background: rgba(30,30,30,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
}
.duel-tut-card {
  background: #FFFDF3;
  border: 4px solid var(--ink);
  border-radius: 24px;
  padding: 22px 26px;
  box-shadow: 6px 6px 0 var(--ink);
  max-width: 320px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dt-title { font-size: 24px; font-weight: 900; color: var(--green-dark); }
.dt-line { font-size: 17px; line-height: 1.6; text-align: left; }
.dt-pc { font-size: 13px; color: #666; text-align: left; line-height: 1.5; border-top: 2px dashed #CCC; padding-top: 8px; }
.dt-go { font-size: 18px; font-weight: 900; color: #B3541E; animation: hero-pop .8s ease-out infinite alternate; }

/* ===== 引力弹弓 ===== */
.sl-intro { font-size: 15px; opacity: .8; margin-bottom: 4px; }
.sl-field { position: relative; }
#sl-canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 360 / 430;
  display: block;
  border: 4px solid var(--ink);
  border-radius: 18px;
  touch-action: none;
}
#sl-result { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.72); border-radius: 16px; }
.sl-card {
  background: #FFF6D6;
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: 18px 22px;
  box-shadow: 4px 4px 0 var(--ink);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.sl-title { font-size: 22px; font-weight: 900; }
.sl-dist { font-size: 16px; }
.sl-best { font-size: 13px; opacity: .75; }
.sl-tip { font-size: 14px; opacity: .8; margin: 6px 0 4px; }
.sl-main-btn { width: 100%; }









.game-hint { font-size: 15px; opacity: .8; }

/* ===== 组装坦克 ===== */
.asm-hint { font-size: 15px; opacity: .8; }
.asm-stage {
  font-size: 17px;
  font-weight: 900;
  color: #FFF;
  background: var(--green-dark);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 8px 18px;
  align-self: center;
  text-align: center;
}
#asm-wrap { position: relative; }
#asm-svg {
  width: 100%;
  height: auto;
  aspect-ratio: 360 / 430;
  display: block;
  background: #EAF3E2;
  border: 4px solid var(--ink);
  border-radius: 20px;
  touch-action: none;
}
.asm-part { cursor: grab; }
.asm-part.dragging { cursor: grabbing; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
.asm-recoil { animation: asm-recoil .6s ease-out .9s 1; }
@keyframes asm-recoil {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-10px); }
  40% { transform: translateX(0); }
}
.asm-drive { animation: asm-drive 1s ease-out .15s 1 both; }
@keyframes asm-drive {
  0% { transform: translateX(0); }
  100% { transform: translateX(64px); }
}
.asm-flash { opacity: 0; transform-box: fill-box; transform-origin: center; }
.asm-flash.go { animation: asm-flash .7s ease-out .9s 1; }
@keyframes asm-flash {
  0% { opacity: 0; transform: scale(.5); }
  20% { opacity: 1; transform: scale(1.6); }
  60%, 100% { opacity: 0; transform: scale(2); }
}
#asm-result {
  position: absolute;
  inset: 0;
  background: rgba(255, 248, 231, .93);
  border: 4px solid var(--ink);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
#asm-stars { font-size: 44px; letter-spacing: 8px; }
#asm-result-text { font-size: 19px; padding: 0 14px; text-align: center; }
.asm-btns { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.asm-btns .btn-listen.on { background: var(--green-dark); }

/* 自由车间：锁定零件（需先装履带） */
.asm-part.locked { opacity: .45; filter: grayscale(.8); cursor: not-allowed; }

/* 出发测试 */
#test-svg { width: 100%; height: auto; aspect-ratio: 360 / 430; display: block; }
#tt-tank { transition: transform .7s ease-in-out; }
.asm-wiggle { animation: asm-wiggle .5s ease-in-out 3; }
@keyframes asm-wiggle {
  0%, 100% { transform: translate(30,173) scale(.45); }
  25% { transform: translate(26,173) scale(.45) rotate(-3); }
  75% { transform: translate(34,173) scale(.45) rotate(3); }
}
#tt-confetti .cf { animation: cf-fall 1.4s ease-out infinite; transform-box: fill-box; }
@keyframes cf-fall {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(150px) rotate(400deg); opacity: 0; }
}
#asm-problems { font-size: 16px; line-height: 1.8; text-align: left; padding: 0 10px; }
#asm-medal { font-size: 16px; font-weight: 900; color: #B3541E; }


#game-hud {
  display: flex;
  justify-content: space-between;
  font-size: 17px;
}
#game-hud b { color: var(--red); font-size: 20px; }
#game-box { position: relative; }
#game-canvas {
  width: 100%;
  height: auto;
  display: block;
  background: #CDEBF7;
  border: 4px solid var(--ink);
  border-radius: 20px;
  touch-action: none;
  cursor: crosshair;
}
#btn-scope-fire {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font);
  font-weight: 900;
  font-size: 22px;
  color: #FFF;
  background: var(--red);
  border: 4px solid var(--ink);
  border-radius: 999px;
  padding: 12px 36px;
  box-shadow: 0 5px 0 var(--ink);
  cursor: pointer;
  z-index: 5;
}
#btn-scope-fire:active { transform: translate(-50%, 4px); box-shadow: 0 1px 0 var(--ink); }
#btn-lead {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: var(--font);
  font-weight: 900;
  font-size: 14px;
  color: var(--ink);
  background: rgba(255,246,214,.92);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 8px 12px;
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
  z-index: 5;
}
#game-angles {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}
.angle-btn {
  font-family: var(--font);
  font-weight: 900;
  font-size: 15px;
  color: var(--ink);
  background: #FFF6D6;
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 7px 14px;
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
}
.angle-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }

/* ===== 底部动线 ===== */
.nav-btns { display: flex; gap: 12px; justify-content: center; margin-top: 4px; flex-wrap: wrap; }
.nav-btns .btn-big { margin-top: 0; font-size: 18px; }

#footer {
  padding: 14px 0 26px;
  font-size: 14px;
  opacity: .65;
  text-align: center;
}

/* 桌面端微调 */
@media (min-width: 700px) {
  #main { padding: 24px 20px 60px; }
}