/* The sunset farm: responsive scenery and physical wood / metal game pieces. */
:root{--ink:#102442;--paper:#fff1ce;--gold:#ffc449;--teal:#318a9d;--pink:#f788a4;color:#fff1d2;background:#103447}
button{border:2px solid #102442;border-radius:12px;background:linear-gradient(#ffe09b,#efb74f);color:#183249;box-shadow:0 4px 0 #613b28,0 6px 10px #081e3c40,inset 0 2px 0 #fff0bc;font-weight:800}
button:hover{background:linear-gradient(#ffe9b0,#ffcb6b)}button:active{box-shadow:0 1px 0 #613b28,inset 0 2px 0 #fff0bc}button:focus-visible,a:focus-visible{outline:3px solid #fff1ab;outline-offset:4px}
#app{background:#17445a url('assets/farm-sunset.png') center/100% 100% no-repeat;min-height:340px}
header{height:94px;padding:8px max(3%,env(safe-area-inset-right)) 8px max(3%,env(safe-area-inset-left));gap:14px;align-items:center}
.brand{width:188px;height:88px;display:block;flex-shrink:0;transform:rotate(-5deg);text-shadow:none;letter-spacing:0}.brand img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 0 #03182b66)}.brand:after{display:none}
.level-info{align-self:center;padding:4px 19px 6px;border:2px solid #102442;border-radius:7px;background:linear-gradient(#a56c40,#74472d);box-shadow:0 3px 0 #092438,inset 0 1px 0 #d49657;max-width:34%;text-shadow:0 2px 0 #402b2b;color:#fff0c7;transform:rotate(-1deg)}.level-info span{color:#f6d7a6;font-size:10px}.level-info strong{font-size:19px}
nav button{min-width:44px;min-height:42px;background:linear-gradient(#fbc77a,#d59345);padding:6px 13px;border-radius:11px}nav button:nth-child(n){transform:none}
#status{top:114px;left:18%;color:#fff1c8;background:#163a4bd9;border:1px solid #e9bb6b66;border-radius:20px;text-shadow:0 1px 1px #102442;font-size:11px;padding:5px 11px}.dot{background:#97e5a1;box-shadow:0 0 6px #b3e89a88}#status.danger{background:#732f42e8;color:#fff0d3}.danger .dot{background:#ffc351}
#scene{inset:162px 0 113px;--beam-y:62%;--rim:20px}
#beam{width:46%;left:27%;top:var(--beam-y);height:40px;background:none;border:0;border-radius:0;box-shadow:none;z-index:2;isolation:isolate}.beam-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1}
#beam:before,#beam:after{top:11px;width:31px;height:31px;border:3px solid #102442;border-radius:38% 45%;background:linear-gradient(145deg,#ffcb6b,#ae622e);box-shadow:inset 0 0 0 6px #ce843c,inset 0 0 0 9px #153b50;z-index:2}#beam:before{left:-16px;transform:rotate(-8deg)}#beam:after{right:-16px;transform:rotate(8deg)}
.hinge{top:-4px;width:43px;height:43px;left:calc(50% - 21.5px);background:radial-gradient(circle,#286b83 0 24%,#102442 26% 34%,#efac48 36% 56%,#b97231 58% 66%,#102442 68%);border:0;box-shadow:0 2px 2px #0b223c77;z-index:4}
.stand{top:calc(var(--beam-y) + 16px);bottom:-8px;left:calc(50% - 85px);width:170px;z-index:1;filter:drop-shadow(0 4px 2px #0b263b55)}
#mother{width:157px;height:157px;left:calc(50% - 78.5px);bottom:23px;transform-origin:50% 62%;filter:drop-shadow(0 2px 1px #5a342644)}#mother[data-mood='panic']:after{color:#fff0b4;font-family:Arial,sans-serif;-webkit-text-stroke:1.5px #102442}#mother.rolling .mother-art{animation:roll-rattle .12s ease-in-out infinite alternate}#mother.rolling:after{content:'';width:30%;height:50%;left:-15%;top:25%;border-left:3px solid #fff0c7;border-radius:50%;transform:rotate(18deg)}
.pan-wrap{top:0;height:100%;width:28%;z-index:3}#leftWrap{left:4%}#rightWrap{right:4%}.pan{top:calc(var(--beam-y) + var(--rim));bottom:auto;height:51px;filter:drop-shadow(0 5px 2px #15283f40)}.items{bottom:calc(100% - var(--beam-y) - var(--rim) - 5px);min-height:90px;z-index:4}
.ropes{inset:0 2% auto;height:calc(var(--beam-y) + var(--rim) + 5px);background:none;overflow:visible}.ropes svg{width:100%;height:100%;overflow:visible}.ropes:before{content:'';position:absolute;width:16px;height:22px;left:calc(50% - 8px);top:-20px;border:4px solid #102442;border-radius:8px;background:linear-gradient(90deg,#22556c,#78a4a8,#174458);box-shadow:0 -22px 0 -3px #133b50;transform:translate(var(--hang-x,0px),var(--hang-y,0px));transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.token{width:clamp(42px,5vw,67px);height:clamp(42px,5vw,67px);filter:drop-shadow(0 2px 0 #0c29332b)}.token:hover{transform:translateY(-4px) rotate(-3deg)}.items .token[data-type='1']:nth-child(3n) .chick-art{transform:rotate(3deg)}.items .token[data-type='2']>svg{aspect-ratio:483/435}.items .token[data-type='2']:before,.egg-tether{background:#102442;width:2px}.items .token[data-type='2']:after,.egg-tether:after{border-color:#102442}
.side-control{bottom:auto;top:calc(var(--beam-y) + var(--rim) + 61px)}.math-button{background:linear-gradient(#ffe49a,#e9a73e);border-radius:11px;transform:none;text-shadow:0 1px #fff1ae;font-size:15px;padding:5px 19px}.roller{background:#173f55;border:2px solid #e0a14c;border-radius:12px;box-shadow:0 4px 0 #0e253a}.roller button{background:linear-gradient(#ffe4a2,#e1a34b);border-radius:8px;color:#142c42;box-shadow:0 2px 0 #7c4a26}
footer{height:108px}.reserve>span{position:relative;color:#fff0bd;text-shadow:0 2px 2px #35252c;font-size:10px;z-index:3}.reserve .token{width:42px;height:44px;margin:0 -1px;filter:drop-shadow(0 1px 0 #382a2444)}
#chickReserve{bottom:11px;width:270px;min-height:78px;flex-direction:column-reverse}#chickReserve>span{position:absolute;bottom:0;font-size:10px;background:#794a2b;padding:1px 15px;border:1px solid #b88344;border-radius:4px;box-shadow:0 2px 1px #10244277}
#chickStock{padding:0 22px 24px;min-width:210px;isolation:isolate;min-height:64px}#chickStock:after{bottom:4px;left:0;right:0;height:37px;z-index:-1;border:3px solid #102442;border-radius:12% 12% 35% 35%;background:linear-gradient(90deg,#164055 0 8px,transparent 8px calc(100% - 8px),#164055 calc(100% - 8px)),repeating-linear-gradient(0deg,#613825 0 2px,transparent 2px 14px),linear-gradient(#c18a45,#91572f);box-shadow:inset 0 5px 0 #e6ad56,inset 0 -5px 0 #633f2b,0 4px 0 #081f34aa}#chickStock:before{content:'';position:absolute;left:7px;right:7px;bottom:29px;height:10px;border-radius:50%;background:repeating-linear-gradient(20deg,#df9f37 0 4px,#ffce64 4px 6px,#bb7d2a 6px 8px);z-index:-1}#chickStock:empty{min-height:54px}
#balloonReserve{top:87px;width:245px;min-height:68px;isolation:isolate;opacity:1!important}#balloonReserve:before,#balloonReserve:after{content:'';position:absolute;width:3px;height:36px;top:-31px;background:linear-gradient(90deg,#122a3d,#dda54a);z-index:-1}#balloonReserve:before{left:14px}#balloonReserve:after{right:14px}#balloonReserve>span{position:absolute;bottom:0;font-size:9px}#balloonStock{position:relative;isolation:isolate;padding:0 14px 18px;min-width:150px;min-height:55px}#balloonStock:after{content:'';position:absolute;left:0;right:0;bottom:0;height:24px;background:linear-gradient(90deg,#153c51 0 6px,transparent 6px calc(100% - 6px),#153c51 calc(100% - 6px)),repeating-linear-gradient(0deg,#613b28 0 2px,transparent 2px 10px),linear-gradient(#c68c4c,#80502f);border:3px solid #102442;border-radius:5px 5px 30% 30%;z-index:-1;box-shadow:inset 0 3px #e4ad63}#balloonStock .token{width:41px;height:39px;margin:0 -1px}#balloonStock .token:after{display:none}
#eggStock{opacity:.4}#eggStock .token{width:18px;height:27px}.footer-center{left:max(4%,env(safe-area-inset-left));bottom:18px}.footer-center button{background:linear-gradient(#ffe19c,#dca348);border-radius:14px;transform:none;width:45px;height:42px}
.feedback{font-family:Heebo,Arial,sans-serif;color:#ffb4be}.feedback.positive{color:#c4ffb6}.feedback.anchored{text-shadow:2px 2px 0 #102442,-1px -1px 0 #102442,0 2px 5px #102442}
dialog{color:#ffeac4;background:#17465b;background-image:linear-gradient(135deg,#275e6e,#123246);background-size:auto;border:3px solid #d79a4d;border-radius:24px;padding:28px;box-shadow:0 7px 0 #0a2134,inset 0 2px 0 #f7ca78,0 24px 80px #07192eb0}dialog::backdrop{background:#091e32a0;backdrop-filter:blur(4px)}dialog h2{color:#fff2cf;text-shadow:0 3px 0 #0d293a}dialog p{color:#bcd6db}dialog .eyebrow{color:#ffd17c}dialog .primary{background:linear-gradient(#ffdf8d,#e8a33b);border-radius:12px;color:#173244}dialog .close{color:#f7d49a}dialog .answer{color:#fff0c9;font-family:Heebo,Arial;font-style:normal;text-decoration:none}dialog .level-grid button{background:linear-gradient(#336b7b,#245166);border-color:#0b2b42;color:#fff0cf;box-shadow:0 3px #0b2336;border-radius:11px}dialog .level-grid small{color:#aad0d4}dialog .level-grid .current{background:linear-gradient(#f2c66e,#c68a40);color:#153348}dialog .level-grid .current small{color:#614523}dialog select{background:#fff0c9;color:#173247;border-color:#f0bf68}dialog .setting{border-bottom-color:#f0bf6844}.welcome-art{width:140px;height:140px;filter:drop-shadow(0 5px 3px #06273a77)}#rotateHint{color:#fff0b6;text-shadow:0 2px 3px #123449}
.guide-dim{fill:#061e32;opacity:.4}#sourceRing{stroke:#fff7bc}#guidePath{stroke:#fff5b3}#gestureDot{fill:#fff4c0;stroke:#173247}.drag-ghost{filter:drop-shadow(2px 6px 3px #0b213c66)!important}
/* The stand is anchored to the floor, behind the central chick reserve. */
#scene{--scene-bottom:113px}
.stand{bottom:calc(18px - var(--scene-bottom))}
.stand:after{content:'';position:absolute;left:-50%;width:200%;height:16px;bottom:-7px;border-radius:50%;background:radial-gradient(ellipse,#112b3d80,transparent 70%);z-index:-1}
/* Separate pickup art avoids reusing idle atlas frames in a taller ghost. */
.drag-ghost{--grip-gap:6px;width:80px!important;height:80px!important;transform:translate(-50%,calc(-100% - var(--grip-gap)))!important;animation:none!important;transition:none!important}
.drag-ghost[data-type='0']{width:76px!important;height:100px!important}
.drag-ghost[data-type='2']{width:92px!important;height:90px!important}
.pickup-art{display:block;width:100%;height:100%;transform:rotate(var(--drag-lean,0deg));transform-origin:50% 30%;transition:transform .12s ease-out}
.pickup-art>.sketch-sprite{transform-origin:50% 60%}
.sprite-lift-chick{animation:pickup-start .28s ease-out both,chick-stunned .7s .28s ease-in-out infinite}
.sprite-lift-balloon{animation:balloon-start .38s cubic-bezier(.2,.8,.2,1) both,balloon-startled .8s .38s ease-in-out infinite}
.lift-egg{display:block;width:100%;height:100%;transform-origin:50% 22%;animation:egg-sway 1.25s ease-in-out infinite}
.lift-egg>.egg-art{position:static;height:100%}.drag-ghost .egg-tether{display:none}
@keyframes pickup-start{0%{transform:scale(.85,1.08)}55%{transform:scale(1.08,.94)}100%{transform:scale(1)}}
@keyframes chick-stunned{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(2deg) translateY(-2px)}}
@keyframes balloon-start{0%{transform:scale(.83,1.12)}50%{transform:scale(1.13,.94)}75%{transform:scale(.97,1.04)}100%{transform:scale(1)}}
@keyframes balloon-startled{0%,100%{transform:scale(1) rotate(-1deg)}50%{transform:scale(1.035,.98) rotate(1deg)}}
@keyframes egg-sway{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes roll-rattle{to{transform:scale(1.035,.975)}}
@media(max-height:600px) and (orientation:landscape){
 #app{background-size:100% 100%}header{height:54px;padding:4px max(3%,env(safe-area-inset-right)) 4px max(3%,env(safe-area-inset-left));gap:8px}.brand{width:112px;height:53px}.level-info{padding:2px 13px 3px;max-width:34%}.level-info span{font-size:8px}.level-info strong{font-size:13px}nav{gap:6px}nav button{font-size:13px;padding:4px 9px;min-width:36px;min-height:34px;border-radius:9px}
 #status{top:65px;left:18%;font-size:9px;padding:3px 8px}#scene{inset:111px 0 73px;--beam-y:58%;--rim:15px}#beam{height:30px}#beam:before,#beam:after{top:8px;width:24px;height:24px;border-width:2px;box-shadow:inset 0 0 0 4px #ce843c,inset 0 0 0 7px #153b50}#beam:before{left:-12px}#beam:after{right:-12px}.hinge{width:33px;height:33px;left:calc(50% - 16.5px);top:-3px}.stand{width:114px;left:calc(50% - 57px);top:calc(var(--beam-y) + 13px);bottom:-4px}#mother{width:101px;height:101px;left:calc(50% - 50.5px);bottom:17px}
 .pan-wrap{top:0;height:100%;width:28%}.pan{height:38px}.items{bottom:calc(100% - var(--beam-y) - var(--rim) - 4px);min-height:75px}.token{width:45px;height:44px}.items .token[data-type='0'],.items .token.fraction-egg{width:61px;height:78px}.items .token.negative-egg{height:98px}.items .token[data-type='2']{width:44px;height:80px}.ropes{height:calc(var(--beam-y) + var(--rim) + 4px)}.ropes:before{width:12px;height:17px;left:calc(50% - 6px);top:-14px;border-width:3px;box-shadow:0 -17px 0 -3px #123b50}.side-control{top:calc(var(--beam-y) + var(--rim) + 43px);bottom:auto}.math-button{font-size:13px;padding:3px 14px}.roller{padding:5px;max-width:32vw}.roller button{padding:3px 7px;min-height:30px}
 footer{height:74px}#chickReserve{bottom:4px;min-height:62px;width:210px}#chickReserve>span{font-size:8px;padding:0 11px}#chickStock{padding:0 15px 21px;min-width:172px;min-height:52px}.reserve .token{width:32px;height:33px}#chickStock:after{height:30px;bottom:3px;border-width:2px}#chickStock:before{bottom:23px;height:9px}#chickStock:empty{min-height:44px}#balloonReserve{top:57px;width:186px;min-height:48px}#balloonReserve>span{font-size:8px}#balloonReserve:before,#balloonReserve:after{height:26px;top:-23px;width:2px}#balloonStock{padding:0 10px 15px;min-width:140px;min-height:42px}#balloonStock .token{width:30px;height:29px}#balloonStock:after{height:20px;border-width:2px}.footer-center{bottom:12px;left:max(4%,env(safe-area-inset-left))}.footer-center button{width:39px;height:36px;font-size:25px}#eggStock{left:calc(100% + 4px);bottom:8px}#eggStock .token{width:15px;height:22px}.welcome-art{width:100px;height:100px}dialog{padding:18px 24px;border-radius:19px}
}
@media(orientation:portrait){
 #app{background-size:auto 100%}header{padding:6px 4%;height:78px}.brand{width:130px;height:68px}.level-info{display:none}nav button{min-width:35px;padding:5px 7px}#scene{inset:190px 0 155px;--beam-y:58%;--rim:16px}#beam{width:52%;left:24%;height:32px}.pan-wrap{width:36%}#leftWrap{left:1%}#rightWrap{right:1%}.pan{height:35px}#mother{width:105px;height:105px;left:calc(50% - 52.5px);bottom:20px}.stand{width:110px;left:calc(50% - 55px);bottom:0}.items{min-height:60px}.token{width:36px;height:36px}.side-control{top:calc(var(--beam-y) + var(--rim) + 43px)}#balloonReserve{top:99px}#status{top:166px;left:50%;max-width:90%}#chickReserve{bottom:28px;width:220px}.reserve .token{width:34px;height:35px}.footer-center{left:18px;bottom:32px}#rotateHint{bottom:117px}.roller{max-width:38vw}
}
/* Party grouping: fixed-size guests, staggered bodies and independent poses. */
.items.party-pile{display:block;isolation:isolate;direction:ltr}
.party-pile .token{position:absolute;transform:rotate(var(--party-angle,0deg));transform-origin:50% 95%;animation:none}
.party-pile .token:hover{transform:translateY(-4px) rotate(var(--party-angle,0deg));z-index:150!important}
.party-pile .token:focus-visible{outline:3px solid #fff0ad;outline-offset:2px;z-index:150!important}
.party-pile .token .chick-art{animation:party-peek 7s var(--party-delay,0s) ease-in-out infinite}
.party-pile .token[data-type='2']>svg{animation:party-float 4.7s var(--party-delay,0s) ease-in-out infinite}
.party-stage{position:relative;width:100%;flex-shrink:0}
.items.party-overflow{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#efbf70 #163b5166}
@keyframes party-peek{0%,75%,100%{transform:rotate(0)}80%{transform:rotate(-5deg)}88%{transform:rotate(3deg)}}
@keyframes party-float{50%{transform:translateY(-3px) rotate(2deg)}}
@media(prefers-reduced-motion:reduce){.party-pile .token .chick-art,.party-pile .token[data-type='2']>svg{animation:none}}
/* These overrides follow the compact and portrait layout rules above. */
.stand{bottom:calc(18px - var(--scene-bottom))}
@media(max-height:600px) and (orientation:landscape){#scene{--scene-bottom:73px}.stand{bottom:calc(10px - var(--scene-bottom))}.drag-ghost{width:66px!important;height:66px!important}.drag-ghost[data-type='0']{width:64px!important;height:84px!important}.drag-ghost[data-type='2']{width:78px!important;height:76px!important}}
@media(orientation:portrait){#scene{--scene-bottom:155px}}
@media(prefers-reduced-motion:reduce){#mother.rolling .mother-art,.pickup-art>.sketch-sprite,.lift-egg{animation:none}.pickup-art{transition:none;transform:none}}