.picture-puzzle-builder{padding:16px;margin:12px 0;border:1px solid var(--border,#747474);border-radius:12px;display:grid;gap:12px;background:var(--panel,#202428)}
.picture-puzzle-builder h3,.picture-puzzle-builder p{margin:0}
.picture-puzzle-builder input[type=file]{max-width:100%;color:inherit}
.picture-puzzle-photo{width:min(420px,100%);max-height:240px;object-fit:contain;border-radius:8px}
.picture-puzzle-crop-stage{position:relative;width:min(420px,100%);max-width:100%;overflow:hidden;line-height:0;border-radius:8px}
.picture-puzzle-crop-stage[hidden]{display:none}
.picture-puzzle-crop-stage .picture-puzzle-photo{display:block;width:100%;max-height:none;border-radius:0;pointer-events:none;user-select:none}
.picture-puzzle-crop-box{position:absolute;box-sizing:border-box;border:2px solid #ffb24f;box-shadow:0 0 0 1000px #0008;cursor:move;touch-action:none;user-select:none}
.picture-puzzle-crop-box:focus-visible{outline:3px solid #38bdf8;outline-offset:-5px}
.picture-puzzle-preview{width:96vw;height:96vh;height:96dvh;max-height:96dvh;box-sizing:border-box;background:var(--page-bg,#202428);color:var(--text,#fff);border:1px solid var(--border,#747474);border-radius:14px;padding:16px}
.picture-puzzle-play{display:grid;gap:10px;min-width:0;color:var(--text,#fff)}
.picture-puzzle-play .flashcard-toolbar{flex-wrap:wrap;gap:12px}
.picture-puzzle-play input[type=range]{width:130px;accent-color:#c66a18}
.picture-puzzle-help,.picture-puzzle-status{margin:0;font-size:14px;line-height:1.5}
.picture-puzzle-status{min-height:22px;color:var(--panel-header-text,#f39850)}
.picture-puzzle-viewport{height:calc(100dvh - 180px);min-height:160px;overflow:auto;overscroll-behavior:contain;border:1px solid #76634e;border-radius:14px;background:radial-gradient(circle,#aa88651a 1px,transparent 1px) 0 0/22px 22px,#191b20}
.picture-puzzle-sizer{position:relative}.picture-puzzle-board{position:absolute;left:0;top:0;transform-origin:top left;isolation:isolate}
.picture-puzzle-viewport{touch-action:none;cursor:grab}.picture-puzzle-viewport.panning{cursor:grabbing}
.picture-puzzle-piece{position:absolute;transform:translate(-50%,-50%);user-select:none;touch-action:none;z-index:2;pointer-events:none}
.picture-puzzle-art{position:absolute;inset:0;transform-origin:center;filter:drop-shadow(0 5px 6px #0005);pointer-events:none}
.picture-puzzle-art svg{width:100%;height:100%;overflow:visible}
.picture-puzzle-word{position:absolute;left:0;top:0;z-index:100000;box-sizing:border-box;max-height:88px;transform:translate(-50%,-50%);cursor:pointer;appearance:none;padding:8px 10px;background:#fff;border:1px solid #c4a887;border-radius:7px;box-shadow:0 2px 6px #0004;overflow:auto;overscroll-behavior:contain;text-align:center;font-size:14px;font-weight:700;line-height:1.2;color:#9c4c0c;overflow-wrap:anywhere;pointer-events:auto;touch-action:pan-y}
.picture-puzzle-handle{left:50%;top:50%;z-index:100001;cursor:grab;touch-action:none}
.picture-puzzle-grip,.picture-puzzle-lens-control-grip{position:absolute;inset:12px;border:0;border-radius:50%;background:#fff7cc;box-shadow:0 0 0 1px #6b4f00;cursor:grab;touch-action:none;z-index:2;pointer-events:auto}
.picture-puzzle-grip::after,.picture-puzzle-lens-control-grip::after{content:"";position:absolute;inset:8px;background:radial-gradient(circle,#6b4f00 1.5px,transparent 2px) 0 0/6px 6px;pointer-events:none}
.picture-puzzle-rotate{left:calc(100% + 4px);top:50%;transform:translate(-50%,-50%);touch-action:none}
.picture-puzzle-piece.revealed .picture-puzzle-art{filter:drop-shadow(0 3px 4px #0003)}
@media(max-width:600px){.picture-puzzle-preview{padding:8px}.picture-puzzle-play .flashcard-toolbar h3{font-size:18px}.picture-puzzle-help{font-size:12px}}

.picture-puzzle-word.pending{background:#fff0f0;border:2px solid #df4545;color:#9c270c}
.picture-puzzle-word.matched{background:#dcffe6;border:2px solid #28bd61;color:#176a32}
.picture-puzzle-word.fading{animation:picture-puzzle-word-fade .7s ease forwards;pointer-events:none}
@keyframes picture-puzzle-word-fade{0%,35%{opacity:1}100%{opacity:0}}
.picture-puzzle-handle[hidden],.picture-puzzle-word[hidden]{display:none!important}
.picture-puzzle-grip:active{cursor:grabbing}
.picture-puzzle-grip:focus-visible,.picture-puzzle-word:focus-visible,.picture-puzzle-rotate:focus-visible{outline:3px solid #38bdf8;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.picture-puzzle-word.fading{animation:none}}

.picture-puzzle-outline{position:absolute;pointer-events:none;overflow:visible;transform-origin:center}

.picture-puzzle-word.chosen:not(.matched){border-color:#a51e1e;box-shadow:0 0 0 2px #a51e1e,0 2px 6px #0004}

.picture-puzzle-board,.picture-puzzle-word,.picture-puzzle-handle{user-select:none;-webkit-user-select:none}

.picture-puzzle-play{position:relative}
.picture-puzzle-wrong-flash{position:absolute;inset:0;display:grid;place-items:center;z-index:100002;color:#ff3939;font-size:clamp(48px,8vw,90px);font-weight:900;text-shadow:0 2px 8px #000;pointer-events:none;user-select:none;animation:picture-puzzle-wrong-pop .9s ease-out}
.picture-puzzle-wrong-flash[hidden]{display:none!important}
@keyframes picture-puzzle-wrong-pop{0%{opacity:0;transform:scale(.85)}20%,80%{opacity:1;transform:scale(1)}100%{opacity:0}}
.picture-puzzle-piece.returning{transition:left .5s ease-in,top .5s ease-in}
@media(prefers-reduced-motion:reduce){.picture-puzzle-wrong-flash{animation:none}.picture-puzzle-piece.returning{transition:none}}
.picture-puzzle-lens{position:fixed;z-index:2147483000;border:3px solid #f8cc48;border-radius:50%;overflow:hidden;pointer-events:none;background:radial-gradient(circle,#aa88651a 1px,transparent 1px) 0 0/22px 22px,#191b20;box-shadow:0 3px 12px #0008;box-sizing:border-box;contain:strict}
.picture-puzzle-lens[hidden]{display:none}
.picture-puzzle-lens-scene{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}
.picture-puzzle-lens-scene svg{position:absolute;width:100%;height:100%;overflow:visible}
.picture-puzzle-lens-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:24px;line-height:1;filter:drop-shadow(0 1px 2px #000);z-index:2147483000}
.picture-puzzle-lens-control,.picture-puzzle-lens-control *{pointer-events:none!important}
.picture-puzzle-lens-word{position:absolute;transform:translate(-50%,-50%);background:#fff;border:2px solid #df4545;border-radius:7px;color:#9c270c;text-align:center;font-size:14px;font-weight:700;line-height:1.2;padding:8px 10px;box-sizing:border-box;max-height:88px;overflow:hidden;overflow-wrap:anywhere}
.picture-puzzle-viewport.magnifying,.picture-puzzle-viewport.magnifying *{cursor:none!important}
.picture-puzzle-lens-setting{display:flex;align-items:center;gap:6px;font-size:13px}
.picture-puzzle-play .picture-puzzle-lens-setting input{width:85px}
.picture-puzzle-large-lens[aria-pressed=true]{background:var(--panel-header-text,#f39850);color:var(--panel,#202428)}
.picture-puzzle-canvas-crop { position:absolute; inset:0; border:3px solid #facc15; box-sizing:border-box; pointer-events:none; z-index:900; }
.picture-puzzle-canvas-crop > span { position:absolute; top:4px; left:6px; color:#171d24; background:#facc15; border-radius:4px; padding:2px 6px; font:600 12px sans-serif; }
.picture-puzzle-scene-frame { width:100%; height:100%; }
.picture-puzzle-whole-scene { width:100%; height:min(78vh,900px); min-height:300px; }
.picture-puzzle-reward-playback { position:relative; inset:auto; width:100%; height:100%; z-index:auto; }
.picture-puzzle-play[hidden] { display:none; }
.picture-puzzle-scene-playback .presentation-question-progress { display:none; }
.picture-puzzle-scene-playback .student-presentation-slide { min-height:0; }
.picture-puzzle-whole-scene > [hidden] { display:none; }