/* 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; }
/* Pentomino board: piece colours are part of the puzzle */
.pt-count { font-size: 14px; color: var(--muted); align-self: center; }
.pt-grid { display: grid; grid-template-columns: repeat(var(--w), minmax(0, 1fr)); width: 100%; min-width: calc(var(--w) * 18px + 4px); max-width: calc(var(--w) * 46px); touch-action: none; }
.pt-c { aspect-ratio: 1; background: #ececea; border: 1px solid #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font: 600 clamp(9px, 2.6vw, 14px) var(--mono); color: rgba(0,0,0,.6); }
.pt-c.on { background: var(--gp-paper); box-shadow: inset 0 0 0 1px #9a9a9a; }
.pt-c.pc { box-shadow: none; border-color: transparent; }
.pt-c.bt { border-top: 2px solid #111; } .pt-c.bb { border-bottom: 2px solid #111; } .pt-c.bl { border-left: 2px solid #111; } .pt-c.br { border-right: 2px solid #111; }
.pt-nav { justify-content: space-between; }
.pt-run { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); margin-top: 12px; }