*{box-sizing:border-box}body{margin:0;background:#e8eddb;color:#304c3e;font-family:system-ui,sans-serif}main{max-width:1100px;margin:20px auto;background:#fffaf0;border:1px solid #d6dbc6;border-radius:22px;overflow:hidden;box-shadow:0 12px 40px #314d3914}header,.intro,footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 28px}header{border-bottom:1px solid #e2dfcc}a{color:inherit;text-decoration:none}header strong{letter-spacing:3px}button{font:inherit;font-weight:650;border:1px solid #bdc7ae;border-radius:10px;padding:10px 18px;background:#f5f2e4;color:inherit;cursor:pointer}button:disabled{opacity:.45;cursor:default}button:focus-visible{outline:3px solid #bd793c;outline-offset:3px}#start,#ready,#cut,#next{background:#426b52;color:white;border-color:#426b52}h1{font-size:30px;margin:3px 0}h2{font-size:17px;margin:0}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:750;color:#8b714e;margin:0 0 6px}.scene svg{display:block;width:100%;max-height:260px}#doorLeaf{transform-box:fill-box;transform-origin:right;transition:transform .35s}#doorLeaf.open{transform:scaleX(.15)}.order{display:flex;gap:8px;flex-direction:column;padding:16px 28px;background:#e6ecd9}.order strong{font-size:22px}.order span{font-size:13px}.workbench{padding:20px 24px 8px;background:#ddc49c}.bench-scroll{overflow-x:auto;overflow-y:hidden;padding:0 42px 30px 0}.bench{display:flex;min-width:640px;height:160px;align-items:end}.machine{width:105px;flex-shrink:0;height:140px;background:#54796b;border:5px solid #3e6256;border-radius:12px 12px 2px 2px;position:relative;z-index:2;color:#fff5dc;text-align:center;padding:10px;font-weight:800;letter-spacing:4px;box-shadow:5px 6px 0 #755b3930}.blade{font-size:55px;line-height:60px;color:#d6ddcc}.slot{position:absolute;right:-5px;bottom:4px;width:10px;height:49px;background:#2c4337}.measuring{flex:1;min-width:0;padding-bottom:10px}#ruler{width:100%;height:80px;display:block;background:#fff2c9;overflow:visible}.track{height:42px;background:#ac916933;position:relative;border-bottom:5px solid #ae8b5c}#board{position:relative;height:32px;top:3px;width:16.666%;background:repeating-linear-gradient(3deg,#d6a464 0px,#d6a464 7px,#bd8b4c 8px,#e2b777 10px);border:1px solid #a2733c}#handle{position:absolute;right:-18px;top:-5px;width:38px;height:42px;padding:0;background:#f9edce;border:2px solid #805c35;touch-action:none;cursor:ew-resize}#board.retracting{width:0!important;transition:width .65s} .controls{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px;flex-wrap:wrap}.stack{margin:4px 28px;padding:14px;background:#eee7d8;border-radius:12px;min-height:120px}.stack>div:first-child{display:flex;justify-content:space-between}#boards{display:flex;gap:7px;flex-wrap:wrap;padding-top:12px}#boards button{background:repeating-linear-gradient(2deg,#dfb47a 0,#dfb47a 7px,#d0a367 8px,#e6bc83 10px);border-color:#aa7a47;border-radius:3px;font-size:14px;padding:8px 12px}#boards.returning{transform:translateX(-110%);opacity:0;transition:transform .7s,opacity .7s}#boards.loading{transform:translateY(-170px) scale(.35);opacity:0;transition:transform 1s,opacity 1s}#message{margin:12px 28px;min-height:26px;font-weight:600}footer{font-size:13px;padding-top:6px}footer button{font-size:17px;white-space:nowrap}.overlay{position:fixed;inset:0;background:#28463875;display:grid;place-items:center;padding:20px;z-index:10}.overlay section{text-align:center;max-width:560px;background:#fff9e9;border-radius:24px;padding:35px;box-shadow:0 20px 70px #193b3c40}.overlay p{line-height:1.7}[hidden]{display:none!important}@media(max-width:650px){main{margin:0;border-radius:0}header,.intro,footer{padding:12px 16px;gap:8px}header strong{font-size:14px;letter-spacing:1px}header button{padding:8px}h1{font-size:24px}.order{padding:12px 16px}.order strong{font-size:18px}.workbench{padding:12px 8px}.stack{margin:4px 12px}footer{flex-wrap:wrap}.controls{gap:6px}.controls button{padding:9px}#message{margin:12px 16px}}@media(prefers-reduced-motion:reduce){*{transition-duration:.01s!important}}
.blade{position:absolute;left:-8px;top:-98px;width:76px;height:76px;line-height:0;z-index:1;pointer-events:none}.blade-face{width:100%;height:100%;transform:perspective(240px) rotateY(52deg);filter:drop-shadow(3px 0 0 #657970)}#board{z-index:2}.blade svg{width:100%;height:100%;display:block}.sawdust{position:absolute;right:-29px;bottom:9px;color:#f6d69b;font-size:32px;opacity:0;pointer-events:none;z-index:4}.sawing .blade{animation:saw-lower 3.4s ease-in-out}.sawing .blade svg{animation:saw-spin .18s linear infinite}.sawing .sawdust{animation:saw-dust .24s linear 10;animation-delay:.5s}.sawing #board{animation:board-cut 3.4s ease-in-out}.sawing .slot{box-shadow:0 0 8px #ead49b}@keyframes saw-spin{to{transform:rotate(360deg)}}@keyframes saw-lower{0%,100%{transform:translateY(0)}20%{transform:translateY(35px)}35%,72%{transform:translateY(63px)}94%{transform:translateY(0)}}@keyframes saw-dust{0%{opacity:0;transform:translate(0,0)}30%{opacity:1}100%{opacity:0;transform:translate(27px,18px)}}@keyframes board-cut{0%,76%{transform:translateX(0);opacity:1}90%{transform:translateX(14px);opacity:1}100%{transform:translate(20px,15px);opacity:0}}@media(prefers-reduced-motion:reduce){.sawing .blade,.sawing .blade svg,.sawing .sawdust,.sawing #board{animation:none}.sawing .blade{transform:translateY(63px)}.sawing .slot{box-shadow:0 0 12px #fff2c9}}


/* Skinnen sidder på maskinen; armen og akslen følger klingens lodrette bevægelse. */
.saw-mount{position:absolute;left:-10px;top:-65px;width:19px;height:87px;border:3px solid #405e53;border-radius:5px;background:linear-gradient(90deg,#789489,#c0cdc4,#647e73);z-index:3;pointer-events:none;box-shadow:2px 2px 0 #304b4230}
.saw-mount:before,.saw-mount:after{content:"";position:absolute;left:4px;width:5px;height:5px;border-radius:50%;background:#304b42}.saw-mount:before{top:5px}.saw-mount:after{bottom:5px}
.blade:before{content:"";position:absolute;left:4px;top:32px;width:34px;height:12px;border:2px solid #405e53;border-radius:5px;background:linear-gradient(#a9bbb0,#6f8d7f);z-index:2}
.blade:after{content:"";position:absolute;left:33px;top:33px;width:10px;height:10px;border:2px solid #3e5b50;border-radius:50%;background:#c4cec4;z-index:3}

/* Hold den nederste halvdel bag træet, også når det afsavede bræt flyttes. */


/* To synkrone halvdele af samme klinge: træet ligger mellem bag- og forsiden. */
.blade-back{z-index:1;clip-path:inset(0 50% 0 0)}
.blade-front{z-index:3;clip-path:inset(0 0 0 50%)}

/* Nulpunktet flugter med savakslen, 30 px fra maskinens udløb. */
#ruler{margin-left:30px;width:calc(100% - 30px)}

/* Det afsavede stykke starter ved nulpunktet; indføringen står stille. */
#board{left:30px}
.uncut-stock{position:absolute;left:0;top:3px;width:30px;height:32px;z-index:2;background:repeating-linear-gradient(3deg,#d6a464 0px,#d6a464 7px,#bd8b4c 8px,#e2b777 10px);border:1px solid #a2733c;border-right:0}
/* Skjult samling før snittet; den nye endeflade vises først, når saven er igennem. */
#board{border-left-color:transparent}
.sawing #board{animation:board-cut 3.4s ease-in-out,cut-edge 3.4s steps(1,end)}
@keyframes cut-edge{0%{border-left-color:transparent}76%,100%{border-left-color:#a2733c}}
@media(prefers-reduced-motion:reduce){.sawing #board{animation:none}}
#sky,#hills,#sun,#nightSky{transition:fill 1.5s,opacity 1.5s,transform 1.5s ease-in-out}
main.sunset #sky{fill:#dfad91}main.sunset #hills{fill:#7f8268}
main.night #sky{fill:#26364f}main.night #hills{fill:#3c514e}main.night #sun{opacity:0}main.night #nightSky{opacity:1}
main.night .scene{background:#d8d3bd}
.sawing #board{animation-fill-mode:forwards}
#dayComplete{width:min(580px,calc(100% - 32px));padding:36px 28px;border:4px solid #d8b65e;border-radius:28px;text-align:center;background:#fff8df;color:#304c3e;box-shadow:0 20px 90px #142f4266;overflow:hidden}#dayComplete::backdrop{background:#152a4266;backdrop-filter:blur(2px)}#dayComplete[open]{animation:celebrate-in .5s ease-out}#completeTitle{font-size:clamp(36px,7vw,58px);color:#426b52;margin:12px 0}#dayComplete p{line-height:1.7}.celebration-stars{font-size:60px;color:#dab04d;letter-spacing:12px;animation:star-glow 1.5s ease-in-out infinite alternate}.little-stars{color:#c99c35;font-size:27px;letter-spacing:16px;margin:22px 0}.complete-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}#playAgain{background:#426b52;color:white;border-color:#426b52}@keyframes celebrate-in{from{opacity:0;transform:translateY(24px) scale(.9)}to{opacity:1;transform:none}}@keyframes star-glow{from{transform:scale(.95)}to{transform:scale(1.06)}}@media(prefers-reduced-motion:reduce){#dayComplete[open],.celebration-stars{animation:none}}