:root{font-family:'Trebuchet MS',system-ui,sans-serif;color:#33473e;background:#173f38}*{box-sizing:border-box}body{margin:0;min-height:100dvh;display:grid;place-items:center;padding:12px}button,a{font:inherit;-webkit-tap-highlight-color:transparent}button{cursor:pointer}.game-shell{width:min(1120px,100%);height:min(900px,calc(100dvh - 24px));min-height:570px;display:grid;grid-template-rows:52px 67px minmax(245px,1fr) 40px 174px 63px;background:#faf7ed;border-radius:22px;overflow:hidden;position:relative;box-shadow:0 22px 70px #09241f88;padding:0 22px}header{display:flex;align-items:center;justify-content:space-between;margin:0 -22px;padding:0 22px;background:#fff9df;border-bottom:3px solid #d8bf76;font-size:12px}header a{color:#385747;text-decoration:none}header strong{letter-spacing:2px}#progress{color:#74806d}.intro{display:flex;align-items:center;justify-content:space-between}.intro p,.overlay section>p:first-of-type{font-size:9px;letter-spacing:2px;font-weight:bold;color:#8c765d;margin:0 0 4px}.intro h1{margin:0;font-size:27px}.intro>span{font-size:12px;color:#6b756a}.workshop{position:relative;min-height:0;border:7px solid #af8358;border-bottom:12px solid #8b603e;border-radius:16px 16px 3px 3px;background:repeating-linear-gradient(90deg,#e8d9be 0 49px,#dfceb0 50px);padding:12px 94px 10px 16px;overflow:hidden}.door{position:absolute;right:12px;bottom:0;width:69px;height:88%;border:5px solid #805d42;background:#567565;display:grid;place-items:start center;padding-top:10px;color:#fff8df;font-size:8px}.door:before{content:'';position:absolute;inset:25px 8px 20px;background:#bcd5cd;border:3px solid #75573f}.door:after{content:'';position:absolute;left:8px;bottom:10px;width:7px;height:7px;border-radius:50%;background:#edc66f}.door span{z-index:1;background:#fff9e7;color:#526354;padding:3px}.door.open{transform-origin:right;animation:openDoor .6s ease-in-out}.door.open:before{filter:brightness(1.35)}#wall{height:100%;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);gap:8px}.station{display:grid;grid-template-columns:minmax(58px,1fr) minmax(54px,.75fr);align-items:center;justify-items:center;border-bottom:4px solid #ad895e;background:#f6ecd7;border-radius:9px;padding:4px;min-width:0}.slot{position:relative;border:2px dashed #baa88c;background:#d6cab4;color:#7f745f;display:grid;place-items:center}.analog-slot{width:57px;height:57px}.digital-slot{width:64px;height:34px;border-radius:7px;font:900 18px monospace}.slot.filled{border-style:solid;border-color:#7b956f;background:transparent}.slot.wrong{animation:hop .55s 2;border-color:#c75e55}.analog{position:relative;width:52px;height:52px;border:4px solid #6d5a46;background:#fffce9;display:block;color:#4a443d}.analog:before{content:'';position:absolute;left:50%;top:50%;width:3px;height:var(--minute,19px);background:#37423e;transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(var(--ma));border-radius:3px}.analog:after{content:'';position:absolute;left:50%;top:50%;width:4px;height:var(--hour,14px);background:#37423e;transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(var(--ha));border-radius:3px}.analog i{position:absolute;z-index:2;width:6px;height:6px;background:#b85b4f;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.round{border-radius:50%}.square{border-radius:7px}.octagon{clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%)}.diamond{transform:rotate(45deg) scale(.76)}.analog.diamond:before,.analog.diamond:after{transform:translate(-50%,-100%) rotate(calc(var(--a) - 45deg))}.analog.diamond:before{--a:var(--ma)}.analog.diamond:after{--a:var(--ha)}.oval{border-radius:50%;width:45px}.wide{border-radius:50%;width:58px;height:44px}.arch{border-radius:50% 50% 8px 8px}.drop{border-radius:50% 50% 50% 8px;transform:rotate(45deg) scale(.78)}.analog.drop:before,.analog.drop:after{transform:translate(-50%,-100%) rotate(calc(var(--a) - 45deg))}.analog.drop:before{--a:var(--ma)}.analog.drop:after{--a:var(--ha)}.star{clip-path:polygon(50% 0,61% 30%,95% 20%,75% 50%,95% 80%,61% 70%,50% 100%,39% 70%,5% 80%,25% 50%,5% 20%,39% 30%)}.cuckoo{border-radius:4px;width:53px;height:48px;margin-top:8px}.cuckoo>b{position:absolute;left:-4px;right:-4px;top:-15px;height:17px;background:#8b6748;clip-path:polygon(50% 0,100% 100%,0 100%)}.cuckoo>b:after{content:'🐦';position:absolute;font-size:11px;left:21px;top:6px}.digital{min-width:61px;padding:5px 6px;border:4px solid #59655f;border-radius:7px;background:#d9e2c8;font:900 17px monospace;color:#273b34;text-align:center}.loose{border:2px solid #b9a17d;background:#fff8e7;border-radius:9px;min-width:60px;min-height:47px;display:grid;place-items:center;padding:3px;box-shadow:0 3px 0 #9e805d}.loose.selected{outline:4px solid #e5a63b;transform:translateY(-4px)}.loose:disabled{visibility:hidden;cursor:default}.floor{position:relative;background:#d9bd8d;border:5px solid #ac7e4d;border-top:10px solid #bf925d;border-radius:0 0 15px 15px;padding:12px 10px 8px}.floor-label{position:absolute;left:15px;top:-8px;font-size:8px;letter-spacing:1px;color:#765b3f}#looseClocks{height:100%;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(2,1fr);align-items:center;justify-items:center;gap:5px}#message{display:grid;place-items:center;text-align:center;font-weight:bold;font-size:13px}footer{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:#777e70}footer button,.overlay button{border:0;border-bottom:5px solid #285c42;border-radius:12px;background:#3e825d;color:#fff;font-weight:bold;font-size:18px;padding:8px 24px;min-height:45px}button:disabled{cursor:default;opacity:.45}.overlay{position:absolute;inset:0;z-index:10;display:grid;place-items:center;padding:18px;background:#243e3388;backdrop-filter:blur(5px)}[hidden]{display:none!important}.overlay section{width:min(500px,100%);background:#fffaf0;border-radius:25px;text-align:center;padding:27px;box-shadow:0 25px 80px #20392f55}.overlay h1{font-size:31px;margin:8px}.overlay p{line-height:1.55}.mascot{font-size:48px}#maker{position:absolute;z-index:5;width:120px;height:175px;right:-130px;bottom:-40px;transition:right .9s ease-in-out}#maker.show{right:12px}#maker svg{width:100%;height:100%}@keyframes hop{50%{transform:translateY(-9px)}}@keyframes openDoor{50%{transform:scaleX(.2)}}
@media(min-width:701px) and (max-height:720px){.game-shell{grid-template-rows:46px 48px minmax(232px,1fr) 34px 151px 55px;min-height:560px}.intro p{display:none}.intro h1{font-size:23px}.workshop{padding-top:7px;padding-bottom:6px}.station{padding:2px}.floor{padding-top:7px;padding-bottom:4px}.loose{min-height:43px}.analog{width:47px;height:47px}.analog-slot{width:52px;height:52px}.digital{font-size:15px}.overlay section{padding:20px}.overlay p{margin:8px}}
@media(max-width:700px){body{padding:7px}.game-shell{height:auto;min-height:calc(100dvh - 14px);grid-template-rows:52px 83px 580px 48px 310px 78px;padding:0 9px}header{margin:0 -9px;padding:0 9px;font-size:10px}.intro{display:block;padding:10px 0}.intro h1{font-size:22px}.intro>span{display:block;margin-top:5px}.workshop{padding:10px 8px 105px}.door{height:90px}.door,#maker{bottom:0}#wall{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(5,1fr)}#looseClocks{grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(4,1fr)}.floor{padding-top:12px}footer span{max-width:170px}footer button{padding:8px 15px;font-size:15px}}
@media(prefers-reduced-motion:reduce){.door.open{animation:none}.slot.wrong{animation:none}#maker{transition:none}}

/* Tapetvæg med solblegede aftryk i stedet for felter. */
.workshop{background-color:#e8d9be;background-image:radial-gradient(circle at 10px 10px,#c8aa7b66 0 2px,transparent 2.5px),radial-gradient(circle at 22px 22px,#f6edda99 0 5px,transparent 5.5px),linear-gradient(45deg,transparent 46%,#ccb18744 47% 53%,transparent 54%);background-size:32px 32px,32px 32px,32px 32px}
#wall{height:100%;display:flex;flex-direction:column;justify-content:space-around;gap:8px}
.clock-row{display:grid;grid-template-columns:repeat(10,minmax(48px,1fr));align-items:center;justify-items:center;gap:5px;min-height:74px}
.slot{border:0;box-shadow:none;color:transparent;padding:0;display:grid;place-items:center}
.analog-slot{width:61px;height:61px;background:#cfb98fc9;filter:saturate(.7)}
.digital-slot{width:68px;height:39px;border-radius:8px;background:#cfb98fc9}
.slot.filled{background:transparent;filter:none}.slot:empty{cursor:pointer}.slot:focus-visible{outline:3px solid #b67532;outline-offset:3px}
.analog{position:relative;width:54px;height:54px;border:3px solid #726458;background:radial-gradient(circle at 35% 29%,#fff 0 2px,transparent 3px),radial-gradient(circle,#fffdf0 0 60%,transparent 61%),repeating-conic-gradient(#685f55 0 2deg,transparent 2deg 30deg),var(--case);box-shadow:inset 0 0 0 3px var(--case),0 2px 3px #59452e55;color:#4a443d}
.analog:before{z-index:2}.analog:after{z-index:2}.analog i{z-index:3;box-shadow:0 0 0 2px #fff8}
.cuckoo{background:radial-gradient(circle,#fffdf0 0 59%,transparent 60%),repeating-conic-gradient(#685f55 0 2deg,transparent 2deg 30deg),var(--case)}
.digital{position:relative;display:block;min-width:63px;padding:6px 6px 4px;border:4px solid var(--case);border-radius:8px;background:#dbe5d1;box-shadow:inset 0 0 0 2px #778477,0 2px 3px #59452e55;font:900 16px monospace;color:#273b34;text-align:center}
.digital:before{content:'';position:absolute;left:9px;top:-8px;width:10px;height:4px;border-radius:3px 3px 0 0;background:#75685d;box-shadow:16px 0 #75685d}
.loose{border:0;background:transparent;border-radius:0;min-width:60px;min-height:52px;display:grid;place-items:center;padding:2px;box-shadow:none}
.loose.selected{outline:0;transform:translateY(-5px);filter:drop-shadow(0 0 5px #f2a928) drop-shadow(0 0 2px #f2a928)}
.floor{background-color:#d9bd8d;background-image:linear-gradient(90deg,#b58b5c22 1px,transparent 1px);background-size:42px 100%}
@media(max-width:700px){#wall{display:flex;gap:5px}.clock-row{grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);min-height:218px;gap:4px}.analog-slot{width:53px;height:53px}.digital-slot{width:62px}.analog{width:48px;height:48px}.workshop{padding-bottom:105px}}

/* Når uret hænger, er det kun selve uret – ikke pladsen – der former og drejer sig. */
.analog-slot.filled{clip-path:none;transform:none;border-radius:0}

/* Arbejdsugen øverst i butikken. */
#days{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;min-width:min(560px,58vw)}
#days span{padding:7px 6px;border-radius:8px;background:#e7e1cf;color:#8b8b7b;text-align:center;font-size:10px;font-weight:bold;white-space:nowrap;border-bottom:3px solid #ccc3aa}
#days .today{background:#f4c76c;color:#554225;border-color:#c59239;transform:translateY(-2px)}#days .done{background:#91b58c;color:#fff;border-color:#668c63}#days .locked{opacity:.62}
.weekend{position:absolute;right:121px;top:-48px;width:104px;background:#fffaf0;color:#355342;border:3px solid #d7bc88;border-radius:16px;padding:9px 6px;text-align:center;font-size:14px;box-shadow:0 3px 7px #40302033}.weekend:after{content:'';position:absolute;right:-12px;bottom:8px;border:8px solid transparent;border-left-color:#d7bc88}
.confetti{position:fixed;inset:0;z-index:30;overflow:hidden;pointer-events:none}.confetti i{position:absolute;left:var(--x);top:-18px;width:10px;height:17px;background:var(--color);animation:confettiFall var(--d) var(--delay) ease-in both}@keyframes confettiFall{0%{transform:translateY(-5vh) rotate(0)}100%{transform:translateY(110vh) rotate(760deg)}}
@media(min-width:701px) and (max-height:720px){#days span{padding:5px 4px;font-size:9px}#days{min-width:min(520px,60vw)}}
@media(max-width:700px){.intro{height:auto}.intro>div:first-child{display:none}#days{min-width:0;width:100%;grid-template-columns:repeat(3,1fr);gap:3px}#days span{padding:4px 3px;font-size:9px}.weekend{right:108px;top:-42px}}
@media(prefers-reduced-motion:reduce){.confetti i{animation-duration:2.5s!important}}

/* De to vægrækker deler nøjagtigt de samme ti kolonner. */
.clock-row{width:100%;grid-template-columns:repeat(10,minmax(0,1fr));padding:0 3px}
.analog-slot,.digital-slot{justify-self:center}
/* Små kendetegn gør ure med beslægtede grundformer lette at skelne. */
.analog em{position:absolute;display:block;z-index:1;pointer-events:none}
.analog.round em{width:15px;height:7px;left:50%;top:-9px;transform:translateX(-50%);border-radius:7px 7px 2px 2px;background:var(--case);border:2px solid #726458}
.analog.square em{inset:4px;border:1px solid #8b7968;border-radius:4px;box-shadow:inset 0 0 0 2px #fff8}
.analog.oval em{width:6px;height:13px;left:-7px;top:50%;transform:translateY(-50%);border-radius:5px;background:var(--case);border:2px solid #726458;box-shadow:46px 0 0 -2px var(--case),48px 0 0 0 #726458}
.analog.wide em{left:7px;right:7px;bottom:-7px;height:7px;border-left:7px solid #726458;border-right:7px solid #726458}
.analog.arch em{width:13px;height:7px;left:50%;top:-8px;transform:translateX(-50%);background:var(--case);border:2px solid #726458;border-radius:50% 50% 0 0}
.analog.octagon em{inset:7px;border:2px dotted #806f60;border-radius:50%}
.analog.diamond em{width:8px;height:8px;right:5px;top:5px;border-radius:50%;background:var(--case);box-shadow:-28px 28px 0 var(--case)}
.analog.drop em{width:8px;height:8px;right:5px;bottom:5px;border-radius:50%;border:2px solid #786a5d}
.analog.star em{inset:9px;border-radius:50%;border:2px solid #8c765e}
/* Kendetegnene findes også som lyse aftryk, før urene hænges op. */
.analog-slot:not(.filled):after{content:'';position:absolute;display:block;background:#cfb98fc9}
.analog-slot.round:not(.filled):after{width:15px;height:8px;top:-7px;left:50%;transform:translateX(-50%);border-radius:7px 7px 2px 2px}
.analog-slot.oval:not(.filled):after{width:6px;height:14px;left:-5px;top:50%;transform:translateY(-50%);border-radius:5px;box-shadow:49px 0 #cfb98fc9}
.analog-slot.wide:not(.filled):after{left:8px;right:8px;bottom:-6px;height:7px;border-left:7px solid #cfb98fc9;border-right:7px solid #cfb98fc9;background:transparent}
.analog-slot.arch:not(.filled):after{width:14px;height:8px;top:-7px;left:50%;transform:translateX(-50%);border-radius:50% 50% 0 0}
@media(max-width:700px){.clock-row{grid-template-columns:repeat(5,minmax(0,1fr));padding:0}}

/* Bredere værkstedsdør og skranke foran den nederste del af rummet. */
.workshop{padding:8px 122px 68px 14px}
.door{width:94px;right:10px;height:94%}.door:before{inset:25px 9px 20px}
#wall{position:relative;z-index:1;justify-content:flex-start;gap:8px}.clock-row{min-height:67px}.digital-row{min-height:45px;align-self:start}
.counter{position:absolute;z-index:6;left:0;right:0;bottom:0;height:64px;background:linear-gradient(#bf8d59 0 10px,#d5aa72 10px 100%);border-top:5px solid #805737;box-shadow:0 -4px 8px #5b3e2633;display:flex;align-items:center;padding-left:34px}
.counter:after{content:'';position:absolute;inset:17px 0 0;background:repeating-linear-gradient(90deg,transparent 0 92px,#a97b4d55 93px 95px);pointer-events:none}
.dead-clocks{position:relative;z-index:1;width:190px;height:49px;margin-top:-15px;border:4px solid #805737;border-top:7px solid #68462d;border-radius:5px 5px 12px 12px;background:#ad7d4f;box-shadow:inset 0 7px 0 #6c4b32;display:flex;align-items:flex-end;justify-content:center;padding:0 8px 5px;color:#fff5dc}
.dead-clocks strong{position:absolute;left:50%;bottom:-1px;transform:translate(-50%,45%);background:#f0ddae;color:#715537;border:2px solid #8c6842;border-radius:4px;padding:2px 9px;font-size:8px;letter-spacing:1px;white-space:nowrap}
.dead-clocks span{font-size:23px;letter-spacing:5px;filter:sepia(.5) saturate(.7);transform:rotate(-3deg)}
#maker{z-index:5;bottom:-40px}.weekend{z-index:8}
@media(min-width:701px) and (max-height:720px){.workshop{padding:5px 122px 61px 12px}.clock-row{min-height:61px}.digital-row{min-height:41px}.counter{height:57px}.dead-clocks{height:43px}}
@media(max-width:700px){.workshop{padding:8px 8px 74px}.door{width:91px;height:91px}.counter{height:66px;padding-left:15px}.dead-clocks{width:155px}.clock-row{min-height:205px}.digital-row{min-height:205px}}

/* Den høje skranke bærer kun dekorative ure – ingen tekst. */
.workshop{padding-bottom:116px}
#wall{gap:0}.clock-row{min-height:55px}.digital-row{min-height:40px;transform:translateY(20px)}
.counter{height:112px;padding:0 20px;align-items:center;background:linear-gradient(#b57f4c 0 11px,#d3a36b 11px 100%)}
.counter:after{inset:17px 0 0;background:repeating-linear-gradient(90deg,transparent 0 92px,#9f704655 93px 96px)}
.clock-decor{position:relative;z-index:1;width:100%;overflow:hidden;white-space:nowrap;text-align:center;color:#765334;font-size:28px;letter-spacing:18px;word-spacing:9px;text-shadow:0 1px #f2d4a0;opacity:.82;transform:rotate(-2deg)}
#maker{bottom:-10px}
@media(min-width:701px) and (max-height:720px){.workshop{padding-bottom:116px}.clock-row{min-height:55px}.digital-row{min-height:40px}.counter{height:112px}}
@media(max-width:700px){.workshop{padding-bottom:120px}.counter{height:116px}.digital-row{transform:translateY(20px)}.clock-row{min-height:205px}.clock-decor{font-size:23px;letter-spacing:9px}}

/* Mere væghøjde giver plads til både den sænkede digitalrække og den høje skranke. */
.game-shell{grid-template-rows:52px 67px minmax(285px,1fr) 40px 134px 63px}
@media(min-width:701px) and (max-height:720px){.game-shell{grid-template-rows:46px 48px minmax(272px,1fr) 34px 111px 55px}}
@media(max-width:700px){.game-shell{grid-template-rows:52px 83px 580px 48px 310px 78px}}

@media(min-width:701px) and (max-height:720px){.floor{padding-top:5px}.floor .loose{min-height:36px;padding:0}.floor .analog{width:43px;height:43px}.floor .digital{min-width:58px;padding:2px 4px;font-size:14px}.floor #looseClocks{height:calc(100% - 3px)}}

/* Store dekorationsure på skrankens front. */
.clock-decor{font-size:47px;letter-spacing:13px;word-spacing:4px;line-height:1;transform:rotate(-2deg) translateY(2px)}
@media(min-width:701px) and (max-height:720px){.clock-decor{font-size:44px;letter-spacing:12px}}
@media(max-width:700px){.clock-decor{font-size:37px;letter-spacing:7px}}

/* Begge vægrækker 50 px ned; digitalrækken yderligere 20 px. */
.analog-row{transform:translateY(50px)}
.digital-row{transform:translateY(70px)}
.game-shell{grid-template-rows:52px 57px minmax(355px,1fr) 32px 104px 53px}
@media(min-width:701px) and (max-height:720px){
 .game-shell{grid-template-rows:40px 40px minmax(342px,1fr) 24px 80px 40px}
 header{height:40px}.intro h1{font-size:20px}.intro{min-height:0}.intro>div:first-child{display:none}
 #days span{padding:3px;font-size:8px}.workshop{padding-top:2px}
 #message{font-size:11px}.floor{padding-top:2px}.floor .loose{min-height:27px}
 .floor .analog{width:34px;height:34px;border-width:2px}.floor .analog:before{height:15px}.floor .analog:after{height:11px}.floor .analog i{width:5px;height:5px}
 .floor .digital{min-width:53px;padding:1px 3px;font-size:12px;border-width:3px}.floor .digital:before{top:-6px;height:3px}
 footer button{min-height:36px;padding:4px 22px;font-size:16px}footer{font-size:10px}
}
@media(max-width:700px){.analog-row{transform:translateY(50px)}.digital-row{transform:translateY(70px)}}

/* Kukurets solaftryk omfatter også det trekantede tag. */
.analog-slot.cuckoo:not(.filled):after{content:'';position:absolute;display:block;left:-4px;right:-4px;top:-17px;height:19px;background:#cfb98fc9;clip-path:polygon(50% 0,100% 100%,0 100%)}

/* Hele kukurets aftryk: firkantet urkasse plus trekanttag. */
.analog-slot.cuckoo:not(.filled){width:53px;height:48px;margin-top:8px;border-radius:4px;background:#cfb98fc9!important;clip-path:none}

/* Stort flueben hen over den dag, der netop er klaret. */
#days span{position:relative}.day-check{position:absolute;z-index:25;left:50%;top:50%;width:62px;height:62px;display:grid;place-items:center;border-radius:50%;background:#3f8d5d;color:white;border:5px solid #fff9df;box-shadow:0 7px 18px #264c3677;font:900 50px/1 Arial;pointer-events:none;animation:dayCheck 1.45s ease-out both}
@keyframes dayCheck{0%{opacity:0;transform:translate(-50%,-50%) scale(.1) rotate(-28deg)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.35) rotate(7deg)}58%{transform:translate(-50%,-50%) scale(1) rotate(0)}82%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.88)}}
@media(max-width:700px){.day-check{width:52px;height:52px;font-size:41px}}
@media(prefers-reduced-motion:reduce){.day-check{animation-duration:1.45s!important}}

/* Lav, dobbeltbred værkstedsdør; urrækkerne fortsætter hen over den. */
.workshop{padding-right:14px}.door{width:188px;height:62%;right:10px;z-index:0}.door:before{inset:25px 10px 18px}.door span{font-size:9px;padding:4px 10px}
#wall{z-index:2}.counter{z-index:6}
.falling-digital{position:fixed!important;z-index:60!important;margin:0!important;pointer-events:none;will-change:transform;visibility:visible!important}
@media(min-width:701px) and (max-height:720px){.workshop{padding-right:12px}.door{width:188px;height:62%}}
@media(max-width:700px){.workshop{padding-right:8px}.door{width:174px;height:48%;right:7px}}

/* Mørk døråbning med et dørblad, der svinger op. */
.door{background:#0d1512;border:8px solid #674b35;box-shadow:inset 0 0 0 4px #171f1b,0 0 0 3px #a87c52;overflow:visible;padding:0;perspective:700px}
.door:before,.door:after{display:none}.door.open{animation:none!important;transform:none!important}
.door-leaf{position:absolute;z-index:2;inset:5px;display:grid;place-items:start center;padding-top:10px;background:#557565;border:4px solid #34271e;transform-origin:right center;transition:transform .65s ease-in-out;backface-visibility:hidden}
.door-leaf:before{content:'';position:absolute;left:11px;right:11px;top:34px;height:42%;background:#bad6d0;border:4px solid #75573f;box-shadow:inset 0 0 0 3px #dceae5}
.door-leaf:after{content:'';position:absolute;left:11px;bottom:16px;width:9px;height:9px;border-radius:50%;background:#efca6f;box-shadow:0 0 0 2px #614930}
.door.open .door-leaf{transform:rotateY(-80deg)}.door-leaf span{position:relative;z-index:3;background:#fff9e7;color:#526354;padding:4px 10px;font-style:normal;font-size:9px}
/* Urmageren står højere, så han ses fra livet og op bag skranken. */
#maker{width:165px;height:240px;bottom:25px}#maker.show{right:16px}
/* Kukken springer ud tre gange, mens kukur-lyden spiller. */
.cuckoo>b:after{opacity:0;transform:translateY(5px) scale(.45);transform-origin:center bottom}
.cuckoo.calling>b:after{animation:cuckooOut .72s ease-in-out 3}
@keyframes cuckooOut{0%,100%{opacity:0;transform:translateY(5px) scale(.45)}25%,70%{opacity:1;transform:translateY(-11px) scale(1.45)}}
@media(max-width:700px){#maker{width:150px;height:220px;bottom:24px}.door-leaf:before{height:38%}}
@media(prefers-reduced-motion:reduce){.door-leaf{transition-duration:.65s!important}.cuckoo.calling>b:after{animation-duration:.72s!important}}

.cuckoo-bird-flight{position:fixed;z-index:80;width:24px;height:24px;font-size:20px;line-height:24px;pointer-events:none;opacity:0;transform-origin:center bottom;animation:cuckooFlight .72s ease-in-out 3}
@keyframes cuckooFlight{0%,100%{opacity:0;transform:translateY(7px) scale(.45)}25%,70%{opacity:1;transform:translateY(-20px) scale(1.35)}}
@media(prefers-reduced-motion:reduce){.cuckoo-bird-flight{animation-duration:.72s!important}}

/* Mere lodret gulvplads; skrankens overkant bliver stående samme sted. */
.game-shell{grid-template-rows:52px 57px minmax(331px,1fr) 32px 128px 53px}
.counter{height:88px}
@media(min-width:701px) and (max-height:720px){.game-shell{grid-template-rows:40px 40px minmax(318px,1fr) 24px 104px 40px}.counter{height:88px}.floor{padding-top:5px;padding-bottom:5px}.floor .loose{min-height:38px}.floor .analog{width:39px;height:39px}.floor .digital{padding:2px 4px;font-size:13px}}
@media(max-width:700px){.counter{height:92px}}

/* Urmageren træder frem fra selve døråbningen. */
#maker{right:22px;opacity:0;transform:translateY(72px) scale(.72);transform-origin:center bottom;transition:opacity .3s ease .2s,transform .82s ease-out .18s,right 0s}
#maker.show{right:22px;opacity:1;transform:translateY(0) scale(1)}
@media(max-width:700px){#maker,#maker.show{right:18px}}
@media(prefers-reduced-motion:reduce){#maker{transition-duration:.3s,.82s,0s!important}}

/* Langsommere kuk og en urmager, der træder frem fra dørens dybde. */
.cuckoo.calling>b:after{animation-duration:1.08s}.cuckoo-bird-flight{animation-duration:1.08s}
#maker{right:20px;opacity:0;transform:scale(.66);transform-origin:center center;transition:opacity .3s ease .18s,transform .86s ease-out .16s,right .86s ease-out .16s}
#maker.show{right:78px;opacity:1;transform:scale(1)}
@media(max-width:700px){#maker{right:16px}#maker.show{right:48px}}
@media(prefers-reduced-motion:reduce){#maker{transition-duration:.3s,.86s,.86s!important}.cuckoo.calling>b:after,.cuckoo-bird-flight{animation-duration:1.08s!important}}

/* To gadevinduer med forbipasserende – de går videre og danner ingen kø. */
.street-windows{position:absolute;z-index:1;left:5%;right:24%;bottom:100px;height:clamp(90px,27%,165px);display:grid;grid-template-columns:1fr 1fr;gap:28px;pointer-events:none}
.street-window{position:relative;overflow:hidden;border:8px solid #8a623f;border-bottom-width:12px;border-radius:7px 7px 2px 2px;background:#b9dadd;box-shadow:inset 0 0 0 4px #dfc08e,0 4px 7px #5b402633}
.street-window:after{content:'';position:absolute;z-index:5;left:50%;top:0;bottom:0;width:7px;background:#9a7049;box-shadow:0 0 0 2px #dfc08e}
.street-view{position:absolute;inset:0;overflow:hidden;background:linear-gradient(#b9dce1 0 55%,#b6c69f 56% 67%,#c8b99e 68% 82%,#978d7d 83%)}
.street-view:before{content:'';position:absolute;left:0;right:0;bottom:31%;height:45%;background:linear-gradient(140deg,transparent 0 8%,#819b87 8% 25%,transparent 25% 32%,#93aa91 32% 52%,transparent 52% 62%,#778e7b 62% 84%,transparent 84%);opacity:.8}
.street-view:after{content:'';position:absolute;left:8%;top:10%;width:19px;height:19px;border-radius:50%;background:#f2c965;box-shadow:80px 18px 0 -7px #fff9df,153px 5px 0 -8px #fff9df}
.walker{--skin:#d6a079;--shirt:#6e9585;--hair:#5a4030;position:absolute;z-index:3;left:-65px;bottom:10%;width:44px;height:77px;animation:walkPast 10s linear infinite;filter:drop-shadow(0 2px 1px #36493b44)}
.walker b{position:absolute;left:12px;top:0;width:26px;height:29px;border-radius:50%;background:var(--skin);box-shadow:inset 0 8px 0 var(--hair)}
.walker b:after{content:'';position:absolute;left:7px;top:15px;width:3px;height:3px;border-radius:50%;background:#263832;box-shadow:9px 0 #263832}
.walker span{position:absolute;left:7px;top:26px;width:35px;height:38px;border-radius:13px 13px 5px 5px;background:var(--shirt)}
.walker span:before,.walker span:after{content:'';position:absolute;top:5px;width:8px;height:33px;border-radius:7px;background:var(--skin)}.walker span:before{left:-5px;transform:rotate(12deg)}.walker span:after{right:-5px;transform:rotate(-12deg)}
.walker em{position:absolute;left:12px;top:61px;width:8px;height:24px;background:#425b59;box-shadow:18px 0 #425b59;transform-origin:top;animation:walkLegs .45s ease-in-out infinite alternate}
.w2{--skin:#8b5e43;--shirt:#cb7768;--hair:#302a27;animation-duration:12s;animation-delay:-6.5s;transform:scale(.92)}.w3{--skin:#edc5a3;--shirt:#647fa5;--hair:#b98548;animation-duration:11s;animation-delay:-3.5s}.w4{--skin:#b97752;--shirt:#a67caf;--hair:#39302d;animation-duration:13s;animation-delay:-10s;transform:scale(1.05)}
@keyframes walkPast{0%{left:-65px;opacity:0}5%{opacity:1}88%{opacity:1}94%,100%{left:calc(100% + 25px);opacity:0}}
@keyframes walkLegs{from{transform:rotate(-11deg)}to{transform:rotate(11deg)}}
@media(min-width:701px) and (max-height:720px){.street-windows{left:7%;right:23%;bottom:94px;height:70px;gap:20px}.street-window{border-width:5px;border-bottom-width:7px}.walker{transform:scale(.65);transform-origin:center bottom;bottom:3%}.w2{transform:scale(.6)}.w4{transform:scale(.68)}}
@media(max-width:700px){.street-windows{left:4%;right:48%;bottom:101px;height:112px;gap:7px}.street-window{border-width:5px}.street-window:after{width:4px}.walker{transform:scale(.68);transform-origin:center bottom}.w2{transform:scale(.63)}.w4{transform:scale(.72)}}
@media(prefers-reduced-motion:reduce){.walker{animation-duration:10s!important}.walker em{animation-duration:.45s!important}}

@media(min-width:701px){.street-windows{right:27%}}

/* Forbipasserende som i bageriet: frontvendte og kun fra livet og op. */
.walker{left:-75px;bottom:-9px;width:58px;height:84px;opacity:0;animation:none!important;filter:drop-shadow(0 2px 1px #36493b44);transform:none}
.walker b{left:14px;top:0;width:34px;height:37px;border-radius:48% 48% 46% 46%;background:var(--skin);box-shadow:inset 0 10px 0 var(--hair)}
.walker b:before{content:'';position:absolute;left:11px;top:27px;width:13px;height:6px;border-bottom:2px solid #764b39;border-radius:0 0 50% 50%}
.walker b:after{left:9px;top:19px;width:3px;height:3px;box-shadow:12px 0 #263832}
.walker span{left:7px;top:33px;width:49px;height:55px;border-radius:17px 17px 4px 4px;background:var(--shirt)}
.walker span:before,.walker span:after{top:7px;width:10px;height:39px;background:var(--skin)}.walker span:before{left:-4px;transform:rotate(8deg)}.walker span:after{right:-4px;transform:rotate(-8deg)}
.walker em{display:none}.walker.passing{animation:walkPastOccasional 3.8s linear 1!important}
@keyframes walkPastOccasional{0%{left:-75px;opacity:0}8%{opacity:1}90%{opacity:1}100%{left:calc(100% + 25px);opacity:0}}
.w2,.w3,.w4{animation-delay:0!important;animation-duration:3.8s!important}.w2,.w3,.w4{transform:none}
@media(min-width:701px) and (max-height:720px){.walker{bottom:-20px;transform-origin:center bottom}.walker.passing{animation-name:walkPastOccasional!important}}
@media(max-width:700px){.walker{transform-origin:center bottom}.walker.passing{animation-name:walkPastOccasional!important}}
@media(prefers-reduced-motion:reduce){.walker.passing{animation-duration:3.8s!important}}

/* Rolig udsigt med tegnede træer i stedet for kantede former. */
.street-view{background:linear-gradient(#b9dce1 0 61%,#a8c394 62% 78%,#c9bca5 79% 87%,#968c7d 88%)}
.street-view:before{content:'';position:absolute;inset:0;opacity:1;background:radial-gradient(ellipse 31px 29px at 21% 47%,#779b6c 0 70%,transparent 72%),radial-gradient(ellipse 27px 31px at 29% 39%,#88aa78 0 70%,transparent 72%),radial-gradient(ellipse 32px 30px at 73% 45%,#6f9466 0 70%,transparent 72%),radial-gradient(ellipse 27px 31px at 82% 37%,#86a978 0 70%,transparent 72%),linear-gradient(#8b694b,#8b694b) 25% 48%/7px 31% no-repeat,linear-gradient(#8b694b,#8b694b) 77% 48%/7px 31% no-repeat}

/* De to vinduer viser samme gade: kun ét af dem har solen. */
.street-view.second:after{background:transparent}

/* Ét stort gadevindue med træer, der har tydelige stammer. */
.street-windows{left:6%;right:30%;grid-template-columns:1fr;gap:0}
.street-view:before{display:none}
.outdoor-tree{position:absolute;z-index:1;bottom:20%;width:9px;height:47%;background:#866448;text-decoration:none;border-radius:4px 4px 0 0}
.outdoor-tree:before,.outdoor-tree:after{content:'';position:absolute;border-radius:50%;background:#789d6c}
.outdoor-tree:before{width:48px;height:46px;left:50%;top:-27px;transform:translateX(-50%);box-shadow:-19px 10px 0 -7px #89aa79,19px 8px 0 -8px #6d9364}
.outdoor-tree:after{width:29px;height:31px;left:50%;top:-39px;transform:translateX(-38%);background:#8caf7b}
.outdoor-tree.t1{left:20%}.outdoor-tree.t2{left:77%;height:42%}.outdoor-tree.t2:before{background:#6f9666}.outdoor-tree.t2:after{background:#84a976}
@media(min-width:701px) and (max-height:720px){.street-windows{left:8%;right:29%}.outdoor-tree{width:6px}.outdoor-tree:before{transform:translateX(-50%) scale(.72)}.outdoor-tree:after{transform:translateX(-38%) scale(.72)}}
@media(max-width:700px){.street-windows{left:5%;right:48%}.outdoor-tree:before{transform:translateX(-50%) scale(.78)}.outdoor-tree:after{transform:translateX(-38%) scale(.78)}}

/* Det store gadevindue er 80 % højere og vokser opad. */
.street-windows{height:clamp(162px,49%,297px)}
@media(min-width:701px) and (max-height:720px){.street-windows{height:126px}}
@media(max-width:700px){.street-windows{height:202px}}

/* Begge træer ses gennem én samlet rude og én ydre ramme. */
.street-window:after{display:none}

/* Vinduets overkant er sænket 10 %, mens underkanten står fast. */
.street-windows{height:clamp(146px,44%,267px)}
@media(min-width:701px) and (max-height:720px){.street-windows{height:113px}}
@media(max-width:700px){.street-windows{height:182px}}

/* Et kryds deler vinduet i fire ruder. */
.street-window:after{content:'';display:block;position:absolute;z-index:5;inset:0;width:auto;background:linear-gradient(to right,transparent calc(50% - 5px),#9a7049 calc(50% - 5px) calc(50% + 5px),transparent calc(50% + 5px)),linear-gradient(to bottom,transparent calc(50% - 5px),#9a7049 calc(50% - 5px) calc(50% + 5px),transparent calc(50% + 5px));box-shadow:none;pointer-events:none}
.outdoor-tree.t1{left:38%}.outdoor-tree.t2{left:62%}
@media(max-width:700px){.street-window:after{background:linear-gradient(to right,transparent calc(50% - 3px),#9a7049 calc(50% - 3px) calc(50% + 3px),transparent calc(50% + 3px)),linear-gradient(to bottom,transparent calc(50% - 3px),#9a7049 calc(50% - 3px) calc(50% + 3px),transparent calc(50% + 3px))}}

/* Færdige vægure beholder deres fulde farver, selv om de er låst. */
.slot:disabled{opacity:1}

/* Viserurene på væggen er større, men beholder samme centrum og placering. */
.analog-slot.filled .analog{scale:1.4}
.analog-slot:not(.filled){scale:1.4}

/* De forbipasserende bruger samme SVG-tegnestil som bageriets kunder. */
.walker svg{display:block;width:100%;height:100%;overflow:visible}

/* Store, rolige forbipasserende. Transform-animationen giver en glat bevægelse. */
.walker{left:-130px;bottom:-17px;width:116px;height:168px;transform:translate3d(0,0,0);will-change:transform,opacity;backface-visibility:hidden}
.walker.passing{animation:passerLeftToRight 7.6s linear 1!important}
.walker.passing.from-right{animation-name:passerRightToLeft!important}
.walker.passing.looks-in{animation-name:passerLeftToRightLook!important;animation-duration:9.6s!important}
.walker.passing.from-right.looks-in{animation-name:passerRightToLeftLook!important}
@keyframes passerLeftToRight{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(calc(100vw + 140px),0,0);opacity:1}}
@keyframes passerRightToLeft{0%{transform:translate3d(calc(100vw + 140px),0,0);opacity:1}100%{transform:translate3d(0,0,0);opacity:1}}
@keyframes passerLeftToRightLook{0%{transform:translate3d(0,0,0);opacity:1}43%{transform:translate3d(calc(50vw - 20px),0,0)}44%,62%{transform:translate3d(calc(50vw - 20px),0,0) scale(1.03);opacity:1}100%{transform:translate3d(calc(100vw + 140px),0,0);opacity:1}}
@keyframes passerRightToLeftLook{0%{transform:translate3d(calc(100vw + 140px),0,0);opacity:1}43%{transform:translate3d(calc(50vw - 20px),0,0)}44%,62%{transform:translate3d(calc(50vw - 20px),0,0) scale(1.03);opacity:1}100%{transform:translate3d(0,0,0);opacity:1}}
@media(min-width:701px) and (max-height:720px){.walker{bottom:-31px;width:102px;height:148px}}
@media(max-width:700px){.walker{bottom:-20px;width:92px;height:134px}}
@media(prefers-reduced-motion:reduce){.walker.passing{animation-duration:7.6s!important}.walker.passing.looks-in{animation-duration:9.6s!important}}