:root{font-family: 'Trebuchet MS',system-ui,sans-serif;color:#233e33;background:#faf7ed;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:4px solid #e29a28;outline-offset:4px}main{max-width:1120px;margin:auto;padding:0 28px}header{height:72px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dcded0}header a{color:#385747;text-decoration:none;font-size:14px}.brand{font-weight:900;letter-spacing:2px}header button{border:1px solid #ccd5c7;background:transparent;border-radius:22px;padding:9px 14px}.intro{display:flex;justify-content:space-between;align-items:center;padding:25px 0 20px}.eyebrow{font-size:11px;letter-spacing:2.3px;font-weight:bold;color:#70805b}h1{font-size:clamp(27px,4vw,42px);letter-spacing:-1.5px;margin:7px 0}p{line-height:1.6}.intro p{margin:5px 0}.score{display:grid;grid-template-columns:auto auto;gap:0 9px;font-size:26px}.score span{grid-column:1/3;font-size:12px;text-align:center}.yard{height:190px;position:relative;overflow:hidden;background:#dceee7;border-radius:20px}.sun{position:absolute;right:18%;top:22px;width:44px;height:44px;background:#f5ce63;border-radius:50%}.hills{position:absolute;left:40%;bottom:29px;width:80%;height:70px;background:#bad0a2;border-radius:100% 100% 0 0}.shop{position:absolute;left:6%;bottom:27px;width:240px;height:136px;background:#faeac6;border-radius:9px 9px 0 0;z-index:1;text-align:center;padding-top:11px}.shop>span{font-size:12px;font-weight:900;letter-spacing:2px}.awning{height:24px;margin-top:10px;background:repeating-linear-gradient(90deg,#df7151 0 24px,#fff7dc 24px 48px);border-radius:0 0 9px 9px}.door{margin:9px auto;background:#537866;width:164px;height:60px;font-size:35px;padding:7px}.road{position:absolute;bottom:0;height:28px;width:100%;background:#a9b7a4;border-top:5px solid #f3e6c5}.truck{position:absolute;width:270px;height:135px;bottom:15px;right:10%;z-index:2;transform:translateX(170%)}.truck.arrived{transform:translateX(0);transition:transform 1.3s ease-out}.truck.departed{transform:translateX(180%);transition:transform 1.4s ease-in}.cargo{position:absolute;left:0;top:6px;background:#4e8265;width:177px;height:101px;border:5px solid #37654c;border-radius:8px;color:#fff7dc;text-align:center;padding-top:14px;font-size:11px;letter-spacing:1px;font-weight:bold}.cab{position:absolute;right:0;bottom:26px;width:88px;height:83px;background:#e8ad46;border-radius:12px 30px 6px 3px;border-bottom:9px solid #c18a30}.window{margin:7px;width:55px;height:43px;background:#e0f1e9;border-radius:6px 19px 3px 3px;overflow:hidden;text-align:center}.window span{font-size:37px}.cab i{display:block;position:absolute;right:0;bottom:3px;background:#fff3b3;width:13px;height:10px}.wheel{position:absolute;bottom:9px;width:36px;height:36px;background:#33403b;border:8px solid #26342d;border-radius:50%;box-shadow:inset 0 0 0 5px #abb5a6}.one{left:24px}.two{right:18px}.crate{display:none;background:#bf884b;border:3px solid #91643b;position:absolute;width:90px;left:38px;bottom:4px;font-size:8px;padding:3px;color:#fff7dc}.loaded .crate{display:block;animation:load .7s ease-out}.message{min-height:49px;padding:14px 10px;text-align:center;font-weight:bold;font-size:16px}.section-label{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:10px 0}h2{font-size:16px;margin:0}.section-label>span{font-size:12px;color:#6b7868}.table{min-height:111px;display:grid;grid-template-columns:repeat(10,1fr);gap:8px;padding:12px;background:#dfbf88;border:5px solid #cea66e;border-bottom:10px solid #b68b55;border-radius:13px}.fruit{min-width:0;width:100%;border:0;border-radius:12px;background:#fffaf0;box-shadow:0 3px 0 #0002;padding:3px 2px 6px;touch-action:none;user-select:none;color:#263e32;position:relative}.fruit .emoji{font-size:35px;display:block;line-height:1.2}.fruit .price{font-weight:900;font-size:17px;white-space:nowrap}.fruit.selected{outline:4px solid #337552;background:#fff3b4;transform:translateY(-4px)}.fruit.rolling{animation:roll .75s both;animation-delay:var(--delay)}.bags{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;padding-top:9px}.bag{position:relative;background:#e8ca96;border:2px solid #d6b17c;border-bottom:7px solid #c89c62;border-radius:5px 5px 17px 17px;min-height:144px;padding:14px 10px 8px;cursor:pointer}.bag:before{content:'';position:absolute;left:34%;right:34%;top:-10px;height:22px;border:4px solid #c69c63;border-bottom:0;border-radius:20px 20px 0 0;z-index:-1}.bag-title{text-align:center;font-weight:900;font-size:19px;margin-bottom:9px}.slots{display:grid;grid-template-columns:1fr 1fr;gap:7px;min-height:77px}.slot{border:2px dashed #c4a16e;border-radius:10px;display:grid;place-items:center;color:#aa8553;font-size:26px}.bag.wrong{outline:3px solid #c56b46}.bag.correct{outline:3px solid #4c8c63}.bags.packed .bag{animation:pack .7s both;animation-delay:var(--delay);pointer-events:none}footer{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:22px 0}footer>span{font-size:12px;color:#6b7868;max-width:430px}footer button,.welcome button{background:#347654;color:white;border:0;border-bottom:5px solid #245b3e;border-radius:13px;padding:14px 42px;font-weight:900;font-size:23px}button:disabled{opacity:.5;cursor:default}[hidden]{display:none!important}.overlay{position:fixed;inset:0;background:#243e3388;backdrop-filter:blur(5px);z-index:10;display:grid;place-items:center;padding:20px}.welcome{max-width:520px;text-align:center;background:#fffaf0;border-radius:26px;padding:35px;box-shadow:0 25px 80px #20392f44}.welcome-fruit{font-size:54px}.welcome h1{font-size:38px}.example{background:#f0e7ce;border-radius:12px;padding:12px;font-size:22px;font-weight:bold}.drag-ghost{position:fixed;width:80px;z-index:20;pointer-events:none;opacity:.9}.impatient .window span{display:block;animation:grumble .25s 3}@keyframes roll{from{transform:translateX(-400px) rotate(-220deg);opacity:0}to{transform:none;opacity:1}}@keyframes pack{to{transform:translateY(-65px) scale(.15);opacity:0}}@keyframes load{from{transform:translateY(-70px);opacity:0}to{transform:none;opacity:1}}@keyframes grumble{50%{transform:translateX(3px)}}@media(max-width:700px){main{padding:0 14px}header{height:59px}.brand{font-size:12px;letter-spacing:1px}header a,header button{font-size:12px}.intro{padding:18px 0}.intro p{font-size:13px}.score{font-size:22px}.yard{height:158px}.shop{left:4%;width:165px;height:117px}.door{width:135px;font-size:28px;height:47px}.shop>span{font-size:9px}.truck{right:3%;scale:.78;transform-origin:right bottom}.table{grid-template-columns:repeat(5,1fr)}.bags{grid-template-columns:repeat(3,1fr);gap:18px 10px}.bag{padding:10px 7px 7px;min-height:133px}.fruit .emoji{font-size:32px}.section-label>span{font-size:10px}.message{font-size:14px}footer{align-items:flex-end}footer button{padding:13px 25px}footer>span{max-width:190px}.welcome{padding:25px}.welcome h1{font-size:32px}}@media(prefers-reduced-motion:reduce){*,*:before{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}}


.door{white-space:nowrap;font-size:28px;overflow:hidden}@media(max-width:700px){.door{font-size:23px}}