:root {
  --bg: #1a1714;
  --panel: #2a2520;
  --panel2: #332c25;
  --ink: #f3ece2;
  --ink-dim: #b7ab9b;
  --blush: #F4C2C2;
  --shu: #D9543F;
  --gold: #C9A24B;
  --line: #4a4036;
  --ok: #6fcf97;
  --bad: #eb5757;

  /* ===== UI 设计规范令牌（Design Tokens）· 单一事实来源 ===== */
  /* 间距：4px 基准梯度 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-2h: 10px;   /* HUD/状态条内紧凑间距 */
  /* 圆角：统一梯度（禁止业务里写裸圆角数字） */
  --r-xs: 6px;     /* 数量徽章、进度条端点、小 chip */
  --r-sm: 8px;     /* 小标签、进度条、内嵌元素 */
  --r-md: 12px;    /* icon-btn、按钮、内卡片 */
  --r-lg: 16px;    /* 道具卡、状态条、对战栏小圆角 */
  --r-xl: 20px;    /* 棋盘、对战栏主圆角 */
  --r-pill: 999px; /* 胶囊标签、圆形头像/图标(50%) */
  /* 描边宽度 */
  --bw-thin: 1.5px;
  --bw-mid: 2px;
  --bw-thick: 2.5px;
  /* 阴影 / 浮起层级（Elevation） */
  --sh-sm: 0 2px 6px rgba(0,0,0,.10);   /* 按钮、轻浮起 */
  --sh-md: 0 4px 12px rgba(0,0,0,.16);  /* 对战栏、状态条、棋盘 */
  --sh-lg: 0 20px 60px rgba(0,0,0,.50); /* 弹窗 / 模态 */
  /* 字号（10 级梯度） */
  --fs-display: 30px;  /* 选关大标题、胜利大字 */
  --fs-h1: 26px;       /* 弹窗主标题 */
  --fs-title: 20px;    /* 章节标题 */
  --fs-sub: 17px;      /* PK 比分、子标题 */
  --fs-lg: 15px;       /* 教学/道具开关/分享按钮 */
  --fs-body: 14px;     /* 正文、按钮 */
  --fs-sm: 12px;       /* 标签、说明 */
  --fs-cap: 11px;      /* 道具标签、微说明、角标 */
  --fs-xs: 10px;       /* 棋格 tier 角标、PK 名 */
  --fs-micro: 9px;     /* vs 字、连点计数 */
  /* 层级 z-index（全项目统一，禁止裸写） */
  --z-stage: 0;     /* 章节背景层 */
  --z-wrap: 2;      /* 游戏内容容器 */
  --z-menu: 15;     /* 选关页 */
  --z-loading: 30;  /* 加载层 */
  --z-tutorial: 25; /* 教学覆盖层 */
  --z-prop: 5;      /* 悬浮道具栏 */
  --z-banner: 6;    /* 悬浮倍率栏 */
  --z-modal: 100;   /* 弹窗遮罩 */
  --z-toast: 200;   /* 提示 */
  --z-ghost: 9000;  /* 拖动幽灵 */
  /* 以下为统一代换时补入的离群值令牌（规范梯度外的个别尺寸，值完全相等，零视觉回归） */
  --r-3: 3px;
  --r-5: 5px;
  --fs-36: 36px;
  --fs-28: 28px;
  --sp-18: 18px;
  --sp-14: 14px;
  --sp-22: 22px;
  --sp-80: 80px;
  --sp-9: 9px;
  --sp-11: 11px;
  --sp-26: 26px;
  --sp-7: 7px;
  --sp-20: 20px;
  --sp-28: 28px;
  --sp-46: 46px;

}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: "Zen Maru Gothic", "M PLUS Rounded 1c", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  overflow: hidden;
}
#app {
  position: relative; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center;
}
/* 章节背景独立层：旧层垫底、新层淡入覆盖，杜绝切章闪烁 */
.stage-bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: var(--bg); /* 兜底，避免任何空隙露黑 */
}
.stage-bg .bg-layer {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity .5s ease;   /* 交叉淡入：旧层不消失，新层淡入覆盖 */
  will-change: opacity;
}
.stage-bg .bg-layer.show { opacity: 1; }
.stage-bg::after {
  content: ""; position: absolute; inset: 0;
  /* 顶部稍暗保证 HUD/章节名可读，底部更亮让背景尽可能透出来 */
  background:
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.08) 38%, rgba(0,0,0,.02) 78%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.wrap { position: relative; z-index: 2; width: min(600px, 98vw); padding: var(--sp-1) 0 var(--sp-1); display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; min-height: 0; }

/* 顶部 HUD */
.hud { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2h); }
.hud .chapter { font-size: var(--fs-title); font-weight: 700; letter-spacing: 1px; }
.hud .chapter small { display:block; font-size: var(--fs-cap); color: var(--ink-dim); font-weight: 400; letter-spacing: 0; }
.hud-right { display: flex; align-items: center; gap: var(--sp-2h); }
.icon-btn {
  width: 40px; height: 40px; flex: none; border-radius: var(--r-md); cursor: pointer;
  border: 1px solid var(--line); background: var(--panel2); color: var(--ink);
  font-size: var(--fs-sub); line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: filter .15s, transform .08s;
}
.icon-btn:active { transform: translateY(1px); filter: brightness(1.15); }
/* 暂停按钮：内联 SVG + 章节主色柔圆形，完全无白底，能跟任意底色融合 */
.icon-btn.has-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ch-accent, #ff9bbd) 22%, transparent);
  border: var(--bw-thin) solid color-mix(in srgb, var(--ch-accent, #ff9bbd) 45%, transparent);
  color: color-mix(in srgb, var(--ch-accent, #ff9bbd) 60%, #000);
  padding: 0; overflow: visible; box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.55),
    0 2px 6px rgba(0,0,0,.1);
  transition: filter .15s, transform .08s, background .15s;
}
.icon-btn.has-icon:active { filter: brightness(1.08); transform: translateY(1px); }
.pause-svg { width: 22px; height: 22px; display: block; fill: currentColor; pointer-events: none; }
.icon-btn.has-icon .pause-svg { display: none; }
.icon-btn.has-icon.show-pause .pause-svg.pause-icon { display: block; }
.icon-btn.has-icon.show-play .pause-svg.play-icon   { display: block; }
@keyframes pulse { 50% { opacity: .45; } }

/* 轻对战：左右 PK 擂台 —— 半透底（背景能模糊透出）+ 主色加深边（不论底色多浅都立得住） */
.battle {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ch-accent, #ff9bbd) 42%, transparent) 0%, color-mix(in srgb, var(--ch-accent, #ff9bbd) 26%, transparent) 50%, color-mix(in srgb, var(--ch-accent, #ff9bbd) 36%, transparent) 100%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  /* 主色 70% + 黑 30% → 比 accent 深一档的描边色，对浅底背景也能看清 */
  border: var(--bw-mid) solid color-mix(in srgb, var(--ch-accent, #ff9bbd) 70%, #000 30%);
  border-radius: var(--r-xl);
  padding: 5px var(--sp-3) var(--sp-1);
  color: #2a2520;
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.55),  /* 内 1.5px 白亮边，让轮廓更跳 */
    inset 0 1px 0 rgba(255,255,255,.6),
    var(--sh-md);
  position: relative;
  overflow: hidden;
}
.battle::before {
  content: "";
  position: absolute;
  top: 1px; left: 14px; right: 14px;
  height: 3px;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0));
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  pointer-events: none;
  z-index: 0;
}
.pk {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  position: relative;
  z-index: 1;
}
.pk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.pk-me {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}
.pk-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ch-accent, #ff9bbd) 55%, #fff) 0%, color-mix(in srgb, var(--ch-accent, #ff9bbd) 25%, #fff) 100%);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--ch-accent, #ff9bbd) 28%, transparent), inset 0 1px 0 rgba(255,255,255,.7);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-body); line-height: 1;
  border: var(--bw-thin) solid rgba(255,255,255,.9);
  flex-shrink: 0;
}
.pk-score-wrap {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.pk-score-now {
  font-size: var(--fs-sub);
  font-weight: 900;
  /* 浅色章节主题（如冬至 #B8A8CC 等）下，原 55% 黑混色仍偏浅、与浅背景糊在一起；
     改为仅 30% 主题色 + 近黑墨色，保证 24 章任何主题下都是高对比深字 */
  color: color-mix(in srgb, var(--ch-accent, #ff9bbd) 30%, #241a12);
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
  line-height: 1.05;
}
.pk-score-slash, .pk-score-unit {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #7a6450;
}
.pk-score-target {
  font-size: var(--fs-body);
  font-weight: 900;
  color: #5c4a3a;
  line-height: 1.05;
}
.pk-timer {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px var(--sp-2);
  border-radius: var(--r-md);
  background: linear-gradient(135deg, color-mix(in srgb, var(--ch-accent, #ff9bbd) 45%, #fff) 0%, color-mix(in srgb, var(--ch-accent, #ff9bbd) 16%, #fff) 100%);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--ch-accent, #ff9bbd) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.7);
  border: var(--bw-thin) solid rgba(255,255,255,.9);
  flex-shrink: 0;
}
.vs-word {
  font-size: var(--fs-micro); font-weight: 800;
  color: color-mix(in srgb, var(--ch-accent, #ff9bbd) 65%, #000);
  line-height: 1;
}
.vs-time {
  font-size: var(--fs-body); font-weight: 900;
  color: color-mix(in srgb, var(--ch-accent, #ff9bbd) 55%, #000);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  transition: color .2s ease;
}
.vs-time.low {
  color: var(--bad);
  animation: pulse .8s infinite;
}

.pk-track {
  position: relative;
  height: 10px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.35);
  box-shadow: inset 0 2px 3px color-mix(in srgb, var(--ch-accent, #ff9bbd) 28%, transparent), inset 0 -1px 0 rgba(255,255,255,.5);
  overflow: visible;
}
.pk-fill {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 0;
  border-radius: var(--r-sm);
  transition: width .3s ease;
}
.pk-fill.me {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ch-accent, #ff9bbd) 72%, #fff) 0%, var(--ch-accent, #ff9bbd) 55%, color-mix(in srgb, var(--ch-accent, #ff9bbd) 75%, #000) 100%);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--ch-accent, #ff9bbd) 65%, #000), 0 1px 2px color-mix(in srgb, var(--ch-accent, #ff9bbd) 45%, transparent);
}
.pk-fill.me::after {
  content: '';
  position: absolute;
  inset: 2px 2px 50% 2px;
  background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0));
  border-radius: var(--r-xs) 0 0 0;
}
.pk-target {
  position: absolute;
  right: 0; top: -4px; bottom: -4px;
  width: 16px;
  margin-right: -8px;
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
  pointer-events: none;
}
.pk-target-star {
  width: 16px; height: 16px;
  background: var(--ch-accent, #ff9bbd);
  border: var(--bw-mid) solid #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-micro); line-height: 1;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ch-accent, #ff9bbd) 70%, #000), 0 2px 5px color-mix(in srgb, var(--ch-accent, #ff9bbd) 40%, transparent);
  color: #fff;
}
.pk-target-txt {
  text-align: center;
  font-size: var(--fs-micro);
  color: #7a6450;
  font-weight: 600;
}

/* 棋盘 —— 半透底（章节背景模糊透出）+ 主色加深边 + 白色内描边
   外阴影收窄、降透明度：在浅天空背景上读起来不再像四个深色弧形 */
.board-wrap { display: flex; justify-content: center; flex: 1 1 auto; align-items: center; min-height: 0; overflow: hidden; position: relative; }
.board.enter { animation: boardIn .35s ease both; }
@keyframes boardIn {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.board {
  touch-action: none; user-select: none; -webkit-user-select: none;
  overscroll-behavior: none;
  display: grid; gap: var(--sp-2); padding: var(--sp-3);
  /* 背景提高不透明度（45%→72%），消除圆角处露底产生的暗角错觉 */
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ch-accent, #ff9bbd) 72%, transparent) 0%, color-mix(in srgb, var(--ch-accent, #ff9bbd) 56%, transparent) 50%, color-mix(in srgb, var(--ch-accent, #ff9bbd) 66%, transparent) 100%);
  /* 兜底色：万一 backdrop-filter 在某些浏览器渲染出穿透，圆形角处不会看到下层颜色 */
  background-color: color-mix(in srgb, var(--ch-accent, #ff9bbd) 38%, #fff);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: var(--bw-thick) solid color-mix(in srgb, var(--ch-accent, #ff9bbd) 75%, #000 25%);
  border-radius: var(--r-xl);
  width: min(460px, 94vw); max-height: 100%; box-sizing: border-box;
  touch-action: manipulation;
  /* 外阴影：8px→4px、24px blur→10px、20% alpha→8%，避免在浅底上读出"四角深色弧形" */
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.5),
    inset 0 2px 0 rgba(255,255,255,.55),
    0 4px 10px rgba(0,0,0,.08);
}
.cell {
  position: relative; border-radius: var(--r-lg);
  /* 空格子：~22% 主色染色 + 透明底，让背景模糊透出但格子轮廓清晰 */
  background: color-mix(in srgb, var(--ch-accent, #ff9bbd) 22%, transparent);
  border: var(--bw-mid) solid color-mix(in srgb, var(--ch-accent, #ff9bbd) 75%, #000 25%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.7),       /* 1px 白亮描边 */
    inset 0 1px 0 rgba(255,255,255,.5),
    0 2px 4px rgba(0,0,0,.08);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform .08s, box-shadow .15s, border-color .15s;
  overflow: hidden;
  /* 关键：棋盘格内禁止浏览器默认的触摸滚动/缩放，保证按下=点选、移动=拖拽的判定不被页面滚动干扰 */
  touch-action: none;
}
/* 按下瞬态反馈：轻微"凹陷"，与选中态(金色上浮)区分 —— 告诉用户"已按下，正等待判定点/拖" */
.cell.pressing {
  transform: scale(.94);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.6),
    inset 0 3px 6px rgba(0,0,0,.18),
    0 1px 2px rgba(0,0,0,.12);
  border-color: color-mix(in srgb, var(--ch-accent, #ff9bbd) 90%, #000 10%);
}
.cell:active { transform: scale(.96); }
.cell.filled {
  border-color: color-mix(in srgb, var(--ch-accent, #ff9bbd) 80%, #000 20%);
  background: color-mix(in srgb, var(--ch-accent, #ff9bbd) 32%, transparent);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.8),
    inset 0 1px 0 rgba(255,255,255,.6),
    0 2px 5px rgba(0,0,0,.12);
}
/* 选中态：白金双环 + 呼吸光晕，任何章节主色上都清晰可辨（区别于拖拽的绿/红高亮） */
.cell.selected {
  border-color: #fff;
  box-shadow:
    0 0 0 3px var(--gold),
    0 0 0 6px rgba(255,255,255,.92),
    0 0 22px rgba(201,162,75,.7);
  transform: translateY(-3px) scale(1.05);
  z-index: 5;
  animation: selPulse 1.1s ease-in-out infinite;
}
@keyframes selPulse {
  0%,100% { box-shadow: 0 0 0 3px var(--gold), 0 0 0 6px rgba(255,255,255,.85), 0 0 18px rgba(201,162,75,.55); }
  50%     { box-shadow: 0 0 0 3px var(--gold), 0 0 0 7px rgba(255,255,255,1), 0 0 28px rgba(201,162,75,.9); }
}
.cell .sprite {
  position: absolute; inset: 0;
  background-size: cover; background-repeat: no-repeat; background-position: center;
  border-radius: inherit;
  pointer-events: none;
  image-rendering: -webkit-optimize-contrast;
}
.cell.has-sprite { background: rgba(255,239,228,.55); border-color: rgba(217,109,142,.6); box-shadow: 0 4px 10px rgba(170,100,120,.18); }
.cell.has-sprite.selected { background: rgba(255,247,236,.7); }
.cell .tier {
  position: absolute; top: 3px; right: 5px; font-size: var(--fs-xs); font-weight: 700;
  color: #fff; background: rgba(0,0,0,.45); padding: 0 5px; border-radius: var(--r-xs);
}
.cell.merging .sprite { animation: pop .32s ease; }
@keyframes pop { 0%{transform:scale(.4);} 60%{transform:scale(1.18);} 100%{transform:scale(1);} }

/* 拖动合成：源格抬起 + 落点高亮 + 拖动幽灵 */
.cell.dragging-src { opacity: .35; transform: scale(.9); }
.cell.drop-merge { box-shadow: 0 0 0 3px #5fd39a, 0 0 18px rgba(95,211,154,.7) !important; border-color: #5fd39a; }
.cell.drop-move  { box-shadow: 0 0 0 3px var(--ch-accent, #ff9bbd), 0 0 18px rgba(255,143,171,.7) !important; border-color: var(--ch-accent, #ff9bbd); }
.cell.drop-bad   { box-shadow: 0 0 0 3px #e07a7a !important; border-color: #e07a7a; }
.drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.32));
  will-change: transform;
}
.drag-ghost .sprite {
  width: 100%; height: 100%;
  background-size: 100% 100%; background-repeat: no-repeat; background-position: center;
  border-radius: var(--r-lg);
}
.drag-ghost .tier {
  position: absolute; top: 3px; right: 5px; font-size: var(--fs-xs); font-weight: 700;
  color: #fff; background: rgba(0,0,0,.5); padding: 0 5px; border-radius: var(--r-xs);
}

/* 喷火龙幽灵：外层只负责定位（走 transform），动效/辉光交给内层 anchor
   —— 避免外层动画覆盖 inline 定位导致龙卡左上角的 bug */
.drag-ghost.dragon-ghost { overflow: visible; }
.dragon-anchor {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 0 16px rgba(255,130,30,.9)) drop-shadow(0 0 6px rgba(255,210,90,.7));
  animation: dragonFloat .55s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes dragonFloat {
  from { transform: rotate(-3deg) scale(1.04); }
  to   { transform: rotate(3deg)  scale(1.12); }
}
.dragon-sprite {
  width: 92%; height: 92%;
  background: url('../output/dragon_fire.png') center/100% 100% no-repeat;
  animation: dragonBreath .42s ease-in-out infinite alternate;
  position: relative; z-index: 3;
  border-radius: var(--r-lg);
}
@keyframes dragonBreath { from { transform: scale(1); } to { transform: scale(1.05); } }

/* 火流：从嘴前（右侧）喷出，旋转角度由 JS 写入 --fire-rot，实时指向被烧格 */
.dragon-fire {
  position: absolute; left: 74%; top: 40%;
  width: 150%; height: 56%;
  transform-origin: 0% 50%;
  transform: translate(0,-50%) rotate(var(--fire-rot, 0deg));
  pointer-events: none;
  background:
    radial-gradient(ellipse 28% 100% at 0% 50%, rgba(255,250,200,.98), rgba(255,190,50,.85) 16%, rgba(255,110,30,.65) 42%, rgba(255,50,15,.35) 68%, rgba(255,50,15,0) 100%),
    radial-gradient(ellipse 18% 70% at 38% 50%, rgba(255,235,160,.9), rgba(255,130,40,.55) 55%, rgba(255,60,15,0) 100%);
  filter: blur(1.5px) contrast(1.1) saturate(1.2);
  animation: dragonFireFlicker .16s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  opacity: .95;
  z-index: 2;
}
@keyframes dragonFireFlicker {
  from { opacity: .78; transform: translate(0,-50%) rotate(var(--fire-rot, 0deg)) scaleX(.9)  scaleY(.92); }
  to   { opacity: 1;   transform: translate(0,-50%) rotate(var(--fire-rot, 0deg)) scaleX(1.1) scaleY(1.12); }
}

/* 龙头下方「松手消失」提示 */
.dragon-cap {
  position: absolute; left: 50%; top: 100%;
  transform: translate(-50%, 6px);
  white-space: nowrap; font-size: var(--fs-xs); font-weight: 800; color: #fff;
  background: linear-gradient(180deg,#ff8a3d,#ff4a1a);
  padding: 2px 9px; border-radius: 999px;
  box-shadow: 0 3px 10px rgba(255,80,20,.55);
  z-index: 4;
  animation: dragonCapPulse .85s ease-in-out infinite;
}
@keyframes dragonCapPulse {
  0%,100% { transform: translate(-50%, 6px) scale(1); }
  50%     { transform: translate(-50%, 6px) scale(1.07); }
}

/* 松手消散：只动 opacity（不碰 transform，避免覆盖定位） */
.dragon-poof { opacity: 0; transition: opacity .28s ease-out; }

/* 蓄力期：火流收敛变暗、辉光脉动，明示「还没开始烧」 */
.dragon-ghost.charging .dragon-fire { opacity: .35; filter: blur(3px) brightness(.85); transform: translate(0,-50%) rotate(var(--fire-rot,0deg)) scaleX(.45); }
.dragon-ghost.charging .dragon-anchor { filter: drop-shadow(0 0 9px rgba(255,120,30,.6)) drop-shadow(0 0 4px rgba(255,200,90,.5)); animation: dragonChargePulse .42s ease-in-out infinite; }
@keyframes dragonChargePulse { 0%,100% { transform: rotate(-2deg) scale(1.0); } 50% { transform: rotate(2deg) scale(1.06); } }

/* 被烧格的橙光闪动 */
.cell.just-burned { animation: burnFlash .38s ease; }
@keyframes burnFlash {
  0%   { box-shadow: 0 0 0 0 rgba(255,140,40,0), inset 0 0 0 rgba(255,200,80,0); }
  35%  { box-shadow: 0 0 24px 5px rgba(255,150,60,.9), inset 0 0 18px rgba(255,210,90,.7); }
  100% { box-shadow: 0 0 0 0 rgba(255,140,40,0), inset 0 0 0 rgba(255,200,80,0); }
}

/* 喷火龙「预警圈」：即将被烧毁的邻格先亮起脉动红环，给玩家反应/躲避窗口 */
.cell.telegraph {
  z-index: 4;
  animation: telegraphPulse .45s ease-in-out infinite;
}
@keyframes telegraphPulse {
  0%,100% { box-shadow: 0 0 14px 3px rgba(255,120,40,.5), inset 0 0 16px rgba(255,170,60,.4); }
  50%     { box-shadow: 0 0 24px 7px rgba(255,70,15,.9), inset 0 0 22px rgba(255,120,40,.72); }
}

/* ============ 喷火龙 FX 层（全屏闪光 / 爆裂环 / 余烬 / 震屏） ============ */
.fx-flash {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background: rgba(255,150,60,0); mix-blend-mode: screen;
  animation: fxFlash .42s ease-out forwards;
}
@keyframes fxFlash {
  0%   { background: rgba(255,160,70,.55); }
  100% { background: rgba(255,160,70,0); }
}
.fx-burst { position: fixed; width: 0; height: 0; z-index: 9997; pointer-events: none; }
.fx-burst .fx-ring {
  position: absolute; left: 0; top: 0; width: 14px; height: 14px;
  margin: -7px 0 0 -7px; border-radius: 50%;
  border: 3px solid #ffb04a;
  box-shadow: 0 0 22px rgba(255,150,60,.9), inset 0 0 10px rgba(255,220,120,.6);
  animation: fxRing .55s ease-out forwards;
}
@keyframes fxRing {
  0%   { transform: scale(.4); opacity: 1; border-width: 4px; }
  100% { transform: scale(6.5); opacity: 0; border-width: 1px; }
}
.fx-burst .fx-flame {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%,-50%);
  font-size: 38px; filter: drop-shadow(0 0 8px rgba(255,160,60,.9));
  animation: fxFlame .5s ease-out forwards;
}
@keyframes fxFlame {
  0%   { transform: translate(-50%,-50%) scale(.4); opacity: 0; }
  30%  { transform: translate(-50%,-50%) scale(1.35); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1.7); opacity: 0; }
}
.fx-ember {
  position: fixed; width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: var(--c, #ffb04a);
  box-shadow: 0 0 8px var(--c, #ffb04a), 0 0 2px #fff;
  z-index: 9996; pointer-events: none;
  animation: fxEmber .8s ease-out forwards;
}
@keyframes fxEmber {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx,0), var(--dy,0)) scale(.15); opacity: 0; }
}
.fx-shake { animation: fxShake .26s ease; }
@keyframes fxShake {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-3px,1px); }
  40% { transform: translate(3px,-2px); }
  60% { transform: translate(-2px,2px); }
  80% { transform: translate(2px,-1px); }
}

/* 控制区 */
.controls { display: flex; gap: var(--sp-2); }
.controls + .controls { margin-top: var(--sp-2); }
.btn {
  flex: 1; padding: var(--sp-11) var(--sp-2h); border: none; border-radius: var(--r-md); cursor: pointer;
  font-family: inherit; font-size: var(--fs-body); font-weight: 700; color: #201a14;
  background: linear-gradient(180deg, #f6d9a8, var(--gold)); transition: transform .08s, filter .15s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { filter: grayscale(.6) brightness(.7); cursor: not-allowed; }
.btn.ghost { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); }
.btn.ad { background: linear-gradient(180deg, #ffd7c2, var(--shu)); color: #2a1410; }

/* 召唤按钮 · 看广告自动召唤时的「下一次召唤」倒计时 */
#btnSummon { position: relative; overflow: hidden; }
#btnSummon .summon-label { position: relative; z-index: 1; }
#btnSummon .summon-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: rgba(255,255,255,.42);
  border-right: 2px solid rgba(255,255,255,.85);
  pointer-events: none; transition: width .1s linear;
}
/* 自动召唤中保持彩色（不被 disabled 灰掉），让用户清楚看到在持续召唤 */
#btnSummon:disabled { filter: none; cursor: default; }
#btnSummon .summon-fill.soon { animation: fillBlink .35s ease-in-out infinite; }
@keyframes fillBlink { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* 控制区按钮统一固定高度 + 禁止换行，避免自动召唤长文案换行导致高度跳动 */
.controls .btn {
  height: 44px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap; overflow: hidden;
}
/* 自动召唤状态文案较长，略微缩小保证单行不溢出 */
#btnSummon .summon-label { font-size: var(--fs-sm); padding: 0 var(--sp-1); line-height: 1.1; }

/* Modal */
.modal-mask { position: absolute; inset: 0; z-index: 10; background: rgba(8,6,4,.72); display: none; align-items: center; justify-content: center; backdrop-filter: blur(3px); }
.modal-mask.show { display: flex; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; } }
.modal {
  width: min(420px, 88vw); background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: var(--sp-26) var(--sp-22); text-align: center; box-shadow: var(--sh-lg);
}
.modal h2 { margin: 0 0 6px; font-size: var(--fs-h1); }
.modal h2.win { color: var(--ok); }
.modal h2.lose { color: var(--bad); }
.modal p { color: var(--ink-dim); margin: 6px 0 var(--sp-18); font-size: var(--fs-body); line-height: 1.6; }
.modal .controls { margin-top: var(--sp-2); }
.modal .reward { font-size: var(--fs-sm); color: var(--gold); margin-bottom: var(--sp-14); }

/* toast — 卡通可爱：米白毛玻璃 + 章节主色边 + 弹跳入场 */
.toast {
  position: absolute; left: 50%; top: 5%;
  transform: translateX(-50%) translateY(-8px) scale(.92);
  z-index: var(--z-toast);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: linear-gradient(180deg, rgba(255,251,245,.96) 0%, rgba(255,235,236,.92) 100%);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #5a4636;
  padding: var(--sp-7) var(--sp-4) var(--sp-7) var(--sp-9);
  border: var(--bw-mid) solid var(--ch-accent, #ff9bbd);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: .02em;
  box-shadow:
    0 5px 0 color-mix(in srgb, var(--ch-accent, #ff9bbd) 28%, transparent),
    0 12px 26px rgba(170,100,120,.22),
    inset 0 1px 0 rgba(255,255,255,.75);
  max-width: min(94vw, 480px);
  white-space: nowrap;        /* 长文案（如章节跳转）强制单行，不再折行 */
  opacity: 0;
  transition: opacity .22s ease, transform .38s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.toast .ico {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ch-accent, #ff9bbd);
  border-radius: 50%;
  font-size: var(--fs-sm);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 3px rgba(0,0,0,.08);
  flex: none;
}
.toast .body { display: inline; }
.toast .chip {
  display: inline-block;
  margin-left: var(--sp-1);
  background: var(--ch-accent, #ff9bbd);
  color: #fff;
  padding: 2px var(--sp-9);
  border-radius: var(--r-pill);
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.toast.lose .chip {
  background: linear-gradient(135deg, #a8c0cf 0%, #7a96a8 100%);
}

/* 加载 */
#loading { position: absolute; inset: 0; z-index: 30; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-14); }
.spinner { width: 38px; height: 38px; border: 4px solid var(--line); border-top-color: var(--gold); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#loading p { color: var(--ink-dim); font-size: var(--fs-body); }

.share-row { display:flex; gap: var(--sp-2); justify-content:center; margin-top: var(--sp-2h); }
.share-row .btn { flex: none; padding: var(--sp-9) var(--sp-4); font-size: var(--fs-sm); }

/* 新手教学覆盖层（卡通可爱风，与 PK 条同源色温） */
.tutorial {
  position: absolute; inset: 0; z-index: 25;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,220,230,.18), rgba(255,235,210,.35));
  display: none; flex-direction: column; align-items: center; justify-content: center;
  /* padding-bottom 给 iOS 小横条和浏览器底部工具栏留位置；box 再用 max-height 留出 foot 空间 */
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  backdrop-filter: blur(4px);
}
.tutorial.show { display: flex; animation: fade .3s ease; }
.tutorial .box {
  background:
    linear-gradient(180deg, rgba(255,247,240,.95) 0%, rgba(255,229,236,.92) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: var(--bw-mid) solid rgba(255,184,209,.7);
  border-radius: var(--r-xl); padding: var(--sp-18) var(--sp-20) var(--sp-4);
  width: min(440px, 94vw);
  /* 留出底部悬浮条 + iOS 小横条 + 浏览器底部工具栏的位置，确保不被遮挡 */
  max-height: min(92vh, calc(100dvh - 150px)); overflow-y: auto;
  color: #5a4636;
  box-shadow:
    0 10px 0 rgba(217,109,142,.18),
    0 18px 40px rgba(170, 100, 120, .28),
    inset 0 1px 0 rgba(255,255,255,.7);
  text-align: center;
  scrollbar-width: thin;
}

/* 教程底部悬浮条：始终浮在教程卡片下方，不被浏览器底部 UI 遮挡 */
.tut-foot {
  width: min(440px, 94vw);
  flex-shrink: 0;
  margin-top: var(--sp-3);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tut-foot .tut-go {
  width: 100%;
  padding: var(--sp-14);
  font-size: var(--fs-lg);
  letter-spacing: 1px;
  /* 更"悬浮"的视觉：加暖色光晕，让按钮从背景中浮起 */
  box-shadow:
    0 8px 24px rgba(217,109,142,.42),
    0 4px 0 #d96d8e,
    0 1px 0 rgba(255,255,255,.5) inset;
  animation: tutGoFloat 2.4s ease-in-out infinite;
}
@keyframes tutGoFloat {
  0%,100% { transform: translateY(0); box-shadow: 0 8px 24px rgba(217,109,142,.42), 0 4px 0 #d96d8e, 0 1px 0 rgba(255,255,255,.5) inset; }
  50%     { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(217,109,142,.55), 0 6px 0 #d96d8e, 0 1px 0 rgba(255,255,255,.5) inset; }
}

/* 标题条 */
.tut-header {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2h);
  margin-bottom: var(--sp-4);
}
.tut-header .flourish { color: #d96d8e; font-size: var(--fs-body); }
.tut-header h3 {
  margin: 0; font-size: var(--fs-sub); color: #c45c7d;
  letter-spacing: 3px; font-weight: 800;
}

/* HERO: 合成演示 */
.tut-hero {
  background: rgba(255, 239, 228, .82);
  border: var(--bw-thin) solid rgba(217,109,142,.4);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-2h) var(--sp-2h);
  margin-bottom: var(--sp-3);
}
.hero-pair {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-1);
  margin-bottom: 6px;
}
.hero-cell {
  position: relative; width: 48px; height: 48px;
  background: #fff5e8;
  border-radius: var(--r-sm);
  border: var(--bw-thin) solid rgba(217,109,142,.5);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 0 rgba(217,109,142,.25);
}
.hero-cell.evolved {
  background: #fff; border-color: #f0c4cf;
  box-shadow: 0 3px 0 rgba(217,109,142,.35), 0 0 14px rgba(255,184,209,.7);
}
.hero-sprite {
  width: 88%; height: 88%;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.hero-plus, .hero-arrow {
  font-size: var(--fs-title); font-weight: 800; color: #d96d8e; padding: 0 var(--sp-1);
}
.hero-cell .badge {
  position: absolute; top: -6px; right: -8px;
  background: linear-gradient(135deg, #ff9bbd 0%, #ff6b97 100%);
  color: #fff;
  font-size: var(--fs-xs); font-weight: 800;
  padding: 2px 6px; border-radius: var(--r-sm);
  box-shadow: 0 2px 0 #d96d8e;
  border: var(--bw-thin) solid #fff;
}
.hero-label {
  margin: 0; font-size: var(--fs-sm); color: #8a6b5e; letter-spacing: .5px; font-weight: 600;
}

/* 3 步条 */
.tut-steps {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: var(--sp-3);
}
.step {
  display: flex; align-items: center; gap: var(--sp-11);
  background: rgba(255, 245, 238, .75);
  border: var(--bw-thin) solid rgba(217,109,142,.35);
  border-radius: var(--r-md);
  padding: var(--sp-7) var(--sp-3);
  text-align: left;
  box-shadow: 0 2px 0 rgba(217,109,142,.15);
}
.step-num {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #ffd6e3 0%, #ffe9c0 100%);
  color: #c45c7d; font-weight: 800; font-size: var(--fs-body);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(217,109,142,.2);
  border: var(--bw-thin) solid #fff;
}
.step-body { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.step-body b { font-size: var(--fs-body); color: #4a3b2f; font-weight: 800; }
.step-body span { font-size: var(--fs-cap); color: #8a6b5e; }

/* 5 阶合成链 */
.tut-chain {
  display: flex; align-items: center; justify-content: center; gap: 3px; flex-wrap: wrap;
  background: rgba(255, 239, 228, .75);
  border: var(--bw-thin) solid rgba(217,109,142,.4);
  border-radius: var(--r-lg);
  padding: var(--sp-2) 6px;
  margin-bottom: var(--sp-11);
}
.chain-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.chain-item .cs {
  width: 36px; height: 36px;
  background-color: #fff5e8;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  border-radius: var(--r-sm);
  border: var(--bw-thin) solid rgba(217,109,142,.45);
  box-shadow: 0 2px 0 rgba(217,109,142,.22);
}
.chain-item.highlight .cs {
  background-color: #fff;
  border-color: #d96d8e;
  box-shadow: 0 0 12px rgba(255,184,209,.8), 0 2px 0 #d96d8e;
}
.chain-item small { font-size: var(--fs-xs); color: #8a6b5e; }
.chain-item.highlight small { color: #d96d8e; font-weight: 800; }
.chain-arrow { color: rgba(217,109,142,.55); font-size: var(--fs-sub); padding: 0 1px; align-self: center; margin-top: -var(--sp-2h); }

/* 目标行 */
.tut-goal {
  margin: 0 0 var(--sp-14);
  font-size: var(--fs-sm); color: #8a6b5e; font-weight: 600;
  padding: var(--sp-2) var(--sp-2h);
  background: rgba(255, 230, 240, .65);
  border-radius: var(--r-md);
  border: var(--bw-thin) dashed rgba(217,109,142,.5);
}

/* CTA：样式已迁移到 .tut-foot .tut-go（含悬浮光晕动画），此规则仅作为兼容性兜底 */
.tut-go {
  width: 100%;
}

/* 临时开发按钮（上线前删除 .dev-btn） */
.dev-btn {
  position: fixed;
  left: 8px;
  bottom: 8px;
  z-index: 60;
  font-size: var(--fs-cap);
  line-height: 1;
  padding: var(--sp-2) var(--sp-11);
  border-radius: var(--r-lg);
  background: rgba(20, 16, 28, .72);
  color: #ffd34d;
  border: 1px dashed #ffd34d;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
  user-select: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.dev-btn:active { transform: scale(.94); }

/* ============ 选关页（经典 / 趣味玩法） ============ */
/* ============ 选关页（专属背景 + 玩法图标 + 玻璃卡片） ============ */
.menu {
  position: absolute; inset: 0; z-index: 15; display: none;
  background: #1a1714 url('../output/bg_menu.png') center/cover no-repeat;
  background-color: var(--bg); /* 兜底，避免图片未到时露黑 */
  overflow: hidden;
}
.menu.show {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--sp-28) var(--sp-18);
  animation: menuFadeIn .4s ease;
}
@keyframes menuFadeIn { from { opacity: 0 } to { opacity: 1 } }

.menu-veil {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.12) 48%, rgba(0,0,0,.42) 100%),
    radial-gradient(ellipse at 50% 0%, rgba(255,200,210,.12), transparent 60%);
}

.menu-box { width: min(460px, 96vw); text-align: center; position: relative; z-index: 2; }

/* —— 标题区 —— */
.menu-emblem { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-bottom: 2px; opacity: 0; }
.menu.show .menu-emblem { animation: menuUp .55s ease .05s forwards; }
.menu-title { font-size: var(--fs-display); font-weight: 900; color: #fff; letter-spacing: 3px; margin: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,.45), 0 0 2px rgba(255,210,220,.5); }
.emblem-flourish { color: var(--gold); font-size: var(--fs-title); opacity: .92; text-shadow: 0 1px 4px rgba(0,0,0,.4); }

.menu-sub { font-size: var(--fs-sm); color: rgba(255,255,255,.82); letter-spacing: 4px; margin-top: var(--sp-1); text-shadow: 0 1px 3px rgba(0,0,0,.4); opacity: 0; }
.menu.show .menu-sub { animation: menuUp .5s ease .12s forwards; }
.menu-tip { font-size: var(--fs-sm); color: rgba(255,255,255,.78); margin: var(--sp-14) 0 var(--sp-22); text-shadow: 0 1px 2px rgba(0,0,0,.4); opacity: 0; }
.menu.show .menu-tip { animation: menuUp .5s ease .18s forwards; }

@keyframes menuUp { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cardIn { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* —— 玩法卡片（4 格选择） —— */
.mode-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.mode-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); cursor: pointer; font-family: inherit; color: #2d2218;
  text-align: center; border: var(--bw-thin) solid rgba(255,255,255,.7); padding: var(--sp-4) var(--sp-3);
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, rgba(255,240,246,.84), rgba(255,220,232,.74));
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 8px 0 rgba(0,0,0,.22), 0 14px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.7);
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
  opacity: 0;
}
.menu.show .mode-card { animation: cardIn .55s ease forwards; }
.menu.show .mode-card:nth-child(1) { animation-delay: .26s; }
.menu.show .mode-card:nth-child(2) { animation-delay: .38s; }
.menu.show .mode-card:nth-child(3) { animation-delay: .50s; }
.menu.show .mode-card:nth-child(4) { animation-delay: .62s; }
.mode-card.fun { background: linear-gradient(135deg, rgba(255,238,210,.84), rgba(255,206,160,.76)); }
.mode-card.order { background: linear-gradient(135deg, rgba(220,230,255,.86), rgba(188,206,255,.78)); }
.mode-card.combo { background: linear-gradient(135deg, rgba(255,224,210,.86), rgba(255,194,158,.78)); }
.mode-cards .mode-arrow { display: none; }
.mode-card:active {
  transform: translateY(3px);
  box-shadow: 0 4px 0 rgba(0,0,0,.22), 0 6px 14px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.7);
  filter: brightness(1.04);
}
.mode-ic {
  width: 72px; height: 72px; flex: none; border-radius: 50%; overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,.28), inset 0 0 0 2px rgba(255,255,255,.85);
  background: rgba(255,255,255,.4);
}
.mode-ic img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.mode-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); align-items: center; }
.mode-head { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.mode-name { font-size: var(--fs-title); font-weight: 900; letter-spacing: 1.5px; color: #2d2218; }
.mode-tag {
  font-size: var(--fs-xs); font-weight: 700; padding: 3px var(--sp-9); border-radius: var(--r-pill); letter-spacing: .5px;
  border: 1px solid rgba(255,255,255,.7); white-space: nowrap;
}
.tag-classic { background: #ffd9e6; color: #b83a6c; }
.tag-fun { background: #ffd9b3; color: #c75a1d; }
.tag-order { background: #cdddff; color: #3a52b8; }
.tag-combo { background: #ffd2b2; color: #c0531d; }
.mode-desc { font-size: var(--fs-cap); line-height: 1.5; color: #5a4a3e; }
.mode-arrow {
  font-size: var(--fs-display); color: #8a7563; font-weight: 300; flex: none; padding-left: var(--sp-1);
  opacity: .65; line-height: 1; transition: transform .15s, opacity .15s;
}
.mode-card:active .mode-arrow { transform: translateX(2px); opacity: 1; }

.menu-footer {
  margin-top: var(--sp-22); font-size: var(--fs-cap); color: rgba(255,255,255,.6); letter-spacing: 3px;
  text-shadow: 0 1px 2px rgba(0,0,0,.4); opacity: 0;
}
.menu.show .menu-footer { animation: menuUp .5s ease .52s forwards; }

/* 玩法状态条：闪电订单 / 连环爆发（按玩法显示，由 renderPlayBanner 控制） */
/* 玩法状态条占位：orderBanner / comboBanner 显隐时高度恒定，棋盘不上下抖动 */
.play-banner-slot {
  min-height: 38px;
  display: none;          /* 基础态隐藏：经典/趣味玩法无状态条，不占空白间距（间距问题①） */
  align-items: center;
  justify-content: center;
  /* 永远占着同一高度，避免下方棋盘随 banner 出现/隐藏而上下跳动 */
}
/* 仅订单玩法显示订单栏（固定高度占位，不抖） */
body[data-mode="order"] .play-banner-slot { display: flex; }
.play-banner-slot .play-banner {
  margin: 0;
  width: 100%;
  flex: 0 0 auto;
}

.play-banner {
  display: flex; align-items: center; gap: var(--sp-2h);
  margin: 0 2px var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-lg);
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(8px) saturate(130%); -webkit-backdrop-filter: blur(8px) saturate(130%);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.play-banner .ob-ic, .play-banner .cb-ic { font-size: var(--fs-title); flex: none; }
.play-banner .ob-body, .play-banner .cb-body { flex: 1; min-width: 0; }
.ob-txt { font-size: var(--fs-sm); font-weight: 700; display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.ob-op { font-size: var(--fs-sub); font-weight: 900; color: #ff5b8a; flex: none; line-height: 1; padding: 0 1px; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.ob-animal {
  width: 28px; height: 28px;
  background-size: 100% 100%; background-repeat: no-repeat; background-position: center;
  border-radius: var(--r-xs);
  display: inline-block; flex: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 0 0 1.5px rgba(255,255,255,.6);
  background-color: rgba(255,255,255,.18);
}
/* 目标动物（等号右边）= 本单要交付的，加金色高亮环让小朋友一眼锁定 */
.ob-animal.ob-target { box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 0 0 2px #ff9bbd, 0 0 8px rgba(255,213,74,.6); background-color: rgba(255,255,255,.32); }
.ob-track { height: 7px; border-radius: var(--r-xs); background: rgba(0,0,0,.3); margin-top: 5px; overflow: hidden; }
.ob-bar { height: 100%; width: 100%; background: linear-gradient(90deg, #7fd4ff, #4f7bff); transition: width .12s linear; }
.cb-txt { font-size: var(--fs-sm); font-weight: 700; }
.play-banner.urgent { background: rgba(255,90,90,.34); border-color: rgba(255,150,150,.75); animation: pulseU .55s ease-in-out infinite; }
.play-banner.combo.hot { background: rgba(255,150,60,.32); border-color: rgba(255,185,125,.75); }

/* ===== 按玩法适配不同间距（body[data-mode] 驱动） ===== */
/* 连环爆发：倍率栏改为「悬浮」——绝对定位在棋盘上方留白区，不进布局流，显示/隐藏绝不挤棋盘（问题②） */
body[data-mode="combo"] .board-wrap { padding-top: var(--sp-46); }   /* 给倍率栏预留固定留白，棋盘垂直位置恒定 */
body[data-mode="combo"] #comboBanner {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  z-index: 6; width: auto; max-width: 92%; margin: 0; pointer-events: none;
  box-shadow: 0 3px 10px rgba(0,0,0,.22);
}
/* 经典 / 趣味：PK 栏紧贴棋盘（去掉原本 slot 占的 53px 空白），仅留小间距（问题①） */
body[data-mode="normal"] .battle,
body[data-mode="fun"] .battle { margin-bottom: 6px; }
@keyframes pulseU { 0%,100% { opacity: 1; } 50% { opacity: .62; } }

/* 帮助按钮（玩法说明）—— 复用 icon-btn 主色圆，内部是 ? 图标 */
.icon-btn.has-icon .help-svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; pointer-events: none; }
.icon-btn.has-icon .back-svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; pointer-events: none; }

/* ============ 趣味玩法：炸弹格 ============ */
.cell.bomb {
  background: radial-gradient(circle at 50% 42%, #ff8a8a, #c0392b);
  border-color: #fff;
  box-shadow: 0 0 0 2px #ffd34d, 0 0 16px rgba(255,80,80,.8);
  animation: bombPulse .6s ease-in-out infinite;
  cursor: pointer;
}
@keyframes bombPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.cell.bomb.danger { animation: bombDanger .25s ease-in-out infinite; }
@keyframes bombDanger {
  0%,100% { box-shadow: 0 0 0 2px #ffd34d, 0 0 18px rgba(255,80,80,.9); }
  50%     { box-shadow: 0 0 0 4px #fff, 0 0 26px rgba(255,40,40,1); }
}
.bomb-emoji { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--fs-display); filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.bomb-fuse-wrap { position: absolute; left: 4px; top: 4px; bottom: 4px; width: 5px; border-radius: var(--r-3); background: rgba(0,0,0,.35); overflow: hidden; }
.bomb-fuse { width: 100%; height: 100%; background: linear-gradient(180deg, #ffe27a, #ff8a3c); transition: height .1s linear; }
.bomb-num { position: absolute; bottom: 3px; right: 4px; font-size: var(--fs-xs); font-weight: 800; color: #fff; background: rgba(0,0,0,.5); padding: 0 var(--sp-1); border-radius: var(--r-5); font-variant-numeric: tabular-nums; }

/* 还需连点 N 下（趣味玩法需累计点够 BOMB_HITS_REQUIRED 才熄灭） */
.bomb-taps {
  position: absolute; top: 2px; right: 2px; z-index: 3;
  min-width: 18px; height: 18px; padding: 0 var(--sp-1);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-cap); font-weight: 800; color: #fff;
  background: #2d2a4a; border: var(--bw-thin) solid #fff; border-radius: var(--r-sm);
  box-shadow: 0 1px 3px rgba(0,0,0,.4); font-variant-numeric: tabular-nums;
}
.bomb-taps.warn { background: #e0820a; }
.bomb-taps.last { background: #d11; animation: bombTapLast .4s ease-in-out infinite; }
@keyframes bombTapLast { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
/* 点击但未点够：炸弹受击抖动 */
.cell.bomb.bomb-hit { animation: bombHit .18s ease; }
@keyframes bombHit {
  0% { transform: scale(1); }
  40% { transform: scale(.88) rotate(-3deg); }
  70% { transform: scale(1.05) rotate(2deg); }
  100% { transform: scale(1); }
}

/* 引爆反馈：仅炸弹格自身的爆闪（box-shadow 辉光 + opacity，不用 transform/filter，避免触发 backdrop-filter 整盘重绘） */
.cell.exploded { animation: boom .38s ease; }
@keyframes boom {
  0%   { opacity: 1; box-shadow: 0 0 0 0 rgba(255,150,60,0); }
  25%  { opacity: 1; box-shadow: 0 0 26px 8px rgba(255,150,60,.9), 0 0 8px 2px rgba(255,230,180,.9); }
  100% { opacity: .65; box-shadow: 0 0 0 0 rgba(255,150,60,0); }
}

/* 炸弹引爆后的「焦痕」残留：灰烬视觉，期间不可合成/不被补位，让玩家看清「被炸空」。入场只用 opacity（不用 transform，避免 backdrop-filter 重绘） */
.cell.scorched {
  background:
    radial-gradient(circle at 50% 45%, rgba(70,52,46,.62), rgba(46,34,30,.40) 70%),
    rgba(40,30,28,.28);
  box-shadow: inset 0 0 0 2px rgba(20,15,12,.30), inset 0 2px 6px rgba(0,0,0,.28);
  animation: scorchIn .2s ease;
}
@keyframes scorchIn { 0% { opacity: 0; } 100% { opacity: 1; } }
.cell.scorched .scorch-mark {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-title); line-height: 1; opacity: .82;
  animation: scorchFade 1.8s ease forwards;
}
@keyframes scorchFade { 0% { opacity: .9; transform: scale(1.1); } 100% { opacity: .4; transform: scale(1); } }

/* 趣味玩法教学块 */
.fun-only { margin-bottom: var(--sp-11); }
.tut-bomb {
  display: flex; align-items: center; gap: var(--sp-3); text-align: left;
  background: rgba(255, 235, 235, .85);
  border: var(--bw-thin) solid rgba(217,109,142,.5);
  border-radius: var(--r-lg); padding: var(--sp-2h) var(--sp-3);
  box-shadow: 0 2px 0 rgba(217,109,142,.2);
}
.bomb-demo { font-size: var(--fs-36); flex: none; line-height: 1; filter: drop-shadow(0 3px 4px rgba(0,0,0,.25)); }
.bomb-info { display: flex; flex-direction: column; gap: 2px; }
.bomb-info b { font-size: var(--fs-sm); color: #c0392b; }
.bomb-info span { font-size: var(--fs-cap); color: #8a6b5e; line-height: 1.5; }
.bomb-info span b { color: #d96d8e; }

/* 趣味玩法教学块 · 喷火龙彩蛋 */
.tut-dragon {
  display: flex; align-items: center; gap: var(--sp-3); text-align: left;
  background: rgba(255, 244, 226, .92);
  border: var(--bw-thin) solid rgba(230,140,60,.55);
  border-radius: var(--r-lg); padding: var(--sp-2h) var(--sp-3);
  box-shadow: 0 2px 0 rgba(230,140,60,.22);
  margin-top: var(--sp-3);
}
.dragon-demo {
  width: 52px; height: 52px; flex: none;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.25));
}
.tut-dragon .bomb-info b { color: #d96d2e; }
.tut-dragon .bomb-info span b { color: #e07b3a; }

/* ===================== 道具栏 ===================== */
/* 布局：**回归 wrap 的 column 流**（不再是 position:fixed 悬浮），位置在棋盘下方、按钮上方。
   min-height 设为 78px 以容纳展开后的 62px 道具卡 + 间距 + 边距，这样：
   - 折叠态：44px toggle 居中显示在 78px 容器内
   - 展开态：62px 道具完整展示，按钮位置恒定不抖
   这样棋盘依然 flex:1 自适应剩余高度，且不再出现"按钮被悬浮道具栏遮住"的问题 */
.prop-bar {
  position: relative;
  width: 100%;
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  flex-wrap: nowrap;
}
/* 道具开关按钮已移除：道具栏默认常显（见 .prop-items 始终 flex） */
.prop-items {
  position: static;     /* 居中布局：脱离 absolute，由 flex 控制 */
  z-index: 1;
  display: flex;                      /* 默认常显，无需展开收起 */
  gap: var(--sp-1); align-items: center;
  padding: 0;
  /* 容器透明仅承担对齐，视觉由 4 张 .prop 卡片本身（12px 圆角 + 自有边框）组成连贯的"4 格抽屉" */
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  flex: 0 1 auto;     /* 允许窄屏收缩，但每个 .prop 有 flex-shrink:0 保证不被压 */
}
.prop {
  position: relative; display: block;
  width: 62px; height: 62px; padding: 0; border: var(--bw-mid) solid color-mix(in srgb, var(--ch-accent, #ff9bbd) 75%, #000 25%); border-radius: var(--r-md);   /* 12px，与下方 .btn / .prop-toggle 对齐 */
  /* 卡片底色与棋盘格子保持一致：章节主色 ~22% 染色 + 透明底 + 白亮描边，糖果色风格统一 */
  background: color-mix(in srgb, var(--ch-accent, #ff9bbd) 22%, transparent);
  color: var(--ink); cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), inset 0 1px 0 rgba(255,255,255,.5);
  font-family: inherit; transition: transform .08s, border-color .15s, filter .15s;
  /* 微信/移动端：禁止按钮上的默认触摸手势（滚动/缩放/长按菜单），否则从图标拖出会被浏览器接管而中断 */
  touch-action: none; user-select: none; -webkit-user-select: none;
  flex-shrink: 0;   /* 禁止 flex 容器把方格压成竖长方形（之前 prop-items 太窄时被压 40×80） */
}
.prop:active { transform: translateY(1px) scale(.97); }
.prop .prop-ico { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); border-radius: var(--r-md); }
.prop .prop-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  text-align: center; font-size: var(--fs-cap); font-weight: 800; color: #fff; letter-spacing: 1px;
  padding: 5px 3px var(--sp-1); pointer-events: none;
  /* 用户反馈：原本 linear-gradient(to top, rgba(20,15,12,.74), ...) 的半透遮罩让 4 张卡片底部有一道贯穿左右的"灰条"，
     视觉上像模块未对齐。去掉背景，仅靠 text-shadow 让白字在浅色卡片图上保持可读。 */
  background: none;
  border-radius: 0 0 var(--r-md) var(--r-md);
  text-shadow:
    0 1px 0 rgba(0,0,0,.55),
    0 0 4px rgba(0,0,0,.45);
}
/* 数量徽标：道具每章固定 1 张，数量无需显示（看广告 +1 时以 toast 提示） */
.prop .prop-count { display: none; }
/* 一键合成：右上角「换一只」刷新按钮（每 3 秒可换一次，仅在道具未用时可点）
   图标为国风手绘 SVG 循环箭头（墨线勾边 + 中心朱红点，呼应印章），替换原系统 emoji；
   冷却秒数由 .rf-num 承载，避免 textContent 清空 SVG 子节点 */
.prop .prop-refresh {
  position: absolute; top: 2px; right: 2px; z-index: 3;
  width: 19px; height: 19px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden;
  background: rgba(255,255,255,.94);
  border: 1.5px solid color-mix(in srgb, var(--ch-accent, #ff9bbd) 70%, #000 30%);
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  color: #2a2018; user-select: none; -webkit-user-select: none;
  transition: transform .08s;
}
.prop .prop-refresh .rf-icon {
  width: 13px; height: 13px; display: block;
  transform-origin: 50% 50%;
}
.prop .prop-refresh .rf-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #3a2c22; pointer-events: none; font-family: inherit;
}
/* 点击「换一只」时箭头转一圈，强化反馈 */
.prop .prop-refresh.spin .rf-icon { animation: rfSpin .55s cubic-bezier(.34,1.2,.64,1); }
@keyframes rfSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.prop .prop-refresh:hover { transform: scale(1.08); }
.prop .prop-refresh:active { transform: scale(.92); }
.prop .prop-refresh.cd { opacity: .5; cursor: not-allowed; }
.prop .prop-refresh.cd .rf-icon { opacity: .75; }
.prop .prop-refresh.hidden { display: none; }  /* 道具用完（empty）时隐藏 */
.prop.armed {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(201,162,75,.6);
  background: color-mix(in srgb, var(--gold) 24%, var(--panel2));
}
.prop.empty {
  /* 用完了！显示「看广告 +1」入口：保留道具图标淡化为背景，正中央叠 🎬 看广告按钮 */
  cursor: pointer;
  background: linear-gradient(135deg, #ffd7c2 0%, #d96d8e 100%);
  border-color: #d96d8e;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.4), 0 4px 10px rgba(217,109,142,.35);
  filter: none;
}
.prop.empty .prop-ico { opacity: .35; }   /* 图标降到很淡，作为「这是 XXX 道具」的辨识背景 */
.prop.empty .prop-count { display: none; } /* 隐藏 0 计数 */
.prop.empty .prop-label {
  /* 用广告提示替换底部标签：白字 + 红色渐变底 */
  background: linear-gradient(to top, rgba(140,40,30,.92) 0%, rgba(140,40,30,.55) 60%, rgba(140,40,30,0) 100%);
  color: #fff;
  font-size: var(--fs-cap);
  padding: 6px 3px var(--sp-1);
}
.prop.empty .prop-label::before { content: "🎬 看广告 +1"; }
/* 中央大号 🎬 角标，强化"看广告"语义 */
.prop.empty::after {
  content: "🎬";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-display);
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.45));
  animation: propAdHint 1.8s ease-in-out infinite;
}
.prop.empty:active { transform: translateY(1px) scale(.97); }
@keyframes propAdHint {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}
/* 长提示 toast 允许换行 */
.toast.wrap { white-space: normal; max-width: min(94vw, 380px); }

/* 磁铁道具：吸附高亮 + 停留 2 秒进度环 */
.magnet-ghost {
  position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none;
  width: 52px; height: 52px;
  background-repeat: no-repeat; background-size: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
  transition: transform .02s linear;
  border-radius: var(--r-lg); overflow: hidden;   /* 拖动时也保持圆角（裁切背景 PNG 直角） */
}
.cell.magnet-attract {
  box-shadow: 0 0 0 3px var(--gold), 0 0 16px rgba(201,162,75,.7) !important;
  border-color: var(--gold);
  animation: magnetPull .5s ease-in-out infinite alternate;
}
.cell.magnet-attract .sprite { animation: magnetPull .5s ease-in-out infinite alternate; }
@keyframes magnetPull { from { transform: scale(1); } to { transform: scale(1.08); } }
.cell.magnet-target { position: relative; }
.cell.magnet-target::before {
  content: ""; position: absolute; inset: 2px; border-radius: inherit;
  border: 3px solid var(--gold); box-shadow: 0 0 12px rgba(201,162,75,.85);
  animation: magnetRing 1s linear forwards; pointer-events: none;
}
@keyframes magnetRing {
  from { transform: scale(1); opacity: 1; }
  to   { transform: scale(.42); opacity: .25; }
}

@media (max-height: 760px) {
  .prop { width: 54px; height: 54px; padding: 0; }
  .prop .prop-ico { aspect-ratio: auto; }
  .prop-items { gap: var(--sp-1); padding: 0; }
  .prop-toggle { height: 40px; padding: 0 var(--sp-14); font-size: var(--fs-body); }
}
@media (max-height: 640px) {
  .prop { width: 50px; height: 50px; padding: 0; }
  .prop .prop-ico { aspect-ratio: auto; }
  .prop-toggle { height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
}

/* ===================== 响应式：手机/短视口 ===================== */
/* dev 调试按钮在手机/短视口不再整体隐藏（之前是为防遮挡教程按钮临时隐藏的）；
   现在教程已改为"底部悬浮条"独立于卡片，按钮放右下角也能避免遮挡主要交互。 */
@media (max-width: 640px), (max-height: 760px) {
  .dev-btn { left: auto; right: 8px; bottom: 8px; font-size: var(--fs-xs); padding: 6px var(--sp-9); border-radius: var(--r-md); }
  .dev-btn:active { transform: scale(.94); }
}

/* 短视口（常见手机竖屏 ~700-760px）：整体压缩，保证召唤/重开/广告按钮可见 */
@media (max-height: 760px) {
  .wrap { padding: var(--sp-2) 0 var(--sp-2h); gap: 6px; }
  .hud .chapter { font-size: var(--fs-sub); }
  .hud .chapter small { font-size: var(--fs-xs); }
  .icon-btn.has-icon { width: 38px; height: 38px; }
  .icon-btn.has-icon .pause-svg,
  .icon-btn.has-icon .help-svg,
  .icon-btn.has-icon .back-svg { width: 19px; height: 19px; }
  .play-banner-slot { min-height: 34px; }
  .play-banner { padding: 5px var(--sp-2h); font-size: var(--fs-cap); }
  .battle { padding: var(--sp-1) var(--sp-2h) 3px; border-radius: var(--r-lg); }
  .pk-avatar { width: 26px; height: 26px; font-size: var(--fs-sm); }
  .vs-time { font-size: var(--fs-sm); }
  .pk-score-now { font-size: var(--fs-lg); }
  .pk-track { height: 9px; margin-top: 3px; }
  .pk-target-txt { font-size: var(--fs-micro); margin-top: 1px; }
  .controls .btn { height: 40px; font-size: var(--fs-sm); }
  .controls + .controls { margin-top: 6px; }
  .board { padding: var(--sp-2h); gap: var(--sp-7); border-radius: var(--r-xl); border-width: var(--bw-thick); }
  /* 短视口下棋盘宽度上限加大，确保方形棋盘不撑高 */
  .board { width: min(400px, 92vw); }
}

/* 极短视口（横屏手机/小屏设备）：进一步压缩 */
@media (max-height: 640px) {
  .wrap { padding: var(--sp-1) 0 6px; gap: 5px; }
  .hud .chapter { font-size: var(--fs-lg); }
  .icon-btn.has-icon { width: 34px; height: 34px; }
  .play-banner-slot { min-height: 28px; }
  .pk-avatar { width: 24px; height: 24px; font-size: var(--fs-sm); }
  .vs-word { font-size: var(--fs-micro); }
  .vs-time { font-size: var(--fs-sm); }
  .pk-score-now { font-size: var(--fs-lg); }
  .pk-track { height: 8px; margin-top: 2px; }
  .controls .btn { height: 36px; font-size: var(--fs-sm); }
  .controls + .controls { margin-top: 5px; }
  .board { width: min(360px, 88vw); padding: var(--sp-2); gap: 6px; border-radius: var(--r-lg); }
}

/* 教程覆盖层在短视口下紧凑化（已有 max-height 滚动；只是压缩排版减少滚动） */
@media (max-height: 760px) {
  .tutorial .box { padding: var(--sp-3) var(--sp-14) var(--sp-2h); }
  .tut-header { margin-bottom: var(--sp-2h); }
  .tut-header h3 { font-size: var(--fs-lg); }
  .tut-hero { padding: var(--sp-2) var(--sp-2) 6px; margin-bottom: var(--sp-2); }
  .hero-cell { width: 38px; height: 38px; }
  .tut-steps .step { padding: var(--sp-2) var(--sp-2h); }
  .tut-steps .step b { font-size: var(--fs-sm); }
  .tut-steps .step span { font-size: var(--fs-cap); }
  .tut-species .tier-cell { width: 42px; height: 42px; }
  .tut-bomb { padding: var(--sp-2h) var(--sp-3); }
  .bomb-demo { font-size: var(--fs-28); }
  .tut-go { padding: var(--sp-2h) var(--sp-22) !important; font-size: var(--fs-body) !important; }
  /* 短视口下：压缩顶部 padding，给 foot 让出更多空间 */
  .tutorial { padding: 10px 10px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .tutorial .box { max-height: calc(100dvh - 130px); }
  .tut-foot { margin-top: var(--sp-2h); }
}