/* Sudoku. Same rules as the rest of the app: solid colour, a hard edge under things, no gradients or soft shadows. */
.sdk{--sline:var(--ink)}
:root[data-theme=dark] .sdk{--sline:#b5aac8}

/* Home */
.sdk-hero{display:flex;align-items:center;gap:14px;padding:16px}
.sdk-hero h1{font-size:2.1rem;line-height:1.05}
.sdk-hero-mark{width:68px;height:68px;flex:none;border-radius:20px;display:grid;place-items:center;background:var(--tone-d);color:var(--on)}
.sdk-hero-mark .i{width:38px;height:38px}
.sdk-daily h3{font:800 1.4rem/1.1 var(--font-d)}
.sdk-lead{margin-top:9px;padding-top:9px;border-top:2px solid color-mix(in srgb,var(--on) 22%,transparent)}
.sdk-done{flex:none;min-width:92px;padding:6px 12px 5px;border-radius:14px;text-align:center;background:var(--surface);color:var(--text);box-shadow:0 3px 0 var(--tone-d)}
.sdk-done b{display:block;font:800 1.45rem/1.1 var(--font-d);font-variant-numeric:tabular-nums}
.sdk-done span{display:block;font-size:.8rem;font-weight:800;color:var(--muted)}
.sdk-free{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sdk-free .mode-tile{min-height:112px;padding:11px}
.sdk-free .mode-tile b{font-size:1.1rem}
.sdk-resume{cursor:pointer}

/* Playing */
body.sdk .tabbar{display:none}
body.sdk .main{padding-bottom:calc(var(--safe-b) + 14px)}
@media (min-width:960px){body.sdk .tabbar{display:flex}}
.sdk-game{display:flex;flex-direction:column;gap:8px;max-width:560px;margin:0 auto;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.sdk-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:0 4px}
.sdk-meta{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.sdk-meta b{font:800 1.2rem var(--font-d)}
.sdk-meta span{font-size:.82rem;font-weight:800;color:var(--muted)}
.sdk-clock{text-align:right;line-height:1.1}
.sdk-clock b{display:block;font:800 1.7rem/1 var(--font-d);font-variant-numeric:tabular-nums}
.sdk-clock small{font-size:.8rem;font-weight:800;color:var(--nar-t);min-height:1em;display:block}

.sdk-board{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));width:clamp(250px,min(100%,calc(100dvh - 318px - var(--safe-t) - var(--safe-b))),500px);aspect-ratio:1;margin:0 auto;border:3px solid var(--sline);border-radius:14px;overflow:hidden;background:var(--surface);box-shadow:0 5px 0 var(--line-2)}
.sdk-board.shake{animation:sdk-shake .4s}
.sdk-cell{position:relative;display:grid;place-items:center;padding:0;border:0;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);background:var(--surface);color:var(--xez-t);font:800 clamp(1.15rem,6.2vw,1.9rem)/1 var(--font-d);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.sdk-cell.rb{border-right:3px solid var(--sline)}
.sdk-cell.bb{border-bottom:3px solid var(--sline)}
.sdk-cell:nth-child(9n){border-right:0}
.sdk-cell:nth-child(n+73){border-bottom:0}
.sdk-cell.given{color:var(--text)}
.sdk-cell.hint{color:var(--yar-t)}
.sdk-cell.peer{background:var(--surface-2)}
.sdk-cell.same{background:color-mix(in srgb,var(--zef) 40%,var(--surface))}
.sdk-cell.sel{background:color-mix(in srgb,var(--xez) 28%,var(--surface));box-shadow:inset 0 0 0 3px var(--xez)}
.sdk-cell.bad{background:var(--bad-bg);color:var(--bad-ink)}
.sdk-cell:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--xez)}
.sdk-notes{position:absolute;inset:1px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);font:700 clamp(.46rem,2.4vw,.74rem)/1 var(--font-d);color:var(--muted);pointer-events:none}
.sdk-notes i{display:grid;place-items:center;font-style:normal}
.sdk-msg{min-height:1.4em;text-align:center;font-weight:800;font-size:.92rem;color:var(--muted)}
.sdk-msg.err{color:var(--bad-ink)}

.sdk-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.sdk-tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:52px;padding:4px 2px 0;border-radius:14px;background:var(--surface);border:2px solid var(--line-2);box-shadow:0 3px 0 var(--line-2);font:800 .78rem var(--font-d);color:var(--text);transition:transform .07s,box-shadow .07s}
.sdk-tool:active{transform:translateY(3px);box-shadow:0 0 0 var(--line-2)}
.sdk-tool .i{width:21px;height:21px}
.sdk-tool i{font-style:normal;color:var(--nar-t)}
.sdk-tool[aria-pressed=true]{background:var(--ink);border-color:var(--ink);box-shadow:0 3px 0 #000;color:#fff}
:root[data-theme=dark] .sdk-tool[aria-pressed=true]{background:var(--zef);border-color:var(--zef);box-shadow:0 3px 0 var(--zef-d);color:var(--ink)}
.sdk-tool[disabled]{opacity:.45}
.sdk-pad{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px}
.sdk-key{position:relative;min-height:54px;padding:0 0 4px;border-radius:12px;background:var(--surface);border:2px solid var(--line-2);box-shadow:0 3px 0 var(--line-2);font:800 1.45rem var(--font-d);color:var(--text);touch-action:manipulation;transition:transform .07s,box-shadow .07s}
.sdk-key:active{transform:translateY(3px);box-shadow:0 0 0 var(--line-2)}
.sdk-key small{position:absolute;right:4px;bottom:1px;font:800 .6rem var(--font-d);color:var(--faint)}
.sdk-key.done{opacity:.3}
@media (max-width:359px){.sdk-key{font-size:1.2rem;min-height:48px}}

@keyframes sdk-shake{20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.sdk-board.shake{animation:none}}