/* Self-contained, untimed puzzles; every board action also has a real button. */
.puzzle-shell{--p-gold:#f3d58b;--p-sky:#a3cbd7;--p-ink:#20223c;--p-soft:#c7bfd8;clear:both}
.puzzle-heading{display:flex;gap:14px;align-items:center;margin:5px 0 15px}.puzzle-heading canvas{width:64px;height:64px;flex:none;border-radius:50%;border:2px solid #e3c77a}.puzzle-heading p{margin:0;font-size:13px}.puzzle-heading h2{margin:4px 0 7px;font-size:30px}
.puzzle-meta{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 13px;border-radius:13px;background:#ffffff08;font-size:13px}.puzzle-meta strong{color:var(--p-gold)}.puzzle-instruction{line-height:1.55;font-size:15px}.puzzle-board{margin:18px 0}.puzzle-status{min-height:3em;font-size:14px;line-height:1.5;color:var(--p-gold)!important}.puzzle-tools{display:flex;gap:7px;flex-wrap:wrap;margin:15px 0}.puzzle-tools button{min-height:44px}.puzzle-tools button.danger{border-color:#b39a92}.puzzle-win{padding:20px;border:1px solid #efd08c88;background:radial-gradient(ellipse at top,#efd08c25,transparent 85%);border-radius:20px;text-align:center}.puzzle-win .win-star{display:block;font-size:42px;color:var(--p-gold);line-height:1.2}.puzzle-win h3{margin:10px 0}.puzzle-win p{line-height:1.6}.puzzle-win button{margin:5px}
.puzzle-grid{display:grid;gap:6px;max-width:480px;margin:0 auto}.puzzle-grid button{padding:3px;min-width:0;min-height:44px;aspect-ratio:1;border-radius:12px;font-size:18px;font-weight:bold;position:relative}.puzzle-grid button:focus-visible{z-index:2;outline-offset:1px}.puzzle-grid button.hinted{outline:3px dashed #f6db99;outline-offset:1px;z-index:1}.puzzle-grid button.chosen{background:#f0d18d;color:#28253d;border-color:#fff0c9}.puzzle-grid button.path-cell{background:#587169;color:#fff6db;border-color:#bfda9c}.puzzle-grid button.path-head{box-shadow:inset 0 0 0 3px #f5db8a}.puzzle-grid button.blocked{background:#171b2f;border-color:#464762;color:#666d86;cursor:default}.puzzle-grid button.goal{border:2px solid var(--p-gold)}
.memory-card{background:linear-gradient(145deg,#4b4769,#302e4b);color:#f0d18d}.memory-card .memory-back{font-size:30px;font-weight:normal}.memory-card svg{width:68%;height:68%;max-width:62px;display:block;margin:auto}.memory-card.revealed{background:#ece2c8;color:#31314c;border-color:#f9ecca}.memory-card.matched{background:#304c47;color:#f3df9b;border-color:#a8c7a3}.memory-card .pair-check{position:absolute;top:3px;right:5px;font-size:12px;color:#e0f6c9}.memory-caption{text-align:center;font-size:13px!important;color:#c8c1d5!important}
.snake-legend{display:flex;gap:12px;justify-content:center;font-size:13px;margin:12px 0}.snake-legend span{padding:4px 8px;background:#ffffff09;border-radius:7px}.snake-grid button small{position:absolute;font-size:10px;bottom:2px;right:4px;font-weight:normal}.snake-grid button.path-cell:before{content:'';position:absolute;inset:7px;border:1px solid #e7e0b522;border-radius:50%;pointer-events:none}
.light-stage{position:relative;margin:10px auto;max-width:470px;background:#191d35;border:1px solid #78869c;border-radius:20px;overflow:hidden}.light-stage canvas{display:block;width:100%;height:auto}.light-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.light-controls button{padding:8px 4px;min-height:50px;font-size:13px}.light-controls button.hinted{outline:3px dashed #f6db99}.light-reading{font-size:13px;line-height:1.5}.light-key{display:flex;justify-content:center;gap:14px;font-size:12px;margin:10px 0;color:#c7cfe0}
.sum-question{background:linear-gradient(145deg,#534660,#302d48);border:1px solid #b7a0ba55;border-radius:24px;padding:24px 15px;text-align:center}.sum-question .sum-equation{font-size:clamp(27px,5vw,43px);font-weight:bold;color:#ffe6a3;letter-spacing:2px}.sum-question p{margin:0 0 10px;font-size:14px}.sum-answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}.sum-answers button{min-height:58px;font-size:22px}.sum-answers button.hinted{outline:3px dashed #f6db99}.sum-dots{display:flex;gap:6px;justify-content:center;margin:14px 0}.sum-dots span{width:13px;height:13px;border-radius:50%;background:#69617c}.sum-dots span.done{background:#ebd18c}.sum-dots span.current{outline:2px solid #b8d3d6;outline-offset:2px}
.quilt-pieces{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}.quilt-piece{display:flex;align-items:center;gap:7px;padding:6px 9px;min-height:55px}.quilt-piece svg{width:50px;height:42px;display:block}.quilt-piece[aria-pressed=true]{background:#62536c;border:2px solid #f3d58b}.quilt-piece.is-placed{opacity:.65}.quilt-grid button{border-radius:5px;background:#312f4a;border:1px dashed #9f94b177}.quilt-grid button.filled{border:1px solid #f7e1a477;background:var(--piece-color,#819a88);color:#21243a;box-shadow:inset 0 0 0 3px #ffffff18}.quilt-grid button.quilt-preview{background:#a8c2a355;outline:2px solid #bdd7a5;outline-offset:-2px}.quilt-grid button.preview-bad{background:#bf8a8055;outline:2px solid #d6a198;outline-offset:-2px}.quilt-controls{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}.quilt-controls button{min-height:44px}.quilt-legend{font-size:13px;line-height:1.5}.puzzle-confirm{padding:14px;border:1px solid #b9a7ad;border-radius:14px;background:#202238}.puzzle-confirm button{margin:4px}
@media(max-width:480px){.puzzle-heading{gap:9px}.puzzle-heading canvas{width:48px;height:48px}.puzzle-heading h2{font-size:25px}.puzzle-heading p{font-size:12px}.puzzle-grid{gap:4px}.puzzle-grid button{border-radius:8px;font-size:16px}.light-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.puzzle-meta{padding:8px;font-size:12px}.puzzle-tools{gap:5px}.puzzle-tools button{font-size:12px;padding:8px}.quilt-grid button{border-radius:4px}.quilt-piece{padding:5px;gap:3px;font-size:12px}.quilt-piece svg{width:40px}.memory-card .memory-back{font-size:23px}.sum-question{padding:20px 10px}}
@media(prefers-reduced-motion:reduce){.puzzle-shell *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.puzzle-board{overflow-x:auto;overscroll-behavior:contain}.puzzle-grid{min-width:max-content}.puzzle-grid button{width:100%}.puzzle-grid.memory-grid{min-width:0}
.light-stage{max-width:300px;margin:8px auto}.puzzle-instruction{margin:10px 0}.puzzle-heading{margin-bottom:10px}.light-reading{margin:8px 0}.light-controls button{min-height:44px}.puzzle-board:has(.light-stage){margin:10px 0}
/* The packing board stays five columns wide, including late levels, for touch. */
.quilt-grid{gap:3px;padding:10px;border:2px solid #d6bc8355;border-radius:16px;background:linear-gradient(145deg,#252b43,#4c425e);box-shadow:inset 0 0 18px #11162b;max-width:330px}
.quilt-grid button{min-height:44px;background:radial-gradient(circle,#b5a4cf22 1px,transparent 2px),#292c45;background-size:9px 9px;border-color:#d2bed34d}
.quilt-grid button.filled{background:linear-gradient(145deg,#ffffff20,#00000015),var(--piece-color);box-shadow:inset 0 0 0 2px #fff1bd55,inset 0 -4px 4px #33274b22}
.quilt-pieces{justify-content:center}.quilt-piece span{font-size:12px}.quilt-piece{border-radius:12px;background:linear-gradient(145deg,#44405c,#2c2e45)}
.quilt-controls{justify-content:center}.quilt-piece[aria-pressed=true]{box-shadow:0 0 0 2px #e9ca7d33}
.packing-levels{display:grid;grid-template-columns:repeat(5,minmax(44px,1fr));gap:9px;margin:18px 0}.packing-levels button{min-height:55px;font-size:20px}.packing-chapters{display:flex;gap:12px;justify-content:space-between}.packing-chapters button{min-height:44px}
@media(max-width:480px){.quilt-pieces{gap:5px}.quilt-piece{flex:0 0 calc(33.33% - 5px);flex-direction:column}.quilt-grid{padding:6px}.quilt-grid button{min-height:44px}.packing-levels{gap:5px}}

/* A number path must be visible as a whole, including its bottom row. */
dialog:has(.puzzle-shell[data-kind="snake"]){width:620px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:18px 22px;margin:auto}
.puzzle-shell[data-kind="snake"] .puzzle-character-line{display:none}
.puzzle-shell[data-kind="snake"] .puzzle-heading{margin:0 26px 8px 0;gap:9px}
.puzzle-shell[data-kind="snake"] .puzzle-heading h2{font-size:clamp(20px,3vw,28px);margin:3px 0}
.puzzle-shell[data-kind="snake"] .puzzle-heading canvas{width:44px;height:44px}
.puzzle-shell[data-kind="snake"] .puzzle-heading .eyebrow{font-size:10px;letter-spacing:1px}
.puzzle-shell[data-kind="snake"] .puzzle-instruction{font-size:14px;line-height:1.3;margin:8px 0}
.puzzle-shell[data-kind="snake"] .puzzle-board{margin:8px 0;overflow:visible}
.puzzle-grid.snake-grid{width:min(100%,max(244px,calc(100dvh - 300px)));max-width:400px;min-width:0;gap:4px}
.snake-grid button{min-height:40px;aspect-ratio:1;font-size:18px}
.puzzle-shell[data-kind="snake"] .snake-legend{margin:6px 0;font-size:12px}
.puzzle-shell[data-kind="snake"] .puzzle-status:empty{display:none}
.puzzle-shell[data-kind="snake"] .puzzle-status{min-height:0;margin:5px 0;font-size:12px}
.puzzle-shell[data-kind="snake"] .puzzle-tools{margin:7px 0;gap:5px}
.puzzle-shell[data-kind="snake"] .puzzle-tools button{padding:6px 9px;font-size:12px}
dialog:has(.puzzle-shell[data-kind="snake"]) .actions{margin-top:5px}
@media(max-height:600px) and (min-width:600px){
 dialog:has(.puzzle-shell[data-kind="snake"]){width:850px;padding:12px 18px}
 .puzzle-shell[data-kind="snake"]{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
 .puzzle-shell[data-kind="snake"] .puzzle-board{grid-column:2;grid-row:1 / span 6;margin:0}
 .puzzle-shell[data-kind="snake"] .snake-grid{width:min(100%,max(244px,calc(100dvh - 85px)))}
 .puzzle-shell[data-kind="snake"] .puzzle-tools{align-content:start}
}
@media(max-width:360px){
 dialog:has(.puzzle-shell[data-kind="snake"]){max-width:calc(100vw - 8px);width:calc(100vw - 8px);padding:12px 8px}
 .puzzle-shell[data-kind="snake"] .puzzle-heading canvas{display:none}
 .puzzle-shell[data-kind="snake"] .puzzle-heading h2{font-size:20px}
 .puzzle-shell[data-kind="snake"] .puzzle-heading .eyebrow{font-size:9px}
 .puzzle-shell[data-kind="snake"] .snake-grid{width:100%;min-width:0}
 .puzzle-shell[data-kind="snake"] .puzzle-tools button{font-size:11px;padding:5px 7px}
 .puzzle-shell[data-kind="snake"] .puzzle-meta{padding:5px 8px}
}
@media(max-height:650px){dialog:has(.puzzle-shell[data-kind="snake"]) .actions{display:none}}

.quilt-controls .quilt-turn{font-size:32px;line-height:1;min-width:60px;min-height:52px;padding:8px 16px}.quilt-recovery{padding:12px;border:1px solid #e9ca7d;border-radius:12px;background:#514256;margin:10px 0;font-size:15px}.quilt-recovery button{display:block;margin:8px auto 0}

/* Packing previews must never inherit the site's 130x110 illustration preview. */
dialog:has(.puzzle-shell[data-kind="quilt"]){width:760px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:16px 20px}
.puzzle-shell[data-kind="quilt"] .puzzle-character-line{display:none}
.puzzle-shell[data-kind="quilt"] .puzzle-heading{margin:0 24px 6px 0;gap:8px}
.puzzle-shell[data-kind="quilt"] .puzzle-heading canvas{width:36px;height:36px}
.puzzle-shell[data-kind="quilt"] .puzzle-heading h2{font-size:24px;margin:2px 0}
.puzzle-shell[data-kind="quilt"] .eyebrow{font-size:9px;letter-spacing:1px}
.puzzle-shell[data-kind="quilt"] .puzzle-meta{padding:5px 9px;font-size:12px}
.puzzle-shell[data-kind="quilt"] .puzzle-instruction{font-size:13px;line-height:1.3;margin:6px 0}
.puzzle-shell[data-kind="quilt"] .puzzle-board{margin:6px 0;overflow:visible}
.quilt-grid{min-width:0;width:min(100%,340px,calc((100dvh - 330px) * var(--quilt-cols) / var(--quilt-rows)));padding:5px;gap:3px}
.quilt-grid button{height:auto;min-height:0;min-width:0;aspect-ratio:1;font-size:14px}
.puzzle-shell[data-kind="quilt"] .quilt-pieces{gap:5px;margin:5px 0}
.puzzle-shell[data-kind="quilt"] .quilt-piece{min-height:44px;padding:4px;flex-direction:row;flex:0 0 auto;gap:4px;border-width:2px}
.puzzle-shell[data-kind="quilt"] .quilt-piece svg{width:32px;height:32px}
.puzzle-shell[data-kind="quilt"] .quilt-controls{margin:5px 0}
.puzzle-shell[data-kind="quilt"] .quilt-controls button{min-height:44px;padding:5px 12px}
.puzzle-shell[data-kind="quilt"] .quilt-legend{display:none}
.puzzle-shell[data-kind="quilt"] .puzzle-status{min-height:1.3em;line-height:1.3;font-size:12px;margin:5px 0}
.puzzle-shell[data-kind="quilt"] .puzzle-tools{gap:5px;margin:5px 0}
.puzzle-shell[data-kind="quilt"] .puzzle-tools button,.puzzle-shell[data-kind="quilt"] .puzzle-bottom button{font-size:12px;padding:5px 8px}
dialog:has(.puzzle-shell[data-kind="quilt"]) .actions{display:none}
@media(max-width:400px){dialog:has(.puzzle-shell[data-kind="quilt"]){padding:12px 8px}.quilt-piece span{font-size:11px}.puzzle-shell[data-kind="quilt"] .puzzle-heading canvas{display:none}}