/* Scoped, picture-only controls for the geometric assembly game. */
[data-game="picture-builder"]{padding:clamp(10px,2vw,24px);--builder-scale:1;--builder-ink:#4e6574;--builder-paper:#f3faf5;--builder-slot:#dbe5df;background:#f9fcf8;color:var(--builder-ink);overflow:visible}
.builder-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.builder-icon-button{width:56px;min-width:56px;height:56px;display:inline-flex;justify-content:center;align-items:center;border:1px solid #d6e5de;border-radius:19px;background:#fff;color:#497c70;cursor:pointer;box-shadow:0 3px 0 #d8e9df;text-decoration:none;touch-action:manipulation}
.builder-icon-button svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round}
.builder-dots{display:flex;justify-content:center;gap:6px;flex:1;min-width:0}
.builder-dots i{display:block;width:8px;height:8px;border-radius:50%;background:#ccdcd4}.builder-dots .is-current{background:#dcab55;outline:3px solid #f4dfab}.builder-dots .is-done{background:#78bda8}
.builder-board{position:relative;width:100%;max-width:600px;aspect-ratio:4/3;margin:0 auto;border-radius:28px;background:radial-gradient(ellipse at 30% 20%,#fffdf2,transparent 65%),var(--builder-paper);isolation:isolate}
.builder-scene{display:block;width:100%;height:100%;overflow:visible;color:var(--builder-slot)}
.builder-shape{color:var(--builder-slot);transition:color .4s,filter .25s}.builder-shape:not(.is-placed)>*{stroke:#b4c5bb;stroke-width:3;stroke-dasharray:7 7}
.builder-shape.is-hint,.builder-shape.is-drop-target,.builder-shape.is-demo-target{color:#c2d9c9;filter:drop-shadow(0 0 7px #b7d8ad)}
.builder-shape.is-hint{animation:builder-hint 1.9s ease-in-out infinite}
.builder-slot{position:absolute;transform:translate(-50%,-50%);min-width:56px;min-height:56px;padding:0;border:0;border-radius:16px;background:transparent;cursor:pointer;touch-action:manipulation}
.builder-slot:disabled{cursor:default;pointer-events:none}
.builder-piece{min-width:56px;min-height:56px;width:calc(var(--part-w)*var(--builder-scale)*1px + 12px);height:calc(var(--part-h)*var(--builder-scale)*1px + 12px);padding:6px;display:flex;align-items:center;justify-content:center;border:2px solid transparent;background:#ffffffc9;border-radius:16px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;box-shadow:0 3px 8px #35564a0b}
.builder-piece>svg{display:block;flex-shrink:0;width:calc(var(--part-w)*var(--builder-scale)*1px);height:calc(var(--part-h)*var(--builder-scale)*1px);filter:drop-shadow(0 3px 1px #35564a16);pointer-events:none}
.builder-piece[aria-pressed="true"]{border-color:#5eab95;background:#edf9f0;box-shadow:0 0 0 3px #86c8b12b}.builder-piece.is-dragging{opacity:.28}.builder-piece.is-used{display:none;pointer-events:none}
.builder-tray{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin:14px auto 0;padding:12px 8px;min-height:92px;max-width:660px;border:2px dashed #d7e7dd;border-radius:24px;background:#eaf3eb80}
.builder-tray[hidden]{display:none}
.builder-icon-button:focus-visible,.builder-slot:focus-visible,.builder-piece:focus-visible,.builder-level-preview:focus-visible,.builder-next-preview:focus-visible{outline:4px solid #447dce;outline-offset:3px}
.builder-drag-ghost,.builder-demo{position:fixed;z-index:10020;pointer-events:none;user-select:none;filter:drop-shadow(0 7px 9px #31554b33)}
.builder-drag-ghost>svg,.builder-demo>svg:first-child{display:block;width:100%;height:100%}
.builder-demo{opacity:.88}.builder-hand{position:absolute;left:45%;top:50%;width:45px;height:48px;filter:drop-shadow(0 2px 2px #38554b44)}
.builder-details{opacity:0;transition:opacity .6s}.is-complete .builder-details{opacity:1}
.is-complete[data-builder-scene="car"] .builder-assembled,.is-complete[data-builder-scene="train"] .builder-assembled{animation:builder-drive 2.6s ease-in-out infinite}
.is-complete[data-builder-scene="fish"] .builder-assembled{animation:builder-swim 3.5s ease-in-out infinite}
.is-complete[data-builder-scene="rocket"] .builder-assembled{animation:builder-lift 2.5s ease-in-out infinite}
.is-complete[data-builder-scene="robot"] .builder-assembled{transform-origin:300px 400px;animation:builder-wave 3s ease-in-out infinite}
.is-complete .builder-window{animation:builder-window 2.8s ease-in-out infinite}
.builder-finish{display:flex;justify-content:center;margin-top:10px}.builder-finish[hidden]{display:none}
.builder-next-preview{display:flex;align-items:center;justify-content:center;gap:12px;border:2px solid #c7e3d3;border-radius:26px;background:#fff8e8;min-height:104px;width:min(100%,320px);padding:6px 20px;cursor:pointer;touch-action:manipulation;box-shadow:0 4px 0 #d4e7da}
.builder-next-preview>svg{display:block;width:156px;height:112px}.builder-next-preview>span{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#65ab91;color:#fff}.builder-next-preview>span svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.builder-levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:14px 0}
.builder-level-preview{position:relative;min-height:110px;padding:10px;border:2px solid #dbe9de;border-radius:24px;background:var(--builder-paper);cursor:pointer;touch-action:manipulation}
.builder-level-preview>svg{display:block;width:100%;height:auto;aspect-ratio:4/3}.builder-level-preview:disabled{cursor:default}.builder-level-preview:disabled>svg{opacity:.35;filter:grayscale(.6)}
.builder-lock{display:flex;align-items:center;justify-content:center;position:absolute;width:40px;height:40px;bottom:8px;right:8px;border-radius:50%;background:#fff6;color:#6f8479}.builder-lock svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2}
.builder-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.builder-sparkles{position:absolute;inset:0;pointer-events:none;overflow:hidden}.builder-burst{position:absolute;width:1px;height:1px}.builder-burst svg{position:absolute;width:20px;height:20px;--angle:calc(var(--star-i)*72deg);transform:rotate(var(--angle)) translateY(-26px);animation:builder-star .7s ease-out both}
html:not(.white-mode) [data-game="picture-builder"]{--builder-ink:#d4e8df;--builder-paper:#263e3b;--builder-slot:#536d65;background:#1c302f}
html:not(.white-mode) .builder-board{background:radial-gradient(ellipse at 30% 20%,#324b41,transparent 65%),var(--builder-paper)}
html:not(.white-mode) .builder-icon-button{background:#2b4540;border-color:#476258;color:#b1d9c8;box-shadow:0 3px 0 #152b25}
html:not(.white-mode) .builder-piece{background:#395249}html:not(.white-mode) .builder-piece[aria-pressed="true"]{background:#456552}
html:not(.white-mode) .builder-tray{background:#233c3280;border-color:#486559}html:not(.white-mode) .builder-level-preview{border-color:#486559}html:not(.white-mode) .builder-next-preview{background:#36473a;border-color:#5f7c67;box-shadow:0 4px 0 #13291f}
@keyframes builder-hint{50%{color:#a9cba9;filter:drop-shadow(0 0 10px #cce4b7)}}
@keyframes builder-star{from{opacity:1;transform:rotate(var(--angle)) translateY(-14px) scale(.7)}to{opacity:0;transform:rotate(var(--angle)) translateY(-65px) scale(1.1)}}
@keyframes builder-drive{50%{transform:translateX(13px)}}@keyframes builder-swim{25%{transform:translate(10px,-7px)}75%{transform:translate(-10px,5px)}}@keyframes builder-lift{50%{transform:translateY(-10px)}}@keyframes builder-wave{25%{transform:rotate(2deg)}75%{transform:rotate(-2deg)}}@keyframes builder-window{50%{fill:#ffe391;filter:drop-shadow(0 0 7px #ffdd80)}}
@media(max-width:600px){.builder-levels{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.builder-toolbar{gap:7px}.builder-dots{gap:4px}.builder-dots i{width:6px;height:6px}.builder-tray{gap:10px;padding:10px 4px}.builder-piece{padding:4px;width:calc(var(--part-w)*var(--builder-scale)*1px + 8px);height:calc(var(--part-h)*var(--builder-scale)*1px + 8px)}.builder-board{border-radius:20px}}
@media(max-height:550px) and (orientation:landscape){.builder-play:not(.is-complete){display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px;align-items:center}.builder-tray{margin:0;gap:8px}.builder-piece{padding:4px}.builder-board{max-width:430px}}
@media(prefers-reduced-motion:reduce){[data-game="picture-builder"] *,[data-game="picture-builder"] *::before,[data-game="picture-builder"] *::after{animation:none!important;transition:none!important}.builder-burst svg{opacity:.8}.builder-demo{opacity:.7}}