.building-table,.peg-workshop{position:relative;isolation:isolate;width:100%;aspect-ratio:1.6;min-height:220px;border-radius:28px;overflow:hidden;background:linear-gradient(#eaf2daaa,#f5dab585),url('art/story-5.png') 100% 100%/200% 200%;box-shadow:inset 0 0 0 2px #fff6d677}
.building-table:after,.peg-workshop:after{content:'';position:absolute;z-index:-1;inset:66% 0 0;background:repeating-linear-gradient(0deg,#b7815255 0 2px,transparent 2px 40px),linear-gradient(#ebc492,#ce9b69);border-top:7px solid #edc89e;transform:perspective(500px) rotateX(8deg)}
#buildArk{position:absolute;inset:3% 7% 0}#buildArk svg{height:100%;width:100%;filter:drop-shadow(0 7px 3px #603e2c22)}
.build-slot{position:absolute;background:#fff7d333;border:3px dashed #ffefab;border-radius:12px;padding:0;box-shadow:0 0 0 4px #fff4ba55;min-height:44px;min-width:44px;transition:background .2s}
.build-slot[data-shape=rectangle]{left:31%;top:43%;width:38%;height:27%}.build-slot[data-shape=triangle]{left:39%;top:17%;width:22%;height:24%;clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:0}.build-slot[data-shape=circle]{left:44%;top:46%;width:12%;height:18%;border-radius:50%}.build-slot[data-shape=done]{display:none}.build-slot.ready{background:#fff0a566;outline:4px solid #fae18b}
.building-pieces{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}.building-pieces button{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:10px;background:#fffbed;border:3px solid #e4d3ac}.building-pieces svg{width:100%;height:auto;max-height:112px}.building-pieces span{font-size:clamp(13px,3vw,20px)}.building-pieces .picked{border-color:#58876b;background:#e9f1d9}.building-pieces button:disabled{opacity:.3}
.peg-workshop{aspect-ratio:1.35}.toy-door{position:absolute;inset:8% 25% 12%;border-radius:60px 60px 9px 9px;border:6px solid #835734;background:repeating-linear-gradient(90deg,transparent 0 31%,#6b432d66 31% 32%,#f9d4a066 32% 33%),linear-gradient(110deg,#f3cb91,#bc7e46 60%,#9d6238);box-shadow:inset 4px 3px 0 #ffe4b5,9px 12px 9px #65442f44;transform:rotate(-5deg)}
.door-brace{position:absolute;inset:19% 13%;transform:rotate(25deg);border-radius:6px;background:linear-gradient(90deg,#e8b782,#bd804b);box-shadow:2px 3px 4px #6e3f2a55;border:2px solid #b27b4c}
.wood-peg{position:absolute;width:55px;height:55px;min-height:55px;padding:0;border-radius:50%;background:#704d34;border:3px solid #e5b479;box-shadow:inset 1px 2px 4px #3d281f77;z-index:1}.wood-peg:nth-of-type(1){top:19%;left:26%}.wood-peg:nth-of-type(2){top:44%;left:39%}.wood-peg:nth-of-type(3){top:69%;left:52%}.wood-peg span{position:absolute;inset:2px;border-radius:50%;background:radial-gradient(ellipse at 35% 30%,#ffe0a8,#bd8349 72%,#8b572f);border:2px solid #ce985c;box-shadow:5px 8px 2px #57382388;transform:translate(-4px,-9px);transition:transform .4s,box-shadow .4s}.wood-peg.seated{opacity:1}.wood-peg.seated span{transform:translate(0,0);box-shadow:0 0 1px #57382388}.wood-peg.glow{outline:5px solid #f5da80;outline-offset:3px}.door-handle{position:absolute;right:6%;top:42%;width:17px;height:35px;border:5px solid #835b36;border-radius:50%}.toy-door.finished{animation:door-ready .7s ease both}@keyframes door-ready{50%{transform:rotate(0) scale(1.03)}}
@media(max-width:420px){.building-table{min-height:210px}.building-pieces{gap:7px}.building-pieces button{padding:7px}.toy-door{inset:7% 20% 12%}.wood-peg{width:48px;height:48px;min-height:48px}}
@media(prefers-reduced-motion:reduce){.toy-door.finished{animation:none}.wood-peg span{transition:none}}