/* Puzzles kit: logic grids, sliding tiles, jigsaws, balances, coins, routes and mazes. Colours from app tokens. */
.pz { display: grid; gap: 14px; justify-items: center; --cell: 52px; }
.pz.locked { pointer-events: none; }
.pz-bar { display: flex; align-items: center; gap: 10px; width: min(100%, 460px); }
.pz-grow { flex: 1; }
.pz-count { font: 750 16px var(--round); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pz-count.over { color: var(--soft-red); }
.pz-tool { min-width: 44px; min-height: 44px; border-radius: 14px; border: 0; background: var(--surface-2); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.pz-tool .ic { width: 22px; height: 22px; }
.pz-tool.big { min-width: 56px; min-height: 56px; border-radius: 18px; }
.pz-tool:active { transform: scale(.95); }
.pz-seg { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: var(--surface-2); width: min(100%, 460px); }
.pz-seg[hidden] { display: none; }
.pz-segbtn { flex: 1; min-height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-2); font: 700 16px var(--font); cursor: pointer; }
.pz-segbtn.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* svg pictures */
.pz-svg { color: var(--ink); max-width: 100%; height: auto; }
.pz-t { font: 700 15px var(--round); fill: var(--ink); } .pz-t.sm { font-size: 13px; } .pz-t.big { font-size: 26px; font-weight: 800; }
.pz-t.nl { fill: var(--ink); pointer-events: none; }
.pz-scell { fill: var(--surface); stroke: var(--line); stroke-width: 2; } .pz-scell.on { fill: var(--accent-soft); stroke: var(--accent); }
.pz-tick { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.pz-tray { fill: var(--surface-2); }
.pz-stile.r0 { fill: #F6E1B4; } .pz-stile.r1 { fill: #D8E7F4; } .pz-stile.r2 { fill: #DDEFE0; }
.pz-tilesvg .pz-t { fill: #2A3033; }
.pz-jigbg { fill: #F3E9D2; } .pz-cut { stroke: var(--surface); stroke-width: 1.5; }
.pz-str { stroke: var(--ink-3); stroke-width: 2; fill: none; } .pz-sdish { fill: var(--surface-3); stroke: var(--ink-3); stroke-width: 2; }
.pz-spost { stroke: var(--ink-2); stroke-width: 6; stroke-linecap: round; fill: none; } .pz-beamline { stroke: var(--ink-2); stroke-width: 7; stroke-linecap: round; } .pz-pivot { fill: var(--sun); }
.pz-wtbox { fill: #8E9AA0; } .pz-wtbox.x { fill: var(--sun); } .pz-scalesvg .pz-t { fill: #1E2427; }
.pz-edge { stroke: var(--ink-3); stroke-width: 4; stroke-linecap: round; opacity: .55; } .pz-edge.on { stroke: var(--accent); opacity: 1; stroke-width: 7; }
.pz-node { fill: var(--surface); stroke: var(--ink-2); stroke-width: 3; } .pz-node.on { fill: var(--accent); stroke: var(--accent); }
.pz-node.start { stroke: var(--sun); stroke-width: 6; } .pz-node.end { stroke: var(--berry); stroke-width: 6; }
.pz-node.last { fill: var(--sun); stroke: var(--ink); } .pz-node.odd { stroke-dasharray: 5 4; stroke: var(--berry); stroke-width: 4; }
.pz-node.on + .pz-t.nl { fill: var(--accent-ink); }
.pz-wpill { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.pz-trail { fill: none; stroke: var(--sun); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 10; }
.pz-mazebg { fill: var(--surface); } .pz-wall { stroke: var(--ink-2); stroke-width: 6; stroke-linecap: round; fill: none; }
.pz-guide { fill: var(--ink-3); opacity: .6; }
.pz-mazesvg .pz-trail { stroke: var(--accent); stroke-width: 10; stroke-dasharray: none; opacity: .35; }
.step-vis > .vis.pz-svg { max-height: 280px; } .step-vis > .pz-graphsvg, .step-vis > .pz-scalesvg { width: min(100%, 460px); } .step-vis > .pz-mazesvg { width: min(100%, 300px); }
.step-vis > .pz-gridsvg { width: min(100%, 520px); } .step-vis > .pz-tilesvg { width: min(70%, 240px); } .step-vis > .pz-jigsvg { width: min(70%, 220px); }
.fb-vis .pz-svg { max-height: 150px; }

/* logic grid */
.pz-clues { margin: 0; padding: 0 0 0 22px; width: min(100%, 560px); display: grid; gap: 6px; font-size: 17px; color: var(--ink); }
.pz-clue { cursor: pointer; padding: 4px 2px; line-height: 1.35; }
.pz-clue.done { color: var(--ink-3); text-decoration: line-through; }
.pz-clues.pics { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pz-clues.pics .pz-clue { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }
.pz-clues.pics .pz-pic { width: 64px; height: 64px; }
.pz-rel { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.pz-rel .ic { width: 24px; height: 24px; stroke-width: 3; } .pz-rel.yes { color: var(--good); background: var(--good-bg); } .pz-rel.no { color: var(--soft-red); background: var(--surface-2); }
.pz-grids { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 24px; width: 100%; }
.pz-gbox { display: grid; gap: 6px; justify-items: start; }
.pz-ghead { margin: 0; font: 750 15px var(--round); color: var(--ink-2); }
.pz-g { display: grid; gap: 4px; align-items: center; }
.pz-ch, .pz-rh { font: 650 13px var(--font); color: var(--ink-2); text-align: center; overflow-wrap: normal; word-break: keep-all; line-height: 1.1; }
.pz-ch { align-self: end; padding-bottom: 2px; } .pz-rh { text-align: right; padding-right: 6px; font-size: 15px; color: var(--ink); }
.pz-ch.pic, .pz-rh.pic { display: grid; place-items: center; padding: 0; } .pz-ch .pz-pic, .pz-rh .pz-pic { width: 40px; height: 40px; }
.pz-cell { width: var(--cell); height: var(--cell); border-radius: 10px; border: 2px solid var(--line); background: var(--surface); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; padding: 0; }
.pz-cell .ic { width: 26px; height: 26px; }
.pz-cell[data-s="x"] { color: var(--ink-3); background: var(--surface-2); } .pz-cell.auto { color: var(--ink-3); opacity: .6; }
.pz-cell[data-s="y"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } .pz-cell[data-s="y"] .ic { stroke-width: 3; }
.pz-lg.pre { --cell: 76px; } .pz-lg.pre .pz-ch .pz-pic, .pz-lg.pre .pz-rh .pz-pic { width: 64px; height: 64px; } .pz-lg.pre .pz-cell .ic { width: 40px; height: 40px; }
@media (max-width: 420px) { .pz { --cell: 46px; } .pz-lg.pre { --cell: 68px; } .pz-rh { font-size: 14px; } }

/* sliding tiles */
.pz-board { position: relative; width: min(100%, calc(var(--w) * 92px)); border-radius: 18px; background: var(--surface-2); padding: 6px; touch-action: manipulation; box-sizing: border-box; }
.pz-board:focus-visible { outline: 3px solid var(--accent); }
.pz-board::before { content: ""; display: block; }
.pz-tile { position: absolute; left: 6px; top: 6px; width: calc((100% - 12px) / var(--w)); height: calc((100% - 12px) / var(--h)); border: 0; padding: 4px; background: transparent; transition: transform .16s ease; cursor: pointer; }
.pz-tile span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 14px; font: 800 30px var(--round); color: #2A3033; box-shadow: 0 3px 0 rgba(0, 0, 0, .12); }
.pz-tile.r0 span { background: #F6E1B4; } .pz-tile.r1 span { background: #D8E7F4; } .pz-tile.r2 span { background: #DDEFE0; }
.pz-tile.home span { box-shadow: 0 3px 0 rgba(0, 0, 0, .12), inset 0 0 0 3px rgba(31, 111, 104, .35); }
.pz-tile.nudge span { animation: pz-nudge .25s; }
.pz-sl.solved .pz-board { box-shadow: 0 0 0 3px var(--good); }
@keyframes pz-nudge { 30% { transform: translateX(-4px); } 70% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .pz-tile { transition: none; } }

/* jigsaw */
.pz-jig { --F: min(300px, 78vw); --pw: calc(var(--F) / var(--cols)); --ph: calc(var(--F) / var(--rows)); }
.pz-frame { position: relative; display: grid; gap: 0; border-radius: 16px; outline: 3px dashed var(--line); outline-offset: 4px; background: var(--surface-2); }
.pz-ghost { position: absolute; inset: 0; opacity: .22; pointer-events: none; } .pz-ghost svg { width: 100%; height: 100%; }
.pz-slot { width: var(--pw); height: var(--ph); position: relative; }
.pz-slot.over { background: var(--accent-soft); }
.pz-traybox { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 10px; min-height: 64px; border-radius: 18px; background: var(--surface-2); width: min(100%, 520px); box-sizing: border-box; }
.pz-traybox.empty { background: transparent; min-height: 0; padding: 0; }
.pz-piece { width: var(--pw); height: var(--ph); border-radius: 6px; overflow: hidden; cursor: grab; touch-action: none; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); background: #F3E9D2; }
.pz-traybox .pz-piece { width: calc(var(--pw) * .82); height: calc(var(--ph) * .82); }
.pz-piece svg { width: 100%; height: 100%; display: block; }
.pz-slot .pz-piece { border-radius: 0; box-shadow: none; }
.pz-piece.picked { outline: 3px solid var(--sun); } .pz-piece.dragging { opacity: .3; }
.pz-piece.nope { animation: pz-nudge .3s; }
.pz-jig.whole .pz-frame { outline-color: var(--good); outline-style: solid; }
.drag-ghost.pz-piece { border-radius: 6px; }

/* balances */
.pz-scale { --t: 0; position: relative; width: min(100%, 420px); height: 210px; }
.pz-post { position: absolute; left: 50%; top: 34px; bottom: 6px; width: 8px; margin-left: -4px; border-radius: 4px; background: var(--ink-3); }
.pz-post::after { content: ""; position: absolute; left: -36px; right: -36px; bottom: -4px; height: 8px; border-radius: 4px; background: var(--ink-3); }
.pz-beam { position: absolute; left: 12%; right: 12%; top: 32px; height: 8px; border-radius: 4px; background: var(--ink-2); transform: rotate(calc(var(--t) * -9deg)); transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.pz-beam::after { content: ""; position: absolute; left: 50%; top: -5px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--sun); }
.pz-pan { position: absolute; top: 36px; width: 44%; height: 150px; display: flex; flex-direction: column; justify-content: flex-end; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.pz-pan.l { left: 0; transform: translateY(calc(var(--t) * 26px)); } .pz-pan.r { right: 0; transform: translateY(calc(var(--t) * -26px)); }
.pz-pan::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 40px; width: 2px; background: var(--ink-3); }
.pz-dish { position: relative; min-height: 64px; display: flex; flex-wrap: wrap-reverse; align-content: flex-start; justify-content: center; align-items: flex-end; gap: 4px; padding: 4px 6px 12px; border-bottom: 8px solid var(--ink-3); border-radius: 0 0 50% 50% / 0 0 22px 22px; }
.pz-dish .pz-pic { width: 76px; height: 76px; }
.pz-pan.over .pz-dish { background: var(--accent-soft); border-radius: 14px 14px 50% 50% / 14px 14px 22px 22px; }
.pz-scale.level .pz-beam::after { background: var(--good); }
@media (prefers-reduced-motion: reduce) { .pz-beam, .pz-pan { transition: none; } }
.pz-wt { min-width: 48px; min-height: 44px; padding: 0 8px; border-radius: 10px 10px 8px 8px; background: #8E9AA0; color: #FFFDF8; display: inline-grid; place-items: center; font: 800 15px var(--round); box-shadow: 0 2px 0 rgba(0, 0, 0, .18); user-select: none; }
.pz-wt.mv { cursor: grab; touch-action: none; background: #6F7D84; }
.pz-wt.box { background: var(--sun); color: #3A2A08; min-width: 46px; }
.pz-wt.picked { outline: 3px solid var(--sun); } .pz-wt.dragging { opacity: .3; }
.pz-totals { display: flex; justify-content: space-between; width: min(100%, 420px); font: 750 16px var(--round); color: var(--ink-2); padding: 0 12%; box-sizing: border-box; }
.pz-totals:empty { display: none; }
.pz-stepper { display: flex; align-items: center; gap: 14px; }
.pz-val { display: grid; justify-items: center; min-width: 110px; } .pz-val span { font-size: 13px; color: var(--ink-3); } .pz-val b { font: 800 28px var(--round); }
.pz-picks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: min(100%, 460px); } .pz-picks.n3 { grid-template-columns: repeat(3, 1fr); }
.pz-pickbtn { min-width: 0; min-height: 110px; border-radius: 24px; border: 2px solid var(--line); background: var(--surface); display: grid; place-items: center; cursor: pointer; }
.pz-pickbtn .pz-pic { width: 84px; height: 84px; }
.pz-pickbtn.sel { border-color: var(--accent); background: var(--accent-soft); } .pz-pickbtn.right { border-color: var(--good); background: var(--good-bg); }
.pz-coins { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: min(100%, 460px); min-height: 48px; }
.pz-coin { width: 48px; height: 48px; border-radius: 50%; border: 0; background: radial-gradient(circle at 35% 30%, #F7D27A, #D9A43A); color: #4A3510; font: 800 17px var(--round); box-shadow: 0 2px 0 #B88A2E; cursor: pointer; padding: 0; flex: none; }
.pz-dish .pz-coin { width: 40px; height: 40px; font-size: 15px; }
.pz-coin.real { opacity: .35; }
.pz-coin.pick { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--accent); }
.pz-bal.picking .pz-coin { animation: none; }
.pz-weigh { min-height: 48px; padding: 0 22px; border-radius: 14px; margin-left: auto; }
.pz-left { font: 700 15px var(--round); color: var(--ink-2); }
.pz-hist { margin: 0; padding: 0 0 0 22px; width: min(100%, 460px); display: grid; gap: 4px; font-size: 15px; color: var(--ink-2); }
.pz-hist:empty { display: none; }
.pz-hist li span { font-weight: 700; color: var(--ink); } .pz-hist li i { margin: 0 6px; font-style: normal; color: var(--ink-3); } .pz-hist li b { margin-left: 8px; font-weight: 650; }
.pz-bal.pre .pz-scale { height: 230px; } .pz-bal.pre .pz-pickbtn { min-height: 130px; } .pz-bal.pre .pz-pickbtn .pz-pic { width: min(100px, 90%); height: auto; aspect-ratio: 1; }

/* routes and mazes */
.pz-gboard { width: min(100%, 480px); touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
.pz-maze .pz-gboard { width: min(100%, calc(var(--mz, 1) * 360px)); }
.pz-gboard svg { width: 100%; height: auto; display: block; }
.pz-gboard.off { opacity: .45; }
.pz-bar[hidden] { display: none; }
.pz-path.complete .pz-graphsvg .pz-node.on { fill: var(--good); stroke: var(--good); }
.pz-path.revealed .pz-edge.on { stroke: var(--show); }
.t-pre .pz-path .pz-bar { display: none; }
/* narrow screens: column headings run upwards, as on a paper logic grid, so words never break */
@media (max-width: 520px) { .pz-ch:not(.pic) { writing-mode: vertical-rl; transform: rotate(180deg); justify-self: center; padding: 0 0 0 4px; text-align: left; white-space: nowrap; } }