.jigsaw{position:fixed;inset:0;z-index:10010;background:#f6efe4;color:#43215f;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));height:100dvh;box-sizing:border-box;font-family:inherit;}
.jigsaw[hidden]{display:none}.jigsaw button,.jigsaw select{font:700 14px/1.2 inherit;min-height:44px;min-width:44px;border:1px solid #d8c7e6;border-radius:12px;background:#fff;color:#43215f;padding:8px;cursor:pointer;}
.jigsaw button:focus-visible,.jigsaw select:focus-visible{outline:3px solid #7040ab;outline-offset:2px}.jigsaw button:disabled{opacity:.45;cursor:default}
.jigsaw-header{display:flex;align-items:center;gap:8px}.jigsaw-header strong{flex:1;font-size:clamp(14px,3vw,20px)}.jigsaw-header small{display:block;font-size:12px;font-weight:500;margin-top:3px}.jigsaw-field{overflow:auto;min-height:0;min-width:0;display:grid;place-items:safe center;overscroll-behavior:contain;border-radius:14px;background:#e6dccf;}
.jigsaw-board{position:relative;flex:none;background:#faf6ef;box-shadow:0 4px 22px #43215f22;isolation:isolate;touch-action:pan-x pan-y;}
.jigsaw-board>svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.jigsaw-guide{opacity:.16}.jigsaw-outline{fill:none;stroke:#aa9884;stroke-width:1.5}.jigsaw-placed{position:absolute;pointer-events:none;filter:drop-shadow(0 1px 1px #0003)}.jigsaw-placed svg{width:100%;height:100%;display:block}
.jigsaw-footer{min-width:0}.jigsaw-status{font-size:13px;margin:0 0 5px;min-height:18px;text-align:center}.jigsaw-tray{display:flex;align-items:center;gap:8px}.jigsaw-pieces{display:flex;gap:8px;overflow-x:auto;min-width:0;flex:1;scroll-snap-type:x proximity;padding:4px;scrollbar-width:thin}.jigsaw-piece{position:relative;flex:0 0 90px;height:92px;touch-action:none;scroll-snap-align:start;user-select:none;-webkit-user-select:none}.jigsaw-piece svg{width:100%;height:100%;display:block;pointer-events:none}.jigsaw-piece[aria-pressed=true]{outline:3px solid #7040ab;background:#eee0f8}.jigsaw-piece span{position:absolute;bottom:2px;right:2px;border-radius:8px;background:#fffdf0;padding:2px 5px;font-size:11px}.jigsaw-ghost{position:fixed;z-index:10030;pointer-events:none;filter:drop-shadow(0 5px 5px #0005);opacity:.92;}
.jigsaw-settings{max-width:420px;width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;padding:20px;border:0;border-radius:20px;color:#43215f;background:#fffdf8}.jigsaw-settings::backdrop{background:#21152d99}.jigsaw-settings label{display:grid;gap:5px;margin:12px 0}.jigsaw-settings select{width:100%}.jigsaw-settings .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.jigsaw-settings h2{margin:0 0 12px}.jigsaw-settings p{font-size:14px;line-height:1.4}
@media(max-height:500px) and (orientation:landscape){.jigsaw{grid-template-columns:minmax(0,1fr) 120px;grid-template-rows:44px minmax(0,1fr);gap:5px}.jigsaw-header{grid-column:1/-1}.jigsaw-footer{grid-column:2;grid-row:2;display:flex;flex-direction:column}.jigsaw-tray{min-height:0;flex:1;flex-direction:column;gap:3px}.jigsaw-pieces{flex-direction:column;overflow-x:hidden;overflow-y:auto;width:100%;align-items:center}.jigsaw-piece{width:90px;min-height:78px;flex-basis:78px}.jigsaw-status{font-size:11px}.jigsaw-tray>button{min-height:44px;height:44px;padding:3px;width:100%}.jigsaw-header small{display:none}}
@media(prefers-reduced-motion:reduce){.jigsaw *{scroll-behavior:auto!important}}

body.jigsaw-active #age3-change,body.jigsaw-active .kd-language-switch{display:none!important}

/* WD210: instructions stay in the menu and live-region; only errors remain visible. */
.jigsaw-status:not(.is-visible){position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.jigsaw-tray[hidden],.jigsaw-continue[hidden]{display:none}
.jigsaw-continue{display:block;margin:6px auto;min-width:180px!important;background:#7040ab!important;color:#fff!important}

/* Demonstration follows the player's move; overlays never move or place a piece. */
.jigsaw-board>svg.jigsaw-feedback{z-index:4;overflow:visible;pointer-events:none;animation:jigsaw-feedback-match 1.1s ease-in-out both}
.jigsaw-feedback path{fill:#7040ab16;stroke:#7040ab;stroke-width:4;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.jigsaw-board>svg.jigsaw-feedback.is-mismatch{animation:jigsaw-feedback-mismatch 1.8s ease-in-out both}
.jigsaw-feedback.is-mismatch path{fill:#bd6a1012;stroke:#b45d0b;stroke-dasharray:8 5}
.jigsaw-return-cue{position:absolute;inset:0;display:grid;place-items:center;border:3px dashed #b45d0b;border-radius:12px;background:#fff4d8d9;color:#9b4c08;font:700 32px system-ui;pointer-events:none;animation:jigsaw-feedback-mismatch 1.8s ease-in-out both}
@keyframes jigsaw-feedback-match{0%{opacity:0;transform:scale(.985)}18%,65%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes jigsaw-feedback-mismatch{0%{opacity:0}15%,70%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.jigsaw-board>svg.jigsaw-feedback{animation-name:jigsaw-feedback-mismatch;transform:none}}

/* Compare the actual attempted cut with the target cut, instead of a generic error sign. */
.jigsaw-feedback.is-mismatch path{stroke-dasharray:none}
.jigsaw-feedback.is-mismatch .jigsaw-attempted-outline{fill:none;stroke:#7040ab;stroke-dasharray:7 6;stroke-width:3}
.jigsaw-return-cue{inset:auto 2px 2px auto;width:28px;height:28px;border:2px solid #b45d0b;border-radius:50%;background:#fff4d8;font-size:24px;line-height:1}

.jigsaw-header strong{min-width:0;overflow-wrap:anywhere}.jigsaw-reload{background:#7040ab!important;color:#fff!important}.jigsaw-reload[hidden],.jigsaw-peek[hidden]{display:none}

#legacy-save-recovery{position:fixed;z-index:2147482001;left:50%;top:12px;transform:translateX(-50%);max-width:calc(100vw - 24px);min-height:44px;padding:12px;border:2px solid #7040ab;border-radius:12px;background:#fff;color:#43215f;font:700 14px system-ui}body.jigsaw-active #legacy-save-recovery{display:none}

.jigsaw-outline.is-keyboard-target{stroke:#7040ab;stroke-width:5;filter:drop-shadow(0 0 2px #fff)}

.jigsaw-header{flex-wrap:wrap;row-gap:3px}.jigsaw-header .active-time{font-size:11px!important;flex-basis:100%;text-align:right;max-width:100%}

/* The three puzzle groups are available from the start; campaign scenes stay sequential. */
html[data-public-kids] body[data-kd-game="puzzle"] .jigsaw-age{display:block!important}