/* 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; }
/* Hidato board */
.hd-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) * 56px); border: 2px solid var(--gp-ink); background: var(--gp-paper); }
.hd-grid input { position: relative; z-index: 2; width: 100%; aspect-ratio: 1; min-height: 0; padding: 0; text-align: center; border-radius: 0; background: transparent; color: var(--gp-ink);
  border: 0; border-right: 1px solid var(--gp-thin); border-bottom: 1px solid var(--gp-thin); font: 600 clamp(12px, 3.6vw, 18px) var(--mono); caret-color: var(--gp-sel); }
.hd-grid input.sol { color: #6a6a6a; font-weight: 400; }
.hd-grid input.blk { background: #2b2b2b; cursor: pointer; }
.hd-grid input.diff { background: #ffe08a; }
.hd-grid input.end { box-shadow: inset 0 0 0 3px #6a6a6a; }
.hd-grid input:focus { box-shadow: inset 0 0 0 2px var(--gp-sel); }
.hd-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.hd-run { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); margin-top: 12px; }