/* Picture Logic: the board is a 2 x 2 grid: corner, column clues, row clues, cells */
.pl-help { margin-top: 14px; }
.pl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.pl-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 12px; border: 2px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: inherit; cursor: pointer; font: 700 12px system-ui, sans-serif; }
.pl-item:hover { border-color: #67e8f9; }
.pl-item.is-done { border-color: rgba(74,222,128,.6); }
.pl-item svg { width: 52px; height: 52px; }
.pl-item small { font-size: 11px; }
.pl-q { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 8px; background: rgba(255,255,255,.08); font-size: 24px; }
.pl-wrap { width: 100%; max-width: 640px; margin: 0 auto; align-self: stretch; box-sizing: border-box; }
.pl-hud { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font: 800 15px system-ui, sans-serif; }
.pl-title { flex: 1; min-width: 0; }
.pl-tb { display: flex; gap: 6px; flex-shrink: 0; }
.pl-tb button { background: rgba(15,23,42,.7); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 6px 10px; font: 700 14px system-ui, sans-serif; cursor: pointer; }
/* the size comes from the space available; clue columns are as wide as they need */
.pl-board { --cell: min(calc((100vw - 56px - var(--mr) * 15px) / var(--n)), calc((100vh - 240px - var(--mc) * 15px) / var(--n)), 44px); display: grid; grid-template-columns: auto auto; justify-content: center; align-items: end; gap: 3px; --cf: clamp(9px, calc(var(--cell) * .52), 16px); user-select: none; -webkit-user-select: none; }
.pl-cols { display: grid; grid-template-columns: repeat(var(--n), var(--cell)); align-items: end; }
.pl-cc { display: flex; flex-direction: column; align-items: center; gap: 0; font: 800 var(--cf)/1.15 system-ui, sans-serif; padding-bottom: 2px; }
.pl-rows { display: grid; grid-template-rows: repeat(var(--n), var(--cell)); }
.pl-rc { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding-right: 4px; font: 800 var(--cf)/1 system-ui, sans-serif; }
.pl-cc.is-ok, .pl-rc.is-ok { color: #64748b; }
.pl-grid { display: grid; grid-template-columns: repeat(var(--n), var(--cell)); grid-auto-rows: var(--cell); background: #cbd5e1; border: 2px solid #475569; touch-action: none; }
.pl-cell { min-width: 0; padding: 0; border: 0; border-right: 1px solid #94a3b8; border-bottom: 1px solid #94a3b8; background: #f8fafc; color: #94a3b8; font: 700 calc(var(--cell) * .6)/1 system-ui, sans-serif; cursor: pointer; }
.pl-cell.is-v5 { border-right: 2px solid #475569; }
.pl-cell.is-h5 { border-bottom: 2px solid #475569; }
.pl-cell.is-fill { background: #1e293b; }
.pl-cell.is-flash { background: #fde047; }
.pl-cell:focus-visible { outline: 3px solid #67e8f9; outline-offset: -3px; }
.pl-board.is-done .pl-cell { border: 0; background: #f8fafc; color: transparent; transition: background .5s; }
.pl-board.is-done .pl-cell.is-fill { background: var(--fill); }
.pl-msg { min-height: 22px; margin: 8px 0; text-align: center; font-weight: 700; color: #fde047; }
.pl-btns { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.pl-btns .btn { min-height: 44px; padding-left: 14px; padding-right: 14px; }
.pl-pen { display: inline-flex; border-radius: 12px; overflow: hidden; border: 2px solid rgba(255,255,255,.25); }
.pl-pen button { min-height: 42px; padding: 0 12px; border: 0; background: transparent; color: inherit; font: 800 14px system-ui, sans-serif; cursor: pointer; }
.pl-pen button.is-on { background: #4dd9e2; color: #0f172a; }
.pl-res { padding: 10px; border-radius: 14px; background: rgba(15,23,42,.6); border: 1px solid rgba(255,255,255,.14); text-align: center; }
.pl-res h3 { margin: 0 0 4px; font-size: 22px; }
.pl-stars { font-size: 28px; letter-spacing: 3px; margin-bottom: 8px; }
/* Giant 20 x 20: squares never get too small to tap, so on a phone the board scrolls, with the clues kept in view. The Move pencil lets a finger scroll over the grid. */
.pl-scroll { overflow: auto; max-width: 100%; max-height: calc(100vh - 170px); -webkit-overflow-scrolling: touch; }
.pl-board[data-n="20"] { --cell: max(22px, min(calc((100vw - 56px - var(--mr) * 15px) / 20), calc((100vh - 240px - var(--mc) * 15px) / 20), 44px)); width: max-content; margin: 0 auto; }
.pl-board[data-n="20"] .pl-cols { position: sticky; top: 0; z-index: 2; background: #1a1c23; }
.pl-board[data-n="20"] .pl-rows { position: sticky; left: 0; z-index: 2; background: #1a1c23; }
.pl-board[data-n="20"] .pl-corner { position: sticky; top: 0; left: 0; z-index: 3; align-self: stretch; background: #1a1c23; }
.pl-board.is-move .pl-grid { touch-action: pan-x pan-y; }
.pl-board.is-move .pl-cell { cursor: grab; }