/* ---------- sudoku ---------- */
.sud{aspect-ratio:1;display:grid;grid-template-columns:repeat(9,1fr);border:2px solid var(--tan);border-radius:4px;overflow:hidden;background:var(--surface);user-select:none;container-type:inline-size}
.sud div{position:relative;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;place-items:center;font-size:clamp(16px,calc(100cqw / 9 * .52),56px);font-weight:600;font-family:var(--display);font-variant-numeric:tabular-nums}
.sud div.br{border-right:2px solid var(--tan)}
.sud div.bb{border-bottom:2px solid var(--tan)}
.sud div.c8{border-right:0}.sud div.r8{border-bottom:0}
.sud .given{color:var(--ink);font-weight:700}
.sud .filled{color:var(--pc,var(--amber))}
.sud .hl{background:var(--hl)}
.sud .same{background:var(--hl2)}
.sud .sel{background:var(--you-soft);box-shadow:inset 0 0 0 2.5px var(--you)}
.sud .psel{box-shadow:inset 0 0 0 2.5px var(--ps)}
.sud .sel.psel{box-shadow:inset 0 0 0 2.5px var(--you),inset 0 0 0 5px var(--ps)}
.sud .bad{color:var(--bad)!important}
.sud .notes{position:absolute;inset:2px;display:grid;grid-template-columns:repeat(3,1fr);font-size:clamp(8px,calc(100cqw / 9 * .21),20px);font-weight:600;color:var(--muted);line-height:1}
.sud .notes span{display:grid;place-items:center}
.tools{display:flex;gap:8px;margin-bottom:8px}
.tools .btn{flex:1;padding:10px 6px;font-size:clamp(14px,1.6dvh,18px)}
.tools .btn.on{background:var(--amber);border-color:var(--amber);color:var(--amber-ink)}
.numpad{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;margin:0 auto}
.numpad button{border:1px solid var(--line);background:var(--raise);border-radius:8px;height:clamp(50px,6.2dvh,84px);font-size:clamp(22px,3dvh,36px);font-weight:600;font-family:var(--display);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;color:var(--ink)}
.numpad button small{font-size:10px;color:var(--muted);font-family:var(--body);margin-top:3px}
.numpad button.spent{opacity:.3}
:root{--chrome-su:270px}
@media (min-width:1700px){:root{--chrome-su:300px}}
@media (min-width:2300px){:root{--chrome-su:330px}}
.sud,.tools,.numpad,.foot-inner{width:min(100%,max(300px,calc(100dvh - var(--chrome-su))),980px)}
.foot-inner{margin:0 auto}