:root {
  --bg: #f6f3ee;
  --surface: #ffffff;
  --surface-2: #efebe4;
  --ink: #1f1d1a;
  --ink-2: #5d5850;
  --muted: #8a847a;
  --line: #d9d3c9;
  --accent: #e8643c;
  --ok: #2e9e5b;
  --bad: #d93a3a;
  --tile-0: #8a8a8a;
  --tile-1: #9b59d0;
  --tile-2: #2e9e5b;
  --shadow: 0 1px 2px rgba(30, 25, 15, 0.06), 0 6px 20px rgba(30, 25, 15, 0.06);
  --radius: 16px;
  --shadow-lg: 0 2px 4px rgba(30, 25, 15, 0.05), 0 18px 40px rgba(30, 25, 15, 0.10);
  --r0: #c9b8f5; --r1: #f7c9a8; --r2: #b9e4d0; --r3: #f5e3a3; --r4: #a9d2f2;
  --r5: #f2b6c8; --r6: #d7dfa1; --r7: #c2c9d6; --r8: #f0c6e8; --r9: #b8e0e6;
  --yang: #f2b33d;
  --yin: #2c3440;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #15151a; --surface: #1f1f26; --surface-2: #2a2a33; --ink: #f1eee8; --ink-2: #c4bfb6;
    --muted: #8f8a82; --line: #3a3a45; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25); --shadow-lg: 0 2px 6px rgba(0,0,0,.35), 0 20px 44px rgba(0,0,0,.35);
    --r0: #5b4d8a; --r1: #8a5a3e; --r2: #3f7560; --r3: #84733a; --r4: #3c6488; --r5: #874a5e; --r6: #66703a; --r7: #555d6c; --r8: #7a4a74; --r9: #3d6f75;
    --yin: #0b0d10; --tile-0: #4a4a52;
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --bg: #15151a; --surface: #1f1f26; --surface-2: #2a2a33; --ink: #f1eee8; --ink-2: #c4bfb6;
  --muted: #8f8a82; --line: #3a3a45; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25); --shadow-lg: 0 2px 6px rgba(0,0,0,.35), 0 20px 44px rgba(0,0,0,.35);
  --r0: #5b4d8a; --r1: #8a5a3e; --r2: #3f7560; --r3: #84733a; --r4: #3c6488; --r5: #874a5e; --r6: #66703a; --r7: #555d6c; --r8: #7a4a74; --r9: #3d6f75;
  --yin: #0b0d10; --tile-0: #4a4a52;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { line-height: 1.25; margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .05em; }
.ico { display: inline-flex; width: 20px; height: 20px; flex: none; }
.ico svg { width: 100%; height: 100%; }

/* ---------- 顶栏 ---------- */
.site-top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.site-top-in { max-width: 1200px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: .01em; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px; position: relative; flex: none;
  background: linear-gradient(135deg, #f0784a, #d9466f); box-shadow: 0 4px 12px rgba(232, 100, 60, .35);
}
.brand-mark::after { content: ''; position: absolute; inset: 8px; border: 3.5px solid #fff; border-left: 0; border-bottom: 0; border-radius: 0 3px 0 0; }
.top-actions { display: flex; align-items: center; gap: 4px; }
.top-link {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 10px; border: 0; background: none;
  font-size: 14px; font-weight: 600; color: var(--ink-2);
}
.top-link .ico { width: 18px; height: 18px; }
.top-link:hover, .icon-btn:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.lang-btn { font-weight: 800; letter-spacing: .02em; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 10px; border: 0; background: transparent; flex: none;
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink);
}
@media (max-width: 560px) { .hide-sm { display: none; } .site-top-in { padding: 8px 12px; } .top-link { padding: 0 9px; } }

/* ---------- 首页 ---------- */
.home { max-width: 1200px; margin: 0 auto; padding: 0 20px 48px; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: center; padding: 44px 0 36px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 5px 12px 5px 10px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); color: var(--ink-2); font-weight: 600; font-size: 13px; }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: #e8643c; box-shadow: 0 0 0 4px color-mix(in srgb, #e8643c 20%, transparent); }
.hero h1 { font-size: clamp(32px, 5.4vw, 56px); font-weight: 900; letter-spacing: -.02em; line-height: 1.12; }
.lead { color: var(--ink-2); margin: 16px 0 0; font-size: 17px; max-width: 560px; }
.today { background: var(--surface); border-radius: 22px; padding: 20px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 10px; border: 1px solid color-mix(in srgb, var(--line) 50%, transparent); }
.today-top { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.today-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.today-info b { font-size: 17px; }
.today-info span { font-size: 13px; color: var(--muted); }
.today .streak { font-size: 13px; }
.ring { position: relative; width: 84px; height: 84px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 8; }
.ring-bg { stroke: var(--surface-2); }
.ring-fg { stroke: #e8643c; stroke-linecap: round; transition: stroke-dashoffset .6s; }
.ring-txt { position: absolute; inset: 0; display: flex; align-items: baseline; justify-content: center; padding-top: 28px; gap: 2px; }
.ring-txt b { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.ring-txt span { font-size: 12px; color: var(--muted); }
.btn-lg { padding: 13px 18px; font-size: 15px; border-radius: 14px; justify-content: space-between; }
.btn-lg span { overflow: hidden; text-overflow: ellipsis; }
.btn .ico { width: 18px; height: 18px; }

.home-tools {
  position: sticky; top: 57px; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 10px 0; margin-bottom: 8px;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; padding: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line); background: var(--surface); font-size: 14px; font-weight: 700; color: var(--ink-2);
}
.chip small { font-size: 11px; font-weight: 700; color: var(--muted); }
.chip:hover { border-color: var(--ink-2); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip.on small { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); width: 240px; flex: none; color: var(--muted); }
.search:focus-within { border-color: var(--ink-2); }
.search .ico { width: 18px; height: 18px; }
.search-input { border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: var(--ink); width: 100%; min-width: 0; }

.sect { margin-top: 26px; }
.sect-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.sect-head h2 { font-size: 22px; font-weight: 900; letter-spacing: -.01em; }
.sect-sub { color: var(--muted); font-size: 13px; flex: 1; min-width: 0; }
.sect-count { font-size: 13px; font-weight: 700; color: var(--ink-2); background: var(--surface-2); padding: 2px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.empty { text-align: center; padding: 40px 0; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }
.game-card {
  position: relative; display: flex; flex-direction: column; background: var(--surface); border-radius: 18px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.game-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.card-link { display: flex; flex-direction: column; flex: 1; }
.card-art {
  position: relative; height: 108px; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    color-mix(in srgb, var(--accent) 11%, var(--surface));
}
.card-art-in { width: 72px; height: 72px; padding: 6px; border-radius: 18px; background: var(--surface); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 22%, transparent); transition: transform .2s; }
.game-card:hover .card-art-in { transform: scale(1.06) rotate(-2deg); }
.card-art svg, .rules-art svg, .side-art svg { width: 100%; height: 100%; display: block; }
.badge { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow); font-variant-numeric: tabular-nums; }
.badge .ico { width: 14px; height: 14px; }
.badge.ok { background: var(--ok); color: #fff; }
.badge.miss { background: var(--surface); color: var(--bad); }
.badge.go::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 2px; }
.card-body { padding: 14px 16px 6px; }
.card-body h3 { font-size: 17px; font-weight: 800; }
.card-tag { margin: 4px 0 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-foot { display: flex; align-items: center; gap: 8px; padding: 8px 16px 14px; font-size: 12px; color: var(--muted); }
.card-kind { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-links { margin-left: auto; display: flex; gap: 2px; flex: none; }
.card-links a { padding: 3px 8px; border-radius: 8px; font-weight: 700; color: var(--ink-2); }
.card-links a:hover { background: var(--surface-2); color: var(--accent); }
.game-card.is-done .card-art-in { opacity: .85; }
.streak { display: inline-flex; align-items: center; gap: 2px; color: #e8643c; font-weight: 800; }
.streak .ico { width: 14px; height: 14px; }
.pill { font-size: 12px; padding: 2px 9px; border-radius: 99px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: 12px; border: 0; font-weight: 700; font-size: 14px; white-space: nowrap; transition: filter .15s, background .15s, transform .1s;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn-primary:hover { filter: brightness(1.07); }
.btn-ghost { background: var(--surface-2); color: var(--ink); }
.btn-ghost:hover { background: color-mix(in srgb, var(--ink) 10%, var(--surface-2)); }

.about { margin-top: 48px; background: var(--surface); border-radius: 20px; padding: 24px 28px; box-shadow: var(--shadow); border: 1px solid color-mix(in srgb, var(--line) 50%, transparent); }
.about h2 { font-size: 18px; margin-bottom: 8px; }
.about ul { margin: 0; padding-left: 20px; color: var(--ink-2); font-size: 14px; columns: 2 320px; column-gap: 40px; }
.about li { margin: 6px 0; break-inside: avoid; }
.about a { color: var(--accent); }
.site-foot { text-align: center; color: var(--muted); font-size: 13px; padding: 24px 16px 40px; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 22px; padding: 26px 0 18px; }
  .today { max-width: 460px; }
}
@media (max-width: 560px) {
  .home { padding: 0 12px 40px; }
  .lead { font-size: 15px; }
  .home-tools { flex-direction: column; align-items: stretch; gap: 8px; position: static; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .search { width: auto; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .game-card { border-radius: 16px; }
  .card-art { height: 84px; }
  .card-art-in { width: 56px; height: 56px; padding: 4px; border-radius: 14px; }
  .card-body { padding: 10px 12px 4px; }
  .card-body h3 { font-size: 15px; }
  .card-tag { font-size: 12px; }
  .card-foot { padding: 6px 12px 10px; }
  .card-links { display: none; }
  .badge { top: 6px; right: 6px; height: 21px; padding: 0 7px; font-size: 11px; }
  .sect-head h2 { font-size: 19px; }
  .sect-sub { flex-basis: 100%; order: 3; }
  .about { padding: 18px 18px; }
}

/* ---------- 子页面 ---------- */
.page { max-width: 820px; margin: 0 auto; padding: 16px 20px 48px; }
.page h1 { font-size: 28px; font-weight: 900; margin: 12px 0 6px; letter-spacing: -.01em; }
.crumb { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-size: 14px; font-weight: 600; }
.crumb .ico { width: 16px; height: 16px; }
.arch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-top: 18px; }
.arch-item { background: var(--surface); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); transition: transform .15s; }
.arch-item:hover { transform: translateY(-2px); }
.arch-item.done { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.arch-item b { font-size: 15px; }
.arch-item span { color: var(--muted); font-size: 12px; }
.arch-item em { font-style: normal; font-size: 13px; color: var(--accent); font-weight: 700; min-height: 1.4em; }
.stat-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-top: 18px; }
.stat-card { background: var(--surface); border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow); border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); position: relative; overflow: hidden; }
.stat-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); }
.stat-card h3 { font-size: 17px; margin-bottom: 10px; }
.data-card { grid-column: 1 / -1; }
.stat-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; text-align: center; }
.stat-nums div { display: flex; flex-direction: column; }
.stat-nums b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat-nums span { font-size: 12px; color: var(--muted); }

/* ---------- 游戏页 ---------- */
.game-page { max-width: 1120px; margin: 0 auto; padding: 10px 20px 40px; min-height: 100vh; }
.game-top { display: flex; align-items: center; gap: 12px; padding: 4px 0 14px; max-width: 520px; margin: 0 auto; }
.back-btn { background: var(--surface); box-shadow: var(--shadow); border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.game-title { flex: 1; text-align: center; min-width: 0; }
.game-title h1 { font-size: 20px; font-weight: 900; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-title p { margin: 0; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.timer {
  display: inline-flex; align-items: center; gap: 5px; height: 38px; padding: 0 12px; border-radius: 999px; min-width: 82px; justify-content: center;
  background: var(--surface); box-shadow: var(--shadow); border: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: 15px; color: var(--ink);
}
.timer .ico { width: 16px; height: 16px; color: var(--accent); }
.play { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; justify-content: center; }
.play-main { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.play-side { display: none; }
@media (min-width: 1000px) {
  .game-top { max-width: 892px; }
  .play { grid-template-columns: minmax(0, 560px) 300px; }
  .play-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; align-self: start; }
  .play-links { display: none; }
}
.side-card { background: var(--surface); border-radius: 18px; padding: 18px; box-shadow: var(--shadow); border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.side-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.side-art { width: 52px; height: 52px; flex: none; border-radius: 14px; padding: 5px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.side-head h2 { font-size: 17px; font-weight: 900; }
.side-head p { margin: 0; font-size: 12.5px; color: var(--muted); }
.side-card h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; }
.side-rules { margin: 0; padding-left: 18px; font-size: 14px; color: var(--ink-2); }
.side-rules li { margin: 0 0 8px; }
.side-rules li::marker { color: var(--accent); font-weight: 800; }
.side-note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); padding-top: 10px; border-top: 1px dashed var(--line); }
.more-links { display: flex; flex-wrap: wrap; gap: 8px; }
.more-links a { padding: 7px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13px; font-weight: 700; color: var(--ink-2); }
.more-links a:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
.play-links { margin-top: 14px; }
.play-links .more-links { justify-content: center; }
.seg { display: flex; gap: 2px; background: var(--surface-2); border-radius: 12px; padding: 4px; margin-bottom: 16px; }
.seg a { padding: 6px 14px; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.seg a.on { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
.seg .seg-new { color: var(--accent); }
.board-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.game-status { min-height: 28px; margin-top: 12px; font-size: 14px; color: var(--ok); font-weight: 700; display: flex; gap: 10px; align-items: center; }
.link { border: 0; background: none; color: var(--accent); text-decoration: underline; padding: 0; font-weight: 700; }
.toolbar {
  display: flex; gap: 2px; margin-top: 6px; padding: 5px; border-radius: 16px; background: var(--surface);
  box-shadow: var(--shadow); border: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.tool {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 66px; height: 54px;
  border: 0; background: transparent; border-radius: 12px; padding: 0 10px; font-size: 12px; font-weight: 700; color: var(--ink-2);
}
.tool .ico { width: 20px; height: 20px; }
.tool:hover:not(:disabled) { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.tool:disabled { opacity: .35; cursor: default; }
.game-tip { color: var(--muted); font-size: 13px; text-align: center; margin: 14px 0 0; max-width: 460px; }
@media (max-width: 560px) {
  .game-page { padding: 8px 12px 32px; }
  .tool { min-width: 58px; }
}

.board {
  --size: min(calc(100vw - 32px), 440px);
  width: var(--size); height: var(--size);
  display: grid; grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr);
  position: relative; user-select: none; -webkit-user-select: none; touch-action: none;
  background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden;
  border: 2.5px solid var(--ink);
}
.board .cell { position: relative; display: flex; align-items: center; justify-content: center; border: 0; padding: 0; background: transparent; }
.board.locked { cursor: default; }

/* 一笔连 */
.path-board .cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .12s; }
.path-board .cell.on { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.path-board .num {
  position: relative; z-index: 3; width: 58%; height: 58%; border-radius: 50%; background: var(--ink); color: var(--bg);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: calc(var(--size) / var(--n) * .3);
}
.path-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.path-line { fill: none; stroke: var(--accent); stroke-width: .36; stroke-linecap: round; stroke-linejoin: round; }
.wall { stroke: var(--ink); stroke-width: .1; stroke-linecap: round; }
.path-board.complete .path-line { animation: pulse 0.6s ease 2; }
@keyframes pulse { 50% { stroke-width: .46; } }

/* 皇冠领地 */
.crowns-board { gap: 0; }
.crowns-board .cell { border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.crowns-board .cell.bt { border-top: 2.5px solid var(--ink); }
.crowns-board .cell.bb { border-bottom: 2.5px solid var(--ink); }
.crowns-board .cell.bl { border-left: 2.5px solid var(--ink); }
.crowns-board .cell.br { border-right: 2.5px solid var(--ink); }
.crowns-board { border-width: 1px; }
.reg-0 { background: var(--r0) !important; } .reg-1 { background: var(--r1) !important; } .reg-2 { background: var(--r2) !important; }
.reg-3 { background: var(--r3) !important; } .reg-4 { background: var(--r4) !important; } .reg-5 { background: var(--r5) !important; }
.reg-6 { background: var(--r6) !important; } .reg-7 { background: var(--r7) !important; }
.reg-8 { background: var(--r8) !important; } .reg-9 { background: var(--r9) !important; }
.crown { width: 72%; height: 72%; color: var(--ink); display: flex; animation: pop .18s ease; }
.crown svg { width: 100%; height: 100%; }
.cell.bad .crown { color: var(--bad); }
.cell.bad::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent 0 6px, color-mix(in srgb, var(--bad) 22%, transparent) 6px 9px); pointer-events: none; }
.xmark { width: 26%; height: 26%; position: relative; opacity: .55; }
.xmark::before, .xmark::after { content: ''; position: absolute; left: 50%; top: -15%; width: 2px; height: 130%; background: var(--ink); transform: rotate(45deg); }
.xmark::after { transform: rotate(-45deg); }
@keyframes pop { from { transform: scale(.4); } to { transform: scale(1); } }

/* 阴阳格 */
.binary-board .cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; }
.binary-board .cell.given { background: var(--surface-2); cursor: default; }
.binary-board .cell::before { content: ''; width: 58%; height: 58%; border-radius: 50%; transform: scale(0); transition: transform .15s; }
.binary-board .cell[data-v='1']::before { background: var(--yang); transform: scale(1); box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); }
.binary-board .cell[data-v='0']::before { background: var(--yin); transform: scale(1); box-shadow: inset 0 -3px 0 rgba(255,255,255,.12); outline: 1.5px solid color-mix(in srgb, var(--ink) 30%, transparent); }
.binary-board .cell.bad { background: color-mix(in srgb, var(--bad) 18%, transparent); }
.binary-board .cell.hinted::after, .sudoku-board .cell.hinted::after { content: ''; position: absolute; right: 4px; top: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.edge-sign {
  position: absolute; z-index: 2; transform: translate(-50%, -50%); width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface); color: var(--accent); font-weight: 900; font-size: 14px; line-height: 20px; text-align: center;
  box-shadow: 0 0 0 1.5px var(--line); pointer-events: none;
}

/* 迷你数独 */
.sudoku-board .cell {
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer;
  font-size: calc(var(--size) / 6 * .46); font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums;
}
.sudoku-board .cell.given { color: var(--ink); font-weight: 800; }
.sudoku-board .cell.bt { border-top: 2.5px solid var(--ink); }
.sudoku-board .cell.bl { border-left: 2.5px solid var(--ink); }
.sudoku-board .cell.peer { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.sudoku-board .cell.same { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.sudoku-board .cell.sel { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.sudoku-board .cell.bad { color: var(--bad); }
.numpad { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; width: min(calc(100vw - 32px), 440px); }
.key {
  height: 50px; border: 0; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow);
  font-size: 20px; font-weight: 700; color: var(--ink); touch-action: manipulation;
}
.key:active { transform: scale(.96); }
.numpad .key-wide { font-size: 14px; }
.locked .key, .key:disabled { opacity: .45; pointer-events: none; }

/* 算式解码 */
.eq-grid { display: grid; gap: 6px; width: min(calc(100vw - 32px), calc(var(--len) * 52px)); }
.eq-row { display: grid; grid-template-columns: repeat(var(--len), 1fr); gap: 6px; }
.tile {
  aspect-ratio: 1; border: 2px solid var(--line); border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: clamp(16px, 5vw, 24px); font-weight: 800; background: var(--surface); text-transform: none;
}
.eq-row.current .tile { border-color: color-mix(in srgb, var(--ink) 30%, var(--line)); }
.tile.filled { border-color: var(--ink-2); animation: pop .1s ease; }
.tile.s0, .tile.s1, .tile.s2 { color: #fff; border-color: transparent; animation: flip .35s ease both; }
.tile.s0 { background: var(--tile-0); } .tile.s1 { background: var(--tile-1); } .tile.s2 { background: var(--tile-2); }
@keyframes flip { 0% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
.eq-row.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.eq-clue { min-height: 20px; font-size: 13px; color: var(--accent); font-weight: 700; text-align: center; }
.eq-kb { display: flex; flex-direction: column; gap: 6px; width: min(calc(100vw - 24px), 500px); }
.kb-row { display: flex; gap: 5px; }
.kb-row .key { flex: 1; min-width: 0; height: 52px; font-size: 18px; padding: 0; }
.kb-row .key-wide { flex: 1.6; font-size: 15px; }
.key.s0 { background: var(--tile-0); color: #fff; } .key.s1 { background: var(--tile-1); color: #fff; } .key.s2 { background: var(--tile-2); color: #fff; }
.lg { display: inline-block; padding: 0 6px; border-radius: 4px; color: #fff; font-weight: 700; font-size: 13px; }
.lg.s0 { background: var(--tile-0); } .lg.s1 { background: var(--tile-1); } .lg.s2 { background: var(--tile-2); }

/* ---------- 弹窗 / 提示 ---------- */
.modal-back {
  position: fixed; inset: 0; background: rgba(10, 10, 14, .45); display: flex; align-items: center; justify-content: center;
  padding: 16px; z-index: 50; animation: fade .15s;
}
@keyframes fade { from { opacity: 0; } }
.modal-card {
  position: relative; background: var(--surface); border-radius: 20px; padding: 26px 22px 22px; width: 100%; max-width: 420px;
  max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3); animation: rise .2s ease;
}
@keyframes rise { from { transform: translateY(16px); opacity: 0; } }
.modal-x { position: absolute; right: 10px; top: 8px; width: 36px; height: 36px; border: 0; background: none; font-size: 26px; color: var(--muted); }
.rules-art { width: 72px; height: 72px; margin: 0 auto 10px; background: var(--surface-2); border-radius: 16px; padding: 6px; }
.rules h2 { text-align: center; font-size: 20px; margin-bottom: 10px; }
.rules ol { padding-left: 22px; margin: 0 0 10px; }
.rules li { margin: 8px 0; color: var(--ink-2); }
.rules b { color: var(--ink); }
.result { text-align: center; }
.result h2 { font-size: 22px; margin: 10px 0 4px; }
.result .stat-nums { margin: 18px 0; }
.result-badge {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto; background: var(--ok); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700;
}
.result-badge.lose { background: var(--muted); }
.result-badge .ico { width: 36px; height: 36px; }
.share-grid { font-size: 16px; line-height: 1.25; margin: 0 0 16px; letter-spacing: 1px; }
.result-actions { display: flex; flex-direction: column; gap: 8px; }
.result-actions .btn { padding: 12px; font-size: 15px; }
#toast {
  position: fixed; left: 50%; top: 18px; transform: translate(-50%, -150%); background: var(--ink); color: var(--bg);
  padding: 10px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; z-index: 60; transition: transform .25s;
  max-width: calc(100vw - 32px); text-align: center; pointer-events: none;
}
#toast.show { transform: translate(-50%, 0); }

@media (max-width: 420px) {
  .card-actions .btn { padding: 9px 12px; }
  .tool { min-width: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* 分格拼图 */
.blocks-board .cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rect-layer { position: absolute; inset: 0; pointer-events: none; }
.rect {
  position: absolute; border: 2.5px solid var(--ink); border-radius: 7px;
  background: color-mix(in srgb, var(--rc) 80%, transparent); transition: background .15s;
}
.rect.bad { border-style: dashed; border-color: color-mix(in srgb, var(--bad) 80%, var(--ink)); background: color-mix(in srgb, var(--rc) 45%, transparent); }
.rect.preview {
  background: color-mix(in srgb, var(--accent) 22%, transparent); border: 2.5px dashed var(--accent);
  display: flex; align-items: flex-end; justify-content: flex-end; padding: 2px 6px; font-size: 12px; font-weight: 800; color: var(--accent);
}
.blocks-board .clue {
  position: absolute; transform: translate(-50%, -50%); z-index: 3; pointer-events: none;
  font-weight: 800; font-size: calc(var(--size) / var(--n) * .42); color: var(--ink);
}

/* 数织 */
.nono { user-select: none; -webkit-user-select: none; display: flex; flex-direction: column; align-items: flex-start; }
.nono-cols { display: flex; }
.nono-cols .cl {
  width: var(--cell); display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  font-size: calc(var(--cell) * .44); font-weight: 700; line-height: 1.12; padding-bottom: 4px;
}
.nono-body { display: flex; }
.nono-rows .cl {
  height: var(--cell); display: flex; justify-content: flex-end; align-items: center; gap: .4em; padding-right: 6px;
  font-size: calc(var(--cell) * .44); font-weight: 700;
}
.nono .cl.done { opacity: .35; }
.nono-grid {
  display: grid; grid-template-columns: repeat(var(--w), var(--cell)); grid-auto-rows: var(--cell);
  border: 2px solid var(--ink); background: var(--surface); touch-action: none;
}
.nc { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; display: flex; align-items: center; justify-content: center; }
.nc.br5 { border-right: 2px solid var(--ink-2); }
.nc.bb5 { border-bottom: 2px solid var(--ink-2); }
.nc[data-v='1'] { background: var(--ink); }
.nc[data-v='2']::before, .nc[data-v='2']::after { content: ''; position: absolute; width: 2px; height: 42%; background: var(--muted); transform: rotate(45deg); }
.nc[data-v='2']::after { transform: rotate(-45deg); }
.nc.hinted { box-shadow: inset 0 0 0 2px var(--accent); }
.nono.solved .nc[data-v='1'] { background: var(--accent); transition: background .5s; }

/* 骨牌求和 */
.domino-board { position: relative; margin: 6px auto 0; }
.dc { position: absolute; width: var(--cell); height: var(--cell); }
.dc.in { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; border-radius: 4px; }
.dc.rg { background: color-mix(in srgb, var(--rc) 75%, var(--surface)); box-shadow: none; border-radius: 0; }
.dc.rg.bt { border-top: 2px dashed var(--ink-2); } .dc.rg.bb { border-bottom: 2px dashed var(--ink-2); }
.dc.rg.bl { border-left: 2px dashed var(--ink-2); } .dc.rg.br { border-right: 2px dashed var(--ink-2); }
.domino-board.placing .dc.in:hover { filter: brightness(.94); }
.rg-label {
  position: absolute; transform: translate(-35%, -35%); z-index: 4; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px;
  background: var(--ink); color: var(--bg); font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  pointer-events: none; box-shadow: 0 0 0 2px var(--bg); transition: background .2s;
}
.rg-label.ok { background: var(--ok); color: #fff; }
.rg-label.bad { background: var(--bad); color: #fff; }
.dom-layer { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.domino { display: flex; background: var(--surface); border: 2px solid var(--ink); border-radius: 9px; box-shadow: var(--shadow); overflow: hidden; }
.domino .half { flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
.domino .half + .half { border-left: 1.5px solid color-mix(in srgb, var(--ink) 50%, transparent); }
.domino.vert { flex-direction: column; }
.domino.vert .half + .half { border-left: 0; border-top: 1.5px solid color-mix(in srgb, var(--ink) 50%, transparent); }
.domino.placed {
  position: absolute; margin: 3px; width: calc(var(--cell) * 2 - 6px); height: calc(var(--cell) - 6px);
  pointer-events: auto; cursor: pointer; animation: pop .15s ease;
}
.domino.placed.vert { width: calc(var(--cell) - 6px); height: calc(var(--cell) * 2 - 6px); }
.pips { width: 80%; height: 80%; fill: var(--ink); }
.tray-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.tray { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 440px; }
.slot { border: 0; background: transparent; padding: 0; border-radius: 12px; width: 78px; height: 78px; display: flex; align-items: center; justify-content: center; }
.slot.sel { background: color-mix(in srgb, var(--accent) 20%, transparent); box-shadow: inset 0 0 0 2px var(--accent); }
.slot.empty { box-shadow: inset 0 0 0 1.5px var(--line); opacity: .5; }
.domino.small { width: 70px; height: 35px; }
.domino.small.vert { width: 35px; height: 70px; }
.rotate:disabled { opacity: .4; }

/* 架桥 */
.bridges-board { display: block; touch-action: none; }
.bridges-svg { width: 100%; height: 100%; display: block; }
.bg-dots circle { fill: var(--line); }
.island circle { fill: var(--surface); stroke: var(--ink); stroke-width: .06; transition: fill .15s; }
.island text { font-size: .42px; font-weight: 800; fill: var(--ink); }
.island.done circle { fill: var(--accent); stroke: var(--accent); }
.island.done text { fill: #fff; }
.island.over circle { stroke: var(--bad); fill: color-mix(in srgb, var(--bad) 22%, var(--surface)); }
.island.sel circle { stroke: var(--accent); stroke-width: .11; }
.bridge { stroke: var(--ink); stroke-width: .075; stroke-linecap: round; }
.bridge.bad { stroke: var(--bad); }

/* 首页分区 */
.sect { margin-top: 28px; }
.sect:first-of-type { margin-top: 0; }
.sect-head { display: flex; align-items: baseline; gap: 12px; margin: 0 2px 12px; flex-wrap: wrap; }
.sect-head h2 { font-size: 20px; font-weight: 800; }

/* 加载中 */
.loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; gap: 12px; }
.spinner { width: 36px; height: 36px; border-radius: 50%; border: 4px solid var(--surface-2); border-top-color: #e8643c; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 英文键盘 / 词锁 */
.qwerty .kb-row { gap: 5px; }
.qwerty .kb-mid { padding: 0 4.5%; }
.qwerty .key { font-size: 16px; height: 54px; }
.qwerty .key-wide { flex: 1.5; font-size: 13px; }
.game-wordlock .tile.s1, .game-wordlock .key.s1, .lg.w1 { background: #d9a21b; }
.word-grid { width: min(calc(100vw - 32px), calc(var(--len) * 60px)); }

/* 词群 */
.wg { width: 100%; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.wg-solved { display: flex; flex-direction: column; gap: 8px; }
.wg-bar { border-radius: 12px; padding: 10px 12px; text-align: center; color: #1f1d1a; animation: pop .25s ease; }
.wg-bar b { display: block; font-size: 14px; }
.wg-bar span { font-size: 13px; letter-spacing: .02em; }
.lv1 { background: #f2c94c; } .lv2 { background: #8fd18f; } .lv3 { background: #8ab8f0; } .lv4 { background: #c9a2f0; }
.lg.lv1, .lg.lv2, .lg.lv3, .lg.lv4 { color: #1f1d1a; }
.wg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wg-grid.shake { animation: shake .35s; }
.wg-tile {
  height: 68px; border: 0; border-radius: 12px; background: var(--surface-2); font-weight: 800; font-size: 15px;
  letter-spacing: .02em; padding: 0 2px; overflow: hidden; touch-action: manipulation; transition: transform .1s, background .1s;
}
.wg-tile.sm { font-size: 12.5px; }
.wg-tile.xs { font-size: 10.5px; }
.wg-tile.sel { background: var(--ink); color: var(--bg); }
.wg-tile:active { transform: scale(.96); }
.wg-life { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--muted); }
.wg-life i { width: 12px; height: 12px; border-radius: 50%; background: var(--surface-2); display: inline-block; }
.wg-life i.on { background: var(--ink-2); }
.wg-actions { display: flex; gap: 8px; justify-content: center; }
.wg-actions .btn { flex: 0 1 auto; min-width: 84px; padding: 10px 16px; }
.wg-actions .btn:disabled { opacity: .45; }

/* 词梯 */
.ladder { display: flex; flex-direction: column; gap: 6px; align-items: center; width: 100%; }
.ladder .lrow { width: min(calc(100vw - 32px), calc(var(--len, 5) * 54px)); }
.game-ladder .ladder .lrow { grid-template-columns: repeat(var(--len), 1fr); }
.ladder-info { margin: 0; font-size: 14px; color: var(--ink-2); text-align: center; }
.lrow .tile.match { background: color-mix(in srgb, var(--ok) 22%, var(--surface)); border-color: var(--ok); }
.lrow .tile.changed { color: var(--accent); }
.lrow.start .tile, .lrow.target .tile { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ladder-gap { color: var(--muted); line-height: 1; font-size: 20px; }

/* 九宫词阵 */
.wd-word { min-height: 44px; font-size: 30px; font-weight: 900; letter-spacing: .12em; text-align: center; color: var(--ink); }
.wd-word.shake { animation: shake .35s; color: var(--bad); }
.wd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(calc(100vw - 64px), 270px); }
.wd-tile {
  aspect-ratio: 1; border: 0; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow);
  font-size: 30px; font-weight: 900; touch-action: manipulation; transition: transform .1s, opacity .15s;
}
.wd-tile.center { background: var(--accent); color: #fff; }
.wd-tile.used { opacity: .3; transform: scale(.92); }
.wd-progress { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.wd-stat { font-size: 13px; color: var(--ink-2); text-align: center; }
.wd-bar { max-width: none; }
.wd-bar i { background: var(--accent); }
.wd-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.chip { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); letter-spacing: .03em; }
.chip.nine { background: var(--accent); color: #fff; box-shadow: none; }
.chip.bonus { color: var(--muted); font-style: italic; }
.chip.missed { color: var(--muted); background: transparent; box-shadow: none; border: 1px dashed var(--line); }

/* 中文字词通用 */
.zh-entry { display: flex; gap: 8px; width: min(calc(100vw - 32px), 400px); }
.zh-input {
  flex: 1; min-width: 0; height: 48px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); color: var(--ink);
  padding: 0 14px; font: inherit; font-size: 18px; letter-spacing: .1em;
}
.zh-input:focus { outline: none; border-color: var(--accent); }
.zh-input:disabled { opacity: .5; }
.zh-entry .btn { flex: none; padding: 0 20px; }
.zh-entry .btn:disabled { opacity: .45; }
.zh-grid { width: min(calc(100vw - 32px), 250px); gap: 5px; }
.zh-grid .eq-row { gap: 5px; }
.tile.zh { font-size: clamp(22px, 7vw, 30px); font-weight: 700; }
.game-idiomlock .tile.s1, .chip.s1 { background: #d9a21b; }
.zh-clue { width: 100%; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-radius: 12px; padding: 8px 14px; font-size: 14px; color: var(--ink-2); }
.zh-clue p { margin: 4px 0; }
.zh-tried { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 400px; }
.zh-tried .chip { font-size: 15px; padding: 2px 9px; }
.chip.s0 { background: var(--tile-0); color: #fff; box-shadow: none; }
.chip.s1 { color: #fff; box-shadow: none; }
.chip.s2 { background: var(--tile-2); color: #fff; box-shadow: none; }
.result-note { background: var(--surface-2); border-radius: 12px; padding: 8px 14px; margin: 12px 0 4px; text-align: left; font-size: 14px; color: var(--ink-2); }
.result-note p { margin: 4px 0; }

/* 成语拼盘 */
.wg-tile.zh { font-size: 26px; font-weight: 700; height: 72px; }
.zh-big { font-size: 20px !important; letter-spacing: .15em; }
.mix-preview { display: flex; gap: 8px; justify-content: center; }
.mix-slot { width: 46px; height: 46px; border-radius: 10px; border: 2px dashed var(--line); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; }
.mix-slot.on { border-style: solid; border-color: var(--accent); color: var(--accent); }

/* 成语填字 */
.xw-board { display: grid; gap: 3px; margin-top: 4px; }
.xw-cell {
  border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: calc(var(--cs) * .5); font-weight: 700;
  border: 0; padding: 0; color: var(--ink);
}
.xw-cell.void { background: transparent; }
.xw-cell.given { background: var(--surface-2); }
.xw-cell.blank { background: var(--surface); box-shadow: inset 0 0 0 2px var(--line); color: var(--accent); cursor: pointer; }
.xw-cell.sel { box-shadow: inset 0 0 0 3px var(--accent); }
.xw-cell.ok { background: color-mix(in srgb, var(--ok) 22%, var(--surface)); }
.xw-cell.blank.ok { color: var(--ok); }
.xw-cell.bad { background: color-mix(in srgb, var(--bad) 18%, var(--surface)); }
.xw-bank { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 440px; }
.xw-chip {
  width: 44px; height: 44px; border-radius: 10px; border: 0; background: var(--surface); box-shadow: var(--shadow);
  font-size: 22px; font-weight: 700; touch-action: manipulation;
}
.xw-chip.used { opacity: .25; box-shadow: none; }

/* 成语接龙 */
.chain { display: flex; flex-direction: column; gap: 6px; align-items: center; width: 100%; }
.chain-card { background: var(--surface); border-radius: 12px; box-shadow: var(--shadow); padding: 6px 18px; text-align: center; min-width: 200px; animation: pop .2s ease; }
.chain-card.start, .chain-card.target { background: var(--ink); color: var(--bg); }
.chain-card.target .chain-py, .chain-card.start .chain-py { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.chain-zh { font-size: 24px; font-weight: 800; letter-spacing: .2em; }
.chain-zh .edge { color: var(--accent); }
.chain-py { font-size: 12px; color: var(--muted); }
.chain-gap { color: var(--muted); font-size: 20px; line-height: 1; }

/* 诗词填空 */
.poem-card { background: #f6ead2; color: #3b2a10; border-radius: 16px; padding: 16px 14px 18px; box-shadow: var(--shadow); width: 100%; max-width: 440px; }
:root[data-theme='dark'] .poem-card { background: #2d2619; color: #efe2c6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .poem-card { background: #2d2619; color: #efe2c6; } }
.poem-head { text-align: center; margin-bottom: 10px; }
.poem-head h2 { font-size: 20px; letter-spacing: .1em; }
.poem-head p { margin: 2px 0 0; font-size: 13px; opacity: .7; }
.poem-body { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.poem-line { display: flex; gap: 4px; align-items: center; }
.poem-line .xw-cell { width: var(--cs); height: var(--cs); }
.xw-cell.plain { background: transparent; color: inherit; font-family: 'Songti SC', 'STSong', 'Noto Serif SC', serif; }
.poem-card .xw-cell.blank { background: rgba(255, 255, 255, .7); }
.poem-punct { width: 14px; font-size: 18px; opacity: .6; }

/* 诗句配对 */
.pp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.pp-cols.shake { animation: shake .35s; }
.pp-col { display: flex; flex-direction: column; gap: 8px; }
.pp-item {
  min-height: 52px; border: 0; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); padding: 6px 8px;
  font-size: 16px; font-weight: 700; letter-spacing: .06em; font-family: 'Songti SC', 'STSong', 'Noto Serif SC', serif; touch-action: manipulation;
}
.pp-item.sel { background: var(--ink); color: var(--bg); }
.pp-item.ok { background: color-mix(in srgb, var(--ok) 20%, var(--surface)); color: var(--ok); box-shadow: none; }
.pp-done { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.pp-line { background: var(--surface-2); border-radius: 10px; padding: 6px 12px; font-size: 14px; }
.pp-line b { display: block; font-family: 'Songti SC', 'STSong', 'Noto Serif SC', serif; }
.pp-line span { font-size: 12px; color: var(--muted); }

/* 部件拼字 / 共同部件 */
.hz-found { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.hz-card { width: 62px; padding: 6px 0; border-radius: 12px; background: var(--surface-2); display: flex; flex-direction: column; align-items: center; }
.hz-card b { font-size: 26px; line-height: 1.2; color: var(--muted); }
.hz-card span { font-size: 11px; color: var(--muted); }
.hz-card.on { background: var(--accent); animation: pop .25s ease; }
.hz-card.on b, .hz-card.on span { color: #fff; }
.hz-grid { grid-template-columns: repeat(4, 1fr); width: 100%; }
.hc-cross { display: grid; grid-template-columns: repeat(3, 84px); grid-template-rows: repeat(3, 84px); gap: 8px; }
.hc-part, .hc-center { border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--surface); box-shadow: var(--shadow); }
.hc-part b { font-size: 34px; line-height: 1.1; }
.hc-part span { font-size: 15px; color: var(--accent); font-weight: 800; }
.hc-part.top { grid-area: 1 / 2; } .hc-part.left { grid-area: 2 / 1; } .hc-part.right { grid-area: 2 / 3; } .hc-part.bottom { grid-area: 3 / 2; }
.hc-center { grid-area: 2 / 2; background: color-mix(in srgb, var(--accent) 15%, var(--surface)); font-size: 38px; font-weight: 800; color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.hc-center.on { background: var(--accent); color: #fff; animation: pop .25s ease; }
.hc-q { margin: 0; text-align: center; }
.hc-opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.wg-tile.gone { opacity: .25; text-decoration: line-through; }

/* 宋词填空 */
.ci-card { background: #fbe7ef; color: #4a1027; }
:root[data-theme='dark'] .ci-card { background: #2f1b24; color: #f6d9e5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .ci-card { background: #2f1b24; color: #f6d9e5; } }
.ci-body { display: flex; flex-direction: column; gap: 8px; }
.ci-sent { display: flex; flex-wrap: wrap; gap: 3px 2px; align-items: center; }
.ci-sent .xw-cell { width: var(--cs); height: var(--cs); font-size: calc(var(--cs) * .58); }
.ci-punct { width: 12px; opacity: .55; font-size: 16px; }
.ci-card .xw-cell.blank { background: rgba(255, 255, 255, .7); }

/* 飞花令 */
.fh-key {
  width: 96px; height: 96px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 56px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 40%, transparent);
  font-family: 'Songti SC', 'STSong', 'Noto Serif SC', serif;
}
.fh-list { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.fh-item { display: grid; grid-template-columns: 24px 1fr; column-gap: 8px; background: var(--surface); border-radius: 12px; padding: 8px 12px; box-shadow: var(--shadow); animation: pop .2s ease; }
.fh-no { grid-row: 1 / 3; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; align-self: center; }
.fh-item b { font-size: 18px; letter-spacing: .08em; font-family: 'Songti SC', 'STSong', 'Noto Serif SC', serif; }
.fh-item em { font-style: normal; color: var(--accent); }
.fh-src { font-size: 12px; color: var(--muted); }
.fh-clue p { letter-spacing: .05em; }
.ci-clause { display: inline-flex; flex-wrap: nowrap; gap: 2px; align-items: center; }
.ci-sent { gap: 4px 0; }
:root[data-theme='dark'] .poem-card .xw-cell.blank { background: rgba(255, 255, 255, .1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .poem-card .xw-cell.blank { background: rgba(255, 255, 255, .1); } }

/* PWA / 顶栏 */
button.top-link { border: 0; background: transparent; font: inherit; cursor: pointer; }
.install-btn { color: #e8643c !important; font-weight: 700; }
.install-btn[hidden] { display: none; }
.card-actions { flex-wrap: wrap; }

/* 首页静态目录（JS 加载前 / 搜索引擎） */
.seo-static h2 { font-size: 18px; margin-top: 18px; }
.seo-static li { margin: 4px 0; }
.seo-static a { color: #e8643c; }

/* SEO 落地页 */
.lp { max-width: 860px; margin: 0 auto; padding: 4px 16px 40px; }
.lp a { color: inherit; }
.lp-crumb { display: block; color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.lp-crumb a:hover { color: var(--accent); }
.lp-hero { display: flex; gap: 22px; align-items: center; background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow); border-top: 5px solid var(--accent); }
.lp-hero-plain { border-top-color: #e8643c; }
.lp-hero h1 { font-size: clamp(28px, 6vw, 40px); font-weight: 900; }
.lp-hero .lead { margin: 8px 0 16px; }
.lp-art { width: 120px; height: 120px; flex: none; border-radius: 24px; background: var(--surface-2); padding: 12px; }
.lp-art svg { width: 100%; height: 100%; display: block; }
.lp-cta { display: flex; gap: 8px; flex-wrap: wrap; }
.lp-cta .btn { flex: 0 0 auto; padding: 11px 18px; }
.lp .btn-primary { color: #fff; }
.lp-block { margin-top: 18px; background: var(--surface); border-radius: 16px; padding: 18px 22px; box-shadow: var(--shadow); }
.lp-block h2 { font-size: 19px; margin-bottom: 8px; }
.lp-block p, .lp-block li { color: var(--ink-2); }
.lp-block ol, .lp-block ul { padding-left: 22px; margin: 6px 0; }
.lp-block li { margin: 6px 0; }
.lp-block details { border-top: 1px solid var(--line); padding: 10px 0; }
.lp-block details:first-of-type { border-top: 0; }
.lp-block summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.lp-block details p { margin: 8px 0 0; }
.lp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 8px; }
.lp-card { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border-left: 4px solid var(--accent); }
.lp-card:hover { background: var(--line); }
.lp-card .card-art { width: 52px; height: 52px; padding: 4px; background: var(--surface); border-radius: 12px; flex: none; display: block; }
.lp-card b { display: block; font-size: 16px; }
.lp-card em { font-style: normal; font-size: 12px; color: var(--accent); font-weight: 700; }
.lp-card small { display: block; font-size: 12.5px; color: var(--muted); }
.site-foot a { color: inherit; text-decoration: underline; }
@media (max-width: 560px) {
  .lp-hero { flex-direction: column; align-items: flex-start; padding: 20px; }
  .lp-art { width: 88px; height: 88px; }
}

/* 本地数据 */
.data-card { margin-top: 14px; border-left-color: #e8643c; }
.data-actions { padding: 0; margin-top: 10px; }
.data-actions .btn { flex: 1 1 auto; }
.btn.danger { color: var(--bad); }

/* 词格换位 */
.ws-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: min(calc(100vw - 48px), 340px); }
.ws-hole { aspect-ratio: 1; }
.ws-tile {
  aspect-ratio: 1; border: 0; border-radius: 12px; font-size: clamp(22px, 7vw, 30px); font-weight: 900; color: #fff;
  background: var(--tile-0); touch-action: manipulation; transition: transform .12s, background .2s;
}
.ws-tile.c2 { background: var(--tile-2); }
.ws-tile.c1 { background: #d9a21b; }
.ws-tile.sel { transform: scale(.88); box-shadow: 0 0 0 3px var(--ink); }
.ws-tile:disabled { cursor: default; }

/* 字母迷宫 */
.wm-board { --size: min(calc(100vw - 48px), 360px); border-radius: 18px; }
.wm-cell span {
  width: 72%; height: 72%; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--size) / var(--n) * .36); font-weight: 900; position: relative; z-index: 3; transition: background .1s;
}
.wm-cell.on span { background: var(--accent); color: #fff; }
.wm-line { fill: none; stroke: var(--accent); stroke-width: .16; stroke-linecap: round; stroke-linejoin: round; opacity: .4; }

/* 密室疑案 */
.dt-story, .dt-card, .dt-accuse { width: 100%; background: var(--surface); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow); font-size: 14px; }
.dt-story { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.dt-story p { margin: 6px 0 0; color: var(--ink-2); }
.dt-clues { margin: 6px 0 0; padding-left: 22px; }
.dt-clues li { margin: 5px 0; cursor: pointer; }
.dt-clues li.used { color: var(--muted); text-decoration: line-through; }
.dt-grids { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; overflow-x: auto; }
.dt-table { border-collapse: collapse; font-size: 12px; }
.dt-table th { font-weight: 700; color: var(--ink-2); padding: 2px 4px; }
.dt-table th.row { text-align: right; white-space: nowrap; }
.dt-table th.corner { font-size: 11px; color: var(--muted); }
.dt-table th.col { vertical-align: bottom; width: 34px; max-width: 34px; font-size: 11px; line-height: 1.15; word-break: break-all; padding: 2px 1px 4px; }
.dt-table td { width: 34px; height: 34px; border: 1px solid var(--line); text-align: center; font-size: 16px; font-weight: 800; cursor: pointer; user-select: none; }
.dt-table td.m1 { color: var(--muted); }
.dt-table td.m2 { color: #fff; background: var(--ok); }
.dt-accuse { display: flex; flex-direction: column; gap: 8px; }
.dt-row { display: flex; gap: 8px; align-items: flex-start; }
.dt-row > span { flex: none; width: 36px; font-weight: 700; padding-top: 4px; }
.dt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dt-chips .chip { border: 0; cursor: pointer; font-size: 13px; }
.dt-chips .chip.on { background: var(--accent); color: #fff; box-shadow: none; }

/* 线索猜类 */
.pp-words { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 320px; }
.pp-word { height: 46px; border-radius: 12px; background: var(--surface-2); color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; letter-spacing: .08em; }
.pp-word.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); animation: pop .2s ease; }
.pp-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.pp-opt { border: 0; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; touch-action: manipulation; }
.pp-opt b { font-size: 15px; }
.pp-opt small { font-size: 11.5px; color: var(--muted); }
.pp-opt.gone { opacity: .3; text-decoration: line-through; }
.pp-opt.ok { background: var(--ok); color: #fff; }
.pp-opt.ok small { color: rgba(255, 255, 255, .8); }

/* 算术方阵 */
.cd-cell { border: 1px solid var(--line); flex-direction: column; cursor: pointer; }
.cd-cell.bt { border-top: 2.5px solid var(--ink); } .cd-cell.bb { border-bottom: 2.5px solid var(--ink); }
.cd-cell.bl { border-left: 2.5px solid var(--ink); } .cd-cell.br { border-right: 2.5px solid var(--ink); }
.cd-label { position: absolute; left: 3px; top: 2px; font-size: calc(var(--size) / var(--n) * .2); font-weight: 800; color: var(--ink-2); line-height: 1; }
.cd-val { font-size: calc(var(--size) / var(--n) * .45); font-weight: 700; color: var(--accent); }
.cd-cell.peer { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.cd-cell.sel { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.cd-cell.bad .cd-val { color: var(--bad); }
.cd-cell.cage-bad .cd-label { color: var(--bad); }

/* 点灯 */
.ak-board { gap: 0; }
.ak-board .ak-white { border: 1px solid var(--line); background: var(--surface); cursor: pointer; transition: background .15s; }
.ak-board .ak-white.lit { background: #fff1b8; }
:root[data-theme='dark'] .ak-board .ak-white.lit { background: #4a3f12; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .ak-board .ak-white.lit { background: #4a3f12; } }
.ak-white.bulb::before { content: ''; width: 58%; height: 58%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff7c2, #f2b33d 60%, #d18a0c); box-shadow: 0 0 10px #f2b33d; }
.ak-white.clash::before { background: var(--bad); box-shadow: 0 0 10px var(--bad); }
.ak-white.dot::before { content: ''; width: 14%; height: 14%; border-radius: 50%; background: var(--muted); }
.ak-board .ak-black { background: var(--ink); color: var(--bg); font-weight: 900; font-size: calc(var(--size) / var(--n) * .45); border: 1px solid var(--ink); }
.ak-black.done { color: #6ee7a0; }
.ak-black.bad { color: #ff7b7b; }

/* 城市猜猜 */
.cg-map { width: min(calc(100vw - 32px), 420px); height: auto; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); }
.cg-dot { fill: var(--line); }
.cg-guess { stroke: var(--surface); stroke-width: 1.5; }
.cg-star { fill: #e11d48; font-size: 14px; text-anchor: middle; }
.cg-rows { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.cg-row { display: grid; grid-template-columns: 1.1fr 1fr .9fr 28px 1.2fr; align-items: center; gap: 6px; background: var(--surface); border-radius: 12px; padding: 8px 10px; box-shadow: var(--shadow); font-size: 14px; animation: pop .2s ease; }
.cg-row.win { background: color-mix(in srgb, var(--ok) 18%, var(--surface)); }
.cg-row b { font-size: 16px; }
.cg-prov { color: var(--muted); font-size: 12.5px; }
.cg-prov.same { color: var(--ok); font-weight: 700; }
.cg-km { font-variant-numeric: tabular-nums; text-align: right; }
.cg-dir { font-size: 20px; text-align: center; color: var(--accent); }
.cg-pct { position: relative; height: 18px; border-radius: 9px; background: var(--surface-2); overflow: hidden; }
.cg-pct i { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--accent) 60%, transparent); }
.cg-pct em { position: relative; font-style: normal; font-size: 11px; font-weight: 800; display: block; text-align: center; line-height: 18px; }

/* 估算达人 */
.es-q { width: 100%; background: var(--surface); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); text-align: center; display: flex; flex-direction: column; gap: 6px; }
.es-q b { font-size: 20px; line-height: 1.4; }
.es-q span { color: var(--muted); font-size: 13px; }
.es-q em { font-style: normal; color: var(--accent); font-size: 13px; font-weight: 700; }
.es-form { display: flex; flex-direction: column; gap: 10px; width: 100%; align-items: center; }
.es-line { display: flex; gap: 8px; align-items: center; width: 100%; }
.es-input { letter-spacing: 0; }
.es-unit { flex: none; font-weight: 700; color: var(--ink-2); min-width: 40px; }
.es-mult { justify-content: center; }
.es-form .btn, .game-estimate .btn-primary { min-width: 160px; padding: 12px; }
.es-reveal p { margin: 4px 0; text-align: center; }
.es-score { position: relative; width: 260px; height: 26px; border-radius: 13px; background: var(--surface-2); overflow: hidden; margin: 8px auto 0; }
.es-score i { position: absolute; inset: 0 auto 0 0; background: var(--accent); }
.es-score span { position: relative; display: block; text-align: center; line-height: 26px; font-weight: 800; }
.es-tally { display: flex; flex-direction: column; gap: 4px; width: 100%; font-size: 13px; }
.es-item { display: grid; grid-template-columns: 24px 1fr 40px; gap: 6px; align-items: center; background: var(--surface); padding: 6px 10px; border-radius: 10px; }
.es-item b { text-align: right; }

/* 帐篷 */
.tt-board { display: grid; grid-template-columns: repeat(var(--n), 1fr) 28px; gap: 2px; width: min(calc(100vw - 32px), 440px); user-select: none; touch-action: none; }
.tt-cell { aspect-ratio: 1; background: var(--surface); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tt-cell svg { width: 80%; height: 80%; pointer-events: none; }
.tt-cell.tree { background: color-mix(in srgb, #2f8a4c 12%, var(--surface)); cursor: default; }
.tt-cell.grass { background: color-mix(in srgb, #7cc576 35%, var(--surface)); }
.tt-cell.bad { box-shadow: inset 0 0 0 2px var(--bad); }
.tt-count { display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--ink-2); font-size: 15px; aspect-ratio: 1; }
.tt-count.s1 { color: var(--ok); }
.tt-count.s-1 { color: var(--bad); }

/* 扫雷 */
.ms-bar { display: flex; justify-content: space-between; align-items: center; width: min(calc(100vw - 32px), 440px); }
.ms-counter { font-weight: 800; color: var(--ink-2); }
.ms-mode.on { background: #e11d48; color: #fff; }
.ms-board { display: grid; gap: 2px; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.ms-cell {
  border: 0; border-radius: 5px; padding: 0; background: color-mix(in srgb, var(--ink) 16%, var(--surface)); box-shadow: inset 0 -3px 0 rgba(0,0,0,.12);
  font-weight: 900; font-size: calc(var(--cs) * .5); display: flex; align-items: center; justify-content: center; -webkit-touch-callout: none;
}
.ms-cell.open { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.ms-cell.flag, .ms-cell.mine { font-size: calc(var(--cs) * .46); }
.ms-cell.boom { background: var(--bad); }
.ms-cell.wrong { background: color-mix(in srgb, var(--bad) 30%, var(--surface)); }
.ms-cell.hinted { outline: 2px solid var(--accent); }
.ms-cell.n1 { color: #2563eb; } .ms-cell.n2 { color: #16a34a; } .ms-cell.n3 { color: #dc2626; } .ms-cell.n4 { color: #7c3aed; }
.ms-cell.n5 { color: #b45309; } .ms-cell.n6 { color: #0891b2; } .ms-cell.n7 { color: var(--ink); } .ms-cell.n8 { color: var(--muted); }

/* 颜色密码 */
.mm-board { display: flex; flex-direction: column; gap: 5px; width: min(calc(100vw - 32px), 380px); }
.mm-row { display: grid; grid-template-columns: 22px 1fr 44px; gap: 8px; align-items: center; background: var(--surface); border-radius: 12px; padding: 6px 10px; box-shadow: var(--shadow); }
.mm-row.current { box-shadow: 0 0 0 2px var(--accent); }
.mm-row.answer { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.mm-no { font-size: 12px; color: var(--muted); font-weight: 700; text-align: center; }
.mm-pegs { display: flex; gap: 8px; justify-content: center; }
.mm-peg { width: 30px; height: 30px; border-radius: 50%; display: inline-block; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); border: 0; padding: 0; }
.mm-peg.empty { background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--line); }
.mm-peg.big { width: 40px; height: 40px; touch-action: manipulation; }
.mm-fb { display: grid; gap: 3px; justify-items: center; }
.mm-fb i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-2); }
.mm-fb i.b { background: var(--ink); }
.mm-fb i.w { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink); }
.mm-palette { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* 数字消除 */
.board .ht-cell { border: 1px solid var(--line); font-size: calc(var(--size) / var(--n) * .42); font-weight: 800; cursor: pointer; transition: background .12s; }
.board .ht-cell.s1 { background: var(--ink); color: var(--muted); }
.ht-cell.s2::after { content: ''; position: absolute; inset: 14%; border-radius: 50%; border: 2.5px solid var(--accent); }
.ht-cell.dup { color: var(--bad); }
.board .ht-cell.adj { background: var(--bad); }

/* 数独：通用尺寸、9×9 与笔记 */
.sudoku-board .cell { font-size: calc(var(--size) / var(--n) * .5); }
.sudoku-board.s9 .cell { font-size: calc(var(--size) / 9 * .58); }
.sudoku-board .notes { display: grid; width: 92%; height: 92%; font-size: calc(var(--size) / var(--n) * .2); font-weight: 600; color: var(--muted); line-height: 1; }
.sudoku-board .notes i { font-style: normal; display: flex; align-items: center; justify-content: center; }
.sd-tools { display: flex; justify-content: center; }
.note-btn { padding: 7px 16px; }
.note-btn.on { background: var(--accent); color: #fff; }

/* 摩天楼 */
.sk-board { display: grid; gap: 3px; margin-top: 4px; }
.sk-cell {
  border: 0; border-radius: 8px; background: linear-gradient(to top, color-mix(in srgb, var(--accent) calc(var(--hgt, 0) * 45%), var(--surface)) 0 100%);
  box-shadow: inset 0 0 0 1px var(--line); font-size: calc(var(--cs) * .48); font-weight: 800; color: var(--accent);
}
.sk-cell.given { color: var(--ink); }
.sk-cell.sel { box-shadow: inset 0 0 0 3px var(--accent); }
.sk-cell.bad { color: var(--bad); }
.sk-clue { display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: calc(var(--cs) * .42); color: var(--ink-2); }
.sk-clue.s1 { color: var(--ok); }
.sk-clue.s-1 { color: var(--bad); }

/* 不等号方阵 */
.fu-board { display: grid; margin-top: 4px; }
.fu-cell { border: 0; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow), inset 0 0 0 1px var(--line); font-size: calc(var(--cs) * .48); font-weight: 800; color: var(--accent); }
.fu-cell.given { color: var(--ink); background: var(--surface-2); }
.fu-cell.sel { box-shadow: inset 0 0 0 3px var(--accent); }
.fu-cell.bad { color: var(--bad); }
.fu-sign { display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 16px; color: var(--ink-2); }
.fu-sign.bad { color: var(--bad); }

/* 灯光开关 */
.lo-board { display: grid; gap: 8px; width: min(calc(100vw - 48px), 360px); }
.lo-cell { aspect-ratio: 1; border: 0; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 -4px 0 rgba(0,0,0,.08); transition: background .15s, box-shadow .15s; touch-action: manipulation; }
.lo-cell.on { background: radial-gradient(circle at 40% 35%, #fff7c2, #facc15 70%); box-shadow: 0 0 16px rgba(250, 204, 21, .6), inset 0 -4px 0 rgba(0,0,0,.08); }
.lo-cell.hint { outline: 3px dashed var(--accent); outline-offset: 2px; }

/* 同色连线 */
.fl-board .cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .1s; }
.fl-line { fill: none; stroke-width: .34; stroke-linecap: round; stroke-linejoin: round; }

/* 双星领地 */
.sb-star { color: #4338ca; }
:root[data-theme='dark'] .sb-star { color: #c7d2fe; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .sb-star { color: #c7d2fe; } }
.cell.bad .sb-star { color: var(--bad); }

/* 数和 */
.kk-board { display: grid; gap: 2px; margin-top: 4px; }
.kk-black { background: var(--ink); border-radius: 4px; position: relative; overflow: hidden; }
.kk-black.clue { background: linear-gradient(to top right, var(--ink) calc(50% - 1px), color-mix(in srgb, var(--bg) 60%, var(--ink)) 50%, var(--ink) calc(50% + 1px)); }
.kk-down, .kk-across { position: absolute; color: var(--bg); font-weight: 800; font-size: calc(var(--cs) * .3); line-height: 1; }
.kk-down { left: 12%; bottom: 10%; }
.kk-across { right: 10%; top: 10%; }
.kk-cell { border: 0; border-radius: 4px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: calc(var(--cs) * .52); font-weight: 800; color: var(--accent); }
.kk-cell.given { color: var(--ink); background: var(--surface-2); }
.kk-cell.sel { box-shadow: inset 0 0 0 3px var(--accent); }
.kk-cell.bad { color: var(--bad); }

/* 数字华容道 */
.sl-board { position: relative; width: min(calc(100vw - 48px), 360px); aspect-ratio: 1; background: var(--surface-2); border-radius: 16px; padding: 4px; box-sizing: border-box; }
.sl-tile {
  position: absolute; left: 4px; top: 4px; width: calc((100% - 8px) / var(--n)); height: calc((100% - 8px) / var(--n)); border: 0; padding: 3px; background: none;
  transition: transform .12s ease; touch-action: manipulation; font-size: calc(min(100vw - 48px, 360px) / var(--n) * .38); font-weight: 900; color: #fff;
}
.sl-tile::before { content: ''; position: absolute; inset: 3px; border-radius: 10px; background: var(--accent); box-shadow: inset 0 -4px 0 rgba(0,0,0,.15); z-index: -1; }
.sl-tile { z-index: 1; }
.sl-tile.home::before { background: color-mix(in srgb, var(--ok) 85%, var(--accent)); }
.sl-tile.hint::before { outline: 3px dashed var(--ink); outline-offset: -3px; }

/* 主题寻词 */
.st-theme { display: flex; flex-direction: column; align-items: center; gap: 2px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-radius: 14px; padding: 10px 20px; }
.st-theme span { font-size: 12px; color: var(--muted); }
.st-theme b { font-size: 20px; }
.st-theme em { font-style: normal; font-size: 12px; color: var(--ink-2); }
.st-board { position: relative; display: grid; width: min(calc(100vw - 48px), 340px); user-select: none; touch-action: none; }
.st-cell { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; }
.st-cell span { width: 74%; height: 74%; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 19px; position: relative; z-index: 3; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: background .15s; }
.st-cell.found span { background: var(--accent); color: #fff; box-shadow: none; }
.st-cell.on span { background: var(--ink); color: var(--bg); }
.st-cell.hinted span { box-shadow: inset 0 0 0 2.5px var(--accent); }
.st-found { fill: none; stroke: var(--accent); stroke-width: .2; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.st-live { fill: none; stroke: var(--ink); stroke-width: .16; stroke-linecap: round; stroke-linejoin: round; opacity: .4; }

/* 每日 2048 */
.g2-info { display: flex; gap: 8px; }
.g2-info > div { background: #bbada0; color: #fff; border-radius: 8px; padding: 4px 12px; text-align: center; min-width: 72px; }
.g2-info span { display: block; font-size: 11px; opacity: .85; }
.g2-info b { font-size: 18px; }
.g2-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 8px; background: #bbada0; border-radius: 12px; width: min(calc(100vw - 48px), 360px); touch-action: none; user-select: none; }
.g2-tile { aspect-ratio: 1; border-radius: 6px; background: rgba(238, 228, 218, .35); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: calc(min(100vw - 48px, 360px) / 4 * .36); color: #776e65; }
.g2-tile.v2 { background: #eee4da; } .g2-tile.v4 { background: #ede0c8; }
.g2-tile.v8 { background: #f2b179; color: #fff; } .g2-tile.v16 { background: #f59563; color: #fff; }
.g2-tile.v32 { background: #f67c5f; color: #fff; } .g2-tile.v64 { background: #f65e3b; color: #fff; }
.g2-tile.v128, .g2-tile.v256, .g2-tile.v512 { background: #edcf72; color: #fff; font-size: calc(min(100vw - 48px, 360px) / 4 * .3); }
.g2-tile.v1024, .g2-tile.v2048, .g2-tile.v4096 { background: #edc22e; color: #fff; font-size: calc(min(100vw - 48px, 360px) / 4 * .24); }

/* 舒尔特方格 */
.sc-board { display: grid; gap: 6px; width: min(calc(100vw - 48px), 400px); }
.sc-cell { aspect-ratio: 1; border: 0; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); font-weight: 900; touch-action: manipulation; transition: opacity .2s, transform .1s; }
.sc-cell:active { transform: scale(.94); }
.sc-cell.done { opacity: .18; }
.sc-cell.hint { box-shadow: 0 0 0 3px var(--accent); }
.sc-cell.wrong { animation: shake .3s; background: color-mix(in srgb, var(--bad) 20%, var(--surface)); }
.sc-next { font-size: 20px; color: var(--accent); }

/* 记忆翻牌 */
.mm2-board { display: grid; gap: 8px; width: min(calc(100vw - 48px), 400px); }
.mm2-card { aspect-ratio: 3 / 4; border: 0; padding: 0; background: none; position: relative; perspective: 600px; touch-action: manipulation; }
.mm2-card > span { position: absolute; inset: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; transition: transform .3s; }
.mm2-card .back { background: repeating-linear-gradient(45deg, var(--accent), var(--accent) 6px, color-mix(in srgb, var(--accent) 80%, #fff) 6px 12px); box-shadow: var(--shadow); }
.mm2-card .front { background: var(--surface); box-shadow: var(--shadow), inset 0 0 0 1px var(--line); transform: rotateY(180deg); font-size: clamp(22px, 7vw, 34px); }
.mm2-card.up .back, .mm2-card.peek .back { transform: rotateY(180deg); }
.mm2-card.up .front, .mm2-card.peek .front { transform: rotateY(0); }
.mm2-card.matched .front { background: color-mix(in srgb, var(--ok) 15%, var(--surface)); }

/* 24 点 */
.g24-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: min(calc(100vw - 48px), 340px); }
.g24-card { min-height: 92px; border: 0; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; touch-action: manipulation; }
.g24-card b { font-size: 34px; font-weight: 900; }
.g24-card small { font-size: 11px; color: var(--muted); max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g24-card.sel { box-shadow: 0 0 0 3px var(--accent); }
.g24-card.win { background: var(--ok); color: #fff; grid-column: span 2; }
.g24-ops { display: flex; gap: 10px; }
.g24-op { width: 58px; height: 52px; border: 0; border-radius: 12px; background: var(--ink); color: var(--bg); font-size: 26px; font-weight: 900; }
.g24-op.sel { background: var(--accent); color: #fff; }
.g24-tally { display: flex; gap: 8px; }
.g24-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: var(--muted); }
.g24-dot.cur { box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent); }
.g24-dot.ok { background: var(--ok); color: #fff; }
.g24-dot.skip { background: var(--tile-0); color: #fff; }

/* 猜数字 */
.bc-rows { display: flex; flex-direction: column; gap: 6px; width: min(calc(100vw - 32px), 380px); }
.bc-row { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; background: var(--surface); border-radius: 12px; padding: 8px 12px; box-shadow: var(--shadow); animation: pop .2s ease; }
.bc-no { font-size: 12px; color: var(--muted); font-weight: 700; }
.bc-row b { font-size: 22px; }
.bc-res { display: flex; gap: 6px; }
.bc-res em { font-style: normal; font-weight: 900; padding: 2px 8px; border-radius: 8px; color: #fff; }
.bc-res .a { background: var(--ok); } .bc-res .b { background: #d9a21b; }
.bc-cur { display: flex; gap: 8px; }
.bc-slot { width: 48px; height: 56px; border-radius: 12px; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 900; background: var(--surface); }
.bc-slot.on { border-color: var(--accent); }

/* 华容道 */
.kl-board { position: relative; width: min(calc(100vw - 64px), 300px); aspect-ratio: 4 / 5; background: var(--surface-2); border: 4px solid var(--ink); border-bottom-width: 4px; border-radius: 10px; touch-action: none; user-select: none; margin-bottom: 18px; }
.kl-exit { position: absolute; left: 25%; width: 50%; bottom: -14px; height: 10px; background: var(--bg); border-left: 3px solid var(--ink); border-right: 3px solid var(--ink); font-size: 10px; line-height: 10px; text-align: center; color: var(--muted); }
.kl-piece { position: absolute; padding: 3px; transition: left .12s, top .12s; cursor: grab; }
.kl-piece span { display: flex; width: 100%; height: 100%; border-radius: 10px; align-items: center; justify-content: center; font-weight: 900; color: #fff; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); font-size: 15px; letter-spacing: .1em; }
.kl-piece.tC span { background: #c2410c; font-size: 22px; }
.kl-piece.tV span { background: #475569; line-height: 1.25; text-align: center; letter-spacing: 0; }
.kl-piece.tH span { background: #15803d; }
.kl-piece.tS span { background: #ca8a04; }
.kl-piece.hint span { outline: 3px dashed var(--ink); outline-offset: -4px; }

/* 一笔画 */
.os-wrap { width: min(calc(100vw - 48px), 360px); }
.os-svg { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; }
.os-edge { stroke: var(--line); stroke-width: .1; stroke-linecap: round; }
.os-edge.on { stroke: var(--accent); stroke-width: .14; }
.os-dot { fill: var(--surface); stroke: var(--ink); stroke-width: .05; }
.os-dot.start { fill: color-mix(in srgb, var(--accent) 35%, var(--surface)); }
.os-dot.cur { fill: var(--accent); stroke: var(--accent); }
.os-dot.hint { stroke: var(--ok); stroke-width: .1; }

/* 海战 */
.bs-fleet { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; font-size: 13px; color: var(--ink-2); }
.bs-ship { display: inline-flex; gap: 2px; }
.bs-ship b { width: 12px; height: 12px; border-radius: 3px; background: #1e3a8a; }
.bs-board { display: grid; gap: 2px; width: min(calc(100vw - 32px), 440px); user-select: none; touch-action: none; }
.bs-cell { aspect-ratio: 1; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); border-radius: 4px; position: relative; cursor: pointer; }
.bs-cell.water { background: #bfdbfe; box-shadow: none; }
:root[data-theme='dark'] .bs-cell.water { background: #1e3a5f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .bs-cell.water { background: #1e3a5f; } }
.bs-cell.ship::after { content: ''; position: absolute; inset: 12%; background: #1e3a8a; border-radius: 50%; }
:root[data-theme='dark'] .bs-cell.ship::after { background: #93c5fd; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .bs-cell.ship::after { background: #93c5fd; } }
.bs-cell.ship.mid-h::after { border-radius: 0; inset: 12% -1px; }
.bs-cell.ship.mid-v::after { border-radius: 0; inset: -1px 12%; }
.bs-cell.ship.end-l::after { border-radius: 50% 0 0 50%; right: -1px; }
.bs-cell.ship.end-r::after { border-radius: 0 50% 50% 0; left: -1px; }
.bs-cell.ship.end-t::after { border-radius: 50% 50% 0 0; bottom: -1px; }
.bs-cell.ship.end-b::after { border-radius: 0 0 50% 50%; top: -1px; }
.bs-cell.known { box-shadow: inset 0 0 0 2px var(--ink-2); cursor: default; }
.bs-cell.bad::after { background: var(--bad); }

/* 颜色填充 */
.fd-board { display: grid; width: min(calc(100vw - 48px), 380px); aspect-ratio: 1; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
.fd-cell { transition: background .25s; }
.fd-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.fd-btn { width: 46px; height: 46px; border-radius: 50%; border: 0; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); touch-action: manipulation; }
.fd-btn.cur { outline: 3px solid var(--ink); outline-offset: 2px; }
.fd-btn.hint { animation: pop .3s ease 3; outline: 3px dashed var(--ink); outline-offset: 3px; }

/* 汉字找不同 */
.oc-board { display: grid; gap: 4px; width: min(calc(100vw - 48px), 400px); }
.oc-cell { aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); font-size: var(--fs); font-family: 'Songti SC', 'STSong', 'Noto Serif SC', serif; touch-action: manipulation; }
.oc-cell.found { background: var(--ok); color: #fff; animation: pop .25s ease; }
.oc-cell.wrong { animation: shake .3s; background: color-mix(in srgb, var(--bad) 20%, var(--surface)); }

/* 口算速算 */
.ms-q { width: min(calc(100vw - 48px), 360px); min-height: 96px; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 34px; font-weight: 900; font-variant-numeric: tabular-nums; }
.ms-q b { color: var(--accent); min-width: 2ch; }
.ms-q b.ph { color: var(--line); }
.ms-q.flash-ok { animation: pop .2s ease; box-shadow: 0 0 0 3px var(--ok); }
.ms-q.flash-bad { animation: shake .3s; box-shadow: 0 0 0 3px var(--bad); }
.ms-dots { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; max-width: 320px; }
.ms-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--surface-2); }
.ms-dots i.cur { box-shadow: inset 0 0 0 2px var(--accent); }
.ms-dots i.ok { background: var(--ok); }
.ms-dots i.bad { background: var(--bad); }

/* 推箱子 */
.sk-board { display: grid; grid-template-columns: repeat(var(--n), 1fr); width: min(calc(100vw - 32px), 400px); aspect-ratio: 1; gap: 0; background: var(--surface-2); border-radius: 12px; overflow: hidden; touch-action: none; user-select: none; }
.sk-cell { position: relative; background: var(--surface); }
.sk-cell.wall { background: color-mix(in srgb, var(--ink) 78%, #8b5a2b); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 60%, transparent); }
.sk-cell.goal::before { content: ''; position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; transform: translate(-50%, -50%) rotate(45deg); border: 3px solid var(--accent); border-radius: 3px; }
.sk-cell.box::after { content: ''; position: absolute; inset: 9%; border-radius: 6px; background: #c98a3c; border: 3px solid #7a4d1c;
  background-image: linear-gradient(45deg, transparent 46%, #7a4d1c 46% 54%, transparent 54%), linear-gradient(-45deg, transparent 46%, #7a4d1c 46% 54%, transparent 54%); transition: background-color .15s; }
.sk-cell.box.on::after { background-color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, #000); }
.sk-cell.me::after { content: ''; position: absolute; inset: 20%; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--accent); }
.sk-pad { display: grid; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(2, 48px); gap: 6px; }
.sk-pad .key { font-size: 22px; }
.sk-pad .sk-d0 { grid-column: 2; grid-row: 1; }
.sk-pad .sk-d2 { grid-column: 1; grid-row: 2; }
.sk-pad .sk-d1 { grid-column: 2; grid-row: 2; }
.sk-pad .sk-d3 { grid-column: 3; grid-row: 2; }
.sk-pad .key.hint { background: var(--accent); color: #fff; }

/* 字母重组 */
.ag-slots { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.ag-slots.shake { animation: shake .35s; }
.ag-slot { width: 40px; height: 48px; border: 2px dashed var(--line); border-radius: 10px; background: transparent; font-size: 22px; font-weight: 800; color: var(--ink); }
.ag-slot.on { border-style: solid; border-color: var(--ink); background: var(--surface); }
.ag-slot.fixed { border-color: var(--accent); color: var(--accent); }
.ag-tiles { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; max-width: 420px; }
.ag-tile { width: 48px; height: 52px; font-size: 22px; }
.ag-btns { display: flex; gap: 8px; justify-content: center; }
.ag-done { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ag-res { padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--surface-2); }
.ag-res.ok { background: color-mix(in srgb, var(--ok) 20%, var(--surface)); color: var(--ok); }
.ag-res.no { color: var(--muted); text-decoration: line-through; }

/* 数字金字塔 */
.py-board { display: flex; flex-direction: column; align-items: center; gap: 5px; --w: min(calc((100vw - 32px - (var(--n) - 1) * 5px) / var(--n)), 62px); }
.py-row { display: flex; gap: 5px; }
.py-cell { width: var(--w); height: calc(var(--w) * .78); border: 0; border-radius: 8px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); font-size: 20px; font-weight: 800; color: var(--accent); position: relative; touch-action: manipulation; }
.py-cell.long { font-size: 16px; }
.py-cell.given { background: var(--surface-2); color: var(--ink); box-shadow: none; }
.py-cell.sel { box-shadow: inset 0 0 0 3px var(--accent); }
.py-cell.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, var(--surface)); }
.py-cell.hinted::after { content: ''; position: absolute; right: 4px; top: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* 管道连接 */
.pp-board { display: grid; grid-template-columns: repeat(var(--n), 1fr); width: min(calc(100vw - 32px), 420px); aspect-ratio: 1; gap: 2px; background: var(--line); border-radius: 12px; overflow: hidden; padding: 2px; }
.pi-cell { border: 0; padding: 0; background: var(--surface); touch-action: manipulation; position: relative; }
.pi-cell svg { width: 100%; height: 100%; display: block; transition: transform .12s; }
.pi-cell line { stroke: var(--muted); stroke-width: 18; stroke-linecap: round; }
.pi-cell circle { fill: var(--muted); }
.pi-cell circle.src { fill: var(--ink); stroke: var(--accent); stroke-width: 6; }
.pi-cell.lit line, .pi-cell.lit circle:not(.src) { stroke: var(--accent); fill: var(--accent); }
.pi-cell.leak { background: color-mix(in srgb, var(--bad) 12%, var(--surface)); }
.pi-cell.fixed { background: var(--surface-2); }
.pi-cell:active svg { transform: rotate(20deg); }
.locked .pi-cell { pointer-events: none; }

/* 幻方 */
.mg-board { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 5px; width: min(calc(100vw - 32px), 360px); }
.mg-cell { aspect-ratio: 1; border: 0; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); font-size: 24px; font-weight: 800; color: var(--accent); position: relative; touch-action: manipulation; }
.mg-cell.given { background: var(--surface-2); color: var(--ink); box-shadow: none; }
.mg-cell.sel { box-shadow: inset 0 0 0 3px var(--accent); }
.mg-cell.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, var(--surface)); }
.mg-cell.hinted::after { content: ''; position: absolute; right: 5px; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.mg-sum { display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--muted); aspect-ratio: 1; border-radius: 10px; border: 1.5px dashed var(--line); }
.mg-sum.ok { color: var(--ok); border-color: var(--ok); }
.mg-sum.no { color: var(--bad); border-color: var(--bad); }
.mg-anti { font-size: 13px; color: var(--muted); }
.mg-anti.ok { color: var(--ok); } .mg-anti.no { color: var(--bad); }

/* 字母猜猜 */
.hm-clue { display: flex; align-items: baseline; gap: 8px; background: var(--surface-2); padding: 8px 16px; border-radius: 999px; }
.hm-clue span { font-size: 12px; color: var(--muted); }
.hm-clue b { font-size: 18px; }
.hm-clue i { font-style: normal; color: var(--ink-2); font-size: 14px; }
.hm-word { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.hm-ch { width: 34px; height: 44px; border-bottom: 3px solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; }
.hm-ch.on { animation: pop .2s; }
.hm-ch.miss { color: var(--bad); }
.hm-kb .key-wide { visibility: hidden; }

/* 汉诺塔 */
.hn-stage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(calc(100vw - 32px), 460px); }
.hn-peg { position: relative; height: 220px; border: 0; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); padding: 0; touch-action: manipulation; }
.hn-peg.sel { box-shadow: inset 0 0 0 3px var(--accent); }
.hn-peg.hint-from { box-shadow: inset 0 0 0 3px #f59e0b; }
.hn-peg.hint-to { box-shadow: inset 0 0 0 3px var(--ok); }
.hn-rod { position: absolute; left: 50%; bottom: 10%; width: 6px; height: 80%; transform: translateX(-50%); background: var(--line); border-radius: 3px; }
.hn-disk { position: absolute; left: 50%; transform: translateX(-50%); border-radius: 999px; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; transition: bottom .12s; }
.hn-disk.up { bottom: 90% !important; }
.hn-disk.d1 { background: #ef4444; } .hn-disk.d2 { background: #f59e0b; } .hn-disk.d3 { background: #10b981; }
.hn-disk.d4 { background: #3b82f6; } .hn-disk.d5 { background: #8b5cf6; } .hn-disk.d6 { background: #ec4899; }
.hn-base { position: absolute; left: 8%; right: 8%; bottom: 3%; height: 6%; border-radius: 4px; background: var(--ink); color: var(--bg); font-size: 10px; display: flex; align-items: center; justify-content: center; }
.hn-peg.goal .hn-base { background: var(--accent); }

/* 九宫涂色 */
.mo-board { display: grid; grid-template-columns: repeat(var(--n), 1fr); width: min(calc(100vw - 32px), 420px); aspect-ratio: 1; gap: 1px; background: var(--line); border-radius: 10px; overflow: hidden; padding: 1px; touch-action: none; user-select: none; }
.mo-cell { position: relative; background: var(--surface); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: clamp(12px, 4vw, 18px); cursor: pointer; }
.mo-cell.blk { background: var(--ink); color: var(--bg); }
.mo-cell.dot::after { content: ''; position: absolute; width: 18%; height: 18%; border-radius: 50%; background: var(--muted); opacity: .6; }
.mo-cell.dot span { position: relative; z-index: 1; }
.mo-cell.done span { opacity: .35; }
.mo-cell.over span { color: var(--bad); }
.mo-cell.hinted { box-shadow: inset 0 0 0 2px var(--accent); }
.mo-board.locked .mo-cell { cursor: default; }

/* 成语纠错 */
.ty-list { display: flex; flex-direction: column; gap: 10px; width: min(100%, 360px); }
.ty-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.ty-row.hint { box-shadow: inset 0 0 0 2px var(--accent); }
.ty-row.ok { background: color-mix(in srgb, var(--ok) 15%, var(--surface)); }
.ty-ch { height: 54px; border: 0; border-radius: 10px; background: transparent; font-size: 28px; font-weight: 700; font-family: 'Songti SC', 'STSong', 'Noto Serif SC', serif; color: var(--ink); touch-action: manipulation; }
.ty-ch:hover:not(:disabled) { background: var(--surface-2); }
.ty-ch.no { color: var(--muted); text-decoration: line-through; }
.ty-ch.fixed { color: var(--ok); background: color-mix(in srgb, var(--ok) 18%, transparent); }
.ty-fix { min-height: 22px; font-size: 14px; color: var(--ok); font-weight: 700; }

/* 历史排序 */
.tl-list { display: flex; flex-direction: column; gap: 8px; width: min(100%, 420px); }
.tl-item { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border: 0; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); text-align: left; font-size: 15px; font-weight: 600; color: var(--ink); touch-action: manipulation; }
.tl-item span { flex: 1; }
.tl-item i { font-style: normal; font-size: 13px; color: var(--muted); white-space: nowrap; }
.tl-no { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 2px dashed var(--line); display: flex; align-items: center; justify-content: center; font-size: 13px; }
.tl-item.ok { background: color-mix(in srgb, var(--ok) 14%, var(--surface)); box-shadow: none; }
.tl-item.ok .tl-no { background: var(--ok); border-color: var(--ok); color: #fff; }
.tl-item.bad { animation: shake .35s; background: color-mix(in srgb, var(--bad) 14%, var(--surface)); }

/* 冰面滑行 */
.ic-board { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); width: min(calc(100vw - 32px), 420px); aspect-ratio: 1; background: #dbeefe; border-radius: 12px; overflow: hidden; touch-action: none; user-select: none; }
:root[data-theme='dark'] .ic-board { background: #1e3a5f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .ic-board { background: #1e3a5f; } }
.ic-cell { position: relative; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .5); }
.ic-cell.trail::after { content: ''; position: absolute; inset: 40%; border-radius: 50%; background: var(--accent); opacity: .35; }
.ic-cell.rock::before { content: ''; position: absolute; inset: 8%; border-radius: 30%; background: #64748b; box-shadow: inset -3px -4px 0 rgba(0, 0, 0, .2); }
.ic-cell.goal::before { content: '🚩'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(14px, 5vw, 26px); }
.ic-me { position: absolute; transition: left .22s ease-out, top .22s ease-out; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.ic-me::after { content: ''; width: 64%; height: 64%; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--accent); }

/* 数列规律 */
.sq-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.sq-t { min-width: 48px; height: 52px; padding: 0 8px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; }
.sq-t.q { background: var(--surface-2); color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); min-width: 64px; }
.sq-t.q.ok { background: var(--ok); color: #fff; box-shadow: none; }
.sq-t.q.no { background: var(--bad); color: #fff; box-shadow: none; }
.sq-fb { min-height: 44px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 14px; text-align: center; }
.sq-fb span { color: var(--ink-2); }
.sq-ok { flex: none; min-width: 140px; }
.sq-ok:disabled { opacity: .4; }
.sq-dots { display: flex; gap: 6px; }
.sq-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line); }
.sq-dots i.ok { background: var(--ok); box-shadow: none; }
.sq-dots i.bad { background: var(--bad); box-shadow: none; }

/* 诗句作者 */
.pt-card { width: min(100%, 380px); padding: 18px 16px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); text-align: center; font-family: 'Songti SC', 'STSong', 'Noto Serif SC', serif; }
.pt-card p { margin: 4px 0; font-size: 22px; font-weight: 700; letter-spacing: .08em; }
.pt-card span { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); font-family: inherit; }
.pt-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: min(100%, 380px); }
.pt-opt { height: 56px; font-size: 20px; }
.pt-opt.ok { background: var(--ok); color: #fff; }
.pt-opt.no { background: var(--bad); color: #fff; }

/* 单词搜索 */
.wsr-board { display: grid; grid-template-columns: repeat(var(--n), 1fr); width: min(calc(100vw - 32px), 420px); aspect-ratio: 1; gap: 2px; padding: 4px; background: var(--surface); border-radius: 12px; touch-action: none; user-select: none; }
.wsr-board.shake { animation: shake .35s; }
.wsr-cell { display: flex; align-items: center; justify-content: center; border-radius: 6px; font-weight: 800; font-size: clamp(13px, 4.2vw, 20px); cursor: pointer; }
.wsr-cell.f { color: #fff; }
.wsr-cell.sel { background: var(--ink) !important; color: var(--bg); }
.wsr-cell.flash { animation: wsrflash .5s 5 alternate; }
@keyframes wsrflash { to { background: var(--accent); color: #fff; } }
.wsr-cell.c0, .wsr-w.c0 { background: #ef4444; } .wsr-cell.c1, .wsr-w.c1 { background: #f59e0b; } .wsr-cell.c2, .wsr-w.c2 { background: #10b981; } .wsr-cell.c3, .wsr-w.c3 { background: #3b82f6; }
.wsr-cell.c4, .wsr-w.c4 { background: #8b5cf6; } .wsr-cell.c5, .wsr-w.c5 { background: #ec4899; } .wsr-cell.c6, .wsr-w.c6 { background: #14b8a6; } .wsr-cell.c7, .wsr-w.c7 { background: #84cc16; }
.wsr-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 420px; }
.wsr-w { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font-weight: 700; font-size: 14px; letter-spacing: .04em; }
.wsr-w.done { color: #fff; text-decoration: line-through; }
.board.locked .wsr-cell { cursor: default; }

/* 孔明棋 */
.pg-board { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; width: min(calc(100vw - 32px), 380px); aspect-ratio: 1; }
.pg-void { visibility: hidden; }
.pg-hole { border: 0; border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15); position: relative; padding: 0; touch-action: manipulation; }
.pg-hole.peg::after { content: ''; position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fbbf77, #b45309 70%); box-shadow: 0 2px 3px rgba(0, 0, 0, .3); transition: transform .12s; }
.pg-hole.sel::after { transform: scale(1.12); box-shadow: 0 0 0 3px var(--accent), 0 4px 8px rgba(0, 0, 0, .3); }
.pg-hole.tgt { box-shadow: inset 0 0 0 3px var(--ok); }
.pg-hole.hint { box-shadow: inset 0 0 0 3px #f59e0b; }
.pg-board.locked .pg-hole { pointer-events: none; }

/* 权重涂格 */
.ks-board { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px; width: min(calc(100vw - 32px), 400px); }
.ks-cell { aspect-ratio: 1; border: 0; border-radius: 6px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); position: relative; padding: 0; touch-action: manipulation; }
.ks-cell.blk { background: var(--ink); box-shadow: none; }
.ks-cell.dot::after { content: ''; position: absolute; inset: 40%; border-radius: 50%; background: var(--muted); }
.ks-cell.hinted { outline: 2px solid var(--accent); outline-offset: -2px; }
.ks-w { display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); font-weight: 700; }
.ks-clue { display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; color: var(--ink); border-radius: 6px; }
.ks-clue.ok { color: var(--ok); }
.ks-clue.no { color: var(--bad); }
.board.locked .ks-cell { pointer-events: none; }

/* 量词搭配 */
.ms-q { display: flex; align-items: center; gap: 10px; font-size: 40px; font-weight: 800; font-family: 'Songti SC', 'STSong', 'Noto Serif SC', serif; }
.ms-q b { min-width: 64px; height: 72px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.ms-q b.on { background: var(--ok); color: #fff; box-shadow: none; animation: pop .2s; }
.pp-cols.latin .pp-item, .pp-done.latin .pp-line b { font-family: inherit; font-weight: 800; letter-spacing: .04em; }

/* 语言切换 */
.lang-btn { font-weight: 800; }

/* 密码谚语 */
.cp-board { display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; max-width: 560px; }
.cp-word { display: flex; gap: 3px; }
.cp-cell { width: 30px; display: flex; flex-direction: column; align-items: center; border: 0; background: none; padding: 0; touch-action: manipulation; }
.cp-cell b { width: 30px; height: 34px; border-bottom: 2.5px solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: var(--accent); }
.cp-cell i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 2px; }
.cp-cell.sel b { background: color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 6px 6px 0 0; }
.cp-cell.given b { color: var(--ink); }
.cp-cell.dup b { color: var(--bad); }
.cp-cell.wrong b { color: var(--bad); text-decoration: line-through; }
.cp-punct { align-self: flex-start; font-size: 20px; font-weight: 800; height: 34px; display: flex; align-items: flex-end; }
.cp-kb .key-wide:first-child { visibility: hidden; }

/* 四边拼词 */
.wb-cur { min-height: 40px; font-size: 26px; font-weight: 800; letter-spacing: .12em; color: var(--ink); }
.wb-cur.empty { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.wb-cur.shake { animation: shake .35s; color: var(--bad); }
.wb-svg { width: min(calc(100vw - 32px), 320px); height: auto; touch-action: manipulation; user-select: none; }
.wb-box { fill: var(--surface); stroke: var(--ink); stroke-width: 3; }
.wb-ln { stroke-width: 5; stroke-linecap: round; }
.wb-ln.old { stroke: color-mix(in srgb, var(--accent) 45%, transparent); }
.wb-ln.new { stroke: var(--accent); stroke-dasharray: 10 6; }
.wb-dot circle { fill: var(--surface); stroke: var(--ink); stroke-width: 3; cursor: pointer; }
.wb-dot circle.hit { fill: transparent; stroke: none; }
.wb-dot text { font-size: 26px; font-weight: 800; text-anchor: middle; fill: var(--ink); pointer-events: none; }
.wb-dot.used circle:not(.hit) { fill: var(--accent); stroke: var(--accent); }
.wb-dot.used text { fill: var(--accent); }
.wb-dot.last circle:not(.hit) { fill: var(--ink); }
.wb-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }

/* 找不同类 */
.ow-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: min(100%, 380px); }
.ow-list .ow-w:last-child { grid-column: span 2; }
.ow-w { height: 56px; font-size: 18px; letter-spacing: .04em; }
.ow-w.odd { background: var(--accent); color: #fff; }
.ow-w.same { background: color-mix(in srgb, var(--ok) 18%, var(--surface)); color: var(--ok); }

/* ---------- 分享 ---------- */
.btn .ico { width: 18px; height: 18px; }
.btn-sm { padding: 7px 12px; font-size: 13px; }
.today-row { display: flex; gap: 8px; }
.today-row .btn { flex: 1 1 0; min-width: 0; padding-left: 10px; padding-right: 10px; }
.play-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.play-share { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; border-radius: 10px; border: 0; background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); font-size: 13px; font-weight: 700; color: var(--accent); }
.play-share .ico { width: 15px; height: 15px; }
.side-share { width: 100%; margin-top: 12px; color: var(--accent); }
@media (min-width: 1000px) { .play-links { display: none; } }

.vs-banner { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 560px; margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; font-size: 14px; color: var(--ink-2);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.vs-banner .ico { width: 20px; height: 20px; flex: none; color: var(--accent); }
.vs-banner b { color: var(--ink); }
.vs-box { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; font-weight: 800; background: var(--surface-2); color: var(--ink-2); }
.vs-box.win { background: color-mix(in srgb, var(--ok) 16%, var(--surface)); color: var(--ok); }

.modal-card:has(.share-sheet) { max-width: 460px; }
.share-sheet { text-align: center; }
.share-sheet h2 { font-size: 20px; margin: 0 0 14px; }
.share-img { margin: 0 auto 8px; width: min(100%, 300px); aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow); }
.share-img.loading { display: flex; align-items: center; justify-content: center; }
.share-img img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-touch-callout: default; }
.share-hint { font-size: 12px; color: var(--muted); margin: 0 0 10px; }
.share-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 10px; }
.share-actions .btn { flex: 1 1 120px; padding: 11px 10px; }
.share-link { display: flex; gap: 6px; margin-bottom: 14px; }
.share-link-input { flex: 1; min-width: 0; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); font-size: 12px; }
.share-plats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.plat { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 4px 0; border: 0; background: none; font-size: 11px; color: var(--ink-2); text-decoration: none; }
.plat-dot { width: 40px; height: 40px; border-radius: 50%; background: var(--c); color: #fff; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; transition: transform .1s; }
.plat:hover .plat-dot { transform: scale(1.08); }
.share-wx { margin-top: 12px; padding: 14px; border-radius: 14px; background: var(--surface-2); }
.share-wx .share-qr { width: 160px; height: 160px; margin: 0 auto 8px; }
.share-wx .share-qr svg { width: 100%; height: 100%; display: block; border-radius: 8px; }
.share-wx p { margin: 0; font-size: 13px; color: var(--ink-2); }
@media (max-width: 380px) { .share-plats { grid-template-columns: repeat(3, 1fr); } }