.jigsaw-page{box-sizing:border-box;width:min(100% - 20px,720px);margin:0 auto;padding:12px 0 112px;color:var(--ink,#252820)}
.jigsaw-heading h1{margin:0;font-size:1.35rem}.jigsaw-heading p{margin:.12em 0 0;color:#586052;font-size:.84rem}.jigsaw-status{min-height:1.35em;margin:6px 0 8px;color:#485044;font-size:.84rem}
.jigsaw-setup{display:grid;gap:10px;max-width:480px;margin:10px auto;padding:14px;border:1px solid #d5d9cf;border-radius:16px;background:#fff}.jigsaw-field{display:grid;gap:4px;font-size:.86rem;font-weight:700}.jigsaw-field select{box-sizing:border-box;width:100%;min-height:42px;padding:7px 10px;border:1px solid #c5cbbd;border-radius:10px;background:#fff;color:inherit;font:inherit;font-weight:400}.jigsaw-setup__actions,.jigsaw-play__actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}.jigsaw-setup button,.jigsaw-play button{min-height:40px;padding:7px 13px;border:1px solid #c5cbbd;border-radius:12px;background:#fff;color:inherit;font:inherit;cursor:pointer}.jigsaw-setup #jigsaw-start{border-color:#49643c;background:#49643c;color:#fff;font-weight:700}.jigsaw-setup button:disabled,.jigsaw-save:disabled{opacity:.45;cursor:default}.jigsaw-help{margin:0;color:#586052;font-size:.78rem;line-height:1.5}
.jigsaw-play{display:grid;min-width:0;gap:8px}.jigsaw-source-label{margin:0;color:#586052;font-size:.76rem}.jigsaw-board{--jigsaw-board-size:min(100%,min(52vh,520px));box-sizing:border-box;display:grid;grid-template-columns:repeat(var(--jigsaw-columns,3),minmax(0,1fr));width:var(--jigsaw-board-size);aspect-ratio:1;margin:0 auto;padding:4px;gap:3px;border:1px solid #c5cbbd;border-radius:8px;background:#e9ece5}.jigsaw-cell{position:relative;display:grid;place-items:center;min-width:0;min-height:0;padding:0;overflow:hidden;border:1px dashed #aeb5a6;border-radius:4px;background:rgba(255,255,255,.55);cursor:pointer}.jigsaw-cell[aria-pressed=true]{outline:3px solid #335cbe;outline-offset:-3px}.jigsaw-cell[data-correct=true]{border-style:solid;border-color:#49643c;background:#fff}.jigsaw-cell[data-correct=false]{border-color:#bb5146;background:#fff0ed}.jigsaw-cell__image{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;image-rendering:pixelated;background-color:#fff;background-image:linear-gradient(45deg,#e3e5df 25%,transparent 25%),linear-gradient(-45deg,#e3e5df 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e3e5df 75%),linear-gradient(-45deg,transparent 75%,#e3e5df 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0}.jigsaw-cell__result{position:absolute;right:2px;top:1px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#49643c;color:#fff;font-size:.78rem;font-weight:800;line-height:1}.jigsaw-cell[data-correct=false] .jigsaw-cell__result{background:#bb5146}
.jigsaw-tray-heading{margin:2px 0 0;font-size:.9rem}.jigsaw-tray{box-sizing:border-box;display:flex;width:100%;min-width:0;gap:8px;overflow-x:auto;overflow-y:hidden;padding:3px 2px 8px;overscroll-behavior-x:contain}.jigsaw-piece{box-sizing:border-box;display:grid;grid-template-rows:minmax(44px,76px) auto;place-items:center;gap:3px;flex:0 0 82px;min-height:82px;padding:4px;border:1px solid #c5cbbd;border-radius:9px;background:#fff;color:inherit;font:inherit;font-size:.7rem;cursor:pointer}.jigsaw-piece[aria-pressed=true]{border-color:#335cbe;box-shadow:0 0 0 2px #335cbe;background:#f2f5ff}.jigsaw-piece__image{display:block;max-width:72px;max-height:68px;image-rendering:pixelated;background-color:#fff;background-image:linear-gradient(45deg,#e3e5df 25%,transparent 25%),linear-gradient(-45deg,#e3e5df 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e3e5df 75%),linear-gradient(-45deg,transparent 75%,#e3e5df 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0}.jigsaw-complete{margin:2px 0;padding:9px 12px;border-radius:12px;background:#e5eddf;color:#31482a;font-weight:700;text-align:center}.jigsaw-play__actions{margin-bottom:4px}
.jigsaw-page :focus-visible{outline:3px solid #335cbe;outline-offset:2px}.jigsaw-page [hidden]{display:none!important}.jigsaw-page .app-tabs{z-index:30}
@media(max-width:380px){.jigsaw-page{width:calc(100% - 14px);padding-top:8px}.jigsaw-heading h1{font-size:1.18rem}.jigsaw-heading p,.jigsaw-status{font-size:.76rem}.jigsaw-status{margin:4px 0 6px}.jigsaw-setup{gap:8px;margin:6px auto;padding:11px}.jigsaw-field{font-size:.8rem}.jigsaw-field select{min-height:38px}.jigsaw-setup button,.jigsaw-play button{min-height:36px;padding:5px 10px;font-size:.82rem}.jigsaw-play{gap:6px}.jigsaw-board{--jigsaw-board-size:min(100%,min(46vh,440px));padding:3px;gap:2px}.jigsaw-tray{gap:6px}.jigsaw-piece{flex-basis:74px;grid-template-rows:minmax(40px,64px) auto;min-height:72px}.jigsaw-piece__image{max-width:64px;max-height:58px}}
@media(max-height:650px){.jigsaw-page{padding-top:5px;padding-bottom:88px}.jigsaw-heading h1{font-size:1.15rem}.jigsaw-heading p,.jigsaw-status{font-size:.74rem}.jigsaw-status{min-height:1em;margin:2px 0 4px}.jigsaw-setup{gap:7px;margin:5px auto;padding:10px}.jigsaw-field select{min-height:36px}.jigsaw-board{--jigsaw-board-size:min(100%,min(44vh,420px))}.jigsaw-play{gap:5px}.jigsaw-tray-heading{font-size:.82rem}.jigsaw-tray{padding-bottom:5px}.jigsaw-piece{min-height:68px}.jigsaw-play__actions{margin-bottom:0}}
@media(max-width:380px) and (max-height:650px){.jigsaw-page{padding-bottom:84px}.jigsaw-board{--jigsaw-board-size:min(100%,min(40vh,340px))}.jigsaw-tray{gap:5px}.jigsaw-piece{flex-basis:68px;grid-template-rows:minmax(36px,56px) auto;min-height:62px}.jigsaw-piece__image{max-width:58px;max-height:50px}}
@media(prefers-reduced-motion:reduce){.jigsaw-piece,.jigsaw-cell,.jigsaw-page button{transition:none}}

/* The puzzle board becomes the main workspace after setup. */
body.app-page--tool-jigsaw{height:100dvh;min-width:320px;overflow:hidden;overscroll-behavior:none}
body.app-page--tool-jigsaw .site-header,body.app-page--tool-jigsaw .site-footer{display:none}
body.app-page--tool-jigsaw #main{height:100dvh}
.jigsaw-page{width:100%;height:100%;max-width:none;margin:0;padding:calc(6px + env(safe-area-inset-top)) 10px calc(74px + env(safe-area-inset-bottom));display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:4px;overflow:hidden}
.jigsaw-heading h1{font-size:clamp(1.05rem,2.4vw,1.35rem)}.jigsaw-heading p{font-size:.74rem}.jigsaw-status{min-height:1em;margin:0;color:#636c5d;font-size:.72rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jigsaw-setup{align-self:start;max-width:480px;width:100%;margin:8px auto;padding:12px;gap:8px}.jigsaw-setup__actions{margin-top:2px}.jigsaw-help{font-size:.72rem}
.jigsaw-play{height:100%;min-height:0;grid-template-rows:auto minmax(0,1fr) auto auto auto;gap:4px}
.jigsaw-source-label{font-size:.68rem;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jigsaw-board{--jigsaw-board-size:min(100%,min(62dvh,680px));width:min(100%,calc(min(62dvh,680px)*var(--jigsaw-ratio,1)));max-width:680px;max-height:62dvh;height:auto;aspect-ratio:var(--jigsaw-ratio,1);grid-template-rows:repeat(var(--jigsaw-columns,3),minmax(0,1fr));align-self:center;justify-self:center;margin:0;padding:clamp(3px,.7vmin,7px);gap:clamp(2px,.5vmin,5px);border-radius:14px;background:radial-gradient(circle at center,#e9ece5,#dfe4da)}
.jigsaw-cell{touch-action:none;user-select:none;-webkit-user-select:none;transition:background-color .12s,border-color .12s,transform .12s}.jigsaw-cell.is-drop-target{outline:3px solid #547447;outline-offset:-3px;background:#e5eddf}.jigsaw-cell.is-dragging,.jigsaw-piece.is-dragging{position:relative;z-index:80;transform:translate(var(--drag-x),var(--drag-y)) scale(1.06);opacity:.78;box-shadow:0 18px 38px rgba(24,34,24,.26);pointer-events:none}
.jigsaw-tray-heading{margin:0;color:#66705e;font-size:.74rem;font-weight:600}.jigsaw-tray{max-height:min(17dvh,112px);gap:6px;padding:2px 2px 5px;touch-action:pan-x;scrollbar-width:thin}
.jigsaw-piece{grid-template-rows:minmax(34px,58px) auto;flex-basis:72px;min-height:68px;padding:3px;touch-action:pan-x;user-select:none;-webkit-user-select:none}.jigsaw-piece__image{max-width:62px;max-height:54px}.jigsaw-piece.is-dragging{position:fixed;left:var(--drag-origin-x,0px);top:var(--drag-origin-y,0px);width:var(--drag-w);height:var(--drag-h);transform:translate(var(--drag-x),var(--drag-y)) scale(1.08);z-index:100}
.jigsaw-complete{margin:0;padding:5px 9px;font-size:.82rem}.jigsaw-play__actions{margin:0}.jigsaw-play button,.jigsaw-setup button{min-height:34px;padding:4px 10px;font-size:.78rem}
.jigsaw-page :focus-visible{outline-offset:2px}
@media(max-width:560px){.jigsaw-page{padding-right:7px;padding-left:7px}.jigsaw-board{width:min(100%,calc(min(58dvh,620px)*var(--jigsaw-ratio,1)));max-height:58dvh;border-radius:12px}.jigsaw-tray{max-height:min(16dvh,96px)}.jigsaw-piece{flex-basis:68px;min-height:62px}.jigsaw-piece__image{max-width:58px;max-height:48px}}
.jigsaw-field input[type=file]{box-sizing:border-box;width:100%;min-height:42px;padding:7px 9px;border:1px solid #c5cbbd;border-radius:10px;background:#fff;color:inherit;font:inherit;font-weight:400}
@media(max-height:650px){.jigsaw-board{width:min(100%,calc(42dvh*var(--jigsaw-ratio,1)));max-height:42dvh}}
@media(max-height:620px){.jigsaw-page{padding-top:calc(3px + env(safe-area-inset-top));padding-bottom:calc(66px + env(safe-area-inset-bottom));gap:3px}.jigsaw-heading p{display:none}.jigsaw-play{gap:3px}.jigsaw-board{--jigsaw-board-size:min(100%,min(58dvh,600px));border-radius:10px}.jigsaw-tray-heading{font-size:.68rem}.jigsaw-tray{max-height:min(19dvh,78px);padding-bottom:3px}.jigsaw-piece{grid-template-rows:minmax(28px,46px) auto;min-height:54px;flex-basis:62px}.jigsaw-piece__image{max-width:50px;max-height:42px}.jigsaw-complete{padding:3px 7px;font-size:.75rem}}
@media(orientation:landscape) and (max-height:520px){.jigsaw-page{grid-template-columns:minmax(0,1fr);padding-left:8px;padding-right:8px}.jigsaw-play{grid-template-columns:minmax(0,1fr) minmax(130px,22vw);grid-template-rows:auto minmax(0,1fr) auto;column-gap:10px}.jigsaw-source-label{grid-column:1/-1}.jigsaw-board{grid-column:1;grid-row:2/4;--jigsaw-board-size:min(100%,min(74dvh,calc(100vw - 190px),430px))}.jigsaw-tray-heading{grid-column:2;grid-row:2;align-self:end}.jigsaw-tray{grid-column:2;grid-row:3;align-self:start;max-height:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:min-content;overflow-y:auto;overflow-x:hidden;touch-action:pan-y}.jigsaw-piece{min-width:0;width:100%;min-height:48px;grid-template-rows:36px auto;flex-basis:auto}.jigsaw-piece__image{max-width:42px;max-height:34px}.jigsaw-play__actions,.jigsaw-complete{grid-column:2;grid-row:4}}
@media(max-width:380px){.jigsaw-page{padding-right:5px;padding-left:5px}.jigsaw-board{--jigsaw-board-size:min(100%,min(64dvh,680px))}.jigsaw-setup{padding:9px;gap:7px}}
@media(prefers-reduced-motion:reduce){.jigsaw-cell,.jigsaw-piece{transition:none}}

/* Keep the change-picture action above the board, never underneath the shared nav. */
.jigsaw-page{position:relative}
.jigsaw-play__actions{position:fixed;top:calc(5px + env(safe-area-inset-top));right:9px;z-index:5;margin:0;grid-column:auto!important;grid-row:auto!important}
.jigsaw-play__actions button{min-height:30px!important;padding:4px 9px!important;border-radius:999px!important;background:rgba(255,255,255,.91)!important;box-shadow:0 4px 14px rgba(31,43,28,.11)}
.jigsaw-heading,.jigsaw-status{padding-right:78px}
.jigsaw-board{width:min(calc(100vw - 10px),680px);height:auto;max-height:calc(100dvh - 230px);aspect-ratio:var(--jigsaw-ratio,1)}
@media(orientation:landscape) and (max-height:520px){.jigsaw-board{width:min(calc(100vw - 200px),430px);max-height:calc(100dvh - 140px)}}
.jigsaw-page{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
@media(orientation:landscape) and (max-height:520px){.jigsaw-page{padding-bottom:calc(82px + env(safe-area-inset-bottom))}}
/* Keep every source choice reachable above the navigation in short landscape. */
@media(orientation:landscape) and (max-height:520px){.jigsaw-setup{box-sizing:border-box;max-height:calc(100dvh - 8.5rem - env(safe-area-inset-bottom));min-height:0;overflow-y:auto;overscroll-behavior:contain}}