/* =============================================================
   GAME: Kakuro
   ============================================================= */
.board-kakuro {
  --n: 8;
  --cell: min(calc((100vw - 74px) / var(--n)), 58px);
  --kk-glow: #ffb340;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.kk-grid {
  display: grid; grid-auto-rows: var(--cell); gap: 2px; padding: 5px; border-radius: 14px;
  background: linear-gradient(160deg, #3b2408, #1e1205);
  box-shadow: 0 0 0 2px var(--kk-glow), 0 0 28px rgba(255, 179, 64, .32), 0 12px 30px rgba(0, 0, 0, .35);
}
.kk-black {
  position: relative; border-radius: 4px;
  background: repeating-linear-gradient(135deg, #1a1006 0 5px, #160d05 5px 10px);
}
.kk-clue {
  background: linear-gradient(180deg, #3a260d, #2a1a08);
  box-shadow: inset 0 0 0 1px rgba(255, 179, 64, .25);
  overflow: hidden;
}
/* diagonal from top-left to bottom-right */
.kk-clue::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top right, transparent calc(50% - .8px), rgba(255, 179, 64, .55) calc(50% - .8px), rgba(255, 179, 64, .55) calc(50% + .8px), transparent calc(50% + .8px));
}
.kk-a, .kk-d {
  position: absolute; font: 800 calc(var(--cell) * .28) / 1 var(--font-body); color: #ffe2b0; font-variant-numeric: tabular-nums;
  transition: color .15s, text-shadow .15s;
}
.kk-a { top: 10%; right: 9%; }
.kk-d { bottom: 9%; left: 9%; }
.kk-a.kk-hot, .kk-d.kk-hot { color: #fff; text-shadow: 0 0 8px var(--kk-glow), 0 0 2px var(--kk-glow); }
.kk-a.kk-ok, .kk-d.kk-ok { color: #9c7a4a; }
.kk-a.kk-bad, .kk-d.kk-bad { color: var(--t-red); text-shadow: 0 0 8px rgba(255, 61, 127, .7); }

.kk-cell {
  position: relative; border: 0; padding: 0; margin: 0; cursor: pointer; border-radius: 4px;
  background: linear-gradient(180deg, #fff6e6, #f3e2c2) #f8ecd4; color: #6b3d00;
  box-shadow: inset 0 -2px 0 rgba(120, 70, 0, .18);
  font: 800 calc(var(--cell) * .54) / 1 var(--font-body); font-variant-numeric: tabular-nums;
  display: grid; place-items: center;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.kk-cell:hover { background: #fff0d2; }
.kk-cell:focus { outline: none; }
.kk-cell:focus-visible { box-shadow: inset 0 0 0 3px var(--focus); }
.kk-cell.kk-user { color: #8a4b00; }
.kk-cell.kk-peer { background: linear-gradient(180deg, #ffe7b8, #f8d697) #fbdea8; }
.kk-cell.kk-same { background: #ffd58a; }
.kk-cell.kk-sel { background: linear-gradient(180deg, #ffc35c, #ffad2e) #ffb844; color: #3a1f00; box-shadow: inset 0 0 0 2px #fff7e0, 0 0 14px rgba(255, 179, 64, .8); z-index: 1; }
.kk-cell.kk-conflict { color: #e0144f; }
.kk-cell.kk-conflict::after { content: ""; position: absolute; inset: 3px; border-radius: 4px; box-shadow: inset 0 0 0 2px rgba(224, 20, 79, .7); }
.kk-cell.kk-pop .kk-v { display: inline-block; animation: kkpop .28s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes kkpop { from { transform: scale(.4); opacity: .2; } }
.kk-cell.kk-conflict.kk-pop .kk-v { animation: kkshake .32s ease; }
@keyframes kkshake { 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
.kk-cell.kk-flash { animation: kkflash .7s ease both; }
@keyframes kkflash { 35% { background: #ffb340; color: #fff; box-shadow: 0 0 16px rgba(255, 179, 64, .9); } }
.kk-cell.kk-done { animation: kkwin .7s ease both; }
.kk-cell.kk-done:nth-child(odd) { animation-delay: .08s; }
@keyframes kkwin { 50% { background: #ffb340; color: #fff; } }
.kk-cell:disabled { cursor: default; }
.kk-loading .kk-cell { background: #3a2a14; box-shadow: none; animation: kkload 1.2s ease-in-out infinite alternate; }
.kk-loading .kk-cell:nth-child(3n) { animation-delay: .3s; }
@keyframes kkload { to { background: #4d3818; } }
.kk-v:empty { display: none; }
.kk-notes {
  position: absolute; inset: 2px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  font: 700 calc(var(--cell) * .22) / 1 var(--font-body); color: #9a6a2a; pointer-events: none;
}
.kk-notes span { display: grid; place-items: center; visibility: hidden; border-radius: 3px; }
.kk-notes span.on { visibility: visible; }
.kk-notes span.hl { background: rgba(255, 150, 0, .35); color: #3a1f00; }

.kk-hint { margin: 0; min-height: 1.3em; font-size: .88rem; font-weight: 600; color: #ffd28a; text-align: center; }

/* number pad */
.kk-pad {
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; width: min(100%, 480px);
}
.kk-key, .kk-act {
  border: 0; cursor: pointer; border-radius: 10px; color: var(--ink);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 0 rgba(0, 0, 0, .35);
  font: 700 1.25rem/1 var(--font-body); transition: transform .1s, box-shadow .15s, background .15s;
}
.kk-key { min-height: 46px; padding: 0; }
.kk-key:hover, .kk-act:hover { box-shadow: inset 0 0 0 1px var(--kk-glow); }
.kk-key:active, .kk-act:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px var(--kk-glow), 0 0 0 rgba(0, 0, 0, .35); }
.kk-notes-on .kk-key { color: #ffd28a; font-size: .95rem; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255, 179, 64, .5); }
.kk-act {
  grid-column: span 4; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: .9rem; padding: 6px 10px;
}
.kk-notes-btn { grid-column: 1 / span 5; }
.kk-act[aria-pressed="true"] { background: linear-gradient(135deg, #e08a12, #b0650a); color: #fff; box-shadow: 0 0 0 1px var(--kk-glow), 0 0 16px rgba(255, 179, 64, .4); }
.kk-key:disabled, .kk-act:disabled { opacity: .4; cursor: default; transform: none; }
.kk-key:focus-visible, .kk-act:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.kk-pencil { width: 14px; height: 4px; background: currentColor; border-radius: 1px 0 0 1px; transform: rotate(-45deg); position: relative; }
.kk-pencil::after { content: ""; position: absolute; right: -4px; top: 0; border: 2px solid transparent; border-left: 4px solid currentColor; }
.kk-eraser { width: 13px; height: 8px; border: 2px solid currentColor; border-radius: 2px; transform: rotate(-30deg); background: linear-gradient(90deg, currentColor 40%, transparent 40%); }

.kk-clock { font-variant-numeric: tabular-nums; }
.kk-tag { font-size: .8rem; padding: 2px 10px; border-radius: 999px; background: rgba(255, 179, 64, .18); color: #ffd9a0; }
@media (prefers-reduced-motion: reduce) {
  .kk-cell, .kk-a, .kk-d { transition: none; }
}