:root{
  --bg:#f4f6f8; --panel:#fff; --panel-2:#eef1f5; --line:#d7dde5; --line-strong:#8d99a8;
  --line-dash:#b4bfcd;
  --fg:#1b1f24; --muted:#6a737d;
  --given:#1b1f24; --entry:#1858c7; --wrong:#d1242f; --wrong-bg:#ffe9ea;
  --sel:#cfe2ff; --peer:#e8eef7; --same:#bcd6fb; --accent:#1a7f37; --accent-2:#bc4c00;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0e1116; --panel:#161b22; --panel-2:#1c2230; --line:#2a313c; --line-strong:#6d7885;
    --line-dash:#404a58;
    --fg:#e6e8eb; --muted:#8b949e;
    --given:#e6e8eb; --entry:#6cb0ff; --wrong:#ff7b72; --wrong-bg:#3d1d1f;
    --sel:#1f3a5f; --peer:#1a2130; --same:#2b4b76; --accent:#3fb950; --accent-2:#f0883e;
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);
     font:15px/1.5 system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
     -webkit-text-size-adjust:100%}
button{font:inherit;cursor:pointer;color:inherit}

.topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
        padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:650;
       color:var(--fg);text-decoration:none;letter-spacing:-.01em}
.brand-logo{display:block;height:26px;width:auto;flex:none}
.diff-picker{display:flex;gap:4px;margin-left:auto;background:var(--panel-2);
             padding:3px;border-radius:9px}
.diff-picker button{padding:6px 13px;border:0;border-radius:7px;background:transparent;
                    color:var(--muted);font-size:14px}
.diff-picker button:hover{color:var(--fg)}
.diff-picker button.active{background:var(--panel);color:var(--fg);font-weight:600;
                           box-shadow:0 1px 3px rgba(0,0,0,.12)}
.primary{padding:7px 15px;border:0;border-radius:8px;background:var(--accent);
         color:#fff;font-weight:600}
.primary:hover{filter:brightness(1.08)}
.ghost{padding:5px 12px;border:1px solid var(--line);border-radius:7px;
       background:transparent;color:var(--muted);font-size:13px}
.ghost:hover{color:var(--fg);border-color:var(--line-strong)}

main{max-width:560px;margin:0 auto;padding:16px}

.stats{display:flex;align-items:center;gap:18px;margin-bottom:12px;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;gap:1px}
.stat span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.stat b{font-size:17px;font-variant-numeric:tabular-nums}
.stats .ghost{margin-left:auto}

/* ---------- 棋盘 ---------- */
.board-wrap{position:relative}
.board{display:grid;grid-template-columns:repeat(9,1fr);aspect-ratio:1;
       background:var(--panel);border:2px solid var(--line-strong);border-radius:8px;
       overflow:hidden;user-select:none;touch-action:manipulation}
.cell{position:relative;background:var(--panel);display:flex;align-items:center;
      justify-content:center;font-size:clamp(18px,5.2vw,28px);line-height:1;
      color:var(--entry);cursor:pointer;border:0;padding:0;font-variant-numeric:tabular-nums}

/* 格线必须写在上面那条 .cell 之后：两者权重相同，写在前面会被 border:0 整个清掉。
   用边框而不是 margin —— margin 会让带线的格子变窄，九列宽度就不齐了；
   box-sizing:border-box 下边框画在格子内部，外框尺寸始终相等。
   宫内细线用虚线，宫与宫之间的粗线保持实线。 */
.cell{border-right:1px dashed var(--line-dash);border-bottom:1px dashed var(--line-dash)}
.cell:nth-child(9n){border-right:0}
.cell:nth-child(n+73){border-bottom:0}
.cell:nth-child(9n+3),.cell:nth-child(9n+6){border-right:2px solid var(--line-strong)}
.cell:nth-child(n+19):nth-child(-n+27),
.cell:nth-child(n+46):nth-child(-n+54){border-bottom:2px solid var(--line-strong)}
.cell.given{color:var(--given);font-weight:650;cursor:default}
.cell.peer{background:var(--peer)}
.cell.same{background:var(--same)}
.cell.sel{background:var(--sel);box-shadow:inset 0 0 0 2px var(--entry)}
.cell.wrong{color:var(--wrong);background:var(--wrong-bg)}
.cell.wrong.sel{box-shadow:inset 0 0 0 2px var(--wrong)}
.cell.hinted{animation:pop .45s ease}
@keyframes pop{0%{transform:scale(.55);opacity:.2}60%{transform:scale(1.12)}100%{transform:scale(1)}}

.notes{position:absolute;inset:2px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);
       font-size:clamp(7px,1.75vw,10px);color:var(--muted);line-height:1;font-weight:500}
.notes i{display:flex;align-items:center;justify-content:center;font-style:normal}

/* 作者样式里的 display 会盖过浏览器默认的 [hidden]{display:none}，
   所以带 display 的元素必须自己补一条，否则 el.hidden=true 不生效。 */
.overlay[hidden]{display:none}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
         background:color-mix(in srgb,var(--bg) 82%,transparent);
         backdrop-filter:blur(3px);border-radius:8px;z-index:5}
.overlay-card{text-align:center;background:var(--panel);border:1px solid var(--line);
              border-radius:12px;padding:24px 30px;box-shadow:0 8px 28px rgba(0,0,0,.18)}
.overlay-card h2{margin:0 0 6px;font-size:20px}
.overlay-card p{margin:0 0 16px;color:var(--muted);font-size:14px}

/* ---------- 工具与数字键盘 ---------- */
.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 8px}
.tool[hidden],.pad button[hidden]{display:none}
.tool{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;
      border:1px solid var(--line);border-radius:9px;background:var(--panel);
      font-size:12px;color:var(--muted)}
.tool span{font-size:19px;line-height:1;color:var(--fg)}
.tool:hover{border-color:var(--line-strong)}
.tool[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.tool[aria-pressed="true"] span{color:#fff}
.tool:disabled{opacity:.4;cursor:not-allowed}

.pad{display:grid;grid-template-columns:repeat(9,1fr);gap:6px}
.pad button{position:relative;padding:14px 0 16px;border:1px solid var(--line);
            border-radius:9px;background:var(--panel);font-size:21px;font-weight:600;
            color:var(--entry);font-variant-numeric:tabular-nums}
.pad button:hover{border-color:var(--entry)}
.pad button i{position:absolute;left:0;right:0;bottom:3px;font-style:normal;
              font-size:10px;font-weight:400;color:var(--muted)}
.pad button.done{opacity:.35;pointer-events:none}

.hint-text{color:var(--muted);font-size:12px;margin:14px 0 0;text-align:center;line-height:1.9}
kbd{background:var(--panel-2);border:1px solid var(--line);border-bottom-width:2px;
    border-radius:4px;padding:1px 5px;font:inherit;font-size:11px}
footer{max-width:560px;margin:0 auto;padding:10px 16px 32px;color:var(--muted);
       font-size:12px;text-align:center}

@media (max-width:520px){
  .topbar{padding:9px 12px;gap:8px}
  .diff-picker{order:3;width:100%;margin-left:0}
  .diff-picker button{flex:1;padding:6px 0}
  main{padding:12px}
  .pad{gap:4px}
  .pad button{padding:11px 0 13px;font-size:18px}
}

.tool span{display:flex;align-items:center;justify-content:center;height:19px}
.tool span svg{display:block}