.puzzle-preview{flex:1;min-height:0;display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:5vw;padding:3vh 2vw}.preview-copy h2{font-size:clamp(28px,4.3vw,82px);overflow-wrap:anywhere}.preview-copy>p{color:#bdced8;font-size:clamp(14px,1.3vw,24px);line-height:1.5;max-width:420px;margin:3vh 0}.preview-art{margin:0;display:flex;justify-content:center;align-items:center;min-height:0}.preview-art img{display:block;width:min(45vw,67vh);aspect-ratio:1;object-fit:contain;border:1px solid #e0c17c66}.cta:disabled{opacity:.55;cursor:wait}#image-status{min-height:1.5em;font-size:13px}
#puzzle-play{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;padding:2vh 1vw;gap:1.5vh}.puzzle-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.puzzle-top h2{font-size:clamp(22px,2.6vw,50px);margin:1vh 0}.puzzle-actions{display:flex;align-items:center;gap:3vw}.puzzle-progress{text-align:right}.puzzle-progress b{display:block;font-family:'Space Grotesk',sans-serif;font-size:clamp(20px,2vw,38px);color:#f0cc79}.puzzle-progress span{display:block;font-size:9px;letter-spacing:1px;margin-top:5px;color:#a8bdcb}.reference-toggle{border:1px solid #abc2cf66;background:transparent;color:#d6e2e8;border-radius:4px;padding:14px 18px;min-height:48px;font-size:11px;letter-spacing:1px;cursor:pointer}.puzzle-instruction{font-size:clamp(12px,1.1vw,20px);color:#b7cbd7;line-height:1.5;margin:0 0 1vh}.puzzle-layout{display:flex;align-items:flex-start;justify-content:center;gap:4vw;min-height:0}.board-label{font-size:9px;letter-spacing:2px;color:#a0bacb;display:block;margin-bottom:1.5vh;text-align:center}.assembly-column{width:min(42vw,57vh)}.tray-column{width:min(37vw,57vh)}
#puzzle-board{--grade:5;position:relative;width:100%;aspect-ratio:1;background:#1b3447;border-radius:3px;outline:1px solid #d9b96c8a;outline-offset:4px;overflow:hidden;touch-action:none;user-select:none}.jigsaw-slots,.jigsaw-placed{position:absolute;inset:0;width:100%;height:100%}.jigsaw-slots{display:grid;grid-template-columns:repeat(var(--grade),1fr);grid-template-rows:repeat(var(--grade),1fr)}.jigsaw-slot{background:transparent;border:0;border-radius:0;padding:0;min-width:0;min-height:0;cursor:pointer;touch-action:manipulation}.jigsaw-slot:focus-visible{outline:2px solid #f3d38c;outline-offset:-4px}.jigsaw-slot.drop-target{background:#f2d2941b;box-shadow:inset 0 0 0 2px #f2d29477}.jigsaw-slot.is-filled{cursor:default}.jigsaw-placed{pointer-events:none}.placed-piece{position:absolute;pointer-events:none}.placed-piece svg{display:block;width:100%;height:100%}.piece-outline{stroke:#152d3caa}#puzzle-tray{--grade:5;width:100%;aspect-ratio:1;display:grid;grid-template-columns:repeat(var(--grade),1fr);grid-template-rows:repeat(var(--grade),1fr);gap:2px;touch-action:none;user-select:none}.loose-piece{display:block;min-width:0;min-height:0;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:grab;touch-action:none;filter:drop-shadow(0 3px 2px #0004)}.loose-piece svg{display:block;width:100%;height:100%;pointer-events:none}.loose-piece .piece-outline{stroke:#d9e4e9cc;stroke-width:1.5}.loose-piece.is-selected .piece-outline{stroke:#f2ce79;stroke-width:4}.loose-piece.is-selected{filter:drop-shadow(0 0 3px #f2ce7944)}.loose-piece:focus-visible{outline:1px solid #d6b96c;outline-offset:-3px;border-radius:6px}.loose-piece.is-placed{visibility:hidden;pointer-events:none}.loose-piece.drag-origin{opacity:.25}.jigsaw-drag-ghost{position:fixed;z-index:100;pointer-events:none;transform:translate(-50%,-50%);filter:drop-shadow(0 7px 6px #0008)}.jigsaw-drag-ghost svg{width:100%;height:100%;display:block}.jigsaw-drag-ghost .piece-outline{stroke:#f4daa1;stroke-width:2}#puzzle-board.is-complete .piece-outline{stroke:transparent}#puzzle-board.is-complete{outline-color:#a6d6b6}#reference-dialog{border:1px solid #afc9d3;background:#10273e;color:#f5f0de;border-radius:6px;padding:16px;max-width:90vw;max-height:94vh;overflow:hidden;text-align:center}#reference-dialog::backdrop{background:#04101de0}#reference-dialog img{display:block;width:min(65vh,70vw);aspect-ratio:1;object-fit:contain;margin:0 auto 16px}#reference-dialog form{margin:0}.puzzle-preview:not([hidden]){animation:preview-in .35s ease-out}@keyframes preview-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-aspect-ratio:4/5){.puzzle-preview{grid-template-columns:1fr;grid-template-rows:auto auto;gap:2vh;padding:2vh 0;align-content:center;text-align:center}.preview-copy h2{font-size:clamp(24px,8vw,40px);margin:1vh 0}.preview-copy>p{font-size:13px;margin:1vh auto 2vh}.preview-art{grid-row:1}.preview-art img{width:min(80vw,42vh)}#image-status{margin:1vh 0 0}#puzzle-play{padding:1.5vh 0;gap:1vh}.puzzle-top h2{font-size:clamp(18px,5vw,25px)}.puzzle-top .eyebrow{font-size:7px;letter-spacing:.7px}.puzzle-progress b{font-size:19px}.puzzle-progress span{font-size:6px}.puzzle-actions{gap:10px}.reference-toggle{padding:10px 8px;font-size:8px;letter-spacing:.5px;min-height:44px}.puzzle-instruction{font-size:11px;line-height:1.4;margin:0 0 1vh}.puzzle-layout{flex-direction:column;align-items:center;gap:1.7vh}.assembly-column{width:min(77vw,30vh)}.tray-column{width:min(86vw,33vh)}.board-label{font-size:7px;letter-spacing:1px;margin-bottom:1vh}.loose-piece{filter:drop-shadow(0 2px 1px #0004)}}
@media(max-height:500px) and (min-aspect-ratio:4/5){.puzzle-preview{padding:2vh 0;gap:3vw}.preview-art img{width:60vh}.preview-copy h2{font-size:3.6vw}.preview-copy>p{font-size:12px;margin:2vh 0}.puzzle-top h2{font-size:21px;margin:.5vh 0}.puzzle-top .eyebrow{font-size:7px}.puzzle-progress b{font-size:20px}.puzzle-progress span{font-size:7px}.reference-toggle{min-height:40px;padding:8px 14px;font-size:9px}#puzzle-play{gap:.5vh;padding:.5vh 0}.puzzle-instruction{font-size:10px;margin:0 0 .5vh}.assembly-column,.tray-column{width:min(36vw,54vh)}.board-label{font-size:7px;margin-bottom:1vh}.puzzle-layout{gap:5vw}#reference-dialog img{width:60vh}}
@media(prefers-reduced-motion:reduce){.puzzle-preview:not([hidden]){animation:none}}

.timer-display.time-low b{color:#ef987b}@media(max-aspect-ratio:4/5){.puzzle-actions{gap:8px}.puzzle-progress span{max-width:64px;line-height:1.4}.puzzle-top h2{font-size:clamp(17px,4.3vw,23px)}.puzzle-progress b{font-size:17px}}
