:root {
  --bg: #0f1420; --panel: #1a2233; --panel-2: #232d42;
  --text: #e8ecf4; --muted: #8b94a7;
  --accent: #f5c518; --ok: #2ecc71; --err: #e74c3c;
  --c0: #e74c3c; --c1: #2ecc71; --c2: #3498db; --c3: #f1c40f;
  --radius: 12px;
}
* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; } /* 防止 .btn/.donate-panel 等类选择器覆盖 hidden 属性 */
body {
  background: var(--bg); color: var(--text);
  font-family: system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
  min-height: 100vh; touch-action: manipulation;
}
.num { font-variant-numeric: tabular-nums; }
main { max-width: 720px; margin: 0 auto; padding: 16px; }
a { color: inherit; }

.site-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px; max-width: 720px; margin: 0 auto;
}
.site-header h1 { font-size: 1.4rem; }
.site-header nav a { color: var(--muted); text-decoration: none; }
.site-header nav a:hover { color: var(--accent); }

.btn {
  display: inline-block; border: 0; border-radius: var(--radius);
  padding: 12px 20px; font-size: 1rem; cursor: pointer;
  min-height: 44px; transition: transform .08s;
}
.btn:active { transform: scale(.96); }
.btn-primary { background: var(--accent); color: #1a1405; font-weight: 700; }
.btn-ghost { background: var(--panel); color: var(--text); }

/* 首页卡片 */
.card-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 8px; }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.game-card {
  background: var(--panel); border-radius: var(--radius); padding: 24px 16px;
  text-decoration: none; text-align: center; transition: transform .12s, background .12s;
}
.game-card:hover { background: var(--panel-2); transform: translateY(-2px); }
.game-card h2 { margin: 8px 0 4px; }
.game-card p { color: var(--muted); font-size: .9rem; }
.game-card-icon { font-size: 2rem; }

.top-scores { margin-top: 24px; color: var(--muted); font-size: .9rem; }
.top-scores strong { color: var(--text); }

.donate { margin-top: 32px; text-align: center; }
.donate-panel { margin-top: 12px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.donate-panel img { width: 180px; height: 180px; border-radius: var(--radius); background: #fff; }

/* 游戏页骨架 */
.game-header {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.game-header h1 { font-size: 1.2rem; flex: 1; }
.game-header select {
  background: var(--panel); color: var(--text); border: 0;
  border-radius: 8px; padding: 8px; min-height: 44px; font-size: 1rem;
}
.game-timer { color: var(--muted); }
.game-actions { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.game-msg { min-height: 1.5em; margin-top: 12px; }
.game-msg.ok { color: var(--ok); }
.game-msg.err { color: var(--err); }

/* 屏幕键盘 */
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 360px; margin: 16px auto 0; }
.keypad-key {
  min-height: 56px; font-size: 1.3rem; border: 0; border-radius: var(--radius);
  background: var(--panel); color: var(--text); cursor: pointer; transition: transform .08s;
}
.keypad-key:active { transform: scale(.94); background: var(--panel-2); }

/* 数独 */
.sudoku-grid {
  display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); /* minmax(0,…) 防止 iOS 格子最小内容宽度撑破容器 */
  width: 100%; max-width: 480px; margin: 0 auto; background: var(--muted);
  gap: 1px; border: 2px solid var(--muted);
}
.sudoku-cell {
  aspect-ratio: 1; border: 0; background: var(--panel); padding: 0; min-width: 0;
  color: var(--text); font-size: clamp(.9rem, 4.5vw, 1.4rem); cursor: pointer;
}
.sudoku-cell:nth-child(3n) { border-right: 2px solid var(--muted); }
.sudoku-cell:nth-child(9n) { border-right: 0; }
.sudoku-cell[data-row="2"], .sudoku-cell[data-row="5"] { border-bottom: 2px solid var(--muted); }
.sudoku-cell.given { color: var(--muted); }
.sudoku-cell.selected { background: var(--panel-2); outline: 2px solid var(--accent); }
.sudoku-cell.wrong { color: var(--err); }
.sudoku-cell .notes { font-size: .55em; color: var(--muted); }

/* 24点 */
.cards { display: flex; gap: 12px; justify-content: center; margin: 16px 0; flex-wrap: wrap; }
.card24 {
  min-width: 64px; min-height: 88px; font-size: 1.6rem; border-radius: var(--radius);
  border: 2px solid transparent; background: var(--panel); color: var(--text); cursor: pointer;
}
.card24.selected { border-color: var(--accent); }
.ops { display: flex; gap: 12px; justify-content: center; }
.op {
  min-width: 56px; min-height: 56px; font-size: 1.4rem; border-radius: 50%;
  border: 2px solid transparent; background: var(--panel-2); color: var(--accent); cursor: pointer;
}
.op.selected { border-color: var(--accent); }
.streak { font-size: 1.1rem; }

/* 数字复原 */
.seg-grid {
  position: relative; max-width: 480px; margin: 0 auto;
  aspect-ratio: 3; overflow: hidden;
}
/* 整根线段：绝对定位，粗圆角；竖段向上下各延伸约半格，拐角处与横段相连（位置由 JS 内联计算） */
.seg-bar { position: absolute; border-radius: 999px; }
.seg-bar.c0 { background: var(--c0); }
.seg-bar.c1 { background: var(--c1); }
.seg-bar.c2 { background: var(--c2); }
.seg-bar.c3 { background: var(--c3); }
.seg-dots { display: flex; gap: 24px; justify-content: center; margin: 12px 0; }
.seg-dot { width: 16px; height: 16px; border-radius: 50%; }
.seg-dot.c0 { background: var(--c0); } .seg-dot.c1 { background: var(--c1); }
.seg-dot.c2 { background: var(--c2); } .seg-dot.c3 { background: var(--c3); }
.slot-row { display: flex; gap: 12px; justify-content: center; margin: 16px 0; }
.slot {
  width: 56px; height: 72px; border-radius: var(--radius); background: var(--panel);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; border-bottom: 4px solid;
}
.slot.c0 { border-color: var(--c0); } .slot.c1 { border-color: var(--c1); }
.slot.c2 { border-color: var(--c2); } .slot.c3 { border-color: var(--c3); }

/* 模态框 */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 10;
}
.modal { background: var(--panel); border-radius: var(--radius); padding: 24px; max-width: 360px; width: 100%; }
.modal h2 { font-size: 1.1rem; margin-bottom: 8px; }
.modal p { color: var(--muted); margin-bottom: 12px; }
.modal input {
  width: 100%; padding: 12px; border-radius: 8px; border: 0;
  background: var(--panel-2); color: var(--text); font-size: 1rem; min-height: 44px;
}
.modal-status { min-height: 1.5em; margin: 8px 0; color: var(--accent) !important; }
.modal-actions { display: flex; gap: 12px; justify-content: flex-end; }

/* 排行榜 */
.tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.tab {
  flex: 1; padding: 12px; border: 0; border-radius: var(--radius);
  background: var(--panel); color: var(--muted); cursor: pointer; min-height: 44px; font-size: 1rem;
}
.tab.active { background: var(--accent); color: #1a1405; font-weight: 700; }
table.lb { width: 100%; border-collapse: collapse; }
.lb th, .lb td { padding: 10px 8px; text-align: left; }
.lb tbody tr:nth-child(odd) { background: var(--panel); }
.lb tbody tr:nth-child(1) td:first-child { color: #ffd700; }
.lb tbody tr:nth-child(2) td:first-child { color: #c0c0c0; }
.lb tbody tr:nth-child(3) td:first-child { color: #cd7f32; }
.lb-empty { color: var(--muted); padding: 24px; text-align: center; }