/* picture: styles for this game only (loaded after /css/core.css). */
.pl-wrap { width: 100%; display: flex; justify-content: center; overflow-x: auto; padding-bottom: 4px; }
.pl-board {
  --cs: 30px; --rowclue: 60px; --colclue: 60px;
  display: grid; grid-template-columns: var(--rowclue) repeat(var(--n), var(--cs)); grid-template-rows: var(--colclue) repeat(var(--n), var(--cs));
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.pl-corner { border-right: 2px solid var(--text); border-bottom: 2px solid var(--text); }
.pl-colclue, .pl-rowclue { display: flex; color: var(--text); font-weight: 700; font-size: calc(var(--cs) * .46); font-variant-numeric: tabular-nums; }
.pl-colclue { flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 4px; border-bottom: 2px solid var(--text); background: var(--surface-2); border-right: 1px solid var(--line); line-height: 1.15; }
.pl-rowclue { justify-content: flex-end; align-items: center; gap: calc(var(--cs) * .22); padding-right: 6px; border-right: 2px solid var(--text); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.pl-colclue.done, .pl-rowclue.done { color: var(--muted); opacity: .45; }
.pl-colclue.sep { border-right: 2px solid var(--text); }
.pl-rowclue.sep { border-bottom: 2px solid var(--text); }
.pl-cell { background: var(--surface); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; position: relative; transition: background .08s; }
.pl-cell.sep-r { border-right: 2px solid var(--text); }
.pl-cell.sep-b { border-bottom: 2px solid var(--text); }
.pl-cell.on { background: var(--text); }
.pl-cell.x::after { content: '×'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: calc(var(--cs) * .7); line-height: 1; }
.pl-cell.hinted { box-shadow: inset 0 0 0 2px var(--select); }
.pl-board.revealed .pl-cell { border-color: transparent; }
.pl-board.revealed .pl-cell.on { background: var(--select); animation: tilepop .3s ease both; }
.pl-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 6px; }
.pl-tools .btn { min-height: 44px; padding: 0 16px; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); gap: 4px; }
.sw { width: 16px; height: 16px; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.sw.fill { background: var(--text); }
.sw.mark { border: 1px solid currentColor; font-size: 14px; line-height: 1; }
.pl-board { padding: 6px; border-radius: 14px; background: var(--surface); box-shadow: var(--lift); }
.pl-cell { background: var(--slot); border-color: color-mix(in srgb, var(--line) 70%, transparent); }
.pl-cell.on { background: linear-gradient(180deg, #3B69DD, #2449B3); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .28), inset 0 -3px 0 rgba(0, 0, 0, .25); }
.pl-board.revealed .pl-cell.on { background: linear-gradient(180deg, #F6D06A, #E2AE2A); }