.kk-board {
  --n: 8;
  --kk-cell: calc(100cqw / var(--n));
  --kk-gap: max(2px, calc(var(--kk-cell) * .05));
  --kk-r: min(10px, calc(var(--kk-cell) * .18));
  --kk-white: #38383b;
  --kk-black: #0e0e0f;
  --kk-run: color-mix(in srgb, var(--game) 30%, #38383b);
  --kk-same: color-mix(in srgb, var(--game) 48%, #38383b);
  --kk-sel: var(--game);
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  grid-template-rows: repeat(var(--n), 1fr);
  gap: var(--kk-gap);
  color: #fff;
}

/* Black cells; clue cells are split by a diagonal: across sum top right, down sum bottom left. */
.kk-black { position: relative; min-width: 0; min-height: 0; border-radius: var(--kk-r); background: var(--kk-black); }
.kk-clue {
  background:
    linear-gradient(to top right, transparent calc(50% - .6px), rgba(255, 255, 255, .16) calc(50% - .6px), rgba(255, 255, 255, .16) calc(50% + .6px), transparent calc(50% + .6px)),
    #18181a;
}
.kk-sum {
  position: absolute; z-index: 1; pointer-events: none;
  font-family: var(--font); font-weight: 600; line-height: 1; letter-spacing: -.03em;
  font-size: max(8.5px, calc(var(--kk-cell) * .28)); color: rgba(255, 255, 255, .82);
  padding: 2px 3px; border-radius: 5px; transition: color .2s, background-color .2s;
}
.kk-ac { top: 7%; right: 6%; }
.kk-dn { bottom: 7%; left: 6%; }
.kk-sum.kk-hl { background: var(--game); color: #fff; }
.kk-sum.kk-ok { color: var(--good); }
.kk-sum.kk-hl.kk-ok { background: var(--good); color: #000; }
.kk-sum.kk-wrong, .kk-sum.kk-hl.kk-wrong { background: var(--danger); color: #fff; }

/* White cells. */
.kk-cell {
  position: relative; min-width: 0; min-height: 0; background: var(--kk-white); border-radius: var(--kk-r);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  cursor: pointer; transition: background-color .18s var(--ease-out);
}
.kk-cell.kk-run { background: var(--kk-run); }
.kk-cell.kk-same { background: var(--kk-same); }
.kk-cell.kk-sel { background: var(--kk-sel); }
@media (hover: hover) { .kk-cell:not(.kk-sel):hover { background: #48484c; } }
.kk-val {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
  font-family: var(--font); font-weight: 550; line-height: 1; letter-spacing: -0.03em;
  font-size: calc(var(--kk-cell) * .5); color: #fff;
}
.kk-cell.kk-pop .kk-val { animation: kk-pop .38s var(--ease-spring); }
@keyframes kk-pop { from { transform: scale(.55); opacity: .3; } to { transform: scale(1); opacity: 1; } }
.kk-cell.kk-bad .kk-val { color: var(--danger); }
.kk-cell.kk-bad::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; background: color-mix(in srgb, var(--danger) 18%, transparent);
}
.kk-cell.kk-run-wrong:not(.kk-bad)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--danger) 14%, transparent) 0 4px, transparent 4px 9px);
}
.kk-notes {
  position: absolute; inset: 5%; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr;
  font-family: var(--font); color: var(--muted); font-weight: 550; font-size: max(7px, calc(var(--kk-cell) * .23));
}
.kk-notes span { display: flex; align-items: center; justify-content: center; line-height: 1; }

/* Combination helper. */
.kk-help {
  display: flex; flex-direction: column; gap: 4px; min-height: 52px; justify-content: center;
  padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, .06); font-size: .82rem;
}
.kk-help-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kk-help-row b { font-family: var(--font); font-weight: 650; color: var(--accent); min-width: 3.1em; white-space: nowrap; }
.kk-help-len { color: var(--muted); font-weight: 500; white-space: nowrap; font-size: .76rem; }
.kk-help-sets { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.kk-combo {
  font-family: var(--font); font-weight: 550; letter-spacing: .08em; font-size: .78rem;
  padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff;
}
.kk-help-many { color: var(--muted); font-weight: 500; }
.kk-help-none { color: var(--danger); font-weight: 600; }
.kk-help-idle { color: var(--muted); font-weight: 550; justify-content: center; text-align: center; }

/* Number pad. */
.kk-pad { width: min(600px, 100cqw); display: flex; flex-direction: column; gap: 8px; user-select: none; -webkit-user-select: none; }
.kk-digits { display: grid; grid-template-columns: repeat(9, 1fr); gap: clamp(3px, 1cqw, 7px); }
.kk-key {
  min-width: 0; height: clamp(46px, 12cqw, 58px); padding: 0; border-radius: 12px; cursor: pointer;
  border: 0; background: rgba(255, 255, 255, .1); color: #fff; font: inherit;
  font-family: var(--font); font-size: clamp(1.1rem, 4.6cqw, 1.4rem); font-weight: 550; letter-spacing: -0.02em;
  touch-action: manipulation; transition: background-color .15s, transform .3s var(--ease-spring);
}
.kk-key:hover:not(:disabled) { background: rgba(255, 255, 255, .16); }
.kk-key:active:not(:disabled) { transform: scale(.9); transition-duration: .06s; }
.kk-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kk-act { padding: 9px 12px; touch-action: manipulation; }
.kk-act { background: rgba(255, 255, 255, .1); color: #fff; }
.kk-act:hover { background: rgba(255, 255, 255, .16); }
.kk-act.kk-on, .kk-act.kk-on:hover { background: #fff; color: #000; }
.kk-toggle { font-size: .68rem; font-weight: 650; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: var(--muted); }
.kk-act.kk-on .kk-toggle { background: var(--game); color: #fff; }
.kk-pad.kk-locked { opacity: .55; pointer-events: none; }

/* Teaching hints: the run(s) that explain it, the cells that justify it, the target cell. */
.kk-cell.kk-hint-area { background: color-mix(in srgb, var(--game) 26%, #38383b); }
.kk-cell.kk-hint-focus { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }
.kk-cell.kk-hint-target { z-index: 1; box-shadow: inset 0 0 0 3px #fff; animation: kk-hint-pulse 1.1s ease-in-out infinite; }
.kk-cell.kk-hint-target.kk-hint-warn { box-shadow: inset 0 0 0 3px var(--danger); animation-name: kk-hint-pulse-warn; }
@keyframes kk-hint-pulse { 50% { background-color: color-mix(in srgb, var(--game) 55%, #38383b); } }
@keyframes kk-hint-pulse-warn { 50% { background-color: color-mix(in srgb, var(--danger) 35%, #38383b); } }
@media (prefers-reduced-motion: reduce) { .kk-cell.kk-hint-target { animation: none; } }