/* ============================================================
   Kakuro — tablero de sumas cruzadas.
   Todo el tamaño sale de --cell (lo calcula kakuro.js según el espacio
   disponible). Las casillas de pista son "negras" en el sentido del
   juego pero usan --surface-3 para leerse bien en claro y en oscuro;
   la diagonal separa la suma vertical (abajo a la izquierda) de la
   horizontal (arriba a la derecha).
   ============================================================ */
.kk-host { display: flex; justify-content: center; padding: 4px 0 8px; }
.kk { --cell: 44px; width: 100%; display: flex; justify-content: center; }
.kk-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }

.kk-board {
  display: grid;
  grid-template-columns: repeat(var(--w), var(--cell));
  grid-template-rows: repeat(var(--h), var(--cell));
  gap: 1px;
  background: var(--line-2);
  border: 2px solid var(--ink);
  border-radius: 6px;
  overflow: hidden;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.kk-board:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 40%, transparent); }

.kk-board { --kk-white: var(--surface); --kk-black: color-mix(in srgb, var(--ink) 9%, var(--surface-3)); --kk-diag: color-mix(in srgb, var(--ink) 22%, var(--surface-3)); }
/* en oscuro las casillas de pista van MÁS oscuras que las de jugar */
:root[data-theme="dark"] .kk-board { --kk-white: var(--surface-3); --kk-black: var(--bg); --kk-diag: var(--line-2); }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .kk-board { --kk-white: var(--surface-3); --kk-black: var(--bg); --kk-diag: var(--line-2); }
}
.kk-cell { position: relative; background: var(--kk-white); }
.kk-black { background: var(--kk-black); }
.kk-clue {
  background:
    linear-gradient(to top right, transparent calc(50% - .7px), var(--kk-diag) calc(50% - .7px),
                    var(--kk-diag) calc(50% + .7px), transparent calc(50% + .7px)),
    var(--kk-black);
}
.kk-sum {
  position: absolute; font-family: var(--font-num); font-weight: 500;
  font-size: calc(var(--cell) * .3); line-height: 1; letter-spacing: -.03em;
  color: var(--ink); font-variant-numeric: tabular-nums;
  transition: color var(--dur);
}
.kk-sum-r { top: calc(var(--cell) * .1); right: calc(var(--cell) * .09); }
.kk-sum-d { bottom: calc(var(--cell) * .09); left: calc(var(--cell) * .09); }
.kk-sum.is-ok { color: var(--muted); opacity: .7; }
.kk-sum.is-active { color: var(--sel-ink); font-weight: 700; opacity: 1; }
.kk-sum.is-bad { color: var(--danger); opacity: 1; }

/* casillas blancas */
.kk-white {
  display: grid; place-items: center; cursor: pointer;
  transition: background-color .1s ease;
}
.kk-v {
  font-family: var(--font-ui); font-weight: 600; line-height: 1;
  font-size: calc(var(--cell) * .54); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.kk-notes {
  position: absolute; inset: 2px; display: none;
  grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  font-family: var(--font-num); font-style: normal;
  font-size: calc(var(--cell) * .24); line-height: 1; color: var(--muted);
}
.kk-notes i { display: grid; place-items: center; font-style: normal; visibility: hidden; }
.kk-notes i.on { visibility: visible; }
.kk-white.has-notes .kk-notes { display: grid; }

@media (hover: hover) {
  .kk-white:hover { background: color-mix(in srgb, var(--ink) 5%, var(--kk-white)); }
}
.kk-white.in-run { background: color-mix(in srgb, var(--sel) 13%, var(--kk-white)); }
.kk-white.is-cursor { background: color-mix(in srgb, var(--sel) 28%, var(--kk-white)); box-shadow: inset 0 0 0 2px var(--sel); z-index: 1; }
.kk.is-notes .kk-white.is-cursor { box-shadow: inset 0 0 0 2px var(--sel); background-image: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--sel) 12%, transparent) 5px 6px); }

/* conflictos evidentes (sin mirar la solución) */
.kk-white.is-dup .kk-v { color: var(--warn); }
.kk-white.is-dup { background: var(--warn-weak); }
.kk-white.is-dup.is-cursor { background: color-mix(in srgb, var(--warn) 22%, var(--surface)); }
.kk-white.is-bad { background: var(--danger-weak); }
.kk-white.is-bad.is-cursor { background: color-mix(in srgb, var(--danger) 22%, var(--surface)); }
/* "Comprobar": cifra que no va */
.kk-white.is-wrong .kk-v { color: var(--danger); }
.kk-white.is-wrong::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, transparent 70%, var(--danger) 70%, var(--danger) 78%, transparent 78%);
}
.kk-white.is-locked .kk-v { color: var(--sel-ink); }

/* combinaciones del bloque activo */
.kk-combos {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px;
  min-height: 22px; max-width: 100%;
  font-family: var(--font-num); font-size: var(--t-xs); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.kk-combo { display: inline-flex; gap: 8px; align-items: baseline; white-space: nowrap; }
.kk-combo b { font-weight: 600; color: var(--ink-2); }
.kk-combo.is-none { color: var(--danger); }

/* teclado numérico en pantalla */
.kk-pad {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px;
  width: min(100%, 540px);
}
.kk-key {
  height: 46px; min-width: 40px; padding: 0;
  display: grid; place-items: center;
  font-family: var(--font-ui); font-size: 1.15rem; font-weight: 500; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background var(--dur), border-color var(--dur), transform .06s ease;
}
.kk-key svg { width: 20px; height: 20px; color: var(--ink-2); }
@media (hover: hover) { .kk-key:hover { background: var(--surface-2); } }
.kk-key:active { background: var(--sel-weak); border-color: var(--sel); transform: translateY(1px); }
.kk-key:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.kk.is-notes .kk-key:not(.kk-key-erase) {
  font-family: var(--font-num); font-size: .92rem; color: var(--sel-ink);
  border-style: dashed; border-color: color-mix(in srgb, var(--sel) 55%, var(--line-2));
}
.kk.is-done .kk-pad, .kk.is-done .kk-combos { visibility: hidden; }

@media (max-width: 560px) {
  .kk-pad { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .kk-key { height: 52px; font-size: 1.25rem; }
}

/* resuelto: las cifras "asientan" en verde, una ola discreta */
.kk.is-done .kk-white { cursor: default; }
.kk.is-done .kk-v { color: var(--success); animation: kk-pop .45s var(--ease) both; }
.kk.is-done .kk-sum { color: var(--muted); }
@keyframes kk-pop { 40% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .kk.is-done .kk-v { animation: none; } }

.kk-help-note { font-size: var(--t-sm); color: var(--muted); margin: 4px 0 0; }
.kk-help-note kbd {
  font-family: var(--font-num); font-size: .8em; padding: 1px 5px;
  border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; background: var(--surface-2);
}