/* 健脑乐园 · 适老化认知训练 —— 样式表（第三版 · UI 美化）
   设计原则：大字号、高对比、大按钮、单屏单任务、低视觉噪音 */

:root {
  --bg: #eef2f7;
  --card: #ffffff;
  --ink: #14181f;        /* 主文字，近黑，对比度 > 14:1 */
  --ink2: #5a6472;
  --ink3: #8b95a3;
  --line: #dbe2ea;
  --brand: #0b5fa5;
  --brand2: #084b83;
  --brand-soft: #e4f0fa;
  --ok: #1b7a3c;
  --ok-soft: #e3f4e8;
  --no: #b3261e;
  --no-soft: #fbe9e7;
  --warn: #9a5b00;
  --gold: #e08c00;
  --focus: #ff8a00;
  --r: 20px;
  --sh: 0 2px 10px rgba(16, 38, 76, .08);
  --sh2: 0 10px 26px rgba(16, 38, 76, .16);
  --fs: 20px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: var(--fs); }
body {
  margin: 0; color: var(--ink);
  background: linear-gradient(165deg, #f4f8fc 0%, #edf1f7 46%, #e9edf5 100%) fixed, var(--bg);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  font-size: 1rem; line-height: 1.6; -webkit-text-size-adjust: 100%;
}
button { font-family: inherit; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
::selection { background: #cfe5f8; }

.app { max-width: 1000px; margin: 0 auto; padding: 0 14px calc(104px + env(safe-area-inset-bottom)); }
.screen { padding-top: 14px; animation: fadeUp .28s ease both; }
.hidden { display: none !important; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.86); opacity: 0; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(11, 95, 165, .45); } 50% { box-shadow: 0 0 0 8px rgba(11, 95, 165, 0); } }

/* ---------------- 顶栏 ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px; padding: 10px 0 10px;
  background: rgba(243, 247, 252, .9);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 2px solid var(--line);
}
.topbar-title { flex: 1; margin: 0; font-size: 1.45rem; font-weight: 800; text-align: center; letter-spacing: .5px; color: #0d3d6b; }
.btn-back, .btn-set {
  min-width: 92px; min-height: 54px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 1.1rem; font-weight: 800; border-radius: 14px;
  border: 2px solid var(--brand); background: #fff; color: var(--brand);
  cursor: pointer; box-shadow: var(--sh); transition: transform .12s, background .12s;
}
.btn-acct {
  min-height: 54px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 800; border-radius: 14px;
  border: 2px solid var(--brand); background: #fff; color: var(--brand2);
  cursor: pointer; box-shadow: var(--sh); max-width: 180px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
/* ===== 账号弹窗 / 登录卡片 =====
   视觉规范：卡片 24px 圆角 + 双层阴影；头部徽标居中；
   输入 56px 高触控区，默认 / 聚焦 / 错误 三态；主按钮为唯一强调色。
   移动端：整屏底部抽屉式，宽度撑满、安全区内边距。 */
.ac-card {
  width: 100%; max-width: 420px; padding: 26px 24px 22px;
  border: 1px solid var(--line); border-radius: 24px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(16, 38, 76, .05), 0 26px 60px -28px rgba(16, 38, 76, .35);
  text-align: center;
}
.ac-head { margin-bottom: 18px; }
.ac-mark {
  width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 18px;
  background: var(--brand-soft); color: var(--brand2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 800; line-height: 1;
}
.ac-card h3 {
  margin: 0 0 6px; font-size: 1.4rem; font-weight: 800; letter-spacing: -.2px; color: var(--ink);
}
.ac-sub { margin: 0; font-size: .95rem; font-weight: 500; color: var(--ink2); line-height: 1.5; }

/* 登录 / 注册 分段切换 */
.ac-seg {
  display: flex; gap: 6px; padding: 5px; margin-bottom: 18px;
  background: #f1f5fa; border-radius: 14px;
}
.ac-seg button {
  flex: 1; min-height: 46px; border: 0; border-radius: 11px;
  background: transparent; color: var(--ink2);
  font-size: 1.02rem; font-weight: 700; font-family: inherit; cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.ac-seg button.on {
  background: var(--card); color: var(--brand2);
  box-shadow: 0 1px 3px rgba(16, 38, 76, .12);
}
.ac-seg button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* 表单 */
.ac-form { text-align: left; }
.ac-field { display: block; margin-bottom: 14px; }
.ac-label {
  display: block; margin-bottom: 6px;
  font-size: .92rem; font-weight: 700; color: var(--ink2); letter-spacing: .2px;
}
.ac-input {
  display: block; width: 100%; box-sizing: border-box;
  min-height: 56px; padding: 14px 16px;
  font-size: 1.12rem; font-family: inherit; color: var(--ink);
  background: #fff; border: 2px solid var(--line); border-radius: 14px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.ac-input::placeholder { color: var(--ink3); }
.ac-input:hover { border-color: #c3cddb; }
.ac-input:focus {
  border-color: var(--brand); box-shadow: 0 0 0 4px rgba(11, 95, 165, .13); outline: none;
}
.ac-input:focus-visible { outline: none; }
.ac-input.has-err {
  border-color: var(--no); background: var(--no-soft);
}
.ac-input.has-err:focus { box-shadow: 0 0 0 4px rgba(179, 38, 30, .14); }

/* 提示条 / 错误文案 */
.ac-warn {
  font-size: .88rem; font-weight: 500; line-height: 1.55;
  color: var(--warn); background: #fdf4e3;
  border-left: 4px solid var(--gold); border-radius: 10px;
  padding: 10px 12px; margin: 2px 0 12px; text-align: left;
}
.ac-err {
  font-size: .95rem; font-weight: 700; color: var(--no);
  min-height: 1.4em; margin: 0 0 10px; text-align: left;
}
.ac-err:empty { display: none; }

/* 按钮：主 / 次 / 跳过 */
.ac-submit {
  display: block; width: 100%; min-height: 56px; margin-top: 4px;
  border: 0; border-radius: 14px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand2) 100%);
  color: #fff; font-size: 1.15rem; font-weight: 800; font-family: inherit;
  cursor: pointer; box-shadow: var(--sh);
  transition: transform .12s, box-shadow .12s, opacity .12s;
}
.ac-submit:hover { box-shadow: var(--sh2); }
.ac-submit:active { transform: translateY(1px); }
.ac-submit:disabled { opacity: .6; cursor: default; }
.ac-submit:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.ac-ghost {
  display: block; width: 100%; min-height: 52px; margin-top: 10px;
  border: 2px solid var(--line); border-radius: 14px;
  background: #fff; color: var(--ink2);
  font-size: 1.05rem; font-weight: 700; font-family: inherit; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.ac-ghost:hover { border-color: var(--brand); color: var(--brand2); }
.ac-ghost:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.ac-skip {
  display: block; width: 100%; margin-top: 12px; padding: 10px 4px;
  border: 0; background: transparent; color: var(--ink2);
  font-size: .95rem; font-weight: 600; font-family: inherit;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.ac-skip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; }

/* 已登录态：信息卡 + 操作区 */
.ac-panel { text-align: left; }
.ac-note {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; margin-bottom: 16px;
  background: var(--brand-soft); border-radius: 14px;
}
.ac-note-k { font-size: .9rem; font-weight: 700; color: var(--brand2); }
.ac-note-v { font-size: .98rem; font-weight: 600; color: var(--ink2); line-height: 1.5; }

/* 移动端：底部抽屉 + 安全区 */
@media (max-width: 480px) {
  .ac-card {
    max-width: 100%; border-radius: 22px 22px 0 0;
    padding: 22px 18px calc(20px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 40px rgba(16, 38, 76, .22);
  }
  .ac-mark { width: 52px; height: 52px; font-size: 1.45rem; }
  .ac-card h3 { font-size: 1.3rem; }
  .ac-input { font-size: 1.05rem; }
}
.btn-back:active, .btn-set:active { transform: scale(.96); background: var(--brand-soft); }
.btn-back svg { width: 20px; height: 20px; }

/* ---------------- 通用卡片 ---------------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px; margin-bottom: 16px; box-shadow: var(--sh);
}
h2.sec-title {
  font-size: 1.3rem; font-weight: 800; margin: 24px 0 12px; color: var(--ink);
  display: flex; align-items: center; gap: 10px;
}
h2.sec-title::before {
  content: ""; width: 8px; height: 26px; border-radius: 4px;
  background: var(--bar, var(--brand)); box-shadow: 0 2px 6px rgba(11, 95, 165, .28);
}

/* ---------------- 挑选游戏（50 选 20） ---------------- */
.picker-head {
  background: linear-gradient(135deg, #efe9ff 0%, #ffffff 70%);
  border: 2px solid #6b4ce6;
}
.ph-title { font-size: 1.4rem; font-weight: 800; margin-bottom: 6px; }
.ph-sub { font-size: 1.05rem; color: var(--ink2); }
.ph-count { margin-top: 10px; font-size: 1.15rem; font-weight: 700; color: var(--brand2); }
.ph-count b { font-size: 1.5rem; }
.ph-msg { color: var(--no); font-weight: 800; }
.pick-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.pickcard {
  position: relative; text-align: left; cursor: pointer;
  background: #fff; border: 2px solid var(--line); border-radius: 16px; padding: 14px 14px 12px 14px;
  box-shadow: var(--sh); transition: transform .12s, border-color .12s, background .12s;
  display: flex; flex-direction: column; gap: 4px; min-height: 150px;
}
.pickcard:hover { border-color: var(--dim, var(--brand)); transform: translateY(-2px); }
.pickcard.sel { border-color: var(--dim, var(--brand)); background: #fbfcff; box-shadow: 0 0 0 3px var(--dim, var(--brand)) inset; }
.pickcard .pick-check {
  position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--line); background: #fff; color: #fff; font-size: 1.2rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.pickcard.sel .pick-check { background: var(--dim, var(--brand)); border-color: var(--dim, var(--brand)); }
.pickcard .pick-ico { font-size: 1.9rem; line-height: 1.1; }
.pickcard .pick-name { font-size: 1.25rem; font-weight: 800; }
.pickcard .pick-purpose { font-size: .92rem; color: var(--ink2); line-height: 1.45; }
.picker-foot { margin: 8px 0 20px; }

/* ---------------- 长内容与其他小组件 ---------------- */
.q-big.long { font-size: 1.85rem; letter-spacing: 1px; word-break: break-all; }
.opt-list.long .opt { font-size: 1.1rem; letter-spacing: 0; }
.hl-t { color: var(--brand); font-weight: 800; border-bottom: 4px solid var(--brand); padding: 0 2px; }
.cell.ghost { background: #f3f5f8; border-style: dashed; }
.cell.start { background: var(--ok-soft); border-color: var(--ok); }
.seq-box.q-target { border: 3px solid var(--brand); background: var(--brand-soft); }
.mrows { max-width: 520px; margin: 0 auto; padding: 6px 4px; }
.mrow { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.mno {
  flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--brand-soft); color: var(--brand2);
  font-size: .95rem; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.mbar { display: inline-block; height: 18px; border-radius: 9px; background: linear-gradient(90deg, #2f86d0, #0b5fa5); }
.sec-note { font-size: 1rem; font-weight: 500; color: var(--ink3); }
p.lead { font-size: 1.1rem; color: var(--ink2); margin: 0 0 10px; }

/* ---------------- 首页头部 ---------------- */
.hero {
  position: relative; overflow: hidden;
  border-radius: 26px; padding: 26px 22px; margin-bottom: 18px; color: #fff;
  background: linear-gradient(120deg, #0a4d86 0%, #0b5fa5 48%, #2f86d0 100%);
  box-shadow: 0 14px 32px rgba(11, 95, 165, .32);
}
.hero::before {
  content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%;
  background: rgba(255, 255, 255, .10); top: -130px; right: -80px;
}
.hero::after {
  content: ""; position: absolute; width: 170px; height: 170px; border-radius: 50%;
  background: rgba(255, 255, 255, .08); bottom: -90px; left: 32%;
}
.hero > * { position: relative; z-index: 1; }
.hero-title { font-size: 1.7rem; font-weight: 800; margin: 0 0 6px; text-shadow: 0 2px 8px rgba(4, 40, 74, .3); }
.hero-sub { font-size: 1.1rem; opacity: .94; margin: 0 0 16px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.badge {
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px; padding: 6px 14px; font-size: 1rem; font-weight: 700;
  backdrop-filter: blur(4px);
}
.badge b { font-size: 1.2rem; }

/* 继续上次练习 */
.continue-card {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: #fff; border: 3px solid var(--brand); border-radius: var(--r);
  padding: 16px 18px; margin-bottom: 18px; cursor: pointer; text-align: left;
  box-shadow: 0 6px 18px rgba(11, 95, 165, .16);
}
.continue-card:active { transform: scale(.99); }
.continue-ico {
  width: 62px; height: 62px; flex: 0 0 62px; border-radius: 18px;
  background: var(--brand-soft); display: flex; align-items: center; justify-content: center; font-size: 1.9rem;
}
.continue-txt { flex: 1; }
.continue-k { font-size: 1rem; color: var(--brand2); font-weight: 700; }
.continue-v { font-size: 1.35rem; font-weight: 800; }
.continue-go { font-size: 1.5rem; color: var(--brand); font-weight: 800; }

/* ---------------- 游戏卡片 ---------------- */
.rec-grid, .game-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); }
.gcard {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 4px;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 16px 16px 14px 20px; min-height: 156px; text-align: left; cursor: pointer;
  box-shadow: var(--sh); transition: transform .14s ease, box-shadow .14s ease, border-color .14s;
}
.gcard::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px;
  background: var(--dim, var(--brand));
}
.gcard:hover { transform: translateY(-4px); box-shadow: var(--sh2); border-color: var(--dim, var(--brand)); }
.gcard:active { transform: translateY(-1px) scale(.995); }
.gcard.is-rec { border-width: 2px; background: linear-gradient(180deg, #fff 0%, var(--dimsoft, #f4f9ff) 100%); }
.gcard-icon {
  font-size: 1.9rem; line-height: 1;
  width: 58px; height: 58px; border-radius: 16px; margin-bottom: 5px;
  background: var(--dimsoft, var(--brand-soft));
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(11, 95, 165, .10);
}
.gcard-title { font-size: 1.35rem; font-weight: 800; }
.gcard-desc { font-size: .98rem; color: var(--ink2); }
.gcard-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dim-chip {
  font-size: .88rem; font-weight: 800; padding: 3px 10px; border-radius: 999px;
  color: var(--dim, var(--brand)); background: var(--dimsoft, var(--brand-soft));
  border: 1px solid var(--dim, var(--brand));
}
.gcard-prog { font-size: .95rem; font-weight: 700; color: var(--ink3); }
.gcard-prog.hot { color: var(--ok); }
.rec-tag {
  position: absolute; right: 10px; top: 10px; font-size: .82rem; font-weight: 800;
  color: #fff; background: var(--warn); border-radius: 999px; padding: 2px 10px;
}
.dim-head-row {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font-size: 1.18rem; font-weight: 800;
}
.dim-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--dim); }
.dim-count { font-size: .95rem; font-weight: 600; color: var(--ink3); }

/* ---------------- 游戏详情页 ---------------- */
.game-hero { display: flex; gap: 16px; align-items: center; }
.game-hero .gcard-icon { font-size: 3rem; width: 86px; height: 86px; border-radius: 22px; flex: 0 0 86px; margin-bottom: 0; }
.game-hero h2 { margin: 0 0 4px; font-size: 1.7rem; font-weight: 800; }
.info-row { display: flex; gap: 12px; margin-bottom: 10px; align-items: flex-start; }
.info-key {
  flex: 0 0 5.2em; font-weight: 800; color: var(--brand2); font-size: 1.05rem;
  background: var(--brand-soft); border-radius: 10px; padding: 2px 8px; text-align: center;
}
.info-val { font-size: 1.08rem; color: var(--ink); }
.info-row.purpose .info-key { color: #1b7a3c; background: var(--ok-soft); }

.level-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.lvbtn {
  position: relative;
  min-height: 104px; border-radius: 16px; border: 2px solid var(--line); background: #fff;
  color: var(--ink); cursor: pointer; padding: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-shadow: var(--sh); transition: transform .12s, box-shadow .12s;
}
.lvbtn:active { transform: scale(.97); }
.lvbtn .lvno { font-size: 1.25rem; font-weight: 800; }
.lvbtn .lvtip { font-size: .82rem; color: var(--ink3); font-weight: 600; text-align: center; line-height: 1.3; }
.lvbtn .lvstar { font-size: .95rem; color: var(--gold); letter-spacing: 1px; height: 1.2em; }
.lvbtn.locked { color: var(--ink3); background: #f4f6f9; border-style: dashed; box-shadow: none; }
.lvbtn.done { border-color: var(--ok); background: linear-gradient(180deg, #f2fbf6, var(--ok-soft)); }
.lvbtn.done::after {
  content: "✓"; position: absolute; top: 4px; right: 8px;
  font-size: .95rem; font-weight: 800; color: var(--ok);
}
.lvbtn.done .lvtip { color: var(--ok); }
.lvbtn.next { border-color: var(--brand); background: linear-gradient(180deg, #eef7ff, var(--brand-soft)); animation: pulse 2.4s infinite; }
.lvbtn.next .lvtip { color: var(--brand2); }

.btn-primary {
  display: block; width: 100%; min-height: 80px; margin-top: 14px;
  font-size: 1.4rem; font-weight: 800; color: #fff;
  background: linear-gradient(180deg, #1272c2, var(--brand));
  border: none; border-radius: 18px; cursor: pointer;
  box-shadow: 0 6px 16px rgba(11, 95, 165, .3);
  transition: transform .12s;
}
.btn-primary:active { transform: scale(.985); background: var(--brand2); }
.btn-ghost {
  display: block; width: 100%; min-height: 70px; margin-top: 10px;
  font-size: 1.2rem; font-weight: 800; color: var(--brand); background: #fff;
  border: 2px solid var(--brand); border-radius: 18px; cursor: pointer;
}
.btn-ghost:active { background: var(--brand-soft); }
.btn-row { display: flex; gap: 10px; }
.btn-row > * { flex: 1; }

/* ---------------- 答题页 ---------------- */
.play-bar {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 10px 16px; margin-bottom: 12px; box-shadow: var(--sh);
}
.play-bar .pb-name { font-size: 1.1rem; font-weight: 800; color: var(--brand2); }
.play-bar .pb-tip {
  font-size: .92rem; font-weight: 700; color: #fff; background: var(--brand);
  border-radius: 999px; padding: 2px 12px;
}
.play-bar .pb-step { margin-left: auto; font-size: 1.05rem; font-weight: 800; color: var(--ink2); }
.play-bar .pb-timer {
  font-size: 1.05rem; font-weight: 800; color: var(--ink2);
  background: #f2f5f9; border-radius: 999px; padding: 2px 12px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.play-bar .pb-timer.danger { color: #fff; background: #e5484d; animation: pbPulse 1s infinite; }
@keyframes pbPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.play-progress-track {
  height: 14px; background: #e3e8ef; border-radius: 999px; overflow: hidden; margin-bottom: 16px;
}
.play-progress-fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, #2f86d0, #1b7a3c); transition: width .35s ease;
}

.q-card {
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  padding: 24px 18px; margin-bottom: 18px; text-align: center; box-shadow: var(--sh);
}
.q-text { font-size: 1.45rem; font-weight: 800; margin-bottom: 14px; line-height: 1.45; }
.q-hint { font-size: 1.05rem; color: var(--ink2); }
.q-big { font-size: 2.9rem; font-weight: 800; letter-spacing: 3px; margin: 6px 0; line-height: 1.25; }
.q-stage { font-size: 3.2rem; margin: 8px 0; line-height: 1.35; }
.q-stage.small { font-size: 2.3rem; }

.opt-list { display: grid; gap: 14px; grid-template-columns: 1fr; }
.opt-list.two { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.opt {
  position: relative; min-height: 96px; padding: 14px 16px;
  font-size: 1.55rem; font-weight: 800; color: var(--ink); background: #fff;
  border: 2px solid var(--line); border-radius: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 12px; text-align: center;
  box-shadow: var(--sh); transition: transform .12s, box-shadow .12s, border-color .12s;
}
.opt:hover { border-color: var(--brand); box-shadow: var(--sh2); transform: translateY(-2px); }
.opt:active { transform: scale(.985); }
.opt .opt-no {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand2);
  font-size: 1.1rem; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.opt.correct { background: linear-gradient(180deg, #f0faf4, var(--ok-soft)); border-color: var(--ok); color: var(--ok); animation: pop .3s ease both; }
.opt.correct .opt-no { background: var(--ok); color: #fff; }
.opt.wrong { background: linear-gradient(180deg, #fdf0ef, var(--no-soft)); border-color: var(--no); color: var(--no); animation: pop .3s ease both; }
.opt.wrong .opt-no { background: var(--no); color: #fff; }
.opt[disabled] { cursor: default; opacity: .95; }
.opt.plain { font-size: 1.3rem; }

.fb {
  font-size: 1.4rem; font-weight: 800; text-align: center;
  padding: 16px; border-radius: 18px; margin-top: 16px; border: 2px solid transparent;
  animation: pop .3s ease both;
}
.fb.ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.fb.no { background: var(--no-soft); border-color: var(--no); color: var(--no); }
.fb-ans { font-size: 1.1rem; margin-top: 6px; color: var(--ink2); }
.btn-next {
  display: block; width: 100%; min-height: 84px; margin-top: 14px;
  font-size: 1.45rem; font-weight: 800; color: #fff;
  background: linear-gradient(180deg, #2b9c53, #1b7a3c);
  border: none; border-radius: 18px; cursor: pointer;
  box-shadow: 0 6px 16px rgba(27, 122, 60, .28);
}

.mem-wrap .mem-tip { font-size: 1.1rem; color: var(--ink2); margin-bottom: 10px; }
.mem-wrap .btn-primary { margin-top: 18px; }

/* ---------------- 图形类 ---------------- */
.grid-cells { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.cell {
  position: relative; width: 74px; height: 74px; border: 2px solid var(--line);
  border-radius: 14px; background: #fff; font-size: 2.2rem;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--sh);
}
.cell.sm { width: 100%; height: auto; aspect-ratio: 1/1; font-size: 1.5rem; border-radius: 10px; }
.cellno {
  position: absolute; left: 3px; top: 0; font-size: .78rem; color: var(--brand2); font-weight: 800;
}
.digit-grid { display: grid; gap: 6px; justify-content: center; margin: 6px auto; width: 100%; }
.digit-cell {
  width: 100%; aspect-ratio: 1/1; max-height: 64px; font-size: 1.7rem; font-weight: 800;
  border: 2px solid var(--line); border-radius: 12px; color: var(--ink); cursor: pointer;
  background: linear-gradient(180deg, #ffffff, #f2f6fb);
  box-shadow: 0 2px 5px rgba(16, 38, 76, .07); transition: transform .12s, border-color .12s;
}
.digit-cell:hover { border-color: var(--brand); }
.digit-cell.hit { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); transform: scale(1.06); }
.digit-cell.miss { background: var(--no-soft); border-color: var(--no); color: var(--no); }

.cards { display: grid; gap: 10px; justify-content: center; width: 100%; margin: 0 auto; }
.card-item {
  width: 100%; aspect-ratio: 3/3.4; max-height: 96px; font-size: 2.2rem;
  border: 2px solid var(--brand2); border-radius: 14px;
  background: linear-gradient(160deg, #1272c2, #0b4c86); color: transparent;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh); transition: transform .18s;
}
.card-item.open {
  background: #fff; color: var(--ink); border-color: var(--line); transform: rotateY(180deg) scale(1.02);
}
.card-item.matched { background: var(--ok-soft); border-color: var(--ok); color: var(--ink); }

.lights { display: grid; gap: 12px; justify-content: center; width: 100%; margin: 0 auto; }
.light {
  width: 100%; aspect-ratio: 1/1; max-height: 96px; border-radius: 20px;
  border: 2px solid var(--line); background: #e7ecf3; cursor: pointer; transition: background .18s, transform .18s;
}
.light.on { background: #ffcf5c; border-color: #d18e00; transform: scale(1.05); box-shadow: 0 0 18px rgba(255, 180, 40, .7); }

.seq-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; align-items: center; }
.seq-box {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 76px; min-height: 76px; padding: 6px 10px;
  border: 2px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--sh);
}
.seq-dot { font-size: 1.9rem; line-height: 1; }
.seq-q { font-size: 2.4rem; font-weight: 800; color: var(--brand); }

.blocks { display: flex; gap: 5px; align-items: flex-end; justify-content: center; margin: 6px 0; flex-wrap: nowrap; }
.blocks .col { display: flex; flex-direction: column-reverse; gap: 3px; }
.blk {
  width: 40px; height: 40px; border: 2px solid #5c6b7d; border-radius: 6px;
  background: linear-gradient(180deg, #dfe7f1, #b9c7d8);
}
.blk.top { background: linear-gradient(180deg, #f3f7fc, #d6e0ec); }

.words { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.word-btn {
  min-height: 76px; padding: 8px 18px; font-size: 1.45rem; font-weight: 800;
  border: 2px solid var(--brand); border-radius: 14px; background: #fff; color: var(--brand2); cursor: pointer;
  box-shadow: var(--sh);
}
.word-btn.used { background: #f1f3f6; border-color: var(--line); color: var(--ink3); box-shadow: none; }
.answer-line {
  min-height: 78px; border: 2px dashed var(--line); border-radius: 14px;
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; flex-wrap: wrap;
  font-size: 1.35rem; font-weight: 800; background: #fbfcfe;
}

.rot-shape { width: 132px; height: 132px; color: var(--brand); }
.rot-shape svg { width: 100%; height: 100%; display: block; }
.rot-opt { display: flex; align-items: center; justify-content: center; }
.rot-opt .rot-shape { width: 84px; height: 84px; }

.stroop-word { font-size: 4rem; font-weight: 800; margin: 6px 0; }
.stroop-card {
  display: inline-block; border: 6px solid transparent; border-radius: 18px;
  padding: 8px 34px; margin: 8px 0; background: #fff; box-shadow: var(--sh);
}
.stroop-card .stroop-word { margin: 0; }

/* ---------------- 结算 ---------------- */
.result-card {
  text-align: center; padding: 32px 18px;
  background: radial-gradient(circle at 50% 0%, #f0f8ff 0%, #ffffff 62%);
}
.result-title { font-size: 1.75rem; font-weight: 800; margin: 0 0 12px; }
.result-score {
  width: 148px; height: 148px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2f86d0, #0b5fa5); color: #fff;
  border: 5px solid rgba(255, 255, 255, .75);
  box-shadow: 0 12px 28px rgba(11, 95, 165, .35), 0 0 0 6px var(--brand-soft);
  animation: pop .4s ease both;
}
.result-score .rs-num { font-size: 2.4rem; font-weight: 800; line-height: 1; }
.result-score .rs-of { font-size: 1rem; opacity: .9; }
.stars { font-size: 2.1rem; color: #e08c00; letter-spacing: 6px; margin-bottom: 8px; }
.result-sub { font-size: 1.2rem; color: var(--ink2); margin: 0 0 4px; }
.unlock-banner {
  margin-top: 14px; padding: 12px; border-radius: 14px; font-size: 1.15rem; font-weight: 800;
  background: var(--ok-soft); color: var(--ok); border: 2px dashed var(--ok);
}

/* ---------------- 统计 ---------------- */
.stat-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.stat-box {
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px 12px;
  text-align: center; box-shadow: var(--sh); border-top: 5px solid var(--brand);
}
.stat-box.g2 { border-top-color: var(--ok); }
.stat-box.g3 { border-top-color: var(--warn); }
.stat-box.g4 { border-top-color: #6b4ce6; }
.stat-num { font-size: 2.1rem; font-weight: 800; color: var(--brand2); line-height: 1.1; }
.stat-label { font-size: .95rem; color: var(--ink2); margin-top: 4px; }

.bars { display: flex; align-items: flex-end; gap: 8px; height: 180px; margin-top: 10px; }
.bar-item { flex: 1; text-align: center; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.bar-col {
  background: linear-gradient(180deg, #2f86d0, #0b5fa5); border-radius: 8px 8px 4px 4px;
  min-height: 5px; margin: 0 auto; width: 66%;
}
.bar-col.zero { background: #dde3ea; }
.bar-label { font-size: .88rem; color: var(--ink3); margin-top: 6px; }
.bar-val { font-size: 1rem; font-weight: 800; color: var(--brand2); margin-bottom: 2px; }

.dim-row { margin-bottom: 16px; }
.dim-row .dim-head { display: flex; justify-content: space-between; font-size: 1.08rem; font-weight: 700; margin-bottom: 6px; }
.dim-track { height: 18px; background: #e6eaf0; border-radius: 999px; overflow: hidden; }
.dim-fill { height: 100%; border-radius: 999px; transition: width .5s; }

.history-item {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 11px 0; border-bottom: 1px dashed var(--line); font-size: 1.02rem;
}
.history-item:last-child { border-bottom: none; }
.hi-pass { color: var(--ok); font-weight: 800; }
.hi-fail { color: var(--warn); font-weight: 800; }

/* ---------------- 底部导航 ---------------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; gap: 12px; justify-content: center;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px);
  border-top: 2px solid var(--line);
}
.tab {
  flex: 1; max-width: 300px; min-height: 68px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 1.2rem; font-weight: 800;
  border: 2px solid var(--brand); border-radius: 18px; background: #fff; color: var(--brand); cursor: pointer;
}
.tab svg { width: 24px; height: 24px; }
.tab.on { background: linear-gradient(180deg, #1272c2, var(--brand)); color: #fff; box-shadow: 0 6px 16px rgba(11, 95, 165, .28); }

/* ---------------- 设置弹窗 ---------------- */
.modal-mask {
  position: fixed; inset: 0; z-index: 50; background: rgba(14, 24, 40, .5);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  animation: fadeUp .2s ease both;
}
.modal-box {
  background: #fff; border-radius: 22px; padding: 22px; width: 100%; max-width: 540px;
  max-height: 86vh; overflow: auto; box-shadow: var(--sh2);
}
.modal-box h3 { margin: 0 0 18px; font-size: 1.45rem; }
.set-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.set-row .set-label { font-size: 1.08rem; font-weight: 700; }
.switch {
  min-width: 118px; min-height: 58px; font-size: 1.1rem; font-weight: 800;
  border: 2px solid var(--brand); border-radius: 14px; background: #fff; color: var(--brand); cursor: pointer;
}
.switch.on { background: var(--ok); border-color: #14612f; color: #fff; }
.seg { display: flex; gap: 8px; }
.seg button {
  min-height: 58px; min-width: 72px; font-size: 1.05rem; font-weight: 800;
  border: 2px solid var(--brand); border-radius: 14px; background: #fff; color: var(--brand); cursor: pointer;
}
.seg button.on { background: var(--brand); color: #fff; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 620px) {
  .app { padding-left: 10px; padding-right: 10px; }
  .q-big { font-size: 2.2rem; letter-spacing: 1px; }
  .q-stage { font-size: 2.6rem; }
  .q-card { padding: 18px 12px; }
  .cell { width: 58px; height: 58px; font-size: 1.8rem; }
  .blk { width: 32px; height: 32px; }
  .rec-grid, .game-grid { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); }
  .level-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .opt { min-height: 88px; font-size: 1.35rem; }
  .topbar-title { font-size: 1.25rem; }
  .btn-back, .btn-set { min-width: 76px; font-size: 1rem; }
  .hero-title { font-size: 1.45rem; }
  .result-score { width: 124px; height: 124px; }
  .rot-shape { width: 108px; height: 108px; }
  .rot-opt .rot-shape { width: 70px; height: 70px; }
}
@media (min-width: 900px) {
  .opt-list { grid-template-columns: repeat(2, 1fr); }
  .opt-list.one, .opt-list.two { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .app { max-width: 1080px; }
}

/* ---------------- 挑战级游戏（300 关）组件 ---------------- */
/* 关卡分页器 */
.lv-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.pg-btn {
  min-height: 56px; padding: 8px 24px; font-size: 1.15rem; font-weight: 800;
  border: none; border-radius: 14px; cursor: pointer; color: #fff;
  background: linear-gradient(180deg, #1272c2, var(--brand));
  box-shadow: 0 4px 12px rgba(11, 95, 165, .28); transition: transform .12s;
}
.pg-btn:active { transform: scale(.96); }
.pg-btn:disabled { background: #e5eaf0; color: var(--ink3); box-shadow: none; }
.pg-info { font-size: 1.05rem; font-weight: 700; color: var(--ink2); }

/* 舒尔特方格小格（6×6 / 7×7 用） */
.digit-cell.sm { font-size: 1.3rem; max-height: 54px; border-radius: 10px; }
.digit-cell.xs { font-size: 1.05rem; max-height: 42px; min-height: 36px; border-radius: 8px; padding: 2px; }
.digit-cell.static { cursor: default; }

/* 日历拼图 */
.cal-title { text-align: center; font-size: 1.4rem; font-weight: 800; color: var(--ink); margin: 4px 0 8px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; max-width: 620px; margin: 0 auto; }
.cal-head { text-align: center; font-size: 1.05rem; font-weight: 800; color: var(--brand2); padding: 2px 0; }
.cal-cell {
  min-height: 52px; display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; font-weight: 700; background: #f7fafc;
  border: 2px solid var(--line); border-radius: 12px;
}
.cal-cell.hl {
  background: linear-gradient(180deg, #e9f4ff, var(--brand-soft));
  border-color: var(--brand); color: var(--brand2); box-shadow: 0 0 0 3px rgba(11, 95, 165, .18);
}
.cal-cell.blank { background: transparent; border: none; }

/* 视觉追踪 */
.vt-row { position: relative; height: 148px; margin: 12px 0; }
.vt-cup {
  position: absolute; top: 0; height: 138px; min-width: 64px;
  border: 3px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, #ffffff, #f4f7fb);
  box-shadow: 0 6px 14px rgba(16, 38, 76, .13);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  cursor: pointer; transition: left .45s ease;
}
.vt-cup .vt-emoji { font-size: 3rem; line-height: 1; }
.vt-cup .vt-star { font-size: 1.9rem; line-height: 1; }
.vt-row.ready .vt-cup:hover { border-color: var(--brand); }
.vt-cup.hit { border-color: var(--ok); background: var(--ok-soft); }
.vt-cup.miss { border-color: var(--no); background: var(--no-soft); }

/* 多选题（组字游戏等）：候选按钮，可点多选 */
.ms-opts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 14px; }
.ms-opt {
  min-width: 30%; min-height: 64px; font-size: 1.7rem; font-weight: 800; color: var(--ink); cursor: pointer;
  background: linear-gradient(180deg, #ffffff, #f4f7fb); border: 3px solid var(--line); border-radius: 16px;
  box-shadow: var(--sh); transition: transform .1s;
}
.ms-opt:active { transform: scale(.96); }
.ms-opt.sel { border-color: var(--brand); background: var(--brand-soft); }
.ms-opt.hit { border-color: var(--ok); background: var(--ok-soft); }
.ms-opt.miss { border-color: var(--no); background: var(--no-soft); }

@media (max-width: 620px) {
  .cal-cell { min-height: 44px; font-size: 1.15rem; border-radius: 10px; }
  .vt-row { height: 118px; }
  .vt-cup { height: 108px; }
  .vt-cup .vt-emoji { font-size: 2.3rem; }
  .vt-cup .vt-star { font-size: 1.4rem; }
  .ms-opt { min-width: 44%; min-height: 56px; font-size: 1.4rem; }
}

/* ---------------- 免费提示（第四版） ---------------- */
.hint-btn {
  flex: 0 0 auto; min-height: 44px; padding: 4px 16px; margin-left: 10px;
  font-size: 1.05rem; font-weight: 800; color: #7a4a00; cursor: pointer;
  background: linear-gradient(180deg, #fff3d6, #ffe4a8);
  border: 2px solid #e8b84b; border-radius: 999px;
  box-shadow: 0 3px 8px rgba(224, 140, 0, .25); transition: transform .12s;
}
.hint-btn:active { transform: scale(.95); }
/* 被提示排除的错误选项：变淡打叉，不可再点 */
.opt.opt-off { opacity: .38; filter: grayscale(.7); text-decoration: line-through; }
/* 操作题提示：金色呼吸框闪一下 */
@keyframes hintFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 164, 32, 0); }
  40% { box-shadow: 0 0 0 7px rgba(232, 164, 32, .65); border-color: #e8a420; }
}
.hint-flash { animation: hintFlash .8s ease 2; border-color: #e8a420 !important; }
/* 速记速算：提示时重新显示的数字 */
.qc-peek { color: #0b5fa5; background: #fff8e8; border: 2px dashed #e8b84b; border-radius: 14px; padding: 4px 10px; }
/* 速记速算：观看时长选择 */
.qc-seg { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.qc-seg-label { font-size: 1rem; font-weight: 700; color: var(--ink2); }
.qc-tsec {
  font-size: 1rem; font-weight: 700; color: var(--ink2); background: #f2f5f9;
  border: 2px solid var(--line); border-radius: 999px; padding: 6px 16px; cursor: pointer;
}
.qc-tsec.on { color: #fff; background: var(--brand); border-color: var(--brand); }
@media (max-width: 620px) {
  .hint-btn { padding: 4px 12px; font-size: .98rem; margin-left: 6px; }
}

/* ========== 挑战级第二辑（10 款新游戏配套样式） ========== */
/* 词语分类搜：两字词格子 */
.digit-cell.wd { font-size: 1.3rem; letter-spacing: 1px; font-weight: 700; }
/* 配对联想：搭配行 */
.pair-rows { display: grid; gap: 10px; max-width: 540px; margin: 10px auto; }
.pair-row {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  background: var(--brand-soft); border: 2px solid var(--line); border-radius: 14px;
  padding: 12px 22px; font-size: 1.55rem; font-weight: 800;
}
.pair-row .pair-arrow { color: var(--ink2); font-weight: 400; }
/* 迷你数独 */
.sdk { border-collapse: collapse; margin: 10px auto; background: #fff; }
.sdk-c {
  width: 56px; height: 56px; border: 1.5px solid #c3cbdb; text-align: center;
  font-size: 1.7rem; font-weight: 800; color: var(--ink);
}
.sdk-c.sdk-l { border-left: 3px solid #26314b; }
.sdk-c.sdk-t { border-top: 3px solid #26314b; }
.sdk tr:last-child .sdk-c { border-bottom: 3px solid #26314b; }
.sdk-c:last-child { border-right: 3px solid #26314b; }
.sdk-c.sdk-blank { background: #f3f5f8; }
.sdk-c.sdk-q { background: #fff3cf; color: #b57d0b; border-color: #e8b84b; }
/* 认读钟表 */
.clock-wrap { display: flex; justify-content: center; margin: 8px 0; }
.clock-svg { width: 250px; height: 250px; filter: drop-shadow(0 4px 10px rgba(38,49,75,.16)); }
/* 故事回忆 */
.story-t {
  max-width: 580px; margin: 6px auto; font-size: 1.55rem; line-height: 2.05;
  text-align: left; background: #fffdf4; border: 2px solid #ecdcb0;
  border-radius: 16px; padding: 16px 22px; font-weight: 600;
}
/* 目标监测 */
.cpt-stage {
  min-height: 150px; display: flex; align-items: center; justify-content: center;
  font-size: 5rem; font-weight: 800; background: #fff; border: 3px solid var(--line);
  border-radius: 20px; margin: 12px auto; max-width: 420px;
}
.cpt-stage.hit { background: var(--ok-soft); border-color: var(--ok); }
.cpt-stage.miss { background: var(--no-soft); border-color: var(--no); }
.cpt-btn { font-size: 1.5rem; padding: 16px 34px; border-radius: 18px; }
/* 连连看：牌面常亮 */
.card-item.lit { background: #fff; color: var(--ink); border-color: var(--line); }
.card-item.lit.open { border-color: var(--brand); transform: scale(1.05); box-shadow: 0 0 0 3px var(--brand-soft); }
.card-item.lit.miss { background: var(--no-soft); border-color: var(--no); }
@media (max-width: 620px) {
  .sdk-c { width: 44px; height: 44px; font-size: 1.35rem; }
  .clock-svg { width: 200px; height: 200px; }
  .pair-row { font-size: 1.3rem; padding: 10px 16px; }
  .story-t { font-size: 1.3rem; line-height: 1.9; padding: 12px 16px; }
  .cpt-stage { font-size: 3.6rem; min-height: 110px; }
  .digit-cell.wd { font-size: 1.05rem; }
}

/* ---------------- 挑战级·第三辑（数独 / 数字华容道 / 拆字 / 拼当天日历） ---------------- */
/* 数独：9×9 小格子 + 数字盘 + 状态 */
.sdk-n9 .sdk-c { width: 36px; height: 36px; font-size: 1.15rem; }
.sdk-n6 .sdk-c { width: 46px; height: 46px; font-size: 1.4rem; }
.sdk-c.sdk-blank { cursor: pointer; }
.sdk-c.sdk-sel { background: var(--brand-soft); outline: 3px solid var(--brand); outline-offset: -3px; }
.sdk-c.sdk-fixed { background: var(--ok-soft); color: var(--ok); }
.sdk-c.sdk-err, .sdk-err { background: var(--no-soft) !important; border-color: var(--no) !important; }
.sdk-pad { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 14px auto 6px; max-width: 480px; }
.sdk-pad .digit-cell { min-width: 52px; min-height: 52px; font-size: 1.5rem; }
/* 数字华容道 */
.hr-board { display: grid; gap: 8px; margin: 12px auto; max-width: 400px; }
.hr-n3 { grid-template-columns: repeat(3, 1fr); }
.hr-n4 { grid-template-columns: repeat(4, 1fr); }
.hr-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; font-weight: 800; color: var(--ink); cursor: pointer;
  background: linear-gradient(180deg, #ffffff, #eef3fa); border: 3px solid var(--line);
  border-radius: 16px; box-shadow: var(--sh); transition: transform .1s;
}
.hr-cell:active { transform: scale(.95); }
.hr-cell.hr-empty { background: #e8ecf3; border-style: dashed; cursor: default; box-shadow: none; }
.hr-board.hr-done .hr-cell { border-color: var(--ok); background: var(--ok-soft); }
/* 拆字游戏：目标大字 */
.chai-zi {
  text-align: center; font-size: 5rem; font-weight: 800; line-height: 1.25; color: var(--ink);
  background: #fffdf4; border: 2px solid #ecdcb0; border-radius: 20px;
  max-width: 220px; margin: 8px auto; padding: 6px 0;
}
/* 拼当天日历：挖空格与数字块 */
.cal-cell.cal-hole {
  background: #fff3cf; color: #b57d0b; border: 2px dashed #e8b84b; cursor: pointer; font-weight: 800;
}
.cal-cell.cal-fixed { background: var(--ok-soft); color: var(--ok); border: 2px solid var(--ok); cursor: default; }
.dc-tiles { margin-top: 16px; }
.dc-tile { min-width: 64px; min-height: 56px; }
.dc-tile.hit { opacity: .55; pointer-events: none; }
@media (max-width: 620px) {
  .sdk-n9 .sdk-c { width: 30px; height: 30px; font-size: 0.95rem; }
  .sdk-n6 .sdk-c { width: 40px; height: 40px; font-size: 1.2rem; }
  .sdk-pad .digit-cell { min-width: 44px; min-height: 44px; font-size: 1.25rem; }
  .hr-cell { font-size: 1.8rem; border-radius: 12px; }
  .chai-zi { font-size: 3.8rem; max-width: 170px; }
  .dc-tile { min-width: 54px; min-height: 50px; }
}