/* ==========================================================
   花语远征 · 极简绘本风 UI
   ========================================================== */

:root {
  /* 画布 */
  --bg: #FBF3E2;
  --bg-deep: #F3E8CF;
  --panel: #FFFEF8;
  --ink: #5B4A3F;
  --ink-soft: #97836F;
  --ink-faint: #C9B9A4;
  --line: #E9DCC4;

  /* 五色（花瓣红 / 水滴蓝 / 叶片绿 / 星星黄 / 月牙紫） */
  --c-r: #F2766B;
  --c-r-deep: #D95A50;
  --c-b: #57B2E3;
  --c-b-deep: #3E92C4;
  --c-g: #6DC087;
  --c-g-deep: #4E9E69;
  --c-y: #F5B93F;
  --c-y-deep: #D89B22;
  --c-p: #A78FD9;
  --c-p-deep: #8670BD;

  /* 功能色 */
  --hp: #F2766B;
  --hp-bg: #F6E3DE;
  --shield: #57B2E3;
  --good: #6DC087;
  --warn: #F5B93F;

  --shadow-soft: 0 6px 18px rgba(120, 96, 60, 0.16);
  --shadow-lift: 0 10px 26px rgba(120, 96, 60, 0.22);
  --radius: 18px;

  /* 棋盘格子尺寸（layoutBoard 动态覆盖；怪物精灵等按此缩放） */
  --cell: 52px;

  --f: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Nunito", "Segoe UI", system-ui, sans-serif;
}

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

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--f);
  color: var(--ink);
  background: var(--bg);
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
}

body { position: relative; }

/* ---------- 背景装饰 ---------- */
#bg-deco {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
}
#bg-deco .deco {
  position: absolute;
  opacity: 0.5;
  animation: decoFloat 9s ease-in-out infinite;
}
@keyframes decoFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(8deg); }
}

/* ---------- 屏幕容器 ---------- */
.screen {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center;
  max-width: 520px; margin: 0 auto;
  overflow: hidden;
}
.hidden { display: none !important; }

/* ---------- 通用按钮 ---------- */
.btn {
  font-family: var(--f);
  border: none; cursor: pointer;
  border-radius: 999px;
  font-weight: 700; color: var(--ink);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn:active { transform: scale(.94); box-shadow: 0 3px 10px rgba(120,96,60,.15); }
.btn[disabled] { opacity: .45; pointer-events: none; }

.btn-primary {
  background: linear-gradient(180deg, #FFB25C, #F79A3E);
  color: #fff;
  padding: 14px 34px; font-size: 19px;
  text-shadow: 0 1px 2px rgba(180,110,20,.35);
}
.btn-big { padding: 16px 44px; font-size: 21px; }
.btn-soft {
  background: var(--panel); color: var(--ink-soft);
  padding: 10px 22px; font-size: 15px;
  border: 2px solid var(--line);
}
.btn-ghost {
  background: transparent; box-shadow: none;
  border: 2px solid var(--line); color: var(--ink-soft);
  padding: 10px 26px; font-size: 15px;
}
.btn-icon {
  width: 42px; height: 42px; border-radius: 14px;
  background: var(--panel); box-shadow: var(--shadow-soft);
  padding: 9px; flex: none;
}
.btn-icon svg { width: 100%; height: 100%; }

/* ==========================================================
   标题屏
   ========================================================== */
#screen-title { justify-content: center; z-index: 20; }
.title-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 30px; width: 100%;
  animation: riseIn .6s cubic-bezier(.2,.8,.3,1.2) both;
}
.title-logo { width: 130px; height: 130px; animation: logoBob 3.5s ease-in-out infinite; }
@keyframes logoBob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
.game-title {
  font-size: 52px; letter-spacing: 10px; text-indent: 10px;
  color: var(--ink); font-weight: 900;
  text-shadow: 0 3px 0 #fff, 0 6px 14px rgba(160,120,60,.25);
}
.game-sub { color: var(--ink-soft); letter-spacing: 4px; font-size: 13px; }
.title-rules { display: flex; gap: 10px; margin: 12px 0 8px; flex-wrap: wrap; justify-content: center; }
.rule-chip {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--panel); border-radius: 16px; padding: 12px 14px;
  box-shadow: var(--shadow-soft); width: 108px;
}
.rule-ic { width: 40px; height: 40px; }
.rule-ic svg { width: 100%; height: 100%; }
.rule-chip label { font-size: 12px; color: var(--ink-soft); font-weight: 700; }
.title-foot { display: flex; gap: 12px; align-items: center; }

/* ==========================================================
   关卡地图
   ========================================================== */
#screen-map { background: var(--bg); }
.map-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 8px; gap: 10px;
}
.map-head h2 { font-size: 20px; letter-spacing: 4px; flex: 1; text-align: center; }
.map-scroll {
  width: 100%; flex: 1; overflow-y: auto; padding: 8px 18px 40px;
  scrollbar-width: none;
}
.map-scroll::-webkit-scrollbar { display: none; }
.chapter-block { margin-bottom: 22px; }
.chapter-head {
  display: flex; align-items: center; gap: 10px; margin: 12px 4px 12px;
}
.chapter-head .ch-ic { width: 34px; height: 34px; flex: none; }
.chapter-head .ch-ic svg { width: 100%; height: 100%; }
.chapter-head h3 { font-size: 16px; letter-spacing: 2px; }
.chapter-head .ch-line { flex: 1; height: 2px; background: var(--line); border-radius: 2px; }
.level-row { display: flex; flex-wrap: wrap; gap: 10px; }
.level-node {
  width: 76px; height: 76px; border-radius: 20px;
  background: var(--panel); box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; position: relative;
  transition: transform .15s ease;
  border: 2px solid transparent;
}
.level-node:active { transform: scale(.93); }
.level-node .lv-num { font-size: 20px; font-weight: 900; color: var(--ink); }
.level-node .lv-stars { display: flex; gap: 2px; height: 12px; margin-top: 2px; }
.level-node .lv-stars svg { width: 12px; height: 12px; }
.level-node.locked { opacity: .5; pointer-events: none; filter: grayscale(.5); }
.level-node.locked .lv-num { color: var(--ink-faint); }
.level-node.current { border-color: var(--c-y); animation: nodePulse 1.8s ease-in-out infinite; }
@keyframes nodePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(245,185,63,.5), var(--shadow-soft); }
  50% { box-shadow: 0 0 0 8px rgba(245,185,63,0), var(--shadow-soft); }
}
.level-node.boss { background: #FFF3F1; }
.level-node.boss .lv-num::after { content: "王"; font-size: 10px; vertical-align: super; color: var(--c-r); margin-left: 2px; }
.run-chip {
  position: absolute; top: -7px; right: -5px;
  background: var(--c-g); color: #fff; font-size: 10px; font-weight: 800;
  border-radius: 999px; padding: 2px 7px; box-shadow: var(--shadow-soft);
}

/* ==========================================================
   战斗屏
   ========================================================== */
#screen-battle {
  padding: 0; z-index: 15;
  justify-content: flex-start;
  animation: fadeIn .3s ease both;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* --- HUD --- */
.hud {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 4px;
}
.hud-level { display: flex; flex-direction: column; line-height: 1.15; flex: 1; min-width: 0; }
.hud-chapter { font-size: 11px; color: var(--ink-soft); letter-spacing: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-num { font-size: 16px; font-weight: 900; display: flex; align-items: center; gap: 6px; }
.wave-chip {
  background: #FDF3DC; color: #C07A15;
  border: 1.5px solid #F3D9A8; border-radius: 999px;
  font-size: 10px; font-weight: 900; padding: 1px 7px;
  letter-spacing: .5px; flex: none;
}
.hud-moves {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--panel); border-radius: 16px; box-shadow: var(--shadow-soft);
  width: 64px; height: 52px; flex: none;
}
.moves-num { font-size: 22px; font-weight: 900; color: var(--ink); line-height: 1; }
.moves-label { font-size: 10px; color: var(--ink-soft); letter-spacing: 2px; }
.hud-moves.low .moves-num { color: var(--c-r); animation: movesWarn 1s ease-in-out infinite; }
@keyframes movesWarn { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.hud-right { display: flex; gap: 8px; }
.hud-right .btn-icon { width: 40px; height: 40px; padding: 8px; }

/* --- 队伍状态条（总血量 + 护盾） --- */
.team-strip {
  width: 100%; padding: 5px 16px 2px;
  display: flex; align-items: center; gap: 8px;
}
.ts-label {
  font-size: 10px; font-weight: 900; color: var(--ink-faint);
  letter-spacing: 2px; flex: none;
}
.hp-wrap {
  flex: 1; height: 16px; background: var(--hp-bg);
  border-radius: 999px; position: relative; overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(150,100,80,.18);
}
.hp-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  background: linear-gradient(180deg, #FF9C90, var(--c-r));
  border-radius: 999px;
  transition: width .45s cubic-bezier(.3,1,.4,1);
}
.hp-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.2);
  letter-spacing: .5px;
}
.shield-chip {
  display: flex; align-items: center; gap: 4px; flex: none;
  background: #E3F2FB; border-radius: 999px; padding: 2px 9px;
  color: var(--c-b-deep); font-size: 11px; font-weight: 900;
  box-shadow: var(--shadow-soft);
}
.shield-chip svg { width: 12px; height: 12px; }
.team-strip.hurt { animation: hurtFlash .4s ease; }
@keyframes hurtFlash {
  0%,100% { filter: none; }
  25%,75% { filter: drop-shadow(0 0 8px rgba(242,118,107,.8)); }
}

/* --- 怪物区（7 列网格，与棋盘对齐） --- */
.monsters {
  width: 100%; padding: 2px 12px 8px;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px;
  align-items: end; min-height: 112px;
}
.monster { position: relative; cursor: pointer; }
.monster.dying { pointer-events: none; }
.m-card {
  background: var(--panel); border-radius: 14px;
  box-shadow: var(--shadow-soft);
  padding: 6px 4px 5px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: 2px solid var(--line);
  position: relative; overflow: visible;
  transition: opacity .4s, transform .4s;
}
.monster.wide-2 .m-card, .monster.wide-3 .m-card, .monster.wide-4 .m-card { padding: 6px 6px 5px; }
.m-sprite { width: calc(var(--cell, 52px) * 1.25); height: calc(var(--cell, 52px) * 1.25); position: relative; z-index: 2; }
.monster.wide-2 .m-sprite { width: calc(var(--cell, 52px) * 1.55); height: calc(var(--cell, 52px) * 1.35); }
.monster.wide-3 .m-sprite { width: calc(var(--cell, 52px) * 1.8); height: calc(var(--cell, 52px) * 1.55); }
.monster.wide-4 .m-sprite { width: calc(var(--cell, 52px) * 2.1); height: calc(var(--cell, 52px) * 1.75); }
.m-sprite svg { width: 100%; height: 100%; overflow: visible; }
.m-sprite .m-body { animation: mIdle 3s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes mIdle {
  0%,100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.03, .97) translateY(1px); }
}
.m-name {
  font-size: 10px; font-weight: 800; color: var(--ink-soft);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.monster.wide-2 .m-name, .monster.wide-3 .m-name, .monster.wide-4 .m-name { font-size: 11px; }
.m-hp {
  width: 100%; height: 10px; background: var(--hp-bg);
  border-radius: 999px; overflow: hidden; position: relative;
  box-shadow: inset 0 1px 2px rgba(150,100,80,.2);
}
.m-hp .m-hp-ghost {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  background: #FFDF9E; border-radius: 999px;
  transition: width .55s cubic-bezier(.2,.8,.3,1);
}
.m-hp .m-hp-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(180deg, #FF9C90, var(--c-r));
  transition: width .4s cubic-bezier(.3,1,.4,1);
}
.m-hp .m-hp-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 900; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35); letter-spacing: .3px;
}
.m-weak { display: flex; gap: 3px; align-items: center; height: 12px; }
.m-weak .wk { display: flex; align-items: center; gap: 1px; font-size: 9px; font-weight: 900; }
.m-weak .wk svg { width: 11px; height: 11px; }
.m-weak .wk.w { color: var(--c-r-deep); }
.m-weak .wk.s { color: var(--ink-faint); }
.m-telegraph {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 3px; flex: none;
  background: #FFF; border-radius: 999px; padding: 2px 7px 2px 4px;
  box-shadow: var(--shadow-soft); z-index: 5;
  font-size: 10px; font-weight: 900; color: var(--ink-soft);
  white-space: nowrap; border: 1.5px solid var(--line);
}
.m-telegraph svg { width: 13px; height: 13px; }
.m-telegraph.t-attack { border-color: #F6CFC9; color: var(--c-r-deep); }
.m-telegraph.t-heavy { border-color: #F3B95C; color: #C07A15; background: #FFF6E3; }
.m-telegraph.t-shield { border-color: #C4E1F5; color: var(--c-b-deep); }
.m-telegraph.t-curse { border-color: #D9CCEF; color: var(--c-p-deep); }
.m-telegraph.t-summon { border-color: #CFEBD8; color: var(--c-g-deep); }
.m-telegraph.t-buff, .m-telegraph.t-heal { border-color: #CFEBD8; color: var(--c-g-deep); }
.m-telegraph.t-frozen { border-color: #C4E1F5; color: var(--c-b-deep); background: #EDF6FC; }
/* 攻击预警：下一回合动手，红色脉冲 */
.m-telegraph.urgent {
  border-color: var(--c-r); color: #B33227; background: #FDEBE9;
  animation: urgentPulse 1s ease-in-out infinite;
}
@keyframes urgentPulse {
  0%,100% { transform: translateX(-50%) scale(1); box-shadow: 0 2px 6px rgba(217,90,80,.35); }
  50% { transform: translateX(-50%) scale(1.12); box-shadow: 0 3px 12px rgba(217,90,80,.8); }
}

.m-shield-bubble {
  position: absolute; inset: -3px; border-radius: 16px;
  border: 2.5px solid var(--c-b); opacity: .8; pointer-events: none;
  box-shadow: 0 0 10px rgba(87,178,227,.4);
}
.m-frozen-tag {
  position: absolute; inset: 0; border-radius: 14px; pointer-events: none;
  background: rgba(190, 225, 245, .35);
  border: 2px solid rgba(87,178,227,.5);
}
.m-frozen-tag::after {
  content: ""; position: absolute; top: 4px; right: 6px;
  width: 12px; height: 12px; border-radius: 3px;
  background: #BFE1F5; border: 1.5px solid #fff;
}

.monster.hit .m-card { animation: mHit .35s ease; }
@keyframes mHit {
  0% { transform: translateX(0); filter: none; }
  20% { transform: translateX(-5px) rotate(-2deg); filter: brightness(1.5); }
  45% { transform: translateX(4px) rotate(2deg); filter: brightness(1.25); }
  70% { transform: translateX(-2px); filter: brightness(1.1); }
  100% { transform: translateX(0); filter: none; }
}
.monster.weakhit .m-card { animation: mWeakHit .45s ease; }
@keyframes mWeakHit {
  0% { transform: scale(1); filter: none; }
  30% { transform: scale(1.1); filter: brightness(1.35) saturate(1.3); }
  100% { transform: scale(1); filter: none; }
}
.monster.dying .m-card { opacity: 0; transform: scale(.6) rotate(12deg) translateY(20px); }
.monster.dead-slot { visibility: hidden; }

/* --- 超级 BOSS / 精英 --- */
.monster.elite .m-card {
  border: 2.5px solid var(--c-y);
  box-shadow: var(--shadow-soft), 0 0 14px 2px rgba(245,185,63,.5);
}
.monster.elite .m-name { color: #C07A15; }
.monster.elite .m-sprite { filter: drop-shadow(0 2px 6px rgba(245,185,63,.6)); }

/* --- 怪物卡片整体预警（即将攻击） --- */
.monster.m-warning .m-card { animation: warnPulse 1s ease-in-out infinite; }
@keyframes warnPulse {
  0%,100% { box-shadow: var(--shadow-soft), 0 0 4px 1px rgba(217,90,80,.2); }
  50% { box-shadow: var(--shadow-soft), 0 0 16px 4px rgba(217,90,80,.6); }
}

/* --- 新波怪物登场 --- */
.monster.spawn-in { animation: monsterSpawn .6s cubic-bezier(.2,.8,.4,1.25) both; }
@keyframes monsterSpawn {
  0% { opacity: 0; transform: translateY(-26px) scale(.6); filter: brightness(1.6); }
  60% { opacity: 1; transform: translateY(4px) scale(1.05); }
  100% { opacity: 1; transform: none; filter: none; }
}

/* --- 棋盘 --- */
.board-wrap {
  position: relative; width: 100%; padding: 4px 12px 6px;
  display: flex; justify-content: center;
}
.board {
  position: relative;
  background: var(--panel);
  border-radius: 20px;
  box-shadow: var(--shadow-soft), inset 0 -3px 0 rgba(190,160,110,.12);
  border: 3px solid #F0E4CB;
  touch-action: none;
}
.board::before {
  content: ""; position: absolute; inset: 0; border-radius: 17px;
  background-image: radial-gradient(circle, #EFE2C6 1.6px, transparent 2px);
  background-size: calc(var(--cell) * 1) calc(var(--cell) * 1);
  background-position: calc(var(--cell) * .5) calc(var(--cell) * .5);
  opacity: .55; pointer-events: none;
}
.tile {
  position: absolute; left: 0; top: 0;
  width: var(--cell); height: var(--cell);
  padding: calc(var(--cell) * .07);
  transition: transform .18s cubic-bezier(.3,.9,.4,1.1);
  will-change: transform;
  z-index: 2;
}
.tile.falling { transition: transform .26s cubic-bezier(.4,.1,.55,1); }
.tile.falling-2 { transition: transform .32s cubic-bezier(.4,.1,.55,1); }
.tile.selected { z-index: 6; }
.tile.selected .tile-inner { transform: scale(1.12); }
.tile-inner {
  width: 100%; height: 100%; border-radius: 26%;
  background: #FFFDF6;
  box-shadow: 0 3px 0 rgba(180,150,100,.22), 0 4px 10px rgba(120,96,60,.14);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: transform .15s ease;
}
.tile.dragging { z-index: 8; }
.tile.dragging .tile-inner { transform: scale(1.16); }
.tile .glyph { width: 70%; height: 70%; }
.tile:hover .tile-inner { transform: translateY(-2px); }
.tile.popping .tile-inner { animation: tilePop .22s ease forwards; }
@keyframes tilePop {
  0% { transform: scale(1); opacity: 1; }
  45% { transform: scale(1.25); opacity: 1; filter: brightness(1.2); }
  100% { transform: scale(0); opacity: 0; }
}
.tile.spawn { animation: tileSpawn .3s cubic-bezier(.2,.8,.4,1.2) both; }
@keyframes tileSpawn {
  from { opacity: 0; transform: scale(.3); }
  to { opacity: 1; }
}
.tile.stone .tile-inner { background: #EDE7DB; box-shadow: 0 3px 0 rgba(150,140,120,.35); }
.tile.stone .glyph { width: 64%; height: 64%; opacity: .9; }

/* 特殊棋子标记 */
.tile.special .tile-inner { box-shadow: 0 3px 0 rgba(180,150,100,.25), 0 0 12px 2px rgba(245,185,63,.55); }
.tile.special .tile-badge {
  position: absolute; inset: 0; border-radius: 26%; pointer-events: none;
}
.tile.special.rowBomb .tile-badge, .tile.special.colBomb .tile-badge {
  border: 3px solid rgba(255,255,255,.95);
}
.tile.special.bomb .tile-badge {
  border: 3px solid rgba(255,255,255,.95);
}
.tile.special.bomb .tile-badge::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 26%; height: 26%;
  transform: translate(-50%,-50%); background: #fff; border-radius: 50%;
  box-shadow: 0 0 7px 2px rgba(245,185,63,.9);
}
.tile.special.bomb .tile-badge::after {
  content: ""; position: absolute; inset: -2px; border-radius: 30%;
  border: 2px dashed rgba(245,185,63,.75);
  animation: bombTick 6s linear infinite;
}
@keyframes bombTick { to { transform: rotate(360deg); } }
.tile.special.bomb .tile-inner { animation: bombPulse 1.8s ease-in-out infinite; }
@keyframes bombPulse {
  0%,100% { box-shadow: 0 3px 0 rgba(180,150,100,.25), 0 0 10px 2px rgba(245,185,63,.45); }
  50% { box-shadow: 0 3px 0 rgba(180,150,100,.25), 0 0 16px 5px rgba(242,118,107,.55); }
}
.tile.special.rowBomb .tile-badge::before, .tile.special.colBomb .tile-badge::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 46%; height: 3px;
  background: rgba(255,255,255,.95); border-radius: 3px;
}
.tile.special.colBomb .tile-badge::after {
  content: ""; position: absolute; top: 8%; bottom: 8%; left: 46%; width: 3px;
  background: rgba(255,255,255,.95); border-radius: 3px;
}
.tile.special.crossBomb .tile-badge {
  border: 3px dashed rgba(255,255,255,.95);
}
.tile.special.prism .tile-inner { background: conic-gradient(#FDE3E0, #E1F0FA, #E3F4E8, #FdF3DC, #ECE5F8, #FDE3E0); }
.tile.special.prism .glyph { width: 58%; height: 58%; filter: drop-shadow(0 1px 2px rgba(120,96,60,.3)); }
.tile.special.prism { animation: prismSpin 6s linear infinite; }
@keyframes prismSpin { to { transform: rotate(0); } }
.tile.special.prism .tile-inner { animation: prismGlow 1.6s ease-in-out infinite; }
@keyframes prismGlow {
  0%,100% { box-shadow: 0 3px 0 rgba(180,150,100,.25), 0 0 10px 2px rgba(255,255,255,.7); }
  50% { box-shadow: 0 3px 0 rgba(180,150,100,.25), 0 0 18px 5px rgba(245,185,63,.6); }
}
.tile.newSpecial .tile-inner { animation: specialBorn .5s cubic-bezier(.2,.8,.4,1.4); }
@keyframes specialBorn {
  0% { transform: scale(.4) rotate(-90deg); }
  60% { transform: scale(1.2) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}

/* 棋盘震动 */
.board-wrap.shake { animation: boardShake .35s ease; }
@keyframes boardShake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-5px, 2px); }
  45% { transform: translate(4px, -2px); }
  70% { transform: translate(-3px, 1px); }
}

/* 连击气泡 */
.combo-pop {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  z-index: 20; pointer-events: none;
  background: var(--c-y); color: #fff;
  font-size: 18px; font-weight: 900; letter-spacing: 1px;
  padding: 5px 16px; border-radius: 999px;
  box-shadow: var(--shadow-lift);
  text-shadow: 0 1px 2px rgba(180,110,20,.4);
  animation: comboPop .9s cubic-bezier(.2,.8,.4,1.4) both;
}
.combo-pop.small { font-size: 14px; padding: 4px 12px; }
@keyframes comboPop {
  0% { transform: translateX(-50%) scale(.3); opacity: 0; }
  25% { transform: translateX(-50%) scale(1.15); opacity: 1; }
  40% { transform: translateX(-50%) scale(1); }
  75% { opacity: 1; }
  100% { transform: translateX(-50%) translateY(-18px) scale(.9); opacity: 0; }
}

/* --- 英雄区 --- */
.heroes {
  width: 100%; padding: 6px 12px 8px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
.hero {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  cursor: pointer; position: relative;
  border-radius: 14px; padding: 4px 2px 3px;
  transition: background .2s;
}
.hero:active { transform: scale(.95); }
.hero-name { font-size: 10px; font-weight: 800; color: var(--ink-soft); line-height: 1.1; }
.hero-ring { position: relative; width: 46px; height: 46px; flex: none; }
.hero-ring svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.hero-face {
  position: absolute; inset: 6px; border-radius: 50%;
  overflow: hidden; background: #FFF;
  box-shadow: 0 2px 6px rgba(120,96,60,.2);
}
.hero-face svg { width: 100%; height: 100%; }
/* --- 英雄独立生命 / 技能能量 / 释放按钮 --- */
.hero-hp {
  width: 100%; height: 11px; background: var(--hp-bg);
  border-radius: 999px; position: relative; overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(150,100,80,.2);
}
.hero-hp-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  background: linear-gradient(180deg, #FF9C90, var(--c-r));
  border-radius: 999px;
  transition: width .4s cubic-bezier(.3,1,.4,1);
}
.hero-hp-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 900; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35); letter-spacing: .3px;
}
.hero-energy {
  width: 100%; height: 6px; background: #EFE3CB;
  border-radius: 999px; overflow: hidden;
}
.hero-energy-fill {
  height: 100%; width: 0%;
  border-radius: 999px;
  transition: width .4s cubic-bezier(.3,1,.4,1);
}
.hero-cast {
  font-family: var(--f);
  border: none; border-radius: 999px;
  width: 100%; padding: 3px 0 2px; margin-top: 1px;
  font-size: 10px; font-weight: 900; letter-spacing: 2px;
  color: var(--ink-faint); background: #EFE3CB;
  transition: background .2s, color .2s, box-shadow .2s;
}
.hero-cast.ready {
  background: var(--c-y); color: #fff;
  box-shadow: 0 2px 8px rgba(245,185,63,.5);
  animation: castPulse 1.2s ease-in-out infinite;
}
@keyframes castPulse {
  0%,100% { box-shadow: 0 2px 8px rgba(245,185,63,.45); }
  50% { box-shadow: 0 4px 14px rgba(245,185,63,.85); }
}
/* 晕厥：灰化禁用 */
.hero.ko { opacity: .55; filter: grayscale(.85); }
.hero.ko .hero-cast { background: #E5DED0; color: var(--ink-faint); animation: none; }
/* 受击闪红 */
.hero.hurt { animation: heroHurt .4s ease; }
@keyframes heroHurt {
  0%,100% { filter: none; }
  30%,70% { filter: drop-shadow(0 0 7px rgba(242,118,107,.9)); }
}
.hero.ready .hero-face { box-shadow: 0 0 0 3px #fff, 0 0 14px 3px rgba(245,185,63,.75); }
.hero.ready { animation: heroReady 1.5s ease-in-out infinite; border-radius: 14px; }
@keyframes heroReady {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.hero.ready::after {
  content: "就绪"; position: absolute; top: -4px; right: 2px;
  background: var(--c-y); color: #fff; font-size: 9px; font-weight: 900;
  border-radius: 999px; padding: 1px 6px; box-shadow: var(--shadow-soft);
}
.hero.casting .hero-ring { animation: heroCast .6s ease; }
@keyframes heroCast {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); filter: brightness(1.3); }
  100% { transform: scale(1); }
}
.hero.flash .hero-face { animation: heroFlash .8s ease; }
@keyframes heroFlash {
  0%,100% { box-shadow: 0 2px 6px rgba(120,96,60,.2); }
  50% { box-shadow: 0 0 0 3px #fff, 0 0 20px 6px var(--hero-glow, rgba(245,185,63,.8)); }
}

/* --- 目标行（HUD 下方，单行） --- */
.hud-objective {
  width: 100%; padding: 0 16px 2px;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  font-size: 11px; color: var(--ink-soft); font-weight: 700;
  line-height: 1.2; min-height: 15px;
}
.hud-objective .obj { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.hud-objective .obj svg { width: 12px; height: 12px; flex: none; }
.hud-objective .obj.done { color: var(--c-g-deep); text-decoration: line-through; opacity: .8; }

/* --- 战斗底部：提示按钮 + 上下文提示 --- */
.battle-foot {
  width: 100%; padding: 2px 16px 10px;
  display: flex; align-items: center; gap: 10px;
}
.btn-hint { flex: none; padding: 7px 14px; font-size: 13px; }
.battle-tip {
  flex: 1; min-width: 0;
  font-size: 11px; font-weight: 700; color: var(--ink-faint);
  line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .2s;
}
.battle-tip.warn { color: var(--c-r-deep); animation: tipWarn 1s ease-in-out infinite; }
@keyframes tipWarn { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.battle-tip.go { color: #C07A15; }

/* ==========================================================
   教程引导
   ========================================================== */
.guide-layer { position: fixed; inset: 0; z-index: 40; pointer-events: none; max-width: 520px; margin: 0 auto; }
.guide-bubble {
  position: absolute; left: 50%; bottom: 26%;
  transform: translateX(-50%);
  background: #FFF; border-radius: 16px; padding: 12px 20px;
  box-shadow: var(--shadow-lift);
  font-size: 15px; font-weight: 800; color: var(--ink);
  white-space: nowrap; max-width: 90%;
  border: 2px solid var(--line);
  animation: bubbleIn .4s cubic-bezier(.2,.8,.4,1.3) both;
}
.guide-bubble::after {
  content: ""; position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%);
  border: 9px solid transparent; border-top-color: #fff; border-bottom: 0;
}
@keyframes bubbleIn { from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.85); } to { opacity: 1; transform: translateX(-50%); } }
.guide-hand {
  position: absolute; width: 44px; height: 44px;
  z-index: 41;
  filter: drop-shadow(0 4px 8px rgba(120,96,60,.3));
  animation: handTap 1.2s ease-in-out infinite;
}
.guide-hand svg { width: 100%; height: 100%; }
@keyframes handTap {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
  55% { transform: translate(0, 6px) scale(.88); opacity: .85; }
}

/* ==========================================================
   覆盖层 & 面板
   ========================================================== */
.overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(91, 74, 63, .38);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fadeIn .25s ease both;
}
.panel {
  background: var(--panel); border-radius: 26px;
  box-shadow: var(--shadow-lift);
  padding: 26px 24px;
  width: 100%; max-width: 400px;
  max-height: 86vh; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  animation: panelIn .35s cubic-bezier(.2,.8,.4,1.25) both;
  scrollbar-width: none;
}
.panel::-webkit-scrollbar { display: none; }
@keyframes panelIn { from { opacity: 0; transform: translateY(30px) scale(.9); } to { opacity: 1; transform: none; } }
.panel-title { font-size: 22px; letter-spacing: 4px; }
.panel-sub { font-size: 12px; color: var(--ink-soft); margin-top: -8px; }

/* --- 祝福三选一 --- */
.bless-cards { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.bless-card {
  display: flex; align-items: center; gap: 14px;
  background: #FFFDF6; border-radius: 18px;
  border: 2px solid var(--line);
  padding: 14px 16px; cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  text-align: left;
}
.bless-card:active { transform: scale(.96); }
.bless-card:hover { border-color: var(--c-y); box-shadow: var(--shadow-lift); }
.bless-ic {
  width: 54px; height: 54px; flex: none;
  border-radius: 16px; background: #FFF;
  box-shadow: var(--shadow-soft);
  padding: 8px;
}
.bless-ic svg { width: 100%; height: 100%; }
.bless-name { font-size: 16px; font-weight: 900; }
.bless-desc { font-size: 12px; color: var(--ink-soft); margin-top: 3px; line-height: 1.4; }
.bless-card.picked { border-color: var(--c-g); animation: blessPick .5s ease both; }
@keyframes blessPick {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); box-shadow: 0 0 24px 6px rgba(109,192,135,.5); }
  100% { transform: scale(1); }
}

/* --- 彩虹核心颜色选择 --- */
.prism-panel { max-width: 360px; }
.prism-colors { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: 100%; }
.prism-color {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: #FFFDF6; border: 2px solid var(--line); border-radius: 16px;
  padding: 10px 8px 8px; cursor: pointer; min-width: 60px; flex: 1; max-width: 88px;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  animation: riseIn .3s ease both;
}
.prism-color:nth-child(2) { animation-delay: .04s; }
.prism-color:nth-child(3) { animation-delay: .08s; }
.prism-color:nth-child(4) { animation-delay: .12s; }
.prism-color:nth-child(5) { animation-delay: .16s; }
.prism-color:active { transform: scale(.9); }
.prism-color:hover { border-color: var(--c-y); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.prism-color .pc-glyph { width: 40px; height: 40px; }
.prism-color .pc-glyph svg { width: 100%; height: 100%; }
.prism-color .pc-name { font-size: 12px; font-weight: 800; color: var(--ink-soft); }

/* --- 结算 --- */
.result-stars { display: flex; gap: 10px; height: 56px; align-items: center; }
.result-stars .star { width: 48px; height: 48px; opacity: .25; transform: scale(.8); }
.result-stars .star svg { width: 100%; height: 100%; }
.result-stars .star.lit { opacity: 1; animation: starPop .5s cubic-bezier(.2,.8,.4,1.5) both; }
@keyframes starPop { from { transform: scale(.2) rotate(-40deg); } to { transform: scale(1) rotate(0); } }
.result-title { font-size: 26px; letter-spacing: 6px; }
.result-title.win { color: var(--c-g-deep); }
.result-title.lose { color: var(--ink-soft); }
.result-score { font-size: 13px; color: var(--ink-soft); }
.result-objs { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.result-obj {
  display: flex; align-items: center; gap: 8px;
  background: #FFFDF6; border-radius: 12px; padding: 8px 14px;
  font-size: 13px; font-weight: 700; color: var(--ink-soft);
  border: 1.5px solid var(--line);
}
.result-obj svg { width: 15px; height: 15px; flex: none; }
.result-obj.done { color: var(--c-g-deep); border-color: #CFEBD8; background: #F2FBF4; }
.result-stats {
  width: 100%; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.stat-chip {
  background: #FFFDF6; border-radius: 12px; padding: 6px 12px;
  font-size: 11px; color: var(--ink-soft); font-weight: 800;
  border: 1.5px solid var(--line);
}
.stat-chip b { color: var(--ink); }
.result-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* --- 怪物详情 --- */
.monster-panel { text-align: center; }
.md-sprite { width: 130px; height: 130px; margin: 0 auto; }
.md-sprite svg { width: 100%; height: 100%; overflow: visible; }
.md-name { font-size: 20px; font-weight: 900; }
.md-tags { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.md-tag {
  display: flex; align-items: center; gap: 4px;
  background: #FFFDF6; border: 1.5px solid var(--line); border-radius: 999px;
  padding: 4px 12px; font-size: 12px; font-weight: 800; color: var(--ink-soft);
}
.md-tag svg { width: 15px; height: 15px; }
.md-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.6; width: 100%; }
.md-next {
  width: 100%; background: #FFF6E3; border: 1.5px solid #F3D9A8; border-radius: 14px;
  padding: 10px 14px; font-size: 13px; font-weight: 700; color: #A0691A;
  display: flex; align-items: center; gap: 8px; text-align: left;
}
.md-next svg { width: 18px; height: 18px; flex: none; }

/* --- 祝福清单 --- */
.buffs-list { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.buff-row {
  display: flex; align-items: center; gap: 12px;
  background: #FFFDF6; border-radius: 14px; padding: 8px 12px;
  border: 1.5px solid var(--line);
}
.buff-row .b-ic { width: 34px; height: 34px; flex: none; }
.buff-row .b-ic svg { width: 100%; height: 100%; }
.buff-row .b-name { font-size: 13px; font-weight: 900; }
.buff-row .b-desc { font-size: 11px; color: var(--ink-soft); }
.buff-row .b-lv {
  margin-left: auto; background: var(--c-y); color: #fff;
  border-radius: 999px; font-size: 11px; font-weight: 900; padding: 2px 8px; flex: none;
}
.buffs-empty { font-size: 13px; color: var(--ink-faint); padding: 20px; }

/* --- 章节过场 --- */
.chapter-panel { text-align: center; }
.chapter-ic { width: 90px; height: 90px; }
.chapter-ic svg { width: 100%; height: 100%; }
.chapter-name { font-size: 26px; letter-spacing: 8px; }
.chapter-sub { font-size: 13px; color: var(--ink-soft); letter-spacing: 2px; }

/* --- 战斗暂停 --- */
.pause-panel { max-width: 340px; }
.pause-panel .btn { width: 100%; }

/* --- 存档迁移 --- */
.save-panel { max-width: 380px; }
.save-section {
  width: 100%; display: flex; flex-direction: column; gap: 8px;
  background: #FFFDF6; border: 1.5px solid var(--line); border-radius: 16px;
  padding: 12px 14px;
}
.save-sec-title {
  font-size: 12px; font-weight: 900; color: var(--ink-soft);
  letter-spacing: 1px; display: flex; align-items: center; gap: 6px;
}
.save-sec-title::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-y); box-shadow: 0 0 6px 2px rgba(245,185,63,.5);
}
.save-panel textarea {
  width: 100%; height: 64px; resize: none;
  background: #FDF9EF; border: 1.5px solid var(--line); border-radius: 10px;
  font: 10px/1.5 ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  color: var(--ink-soft); padding: 8px 10px;
  word-break: break-all; -webkit-user-select: text; user-select: text;
}
.save-panel textarea:focus { outline: none; border-color: var(--c-y); }
.save-panel .btn { width: 100%; }

/* ==========================================================
   特效层
   ========================================================== */
.fx { position: absolute; z-index: 30; pointer-events: none; }

.fx-projectile {
  width: 26px; height: 26px;
  filter: drop-shadow(0 2px 4px rgba(120,96,60,.35));
}
.fx-projectile svg { width: 100%; height: 100%; }
.fx-projectile.big { width: 34px; height: 34px; }

/* 弹道拖尾光点 */
.fx-trail {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  z-index: 29; pointer-events: none;
  filter: blur(1px);
  animation: trailFade .32s ease-out both;
}
@keyframes trailFade {
  0% { transform: translate(-50%,-50%) scale(.9); opacity: .85; }
  100% { transform: translate(-50%,-50%) scale(.15); opacity: 0; }
}

/* 消除粒子迸发 */
.fx-pop {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  z-index: 31; pointer-events: none;
  animation: popFly .5s cubic-bezier(.15,.75,.35,1) both;
}
@keyframes popFly {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--px), var(--py)) scale(.15); opacity: 0; }
}

/* 命中冲击闪光 */
.fx-impact {
  position: absolute; z-index: 33; pointer-events: none; border-radius: 50%;
  animation: impactBurst .4s ease-out both;
}
@keyframes impactBurst {
  0% { transform: translate(-50%,-50%) scale(.3); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1.25); opacity: 0; }
}

/* 技能：全屏色彩涟漪 */
.fx-skill-flash {
  position: absolute; inset: 0; pointer-events: none;
  animation: skillFlash .6s ease-out both;
}
@keyframes skillFlash {
  0% { opacity: .8; }
  100% { opacity: 0; }
}

/* 技能：英雄能量爆发环 */
.fx-skill-ring {
  position: absolute; width: 150px; height: 150px; border-radius: 50%;
  border: 4px solid #F5B93F; pointer-events: none;
  animation: skillRing .6s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes skillRing {
  0% { transform: translate(-50%,-50%) scale(.2); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1.15); opacity: 0; }
}

/* 技能：命中冲击波 */
.fx-shockwave {
  position: absolute; width: 140px; height: 140px; border-radius: 50%;
  border: 4px solid #fff; pointer-events: none;
  animation: shockwave .5s ease-out both;
}
@keyframes shockwave {
  0% { transform: translate(-50%,-50%) scale(.15); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1); opacity: 0; }
}

.fx-dmg {
  position: absolute;
  font-size: 17px; font-weight: 900;
  color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.18), 0 0 8px rgba(255,255,255,.5);
  padding: 2px 10px; border-radius: 999px;
  white-space: nowrap; z-index: 32;
  pointer-events: none;
  animation: dmgFloat 1s cubic-bezier(.2,.6,.4,1) both;
}
.fx-dmg.r { background: var(--c-r); }
.fx-dmg.b { background: var(--c-b); }
.fx-dmg.g { background: var(--c-g); }
.fx-dmg.y { background: var(--c-y); }
.fx-dmg.p { background: var(--c-p); }
.fx-dmg.big { font-size: 21px; padding: 3px 14px; }
.fx-dmg.weak { background: var(--c-y); animation: dmgFloatWeak 1.1s cubic-bezier(.2,.6,.4,1) both; }
@keyframes dmgFloat {
  0% { transform: translate(-50%, 0) scale(.5); opacity: 0; }
  18% { transform: translate(-50%, -12px) scale(1.15); opacity: 1; }
  35% { transform: translate(-50%, -16px) scale(1); }
  100% { transform: translate(-50%, -46px) scale(.95); opacity: 0; }
}
@keyframes dmgFloatWeak {
  0% { transform: translate(-50%, 0) scale(.4); opacity: 0; }
  18% { transform: translate(-50%, -14px) scale(1.5); opacity: 1; }
  40% { transform: translate(-50%, -20px) scale(1.2); }
  100% { transform: translate(-50%, -52px) scale(1.1); opacity: 0; }
}
.fx-dmg.heal { background: var(--c-g); }
.fx-dmg.shield { background: var(--c-b); }
.fx-dmg.info { background: var(--ink-soft); font-size: 13px; }

/* 爆炸光环 */
.fx-boom {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,214,120,.7) 40%, rgba(255,180,80,0) 70%);
  animation: boomRing .5s ease-out both;
}
@keyframes boomRing {
  0% { transform: translate(-50%,-50%) scale(.2); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1.4); opacity: 0; }
}
.fx-spark {
  width: 9px; height: 9px; border-radius: 50%;
  pointer-events: none;
  animation: sparkFly .55s ease-out both;
}
@keyframes sparkFly {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--sx), var(--sy)) scale(.2); opacity: 0; }
}

/* 能量飞行光点 */
.fx-energy {
  width: 12px; height: 12px; border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 8px 2px currentColor;
  animation: energyFly .6s cubic-bezier(.3,.6,.6,1) both;
}
@keyframes energyFly {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--ex), var(--ey)) scale(.5); opacity: .2; }
}

/* 技能全屏效果 */
.fx-skill {
  position: fixed; inset: 0; z-index: 45; pointer-events: none;
  max-width: 520px; margin: 0 auto;
}
.fx-slash {
  position: absolute; width: 150px; height: 150px;
  animation: slashSwing .45s cubic-bezier(.2,.7,.4,1) both;
}
.fx-slash svg { width: 100%; height: 100%; }
@keyframes slashSwing {
  0% { transform: translate(-50%,-50%) scale(.3) rotate(-30deg); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1.5) rotate(15deg); opacity: 0; }
}
.fx-skill-banner {
  position: absolute; top: 22%; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  background: #FFF; border-radius: 999px; padding: 8px 24px;
  box-shadow: var(--shadow-lift);
  font-size: 17px; font-weight: 900; color: var(--ink);
  animation: skillBanner 1.1s ease both;
  white-space: nowrap;
}
.fx-skill-banner .sb-glyph { width: 30px; height: 30px; }
.fx-skill-banner .sb-glyph svg { width: 100%; height: 100%; }
@keyframes skillBanner {
  0% { transform: translateX(-50%) scale(.5); opacity: 0; }
  15% { transform: translateX(-50%) scale(1.08); opacity: 1; }
  25% { transform: translateX(-50%) scale(1); }
  80% { opacity: 1; }
  100% { transform: translateX(-50%) translateY(-12px); opacity: 0; }
}

/* 波次切换横幅 */
.wave-banner {
  position: absolute; top: 34%; left: 50%;
  transform: translateX(-50%);
  z-index: 46; pointer-events: none;
  background: linear-gradient(135deg, #F2766B, #D95A50);
  color: #fff; font-size: 19px; font-weight: 900; letter-spacing: 2px;
  padding: 12px 30px; border-radius: 999px;
  box-shadow: var(--shadow-lift), 0 6px 22px rgba(217,90,80,.5);
  white-space: nowrap;
  text-shadow: 0 2px 4px rgba(140,40,30,.4);
  animation: waveBanner 1.75s cubic-bezier(.2,.8,.4,1.1) both;
}
@keyframes waveBanner {
  0% { opacity: 0; transform: translateX(-50%) scale(.4) rotate(-4deg); }
  18% { opacity: 1; transform: translateX(-50%) scale(1.12) rotate(1deg); }
  30% { transform: translateX(-50%) scale(1) rotate(0); }
  80% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-24px) scale(.92); }
}

/* 教程完成 / 通用 toast */
.toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%);
  z-index: 70; background: #FFF; border-radius: 999px;
  padding: 10px 22px; box-shadow: var(--shadow-lift);
  font-size: 14px; font-weight: 800; color: var(--ink);
  animation: toastIn .35s cubic-bezier(.2,.8,.4,1.3) both;
  white-space: nowrap; pointer-events: none;
  border: 2px solid var(--line);
}
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(16px); } to { opacity: 1; transform: translateX(-50%); } }

/* 石化提示 */
.tile.stone .tile-inner::after {
  content: ""; position: absolute; inset: 20%;
  background: radial-gradient(circle, transparent 40%, rgba(150,140,120,.25));
}

/* ---------- 棋盘禁用态 ---------- */
.board.locked { pointer-events: none; }

/* ---------- 响应式 ---------- */
@media (max-width: 400px) {
  .game-title { font-size: 40px; letter-spacing: 7px; }
  .hero-ring { width: 42px; height: 42px; }
  .hero-face { inset: 5px; }
  .hud-moves { width: 56px; }
  .heroes { gap: 5px; }
  .hero-name { font-size: 9px; }
  .hero-hp-text { font-size: 7px; }
}

@media (min-height: 760px) {
  .monsters { min-height: 128px; }
}

/* 矮屏：压缩怪物/英雄区，保证 8 行棋盘放得下 */
@media (max-height: 700px) {
  .monsters { min-height: 92px; }
  .hero-ring { width: 40px; height: 40px; }
  .hero-face { inset: 5px; }
  .heroes { padding: 4px 12px 6px; gap: 6px; }
  .hud { padding: 6px 12px 3px; }
  .hud-moves { height: 46px; }
  .toast { bottom: 62px; }
}