/* ================= 主题变量 ================= */
:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --text: #1b1f24;
  --text-2: #5c6470;
  --text-3: #98a0ad;
  --border: #e5e8ed;
  --border-strong: #d4d9e0;
  --primary: #4c6ef5;
  --primary-600: #4263eb;
  --primary-soft: rgba(76, 110, 245, 0.12);
  --danger: #e03131;
  --success: #2f9e44;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.1);
  --radius: 10px;
  --radius-sm: 8px;
  --mono: "JetBrains Mono", "SF Mono", Consolas, Menlo, monospace;
  /* 卡通圆体栈：高清矢量卡通字体优先，杜绝幼圆/ComicSans 等点阵老字体发糊 */
  --cartoon: "Baloo 2", "ZCOOL QingKe HuangYou", "PingFang SC", "Microsoft YaHei", sans-serif;
  /* 通用立体高光层：叠在 background-color 之上，让纯色块变立体 */
  --tile-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, 0.18));
}

[data-theme="dark"] {
  --bg: #101317;
  --surface: #181c22;
  --surface-2: #1e232b;
  --text: #e8eaed;
  --text-2: #a8b0bb;
  --text-3: #6b7280;
  --border: #262c35;
  --border-strong: #333b47;
  --primary: #5c7cfa;
  --primary-600: #748ffc;
  --primary-soft: rgba(92, 124, 250, 0.16);
  --danger: #ff6b6b;
  --success: #51cf66;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] body {
  background:
    radial-gradient(1100px 460px at 85% -10%, rgba(92, 124, 250, 0.14), transparent 60%),
    radial-gradient(800px 380px at -10% 15%, rgba(132, 94, 247, 0.10), transparent 55%),
    #101317;
}

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

html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(1100px 460px at 85% -10%, rgba(76, 110, 245, 0.10), transparent 60%),
    radial-gradient(800px 380px at -10% 15%, rgba(132, 94, 247, 0.08), transparent 55%),
    var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  transition: background 0.2s, color 0.2s;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  touch-action: manipulation; /* 防双击缩放 */
}

::selection { background: var(--primary-soft); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ================= 顶栏 ================= */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--primary), #845ef7);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 15px; }
.brand-text small { color: var(--text-3); font-size: 10px; letter-spacing: 1.5px; }

.tabs {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--text-2);
  text-decoration: none;
  font-size: 13.5px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.tab:hover { background: var(--surface-2); color: var(--text); }

.tab.active {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}

.icon-btn {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.icon-btn:hover { background: var(--surface-2); }

/* ================= 舞台与首页 ================= */
.stage {
  flex: 1;
  width: 100%;
  padding: 30px 20px 40px;
}

.home { max-width: 860px; margin: 0 auto; text-align: center; }

.home h1 {
  font-size: 34px;
  letter-spacing: 4px;
  background: linear-gradient(120deg, #4c6ef5, #845ef7, #e64980);
  -webkit-background-clip: text;
  background-clip: text;
  color: #4c6ef5;
  -webkit-text-fill-color: transparent;
}

.home-sub { color: var(--text-2); margin: 8px 0 28px; font-size: 13.5px; }

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  text-align: left;
}

.game-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.game-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}

/* 封面图（3:2），加载失败时露出渐变兜底层 */
.gc-thumb {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary-soft), var(--surface-2));
}

.gc-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  opacity: 0.6;
}

.gc-thumb img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.game-card:hover .gc-thumb img { transform: scale(1.06); }

/* 悬浮播放按钮 */
.gc-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(20, 24, 32, 0.62);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.18s, transform 0.18s;
  backdrop-filter: blur(2px);
}

.gc-play svg { margin-left: 3px; }

.game-card:hover .gc-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* 最高分徽章 */
.gc-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  background: rgba(20, 24, 32, 0.68);
  border-radius: 999px;
  padding: 4px 10px;
  backdrop-filter: blur(2px);
}

.gc-badge-new { background: var(--primary); }

.gc-body { padding: 12px 14px 14px; }
.gc-body strong { font-size: 15px; display: block; }
.gc-body p { color: var(--text-2); font-size: 12.5px; margin-top: 3px; }

/* ================= 游戏通用布局 ================= */
.game-wrap {
  max-width: 640px;
  margin: 0 auto;
  touch-action: none; /* 游戏区阻止触摸滚动 */
}
.game-wrap.wide { max-width: 900px; } /* 大场地游戏（贪吃蛇）用更宽容器 */

/* ===== 游戏顶栏：可爱卡通贴纸风（颜色跟随各游戏主题色 --g-accent 派生） ===== */
/* 全套主题色变量默认值放 :root（JS 注入到 #stage，层级更近可覆盖） */
:root {
  --g-accent: #ffb762; /* 默认蜜黄，JS 按游戏注入覆盖 */
  --g-rgb: 255, 183, 98;
  --g-accent-deep: #8a5a1d; /* JS 会注入按亮度压暗的安全深色 */
  --g-deep-dark: #ffcd8e; /* 深色主题文字亮变体 */
  --g-on-accent: #ffffff; /* 主题色底上的文字色，亮色主题 JS 注入深字 */
  --g-head-bg: #fff7e8;
  --g-head-border: #ffce8d;
  --g-w7: #fff5e6;
  --g-w14: #ffeccd;
  --g-card-border: #c58a3d;
  --g-tray-border: #ffd9a3;
  --g-dark-border: #595447;
  --g-btn-top: #ffc98f;
  --g-btn-bottom: #e09a3e;
  --g-on-btn: #2c2416;
  --g-btn-border: #cc8a35;
  --g-velvet: #3d2a12; /* 主题色深绒变体（牌桌/深底用），JS 注入按主题色压暗 */
}

.game-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  padding: 13px 16px;
  border-radius: 26px;
  background-image:
    radial-gradient(rgba(var(--g-rgb), 0.32) 4px, transparent 4.6px),
    radial-gradient(rgba(var(--g-rgb), 0.24) 3.2px, transparent 3.8px);
  background-position: 2px 6px, 24px 26px;
  background-size: 46px 46px;
  background-color: var(--g-head-bg);
  border: 2.5px solid var(--g-head-border);
  box-shadow:
    0 5px 0 rgba(var(--g-rgb), 0.55),
    0 12px 26px rgba(var(--g-rgb), 0.18);
}

[data-theme="dark"] .game-head {
  background-color: #262b3a;
  background-image:
    radial-gradient(rgba(var(--g-rgb), 0.11) 4px, transparent 4.6px),
    radial-gradient(rgba(var(--g-rgb), 0.11) 3.2px, transparent 3.8px);
  border-color: var(--g-dark-border);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.5), 0 12px 26px rgba(0, 0, 0, 0.4);
}

/* 标题：贴纸圆点 + 圆润粗字 */
.gh-title {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.gh-title::before {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.95) 0 3px, transparent 3.5px),
    radial-gradient(circle at 50% 55%, var(--g-w14), var(--g-accent) 75%);
  box-shadow: 0 0 0 4px rgba(var(--g-rgb), 0.18), 0 2px 5px rgba(var(--g-rgb), 0.4);
  flex: none;
}
.gh-title h2 {
  font-family: var(--cartoon);
  font-size: 19px;
  font-weight: 400; /* 黄油体仅 400 一档，笔画天然粗；>400 会被合成加粗发糊 */
  letter-spacing: 1px;
  line-height: 1.2;
  color: var(--g-accent-deep, #2f6fb0); /* 零 text-shadow：任何阴影都会让 Chrome 关闭次像素抗锯齿 */
}

[data-theme="dark"] .gh-title h2 {
  color: var(--g-deep-dark);
}

/* 纪录：奶油小奖牌 */
.gh-best {
  font-family: var(--cartoon);
  color: #d9840d;
  font-size: 11.5px;
  font-weight: 400;
  padding: 3px 11px;
  border-radius: 999px;
  background: #fff3d4;
  border: 2px solid #ffd98a;
  white-space: nowrap;
}

[data-theme="dark"] .gh-best {
  background: rgba(255, 216, 140, 0.10);
  border-color: rgba(255, 216, 140, 0.28);
  color: #ffc94d;
}

.gh-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 计分框：贴纸卡（描边/挤出颜色全部跟随游戏主题色） */
.score-box {
  --accent: var(--g-accent, #4098f0);
  --accent-deep: var(--g-accent-deep, #2f7dd0);
  position: relative;
  background: #ffffff;
  border: 2.5px solid var(--accent);
  border-radius: 18px 14px 18px 14px; /* 不对称圆角，手绘贴纸感（不用 rotate，旋转会让文字发糊） */
  padding: 5px 14px 7px;
  text-align: center;
  min-width: 78px;
  box-shadow: 0 4px 0 var(--accent);
  transition: box-shadow 0.12s;
}
.score-box:active { box-shadow: 0 2px 0 var(--accent); }
.score-box small {
  display: block;
  font-family: var(--cartoon);
  color: var(--accent-deep);
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 2px;
  padding-left: 2px; /* 抵消末字距 */
}
.score-box strong {
  font-family: var(--cartoon);
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  /* 实心深色数字：白底卡片上直接可读，不玩白字描边 */
  color: var(--accent-deep);
}

[data-theme="dark"] .score-box {
  --accent-deep: var(--g-deep-dark);
  background: #232837;
  box-shadow: 0 4px 0 rgba(var(--g-rgb), 0.45);
}

/* 提示：安静的一行淡字 */
.game-tip {
  text-align: center;
  color: var(--text-3);
  font-size: 12px;
  margin: 0 auto 14px;
  max-width: min(92%, 560px);
  padding: 0 10px;
}
.game-wrap.wide .game-tip { max-width: 880px; } /* 与大场地画布同宽，左右对齐 */

/* 按钮：果冻胶囊键（按下去会"陷"进去；不用旋转/缩放动画，避免文字重采样发糊） */
.btn {
  padding: 7px 17px;
  border: 2.5px solid #d8dde9;
  border-radius: 999px;
  background: #ffffff;
  color: var(--text-2);
  font-family: var(--cartoon);
  font-size: 13.5px;
  font-weight: 400;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.12s, transform 0.12s, color 0.15s, background 0.15s;
  user-select: none;
  box-shadow: 0 4px 0 #c9cfdd;
}
.btn:hover {
  border-color: var(--g-accent, #4098f0);
  color: var(--g-accent-deep, #2f7dd0);
  background: var(--g-w7);
  box-shadow: 0 5px 0 rgba(var(--g-rgb), 0.55);
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #c9cfdd; }

[data-theme="dark"] .btn {
  background: #262b3a;
  border-color: #3d4459;
  color: var(--text-2);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .btn:hover {
  background: #2b3145;
  border-color: var(--g-accent, #4c6ef5);
  color: var(--g-deep-dark);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.55);
}
[data-theme="dark"] .btn:active { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }

.btn-primary {
  background: linear-gradient(180deg, var(--g-btn-top, #6db5ff), var(--g-btn-bottom, #4098f0));
  border: 2.5px solid var(--g-btn-border, #2f7dd0);
  color: var(--g-on-btn, #fff);
  font-weight: 400;
  box-shadow: 0 4px 0 var(--g-btn-border, #2f7dd0);
}
.btn-primary:hover {
  color: var(--g-on-btn, #fff);
  background: linear-gradient(180deg, var(--g-w14, #ffeccd), var(--g-btn-bottom, #4098f0));
  box-shadow: 0 5px 0 var(--g-btn-border, #2f7dd0);
}
.btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--g-btn-border, #2f7dd0); }

/* ================= 画布游戏 ================= */
.canvas-box {
  display: flex;
  justify-content: center;
}

canvas.game-canvas {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  background: #0e1218;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ================= 2048 ================= */
.board2048 {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  background: #bbada0;
  border-radius: var(--radius);
  padding: 3.2%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 3.5%;
  touch-action: none;
  box-shadow: var(--shadow-md);
}

.cell {
  border-radius: 6px;
  background: rgba(238, 228, 218, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: clamp(18px, 7vw, 32px);
  color: #776e65;
  user-select: none;
}

.cell.v2    { background: #eee4da; }
.cell.v4    { background: #ede0c8; }
.cell.v8    { background: #f2b179; color: #fff; }
.cell.v16   { background: #f59563; color: #fff; }
.cell.v32   { background: #f67c5f; color: #fff; }
.cell.v64   { background: #f65e3b; color: #fff; }
.cell.v128  { background: #edcf72; color: #fff; font-size: clamp(15px, 5.6vw, 26px); }
.cell.v256  { background: #edcc61; color: #fff; font-size: clamp(15px, 5.6vw, 26px); }
.cell.v512  { background: #edc850; color: #fff; font-size: clamp(15px, 5.6vw, 26px); }
.cell.v1024 { background: #edc53f; color: #fff; font-size: clamp(13px, 4.6vw, 21px); }
.cell.v2048 { background: #edc22e; color: #fff; font-size: clamp(13px, 4.6vw, 21px); box-shadow: 0 0 18px rgba(237, 194, 46, 0.65); }
.cell.v4096, .cell.v8192 { background: #3c3a32; color: #fff; font-size: clamp(12px, 4.2vw, 19px); }

.cell.pop { animation: cellPop 0.22s ease; }

@keyframes cellPop {
  from { transform: scale(0.4); }
  to { transform: scale(1); }
}

.cell.changed { animation: cellMerge 0.18s ease; }

@keyframes cellMerge {
  0% { transform: scale(1); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ================= 游戏结束弹窗 ================= */
.go-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(10, 12, 16, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: overlayIn 0.2s ease;
}

@keyframes overlayIn { from { opacity: 0; } }

.go-modal {
  position: relative;
  width: 100%;
  max-width: 340px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  padding: 26px 22px 18px;
  text-align: center;
  animation: modalIn 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.85) translateY(10px); }
}

.go-title { font-size: 17px; color: var(--text-2); }

.go-score {
  font-size: 56px;
  font-weight: 800;
  line-height: 1.15;
  background: linear-gradient(135deg, var(--primary), #845ef7);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--primary);
  -webkit-text-fill-color: transparent;
}
.go-score small { font-size: 15px; font-weight: 600; color: var(--text-3); margin-left: 4px; }

.go-best { color: var(--text-3); font-size: 12.5px; margin: 2px 0 16px; }

.go-actions { display: flex; gap: 10px; justify-content: center; }

.go-actions .btn { flex: 1; }

.go-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--text-3);
  font-size: 22px;
  cursor: pointer;
  border-radius: 8px;
}

.go-close:hover { background: var(--surface-2); color: var(--text); }

/* ================= 广告位（占位样式，投放后由广告代码替换内容） ================= */
.ad-slot {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  overflow: hidden;
}

.ad-bottom { max-width: 640px; width: calc(100% - 40px); margin: 0 auto 26px; min-height: 90px; }

.ad-go { margin-top: 16px; height: 100px; }

/* ================= 成语猜猜 ================= */
.idm-hint {
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 11px 16px;
  text-align: center;
  color: var(--text-2);
  font-size: 13.5px;
  margin-bottom: 16px;
}

.idm-hint.idm-hint-ok { border-color: var(--success); color: var(--success); }
.idm-hint.idm-hint-no { border-color: var(--danger); color: var(--danger); }

.idm-board { display: flex; flex-direction: column; gap: 8px; align-items: center; margin-bottom: 18px; }

.idm-row { display: flex; gap: 8px; }

.idm-cell {
  width: 58px;
  height: 58px;
  border: 2px solid var(--border-strong);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 27px;
  font-weight: 600;
  background: var(--surface);
  user-select: none;
  transition: transform 0.1s, background 0.2s, border-color 0.2s, color 0.2s;
}

.idm-cell.filled { border-color: var(--text-3); }

.idm-row.active .idm-cell.empty { border-color: var(--primary); animation: idmPulse 1.2s infinite; }

@keyframes idmPulse { 50% { border-color: var(--primary-soft); } }

.idm-cell.ok { background: var(--success); border-color: var(--success); color: #fff; animation: cellMerge 0.18s ease; }
.idm-cell.mis { background: var(--warning); border-color: var(--warning); color: #fff; animation: cellMerge 0.18s ease; }
.idm-cell.no { background: var(--surface-2); border-color: var(--border); color: var(--text-3); }

.idm-pool { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 auto 4px; }

.idm-key {
  min-width: 46px;
  height: 48px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: 20px;
  font-family: inherit;
  cursor: pointer;
  color: var(--text);
  user-select: none;
  transition: background 0.15s, opacity 0.15s, transform 0.1s;
}

.idm-key:hover { background: var(--surface-2); }
.idm-key:active { transform: scale(0.94); }
.idm-key.ok { background: var(--success); color: #fff; border-color: var(--success); }
.idm-key.mis { background: var(--warning); color: #fff; border-color: var(--warning); }
.idm-key.no { opacity: 0.32; pointer-events: none; }

.idm-actions { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }

/* ================= 蜂巢找字 ================= */
.hx-bar {
  height: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12);
}

.hx-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #4c6ef5, #845ef7);
  box-shadow: 0 0 10px rgba(76, 110, 245, 0.55);
  border-radius: 999px;
  transition: width 0.2s linear, background 0.3s;
}

.hx-fill.low {
  background: linear-gradient(90deg, #fa5252, #e8590c);
  box-shadow: 0 0 10px rgba(250, 82, 82, 0.55);
}

/* ================= 扫雷 ================= */
.mn-diff {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.mn-diff .btn { font-size: 13px; padding: 6px 16px; border-radius: 999px; }

.mn-board {
  display: grid;
  gap: 3px;
  width: min(100%, 480px);
  margin: 0 auto;
  padding: 10px;
  user-select: none;
  touch-action: manipulation;
  background: linear-gradient(160deg, #4263eb, #364fc7);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(54, 79, 199, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.mn-board.mn-wide { width: min(100%, 720px); }

.mn-cell {
  aspect-ratio: 1;
  border: none;
  border-radius: 5px;
  background: linear-gradient(180deg, #ffffff, #dbe0ea);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.22);
  font-weight: 800;
  font-size: clamp(11px, 2.6vw, 18px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: transform 0.06s, background 0.12s, box-shadow 0.12s;
}

[data-theme="dark"] .mn-cell { background: linear-gradient(180deg, #4b5568, #333b49); }

.mn-cell:not(.open):hover { filter: brightness(1.08); }
.mn-cell:not(.open):active { transform: scale(0.9); }

.mn-cell.open {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.28);
  cursor: default;
}

.mn-cell.mine { background: rgba(255, 255, 255, 0.15); font-size: clamp(10px, 2.2vw, 16px); }
.mn-cell.boom {
  background: linear-gradient(180deg, #ff8787, #e03131);
  box-shadow: 0 0 14px rgba(255, 107, 107, 0.8);
}
.mn-cell.flag { font-size: clamp(10px, 2.2vw, 16px); }

/* ================= 水杯排序 ================= */
/* 实验室舞台：渐变桌面 + 气氛光斑 */
.ws-scene {
  position: relative;
  border-radius: 26px;
  padding: 22px 14px 28px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(var(--g-rgb, 21, 170, 191), 0.14), transparent 55%),
    radial-gradient(60% 55% at 10% 100%, rgba(var(--g-rgb, 21, 170, 191), 0.10), transparent 60%),
    radial-gradient(50% 50% at 92% 18%, rgba(132, 94, 247, 0.08), transparent 60%),
    var(--surface);
  border: 1.5px solid rgba(var(--g-rgb, 21, 170, 191), 0.25);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  overflow: hidden;
}

[data-theme="dark"] .ws-scene {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(var(--g-rgb, 21, 170, 191), 0.15), transparent 55%),
    radial-gradient(60% 55% at 10% 100%, rgba(var(--g-rgb, 21, 170, 191), 0.10), transparent 60%),
    radial-gradient(50% 50% at 92% 18%, rgba(132, 94, 247, 0.10), transparent 60%),
    #151a23;
  border-color: rgba(var(--g-rgb, 21, 170, 191), 0.28);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* 归色进度条 */
.ws-progress {
  position: relative;
  width: min(100%, 320px);
  height: 15px;
  margin: 0 auto 20px;
  border-radius: 999px;
  background: rgba(var(--g-rgb, 21, 170, 191), 0.10);
  border: 1.5px solid rgba(var(--g-rgb, 21, 170, 191), 0.30);
}

.ws-progress i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #66d9e8, #15aabf, #0b7285);
  box-shadow: 0 0 8px rgba(21, 170, 191, 0.45);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.ws-progress em {
  position: absolute;
  inset: 0;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 13px;
  text-align: center;
  color: var(--text-2);
}

/* 杯架区 */
.ws-board {
  position: relative;
  width: min(100%, 620px);
  margin: 0 auto;
}

.ws-rack {
  --tw: 54px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 16px;
  justify-content: center;
  align-items: flex-end;
  min-height: 210px;
}

.ws-rack.ws-many { --tw: 44px; gap: 10px 12px; }

@media (max-width: 540px) {
  .ws-rack { --tw: 42px; gap: 10px; }
  .ws-rack.ws-many { --tw: 35px; gap: 8px; }
}

/* ---- 试管 ---- */
.ws-tube {
  position: relative;
  width: var(--tw);
  height: calc(var(--tw) * 3.8);
  display: flex;
  flex-direction: column-reverse;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform-origin: 50% 15%;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.15s;
  animation: wsIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--i, 0) * 24ms);
}

@keyframes wsIn {
  from { opacity: 0; transform: translateY(-14px); }
}

.ws-tube:focus-visible {
  outline: 3px solid rgba(var(--g-rgb, 21, 170, 191), 0.55);
  outline-offset: 4px;
  border-radius: 14px;
}

/* 地面椭圆投影 */
.ws-shadow {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -8px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(16, 24, 40, 0.25), transparent 68%);
  transition: transform 0.2s, opacity 0.2s;
}

[data-theme="dark"] .ws-shadow {
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6), transparent 70%);
}

/* 玻璃管身：高光 + 开口感 */
.ws-glass {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column-reverse;
  border: 2.5px solid rgba(148, 163, 184, 0.55);
  border-radius: 9px 9px calc(var(--tw) / 2 - 2px) calc(var(--tw) / 2 - 2px);
  background:
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.50) 0 7%,
      rgba(255, 255, 255, 0.05) 18%,
      rgba(255, 255, 255, 0.28) 32%,
      rgba(255, 255, 255, 0.03) 55%,
      rgba(255, 255, 255, 0.20) 76%,
      rgba(255, 255, 255, 0.02)),
    rgba(var(--g-rgb, 21, 170, 191), 0.05);
  box-shadow:
    inset 0 -10px 16px rgba(255, 255, 255, 0.22),
    inset 0 10px 18px rgba(16, 24, 40, 0.05),
    0 10px 22px rgba(16, 24, 40, 0.15);
  transition: border-color 0.18s, box-shadow 0.18s;
}

[data-theme="dark"] .ws-glass {
  border-color: rgba(148, 163, 184, 0.38);
  background:
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.14) 0 7%,
      rgba(255, 255, 255, 0.02) 18%,
      rgba(255, 255, 255, 0.09) 32%,
      rgba(255, 255, 255, 0.02) 55%,
      rgba(255, 255, 255, 0.07) 76%,
      rgba(255, 255, 255, 0.01)),
    rgba(var(--g-rgb, 21, 170, 191), 0.06);
}

/* 管口椭圆高光 */
.ws-glass::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  top: -1px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent 80%);
  pointer-events: none;
}

/* ---- 水体：液面切面 + 双向光泽 ---- */
.ws-water {
  flex: 1;
  position: relative;
  width: 100%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, 0.15)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.10), rgba(255, 255, 255, 0.16) 30%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.12)),
    var(--c);
  transform-origin: 50% 100%;
}

/* 液面椭圆切面 */
.ws-water::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  top: 0;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.04) 75%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.10);
}

/* 底层水体随管底收圆 */
.ws-water:first-child {
  border-radius: 6px 6px calc(var(--tw) / 2 - 5px) calc(var(--tw) / 2 - 5px);
}

/* ---- 交互态 ---- */
.ws-tube:hover:not(.sel):not(.pouring) { transform: translateY(-5px); }
.ws-tube:hover .ws-glass { border-color: rgba(var(--g-rgb, 21, 170, 191), 0.7); }

/* 选中：整体上浮，顶层水体升出管口 */
.ws-tube.sel { transform: translateY(-12px); }

.ws-tube.sel .ws-glass {
  border-color: rgba(var(--g-rgb, 21, 170, 191), 0.95);
  box-shadow:
    0 14px 28px rgba(var(--g-rgb, 21, 170, 191), 0.35),
    inset 0 -10px 16px rgba(255, 255, 255, 0.22);
}

.ws-tube.sel .ws-shadow { transform: scaleX(0.55); opacity: 0.55; }

.ws-tube.sel .ws-water:last-child {
  animation: wsLift 0.24s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  filter: drop-shadow(0 8px 8px rgba(16, 24, 40, 0.28));
}

@keyframes wsLift {
  from { transform: translateY(0); }
  to { transform: translateY(calc(var(--tw) * -0.66)); }
}

/* 倒水：抬起并朝目标倾斜 */
.ws-tube.pouring {
  transform: translateY(-28px) rotate(var(--tilt, -16deg));
  z-index: 4;
}

.ws-tube.pouring .ws-shadow { transform: scaleX(0.5); opacity: 0.4; }

/* 目标杯进水微晃 */
.ws-tube.receiving .ws-water:last-child { animation: wsSplash 0.34s ease; }

@keyframes wsSplash {
  35% { transform: scaleY(0.8) scaleX(1.07); }
}

/* ---- 归位（整杯同色）---- */
.ws-tube.full-same .ws-glass {
  border-color: var(--success);
  box-shadow:
    0 0 0 3px rgba(47, 154, 68, 0.16),
    0 0 22px rgba(47, 154, 68, 0.40),
    inset 0 -10px 16px rgba(255, 255, 255, 0.22);
}

.ws-tube.full-same .ws-shadow {
  background: radial-gradient(ellipse at center, rgba(47, 154, 68, 0.35), transparent 70%);
}

/* 归位扫光 */
.ws-tube.full-same .ws-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.38) 46%, transparent 60%);
  background-size: 260% 100%;
  animation: wsShine 1.8s linear infinite;
  pointer-events: none;
}

@keyframes wsShine {
  from { background-position: 120% 0; }
  to { background-position: -140% 0; }
}

/* 归位徽章 */
.ws-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  width: 25px;
  height: 25px;
  margin-left: -12.5px;
  border-radius: 50%;
  background: linear-gradient(180deg, #69db7c, #2f9e44);
  color: #fff;
  font-style: normal;
  font-size: 14px;
  font-weight: 800;
  line-height: 25px;
  text-align: center;
  box-shadow: 0 3px 8px rgba(47, 154, 68, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  opacity: 0;
  transform: translateY(8px) scale(0.3);
  pointer-events: none;
  z-index: 3;
}

.ws-tube.full-same .ws-badge {
  animation: wsBadge 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes wsBadge {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- 特效层：水流 / 彩带 ---- */
.ws-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

.ws-stream {
  position: absolute;
  height: 7px;
  border-radius: 4px;
  transform-origin: 0 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 45%), var(--c);
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.22);
  animation: wsStream 0.3s ease forwards;
}

.ws-stream::after {
  content: '';
  position: absolute;
  right: -3px;
  top: -3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--c);
  filter: blur(1px);
  opacity: 0.85;
}

@keyframes wsStream {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0); }
}

.ws-confetti {
  position: absolute;
  top: -14px;
  width: 8px;
  height: 13px;
  border-radius: 2px;
  opacity: 0;
  animation: wsConfetti 1s cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
}

@keyframes wsConfetti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--dx, 0), 340px) rotate(var(--dr, 540deg)); }
}

/* 过关全体起跳 */
.ws-board.won .ws-tube { animation: wsWinJump 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ws-board.won .ws-tube:nth-child(2n) { animation-delay: 0.07s; }
.ws-board.won .ws-tube:nth-child(3n) { animation-delay: 0.14s; }

@keyframes wsWinJump {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-20px); }
}

/* 步数跳动 */
#wsMovesBox strong { display: block; }
#wsMovesBox.bump strong { animation: wsBump 0.28s ease; }

@keyframes wsBump {
  40% { transform: scale(1.3); }
}

.game-wrap .btn:disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* ================= 数字合成 ================= */
.mg-tray {
  display: flex;
  gap: 28px;
  justify-content: center;
  margin-bottom: 14px;
}

.mg-piece-wrap { text-align: center; }
.mg-piece-wrap small { display: block; color: var(--text-2); font-size: 12px; margin-bottom: 6px; }

.mg-piece {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 800;
  color: #101623;
  background-image: var(--tile-gloss);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28), inset 0 -3px 0 rgba(0, 0, 0, 0.15);
}

.mg-piece.mg-next { width: 44px; height: 44px; font-size: 20px; opacity: 0.75; }

.mg-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
  width: min(100%, 480px);
  margin: 0 auto;
  padding: 8px;
  background: linear-gradient(160deg, rgba(76, 110, 245, 0.1), rgba(132, 94, 247, 0.1));
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  user-select: none;
}

.mg-cell {
  aspect-ratio: 1;
  border: 2px dashed var(--border);
  border-radius: 10px;
  background: var(--surface);
  font-size: clamp(12px, 3.2vw, 19px);
  font-weight: 800;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: transform 0.1s, box-shadow 0.15s, border-color 0.15s;
}

.mg-cell:not(.filled):hover { border-color: var(--primary); background: var(--surface-2); }

.mg-cell.filled {
  border: none;
  cursor: default;
  background-image: var(--tile-gloss);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 -2px 0 rgba(0, 0, 0, 0.14);
  animation: mgPop 0.18s ease;
}

@keyframes mgPop {
  0% { transform: scale(0.6); }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ---- 合成特效层：4→5→6→7 逐级升级 ---- */
.mg-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

/* 飘字（等级越高越大越华丽） */
.mg-float {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 15px;
  font-weight: 900;
  color: #ffd43b;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  animation: mgFloat 0.95s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.mg-float.t5 { font-size: 16px; color: #ffe066; }
.mg-float.t6 { font-size: 18px; color: #ffe066; text-shadow: 0 0 10px rgba(255, 212, 59, 0.85), 0 2px 8px rgba(0, 0, 0, 0.55); }
.mg-float.t7 { font-size: 20px; color: #faa2c0; text-shadow: 0 0 14px #f783ac, 0 2px 8px rgba(0, 0, 0, 0.55); }
.mg-float.t8 { font-size: 22px; color: #66d9e8; text-shadow: 0 0 16px #22b8cf, 0 2px 8px rgba(0, 0, 0, 0.55); }
.mg-float.t9 { font-size: 27px; color: #ffe066; text-shadow: 0 0 18px #ff922b, 0 0 44px #ff6b6b, 0 2px 8px rgba(0, 0, 0, 0.55); }

@keyframes mgFloat {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.5); }
  18% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -180%) scale(1); }
}

/* 冲击波光环（--ring-max 控制扩散半径） */
.mg-ring {
  --ring-max: 135px;
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid #ffd43b;
  box-shadow: 0 0 14px rgba(255, 212, 59, 0.8), inset 0 0 8px rgba(255, 212, 59, 0.6);
  animation: mgRing 0.65s ease-out forwards;
}
.mg-ring.t5 { --ring-max: 95px; border-color: rgba(255, 255, 255, 0.92); box-shadow: 0 0 10px rgba(255, 255, 255, 0.7); }
.mg-ring.t6 { --ring-max: 140px; }
.mg-ring.t7 { --ring-max: 185px; border-color: #f783ac; box-shadow: 0 0 18px rgba(247, 131, 172, 0.9), inset 0 0 10px rgba(247, 131, 172, 0.7); }
.mg-ring.t8 { --ring-max: 240px; border-color: #66d9e8; box-shadow: 0 0 22px rgba(102, 217, 232, 0.95), inset 0 0 12px rgba(102, 217, 232, 0.75); }
.mg-ring.t9 { --ring-max: 340px; border-width: 4px; border-color: #fff; box-shadow: 0 0 26px rgba(255, 255, 255, 0.95), 0 0 64px rgba(255, 146, 43, 0.8); animation-duration: 0.8s; }
/* 全屏级巨环：从爆点荡满整个视口 */
.mg-ring.big { --ring-max: 150vmax; border-width: 4px; animation-duration: 1.05s; }

@keyframes mgRing {
  0% { width: 14px; height: 14px; opacity: 1; }
  100% { width: var(--ring-max); height: var(--ring-max); opacity: 0; }
}

/* 星尘 / 火焰粒子 */
.mg-spark {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px currentColor;
  animation: mgSpark 0.75s cubic-bezier(0.1, 0.6, 0.3, 1) forwards;
}
.mg-spark.fire { width: 12px; height: 12px; }

@keyframes mgSpark {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2); }
}

/* 爆炸火球核心 */
.mg-flash {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff 0%, #ffe066 30%, #ff922b 60%, rgba(255, 107, 107, 0) 75%);
  animation: mgFlash 0.55s ease-out forwards;
}

@keyframes mgFlash {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.4); }
  60% { opacity: 1; transform: translate(-50%, -50%) scale(4.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(5); }
}

/* 全屏级火球 */
.mg-flash.big { width: 56px; height: 56px; animation: mgFlashBig 0.9s ease-out forwards; }

@keyframes mgFlashBig {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.3); }
  55% { opacity: 0.95; transform: translate(-50%, -50%) scale(7); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(8.5); }
}

/* 被炸格子的碎片飞散 */
.mg-debris {
  position: absolute;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(12px, 3.2vw, 19px);
  font-weight: 800;
  background-image: var(--tile-gloss);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
  animation: mgDebris 0.65s cubic-bezier(0.15, 0.65, 0.4, 1) forwards;
}

@keyframes mgDebris {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 70px)) rotate(var(--rot)) scale(0.4); }
}

/* 合成 9 爆炸时棋盘震动 */
.mg-quake { animation: mgQuake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97); }

@keyframes mgQuake {
  10%, 90% { transform: translate(-2px, 1px); }
  20%, 80% { transform: translate(3px, -2px); }
  30%, 50%, 70% { transform: translate(-4px, 2px); }
  40%, 60% { transform: translate(4px, -1px); }
}

/* ---- 全屏特效层（8 级涟漪 / 9 级开花） ---- */
.mg-screen-fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.mg-screen-fx .mg-spark { width: 13px; height: 13px; }
.mg-screen-fx .mg-spark.fire { width: 17px; height: 17px; }

/* 烟花弹：拖光尾升空 */
.mg-rocket {
  position: absolute;
  width: 5px;
  height: 28px;
  border-radius: 4px;
  background: linear-gradient(180deg, #fff 0%, var(--rk, #ffd43b) 55%, transparent 100%);
  box-shadow: 0 0 14px var(--rk, #ffd43b), 0 0 30px var(--rk, #ffd43b);
  transform: translate(-50%, -50%);
  animation: mgRocket 700ms cubic-bezier(0.3, 0.5, 0.55, 1) forwards;
}

@keyframes mgRocket {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  10% { opacity: 1; }
  100% { opacity: 1; transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, -200px))) scale(1); }
}

/* 烟花爆开粒子：径向飞散 + 后段重力下坠熄灭 */
.mg-fw {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px currentColor, 0 0 24px currentColor;
  animation: mgFw 1.5s cubic-bezier(0.12, 0.62, 0.3, 1) forwards;
}

.mg-fw.core { width: 12px; height: 12px; }

/* 小号烟花（5/6 级棋盘内）：弹体与爆开都缩小，下坠幅度收敛 */
.mg-rocket.mini {
  width: 4px;
  height: 16px;
  box-shadow: 0 0 8px var(--rk, #ffd43b), 0 0 18px var(--rk, #ffd43b);
}

.mg-fw.mini {
  width: 6px;
  height: 6px;
  box-shadow: 0 0 6px currentColor, 0 0 14px currentColor;
  animation-name: mgFwMini;
  animation-duration: 1.1s;
}

.mg-fw.mini.core { width: 9px; height: 9px; }

@keyframes mgFwMini {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  55% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 46px)) scale(0.1); }
}

@keyframes mgFw {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  55% { opacity: 1; }
  68% { opacity: 0.8; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 1.5vmax)) scale(1); }
  82% { opacity: 0.45; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 8vmax)) scale(0.1); }
}

/* 全屏白闪 */
.mg-blitz {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 230, 150, 0.5) 40%, rgba(255, 146, 43, 0.22) 65%, transparent 85%);
  animation: mgBlitz 0.5s ease-out forwards;
}

@keyframes mgBlitz {
  0% { opacity: 0; }
  12% { opacity: 1; }
  100% { opacity: 0; }
}

/* 居中爆字 */
.mg-boomword {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  font-size: clamp(34px, 8vw, 64px);
  font-weight: 900;
  color: #ffe066;
  text-shadow: 0 0 24px #ff922b, 0 0 64px #ff6b6b, 0 4px 12px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  animation: mgBoomword 1.5s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

@keyframes mgBoomword {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.25); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
  24% { transform: translate(-50%, -50%) scale(1); }
  72% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -56%) scale(1.04); }
}

/* 9 级格子：呼吸金光 */
.mg-cell.t9 { animation: mgNineGlow 1.5s ease-in-out infinite; }

@keyframes mgNineGlow {
  0%, 100% { box-shadow: 0 0 14px rgba(252, 196, 25, 0.75), 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 -2px 0 rgba(0, 0, 0, 0.14); }
  50% { box-shadow: 0 0 32px rgba(252, 196, 25, 1), 0 0 64px rgba(255, 146, 43, 0.55), 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 -2px 0 rgba(0, 0, 0, 0.14); }
}

/* ================= 数字华容道 ================= */
.sl-board {
  display: grid;
  gap: 8px;
  width: min(100%, 440px);
  margin: 0 auto;
  padding: 12px;
  background: linear-gradient(160deg, #2b3348, #1c2233);
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(16, 20, 35, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  user-select: none;
  touch-action: manipulation;
}

.sl-cell {
  aspect-ratio: 1;
  border: none;
  border-radius: 12px;
  background-image: linear-gradient(180deg, #5c7cfa, #3b5bdb), var(--tile-gloss);
  box-shadow: 0 5px 12px rgba(15, 27, 84, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  font-size: clamp(20px, 6vw, 34px);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: transform 0.08s, box-shadow 0.15s;
}

.sl-board.sl-big .sl-cell { font-size: clamp(15px, 4.5vw, 26px); border-radius: 9px; }

.sl-cell:not(.sl-blank):hover { filter: brightness(1.1); }
.sl-cell:not(.sl-blank):active { transform: scale(0.94); }

.sl-cell.sl-blank {
  background-image: none;
  background-color: rgba(0, 0, 0, 0.32);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.4);
  cursor: default;
}

.sl-cell.sl-ok {
  background-image: linear-gradient(180deg, #ffd93b, #f08c00), var(--tile-gloss);
  color: #4d3807;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  box-shadow: 0 5px 14px rgba(240, 140, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* ================= 俄罗斯方块 ================= */
.tt-layout {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: flex-start;
}

.tt-side { text-align: center; }
.tt-side small { display: block; color: var(--text-2); font-size: 11px; margin-bottom: 6px; letter-spacing: 2px; }

.tt-mini {
  display: grid;
  gap: 2px;
  min-width: 64px;
  min-height: 40px;
  padding: 10px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  justify-content: center;
  align-content: center;
}

.tt-mini-cell { width: 14px; height: 14px; border-radius: 4px; background-image: var(--tile-gloss); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.22); }

.tt-board {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  width: min(60vw, 260px);
  background: linear-gradient(180deg, #131826, #0b0f18);
  border: 1px solid #263048;
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 14px 34px rgba(6, 10, 20, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  touch-action: none;
  user-select: none;
}

.tt-cell { aspect-ratio: 1; border-radius: 3px; background: rgba(255, 255, 255, 0.045); }
.tt-cell.filled {
  background-image: var(--tile-gloss);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.tt-cell.ghost { opacity: 0.3; }

/* ================= 滑块出逃 ================= */
.ub-board-wrap {
  position: relative;
  width: min(100%, 440px);
  margin: 0 auto;
}

.ub-board {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 6px;
  aspect-ratio: 1;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(160deg, #232b3e, #151b29);
  background-size: calc(100% / 6) calc(100% / 6);
  border: 1px solid #2c3650;
  border-radius: 20px;
  padding: 10px;
  box-shadow: 0 14px 34px rgba(6, 10, 20, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  touch-action: none;
  user-select: none;
}

.ub-exit {
  position: absolute;
  right: -34px;
  top: calc((100% / 6) * 2);
  height: calc(100% / 6);
  display: flex;
  align-items: center;
  font-size: 26px;
  color: #ff8787;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(255, 107, 107, 0.6);
}

.ub-block {
  border-radius: 10px;
  cursor: grab;
  background-image: var(--tile-gloss);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: box-shadow 0.15s;
  touch-action: none;
}

.ub-block:active { cursor: grabbing; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45), inset 0 -3px 0 rgba(0, 0, 0, 0.16); }

.ub-target {
  background-color: #e03131;
  background-image: linear-gradient(135deg, #ff6b6b, #e8590c), var(--tile-gloss);
  animation: ubPulse 1.8s ease-in-out infinite;
}

@keyframes ubPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255, 107, 107, 0.45), inset 0 -3px 0 rgba(0, 0, 0, 0.16); }
  50% { box-shadow: 0 0 26px rgba(255, 107, 107, 0.85), inset 0 -3px 0 rgba(0, 0, 0, 0.16); }
}

/* ================= 记忆翻牌（寻宝魔法风） ================= */
/* 牌桌：深色绒面桌 + 中央聚光，衬托彩色卡牌 */
.mm-board {
  position: relative;
  display: grid;
  gap: 14px;
  width: min(100%, 560px);
  margin: 0 auto;
  padding: 20px;
  border-radius: 28px;
  background:
    radial-gradient(95% 75% at 50% 26%, rgba(var(--g-rgb), 0.32), transparent 62%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, var(--g-velvet), #16101f);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.08),
    inset 0 -8px 20px rgba(0, 0, 0, 0.35),
    0 22px 44px rgba(15, 23, 42, 0.35);
  user-select: none;
}

.mm-board.mm-wide { width: min(100%, 700px); }

/* 牌背：糖果魔法卡——糖果斜纹 + 魔法阵 + 发光宝石 */
.mm-card {
  position: relative;
  aspect-ratio: 3 / 3.4;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 18px;
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.09) 0 7px, transparent 7px 14px),
    linear-gradient(160deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 42%),
    linear-gradient(200deg, var(--g-accent), var(--g-btn-bottom) 60%, var(--g-velvet));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -9px 16px rgba(0, 0, 0, 0.22),
    0 9px 22px rgba(0, 0, 0, 0.42),
    0 0 16px rgba(var(--g-rgb), 0.22);
  font-size: clamp(28px, 8vw, 52px);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease;
}

/* 入场动画只挂 mm-enter 期间（renderBoard 后自动撤销）：
   若常驻在 .mm-card 上，goLive 移除 .mm-swapping（animation:none）时 mmIn 会全桌重播 */
.mm-board.mm-enter .mm-card:not(.open) {
  animation: mmIn 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  animation-delay: calc(var(--i, 0) * 26ms);
}

/* 魔法阵虚线圆环 */
.mm-card::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.42);
  transition: transform 0.45s ease, border-color 0.2s ease;
  pointer-events: none;
}

/* 中央发光宝石 */
.mm-card::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 26%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.18) 52%, rgba(255, 255, 255, 0.55)),
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.95), transparent 55%);
  box-shadow:
    0 0 14px rgba(255, 255, 255, 0.5),
    0 0 32px rgba(var(--g-rgb), 0.45),
    inset 0 0 10px rgba(255, 255, 255, 0.55);
  transition: box-shadow 0.2s ease;
  pointer-events: none;
}

.mm-card:not(.open):not(.done):hover {
  transform: translateY(-5px) rotate(-2.5deg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -9px 16px rgba(0, 0, 0, 0.2),
    0 14px 28px rgba(0, 0, 0, 0.45),
    0 0 26px rgba(var(--g-rgb), 0.4);
}
.mm-card:not(.open):not(.done):hover::before {
  transform: translate(-50%, -50%) rotate(28deg);
  border-color: rgba(255, 255, 255, 0.75);
}
.mm-card:not(.open):not(.done):hover::after {
  box-shadow:
    0 0 20px rgba(255, 255, 255, 0.75),
    0 0 44px rgba(var(--g-rgb), 0.6),
    inset 0 0 12px rgba(255, 255, 255, 0.7);
}

.mm-card:not(.open):not(.done):active {
  transform: translateY(-1px) scale(0.97);
  transition-duration: 0.08s;
}

/* 翻开：开出宝物——奶油糖纸底 + 主题色聚光 + 光环扩散 */
.mm-card.open {
  background:
    radial-gradient(70% 52% at 50% 58%, rgba(var(--g-rgb), 0.22), transparent 70%),
    linear-gradient(170deg, #fffef8, #fff2d2);
  border-color: rgba(var(--g-rgb), 0.55);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 9px 24px rgba(0, 0, 0, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.3);
  text-shadow: 0 3px 5px rgba(120, 80, 20, 0.28);
  animation: mmPop 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* 翻开瞬间的光环扩散 */
.mm-card.open::before {
  left: 50%;
  top: 50%;
  width: 74%;
  aspect-ratio: 1;
  border: 3px solid rgba(var(--g-rgb), 0.55);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.35);
  animation: mmRing 0.55s ease-out 0.04s;
}
.mm-card.open::after { display: none; }

@keyframes mmPop {
  0% { transform: scale(0.62); }
  62% { transform: scale(1.07); }
  100% { transform: scale(1); }
}

/* 配对完成：金光收集——金框 + 金晕 + 金菱角标 */
.mm-card.done {
  background:
    radial-gradient(70% 52% at 50% 58%, rgba(var(--g-rgb), 0.16), transparent 70%),
    linear-gradient(170deg, #fffef8, #fff2d2);
  border-color: #eec45f;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 0 0 1px rgba(238, 196, 95, 0.4),
    0 0 20px rgba(238, 196, 95, 0.45),
    0 4px 12px rgba(0, 0, 0, 0.35);
  opacity: 0.9;
  cursor: default;
  text-shadow: 0 3px 5px rgba(120, 80, 20, 0.2);
  animation: mmDone 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* 右上角金色菱形收集徽章 */
.mm-card.done::before {
  left: auto;
  top: 9px;
  right: 9px;
  width: 11px;
  height: 11px;
  aspect-ratio: auto;
  transform: rotate(45deg);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 3px;
  background: linear-gradient(135deg, #ffeaa6, #e8b34b);
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.3),
    0 0 9px rgba(238, 196, 95, 0.9);
  animation: mmStar 0.3s 0.12s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.mm-card.done::after { display: none; }

@keyframes mmDone {
  0% { transform: scale(1); }
  45% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

@keyframes mmRing {
  0% { transform: translate(-50%, -50%) scale(0.35); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(1.35); opacity: 0; }
}

@keyframes mmStar {
  0% { transform: rotate(45deg) scale(0); }
  70% { transform: rotate(45deg) scale(1.35); }
  100% { transform: rotate(45deg) scale(1); }
}

@keyframes mmIn {
  0% { transform: scale(0.4) translateY(10px); opacity: 0; }
  70% { transform: scale(1.05) translateY(0); opacity: 1; }
  100% { transform: scale(1); }
}

/* 深色模式：牌桌本就是深色绒面，仅压深底色 */
[data-theme="dark"] .mm-board {
  background:
    radial-gradient(95% 75% at 50% 26%, rgba(var(--g-rgb), 0.34), transparent 62%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, var(--g-velvet), #100b18);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.06),
    inset 0 -8px 20px rgba(0, 0, 0, 0.45),
    0 22px 44px rgba(0, 0, 0, 0.55);
}

/* ================= 记忆侦探（复用 mm-board / mm-card 皮肤） ================= */
/* 阶段提示：亮牌读秒 / 盖上后提示 */
.mp-phase {
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  color: var(--g-accent-deep);
  margin: 0 0 10px;
  min-height: 22px;
}

/* 读秒大数字：醒目红色，整数倒计，每秒弹跳一次 */
.mp-phase .mp-sec {
  display: inline-block;
  min-width: 30px;
  padding: 0 6px;
  font-size: 24px;
  font-weight: 800;
  color: #fa5252;
  vertical-align: -2px;
  animation: mpSecPop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes mpSecPop {
  0% { transform: scale(1.55); }
  70% { transform: scale(0.92); }
  100% { transform: scale(1); }
}

/* GO 开考令：读秒完毕弹出，绿底白字甩入 */
.mp-phase .mp-go {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 12px;
  border-radius: 10px;
  background: #2f9e44;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 1px;
  box-shadow: 0 3px 10px rgba(47, 158, 68, 0.5);
  animation: mpGoPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes mpGoPop {
  0% { transform: scale(0.2) rotate(-10deg); }
  70% { transform: scale(1.18) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

/* 配对成功的鼓励飘字：从牌中心弹出、上飘淡出 */
.mm-card .mp-cheer {
  position: absolute;
  left: 50%;
  top: 45%;
  z-index: 3;
  pointer-events: none;
  white-space: nowrap;
  font-size: 22px;
  font-weight: 900;
  color: #2f9e44;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 1px 0 #fff;
  animation: mpCheerUp 0.85s ease-out forwards;
}

@keyframes mpCheerUp {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  30% { transform: translate(-50%, -62%) scale(1.3); opacity: 1; }
  60% { transform: translate(-50%, -70%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -110%) scale(0.95); opacity: 0; }
}

/* 失误计数盒：红色数字，翻错时闪跳 */
.mp-err strong { color: #fa5252; }
.mp-err.flash strong { animation: mpErrFlash 0.4s ease; }

@keyframes mpErrFlash {
  30% { transform: scale(1.35); color: #e03131; }
}

/* 迷雾牌：亮牌阶段蒙雾遮脸，只能靠排除法推理（玩家翻开的瞬间雾散） */
.mm-card.mp-fog.open {
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, #c9d4de, #93a3b4 55%, #6f7f90);
  color: rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 0 20px rgba(255, 255, 255, 0.4),
    0 6px 16px rgba(0, 0, 0, 0.4);
  animation: mmPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), mpFogBreath 2.2s ease-in-out 0.3s infinite;
}

@keyframes mpFogBreath {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.14); }
}

/* 调包警示：小偷换牌时整张牌桌抖一下 */
@keyframes mpShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}
.mm-board.mp-shake { animation: mpShake 0.45s ease; }

/* 调包轨迹层：金线从源牌弯到目标牌，虚线流动 + 渐显渐隐 */
.mp-trails {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
  overflow: visible;
}

.mp-trail {
  fill: none;
  stroke: #fab005;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 7 8;
  filter: drop-shadow(0 0 5px rgba(250, 176, 5, 0.85));
  opacity: 0;
  animation: mpTrailIn 0.3s ease-out both, mpTrailFlow 0.6s linear infinite, mpTrailOut 0.4s ease 1.85s both;
}

.mp-trail-dot {
  fill: #ffd43b;
  stroke: #e8590c;
  stroke-width: 2;
  opacity: 0;
  animation: mpTrailIn 0.3s ease-out 0.25s both, mpTrailOut 0.4s ease 1.85s both;
}

/* 调包方向箭头：金线末端沿切向指向落点 */
.mp-tarrow {
  fill: #ffd43b;
  stroke: #e8590c;
  stroke-width: 1.5;
  filter: drop-shadow(0 0 4px rgba(250, 176, 5, 0.9));
  opacity: 0;
  animation: mpTrailIn 0.3s ease-out 0.25s both, mpTrailOut 0.4s ease 1.85s both;
}

@keyframes mpTrailIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mpTrailOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes mpTrailFlow { to { stroke-dashoffset: -15; } }

/* ================= 关卡选择面板 ================= */
.mp-levels-overlay {
  position: fixed;
  inset: 0;
  z-index: 88;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(10, 8, 18, 0.74);
  backdrop-filter: blur(4px);
  animation: mpLvFade 0.15s ease; /* 纯淡入：不能用带 transform 的入场动画，否则动画期间格子命中区错位、点击选错关 */
}
@keyframes mpLvFade { from { opacity: 0; } to { opacity: 1; } }

.mp-levels {
  width: min(720px, 100%);
  max-height: 84vh;
  overflow-y: auto;
  padding: 20px 22px 24px;
  border-radius: 20px;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(var(--g-rgb), 0.25), transparent 60%),
    linear-gradient(180deg, var(--g-velvet), #120d1c);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);
}

.mp-lv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.mp-lv-head h3 { margin: 0; color: var(--g-accent); font-size: 20px; }

.mp-lv-close {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.mp-lv-close:hover { background: rgba(255, 255, 255, 0.24); }

.mp-lv-sub { margin: 0 0 14px; font-size: 12px; color: rgba(255, 255, 255, 0.55); }

.mp-lv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
}

.mp-lv-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 13px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  color: #fff;
  cursor: pointer;
  overflow: hidden; /* 长标签小字裁剪在自家格子内，防止溢出盖住邻格导致点错 */
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.16s ease;
}
.mp-lv-cell b { font-size: 19px; }
.mp-lv-cell small { font-size: 10px; opacity: 0.72; white-space: nowrap; }
.mp-lv-cell:hover:not(.locked) {
  /* 不用 transform 位移/缩放：点击瞬间命中区会跟着移动，相邻格子（如 109/110）易点错；改纯视觉高亮 */
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4), 0 0 14px rgba(var(--g-rgb), 0.5);
  border-color: rgba(var(--g-rgb), 0.8);
}
.mp-lv-cell.cur {
  border-color: #fab005;
  box-shadow: 0 0 0 1px #fab005, 0 0 16px rgba(250, 176, 5, 0.55);
}
.mp-lv-cell.locked {
  opacity: 0.38;
  cursor: not-allowed;
  filter: grayscale(0.7);
}

/* 头部选关按钮 */
.mp-lvbtn { padding: 8px 14px; font-size: 13px; }

/* 局部旋转轨迹：青色弧线（流动虚线）+ 终点箭头，组成风车图形 */
.mp-strail {
  fill: none;
  stroke: #22b8cf;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 9 7;
  filter: drop-shadow(0 0 6px rgba(34, 184, 207, 0.9));
  opacity: 0;
  animation: mpTrailIn 0.25s ease-out both, mpTrailFlow 0.55s linear infinite, mpTrailOut 0.4s ease 1.55s both;
}

.mp-sarrow {
  fill: #22b8cf;
  filter: drop-shadow(0 0 4px rgba(34, 184, 207, 0.9));
  opacity: 0;
  animation: mpTrailIn 0.25s ease-out 0.2s both, mpTrailOut 0.4s ease 1.55s both;
}

/* 局部旋转区块高亮框：青色虚线框脉冲 */
.mp-region {
  position: absolute;
  border: 3px dashed #22b8cf;
  border-radius: 16px;
  pointer-events: none;
  z-index: 5;
  animation: mpRegionPulse 0.65s ease 3;
}

@keyframes mpRegionPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 184, 207, 0); }
  50% { box-shadow: 0 0 26px 7px rgba(34, 184, 207, 0.75); }
}

/* 局部旋转的牌：青色描边标记 */
.mm-card.mp-spinmark {
  outline: 3px solid #22b8cf;
  outline-offset: 2px;
  z-index: 4;
}

/* 演出期间：禁入场动画（keyframes 会覆盖 FLIP 内联 transform）；禁指针（:hover/:active 常驻 transform 也会盖掉飞行，pointer-events:none 后这两态不再匹配） */
.mm-board.mm-swapping .mm-card { animation: none !important; pointer-events: none; }
/* 两两互换用内联 transform 直接钉位，不走 CSS 过渡（飞行交给 WAAPI 多关键帧弧线）；
   .mp-fly 保留 transition 给局部旋转的 CSS-FLIP 用 */
.mm-board.mm-swapping .mm-card:not(.mp-fly) { transition: none !important; }

/* 正在对飞的互换对：金色描边，成对可辨 */
.mm-card.mp-pair { outline: 3px solid #fab005; outline-offset: 2px; z-index: 4; }

/* 记忆侦探：时间条加高并叠倒计时数字（只作用于 mp-hx，不影响其他游戏的细条） */
.hx-bar.mp-hx { position: relative; height: 20px; }
.mp-bar-timer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
  pointer-events: none;
}
.mp-bar-timer.urgent { color: #ffd7d7; animation: mpTimerPulse 0.9s ease-in-out infinite; }
@keyframes mpTimerPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); text-shadow: 0 0 10px rgba(255, 107, 107, 0.95), 0 1px 3px rgba(0, 0, 0, 0.75); }
}

/* 旋转移位飞行：盖着的牌带倾斜滑向新位，轻微过冲更有翻滚感 */
.mm-card.mp-fly {
  z-index: 4;
  transition: transform 1.35s cubic-bezier(0.45, 0.05, 0.3, 1.18);
}

/* 旋转编号徽标：演出期间贴在牌角，写明 旧位→新位 */
.mp-tag {
  position: absolute;
  right: 4px;
  bottom: 3px;
  z-index: 7;
  padding: 0 5px;
  border-radius: 8px;
  background: rgba(10, 8, 18, 0.82);
  border: 1px solid rgba(250, 176, 5, 0.7);
  color: #ffd43b;
  font-size: clamp(9px, 1.7vw, 12px);
  font-weight: 700;
  line-height: 1.6;
  pointer-events: none;
  white-space: nowrap;
  animation: mpTagIn 0.3s ease-out both;
}
/* 局部旋转用青色，与风车弧同色区分 */
.mp-tag.local { border-color: rgba(34, 184, 207, 0.75); color: #66d9e8; }
@keyframes mpTagIn { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }

/* 全局旋转中心指示：紫色 3/4 圆弧（流动虚线）+ 箭头 */
.mp-spinarc {
  fill: none;
  stroke: #e599f7;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 10 8;
  filter: drop-shadow(0 0 6px rgba(229, 153, 247, 0.9));
  opacity: 0;
  animation: mpTrailIn 0.25s ease-out both, mpTrailFlow 0.55s linear infinite, mpTrailOut 0.4s ease 1.1s both;
}

/* 镜像变换中轴虚线 */
.mp-maxis {
  stroke: #e599f7;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 5 9;
  filter: drop-shadow(0 0 5px rgba(229, 153, 247, 0.8));
  opacity: 0;
  animation: mpTrailIn 0.25s ease-out both, mpTrailOut 0.4s ease 1.1s both;
}

/* 全局旋转/镜像方向大箭头 */
.mp-garrow {
  fill: #e599f7;
  filter: drop-shadow(0 0 5px rgba(229, 153, 247, 0.9));
  opacity: 0;
  animation: mpTrailIn 0.25s ease-out 0.15s both, mpTrailOut 0.4s ease 1.1s both;
}

/* 被偷的牌：金色脉冲描边，提示轨迹两端 */
.mm-card.mp-thief {
  outline: 3px solid #fab005;
  outline-offset: 2px;
  z-index: 4;
  animation: mpThiefPulse 0.7s ease 3;
}

@keyframes mpThiefPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(250, 176, 5, 0); }
  50% { box-shadow: 0 0 22px 4px rgba(250, 176, 5, 0.8); }
}

/* 亮牌记忆阶段：牌不可点，卡牌逐张弹性亮出 */
.mm-board.mm-peeking .mm-card { pointer-events: none; }
.mm-board.mm-peeking .mm-card.open { animation-delay: calc(var(--i, 0) * 18ms); }

/* 亮牌阶段进度条切换为青色记忆条 */
.hx-fill.mp-peek {
  background: linear-gradient(90deg, #15aabf, #66d9e8);
  box-shadow: 0 0 10px rgba(21, 170, 191, 0.6);
}

/* 再看一眼按钮条 */
.mp-toolbar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* 记忆侦探道具栏：与「再看一眼」同排的小圆钮，显示库存数 */
.mp-items { display: inline-flex; gap: 7px; margin-left: 10px; }
.btn.mp-item {
  padding: 6px 11px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.btn.mp-item b { font-size: 11px; opacity: 0.75; font-variant-numeric: tabular-nums; }
.btn.mp-item.on {
  border-color: #845ef7;
  color: #6741d9;
  box-shadow: 0 0 0 2px rgba(132, 94, 247, 0.35);
}
.btn.mp-item:disabled { opacity: 0.45; }
[data-theme="dark"] .btn.mp-item.on { border-color: #9775fa; color: #b197fc; }
/* 透视模式：未翻的牌光标变放大镜；被偷看的牌紫色高亮 */
.mm-board.mp-lensing .mm-card:not(.open):not(.done) { cursor: zoom-in; }
.mm-card.mp-lens { outline: 3px solid #845ef7; outline-offset: 2px; z-index: 4; }

/* ================= 节奏混音台 ================= */
.mx-steps {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-bottom: 12px;
}

.mx-step {
  width: 12px;
  height: 8px;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: background 0.08s, transform 0.08s, box-shadow 0.08s;
}

.mx-step.beat { background: var(--border); }

.mx-step.on {
  background: linear-gradient(180deg, #9775fa, #5c7cfa);
  border-color: transparent;
  box-shadow: 0 0 12px rgba(124, 93, 250, 0.85);
  transform: scaleY(2);
}

.mx-stage {
  position: relative;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 24px 14px;
  background:
    radial-gradient(60% 90% at 50% 0%, rgba(124, 93, 250, 0.3), transparent 70%),
    radial-gradient(50% 80% at 15% 100%, rgba(38, 166, 222, 0.18), transparent 70%),
    linear-gradient(180deg, #191e30, #10141f);
  border: 1px solid #2b3350;
  border-radius: 20px;
  margin-bottom: 16px;
  min-height: 120px;
  box-shadow: 0 14px 36px rgba(6, 10, 20, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.mx-slot {
  width: 64px;
  height: 88px;
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.15s;
}

.mx-slot.on { border-style: solid; border-color: transparent; }

.mx-empty { color: rgba(255, 255, 255, 0.5); font-size: 22px; }

.mx-avatar {
  width: 58px;
  height: 82px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  background-image: var(--tile-gloss);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), inset 0 -4px 0 rgba(0, 0, 0, 0.16), inset 0 2px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.08s, filter 0.08s;
}

.mx-avatar.hit { transform: scale(1.14) translateY(-5px); filter: brightness(1.18); }

.mx-tray {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.mx-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px 6px 6px;
  border: 2px solid var(--border);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: opacity 0.15s, transform 0.12s, box-shadow 0.15s;
}

.mx-chip:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(16, 24, 40, 0.16); }
.mx-chip:active { transform: scale(0.96); }
.mx-chip.used { opacity: 0.35; }

.mx-group-label {
  width: 100%;
  text-align: center;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  margin: 8px 0 2px;
}

.mx-group-label:first-child { margin-top: 0; }

.mx-stage-hint {
  width: 100%;
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
  font-size: 14px;
  padding: 34px 0;
}

.mx-chip-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background-image: var(--tile-gloss);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ================= 方块消除 Block Blast ================= */
.bb-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
  width: min(100%, 440px);
  margin: 0 auto;
  padding: 8px;
  background: linear-gradient(160deg, #1c2438, #111726);
  border: 1px solid #2b3554;
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(6, 10, 20, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  user-select: none;
  touch-action: none;
}

.bb-cell {
  aspect-ratio: 1;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  transition: background 0.12s;
}

.bb-cell.filled {
  background-image: var(--tile-gloss);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  animation: mgPop 0.16s ease;
}

.bb-cell.pv-ok { outline: 2px solid rgba(255, 255, 255, 0.75); outline-offset: -2px; }
.bb-cell.pv-bad { outline: 2px solid rgba(255, 107, 107, 0.8); outline-offset: -2px; }

.bb-tray {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
  min-height: 108px;
}

.bb-slot {
  flex: 1;
  max-width: 130px;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--border);
  border-radius: 14px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  touch-action: none;
}

.bb-slot.sel {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(76, 110, 245, 0.25);
  transform: translateY(-4px);
}

.bb-slot.empty { opacity: 0.4; }

.bb-piece {
  display: grid;
  gap: 3px;
  pointer-events: none;
}

.bb-pcell {
  border-radius: 6px;
  background-image: var(--tile-gloss);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.bb-slot .bb-piece { min-width: 52px; min-height: 52px; }
.bb-slot .bb-pcell { min-width: 16px; min-height: 16px; }

.bb-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 120;
  pointer-events: none;
  display: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45));
  --bb-u: 40px;
}

.bb-piece.ghost .bb-pcell { width: var(--bb-u); height: var(--bb-u); }

.bb-flash {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff 0%, #ffe066 45%, transparent 70%);
  animation: bbFlash 0.45s ease-out forwards;
  pointer-events: none;
}

.bb-flash.hot {
  width: 46px;
  height: 46px;
  background: radial-gradient(circle, #fff 0%, #ff922b 45%, #ff6b6b 60%, transparent 75%);
}

@keyframes bbFlash {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.4); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
}

.bb-spark {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: bbSpark 0.55s ease-out forwards;
  pointer-events: none;
}

@keyframes bbSpark {
  0% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2); }
}

.bb-gain {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 19px;
  font-weight: 900;
  color: #ffe066;
  text-shadow: 0 0 14px rgba(255, 146, 43, 0.8), 0 2px 6px rgba(0, 0, 0, 0.6);
  animation: bbGain 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
  pointer-events: none;
  white-space: nowrap;
}

@keyframes bbGain {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.5); }
  18% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -160%) scale(1); }
}

/* ================= 合成大西瓜 ================= */
.sk-next {
  text-align: center;
  color: var(--text-2);
  font-size: 13px;
  margin-bottom: 10px;
}

.sk-fruitcvs {
  width: 48px;
  height: 48px;
  vertical-align: -16px;
  margin-left: 4px;
}

.sk-wrap {
  display: flex;
  justify-content: center;
}

.sk-wrap canvas {
  border-radius: 18px;
  border: 1px solid #2b3350;
  box-shadow: 0 14px 36px rgba(6, 10, 20, 0.45);
  touch-action: none;
  cursor: crosshair;
}

/* ================= 羊了个羊 ================= */
.sh-stage {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  overflow: hidden;
}

/* 棋盘：绒面质感（斜纹肌理 + 顶部天光 + 底部反光）+ 内阴影 + 边缘暗角 */
.sh-board {
  position: relative;
  width: 560px;
  height: 400px;
  transform-origin: 0 0;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(124, 93, 250, 0.18), transparent 55%),
    radial-gradient(90% 55% at 50% 110%, rgba(45, 212, 191, 0.07), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.016) 0 2px, transparent 2px 6px),
    linear-gradient(170deg, #1e2946, #101526);
  border: 1px solid #32405f;
  border-radius: 20px;
  box-shadow:
    0 18px 44px rgba(4, 8, 18, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -20px 36px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

/* 边缘暗角：纯视觉层，加深框子四周的纵深（牌在其下、点击不受影响） */
.sh-board::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 200;
  background: radial-gradient(115% 100% at 50% 45%, transparent 60%, rgba(5, 8, 16, 0.4) 100%);
}

/* 牌面：糖果块——顶面高光 + 厚度唇边 + 随层高增大的投影（--lift 由 JS 写入） */
.sh-tile {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  border: none;
  font-size: 30px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0) 36%),
    linear-gradient(180deg, #2c3959, #1f2a47);
  box-shadow:
    0 calc(4px + var(--lift, 0) * 1px) 0 rgba(9, 13, 24, 0.92),
    0 calc(9px + var(--lift, 0) * 3px) calc(14px + var(--lift, 0) * 4px) rgba(4, 8, 18, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 0.13s ease, filter 0.13s ease, box-shadow 0.13s ease;
  padding: 0;
  line-height: 1;
  user-select: none;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.32);
}

.sh-tile:hover {
  transform: translate(-50%, -56%) scale(1.05);
  filter: brightness(1.1);
}

.sh-tile:active {
  transform: translate(-50%, -51%) scale(0.94);
  box-shadow:
    0 1px 0 rgba(9, 13, 24, 0.92),
    0 3px 8px rgba(4, 8, 18, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* 洗牌后的逐张翻新动画 */
.sh-tile.deal {
  animation: shDeal 0.34s ease backwards;
}

@keyframes shDeal {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(-10deg); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1.06) rotate(2deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.sh-tile:hover { transform: translate(-50%, -53%) scale(1.06); }

.sh-tile.lock {
  filter: brightness(0.5) saturate(0.55);
  cursor: not-allowed;
}

/* 槽位托盘：内凹嵌槽 */
.sh-slots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
  padding: 10px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(180deg, #121828, #1a2238);
  border: 1px solid #2b3554;
  border-radius: 16px;
  box-shadow:
    inset 0 3px 9px rgba(0, 0, 0, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 1px 0 rgba(255, 255, 255, 0.03);
}

.sh-slots.sh-flash { animation: shFlash 0.4s ease; }

@keyframes shFlash {
  0% { box-shadow: 0 0 0 0 rgba(255, 212, 59, 0); }
  35% { box-shadow: 0 0 26px 4px rgba(255, 212, 59, 0.85); }
  100% { box-shadow: 0 0 0 0 rgba(255, 212, 59, 0); }
}

.sh-slot {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: rgba(9, 13, 23, 0.5);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

.sh-slot.fill {
  border-style: solid;
  border-color: transparent;
  background: var(--surface);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.3);
  animation: mgPop 0.18s ease;
}

/* 道具：胶囊图标按钮 + 金色角标计数 */
.sh-props {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
}

.sh-prop {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 15px;
  border: 1px solid #333f61;
  border-radius: 999px;
  background: linear-gradient(180deg, #252f4c, #1a2136);
  color: #e8edf8;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.13);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.sh-prop svg {
  display: block;
  color: #7e8bb8;
  transition: color 0.15s ease, transform 0.35s ease;
}

.sh-prop:hover {
  transform: translateY(-2px);
  border-color: #46557f;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.sh-prop:hover svg {
  color: #ffd43b;
  transform: rotate(-10deg) scale(1.08);
}

.sh-prop:active {
  transform: translateY(0) scale(0.95);
}

.sh-prop.off {
  opacity: 0.35;
  pointer-events: none;
  filter: saturate(0.4);
}

/* 次数角标：悬浮在按钮右上角 */
.sh-badge {
  position: absolute;
  top: -7px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #43320a;
  background: linear-gradient(180deg, #ffe08a, #f5b100);
  border: 2px solid #141a2c;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* 过关过场：金色横幅卡片，1.8s 后自动进入下一关（点击可跳过） */
.sh-clear {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 10, 22, 0.62);
  backdrop-filter: blur(3px);
  cursor: pointer;
  animation: shClearIn 0.25s ease;
}

.sh-clear-card {
  text-align: center;
  padding: 34px 48px;
  border-radius: 20px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255, 212, 59, 0.16), transparent 55%),
    linear-gradient(170deg, #232f52, #131a30);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 212, 59, 0.24);
  animation: shClearPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sh-clear-ttl {
  font-size: 26px;
  font-weight: 800;
  color: #ffd43b;
  letter-spacing: 2px;
  text-shadow: 0 2px 12px rgba(255, 200, 40, 0.35);
}

.sh-clear-sub {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #aab6dd;
}

.sh-clear-next {
  margin-top: 14px;
  font-size: 12px;
  color: #7e8bb8;
}

@keyframes shClearIn {
  from { opacity: 0; }
}

@keyframes shClearPop {
  from { transform: scale(0.7); opacity: 0; }
}

/* 选关面板：10 关网格，仅已解锁关卡可点 */
.sh-pick {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 10, 22, 0.62);
  backdrop-filter: blur(3px);
  animation: shClearIn 0.25s ease;
}

.sh-pick-card {
  text-align: center;
  padding: 26px 30px 22px;
  border-radius: 20px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(124, 93, 250, 0.14), transparent 55%),
    linear-gradient(170deg, #232f52, #131a30);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  animation: shClearPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sh-pick-ttl {
  font-size: 18px;
  font-weight: 800;
  color: #e8edfb;
  letter-spacing: 2px;
}

.sh-pick-grid {
  display: grid;
  grid-template-columns: repeat(5, 54px);
  gap: 10px;
  margin-top: 18px;
}

/* 关号块：与牌面同款糖果质感 */
.sh-lv {
  height: 54px;
  border-radius: 14px;
  font-size: 20px;
  font-weight: 800;
  color: #dfe6ff;
  background: linear-gradient(180deg, #33406a, #1c2544);
  border: 1px solid #3c4a75;
  box-shadow: 0 4px 0 rgba(9, 13, 24, 0.92), 0 9px 14px rgba(4, 8, 18, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s, border-color 0.15s, color 0.15s;
}

.sh-lv:hover {
  transform: translateY(-3px);
  border-color: #ffd43b;
  color: #ffd43b;
}

.sh-lv:active {
  transform: translateY(0) scale(0.94);
}

/* 当前游玩关：金色描边 + 光晕 */
.sh-lv.cur {
  border-color: #ffd43b;
  color: #ffd43b;
  box-shadow: 0 4px 0 rgba(9, 13, 24, 0.92), 0 0 16px rgba(255, 212, 59, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* 未解锁：灰锁 + 不可点 */
.sh-lv.lock {
  opacity: 0.38;
  color: #6c789f;
  pointer-events: none;
  box-shadow: 0 3px 0 rgba(9, 13, 24, 0.92), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.sh-pick-sub {
  margin-top: 16px;
  font-size: 12px;
  color: #7e8bb8;
}

/* ================= 贪吃蛇·选关面板 ================= */
.sk-pick {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 10, 22, 0.62);
  backdrop-filter: blur(3px);
  animation: shClearIn 0.18s ease-out;
}

.sk-pick-card {
  padding: 26px 30px 24px;
  border-radius: 18px;
  text-align: center;
  background: linear-gradient(180deg, #16220f, #0d1408);
  border: 1px solid #2f5a2a;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.55), 0 0 26px rgba(105, 219, 124, 0.12);
}

.sk-pick-card h3 {
  margin: 0 0 6px;
  font-size: 20px;
  color: #b2f2bb;
}

.sk-pick-tip {
  margin: 0 0 4px;
  font-size: 12px;
  color: #8ba37f;
}

.sk-pick-tip b { color: #ffd43b; }

.sk-grid {
  display: grid;
  grid-template-columns: repeat(5, 58px);
  gap: 10px;
  margin: 16px 0 20px;
}

/* 关号块：草地糖果质感，BOSS 关带徽标小字 */
.sk-lv {
  position: relative;
  height: 58px;
  border-radius: 14px;
  font-size: 21px;
  font-weight: 800;
  color: #d8f5d0;
  background: linear-gradient(180deg, #2c5a2a, #173015);
  border: 1px solid #3b7a37;
  box-shadow: 0 4px 0 rgba(5, 10, 4, 0.92), 0 9px 14px rgba(2, 8, 2, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  cursor: pointer;
  transition: transform 0.12s, border-color 0.15s, color 0.15s;
}

.sk-lv small {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ffa8a8;
}

.sk-lv:hover {
  transform: translateY(-3px);
  border-color: #69db7c;
  color: #69db7c;
}

.sk-lv:active { transform: translateY(0) scale(0.94); }

/* 当前游玩关：翠金描边 + 光晕 */
.sk-lv.cur {
  border-color: #ffd43b;
  color: #ffd43b;
  box-shadow: 0 4px 0 rgba(5, 10, 4, 0.92), 0 0 16px rgba(255, 212, 59, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.sk-lv.cur small { color: #ffd43b; }

/* 未解锁：灰锁 + 不可点 */
.sk-lv.lock {
  opacity: 0.38;
  color: #6c8b6c;
  pointer-events: none;
  box-shadow: 0 3px 0 rgba(5, 10, 4, 0.92), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.sk-close { min-width: 132px; }

/* ================= 猜成语 Wordle ================= */
.wd-board {
  display: grid;
  grid-template-columns: repeat(4, 58px);
  gap: 7px;
  justify-content: center;
  margin-bottom: 12px;
}

.wd-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 27px;
  font-weight: 800;
  border-radius: 11px;
  border: 2px solid var(--border);
  background: var(--surface);
  transition: border-color 0.15s, transform 0.1s;
}

.wd-cell.fill { border-color: rgba(120, 130, 155, 0.6); animation: mgPop 0.15s ease; }
.wd-cell.cur { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(76, 110, 245, 0.22); }

.wd-cell[data-res="g"] {
  background: linear-gradient(180deg, #51cf66, #37b24d);
  border-color: transparent;
  color: #fff;
  animation: wdFlip 0.4s ease;
}

.wd-cell[data-res="y"] {
  background: linear-gradient(180deg, #ffd43b, #fcc419);
  border-color: transparent;
  animation: wdFlip 0.4s ease;
}

.wd-cell[data-res="e"] {
  background: var(--surface-2);
  border-color: transparent;
  color: var(--text-2);
  animation: wdFlip 0.4s ease;
}

@keyframes wdFlip {
  0% { transform: rotateX(0); }
  50% { transform: rotateX(90deg); }
  100% { transform: rotateX(0); }
}

.wd-stat { text-align: center; min-height: 22px; color: var(--text-2); font-size: 14px; margin-bottom: 10px; }

.wd-keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  max-width: 340px;
  margin: 0 auto 14px;
}

.wd-key {
  aspect-ratio: 1;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  font-size: 21px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.12s;
  padding: 0;
}

.wd-key:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(16, 24, 40, 0.16); }
.wd-key:active { transform: scale(0.94); }

.wd-key[data-res="g"] { background: linear-gradient(180deg, #51cf66, #37b24d); border-color: transparent; color: #fff; }
.wd-key[data-res="y"] { background: linear-gradient(180deg, #ffd43b, #fcc419); border-color: transparent; }
.wd-key[data-res="e"] { opacity: 0.4; }

.wd-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* ================= 螺丝拧拧拧 ================= */
.sw-field {
  position: relative;
  aspect-ratio: 1;
  width: min(100%, 400px);
  margin: 0 auto;
  background:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(170deg, #1d2438, #131927);
  background-size: calc(100% / 6) calc(100% / 6);
  border: 1px solid #2b3554;
  border-radius: 20px;
  box-shadow: 0 14px 36px rgba(6, 10, 20, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.sw-board-p {
  position: absolute;
  border-radius: 12px;
  background-image: var(--tile-gloss);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.5), inset 0 -3px 0 rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.4s cubic-bezier(0.3, 0.6, 0.3, 1), opacity 0.4s;
}

.sw-board-p.fly {
  transform: translateY(-160%) rotate(14deg) scale(0.7);
  opacity: 0;
}

.sw-screw {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid #8b95ad;
  background: radial-gradient(circle at 35% 30%, #e8ecf4, #9aa5bd 60%, #6b7488);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%);
  cursor: pointer;
  padding: 0;
  transition: box-shadow 0.15s, transform 0.1s;
}

.sw-screw::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 3.5px;
  background: #4a5266;
  border-radius: 2px;
  transform: translate(-50%, -50%);
}

.sw-screw.free {
  border-color: #fcc419;
  animation: swFree 1.4s ease-in-out infinite;
}

@keyframes swFree {
  0%, 100% { box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5), 0 0 8px rgba(252, 196, 25, 0.5); }
  50% { box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5), 0 0 20px rgba(252, 196, 25, 0.95); }
}

.sw-screw.free:active { transform: translate(-50%, -50%) rotate(120deg) scale(0.9); }

.sw-moves {
  text-align: center;
  color: var(--text-2);
  font-size: 13px;
  margin-top: 12px;
}

/* ================= 别踩白块 ================= */
.pk-combo {
  text-align: center;
  min-height: 24px;
  font-size: 16px;
  font-weight: 900;
  color: #ffe066;
  text-shadow: 0 0 12px rgba(255, 212, 59, 0.7);
  margin-bottom: 8px;
}

.pk-field {
  display: flex;
  height: min(62vh, 430px);
  max-width: 440px;
  margin: 0 auto;
  background: #f5f6fa;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(6, 10, 20, 0.35);
  user-select: none;
  touch-action: manipulation;
}

.pk-col {
  position: relative;
  flex: 1;
  border-right: 1px solid rgba(120, 130, 155, 0.25);
}

.pk-col:last-child { border-right: none; }

.pk-b {
  position: absolute;
  left: 4%;
  width: 92%;
  height: 25%;
  border-radius: 10px;
  background: linear-gradient(180deg, #2b3348, #171d2c);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.12);
  transform: translateY(-100%);
}

.pk-b.hit {
  background: linear-gradient(180deg, rgba(129, 212, 250, 0.5), rgba(79, 195, 247, 0.35));
  box-shadow: inset 0 0 0 2px rgba(79, 195, 247, 0.7);
  opacity: 0.85;
}

/* ================= 数独 ================= */
.sd-tiprow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  max-width: 420px;
  margin: 0 auto 10px;
}

.sd-diffs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
}

.sd-board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  width: min(100%, 420px);
  margin: 0 auto;
  background: linear-gradient(170deg, #1d2438, #131927);
  border: 2px solid #3a466b;
  border-radius: 14px;
  padding: 4px;
  gap: 1px;
  box-shadow: 0 14px 36px rgba(6, 10, 20, 0.4);
  user-select: none;
}

.sd-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(15px, 4vw, 22px);
  font-weight: 700;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--text);
  cursor: pointer;
  position: relative;
}

.sd-cell.bx { margin-right: 2px; }
.sd-cell.by { margin-bottom: 2px; }

.sd-cell.given { color: var(--text-2); font-weight: 800; background: rgba(255, 255, 255, 0.08); }

.sd-cell.sel {
  background: rgba(76, 110, 245, 0.28);
  box-shadow: inset 0 0 0 2px var(--primary);
}

.sd-cell.same { background: rgba(76, 110, 245, 0.12); }
.sd-cell.same.sel { background: rgba(76, 110, 245, 0.28); }
.sd-cell.wrong { color: #ff6b6b; }

.sd-cell.sd-shake { animation: sdShake 0.3s ease; }

@keyframes sdShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-3px); }
}

.sd-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sd-notes span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(7px, 1.8vw, 10px);
  color: var(--text-2);
  font-weight: 600;
}

.sd-keys {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  max-width: 420px;
  margin: 14px auto 0;
}

.sd-key {
  aspect-ratio: 1.2;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  font-size: 21px;
  font-weight: 800;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.12s;
  padding: 0;
}

.sd-key:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(16, 24, 40, 0.16); }
.sd-key:active { transform: scale(0.94); }
.sd-key.del { font-size: 16px; }

.sd-actions {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

/* ================= Toast ================= */
.toast {
  position: fixed;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%) translateY(16px);
  background: rgba(23, 26, 31, 0.92);
  color: #fff;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 200;
  white-space: nowrap;
}

[data-theme="dark"] .toast { background: rgba(233, 236, 240, 0.95); color: #1b1f24; }

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

/* ================= 响应式 ================= */
@media (max-width: 640px) {
  .topbar { padding: 8px 12px; gap: 10px; }
  .stage { padding: 20px 12px 30px; }
  .home h1 { font-size: 24px; }
  .home-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .gc-body { padding: 9px 10px 11px; }
  .gc-body strong { font-size: 13.5px; }
  .gc-body p { font-size: 11.5px; }
  .gc-play { width: 42px; height: 42px; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .game-head { margin-bottom: 10px; padding: 9px 12px; gap: 8px; border-radius: 18px; }
  .gh-title h2 { font-size: 15px; letter-spacing: 0.5px; }
  .gh-right { gap: 6px; }
  .score-box { padding: 4px 11px 5px; min-width: 66px; }
  .score-box strong { font-size: 17px; }
  .score-box small { letter-spacing: 1.5px; padding-left: 1.5px; }
  .btn { padding: 6px 12px; font-size: 12px; }
  .game-tip { margin-bottom: 10px; }
  .go-score { font-size: 42px; }
  .idm-cell { width: 50px; height: 50px; font-size: 23px; }
  .idm-key { min-width: 42px; height: 44px; font-size: 18px; }
}