html{scrollbar-gutter:stable}
@supports not (scrollbar-gutter:stable){html{overflow-y:scroll}}
body{margin:0}
.seesaw-app{--ink:#4c2911;--forest:#255524;--angle:0deg;color:var(--ink);font-family:system-ui,'Meiryo',sans-serif;font-weight:700;line-height:1.65;min-height:calc(100svh - var(--dm-common-header-height,58px));background:#b9d684 url('./images/01-title-background.webp') center/cover no-repeat;padding:14px 18px 22px;box-sizing:border-box;overflow:clip}
.seesaw-app[data-screen=play]{background-image:url('./images/02-game-background.webp')}.seesaw-app *,dialog *{box-sizing:border-box}.seesaw-app [hidden],dialog [hidden]{display:none!important}.seesaw-app section{margin:0}.seesaw-app button,dialog button{font:inherit;cursor:pointer;touch-action:manipulation;color:inherit}.seesaw-app button:disabled,dialog button:disabled{cursor:default;opacity:.58}.seesaw-app :focus-visible,dialog :focus-visible{outline:3px solid #853d05;outline-offset:4px}.seesaw-app p,.seesaw-app h1,.seesaw-app h2,.seesaw-app h3{margin:0}.title-screen,.result-screen{max-width:1150px;margin:auto!important;text-align:center}.title-screen h1{line-height:0}.title-logo{width:min(560px,75vw);height:auto;max-height:240px;object-fit:contain}.wood-sign{background:url('./images/14-wood-sign-blank.webp') center/100% 100% no-repeat;text-shadow:0 1px #fff8dd}.tagline{max-width:670px;margin:0 auto!important;padding:18px 35px;font-size:clamp(17px,2vw,24px);min-height:58px}.wood-button{border:0;background-color:transparent;background-position:center;background-repeat:no-repeat;background-size:100% 100%;min-height:64px;min-width:160px;padding:12px 30px 16px;font-weight:800!important;font-size:23px!important;filter:drop-shadow(0 3px 1px #42200f24);transition:filter .15s}.wood-button:hover{filter:brightness(1.06) drop-shadow(0 3px 1px #42200f24)}.wood-button.green{background-image:url('./images/11-button-green-blank.webp');color:#fffce5;text-shadow:0 2px 1px #19380d}.wood-button.cream{background-image:url('./images/12-button-cream-blank.webp')}.wood-button.orange{background-image:url('./images/13-button-orange-blank.webp')}.title-actions{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}.title-actions .wood-button{min-width:235px;min-height:77px;font-size:30px!important}.title-bottom{display:flex;justify-content:center;align-items:center;gap:18px;margin:10px 0 6px}.title-bottom>span,.credits-link,.portrait-note{background:#fffbeaeb;border-radius:12px;padding:6px 12px}.utility{background:#fffbed;border:2px solid #a9854b;border-radius:13px;padding:8px 14px;min-height:44px;font-size:14px;box-shadow:0 2px 0 #75562c30}.seesaw-app [data-sound]{min-width:100px}.credits-link{color:#4c2911;font-size:13px;display:inline-block}.notice:empty{display:none}.notice{padding:10px;background:#fffbeeea;border-radius:10px;text-align:center;max-width:720px;margin:8px auto!important}.portrait-note{display:none;font-size:12px}.play-screen{max-width:1280px;margin:auto!important}.play-heading{display:grid;grid-template-columns:220px 1fr 120px;gap:18px;align-items:center}.mini-logo{width:100%;height:auto;max-height:94px;object-fit:contain}.play-heading h2{font-size:clamp(18px,2.1vw,27px);padding:20px 30px;text-align:center;line-height:1.5;min-height:84px;display:grid;place-content:center}.counter{background:url('./images/12-button-cream-blank.webp') center/100% 100%;text-align:center;padding:20px 10px;font-size:20px;white-space:nowrap}.counter strong{font-size:30px;color:var(--forest)}.top-controls{display:flex;gap:8px;justify-content:flex-end;align-items:center;margin:5px 0}.instruction{text-align:center;background:#fffbece8;max-width:780px;border-radius:15px;padding:8px 12px;margin:0 auto!important;font-size:16px;min-height:40px}
.board-scroll{overflow:visible;width:100%;border-radius:16px;scrollbar-color:#8b672e #fff1cd;scrollbar-width:thin}.assembly{container-type:inline-size;position:relative;width:100%;min-width:0;height:380px;--animal-height:clamp(92px,10cqw,112px);--angle:0deg;--beam-y:62%}.title-board .assembly{height:320px;--beam-y:55%;--animal-height:clamp(92px,12cqw,138px)}.beam{position:absolute;left:5%;width:90%;top:var(--beam-y);aspect-ratio:2078/171;transform:rotate(var(--angle));transform-origin:50% 50%;transition:transform .55s cubic-bezier(.25,.8,.3,1);z-index:2}.beam-wood{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.support{position:absolute;left:50%;top:calc(var(--beam-y) + 3.5cqw);width:100px;height:auto;transform:translateX(-50%);z-index:1}.axle{position:absolute;left:50%;top:calc(var(--beam-y) + 3.7cqw);width:33px;height:33px;transform:translate(-50%,-50%);z-index:4;pointer-events:none}.pivot-label{position:absolute;top:calc(var(--beam-y) + 96px);left:50%;transform:translateX(-50%);font-size:13px;z-index:5;white-space:nowrap;background:#ffe4ab;border-radius:5px;padding:2px 6px}.seat{position:absolute;top:3px;transform:translateX(-50%);width:clamp(48px,6.5cqw,68px);height:44px;display:grid;place-content:center;border:2px solid transparent;border-radius:8px;background:#fff3d32b;color:#4b290d;font-size:27px!important;font-weight:800!important;z-index:3;padding:0}.seat.available{background:#fff5cdde;border:2px dashed #276d26}.seat.available:before{content:'↓';position:absolute;top:-26px;left:0;right:0;text-align:center;font-size:20px;color:#245027}.seat.banned{background:repeating-linear-gradient(135deg,#76665735 0 5px,#fff1d566 5px 10px);font-size:20px!important}.seat.occupied{background:transparent}.seat .ban{font-size:13px;margin-left:3px}.actor{position:absolute;bottom:calc(100% - 12px);width:0;height:0;z-index:4}.upright{position:absolute;bottom:0;left:0;transform:rotate(calc(-1 * var(--angle)));transform-origin:0 100%;transition:transform .55s cubic-bezier(.25,.8,.3,1)}.animal{position:absolute;bottom:0;left:0;width:clamp(54px,7.7cqw,90px);height:calc(var(--animal-height) * var(--animal-scale,1));border:0;background:none;padding:0;transform:translateX(-50%);border-radius:13px}.sprite{position:absolute;left:50%;bottom:0;height:100%;width:auto;max-width:none;transform:translate(calc(-100% * var(--anchor-x,.5)),calc(100% * (1 - var(--anchor-y,.94))));pointer-events:none}.animal.selected{outline:3px solid #225c27;outline-offset:5px;background:#fffbe94a}.selected-tag{position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);font-size:11px;white-space:nowrap;background:#2c6233;color:white;border-radius:5px;padding:2px 4px;z-index:6}.weight{position:absolute;left:50%;bottom:calc(100% + 1px);transform:translateX(-50%);background:url('./images/16-weight-bubble-blank.webp') center/100% 100% no-repeat;min-width:56px;height:32px;text-align:center;padding:1px 5px 8px;font-size:20px;font-weight:850;line-height:1.2;pointer-events:none;color:#264d20}.fixed-mark{position:absolute;bottom:calc(100% + 32px);left:50%;transform:translateX(-50%);font-size:10px;white-space:nowrap;padding:1px 3px;border-radius:4px;background:#fff4d6;border:1px solid #74512d;z-index:7}.animal[aria-disabled=true]{cursor:default}.assembly.solved .animal{animation:happy .45s ease-in-out 1}.feedback{min-height:85px;position:relative;max-width:1030px;text-align:center;margin:0 auto 10px;padding:8px 180px 8px 12px;background:#fffceadf;border-radius:18px;border:2px solid #e2cc96;display:flex;flex-direction:column;justify-content:center;gap:3px}.feedback:has(#next[hidden]){padding-right:12px}#balance-status{font-size:22px;color:#275825}#learning{font-size:15px}.equation{font-size:15px;font-variant-numeric:tabular-nums}.feedback #next{position:absolute;right:10px;top:50%;transform:translateY(-50%);min-width:148px;min-height:64px}.tray-panel{display:flex;align-items:center;justify-content:center;gap:14px;background:#ebbd80ed;border:5px solid #d4a469;box-shadow:inset 0 0 0 2px #fff3d3;border-radius:23px;padding:12px 16px;max-width:1150px;margin:auto!important}.tray-panel h3{font-size:20px;white-space:nowrap}.tray-panel h3 small{display:block;font-size:11px;margin-top:4px}.tray{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}.tray-card{position:relative;width:84px;height:104px;padding:8px 5px 5px;background:url('./images/15-animal-card-blank.webp') center/100% 100%;border:0;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:end;gap:0}.tray-card img{height:calc(45px * var(--animal-scale,1));max-width:67px;object-fit:contain}.tray-card strong{font-size:13px;line-height:1.4}.tray-card .tray-weight{position:absolute;right:2px;top:1px;border:2px solid #ffefcc;border-radius:50%;background:#41672f;color:#fff;width:25px;height:25px;display:grid;place-items:center;font-size:16px}.tray-card.selected{outline:3px solid #255d2a;outline-offset:2px}.tray-card .placed-check{position:absolute;left:4px;top:4px;font-size:12px;background:#fff6d2;border-radius:5px;padding:0 3px}.selection-controls,.question-controls{display:flex;flex-direction:column;gap:6px}.question-controls{flex-direction:row;flex-wrap:wrap}.question-controls .wood-button{min-width:140px;font-size:18px!important;min-height:55px;padding:8px 18px 12px}.hint-panel{margin:10px auto 0!important;max-width:900px;background:#fffbe8;border:2px solid #af7a31;border-radius:14px;padding:14px 20px;line-height:1.8}.result-screen{padding:30px 0}.result-logo{width:min(460px,85vw)}.result-screen h2{font-size:38px;max-width:570px;margin:5px auto 15px!important;padding:30px 20px}.celebration{display:flex;align-items:end;justify-content:center;gap:14px;margin:24px 0}.celebration img{height:calc(133px * var(--animal-scale,1));width:auto;max-width:none;flex:none;object-fit:contain}.reflection{font-size:26px;margin-bottom:12px!important}.result-screen>p{background:#fff9e5e8;border-radius:14px;width:fit-content;margin:12px auto!important;padding:10px 24px}.result-screen .title-actions{margin-top:22px}dialog{max-width:min(650px,92vw);max-height:90svh;overflow:auto;background:#fff9e8;color:#4c2911;border:4px solid #ba8b4b;border-radius:24px;padding:25px;font-weight:700;line-height:1.9}dialog::backdrop{background:#1e2c1f80}dialog h2{text-align:center;color:#33592b}dialog form{text-align:center}dialog p{margin:14px 0}dialog .title-actions .wood-button{min-width:190px;font-size:23px!important}.seesaw-app ruby rt,dialog ruby rt{font-size:.45em}
@keyframes happy{50%{transform:translate(-50%,-5px)}}
@media(max-width:1000px){.play-heading{grid-template-columns:145px 1fr 94px;gap:8px}.play-heading h2{padding:15px 22px;min-height:75px}.tray-panel{gap:10px;padding:10px;flex-wrap:wrap}.tray-panel h3{font-size:16px}.question-controls .wood-button{min-width:125px}.assembly{height:360px}.title-board .assembly{height:310px}.title-logo{max-height:215px}.counter{font-size:17px}.counter strong{font-size:25px}}
@media(max-width:650px){.seesaw-app{padding:9px 8px 18px}.title-logo{width:92%;max-height:220px}.tagline{font-size:16px;padding:15px 24px}.play-heading{grid-template-columns:115px 1fr 75px;gap:4px}.play-heading h2{font-size:16px;padding:12px 17px;min-height:75px}.counter{font-size:15px;padding:17px 5px}.counter strong{font-size:23px}.instruction{font-size:13px}.assembly{height:350px}.title-board .assembly{height:295px}.title-actions{gap:7px}.title-actions .wood-button{min-width:145px;min-height:57px;font-size:21px!important;padding:10px 20px 14px}.title-bottom{flex-wrap:wrap;gap:6px;font-size:13px}.portrait-note{display:block}.top-controls{flex-wrap:wrap}.top-controls .portrait-note{margin-right:auto}.feedback{padding:10px;min-height:120px}.feedback #next{position:static;transform:none;align-self:center}.tray-panel{padding:10px 6px;gap:8px}.tray-panel h3{width:100%;text-align:center}.tray-panel h3 small{display:inline;margin-left:8px}.selection-controls{flex-direction:row}.question-controls{justify-content:center}.tray-card{width:75px;height:96px}.tray-card img{height:calc(41px * var(--animal-scale,1))}.tray{gap:4px}.celebration{gap:4px}.celebration img{height:calc(83px * var(--animal-scale,1))}.reflection{font-size:20px}.result-screen h2{font-size:30px}.hint-panel{padding:10px;font-size:14px}.result-screen{padding-top:14px}dialog{padding:16px;font-size:14px}}
@media(max-width:390px){.play-heading{grid-template-columns:1fr 74px}.mini-logo{display:none}.play-heading h2{font-size:16px}.tray-card{width:65px;height:92px}.tray-card strong{font-size:12px}.top-controls .portrait-note{width:100%;text-align:center}.utility{padding:8px 10px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.seesaw-app *,dialog *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Loading status must not resize the cover background or toggle the page scrollbar. */
#load-message{position:fixed;z-index:101;left:50%;bottom:14px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);margin:0!important;pointer-events:none}

/* Keep the whole lever in view; seats on the beam are the touch targets. */
.seat-picker{display:none!important}
@media(max-width:650px){
 .play-screen{display:flex;flex-direction:column}
 .board-scroll{order:1}
 .tray-panel{order:2;width:100%}
 .seat-picker{order:3;width:100%}
 .feedback{order:4;width:100%}
 .hint-panel{order:5;width:100%}
 .assembly{height:clamp(220px,38vw,250px);--animal-height:clamp(42px,13cqw,65px);--beam-y:58%}
 .title-board .assembly{height:205px;--animal-height:clamp(38px,12cqw,70px);--beam-y:55%}
 .beam{left:4%;width:92%}
 .support{width:60px}
 .axle{width:21px;height:21px}
 .pivot-label{top:calc(var(--beam-y) + 62px);font-size:11px}
 .seat{top:0;width:8.8cqw;height:32px;font-size:18px!important;border-radius:5px}
 .seat.banned{font-size:16px!important}
 .seat .ban{font-size:11px;margin-left:0}
 .seat.available:before{font-size:15px;top:-21px}
 .actor{bottom:calc(100% - 4px)}
 .animal{width:9cqw;min-width:24px;border-radius:6px}
 .weight{min-width:29px;height:23px;font-size:15px;padding:1px 3px 5px}
 .fixed-mark{bottom:calc(100% + 24px);font-size:9px;padding:0 2px}
 .selected-tag{font-size:9px;padding:1px 2px}
 .feedback{min-height:85px}
}

/* The scenery's ground follows the fixed support even when controls make the page taller. */
.seesaw-app:is([data-screen=title],[data-screen=play]){
 --scenery-image:url('./images/01-title-background.webp');
 background-color:#e6bd87;
 background-image:linear-gradient(to bottom,transparent var(--scenery-fade-start,100%),#e6bd87 var(--scenery-fade-end,100%)),var(--scenery-image);
 background-size:100% 100%,auto var(--scenery-height,100%);
 background-position:center,center var(--scenery-top,0px);
}
.seesaw-app[data-screen=play]{--scenery-image:url('./images/02-game-background.webp')}
.assembly{--support-width:100px;--support-height:calc(var(--support-width) * 325 / 340)}
.support{width:var(--support-width);height:var(--support-height)}
.pivot-label{left:calc(50% + var(--support-width) * .6 + 8px);top:calc(var(--beam-y) + 3.5cqw + var(--support-height) - 26px);transform:none}
.assembly:after{content:'';position:absolute;left:50%;top:calc(var(--beam-y) + 3.5cqw + var(--support-height) - 8px);width:calc(var(--support-width) * 1.7);height:12px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,#49301c70 0%,#63412138 45%,#63412100 72%);pointer-events:none;z-index:0}
@media(max-width:650px){.assembly{--support-width:60px}}

/* Completion and hints must be usable without hunting below the board. */
.play-screen:has(.assembly.solved) .tray-panel{display:none}
.feedback:has(#next[hidden]){display:none}
.feedback:not(:has(#next[hidden])){padding:12px 14px calc(94px + env(safe-area-inset-bottom));margin-bottom:0}
.feedback #next{position:fixed;z-index:30;left:12px;right:12px;top:auto;bottom:max(10px,env(safe-area-inset-bottom));transform:none;width:calc(100% - 24px);max-width:480px;min-height:60px;margin:0 auto;filter:drop-shadow(0 2px 5px #42200f55)}
#hint-dialog{box-sizing:border-box;width:min(480px,calc(100% - 24px));max-width:calc(100% - 24px);max-height:calc(100dvh - 32px);padding:18px}
#hint-dialog h2{margin:0 0 10px;font-size:22px}
#hint-dialog p{margin:0 0 14px;font-size:17px;line-height:1.9}
#hint-dialog .wood-button{min-width:0;width:100%;font-size:20px!important}
@media(max-width:650px){.seat{height:44px;top:-5px}.play-screen:has(.assembly.solved) .feedback{order:2}}