.puzzle-game{background:#fff;border:1px solid #e6daf3;border-radius:24px;padding:clamp(12px,2.5vw,26px);box-shadow:0 12px 35px #45236712}.puzzle-topbar{display:flex;justify-content:space-between;align-items:start;gap:16px;flex-wrap:wrap}.puzzle-topbar h2{margin:0 0 8px;color:#704090}.puzzle-level{margin-left:auto;display:grid;gap:6px;font-weight:800;color:#704090}.puzzle-level select{font:inherit;padding:10px 15px;border:2px solid #b697d6;border-radius:12px;background:white;color:#56327f;min-height:44px}.puzzle-actions{display:flex;gap:10px;flex-wrap:wrap;margin:15px 0}.puzzle-actions button{font:inherit;cursor:pointer}.puzzle-workspace{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:18px;align-items:start}.puzzle-board{position:relative;background:#f7f0ff;border:2px solid #b597cf;border-radius:12px;overflow:hidden;isolation:isolate}.puzzle-board>svg{display:block;width:100%;height:100%}.puzzle-slots{position:absolute;inset:0;display:grid}.puzzle-slot{background:transparent;border:0;padding:0;cursor:pointer;min-width:0;min-height:0}.puzzle-slot:focus-visible{outline:3px solid #6b31ae;outline-offset:-4px;background:#d6b7ff44}.puzzle-slot:disabled{cursor:default}.puzzle-board .puzzle-outline{fill:none;stroke:#b39bcc;stroke-width:.7;stroke-dasharray:3 3}.puzzle-placed{stroke:#fff;stroke-width:.6}.puzzle-preview{margin:0;background:#fff5ce;border-radius:12px;padding:9px}.puzzle-preview img{display:block;width:100%;height:auto;border-radius:8px}.puzzle-preview figcaption{font-size:13px;line-height:1.5;margin-top:7px;color:#64516e}.puzzle-preview[hidden]{display:none}.puzzle-feedback{min-height:1.6em;line-height:1.6;color:#704090;font-weight:800}.puzzle-tray{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;padding:12px;background:linear-gradient(120deg,#fff0cf,#f5e3ff,#d9f7ee);border-radius:14px;max-height:430px;overflow-y:auto}.puzzle-piece{position:relative;aspect-ratio:1;border:2px solid transparent;background:#ffffffb8;border-radius:10px;cursor:grab;padding:0;touch-action:none;min-width:0}.puzzle-piece svg{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 1px #57386d44)}.puzzle-piece[aria-pressed=true]{border-color:#7d3bb4;background:#ead9ff;box-shadow:0 0 0 2px #cdb5e4}.puzzle-piece:focus-visible{outline:3px solid #6738a9;outline-offset:2px}.puzzle-piece[hidden]{display:none}.puzzle-ghost{position:fixed;z-index:9999;pointer-events:none;width:95px;height:95px;filter:drop-shadow(0 4px 6px #0004)}.puzzle-result{padding:20px;text-align:center;background:linear-gradient(120deg,#fff0b7,#f8dfff,#dbf9e8);border-radius:16px}.puzzle-result[hidden]{display:none}.puzzle-result h2{color:#704090}.puzzle-card img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}.puzzle-help{line-height:1.7;color:#66516f}.puzzle-game progress{width:100%;height:12px;accent-color:#9a56ca}.puzzle-preview-toggle[aria-pressed=false]{opacity:.8}
@media(max-width:760px){.puzzle-workspace{grid-template-columns:minmax(0,1fr)}.puzzle-preview{width:130px}.puzzle-tray{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:5px;padding:7px;max-height:330px}.puzzle-level{font-size:14px}.puzzle-topbar h2{font-size:21px}.puzzle-game{padding:12px}.puzzle-actions .btn{font-size:13px;padding:10px}.puzzle-help{font-size:14px}}

/* Keep the picture and the piece tray together on wide screens. */
.puzzle-workspace{grid-template-columns:minmax(0,1fr) 260px}.puzzle-preview{width:130px;margin:0 auto}.puzzle-side{min-width:0}.puzzle-side h3{font-size:16px;color:#704090;margin:12px 0 8px}.puzzle-tray{grid-template-columns:repeat(3,minmax(0,1fr));max-height:310px;padding:6px;gap:5px}.puzzle-board{align-self:start}.puzzle-help{margin:10px 0 16px}.puzzle-ghost svg{width:100%;height:100%;display:block}
@media(max-width:760px){.puzzle-workspace{grid-template-columns:minmax(0,1fr)}.puzzle-preview{float:right;width:100px;margin:0 0 10px 10px}.puzzle-side h3{margin-top:0}.puzzle-tray{clear:both;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));max-height:330px}.puzzle-topbar{gap:8px}}

/* The native dialog keeps focus inside the picture and leaves the round intact. */
.puzzle-preview-open{display:block;width:100%;padding:0;border:0;background:transparent;border-radius:8px;cursor:zoom-in}.puzzle-preview-open:focus-visible{outline:3px solid #7136ae;outline-offset:4px}.puzzle-preview figcaption span{font-size:12px;font-weight:bold;color:#7136ae}.puzzle-lightbox{box-sizing:border-box;width:min(1100px,94vw);max-width:94vw;max-height:92svh;padding:18px;border:2px solid #d5b8ed;border-radius:20px;background:#fffaf2;color:#654078;box-shadow:0 20px 70px #27103c55;overflow:auto}.puzzle-lightbox[open]{display:flex;flex-direction:column;gap:12px}.puzzle-lightbox::backdrop{background:#24123cba;backdrop-filter:blur(4px)}.puzzle-lightbox-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-shrink:0}.puzzle-lightbox-heading h2{font-size:clamp(18px,3vw,26px);margin:0}.puzzle-lightbox-close{flex-shrink:0;width:44px;height:44px;border:0;border-radius:50%;background:#eee0fa;color:#603184;font:32px/1 sans-serif;cursor:pointer}.puzzle-lightbox-close:hover{background:#e1caf5}.puzzle-lightbox-close:focus-visible{outline:3px solid #7136ae;outline-offset:3px}.puzzle-lightbox>img{display:block;flex-shrink:1;min-height:0;width:100%;height:auto;max-height:calc(92svh - 160px);object-fit:contain;border-radius:10px}.puzzle-lightbox>p{margin:0;text-align:center;font-size:14px;line-height:1.5;flex-shrink:0}
@media(max-width:600px){.puzzle-lightbox{padding:12px;border-radius:14px}.puzzle-lightbox>p{font-size:12px}}