/* Sudoku — grille, cases et pavé numérique (le reste vient de carnet.css). */
.board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  aspect-ratio: 1;
  width: 100%;
  background: #FBFAF6;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.cell {
  position: relative;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline: none;
  font-family: var(--hand);
  font-size: clamp(28px, 8.4vw, 46px);
  font-weight: 600;
  line-height: 1;
  color: var(--pen);
}

.cell .d {
  position: relative;
  z-index: 1;
  display: inline-block;
  transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--r, 0deg));
}

.cell.given {
  font-family: var(--marker);
  font-weight: 400;
  font-size: clamp(24px, 7vw, 38px);
  color: var(--ink);
}

.cell::before {
  content: '';
  position: absolute;
  inset: 9%;
  border-radius: 38% 46% 34% 44% / 44% 34% 46% 38%;
  transform: rotate(-4deg);
  background: transparent;
}

.cell.peer::before { inset: 0; border-radius: 0; transform: none; background: rgba(14, 14, 12, .025); }

.cell.same::before { background: rgba(200, 255, 61, .45); }

.cell.sel::before  { background: rgba(200, 255, 61, .95); }

.cell:focus-visible::before { box-shadow: 0 0 0 2px var(--ink); }

.cell.error { color: var(--red-pen); }

.cell.error .d { text-decoration: underline wavy var(--red-pen) 2px; text-underline-offset: 4px; }

.cell.hinted .d { animation: pop .5s ease; }

.notes {
  position: absolute;
  inset: 3px;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  font-family: var(--hand);
  font-size: clamp(11px, 2.8vw, 17px);
  font-weight: 500;
  color: var(--pencil);
  line-height: 1;
}

.notes span { display: grid; place-items: center; }

.notes span.hl { color: var(--ink); font-weight: 700; }

.pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0;
}

.pad button {
  position: relative;
  aspect-ratio: 1.4;
  border: 2px solid var(--ink);
  border-radius: var(--box-a);
  background: #fff;
  font: 400 34px var(--marker);
  color: var(--ink);
  cursor: pointer;
}

.pad button:nth-child(even) { border-radius: var(--box-b); }

.pad button:active { background: var(--fluo); }

.pad button .left {
  position: absolute;
  right: 9px; bottom: 3px;
  font: 500 15px var(--hand);
  color: var(--pencil);
}

.pad button.done { opacity: .25; }

@media (max-width: 820px) {
  .pad { grid-template-columns: repeat(9, 1fr); gap: 4px; }
  .pad button { aspect-ratio: .78; font-size: 26px; border-radius: 12px 4px 14px 5px / 5px 14px 4px 12px; }
  .pad button:nth-child(even) { border-radius: 4px 13px 5px 12px / 12px 5px 13px 4px; }
  .pad button .left { right: 0; left: 0; bottom: 0; text-align: center; font-size: 13px; }
}