/* A fitted puzzle desk beneath Lisa Land's existing floating navigation. */
body:has(#puzzle-screen:not([hidden])){overflow:hidden}
body>#puzzle-screen:not([hidden]){position:fixed;inset:0;z-index:1;max-width:none;width:100%;height:100dvh;min-height:0;padding:calc(var(--floating-nav-height,82px) + 8px) 12px max(8px,env(safe-area-inset-bottom));overflow:hidden;background:radial-gradient(ellipse at 20% 5%,#fff6d285,transparent 55%),linear-gradient(140deg,#d0e9e8,#ded8ee)}
#puzzle-workspace{height:100%;min-height:0;display:flex;flex-direction:column}
#puzzle-workspace[hidden],#puzzle-gallery[hidden]{display:none!important}
#puzzle-workspace .intro,#puzzle-workspace>.chooser{display:none!important}
#puzzle-workspace .game-layout{flex:1;min-height:0;display:flex}
#puzzle-workspace .play-card{flex:1;min-height:0;display:flex;flex-direction:column;padding:0!important}
#puzzle-workspace .board-heading{flex:none;min-height:48px;margin:0 3px 8px;gap:8px}
#puzzle-workspace .board-heading>div:first-child{min-width:0;flex:1}
#puzzle-workspace .board-heading h2{font-size:clamp(17px,2.4vw,25px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#puzzle-workspace .puzzle-options-button{min-height:44px;border-radius:16px;box-shadow:0 3px 0 #bca78344;touch-action:manipulation}
#puzzle-workspace .progress{min-height:40px;display:flex;align-items:center;font-size:17px;background:#fff8e7;border:2px solid white;box-shadow:0 3px #beb1cf44}
#puzzle-screen #puzzle-table{height:auto!important;min-height:0!important;flex:1;overflow:hidden;border:3px solid #fffcf0;border-radius:29px;background:radial-gradient(ellipse at 20% 0%,#ffffff70,transparent 55%),repeating-linear-gradient(0deg,#ffffff05 0 3px,#8bb9cb08 3px 4px),linear-gradient(145deg,#afdce3,#c3d1ed 55%,#d8c8e9);box-shadow:inset 0 2px 3px #fff8,0 5px 0 #9baac555}
#puzzle-screen #board{width:var(--puzzle-fit-board,50vw)!important;height:var(--puzzle-fit-board,50vw)!important;left:50%;top:50%!important;max-width:none;max-height:none;border:0;border-radius:8px;box-shadow:0 0 0 3px #ffffffb0,0 4px 0 #8b9aab44,0 8px 20px #4b62722e;background:#fff8e552;overflow:clip}
#puzzle-screen #tray .piece{transform:translate(-50%,-50%) rotate(var(--fit-tilt,0deg));transition:filter .15s ease,opacity .15s ease;filter:drop-shadow(0 3px 1px #53627c55);cursor:grab}
#puzzle-screen #tray .piece.selected{filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #e5b653) drop-shadow(0 4px 2px #53627c55);z-index:8}
#puzzle-screen #board .slot.filled .cut-line{stroke:#fff9e9;stroke-width:1.25;opacity:.32}
#puzzle-screen #board.complete .cut-line{opacity:0}
#board .slot .home-hint{opacity:0;pointer-events:none;transition:opacity .18s ease}
#board .slot.home-suggested .home-hint{opacity:.85;filter:drop-shadow(0 0 12px #fff2a5)}
#board .slot.home-suggested .cut-line{stroke:#e3af47;stroke-width:7;opacity:1}
#board .slot.filled .home-hint{opacity:0!important}
#board .slot.just-snapped>svg{animation:puzzle-soft-seat .25s cubic-bezier(.2,.75,.3,1) both;transform-origin:center}
@keyframes puzzle-soft-seat{0%{transform:scale(1.035);filter:brightness(1.1)}65%{transform:scale(.996)}100%{transform:scale(1);filter:none}}
.piece.puzzle-settle{transition:left .23s cubic-bezier(.17,.75,.25,1),top .23s cubic-bezier(.17,.75,.25,1),opacity .06s .19s ease!important;filter:drop-shadow(0 2px 2px #53627c33)!important}
#puzzle-workspace .board-footer{flex:none;min-height:40px;gap:8px;margin:6px 2px 0;padding:0 6px;font-size:12px}
#puzzle-workspace #peek{min-height:40px;border:2px solid #fff;border-radius:14px;background:#ffefbb;box-shadow:0 2px #c1aa7744}
#puzzle-workspace .reference{flex:none;align-self:center;margin:0 0 6px;padding:4px 10px;background:#fffbef;box-shadow:0 2px 5px #4b62721a}
#puzzle-workspace .reference img{width:42px;height:42px}
.puzzle-hint-switch{display:flex!important;align-items:flex-start;gap:12px;padding:15px;background:#f0ecf7;border-radius:18px;font-size:15px}
.puzzle-hint-switch input{width:23px;height:23px;flex:none;margin:0;accent-color:#8966ae}
.puzzle-hint-switch small{display:block;font-size:12px;font-weight:600;line-height:1.45;margin-top:5px;color:#7d738c}
/* A painted park gallery with paper picture frames and a warm heading panel. */
body>#puzzle-screen:has(#puzzle-gallery:not([hidden])){background:linear-gradient(155deg,#28465d22,#1c514766),url('birdhouse-art/park.webp') center/cover no-repeat}
#puzzle-gallery{height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:8px 14px 30px;scrollbar-color:#fff2b5 #ffffff38;scrollbar-width:thin}
#puzzle-gallery .puzzle-gallery-heading{margin:3px 0 24px;padding:18px 22px;align-items:center;border:2px solid #fffdf1;border-radius:26px;background:linear-gradient(135deg,#fff9e8f2,#eaf3e6ed);box-shadow:0 5px 0 #46675b33,0 10px 22px #213e4122;backdrop-filter:blur(10px)}
#puzzle-gallery .home-kicker{color:#82956b;letter-spacing:2px;font-size:10px;text-shadow:none}
#puzzle-gallery h1{color:#446e64;font-size:clamp(24px,3vw,38px);margin:4px 0}
#puzzle-gallery p{color:#85916f;font-size:13px;margin:5px 0 0}
#puzzle-gallery .puzzle-gallery-pictures{gap:20px;padding:0 3px 12px}
#puzzle-gallery .puzzle-gallery-picture{padding:9px 9px 6px;border:3px solid #fffbea;border-radius:25px;background:repeating-linear-gradient(0deg,#fffaf3 0 2px,#f9f2e9 2px 3px);box-shadow:0 5px 0 #c7b08a,0 10px 20px #263e4438}
#puzzle-gallery .puzzle-gallery-picture img{border-radius:16px;box-shadow:0 0 0 1px #d8c9ab}
#puzzle-gallery .puzzle-gallery-picture strong{color:#587268;margin:12px 3px 8px}
@media(max-width:600px){body>#puzzle-screen:not([hidden]){padding-right:8px;padding-left:8px}#puzzle-workspace .board-heading{gap:5px;margin-bottom:7px}#puzzle-workspace .puzzle-options-button{padding:5px 8px}#puzzle-workspace .progress{font-size:14px;padding:5px 7px}#puzzle-workspace .board-footer{font-size:10px;min-height:36px}#puzzle-workspace #encourage{max-width:75%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#puzzle-gallery{padding:4px 3px 22px}#puzzle-gallery .puzzle-gallery-heading{padding:13px 14px;gap:10px;margin-bottom:16px;flex-wrap:wrap}#puzzle-gallery .puzzle-gallery-heading button{font-size:12px;padding:9px 12px}#puzzle-gallery .puzzle-gallery-pictures{gap:12px}#puzzle-gallery .puzzle-gallery-picture{padding:6px;border-radius:19px}#puzzle-gallery .puzzle-gallery-picture img{border-radius:12px}}
@media(max-height:500px){#puzzle-workspace .board-heading{min-height:40px;margin-bottom:4px}#puzzle-workspace .board-footer{min-height:30px;margin-top:3px}#puzzle-workspace #peek{min-height:32px;padding:3px 10px}}
@media(prefers-reduced-motion:reduce){#board .slot.just-snapped>svg{animation:none}.piece.puzzle-settle{transition:none!important}#board .slot .home-hint{transition:none}}
svg .home-hint{opacity:0;pointer-events:none}
/* Extra help is deliberately clearer than the ordinary drag-over cue. */
#board .slot.home-suggested:not(.filled){opacity:1;filter:drop-shadow(0 0 6px #ffe7a0aa)}
#board .slot.home-suggested:not(.filled) image{opacity:.24}
#board .slot.home-suggested .home-hint{opacity:.26}
#board .slot.home-suggested .cut-line{stroke:#edb64b;stroke-width:8;opacity:1}
#board[data-guidance=outlines] .slot.home-suggested:not(.filled) image,#board[data-guidance=reference] .slot.home-suggested:not(.filled) image{opacity:0}