/* Nature Puzzles: a central, spacious table. Other games retain their own layouts. */
#puzzle-screen{max-width:1220px;padding:4px 16px 24px;margin:auto}#puzzle-screen .intro{margin:2px 0 7px;text-align:left;display:flex;align-items:baseline;gap:12px}#puzzle-screen .intro .eyebrow{display:none}#puzzle-screen .intro h1{font-size:25px;margin:0;color:#665092}#puzzle-screen .intro p{font-size:13px;margin:0;color:#86779c}#puzzle-screen .game-layout{display:block;gap:0}#puzzle-screen .play-card{padding:10px 14px 8px;border:3px solid #fff;border-radius:26px;background:linear-gradient(145deg,#fffdf5,#f0eaf9);box-shadow:0 5px 0 #c1b2d3,0 9px 18px #775b9917}#puzzle-screen .board-heading{margin:0 0 8px;min-height:45px;gap:8px}#puzzle-screen .small-label{display:none}#puzzle-screen .board-heading h2{font-size:22px;margin:0;color:#685090}#puzzle-screen .progress{background:#eee7fa;color:#685090;border-radius:15px;padding:7px 12px;font-size:19px;white-space:nowrap}#puzzle-screen .progress span{font-size:12px}#puzzle-screen .puzzle-options-button{min-height:44px;padding:7px 12px;background:#fff0be;border:2px solid white;border-radius:14px}#puzzle-screen .puzzle-table{--board-size:min(52vw,calc(100dvh - 282px),550px);position:relative;isolation:isolate;height:calc(var(--board-size) + 52px);min-height:270px;border:2px solid #ebd1aa;border-radius:22px;background:radial-gradient(ellipse at 30% 25%,#ffffef99,transparent 60%),repeating-linear-gradient(0deg,transparent 0 76px,#dfc59e16 77px 78px),linear-gradient(145deg,#f9edcd,#efddc2 50%,#f7e9d0);box-shadow:inset 0 0 0 6px #fff4,inset 0 2px 10px #ad8f7330;touch-action:none;overflow:hidden}#puzzle-screen .puzzle-table:before{content:'';position:absolute;inset:14px;border:1px solid #e4cbaa88;border-radius:15px;pointer-events:none}#puzzle-screen .board{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--board-size);height:var(--board-size);max-width:none;max-height:none;aspect-ratio:1;margin:0;border:7px solid #fffcf3;border-radius:18px;background:#e9dfca;box-shadow:0 5px 0 #c7b694,0 8px 17px #7d6b5330;overflow:hidden;z-index:1}#puzzle-screen .board.complete{box-shadow:0 0 0 4px #e9c66d77,0 7px 17px #7d6b5330}#puzzle-screen .slot{min-height:0;min-width:0;transition:opacity .18s ease,filter .16s ease}#puzzle-screen .slot.drop-ready{opacity:.65;filter:brightness(1.12)}#puzzle-screen .slot.drop-ready .cut-line{stroke:#e9b83c;stroke-width:7}#puzzle-screen .slot.filled{opacity:1;filter:none}#puzzle-screen .piece-card{display:contents}#puzzle-screen .tray-heading,#puzzle-screen .gentle-note{display:none}#puzzle-screen .tray{display:contents;min-height:0;padding:0}#puzzle-screen .piece{position:absolute;left:var(--table-x);top:var(--table-y);width:clamp(58px,calc(var(--board-size) / var(--puzzle-cols) * .79),210px);height:auto;min-height:0;min-width:0;max-height:none;transform:translate(-50%,-50%) rotate(var(--tilt));filter:drop-shadow(0 4px 2px #89725860);z-index:3;touch-action:none;transition:filter .15s ease,opacity .15s ease;cursor:grab}#puzzle-screen .piece.selected{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 5px #d7a437) drop-shadow(0 4px 2px #89725860);z-index:4}#puzzle-screen .piece.placed{visibility:hidden;pointer-events:none}#puzzle-screen .piece[hidden]{display:none}#puzzle-screen .tray-pages{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);z-index:5;margin:0;gap:8px;background:#fff9e8e8;border:2px solid #fff;border-radius:20px;padding:2px 8px;box-shadow:0 3px 0 #d3bc9b}#puzzle-screen .tray-pages[hidden]{display:none}#puzzle-screen .tray-pages button{width:44px;height:44px;min-width:44px;min-height:44px;font-size:24px;background:#f7e3af;border-radius:14px}#puzzle-screen .tray-pages span{font-size:11px;color:#776280;white-space:nowrap}#puzzle-screen .board-footer{margin:9px 0 0;min-height:35px;font-size:13px;color:#7e6a8e}#puzzle-screen #peek{min-height:44px;padding:6px 13px;background:#eee6fa;color:#6d5695;border-radius:13px}#puzzle-screen .reference{display:flex;margin:0 0 8px;padding:5px 10px;gap:10px;background:#e8f0f1;min-height:0}#puzzle-screen .reference[hidden]{display:none}#puzzle-screen .reference img{width:55px;height:55px}#puzzle-screen .reference span{font-size:12px}#puzzle-screen .chooser{margin-top:20px;padding:14px 0 0}#puzzle-screen .chooser-title{margin-bottom:10px}#puzzle-screen .chooser-title h2{font-size:21px;color:#715591}#puzzle-screen .chooser-title>span{display:none}#puzzle-screen .choices{display:flex;gap:12px;overflow-x:auto;padding:4px 4px 10px;scroll-snap-type:x proximity;touch-action:pan-x;overscroll-behavior-x:contain}#puzzle-screen .choice{flex:0 0 164px;min-width:0;display:flex;flex-direction:column;gap:7px;padding:7px;border:3px solid #fff;border-radius:18px;background:#f1ebfa;box-shadow:0 3px 0 #c7bbd6;scroll-snap-align:start}#puzzle-screen .choice img{width:144px;height:105px;object-fit:cover;border-radius:12px}#puzzle-screen .choice strong{font-size:13px}#puzzle-screen .choice small{display:none}#puzzle-screen .choice.active{border-color:#eac466;background:#fff1c7}#puzzle-screen .photo-choice .plus{font-size:55px;height:105px;display:grid;place-items:center;color:#9b7ab8}#puzzle-screen .photo-choice small{display:block;font-size:11px}
.piece.dragging{position:fixed!important;z-index:1000!important;left:0;top:0;max-width:none!important;max-height:none!important;margin:0!important;min-width:0!important;min-height:0!important;pointer-events:none;transform:none!important;transition:none!important;filter:drop-shadow(0 8px 7px #4b396055)!important}.piece.puzzle-settle{transition:left .18s cubic-bezier(.2,.8,.2,1),top .18s cubic-bezier(.2,.8,.2,1),opacity .18s ease!important}.puzzle-fit{position:absolute;width:0;height:0;z-index:6;pointer-events:none}.puzzle-fit i{position:absolute;color:#fff3a0;font-style:normal;text-shadow:0 1px 3px #ae7a29;font-size:23px;animation:puzzle-fit-spark .55s ease-out both}@keyframes puzzle-fit-spark{0%{transform:scale(.4);opacity:0}25%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.7) rotate(30deg);opacity:0}}
@media(max-width:600px){#puzzle-screen{padding:4px 9px 18px}#puzzle-screen .intro p{display:none}#puzzle-screen .intro h1{font-size:23px}#puzzle-screen .play-card{padding:8px;border-radius:22px}#puzzle-screen .board-heading h2{font-size:18px}#puzzle-screen .board-heading{flex-wrap:nowrap;gap:5px}#puzzle-screen .board-heading>div:first-child{flex:1;min-width:0}#puzzle-screen .progress{font-size:16px;padding:6px 8px;margin-left:0}#puzzle-screen .progress span{display:none}#puzzle-screen .puzzle-options-button{padding:6px 9px}#puzzle-screen .puzzle-options-button span{display:none}#puzzle-screen .puzzle-table{--board-size:calc(100vw - 64px);height:calc(var(--board-size) + 266px);min-height:0}#puzzle-screen .board{top:48%;border-width:6px}#puzzle-screen .piece{left:var(--mobile-x);top:var(--mobile-y);width:clamp(52px,calc(100% / var(--loose-cols) - 15px),126px)}#puzzle-screen .tray-pages{bottom:3px}#puzzle-screen .board-footer{font-size:11px}#puzzle-screen .choice{flex-basis:135px}#puzzle-screen .choice img{width:115px;height:85px}#puzzle-screen .photo-choice .plus{height:85px}#puzzle-screen .chooser{margin-top:15px}}
@media(max-height:600px) and (min-width:601px){#puzzle-screen .intro{display:none}#puzzle-screen .puzzle-table{--board-size:calc(100dvh - 240px);height:calc(var(--board-size) + 40px)}#puzzle-screen .board-heading h2{font-size:18px}#puzzle-screen .board-footer{margin-top:4px}#puzzle-screen .chooser{margin-top:14px}}
@media(prefers-reduced-motion:reduce){.puzzle-fit i{animation:none;opacity:0}.piece.puzzle-settle{transition:none!important}#puzzle-screen .slot{transition:none}}
#puzzle-screen .puzzle-table.picture-enter{animation:puzzle-picture-enter .24s ease-out}@keyframes puzzle-picture-enter{from{opacity:.55}to{opacity:1}}@media(prefers-reduced-motion:reduce){#puzzle-screen .puzzle-table.picture-enter{animation:none}}
@media(min-width:601px){#puzzle-screen .piece{width:min(clamp(58px,calc(var(--board-size) / var(--puzzle-cols) * .79),210px),calc((var(--board-size) + 52px) / var(--side-rows) * .78))}}
@media(min-width:601px){#puzzle-screen .play-card:has(.reference:not([hidden])) .puzzle-table{--board-size:min(52vw,calc(100dvh - 352px),500px)}}
@media(max-height:600px) and (min-width:601px){#puzzle-screen .play-card:has(.reference:not([hidden])) .puzzle-table{--board-size:calc(100dvh - 310px)}}
#puzzle-screen .board.peeking .slot{opacity:1}#puzzle-screen .board.peeking .slot .cut-line{opacity:.3}
/* Clipping must not create a hidden scroll container when a piece/slot receives focus. */
#puzzle-screen .board,#puzzle-screen .puzzle-table{overflow:clip}
/* A soft open activity surface, with the picture assembled directly on it. */
#puzzle-screen{max-width:1440px}
#puzzle-screen .play-card{background:transparent;border:0;box-shadow:none;padding:4px}
#puzzle-screen .puzzle-table{border:0;border-radius:28px;background:radial-gradient(circle at 12% 20%,#ffffff24 0 18px,transparent 19px),radial-gradient(circle at 85% 75%,#ffffff20 0 25px,transparent 26px),linear-gradient(155deg,#9aeafa,#b7d4ff 52%,#c5a8f4);background-size:180px 170px,230px 210px,100% 100%;box-shadow:inset 0 2px 0 #ffffff88;--board-size:min(52vw,calc(100dvh - 240px),620px);height:calc(var(--board-size) + 60px)}
#puzzle-screen .puzzle-table:before{display:none}
#puzzle-screen .board{border:0;border-radius:5px;background:#ffffff14;box-shadow:0 5px 9px #695c8c22}
#puzzle-screen .piece{filter:drop-shadow(0 4px 2px #65578566)}
#puzzle-screen .board.complete{box-shadow:0 0 0 3px #fff9,0 8px 18px #65578544}
#puzzle-screen .board-footer{padding:0 10px}
@media(max-width:600px){#puzzle-screen .puzzle-table{--board-size:calc(100vw - 64px);height:calc(var(--board-size) + 266px)}}
@media(max-height:600px) and (min-width:601px){#puzzle-screen .puzzle-table{--board-size:calc(100dvh - 230px)}}

/* All loose pieces are present from the beginning, including 12 and 24 pieces. */
#puzzle-screen .puzzle-table[data-all-pieces=dense]{min-height:340px}
#puzzle-screen .puzzle-table[data-all-pieces=dense] .piece{width:max(44px,min(calc(var(--board-size)/var(--puzzle-cols)*.79),calc((100% - var(--board-size))/4 - 12px)))}
#puzzle-workspace[hidden],#puzzle-gallery[hidden]{display:none}
.puzzle-gallery{padding:16px 8px 30px}.puzzle-gallery-heading{display:flex;gap:20px;justify-content:space-between;align-items:center;margin:10px 0 24px}.puzzle-gallery-heading h1{font-size:clamp(26px,3.5vw,40px);margin:7px 0;color:#69509d}.puzzle-gallery-heading p{margin:8px 0;color:#6d7295;font-weight:800}.puzzle-gallery-heading button{padding:12px 18px;min-height:50px;border:3px solid white;border-radius:19px;background:#fff0b6;color:#71568f;box-shadow:0 4px #d8bf84;font-weight:900;white-space:nowrap}.puzzle-gallery-pictures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.puzzle-gallery-picture{min-width:0;padding:9px;border:4px solid white;border-radius:24px;background:linear-gradient(#fffbec,#e9e3f8);box-shadow:0 5px #b7a9ce;touch-action:manipulation;color:#624982;font:inherit;font-weight:900;transition:transform .15s}.puzzle-gallery-picture:hover{transform:translateY(-3px)}.puzzle-gallery-picture:focus-visible{outline:4px solid #e4b755;outline-offset:3px}.puzzle-gallery-picture img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px}.puzzle-gallery-picture strong{display:block;margin:10px 3px 5px;font-size:17px}.puzzle-gallery-upload>span{display:grid;place-items:center;aspect-ratio:1;font-size:70px;color:#9879b4}.puzzle-gallery-upload small{display:block;font-size:12px;margin-bottom:10px}
@media(max-width:850px){.puzzle-gallery-pictures{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media(max-width:600px){#puzzle-screen .puzzle-table[data-all-pieces=dense] .piece{width:calc(100% / 6 - 7px)}#puzzle-screen .puzzle-table[data-all-pieces=dense] .board{top:50%}.puzzle-gallery{padding:8px 0 20px}.puzzle-gallery-heading{align-items:flex-start;gap:8px;flex-wrap:wrap}.puzzle-gallery-heading button{font-size:13px;min-height:44px}.puzzle-gallery-pictures{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.puzzle-gallery-picture{padding:7px;border-radius:20px}.puzzle-gallery-picture strong{font-size:15px}}
@media(prefers-reduced-motion:reduce){.puzzle-gallery-picture{transition:none}}