/* Sudoku board + number pad for Game-Game. Mobile-first.
   Reuses toolbar/button/stat/win/toast styling from patiens.css and
   the sitewide theme tokens from gg-shell.css. */

.sdk{--line:rgba(255,255,255,.12);--line2:rgba(255,255,255,.42);--given:#fff;--pen:#5fb0f0;
  max-width:520px;margin:0 auto;-webkit-user-select:none;user-select:none;font-family:'Nunito',system-ui,sans-serif}

/* Board */
.sdk-board{display:grid;grid-template-columns:repeat(9,1fr);width:100%;aspect-ratio:1/1;
  background:var(--felt,#0d1730);border:3px solid var(--line2);border-radius:10px;overflow:hidden;touch-action:manipulation}
.sdk-cell{position:relative;display:flex;align-items:center;justify-content:center;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  font:800 clamp(1rem,6.2vw,1.7rem) 'Nunito',sans-serif;color:var(--pen);cursor:pointer;aspect-ratio:1/1}
.sdk-cell.br{border-right:2px solid var(--line2)}
.sdk-cell.bb{border-bottom:2px solid var(--line2)}
.sdk-cell.given{color:var(--given);cursor:default}
.sdk-cell.filled{color:var(--pen)}
.sdk-cell.peer{background:rgba(255,255,255,.05)}
.sdk-cell.same{background:rgba(0,133,209,.26)}
.sdk-cell.sel{background:rgba(254,204,0,.30);box-shadow:inset 0 0 0 2px var(--yellow,#FECC00)}
.sdk-cell.err{color:#ff5c7a}
.sdk-cell.err.sel{background:rgba(255,92,122,.28)}
.sdk-cell.hintcell{animation:sdkhint 1s ease-out}
@keyframes sdkhint{0%{background:rgba(74,222,128,.6)}100%{background:transparent}}

/* Pencil notes */
.sdk-notes{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  padding:1px;pointer-events:none}
.sdk-notes span{display:flex;align-items:center;justify-content:center;font:800 clamp(.42rem,2.3vw,.66rem) 'Nunito',sans-serif;color:var(--idle,#7f8cab);line-height:1}

/* Number pad */
.sdk-pad{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;margin-top:12px}
.sdk-num{position:relative;min-height:54px;border:1px solid var(--bd,#1e2a42);background:var(--card,#141d30);
  color:var(--tx,#fff);border-radius:12px;cursor:pointer;font-family:'Nunito',sans-serif;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;transition:filter .12s,transform .08s}
.sdk-num b{font:900 clamp(1.1rem,5vw,1.5rem) 'Nunito',sans-serif}
.sdk-num .sdk-left{font:800 10px 'Nunito',sans-serif;color:var(--idle,#7f8cab)}
.sdk-num:hover{filter:brightness(1.15);border-color:var(--yellow,#FECC00)}
.sdk-num:active{transform:translateY(2px)}
.sdk-num.done{opacity:.4}

/* Actions row */
.sdk-actions{margin-top:12px}
.pat-btn.on{background:linear-gradient(135deg,#FFD84D,#FECC00);color:#0a0e1a;box-shadow:0 3px 0 #b38f00}
.sdk-toggle{display:inline-flex;align-items:center;gap:7px;color:var(--tx2,#aebbd2);font:800 13px 'Nunito',sans-serif;cursor:pointer;margin-left:auto}
.sdk-toggle input{width:18px;height:18px;accent-color:var(--yellow,#FECC00);cursor:pointer}

/* Light theme */
html[data-theme=light] .sdk{--line:rgba(0,0,0,.16);--line2:rgba(0,0,0,.5);--given:#0c1322;--pen:#0062b0}
html[data-theme=light] .sdk-board{background:#fff}
html[data-theme=light] .sdk-cell.peer{background:rgba(0,0,0,.04)}
html[data-theme=light] .sdk-cell.same{background:rgba(0,133,209,.16)}
html[data-theme=light] .sdk-cell.sel{background:rgba(254,204,0,.4)}
html[data-theme=light] .sdk-cell.err{color:#d11a2a}
html[data-theme=light] .sdk-num{background:#fff}

@media(max-width:600px){
  .sdk-pad{gap:4px}
  .sdk-num{min-height:48px;border-radius:10px}
}
@media(max-width:380px){
  .sdk-pad{gap:3px}
  .sdk-num{min-height:44px}
  .sdk-num .sdk-left{font-size:9px}
}