/* ============================================================
   24点 · 极简薄荷绿主题
   移动端优先，最大宽度 480 居中
   ============================================================ */

:root {
  --bg: #f3f8f5;
  --panel: #ffffff;
  --mint: #bdeed3;
  --mint-deep: #4fcb98;
  --mint-ring: #2bb673;
  --calc: #ffe2a3;
  --op-bg: #eef1ef;
  --op-fg: #39463f;
  --accent: #f5a623;
  --text: #243029;
  --muted: #8a9a92;
  --line: #e5ede9;
  --success: #2bb673;
  --fail: #ff5a5a;
  --shadow: 0 8px 24px rgba(40, 80, 60, 0.08);

  /* 牌面水印图案：金色调，低饱和以便融入底色
     排布规则：
     - 单张居中（不重复）：flag——国旗是整体图案，平铺会糊成红黄马赛克
     - 平铺重复：stars/hearts/dots/diamonds——几何小图，反复铺强化"底纹感" */
  --hi: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%);
  --wm-stars:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpolygon points='14,3 16.6,10.5 24.5,10.5 18.1,15.2 20.4,22.7 14,18 7.6,22.7 9.9,15.2 3.5,10.5 11.4,10.5' fill='%23b98e2a' fill-opacity='0.35'/%3E%3C/svg%3E");
  --wm-hearts:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M14 23 L11.6 20.8 C5.2 15.4 2.5 12.0 2.5 8.4 C2.5 5.5 4.7 3.3 7.4 3.3 C9.4 3.3 11.4 4.6 14 6.9 C16.6 4.6 18.6 3.3 20.6 3.3 C23.3 3.3 25.5 5.5 25.5 8.4 C25.5 12.0 22.8 15.4 16.4 20.8 Z' fill='%23b98e2a' fill-opacity='0.35'/%3E%3C/svg%3E");
  --wm-dots:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='8' cy='8' r='3.2' fill='%23b98e2a' fill-opacity='0.45'/%3E%3Ccircle cx='20' cy='20' r='3.2' fill='%23b98e2a' fill-opacity='0.45'/%3E%3C/svg%3E");
  --wm-diamonds: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M14 3 L24 14 L14 25 L4 14 Z' fill='%23b98e2a' fill-opacity='0.35'/%3E%3C/svg%3E");
  --wm-flag:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='60' viewBox='0 0 90 60'%3E%3Crect x='3' y='6' width='84' height='48' rx='3' fill='%23de2910' fill-opacity='0.55'/%3E%3Cg transform='translate(20,20) scale(2.6)' fill='%23ffde00' fill-opacity='0.98'%3E%3Cpolygon points='0,-3 0.69,-0.95 2.85,-0.93 1.12,0.36 1.76,2.43 0,1.18 -1.76,2.43 -1.12,0.36 -2.85,-0.93 -0.69,-0.95'/%3E%3C/g%3E%3Cg transform='translate(40,12) scale(1.0)' fill='%23ffde00' fill-opacity='0.98'%3E%3Cpolygon points='0,-3 0.69,-0.95 2.85,-0.93 1.12,0.36 1.76,2.43 0,1.18 -1.76,2.43 -1.12,0.36 -2.85,-0.93 -0.69,-0.95'/%3E%3C/g%3E%3Cg transform='translate(48,18) scale(1.0)' fill='%23ffde00' fill-opacity='0.98'%3E%3Cpolygon points='0,-3 0.69,-0.95 2.85,-0.93 1.12,0.36 1.76,2.43 0,1.18 -1.76,2.43 -1.12,0.36 -2.85,-0.93 -0.69,-0.95'/%3E%3C/g%3E%3Cg transform='translate(48,28) scale(1.0)' fill='%23ffde00' fill-opacity='0.98'%3E%3Cpolygon points='0,-3 0.69,-0.95 2.85,-0.93 1.12,0.36 1.76,2.43 0,1.18 -1.76,2.43 -1.12,0.36 -2.85,-0.93 -0.69,-0.95'/%3E%3C/g%3E%3Cg transform='translate(40,34) scale(1.0)' fill='%23ffde00' fill-opacity='0.98'%3E%3Cpolygon points='0,-3 0.69,-0.95 2.85,-0.93 1.12,0.36 1.76,2.43 0,1.18 -1.76,2.43 -1.12,0.36 -2.85,-0.93 -0.69,-0.95'/%3E%3C/g%3E%3C/svg%3E");
}

body.dark {
  --bg: #0f1512;
  --panel: #192420;
  --mint: #1f4a3a;
  --mint-deep: #2f7d5e;
  --mint-ring: #4fcb98;
  --calc: #5a4423;
  --op-bg: #26302b;
  --op-fg: #d7e4dd;
  --accent: #f5a623;
  --text: #e8f0ec;
  --muted: #7d8c85;
  --line: #2a3630;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

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

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI",
    "Microsoft YaHei", sans-serif;
  display: flex;
  justify-content: center;
}

#app {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  position: relative;
  /* 整体按比例缩小，缓解拥挤感；zoom 在 Chromium / WebKit 中良好支持，
     Firefox 126+ 已支持。视觉与布局一同缩放，最自然 */
  zoom: 0.9;
}
/* Firefox 126 之前没有 zoom，降级为 transform 缩放（仅视觉缩放） */
@supports not (zoom: 1) {
  #app {
    transform: scale(0.9);
    transform-origin: top center;
    width: 111.111%; /* 1/0.9，保证缩放后视觉宽度仍 ≈ 原 max-width */
    min-height: 111.111vh;
    min-height: 111.111dvh;
  }
}

/* ---------- 顶部栏（两行布局：标题 + 状态） ---------- */
.topbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 6px;
}
.topbar-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.topbar-row2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 4px 2px;
}
.topbar-row2::-webkit-scrollbar { display: none; }
.topbar .left,
.topbar .right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 44px;
}
.topbar .right {
  justify-content: flex-end;
}
.topbar .title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-align: center;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--panel);
  color: var(--text);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  cursor: pointer;
  flex-shrink: 0;
}
.icon-btn.sm {
  width: 32px;
  height: 32px;
  font-size: 18px;
}
.icon-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.streak-badge {
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: var(--shadow);
}
/* 等级徽章（紫蓝渐变）与金币徽章（金橙渐变），置于顶部右侧 */
.lv-badge {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  white-space: nowrap;
}
.coin-badge {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color: #5a3a00;
  font-weight: 800;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  white-space: nowrap;
}
/* 第二行「💡 提示」静态提示胶囊（仅展示用，挑战模式可用做入口 chip） */
.hint-pill {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #7a4f00;
  font-weight: 700;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  white-space: nowrap;
}

/* ---------- 屏幕区 ---------- */
.screen {
  flex: 1;
  overflow-y: auto;
  padding: 4px 16px calc(78px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}

/* 状态气泡（历史 / 提示 / 操作引导合一） */
.status-bar {
  margin: 4px 0 6px;
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mini {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}
.mini b {
  color: var(--text);
  font-weight: 700;
}
.mini.ghost {
  opacity: 0.45;
}
.mini.hint {
  color: #b9791a;
  background: rgba(245, 166, 35, 0.12);
  border: 1px solid rgba(245, 166, 35, 0.35);
  border-radius: 10px;
  padding: 5px 12px;
  font-size: 13px;
}
.mini.hint .expr {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-weight: 800;
}

/* 牌网格 */
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 4px 0 4px;
}
.card {
  aspect-ratio: 1 / 0.85;
  border-radius: 20px;
  background-color: var(--mint);
  /* 牌面底色 + 左上角柔和高光；水印已移到 ::before 独立图层 */
  background-image: var(--hi);
  background-size: auto;
  background-repeat: no-repeat;
  background-position: center;
  color: #1c3a2c;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 54px;
  font-weight: 800;
  letter-spacing: 1px;
  box-shadow: var(--shadow);
  cursor: pointer;
  user-select: none;
  transition: transform 0.08s ease, box-shadow 0.12s ease, opacity 0.15s ease;
  position: relative;
  isolation: isolate; /* 让水印的 mix-blend-mode 只与牌底混合，不溢出到页面 */
  overflow: hidden; /* 把旋转的水印裁切到牌面内，避免溢出到卡片外的页面背景 */
}

/* 牌面水印：图片与混合模式由屏幕容器的 data-pattern 决定（通过 CSS 变量下发）
     两种排布规则：
     - 几何小图（stars/hearts/dots/diamonds）：background-repeat: repeat 平铺，密度参数调格子大小
     - 国旗（flag）：background-repeat: no-repeat 居中画一张，密度参数调整张大小（不允许重复，重复会糊） */
.screen[data-pattern="stars"]    { --wm-img: var(--wm-stars);    --wm-blend: multiply; }
.screen[data-pattern="hearts"]   { --wm-img: var(--wm-hearts);   --wm-blend: multiply; }
.screen[data-pattern="dots"]     { --wm-img: var(--wm-dots);     --wm-blend: multiply; }
.screen[data-pattern="diamonds"] { --wm-img: var(--wm-diamonds); --wm-blend: multiply; }
/* 国旗在浅绿底上用 overlay：让红/黄"提亮"渗透，比 multiply 更跳、更鲜活 */
.screen[data-pattern="flag"]     { --wm-img: var(--wm-flag);     --wm-blend: overlay; }
.screen[data-pattern="none"]     { --wm-img: none;               --wm-blend: normal; }

/* 水印图层：独立 ::before，可旋转/调透明度，并用 mix-blend-mode 与牌底融合。
   --wm-angle / --wm-opacity / --wm-density 由设置页实时下发（JS 写在 .screen 上）。
   配合 .card 的 overflow:hidden，旋转时图案被裁切到牌面内，不会溢出到外部。 */
.screen[data-pattern] .card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1; /* 置于牌面底色之上、数字之下，保证数字清晰 */
  background-image: var(--wm-img);
  background-position: center;
  mix-blend-mode: var(--wm-blend, multiply);
  opacity: var(--wm-opacity, 0.7);
  border-radius: inherit;
  pointer-events: none;
  transition: opacity 0.15s ease;
  /* 旋转：所有图案都生效，由 --wm-angle 控制；溢出靠 .card{overflow:hidden} 裁切 */
  transform: rotate(var(--wm-angle, 0deg));
}
/* 几何小图：平铺（repeat），密度换算成格子尺寸——密度越大格子越小、画面越密 */
.screen[data-pattern="stars"] .card::before,
.screen[data-pattern="hearts"] .card::before,
.screen[data-pattern="dots"] .card::before,
.screen[data-pattern="diamonds"] .card::before {
  background-repeat: repeat;
  background-size: calc(34px - (var(--wm-density, 2) - 1) * 9px);
}
/* 五星红旗：单张居中（不重复），密度换算成整张旗的尺寸——密度越大旗越大 */
.screen[data-pattern="flag"] .card::before {
  background-repeat: no-repeat;
  background-size: calc(60% + (var(--wm-density, 2) - 1) * 12%) auto;
  background-position: center;
}
.screen[data-pattern="none"] .card::before {
  display: none;
}
.card .tag {
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 10px;
  font-weight: 700;
  color: #1c3a2c;
  opacity: 0.55;
}
.card.calc {
  background-color: var(--calc);
  font-size: 44px;
}
/* 选中（焦点）：结果牌/等待合并的第一张牌 */
.card.selected {
  outline: 4px solid var(--mint-ring);
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 0 0 6px rgba(75, 203, 152, 0.18),
    0 12px 28px rgba(40, 80, 60, 0.16);
}
.card.selected.calc {
  outline-color: #c98920;
  box-shadow: 0 0 0 6px rgba(245, 166, 35, 0.22),
    0 12px 28px rgba(160, 100, 20, 0.18);
}
/* 新合成牌浮入（仅首次生成时播放一次，由 .pop 类控制，避免重渲染反复弹跳） */
@keyframes pop-in {
  0% {
    transform: scale(0.85);
    opacity: 0.4;
  }
  60% {
    transform: scale(1.06);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.card.pop {
  animation: pop-in 0.28s ease;
}
/* 点击瞬间只给"被点的那张"一个轻微按压反馈，其他牌不受影响 */
.card:active {
  transform: scale(0.97);
}
/* 已用牌不再渲染——类名保留作兜底 */
.card.used {
  display: none;
}
/* 已消耗的槽位：保持占位，维持 2×2 布局稳定不抖动；并清除水印 */
.screen .card.placeholder {
  background: transparent;
  background-image: none;
  box-shadow: none;
  border: 2px dashed var(--line);
  cursor: default;
}
.screen .card.placeholder::before {
  display: none;
}
.card.placeholder.pop-in,
.card.placeholder.selected {
  outline: none;
}

/* 运算符 */
.ops {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 10px 0 6px;
}
.op {
  aspect-ratio: 1;
  min-height: 64px;
  border-radius: 50%;
  border: none;
  background: var(--op-bg);
  color: var(--op-fg);
  font-size: 38px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.08s ease, background 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.op:active {
  transform: scale(0.94);
}
.op.active {
  background: var(--mint-deep);
  color: #fff;
}

/* 提示条（保留兜底类名，避免硬卡） */
.hint-bar {
  margin: 4px 0;
  background: rgba(245, 166, 35, 0.12);
  border: 1px solid rgba(245, 166, 35, 0.4);
  color: #b9791a;
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.hint-bar .expr {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-weight: 800;
}

/* 通用按钮 */
.btn {
  border: none;
  border-radius: 14px;
  padding: 13px 18px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.btn.primary {
  background: var(--mint-deep);
  color: #fff;
}
.btn.ghost {
  background: var(--panel);
  color: var(--text);
}
.btn.accent {
  background: var(--accent);
  color: #fff;
}
.btn.sm {
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 10px;
  box-shadow: none;
}

/* 底部操作条（合并"换题/后退/重玩"+"💡提示"为四宫格） */
.toolbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.tool {
  border: none;
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
  padding: 9px 0 7px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.tool .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.tool .ico svg {
  width: 18px;
  height: 18px;
  display: block;
}
.tool.hint {
  background: rgba(245, 166, 35, 0.12);
  color: #b9791a;
}
.tool.hint.on {
  background: var(--accent);
  color: #fff;
}
.tool:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ---------- Tab 栏 ---------- */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  display: flex;
  background: var(--panel);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 20;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.04);
}
.tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
}
.tab .tab-ico {
  font-size: 20px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.tab .tab-ico .ico-gear {
  display: block;
}
.icon-btn .ico-gear {
  display: block;
  color: var(--text);
}
.tab.active {
  color: var(--accent);
}

/* ---------- 设置页 ---------- */
.settings {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
}
.card-block {
  background: var(--panel);
  border-radius: 18px;
  padding: 6px 16px;
  box-shadow: var(--shadow);
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.row:last-child {
  border-bottom: none;
}
.row .label {
  font-size: 16px;
  font-weight: 600;
}
/* 设置页滑块（图案角度 / 透明度） */
.row.col {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.row.col .label {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.row.col .label .v {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.row input[type="range"] {
  width: 100%;
  accent-color: var(--mint-ring);
  cursor: pointer;
}
.row select,
.row input[type="checkbox"] {
  font-size: 16px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
}
.stats {
  display: flex;
  gap: 12px;
}
.stat {
  flex: 1;
  background: var(--panel);
  border-radius: 16px;
  padding: 14px;
  text-align: center;
  box-shadow: var(--shadow);
}
.stat .num {
  font-size: 26px;
  font-weight: 800;
  color: var(--mint-ring);
}
.stat .cap {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.note {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  padding: 4px 2px;
}

/* ---------- 弹窗 ---------- */
.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(20, 40, 30, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 24px;
}
.modal-mask[hidden] {
  display: none;
}
.modal {
  background: var(--panel);
  border-radius: 22px;
  padding: 26px 22px;
  width: 100%;
  max-width: 340px;
  text-align: center;
  box-shadow: var(--shadow);
  animation: pop 0.18s ease;
}
@keyframes pop {
  from {
    transform: scale(0.92);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.modal .emoji {
  font-size: 46px;
}
.modal h2 {
  margin: 8px 0 4px;
  font-size: 22px;
}
.modal .sub {
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 6px;
}
.modal .sub2 {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 8px;
}
.modal .answer {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 18px;
  font-weight: 800;
  color: var(--mint-ring);
  background: var(--bg);
  border-radius: 12px;
  padding: 12px;
  margin: 12px 0 18px;
  word-break: break-all;
}
.modal .answer.muted {
  color: var(--muted);
  background: transparent;
}
.modal .actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.board-list {
  margin: 8px 0 18px;
  max-height: 46vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.board-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 15px;
}
.board-row .rank {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.board-row .b-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.board-row .b-streak {
  font-weight: 800;
  color: var(--mint-ring);
  flex: 1;
  text-align: right;
}
.board-row .b-diff {
  color: var(--muted);
  font-size: 13px;
}

/* ---------- 闯关历史面板 ---------- */
.ch-group-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
/* 闯关档案弹窗（更宽，展示每关真实试题） */
.modal.wide {
  width: min(94vw, 460px);
  max-height: 86vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hist-head {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  margin-bottom: 8px;
}
.hist-head .emoji { margin: 0; }
.hist-head h2 { margin: 0; }
.hist-list {
  margin: 6px 0 12px;
  max-height: 56vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 2px;
}
.hist-pack {
  background: var(--bg);
  border-radius: 14px;
  padding: 12px 12px 10px;
  text-align: left;
}
.hist-pack.done {
  background: color-mix(in srgb, var(--mint) 40%, var(--bg));
}
.hist-pack.lock {
  opacity: 0.55;
}
.hist-pack-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.hist-pack-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}
.hist-pack-stars {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}
/* 套内关卡网格：每张卡显示真实 4 张牌缩略 + 关卡名 + 星级 */
.hist-levels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.hist-lv {
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 8px 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease, border-color 0.12s ease;
}
.hist-lv:hover { transform: translateY(-1px); border-color: var(--accent); }
.hist-lv:disabled { cursor: default; opacity: 0.6; }
.hist-lv.done { border-color: color-mix(in srgb, var(--mint) 60%, var(--line)); }
.hist-lv.play { border-style: dashed; }
.hist-lv .hbadge {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  background: var(--bg);
  border-radius: 999px;
  padding: 1px 8px;
}
.hist-lv.done .hbadge { color: var(--accent); }
/* 缩略牌面 */
.hc-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}
.hc-cards.lock { opacity: 0.5; }
.hc {
  aspect-ratio: 1 / 0.9;
  border-radius: 6px;
  background: var(--mint);
  background-image: var(--hi);
  background-size: auto;
  background-position: center;
  background-repeat: no-repeat;
  color: #1c3a2c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.hc.q { background: var(--bg); color: var(--muted); }
.hist-lv .hname {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hist-lv .hstars {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.5px;
}
.hist-lv .hstars.on { color: var(--accent); }
.hist-pack-foot {
  margin-top: 8px;
  text-align: right;
}

/* 关卡详情：大号真实试题 + 战绩 + 参考解法 */
.hd-head {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  margin-bottom: 4px;
}
.hd-pack {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.hd-head h2 { margin: 0; }
.cards.static {
  cursor: default;
  margin: 10px 0 6px;
}
.cards.static .card { cursor: default; }
.card.big {
  font-size: 46px;
  aspect-ratio: 1 / 1;
}
.hd-eq {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  margin: 4px 0 10px;
}
.hd-eq b { color: var(--mint-ring); font-size: 15px; }
.hd-record {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}
.hd-stars {
  font-size: 18px;
  color: var(--accent);
  letter-spacing: 1px;
}
.hd-tag {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg);
  border-radius: 999px;
  padding: 3px 10px;
}
.hd-tag.ok { color: var(--mint-fg, #1f7a52); }
.hd-tag.pending { color: #b45309; background: color-mix(in srgb, #fbbf24 35%, var(--bg)); }
.hd-sol {
  background: var(--bg);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 14px;
}
.hd-sol-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 4px;
}
.hd-sol-expr {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 17px;
  font-weight: 800;
  color: var(--mint-ring);
  word-break: break-all;
}

/* ---------- 挑战模式 ---------- */
.ch-profile {
  background: var(--panel);
  border-radius: 18px;
  padding: 16px;
  text-align: center;
  box-shadow: var(--shadow);
  margin-top: 6px;
}
.ch-rank {
  font-size: 22px;
  font-weight: 800;
  color: var(--mint-ring);
  letter-spacing: 1px;
}
.ch-meta {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 6px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}
/* 等级进度条：直观展示距下一级还差多少分 */
.ch-progress {
  margin: 12px 4px 4px;
  height: 8px;
  border-radius: 999px;
  background: var(--bg);
  overflow: hidden;
}
.ch-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(135deg, #8b5cf6, #fbbf24);
  transition: width 0.3s ease;
}
.ch-progress-txt {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.ch-pack-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 2px 4px;
}
.ch-pack-chip {
  border: 1.5px solid var(--border, #e3e3ea);
  background: var(--panel);
  color: var(--text-soft);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--shadow);
  -webkit-tap-highlight-color: transparent;
}
.ch-pack-chip.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  cursor: default;
}
.ch-pack-chip.done {
  border-color: var(--mint-bd, #8fd9b6);
  color: var(--mint-fg, #1f7a52);
}
.ch-pack-chip.on.done {
  color: #fff;
}
.ch-group-title {
  margin: 8px 2px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ch-pack-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}
.ch-pack-sub {
  font-size: 11px;
  color: var(--text-soft);
  margin-top: 2px;
}
.ch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.lv {
  aspect-ratio: 1;
  border: none;
  border-radius: 16px;
  background: var(--panel);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: var(--shadow);
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.lv .lv-no {
  font-size: 22px;
  font-weight: 800;
}
.lv .lv-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
  max-width: 92%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  line-height: 1.1;
}
.lv .lv-stars {
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 1px;
}
.lv.done {
  background: var(--mint);
}
.lv.done .lv-no {
  color: #1c3a2c;
}
.lv.locked {
  background: transparent;
  border: 2px dashed var(--line);
  box-shadow: none;
  cursor: default;
  opacity: 0.6;
}
.lv.locked .lv-no {
  color: var(--muted);
}
/* 轻量 toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  background: rgba(36, 48, 41, 0.92);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  z-index: 60;
  box-shadow: var(--shadow);
  pointer-events: none;
}
.toast[hidden] {
  display: none;
}

/* 彩蛋弹幕（连点版本号触发，作者微信飘过全屏顶部） */
.egg-danmaku {
  position: fixed;
  top: 54px;
  left: 0;
  right: 0;
  height: 30px;
  overflow: hidden;
  pointer-events: none;
  z-index: 60;
}
.egg-danmaku.on .egg-track {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  font-size: 15px;
  font-weight: 700;
  color: #ff5b8d;
  animation: eggMove 5s linear forwards;
}
@keyframes eggMove {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}