/* ===== 数独 · 杂志风（哞小哞的杂货铺配色，浅色/晚刊两套） ===== */
:root{
  --font-display:"Playfair Display","Noto Serif SC",Georgia,serif;
  --font-serif:"Noto Serif SC","Source Serif Pro",Georgia,serif;
  --font-sans:"Inter","Noto Sans SC",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --c-ink:38 35 30; --c-ink-soft:78 74 64; --c-ink-muted:125 116 98;
  --c-paper:233 220 186; --c-paper-warm:239 228 198; --c-paper-deep:224 208 166;
  --c-accent:169 58 42;
  --c-line:38 35 30;
}
html.dark{
  --c-ink:240 231 209; --c-ink-soft:210 200 178; --c-ink-muted:152 142 120;
  --c-paper:21 29 52; --c-paper-warm:29 39 66; --c-paper-deep:37 48 79;
  --c-accent:222 116 92;
  --c-line:240 231 209;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  font-family:var(--font-sans);
  background:rgb(var(--c-paper));
  color:rgb(var(--c-ink));
  background-image:
    radial-gradient(circle at 20% 10%,rgba(169,58,42,.05) 0,transparent 40%),
    radial-gradient(circle at 80% 80%,rgba(var(--c-line),.018) 0,transparent 45%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
html.dark body{
  background-image:
    radial-gradient(circle at 20% 10%,rgba(169,58,42,.07) 0,transparent 40%),
    radial-gradient(circle at 80% 80%,rgba(244,241,234,.03) 0,transparent 45%);
}
::selection{background:rgb(var(--c-accent));color:rgb(var(--c-paper))}

.wrap{max-width:1080px;margin:0 auto;padding:24px 20px 48px}
.masthead{border-bottom:1px solid rgb(var(--c-line)/.2);padding-bottom:14px;margin-bottom:20px}
.eyebrow{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.25em;color:rgb(var(--c-ink-muted))}
.masthead h1{font-family:var(--font-display);font-weight:900;letter-spacing:-.02em;font-size:30px;line-height:1.05;margin-top:6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.masthead .sub{font-family:var(--font-serif);color:rgb(var(--c-ink-muted));font-size:14px;margin-top:4px}
.stamp{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgb(var(--c-accent));border:1px solid rgb(var(--c-accent)/.4);padding:3px 8px;transform:rotate(-2deg);border-radius:2px}

.app{max-width:560px;margin:0 auto;padding:8px 6px 24px;display:flex;flex-direction:column;min-height:calc(100vh - 150px)}

/* ===== 顶栏 ===== */
.topbar{display:flex;align-items:center;gap:10px;padding:10px 2px 12px}
.brand{font-family:var(--font-display);font-size:22px;font-weight:900;letter-spacing:.02em}
.difficulty-label{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 12px;border-radius:999px;background:rgb(var(--c-accent));color:#fff;
}
.timer{
  margin-left:auto;font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:18px;font-weight:600;color:rgb(var(--c-ink-soft));
}
.top-actions{display:flex;gap:8px}
.top-actions .ghost{width:auto;height:38px;padding:0 14px;font-size:12px;letter-spacing:.08em}

/* ===== 通用按钮 ===== */
button{font-family:inherit;cursor:pointer;border:none;border-radius:4px;transition:all .18s;touch-action:manipulation}
button:active{transform:scale(.97)}
button:disabled{opacity:.45;cursor:default}
.primary{
  font-family:var(--font-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  background:rgb(var(--c-accent));border:1px solid rgb(var(--c-accent));color:#fff;padding:12px 22px;border-radius:4px;
}
.primary:hover{background:rgb(var(--c-ink));border-color:rgb(var(--c-ink));color:rgb(var(--c-paper))}
.ghost{
  font-family:var(--font-sans);font-size:14px;
  border:1px solid rgb(var(--c-line)/.25);background:transparent;color:rgb(var(--c-ink));
  padding:11px 16px;border-radius:4px;
}
.ghost:hover{border-color:rgb(var(--c-accent));color:rgb(var(--c-accent))}
.danger{background:rgb(var(--c-accent));border-color:rgb(var(--c-accent));color:#fff}
.danger:hover{background:rgb(var(--c-ink));color:rgb(var(--c-paper))}

/* ===== 首页 ===== */
.home{text-align:center;padding:26px 0 10px}
.home h1{font-family:var(--font-display);font-weight:900;letter-spacing:-.02em;font-size:44px;margin:6px 0 8px}
.subtitle{font-family:var(--font-serif);color:rgb(var(--c-ink-muted));margin:0 0 26px;font-size:14px}
.difficulty-picker{display:flex;gap:12px;justify-content:center;margin-bottom:26px}
.diff{
  min-width:96px;padding:14px 10px;font-size:15px;font-family:var(--font-sans);font-weight:500;
  border-radius:6px;border:1px solid rgb(var(--c-line)/.2);background:rgb(var(--c-paper-warm)/.6);color:rgb(var(--c-ink));
}
.diff:hover{transform:translateY(-2px);border-color:rgb(var(--c-accent));color:rgb(var(--c-accent));box-shadow:0 4px 12px rgb(var(--c-line)/.08)}
.home-actions{display:flex;flex-direction:column;gap:10px;width:260px;margin:0 auto}
.home-actions .ghost.active{background:rgb(var(--c-accent));color:#fff;border-color:rgb(var(--c-accent))}
.tip{margin-top:26px;color:rgb(var(--c-ink-muted));font-family:var(--font-serif);font-size:13px}

/* ===== 棋盘 ===== */
.main{flex:1}
.game{display:flex;flex-direction:column;gap:14px}
.board{
  display:grid;grid-template-columns:repeat(9,1fr);aspect-ratio:1/1;width:100%;max-width:480px;margin:0 auto;
  background:rgb(var(--c-paper)/.4);border:2px solid rgb(var(--c-line)/.65);border-radius:6px;overflow:hidden;
}
.cell{
  position:relative;display:flex;align-items:center;justify-content:center;
  border:1px solid rgb(var(--c-line)/.09);background:transparent;color:rgb(var(--c-ink-soft));
  font-family:var(--font-display);font-size:clamp(15px,5.4vw,26px);font-weight:700;
  user-select:none;cursor:default;line-height:1;
}
.cell.given{color:rgb(var(--c-ink));font-weight:900}
.cell.wrong{color:rgb(var(--c-accent));background:rgb(var(--c-accent)/.12)}
.cell.wrong.given{color:rgb(var(--c-accent))}
.cell.sel{background:rgb(var(--c-accent)/.16)}
.cell.hl{background:rgb(var(--c-accent)/.06)}
.cell.sel.hl{background:rgb(var(--c-accent)/.18)}
/* 3×3 宫粗线：清晰的墨色实线，方便辨认九个宫 */
.cell.br{border-bottom:2px solid rgb(var(--c-line)/.9)}
.cell.bb{border-right:2px solid rgb(var(--c-line)/.9)}

/* 笔记小字 */
.notes{position:absolute;inset:2px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);font-size:10px;font-weight:400;color:rgb(var(--c-ink-muted))}
.notes span{display:flex;align-items:center;justify-content:center;font-family:var(--font-mono)}

/* ===== 控制区 ===== */
.controls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ctrl{
  font-family:var(--font-sans);font-size:13px;padding:12px 4px;border-radius:6px;
  border:1px solid rgb(var(--c-line)/.2);background:rgb(var(--c-paper-warm)/.5);color:rgb(var(--c-ink));
}
.ctrl:hover{border-color:rgb(var(--c-accent));color:rgb(var(--c-accent))}
.ctrl.active{background:rgb(var(--c-accent));color:#fff;border-color:rgb(var(--c-accent))}

/* ===== 数字键盘 ===== */
.numpad{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.num{
  aspect-ratio:1/1;font-family:var(--font-display);font-size:22px;font-weight:800;
  border-radius:8px;border:1px solid rgb(var(--c-line)/.18);background:rgb(var(--c-paper-warm)/.6);color:rgb(var(--c-ink));
}
.num:hover{border-color:rgb(var(--c-accent));color:rgb(var(--c-accent))}
.num.erase{font-size:20px;color:rgb(var(--c-ink-muted))}
.note-on .num{font-size:17px}

/* ===== 遮罩/弹窗 ===== */
.overlay{position:fixed;inset:0;background:rgba(10,12,16,.55);display:flex;align-items:center;justify-content:center;z-index:50}
.overlay[hidden]{display:none}
.overlay-card{
  background:rgb(var(--c-paper-warm));border:1px solid rgb(var(--c-line)/.2);border-radius:6px;
  padding:26px 30px;width:min(90vw,360px);text-align:center;box-shadow:0 14px 40px rgba(0,0,0,.25);
}
.overlay-card h2{font-family:var(--font-display);font-weight:900;font-size:22px;margin:0 0 14px}
.overlay-card p{color:rgb(var(--c-ink-muted));font-size:14px;line-height:1.7;font-family:var(--font-serif)}
.win-card h2{color:rgb(var(--c-accent))}
.confirm-actions,.records-actions{display:flex;gap:10px;justify-content:center;margin-top:18px}
.records-card{text-align:left}
.records-card h2{text-align:center}
.records-card p{margin:6px 0}

/* ===== Toast ===== */
.toast{
  position:fixed;left:50%;top:16px;transform:translateX(-50%);
  background:rgb(var(--c-ink));color:rgb(var(--c-paper));padding:9px 18px;border-radius:999px;
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.05em;z-index:60;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.toast[hidden]{display:none}

@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
@media (max-width:420px){
  .masthead h1{font-size:26px}
  .home h1{font-size:38px}
  .cell{font-size:clamp(14px,5.2vw,22px)}
}