/* ============================================================================
   《采蘑菇的小红帽》秋日消消乐 — 全局样式表
   负责人：ui-designer
   风格：秋日童话 / 奶油面板 / 深棕描边 / 红橙渐变按钮 / 圆角厚阴影
   说明：
   - 所有图片位置都写了纯色/渐变兜底；素材缺失时由 js/ui.js 打 .is-missing、
     #board 打 .board--no-art，保证无破图 icon、可开发可截图。
   - 棋盘尺寸契约：外框 = 8*--cell + 7*--gap + 2*--board-pad
   ========================================================================== */

/* ---------- 0. 字体 ---------- */
@font-face {
  font-family: "XXL KuaiLe";
  src: url("../assets/ui/ZCOOLKuaiLe-Regular.ttf") format("truetype"),
    url("../assetgen/fonts/ZCOOLKuaiLe-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- 0.1 基础 ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

[hidden] { display: none !important; }

:root {
  /* 尺寸 */
  --maxw: 620px;
  --maxh: 930px;
  --appw: min(100vw, var(--maxw));
  --apph: min(100dvh, var(--maxh));

  /* 秋日调色板 */
  --ink: #3a1d12;
  --brown-900: #2a1409;
  --brown-800: #4a2414;
  --brown-700: #5a2f1b;
  --brown-600: #7a4a2a;
  --cream: #ffe9c7;
  --cream-2: #fff4dd;
  --cream-3: #fffaf0;
  --red: #d94f2e;
  --red-deep: #a8321c;
  --orange: #ef7b3c;
  --amber: #f2a33c;
  --amber-light: #ffd84d;
  --leaf: #b3301f;
  --sky: #f8c992;
  --green: #3f8a4b;

  /* 字体 */
  --font: "XXL KuaiLe", "ZCOOL KuaiLe", "Microsoft YaHei", "PingFang SC",
    "Noto Sans SC", "Hiragino Sans GB", "YouYuan", sans-serif;

  /* 动画时长（与 game.js 契约一致） */
  --t-swap: 190ms;
  --t-pop: 230ms;
  --t-fall: 260ms;

  /* 常用阴影 */
  --drop-hard: 0 5px 0 rgba(74, 36, 20, 0.62);
  --drop-deep: 0 12px 0 rgba(74, 36, 20, 0.55), 0 22px 40px rgba(0, 0, 0, 0.38);
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #160a05 radial-gradient(ellipse at 50% 18%, #4a2414 0%, #2a1409 46%, #120704 100%) fixed;
  font-family: var(--font);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

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

img { border: 0; }

:focus-visible {
  outline: 3px solid var(--amber-light);
  outline-offset: 2px;
}

/* 素材加载失败：img 自身淡出，由紧随其后的 .img-fallback 接管显示 */
img.is-missing {
  opacity: 0 !important;
  pointer-events: none;
}

.img-fallback {
  display: none;
  pointer-events: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.1;
}

img.is-missing + .img-fallback { display: flex; }

/* 字体分工：大标题/按钮/横幅用站酷快乐体；小字与数字用系统字体保证可读性
   （站酷快乐体只有 400 字重，小字号合成粗体容易发糊，数字字形也偏艺术化） */
.hud-level,
.stat,
.goal-chip__count,
.boost-btn b,
.level-btn__num,
.level-btn__name,
.level-btn__best,
.level-btn.is-current::after,
.levels-tip,
.goal-tip,
.home-best,
.result-level,
.result-best,
.result-score > b,
.pause-chip,
.help-special,
.help-list,
.modal__text,
.toast,
.loading-text,
.result-star,
.result-goal,
.level-btn__lock {
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", "Hiragino Sans GB",
    "YouYuan", sans-serif;
}

/* ---------- 1. 游戏框 ---------- */
#app {
  position: relative;
  z-index: 1;
  width: min(100vw, var(--maxw));
  height: min(100dvh, var(--maxh));
  overflow: hidden;
  border-radius: 30px;
  background: linear-gradient(165deg, #34180c 0%, #1d0b05 100%);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.68), 0 0 0 1px rgba(255, 206, 148, 0.14),
    0 0 0 7px rgba(58, 29, 18, 0.42);
  isolation: isolate;
}

/* 桌面端铺满窗口的模糊背景（fixed 定位，逃出 620px 游戏框） */
#app-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #2a1409;
  background-image: radial-gradient(ellipse at 50% 42%, rgba(24, 10, 5, 0.1) 0%, rgba(20, 8, 4, 0.74) 62%, rgba(10, 4, 2, 0.94) 100%),
    url("../assets/bg/home.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.08);
  filter: blur(12px) saturate(1.06) brightness(0.7);
}

/* 游戏框内沿高光 + 轻微暗角（纯装饰，不挡点击） */
#app::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 70;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(255, 214, 160, 0.16),
    inset 0 0 70px rgba(20, 8, 4, 0.28);
}

/* ---------- 2. 屏幕栈 ---------- */
.screen {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(3%) scale(0.992);
  transition: opacity 0.34s ease, transform 0.34s cubic-bezier(0.22, 0.9, 0.3, 1),
    visibility 0s linear 0.34s;
}

.screen--active {
  z-index: 3;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 0.34s ease, transform 0.42s cubic-bezier(0.2, 0.9, 0.25, 1.04),
    visibility 0s linear 0s;
}

/* ---------- 3. 通用按钮 ---------- */
.btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 12px 18px;
  border: 3px solid var(--cream-3);
  border-radius: 18px;
  font-size: clamp(17px, 3.6vw, 22px);
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.15;
  color: #fffaf0;
  text-shadow: 0 2px 0 rgba(122, 42, 18, 0.6);
  background: linear-gradient(180deg, #f28a48 0%, var(--red) 52%, #bf3b1d 100%);
  box-shadow: 0 0 0 3px var(--brown-700), 0 7px 0 #7d2a12, 0 14px 20px rgba(40, 14, 6, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.18s ease;
  touch-action: manipulation;
  overflow: visible;
}

.btn > span { position: relative; z-index: 1; }

.btn::before {
  content: "";
  position: absolute;
  inset: 3px 3px auto 3px;
  height: 38%;
  border-radius: 13px 13px 40% 40% / 13px 13px 30% 30%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
.btn:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 3px var(--brown-700), 0 2px 0 #7d2a12, 0 6px 10px rgba(40, 14, 6, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.4);
  filter: brightness(0.98);
}

/* 次要按钮：奶油/琥珀 */
.btn--secondary {
  color: #5a2412;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  border-color: var(--cream-3);
  background: linear-gradient(180deg, #fff1d2 0%, #ffcf7d 55%, var(--amber) 100%);
  box-shadow: 0 0 0 3px var(--brown-700), 0 7px 0 #b26a1d, 0 14px 20px rgba(40, 14, 6, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.7);
}
.btn--secondary:active {
  box-shadow: 0 0 0 3px var(--brown-700), 0 2px 0 #b26a1d, 0 6px 10px rgba(40, 14, 6, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.5);
}

/* 幽灵按钮：深棕半透明 */
.btn--ghost {
  color: var(--cream);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  border: 2.5px solid rgba(255, 233, 199, 0.85);
  background: linear-gradient(180deg, rgba(90, 47, 27, 0.82), rgba(58, 29, 18, 0.9));
  box-shadow: 0 0 0 2px rgba(58, 29, 18, 0.55), 0 5px 0 rgba(30, 12, 6, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.btn--ghost::before { opacity: 0.45; }
.btn--ghost:active { box-shadow: 0 0 0 2px rgba(58, 29, 18, 0.55), 0 1px 0 rgba(30, 12, 6, 0.7); }

.btn--sm {
  min-height: 48px;
  font-size: clamp(15px, 3.2vw, 18px);
  border-radius: 15px;
  box-shadow: 0 0 0 3px var(--brown-700), 0 5px 0 #7d2a12, 0 10px 14px rgba(40, 14, 6, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.45);
}
.btn--sm.btn--secondary { box-shadow: 0 0 0 3px var(--brown-700), 0 5px 0 #b26a1d, 0 10px 14px rgba(40, 14, 6, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.65); }
.btn--sm.btn--ghost { box-shadow: 0 0 0 2px rgba(58, 29, 18, 0.55), 0 4px 0 rgba(30, 12, 6, 0.7); }

.btn-row { display: flex; gap: 10px; }
.btn-row > .btn { flex: 1 1 0; }

/* 圆形图标按钮 */
.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2.5px solid var(--brown-700);
  background: linear-gradient(180deg, #fffaf0 0%, #ffe3b0 100%);
  color: #7a2a12;
  font-size: 20px;
  line-height: 1;
  box-shadow: 0 4px 0 rgba(74, 36, 20, 0.62), inset 0 2px 0 #fff, 0 8px 14px rgba(0, 0, 0, 0.25);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.15s ease;
  touch-action: manipulation;
}

.icon-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.icon-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(74, 36, 20, 0.62), inset 0 1px 0 #fff; }
.icon-btn.is-off { filter: grayscale(0.85) brightness(0.95); color: #6b5a48; }
.icon-btn--back { font-size: 22px; font-weight: 900; }

/* ---------- 4. 加载页 ---------- */
#screen-loading {
  align-items: center;
  justify-content: center;
  background-color: #b4521f;
  background-image: radial-gradient(ellipse at 50% 20%, rgba(255, 212, 150, 0.62) 0%, rgba(244, 173, 90, 0.42) 34%, rgba(168, 82, 34, 0.72) 66%, rgba(42, 20, 10, 0.94) 100%),
    url("../assets/bg/home.jpg");
  background-position: center center, center top;
  background-size: cover, cover;
  background-repeat: no-repeat;
}

#screen-loading::before {
  content: "";
  position: absolute;
  inset: -30% -30% auto -30%;
  height: 80%;
  background: repeating-conic-gradient(from 0deg at 50% 0%, rgba(255, 244, 221, 0.22) 0deg 5deg, rgba(255, 244, 221, 0) 5deg 14deg);
  filter: blur(2px);
  opacity: 0.55;
  pointer-events: none;
  animation: sun-turn 40s linear infinite;
}

.loading-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: min(78%, 420px);
}

.loading-basket {
  width: 42%;
  max-width: 160px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  filter: drop-shadow(0 14px 16px rgba(58, 20, 8, 0.4));
  animation: basket-float 2.6s ease-in-out infinite;
}

.loading-title {
  font-size: clamp(26px, calc(var(--appw) * 0.068), 42px);
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--amber-light);
  text-shadow: 0 0 2px #fff3d6, 2px 0 0 #fff3d6, -2px 0 0 #fff3d6, 0 2px 0 #fff3d6, 0 -2px 0 #fff3d6,
    0 4px 0 #8e2416, 0 8px 14px rgba(58, 20, 8, 0.5);
  transform: rotate(-1.5deg);
}

.loading-bar {
  position: relative;
  width: 100%;
  height: 20px;
  border-radius: 999px;
  border: 3px solid var(--brown-800);
  background: linear-gradient(180deg, #34170c, #1f0d06);
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.65), 0 2px 0 rgba(255, 214, 160, 0.25);
  overflow: hidden;
}

#loading-progress {
  position: relative;
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe08a 0%, var(--amber) 52%, #dd7a20 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 0 10px rgba(255, 190, 90, 0.7);
  transition: width 0.28s ease;
}

#loading-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.24) 0 8px, rgba(255, 255, 255, 0) 8px 18px);
  animation: bar-stripes 0.7s linear infinite;
}

.loading-text {
  margin: 0;
  font-size: clamp(13px, 3vw, 16px);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--cream);
  text-shadow: 0 2px 5px rgba(30, 10, 4, 0.6);
}

/* ---------- 5. 首屏首页 ---------- */
#screen-home {
  background-color: #7a3a1c;
  background-image: linear-gradient(180deg, rgba(58, 29, 18, 0.1) 0%, rgba(58, 29, 18, 0) 26%, rgba(42, 18, 10, 0.42) 72%, rgba(26, 10, 4, 0.86) 100%),
    radial-gradient(ellipse at 50% 0%, rgba(255, 212, 148, 0.35) 0%, rgba(255, 176, 94, 0) 46%),
    url("../assets/bg/home.jpg");
  background-position: center top, center top, center top;
  background-size: cover, cover, cover;
  background-repeat: no-repeat;
}

/* 顶部柔光 */
#screen-home::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 46%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 226, 168, 0.5) 0%, rgba(255, 205, 130, 0) 68%);
  pointer-events: none;
  z-index: 1;
}

.home-logo {
  position: absolute;
  top: 3.4%;
  left: 50%;
  z-index: 4;
  height: 23%;
  width: auto;
  max-width: 88%;
  transform: translateX(-50%) rotate(-1.5deg);
  object-fit: contain;
  filter: drop-shadow(0 6px 0 rgba(74, 36, 20, 0.32)) drop-shadow(0 16px 24px rgba(20, 8, 4, 0.45));
  animation: logo-bob 4.6s ease-in-out infinite;
}

.home-subtitle {
  position: absolute;
  top: 27.2%;
  left: 50%;
  z-index: 4;
  margin: 0;
  padding: 7px 20px;
  white-space: nowrap;
  transform: translateX(-50%);
  border-radius: 999px;
  border: 2.5px solid var(--brown-700);
  background: linear-gradient(180deg, rgba(255, 250, 240, 0.94), rgba(255, 233, 199, 0.9));
  box-shadow: 0 4px 0 rgba(74, 36, 20, 0.38), inset 0 1px 0 #fff;
  color: #7a2a12;
  font-size: clamp(12px, calc(var(--appw) * 0.026), 16px);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.home-char {
  position: absolute;
  left: 1%;
  bottom: 9%;
  z-index: 3;
  height: 46%;
  width: auto;
  max-width: 60%;
  object-fit: contain;
  object-position: left bottom;
  filter: drop-shadow(0 18px 20px rgba(20, 8, 4, 0.45));
  animation: char-bob 5.2s ease-in-out infinite;
}

.home-rabbit {
  position: absolute;
  right: 4.5%;
  bottom: calc(7.6% + 158px);
  z-index: 3;
  height: 15%;
  width: auto;
  max-width: 24%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 10px 12px rgba(20, 8, 4, 0.4));
  animation: rabbit-hop 3.8s ease-in-out infinite;
}

.home-buttons {
  position: absolute;
  left: 50%;
  bottom: 7.6%;
  z-index: 6;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  width: min(76%, 366px);
  padding: 13px 13px 15px;
  transform: translateX(-50%);
  border-radius: 26px;
  border: 3px solid var(--brown-700);
  background: linear-gradient(180deg, rgba(255, 250, 240, 0.95) 0%, rgba(255, 236, 205, 0.94) 100%);
  box-shadow: 0 0 0 3px rgba(255, 226, 178, 0.35), 0 10px 0 rgba(74, 36, 20, 0.58),
    0 24px 42px rgba(20, 8, 4, 0.42), inset 0 2px 0 #fff;
}

.home-buttons > .btn,
.home-buttons > button { grid-column: auto; }
.home-buttons > #btn-play { grid-column: 1 / -1; }
.home-buttons > #btn-levels { grid-column: 1 / 2; }
.home-buttons > #btn-help { grid-column: 2 / 3; }
.home-buttons > #btn-play { min-height: 58px; }
.home-buttons > #btn-levels,
.home-buttons > #btn-help { min-height: 48px; font-size: clamp(14px, 3.1vw, 18px); }

.home-buttons .btn--ghost { color: #5a2f1b; text-shadow: none; border-color: rgba(90, 47, 27, 0.3); background: rgba(90, 47, 27, 0.1); box-shadow: inset 0 0 0 2px rgba(90, 47, 27, 0.14); }
.home-buttons .btn--ghost::before { display: none; }
.home-buttons .btn--ghost:hover { background: rgba(90, 47, 27, 0.16); }

.home-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px max(8px, env(safe-area-inset-bottom));
  height: 58px;
  background: linear-gradient(180deg, rgba(20, 8, 4, 0), rgba(20, 8, 4, 0.72));
}

.home-best {
  padding: 6px 14px;
  border-radius: 999px;
  border: 2px solid rgba(255, 226, 178, 0.4);
  background: rgba(30, 12, 6, 0.55);
  color: var(--cream);
  font-size: clamp(12px, 2.6vw, 14px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.home-best b { color: var(--amber-light); font-size: 1.15em; margin-left: 2px; }

/* 首页图片兜底 */
.img-fallback--logo {
  position: absolute;
  top: 3.4%;
  left: 50%;
  z-index: 4;
  width: min(86%, 500px);
  height: 23%;
  transform: translateX(-50%) rotate(-1.5deg);
  flex-direction: column;
  font-size: clamp(30px, calc(var(--appw) * 0.09), 56px);
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.12;
  color: var(--amber-light);
  text-shadow: 0 0 2px #fff3d6, 2px 0 0 #fff3d6, -2px 0 0 #fff3d6, 0 2px 0 #fff3d6,
    0 -2px 0 #fff3d6, 0 4px 0 #8e2416, 0 9px 16px rgba(58, 20, 8, 0.55);
}

/* 首页人物兜底：用 CSS 画一个红帽+紫裙剪影，避免破图 */
.img-fallback--char {
  position: absolute;
  left: 1.5%;
  bottom: 9%;
  z-index: 3;
  width: min(44%, 262px);
  height: 46%;
  filter: drop-shadow(0 18px 22px rgba(20, 8, 4, 0.42));
}

.img-fallback--char::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 84%;
  height: 46%;
  transform: translateX(-50%);
  border-radius: 48% 48% 40% 40% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 50% 26%, #e8603a 0%, #c33a24 56%, #8e2416 100%);
  box-shadow: inset 0 -12px 18px rgba(90, 20, 10, 0.4), inset 0 7px 0 rgba(255, 255, 255, 0.16);
}

.img-fallback--char::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 96%;
  height: 52%;
  transform: translateX(-50%);
  border-radius: 42% 42% 14% 14% / 26% 26% 10% 10%;
  background: linear-gradient(180deg, #7d5aa8 0%, #6a4a92 55%, #4f356e 100%);
  box-shadow: inset 0 8px 0 rgba(255, 255, 255, 0.14), inset 0 -10px 14px rgba(40, 20, 60, 0.35);
}

.img-fallback--char {
  background: radial-gradient(ellipse 26% 18% at 50% 30%, #f8ddb8 0 98%, rgba(0, 0, 0, 0) 100%);
}

.img-fallback--rabbit {
  position: absolute;
  right: 4.5%;
  bottom: calc(7.6% + 158px);
  z-index: 3;
  font-size: clamp(34px, calc(var(--appw) * 0.1), 64px);
  pointer-events: none;
  filter: drop-shadow(0 10px 12px rgba(20, 8, 4, 0.4));
}

.img-fallback--basket {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(56px, calc(var(--appw) * 0.16), 96px);
  filter: drop-shadow(0 14px 16px rgba(58, 20, 8, 0.4));
}

/* 对局吉祥物兜底：红帽脑袋 */
.img-fallback--mascot {
  position: absolute;
  top: var(--mascot-top, 34%);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: clamp(76px, calc(var(--appw) * 0.16), 116px);
  height: 96px;
  border-radius: 50% 50% 44% 44%;
  background: radial-gradient(circle at 50% 46%, #f8ddb8 0 29%, rgba(0, 0, 0, 0) 30%),
    radial-gradient(ellipse at 50% 26%, #e8603a 0 46%, #c33a24 68%, #8e2416 100%);
  box-shadow: inset 0 -10px 16px rgba(90, 20, 10, 0.35), inset 0 5px 0 rgba(255, 255, 255, 0.14);
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.45));
}

/* ---------- 6. 选关页 ---------- */
#screen-levels {
  background-color: #6b3418;
  background-image: linear-gradient(180deg, rgba(248, 201, 146, 0.16) 0%, rgba(58, 29, 18, 0.5) 48%, rgba(26, 10, 4, 0.88) 100%),
    url("../assets/bg/home.jpg");
  background-position: center center;
  background-size: cover;
  padding: 12px 16px max(14px, env(safe-area-inset-bottom));
  gap: 8px;
}

#screen-levels::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 214, 150, 0.14) 0%, rgba(20, 8, 4, 0.32) 75%);
  pointer-events: none;
  z-index: 1;
}

#screen-levels > * { position: relative; z-index: 2; }

.icon-btn--back {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 14px;
  z-index: 8;
}

.screen-title {
  align-self: center;
  position: relative;
  margin: 6px 0 4px;
  padding: 9px 34px;
  white-space: nowrap;
  border-radius: 16px;
  border: 3px solid var(--brown-700);
  background: linear-gradient(180deg, var(--cream-3) 0%, var(--cream) 55%, #f5c884 100%);
  box-shadow: 0 0 0 3px rgba(255, 226, 178, 0.35), 0 6px 0 rgba(74, 36, 20, 0.62),
    0 14px 22px rgba(20, 8, 4, 0.4), inset 0 2px 0 #fff;
  color: #7a2a12;
  font-size: clamp(20px, calc(var(--appw) * 0.05), 28px);
  font-weight: 900;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  transform: rotate(-1deg);
}

.screen-title::before,
.screen-title::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd97a, var(--amber) 60%, #b3591b 100%);
  box-shadow: 0 1px 0 #7a2a12;
}
.screen-title::before { left: 12px; }
.screen-title::after { right: 12px; }

.level-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: min-content;
  align-content: safe center;
  gap: 11px;
  padding: 6px 4px 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.level-grid::-webkit-scrollbar { width: 0; height: 0; display: none; }

.level-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: clamp(94px, 16.5dvh, 150px);
  padding: 10px 6px 8px;
  overflow: hidden;
  border-radius: 18px;
  border: 3px solid var(--brown-700);
  background: linear-gradient(180deg, #fffaf0 0%, #ffeacb 62%, #ffdca4 100%);
  box-shadow: 0 5px 0 rgba(74, 36, 20, 0.62), 0 12px 18px rgba(20, 8, 4, 0.32),
    inset 0 2px 0 #fff;
  color: #7a2a12;
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.18s ease;
  touch-action: manipulation;
}

.level-btn::before {
  content: "";
  position: absolute;
  inset: 3px 3px auto 3px;
  height: 34%;
  border-radius: 13px 13px 50% 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.level-btn:hover { transform: translateY(-3px); filter: brightness(1.02); }
.level-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(74, 36, 20, 0.62), inset 0 2px 0 #fff; }

.level-btn__num {
  position: relative;
  z-index: 1;
  font-size: clamp(21px, calc(var(--appw) * 0.056), 30px);
  font-weight: 900;
  line-height: 1;
  color: #a8321c;
  text-shadow: 0 1px 0 #fff;
}

/* 关卡卡右下角的棋子水印（目标种类），用于填充版面、快速识别 */
.level-btn__wm {
  position: absolute;
  right: -13%;
  bottom: -16%;
  z-index: 0;
  width: 58%;
  aspect-ratio: 1 / 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.14;
  transform: rotate(-14deg);
  pointer-events: none;
}

.level-btn.is-locked .level-btn__wm { opacity: 0.09; filter: grayscale(0.5); }

.level-btn__wm[data-type="white"] { background-image: url("../assets/items/white.png"); }
.level-btn__wm[data-type="red"] { background-image: url("../assets/items/red.png"); }
.level-btn__wm[data-type="blue"] { background-image: url("../assets/items/blue.png"); }
.level-btn__wm[data-type="grey"] { background-image: url("../assets/items/grey.png"); }
.level-btn__wm[data-type="acorn"] { background-image: url("../assets/items/acorn.png"); }
.level-btn__wm[data-type="bread"] { background-image: url("../assets/items/bread.png"); }

.level-btn__name {
  position: relative;
  z-index: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(10px, 2.4vw, 12px);
  font-weight: 700;
  color: #8a5a33;
}

.level-btn__stars { position: relative; z-index: 1; display: flex; gap: 2px; line-height: 1; }

/* 纯 CSS 五角星（clip-path），不依赖字体字形，避免被艺术字体渲染成叉号 */
.star {
  position: relative;
  display: inline-block;
  width: clamp(11px, 2.8vw, 15px);
  height: clamp(11px, 2.8vw, 15px);
  font-style: normal;
  flex: 0 0 auto;
}

.star::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background: linear-gradient(180deg, #d6c9b4 0%, #b9a98f 100%);
  opacity: 0.85;
}

.star.is-on { filter: drop-shadow(0 1px 0 rgba(156, 74, 18, 0.9)) drop-shadow(0 0 4px rgba(255, 200, 80, 0.6)); }

.star.is-on::before {
  background: linear-gradient(180deg, #ffe98a 0%, #ffcf5c 42%, #f2a33c 74%, #e08a25 100%);
  opacity: 1;
}

.level-btn.is-locked .star::before {
  background: linear-gradient(180deg, #b3a48e 0%, #93836d 100%);
  opacity: 0.7;
}

.level-btn__best {
  position: relative;
  z-index: 1;
  font-size: 9px;
  font-weight: 700;
  color: #a8763e;
  letter-spacing: 0.02em;
}

.level-btn__lock {
  position: absolute;
  top: 4px;
  right: 6px;
  z-index: 3;
  font-size: 14px;
  line-height: 1;
  opacity: 0.85;
  filter: drop-shadow(0 1px 1px rgba(40, 14, 6, 0.45));
}

.level-btn.is-locked {
  cursor: not-allowed;
  opacity: 1;
  filter: none;
  background: linear-gradient(180deg, #f4ecdc 0%, #e2d5c0 58%, #cfbea4 100%);
  border-color: #6e523a;
  box-shadow: 0 4px 0 rgba(58, 36, 20, 0.58), inset 0 2px 0 rgba(255, 255, 255, 0.65),
    inset 0 -8px 14px rgba(120, 88, 54, 0.14);
}

.level-btn.is-locked .level-btn__num {
  color: #7b6650;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}
.level-btn.is-locked .level-btn__name {
  color: #6f5b46;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.level-btn.is-locked .level-btn__wm { opacity: 0.08; filter: grayscale(1); }
.level-btn.is-locked:hover { transform: none; filter: none; }
.level-btn.is-locked:active { transform: none; }

.level-btn.is-current {
  outline: 3px solid var(--amber-light);
  outline-offset: 1px;
  animation: level-pulse 1.9s ease-in-out infinite;
}

.level-btn.is-current::after {
  content: "继续";
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 2px solid var(--brown-700);
  background: linear-gradient(180deg, #ffe38a, var(--amber));
  color: #7a2a12;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 0 rgba(74, 36, 20, 0.5);
  z-index: 3;
}

.levels-tip {
  margin: 0;
  padding: 2px 6px 0;
  text-align: center;
  color: rgba(255, 233, 199, 0.9);
  font-size: clamp(11px, 2.6vw, 13px);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 5px rgba(20, 8, 4, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 7. 对局页 ---------- */
#screen-game {
  background-color: #2a160d;
  background-image: linear-gradient(180deg, rgba(58, 29, 18, 0.08) 0%, rgba(42, 18, 10, 0.12) 40%, rgba(20, 8, 4, 0.55) 100%),
    url("../assets/bg/board.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* 顶部 HUD */
.hud {
  position: relative;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 auto;
  height: 54px;
  padding: max(9px, env(safe-area-inset-top)) 14px 0;
}

.hud-level {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 38px;
  padding: 0 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: 999px;
  border: 2.5px solid var(--brown-700);
  background: linear-gradient(180deg, rgba(255, 250, 240, 0.95), rgba(255, 227, 176, 0.92));
  box-shadow: 0 4px 0 rgba(74, 36, 20, 0.55), inset 0 1px 0 #fff, 0 8px 16px rgba(0, 0, 0, 0.28);
  color: #7a2a12;
  font-size: clamp(14px, calc(var(--appw) * 0.033), 18px);
  font-weight: 900;
  letter-spacing: 0.06em;
}

/* 目标 chips */
.hud-goals {
  position: relative;
  z-index: 7;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 5px 14px 0;
}

.goal-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 2px 11px 2px 3px;
  border-radius: 999px;
  border: 2.5px solid var(--brown-700);
  background: linear-gradient(180deg, rgba(255, 250, 240, 0.96), rgba(255, 231, 187, 0.92));
  box-shadow: 0 3px 0 rgba(74, 36, 20, 0.55), inset 0 1px 0 #fff, 0 6px 12px rgba(0, 0, 0, 0.25);
  color: #5a2f1b;
  font-size: clamp(12px, 2.8vw, 14px);
  font-weight: 800;
  white-space: nowrap;
}

.goal-chip__ico {
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid rgba(90, 47, 27, 0.35);
  background-color: #f3e7cf;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 88% 88%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* 6 种棋子图标（同时用于目标 chip / 结算 / 帮助图例） */
.goal-chip__ico[data-type="white"],
.result-goal__ico[data-type="white"],
.help-piece[data-type="white"] { background-image: url("../assets/items/white.png"); background-color: #f7f0e1; }

.goal-chip__ico[data-type="red"],
.result-goal__ico[data-type="red"],
.help-piece[data-type="red"] { background-image: url("../assets/items/red.png"); background-color: #e65435; }

.goal-chip__ico[data-type="blue"],
.result-goal__ico[data-type="blue"],
.help-piece[data-type="blue"] { background-image: url("../assets/items/blue.png"); background-color: #6b5bd2; }

.goal-chip__ico[data-type="grey"],
.result-goal__ico[data-type="grey"],
.help-piece[data-type="grey"] { background-image: url("../assets/items/grey.png"); background-color: #9b9188; }

.goal-chip__ico[data-type="acorn"],
.result-goal__ico[data-type="acorn"],
.help-piece[data-type="acorn"] { background-image: url("../assets/items/acorn.png"); background-color: #e2b46f; }

.goal-chip__ico[data-type="bread"],
.result-goal__ico[data-type="bread"],
.help-piece[data-type="bread"] { background-image: url("../assets/items/bread.png"); background-color: #f2d3a0; }

.goal-chip__count { letter-spacing: 0.02em; }
.goal-chip__count b { display: inline-block; min-width: 1ch; color: #a8321c; font-size: 1.22em; font-variant-numeric: tabular-nums; }
.goal-chip__count i { font-style: normal; opacity: 0.7; }
.goal-chip__check { display: none; color: var(--green); font-weight: 900; font-size: 1.1em; }

.goal-chip.is-done {
  background: linear-gradient(180deg, #fffbe0, #ffe07e);
  box-shadow: 0 3px 0 rgba(74, 36, 20, 0.5), 0 0 14px rgba(255, 216, 77, 0.65), inset 0 1px 0 #fff;
}
.goal-chip.is-done .goal-chip__check { display: inline; }
.goal-chip.is-bump { animation: chip-bump 0.42s cubic-bezier(0.2, 1.6, 0.4, 1); }

/* 状态栏 */
.hud-stats {
  position: relative;
  z-index: 7;
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
  padding: 6px 14px 0;
}

.stat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 6px 5px;
  border-radius: 14px;
  border: 2.5px solid var(--brown-700);
  background: linear-gradient(180deg, rgba(255, 250, 240, 0.95), rgba(255, 227, 176, 0.9));
  box-shadow: 0 4px 0 rgba(74, 36, 20, 0.55), inset 0 1px 0 #fff, 0 8px 14px rgba(0, 0, 0, 0.26);
  line-height: 1.1;
}

.stat-label {
  font-size: clamp(9px, 2.2vw, 11px);
  font-weight: 700;
  color: #8a5a33;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.stat b {
  font-size: clamp(19px, calc(var(--appw) * 0.045), 26px);
  font-weight: 900;
  color: #7a2a12;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-shadow: 0 1px 0 #fff;
}

.stat--moves b { color: #a8321c; font-size: clamp(21px, calc(var(--appw) * 0.05), 28px); }
.stat--moves.is-low b { color: #b3301f; animation: low-moves 0.9s ease-in-out infinite; }
.stat--best b { color: #7a5a34; }
.stat.is-bump { animation: stat-bump 0.36s cubic-bezier(0.2, 1.6, 0.4, 1); }

/* 棋盘区域 */
.board-area {
  position: relative;
  z-index: 5;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 78px 8px 4px;
  overflow: hidden;
}

.board {
  /* game.js 会覆盖 --cell / --gap；这里是默认值，保证无 JS 时结构可看 */
  --cell: 44px;
  --gap: 3px;
  --board-pad: 8px;
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  /* border-box：+6px 用来抵消左右/上下各 3px 的边框，保证 grid 区域正好 = 8*cell+7*gap */
  width: calc(8 * (var(--cell) + var(--gap)) - var(--gap) + 2 * var(--board-pad) + 6px);
  height: calc(8 * (var(--cell) + var(--gap)) - var(--gap) + 2 * var(--board-pad) + 6px);
  padding: var(--board-pad);
  border: 3px solid #6b3d22;
  border-radius: clamp(14px, 3.2vw, 22px);
  background: linear-gradient(180deg, rgba(48, 22, 11, 0.93) 0%, rgba(26, 11, 5, 0.95) 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 194, 126, 0.14), inset 0 9px 24px rgba(0, 0, 0, 0.6),
    inset 0 -5px 14px rgba(0, 0, 0, 0.45), 0 9px 0 rgba(58, 26, 13, 0.6),
    0 22px 36px rgba(0, 0, 0, 0.45);
  touch-action: none;
}

.board::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background-image: repeating-linear-gradient(115deg, rgba(255, 196, 120, 0.045) 0 3px, rgba(255, 196, 120, 0) 3px 11px);
  pointer-events: none;
}

.board::after {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 210, 150, 0.1) 0%, rgba(255, 210, 150, 0) 60%);
  pointer-events: none;
}

.board__grid {
  position: absolute;
  inset: var(--board-pad);
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(8, var(--cell));
  grid-template-rows: repeat(8, var(--cell));
  gap: var(--gap);
}

.board-cell {
  width: var(--cell);
  height: var(--cell);
  border-radius: 22%;
  background: rgba(255, 226, 180, 0.055);
  box-shadow: inset 0 1px 0 rgba(255, 226, 180, 0.09), inset 0 -2px 4px rgba(0, 0, 0, 0.22);
}

.board__tiles {
  position: absolute;
  inset: var(--board-pad);
  z-index: 2;
}

.board__fx {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
}

/* 棋子 */
.tile {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cell);
  height: var(--cell);
  --tx: calc(var(--x, 0) * (var(--cell) + var(--gap)));
  --ty: calc(var(--y, 0) * (var(--cell) + var(--gap)));
  transform: translate3d(var(--tx), var(--ty), 0);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 24%;
  z-index: 1;
  will-change: transform;
  transition: transform var(--t-swap) cubic-bezier(0.25, 0.85, 0.32, 1.08), opacity var(--t-pop) linear;
}

/* 6 种棋子背景图 + 纯色兜底变量 */
.tile[data-type="white"] { --tc1: #fbf4e4; --tc2: #d8c7a6; background-image: url("../assets/items/white.png"); }
.tile[data-type="red"] { --tc1: #f2714e; --tc2: #b3301f; background-image: url("../assets/items/red.png"); }
.tile[data-type="blue"] { --tc1: #8b7cf0; --tc2: #4a6fd0; background-image: url("../assets/items/blue.png"); }
.tile[data-type="grey"] { --tc1: #b8afa4; --tc2: #7d746c; background-image: url("../assets/items/grey.png"); }
.tile[data-type="acorn"] { --tc1: #f0c88c; --tc2: #b98443; background-image: url("../assets/items/acorn.png"); }
.tile[data-type="bread"] { --tc1: #f7ddb0; --tc2: #d09a54; background-image: url("../assets/items/bread.png"); }

/* 素材缺失时：用渐变画一个圆胖的彩色小蘑菇，保证棋盘可玩可截图 */
.board--no-art .tile {
  background-image: radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.82) 0 9%, rgba(255, 255, 255, 0) 34%),
    radial-gradient(ellipse 82% 60% at 50% 36%, var(--tc1) 0 62%, var(--tc2) 86%, rgba(0, 0, 0, 0) 88%),
    radial-gradient(ellipse 44% 34% at 50% 80%, #fdf3e0 0 66%, rgba(0, 0, 0, 0) 70%);
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.38));
}

/* 选中 / 提示 / 消除 / 下落 / 无效 / 特殊 */
.tile.is-selected {
  z-index: 6;
  scale: 1.1;
  filter: drop-shadow(0 0 9px rgba(255, 216, 77, 0.95)) drop-shadow(0 0 20px rgba(255, 160, 40, 0.6));
  animation: tile-breathe 0.8s ease-in-out infinite alternate;
}

.tile.is-hint {
  z-index: 6;
  animation: tile-hint 0.72s ease-in-out infinite;
}

.tile.is-pop {
  z-index: 7;
  pointer-events: none;
  animation: tile-pop var(--t-pop) ease-out forwards;
}

.tile.is-falling {
  z-index: 2;
  transition-duration: var(--t-fall);
  transition-timing-function: cubic-bezier(0.3, 0.9, 0.4, 1.08);
}

.tile.is-spawning {
  z-index: 3;
  animation: tile-spawn var(--t-fall) cubic-bezier(0.2, 0.9, 0.35, 1.1) both;
}

.tile.is-shaking {
  z-index: 5;
  animation: tile-shake 0.28s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.tile.is-magic {
  z-index: 6;
  animation: tile-magic 0.75s ease-in-out infinite alternate;
}

/* 特殊块：光环 + 标记 */
.tile::before,
.tile::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.tile--line-h::before,
.tile--line-v::before {
  inset: -3%;
  border-radius: 50%;
  opacity: 1;
  box-shadow: 0 0 12px rgba(255, 214, 110, 0.85), inset 0 0 12px rgba(255, 200, 90, 0.35);
  animation: special-glow 1.5s ease-in-out infinite;
}

.tile--line-h::after,
.tile--line-v::after {
  inset: 37% 3%;
  border-radius: 5px;
  opacity: 1;
  background: repeating-linear-gradient(90deg, #ffe08a 0 22%, #f2a33c 22% 44%);
  box-shadow: 0 0 8px rgba(255, 196, 80, 0.9), 0 0 0 1.5px rgba(90, 47, 27, 0.55);
}

.tile--line-v::after {
  inset: 3% 37%;
  background: repeating-linear-gradient(180deg, #ffe08a 0 22%, #f2a33c 22% 44%);
}

.tile--bomb::before {
  inset: -6%;
  border-radius: 50%;
  opacity: 1;
  background: radial-gradient(circle, rgba(255, 130, 60, 0.6) 0%, rgba(255, 90, 40, 0) 68%);
  animation: bomb-pulse 0.9s ease-in-out infinite;
}

.tile--bomb::after {
  inset: 20%;
  border-radius: 50%;
  opacity: 1;
  background: conic-gradient(from 0deg, #ffe27a, #ff7a3c, #ffd24a, #ff5a2a, #ffe27a);
  clip-path: polygon(50% 0%, 62% 34%, 98% 34%, 69% 56%, 80% 92%, 50% 70%, 20% 92%, 31% 56%, 2% 34%, 38% 34%);
  filter: drop-shadow(0 0 6px rgba(255, 170, 60, 0.95));
  animation: spin-slow 3.2s linear infinite;
}

.tile--rainbow::before {
  inset: -4%;
  border-radius: 50%;
  opacity: 1;
  background: conic-gradient(#ff5a5a, #ffb84d, #ffe84d, #68d96b, #4dc3ff, #8a6bff, #ff5ad9, #ff5a5a);
  -webkit-mask: radial-gradient(circle, rgba(0, 0, 0, 0) 0 55%, #000 57%);
  mask: radial-gradient(circle, rgba(0, 0, 0, 0) 0 55%, #000 57%);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
  animation: spin-slow 3.8s linear infinite;
}

.tile--rainbow::after {
  inset: 16%;
  border-radius: 50%;
  opacity: 1;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 68%);
  animation: rainbow-pulse 1s ease-in-out infinite;
}

/* 特效层 */
.score-float {
  position: absolute;
  z-index: 12;
  transform: translate(-50%, -50%);
  font-weight: 900;
  font-size: clamp(16px, calc(var(--appw) * 0.037), 22px);
  color: #fff8e0;
  text-shadow: 0 2px 0 #8e2416, 0 0 12px rgba(255, 196, 80, 0.95);
  white-space: nowrap;
  pointer-events: none;
  animation: score-float 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

.burst {
  position: absolute;
  z-index: 11;
  width: var(--cell, 44px);
  height: var(--cell, 44px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, #fff6d8 0 16%, rgba(255, 216, 120, 0.95) 34%, rgba(255, 150, 62, 0.55) 56%, rgba(255, 120, 40, 0) 72%);
  animation: burst-fly 0.42s ease-out forwards;
}

.spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--amber-light);
  box-shadow: 0 0 7px #ffb84d;
  pointer-events: none;
  animation: spark-fly 0.46s ease-out forwards;
}

.spark:nth-child(2) { --sx: 18px; --sy: -12px; }
.spark:nth-child(3) { --sx: -16px; --sy: -14px; }
.spark:nth-child(4) { --sx: 14px; --sy: 16px; }
.spark:nth-child(5) { --sx: -18px; --sy: 10px; }
.spark:nth-child(6) { --sx: 0; --sy: -22px; }

/* 吉祥物 + 气泡 */
.game-mascot {
  position: absolute;
  top: var(--mascot-top, 34%);
  left: 50%;
  z-index: 4;
  height: 96px;
  width: auto;
  max-width: 34%;
  transform: translateX(-50%);
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.45));
  animation: mascot-idle 3.4s ease-in-out infinite;
}

.speech-bubble {
  position: absolute;
  z-index: 9;
  top: calc(var(--mascot-top, 34%) + 4px);
  left: calc(50% + 26px);
  max-width: 42%;
  padding: 8px 12px;
  transform-origin: left bottom;
  border: 2.5px solid var(--brown-700);
  border-radius: 16px;
  background: linear-gradient(180deg, #fffaf0 0%, #ffe9c7 100%);
  box-shadow: 0 4px 0 rgba(74, 36, 20, 0.38), 0 10px 18px rgba(0, 0, 0, 0.32), inset 0 1px 0 #fff;
  color: #5a2f1b;
  font-size: clamp(12px, 2.7vw, 14px);
  font-weight: 700;
  line-height: 1.42;
  pointer-events: none;
}

.speech-bubble::before {
  content: "";
  position: absolute;
  left: -7px;
  bottom: 9px;
  width: 12px;
  height: 12px;
  background: #ffe9c7;
  border-left: 2.5px solid var(--brown-700);
  border-bottom: 2.5px solid var(--brown-700);
  border-radius: 0 0 0 3px;
  transform: rotate(45deg);
}

.speech-bubble.is-show { animation: bubble-in 0.34s cubic-bezier(0.2, 1.4, 0.4, 1) both; }

/* 连击横幅 */
.combo-banner {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 24;
  transform: translate(-50%, -50%) rotate(-4deg);
  font-size: clamp(30px, calc(var(--appw) * 0.082), 52px);
  font-weight: 900;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--amber-light);
  text-shadow: 0 0 2px #fff3d6, 2px 0 0 #fff3d6, -2px 0 0 #fff3d6, 0 2px 0 #fff3d6,
    0 -2px 0 #fff3d6, 0 5px 0 #8e2416, 0 10px 18px rgba(30, 10, 4, 0.6);
  pointer-events: none;
  opacity: 0;
}

.combo-banner.is-show { animation: combo-pop 0.92s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
.combo-banner--2 { color: #ffe066; }
.combo-banner--3 {
  color: #ffb04d;
  text-shadow: 0 0 2px #fff3d6, 2px 0 0 #fff3d6, -2px 0 0 #fff3d6, 0 2px 0 #fff3d6,
    0 -2px 0 #fff3d6, 0 5px 0 #a8321c, 0 10px 18px rgba(30, 10, 4, 0.6);
}
.combo-banner--4 {
  color: #ff9468;
  text-shadow: 0 0 2px #fff3d6, 2px 0 0 #fff3d6, -2px 0 0 #fff3d6, 0 2px 0 #fff3d6,
    0 -2px 0 #fff3d6, 0 5px 0 #7a2a12, 0 10px 22px rgba(30, 10, 4, 0.65);
}
.combo-banner { filter: drop-shadow(0 6px 10px rgba(40, 14, 6, 0.4)); }

/* 道具栏 + 提示 */
.boosts {
  position: relative;
  z-index: 8;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex: 0 0 auto;
  padding: 6px 14px 0;
}

.boost-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 96px;
  min-height: 48px;
  padding: 6px 16px 6px 12px;
  border-radius: 999px;
  border: 3px solid var(--brown-700);
  background: linear-gradient(180deg, #fffaf0 0%, #ffe9c7 55%, #ffd79a 100%);
  box-shadow: 0 5px 0 rgba(74, 36, 20, 0.6), 0 10px 16px rgba(0, 0, 0, 0.28), inset 0 2px 0 #fff;
  color: #7a2a12;
  font-size: 16px;
  font-weight: 900;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.15s ease;
  touch-action: manipulation;
}

.boost-btn:hover { transform: translateY(-2px); filter: brightness(1.03); }
.boost-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(74, 36, 20, 0.6), inset 0 1px 0 #fff; }
.boost-btn .boost-ico { font-size: 20px; line-height: 1; filter: drop-shadow(0 1px 0 #fff); }
.boost-btn b { font-size: 18px; color: #a8321c; font-variant-numeric: tabular-nums; }
.boost-btn.is-empty { filter: grayscale(0.7); opacity: 0.62; cursor: not-allowed; }
.boost-btn.is-empty:hover { transform: none; }
.boost-btn.is-used { animation: boost-pop 0.34s cubic-bezier(0.2, 1.6, 0.4, 1); }

.goal-tip {
  flex: 0 0 auto;
  min-height: 26px;
  margin: 0;
  padding: 5px 16px max(7px, env(safe-area-inset-bottom));
  text-align: center;
  font-size: clamp(11px, 2.6vw, 13px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(255, 233, 199, 0.88);
  text-shadow: 0 2px 5px rgba(20, 8, 4, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 8. 结算页 ---------- */
#screen-result {
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  background-color: #2a160d;
  background-image: linear-gradient(180deg, rgba(36, 15, 7, 0.6) 0%, rgba(20, 8, 4, 0.78) 100%),
    url("../assets/bg/board.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

#screen-result::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 44%, rgba(255, 214, 150, 0.16) 0%, rgba(20, 8, 4, 0.35) 72%);
  pointer-events: none;
  z-index: 1;
}

.result-card {
  position: relative;
  z-index: 5;
  width: min(88%, 402px);
  max-height: 92%;
  overflow: visible;
  padding: 38px 20px 18px;
  border: 3.5px solid var(--brown-700);
  border-radius: 26px;
  background: linear-gradient(180deg, var(--cream-3) 0%, #ffefd2 48%, #f8d49b 100%);
  box-shadow: 0 0 0 3px rgba(255, 238, 206, 0.45), 0 14px 0 rgba(74, 36, 20, 0.55),
    0 28px 54px rgba(0, 0, 0, 0.55), inset 0 2px 0 #fff, inset 0 -10px 20px rgba(186, 118, 54, 0.16);
  animation: card-in 0.52s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

.result-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(rgba(140, 84, 40, 0.12) 1px, rgba(0, 0, 0, 0) 1.4px);
  background-size: 13px 13px;
  opacity: 0.55;
  pointer-events: none;
}

.result-card > * { position: relative; z-index: 1; }

.result-ribbon {
  position: absolute;
  top: -27px;
  left: 50%;
  z-index: 3;
  max-width: 92%;
  padding: 9px 30px;
  transform: translateX(-50%) rotate(-2deg);
  border: 3px solid var(--brown-700);
  border-radius: 14px;
  background: linear-gradient(180deg, #f28a48 0%, var(--red) 55%, #bf3b1d 100%);
  box-shadow: 0 5px 0 rgba(122, 42, 18, 0.6), 0 12px 20px rgba(40, 14, 6, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.45);
  color: #fffaf0;
  font-size: clamp(19px, calc(var(--appw) * 0.048), 26px);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-align: center;
  text-shadow: 0 2px 0 rgba(122, 42, 18, 0.6);
  white-space: nowrap;
}

.result-ribbon::before,
.result-ribbon::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px;
  height: 26px;
  margin-top: -13px;
  background: #9c2c14;
  border: 3px solid var(--brown-700);
  border-radius: 6px;
  z-index: -1;
}
.result-ribbon::before { left: -14px; transform: rotate(-8deg); }
.result-ribbon::after { right: -14px; transform: rotate(8deg); }

.result-card--lose {
  background: linear-gradient(180deg, #fdf4e6 0%, #f6e7cf 48%, #ecd3ad 100%);
  border-color: #6b5340;
}

.result-card--lose .result-score > b { color: #8a3a22; }
.result-card--lose .result-stars { opacity: 0.9; }

.result-card--lose .result-ribbon {
  background: linear-gradient(180deg, #a5836a 0%, #7d5a42 55%, #5a3d2a 100%);
  box-shadow: 0 5px 0 rgba(50, 28, 16, 0.62), 0 12px 20px rgba(40, 14, 6, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
}
.result-card--lose .result-ribbon::before,
.result-card--lose .result-ribbon::after { background: #4a3020; }

.result-level {
  margin: 10px 0 0;
  text-align: center;
  font-size: clamp(12px, 2.8vw, 13.5px);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #9a6a3a;
}

.result-stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 62px;
  margin: 12px 0 0;
}

.result-star {
  display: inline-block;
  font-style: normal;
  font-size: clamp(38px, calc(var(--appw) * 0.1), 56px);
  line-height: 1;
  color: #d9c6a7;
  text-shadow: 0 3px 0 rgba(122, 74, 40, 0.3);
  transform-origin: center;
}

.result-star.is-on {
  color: var(--amber-light);
  text-shadow: 0 3px 0 #b3591b, 0 0 18px rgba(255, 200, 80, 0.85), 0 0 36px rgba(255, 160, 40, 0.5);
  animation: star-in 0.56s cubic-bezier(0.2, 1.6, 0.4, 1) both;
  animation-delay: calc(var(--i, 0) * 150ms + 120ms);
}

.result-star.is-grey { color: #d9c6a7; }

.result-score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin: 2px 0 0;
}

.result-score > span {
  font-size: clamp(12px, 2.8vw, 14px);
  font-weight: 700;
  color: #8a5a33;
  letter-spacing: 0.1em;
}

.result-score > b {
  font-size: clamp(30px, calc(var(--appw) * 0.078), 44px);
  font-weight: 900;
  color: #a8321c;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 #fff;
}

.result-best {
  margin: 2px 0 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #8a5a33;
}
.result-best b { color: #a8321c; }

.result-newbest {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 2px solid var(--brown-700);
  background: linear-gradient(180deg, #ffe98a, var(--amber));
  color: #7a2a12;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 0 rgba(74, 36, 20, 0.45);
  animation: newbest-pop 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) both;
  animation-delay: 0.7s;
}

.result-goals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 12px 0 14px;
}

.result-goal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  border: 2px solid rgba(90, 47, 27, 0.4);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 0 #fff;
  font-size: clamp(11px, 2.6vw, 13px);
  font-weight: 800;
  color: #5a2f1b;
}

.result-goal__ico {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1.5px solid rgba(90, 47, 27, 0.35);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 88% 88%;
}

.result-goal.is-done { background: rgba(210, 240, 200, 0.72); }
.result-goal.is-done::after { content: "✓"; color: var(--green); font-weight: 900; }
.result-goal.is-fail { background: rgba(250, 214, 204, 0.72); }
.result-goal.is-fail::after { content: "✗"; color: var(--red-deep); font-weight: 900; }

.result-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.result-buttons .btn-row { gap: 10px; }

.result-hint {
  margin: 10px 0 0;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #a8763e;
  letter-spacing: 0.04em;
}

/* ---------- 9. 飘叶 ---------- */
.leaf-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.leaf {
  position: absolute;
  top: -12%;
  left: var(--x, 50%);
  width: var(--s, 14px);
  height: var(--s, 14px);
  opacity: 0;
  background-image: url("../assets/ui/leaf.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  will-change: transform, opacity;
  animation: leaf-fall var(--dur, 9s) linear var(--delay, 0s) infinite;
}

.leaf.is-missing {
  background-image: none;
  background-color: var(--c, #c9532b);
  border-radius: 2px 70% 2px 70%;
  box-shadow: inset -2px -2px 0 rgba(120, 50, 20, 0.35);
  opacity: 0;
}

/* ---------- 10. 弹窗层 ---------- */
.modal-layer {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 18px;
  background: rgba(24, 10, 5, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fade-in 0.2s ease both;
}

.modal {
  position: relative;
  z-index: 2;
  width: min(100%, 386px);
  max-height: 86%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 18px 18px;
  border: 3px solid var(--brown-700);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--cream-3) 0%, var(--cream-2) 52%, #fbe2b8 100%);
  box-shadow: 0 0 0 3px rgba(255, 238, 206, 0.4), 0 12px 0 rgba(74, 36, 20, 0.5),
    0 26px 50px rgba(0, 0, 0, 0.5), inset 0 2px 0 #fff;
  animation: modal-in 0.36s cubic-bezier(0.2, 1.3, 0.4, 1) both;
  scrollbar-width: none;
}

.modal::-webkit-scrollbar { width: 0; display: none; }

.modal__title {
  position: relative;
  margin: 0 0 12px;
  text-align: center;
  font-size: clamp(19px, calc(var(--appw) * 0.048), 26px);
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #7a2a12;
  text-shadow: 0 1px 0 #fff;
}

.modal__title::after {
  content: "";
  display: block;
  width: 86px;
  height: 4px;
  margin: 7px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(242, 163, 60, 0), var(--amber), rgba(242, 163, 60, 0));
}

.modal__text {
  margin: 0 auto;
  max-width: 92%;
  text-align: center;
  font-size: clamp(13px, 2.9vw, 15px);
  line-height: 1.6;
  font-weight: 600;
  color: #6b4326;
}

.modal__emoji {
  display: block;
  margin: 2px auto 6px;
  text-align: center;
  font-size: 40px;
  line-height: 1.1;
  filter: drop-shadow(0 4px 4px rgba(120, 60, 20, 0.25));
}

.modal__buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

/* 帮助弹窗 */
.help-block { margin: 0 0 13px; }
.help-block:last-of-type { margin-bottom: 0; }

.help-block__title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 6px;
  font-size: clamp(14px, 3.1vw, 16px);
  font-weight: 900;
  color: #a8321c;
}

.help-block__title::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 50% 50% 42% 42%;
  background: radial-gradient(circle at 35% 28%, #ff8a62, var(--red) 62%, #8e2416 100%);
  box-shadow: 0 1px 0 rgba(90, 47, 27, 0.6);
}

.help-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: clamp(12px, 2.7vw, 13.5px);
  line-height: 1.55;
  font-weight: 600;
  color: #5a3a22;
}

.help-list li {
  position: relative;
  padding-left: 15px;
}

.help-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 2px rgba(242, 163, 60, 0.22);
}

.help-list b {
  color: #a8321c;
  font-weight: 900;
}

.help-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 8px;
  margin: 2px 0 10px;
  padding: 8px;
  border-radius: 14px;
  border: 2px dashed rgba(90, 47, 27, 0.28);
  background: rgba(255, 255, 255, 0.42);
}

.help-piece {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(90, 47, 27, 0.32);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90% 90%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.help-specials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 2px 0 0;
}

.help-special {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border-radius: 11px;
  border: 2px solid rgba(90, 47, 27, 0.24);
  background: rgba(255, 255, 255, 0.45);
  font-size: clamp(10px, 2.4vw, 12px);
  font-weight: 700;
  color: #6b4326;
  line-height: 1.3;
}

.help-special__ico {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid rgba(90, 47, 27, 0.4);
}

.help-special__ico--line { background: repeating-linear-gradient(90deg, #ffe08a 0 25%, #f2a33c 25% 50%); }
.help-special__ico--bomb { background: conic-gradient(from 0deg, #ffe27a, #ff7a3c, #ffd24a, #ff5a2a, #ffe27a); }
.help-special__ico--rainbow { background: conic-gradient(#ff5a5a, #ffb84d, #ffe84d, #68d96b, #4dc3ff, #8a6bff, #ff5ad9, #ff5a5a); }
.help-special__ico--star { background: radial-gradient(circle, #fff3c4 0 40%, var(--amber) 60%, #b3591b 100%); }

/* 暂停弹窗小信息 */
.pause-info {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 10px 0 2px;
}

.pause-chip {
  padding: 5px 12px;
  border-radius: 999px;
  border: 2px solid rgba(90, 47, 27, 0.3);
  background: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 800;
  color: #7a2a12;
}

.pause-chip b { font-size: 1.25em; color: #a8321c; }

/* ---------- 11. Toast ---------- */
.toast {
  position: absolute;
  left: 50%;
  bottom: 17%;
  z-index: 60;
  max-width: 82%;
  padding: 9px 20px;
  transform: translateX(-50%) translateY(8px) scale(0.96);
  border-radius: 999px;
  border: 2px solid rgba(255, 220, 160, 0.5);
  background: rgba(58, 29, 18, 0.94);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  color: var(--cream);
  font-size: clamp(12px, 2.8vw, 14px);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* ---------- 12. 动效关键帧 ---------- */
@keyframes sun-turn {
  to { transform: rotate(360deg); }
}

@keyframes basket-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}

@keyframes bar-stripes {
  to { background-position: 36px 0; }
}

@keyframes logo-bob {
  0%, 100% { transform: translateX(-50%) rotate(-1.5deg) translateY(0); }
  50% { transform: translateX(-50%) rotate(1.2deg) translateY(-7px); }
}

@keyframes char-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(-0.6deg); }
}

@keyframes rabbit-hop {
  0%, 72%, 100% { transform: translateY(0) rotate(0deg); }
  80% { transform: translateY(-9px) rotate(4deg); }
  90% { transform: translateY(0) rotate(-2deg); }
}

@keyframes level-pulse {
  0%, 100% { box-shadow: 0 5px 0 rgba(74, 36, 20, 0.62), 0 0 0 0 rgba(255, 216, 77, 0.5), inset 0 2px 0 #fff; }
  50% { box-shadow: 0 5px 0 rgba(74, 36, 20, 0.62), 0 0 0 7px rgba(255, 216, 77, 0), inset 0 2px 0 #fff; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modal-in {
  0% { opacity: 0; transform: translateY(22px) scale(0.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes card-in {
  0% { opacity: 0; transform: translateY(30px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes star-in {
  0% { opacity: 0; transform: scale(1.9) rotate(-24deg); }
  60% { opacity: 1; transform: scale(0.86) rotate(6deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes newbest-pop {
  0% { opacity: 0; transform: scale(0.4) rotate(-12deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes bubble-in {
  0% { opacity: 0; transform: scale(0.55) translateY(8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes combo-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(0.3); }
  22% { opacity: 1; transform: translate(-50%, -55%) rotate(-3deg) scale(1.22); }
  42% { opacity: 1; transform: translate(-50%, -52%) rotate(-5deg) scale(0.96); }
  60% { opacity: 1; transform: translate(-50%, -54%) rotate(-4deg) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -70%) rotate(-2deg) scale(1); }
}

@keyframes score-float {
  0% { opacity: 0; translate: 0 8px; scale: 0.7; }
  16% { opacity: 1; scale: 1.18; }
  36% { scale: 1; }
  100% { opacity: 0; translate: 0 -48px; scale: 1; }
}

@keyframes burst-fly {
  0% { opacity: 1; scale: 0.3; }
  55% { opacity: 0.95; scale: 1.12; }
  100% { opacity: 0; scale: 1.65; }
}

@keyframes spark-fly {
  0% { opacity: 1; translate: 0 0; scale: 1; }
  100% { opacity: 0; translate: var(--sx, 0) var(--sy, 0); scale: 0.2; }
}

@keyframes tile-breathe {
  from { scale: 1.06; filter: drop-shadow(0 0 8px rgba(255, 216, 77, 0.9)); }
  to { scale: 1.15; filter: drop-shadow(0 0 16px rgba(255, 216, 77, 1)) brightness(1.08); }
}

@keyframes tile-hint {
  0%, 100% { scale: 1; translate: 0 0; filter: drop-shadow(0 0 0 rgba(255, 216, 77, 0)); }
  40% { scale: 1.17; translate: 0 -3px; filter: drop-shadow(0 0 14px rgba(255, 216, 77, 0.95)) brightness(1.1); }
  70% { scale: 1.08; translate: 0 0; filter: drop-shadow(0 0 10px rgba(255, 216, 77, 0.8)); }
}

@keyframes tile-pop {
  0% { scale: 1; opacity: 1; filter: brightness(1); }
  45% { scale: 1.3; opacity: 1; filter: brightness(1.75) saturate(1.3); }
  100% { scale: 0.15; opacity: 0; filter: brightness(2.2); }
}

@keyframes tile-spawn {
  0% { opacity: 0; translate: 0 -16px; scale: 0.4; }
  70% { opacity: 1; scale: 1.06; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes tile-shake {
  0%, 100% { translate: 0 0; }
  20% { translate: -5px 0; }
  40% { translate: 5px 0; }
  60% { translate: -4px 0; }
  80% { translate: 3px 0; }
}

@keyframes tile-magic {
  from { scale: 1; filter: brightness(1.05) saturate(1.1) drop-shadow(0 0 4px rgba(255, 230, 150, 0.7)); }
  to { scale: 1.1; filter: brightness(1.4) saturate(1.45) drop-shadow(0 0 16px rgba(255, 220, 130, 1)); }
}

@keyframes special-glow {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

@keyframes bomb-pulse {
  0%, 100% { opacity: 0.7; scale: 0.94; }
  50% { opacity: 1; scale: 1.08; }
}

@keyframes rainbow-pulse {
  0%, 100% { opacity: 0.45; scale: 0.9; }
  50% { opacity: 0.9; scale: 1.04; }
}

@keyframes spin-slow {
  to { transform: rotate(360deg); }
}

@keyframes chip-bump {
  0% { scale: 1; }
  45% { scale: 1.16; }
  100% { scale: 1; }
}

@keyframes stat-bump {
  0% { scale: 1; }
  45% { scale: 1.08; }
  100% { scale: 1; }
}

@keyframes low-moves {
  0%, 100% { scale: 1; }
  50% { scale: 1.14; }
}

@keyframes boost-pop {
  0% { scale: 1; }
  45% { scale: 1.14; }
  100% { scale: 1; }
}

@keyframes mascot-idle {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
  50% { transform: translateX(-50%) translateY(-4px) rotate(-1.2deg); }
}

@keyframes leaf-fall {
  0% { transform: translate3d(0, -12%, 0) rotate(0deg); opacity: 0; }
  8% { opacity: 0.92; }
  50% { transform: translate3d(var(--sway, 24px), 55vh, 0) rotate(200deg); opacity: 0.85; }
  100% { transform: translate3d(calc(var(--sway, 24px) * -0.7), 118vh, 0) rotate(400deg); opacity: 0; }
}

/* ---------- 13. 响应式 ---------- */
/* 手机：全屏无圆角、无桌面背景 */
@media (max-width: 640px) {
  #app { border-radius: 0; box-shadow: none; }
  #app-bg { display: none; }
  #app::after { box-shadow: none; }
}

/* 窄屏 360px 左右 */
@media (max-width: 380px) {
  .hud { height: 48px; padding-left: 10px; padding-right: 10px; }
  .hud-level { height: 34px; padding: 0 10px; }
  .icon-btn { width: 40px; height: 40px; font-size: 18px; }
  .hud-goals { padding-left: 10px; padding-right: 10px; min-height: 36px; }
  .goal-chip { height: 31px; padding-right: 9px; }
  .goal-chip__ico { width: 24px; height: 24px; }
  .hud-stats { padding-left: 10px; padding-right: 10px; }
  .board-area { padding-left: 4px; padding-right: 4px; padding-top: 72px; }
  .boost-btn { min-width: 88px; min-height: 44px; }
  .home-buttons { width: min(84%, 330px); }
  .home-subtitle { letter-spacing: 0.02em; }
  .level-grid { gap: 8px; }
  .level-btn { min-height: clamp(86px, 14dvh, 118px); }
}

/* 矮窗口：压缩纵向空间 */
@media (max-height: 760px) {
  .hud { height: 48px; }
  .hud-level { height: 34px; }
  .hud-goals { min-height: 36px; padding-top: 3px; }
  .goal-chip { height: 31px; }
  .goal-chip__ico { width: 24px; height: 24px; }
  .hud-stats { padding-top: 4px; }
  .board-area { padding-top: 68px; }
  .game-mascot { height: 82px; }
  .boosts { padding-top: 4px; }
  .boost-btn { min-height: 44px; }
  .goal-tip { min-height: 22px; padding-top: 3px; }
  .home-buttons { gap: 9px; padding: 11px 11px 13px; }
  .home-buttons .btn { min-height: 50px; }
  .home-buttons .btn--ghost { min-height: 42px; }
  .home-buttons .btn--sm {}
  .home-char { height: 40%; }
  .home-rabbit { height: 13%; bottom: calc(7% + 140px); }
  .img-fallback--rabbit { bottom: calc(7% + 140px); }
  .modal { padding: 16px 14px 14px; }
  .help-block { margin-bottom: 10px; }
  .help-list { font-size: 12px; gap: 5px; }
  .help-specials { gap: 6px; }
  .help-special { padding: 4px 7px; font-size: 10px; }
  .modal__buttons { gap: 8px; margin-top: 12px; }
}

@media (max-height: 620px) {
  .hud { height: 42px; padding-top: 5px; }
  .hud-level { height: 30px; font-size: 13px; }
  .icon-btn { width: 38px; height: 38px; font-size: 16px; }
  .hud-goals { min-height: 31px; padding-top: 2px; }
  .goal-chip { height: 28px; font-size: 11px; padding-right: 8px; }
  .goal-chip__ico { width: 21px; height: 21px; }
  .hud-stats { padding-top: 3px; gap: 6px; }
  .stat { padding: 2px 5px 3px; }
  .stat-label { font-size: 9px; }
  .stat b { font-size: 17px; }
  .stat--moves b { font-size: 19px; }
  .board-area { padding-top: 52px; padding-bottom: 2px; }
  .game-mascot { height: 66px; }
  .speech-bubble { font-size: 11px; padding: 5px 9px; }
  .boosts { gap: 10px; padding-top: 3px; }
  .boost-btn { min-height: 38px; min-width: 82px; font-size: 14px; padding: 3px 12px 3px 9px; }
  .boost-btn b { font-size: 15px; }
  .goal-tip { display: none; }
  .home-buttons { bottom: 7%; gap: 7px; width: min(80%, 340px); padding: 9px 9px 11px; }
  .home-buttons .btn { min-height: 44px; font-size: 15px; }
  .home-buttons .btn--ghost { min-height: 38px; }
  .home-logo { height: 21%; }
  .home-subtitle { top: 25.4%; padding: 5px 14px; font-size: 11px; }
  .home-char { height: 36%; bottom: 9%; }
  .home-rabbit { height: 12%; bottom: calc(7% + 126px); }
  .img-fallback--rabbit { bottom: calc(7% + 126px); }
  .home-footer { height: 44px; }
  .screen-title { margin-top: 2px; padding: 6px 26px; font-size: 18px; }
  .level-btn { min-height: 88px; }
  .level-grid { gap: 8px; }
}

/* 矮横屏（高度 < 560px）：棋盘等比缩小、绝不出现页面滚动条 */
@media (max-height: 560px) {
  #app { border-radius: 18px; }
  .hud { height: 38px; padding-top: 3px; }
  .hud-level { height: 27px; font-size: 12px; }
  .hud-goals { min-height: 28px; }
  .goal-chip { height: 25px; font-size: 10px; gap: 4px; }
  .goal-chip__ico { width: 19px; height: 19px; }
  .hud-stats { padding-top: 2px; }
  .stat b { font-size: 15px; }
  .stat--moves b { font-size: 17px; }
  .stat-label { font-size: 8px; }
  .board-area { padding-top: 44px; padding-bottom: 0; }
  .game-mascot { height: 54px; }
  .speech-bubble { top: calc(var(--mascot-top, 30%) + 2px); padding: 4px 8px; font-size: 10px; max-width: 36%; }
  .boosts { padding-top: 2px; }
  .boost-btn { min-height: 34px; min-width: 74px; font-size: 12px; padding: 2px 10px 2px 8px; }
  .boost-btn .boost-ico { font-size: 15px; }
  .boost-btn b { font-size: 13px; }
  .combo-banner { top: 42%; font-size: clamp(24px, 8vw, 36px); }
  .game-mascot { display: none; }
  .img-fallback--mascot { display: none; }
  .speech-bubble { display: none !important; }
  .home-logo { height: 20%; top: 2.5%; }
  .home-subtitle { display: none; }
  .home-char { height: 44%; bottom: 4%; left: 0; }
  .home-rabbit { height: 14%; bottom: 8%; }
  .home-buttons { bottom: 50%; transform: translate(-50%, 50%); width: min(64%, 300px); }
  .home-buttons .btn { min-height: 38px; font-size: 13px; border-radius: 12px; }
  .home-buttons .btn--ghost { min-height: 32px; }
  .home-footer { height: 36px; }
  .home-best { font-size: 11px; padding: 3px 10px; }
  .icon-btn { width: 34px; height: 34px; font-size: 14px; }
  .screen-title { padding: 5px 22px; font-size: 16px; margin: 0; }
  .level-btn { min-height: 70px; }
  .level-grid { gap: 7px; }
  .levels-tip { font-size: 10px; }
  #screen-levels { padding-top: 6px; gap: 5px; }
  .result-card { padding: 20px 16px 14px; width: min(74%, 380px); }
  .result-ribbon { top: -20px; padding: 6px 22px; font-size: 17px; }
  .result-stars { min-height: 42px; margin-top: 6px; }
  .result-star { font-size: 32px; }
  .result-score > b { font-size: 26px; }
  .result-goals { margin: 7px 0 9px; }
  .result-buttons { gap: 7px; }
  .result-buttons .btn { min-height: 38px; font-size: 14px; }
  .modal { max-height: 92%; padding: 16px 14px 14px; }
  .modal__title { font-size: 18px; margin-bottom: 8px; }
  .modal__buttons { gap: 7px; margin-top: 11px; }
  .modal__buttons .btn { min-height: 38px; font-size: 14px; }
  .leaf { display: none; }
}

/* 横屏矮窗口：对局页改为「左侧信息栏 + 右侧棋盘」两列布局，充分利用宽度 */
@media (max-height: 560px) and (orientation: landscape) {
  #app { width: min(100vw, 620px); height: min(100dvh, 560px); border-radius: 18px; }

  #screen-game {
    display: grid;
    grid-template-columns: minmax(186px, 32%) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas:
      "hud    board"
      "goals  board"
      "stats  board"
      ".      board"
      "boosts board";
    column-gap: 8px;
    padding: 8px 10px 8px 12px;
  }

  .hud { grid-area: hud; height: 34px; padding: 0; gap: 6px; }
  .hud-level { height: 30px; padding: 0 8px; font-size: 11px; letter-spacing: 0.01em; }
  .hud-goals { grid-area: goals; min-height: 0; padding: 5px 0 0; gap: 4px 6px; }
  .hud-stats { grid-area: stats; padding: 5px 0 0; gap: 5px; }
  .board-area { grid-area: board; padding: 2px 0 0; }
  .boosts { grid-area: boosts; padding: 6px 0 0; justify-content: flex-start; gap: 8px; }
  .goal-tip { grid-area: tip; display: none; }
  .icon-btn { width: 34px; height: 34px; font-size: 15px; }
  .stat { padding: 2px 4px 3px; }
  .stat-label { font-size: 8px; letter-spacing: 0; }
  .stat b { font-size: 15px; }
  .stat--moves b { font-size: 17px; }
  .goal-chip { height: 24px; font-size: 10px; padding: 1px 8px 1px 2px; }
  .goal-chip__ico { width: 19px; height: 19px; }
  .boost-btn { min-height: 32px; min-width: 70px; font-size: 12px; padding: 2px 10px 2px 8px; }
  .boost-btn .boost-ico { font-size: 14px; }
  .boost-btn b { font-size: 13px; }
  .game-mascot,
  .img-fallback--mascot,
  .speech-bubble { display: none !important; }
  .combo-banner { top: 50%; }
}

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

/* 横屏矮窗口：首页改为左侧人物 + 右上 logo/兔子 + 右下按钮，避免人物被按钮挡住 */
@media (max-height: 560px) and (orientation: landscape) {
  .home-logo { left: 50%; top: 2%; height: 32%; }
  .img-fallback--logo { left: 50%; top: 2%; height: 32%; font-size: clamp(26px, 6vh, 40px); }
  .home-subtitle { display: none; }
  .home-char { left: 1.5%; bottom: 0; height: 66%; max-width: 38%; }
  .img-fallback--char { left: 1.5%; bottom: 0; height: 66%; width: 30%; }
  .home-buttons {
    left: auto;
    right: 4%;
    bottom: 9%;
    transform: none;
    width: min(46%, 300px);
    gap: 8px;
    padding: 10px;
  }
  .home-buttons .btn { min-height: 40px; font-size: 14px; border-radius: 12px; }
  .home-buttons .btn--ghost { min-height: 36px; }
  .home-rabbit { right: 5%; top: 5%; bottom: auto; height: 22%; }
  .img-fallback--rabbit { right: 5%; top: 5%; bottom: auto; font-size: clamp(34px, 8vh, 58px); }
  .home-footer { height: 34px; }
}

/* ============================================================================
   ==================  V2 炫彩化 · 秋日魔法森林（ui-glow）  ====================
   说明：
   - 只做“加光、加亮、加装饰”，不改既有布局主结构与 id；所有新增装饰均为
     position:absolute / 伪元素 / box-shadow / 背景层，不影响文档流尺寸。
   - 动效纪律：一次性爆发出彩，常驻微光克制；大面积 blur/backdrop-filter ≤2 层。
   - prefers-reduced-motion 由文末统一降级块兜底（原有 !important 规则仍生效）。
   ========================================================================== */

/* ---------- V2-0. 光效变量 ---------- */
:root {
  --gold: #ffd84d;
  --gold-2: #ffe98a;
  --gold-3: #ffb84d;
  --gold-deep: #b3591b;
  --glow-gold: 0 0 10px rgba(255, 216, 77, 0.55), 0 0 26px rgba(255, 170, 60, 0.28);
  --glow-soft: 0 0 22px rgba(255, 214, 150, 0.35);
}

/* ---------- V2-0.1 飘叶层里的萤火/光斑（js/ui.js 生成 .fairy） ---------- */
.fairy {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--s, 5px);
  height: var(--s, 5px);
  margin-left: calc(var(--s, 5px) / -2);
  margin-top: calc(var(--s, 5px) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, #fffbe0 0 24%, rgba(255, 232, 140, 0.95) 42%,
    rgba(255, 190, 90, 0.5) 64%, rgba(255, 170, 60, 0) 78%);
  box-shadow: 0 0 8px rgba(255, 214, 110, 0.85), 0 0 16px rgba(255, 170, 60, 0.42);
  opacity: 0;
  pointer-events: none;
  animation: fairy-drift var(--dur, 7s) ease-in-out var(--delay, 0s) infinite;
}

/* 大光斑：小红帽脚边的暖光地灯（不做位移动画，只呼吸，省性能） */
.fairy--spot {
  width: var(--s, 200px);
  height: calc(var(--s, 200px) * 0.62);
  margin-left: calc(var(--s, 200px) / -2);
  margin-top: calc(var(--s, 200px) * -0.31);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 56%, rgba(255, 240, 190, 0.52) 0%,
    rgba(255, 198, 112, 0.3) 38%, rgba(255, 170, 80, 0) 72%);
  box-shadow: none;
  animation: spot-breathe 6.2s ease-in-out infinite;
}

/* ============================================================================
   V2-1. 加载页：进度条流光 + 篮子光晕 + 标题呼吸 + 背景星点
   ========================================================================== */
.loading-inner::before {
  content: "";
  position: absolute;
  top: -4%;
  left: 50%;
  width: 74%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 184, 0.55) 0%,
    rgba(255, 196, 110, 0.22) 42%, rgba(255, 170, 70, 0) 68%);
  pointer-events: none;
  animation: halo-breathe 3.4s ease-in-out infinite;
}

.loading-basket {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 14px 16px rgba(58, 20, 8, 0.4))
    drop-shadow(0 0 14px rgba(255, 214, 140, 0.55))
    drop-shadow(0 0 30px rgba(255, 180, 80, 0.32));
}

/* 标题呼吸：整体轻微起伏 + 金光强弱，不改字重 */
.loading-title {
  animation: loading-title-breathe 3.8s ease-in-out infinite;
}

/* 进度条：玻璃高光 + 周期流光扫过（.is-active 由 ui.js 在进度>0 时加） */
.loading-bar {
  border-color: #4a2414;
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.65), 0 0 0 1.5px rgba(255, 206, 148, 0.22),
    0 0 18px rgba(255, 180, 80, 0.2), 0 2px 0 rgba(255, 214, 160, 0.25);
}

.loading-bar::before {
  content: "";
  position: absolute;
  inset: 2px 2px auto 2px;
  height: 42%;
  border-radius: 999px 999px 40% 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: 2;
}

.loading-bar::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -40%;
  width: 34%;
  height: 140%;
  border-radius: 999px;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 250, 226, 0.75) 50%, rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  filter: blur(1px);
}

.loading-bar.is-active::after {
  opacity: 1;
  animation: loading-sheen 2.1s ease-in-out infinite;
}

#loading-progress {
  background: linear-gradient(180deg, #fff0b0 0%, var(--gold-2) 26%, var(--amber) 56%, #dd7a20 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7), 0 0 12px rgba(255, 200, 90, 0.85),
    0 0 24px rgba(255, 170, 60, 0.4);
}

#loading-progress::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffdf0 0 34%, rgba(255, 232, 140, 0.9) 58%, rgba(255, 200, 90, 0) 80%);
  box-shadow: 0 0 10px rgba(255, 236, 160, 0.95);
  z-index: 2;
}

.loading-bar.is-full #loading-progress {
  animation: bar-full-glow 1s ease-in-out infinite;
}

/* 背景星点：低频闪烁（只动 opacity） */
#screen-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 16%, rgba(255, 246, 210, 0.9) 0 1.4px, rgba(255, 246, 210, 0) 2.2px),
    radial-gradient(circle at 26% 8%, rgba(255, 236, 170, 0.8) 0 1.1px, rgba(255, 236, 170, 0) 1.9px),
    radial-gradient(circle at 43% 13%, rgba(255, 250, 224, 0.85) 0 1.3px, rgba(255, 250, 224, 0) 2.1px),
    radial-gradient(circle at 61% 7%, rgba(255, 240, 190, 0.75) 0 1.1px, rgba(255, 240, 190, 0) 1.8px),
    radial-gradient(circle at 77% 15%, rgba(255, 248, 216, 0.9) 0 1.5px, rgba(255, 248, 216, 0) 2.3px),
    radial-gradient(circle at 89% 9%, rgba(255, 232, 160, 0.7) 0 1px, rgba(255, 232, 160, 0) 1.7px),
    radial-gradient(circle at 8% 34%, rgba(255, 244, 200, 0.65) 0 1.1px, rgba(255, 244, 200, 0) 1.9px),
    radial-gradient(circle at 92% 32%, rgba(255, 244, 200, 0.6) 0 1.2px, rgba(255, 244, 200, 0) 2px),
    radial-gradient(circle at 33% 27%, rgba(255, 250, 230, 0.55) 0 1px, rgba(255, 250, 230, 0) 1.8px),
    radial-gradient(circle at 70% 24%, rgba(255, 250, 230, 0.5) 0 1px, rgba(255, 250, 230, 0) 1.8px);
  opacity: 0.75;
  animation: star-twinkle 4.2s ease-in-out infinite;
}

/* ============================================================================
   V2-2. 首页：logo 金色光晕 + 周期流光、副标题描金、脚边光斑、兔子呼吸、
        按钮高光扫过 / 按下星屑、最高分牌匾、暖色环境光
   ========================================================================== */
/* 顶部金光晕（覆盖原顶部柔光，叠加 logo 光晕） */
#screen-home::before {
  background:
    radial-gradient(ellipse 46% 26% at 50% 12%, rgba(255, 226, 168, 0.5) 0%, rgba(255, 205, 130, 0) 70%),
    radial-gradient(ellipse at 50% 0%, rgba(255, 226, 168, 0.5) 0%, rgba(255, 205, 130, 0) 68%);
  animation: home-halo-breathe 6.4s ease-in-out infinite;
}

/* 周期流光扫过 logo + 底部暖色地面光 */
#screen-home::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background-image:
    linear-gradient(104deg, rgba(255, 255, 255, 0) 38%, rgba(255, 249, 224, 0.5) 50%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(ellipse 40% 20% at 28% 90%, rgba(255, 206, 130, 0.32) 0%, rgba(255, 180, 90, 0) 70%);
  background-size: 62% 30%, 100% 100%;
  background-position: -46% 4%, 0 0;
  background-repeat: no-repeat, no-repeat;
  opacity: 0.9;
  animation: home-logo-sheen 7.6s ease-in-out infinite;
}

.home-logo {
  filter: drop-shadow(0 6px 0 rgba(74, 36, 20, 0.32))
    drop-shadow(0 16px 24px rgba(20, 8, 4, 0.45))
    drop-shadow(0 0 16px rgba(255, 214, 130, 0.55))
    drop-shadow(0 0 40px rgba(255, 176, 70, 0.3));
}

/* 副标题挂牌：描金边 + 两端金色菱形铆钉 */
.home-subtitle {
  border-color: #a8641f;
  background: linear-gradient(180deg, #fffaf0 0%, #fff1d2 56%, #ffe3ac 100%);
  box-shadow: 0 4px 0 rgba(74, 36, 20, 0.38), 0 0 0 1.5px rgba(255, 216, 120, 0.7),
    inset 0 1px 0 #fff, inset 0 0 0 1.5px rgba(179, 89, 27, 0.16),
    0 0 16px rgba(255, 200, 110, 0.28);
}

.home-subtitle::before,
.home-subtitle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 1px;
  background: linear-gradient(180deg, #fff3c4, var(--amber));
  transform: rotate(45deg);
  box-shadow: 0 0 5px rgba(255, 216, 120, 0.9);
}

.home-subtitle::before { left: 8px; }
.home-subtitle::after { right: 8px; }

/* 小红帽：暖色轮廓辉光（脚下光斑由 js/ui.js 的 .fairy--spot 提供） */
.home-char {
  filter: drop-shadow(0 18px 20px rgba(20, 8, 4, 0.45))
    drop-shadow(0 0 14px rgba(255, 214, 150, 0.5))
    drop-shadow(0 0 34px rgba(255, 170, 70, 0.26));
}

/* 小兔子：呼吸（scale 独立于 hop 的 transform，可叠加） */
.home-rabbit {
  filter: drop-shadow(0 10px 12px rgba(20, 8, 4, 0.4)) drop-shadow(0 0 10px rgba(255, 236, 200, 0.45));
  animation: rabbit-hop 3.8s ease-in-out infinite, rabbit-breathe 4.4s ease-in-out infinite;
}

/* 按钮面板：描金内衬 + 四角铆钉 + 顶部玻璃高光 */
.home-buttons {
  border-color: #7a4a2a;
  background: linear-gradient(180deg, rgba(255, 252, 243, 0.97) 0%, rgba(255, 238, 208, 0.95) 100%);
  box-shadow: 0 0 0 3px rgba(255, 226, 178, 0.38), 0 10px 0 rgba(74, 36, 20, 0.58),
    0 24px 42px rgba(20, 8, 4, 0.42), inset 0 2px 0 #fff,
    inset 0 0 0 1.5px rgba(255, 214, 140, 0.4), 0 0 26px rgba(255, 196, 110, 0.22);
}

.home-buttons::before {
  content: "";
  position: absolute;
  inset: 4px 4px auto 4px;
  height: 30%;
  border-radius: 22px 22px 46% 46%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.home-buttons::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 7px 7px, rgba(255, 240, 190, 0.95) 0 2px, rgba(255, 240, 190, 0) 3px),
    radial-gradient(circle at calc(100% - 7px) 7px, rgba(255, 240, 190, 0.9) 0 2px, rgba(255, 240, 190, 0) 3px),
    radial-gradient(circle at 7px calc(100% - 7px), rgba(255, 240, 190, 0.8) 0 2px, rgba(255, 240, 190, 0) 3px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), rgba(255, 240, 190, 0.85) 0 2px, rgba(255, 240, 190, 0) 3px);
}

/* ---------- V2-2.1 按钮：高光扫过 + 按下星屑 ---------- */
.btn {
  /* 让高光扫过被按钮圆角裁剪（box-shadow 不受 overflow 影响） */
  overflow: hidden;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(102deg, rgba(255, 255, 255, 0) 40%, rgba(255, 252, 236, 0.55) 50%, rgba(255, 255, 255, 0) 60%);
  background-size: 280% 100%;
  background-position: 152% 0;
  background-repeat: no-repeat;
  opacity: 0.9;
}

.home-buttons .btn::after {
  animation: btn-sheen 5.6s ease-in-out infinite;
}

.home-buttons > #btn-play::after { animation-delay: 0.2s; }
.home-buttons > #btn-levels::after { animation-delay: 1.7s; }
.home-buttons > #btn-help::after { animation-delay: 2.9s; }

.home-buttons .btn:hover::after,
.btn:focus-visible::after {
  animation: btn-sheen 1.15s ease-out;
}

/* 按下：金色星屑 + 光晕（纯 CSS，一次性） */
.btn:active::after {
  animation: btn-press-stars 0.46s ease-out both;
}

/* home 按钮的周期扫光规则特异度更高，按下时需显式覆盖为星屑动画 */
.home-buttons .btn:active::after {
  animation: btn-press-stars 0.46s ease-out both;
}

.btn:active {
  box-shadow: 0 0 0 3px var(--brown-700), 0 2px 0 #7d2a12, 0 6px 10px rgba(40, 14, 6, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 0 22px rgba(255, 216, 120, 0.5);
}

.btn--secondary:active,
.btn--ghost:active {
  box-shadow: 0 0 0 3px var(--brown-700), 0 2px 0 #b26a1d, 0 6px 10px rgba(40, 14, 6, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 0 22px rgba(255, 226, 150, 0.45);
}

/* ---------- V2-2.2 最高分牌匾华丽化 ---------- */
.home-best {
  border-color: rgba(255, 214, 130, 0.75);
  background: linear-gradient(180deg, rgba(90, 47, 27, 0.92) 0%, rgba(42, 18, 10, 0.94) 100%);
  box-shadow: 0 0 0 1.5px rgba(255, 190, 110, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 0 12px rgba(255, 196, 110, 0.18), 0 4px 12px rgba(0, 0, 0, 0.42),
    0 0 16px rgba(255, 190, 110, 0.22);
  color: #ffe9c7;
}

.home-best::before {
  content: "✦";
  margin-right: 5px;
  color: var(--gold-2);
  font-size: 0.95em;
  text-shadow: 0 0 6px rgba(255, 216, 100, 0.95);
}

.home-best b {
  color: #ffe066;
  text-shadow: 0 0 8px rgba(255, 200, 80, 0.8), 0 1px 0 rgba(90, 40, 10, 0.8);
}

.home-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 216, 140, 0), rgba(255, 216, 140, 0.28), rgba(255, 216, 140, 0));
  pointer-events: none;
}

/* 圆形图标按钮：金色描边 + 内高光 */
.icon-btn {
  border-color: #8a5a33;
  box-shadow: 0 4px 0 rgba(74, 36, 20, 0.62), inset 0 2px 0 #fff,
    inset 0 0 0 1.5px rgba(255, 214, 140, 0.45), 0 8px 14px rgba(0, 0, 0, 0.25),
    0 0 14px rgba(255, 200, 120, 0.16);
}

.icon-btn:hover {
  box-shadow: 0 4px 0 rgba(74, 36, 20, 0.62), inset 0 2px 0 #fff,
    inset 0 0 0 1.5px rgba(255, 222, 150, 0.6), 0 8px 14px rgba(0, 0, 0, 0.25),
    0 0 20px rgba(255, 210, 130, 0.4);
}

/* ---------- V2-2.3 第一批关键帧 ---------- */
@keyframes fairy-drift {
  0% { opacity: 0; translate: 0 8px; scale: 0.7; }
  18% { opacity: var(--o, 0.75); }
  50% { translate: var(--dx, 10px) -12px; opacity: var(--o, 0.75); scale: 1; }
  82% { opacity: var(--o, 0.6); }
  100% { opacity: 0; translate: 0 -26px; scale: 0.85; }
}

@keyframes spot-breathe {
  0%, 100% { opacity: 0.55; scale: 0.96; }
  50% { opacity: 0.9; scale: 1.05; }
}

@keyframes halo-breathe {
  0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(0.94); }
  50% { opacity: 0.95; transform: translateX(-50%) scale(1.06); }
}

@keyframes loading-title-breathe {
  0%, 100% { transform: rotate(-1.5deg) scale(1); filter: brightness(1); }
  50% { transform: rotate(-1deg) scale(1.03); filter: brightness(1.08); }
}

@keyframes loading-sheen {
  0% { left: -40%; opacity: 0; }
  12% { opacity: 0.9; }
  55% { left: 110%; opacity: 0.9; }
  100% { left: 110%; opacity: 0; }
}

@keyframes bar-full-glow {
  0%, 100% { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7), 0 0 12px rgba(255, 200, 90, 0.85), 0 0 24px rgba(255, 170, 60, 0.4); }
  50% { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.9), 0 0 20px rgba(255, 226, 140, 1), 0 0 40px rgba(255, 190, 90, 0.65); }
}

@keyframes star-twinkle {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.85; }
}

@keyframes home-halo-breathe {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

@keyframes home-logo-sheen {
  0%, 10% { background-position: -46% 4%, 0 0; }
  48%, 100% { background-position: 146% 4%, 0 0; }
}

@keyframes btn-sheen {
  0% { background-position: 152% 0; }
  58%, 100% { background-position: -72% 0; }
}

@keyframes btn-press-stars {
  0% {
    opacity: 1;
    background-image:
      radial-gradient(circle at 18% 78%, #fff6cf 0 2px, rgba(255, 246, 207, 0) 3px),
      radial-gradient(circle at 34% 30%, #ffe08a 0 1.6px, rgba(255, 224, 138, 0) 2.6px),
      radial-gradient(circle at 52% 82%, #fffdf0 0 2.2px, rgba(255, 253, 240, 0) 3.2px),
      radial-gradient(circle at 68% 24%, #ffd84d 0 1.8px, rgba(255, 216, 77, 0) 2.8px),
      radial-gradient(circle at 84% 70%, #fff6cf 0 2px, rgba(255, 246, 207, 0) 3px);
    background-size: 100% 100%;
    background-position: 0 0;
  }
  100% {
    opacity: 0;
    background-image:
      radial-gradient(circle at 6% 20%, #fff6cf 0 2px, rgba(255, 246, 207, 0) 3px),
      radial-gradient(circle at 24% 66%, #ffe08a 0 1.6px, rgba(255, 224, 138, 0) 2.6px),
      radial-gradient(circle at 48% 12%, #fffdf0 0 2.2px, rgba(255, 253, 240, 0) 3.2px),
      radial-gradient(circle at 72% 78%, #ffd84d 0 1.8px, rgba(255, 216, 77, 0) 2.8px),
      radial-gradient(circle at 94% 34%, #fff6cf 0 2px, rgba(255, 246, 207, 0) 3px);
    background-size: 100% 100%;
    background-position: 0 0;
  }
}

@keyframes rabbit-breathe {
  0%, 100% { scale: 1; }
  50% { scale: 1.035; }
}

/* 第一批响应式微调 */
@media (max-width: 380px) {
  .fairy { --s: 4px; }
  #screen-loading::after { opacity: 0.6; }
}

@media (max-height: 560px) {
  .fairy { display: none; }
  #screen-home::after { animation-duration: 9s; }
}

/* ============================================================================
   V2-3. 选关页：标题光晕、卡片玻璃糖壳高光、入场错峰、当前关金环+继续流光、
        目标图标/步数、锁定卡精致化
   ========================================================================== */
#screen-levels {
  background-image:
    linear-gradient(180deg, rgba(248, 201, 146, 0.18) 0%, rgba(58, 29, 18, 0.48) 48%, rgba(26, 10, 4, 0.88) 100%),
    radial-gradient(ellipse 62% 30% at 50% 6%, rgba(255, 214, 140, 0.28) 0%, rgba(255, 180, 90, 0) 70%),
    radial-gradient(ellipse 50% 26% at 50% 102%, rgba(255, 170, 70, 0.18) 0%, rgba(255, 170, 70, 0) 70%),
    url("../assets/bg/home.jpg");
  background-position: center top, center top, center bottom, center center;
  background-size: cover, cover, cover, cover;
}

/* 标题：金色光晕 + 描金内衬 + 周期流光（流光走元素自身背景层，::before/::after 留给两端金点） */
.screen-title {
  border-color: #a8641f;
  background-image:
    linear-gradient(102deg, rgba(255, 255, 255, 0) 40%, rgba(255, 252, 232, 0.8) 50%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #fffdf6 0%, var(--cream) 46%, #f6c57c 100%);
  background-size: 260% 100%, 100% 100%;
  background-position: 150% 0, 0 0;
  background-repeat: no-repeat, no-repeat;
  box-shadow: 0 0 0 3px rgba(255, 226, 178, 0.42), 0 6px 0 rgba(74, 36, 20, 0.62),
    0 14px 22px rgba(20, 8, 4, 0.4), inset 0 2px 0 #fff,
    inset 0 0 0 1.5px rgba(255, 216, 120, 0.55), 0 0 24px rgba(255, 200, 110, 0.32);
  overflow: hidden;
  animation: title-flow 6.2s ease-in-out infinite;
}

/* 卡片：玻璃糖壳高光（原 ::before 高光升级为多层渐变）+ 入场错峰 */
.level-btn {
  border-color: #8a5a33;
  box-shadow: 0 5px 0 rgba(74, 36, 20, 0.62), 0 12px 18px rgba(20, 8, 4, 0.32),
    inset 0 2px 0 #fff, inset 0 0 0 1.5px rgba(255, 218, 150, 0.45),
    0 0 18px rgba(255, 196, 110, 0.12);
  animation: level-card-in 0.46s cubic-bezier(0.2, 0.9, 0.3, 1.04) backwards;
  animation-delay: calc(var(--i, 0) * 30ms + 40ms);
}

.level-btn::before {
  inset: 2px;
  height: auto;
  border-radius: 13px;
  background-image:
    linear-gradient(140deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0) 34%),
    radial-gradient(ellipse 58% 24% at 50% 0%, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 46%);
  pointer-events: none;
}

.level-btn:hover {
  border-color: #b3591b;
  box-shadow: 0 7px 0 rgba(74, 36, 20, 0.62), 0 16px 24px rgba(20, 8, 4, 0.36),
    inset 0 2px 0 #fff, inset 0 0 0 1.5px rgba(255, 224, 158, 0.6),
    0 0 26px rgba(255, 206, 120, 0.38);
}

/* 已解锁卡：目标小图标 + 步数 */
.level-btn__meta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 12px;
  margin-top: 1px;
  line-height: 1;
}

.level-btn__goal-ico {
  display: inline-block;
  width: clamp(10px, 2.6vw, 13px);
  height: clamp(10px, 2.6vw, 13px);
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(90, 47, 27, 0.35);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 92% 92%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 5px rgba(255, 206, 120, 0.35);
}

.level-btn__goal-ico[data-type="white"] { background-image: url("../assets/items/white.png"); background-color: #f7f0e1; }
.level-btn__goal-ico[data-type="red"] { background-image: url("../assets/items/red.png"); background-color: #e65435; }
.level-btn__goal-ico[data-type="blue"] { background-image: url("../assets/items/blue.png"); background-color: #6b5bd2; }
.level-btn__goal-ico[data-type="grey"] { background-image: url("../assets/items/grey.png"); background-color: #9b9188; }
.level-btn__goal-ico[data-type="acorn"] { background-image: url("../assets/items/acorn.png"); background-color: #e2b46f; }
.level-btn__goal-ico[data-type="bread"] { background-image: url("../assets/items/bread.png"); background-color: #f2d3a0; }

.level-btn__moves {
  font-size: clamp(8px, 2.1vw, 9.5px);
  font-weight: 800;
  color: #a8641f;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* 当前关：金环脉冲 + 金光（保留入场错峰，脉冲在入场后接上） */
.level-btn.is-current {
  outline: 3px solid var(--gold-2);
  outline-offset: 1px;
  border-color: #b3591b;
  animation: level-card-in 0.46s cubic-bezier(0.2, 0.9, 0.3, 1.04) backwards
      calc(var(--i, 0) * 30ms + 40ms),
    level-pulse-v2 2.1s ease-in-out infinite calc(var(--i, 0) * 30ms + 520ms);
}

.level-btn.is-current:hover {
  transform: translateY(-3px);
}

/* 「继续」牌：流光 + 金光 */
.level-btn.is-current::after {
  background-image: linear-gradient(110deg, #ffe38a 0%, #fff6cf 32%, #ffd84d 52%, #f2a33c 100%);
  background-size: 230% 100%;
  background-position: 140% 0;
  box-shadow: 0 2px 0 rgba(74, 36, 20, 0.5), 0 0 12px rgba(255, 216, 100, 0.75), inset 0 1px 0 #fff;
  animation: badge-flow 3.2s linear infinite;
}

/* 锁定卡：更精致的“雾面木牌 + 斜纹 + 深内阴影” */
.level-btn.is-locked {
  background: linear-gradient(180deg, #f2ebdd 0%, #e3d7c3 58%, #cdbca2 100%);
  background-image:
    repeating-linear-gradient(128deg, rgba(120, 92, 60, 0.06) 0 6px, rgba(120, 92, 60, 0) 6px 14px),
    linear-gradient(180deg, #f2ebdd 0%, #e3d7c3 58%, #cdbca2 100%);
  border-color: #6e523a;
  box-shadow: 0 4px 0 rgba(58, 36, 20, 0.58), inset 0 2px 0 rgba(255, 255, 255, 0.65),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.35), inset 0 -12px 18px rgba(120, 88, 54, 0.18);
}

.level-btn.is-locked::before {
  opacity: 0.4;
}

.level-btn.is-locked .level-btn__lock {
  top: 5px;
  right: 7px;
  opacity: 0.95;
  filter: drop-shadow(0 1px 1px rgba(40, 14, 6, 0.45)) drop-shadow(0 0 8px rgba(255, 220, 150, 0.45));
}

.level-btn.is-locked .level-btn__wm { opacity: 0.07; }

.levels-tip {
  text-shadow: 0 2px 5px rgba(20, 8, 4, 0.8), 0 0 14px rgba(255, 206, 120, 0.28);
}

/* ============================================================================
   V2-4. 结算页：金光扫过、背光旋转放射线、丝带流光、星星发光星屑、
        分数描金、新纪录牌匾流光；失败态冷色月光感
   ========================================================================== */
#screen-result {
  background-image:
    linear-gradient(180deg, rgba(36, 15, 7, 0.58) 0%, rgba(20, 8, 4, 0.8) 100%),
    radial-gradient(ellipse 58% 34% at 50% 40%, rgba(255, 214, 150, 0.22) 0%, rgba(20, 8, 4, 0) 72%),
    url("../assets/bg/board.jpg");
  background-position: center center, center center, center center;
  background-size: cover, cover, cover;
}

/* 背光旋转放射线（锥形渐变 + 径向遮罩，纯合成动画） */
#screen-result::after {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: 2;
  pointer-events: none;
  background-image: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255, 224, 150, 0.16) 0deg 2.4deg,
    rgba(255, 224, 150, 0) 2.4deg 7.6deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 18%, rgba(0, 0, 0, 0.55) 34%, rgba(0, 0, 0, 0) 58%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 18%, rgba(0, 0, 0, 0.55) 34%, rgba(0, 0, 0, 0) 58%);
  opacity: 0.9;
  animation: rays-spin 48s linear infinite;
}

/* 失败：冷色月光放射线 + 冷调背景 */
#screen-result.screen--lose {
  background-image:
    linear-gradient(180deg, rgba(20, 22, 34, 0.62) 0%, rgba(12, 12, 18, 0.84) 100%),
    radial-gradient(ellipse 52% 30% at 50% 26%, rgba(186, 208, 255, 0.22) 0%, rgba(12, 12, 18, 0) 72%),
    url("../assets/bg/board.jpg");
  background-position: center center, center center, center center;
  background-size: cover, cover, cover;
}

#screen-result.screen--lose::before {
  background: radial-gradient(ellipse at 50% 44%, rgba(180, 200, 255, 0.14) 0%, rgba(10, 10, 20, 0.42) 74%);
}

#screen-result.screen--lose::after {
  background-image: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(190, 210, 255, 0.13) 0deg 2.4deg,
    rgba(190, 210, 255, 0) 2.4deg 7.6deg);
  animation-duration: 66s;
}

/* 结算卡：金光扫过 + 华丽满月描边 */
.result-card {
  border-color: #8a5a33;
  box-shadow: 0 0 0 3px rgba(255, 238, 206, 0.5), 0 14px 0 rgba(74, 36, 20, 0.55),
    0 28px 54px rgba(0, 0, 0, 0.55), inset 0 2px 0 #fff,
    inset 0 0 0 2px rgba(255, 214, 130, 0.35), 0 0 34px rgba(255, 200, 110, 0.22);
}

.result-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(104deg, rgba(255, 255, 255, 0) 40%, rgba(255, 252, 236, 0.62) 50%, rgba(255, 255, 255, 0) 60%);
  background-size: 280% 100%;
  background-position: 160% 0;
  background-repeat: no-repeat;
  animation: card-sheen 6.4s ease-in-out infinite;
}

/* 丝带：金属渐变缓缓流动 */
.result-ribbon {
  background-image: linear-gradient(108deg, #f28a48 0%, #ffb877 18%, #ffe3a8 32%, var(--red) 52%, #bf3b1d 72%, #e46a3a 100%);
  background-size: 240% 100%;
  box-shadow: 0 5px 0 rgba(122, 42, 18, 0.6), 0 12px 20px rgba(40, 14, 6, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 170, 80, 0.3);
  animation: ribbon-flow 5.2s linear infinite;
}

/* 星星：发光 + 星屑闪烁 */
.result-star {
  position: relative;
}

.result-star.is-on {
  filter: drop-shadow(0 3px 0 rgba(122, 74, 40, 0.28)) drop-shadow(0 0 12px rgba(255, 214, 100, 0.95))
    drop-shadow(0 0 26px rgba(255, 170, 60, 0.55));
  animation: star-in 0.56s cubic-bezier(0.2, 1.6, 0.4, 1) calc(var(--i, 0) * 150ms + 120ms) both,
    star-glow-pulse 2.6s ease-in-out calc(var(--i, 0) * 150ms + 780ms) infinite;
}

.result-star.is-on::before {
  content: "";
  position: absolute;
  top: -2%;
  right: 6%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffdf0 0 30%, rgba(255, 232, 140, 0.9) 55%, rgba(255, 200, 90, 0) 78%);
  box-shadow: 0 0 8px rgba(255, 236, 160, 0.95);
  animation: star-sparkle 1.9s ease-in-out calc(var(--i, 0) * 220ms + 400ms) infinite;
}

.result-star.is-grey {
  filter: grayscale(0.35) brightness(0.94);
}

/* 得分：描金渐变数字 */
.result-score > b {
  background-image: linear-gradient(180deg, #ffd675 0%, #ef9a34 38%, #c0562a 72%, #a8321c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 0 rgba(255, 255, 255, 0.8)) drop-shadow(0 0 12px rgba(255, 180, 80, 0.35));
}

.result-score > span {
  color: #a8641f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.result-level {
  color: #a8641f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

.result-best {
  color: #8a5a33;
}

/* 新纪录牌匾：流光 + 星光 */
.result-newbest {
  border-color: #8a5a33;
  background-image: linear-gradient(110deg, #ffe98a 0%, #fff9dc 30%, #ffd84d 54%, #f2a33c 100%);
  background-size: 220% 100%;
  box-shadow: 0 2px 0 rgba(74, 36, 20, 0.45), 0 0 14px rgba(255, 216, 100, 0.65), inset 0 1px 0 #fff;
  animation: newbest-pop 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) 0.7s both,
    newbest-flow 3.4s linear 1.4s infinite;
}

.result-goal {
  border-color: rgba(90, 47, 27, 0.38);
  background: rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 1px 0 #fff, 0 0 10px rgba(255, 206, 120, 0.16);
}

.result-goal.is-done {
  background: linear-gradient(180deg, rgba(224, 246, 210, 0.85), rgba(198, 236, 186, 0.8));
  box-shadow: inset 0 1px 0 #fff, 0 0 12px rgba(120, 200, 110, 0.3);
}

/* 失败态：冷色月光感（卡片降饱和偏冷，文字保持深棕可读） */
.result-card--lose {
  background: linear-gradient(180deg, #f6f3ea 0%, #ebe6da 48%, #d9d1c1 100%);
  border-color: #5f5245;
  box-shadow: 0 0 0 3px rgba(226, 230, 240, 0.4), 0 14px 0 rgba(44, 40, 34, 0.5),
    0 28px 54px rgba(0, 0, 0, 0.55), inset 0 2px 0 #fff,
    inset 0 0 0 2px rgba(190, 204, 230, 0.35), 0 0 34px rgba(170, 196, 255, 0.2);
}

.result-card--lose .result-ribbon {
  background-image: linear-gradient(112deg, #8f9aae 0%, #b6c0d0 24%, #dbe3ef 38%, #7d879a 58%, #5a6373 82%, #8a94a6 100%);
  background-size: 240% 100%;
  box-shadow: 0 5px 0 rgba(44, 48, 58, 0.6), 0 12px 20px rgba(20, 22, 30, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 0 18px rgba(170, 196, 255, 0.28);
  text-shadow: 0 2px 0 rgba(44, 48, 58, 0.6);
}

.result-card--lose .result-score > b {
  background-image: linear-gradient(180deg, #c8b89c 0%, #9a7f5c 44%, #6f5a3f 100%);
  filter: drop-shadow(0 2px 0 rgba(255, 255, 255, 0.75));
}

.result-card--lose .result-star.is-grey {
  color: #b9c2d2;
  filter: grayscale(0.2) brightness(0.98) drop-shadow(0 0 8px rgba(170, 196, 255, 0.28));
}

/* ---------- 第二批关键帧 ---------- */
@keyframes title-flow {
  0%, 8% { background-position: 150% 0, 0 0; }
  46%, 100% { background-position: -78% 0, 0 0; }
}

@keyframes level-card-in {
  0% { opacity: 0; translate: 0 16px; scale: 0.94; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes level-pulse-v2 {
  0%, 100% {
    box-shadow: 0 5px 0 rgba(74, 36, 20, 0.62), 0 0 0 0 rgba(255, 216, 77, 0.55),
      0 0 16px rgba(255, 200, 110, 0.35), inset 0 2px 0 #fff;
  }
  50% {
    box-shadow: 0 5px 0 rgba(74, 36, 20, 0.62), 0 0 0 8px rgba(255, 216, 77, 0),
      0 0 30px rgba(255, 206, 120, 0.6), inset 0 2px 0 #fff;
  }
}

@keyframes badge-flow {
  0% { background-position: 140% 0; }
  100% { background-position: -110% 0; }
}

@keyframes rays-spin {
  to { transform: rotate(360deg); }
}

@keyframes card-sheen {
  0%, 12% { background-position: 160% 0; }
  52%, 100% { background-position: -80% 0; }
}

@keyframes ribbon-flow {
  0% { background-position: 0% 0; }
  100% { background-position: 220% 0; }
}

@keyframes star-glow-pulse {
  0%, 100% { filter: drop-shadow(0 3px 0 rgba(122, 74, 40, 0.28)) drop-shadow(0 0 10px rgba(255, 214, 100, 0.85)) drop-shadow(0 0 22px rgba(255, 170, 60, 0.45)); }
  50% { filter: drop-shadow(0 3px 0 rgba(122, 74, 40, 0.28)) drop-shadow(0 0 18px rgba(255, 236, 150, 1)) drop-shadow(0 0 38px rgba(255, 190, 80, 0.7)); }
}

@keyframes star-sparkle {
  0%, 100% { opacity: 0; scale: 0.4; }
  40% { opacity: 1; scale: 1; }
  70% { opacity: 0.5; scale: 0.75; }
}

@keyframes newbest-flow {
  0% { background-position: 0% 0; }
  100% { background-position: 220% 0; }
}

/* 第二批响应式微调 */
@media (max-width: 380px) {
  /* 超窄屏：非当前关隐藏目标/步数行，保证 3 列不拥挤 */
  .level-btn:not(.is-current) .level-btn__meta { display: none; }
  .result-score > b { letter-spacing: 0; }
}

@media (max-height: 560px) {
  #screen-result::after { inset: -8%; }
  .result-star.is-on::before { display: none; }
}

/* ============================================================================
   V2-5. 对局页：HUD 玻璃质感、得分发光跳动、步数≤5 红色脉冲、
        目标 chip 进度光弧/完成光爆、棋盘木框雕花+内沿金光、格子渐变、
        棋子 hover/选中金环、特殊块光环升级、连击横幅、道具按钮、底部提示
   ========================================================================== */

/* 对局背景：顶部树冠暖光 + 底部林间暖光（棋盘区域保持干净） */
#screen-game {
  background-image:
    linear-gradient(180deg, rgba(58, 29, 18, 0.06) 0%, rgba(42, 18, 10, 0.1) 42%, rgba(20, 8, 4, 0.55) 100%),
    radial-gradient(ellipse 66% 26% at 50% 0%, rgba(255, 206, 130, 0.22) 0%, rgba(255, 176, 80, 0) 72%),
    radial-gradient(ellipse 30% 12% at 50% 101%, rgba(255, 180, 80, 0.16) 0%, rgba(255, 180, 80, 0) 72%),
    url("../assets/bg/board.jpg");
  background-position: center center, center top, center bottom, center center;
  background-size: cover, cover, cover, cover;
}

/* ---------- V2-5.1 HUD 玻璃质感 ---------- */
.hud-level {
  border-color: #8a5a33;
  background: linear-gradient(180deg, rgba(255, 253, 246, 0.92) 0%, rgba(255, 231, 186, 0.88) 100%);
  -webkit-backdrop-filter: blur(6px) saturate(1.08);
  backdrop-filter: blur(6px) saturate(1.08);
  box-shadow: 0 4px 0 rgba(74, 36, 20, 0.55), inset 0 1px 0 #fff,
    inset 0 0 0 1.5px rgba(255, 224, 158, 0.55), 0 8px 16px rgba(0, 0, 0, 0.28),
    0 0 16px rgba(255, 200, 110, 0.18);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

/* 状态卡：玻璃奶油 + 顶部高光 */
.stat {
  border-color: #8a5a33;
  background: linear-gradient(180deg, rgba(255, 252, 244, 0.95) 0%, rgba(255, 234, 196, 0.9) 100%);
  box-shadow: 0 4px 0 rgba(74, 36, 20, 0.55), inset 0 1px 0 #fff,
    inset 0 0 0 1.5px rgba(255, 226, 168, 0.4), 0 8px 14px rgba(0, 0, 0, 0.26),
    0 0 14px rgba(255, 200, 120, 0.12);
}

.stat--score b {
  color: #a8321c;
  text-shadow: 0 1px 0 #fff, 0 0 12px rgba(255, 196, 90, 0.55);
}

.stat--score.is-bump b {
  animation: score-glow 0.62s ease-out;
}

/* 分数卡金光内沿 */
.stat--score {
  box-shadow: 0 4px 0 rgba(74, 36, 20, 0.55), inset 0 1px 0 #fff,
    inset 0 0 0 1.5px rgba(255, 214, 120, 0.55), 0 8px 14px rgba(0, 0, 0, 0.26),
    0 0 16px rgba(255, 206, 110, 0.22);
}

/* 步数 ≤5：红色脉冲更醒目 */
.stat--moves.is-low {
  border-color: #b3301f;
  background: linear-gradient(180deg, rgba(255, 246, 238, 0.97) 0%, rgba(255, 216, 200, 0.95) 100%);
  animation: moves-danger 1.02s ease-in-out infinite;
}

.stat--moves.is-low b {
  color: #c22a12;
  animation: low-moves 0.9s ease-in-out infinite;
  text-shadow: 0 1px 0 #fff, 0 0 12px rgba(255, 110, 70, 0.85);
}

.stat--moves.is-low .stat-label {
  color: #b3301f;
}

/* ---------- V2-5.2 目标 chip：玻璃 + 圆形进度光弧 + 完成光爆 ---------- */
.goal-chip {
  border-color: #8a5a33;
  background: linear-gradient(180deg, rgba(255, 252, 244, 0.97) 0%, rgba(255, 236, 200, 0.93) 100%);
  box-shadow: 0 3px 0 rgba(74, 36, 20, 0.55), inset 0 1px 0 #fff,
    inset 0 0 0 1.5px rgba(255, 226, 168, 0.4), 0 6px 12px rgba(0, 0, 0, 0.25);
  transition: box-shadow 0.24s ease, background 0.24s ease;
}

.goal-chip::before {
  content: "";
  position: absolute;
  inset: 1.5px 1.5px auto 1.5px;
  height: 42%;
  border-radius: 999px 999px 40% 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.goal-chip__ico {
  position: relative;
  border-color: rgba(138, 90, 51, 0.45);
}

/* 圆形进度光弧（--pdeg 由 js/ui.js 按 got/need 写入） */
.goal-chip__ico::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from -90deg,
    var(--gold-2) 0deg var(--pdeg, 0deg),
    rgba(255, 216, 77, 0.14) var(--pdeg, 0deg) 360deg);
  -webkit-mask: radial-gradient(circle, rgba(0, 0, 0, 0) 0 60%, #000 64%);
  mask: radial-gradient(circle, rgba(0, 0, 0, 0) 0 60%, #000 64%);
  filter: drop-shadow(0 0 4px rgba(255, 216, 100, 0.8));
}

.goal-chip.is-done {
  background: linear-gradient(180deg, #fffce8 0%, #ffe593 60%, #ffd666 100%);
  box-shadow: 0 3px 0 rgba(74, 36, 20, 0.5), inset 0 1px 0 #fff,
    0 0 16px rgba(255, 216, 77, 0.7), 0 0 30px rgba(255, 190, 80, 0.35);
}

.goal-chip.is-done .goal-chip__ico::before {
  background: conic-gradient(from -90deg, #ffe98a 0deg 360deg);
  filter: drop-shadow(0 0 7px rgba(255, 226, 130, 1));
}

.goal-chip.is-done .goal-chip__check {
  color: #2f7a3b;
  text-shadow: 0 0 8px rgba(120, 220, 120, 0.75);
}

.goal-chip.is-burst::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 999px;
  pointer-events: none;
  animation: chip-done-burst 0.62s ease-out;
}

/* ---------- V2-5.3 棋盘：木框雕花角饰 + 内沿金光呼吸 + 格子渐变 ---------- */
.board-area::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 58% 44% at 50% 56%, rgba(255, 190, 100, 0.16) 0%, rgba(255, 170, 80, 0) 70%);
}

.board {
  border-color: #8a5a33;
  background-image:
    radial-gradient(ellipse 55% 38% at 50% 0%, rgba(255, 210, 150, 0.12) 0%, rgba(255, 210, 150, 0) 62%),
    linear-gradient(180deg, rgba(48, 22, 11, 0.94) 0%, rgba(26, 11, 5, 0.96) 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 206, 148, 0.22),
    inset 0 9px 24px rgba(0, 0, 0, 0.62),
    inset 0 -5px 14px rgba(0, 0, 0, 0.45),
    0 0 0 2px rgba(255, 196, 128, 0.28),
    0 0 0 5px #6b3d22,
    0 0 0 7px #2a1409,
    0 0 26px rgba(255, 178, 74, 0.3),
    0 9px 0 rgba(58, 26, 13, 0.6),
    0 22px 36px rgba(0, 0, 0, 0.45);
}

/* 四角金色雕花（角花铆钉 + 描金短边），画在木框上、不压棋子 */
.board::before {
  inset: -6px;
  border-radius: calc(clamp(14px, 3.2vw, 22px) + 6px);
  background-image:
    radial-gradient(circle at 50% 50%, #fff6d0 0 1.5px, rgba(255, 216, 100, 0.95) 2px 3px, rgba(255, 190, 90, 0.4) 4.4px, rgba(255, 190, 90, 0) 6.2px),
    radial-gradient(circle at 50% 50%, #fff6d0 0 1.5px, rgba(255, 216, 100, 0.95) 2px 3px, rgba(255, 190, 90, 0.4) 4.4px, rgba(255, 190, 90, 0) 6.2px),
    radial-gradient(circle at 50% 50%, #fff6d0 0 1.5px, rgba(255, 216, 100, 0.95) 2px 3px, rgba(255, 190, 90, 0.4) 4.4px, rgba(255, 190, 90, 0) 6.2px),
    radial-gradient(circle at 50% 50%, #fff6d0 0 1.5px, rgba(255, 216, 100, 0.95) 2px 3px, rgba(255, 190, 90, 0.4) 4.4px, rgba(255, 190, 90, 0) 6.2px),
    linear-gradient(90deg, rgba(255, 224, 150, 0.8), rgba(255, 224, 150, 0)),
    linear-gradient(90deg, rgba(255, 224, 150, 0), rgba(255, 224, 150, 0.8)),
    linear-gradient(90deg, rgba(255, 224, 150, 0.8), rgba(255, 224, 150, 0)),
    linear-gradient(90deg, rgba(255, 224, 150, 0), rgba(255, 224, 150, 0.8));
  background-size: 13px 13px, 13px 13px, 13px 13px, 13px 13px, 24px 2px, 24px 2px, 24px 2px, 24px 2px;
  background-position: 2px 2px, calc(100% - 2px) 2px, 2px calc(100% - 2px), calc(100% - 2px) calc(100% - 2px),
    13px 13px, calc(100% - 13px) 13px, 13px calc(100% - 13px), calc(100% - 13px) calc(100% - 13px);
  background-repeat: no-repeat;
  pointer-events: none;
}

/* 内沿金光呼吸（::after 只做光，不挡棋子和点击） */
.board::after {
  inset: 3px;
  border-radius: inherit;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 210, 150, 0.12) 0%, rgba(255, 210, 150, 0) 62%);
  box-shadow: inset 0 0 0 2px rgba(255, 216, 120, 0.26), inset 0 0 20px rgba(255, 190, 90, 0.16);
  pointer-events: none;
  animation: rim-breathe 4.6s ease-in-out infinite;
}

/* 格子轻微渐变 */
.board-cell {
  background-image: linear-gradient(180deg, rgba(255, 226, 180, 0.1) 0%, rgba(255, 226, 180, 0.03) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 226, 180, 0.1), inset 0 -2px 4px rgba(0, 0, 0, 0.22),
    0 0 8px rgba(255, 200, 120, 0.03);
}

/* ---------- V2-5.4 棋子：hover 浮起 / 选中金环 / 胜利闪金 ---------- */
.tile {
  transition: transform var(--t-swap) cubic-bezier(0.25, 0.85, 0.32, 1.08),
    opacity var(--t-pop) linear, scale 0.14s ease, filter 0.14s ease;
}

@media (hover: hover) and (pointer: fine) {
  .tile:hover {
    z-index: 5;
    scale: 1.06;
    filter: brightness(1.07) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
  }
}

.tile.is-selected {
  outline: 3px solid rgba(255, 228, 130, 0.95);
  outline-offset: -2px;
  box-shadow: 0 0 0 3px rgba(255, 216, 77, 0.45), 0 0 22px rgba(255, 206, 100, 0.75);
  animation: tile-breathe 0.8s ease-in-out infinite alternate;
}

.tile.is-hint {
  box-shadow: 0 0 0 3px rgba(255, 216, 77, 0.6), 0 0 18px rgba(255, 206, 100, 0.7);
  animation: tile-hint 0.72s ease-in-out infinite, hint-ring 0.72s ease-in-out infinite;
}

.tile.is-magic {
  filter: drop-shadow(0 0 10px rgba(255, 226, 140, 0.9));
}

.tile.is-celebrate {
  z-index: 6;
  animation: tile-celebrate 0.3s ease-out;
}

/* ---------- V2-5.5 特殊块光环升级（旋转光弧 / 辉光） ---------- */
.tile--line-h::before,
.tile--line-v::before {
  inset: -8%;
  border-radius: 50%;
  opacity: 1;
  box-shadow: none;
  background: conic-gradient(from 0deg,
    rgba(255, 236, 160, 0) 0deg, rgba(255, 236, 160, 0.95) 44deg,
    rgba(255, 236, 160, 0) 108deg, rgba(255, 236, 160, 0) 180deg,
    rgba(255, 236, 160, 0.8) 224deg, rgba(255, 236, 160, 0) 288deg);
  -webkit-mask: radial-gradient(circle, rgba(0, 0, 0, 0) 0 58%, #000 62%);
  mask: radial-gradient(circle, rgba(0, 0, 0, 0) 0 58%, #000 62%);
  filter: drop-shadow(0 0 6px rgba(255, 206, 100, 0.95));
  animation: spin-slow 2.6s linear infinite;
}

.tile--line-h::after,
.tile--line-v::after {
  box-shadow: 0 0 10px rgba(255, 206, 100, 1), 0 0 0 1.5px rgba(90, 47, 27, 0.5);
  animation: line-sweep 1.5s linear infinite;
}

.tile--line-v::after {
  animation-direction: reverse;
}

.tile--bomb {
  filter: drop-shadow(0 0 7px rgba(255, 140, 60, 0.9));
}

.tile--bomb::before {
  inset: -7%;
  animation: bomb-pulse 0.9s ease-in-out infinite;
  box-shadow: 0 0 14px rgba(255, 130, 60, 0.8);
}

.tile--bomb::after {
  filter: drop-shadow(0 0 8px rgba(255, 180, 70, 1));
  animation: spin-slow 2.4s linear infinite;
}

.tile--rainbow {
  filter: drop-shadow(0 0 9px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 18px rgba(255, 180, 255, 0.5));
}

.tile--rainbow::before {
  animation: spin-slow 2.8s linear infinite;
  filter: drop-shadow(0 0 9px rgba(255, 255, 255, 0.95));
}

/* ---------- V2-5.6 连击横幅：渐变描边文字 + 光扫 + 5 连彩金强化 ---------- */
.combo-banner {
  background-image: linear-gradient(180deg, #fff6c8 0%, #ffd84d 34%, #ffa93e 68%, #f2702c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2.5px rgba(255, 251, 236, 0.96);
  paint-order: stroke fill;
  text-shadow: none;
  filter: drop-shadow(0 4px 0 rgba(142, 36, 22, 0.9)) drop-shadow(0 0 14px rgba(255, 180, 60, 0.65));
}

.combo-banner--2 {
  background-image: linear-gradient(180deg, #fffbe0 0%, #ffe066 40%, #ffb03e 100%);
}

.combo-banner--3 {
  background-image: linear-gradient(180deg, #fff0b8 0%, #ffb04d 44%, #ff7f2e 100%);
}

.combo-banner--4 {
  background-image: linear-gradient(180deg, #ffe0b0 0%, #ff9468 46%, #e5482a 100%);
}

.combo-banner--5 {
  background-image: linear-gradient(100deg, #ff5a5a 0%, #ffb84d 18%, #ffe84d 34%, #68d96b 50%,
    #4dc3ff 66%, #8a6bff 82%, #ff5ad9 100%);
  background-size: 200% 100%;
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.98);
  filter: drop-shadow(0 5px 0 rgba(90, 20, 40, 0.85)) drop-shadow(0 0 20px rgba(255, 140, 220, 0.7))
    drop-shadow(0 0 36px rgba(255, 200, 90, 0.5));
}

/* 光扫 + 光晕（::before/::after 都放在文字后面，透不过字形也不会挡字） */
.combo-banner::before {
  content: "";
  position: absolute;
  inset: -22% -18%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 232, 160, 0.4) 0%, rgba(255, 200, 90, 0) 70%);
  opacity: 0;
}

.combo-banner::after {
  content: "";
  position: absolute;
  top: 4%;
  bottom: 4%;
  left: 0;
  width: 26%;
  z-index: -1;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
  transform: skewX(-16deg);
  opacity: 0;
}

.combo-banner.is-show::before {
  animation: combo-bloom 0.92s ease-out both;
}

.combo-banner.is-show::after {
  animation: combo-sweep 0.92s ease-out 0.05s both;
}

.combo-banner--5.is-show::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 200, 255, 0.4) 0%, rgba(255, 170, 80, 0.18) 40%, rgba(255, 200, 90, 0) 72%);
}

/* ---------- V2-5.7 道具按钮光环 + 底部提示柔光 + 吉祥物辉光 ---------- */
.boost-btn {
  border-color: #8a5a33;
  box-shadow: 0 5px 0 rgba(74, 36, 20, 0.6), 0 10px 16px rgba(0, 0, 0, 0.28),
    inset 0 2px 0 #fff, inset 0 0 0 1.5px rgba(255, 226, 168, 0.45), 0 0 18px rgba(255, 200, 110, 0.2);
}

.boost-btn::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 216, 120, 0.42) 0%, rgba(255, 196, 90, 0) 70%);
  opacity: 0.75;
  animation: boost-aura 3.4s ease-in-out infinite;
}

.boost-btn.is-used::before {
  animation-duration: 0.7s;
}

.boost-btn.is-empty::before { display: none; }

.boost-btn .boost-ico {
  filter: drop-shadow(0 1px 0 #fff) drop-shadow(0 0 6px rgba(255, 210, 120, 0.55));
}

.goal-tip {
  background: radial-gradient(ellipse 66% 130% at 50% 105%, rgba(20, 8, 4, 0.5) 0%, rgba(20, 8, 4, 0) 76%);
  text-shadow: 0 2px 5px rgba(20, 8, 4, 0.85), 0 0 14px rgba(255, 206, 120, 0.22);
}

.game-mascot {
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 16px rgba(255, 200, 120, 0.4));
}

.speech-bubble {
  border-color: #8a5a33;
  box-shadow: 0 4px 0 rgba(74, 36, 20, 0.38), 0 10px 18px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 #fff, 0 0 16px rgba(255, 200, 120, 0.22);
}

/* ---------- V2-5.8 飘分升级（game.js 加 .score-float--big / --gold） ---------- */
.score-float--big {
  font-size: clamp(21px, calc(var(--appw) * 0.05), 30px);
  color: #fffbea;
  filter: drop-shadow(0 0 12px rgba(255, 206, 100, 0.95));
}

.score-float--gold {
  background-image: linear-gradient(180deg, #fff8d2 0%, #ffd84d 46%, #f2a33c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 0 rgba(142, 36, 22, 0.9)) drop-shadow(0 0 10px rgba(255, 216, 100, 0.9));
}

/* ---------- 第三批关键帧 ---------- */
@keyframes moves-danger {
  0%, 100% {
    box-shadow: 0 4px 0 rgba(74, 36, 20, 0.55), inset 0 1px 0 #fff, 0 0 0 0 rgba(217, 60, 40, 0.5),
      0 0 16px rgba(217, 60, 40, 0.3);
  }
  50% {
    box-shadow: 0 4px 0 rgba(74, 36, 20, 0.55), inset 0 1px 0 #fff, 0 0 0 6px rgba(217, 60, 40, 0),
      0 0 26px rgba(217, 60, 40, 0.55);
  }
}

@keyframes score-glow {
  0% { text-shadow: 0 1px 0 #fff, 0 0 8px rgba(255, 196, 90, 0.4); }
  38% { text-shadow: 0 1px 0 #fff, 0 0 18px rgba(255, 236, 150, 1), 0 0 36px rgba(255, 190, 80, 0.7); }
  100% { text-shadow: 0 1px 0 #fff, 0 0 12px rgba(255, 196, 90, 0.55); }
}

@keyframes chip-done-burst {
  0% { box-shadow: 0 0 0 0 rgba(255, 232, 140, 0.95), inset 0 0 18px rgba(255, 232, 140, 0.7); opacity: 1; }
  100% { box-shadow: 0 0 0 18px rgba(255, 232, 140, 0), inset 0 0 4px rgba(255, 232, 140, 0); opacity: 0; }
}

@keyframes rim-breathe {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes hint-ring {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 216, 77, 0.45), 0 0 10px rgba(255, 206, 100, 0.5); }
  45% { box-shadow: 0 0 0 5px rgba(255, 216, 77, 0.85), 0 0 22px rgba(255, 206, 100, 0.9); }
}

@keyframes tile-celebrate {
  0% { scale: 1; filter: brightness(1.05); }
  40% { scale: 1.14; filter: brightness(1.9) saturate(1.25) drop-shadow(0 0 10px rgba(255, 216, 100, 0.95)); }
  100% { scale: 1; filter: brightness(1.05); }
}

@keyframes line-sweep {
  0% { background-position: 0 0; }
  100% { background-position: 44px 0; }
}

@keyframes combo-bloom {
  0% { opacity: 0; scale: 0.6; }
  28% { opacity: 1; scale: 1.05; }
  70% { opacity: 0.85; scale: 1; }
  100% { opacity: 0; scale: 1.08; }
}

@keyframes combo-sweep {
  0% { left: -30%; opacity: 0; }
  14% { opacity: 1; }
  55% { left: 108%; opacity: 1; }
  100% { left: 108%; opacity: 0; }
}

@keyframes boost-aura {
  0%, 100% { opacity: 0.55; scale: 0.98; }
  50% { opacity: 0.95; scale: 1.03; }
}

/* 第三批响应式微调 */
@media (max-width: 380px) {
  .goal-chip__ico::before { inset: -3px; }
  .stat--score b { font-size: clamp(19px, calc(var(--appw) * 0.045), 24px); }
}

@media (max-height: 560px) {
  .board::before { inset: -4px; }
  .boost-btn::before { inset: -4px; }
  #screen-game { background-image: linear-gradient(180deg, rgba(58, 29, 18, 0.08) 0%, rgba(20, 8, 4, 0.5) 100%), url("../assets/bg/board.jpg"); background-position: center center, center center; background-size: cover, cover; }
}

/* ============================================================================
   V2-6. 转场景深 / 弹窗 / Toast 精致化
   （注意：不给 .screen 加 animation，避免与 fx.css 的 .screen.fx-quake 冲突）
   ========================================================================== */

/* 屏幕转场：在原有 opacity/transform 上叠一层轻微景深（filter 过渡，非动画） */
.screen {
  filter: blur(4px) brightness(0.86) saturate(0.94);
  transition: opacity 0.34s ease, transform 0.34s cubic-bezier(0.22, 0.9, 0.3, 1),
    filter 0.34s ease, visibility 0s linear 0.34s;
}

.screen--active {
  filter: none;
  transition: opacity 0.34s ease, transform 0.42s cubic-bezier(0.2, 0.9, 0.25, 1.04),
    filter 0.42s ease, visibility 0s linear 0s;
}

/* 性能：非当前屏的常驻动画（飘叶/萤火/光扫/呼吸）全部暂停；
   切到该屏时再继续（入场类动画在可见后才开始播放，观感更顺） */
.screen:not(.screen--active) *,
.screen:not(.screen--active) *::before,
.screen:not(.screen--active) *::after {
  animation-play-state: paused !important;
}

/* ---------- V2-6.1 弹窗：顶部光晕 + 描金内衬 + 回弹入场 ---------- */
.modal {
  border-color: #8a5a33;
  box-shadow: 0 0 0 3px rgba(255, 238, 206, 0.45), 0 12px 0 rgba(74, 36, 20, 0.5),
    0 26px 50px rgba(0, 0, 0, 0.5), inset 0 2px 0 #fff,
    inset 0 0 0 1.5px rgba(255, 216, 140, 0.4), 0 0 30px rgba(255, 200, 110, 0.2);
  animation: modal-in 0.4s cubic-bezier(0.2, 1.1, 0.4, 1) both;
}

.modal::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 128px;
  border-radius: 22px 22px 0 0;
  pointer-events: none;
  background: radial-gradient(ellipse 62% 100% at 50% 0%, rgba(255, 220, 160, 0.4) 0%, rgba(255, 200, 120, 0) 72%);
}

.modal > * { position: relative; z-index: 1; }

.modal__title {
  color: #7a2a12;
  text-shadow: 0 1px 0 #fff, 0 0 14px rgba(255, 206, 120, 0.35);
}

.modal__title::after {
  box-shadow: 0 0 10px rgba(255, 200, 100, 0.65);
}

/* 遮罩轻微暗角（中心略亮、四周更暗，聚焦弹窗） */
.modal-layer {
  background-image: radial-gradient(ellipse at 50% 42%, rgba(48, 22, 11, 0.42) 0%, rgba(16, 7, 3, 0.72) 72%);
}

.pause-chip {
  border-color: rgba(138, 90, 51, 0.4);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 236, 200, 0.5));
  box-shadow: inset 0 1px 0 #fff, 0 0 10px rgba(255, 206, 120, 0.16);
}

.help-items {
  border-color: rgba(138, 90, 51, 0.3);
  background: linear-gradient(180deg, rgba(255, 252, 243, 0.6), rgba(255, 236, 200, 0.45));
}

.help-block__title {
  text-shadow: 0 1px 0 #fff, 0 0 10px rgba(255, 206, 120, 0.3);
}

/* ---------- V2-6.2 Toast：金色描边 + 玻璃高光 ---------- */
.toast {
  border-color: rgba(255, 216, 140, 0.72);
  background: linear-gradient(180deg, rgba(88, 46, 26, 0.96) 0%, rgba(38, 18, 9, 0.96) 100%);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.48), 0 0 0 1.5px rgba(255, 196, 110, 0.22),
    0 0 22px rgba(255, 180, 80, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 10px rgba(255, 210, 130, 0.25);
}

.toast::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 2px;
  height: 40%;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
}

/* 桌面端游戏框内沿暖金高光（手机全屏不加，避免破坏“铺满”感） */
@media (min-width: 641px) {
  #app::after {
    box-shadow: inset 0 0 0 2px rgba(255, 214, 160, 0.2), inset 0 0 80px rgba(20, 8, 4, 0.3),
      inset 0 0 30px rgba(255, 190, 110, 0.07);
  }
}

/* 弹窗回弹入场（重定义既有 keyframes，全站生效） */
@keyframes modal-in {
  0% { opacity: 0; transform: translateY(26px) scale(0.92); }
  58% { opacity: 1; transform: translateY(-5px) scale(1.018); }
  80% { transform: translateY(2px) scale(0.998); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================================
   V2-7. prefers-reduced-motion 全量降级（保留原有 !important 全局块，这里补充
        装饰层直接隐藏 / 关键滤镜回退，确保静态可读且零动画）
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .screen {
    filter: none !important;
  }

  .fairy {
    display: none !important;
  }

  #screen-loading::after,
  #screen-home::after,
  #screen-result::after,
  .btn::after,
  .combo-banner::before,
  .combo-banner::after,
  .boost-btn::before,
  .tile.is-selected,
  .tile.is-hint,
  .result-star.is-on::before,
  .goal-chip.is-burst::after {
    animation: none !important;
  }

  #screen-result::after {
    opacity: 0.55;
  }

  .combo-banner,
  .combo-banner--5 {
    -webkit-text-stroke-width: 2px;
  }
}

/* ============================================================================
   V2-8. 首批截图反馈微调（Lead review）
   - 结算失败页：放射线/背景改冷蓝月光，去掉暖金冲突
   - 加载页：顶部光束减弱、整体不过曝；加载文案加深色底提升对比
   - 首页：logo 背后加常驻柔金径向光晕（静态也有魔法感），扫光减弱
   - 对局：目标 chip 未完成时给淡淡金色底环
   ========================================================================== */

/* 1) 加载页：光束 alpha 降约 40%，opacity 降到 .32；文案加暗色小底 */
#screen-loading::before {
  background: repeating-conic-gradient(from 0deg at 50% 0%,
    rgba(255, 244, 221, 0.13) 0deg 5deg,
    rgba(255, 244, 221, 0) 5deg 14deg);
  opacity: 0.32;
}

.loading-text {
  padding: 4px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 226, 178, 0.26);
  background: rgba(42, 20, 10, 0.42);
  color: #fff4da;
  text-shadow: 0 2px 5px rgba(20, 8, 4, 0.85);
  box-shadow: 0 2px 10px rgba(20, 8, 4, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* 2) 首页：logo 常驻柔金光晕（三层径向，静态可见） + 扫光减弱 */
#screen-home::before {
  background:
    radial-gradient(ellipse 36% 20% at 50% 13%, rgba(255, 238, 186, 0.68) 0%, rgba(255, 214, 130, 0) 72%),
    radial-gradient(ellipse 66% 36% at 50% 11%, rgba(255, 206, 120, 0.32) 0%, rgba(255, 190, 90, 0) 72%),
    radial-gradient(ellipse at 50% 0%, rgba(255, 226, 168, 0.48) 0%, rgba(255, 205, 130, 0) 68%);
  animation: home-halo-breathe 6.4s ease-in-out infinite;
}

#screen-home::after {
  background-image:
    linear-gradient(104deg, rgba(255, 255, 255, 0) 40%, rgba(255, 249, 224, 0.32) 50%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(ellipse 40% 20% at 28% 90%, rgba(255, 206, 130, 0.3) 0%, rgba(255, 180, 90, 0) 70%);
  background-size: 50% 24%, 100% 100%;
  background-position: -40% 4%, 0 0;
  background-repeat: no-repeat, no-repeat;
  animation: home-logo-sheen 7.6s ease-in-out infinite;
}

.home-logo {
  filter: drop-shadow(0 6px 0 rgba(74, 36, 20, 0.32))
    drop-shadow(0 16px 24px rgba(20, 8, 4, 0.45))
    drop-shadow(0 0 22px rgba(255, 218, 140, 0.62))
    drop-shadow(0 0 52px rgba(255, 178, 72, 0.34));
}

/* 3) 结算失败页：冷蓝月光（背景分层：冷光在上、深蓝压暖叶、卡片保持可读） */
#screen-result.screen--lose {
  background-image:
    radial-gradient(ellipse 54% 30% at 50% 24%, rgba(186, 208, 255, 0.26) 0%, rgba(12, 12, 20, 0) 72%),
    linear-gradient(180deg, rgba(18, 22, 36, 0.78) 0%, rgba(8, 9, 16, 0.9) 100%),
    url("../assets/bg/board.jpg");
  background-position: center center, center center, center center;
  background-size: cover, cover, cover;
}

#screen-result.screen--lose::before {
  background: radial-gradient(ellipse at 50% 44%, rgba(176, 200, 255, 0.12) 0%, rgba(8, 10, 18, 0.48) 74%);
}

#screen-result.screen--lose::after {
  background-image: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(152, 180, 224, 0.1) 0deg 2.4deg,
    rgba(152, 180, 224, 0) 2.4deg 7.6deg);
  opacity: 0.72;
  animation-duration: 72s;
}

/* 4) 目标 chip：未完成也有淡淡金色进度底环，提示“这里会涨” */
.goal-chip__ico::before {
  background: conic-gradient(from -90deg,
    var(--gold-2) 0deg var(--pdeg, 0deg),
    rgba(255, 216, 77, 0.32) var(--pdeg, 0deg) 360deg);
  filter: drop-shadow(0 0 5px rgba(255, 216, 100, 0.85));
}

/* 加载页文案在 380 以下缩小一点，避免底牌过宽 */
@media (max-width: 380px) {
  .loading-text {
    padding: 3px 12px;
  }
}

/* ============================================================================
   V2-9. P2 视觉修复（Lead / qa-runner 复核）
   1) 首页 logo 扫光改为「只在 logo 区域、带径向羽化 mask 的独立层」，
      彻底消除原 ::after 整屏扫光在右上角形成的硬边高亮矩形；
   2) 结算星星 sparkle 由「8px 白点 + 8px 光晕」缩小为 5px + 光晕减半，
      并加 mix-blend-mode:screen，避免某个动画相位糊成大白球。
   ========================================================================== */

/* 首页 ::after 只保留底部暖光（扫光交给 .home-sheen，见 js/ui.js 注入） */
#screen-home::after {
  background-image: radial-gradient(ellipse 40% 20% at 28% 90%, rgba(255, 206, 130, 0.3) 0%, rgba(255, 180, 90, 0) 70%);
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  animation: none;
}

.home-sheen {
  position: absolute;
  top: 2.8%;
  left: 50%;
  z-index: 5;
  width: min(66%, 440px);
  height: 24%;
  transform: translateX(-50%) rotate(-1.5deg);
  border-radius: 34%;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0 36%, rgba(0, 0, 0, 0.5) 62%, rgba(0, 0, 0, 0) 84%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 0 36%, rgba(0, 0, 0, 0.5) 62%, rgba(0, 0, 0, 0) 84%);
}

.home-sheen::before {
  content: "";
  position: absolute;
  top: -26%;
  bottom: -26%;
  left: -45%;
  width: 26%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 250, 228, 0.5), rgba(255, 255, 255, 0));
  filter: blur(2px);
  animation: home-sheen-sweep 7.6s ease-in-out infinite;
}

@keyframes home-sheen-sweep {
  0%, 8% { left: -45%; opacity: 0; }
  16% { opacity: 1; }
  44% { opacity: 1; }
  54%, 100% { left: 118%; opacity: 0; }
}

/* 结算星星 sparkle：更小更柔，不糊白球 */
.result-star.is-on::before {
  top: 2%;
  right: 12%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffdf0 0 22%, rgba(255, 232, 140, 0.85) 50%, rgba(255, 200, 90, 0) 74%);
  box-shadow: 0 0 4px rgba(255, 236, 160, 0.7);
  mix-blend-mode: screen;
  animation: star-sparkle 2.4s ease-in-out calc(var(--i, 0) * 220ms + 400ms) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .home-sheen { display: none !important; }
}

/* 星屑闪烁：峰值透明度/缩放都收敛，避免糊成白球 */
@keyframes star-sparkle {
  0%, 100% { opacity: 0; scale: 0.45; }
  42% { opacity: 0.85; scale: 1; }
  68% { opacity: 0.3; scale: 0.8; }
}

@media (max-height: 560px) {
  .home-sheen { top: 2%; height: 30%; width: min(70%, 460px); }
}

/* ============================================================================
   V2-10. P2 布局修复：844x390 矮横屏结算页纵向溢出
   （LAYOUT-13 失败：结算卡/按钮组底边超出视口，「返回首页」被切）
   只压缩横屏矮窗下的结算页内部间距/字号，不改 DOM 与点击区域（不做 scale）。
   ========================================================================== */
@media (max-height: 560px) and (orientation: landscape) {
  #screen-result {
    padding: 10px 14px;
  }

  .result-card {
    width: min(78%, 400px);
    max-height: 96%;
    padding: 16px 14px 12px;
  }

  .result-ribbon {
    top: -16px;
    padding: 4px 20px;
    font-size: 15px;
  }

  .result-level {
    margin: 4px 0 0;
    font-size: 11px;
  }

  .result-stars {
    min-height: 32px;
    margin: 4px 0 0;
    gap: 5px;
  }

  .result-star {
    font-size: 26px;
  }

  .result-score {
    gap: 7px;
    margin-top: 0;
  }

  .result-score > b {
    font-size: 23px;
  }

  .result-score > span {
    font-size: 11px;
  }

  .result-best {
    margin-top: 0;
    font-size: 10px;
  }

  .result-newbest {
    margin-left: 5px;
    padding: 1px 6px;
    font-size: 9px;
  }

  .result-goals {
    margin: 4px 0 7px;
    gap: 5px;
  }

  .result-goal {
    padding: 2px 7px 2px 3px;
    gap: 4px;
    font-size: 10px;
  }

  .result-goal__ico {
    width: 17px;
    height: 17px;
  }

  .result-buttons {
    gap: 6px;
  }

  .result-buttons .btn {
    min-height: 34px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 13px;
  }
}

/* ============================================================================
   V3 新玩法：森林障碍（藤蔓 / 冰霜） + 限时冲刺
   - 首页第四个按钮「限时冲刺」
   - 对局 HUD 的时间槽与时间条
   - 棋子上的覆盖物（藤蔓 / 冰霜）视觉
   - 目标图标 / 关卡水印的 cover 类型
   - 结算页冲刺变体与绿色加时飘字
   ========================================================================== */

/* ---------- 首页按钮：开始 / 限时冲刺 各占整行，关卡 / 说明 各半行 ---------- */
.home-buttons > #btn-play { grid-column: 1 / -1; grid-row: 1; min-height: 56px; }
.home-buttons > #btn-rush { grid-column: 1 / -1; grid-row: 2; min-height: 50px; }
.home-buttons > #btn-levels { grid-column: 1 / 2; grid-row: 3; }
.home-buttons > #btn-help { grid-column: 2 / 3; grid-row: 3; }

.home-buttons > #btn-rush,
.btn--rush {
  color: #0d3a22;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  border-color: var(--cream-3);
  background: linear-gradient(180deg, #c8f59a 0%, #6fce63 52%, #2f9a55 100%);
  box-shadow: 0 0 0 3px var(--brown-700), 0 7px 0 #1f6b3c, 0 14px 20px rgba(16, 44, 24, 0.34),
    inset 0 2px 0 rgba(255, 255, 255, 0.65);
}
.home-buttons > #btn-rush:active,
.btn--rush:active {
  box-shadow: 0 0 0 3px var(--brown-700), 0 2px 0 #1f6b3c, 0 6px 10px rgba(16, 44, 24, 0.34),
    inset 0 2px 0 rgba(255, 255, 255, 0.5);
}

.btn__badge {
  position: absolute;
  right: 9px;
  top: 50%;
  z-index: 1;
  min-width: 22px;
  padding: 1px 9px 2px;
  transform: translateY(-50%);
  border-radius: 999px;
  border: 2px solid rgba(24, 74, 42, 0.55);
  background: rgba(255, 255, 255, 0.88);
  color: #1f6b3c;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 0 #fff;
}
.btn__badge::before { content: "最高 "; opacity: 0.72; font-size: 0.86em; }

/* ---------- 对局 HUD：时间槽 + 时间条（仅限时冲刺显示） ---------- */
.stat--time { display: none; }
.stat--time b { color: #1f6b3c; font-size: clamp(21px, calc(var(--appw) * 0.05), 28px); }
.stat--time.is-low b { color: #b3301f; animation: low-moves 0.9s ease-in-out infinite; }
.stat--time.is-bump { animation: stat-bump 0.36s cubic-bezier(0.2, 1.6, 0.4, 1); }

#screen-game.is-rush .stat--moves { display: none; }
#screen-game.is-rush .stat--time { display: flex; }

.rush-bar {
  display: none;
  position: relative;
  z-index: 7;
  flex: 0 0 auto;
  height: 9px;
  margin: 6px 14px 0;
  border-radius: 999px;
  border: 2px solid var(--brown-700);
  background: rgba(28, 12, 6, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 3px 0 rgba(74, 36, 20, 0.5);
  overflow: hidden;
}

#screen-game.is-rush .rush-bar:not([hidden]) { display: block; }

.rush-bar > i {
  display: block;
  height: 100%;
  width: 60%;
  border-radius: 999px;
  background: linear-gradient(90deg, #b6f08a, #63c95f 58%, #2f9a55);
  transition: width 0.18s linear, background 0.3s ease;
}

.rush-bar.is-urgent > i { background: linear-gradient(90deg, #ffd166, #ff7a3c 58%, #d3371c); }
.rush-bar.is-urgent { animation: rush-urgent 0.78s ease-in-out infinite; }

@keyframes rush-urgent {
  0%, 100% { filter: none; }
  50% { filter: brightness(1.22); }
}

/* ---------- 棋子覆盖物：藤蔓（1 层） / 冰霜（2 层） ---------- */
.tile[data-cover] { filter: saturate(0.55) brightness(0.93); }

.tile--cover-vine::before {
  inset: 2%;
  border-radius: 26%;
  opacity: 1;
  background:
    repeating-linear-gradient(38deg, rgba(52, 122, 40, 0.88) 0 13%, rgba(124, 202, 92, 0.86) 13% 25%),
    repeating-linear-gradient(-38deg, rgba(44, 104, 34, 0.7) 0 13%, rgba(158, 224, 118, 0.6) 13% 25%);
  box-shadow: inset 0 0 0 2px rgba(34, 84, 28, 0.92), inset 0 3px 0 rgba(255, 255, 255, 0.18),
    0 0 10px rgba(64, 148, 54, 0.55);
}

.tile--cover-vine::after {
  inset: 14%;
  border-radius: 40% 60% 50% 50%;
  opacity: 1;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.4) 0 12%, rgba(255, 255, 255, 0) 58%);
}

.tile--cover-ice::before {
  inset: 0;
  border-radius: 24%;
  opacity: 1;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.92) 0 9%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(158deg, rgba(198, 238, 255, 0.9) 0%, rgba(126, 194, 244, 0.82) 48%, rgba(178, 228, 255, 0.9) 100%);
  box-shadow: inset 0 0 0 2px rgba(84, 156, 208, 0.92), inset 0 3px 0 rgba(255, 255, 255, 0.4),
    0 0 12px rgba(140, 212, 255, 0.6);
}

.tile--cover-ice::after {
  content: attr(data-cover-hp);
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  font-size: calc(var(--cell) * 0.44);
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 1px 0 #3f7fb0, 0 0 9px rgba(52, 132, 196, 0.95);
}

.tile.is-cover-hit { animation: tile-shake 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97); }

/* ---------- cover 目标图标（目标 chip / 结算 / 帮助 / 关卡卡） ---------- */
.goal-chip__ico[data-type="cover"],
.result-goal__ico[data-type="cover"],
.level-btn__goal-ico[data-type="cover"] {
  background-image:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.82) 0 11%, rgba(255, 255, 255, 0) 42%),
    repeating-linear-gradient(40deg, #79c95c 0 22%, #468f3f 22% 44%);
  background-color: #468f3f;
}

.level-btn__wm[data-type="cover"] {
  background-image:
    radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.85) 0 10%, rgba(255, 255, 255, 0) 42%),
    repeating-linear-gradient(42deg, #79c95c 0 20%, #3f8a3a 20% 40%);
  background-color: #468f3f;
}

/* ---------- 加时飘字 / 冲刺结算 ---------- */
.score-float--time {
  color: #eaffe0;
  font-size: clamp(14px, calc(var(--appw) * 0.032), 19px);
  text-shadow: 0 2px 0 #1f6b3c, 0 0 12px rgba(132, 240, 150, 0.9);
  animation-duration: 0.95s;
}

.result-card--rush .result-ribbon {
  background: linear-gradient(180deg, #8fe06e, #2f9a55 70%);
}

.result-rush {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  margin: 2px 0 8px;
  font-size: clamp(11px, 2.7vw, 13px);
  font-weight: 800;
  color: #7a4a22;
}

.result-rush span {
  padding: 2px 10px;
  border-radius: 999px;
  border: 2px solid rgba(90, 47, 27, 0.28);
  background: rgba(255, 245, 225, 0.75);
  box-shadow: inset 0 1px 0 #fff;
}

.result-rush b { color: #2f8b4a; font-size: 1.12em; margin-left: 3px; }

/* ---------- 紧凑高度下的按钮/时间条微调 ---------- */
@media (max-height: 760px) {
  .home-buttons > #btn-play { min-height: 50px; }
  .home-buttons > #btn-rush { min-height: 44px; }
  .home-buttons > #btn-levels,
  .home-buttons > #btn-help { min-height: 44px; }
  .btn__badge { font-size: 10px; padding: 1px 7px 2px; }
}

@media (max-height: 620px) {
  .home-buttons > #btn-play { min-height: 46px; }
  .home-buttons > #btn-rush { min-height: 40px; }
  .home-buttons > #btn-levels,
  .home-buttons > #btn-help { min-height: 40px; }
  .rush-bar { height: 7px; margin-top: 4px; }
}

@media (max-height: 560px) {
  .home-buttons > #btn-play { min-height: 42px; }
  .home-buttons > #btn-rush { min-height: 36px; }
  .home-buttons > #btn-levels,
  .home-buttons > #btn-help { min-height: 34px; }
  .btn__badge { font-size: 9px; padding: 0 6px 1px; }
}

/* 矮横屏：首页 4 个按钮压成 2×2 */
@media (max-height: 560px) and (orientation: landscape) {
  .home-buttons > #btn-play { grid-column: 1 / 2; grid-row: 1; }
  .home-buttons > #btn-rush { grid-column: 2 / 3; grid-row: 1; }
  .home-buttons > #btn-levels { grid-column: 1 / 2; grid-row: 2; }
  .home-buttons > #btn-help { grid-column: 2 / 3; grid-row: 2; }
}