.puzzle-panel{max-width:900px;margin:auto;text-align:center}.puzzle-top{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.puzzle-panel h2{margin:18px 0}.puzzle-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:start}.puzzle-board{position:relative;display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-template-rows:repeat(var(--rows),1fr);overflow:hidden;border:3px solid #cbb0e2;border-radius:18px;background:white;isolation:isolate}.puzzle-ghost{position:absolute;inset:0;width:100%;height:100%;opacity:.24;z-index:-1}.puzzle-slot{background:transparent;border:1px dashed #ae8cc8;padding:0;min-width:0;min-height:0;cursor:pointer;background-repeat:no-repeat;touch-action:manipulation}.puzzle-slot.filled{border:1px solid #ffffff88}.puzzle-board.complete{border-color:#94bb70;box-shadow:0 0 0 5px #e4f0d9}.puzzle-tray{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:10px;padding:12px;border-radius:18px;background:#f2e9fa;min-height:150px}.puzzle-piece{width:100%;aspect-ratio:var(--piece-ratio);border:2px solid white;border-radius:9px;background-repeat:no-repeat;box-shadow:0 3px 7px #59387926;cursor:grab;touch-action:none}.puzzle-piece[aria-pressed=true]{outline:4px solid #8752b5;outline-offset:1px}.puzzle-piece:disabled{visibility:hidden}.puzzle-piece.dragging{opacity:.55}.puzzle-slot:focus-visible,.puzzle-piece:focus-visible{outline:4px solid #e3a34d;outline-offset:-4px}.puzzle-panel .feedback{min-height:3em;margin-top:24px}.puzzle-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.puzzle-panel [hidden]{display:none!important}@media(max-width:650px){.puzzle-layout{grid-template-columns:1fr;gap:20px;max-width:440px;margin:auto}.puzzle-panel{padding:18px}.puzzle-tray{gap:12px}.puzzle-slot{min-height:44px}}@media(prefers-reduced-motion:no-preference){.puzzle-slot.filled{animation:puzzle-pop .25s ease-out}@keyframes puzzle-pop{from{opacity:.4}to{opacity:1}}}

.puzzle-layout{grid-template-columns:1fr;gap:14px;max-width:520px;margin:auto}.puzzle-layout>div>p{margin:0 0 10px}.puzzle-tray{grid-template-columns:repeat(4,minmax(0,1fr));min-height:0;gap:10px;padding:12px;max-width:380px;margin:auto}.puzzle-board{max-width:420px;margin:auto}.puzzle-piece{position:relative}.puzzle-piece::after{content:"";position:absolute;inset:-3px}.puzzle-panel .feedback{margin-top:18px}
@media(max-width:650px){.page-hero{padding:24px 0}.page-hero h1{font-size:2rem}.page-hero .lead{font-size:1rem}.section{padding:20px 0}.puzzle-panel{padding:14px}.puzzle-panel h2{font-size:1.5rem;margin:12px 0}.puzzle-layout{gap:12px}.puzzle-tray{gap:9px;padding:9px;max-width:320px}.puzzle-piece{border-radius:7px}.puzzle-top{gap:6px}.puzzle-panel .feedback{margin-top:14px;min-height:2.5em;font-size:.9rem}.puzzle-slot{min-height:0}}