/* Board for the grid path puzzles. Cells are drawn by the games; the lines are an SVG layer on top. */
.pgrid { --n:5; position:relative; width:min(440px, 100%); aspect-ratio:1; display:grid; grid-template-columns:repeat(var(--n), 1fr); gap:0; touch-action:none; user-select:none; border:2px solid var(--line); border-radius:12px; background:var(--panel); overflow:hidden; }
.pgrid .cell { position:relative; display:grid; place-items:center; border:1px solid color-mix(in srgb, var(--line) 70%, transparent); font-weight:800; font-size:clamp(1rem, 5.4vw, 1.7rem); z-index:2; pointer-events:none; }
.pgrid .cell.cur { outline:3px solid var(--accent); outline-offset:-3px; }
.pgrid .lines { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.pgrid .ln { fill:none; stroke-width:.46; stroke-linecap:round; stroke-linejoin:round; opacity:.95; }
.pgrid:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.pgrid .dot { display:grid; place-items:center; width:72%; aspect-ratio:1; border-radius:50%; color:#fff; font-weight:850; text-shadow:0 1px 2px rgba(0,0,0,.5); box-shadow:0 2px 5px rgba(0,0,0,.3); z-index:3; }
.pgrid.won { border-color:#4ade80; }