:root{--lime:#baff82;--ink:#222716;--cream:#fffde8;--blue:#28aef4;--wood:#9b5b19;--tile:min(13.5vw,58px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:#d9ffc0;font-family:"Arial Rounded MT Bold","Microsoft YaHei",sans-serif;color:var(--ink);overflow:hidden}
button{font:inherit;cursor:pointer;border:0;touch-action:manipulation}
#app{position:relative;width:min(100vw,480px);height:100dvh;min-height:620px;margin:auto;overflow:hidden;background:var(--lime);box-shadow:0 0 30px #54773b55}
.screen{position:absolute;inset:0;display:none}.screen.active{display:block}
.home{background:url('assets/farm-home.png') center/cover no-repeat}
.brand{position:absolute;top:max(9.5%,52px);left:50%;transform:translateX(-50%) rotate(-1deg);white-space:nowrap;background:#171711;border:5px solid #fff;border-radius:22px;padding:8px 18px;color:#fff;font-size:clamp(22px,7vw,36px);box-shadow:0 7px 0 #171711,0 11px 18px #0005;text-shadow:2px 3px 0 #000}
.brand span{color:#6cff45}.brand b{color:#ffe946;margin-left:4px}
.home-bottom{position:absolute;left:7%;right:7%;bottom:max(7%,34px);text-align:center}
.primary{min-height:66px;padding:10px 34px;border:4px solid #121212;border-radius:20px;background:#fff;color:#111;font-size:clamp(25px,8vw,38px);font-weight:900;box-shadow:0 8px 0 #65b23b,0 12px 0 #111,0 18px 25px #0004}
.primary:active{transform:translateY(5px);box-shadow:0 3px 0 #65b23b,0 7px 0 #111}
.home-bottom .primary{width:100%}.home-bottom p{font-weight:800;color:#395c1e;text-shadow:0 1px #fff;font-size:14px}
.game{background:var(--lime);background-image:radial-gradient(#7fc957 1.5px,transparent 1.5px);background-size:70px 70px}
.topbar{height:92px;padding-top:max(16px,env(safe-area-inset-top));position:relative;z-index:30}
.square-btn{position:absolute;left:14px;top:max(18px,env(safe-area-inset-top));width:51px;height:51px;border:4px solid #172211;border-radius:10px;background:#25a8ef;color:#fff;font-size:27px;line-height:42px;box-shadow:0 5px 0 #647b45}
.date-pill{position:absolute;top:max(18px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);background:#10100e;color:white;border-radius:8px;padding:6px 18px;font-size:20px;font-weight:900;white-space:nowrap}
.date-pill i{position:absolute;width:70px;height:18px;background:#10100e;border-radius:10px;left:50%;top:42px;transform:translateX(-50%)}
.date-pill i:after{content:"";position:absolute;width:30px;height:12px;border-radius:10px;background:white;left:20px;top:3px}
.progress{position:absolute;left:24%;right:24%;bottom:3px;height:7px;background:#6b9d4e;border-radius:9px;overflow:hidden}.progress span{display:block;height:100%;width:0;background:#fff469;transition:.3s}
.board{position:absolute;left:8px;right:8px;top:100px;height:61%;z-index:5}
.card{--x:0;--y:0;position:absolute;width:var(--tile);height:var(--tile);left:calc(var(--x)*1%);top:calc(var(--y)*1%);border:2.5px solid #33431f;border-radius:7px;background:#fffde8;box-shadow:0 3px 0 #6a7d37,0 5px 6px #20371140;transition:left .24s,top .24s,transform .2s,filter .2s,opacity .2s;overflow:hidden}
.card .icon,.slot .icon,.reserve-card .icon{display:block;width:100%;height:100%;background-image:url('assets/farm-icons.png');background-size:400% 300%;background-position:calc(var(--col)*33.333%) calc(var(--row)*50%);background-repeat:no-repeat}
.card.covered{filter:saturate(.35) brightness(.58);cursor:not-allowed}.card.free:active{transform:scale(.92)}.card.blocked-hit{animation:shake .24s}
@keyframes shake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.card.picked{opacity:0;transform:scale(.7) translateY(30px);pointer-events:none}
.reserve{position:absolute;height:54px;left:14px;right:14px;bottom:238px;display:flex;gap:6px;align-items:center;z-index:20}
.reserve-card{width:48px;height:48px;border:2px solid #34421e;border-radius:7px;background:#fffde8;box-shadow:0 3px #728d42;overflow:hidden}
.tray{position:absolute;left:9px;right:9px;height:116px;bottom:112px;border:5px solid #6b3b12;border-radius:12px;background:#9c5c1a;box-shadow:inset 0 8px #bd7929,inset 0 -8px #7f4310,0 5px #527330;z-index:15;padding:24px 8px 14px}
.tray:after{content:"";position:absolute;left:-5px;right:-5px;bottom:-10px;height:16px;border:4px solid #6b3b12;border-radius:8px;background:repeating-linear-gradient(90deg,#b97425 0 30px,#8d5018 30px 35px)}
.tray-inner{height:64px;display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.slot{min-width:0;aspect-ratio:1;border:2px dashed #c2813c;border-radius:6px;background:#8a4c14;overflow:hidden;transition:.2s}.slot.filled{border-style:solid;background:#fffde8;box-shadow:0 3px #4f2d0d}.slot.match{animation:match .35s forwards}
@keyframes match{50%{transform:scale(1.2) rotate(5deg);filter:brightness(1.5)}100%{transform:scale(.1);opacity:0}}
.tools{position:absolute;bottom:max(10px,env(safe-area-inset-bottom));left:8%;right:8%;display:flex;justify-content:space-between;z-index:20}
.tool{position:relative;width:28%;height:87px;border:3px solid #426742;border-radius:11px;background:#28aff4;color:white;box-shadow:0 7px #1763a2,0 10px #436d30;text-shadow:2px 2px #1d405a}.tool:active{transform:translateY(4px);box-shadow:0 3px #1763a2}.tool-icon{display:block;color:#ffe12f;font-size:37px;line-height:44px;text-shadow:2px 3px #774e09}.tool b{display:block;font-size:20px}.tool em{position:absolute;right:-9px;top:-11px;width:27px;height:27px;border-radius:50%;background:#111;color:#fff;font-style:normal;line-height:27px}
.transition{display:none;position:absolute;inset:0;z-index:90;background:#fff;color:#222;text-align:center;padding-top:35%}.transition.show{display:block;animation:fadeIn .25s}.sheep-cloud{margin:auto;width:160px;height:130px;border:7px solid #222;border-radius:50%;background:#fff;font-size:34px;font-weight:900;padding-top:22px;box-shadow:-48px 28px 0 -15px #fff,-48px 28px 0 -9px #222,48px 28px 0 -15px #fff,48px 28px 0 -9px #222}.transition p{font-size:20px;font-weight:900;margin-top:48px}
.toast{position:absolute;z-index:100;left:50%;bottom:260px;transform:translate(-50%,20px);opacity:0;background:#171711e8;color:#fff;padding:10px 18px;border-radius:24px;font-weight:800;pointer-events:none;transition:.2s;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}
.modal{display:none;position:absolute;inset:0;z-index:110;background:#15300c99;align-items:center;justify-content:center;padding:22px}.modal.show{display:flex}.panel{position:relative;width:100%;max-width:370px;border:5px solid #1b2512;border-radius:24px;background:#fffde9;padding:29px 23px 24px;text-align:center;box-shadow:0 10px 0 #73ac3d,0 20px 35px #0005}.close{position:absolute;right:12px;top:8px;background:transparent;font-size:31px}.result-icon{font-size:55px;color:#ffd829;text-shadow:2px 3px #9d6500}.panel h2{font-size:31px;margin:0 0 8px}.panel p{min-height:22px}.settings-rows label{display:flex;justify-content:space-between;align-items:center;padding:13px 5px;border-top:1px solid #b7c697;font-size:19px;font-weight:800}.panel .primary{width:100%;min-height:55px;font-size:24px;margin-top:16px}.secondary{margin-top:18px;background:transparent;text-decoration:underline;color:#52673f}.panel.result .settings-rows{display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@media(max-height:700px){.board{top:82px;height:52%}.topbar{height:78px}.tray{height:100px;bottom:104px;padding-top:15px}.tools .tool{height:78px}.reserve{bottom:212px}}