/* ==========================================================================
   Logica › Sudoku (js/logica/sudoku.js): classico, a forme e killer.
   La griglia è quadrata e si adatta allo schermo; i caratteri scalano con
   la dimensione della casella (unità cqi del contenitore .sd-boardwrap).
   ========================================================================== */
.sd-wrap {
  --sd-acc: #5e9cff;
  --sd-user: #7fb2ff;
  --sd-line: var(--ink-2);
  --sd-thin: var(--stroke-2);
  container-type: inline-size;
}
:root[data-theme="light"] .sd-wrap { --sd-acc: #2f6fd6; --sd-user: #2563c9; --sd-line: rgba(var(--ink-rgb), 0.72); }

.sd-main { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sd-left { width: 100%; display: flex; flex-direction: column; align-items: center; }
.sd-side { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 12px; }
@container (min-width: 760px) {
  .sd-main { flex-direction: row; align-items: flex-start; justify-content: center; gap: 24px; }
  .sd-left { width: auto; flex: 0 1 auto; }
  .sd-side { width: 320px; flex: 0 0 320px; padding-top: 34px; }
  .sd-tools { gap: 2px; }
}

.sd-status { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 14px; color: var(--ink-3); }
.sd-time { font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 600; color: var(--ink-2); }

/* griglia */
.sd-boardwrap { container-type: inline-size; width: min(100%, 560px, max(290px, calc(100vh - 250px))); }
@container (min-width: 760px) { .sd-boardwrap { width: min(560px, max(320px, calc(100vh - 230px)), calc(100cqi - 344px)); } }
.sd-board {
  --n: 9; --nc: 3; --nr: 3;
  --cell: calc(100cqi / var(--n));
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-template-rows: repeat(var(--n), minmax(0, 1fr));
  aspect-ratio: 1; width: 100%; box-sizing: border-box;
  border: 2.5px solid var(--sd-line); border-radius: 10px; overflow: hidden;
  background: var(--fill); user-select: none; -webkit-user-select: none; touch-action: manipulation;
  transition: opacity 0.2s;
}
.sd-board.sd-busy { opacity: 0.45; pointer-events: none; }
.sd-cell {
  position: relative; box-sizing: border-box; min-width: 0; min-height: 0;
  display: grid; place-items: center; cursor: pointer;
  border-right: 1px solid var(--sd-thin); border-bottom: 1px solid var(--sd-thin);
  font-size: calc(var(--cell) * 0.56); line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
}
.sd-cell.sd-tr { border-right: 2.5px solid var(--sd-line); }
.sd-cell.sd-tb { border-bottom: 2.5px solid var(--sd-line); }
.sd-cell.sd-lc { border-right: 0; }
.sd-cell.sd-lr { border-bottom: 0; }
.sd-cell { font-weight: 500; }
.sd-cell > b { font-weight: inherit; display: block; }
.sd-cell.sd-alt { background-color: var(--fill-2); }
.sd-forme .sd-cell { background-color: color-mix(in srgb, var(--tint) 15%, transparent); }
:root[data-theme="light"] .sd-forme .sd-cell { background-color: color-mix(in srgb, var(--tint) 17%, transparent); }

/* stati: evidenziazioni sopra al colore della regione */
.sd-cell.hl { background-image: linear-gradient(color-mix(in srgb, var(--sd-acc) 11%, transparent), color-mix(in srgb, var(--sd-acc) 11%, transparent)); }
.sd-cell.same { background-image: linear-gradient(color-mix(in srgb, var(--sd-acc) 26%, transparent), color-mix(in srgb, var(--sd-acc) 26%, transparent)); }
.sd-cell.sel { background-image: linear-gradient(color-mix(in srgb, var(--sd-acc) 38%, transparent), color-mix(in srgb, var(--sd-acc) 38%, transparent)); }
.sd-cell.sel::before { content: ''; position: absolute; inset: 1px; border-radius: 3px; box-shadow: inset 0 0 0 2px var(--sd-acc); pointer-events: none; z-index: 2; }
.sd-cell.sd-given { font-weight: 700; color: var(--ink); }
.sd-cell.sd-user { color: var(--sd-user); }
.sd-cell.sd-hinted { color: var(--hint, var(--sd-user)); font-weight: 600; }
.sd-cell.dup { color: var(--ko); }
.sd-cell.err { color: var(--ko); background-image: linear-gradient(color-mix(in srgb, var(--ko) 22%, transparent), color-mix(in srgb, var(--ko) 22%, transparent)); }
.sd-board.sd-done .sd-cell { color: var(--ok); cursor: default; }
.sd-board.sd-done .sd-cell.sd-given { color: var(--ink); }

/* note: mini griglia nella casella */
.sd-notes {
  position: absolute; inset: 6%; display: grid;
  grid-template-columns: repeat(var(--nc), 1fr); grid-template-rows: repeat(var(--nr), 1fr);
  font-size: calc(var(--cell) / var(--nc) * 0.72); font-weight: 500; color: var(--ink-2); line-height: 1;
}
.sd-notes > span { display: grid; place-items: center; }
.sd-cell.sd-nsame .sd-notes > span:not(:empty) { color: var(--ink-3); }
.sd-hassum .sd-notes { top: 24%; font-size: calc(var(--cell) / var(--nc) * 0.6); }

/* killer: gabbie tratteggiate e somma nell'angolo */
.sd-cage::after {
  content: ''; position: absolute; pointer-events: none; z-index: 1;
  top: var(--ct, -1px); right: var(--cr, -1px); bottom: var(--cb, -1px); left: var(--cl, -1px);
  border: 0 dashed var(--ink-3);
}
.sd-cage.cg-t::after { --ct: 3px; border-top-width: 1.5px; }
.sd-cage.cg-r::after { --cr: 3px; border-right-width: 1.5px; }
.sd-cage.cg-b::after { --cb: 3px; border-bottom-width: 1.5px; }
.sd-cage.cg-l::after { --cl: 3px; border-left-width: 1.5px; }
.sd-sum {
  position: absolute; top: 4px; left: 4px; z-index: 3; padding: 0 2px; border-radius: 3px;
  font-style: normal; font-weight: 600; font-size: max(9px, calc(var(--cell) * 0.21)); line-height: 1.05;
  color: var(--ink-2); background: var(--sheet, transparent);
}
.sd-killer .sd-cell { font-size: calc(var(--cell) * 0.5); }
.sd-killer .sd-cell { padding-top: calc(var(--cell) * 0.12); }

/* tastierino */
.sd-pad { --n: 9; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; }
.sd-key {
  position: relative; height: 52px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--fill-2); color: var(--ink); font: inherit; font-size: 22px; font-weight: 600;
  box-shadow: inset 0 0 0 0.5px var(--stroke); touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, transform 0.15s;
}
.sd-key:hover { background: var(--fill-3); }
.sd-key:active { transform: scale(0.94); }
.sd-key small { position: absolute; right: 5px; bottom: 3px; font-size: 10px; font-weight: 500; color: var(--ink-3); }
.sd-key.full { opacity: 0.35; }
@container (min-width: 760px) {
  .sd-pad { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .sd-key { height: 58px; font-size: 24px; }
}

.sd-tools { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sd-tool {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 54px; padding: 6px 2px; border: 0; border-radius: 12px; cursor: pointer;
  background: transparent; color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 500;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background 0.15s, color 0.15s;
}
.sd-tool svg { width: 22px; height: 22px; }
.sd-tool:hover { background: var(--fill-2); color: var(--ink); }
.sd-tool.on { background: color-mix(in srgb, var(--sd-acc) 18%, transparent); color: var(--sd-acc); }
.sd-tool span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.sd-live { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.sd-live input { width: 18px; height: 18px; accent-color: var(--sd-acc); margin: 0; }
.sd-side .lg-msg { margin: 0; }
.sd-side .lg-help { margin: 0; font-size: 13px; }

@media (max-width: 640px) {
  .sd-wrap .lg-bar { gap: 6px; }
  .sd-wrap .lg-bar .seg button { padding-left: 10px; padding-right: 10px; }
  .sd-key { height: 46px; font-size: 20px; border-radius: 10px; }
  .sd-pad { gap: 5px; }
  .sd-sum { top: 2px; left: 2px; }
  .sd-cage.cg-t::after { --ct: 2px; } .sd-cage.cg-r::after { --cr: 2px; }
  .sd-cage.cg-b::after { --cb: 2px; } .sd-cage.cg-l::after { --cl: 2px; }
}