/* 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: #cfcfcf; --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-side .btn { flex: 1 1 auto; }
/* Skyscraper board: clue ring around a paper grid */
.sk-grid { display: grid; grid-template-columns: repeat(var(--m), minmax(0, 1fr)); width: 100%; min-width: calc(var(--m) * 24px + 4px); max-width: calc(var(--m) * 54px); gap: 0; }
.sk-grid input { width: 100%; aspect-ratio: 1; min-height: 0; padding: 0; text-align: center; font: 600 clamp(14px, 4.2vw, 22px) var(--mono); border-radius: 0; caret-color: var(--gp-sel); }
.sk-grid .clue { background: transparent; border: 0; color: var(--ink); font-weight: 500; }
.sk-grid .clue:focus { box-shadow: inset 0 0 0 2px var(--focus); border-radius: 6px; }
.sk-grid .cell { background: var(--gp-paper); color: var(--gp-ink); border: 1px solid var(--gp-thin); }
.sk-grid .cell.sol { color: #6a6a6a; font-weight: 400; }
.sk-grid .cell.diff { background: #ffe08a; }
.sk-grid .cell:focus { box-shadow: inset 0 0 0 2px var(--gp-sel); border-color: var(--gp-sel); }
.sk-grid .corner { aspect-ratio: 1; }
.sk-grid .bt { border-top: 2px solid var(--gp-ink); } .sk-grid .bb { border-bottom: 2px solid var(--gp-ink); }
.sk-grid .bl { border-left: 2px solid var(--gp-ink); } .sk-grid .br { border-right: 2px solid var(--gp-ink); }
.sk-run { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); margin-top: 12px; }