/* ============ 基础 ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: "Baloo 2", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
  color: #2d2a22;
  -webkit-font-smoothing: antialiased;
}

body {
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, .75) 0 8%, transparent 8.5%),
    radial-gradient(circle at 22% 6%, rgba(255, 255, 255, .6) 0 11%, transparent 11.5%),
    radial-gradient(circle at 82% 12%, rgba(255, 255, 255, .55) 0 9%, transparent 9.5%),
    linear-gradient(180deg, #8fd4f2 0%, #bfe8f9 42%, #e4f6d8 100%);
  overflow-x: hidden;
}

#app { min-height: 100vh; overflow-x: hidden; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ============ 菜单 ============ */
.menu-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px 40px;
  position: relative;
  background:
    radial-gradient(ellipse 60% 30% at 50% 108%, #7bc043 0 60%, transparent 61%);
}

.menu-inner {
  width: 100%;
  max-width: 900px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.logo { position: relative; display: inline-block; margin-bottom: 8px; }

.logo-main {
  font-size: 60px;
  font-weight: 900;
  letter-spacing: 4px;
  color: #f6f1d9;
  text-shadow:
    0 2px 0 #3f6b1d, 0 4px 0 #345916, 0 6px 0 #2a4811,
    0 10px 18px rgba(0, 0, 0, .35);
  -webkit-text-stroke: 3px #2f5216;
  paint-order: stroke fill;
}

.logo-badge {
  position: absolute;
  right: -34px;
  bottom: -14px;
  background: linear-gradient(#ffd84d, #eea51d);
  border: 3px solid #8a5c12;
  color: #6b3b06;
  font-weight: 900;
  font-size: 18px;
  padding: 4px 14px;
  border-radius: 10px;
  transform: rotate(-8deg);
  box-shadow: 0 4px 0 #8a5c12, 0 8px 14px rgba(0, 0, 0, .2);
}

.menu-sub {
  color: #2f5b1a;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  margin: 16px 0 26px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

.grade-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 26px;
}

.grade-card {
  position: relative;
  background: linear-gradient(180deg, #fdf6e2, #e8d6ab);
  border: 3px solid #9a7a44;
  border-radius: 14px;
  padding: 12px 12px 12px 54px;
  text-align: left;
  box-shadow: 0 4px 0 #9a7a44, 0 8px 16px rgba(0, 0, 0, .12);
  transition: transform .14s, box-shadow .14s, background .14s;
}

.grade-card:hover { transform: translateY(-3px); }

.grade-card.active {
  background: linear-gradient(180deg, #e9ffcc, #b9e884);
  border-color: #4d8b22;
  box-shadow: 0 4px 0 #4d8b22, 0 0 0 4px rgba(151, 220, 96, .45), 0 10px 20px rgba(0, 0, 0, .18);
}

.g-num {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #7a5c2c;
  color: #ffe9b0;
  font-weight: 900;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grade-card.active .g-num { background: #3f7c1b; color: #eaffd0; }

.g-name { display: block; font-size: 17px; font-weight: 900; color: #40340f; }
.g-desc { display: block; font-size: 12px; color: #7a6a45; margin-top: 2px; }
.g-sample { display: block; font-size: 12px; color: #2f6b1a; margin-top: 6px; font-weight: 700; }

.start-btn {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 6px;
  color: #ffffff;
  padding: 16px 60px;
  border-radius: 16px;
  background: linear-gradient(180deg, #8bd94a, #4f9c22);
  border: 4px solid #2f6b12;
  box-shadow: 0 7px 0 #2f6b12, 0 14px 24px rgba(0, 0, 0, .25);
  text-shadow: 0 2px 0 #2f6b12;
  transition: transform .1s, box-shadow .1s;
}

.start-btn:hover { transform: translateY(2px); box-shadow: 0 5px 0 #2f6b12, 0 10px 18px rgba(0, 0, 0, .22); }
.start-btn:active { transform: translateY(6px); box-shadow: 0 1px 0 #2f6b12; }

.menu-rules {
  margin: 14px auto 0;
  max-width: 960px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px 12px;
  text-align: left;
}

.rule {
  font-size: 12px;
  color: #3a4a2a;
  background: rgba(255, 255, 255, .55);
  border-radius: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}

.rule b {
  display: inline-flex;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #62a532;
  color: #fff;
  font-size: 11px;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
}

/* ============ 舞台 ============ */
.stage-outer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 关键：不让外层高度反向拉伸舞台，避免缩放反馈循环 */
  overflow: hidden;
}

.stage {
  width: 1200px;
  flex: none;
  padding: 8px 10px 6px;
  transform-origin: top center;
  position: relative;
}

/* ---------- HUD ---------- */
.hud {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, #6b4a2c, #4a3018);
  border: 3px solid #33200e;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .18), 0 6px 14px rgba(0, 0, 0, .28);
}

.hud-brand { color: #ffe9b8; line-height: 1.15; flex: none; }
.brand-main { font-size: 17px; font-weight: 900; letter-spacing: 2px; text-shadow: 0 2px 0 #2b1a0b; }
.brand-sub { font-size: 11px; color: #cdb58c; letter-spacing: 1px; margin-top: 2px; }
.hud-spacer { flex: 1; }

.round-btn.off { opacity: .48; filter: grayscale(1); }

/* 菜单拼写方式选择 */
.mode-pick {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: -8px 0 24px;
  flex-wrap: wrap;
}
.mp-label { font-size: 14px; font-weight: 900; color: #3a5a1e; }
.mode-pick button {
  background: rgba(255, 255, 255, .72);
  border: 3px solid #9a7a44;
  border-radius: 12px;
  padding: 6px 14px;
  text-align: left;
  box-shadow: 0 3px 0 #9a7a44;
  transition: transform .12s, background .12s;
}
.mode-pick button b { display: block; font-size: 15px; color: #40340f; }
.mode-pick button small { display: block; font-size: 11px; color: #7a6a45; margin-top: 1px; }
.mode-pick button.on {
  background: linear-gradient(180deg, #e9ffcc, #b9e884);
  border-color: #4d8b22;
  box-shadow: 0 3px 0 #4d8b22, 0 0 0 3px rgba(151, 220, 96, .4);
}
.mode-pick button.on b { color: #2f5b12; }

.sun-box {
  display: flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(180deg, #fff8e0, #f0d792);
  border: 3px solid #8a6a2f;
  border-radius: 12px;
  padding: 2px 10px 2px 2px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12);
  min-width: 104px;
  justify-content: center;
}

.sun-ico { width: 40px; height: 40px; }
.sun-num { font-size: 24px; font-weight: 900; color: #4a3a12; min-width: 40px; text-align: right; }

.seed-bar { display: flex; gap: 8px; flex: 1; }

.seed-card {
  position: relative;
  width: 70px;
  height: 86px;
  border-radius: 8px;
  background: linear-gradient(180deg, #f6e7c2, #dcc28d);
  border: 2px solid #7c5c2f;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45), 0 3px 0 #7c5c2f;
  padding: 2px;
  transition: transform .12s, box-shadow .12s, filter .12s;
  overflow: hidden;
}

.seed-card:hover { transform: translateY(-3px); }

.seed-card.active {
  transform: translateY(-5px);
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 3px #9ae060, 0 5px 0 #4f7c22;
  border-color: #4f7c22;
}

.seed-card.poor { filter: grayscale(.75) brightness(.86); }
.seed-card.poor .seed-cost { color: #b03030; }

.seed-art { height: 44px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.seed-art .plant-sprite { width: 56px; height: 62px; transform: scale(.62); transform-origin: center bottom; flex: none; }
.seed-art .plant-sprite .hp-wrap,
.seed-art .plant-sprite .spell-dots { display: none; }

.seed-name { font-size: 11px; font-weight: 800; color: #40300f; text-align: center; margin-top: 2px; }

.seed-cost {
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
  color: #2c4a12;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.mini-sun {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff9c4, #ffd63d 70%, #ee9d16);
  display: inline-block;
  box-shadow: 0 0 3px rgba(255, 200, 40, .9);
}

.seed-hot {
  position: absolute;
  top: 1px;
  left: 3px;
  font-size: 10px;
  color: #8a6a2f;
  font-weight: 800;
}

.shovel .shovel-art { height: 46px; display: flex; align-items: center; justify-content: center; }
.shovel .shovel-art svg { width: 40px; height: 40px; }

.hud-right { display: flex; align-items: center; gap: 8px; }
.wave-info { color: #f6e7c0; font-size: 12px; font-weight: 800; text-align: right; }
.wave-line { display: flex; gap: 8px; justify-content: flex-end; }
.wave-kill { color: #ffd97a; }
.pips { display: flex; gap: 4px; justify-content: flex-end; margin-top: 4px; }
.pips i {
  width: 12px;
  height: 8px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .18);
  display: block;
}
.pips i.on { background: #ffcf5a; box-shadow: 0 0 6px rgba(255, 207, 90, .8); }
.pips i.cur { background: #ff8a4c; animation: pipPulse 1s infinite; }

.round-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(180deg, #f5e6c6, #d8bd88);
  border: 2px solid #6f5129;
  color: #4a3410;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 3px 0 #6f5129;
  display: flex;
  align-items: center;
  justify-content: center;
}

.round-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #6f5129; }

/* ---------- 拼音云 ---------- */
.pinyin-bar {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  min-height: 74px;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #dff0fb 60%, #c6e4f6);
  border: 3px solid #6fa0c4;
  box-shadow: inset 0 2px 0 #fff, 0 5px 12px rgba(40, 90, 130, .18);
}

.pb-left { width: 126px; flex: none; text-align: center; }
.pb-title {
  font-size: 16px;
  font-weight: 900;
  color: #1e5a86;
  letter-spacing: 2px;
  text-shadow: 0 1px 0 #fff;
}
.mode-switch {
  display: flex;
  gap: 2px;
  margin: 4px 0 2px;
  background: #b6d9ee;
  border-radius: 8px;
  padding: 2px;
  border: 1px solid #7fb0d0;
}
.mode-switch button {
  flex: 1;
  font-size: 11px;
  font-weight: 900;
  color: #31627f;
  padding: 3px 0;
  border-radius: 6px;
  transition: background .12s;
}
.mode-switch button.on {
  background: linear-gradient(180deg, #ffdf68, #f2ab1e);
  color: #6b3b00;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .18);
}
.pb-sub { font-size: 10px; color: #4a7c9e; font-weight: 700; }

.tile-row { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0;
  overflow-x: auto; overflow-y: hidden; }
.tile-row::-webkit-scrollbar { height: 6px; }
.tile-row::-webkit-scrollbar-thumb { background: rgba(80, 130, 170, .45); border-radius: 6px; }
.tile-row::-webkit-scrollbar-track { background: transparent; }
.tile-inner { display: flex; gap: 10px; flex-wrap: nowrap; }

.tile {
  position: relative;
  min-width: 78px;
  height: 48px;
  padding: 0 14px;
  border-radius: 10px;
  background: linear-gradient(180deg, #fffdf3, #ffeec6);
  border: 2px solid #dfb558;
  box-shadow: 0 3px 0 #c79b3c, 0 6px 10px rgba(0, 0, 0, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: transform .12s, box-shadow .12s;
  animation: tileIn .22s ease-out;
}

.tile:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 5px 0 #c79b3c, 0 10px 16px rgba(0, 0, 0, .16); }
.tile:active { cursor: grabbing; }
.tile.held { opacity: .35; transform: scale(.94); }
/* 被拖走的答案：离开列队，右侧卡片立即顶上原位置 */
.tile.out { display: none; }

.tile-txt {
  font-size: 21px;
  font-weight: 800;
  color: #c0392b;
  letter-spacing: .5px;
  font-family: "Times New Roman", "PingFang SC", serif;
}

.tile.letter {
  min-width: 46px;
  height: 48px;
  padding: 0 6px;
  background: linear-gradient(180deg, #f2fbff, #c9e8ff);
  border-color: #5f9bc6;
  box-shadow: 0 3px 0 #4d86b3, 0 6px 10px rgba(0, 0, 0, .1);
}
.tile.letter:hover { box-shadow: 0 5px 0 #4d86b3, 0 10px 16px rgba(0, 0, 0, .16); }
.tile.letter .tile-txt { color: #1c5f96; font-size: 24px; }
.mode-letter .drag-ghost, .drag-ghost.letter {
  background: linear-gradient(180deg, #f2fbff, #c9e8ff);
  border-color: #5f9bc6;
  color: #1c5f96;
}

.tile-empty { color: #5d86a3; font-size: 13px; font-weight: 700; }

.pb-right { width: 116px; flex: none; text-align: right; }
.combo {
  display: inline-block;
  background: linear-gradient(180deg, #ffd75e, #f0951b);
  color: #6b3b00;
  font-weight: 900;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 8px;
  border: 2px solid #a86a10;
  animation: popIn .2s;
}
.pb-tip { font-size: 11px; color: #4a7c9e; margin-top: 4px; font-weight: 700; }

/* ---------- 左侧固定植物栏 + 草坪 ---------- */
.lawn-wrap {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-top: 10px;
  padding-top: 34px;
}

.plant-dock {
  width: 180px;
  flex: none;
  margin-right: 10px;
  padding: 10px 10px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, #6b4a2c, #49301a);
  border: 3px solid #33200e;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .15), 0 6px 14px rgba(0, 0, 0, .25);
}

.dock-title {
  font-size: 14px;
  font-weight: 900;
  color: #ffe6ae;
  letter-spacing: 2px;
  text-align: center;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(255, 230, 174, .3);
  margin-bottom: 9px;
}
.dock-tip {
  text-align: center;
  font-size: 10px;
  color: #f3d79a;
  background: rgba(20, 12, 5, .3);
  border: 1px solid rgba(255, 230, 174, .22);
  border-radius: 8px;
  padding: 4px 6px;
  margin-bottom: 9px;
  line-height: 1.3;
}

.dock-card {
  position: relative;
  width: 100%;
  height: 86px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  padding: 5px;
  border-radius: 10px;
  background: linear-gradient(180deg, #f8ebcd, #ddc69a);
  border: 2px solid #8a6a3f;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4), 0 3px 0 #6f5129;
  text-align: left;
  cursor: grab;
  transition: transform .12s, box-shadow .12s;
  /* 触屏/各浏览器拖动支持：禁用滚动手势、文本选择与原生图片拖拽 */
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-user-drag: none; -khtml-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}
.dock-card .dock-art,
.dock-card .dock-art * { pointer-events: none; -webkit-user-drag: none; user-select: none; }
.dock-card:hover { transform: translateX(3px); }
.dock-card:active { cursor: grabbing; }
.dock-card.poor { cursor: not-allowed; }
.dock-dragtag {
  position: absolute;
  top: 3px;
  right: 5px;
  display: flex;
  align-items: center;
  gap: 1px;
  font-size: 9px;
  font-weight: 900;
  color: #4f7c22;
  background: rgba(168, 232, 106, .55);
  border: 1px solid #5a9a2e;
  border-radius: 6px;
  padding: 1px 4px;
  pointer-events: none;
}
.dock-dragtag .iconfont { font-size: 10px; }
.dock-card.active {
  background: linear-gradient(180deg, #eaffcf, #b7e980);
  border-color: #4f7c22;
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 3px #a8e86a, 0 4px 0 #4f7c22;
}
.dock-card.poor { filter: grayscale(.7) brightness(.85); }

.dock-art {
  width: 62px;
  height: 78px;
  flex: none;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.dock-art .plant-sprite { width: 76px; height: 88px; transform: scale(.82); transform-origin: center bottom; flex: none; }
.dock-art .plant-sprite .hp-wrap,
.dock-art .plant-sprite .spell-dots { display: none; }
.dock-art.shovel-art svg { width: 52px; height: 52px; margin-bottom: 12px; }

.dock-meta { flex: 1; min-width: 0; }
.dock-meta b { display: block; font-size: 14px; color: #3d2c0d; font-weight: 900; }
.dock-meta span { display: block; font-size: 10px; color: #7a6440; margin-top: 3px; line-height: 1.25; }
.dock-cost {
  position: absolute;
  right: 6px;
  bottom: 6px;
  font-size: 12px;
  font-weight: 900;
  color: #2c4a12;
  display: flex;
  align-items: center;
  gap: 3px;
}
.dock-hot {
  position: absolute;
  top: 3px;
  left: 5px;
  font-size: 10px;
  color: #8a6a2f;
  font-weight: 900;
}
.dock-meta em { font-style: normal; color: #2f6b12; font-weight: 900; }
.dock-count { display: none; }
.dock-shovel { height: 52px; }
.dock-shovel .dock-art { height: 52px; }
.dock-shovel .dock-art svg { margin-bottom: 0; }

.dock-targets {
  margin-top: 8px;
  padding: 6px;
  border-radius: 10px;
  background: rgba(20, 12, 5, .34);
  border: 1px solid rgba(255, 230, 174, .2);
}
.dt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 900;
  color: #ffe6ae;
  margin-bottom: 6px;
}
.dt-hint {
  font-size: 10px;
  color: #2f5b12;
  background: linear-gradient(180deg, #ffe27a, #e9b73c);
  border-radius: 6px;
  padding: 2px 5px;
  font-weight: 900;
}
.dt-item {
  background: #fdf5e0;
  border-radius: 7px;
  padding: 3px 5px;
  margin-bottom: 4px;
}
.dt-word { font-size: 13px; font-weight: 900; color: #2f2a1c; }
.dt-word small { font-size: 9px; color: #8a7754; margin-left: 6px; font-weight: 700; }
.dt-pinyin { font-size: 11px; color: #b5351f; font-weight: 800; margin-top: 1px; }
.dt-units { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 3px; }
.dt-units i {
  font-style: normal;
  font-size: 10px;
  min-width: 11px;
  text-align: center;
  padding: 0 2px;
  border-radius: 3px;
  background: #e6d8b7;
  color: #9b8a68;
  font-weight: 800;
}
.dt-units i.done { background: #7ac943; color: #23400b; }
.dt-units i.now { background: #ffd254; color: #6b4300; box-shadow: 0 0 0 1px #c89320; }
.dt-empty { font-size: 11px; color: #c9b58c; text-align: center; padding: 6px 0; }

.house { position: relative; width: 82px; height: 500px; flex: none; }
.house-roof {
  position: absolute;
  top: -12px;
  left: -6px;
  width: 92px;
  height: 54px;
  background: linear-gradient(180deg, #b8563c, #8e3c27);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
}
.house-wall {
  position: absolute;
  top: 40px;
  left: 0;
  width: 82px;
  height: 460px;
  background: repeating-linear-gradient(180deg, #e8d8b6 0 22px, #dcc9a4 22px 24px);
  border-right: 4px solid #b99f74;
  box-shadow: inset -8px 0 12px rgba(0, 0, 0, .08);
}
.window {
  position: absolute;
  top: 60px;
  left: 18px;
  width: 44px;
  height: 44px;
  background: linear-gradient(160deg, #9fd7ee, #5fa8ca);
  border: 4px solid #8a6a3f;
  border-radius: 4px;
  box-shadow: inset 0 0 8px rgba(255, 255, 255, .6);
}
.window::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 46%, #8a6a3f 46% 54%, transparent 54%),
    linear-gradient(180deg, transparent 46%, #8a6a3f 46% 54%, transparent 54%);
}
.door {
  position: absolute;
  bottom: 0;
  left: 14px;
  width: 54px;
  height: 96px;
  background: linear-gradient(180deg, #8b5a33, #6d421f);
  border: 4px solid #5a3418;
  border-bottom: none;
  border-radius: 26px 26px 0 0;
}
.door::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 46px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f2c85c;
}

.lawn {
  position: relative;
  flex: none;
  width: 900px;
  height: 500px;
  border-radius: 4px;
  border: 4px solid #6b4a22;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .18), 0 8px 20px rgba(0, 0, 0, .2);
  overflow: visible;
  background: #7dbb43;
}

.lawn.shake { animation: shake .4s; }

.cells {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(9, 100px);
  grid-template-rows: repeat(5, 100px);
}

.cell {
  border-right: 1px solid rgba(255, 255, 255, .16);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  cursor: pointer;
  transition: background .1s;
}
.cell.r0, .cell.r2, .cell.r4 { background: #8ecb4f; }
.cell.r1, .cell.r3 { background: #7cba41; }
.cell:hover { background: rgba(255, 255, 255, .22); }
/* 拖动植物卡 / 点选植物时的落点高亮 */
.cell.hov {
  box-shadow: inset 0 0 0 4px rgba(255, 226, 64, .95), inset 0 0 22px rgba(255, 220, 60, .45);
}

.plants-layer, .zombies-layer, .bullets-layer, .suns-layer, .floaters {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.plant-slot {
  position: absolute;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: auto;
  border-radius: 10px;
  transition: background .12s, box-shadow .12s;
}

.plant-slot.hovered {
  background: rgba(255, 255, 160, .35);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 120, .95), 0 0 18px rgba(255, 238, 90, .9);
}
/* 铲子模式：植物可点击铲除，加红色描边提示 */
.plant-slot.shovelable {
  cursor: pointer;
  box-shadow: inset 0 0 0 3px rgba(225, 70, 70, .9), 0 0 14px rgba(225, 70, 70, .55);
}
.plant-slot.shovelable:hover { box-shadow: inset 0 0 0 4px rgba(255, 60, 60, 1), 0 0 20px rgba(255, 60, 60, .8); }

.plant-sprite {
  position: relative;
  width: 96px;
  height: 104px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.plant-sprite .art {
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
  animation: sway 3.4s ease-in-out infinite;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .22));
}

.plant-sprite.shooting .art { animation: shootKick .3s ease-out; }
.plant-sprite.hurt .art { filter: brightness(1.5) saturate(.5) drop-shadow(0 0 6px rgba(255, 60, 40, .8)); }
.plant-sprite.born { animation: plantPop .45s cubic-bezier(.2, 1.6, .4, 1); }
.plant-sprite.eaten-off { opacity: .5; }

.hp-wrap {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 2px;
  height: 7px;
  background: rgba(0, 0, 0, .45);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .35);
}
.hp-bar {
  height: 100%;
  background: linear-gradient(180deg, #8de35c, #4aa528);
  transition: width .12s linear;
}

.spell-dots {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
  background: rgba(0, 0, 0, .4);
  padding: 2px 5px;
  border-radius: 8px;
}
.spell-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  display: block;
}
.spell-dots i.on { background: #ffe066; box-shadow: 0 0 6px #ffe066; }
.spell-dots.many { max-width: 92px; flex-wrap: wrap; justify-content: center; }
.spell-dots.many i { width: 5px; height: 5px; }

/* ---------- 僵尸 ---------- */
.zombie-slot {
  position: absolute;
  width: 100px;
  height: 132px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.zombie-sprite { position: relative; width: 100px; height: 132px; }

.zart {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 132px;
  transform-origin: 50% 100%;
  animation: zwalk .86s ease-in-out infinite;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .28));
}

/* 各肢体独立摆动：transform-box 让旋转以各自的髋/肩为轴 */
.zleg, .zfoot, .zarm, .zhead { transform-box: fill-box; }

.zleg {
  transform-origin: 50% 4%;
  animation-duration: .86s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.zleg-front { animation-name: stepFront; }
.zleg-back { animation-name: stepBack; }

.zfoot {
  transform-origin: 50% 0%;
  animation: toeLift .86s ease-in-out infinite;
}
.zfoot-back { animation-delay: -.43s; }

.zarm {
  transform-origin: 90% 12%;
  animation-duration: .86s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.zarm-front { animation-name: armFront; }
.zarm-back { animation-name: armBack; }

.zhead {
  transform-origin: 50% 92%;
  animation: headBob .86s ease-in-out infinite;
}

.zombie-sprite.eating .zart { animation-name: zeat; animation-duration: .34s; }
.zombie-sprite.eating .zleg,
.zombie-sprite.eating .zarm,
.zombie-sprite.eating .zhead { animation-duration: .34s; }
.zombie-sprite.eating .zleg-front { animation-name: shuffleFront; }
.zombie-sprite.eating .zleg-back { animation-name: shuffleBack; }
.zombie-sprite.eating .zarm-front { animation-name: grab; }
.zombie-sprite.eating .zhead { animation-name: gnaw; }

.zombie-sprite.hurt .zart { filter: brightness(1.6) saturate(.4) drop-shadow(0 0 8px rgba(255, 50, 30, .9)); }
.zombie-sprite.dying .zart { animation: zdie .75s ease-in forwards; }
.zombie-sprite.dying .zleg,
.zombie-sprite.dying .zfoot,
.zombie-sprite.dying .zarm,
.zombie-sprite.dying .zhead { animation-name: none; }
.zombie-sprite.dying .zsign { opacity: 0; transition: opacity .2s; }

.zsign {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  min-width: 52px;
  padding: 2px 6px 3px;
  background: linear-gradient(180deg, #fffdf0, #f3e3bd);
  border: 2px solid #8a6a3f;
  border-radius: 6px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .18);
  text-align: center;
  z-index: 3;
}

.zword {
  font-size: 20px;
  font-weight: 900;
  color: #2a2118;
  line-height: 1.15;
  letter-spacing: 1px;
  white-space: nowrap;
}
.zword.len2 { font-size: 19px; }
.zword.len3 { font-size: 15px; letter-spacing: 0; }
.zword.len4 { font-size: 14px; letter-spacing: 0; }

.zsyl { display: flex; gap: 2px; justify-content: center; margin: 2px 0 1px; }
.zsyl i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #cbb289;
  display: block;
}
.zsyl i.on { background: #4fa51f; }
.zsyl.many { flex-wrap: wrap; max-width: 62px; margin-left: auto; margin-right: auto; }
.zsyl.many i { width: 4px; height: 4px; }

.zhp { height: 4px; background: rgba(0, 0, 0, .2); border-radius: 2px; overflow: hidden; }
.zhp-fill { height: 100%; transition: width .15s linear; }

/* ---------- 子弹 / 阳光 / 飘字 ---------- */
.pea {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d8ff8a, #74d02c 60%, #3f8c14);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px rgba(140, 230, 70, .9);
}

.sun-slot {
  position: absolute;
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  animation: sunBob 1.8s ease-in-out infinite;
}
.sun-slot svg { width: 100%; height: 100%; filter: drop-shadow(0 0 10px rgba(255, 214, 60, .95)); }

.floaters { z-index: 60; }
.floater {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 15px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .65);
  animation: floatUp 1.1s ease-out forwards;
  white-space: nowrap;
}
.floater.hit { color: #ffe066; }
.floater.bad { color: #ff6b5a; }
.floater.sun { color: #ffd93d; font-size: 18px; }

/* ---------- 横幅 / 提示 ---------- */
.banner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 80;
  animation: bannerIn .4s ease-out;
}

.banner-text {
  font-size: 46px;
  font-weight: 900;
  letter-spacing: 4px;
  color: #ff3b30;
  -webkit-text-stroke: 4px #4a0d08;
  paint-order: stroke fill;
  text-shadow: 0 6px 0 rgba(0, 0, 0, .3);
}
.banner.final .banner-text { font-size: 58px; color: #ff2d1f; animation: thump .6s infinite alternate; }
.banner-sub {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 800;
  color: #fff2c8;
  letter-spacing: 6px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .7);
}

.toasts {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 90;
  pointer-events: none;
}

.toast {
  padding: 6px 16px;
  border-radius: 20px;
  background: rgba(20, 20, 20, .78);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  backdrop-filter: blur(3px);
  animation: toastIn .2s ease-out;
  white-space: nowrap;
}
.toast.ok { background: rgba(45, 130, 30, .9); }
.toast.bad { background: rgba(175, 40, 30, .92); }
.toast.warn { background: rgba(190, 120, 20, .92); }

/* ---------- 底栏 ---------- */
.hint-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  padding: 6px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .6);
  border: 2px solid rgba(255, 255, 255, .85);
  font-size: 12px;
  font-weight: 700;
  color: #325018;
}
.hint-spacer { flex: 1; }
.link-btn { font-size: 12px; font-weight: 800; color: #2f6b9c; text-decoration: underline; }

/* ---------- 弹窗 ---------- */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 18, 10, .62);
  backdrop-filter: blur(3px);
  animation: fadeIn .25s;
}
.overlay.defeat { background: rgba(38, 6, 4, .72); }
.overlay.victory { background: rgba(10, 40, 8, .6); }

.dialog {
  width: 520px;
  max-width: 92%;
  padding: 26px 30px 24px;
  border-radius: 20px;
  text-align: center;
  background: linear-gradient(180deg, #fdf6e4, #ecdcb8);
  border: 5px solid #8a6a3f;
  box-shadow: 0 12px 0 #6b4f2a, 0 26px 50px rgba(0, 0, 0, .5);
  animation: dialogPop .32s cubic-bezier(.2, 1.4, .4, 1);
}

.dialog-title { font-size: 30px; font-weight: 900; color: #2f4f1e; letter-spacing: 2px; }
.dialog-title.danger { color: #b52d1c; -webkit-text-stroke: 1.5px #5a1008; paint-order: stroke fill; }
.dialog-title.win { color: #2f7a1c; }
.dialog-sub { font-size: 13px; color: #7a6a45; letter-spacing: 2px; margin-top: 6px; font-weight: 800; }
.dialog-text { color: #6a5a3a; margin-top: 10px; font-size: 14px; }

.brain-art { width: 150px; height: 110px; margin-bottom: 6px; animation: brainPulse 1.6s ease-in-out infinite; }

.stat-row { display: flex; justify-content: center; gap: 18px; margin: 18px 0 4px; flex-wrap: wrap; }
.stat { min-width: 74px; }
.stat b { display: block; font-size: 22px; color: #3a5a1e; }
.stat span { font-size: 11px; color: #7a6a45; font-weight: 700; }

.dialog-btns { display: flex; gap: 12px; justify-content: center; margin-top: 18px; }

.btn {
  padding: 10px 24px;
  border-radius: 12px;
  background: linear-gradient(180deg, #f3e6c8, #d9c39a);
  border: 3px solid #8a6a3f;
  font-weight: 900;
  font-size: 15px;
  color: #4a3410;
  box-shadow: 0 4px 0 #8a6a3f;
  transition: transform .1s, box-shadow .1s;
}
.btn.primary {
  background: linear-gradient(180deg, #8bd94a, #4f9c22);
  border-color: #2f6b12;
  color: #fff;
  box-shadow: 0 4px 0 #2f6b12;
  text-shadow: 0 1px 0 #2f6b12;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #8a6a3f; }

/* ---------- 拖拽幽灵 ---------- */
.drag-ghost {
  position: fixed;
  z-index: 9999;
  transform: translate(-50%, -50%) rotate(-4deg) scale(1.08);
  padding: 8px 18px;
  border-radius: 10px;
  background: linear-gradient(180deg, #fffdf3, #ffe9b8);
  border: 2px solid #dfb558;
  box-shadow: 0 6px 0 #c79b3c, 0 12px 22px rgba(0, 0, 0, .3);
  font-size: 22px;
  font-weight: 800;
  color: #c0392b;
  pointer-events: none;
  font-family: "Times New Roman", "PingFang SC", serif;
}
/* 拖动植物卡时的跟随幽灵：直接显示植物的形象图片（区别于答案卡） */
.drag-ghost.seed {
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(238, 255, 228, .92));
  border: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
  padding: 2px;
  border-radius: 14px;
}
.drag-ghost.seed .plant-sprite {
  width: 78px;
  height: 90px;
  transform: none;
}
.drag-ghost.seed .plant-sprite .hp-wrap,
.drag-ghost.seed .plant-sprite .spell-dots { display: none; }

/* ---------- 动画 ---------- */
@keyframes sway {
  0%, 100% { transform: rotate(-1.6deg) }
  50% { transform: rotate(1.6deg) }
}
@keyframes shootKick {
  0% { transform: scale(1) }
  35% { transform: scale(1.12) translateX(4px) }
  100% { transform: scale(1) }
}
@keyframes plantPop {
  0% { transform: scale(.4) translateY(10px); opacity: 0 }
  100% { transform: scale(1) translateY(0); opacity: 1 }
}
@keyframes zwalk {
  0%, 100% { transform: translateY(0) rotate(-.8deg) }
  50% { transform: translateY(-2.5px) rotate(.8deg) }
}
/* 前腿 / 后腿交替迈步：抬脚 → 前摆 → 落地 → 后蹬 */
@keyframes stepFront {
  0%, 100% { transform: rotate(25deg) translateY(-3px) }
  25% { transform: rotate(11deg) translateY(0) }
  50% { transform: rotate(-23deg) translateY(0) }
  75% { transform: rotate(-7deg) translateY(-2px) }
}
@keyframes stepBack {
  0%, 100% { transform: rotate(-23deg) translateY(0) }
  25% { transform: rotate(-7deg) translateY(-2px) }
  50% { transform: rotate(25deg) translateY(-3px) }
  75% { transform: rotate(11deg) translateY(0) }
}
@keyframes toeLift {
  0%, 100% { transform: rotate(-9deg) }
  50% { transform: rotate(15deg) }
}
@keyframes armFront {
  0%, 100% { transform: rotate(-7deg) }
  50% { transform: rotate(10deg) }
}
@keyframes armBack {
  0%, 100% { transform: rotate(10deg) }
  50% { transform: rotate(-7deg) }
}
@keyframes headBob {
  0%, 100% { transform: translateY(0) rotate(-1.2deg) }
  50% { transform: translateY(-2px) rotate(1.2deg) }
}
@keyframes zeat {
  0%, 100% { transform: translateX(0) rotate(-4deg) }
  50% { transform: translateX(-5px) rotate(5deg) }
}
@keyframes shuffleFront {
  0%, 100% { transform: rotate(8deg) }
  50% { transform: rotate(-8deg) }
}
@keyframes shuffleBack {
  0%, 100% { transform: rotate(-8deg) }
  50% { transform: rotate(8deg) }
}
@keyframes grab {
  0%, 100% { transform: rotate(-4deg) }
  50% { transform: rotate(17deg) }
}
@keyframes gnaw {
  0%, 100% { transform: translateY(0) rotate(-5deg) }
  50% { transform: translateY(1px) rotate(4deg) }
}
@keyframes zdie {
  0% { transform: rotate(0); opacity: 1 }
  100% { transform: rotate(-82deg) translateY(14px); opacity: .15 }
}
@keyframes sunBob {
  0%, 100% { transform: translate(-50%, -50%) scale(1) }
  50% { transform: translate(-50%, -58%) scale(1.06) }
}
@keyframes floatUp {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.8) }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1) }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(1) }
}
@keyframes bannerIn {
  0% { opacity: 0; transform: scale(.6) }
  60% { opacity: 1; transform: scale(1.08) }
  100% { transform: scale(1) }
}
@keyframes thump {
  from { transform: scale(1) }
  to { transform: scale(1.06) }
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px) }
  to { opacity: 1; transform: translateY(0) }
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes dialogPop {
  0% { opacity: 0; transform: scale(.82) translateY(14px) }
  100% { opacity: 1; transform: scale(1) translateY(0) }
}
@keyframes tileIn {
  from { opacity: 0; transform: translateY(-10px) scale(.9) }
  to { opacity: 1; transform: none }
}
@keyframes popIn {
  from { opacity: 0; transform: scale(.6) }
  to { opacity: 1; transform: scale(1) }
}
@keyframes pipPulse {
  0%, 100% { opacity: 1 }
  50% { opacity: .45 }
}
@keyframes brainPulse {
  0%, 100% { transform: scale(1) }
  50% { transform: scale(1.06) }
}
@keyframes shake {
  0%, 100% { transform: translate(0, 0) }
  20% { transform: translate(-6px, 3px) }
  40% { transform: translate(5px, -4px) }
  60% { transform: translate(-4px, -2px) }
  80% { transform: translate(3px, 3px) }
}

.tfade-enter-active, .tfade-leave-active { transition: all .18s ease; }
.tfade-enter, .tfade-leave-to { opacity: 0; transform: translateY(-10px) scale(.9); }

/* ==================== 闯关版：菜单 / 档案 / 关卡地图 ==================== */
.menu-screen { align-items: flex-start; padding-top: 12px; padding-bottom: 14px; }
.menu-inner.wide { max-width: 1120px; }

.subject-pick { display: flex; gap: 14px; justify-content: center; margin: 14px 0 12px; }
.subject-card {
  width: 232px; padding: 10px 12px; border-radius: 14px;
  background: linear-gradient(180deg, #fffdf2, #f0e2bd);
  border: 3px solid #b9a273; box-shadow: 0 4px 0 #a08a5b;
  text-align: left; display: flex; align-items: center; gap: 10px;
  transition: transform .12s, box-shadow .12s;
}
.subject-card:hover { transform: translateY(-2px); }
.subject-card.on { background: linear-gradient(180deg, #eaffcf, #b9e77e); border-color: #3f7c1b; box-shadow: 0 4px 0 #2f6b12; }
.subject-card.math.on { background: linear-gradient(180deg, #e4f2ff, #a9d5f7); border-color: #2b6ea8; box-shadow: 0 4px 0 #1f5c92; }
.subject-card b { display: block; font-size: 18px; font-weight: 900; color: #3d3218; }
.subject-card small { display: block; font-size: 11px; color: #7a6a45; margin-top: 2px; font-weight: 700; }

.setup-card {
  background: rgba(255, 252, 236, .92); border: 3px solid #c9b183;
  border-radius: 14px; padding: 10px 14px 12px; margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(90, 70, 30, .14); text-align: left;
}
.setup-head { display: flex; align-items: baseline; gap: 12px; border-bottom: 2px dashed #d8c6a0; padding-bottom: 6px; margin-bottom: 9px; }
.setup-head b { font-size: 15px; color: #3f5d1e; font-weight: 900; }
.setup-head span { font-size: 11px; color: #8a7754; font-weight: 700; }
.setup-body { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.avatar-pick { display: flex; gap: 6px; flex: 1; min-width: 300px; }
.avatar-opt {
  width: 40px; height: 40px; border-radius: 50%; line-height: 1;
  border: 3px solid rgba(255, 255, 255, .8); box-shadow: 0 2px 0 rgba(0, 0, 0, .15);
  display: flex; align-items: center; justify-content: center; transition: transform .12s;
}
.avatar-opt:hover { transform: translateY(-3px) scale(1.06); }
.avatar-opt.on { border-color: #e2622a; box-shadow: 0 0 0 3px #ffd45e, 0 2px 0 rgba(0, 0, 0, .2); transform: translateY(-2px); }
.avatar-badge {
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  flex: none; border: 2px solid rgba(255, 255, 255, .9); line-height: 1; overflow: hidden;
}

.name-field { display: flex; flex-direction: column; gap: 4px; min-width: 210px; }
.name-field label { font-size: 11px; font-weight: 900; color: #6a5630; }
.name-field input {
  font-family: inherit; font-size: 15px; font-weight: 800; color: #3d3218;
  padding: 6px 10px; border-radius: 9px; border: 2px solid #c9b183;
  background: #fffdf4; outline: none; width: 100%;
}
.name-field input:focus { border-color: #4f9c22; box-shadow: 0 0 0 3px rgba(79, 156, 34, .18); }
.name-preview { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; color: #5a6f38; margin-top: 2px; }
.score-summary { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.score-summary > div { text-align: center; }
.score-summary b { display: block; font-size: 21px; color: #d07818; font-weight: 900; }
.score-summary span { font-size: 10px; color: #8a7754; font-weight: 700; }
.reset-link { font-size: 11px; font-weight: 800; color: #b5351f; text-decoration: underline; }

.level-board {
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(232, 245, 214, .95));
  border: 3px solid #8fb356; border-radius: 14px; padding: 10px 14px 12px;
  margin-bottom: 12px; box-shadow: 0 4px 12px rgba(60, 90, 30, .14); text-align: left;
}
.board-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.board-title { font-size: 16px; font-weight: 900; color: #33591b; }
.board-title small { font-size: 11px; font-weight: 700; color: #7a8c5c; margin-left: 8px; }
.board-progress { font-size: 12px; font-weight: 900; color: #b45d17; background: #fff2cf; border: 2px solid #e2c184; border-radius: 8px; padding: 3px 10px; }
.board-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.board-tabs button {
  flex: 1; padding: 6px 0; border-radius: 9px; font-size: 13px; font-weight: 900; color: #4a6c2a;
  background: #e6f0d3; border: 2px solid #b6cf90; box-shadow: 0 2px 0 #a8c27c;
}
.board-tabs button.on { background: linear-gradient(180deg, #8bd94a, #4f9c22); color: #fff; border-color: #2f6b12; box-shadow: 0 2px 0 #2f6b12; }
.board-desc { font-size: 12px; color: #5a6f38; font-weight: 700; margin-bottom: 8px; }
.board-grid { display: grid; grid-template-columns: 116px repeat(3, 1fr); gap: 6px; }
.board-corner { border-radius: 8px; background: #dcebc4; }
.board-col, .board-row-label {
  background: #e8f2d5; border: 2px solid #c4d9a2; border-radius: 8px;
  padding: 5px 8px; font-size: 12px; font-weight: 900; color: #436322;
  display: flex; flex-direction: column; justify-content: center;
}
.board-col { text-align: center; }
.board-col small, .board-row-label small { display: block; font-size: 10px; font-weight: 700; color: #82985c; margin-top: 1px; }
.level-cell {
  position: relative; min-height: 66px; border-radius: 9px; padding: 5px 8px;
  background: linear-gradient(180deg, #fffdf3, #f2e7c8); border: 2px solid #c9b183;
  box-shadow: 0 2px 0 #b09a6e; text-align: left; display: flex; flex-direction: column; gap: 1px;
  transition: transform .12s, box-shadow .12s;
}
.level-cell:hover { transform: translateY(-2px); }
.level-cell.on { background: linear-gradient(180deg, #fff2b8, #ffd35e); border-color: #d78b16; box-shadow: 0 0 0 3px #ffe9a0, 0 2px 0 #b8790d; }
.lc-no { font-size: 13px; font-weight: 900; color: #4a3410; }
.lc-topic { font-size: 11px; color: #7a6440; font-weight: 700; }
.lc-speed { font-size: 10px; color: #2b6ea8; font-weight: 800; }
.lc-best { font-size: 10px; color: #b45d17; font-weight: 900; }
.lc-best.empty { color: #a2916f; font-weight: 700; }

/* ==================== 游戏内：玩家 / 积分 HUD ==================== */
.player-chip { display: flex; align-items: center; gap: 8px; flex: none; }
.pc-text { line-height: 1.15; }
.pc-text b { display: block; font-size: 14px; color: #ffe9b8; font-weight: 900; }
.pc-text span { display: block; font-size: 10px; color: #cdb58c; margin-top: 2px; font-weight: 700; }
.score-box {
  flex: none; min-width: 118px; padding: 3px 10px; border-radius: 11px; text-align: center;
  background: linear-gradient(180deg, #fff3c4, #f0c65a); border: 3px solid #a5720f;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12); transition: transform .12s;
}
.score-box.pop { transform: scale(1.08); }
.sb-label { font-size: 10px; font-weight: 900; color: #8a5a08; letter-spacing: 2px; }
.sb-total { font-size: 24px; font-weight: 900; color: #7a3d05; line-height: 1.05; }
.sb-level { font-size: 10px; font-weight: 800; color: #a26a12; }

.pinyin-bar.sub-math { background: linear-gradient(180deg, #ffffff, #e3f6e8 60%, #c4ecd2); border-color: #62a874; }
.sub-math .pb-title { color: #1c6b37; }
.sub-math .pb-sub, .sub-math .pb-tip, .sub-math .tile-empty { color: #4a8260; }
.sub-math .mode-switch { background: #c3e8cd; border-color: #84be97; }
.sub-math .mode-switch button { color: #246342; }
.tile.math {
  min-width: 68px; padding: 0 10px;
  background: linear-gradient(180deg, #f4fff6, #c9f0d4); border-color: #4da265;
  box-shadow: 0 3px 0 #36834c, 0 6px 10px rgba(0, 0, 0, .1);
}
.tile.math .tile-txt { color: #116b35; font-family: "Trebuchet MS", "Microsoft YaHei", sans-serif; font-size: 22px; }
.tile.math.letter { min-width: 46px; padding: 0 6px; background: linear-gradient(180deg, #eef7ff, #bfe0f8); border-color: #4d86b3; box-shadow: 0 3px 0 #3a7099, 0 6px 10px rgba(0, 0, 0, .1); }
.tile.math.letter .tile-txt { color: #145b96; font-size: 24px; }
.tile.math.wide { min-width: 92px; padding: 0 8px; }
.tile.math.wide .tile-txt { font-size: 18px; }
.drag-ghost.math { background: linear-gradient(180deg, #f4fff6, #c9f0d4); border-color: #4da265; color: #116b35; }
.drag-ghost.math.letter { background: linear-gradient(180deg, #eef7ff, #bfe0f8); border-color: #4d86b3; color: #145b96; }

.zsign.math { min-width: 78px; max-width: 116px; padding: 3px 6px 4px; background: linear-gradient(180deg, #f6fff7, #dff0d5); border-color: #5a8b46; }
.zword.math { white-space: normal; line-height: 1.2; letter-spacing: 0; font-family: "Trebuchet MS", "Microsoft YaHei", sans-serif; color: #1b4b22; }
.zword.math.mshort { font-size: 15px; }
.zword.math.mmedium { font-size: 12.5px; }
.zword.math.mlong { font-size: 11px; }
.ztopic { font-size: 9px; color: #5b7c46; font-weight: 800; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-word.math { font-size: 11px; line-height: 1.25; word-break: break-all; }
.dt-word.math small { display: block; margin-left: 0; }

.floater.score { color: #ffd23d; font-size: 17px; text-shadow: 0 2px 0 #7a4a00, 0 0 8px rgba(255, 210, 61, .8); }
.score-events {
  position: absolute; right: 8px; bottom: 8px; z-index: 70;
  display: flex; flex-direction: column-reverse; gap: 3px; align-items: flex-end;
  pointer-events: none;
}
.se-item {
  background: rgba(24, 58, 20, .82); color: #f4ffd8; font-size: 11px; font-weight: 800;
  padding: 2px 8px; border-radius: 8px; border: 1px solid rgba(255, 230, 120, .5);
  animation: seIn .2s ease-out;
}
.se-item b { color: #ffd75e; font-size: 12px; }
.se-item.minus { background: rgba(110, 30, 20, .85); }
.se-item.minus b { color: #ff9a86; }
@keyframes seIn { from { transform: translateX(14px); opacity: 0 } to { transform: translateX(0); opacity: 1 } }

/* ==================== 结算成绩单 ==================== */
.overlay.result.over { background: rgba(38, 6, 4, .74); }
.overlay.result.win { background: rgba(10, 40, 8, .68); }
.result-dialog { width: 600px; padding: 16px 24px 18px; }
.result-head { display: flex; align-items: center; gap: 12px; text-align: left; padding-bottom: 10px; border-bottom: 2px dashed #d3bd90; }
.rh-text { flex: 1; min-width: 0; }
.rh-name { font-size: 20px; font-weight: 900; color: #3d3218; }
.rh-level { font-size: 12px; font-weight: 800; color: #4f7a20; margin-top: 2px; }
.rh-mode { font-size: 11px; color: #8a7754; font-weight: 700; margin-top: 1px; }
.brain-art.small { width: 62px; height: 48px; margin: 0; }
.result-dialog .dialog-title { font-size: 25px; margin-top: 8px; }
.result-dialog .dialog-sub { font-size: 11px; margin-top: 2px; }
.final-score {
  margin: 10px auto 8px; padding: 8px 18px; width: 78%; border-radius: 14px;
  background: linear-gradient(180deg, #fff6cd, #ffe08a); border: 3px solid #d8a12a;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .1);
}
.final-score span { display: block; font-size: 11px; font-weight: 900; color: #8a5a08; letter-spacing: 3px; }
.final-score b { display: block; font-size: 46px; line-height: 1.05; font-weight: 900; color: #a74f06; text-shadow: 0 2px 0 #fff3c0; }
.final-score small { display: block; font-size: 11px; font-weight: 800; color: #9a6a12; }
.score-sheet { background: rgba(255, 255, 255, .62); border: 2px solid #d8c6a0; border-radius: 11px; padding: 7px 12px 9px; text-align: left; }
.sheet-title { font-size: 12px; font-weight: 900; color: #5a6f38; margin-bottom: 5px; }
.sheet-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 18px; }
.sheet-row { display: flex; justify-content: space-between; font-size: 12px; color: #6a5630; font-weight: 700; border-bottom: 1px dotted #d8c6a0; padding: 1px 0; }
.sheet-row b { color: #2f7a1c; font-weight: 900; }
.sheet-row b.minus { color: #b5351f; }
.sheet-row.empty { color: #a2916f; justify-content: center; border: 0; }
.result-dialog .stat-row { margin: 9px 0 2px; gap: 12px; }
.result-dialog .stat { min-width: 66px; }
.result-dialog .stat b { font-size: 18px; }
.result-dialog .stat span { font-size: 10px; }
.dialog-btns.wrap { flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dialog-btns.wrap .btn { padding: 8px 16px; font-size: 13px; }
.btn.warn { background: linear-gradient(180deg, #ffd9a8, #f0a75e); border-color: #a45b16; color: #6b3300; box-shadow: 0 4px 0 #a45b16; }
.result-note { font-size: 10px; color: #8a7754; font-weight: 700; margin-top: 8px; }

/* ---- 修正：学科卡片文字不应被 flex 挤压成竖排 ---- */
.sc-text { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.subject-card b, .subject-card small { white-space: nowrap; }

/* ---- 修正：数学题牌不能挡住僵尸的脸 ----
   保持与拼音牌同样的高度（约 30px），题干单行、知识点移到左栏与 tooltip */
.zsign { top: -8px; pointer-events: none; }
.zsign.math { top: -9px; min-width: 76px; max-width: 132px; padding: 2px 6px 3px; }
.zword.math { white-space: nowrap; line-height: 1.15; letter-spacing: 0; }
.zword.math.mshort { font-size: 14px; }
.zword.math.mmedium { font-size: 12px; }
.zword.math.mlong { font-size: 10.5px; }
.zsign.math .ztopic { display: none; }
.dt-topic { font-size: 9px; line-height: 1.15; color: #6b8a45; font-weight: 800; margin-top: 1px; }
.dock-targets { max-height: 196px; overflow-y: auto; margin-top: 6px; padding: 5px; }
.dt-head { margin-bottom: 4px; }
.dt-item { padding: 2px 5px; margin-bottom: 3px; }
.dt-word.math { font-size: 10.5px; }
.dt-units { margin-top: 2px; }

/* ---- 菜单紧凑化：1080p 内完整显示，无需滚动 ---- */
.menu-screen { padding-top: 14px; padding-bottom: 20px; }
.subject-pick { margin: 8px 0 8px; }
.setup-card { padding: 7px 12px 8px; margin-bottom: 8px; }
.level-board { padding: 7px 12px 9px; margin-bottom: 8px; }
.level-cell { min-height: 44px; }
.board-grid { gap: 5px; }
.board-col, .board-row-label { padding: 3px 8px; }
.mode-pick { margin: 0 0 10px; }
.start-btn { padding: 8px 44px; font-size: 22px; }
.menu-rules { margin: 8px auto 0; }
.rule { padding: 4px 8px; font-size: 11px; }

/* ==================== 蘑菇射手 / 命中换题 / 啃咬 / 阳光层 ==================== */

/* 阳光层置顶：植物槽与僵尸槽带 z-index，会把阳光盖住导致点不到 */
.suns-layer { z-index: 50; }
.sun-slot { z-index: 1; }
.suns-layer.dragging .sun-slot { pointer-events: none; }

/* 被咬碎屑粒子 */
.bite-layer { position: absolute; inset: 0; pointer-events: none; z-index: 55; }
.bite-chip {
  position: absolute; width: 9px; height: 9px; border-radius: 2px;
  background: linear-gradient(135deg, #b6ee6a, #4f9c22);
  box-shadow: 0 0 5px rgba(150, 220, 70, .85);
}
.bite-chip.spark {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fff3ae; box-shadow: 0 0 9px 2px #ffd84d;
}

/* 植物被咬抖动 + 蘑菇光晕 */
.plant-sprite.bitten .art { animation: biteShake .28s ease-out; }
@keyframes biteShake {
  0%, 100% { transform: translateX(0) rotate(0) }
  25% { transform: translateX(-4px) rotate(-5deg) }
  55% { transform: translateX(4px) rotate(4deg) }
  80% { transform: translateX(-2px) rotate(-2deg) }
}
.plant-sprite.mushroom .art { filter: drop-shadow(0 0 7px rgba(170, 90, 240, .45)); }
.plant-sprite.mushroom.shooting .art { filter: drop-shadow(0 0 16px #d9a6ff) brightness(1.15); }

/* 蘑菇孢子子弹 */
.pea.spore {
  width: 20px; height: 20px;
  background: radial-gradient(circle at 32% 28%, #f2d4ff, #a85be6 58%, #6a2ba8);
  box-shadow: 0 0 12px 4px rgba(190, 110, 255, .85);
  animation: sporePulse .28s ease-in-out infinite alternate;
}
@keyframes sporePulse { from { filter: brightness(1) } to { filter: brightness(1.35) } }

/* 向日葵阳光弹：淡黄带金边，命中只削 1/4 血 */
.pea.sun {
  width: 18px; height: 18px;
  background: radial-gradient(circle at 34% 30%, #fff7cf, #ffd23c 58%, #f0a000);
  box-shadow: 0 0 12px 3px rgba(255, 200, 40, .9);
  animation: sunBullet .35s ease-in-out infinite alternate;
}
@keyframes sunBullet { from { filter: brightness(1) } to { filter: brightness(1.3) } }

/* 僵尸张嘴啃咬：闭嘴线条与张开的口腔交替 */
.zombie-sprite .mouth-open { opacity: 0; }
.zombie-sprite .mouth-shut { opacity: 1; }
.zombie-sprite.eating .mouth-open { animation: mouthOpen .34s ease-in-out infinite; }
.zombie-sprite.eating .mouth-shut { animation: mouthShut .34s ease-in-out infinite; }
@keyframes mouthOpen { 0%, 100% { opacity: .12 } 42%, 68% { opacity: 1 } }
@keyframes mouthShut { 0%, 100% { opacity: 1 } 42%, 68% { opacity: .06 } }

/* 命中换题时题牌闪光 */
.zsign.flash { animation: signFlash .8s ease-out; }
@keyframes signFlash {
  0% { box-shadow: 0 0 0 4px rgba(255, 235, 90, .95), 0 0 20px 7px rgba(255, 214, 50, .85); filter: brightness(1.4); }
  100% { box-shadow: 0 3px 0 rgba(0, 0, 0, .18); filter: none; }
}

/* 拼音版固定整拼音的提示条 */
.pb-fixed {
  font-size: 10px; font-weight: 900; color: #31627f;
  background: rgba(255, 255, 255, .55); border: 1px solid #7fb0d0;
  border-radius: 7px; padding: 3px 4px; margin: 4px 0 2px;
}
.mode-pick.single button { min-width: 320px; }

/* 三张植物卡：压缩左栏，避免撑高舞台影响全屏缩放 */
.plant-dock { max-height: 530px; overflow-y: auto; }
.dock-card { height: 74px; margin-bottom: 5px; }
.dock-art { height: 66px; }
.dock-art .plant-sprite { width: 68px; height: 76px; transform: scale(.74); }
.dock-shovel, .dock-shovel .dock-art { height: 46px; }
.dock-shovel .dock-art svg { width: 44px; height: 44px; }
.dock-targets { max-height: 150px; }

@media (max-width: 900px) {
  .setup-body { flex-direction: column; align-items: stretch; }
  .score-summary { margin-left: 0; justify-content: center; }
  .board-grid { grid-template-columns: 84px repeat(3, 1fr); }
  .subject-card { width: 46%; }
}

/* ==================== 大炮密令 / 房子大炮 ==================== */
.cannon-bar {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  min-height: 82px;
  border-radius: 14px;
  background: linear-gradient(180deg, #42253c, #2d1830 60%, #201329);
  border: 3px solid #9a6a2f;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .13), 0 5px 12px rgba(30, 10, 40, .35);
  color: #ffe9b8;
}
.cannon-bar.firing { animation: cannonBarFlash .55s ease-out; }
@keyframes cannonBarFlash {
  0% { box-shadow: 0 0 0 0 rgba(255, 210, 90, 0); }
  25% { box-shadow: 0 0 0 4px rgba(255, 225, 110, .9), 0 0 26px 8px rgba(255, 190, 60, .8); filter: brightness(1.3); }
  100% { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .13), 0 5px 12px rgba(30, 10, 40, .35); filter: none; }
}

.cb-head { width: 148px; flex: none; display: flex; align-items: center; gap: 8px; }
.cb-ico {
  width: 40px; height: 40px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 27px; color: #ffd35a;
  background: rgba(255, 220, 120, .14);
  border: 2px solid rgba(255, 210, 100, .5); border-radius: 10px;
}
.cb-head-text b { display: block; font-size: 16px; font-weight: 900; letter-spacing: 1px; color: #ffe9a8; }
.cb-head-text small { display: block; font-size: 10px; color: #c9a8c8; margin-top: 2px; font-weight: 700; }

.cb-question { width: 340px; flex: none; min-width: 0; }
.cb-qrow { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.cb-qtext {
  font-size: 17px; font-weight: 900; color: #fff6da;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .5);
}
.cb-qtext.math { font-size: 14px; font-family: "Times New Roman", "PingFang SC", serif; letter-spacing: .3px; }
.cb-topic { font-size: 10px; color: #ffbf65; font-weight: 800; white-space: nowrap; }
.cb-hintline {
  font-size: 11px; color: #b7f0a8; font-weight: 800; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cb-progress { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.cb-dots { display: flex; gap: 3px; flex-wrap: nowrap; }
.cb-dots i {
  width: 8px; height: 8px; border-radius: 50%; display: block;
  background: #6b4a68; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3);
}
.cb-dots i.on { background: #ffd24a; box-shadow: 0 0 6px #ffd24a; }
.cb-dots i.now { background: #fff4c2; box-shadow: 0 0 0 2px #d98b20, 0 0 8px #ffd24a; }
.cb-pnum { font-size: 10px; color: #d8bcd8; font-weight: 800; white-space: nowrap; }
.cb-hintbtn {
  font-size: 10px; font-weight: 800; color: #4a2a08;
  padding: 2px 7px; border-radius: 6px; border: 1px solid #c8901e;
  background: linear-gradient(180deg, #ffe9a8, #efc25a);
}
.cb-hintbtn:hover { filter: brightness(1.1); }

.cb-answer { flex: 1; min-width: 0; }
.cb-alabel { font-size: 10px; font-weight: 800; color: #d7b6d6; margin-bottom: 4px; letter-spacing: .5px; }
.cb-tiles { display: flex; gap: 6px; flex-wrap: nowrap; }
.cb-tile {
  min-width: 54px; height: 38px; padding: 0 8px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: linear-gradient(180deg, #fff2ff, #e2b8f5);
  border: 2px solid #9b5fc7;
  box-shadow: 0 3px 0 #713ba0, 0 5px 9px rgba(0, 0, 0, .2);
  color: #5d2587; font-size: 17px; font-weight: 900;
  font-family: "Times New Roman", "PingFang SC", serif;
  cursor: grab; user-select: none; touch-action: none;
  animation: tileIn .22s ease-out;
}
.cb-tile:hover { transform: translateY(-3px); }
.cb-tile.held { opacity: .3; transform: scale(.92); }
.cb-tile.wide { min-width: 74px; font-size: 14px; }
.cb-tile.math { font-family: "Times New Roman", "PingFang SC", serif; }

.cb-status { width: 148px; flex: none; text-align: right; }
.cb-shot { display: flex; align-items: baseline; justify-content: flex-end; gap: 3px; font-size: 12px; color: #ffd35a; font-weight: 900; }
.cb-shot .iconfont { font-size: 16px; align-self: center; }
.cb-shot b { font-size: 20px; color: #fff0b0; }
.cb-shot small { font-size: 10px; color: #c9a8c8; }
.cb-tip { font-size: 10px; color: #d7b6d6; font-weight: 700; margin-top: 4px; line-height: 1.3; }

/* 房子层要盖住草坪图层，炮口才能被拖拽命中 */
.house { z-index: 95; }
.cannon-mount {
  /* 命中热区只在房子宽度内，炮管图形可溢出到草坪但不拦截草坪点击 */
  position: absolute; top: 126px; left: -8px;
  width: 96px; height: 138px; z-index: 6;
  border-radius: 14px; cursor: pointer; pointer-events: auto;
  transition: transform .15s, filter .15s;
}
.cannon-mount::before {
  content: ""; position: absolute; inset: 2px 2px 22px 2px;
  border: 2px dashed transparent; border-radius: 14px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.cannon-mount.hover { transform: scale(1.06); filter: brightness(1.12); }
.cannon-mount.hover::before {
  border-color: #ffe48c; background: rgba(255, 220, 100, .18);
  box-shadow: 0 0 24px rgba(255, 210, 80, .8);
}
.cannon-art {
  position: absolute; left: 0; top: 0; width: 126px; height: 110px;
  overflow: visible; pointer-events: none;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .4));
}
.cannon-flame { opacity: 0; transform-origin: 100px 38px; }
.cannon-mount.firing .cannon-flame { opacity: 1; animation: cannonFlame .32s ease-out 2; }
@keyframes cannonFlame {
  0% { transform: scale(.35) } 50% { transform: scale(1.28) } 100% { transform: scale(.85) }
}
.cannon-drop {
  position: absolute; left: 0; bottom: 2px; width: 96px;
  display: flex; align-items: center; justify-content: center; gap: 3px;
  white-space: nowrap;
  font-size: 9px; font-weight: 900; color: #6b3b00;
  background: linear-gradient(180deg, #ffe9a8, #f2c352);
  border: 2px solid #a8700c; border-radius: 8px; padding: 2px 0;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .2); pointer-events: none;
}
.cannon-drop .iconfont { font-size: 12px; }

/* 大炮齐射：按每只僵尸位置分别发射的炮弹 + 命中爆炸 */
.cannonballs-layer, .explosions-layer {
  position: absolute; inset: 0; z-index: 78; pointer-events: none; overflow: visible;
}
.cball {
  position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #8a8a8a, #1d1d1d 72%);
  box-shadow: 0 0 10px rgba(255, 170, 60, .9), 0 0 20px rgba(255, 110, 30, .55);
}
.explosion {
  position: absolute; width: 130px; height: 130px; margin: 0;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 252, 214, .98) 0%, rgba(255, 198, 74, .94) 36%,
    rgba(255, 122, 30, .6) 60%, rgba(255, 70, 18, 0) 78%);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

/* ==================== 僵尸王 ==================== */
/* 个头明显大于普通僵尸，并带红色威严光晕，一眼可辨 */
.zombie-sprite.king { transform: scale(1.4); transform-origin: 50% 100%; }
.zombie-sprite.king::before {
  content: "";
  position: absolute;
  left: 50%; bottom: 6px;
  width: 158px; height: 176px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 68%, rgba(255, 66, 44, .34), rgba(150, 20, 62, .16) 46%, transparent 72%);
  pointer-events: none;
  animation: kingAura 1.6s ease-in-out infinite alternate;
}
@keyframes kingAura {
  from { opacity: .5; transform: translateX(-50%) scale(.94); }
  to { opacity: .95; transform: translateX(-50%) scale(1.06); }
}
.zombie-sprite.king .zart { filter: drop-shadow(0 0 12px rgba(255, 90, 50, .85)) saturate(1.08); }
.zsign.king {
  min-width: 78px;
  background: linear-gradient(180deg, #fff3c4, #f0c85a);
  border-color: #8a5a12;
  box-shadow: 0 0 0 2px rgba(255, 214, 80, .65), 0 0 16px rgba(255, 190, 40, .8), 0 3px 0 rgba(0, 0, 0, .2);
}
/* 王牌题牌移到僵尸左侧，避免把金冠和头部整块盖住 */
.zombie-sprite.king .zsign {
  top: 4px;
  left: auto;
  right: calc(100% + 9px);
  transform: none;
}
.zombie-sprite.king .zsign::after {
  content: ""; position: absolute; right: -10px; top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent; border-left-color: #f0c85a;
}
.zking-tag {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  white-space: nowrap;
  font-size: 10px; font-weight: 900; color: #7a2a0c; letter-spacing: 1px;
  border-bottom: 1px dashed #c08a2a; padding-bottom: 2px; margin-bottom: 2px;
}
.zking-tag .iconfont { font-size: 12px; color: #d8900c; }
.zking-crown { filter: drop-shadow(0 0 5px rgba(255, 215, 70, .95)); }
.zking-eyes { animation: kingEye 1.1s ease-in-out infinite alternate; }
@keyframes kingEye {
  from { opacity: .7 }
  to { opacity: 1; filter: drop-shadow(0 0 4px #ff3b2f) }
}
.zombie-sprite.king .zhp { height: 6px; border: 1px solid rgba(90, 50, 0, .5); }

/* ==================== 新特效 / 状态 ==================== */
.floater.cannon { color: #ffd35a; font-size: 20px; font-weight: 900; }
.floater.boss { color: #ffcf3f; font-size: 20px; font-weight: 900; }
.floater.info { color: #bfe9ff; }
.drag-ghost.cannon {
  background: linear-gradient(180deg, #f9ecff, #d7aef5);
  border-color: #8a45bd; color: #5a1c87;
  box-shadow: 0 6px 0 #7b3ba8, 0 12px 22px rgba(0, 0, 0, .3);
}
.banner.boss .banner-text { font-size: 42px; color: #ffce3a; -webkit-text-stroke: 3px #4a1008; }
.banner.cannon .banner-text { font-size: 32px; color: #ffd35a; -webkit-text-stroke: 3px #5a2a08; }
.banner.boss .banner-sub, .banner.cannon .banner-sub { font-size: 13px; letter-spacing: 4px; }
.wave-line2 { font-size: 11px; margin-top: 2px; }
.wave-line2 .iconfont { font-size: 12px; color: #ffd45e; }
.wave-king { color: #ffb35a; }

/* ==================== 首页改版：顶部不变，左右两栏一屏展示 ==================== */
.menu-screen {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
}
.menu-inner.wide {
  width: 100%;
  max-width: 1400px;
  transform-origin: center center;
}
.menu-top { text-align: center; }
.menu-top .menu-sub { margin: 4px 0 8px; font-size: 14px; }
.menu-top .subject-pick { margin: 0 0 10px; }
.menu-top .subject-card { width: 232px; }

.menu-cols { display: flex; align-items: flex-start; gap: 16px; text-align: left; }
.menu-col { min-width: 0; }
.menu-left { flex: 1.72; }
.menu-left .setup-card { margin-bottom: 10px; }
.menu-left .level-board { margin-bottom: 0; }
.menu-right {
  flex: 1; align-self: stretch;
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 12px 12px;
  border-radius: 14px;
  background: rgba(255, 252, 236, .88);
  border: 3px solid #c9b183;
  box-shadow: 0 4px 12px rgba(90, 70, 30, .16);
}
.menu-right .mode-pick { margin: 0 0 10px; width: 100%; }
.menu-right .mode-pick button { flex: 1; }
.menu-right .mode-pick.single button { min-width: 0; width: 100%; }
.menu-right .start-btn { width: 100%; padding: 9px 20px; font-size: 21px; letter-spacing: 4px; }
.menu-right .menu-rules {
  flex: 1; align-content: space-evenly;
  margin: 10px 0 0; max-width: none; width: 100%;
  grid-template-columns: 1fr; gap: 6px;
}
.menu-right .rule { font-size: 11.5px; padding: 5px 9px; line-height: 1.35; }

/* ==================== 大炮：5 题解锁 / 点击激活 / 发射后隐藏 ==================== */
.cannon-bar.locked {
  background: linear-gradient(180deg, #3c3552, #27223c 60%, #1d1a2f);
  border-color: #6f668f;
}
.cb-locked { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 66px; }
.cb-locked .cb-head { width: 148px; }
.cb-charge { flex: 1; min-width: 0; }
.cb-charge-label { font-size: 13px; font-weight: 900; color: #ffe9b8; }
.cb-charge-label b { font-size: 20px; color: #ffd35a; }
.cb-charge-dots { display: flex; gap: 7px; margin: 6px 0 5px; }
.cb-charge-dots i {
  width: 36px; height: 11px; border-radius: 6px; display: block;
  background: #574a70; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
}
.cb-charge-dots i.on {
  background: linear-gradient(90deg, #ffd45e, #ff9d2e);
  box-shadow: 0 0 10px rgba(255, 190, 60, .85);
}
.cb-charge-tip { font-size: 10px; color: #c9bcd8; font-weight: 700; }

.cb-arm-panel {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 56px; padding: 6px 12px;
  border-radius: 10px; border: 2px solid #ffd35a;
  background: linear-gradient(180deg, #fff0b8, #f2b43e);
  color: #5a3200; text-align: left;
  animation: armPulse 1.5s ease-in-out infinite;
}
.cb-arm-panel:hover { filter: brightness(1.08); }
.cb-arm-panel .iconfont { font-size: 26px; color: #a85a08; flex: none; }
.cb-arm-panel b { display: block; font-size: 15px; font-weight: 900; }
.cb-arm-panel small { display: block; font-size: 10px; font-weight: 700; margin-top: 2px; opacity: .82; }
@keyframes armPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 80, 0); }
  50% { box-shadow: 0 0 0 4px rgba(255, 210, 80, .55), 0 0 18px rgba(255, 190, 60, .6); }
}

.cannon-mount.ready::before {
  border-color: #ffd45e; background: rgba(255, 210, 90, .16);
  box-shadow: 0 0 20px rgba(255, 200, 60, .6);
}
.cannon-mount.ready .cannon-drop {
  background: linear-gradient(180deg, #fff3c0, #ffd45e);
  border-color: #c8800c; animation: dropBlink 1.1s ease-in-out infinite;
}
@keyframes dropBlink { 0%, 100% { filter: brightness(1) } 50% { filter: brightness(1.28) } }
.cannon-mount.armed { filter: drop-shadow(0 0 8px rgba(255, 190, 60, .85)); }

@media (max-width: 900px) {
  .menu-cols { flex-direction: column; }
  .menu-left, .menu-right { width: 100%; }
}