/* The puzzle lives in the trees; the supply shelf stays below the bridge. */
:root{--bridge-y:clamp(300px,46vh,455px);--unit:clamp(56px,6.2vw,88px)}
.game{min-height:560px;background-image:url('assets/art-v3/bg-treetops-landscape.webp')}
.game:after{background:radial-gradient(ellipse at 50% 44%,#fff6d947 0,transparent 53%)}
.board-wrap{inset:0;display:block;pointer-events:none}
.board{width:100%;height:100%;min-height:0;max-width:none;margin:0;padding:0;display:block;overflow:visible;background:none;border:0;border-radius:0;box-shadow:none;filter:none;pointer-events:none}
.board:before{display:none}
.board button,.bridge-scene[aria-disabled="false"]{pointer-events:auto}
.board.success-glow{animation:none}
.guide{left:28px;top:116px;width:min(620px,calc(100% - 250px));height:144px;align-items:center}
.guide-button{width:128px;height:128px}
.speech{flex:1;min-width:0;min-height:144px;padding:38px 86px 30px 52px;font-size:26px;line-height:1.2;max-width:490px;margin-left:-8px;overflow-wrap:break-word}
.hero-zone{right:24px;top:calc(var(--bridge-y) - 176px);bottom:auto;width:178px;height:178px}
.hero{bottom:0}
.hero-zone:after{display:none}
.helper{top:calc(var(--bridge-y) - 95px);left:22px;right:auto;bottom:auto;width:90px;height:90px}
.level-track{position:absolute;left:auto;right:22px;top:3px;transform:none;gap:12px}
.level-dot{width:44px;height:48px;font-size:17px}
.round-track{top:104px;bottom:auto;left:auto;right:24px;transform:none;padding:7px 20px;gap:12px;background:linear-gradient(#fffbea,#f5dfaa);border:2px solid #d4a65f;border-radius:30px;box-shadow:0 4px 0 #92623355,0 8px 20px #533e2722}
.round-dot,.round-dot.complete{width:34px;height:34px}
.round-dot{opacity:.45}
.round-dot.complete{opacity:1}
.model-wrap{position:absolute;left:50%;top:calc(var(--bridge-y) + 51px);transform:translateX(-50%);height:62px;max-width:calc(100% - 36px)}
.model-bridge{height:62px;padding:4px 16px;border:3px solid #a77447;background:linear-gradient(#fff8db,#edd2a0);box-shadow:0 5px 0 #6a492f44,0 8px 18px #5a46252a}
.model-bridge .twig{height:48px}
.bridge-scene{position:absolute;top:calc(var(--bridge-y) - 80px);left:0;width:100%;height:160px;--span-half:calc(var(--target-units) * var(--unit) / 2)}
.branch-end{top:calc(50% - 91px);height:190px;width:calc(50% - var(--span-half));border:0;border-radius:0;box-shadow:none;background:url('assets/art-v3/prop-mossy-branch.webp') center/100% 100% no-repeat;filter:drop-shadow(0 12px 9px #392c2240)}
.branch-end.left{left:0;transform:none;border-radius:0}
.branch-end.right{right:0;transform:scaleX(-1);border-radius:0}
.branch-end:before,.branch-end:after{display:none}
.bridge-slot{width:calc(var(--target-units) * var(--unit));height:82px;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.bridge-slot:before{bottom:0;height:10px;background:linear-gradient(#fff6c9,#e7b54f);border:2px solid #96682f;box-shadow:0 3px 0 #75522b44}
.bridge-slot:after{top:24px;height:34px;bottom:auto;border:2px dashed #f7d478;border-radius:12px;background:repeating-linear-gradient(90deg,#fff4c578 0,#fff4c578 calc(var(--unit) - 2px),#b89a5366 calc(var(--unit) - 2px),#b89a5366 var(--unit));box-shadow:0 0 28px #fff4be88;opacity:.8}
.bridge-slot.complete{box-shadow:none}
.bridge-slot.complete:after{border-style:solid;border-color:#ffe497;background:#ffe69a4d}
.fixed-strip,.chosen-strip{position:relative;z-index:2;height:100%}
.twig,.twig[data-units]{min-width:0;height:82px;background:none;filter:drop-shadow(0 5px 3px #432b254d)}
.twig:before{top:50%;transform:translateY(-50%);height:34px;border:0;border-radius:999px;background:transparent url('assets/art-v2/prop-straight-stick.webp') 50% 49.3% / 103.8% 426% no-repeat;box-shadow:inset 0 2px 1px #fff1b45c}
.twig:after{display:none}
.fixed-strip .twig{filter:brightness(.86) saturate(.8) drop-shadow(0 3px 3px #432b254d)}
.empty-leaf{display:none}
.tray{position:absolute;left:50%;bottom:112px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 90px);height:142px;min-height:0;gap:18px;padding:18px 26px 26px;isolation:isolate;border:0;overflow:visible}
.tray:before{display:block;content:"";inset:4px -10px -2px;z-index:-2;height:auto;transform:none;border:26px solid transparent;border-image:url('assets/art-v2/ui-board.webp') 190 fill / 26px / 0 stretch;background:none;box-shadow:0 15px 23px #4639233b;border-radius:28px}
.tray:after{display:block;content:"";position:absolute;left:14px;right:14px;top:17px;bottom:21px;height:auto;z-index:-1;background:linear-gradient(#fff9e8,#f4e2b6);border-radius:20px;filter:none;box-shadow:inset 0 2px 7px #c69b5f55}
.piece-button{flex:0 0 auto;min-width:64px;height:90px;border:2px solid #bb8e4866;border-radius:20px;background:linear-gradient(#fffdf0e8,#f9e6b9e8);box-shadow:0 5px 0 #b2834940,inset 0 2px 0 #ffffffcc;transition:background .15s,box-shadow .15s,translate .15s}
.piece-button[data-units]{width:calc(var(--units) * var(--unit) + 22px)}
.piece-button:before,.piece-button:after{display:none}
.piece-button .twig{position:absolute;left:50%;top:3px;right:auto;width:calc(var(--units) * var(--unit));height:78px;transform:translateX(-50%)}
.piece-button:hover,.piece-button:focus-visible{background:linear-gradient(#fffef7,#ffe6a7);box-shadow:0 5px 0 #ac77465c,0 0 0 3px #ffe4a6;translate:0 -2px}
.piece-button.selected{border-color:#d49c33;background:linear-gradient(#fff9d8,#ffe09a);box-shadow:0 4px 0 #b77d3e77,0 0 0 3px #fff0b6}
.piece-count{position:absolute;left:50%;bottom:262px;transform:translateX(-50%);display:flex;gap:10px;padding:7px 15px;border:2px solid #c29a61;border-radius:22px;background:#fff5da;box-shadow:0 3px 0 #86623933;pointer-events:none}
.piece-count-slot{width:34px;height:14px;border:2px dashed #b18b50;border-radius:10px;background:#f4e5c5}
.piece-count-slot.filled{border-style:solid;border-color:#b68135;background:url('assets/art-v2/prop-straight-stick.webp') 50% 49.3% / 103.8% 426% no-repeat #e5b457}
.check-button{left:calc(50% + 53px);bottom:16px;width:86px;height:86px}
.clear-button{left:calc(50% - 94px);bottom:22px;width:72px;height:72px}
.skip-demo{top:calc(var(--bridge-y) - 90px);right:calc(50% - 36px);width:64px;height:64px}
.panel{max-width:620px}
.panel:before,#menuPanel .panel:before{border-image-source:url('assets/art-v2/ui-board.webp');border-image-slice:190;background:linear-gradient(145deg,#fffbec,#f1d7a3);border-radius:30px}
.panel h1,.panel h2{font-family:Georgia,serif;font-weight:900;color:#62432c;text-shadow:0 2px #fff3d2}
.highfive-art{width:260px;height:170px;object-fit:contain}
.level-reward-art{right:12px;bottom:14px}
@media(orientation:portrait),(max-width:700px){
 .game{background-image:url('assets/art-v3/bg-treetops-portrait.webp')}
 :root{--bridge-y:clamp(300px,43vh,395px);--unit:clamp(34px,9.5vw,46px)}
 .guide{left:9px;top:104px;width:calc(100% - 18px);height:94px}
 .guide-button{width:91px;height:91px}
 .speech{font-size:19px;min-height:104px;max-width:none;padding:24px 46px 16px 30px;margin-left:-7px}
 .hero-zone{right:9px;top:calc(var(--bridge-y) - 125px);width:125px;height:125px}
 .helper{left:8px;right:auto;top:calc(var(--bridge-y) + 52px);width:56px;height:56px}
 .level-track{top:61px;left:50%;right:auto;transform:translateX(-50%);gap:7px;padding:3px 12px 10px}
 .level-dot{width:29px;height:32px;font-size:13px}
 .round-track{top:203px;left:12px;right:auto;bottom:auto;padding:5px 14px;gap:8px}
 .round-dot,.round-dot.complete{width:27px;height:27px}
 .model-wrap{top:calc(var(--bridge-y) + 52px);height:44px}
 .model-bridge{height:44px;padding:2px 10px;border-width:2px}
 .model-bridge .twig{height:38px}
 .bridge-scene{top:calc(var(--bridge-y) - 60px);height:120px}
 .branch-end{top:calc(50% - 57px);height:120px;width:calc(50% - var(--span-half))}
 .branch-end.left{left:0}.branch-end.right{right:0}
 .bridge-slot{height:72px}
 .bridge-slot:after{top:22px;height:28px}
 .bridge-slot:before{height:8px}
 .twig,.twig[data-units]{height:72px}
 .twig:before{height:28px}
 .tray{bottom:109px;gap:8px;width:max-content;max-width:calc(100% - 22px);height:110px;padding:13px 9px 18px}
 .tray:before{inset:0 -2px;border-width:19px;border-image-width:19px}
 .tray:after{inset:11px 6px 17px}
 .piece-button{min-width:56px;height:75px;border-radius:16px}
 .piece-button[data-units]{width:calc(var(--units) * var(--unit) + 16px)}
 .piece-button .twig{top:0;height:70px}
 .piece-count{bottom:225px;padding:5px 12px;gap:8px}
 .piece-count-slot{width:28px;height:12px}
 .check-button{left:calc(50% + 42px);bottom:17px;width:76px;height:76px}
 .clear-button{left:calc(50% - 86px);bottom:23px;width:64px;height:64px}
 .skip-demo{top:calc(var(--bridge-y) - 44px);right:auto;left:16px;width:56px;height:56px}
 .highfive-art{width:210px;height:138px}
 .rune{width:38px}
}
@media(max-width:380px) and (max-height:700px){
 :root{--bridge-y:290px;--unit:34px}
 .guide{top:100px;height:90px}.guide-button{width:83px;height:83px}.speech{font-size:18px;min-height:104px;max-width:none}
 .hero-zone{top:calc(var(--bridge-y) - 105px);width:105px;height:105px}
 .round-track{top:198px;bottom:auto;padding:4px 13px}
 .tray{bottom:104px;height:108px}
 .piece-count{bottom:216px}
 .highfive-art{width:180px;height:115px}
}
@media(orientation:landscape) and (max-height:680px){
 :root{--bridge-y:280px;--unit:clamp(50px,5.5vw,72px)}
 .guide{top:90px;height:120px}.guide-button{width:100px;height:100px}.speech{font-size:22px;min-height:120px;padding:30px 70px 24px 42px}
 .hero-zone{width:140px;height:140px;top:calc(var(--bridge-y) - 140px)}
 .tray{bottom:96px;height:125px}.check-button{width:72px;height:72px;bottom:12px}.clear-button{bottom:17px;width:62px;height:62px}
 .piece-count{left:calc(50% + 210px);bottom:20px}
 .model-wrap{top:calc(var(--bridge-y) + 48px);height:44px}
 .model-bridge{height:44px;padding:2px 10px;border-width:2px}
 .model-bridge .twig{height:38px}
}
@media(prefers-reduced-motion:reduce){.piece-button{transition:none}}