/* Rocket Kakuro. Scoped to .kk; the shell (header, sheets, tools) is games/logic-kit/kit.css. */
.kk { --kk-blk: #0d1631; --kk-blk2: #080e20; --kk-clue: #eef3ff; --kk-diag: #33476e; --kk-grid: #050a17; --kk-white: #1d2d52; --kk-run: #284476; --kk-sel: #3a7fc2; --kk-hl: #5b4a1c; --kk-ink: #e8f0ff; --kk-user: #7fe3ff; --kk-cs: 40px; }
.kk.lk-light { --kk-blk: #3a4f78; --kk-blk2: #2b3c5e; --kk-clue: #ffffff; --kk-diag: #7487ab; --kk-grid: #23324f; --kk-white: #ffffff; --kk-run: #dcebff; --kk-sel: #9fd2ff; --kk-hl: #ffeaa8; --kk-ink: #13213f; --kk-user: #0a6fb0; }

.kk-board { position: absolute; inset: 0; box-sizing: border-box; display: grid; gap: 1px; padding: 1px; background: var(--kk-grid); border-radius: 10px; touch-action: none; cursor: pointer; outline: none; }
.kk-board:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent); }
.kk-c { position: relative; min-width: 0; min-height: 0; display: grid; place-items: center; line-height: 1; font-variant-numeric: tabular-nums; }
.kk-b { background: var(--kk-blk2); }
.kk-k { background: var(--kk-blk); overflow: hidden; }
.kk-k::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - 0.7px), var(--kk-diag) calc(50% - 0.7px), var(--kk-diag) calc(50% + 0.7px), transparent calc(50% + 0.7px)); }
.kk-k i { position: absolute; font-style: normal; font-weight: 800; color: var(--kk-clue); font-size: max(8.5px, calc(var(--kk-cs) * 0.34)); letter-spacing: -0.02em; pointer-events: none; transition: color .2s, text-shadow .2s; }
.kk-k i.a { top: 7%; right: 8%; }
.kk-k i.d { bottom: 7%; left: 8%; }
.kk-k i.on { color: var(--warm); }
.kk-k i.done { color: color-mix(in srgb, var(--kk-clue) 45%, transparent); }
.kk-k i.bad { color: var(--bad); }
.kk-w { background: var(--kk-white); color: var(--kk-ink); transition: background-color .12s ease; }
.kk-w.run { background: var(--kk-run); }
.kk-w.hl { background: var(--kk-hl); }
.kk-w.sel { background: var(--kk-sel); }
.kk-v { pointer-events: none; display: block; font-size: calc(var(--kk-cs) * 0.6); font-weight: 650; color: var(--kk-user); }
.kk-w.sel .kk-v { color: color-mix(in srgb, var(--kk-user) 40%, #fff); }
.lk-light .kk-w.sel .kk-v { color: #04365a; }
.kk-w.wrong .kk-v, .kk-w.clash .kk-v { color: var(--bad); }
.kk-w.wrong:not(.sel) { background: color-mix(in srgb, var(--bad) 16%, var(--kk-white)); }
.kk-w.clash::after { content: ''; position: absolute; top: 9%; right: 9%; width: 13%; height: 13%; max-width: 7px; max-height: 7px; border-radius: 50%; background: var(--bad); }
.kk-w.given .kk-v { color: var(--kk-ink); }
.kk-notes { position: absolute; inset: 6%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); pointer-events: none; font-size: max(7px, calc(var(--kk-cs) * 0.24)); font-weight: 650; color: var(--muted); }
.kk-notes i { font-style: normal; display: grid; place-items: center; border-radius: 3px; }
.kk-notes i.on { background: var(--accent); color: var(--accent-ink); }
.kk-board.kk-tiny .kk-notes { inset: 3%; }

/* combination helper */
.kk-helper { display: grid; gap: 4px; min-height: 52px; font-size: 13px; }
.kk-helper[hidden] { display: none; }
.kk-row { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 8px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line2); }
.kk-row > b { flex: none; font-size: 12px; font-weight: 750; color: var(--strong); white-space: nowrap; min-width: 8.6em; }
.kk-row > b small { color: var(--muted); font-weight: 650; }
.kk-combos { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1 1 auto; }
.kk-combos::-webkit-scrollbar { display: none; }
.kk-cb { flex: none; padding: 2px 7px; border-radius: 7px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--strong); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; white-space: nowrap; font-size: 12.5px; }
.kk-cb.out { background: transparent; color: var(--muted); text-decoration: line-through; opacity: 0.6; font-weight: 600; }
.kk-cb.more { background: transparent; color: var(--muted); font-weight: 650; }
.kk-must { flex: none; font-size: 11.5px; color: var(--warm); font-weight: 700; white-space: nowrap; }
.kk-helper-empty { display: grid; place-items: center; min-height: 52px; color: var(--muted); font-size: 12.5px; text-align: center; padding: 0 8px; }

/* number pad */
.kk-pad { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 5px; }
.kk-key { position: relative; display: grid; place-items: center; height: clamp(50px, calc(var(--lk-bs) * 0.15), 64px); min-width: 0; padding: 0; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); color: var(--strong); cursor: pointer; font-size: clamp(22px, calc(var(--lk-bs) * 0.066), 30px); font-weight: 650; touch-action: manipulation; transition: background-color .12s, border-color .12s, transform .1s, opacity .2s; }
@media (hover: hover) { .kk-key:hover:not(:disabled) { border-color: var(--accent); } }
.kk-key:active:not(:disabled) { transform: scale(0.94); }
.kk-key:disabled { cursor: default; opacity: 0.35; }
.kk-key.dim { opacity: 0.38; }
.kk-pad.notes .kk-key { border-style: dashed; border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent); font-size: clamp(17px, calc(var(--lk-bs) * 0.05), 24px); }
.lk-land .kk-pad { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 8px; flex: 1 1 auto; max-height: 360px; }
.lk-land .kk-key { height: auto; min-height: 42px; font-size: clamp(22px, calc(var(--lk-pw, 320px) * 0.09), 32px); }
.kk-mistakes.has { color: var(--bad); font-weight: 650; }
@media (max-width: 520px) { .kk-pad { gap: 4px; } .kk-key { border-radius: 10px; } }
@media (max-height: 500px) { .lk-land .kk-pad { gap: 5px; } .kk-helper { min-height: 0; } .lk-land .kk-row { padding: 2px 6px; } }