/* Grid puzzle tool base (same look as the other grid pages). The board is paper: fixed colors in both themes. */
.gp { --gp-ink: #111; --gp-paper: #fff; --gp-thin: #bdbdbd; --gp-sel: #6d4aff; }
.gp-bar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin-bottom: 14px; }
.gp-bar select { width: auto; min-height: 40px; padding: 6px 34px 6px 12px; }
.gp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px; margin: 0 -4px; }
.gp-board { position: relative; margin: 0 auto; user-select: none; -webkit-user-select: none; }
.gp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gp-more { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.gp-note { font-size: 14px; color: var(--muted); margin: 10px 0 0; }
.gp-io { margin-top: 12px; } .gp-io textarea { font-family: var(--mono); font-size: 14px; }
.gp-side .btn { flex: 1 1 auto; }
/* Nurikabe board */
.nk-grid { display: grid; grid-template-columns: repeat(var(--w), minmax(0, 1fr)); width: 100%; min-width: calc(var(--w) * 28px + 4px); max-width: calc(var(--w) * 54px); border: 2px solid var(--gp-ink); outline: 1px solid #8a8a8a; background: var(--gp-paper); }
.nk-grid input { width: 100%; aspect-ratio: 1; min-height: 0; padding: 0; text-align: center; border-radius: 0; background: var(--gp-paper); color: var(--gp-ink);
  border: 0; border-right: 1px solid var(--gp-thin); border-bottom: 1px solid var(--gp-thin); font: 600 clamp(13px, 3.8vw, 19px) var(--mono); caret-color: var(--gp-sel); }
.nk-grid input.blk { background: #1d1d1d; border-color: #3a3a3a; }
.nk-grid input.dot { background-image: radial-gradient(circle, #9a9a9a 0 9%, transparent 11%); }
.nk-grid input.diff { box-shadow: inset 0 0 0 4px #e0b400; }
.nk-grid input:focus { box-shadow: inset 0 0 0 2px var(--gp-sel); }