/* Killer sudoku — grille, cages, cases et pavé numérique (le reste vient de carnet.css). */
.board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  grid-template-rows: repeat(9, minmax(0, 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; }
}

/* ---- Spécifique au killer ---- */
.head h1 { font-size: clamp(31px, 7.8vw, 58px); }

/* Chiffres un peu plus petits que le sudoku : la somme de la cage loge dans le coin. */
.cell { font-size: clamp(25px, 7.4vw, 42px); }
.cell.given { font-size: clamp(22px, 6.4vw, 35px); }
.cell .d { top: 3%; }

/* Cases de la même cage que la sélection : léger lavis de crayon bleu. */
.cell { -webkit-tap-highlight-color: transparent; min-width: 0; min-height: 0; }

.cell.incage::before { inset: 0; border-radius: 0; transform: none; background: rgba(31, 63, 168, .07); }
.cell.incage.peer::before { background: rgba(31, 63, 168, .09); }

/* Somme de la cage, écrite petit au crayon dans le coin haut-gauche. */
.cell .sum {
  position: absolute;
  top: 9%;
  left: 12%;
  z-index: 3;
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(15px, 4.1vw, 22px);
  line-height: 1;
  color: var(--ink);
  pointer-events: none;
}

/* Notes : à l'intérieur du pointillé ; sous la somme dans la case qui la porte. */
.notes { inset: 12% 11% 9%; font-size: clamp(10px, 2.5vw, 15px); }
/* Dans la case qui porte la somme, le chiffre glisse un peu vers le bas à droite. */
.cell.anchor .d { left: 11%; top: 13%; }
.cell.anchor .notes { inset: 35% 11% 4%; font-size: clamp(9px, 2.4vw, 14px); grid-template-rows: repeat(3, 1fr); }

.ink path.cage {
  stroke: var(--pencil);
  stroke-width: 2.4;
  stroke-dasharray: 7 6;
  stroke-linecap: butt;
  opacity: .9;
}

.cagehelp {
  min-height: 3.2em;
  margin: 10px 2px 0;
  font: 500 19px/1.25 var(--hand);
  color: var(--text-2);
  overflow-wrap: anywhere;
}

.cagehelp b { font-family: var(--marker); font-weight: 400; color: var(--ink); }

.cagehelp .combo { white-space: nowrap; }

.cagehelp .combo i { font-style: normal; color: var(--pen); font-weight: 700; }

.cagehelp .sep { color: var(--pencil); }

.cagehelp .warn { color: var(--red-pen); }

#loading p { font-size: 26px; }

@media (max-width: 820px) {
  .cagehelp { font-size: 18px; min-height: 2.6em; margin-top: 8px; }
}