/* 微信/抖音小小程序 H5 预览框架 — 通用样式 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  color: #2c3e50;
  background: linear-gradient(165deg, #e8f4fc 0%, #f5e6ff 45%, #fff5eb 100%);
}

/* 内容保护：尽量禁选中/长按菜单/拖拽保存 */
body,
body *:not(input):not(textarea):not([contenteditable="true"]) {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

img,
video,
canvas,
svg {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

input,
textarea,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  pointer-events: auto;
}

/* 小程序页：全屏背景图 — 宽度 100% 不裁左右，高度随视口拉伸铺满（可能轻微变形） */
/* 高分步：金币雨（单次移动含连锁总得分 >100） */
.coin-rain-layer {
  position: fixed;
  inset: 0;
  z-index: 11000;
  pointer-events: none;
  overflow: hidden;
}

.coin-rain__coin {
  position: absolute;
  top: -76px;
  width: 72px;
  height: 72px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  animation: coin-rain-fall var(--coin-fall, 3.1s) linear forwards;
}

.coin-rain__coin-img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
  pointer-events: none;
}

.coin-rain__coin--hit {
  animation: none;
  opacity: 0;
  pointer-events: none;
}

@keyframes coin-rain-fall {
  from {
    transform: translateX(-50%) translateY(0) rotate(0deg);
  }
  to {
    transform: translateX(-50%) translateY(calc(100vh + 70px)) rotate(360deg);
  }
}

body.page-game {
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: max(0px, env(safe-area-inset-bottom));
  background-color: #c8e6d0;
  background-image: url("../assets/game-page-bg.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  color: #3d3a36;
}

/* 萌宠关卡（pack=pet）：丛林边框底图 */
body.page-game.page-game--pet {
  background-color: #1a3d28;
  background-image: url("../assets/game-page-bg-pet.png");
}

/* 美食关卡（pack=life）：草地天空全屏底图 */
body.page-game.page-game--life {
  background-color: #a8e6cf;
  background-image: url("../assets/game-page-bg-life.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

body.page-game--life .game-meta .level-name {
  color: #f26b3b;
  font-weight: 800;
  text-shadow:
    0 1px 2px rgba(255, 239, 225, 0.45),
    0 0 8px rgba(120, 32, 12, 0.24);
}

body.page-game--life .game-meta .stats {
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 1px 2px rgba(0, 50, 90, 0.45);
}

body.page-game--life .game-meta .stats strong {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 50, 90, 0.5);
}

body.page-game--life .tier-pill {
  color: rgba(255, 252, 230, 0.95);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* 美食：四种收集目标时顶栏计数分两行 */
body.page-game--life #lifeGoalsHud.life-goals-hud--multiline {
  white-space: pre-line;
  line-height: 1.38;
  display: inline-block;
  max-width: 100%;
  margin: 0;
  vertical-align: top;
}

body.page-game .game-bottom {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(255, 252, 246, 0.52) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 4px 18px rgba(180, 160, 120, 0.09);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #555045;
}

body.page-game .board-score-hud {
  background: linear-gradient(
    145deg,
    rgba(210, 238, 200, 0.92),
    rgba(175, 215, 155, 0.65)
  );
  border: 1px solid rgba(70, 130, 55, 0.35);
  box-shadow: 0 2px 10px rgba(40, 90, 35, 0.12);
  color: #1a4a1f;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.page-game .game-meta .level-name,
body.page-game .game-meta .stats {
  color: #2a6b32;
}

body.page-game .game-meta .stats strong {
  color: #17421c;
}

/* 萌宠局：顶栏关卡名 / 目标分 / 步数 — 与背景黄叶协调的暖黄字 */
body.page-game--pet .game-meta .level-name {
  color: #f7e06d;
  text-shadow:
    0 1px 2px rgba(18, 42, 12, 0.78),
    0 0 10px rgba(0, 0, 0, 0.32);
  font-weight: 800;
}

body.page-game--pet .game-meta .stats {
  color: #f5d85c;
  text-shadow: 0 1px 2px rgba(18, 42, 12, 0.72);
}

body.page-game--pet .game-meta .stats strong {
  color: #fff2a0;
  text-shadow: 0 1px 2px rgba(18, 42, 12, 0.68);
}

body.page-game--pet .board-score-hud {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.94),
    rgba(220, 238, 226, 0.9)
  );
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #0f2e18;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

/* 萌宠：道具与得分同系薄荷胶囊 */
body.page-game--pet .board-items-btn {
  border-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.94),
    rgba(220, 238, 226, 0.9)
  );
  color: #0f2e18;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1.25;
}

/* 萌宠：工具栏「返回 / 设置」与得分同形 */
body.page-game--pet .board-toolbar .btn-back,
body.page-game--pet .board-toolbar .board-settings-btn {
  pointer-events: auto;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1.25;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.94),
    rgba(220, 238, 226, 0.9)
  );
  color: #0f2e18;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  min-height: 0;
  width: auto;
  height: auto;
}

body.page-game .tier-pill {
  color: #8a7d62;
}

.app {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  padding: env(safe-area-inset-top) 16px calc(16px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

body.page-home {
  margin: 0 auto;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: url("../assets/home-scene.png") center / cover no-repeat;
  overflow-x: hidden;
}

body.page-home .app {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  min-height: 100dvh;
  min-height: 100svh;
  justify-content: flex-start;
  padding: 0 16px calc(32px + max(20px, env(safe-area-inset-bottom)));
}

/**
 * 首页：标题单独靠上；三主题 + 排行榜/签到 在下方剩余区域内垂直居中。
 */
body.page-home .main-header.main-header--home {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  text-align: center;
  padding: max(6px, env(safe-area-inset-top)) 0 2px;
  margin-top: 0;
  margin-bottom: clamp(24px, 6vh, 72px);
  display: block;
}

body.page-home .home-share-btn {
  position: absolute;
  right: 0;
  top: max(2px, env(safe-area-inset-top));
  border: none;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff7a18, #ff3d81);
  box-shadow: 0 4px 14px rgba(255, 61, 129, 0.28);
  z-index: 5;
  -webkit-tap-highlight-color: transparent;
}

body.page-home .home-share-btn:active {
  transform: scale(0.98);
}

body.page-home .home-back-btn {
  position: absolute;
  left: 0;
  top: max(2px, env(safe-area-inset-top));
  border: none;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  -webkit-tap-highlight-color: transparent;
  z-index: 5;
}

/* 小程序 web-view 已有系统返回，隐藏 H5 重复「返回」；分享改由壳层 cover-view + open-type="share" */
body.page-home.m3-mp-webview .home-back-btn {
  display: none;
}

/* 小程序内仍显示 H5 按钮作占位/兜底；优先点壳层 cover-view「分享有礼」，若机型上 cover 异常可点此处复制链接 */
body.page-home.m3-mp-webview .home-share-btn {
  visibility: visible;
  pointer-events: auto;
}

/* 对局页：顶区同样是 H5 棋盘工具栏；避免内容上顶与刘海/胶囊重叠 */
body.page-game.m3-mp-webview .game-page {
  padding-top: max(6px, env(safe-area-inset-top));
  box-sizing: border-box;
}

body.page-home .home-back-btn:active {
  transform: scale(0.98);
}

/* 首页底部隐私政策和服务协议 */
body.page-home .home-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 16px 40px;
  gap: 8px;
  flex-wrap: wrap;
}

body.page-home .footer-link {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.6);
  text-decoration: none;
  transition: color 0.2s;
}

body.page-home .footer-link:hover {
  color: rgba(0, 0, 0, 0.8);
}

body.page-home .footer-divider {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.3);
}

/* 通用底部隐私政策和服务协议样式（所有页面） */
.home-footer,
.footer-links {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 16px;
  gap: 8px;
  flex-wrap: wrap;
}

.footer-link {
  font-size: 12px;
  color: #999999;
  text-decoration: none;
}

.footer-divider {
  font-size: 12px;
  color: #cccccc;
}

body.page-home .main-header.main-header--home .title-hero-wrap {
  isolation: isolate;
  /* Logo 字标：微倾斜 + 轻浮动，增强品牌感 */
  transform: skewX(-2.5deg);
  transform-origin: center;
  animation: title-logo-float 3.2s ease-in-out infinite;
}

@keyframes title-logo-float {
  0%,
  100% {
    transform: skewX(-2.5deg) translateY(0);
  }
  50% {
    transform: skewX(-2.5deg) translateY(-3px);
  }
}

/* 加载页同款字标倾斜（无浮动，避免干扰读条） */
.boot-loader .title-hero-wrap--boot {
  transform: skewX(-2.5deg);
  transform-origin: center;
}

body.page-home .main-header.main-header--home .game-title--hero {
  position: relative;
  z-index: 1;
  font-family: "STKaiti", "KaiTi", "Kaiti SC", "Songti SC", serif;
  font-weight: 800;
  letter-spacing: 0.12em;
  background: linear-gradient(
    95deg,
    #fff16e 0%,
    #ff9a00 18%,
    #ff3a6f 40%,
    #d432ff 62%,
    #3ed6ff 84%,
    #5fffc2 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.95px rgba(38, 8, 52, 0.86);
  padding-top: 2px;
  padding-bottom: 12px;
  /* Logo 风艺术字：粗描边 + 霓虹外光 + 下压阴影 */
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92),
    0 0 14px rgba(255, 56, 178, 0.86),
    0 0 28px rgba(47, 213, 255, 0.7),
    0 6px 0 rgba(96, 16, 132, 0.54),
    0 12px 22px rgba(9, 6, 22, 0.58);
  animation: title-logo-glow 2.6s ease-in-out infinite;
}

/* 字标底部装饰线（类似 Logo 下划线徽章） */
body.page-home .main-header.main-header--home .game-title--hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: min(88%, 260px);
  height: 5px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255, 58, 111, 0.2) 0%,
    #ff3a6f 18%,
    #d432ff 50%,
    #3ed6ff 78%,
    rgba(62, 214, 255, 0.25) 100%
  );
  box-shadow:
    0 0 14px rgba(255, 56, 178, 0.55),
    0 2px 8px rgba(40, 10, 70, 0.35);
  pointer-events: none;
}

@keyframes title-logo-glow {
  0%,
  100% {
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.92),
      0 0 10px rgba(255, 56, 178, 0.62),
      0 0 22px rgba(47, 213, 255, 0.55),
      0 6px 0 rgba(96, 16, 132, 0.54),
      0 12px 22px rgba(9, 6, 22, 0.58);
  }
  50% {
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.92),
      0 0 22px rgba(255, 56, 178, 0.98),
      0 0 40px rgba(47, 213, 255, 0.88),
      0 6px 0 rgba(96, 16, 132, 0.54),
      0 12px 22px rgba(9, 6, 22, 0.58);
  }
}

/**
 * 标题以外的全部按钮区：整体上移，贴近背景插画。
 * 固定 -210px 在窄屏/矮屏会把「开始小程序」以下区域顶出视口，且与标题叠层时盖住字标。
 * 用 clamp 随视口收缩上移量；叠层时标题区 z-index 更高（见 .main-header--home）。
 */
body.page-home .home-buttons-stack {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-top: clamp(-210px, calc(140px - 28vh), -20px);
}

body.page-home .home-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
}

body.page-home .start-wrap {
  margin-top: 0;
  flex-shrink: 0;
  padding-top: 20px;
  padding-bottom: 4px;
}

body.page-home .hint-text {
  color: #7b8794;
  padding-bottom: max(4px, env(safe-area-inset-bottom));
  line-height: 1.35;
}

/* —— 首页进入：3 秒加载条 —— */
.boot-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: url("../assets/home-scene.png") center / cover no-repeat;
  transition:
    opacity 0.42s ease,
    visibility 0.42s ease;
}

.boot-loader--hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.boot-loader__box {
  width: min(320px, 100%);
  text-align: center;
  padding: 16px 16px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.boot-loader__title {
  margin: 0 0 20px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: linear-gradient(90deg, #e91e8c, #9c27b0, #ff9800);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.boot-loader__title--hero {
  margin: 0 0 20px;
  font-size: clamp(1.65rem, 6.2vw, 2.15rem);
  letter-spacing: 0.13em;
  font-family: "STKaiti", "KaiTi", "Kaiti SC", "Songti SC", serif;
  font-weight: 800;
  background: linear-gradient(
    95deg,
    #fff16e 0%,
    #ff9a00 18%,
    #ff3a6f 40%,
    #d432ff 62%,
    #3ed6ff 84%,
    #5fffc2 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.75px rgba(42, 8, 58, 0.78);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.88),
    0 0 12px rgba(255, 70, 181, 0.72),
    0 0 24px rgba(50, 204, 255, 0.58),
    0 5px 0 rgba(88, 14, 118, 0.46),
    0 10px 18px rgba(10, 6, 24, 0.52);
}

.title-hero-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  body.page-home .main-header.main-header--home .title-hero-wrap {
    animation: none;
    transform: skewX(-2.5deg);
  }

  body.page-home .main-header.main-header--home .game-title--hero {
    animation: none;
  }
}

.boot-loader__track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(44, 62, 80, 0.1);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

.boot-loader__bar {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e91e8c, #9c27b0, #ff9800);
  box-shadow: 0 0 12px rgba(156, 39, 176, 0.35);
}

.boot-loader__pct {
  margin: 12px 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #7f8c8d;
  letter-spacing: 0.04em;
}

/* —— 主页面 —— */
.main-header {
  text-align: center;
  padding: 10px 0 6px;
}

.logo-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.logo-wrap--title-only {
  gap: 0;
  width: 100%;
  justify-content: center;
}

.game-logo {
  width: 88px;
  height: 88px;
  border-radius: 22px;
  background: linear-gradient(135deg, #ff6b9d, #c471ed, #ffc857);
  box-shadow: 0 8px 24px rgba(196, 113, 237, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
}

.game-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: linear-gradient(90deg, #e91e8c, #9c27b0, #ff9800);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.game-title--hero {
  font-size: clamp(1.9rem, 8.5vw, 2.55rem);
  letter-spacing: 0.12em;
  line-height: 1.18;
  padding: 6px 0 2px;
}

.subtitle {
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: #7f8c8d;
}

.section-label {
  margin: 20px 0 10px;
  font-size: 0.75rem;
  color: #95a5a6;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* 关卡进度按钮 */
.level-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.level-btn {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
  text-align: left;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

.level-btn::after {
  content: "";
  position: absolute;
  top: -25%;
  left: -45%;
  width: 32%;
  height: 150%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.18) 35%,
    rgba(255, 255, 255, 0.62) 50%,
    rgba(255, 255, 255, 0.18) 65%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  animation: level-btn-shine 2.4s ease-in-out infinite;
  pointer-events: none;
}

.level-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.level-btn--1 {
  background: linear-gradient(90deg, #ff758c, #ff7eb3);
}

.level-btn--2 {
  background: linear-gradient(90deg, #a18cd1, #fbc2eb);
}

.level-btn--3 {
  background: linear-gradient(90deg, #fa709a, #fee140);
}

.level-btn__label {
  flex: 1;
}

.level-btn__select {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.level-btn__ring {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  box-sizing: border-box;
}

.level-btn__check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0);
  transition:
    color 0.15s ease,
    transform 0.15s ease;
  transform: scale(0.85);
}

.level-btn.selected .level-btn__ring {
  border-color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.22);
}

.level-btn.selected .level-btn__check {
  color: #fff;
  transform: scale(1);
}

.level-btn.selected {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 4px 16px rgba(0, 0, 0, 0.12);
}

.level-btn.selected::after,
.level-btn.locked::after {
  animation: none;
  opacity: 0;
}

.level-btn.locked {
  opacity: 0.45;
  cursor: pointer;
  filter: grayscale(0.35);
}

@keyframes level-btn-shine {
  0% {
    left: -45%;
  }
  55% {
    left: 115%;
  }
  100% {
    left: 115%;
  }
}

.level-btn .badge {
  font-size: 0.7rem;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
}

.level-btn.locked .level-btn__label,
.level-btn.locked .level-btn__select {
  opacity: 0.22;
  pointer-events: none;
}

/* 首页：3D萌宠 / 3D美食 锁定态用粉红字，便于辨认；解锁后无 .locked 即恢复 */
body.page-home .level-btn.locked[data-key="pet"],
body.page-home .level-btn.locked[data-key="life"] {
  opacity: 0.96;
  filter: grayscale(0.1);
}

body.page-home .level-btn.locked[data-key="pet"] .level-btn__label,
body.page-home .level-btn.locked[data-key="life"] .level-btn__label {
  opacity: 1;
  color: #fff;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.5),
    0 1px 3px rgba(0, 0, 0, 0.5);
}

body.page-home .level-btn.locked[data-key="pet"] .level-btn__select,
body.page-home .level-btn.locked[data-key="life"] .level-btn__select {
  opacity: 0.38;
}

.level-btn .lock-icon {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* 首页：碎冰解锁下一主题（全屏短暂动画） */
.home-ice-shatter {
  position: fixed;
  inset: 0;
  z-index: 12000;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 30% 40%,
      rgba(255, 255, 255, 0.55) 0%,
      transparent 45%
    ),
    radial-gradient(
      circle at 70% 55%,
      rgba(200, 240, 255, 0.5) 0%,
      transparent 50%
    ),
    linear-gradient(
      160deg,
      rgba(180, 230, 255, 0.35) 0%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(200, 220, 255, 0.25) 100%
    );
  animation: home-ice-shatter-pop 0.58s ease-out forwards;
}

.home-ice-shatter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -18deg,
    transparent,
    transparent 6px,
    rgba(255, 255, 255, 0.12) 6px,
    rgba(255, 255, 255, 0.12) 7px
  );
  opacity: 0.85;
  animation: home-ice-shatter-crack 0.5s ease-out forwards;
}

@keyframes home-ice-shatter-pop {
  0% {
    opacity: 0;
    transform: scale(1.06);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes home-ice-shatter-crack {
  0% {
    transform: scale(1.1) rotate(0deg);
    opacity: 0.6;
  }
  100% {
    transform: scale(1) rotate(2deg);
    opacity: 0;
  }
}

/* 点击锁定主题时，在按钮上方短暂提示 */
.lock-tip-toast {
  position: fixed;
  z-index: 10000;
  max-width: min(92vw, 300px);
  padding: 10px 14px;
  box-sizing: border-box;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.45;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  background: rgba(20, 22, 28, 0.92);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -100%);
  pointer-events: none;
}

/* 全服榜 + 签到（同一行） */
.action-row {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}

.action-row .half-btn {
  flex: 1;
  min-width: 0;
  padding: 14px;
  border: none;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.action-row--dual .half-btn {
  padding: 14px 10px;
  font-size: 0.92rem;
}

body.page-home .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
}

body.page-home .is-jiggle {
  animation: home-btn-jiggle 1.05s ease-in-out infinite;
}

@keyframes home-btn-jiggle {
  0%,
  100% {
    transform: rotate(-8deg) translateY(0);
  }
  25% {
    transform: rotate(8deg) translateY(-1px);
  }
  50% {
    transform: rotate(-6deg) translateY(0);
  }
  75% {
    transform: rotate(6deg) translateY(-1px);
  }
}

.action-row .half-btn:active {
  opacity: 0.92;
}

.btn-rank {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.btn-sign {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}

/* 开始小程序 */
.start-wrap {
  margin-top: auto;
  padding-top: 28px;
}

.btn-start {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 999px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(90deg, #11998e, #38ef7d);
  box-shadow: 0 6px 20px rgba(17, 153, 142, 0.4);
}

.btn-start:active {
  transform: scale(0.99);
}

.btn-start:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.hint-text {
  margin-top: 12px;
  text-align: center;
  font-size: 0.75rem;
  color: #95a5a6;
}


/* —— 小程序页 —— */
.game-page {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 12px
    calc(18px + max(12px, env(safe-area-inset-bottom)));
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.game-topbar {
  display: none !important;
}

.btn-back {
  padding: 8px 12px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  -webkit-tap-highlight-color: transparent;
}

/* 棋盘工具栏内返回：与得分条同排 */
.board-toolbar .btn-back {
  flex-shrink: 0;
}

.game-meta {
  flex: 1;
  text-align: center;
}

.game-meta .level-name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.game-meta .stats {
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: #7f8c8d;
}

.tier-pill {
  margin: 6px 0 0;
  font-size: 0.68rem;
  font-weight: 600;
  color: #8e44ad;
  letter-spacing: 0.04em;
}

.game-functions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 8px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.82),
    rgba(255, 250, 240, 0.38)
  );
  border-radius: 14px;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow: 0 2px 12px rgba(170, 150, 120, 0.07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.tool-btn {
  padding: 8px 14px;
  border: none;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #5d4e75;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.tool-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.board-wrap {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  padding: 6px 0 0;
  margin-top: 0;
  min-height: 0;
  gap: 8px;
}

.board-toolbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  width: min(92vw, 360px);
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.board-toolbar__center {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* 棋盘旁 · 道具入口（背包内见炸弹 / 步数道具） */
.board-items-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 8px 12px;
  border: 2px solid rgba(70, 130, 55, 0.45);
  border-radius: 10px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95),
    rgba(230, 248, 225, 0.88)
  );
  font-size: 0.88rem;
  font-weight: 800;
  color: #2e6b32;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(40, 90, 35, 0.12);
  -webkit-tap-highlight-color: transparent;
}

.board-items-btn__dot {
  position: absolute;
  top: 3px;
  right: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e53935;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.board-items-btn__dot[hidden] {
  display: none !important;
}

/* 盘面道具收入背包：飞向「道具」按钮 */
.pickup-fly-to-bag {
  position: fixed;
  z-index: 12000;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  margin-top: -22px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.38));
  transition:
    transform 0.54s cubic-bezier(0.22, 0.82, 0.24, 1),
    opacity 0.52s ease;
  transform: translate(0, 0) scale(1);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .pickup-fly-to-bag {
    transition-duration: 0.01ms !important;
  }
}

.board-items-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.board-items-btn:active:not(:disabled) {
  transform: scale(0.97);
}

/* 道具背包 */
.items-bag-overlay {
  position: fixed;
  inset: 0;
  z-index: 11500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20, 35, 25, 0.48);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.items-bag-overlay[hidden] {
  display: none !important;
}

.items-bag-panel {
  width: min(340px, 100%);
  max-height: min(86vh, 520px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px 16px 14px;
  border-radius: 14px;
  background: linear-gradient(165deg, #f8fff5 0%, #e8f6e0 100%);
  border: 2px solid rgba(90, 150, 70, 0.45);
  box-shadow: 0 12px 40px rgba(30, 60, 25, 0.28);
  pointer-events: auto;
}

.items-bag-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.items-bag-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: #1b5e20;
}

.items-bag-close {
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.85rem;
  font-weight: 700;
  color: #2e6b32;
  cursor: pointer;
}

.items-bag-scroll-wrap {
  width: 100%;
  --bag-slot-w: calc((100% - 20px) / 3);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(90, 150, 70, 0.45) transparent;
  padding-bottom: 6px;
  margin: 0 -2px;
}

.items-bag-scroll-wrap::-webkit-scrollbar {
  height: 6px;
}

.items-bag-scroll-wrap::-webkit-scrollbar-thumb {
  background: rgba(90, 150, 70, 0.45);
  border-radius: 4px;
}

.items-bag-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 2px 4px 0;
  width: max-content;
  box-sizing: border-box;
}

.items-bag-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  box-sizing: border-box;
  flex: 0 0 var(--bag-slot-w);
  width: var(--bag-slot-w);
  min-width: var(--bag-slot-w);
  max-width: var(--bag-slot-w);
  min-height: 108px;
  padding: 8px 6px 6px;
  border: 2px solid rgba(90, 150, 70, 0.35);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.items-bag-slot--bomb {
  background: linear-gradient(
    165deg,
    #ffebee 0%,
    #f8bbd0 42%,
    #ef9a9a 100%
  );
  border-color: rgba(183, 28, 28, 0.48);
}

.items-bag-slot--bomb .items-bag-slot__name {
  color: #b71c1c;
}

.items-bag-slot--step {
  background: linear-gradient(
    165deg,
    #e8f5e9 0%,
    #a5d6a7 45%,
    #66bb6a 100%
  );
  border-color: rgba(27, 94, 32, 0.5);
}

.items-bag-slot--step .items-bag-slot__name {
  color: #0d3d12;
}

.items-bag-slot--fairy,
.items-bag-slot--stampede {
  background: linear-gradient(
    165deg,
    #ffe0b2 0%,
    #ffb74d 45%,
    #fb8c00 100%
  );
  border-color: rgba(230, 81, 0, 0.55);
}

.items-bag-slot--fairy .items-bag-slot__name,
.items-bag-slot--stampede .items-bag-slot__name {
  color: #bf360c;
}

.items-bag-slot:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.items-bag-slot__img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  pointer-events: none;
}

.items-bag-slot__badge {
  position: absolute;
  right: 4px;
  top: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 18px;
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, #ff7043, #e65100);
  border: 1px solid rgba(120, 40, 0, 0.35);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.items-bag-slot__name {
  font-size: 0.68rem;
  font-weight: 700;
  color: #33691e;
  text-align: center;
  line-height: 1.2;
}

.items-bag-slot__img--fairy {
  border-radius: 10px;
  object-fit: cover;
}

/* 仙女下凡 · 全屏演出（仅水果关道具） */
.fairy-descent-overlay {
  position: fixed;
  inset: 0;
  z-index: 120000;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(8, 12, 18, 0.12);
}

.fairy-descent-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-115vh) scale(0.38);
  opacity: 0.92;
  transition:
    transform 1.65s cubic-bezier(0.2, 0.95, 0.28, 1),
    opacity 0.35s ease;
}

.fairy-descent-stage--enter {
  transform: translateY(0) scale(1.02);
  opacity: 1;
}

.fairy-descent-stage--landed {
  transform: translateY(0) scale(1);
}

.fairy-descent-sway {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fairy-clothes 2.6s ease-in-out infinite;
}

.fairy-descent-img {
  width: 100%;
  height: 100%;
  max-height: 100vh;
  object-fit: cover;
  object-position: center 18%;
  pointer-events: none;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.38));
}

.fairy-descent-img--alive {
  animation: fairy-blink 3.1s ease-in-out infinite;
}

.fairy-descent-overlay--basket-drop {
  background: rgba(8, 12, 18, 0.05);
  transition: background 0.38s ease;
}

.fairy-descent-overlay--basket-drop .fairy-descent-stage {
  opacity: 0.38;
  transform: translateY(0) scale(0.88);
  transition:
    opacity 0.38s ease,
    transform 0.38s ease;
}

.fairy-basket-drop-layer {
  position: fixed;
  inset: 0;
  z-index: 121050;
  pointer-events: none;
}

.fairy-basket-drop-fly {
  display: block;
  object-fit: contain;
}

.fairy-descent-overlay--out {
  opacity: 0;
  transition: opacity 0.45s ease;
}

@keyframes fairy-clothes {
  0%,
  100% {
    transform: rotate(-0.9deg) translateY(0);
  }
  50% {
    transform: rotate(0.9deg) translateY(-5px);
  }
}

@keyframes fairy-blink {
  0%,
  92%,
  100% {
    filter: brightness(1) drop-shadow(0 12px 28px rgba(0, 0, 0, 0.38));
  }
  96% {
    filter: brightness(0.35) drop-shadow(0 12px 28px rgba(0, 0, 0, 0.38));
  }
}

/* 萌宠 · 万马奔腾（签到道具） */
.pet-stampede-overlay {
  position: fixed;
  inset: 0;
  z-index: 120000;
  pointer-events: none;
  overflow: hidden;
  background: rgba(10, 16, 24, 0.07);
  opacity: 1;
}

.pet-stampede-overlay--go .pet-stampede-horse--ltr {
  animation: pet-stampede-ltr 2.55s linear forwards;
}

.pet-stampede-overlay--go .pet-stampede-horse--rtl {
  animation: pet-stampede-rtl 2.55s linear forwards;
}

.pet-stampede-horse--ltr {
  position: absolute;
  left: -32vw;
  width: min(22vmin, 108px);
  height: auto;
  object-fit: contain;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.36));
}

.pet-stampede-horse--rtl {
  position: absolute;
  right: -32vw;
  width: min(22vmin, 108px);
  height: auto;
  object-fit: contain;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.36));
}

@keyframes pet-stampede-ltr {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(100vw + 60vw), 0, 0);
  }
}

/* 原图朝右：从右侧出发向左跑时水平翻转，与行进方向一致 */
@keyframes pet-stampede-rtl {
  from {
    transform: translate3d(0, 0, 0) scaleX(-1);
  }
  to {
    transform: translate3d(calc(-100vw - 60vw), 0, 0) scaleX(-1);
  }
}

.pet-stampede-overlay--out {
  opacity: 0;
  transition: opacity 0.38s ease;
}

.items-bag-slot__img--stampede {
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .fairy-descent-sway,
  .fairy-descent-img--alive {
    animation: none;
  }
  .pet-stampede-overlay--go .pet-stampede-horse--ltr,
  .pet-stampede-overlay--go .pet-stampede-horse--rtl {
    animation-duration: 0.01s;
  }
}

/* 稀有道具使用确认（仙女下凡 / 万马奔腾等） */
.item-use-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 130000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(12, 28, 18, 0.48);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.item-use-confirm-overlay[hidden] {
  display: none !important;
}

.item-use-confirm-panel {
  width: min(320px, 100%);
  padding: 18px 18px 16px;
  border-radius: 14px;
  background: #fff;
  border: 3px solid #2e7d32;
  box-shadow: 0 12px 36px rgba(27, 94, 32, 0.22);
}

.item-use-confirm-title {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 800;
  color: #1b5e20;
  text-align: center;
}

.item-use-confirm-text {
  margin: 0 0 16px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #2e7d32;
  text-align: center;
}

.item-use-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.item-use-confirm-btn {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
}

.item-use-confirm-btn--cancel {
  background: #fff;
  color: #33691e;
  border: 2px solid #81c784;
}

.item-use-confirm-btn--ok {
  background: linear-gradient(180deg, #43a047, #2e7d32);
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(46, 125, 50, 0.35);
}

/* 步数用尽 · 是否用道具（与道具确认同系：绿框白底绿字） */
.lose-item-prompt-overlay {
  position: fixed;
  inset: 0;
  z-index: 11600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(12, 28, 18, 0.48);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.lose-item-prompt-overlay[hidden] {
  display: none !important;
}

.lose-item-prompt-panel {
  width: min(320px, 100%);
  padding: 18px 18px 16px;
  border-radius: 14px;
  background: #fff;
  border: 3px solid #2e7d32;
  box-shadow: 0 12px 36px rgba(27, 94, 32, 0.22);
}

.lose-item-prompt-title {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 800;
  color: #1b5e20;
  text-align: center;
}

.lose-item-prompt-text {
  margin: 0 0 16px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #2e7d32;
}

.lose-item-prompt-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.lose-item-prompt-btn {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
}

.lose-item-prompt-btn--cancel {
  background: #fff;
  color: #33691e;
  border: 2px solid #81c784;
}

.lose-item-prompt-btn--ok {
  background: linear-gradient(180deg, #43a047, #2e7d32);
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(46, 125, 50, 0.35);
}

.board.board--bomb-mode {
  outline: 3px dashed rgba(255, 152, 0, 0.75);
  outline-offset: 2px;
  border-radius: 12px;
}

.bomb-drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  width: 56px;
  height: 56px;
  z-index: 20050;
  pointer-events: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}

.cell.cell--bomb-flash {
  animation: cell-bomb-burst 0.32s ease-out forwards;
  z-index: 5;
}

/* 通关前：剩余步数转化的炸弹落点预览 */
.cell.cell--bonus-bomb-marker {
  position: relative;
  z-index: 6;
}

.cell.cell--bonus-bomb-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52%;
  height: 52%;
  transform: translate(-50%, -50%);
  background: url("../assets/item-bomb.png") center / contain no-repeat;
  pointer-events: none;
  z-index: 8;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
  animation: bonus-bomb-marker-pulse 0.55s ease-in-out infinite;
}

@keyframes bonus-bomb-marker-pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.92);
    opacity: 0.92;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.06);
    opacity: 1;
  }
}

@keyframes cell-bomb-burst {
  0% {
    box-shadow: inset 0 0 0 0 rgba(255, 200, 80, 0);
    filter: brightness(1);
  }
  40% {
    box-shadow:
      inset 0 0 22px 8px rgba(255, 220, 100, 0.95),
      0 0 18px 6px rgba(255, 120, 40, 0.65);
    filter: brightness(1.35);
  }
  100% {
    box-shadow: inset 0 0 0 0 rgba(255, 200, 80, 0);
    filter: brightness(1);
  }
}

/* 通关剩余步数：光束射向格子 → 炸弹齐爆（加强） */
.bonus-bomb-beam-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9600;
}

.bonus-bomb-beam {
  position: absolute;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgba(255, 248, 200, 0.15),
    rgba(255, 220, 100, 0.95),
    rgba(255, 255, 255, 0.98),
    rgba(255, 180, 60, 0.9)
  );
  box-shadow:
    0 0 16px rgba(255, 200, 80, 0.95),
    0 0 28px rgba(255, 140, 40, 0.65);
  transition: width 0.38s cubic-bezier(0.22, 0.82, 0.24, 1);
}

.bonus-bomb-beam-hit {
  position: absolute;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  margin-top: -14px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 220, 100, 0.75) 45%,
    rgba(255, 140, 40, 0) 70%
  );
  animation: bonus-bomb-beam-hit-pop 0.45s ease-out forwards;
  pointer-events: none;
}

@keyframes bonus-bomb-beam-hit-pop {
  0% {
    transform: scale(0.35);
    opacity: 0.9;
  }
  70% {
    transform: scale(1.25);
    opacity: 1;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

.cell.cell--bomb-flash.cell--bomb-flash--bonus {
  animation: cell-bomb-burst-bonus 0.52s ease-out forwards;
  z-index: 7;
}

@keyframes cell-bomb-burst-bonus {
  0% {
    box-shadow: inset 0 0 0 0 rgba(255, 220, 120, 0);
    filter: brightness(1) saturate(1);
    transform: scale(1);
  }
  35% {
    box-shadow:
      inset 0 0 32px 14px rgba(255, 235, 160, 0.98),
      0 0 28px 12px rgba(255, 160, 40, 0.85),
      0 0 48px 20px rgba(255, 100, 40, 0.45);
    filter: brightness(1.55) saturate(1.2);
    transform: scale(1.04);
  }
  100% {
    box-shadow: inset 0 0 0 0 rgba(255, 220, 120, 0);
    filter: brightness(1) saturate(1);
    transform: scale(1);
  }
}

.board-settings-btn {
  flex-shrink: 0;
  padding: 6px 12px;
  min-width: 0;
  min-height: 36px;
  border: 1px solid rgba(70, 130, 55, 0.45);
  border-radius: 10px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95),
    rgba(230, 248, 225, 0.88)
  );
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.25;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(40, 90, 35, 0.12);
  color: #2e6b32;
  -webkit-tap-highlight-color: transparent;
}

.board-settings-btn:active {
  transform: scale(0.96);
}

/* 果园局：工具栏按钮与「得分」同系薄荷胶囊（与棋盘同宽栅格） */
body.page-game:not(.page-game--pet):not(.page-game--life) .board-toolbar .btn-back,
body.page-game:not(.page-game--pet):not(.page-game--life)
  .board-toolbar
  .board-settings-btn {
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 800;
  color: #1a4a1f;
  background: linear-gradient(
    145deg,
    rgba(210, 238, 200, 0.92),
    rgba(175, 215, 155, 0.65)
  );
  border: 1px solid rgba(70, 130, 55, 0.35);
  box-shadow: 0 2px 10px rgba(40, 90, 35, 0.12);
}

body.page-game:not(.page-game--pet):not(.page-game--life)
  .board-toolbar
  .board-items-btn {
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
}

/* 美食局：工具栏与得分条无背板，字与描边叠在底图上 */
body.page-game--life .board-score-hud {
  background: rgba(86, 170, 92, 0.88);
  border: 2px solid rgba(240, 252, 240, 0.9);
  box-shadow: 0 2px 12px rgba(26, 88, 42, 0.26);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* 美食局：顶栏与底栏按钮统一为半透明白 + 描边 + 轻磨砂，保证对比度一致 */
body.page-game--life .board-items-btn,
body.page-game--life .board-toolbar .btn-back,
body.page-game--life .board-toolbar .board-settings-btn,
body.page-game--life .game-dock__btn {
  background: rgba(86, 170, 92, 0.88);
  border: 2px solid rgba(240, 252, 240, 0.9);
  color: #fff;
  box-shadow: 0 2px 14px rgba(26, 88, 42, 0.26);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: 999px;
}

body.page-game--life #statsLifeWrap .stats-sep {
  display: none;
}

body.page-game--life #statsLifeWrap > span:last-child {
  display: none;
}

body.page-game--life .board-items-btn,
body.page-game--life .board-toolbar .btn-back,
body.page-game--life .board-toolbar .board-settings-btn {
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1.25;
  min-height: 0;
  width: auto;
  height: auto;
}

body.page-game--life .game-dock__btn {
  padding: 10px 20px;
  font-size: 0.95rem;
  font-weight: 700;
  min-width: 120px;
}

body.page-game--life .board {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 2px;
}

body.page-game--life .board::before {
  display: none;
}

body.page-game--life .cell {
  background: rgba(66, 146, 74, 0.88);
  box-shadow:
    inset 0 0 0 1px rgba(234, 251, 235, 0.9),
    inset 0 -1px 3px rgba(20, 74, 34, 0.36);
}

body.page-game--life .cell--empty {
  background: rgba(86, 170, 94, 0.92) !important;
  box-shadow:
    inset 0 0 0 1px rgba(240, 252, 240, 0.92),
    inset 0 -1px 3px rgba(20, 74, 34, 0.32);
}

body.page-game--life .fruit-skin {
  background: transparent !important;
}

body.page-game--life .fruit-glass {
  opacity: 0;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

body.page-game--life .fruit-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.page-game.page-game--life .game-bottom {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* [hidden] 须压过 display:flex，否则默认隐藏失效、关不掉 */
.game-settings-overlay[hidden] {
  display: none !important;
  pointer-events: none;
  visibility: hidden;
}

.game-settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 35, 25, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.game-settings-panel {
  pointer-events: auto;
  width: min(300px, 100%);
  padding: 20px 20px 16px;
  border-radius: 14px;
  background: linear-gradient(165deg, #f8fff5 0%, #e8f6e0 100%);
  border: 2px solid rgba(90, 150, 70, 0.45);
  box-shadow: 0 12px 40px rgba(30, 60, 25, 0.25);
}

.game-settings-title {
  margin: 0 0 16px;
  font-size: 1.1rem;
  font-weight: 800;
  color: #1a4a1f;
  text-align: center;
}

.game-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #2d5c32;
  cursor: pointer;
}

.game-settings-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: #43a047;
  cursor: pointer;
}

.game-settings-close {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(180deg, #66bb6a, #43a047);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(40, 90, 35, 0.25);
}

.game-settings-close:active {
  transform: scale(0.98);
}

.board-stage {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}

.board-stage > .board {
  flex-shrink: 0;
}

/* 消除得分飘字（挂在 board-wrap 上，相对棋盘定位） */
.score-float {
  position: absolute;
  z-index: 25;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  text-align: center;
  animation: score-float-up 1s ease-out forwards;
}

.score-float__val {
  display: block;
  font-size: clamp(0.75rem, 3.2vw, 1rem);
  font-weight: 900;
  color: #fff;
  text-shadow:
    0 0 4px rgba(255, 60, 120, 0.95),
    0 1px 2px rgba(0, 0, 0, 0.45);
}

.score-float__cb {
  display: block;
  margin-top: 2px;
  font-size: clamp(0.58rem, 2.4vw, 0.72rem);
  font-weight: 800;
  color: #ffe066;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* 单次多连（≥4）额外分：深红飘字，与基础分错开 */
.score-float--longbonus {
  z-index: 26;
}

.score-float__val--bonus {
  color: #7f1d1d;
  text-shadow:
    0 0 2px rgba(255, 240, 240, 0.9),
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 0 8px rgba(180, 30, 30, 0.35);
}

@keyframes score-float-up {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.65);
  }
  20% {
    transform: translate(-50%, -65%) scale(1.08);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -160%) scale(0.92);
  }
}

.board-score-hud {
  position: relative;
  top: auto;
  left: auto;
  z-index: 5;
  flex-shrink: 0;
  align-self: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 800;
  color: #2c3e50;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

.board-hint-hud {
  position: absolute;
  top: 4px;
  right: 8px;
  z-index: 5;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #6c3483;
  background: rgba(255, 245, 255, 0.92);
  box-shadow: 0 2px 10px rgba(108, 52, 131, 0.12);
  pointer-events: none;
}

.board {
  touch-action: none;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 0;
  width: min(92vw, 360px);
  aspect-ratio: 1;
  padding: 4px;
  background: linear-gradient(152deg, #c5e86b 0%, #9ccc65 38%, #7cb342 72%, #6aad2f 100%);
  border-radius: 10px;
  border: 3px solid #5d8c1e;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 2px 8px rgba(50, 90, 25, 0.12),
    0 6px 22px rgba(45, 85, 30, 0.2);
}

/* 水波纹：绝对定位不参与 grid 占位，铺在格底、格子在上层 */
.board::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 95% 85% at 30% 36%,
      transparent 0,
      transparent 16%,
      rgba(255, 255, 255, 0.11) 17%,
      transparent 19%,
      transparent 30%,
      rgba(255, 255, 255, 0.07) 31%,
      transparent 33%,
      transparent 44%,
      rgba(255, 255, 255, 0.045) 45%,
      transparent 48%
    ),
    radial-gradient(
      ellipse 100% 90% at 72% 64%,
      transparent 0,
      transparent 14%,
      rgba(255, 255, 255, 0.09) 15%,
      transparent 17%,
      transparent 26%,
      rgba(255, 255, 255, 0.055) 27%,
      transparent 29%
    ),
    radial-gradient(
      ellipse 120% 100% at 48% 108%,
      rgba(50, 90, 25, 0.1) 0%,
      transparent 50%
    );
  background-size: 100% 100%, 100% 100%, 100% 100%;
  animation: board-ripple-drift 10s ease-in-out infinite, board-ripple-breathe 5.5s ease-in-out infinite;
}

@keyframes board-ripple-drift {
  0%,
  100% {
    background-position: 0% 0%, 0% 0%, 0% 0%;
  }
  50% {
    background-position: 3% 2%, -2% 3%, 1% -2%;
  }
}

@keyframes board-ripple-breathe {
  0%,
  100% {
    opacity: 0.82;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.018);
  }
}

.board.board--dynamic {
  grid-template-columns: repeat(var(--cols, 8), 1fr);
  grid-template-rows: repeat(var(--rows, 8), 1fr);
}

.board--s9 {
  width: min(94vw, 380px);
  gap: 0;
}

.board--s10 {
  width: min(96vw, 400px);
  gap: 0;
}

.board--s12 {
  width: min(98vw, 420px);
  gap: 0;
}

/* 盘面道具：步数+5 / 炸弹（消除累计分达标后随机落在格子上） */
.cell-pickup {
  position: absolute;
  right: 5%;
  top: 5%;
  width: 40%;
  max-width: 34px;
  z-index: 10;
  pointer-events: none;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
  animation: cell-pickup-pulse 0.95s ease-in-out infinite;
}

.cell-pickup--bomb {
  top: auto;
  bottom: 5%;
  width: 38%;
  max-width: 32px;
}

.cell-pickup__img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

@keyframes cell-pickup-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.07);
    opacity: 0.92;
  }
}

.cell {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.65rem, 3.5vw, 1.1rem);
  user-select: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}

.cell:active {
  transform: scale(0.95);
}

/* 可消提示：仅中心缩放「呼吸」；禁用 transition，避免与 animation 同抢 transform 产生抖动 */
.cell--hint {
  z-index: 4;
  transform-origin: center center;
  transition: none !important;
  animation: cell-hint-breathe 2.8s ease-in-out infinite;
  box-shadow:
    0 0 0 2px rgba(255, 214, 120, 0.9),
    0 0 12px rgba(255, 180, 60, 0.42);
}

/* 刚补位的格子仍带 cell--fall-in，会与提示抢 animation（表现为一格呼吸、一格仍下落） */
.cell.cell--fall-in.cell--hint {
  animation: cell-hint-breathe 2.8s ease-in-out infinite;
  animation-fill-mode: none;
  transform-origin: center center;
  z-index: 4;
  box-shadow:
    0 0 0 2px rgba(255, 214, 120, 0.9),
    0 0 12px rgba(255, 180, 60, 0.42);
}

@keyframes cell-hint-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.055);
  }
}

.cell--empty {
  background: rgba(40, 40, 45, 0.12) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.08);
}

.cell--void {
  opacity: 0;
  pointer-events: none;
  box-shadow: none !important;
}

.cell--pop {
  animation: cell-pop 0.22s ease-out forwards;
}

@keyframes cell-pop {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  40% {
    transform: scale(1.12);
    opacity: 0.85;
  }
  100% {
    transform: scale(0.4);
    opacity: 0;
  }
}

/* 重力下落 / 新块补位：自上方滑入 */
.cell.cell--fall-in {
  animation-name: cell-fall-in;
  animation-timing-function: cubic-bezier(0.22, 0.82, 0.24, 1.02);
  animation-fill-mode: both;
  transition: none;
  z-index: 2;
}

@keyframes cell-fall-in {
  from {
    transform: translateY(calc(-1.38 * var(--fall-d, 1) * 100%));
    opacity: 0.82;
    filter: brightness(1.08);
  }
  70% {
    opacity: 1;
  }
  to {
    transform: translateY(0);
    opacity: 1;
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cell.cell--fall-in {
    animation: none !important;
    transform: none !important;
  }

  .cell--hint {
    animation: none !important;
    transform: none !important;
    box-shadow:
      0 0 0 2px rgba(255, 214, 120, 0.9),
      0 0 12px rgba(255, 180, 60, 0.45);
  }

  .cell.cell--fall-in.cell--hint {
    animation: none !important;
    transform: none !important;
    box-shadow:
      0 0 0 2px rgba(255, 214, 120, 0.9),
      0 0 12px rgba(255, 180, 60, 0.45);
  }
}

/* 水果占位色（框架演示） */
.cell--a { background: linear-gradient(180deg, #ff6b6b, #ee5a5a); }
.cell--b { background: linear-gradient(180deg, #feca57, #ff9f43); }
.cell--c { background: linear-gradient(180deg, #48dbfb, #0abde3); }
.cell--d { background: linear-gradient(180deg, #1dd1a1, #10ac84); }
.cell--e { background: linear-gradient(180deg, #5f27cd, #341f97); }

/* 萌宠局：元素格深绿底（种类仍由上层贴图区分） */
body.page-game--pet .cell--a,
body.page-game--pet .cell--b,
body.page-game--pet .cell--c,
body.page-game--pet .cell--d,
body.page-game--pet .cell--e {
  background: linear-gradient(180deg, #5a9a62 0%, #3d6b44 40%, #254a2c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -2px 0 rgba(8, 35, 18, 0.35);
}

body.page-game--pet .board {
  background: linear-gradient(152deg, #6aad6f 0%, #4d8f52 32%, #3a7340 68%, #2d5a32 100%);
  border-color: #1e4a24;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 2px 8px rgba(15, 45, 22, 0.2),
    0 6px 22px rgba(12, 40, 18, 0.35);
}

body.page-game--pet .board::before {
  background:
    radial-gradient(
      ellipse 95% 85% at 30% 36%,
      transparent 0,
      transparent 16%,
      rgba(255, 255, 255, 0.1) 17%,
      transparent 19%,
      transparent 30%,
      rgba(255, 255, 255, 0.06) 31%,
      transparent 33%,
      transparent 44%,
      rgba(255, 255, 255, 0.045) 45%,
      transparent 48%
    ),
    radial-gradient(
      ellipse 100% 90% at 72% 64%,
      transparent 0,
      transparent 14%,
      rgba(255, 255, 255, 0.08) 15%,
      transparent 17%,
      transparent 26%,
      rgba(255, 255, 255, 0.05) 27%,
      transparent 29%
    ),
    radial-gradient(
      ellipse 120% 100% at 48% 108%,
      rgba(25, 70, 35, 0.14) 0%,
      transparent 50%
    );
}

/* 萌宠局：冰层/厚冰改为深绿色系（与水果局浅蓝冰区分） */
body.page-game--pet .obstacle--ice {
  background: rgba(18, 62, 38, 0.55);
  box-shadow: inset 0 0 0 2px rgba(180, 235, 200, 0.45);
  backdrop-filter: blur(1px);
}

body.page-game--pet .obstacle--iceblock {
  background: linear-gradient(
    145deg,
    rgba(28, 78, 48, 0.92),
    rgba(14, 48, 30, 0.94)
  );
  box-shadow:
    inset 0 0 0 3px rgba(160, 220, 185, 0.4),
    inset 0 -4px 10px rgba(5, 28, 16, 0.45);
}

body.page-game--pet .cell--iceblock {
  background: rgba(22, 58, 36, 0.48) !important;
}

/* 3D 水果透明底 + 淡金玻璃：半透明，透出下层绿色棋盘 */
.fruit-skin {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  overflow: hidden;
  background: linear-gradient(
    155deg,
    rgba(255, 252, 248, 0.55),
    rgba(255, 244, 228, 0.28) 55%,
    rgba(255, 236, 215, 0.2)
  );
}

.fruit-glass {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    145deg,
    rgba(255, 220, 175, 0.12),
    rgba(255, 210, 165, 0.08) 50%,
    rgba(255, 200, 150, 0.06)
  );
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 235, 215, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
  z-index: 0;
  pointer-events: none;
}

/* 萌宠局：玻璃层偏深绿，与深绿盘面统一 */
body.page-game--pet .fruit-skin {
  background: linear-gradient(
    155deg,
    rgba(185, 228, 200, 0.48),
    rgba(130, 198, 155, 0.34) 52%,
    rgba(88, 165, 118, 0.24)
  );
}

body.page-game--pet .fruit-glass {
  background: linear-gradient(
    145deg,
    rgba(95, 175, 125, 0.22),
    rgba(72, 155, 105, 0.16) 50%,
    rgba(48, 128, 82, 0.12)
  );
  border: 1px solid rgba(110, 175, 135, 0.48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.fruit-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  background: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  mix-blend-mode: normal;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* 与 id 对应的水果格：同样用半透明玻璃底，避免旧版深色渐变盖住绿格 */
.fruit-skin.fruit-t9,
.fruit-skin.fruit-t10,
.fruit-skin.fruit-t11,
.fruit-skin.fruit-t12,
.fruit-skin.fruit-t13,
.fruit-skin.fruit-t14,
.fruit-skin.fruit-t15,
.fruit-skin.fruit-t16,
.fruit-skin.fruit-t17,
.fruit-skin.fruit-t18,
.fruit-skin.fruit-t19,
.fruit-skin.fruit-t20,
.fruit-skin.fruit-t21,
.fruit-skin.fruit-t22,
.fruit-skin.fruit-t23,
.fruit-skin.fruit-t24 {
  background: linear-gradient(
    155deg,
    rgba(255, 252, 248, 0.55),
    rgba(255, 244, 228, 0.28) 55%,
    rgba(255, 236, 215, 0.2)
  );
}

.obstacle {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  pointer-events: none;
  z-index: 2;
}

.obstacle--rock {
  background: linear-gradient(145deg, rgba(70, 70, 75, 0.88), rgba(45, 45, 50, 0.92));
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.12);
}

/* 水果模式：石块用随机宝石贴图（外层 .fruit-skin + .fruit-glass 与水果一致） */
.fruit-skin--rock {
  pointer-events: none;
}

.obstacle--rock-sprite {
  background: transparent;
  box-shadow: none;
}

.obstacle-rock-sprite__img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 88%;
  height: 88%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}

/* 厚冰块：PNG 贴图（逻辑 ob=iceblock，仅炸弹可消） */
.fruit-skin--iceblock {
  pointer-events: none;
}

.obstacle--iceblock.obstacle--iceblock-sprite {
  background: transparent;
  box-shadow: none;
}

.obstacle-iceblock-sprite__img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 88%;
  height: 88%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.22));
}

body.page-game--pet .obstacle--iceblock.obstacle--iceblock-sprite {
  background: transparent;
  box-shadow: none;
}

.obstacle--ice {
  background: rgba(200, 235, 255, 0.55);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(1px);
}

.obstacle--cage {
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.08) 4px,
    rgba(60, 60, 70, 0.45) 4px,
    rgba(60, 60, 70, 0.45) 7px
  );
  box-shadow: inset 0 0 0 2px rgba(90, 90, 100, 0.65);
}

.obstacle--mud {
  background: radial-gradient(circle at 28% 32%, rgba(110, 75, 40, 0.45), transparent 55%),
    radial-gradient(circle at 72% 68%, rgba(90, 60, 35, 0.35), transparent 50%);
  opacity: 0.95;
}

.obstacle--worm {
  background: radial-gradient(circle at 40% 35%, rgba(120, 85, 55, 0.55), transparent 50%),
    linear-gradient(165deg, rgba(85, 55, 35, 0.5), rgba(55, 40, 30, 0.65));
  box-shadow: inset 0 0 0 2px rgba(40, 30, 20, 0.45);
  opacity: 0.88;
}

/* 毛毛虫已用整图 PNG（与石块同款 rock-sprite），不再叠褐色底，避免格内出现灰褐块 */
.obstacle--worm.obstacle--rock-sprite {
  background: transparent;
  box-shadow: none;
  opacity: 1;
}

.obstacle--wall {
  background:
    linear-gradient(145deg, rgba(255, 245, 210, 0.9), rgba(228, 196, 132, 0.92)),
    url("../assets/life-tool-pan.png");
  background-size: cover, 72% 72%;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.55),
    inset 0 -2px 8px rgba(120, 80, 20, 0.22);
}

.obstacle--wall2 {
  background:
    linear-gradient(145deg, rgba(255, 239, 220, 0.94), rgba(220, 177, 126, 0.9)),
    url("../assets/life-tool-chopsticks.png");
  background-size: cover, 70% 70%;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.55),
    inset 0 -2px 8px rgba(115, 72, 20, 0.24);
}

.obstacle--iceblock {
  background: linear-gradient(
    145deg,
    rgba(210, 240, 255, 0.92),
    rgba(170, 215, 245, 0.88)
  );
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.95),
    inset 0 -4px 10px rgba(80, 140, 200, 0.25);
}

.cell--iceblock {
  background: rgba(200, 230, 255, 0.35) !important;
}

/* 贯穿星星：行/列光束 */
.line-beam-fx {
  position: absolute;
  inset: 0;
  z-index: 24;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.line-beam-fx__beam {
  position: absolute;
  box-sizing: border-box;
}

.line-beam-fx__beam--row {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 220, 0) 0%,
    rgba(255, 248, 160, 0.95) 42%,
    rgba(255, 220, 60, 0.88) 50%,
    rgba(255, 248, 160, 0.95) 58%,
    rgba(255, 255, 220, 0) 100%
  );
  box-shadow:
    0 0 14px rgba(255, 230, 80, 0.95),
    0 0 28px rgba(255, 200, 40, 0.55);
  animation: line-beam-pulse 0.42s ease-out forwards;
}

.line-beam-fx__beam--col {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 220, 0) 0%,
    rgba(255, 248, 160, 0.95) 42%,
    rgba(255, 220, 60, 0.88) 50%,
    rgba(255, 248, 160, 0.95) 58%,
    rgba(255, 255, 220, 0) 100%
  );
  box-shadow:
    0 0 14px rgba(255, 230, 80, 0.95),
    0 0 28px rgba(255, 200, 40, 0.55);
  animation: line-beam-pulse 0.42s ease-out forwards;
}

/* 水果篮子：全盘同类闪电线 */
.basket-lightning-layer {
  position: absolute;
  inset: 0;
  z-index: 26;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.basket-lightning-bolt {
  position: absolute;
  height: 3px;
  transform-origin: left center;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(220, 245, 255, 0.9) 16%,
    rgba(120, 220, 255, 0.96) 52%,
    rgba(210, 245, 255, 0.85) 86%,
    rgba(255, 255, 255, 0) 100%
  );
  box-shadow:
    0 0 8px rgba(120, 220, 255, 0.9),
    0 0 16px rgba(70, 170, 255, 0.55);
  animation: basket-lightning-bolt-pulse 0.22s ease-out forwards;
}

/* 萌宠小马：放大 3 倍冲击 + 轻晃屏 */
.pony-burst-fx {
  position: absolute;
  z-index: 27;
  width: min(72px, 20vw);
  height: auto;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.28));
  animation: pony-burst-zoom 0.3s ease-out forwards;
}

.game-page--shake {
  animation: game-page-shake 0.3s ease-in-out;
}

@keyframes pony-burst-zoom {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  55% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(3);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3);
  }
}

@keyframes game-page-shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

@keyframes basket-lightning-bolt-pulse {
  0% {
    opacity: 0;
    filter: brightness(1.25) blur(1px);
  }
  30% {
    opacity: 1;
    filter: brightness(1.5) blur(0);
  }
  100% {
    opacity: 0.06;
    filter: brightness(1.05);
  }
}

@keyframes line-beam-pulse {
  0% {
    opacity: 0;
    filter: brightness(1.2) blur(2px);
  }
  35% {
    opacity: 1;
    filter: brightness(1.45) blur(0);
  }
  100% {
    opacity: 0.15;
    filter: brightness(1);
  }
}

/* 与普通格同尺寸：勿加 padding，否则 fruit-skin 玻璃底会缩进、与网格不对齐 */
.cell--special-star {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* 贯穿星星：与水果共用玻璃底 + fruit-glass */
.fruit-skin.fruit-skin--star {
  box-shadow: inset 0 0 0 1px rgba(255, 200, 80, 0.22);
}

.fruit-img.fruit-img--star {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.12))
    drop-shadow(0 0 6px rgba(255, 210, 80, 0.35));
}

/* 萌宠四连小鸡：去掉星星金光，避免像星星道具 */
.fruit-img.fruit-img--star.fruit-img--pet-chicken {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.14));
}

/* 萌宠 · 小鸡被滑动交换时：短暂放大+淡出再收回（勿用 forwards 锁在透明） */
@keyframes pet-chicken-swap-move {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  45% {
    transform: scale(1.48);
    opacity: 0.06;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.fruit-img.fruit-img--star.fruit-img--pet-chicken-move-fx {
  animation: pet-chicken-swap-move 0.38s ease-out;
  transform-origin: center center;
  will-change: transform, opacity;
}

/* 美食「平底锅」道具触发：放大并旋转两圈后淡出 */
.fruit-img--life-pan-consume {
  animation: life-pan-consume-spin 0.58s ease-out forwards;
  transform-origin: center center;
  will-change: transform, opacity;
}

@keyframes life-pan-consume-spin {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  72% {
    transform: scale(1.45) rotate(680deg);
    opacity: 0.96;
  }
  100% {
    transform: scale(1.68) rotate(720deg);
    opacity: 0;
  }
}

.board.board--dynamic.board--rect {
  aspect-ratio: var(--ar-w, 8) / var(--ar-h, 8);
}

/* —— 3D果园 · 章节选关 —— */
.fruit-select-page {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  padding: env(safe-area-inset-top) 14px calc(20px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.fruit-select-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.fruit-back {
  flex-shrink: 0;
}

.fruit-select-title-wrap {
  flex: 1;
  text-align: center;
  padding-right: 56px;
}

.fruit-select-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  background: linear-gradient(90deg, #ff758c, #c471ed);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fruit-select-sub {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: #7f8c8d;
}

.fruit-legend {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 12px 0 18px;
  font-size: 0.72rem;
  color: #7f8c8d;
}

.legend-dot::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

.legend-dot--ok::before {
  background: #2ecc71;
}

.legend-dot--cur::before {
  background: #f39c12;
  box-shadow: 0 0 0 2px rgba(243, 156, 18, 0.35);
}

.legend-dot--lock::before {
  background: #bdc3c7;
}

/* 自下而上四段树形：底部 1–9 关，向上至 28–36 关 */
.fruit-tree {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0 24px;
  width: 100%;
}

.fruit-tree-tier {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.fruit-segment {
  margin-bottom: 22px;
}

.fruit-segment-title {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #34495e;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

.fruit-segment-meta {
  font-size: 0.72rem;
  font-weight: 600;
  color: #9b59b6;
}

.fruit-level-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.fruit-level-btn {
  position: relative;
  border: none;
  border-radius: 14px;
  padding: 12px 8px;
  min-height: 64px;
  cursor: pointer;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(145deg, #ff9a9e, #fecfef);
  box-shadow: 0 4px 14px rgba(233, 30, 140, 0.2);
  transition: transform 0.12s ease;
}

.fruit-level-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.fruit-level-btn .fl-num {
  display: block;
  font-size: 1.15rem;
}

.fruit-level-btn .fl-mini {
  display: block;
  margin-top: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  opacity: 0.95;
}

.fruit-level-btn .fl-lock {
  display: block;
  margin-top: 4px;
  font-size: 1rem;
  opacity: 0.9;
}

.fruit-level-btn.is-cleared {
  background: linear-gradient(145deg, #56ab2f, #a8e063);
  box-shadow: 0 4px 14px rgba(46, 204, 113, 0.28);
}

.fruit-level-btn.is-current {
  background: linear-gradient(145deg, #f7971e, #ffd200);
  color: #4a2c00;
  box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.45);
}

.fruit-level-btn.is-locked {
  background: linear-gradient(145deg, #bdc3c7, #95a5a6);
  color: #ecf0f1;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.92;
}

.game-bottom {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 14px;
  font-size: 0.85rem;
  color: #576574;
  text-align: center;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* —— 结果页 —— */
.result-page {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  padding: env(safe-area-inset-top) 20px calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}

.result-icon {
  font-size: 72px;
  line-height: 1;
  margin-bottom: 16px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.12));
}

.result-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 800;
}

.result-title.win {
  color: #27ae60;
}

.result-title.lose {
  color: #e74c3c;
}

.result-score {
  margin: 12px 0 8px;
  font-size: 2rem;
  font-weight: 800;
  color: #2c3e50;
}

.result-score-wrap {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 12px auto 8px;
}

.result-score-wrap .result-score {
  margin: 0;
}

.result-new-record {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-4px);
  font-size: 0.82rem;
  font-weight: 800;
  color: #27ae60;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.result-score-compare {
  margin: 10px 0 0;
  padding: 0 2px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #7f8c8d;
  line-height: 1.45;
  text-align: center;
}

.result-local-board {
  margin: 10px auto 0;
  max-width: 320px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(102, 126, 234, 0.1);
  font-size: 0.84rem;
  font-weight: 600;
  color: #455a64;
  line-height: 1.45;
  text-align: center;
}

.result-desc {
  margin: 0 0 28px;
  font-size: 0.9rem;
  color: #7f8c8d;
  max-width: 280px;
  line-height: 1.5;
}

.result-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 280px;
}

.result-actions button {
  padding: 14px;
  border: none;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-primary-result {
  color: #fff;
  background: linear-gradient(90deg, #11998e, #38ef7d);
}

.btn-secondary-result {
  color: #5d4e75;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* 美食结算：新图鉴 + 餐盘合成食神道具 */
.life-fusion-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.52);
  padding: 16px;
}

.life-fusion-panel {
  width: min(96vw, 440px);
  background: linear-gradient(180deg, #fffef7, #f8fff6);
  border-radius: 18px;
  padding: 14px 12px 16px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
  text-align: center;
}

.life-fusion-title {
  margin: 2px 0 6px;
  font-size: 1.04rem;
  color: #2e7d32;
}

.life-fusion-sub {
  margin: 0 0 10px;
  font-size: 0.86rem;
  color: #4e5f53;
}

.life-fusion-picks {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 10px;
  transition: opacity 0.25s ease;
}

.life-fusion-picks.is-done {
  opacity: 0;
  pointer-events: none;
}

.life-fusion-pick {
  border: 2px solid #a5d6a7;
  background: #fff;
  border-radius: 12px;
  padding: 6px 6px 5px;
  width: 30%;
  min-width: 88px;
  cursor: pointer;
}

.life-fusion-pick img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.life-fusion-pick span {
  display: block;
  font-size: 0.74rem;
  margin-top: 2px;
  color: #2c3e50;
}

.life-fusion-pick.is-picked {
  opacity: 0.4;
}

.life-fusion-tray-wrap {
  display: flex;
  justify-content: center;
  transition: transform 0.35s ease;
}

.life-fusion-overlay--tray-center .life-fusion-tray-wrap {
  transform: translateY(-16px);
}

/* 长条圆角餐盘底图 + 上层食物（加宽餐盘、食物居中靠拢，落在盘面内） */
.life-fusion-tray {
  position: relative;
  width: min(94vw, 428px);
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(46, 125, 50, 0.18);
}

.life-fusion-tray-plate {
  display: block;
  width: 100%;
  height: 108px;
  object-fit: fill;
  border-radius: 20px;
  vertical-align: top;
  pointer-events: none;
  user-select: none;
}

.life-fusion-tray-items {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  width: 78%;
  max-width: 300px;
  height: 64px;
  margin: 0;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 2vw, 14px);
  pointer-events: none;
}

.life-fusion-tray-item {
  width: clamp(44px, 11vw, 52px);
  height: clamp(44px, 11vw, 52px);
  object-fit: contain;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

/* 合并结束勿提前移除动画类，否则会还原 opacity；由 JS 在时长后加 --vanished */
.life-fusion-tray.is-merging .life-fusion-tray-item {
  transition: none;
  animation: life-fusion-merge-spin 1.48s ease-in-out forwards;
}

@keyframes life-fusion-merge-spin {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  36% {
    transform: translate(var(--m-tx, 0px), var(--m-ty, 0px)) rotate(0deg)
      scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--m-tx, 0px), var(--m-ty, 0px)) rotate(1080deg)
      scale(0.06);
    opacity: 0;
  }
}

.life-fusion-tray-items.life-fusion-tray-items--vanished .life-fusion-tray-item {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: scale(0) !important;
  animation: none !important;
  pointer-events: none;
}

.life-fusion-flash {
  position: absolute;
  inset: -4px;
  border-radius: 22px;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}

.life-fusion-flash.is-burst {
  animation: life-fusion-flash-burst 0.52s ease-out both;
}

@keyframes life-fusion-flash-burst {
  0% {
    opacity: 0;
    box-shadow: inset 0 0 0 transparent, 0 0 0 transparent;
    filter: brightness(1);
  }
  12% {
    opacity: 1;
    box-shadow:
      inset 0 0 72px #fff,
      inset 0 0 120px #ffffc4,
      0 0 48px #fff,
      0 0 96px rgba(255, 248, 200, 0.95);
    filter: brightness(2.4) saturate(1.15);
  }
  35% {
    opacity: 0.92;
    box-shadow:
      inset 0 0 56px #fff,
      0 0 64px rgba(255, 255, 255, 0.9);
    filter: brightness(1.85);
  }
  70% {
    opacity: 0.35;
    filter: brightness(1.2);
  }
  100% {
    opacity: 0;
    box-shadow: none;
    filter: brightness(1);
  }
}

.life-fusion-chef-reward {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 72px;
  object-fit: contain;
  transform: translate(-50%, -50%);
  z-index: 5;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
  pointer-events: none;
}

.life-fusion-chef-reward.is-shake {
  animation: life-fusion-chef-shake 0.62s ease-in-out both;
}

@keyframes life-fusion-chef-shake {
  0%,
  100% {
    transform: translate(-50%, -50%) translate(0, 0);
  }
  8% {
    transform: translate(-50%, -50%) translate(-5px, 2px) rotate(-4deg);
  }
  16% {
    transform: translate(-50%, -50%) translate(5px, -2px) rotate(4deg);
  }
  24% {
    transform: translate(-50%, -50%) translate(-4px, 1px) rotate(-3deg);
  }
  32% {
    transform: translate(-50%, -50%) translate(4px, -1px) rotate(3deg);
  }
  40% {
    transform: translate(-50%, -50%) translate(-3px, 2px) rotate(-2deg);
  }
  48% {
    transform: translate(-50%, -50%) translate(3px, -2px) rotate(2deg);
  }
  56% {
    transform: translate(-50%, -50%) translate(-2px, 1px);
  }
  64% {
    transform: translate(-50%, -50%) translate(2px, -1px);
  }
  72% {
    transform: translate(-50%, -50%) translate(-1px, 0);
  }
}

.life-fusion-chef-reward.is-fly-down {
  animation: life-fusion-chef-fly 0.58s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes life-fusion-chef-fly {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) translate(0, 300px) scale(0.32);
    opacity: 0;
  }
}

.life-fusion-synth {
  margin-top: 12px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(90deg, #21b353, #6adf47);
  color: #fff;
  font-weight: 800;
  padding: 10px 20px;
  font-size: 0.96rem;
}

.life-fusion-tip {
  min-height: 1.4em;
  margin: 10px 4px 0;
  color: #2d5932;
  font-size: 0.82rem;
}

.life-fusion-overlay--out {
  opacity: 0;
  transition: opacity 0.32s ease;
}

/* 占位弹层（排行榜/签到） */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
}

.modal-overlay.show {
  display: flex;
}

.modal-overlay--sign {
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-box--sign {
  max-width: 420px;
  width: 100%;
  padding: 14px 12px 16px;
  border-radius: 18px;
  text-align: center;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}

.modal-box--sign__title {
  margin: 0 0 12px;
  font-size: 1.02rem;
  font-weight: 800;
  color: #2c3e50;
}

.modal-sign-body {
  margin: 0;
}

.modal-box {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  max-width: 320px;
  width: 100%;
  text-align: center;
}

.modal-box h3 {
  margin: 0 0 12px;
}

.modal-box p {
  margin: 0 0 16px;
  font-size: 0.9rem;
  color: #7f8c8d;
}

.modal-close {
  padding: 10px 24px;
  border: none;
  border-radius: 999px;
  background: #ecf0f1;
  cursor: pointer;
}

.modal-box--wide {
  max-width: 400px;
  width: 100%;
  text-align: left;
}

.modal-box--wide h3 {
  text-align: center;
}

.modal-body-scroll {
  max-height: min(58vh, 420px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 12px;
  font-size: 0.88rem;
  color: #2c3e50;
}

.home-rank__tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 12px;
}

.home-rank__tab {
  flex: 1;
  min-width: 0;
  padding: 8px 4px;
  border: none;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #5b4e9e;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(102, 126, 234, 0.25);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.home-rank__tab--active {
  color: #fff;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(102, 126, 234, 0.35);
}

.home-rank__tab:active {
  opacity: 0.92;
}

.home-rank__self-nick {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(196, 113, 106, 0.12);
  font-size: 0.78rem;
  line-height: 1.4;
  color: #5d4037;
}

.home-rank-namegate__tip {
  margin: 0 0 12px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #546e7a;
  text-align: left;
}

.home-rank-namegate__input {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #cfd8dc;
  font-size: 0.95rem;
}

.home-rank-namegate__input:focus {
  outline: none;
  border-color: #667eea;
}

.home-rank__panel-hint {
  margin: 0 0 10px;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #78909c;
  text-align: center;
}

.home-rank__my {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.12), rgba(118, 75, 162, 0.1));
  font-size: 0.88rem;
}

.home-rank__loading,
.home-rank__empty {
  margin: 6px 0;
  font-size: 0.88rem;
  color: #607d8b;
}

.home-rank__head {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr 1fr;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: rgba(102, 126, 234, 0.1);
  font-size: 0.78rem;
  font-weight: 700;
  color: #5b4e9e;
}

.home-rank__head span:nth-child(2) {
  text-align: center;
}

.home-rank__head span:nth-child(3) {
  text-align: right;
}

.home-rank__list--global li {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr 1fr;
  gap: 8px;
}

.home-rank__list--global .home-rank__name {
  text-align: left;
  color: #2c3e50;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.home-rank__level {
  font-weight: 700;
  color: #455a64;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.home-rank__list--global .home-rank__score {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.home-rank__my strong {
  color: #5b4e9e;
}

.home-rank__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 行外观：全服榜用 grid（见 .home-rank__list--global li），勿用 flex 覆盖 */
.home-rank__list > li {
  padding: 8px 10px;
  border-radius: 10px;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.05);
  align-items: center;
}

.home-rank__list:not(.home-rank__list--global) > li {
  display: flex;
  gap: 8px;
}

.home-rank__list > li.is-self {
  border-color: rgba(102, 126, 234, 0.45);
  box-shadow: 0 0 0 1px rgba(102, 126, 234, 0.2);
}

.home-rank__idx {
  flex-shrink: 0;
  width: 26px;
  font-weight: 800;
  color: #95a5a6;
  font-size: 0.85rem;
}

.home-rank__name {
  flex: 1;
  min-width: 0;
}

.home-rank__score {
  font-weight: 800;
  color: #2c3e50;
  flex-shrink: 0;
  text-align: right;
}

.home-sign__strip {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0 4px;
}

.home-sign__slot {
  flex: 1 1 0;
  min-width: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 4px 2px 6px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.65);
  box-sizing: border-box;
}

.home-sign__reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  margin-top: 2px;
  min-height: 52px;
  width: 100%;
}

.home-sign__reward-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.12));
}

.home-sign__reward-cap {
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  color: rgba(20, 60, 40, 0.88);
  max-width: 100%;
  padding: 0 1px;
}

.home-sign__slot--done .home-sign__reward-cap {
  color: rgba(90, 12, 28, 0.9);
}

.home-sign-bag-dock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 2px dashed rgba(76, 175, 80, 0.5);
  background: rgba(255, 255, 255, 0.55);
  font-size: 0.82rem;
  font-weight: 700;
  color: #2e7d32;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.home-sign-bag-dock:active {
  transform: scale(0.99);
  opacity: 0.92;
}

.home-items-bag__hint {
  margin: 0 0 12px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(30, 60, 25, 0.72);
  text-align: center;
}

.home-sign-bag-dock__glyph {
  font-size: 1.25rem;
  line-height: 1;
}

.sign-reward-fly {
  position: fixed;
  z-index: 10060;
  width: 44px;
  height: 44px;
  object-fit: contain;
  pointer-events: none;
  transition:
    transform 0.58s cubic-bezier(0.22, 0.82, 0.22, 1),
    opacity 0.52s ease;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.2));
}

/* 未签到的天数：绿色系渐变 */
.home-sign__slot--pending {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.5) 0%, transparent 42%),
    linear-gradient(165deg, #e5f7ed 0%, #9fd9b8 48%, #4caf6a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 2px 10px rgba(46, 125, 50, 0.22);
}

/* 已签过（本轮已完成）的天数：红色系渐变 */
.home-sign__slot--done {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.45) 0%, transparent 40%),
    linear-gradient(165deg, #ffeef1 0%, #ff9aab 50%, #e84a62 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 2px 10px rgba(200, 50, 70, 0.28);
}

.home-sign__slot--today.home-sign__slot--pending {
  border-color: rgba(46, 160, 80, 0.85);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    0 0 0 2px rgba(76, 175, 80, 0.55),
    0 4px 14px rgba(46, 125, 50, 0.25);
}

.home-sign__num {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.home-sign__slot--pending .home-sign__num {
  color: rgba(12, 78, 42, 0.92);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.home-sign__slot--done .home-sign__num {
  color: rgba(90, 12, 28, 0.92);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

.home-sign__actions {
  text-align: center;
}

.home-sign__btn {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #f093fb, #f5576c);
  box-shadow: 0 4px 14px rgba(245, 87, 108, 0.35);
}

.home-sign__done {
  margin: 0;
  font-size: 0.85rem;
  color: #27ae60;
  font-weight: 600;
}

/* —— 小程序页 · 图鉴在棋盘正下方居中 + 解锁弹层 —— */
.game-dock {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 12px;
  flex-wrap: wrap;
}

.game-dock--below-board {
  margin-top: 2px;
  padding: 4px 12px calc(16px + max(16px, env(safe-area-inset-bottom)));
}

/* 步数不足预警（少于 10 步）：标红 + 抖动 */
.game-meta .stats strong#movesLeft.moves-low {
  color: #e53935 !important;
  display: inline-block;
  animation: moves-warn-shake 0.65s ease-in-out infinite;
}

@keyframes moves-warn-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-3px);
  }
  40% {
    transform: translateX(3px);
  }
  60% {
    transform: translateX(-2px);
  }
  80% {
    transform: translateX(2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-meta .stats strong#movesLeft.moves-low {
    animation: none;
  }
}

.game-dock__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 10px 20px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  color: #1a4a1f;
  background: linear-gradient(145deg, #d4f0c4, #a8d98a);
  border: 2px solid rgba(70, 130, 55, 0.35);
  box-shadow: 0 4px 14px rgba(45, 90, 35, 0.15);
  cursor: pointer;
}

/* 剩余步数→炸弹结算加速（与图鉴并排） */
.game-dock__btn--speed {
  min-width: 0;
  padding: 10px 16px;
  font-size: 0.88rem;
  color: #5c2e00;
  background: linear-gradient(145deg, #ffe8c4, #ffc978);
  border: 2px solid rgba(200, 120, 40, 0.45);
  box-shadow: 0 4px 12px rgba(160, 80, 20, 0.18);
}

.game-dock__btn--speed:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: none;
}

.game-dock__btn--speed[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(145deg, #ff8a3d, #e65100);
  border-color: rgba(160, 50, 0, 0.55);
}

/* —— 本关排行榜弹层 —— */
.leaderboard-overlay {
  position: fixed;
  inset: 0;
  z-index: 204;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  background: rgba(12, 22, 28, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.leaderboard-overlay[hidden] {
  display: none !important;
}

.leaderboard-panel {
  width: min(100%, 400px);
  max-height: min(80vh, 560px);
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: linear-gradient(165deg, #ffffff 0%, #f4faf0 100%);
  box-shadow: 0 12px 40px rgba(20, 40, 25, 0.25);
  overflow: hidden;
}

.leaderboard-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 14px 8px;
  flex-shrink: 0;
}

.leaderboard-panel__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: #1a4a1f;
}

.leaderboard-panel__close {
  padding: 6px 14px;
  border: none;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #2d5a27;
  background: rgba(200, 230, 180, 0.6);
  cursor: pointer;
}

.leaderboard-panel__body {
  padding: 0 14px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 0.9rem;
  color: #2c3e50;
  text-align: left;
}

.leaderboard-panel__my {
  margin: 0 0 12px;
}

.leaderboard-panel__my strong {
  color: #1a4a1f;
  font-size: 1.05rem;
}

.leaderboard-panel__section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.leaderboard-panel__section-title {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #7f8c8d;
  letter-spacing: 0.04em;
}

.leaderboard-panel__hint {
  margin: 0 0 10px;
  font-size: 0.75rem;
  line-height: 1.45;
  color: #95a5a6;
}

.leaderboard-panel__empty {
  margin: 0;
  font-size: 0.85rem;
  color: #bdc3c7;
}

.leaderboard-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.leaderboard-panel__list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  margin-bottom: 6px;
  font-size: 0.88rem;
}

.leaderboard-panel__list li > span:first-child {
  flex: 1;
  min-width: 0;
  margin-right: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leaderboard-panel__list li strong {
  font-weight: 800;
  color: #2c3e50;
}

/* —— 本关图鉴列表 + 大图 —— */
.codex-list-overlay {
  position: fixed;
  inset: 0;
  z-index: 205;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  background: rgba(12, 22, 28, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.codex-list-overlay[hidden] {
  display: none !important;
}

.codex-list-panel {
  width: min(100%, 400px);
  max-height: min(78vh, 620px);
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: linear-gradient(165deg, #ffffff 0%, #f4faf0 100%);
  box-shadow: 0 12px 40px rgba(20, 40, 25, 0.25);
  overflow: hidden;
}

.codex-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 14px 8px;
  flex-shrink: 0;
}

.codex-list-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: #1a4a1f;
}

.codex-list-close {
  padding: 6px 14px;
  border: none;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #2d5a27;
  background: rgba(200, 230, 180, 0.6);
  cursor: pointer;
}

.codex-list-sub {
  margin: 0 14px 8px;
  font-size: 0.72rem;
  line-height: 1.4;
  color: #7f8c8d;
}

.codex-list {
  list-style: none;
  margin: 0;
  padding: 0 8px 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.codex-list__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 8px;
  margin-bottom: 4px;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(90, 130, 70, 0.12);
  transition: background 0.15s ease;
}

.codex-list__item:active {
  background: rgba(210, 235, 195, 0.45);
}

.codex-list__item--locked {
  opacity: 0.88;
}

.codex-list__thumb-wrap {
  position: relative;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(200, 220, 190, 0.5);
}

.codex-list__thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.codex-list__lock-mask {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
  color: #fff;
  background: rgba(30, 40, 35, 0.55);
}

.codex-list__text {
  flex: 1;
  min-width: 0;
}

.codex-list__name {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 800;
  color: #1e4620;
}

.codex-list__brief {
  margin: 0 0 6px;
  font-size: 0.75rem;
  line-height: 1.45;
  color: #5d6d7e;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.codex-list__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #7f8c8d;
  background: rgba(0, 0, 0, 0.06);
}

.codex-list__badge--ok {
  color: #1a6b2e;
  background: rgba(120, 200, 130, 0.25);
}

.codex-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 215;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 14, 18, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.codex-detail-overlay[hidden] {
  display: none !important;
}

.codex-detail-overlay--locked .codex-detail-img {
  opacity: 0.45;
  filter: grayscale(0.35);
}

.codex-detail-inner {
  max-width: min(92vw, 360px);
  text-align: center;
  color: #fff;
}

.codex-detail-img {
  width: min(72vw, 280px);
  height: min(72vw, 280px);
  object-fit: contain;
  margin: 0 auto 12px;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
}

.codex-detail-name {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 800;
}

.codex-detail-name-en {
  margin: 0 0 4px;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.codex-detail-name-zh {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}

.codex-detail-brief {
  margin: 0 0 10px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}

.codex-detail-lock {
  margin: 0 0 12px;
  font-size: 0.8rem;
  color: #ffd88a;
}

.codex-detail-hint {
  margin: 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
}

.unlock-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 25, 35, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.unlock-overlay[hidden] {
  display: none !important;
}

.unlock-panel {
  width: min(92vw, 360px);
  max-height: min(86vh, 560px);
  overflow: auto;
  padding: 18px 16px 20px;
  border-radius: 16px;
  background: linear-gradient(165deg, #ffffff 0%, #f8fff4 100%);
  box-shadow: 0 12px 40px rgba(30, 50, 30, 0.22);
  text-align: center;
}

.unlock-panel__title {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 800;
  color: #1a4a1f;
}

.unlock-panel__sub,
.unlock-panel__obs {
  margin: 0 0 12px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #5d6d7e;
}

.unlock-panel__obs {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 248, 220, 0.95);
  color: #7d6608;
}

.unlock-panel__imgs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 12px 0 8px;
}

.unlock-fruit-btn {
  padding: 0;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  overflow: hidden;
  width: 88px;
  height: 88px;
}

.unlock-fruit-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.unlock-fruit-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.unlock-panel__hint {
  margin: 8px 0 0;
  font-size: 0.75rem;
  color: #95a5a6;
}

.unlock-fruit-fly {
  position: fixed;
  z-index: 300;
  pointer-events: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transition:
    left 0.48s cubic-bezier(0.25, 0.8, 0.25, 1),
    top 0.48s cubic-bezier(0.25, 0.8, 0.25, 1),
    transform 0.48s ease,
    opacity 0.48s ease;
}

/* 美食关小节结算：汇总到餐盘并飞入背包 */
.life-stage-reward {
  position: fixed;
  inset: 0;
  z-index: 12500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18, 24, 32, 0.32);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.life-stage-reward__panel {
  width: min(88vw, 340px);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
  padding: 16px 14px 14px;
  text-align: center;
}

.life-stage-reward__title {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 800;
  color: #2a6b32;
}

.life-stage-reward__tray {
  min-height: 82px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(252, 236, 188, 0.74), rgba(240, 208, 154, 0.64));
  border: 1px solid rgba(215, 170, 95, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
}

.life-stage-reward__item {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
  animation: life-reward-pop 0.42s ease-out both;
}

.life-stage-reward__sub {
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: #5a6d5f;
}

.life-stage-reward--out {
  animation: life-reward-fade-out 0.5s ease both;
}

@keyframes life-reward-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.88);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes life-reward-fade-out {
  to {
    opacity: 0;
  }
}

/* ---- H5 预览：手机宽度居中，桌面不全屏铺展 ---- */
:root {
  --m3-shell-max: 430px;
}

html {
  background: #0a1018;
}

body,
body.page-home,
body.page-game {
  width: min(var(--m3-shell-max), 100vw);
  margin-left: auto;
  margin-right: auto;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 12px 40px rgba(0, 0, 0, 0.35);
}

.boot-loader,
.modal-overlay,
.items-bag-overlay,
.coin-rain-layer,
.lock-tip-toast,
.home-footer,
.footer-links,
[class$="-overlay"] {
  width: min(var(--m3-shell-max), 100vw) !important;
  max-width: 100vw;
  left: max(0px, calc((100vw - min(var(--m3-shell-max), 100vw)) / 2)) !important;
  right: auto !important;
}