*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;
-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
-webkit-user-drag:none;-webkit-touch-callout:none}


@property --amb1{syntax:'<color>';inherits:true;initial-value:#20401f}
@property --amb2{syntax:'<color>';inherits:true;initial-value:#08120a}
@property --amb-glow{syntax:'<color>';inherits:true;initial-value:#7fd060}






:root{
--bg:#1e3122;--bg2:#101d13;
--cell-empty:#243f28;--cell-border:#436d46;--cell-full:#2f582b;
--hud:#152616;--hud-border:#35503a;
--panel:#1c2c1f;--panel-border:#33503a;
--text:#eef9e8;--text2:#b3d6b0;--text3:#7ba07c;
--gold:#f5c848;--energy:#5cc4f2;--accent:#7fd060;--accent-soft:#7fd06033;


--radius:14px;--cell-max:88px;--cell-size:min(13vw,88px);
--amb1:#20401f;--amb2:#08120a;--amb-glow:#7fd060;






--t-tap:.12s;
--t-ui:.18s;
--t-move:.30s;
--t-open:.38s;
--e-out:cubic-bezier(.2,.9,.3,1);
--e-pop:cubic-bezier(.3,1.3,.5,1);
--e-snap:cubic-bezier(.2,1.5,.4,1);
}

body[data-chapter="0"]{--amb1:#22421f;--amb2:#08130a;--amb-glow:#7fd060}
body[data-chapter="1"]{--amb1:#123a5c;--amb2:#050f1c;--amb-glow:#54c2f2}
body[data-chapter="2"]{--amb1:#1d1d50;--amb2:#08081e;--amb-glow:#9a8cf5}
body[data-chapter="3"]{--amb1:#46190d;--amb2:#150604;--amb-glow:#f08a2a}
body[data-chapter="4"]{--amb1:#2a5270;--amb2:#0a1622;--amb-glow:#8fd8f8}
body[data-chapter="5"]{--amb1:#2c1a54;--amb2:#0c0722;--amb-glow:#b06ae8}
body[data-chapter="6"]{--amb1:#3a5276;--amb2:#0c1320;--amb-glow:#ffd880}
body[data-chapter="7"]{--amb1:#123322;--amb2:#04120a;--amb-glow:#5ce8a0}
body[data-chapter="8"]{--amb1:#4a3410;--amb2:#160e04;--amb-glow:#ffce5a}
body[data-chapter="9"]{--amb1:#3a2038;--amb2:#160812;--amb-glow:#ff9ac8}
body[data-chapter="10"]{--amb1:#4a1c30;--amb2:#1a0810;--amb-glow:#ff7ab0}
body[data-chapter="11"]{--amb1:#123050;--amb2:#08162e;--amb-glow:#ffd84a}






html,body{width:100%;height:100%;overflow:hidden;background:var(--bg2);
overscroll-behavior:none;-webkit-overflow-scrolling:auto}
body{position:fixed;top:0;left:0;right:0;bottom:0;
display:flex;flex-direction:column;font-family:'Segoe UI',system-ui,sans-serif;
background:
radial-gradient(135% 90% at 50% -18%, var(--amb1) 0%, transparent 58%),
linear-gradient(180deg, var(--amb2) 0%, #050906 100%);
min-height:100dvh;







transition:background .7s ease}


#screen-game,#screen-garden,#screen-dacha{width:100%;height:100%;display:flex;flex-direction:column;position:absolute;inset:0;transition:opacity var(--t-open),transform var(--t-open)}
#screen-garden{opacity:0;pointer-events:none;transform:translateX(100%)}
#screen-garden.active{opacity:1;pointer-events:all;transform:translateX(0)}
#screen-game.hidden{opacity:0;pointer-events:none;transform:translateX(-100%)}


#screen-dacha{opacity:0;pointer-events:none;transform:translateX(100%);z-index:120;
background:linear-gradient(180deg,#2f6a3a 0%,#4a8a44 100%)}
#screen-dacha.active{opacity:1;pointer-events:all;transform:translateX(0)}


#app{display:flex;flex-direction:row;flex:1;overflow:hidden;min-height:0;position:relative}


#side-panel{
width:72px;background:linear-gradient(180deg,#1e311f05,#1c2c1f 12%,#16261a 100%);
border-right:1px solid var(--panel-border);
display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:9px;
overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:8px;flex-shrink:0;
scrollbar-width:thin;scrollbar-color:#49644a transparent;
box-shadow:inset -6px 0 14px -8px rgba(0,0,0,.5);
}
#side-panel::-webkit-scrollbar{width:4px}
#side-panel::-webkit-scrollbar-thumb{background:#49644a;border-radius:4px}
.chapter-btn{
width:52px;height:52px;border-radius:13px;border:1.5px solid var(--panel-border);
background:linear-gradient(160deg,#2b4830,#1d321a);display:flex;flex-direction:column;align-items:center;
justify-content:center;cursor:pointer;transition:all var(--t-ui) var(--e-pop);position:relative;gap:2px;
box-shadow:inset 0 1px 2px rgba(255,255,255,.04),0 2px 5px rgba(0,0,0,.3);
}
.chapter-btn.active{border-color:var(--amb-glow);background:linear-gradient(160deg,#35643a,#204526);
box-shadow:0 0 0 2px var(--amb-glow),0 0 16px -2px var(--amb-glow),inset 0 1px 3px rgba(255,255,255,.08)}
.chapter-btn.active .chapter-icon{transform:scale(1.08)}
.chapter-btn.locked{opacity:0.38;cursor:not-allowed;filter:grayscale(0.6)}
.chapter-btn.unlocked:not(.active):hover{border-color:var(--text3);background:linear-gradient(160deg,#31513170,#22381f);transform:translateY(-1px)}
.chapter-btn.unlocked:active{transform:scale(.94)}
.chapter-icon{font-size:22px;line-height:1;transition:transform var(--t-ui);filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.chapter-num{font-size:9px;color:var(--text2);font-weight:600;letter-spacing:0.04em}
.chapter-dot{position:absolute;bottom:4px;right:4px;width:6px;height:6px;border-radius:50%;background:var(--accent);display:none}
.chapter-btn.active .chapter-dot{display:block}
.chapter-new-badge{
position:absolute;top:-4px;right:-4px;background:#e04020;color:#fff;
font-size:8px;font-weight:700;border-radius:6px;padding:1px 4px;display:none;
}
.chapter-btn.just-unlocked .chapter-new-badge{display:block}


#garden-btn{
margin-top:auto;width:52px;height:52px;border-radius:13px;
border:1.5px solid #7fd06060;background:linear-gradient(160deg,#25482a,#16301a);
display:flex;flex-direction:column;align-items:center;justify-content:center;
cursor:pointer;transition:all var(--t-ui) var(--e-pop);gap:2px;font-size:20px;color:var(--accent);



opacity:0.3;cursor:help;box-shadow:inset 0 1px 2px rgba(255,255,255,.06);
}
#garden-btn>*{filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
#garden-btn.ready{opacity:1;pointer-events:all;box-shadow:0 0 12px #7fd06030,inset 0 1px 2px rgba(255,255,255,.08);animation:garden-pulse 2s ease-in-out infinite}
#garden-btn.ready:hover{transform:translateY(-2px)}
#garden-btn.ready:active{transform:scale(.93)}
#garden-btn-label{font-size:8px;color:var(--accent);font-weight:600}
@keyframes garden-pulse{0%,100%{box-shadow:0 0 8px #7fd06030}50%{box-shadow:0 0 20px #7fd06070}}


#shop-btn{
margin-top:8px;width:52px;height:52px;border-radius:13px;
border:1.5px solid #f5c84860;background:linear-gradient(160deg,#3a3320,#221c10);
display:flex;flex-direction:column;align-items:center;justify-content:center;
cursor:pointer;transition:all var(--t-ui) var(--e-pop);gap:2px;font-size:20px;color:var(--gold);
box-shadow:inset 0 1px 2px rgba(255,255,255,.06),0 2px 5px rgba(0,0,0,.3);
}
#shop-btn>*{filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
#shop-btn-label{font-size:7px;color:var(--gold);font-weight:700;letter-spacing:.02em}
#shop-btn:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 0 14px -2px var(--gold),inset 0 1px 2px rgba(255,255,255,.08)}
#shop-btn:active{transform:scale(.93)}




#shop-modal,#dacha-modal,#shed-modal{position:fixed;inset:0;z-index:220;display:none;align-items:center;justify-content:center;
background:rgba(4,10,6,.66);backdrop-filter:blur(5px);padding:16px}
#shop-modal.show,#dacha-modal.show,#shed-modal.show{display:flex}
#shop-box,#dacha-box,#shed-box{width:100%;max-width:440px;max-height:88vh;max-height:min(88vh,88dvh);display:flex;flex-direction:column;
background:linear-gradient(165deg,#283a26,#19291a);border:1.5px solid #35543a;border-radius:22px;
box-shadow:0 28px 70px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden;
animation:popup-in var(--t-open) var(--e-snap)}
#shop-head,#dacha-mhead,#shed-head{display:flex;align-items:center;gap:10px;padding:16px 18px;
background:linear-gradient(180deg,rgba(40,60,40,.5),transparent);border-bottom:1px solid #2a3f2c;flex-shrink:0}
#shop-title,#dacha-mtitle,#shed-title{font-size:18px;font-weight:800;color:#eef8e6;letter-spacing:.02em}
#shop-coins,#dacha-mcoins,#shed-coins{margin-left:auto;display:flex;align-items:center;gap:5px;font-size:15px;font-weight:800;color:var(--gold);
background:rgba(0,0,0,.28);border:1px solid #4a3d20;border-radius:20px;padding:5px 12px;text-shadow:0 0 8px rgba(245,200,72,.4)}
#shop-close,#dacha-mclose,#shed-close{width:32px;height:32px;border-radius:10px;border:1px solid #3a5a3c;background:rgba(0,0,0,.3);
color:var(--text2);font-size:15px;cursor:pointer;transition:all var(--t-tap);display:flex;align-items:center;justify-content:center}
#shop-close:hover,#dacha-mclose:hover,#shed-close:hover{background:#e0402015;border-color:#e05040;color:#ff9080}
#shop-body,#dacha-mbody,#shed-body{padding:14px 16px 18px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
#shop-body.shake,#dacha-mbody.shake,#shed-body.shake{animation:shop-shake .4s}
@keyframes shop-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.shop-sec-title{font-size:12px;font-weight:700;color:var(--text2);letter-spacing:.06em;text-transform:uppercase;margin:6px 2px 10px}
.shop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:6px}
.shop-card{position:relative;background:linear-gradient(160deg,#2c4529,#1e3320a0);border:1.5px solid #2f4a32;
border-radius:15px;padding:12px 10px 10px;display:flex;flex-direction:column;align-items:center;gap:4px;
box-shadow:inset 0 1px 2px rgba(255,255,255,.04)}
.shop-card.is-owned{border-color:#4a7a4c;background:linear-gradient(160deg,#2f5a2b,#1e3320a0)}
.shop-zone{position:absolute;top:6px;left:8px;font-size:13px;opacity:.85}
.shop-ic{font-size:30px;line-height:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));margin-top:2px}
.shop-nm{font-size:12.5px;font-weight:700;color:var(--text);text-align:center;line-height:1.15}
.shop-dsc{font-size:11px;color:var(--text3);font-weight:600}
.shop-buy{margin-top:5px;width:100%;border:none;border-radius:10px;padding:7px 6px;cursor:pointer;
display:flex;flex-direction:column;align-items:center;gap:1px;font-weight:700;transition:all var(--t-tap);
background:linear-gradient(165deg,#8ce06a,#5fb03e);color:#0a1a0a;
box-shadow:0 3px 8px rgba(0,0,0,.3),inset 0 1px 2px rgba(255,255,255,.35)}
.shop-buy .pr{font-size:12px;font-weight:800}
.shop-buy:hover{filter:brightness(1.07);transform:translateY(-1px)}
.shop-buy:active{transform:scale(.96)}
.shop-buy.cant{background:linear-gradient(165deg,#5a6a52,#3f4a3a);color:#c8d8c0;opacity:.85;box-shadow:0 2px 5px rgba(0,0,0,.3)}
.shop-owned{margin-top:5px;width:100%;text-align:center;font-size:12px;font-weight:800;color:#8ce06a;padding:7px 0}
.shop-owned.max{color:var(--gold)}


#coll-btn{
margin-top:8px;width:52px;height:52px;border-radius:13px;
border:1.5px solid #c080ff55;background:linear-gradient(160deg,#2a2340,#181228);
display:flex;flex-direction:column;align-items:center;justify-content:center;
cursor:pointer;transition:all var(--t-ui) var(--e-pop);gap:2px;font-size:20px;color:#c8a8ff;
box-shadow:inset 0 1px 2px rgba(255,255,255,.06),0 2px 5px rgba(0,0,0,.3);
}
#coll-btn>*{filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
#coll-btn-label{font-size:7px;color:#c8a8ff;font-weight:700;letter-spacing:.02em}
#coll-btn:hover{transform:translateY(-2px);border-color:#c080ff;box-shadow:0 0 14px -2px #c080ff,inset 0 1px 2px rgba(255,255,255,.08)}
#coll-btn:active{transform:scale(.93)}


#coll-modal{position:fixed;inset:0;z-index:220;display:none;align-items:center;justify-content:center;
background:rgba(4,10,6,.66);backdrop-filter:blur(5px);padding:16px}
#coll-modal.show{display:flex}
#coll-box{width:100%;max-width:460px;max-height:88vh;max-height:min(88vh,88dvh);display:flex;flex-direction:column;
background:linear-gradient(165deg,#283a26,#19291a);border:1.5px solid #35543a;border-radius:22px;
box-shadow:0 28px 70px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden;
animation:popup-in var(--t-open) var(--e-snap)}
#coll-head{display:flex;align-items:center;gap:10px;padding:16px 18px;
background:linear-gradient(180deg,rgba(40,60,40,.5),transparent);border-bottom:1px solid #2a3f2c;flex-shrink:0}
#coll-title{font-size:18px;font-weight:800;color:#eef8e6;letter-spacing:.02em}
#coll-count{margin-left:auto;font-size:15px;font-weight:800;color:var(--accent);
background:rgba(0,0,0,.28);border:1px solid #3a5a3c;border-radius:20px;padding:5px 12px}
.coll-count-tot{color:var(--text3)}
#coll-close{width:32px;height:32px;border-radius:10px;border:1px solid #3a5a3c;background:rgba(0,0,0,.3);
color:var(--text2);font-size:15px;cursor:pointer;transition:all var(--t-tap);display:flex;align-items:center;justify-content:center}
#coll-close:hover{background:#e0402015;border-color:#e05040;color:#ff9080}
#coll-body{padding:12px 16px 18px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.coll-chapter{margin-bottom:16px}
.coll-ch-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.coll-ch-ic{font-size:18px}
.coll-ch-name{font-size:13px;font-weight:700;color:var(--text)}
.coll-ch-prog{margin-left:auto;font-size:12px;font-weight:700;color:var(--text2)}
.coll-chbar{height:5px;background:#16281680;border-radius:4px;overflow:hidden;margin-bottom:10px}
.coll-chbar-fill{height:100%;background:linear-gradient(90deg,#4a9a28,#7fd060);border-radius:4px;transition:width .5s}
.coll-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.coll-item{position:relative;background:linear-gradient(160deg,#263a26,#1a2c1aa0);border:1.5px solid #26402a;
border-radius:13px;padding:8px 4px 6px;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:78px}
.coll-item.got{border-color:#3c6a3e;background:linear-gradient(160deg,#2c4e2a,#1e3320a0)}
.coll-item.got.bonus{border-color:#a06adf;box-shadow:0 0 10px -3px #c080ff,inset 0 1px 2px rgba(255,255,255,.05)}
.coll-cv-wrap{width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.coll-cv{width:44px;height:44px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.coll-lock{font-size:22px;opacity:.5;color:var(--text3)}
.coll-item:not(.got) .coll-lock{filter:grayscale(1)}
.coll-nm{font-size:9.5px;font-weight:600;color:var(--text2);text-align:center;line-height:1.1;max-width:100%;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
.coll-item:not(.got) .coll-nm{color:var(--text3)}
.coll-badge{position:absolute;top:3px;right:4px;font-size:10px;opacity:.9}
@media(max-width:420px){.coll-grid{grid-template-columns:repeat(3,1fr)}}


#quest-btn{
margin-top:8px;width:52px;height:52px;border-radius:13px;position:relative;
border:1.5px solid #f0904055;background:linear-gradient(160deg,#3a2a20,#241810);
display:flex;flex-direction:column;align-items:center;justify-content:center;
cursor:pointer;transition:all var(--t-ui) var(--e-pop);gap:2px;font-size:20px;color:#f0a860;
box-shadow:inset 0 1px 2px rgba(255,255,255,.06),0 2px 5px rgba(0,0,0,.3);
}
#quest-btn>*{filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
#quest-btn-label{font-size:7px;color:#f0a860;font-weight:700;letter-spacing:.02em}
#quest-btn:hover{transform:translateY(-2px);border-color:#f0a040;box-shadow:0 0 14px -2px #f0a040,inset 0 1px 2px rgba(255,255,255,.08)}
#quest-btn:active{transform:scale(.93)}
.quest-btn-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;border-radius:8px;
background:#e0402a;color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;
box-shadow:0 0 8px #e0402a;animation:quest-badge-pulse 1.4s ease-in-out infinite}
@keyframes quest-badge-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}


#quest-modal{position:fixed;inset:0;z-index:220;display:none;align-items:center;justify-content:center;
background:rgba(4,10,6,.66);backdrop-filter:blur(5px);padding:16px}
#quest-modal.show{display:flex}
#quest-box{width:100%;max-width:420px;max-height:88vh;max-height:min(88vh,88dvh);display:flex;flex-direction:column;
background:linear-gradient(165deg,#283a26,#19291a);border:1.5px solid #35543a;border-radius:22px;
box-shadow:0 28px 70px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden;
animation:popup-in var(--t-open) var(--e-snap)}
#quest-head{display:flex;align-items:center;gap:10px;padding:16px 18px;
background:linear-gradient(180deg,rgba(40,60,40,.5),transparent);border-bottom:1px solid #2a3f2c;flex-shrink:0}
#quest-title{font-size:18px;font-weight:800;color:#eef8e6;letter-spacing:.02em}
#quest-close{margin-left:auto;width:32px;height:32px;border-radius:10px;border:1px solid #3a5a3c;background:rgba(0,0,0,.3);
color:var(--text2);font-size:15px;cursor:pointer;transition:all var(--t-tap);display:flex;align-items:center;justify-content:center}
#quest-close:hover{background:#e0402015;border-color:#e05040;color:#ff9080}
#quest-body{padding:14px 16px 8px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;display:flex;flex-direction:column;gap:10px}
#quest-foot{padding:10px 16px 16px;text-align:center;font-size:11px;color:var(--text3);font-weight:600}
.quest-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:15px;
background:linear-gradient(160deg,#2c4529,#1e3320a0);border:1.5px solid #2f4a32;
box-shadow:inset 0 1px 2px rgba(255,255,255,.04)}
.quest-card.done{opacity:.6}
.quest-ic{font-size:24px;flex-shrink:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.quest-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.quest-txt{font-size:13px;font-weight:700;color:var(--text)}
.quest-bar{height:7px;background:#1c2e18;border-radius:5px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.quest-bar-fill{height:100%;background:linear-gradient(90deg,#4a9a28,#7fd060);border-radius:5px;transition:width var(--t-open)}
.quest-sub{font-size:11px;color:var(--text3);font-weight:600}
.quest-rw{flex-shrink:0;display:flex;align-items:center;justify-content:center;min-width:74px}
.quest-prize{font-size:12px;font-weight:800;color:var(--gold);opacity:.7;text-align:center}
.quest-check{width:34px;height:34px;border-radius:50%;background:#2a5a2c;color:#8ce06a;font-size:18px;font-weight:800;
display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 3px rgba(0,0,0,.3)}
.quest-claim{border:none;border-radius:11px;padding:8px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1px;
font-size:12px;font-weight:800;color:#1a1206;background:linear-gradient(165deg,#ffd86a,#e0a828);
box-shadow:0 3px 8px rgba(0,0,0,.3),inset 0 1px 2px rgba(255,255,255,.45);animation:quest-badge-pulse 1.6s ease-in-out infinite}
.quest-claim span{font-size:11px}
.quest-claim:hover{filter:brightness(1.06);transform:translateY(-1px)}
.quest-claim:active{transform:scale(.95)}


#main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:10px 8px 6px;position:relative}
#chapter-title,#chain-bar,#field-wrap{position:relative;z-index:1}
#chapter-title{font-size:13px;font-weight:700;color:var(--text);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:8px;text-align:center;








text-shadow:0 1px 8px var(--amb-glow),0 1px 4px rgba(0,0,0,.92),
0 0 3px rgba(0,0,0,.85),0 -1px 3px rgba(0,0,0,.75),
0 0 10px rgba(0,0,0,.55);transition:color var(--t-open)}



#world-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#world-bg.wbg-in{animation:wbg-in .8s ease}
@keyframes wbg-in{from{opacity:0}to{opacity:1}}

#ambient{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
#ambient span{position:absolute;bottom:-14px;width:9px;height:9px;border-radius:50%;
background:radial-gradient(circle,var(--amb-glow) 0%,transparent 70%);
opacity:0;filter:blur(.5px);animation:mote linear infinite;will-change:transform,opacity}
@keyframes mote{
0%{transform:translateY(0) translateX(0) scale(.5);opacity:0}
12%{opacity:.55}
88%{opacity:.4}
100%{transform:translateY(-78vh) translateX(14px) scale(1);opacity:0}
}
#ambient span:nth-child(1){left:9%;width:7px;height:7px;animation-duration:15s;animation-delay:-2s}
#ambient span:nth-child(2){left:26%;width:11px;height:11px;animation-duration:19s;animation-delay:-9s}
#ambient span:nth-child(3){left:44%;width:6px;height:6px;animation-duration:13s;animation-delay:-5s}
#ambient span:nth-child(4){left:61%;width:10px;height:10px;animation-duration:21s;animation-delay:-14s}
#ambient span:nth-child(5){left:78%;width:8px;height:8px;animation-duration:17s;animation-delay:-3s}
#ambient span:nth-child(6){left:90%;width:6px;height:6px;animation-duration:16s;animation-delay:-11s}
#ambient span:nth-child(7){left:15%;width:5px;height:5px;animation-duration:23s;animation-delay:-18s}
@media(prefers-reduced-motion:reduce){#ambient{display:none}}








#chain-bar{
display:flex;align-items:center;gap:4px;margin-bottom:10px;flex-shrink:0;
background:linear-gradient(180deg,rgba(45,70,48,.92),rgba(24,40,27,.92));
border:1px solid var(--panel-border);
border-radius:40px;padding:8px 14px;max-width:100%;overflow-x:auto;
scrollbar-width:none;box-shadow:inset 0 1px 1px rgba(255,255,255,.07),0 4px 14px rgba(0,0,0,.3);
}
#chain-bar::-webkit-scrollbar{display:none}
.chain-item{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0}
.chain-icon{
width:42px;height:42px;border-radius:11px;background:linear-gradient(160deg,#2a4830,#1d331a);
border:1.5px solid var(--cell-border);display:flex;align-items:center;justify-content:center;
transition:border-color var(--t-ui),background var(--t-ui),box-shadow var(--t-ui),transform var(--t-tap);
box-shadow:inset 0 1px 2px rgba(0,0,0,.22);
}
.chain-icon canvas{filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}







.chain-label{font-size:10px;color:var(--text3);text-align:center;line-height:1.2;font-weight:500;
max-width:48px;overflow-wrap:anywhere;hyphens:manual}
.chain-arrow{font-size:13px;color:var(--text3);margin:0 1px;margin-top:-12px;opacity:0.5;flex-shrink:0}
.chain-item.discovered .chain-icon{border-color:var(--accent);background:#2b532b;box-shadow:0 0 6px #7fd06030}
.chain-item.discovered .chain-label{color:var(--text2)}
.chain-item.undiscovered .chain-icon{opacity:0.28}
.chain-item.key-item .chain-icon{border-color:#f0c040;box-shadow:0 0 8px #f0c04030}
.chain-item.bonus-item .chain-icon{border-color:#c080ff;box-shadow:0 0 8px #c080ff25}
.chain-item.new-discovered .chain-icon{animation:chain-pop 0.5s var(--e-snap) forwards}


#field-wrap{display:flex;align-items:center;justify-content:center;position:relative}

#field-wrap::before{
content:'';position:absolute;inset:-6%;z-index:0;pointer-events:none;
background:radial-gradient(closest-side,var(--amb-glow) 0%,transparent 72%);


opacity:.22;filter:blur(26px);transition:opacity .7s;
}
#field{
position:relative;z-index:1;
display:grid;grid-template-columns:repeat(5,var(--cell-size));grid-template-rows:repeat(5,var(--cell-size));
gap:6px;



background:linear-gradient(160deg,#24402a 0%,#1a2f1e 100%);
border:1.5px solid #436e47;border-radius:22px;padding:12px;
box-shadow:inset 0 2px 12px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.05),0 14px 34px rgba(0,0,0,.45);
}
.cell{
width:var(--cell-size);height:var(--cell-size);border-radius:var(--radius);
background:linear-gradient(155deg,#27452c 0%,#1d351b 100%);
border:1.5px dashed rgba(104,152,106,.62);
box-shadow:inset 0 1px 3px rgba(0,0,0,.22);





touch-action:none;
display:flex;align-items:center;justify-content:center;cursor:pointer;
transition:border-color var(--t-ui),background var(--t-ui),box-shadow var(--t-ui),transform var(--t-tap) var(--e-pop);position:relative;overflow:visible;
}
.cell.has-item{border-style:solid;border-color:#548454;cursor:grab;
background:radial-gradient(125% 120% at 50% 15%,#375c37 0%,#1e3b20 100%);
box-shadow:inset 0 1px 4px rgba(0,0,0,.2),inset 0 0 14px rgba(255,255,255,.06),0 3px 8px rgba(0,0,0,.3);}
.cell.has-item:active{cursor:grabbing}



.cell.drag-over{border-color:var(--accent);background:#2d552d;transform:scale(1.06);box-shadow:0 0 0 3px var(--accent-soft),0 6px 16px rgba(0,0,0,.4)}
.cell.merge-target{border-color:#fff;animation:pulse-merge 0.55s ease-out forwards}
.cell.selected{border-color:var(--accent);background:#305a30;transform:scale(1.05);box-shadow:0 0 0 3px var(--accent-soft),0 8px 18px rgba(0,0,0,.45)}
.cell-canvas{width:80%;height:80%;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(5,14,7,.45))}
.cell.anim-spawn .cell-canvas{animation:cell-spawn var(--t-open) var(--e-snap) forwards}
.cell.anim-move  .cell-canvas{animation:cell-move var(--t-move) var(--e-pop) forwards}


#hud{
width:100%;background:linear-gradient(180deg,#1b3020,#102213);border-top:1px solid var(--hud-border);
padding:10px 14px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0;
box-shadow:0 -6px 18px -6px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04);position:relative;z-index:2;
}
.hud-block{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:58px}
.hud-label{font-size:9px;color:var(--text3);letter-spacing:0.08em;text-transform:uppercase;font-weight:600}
.hud-value{font-size:18px;font-weight:700;color:var(--text);line-height:1}
.hud-value.gold{color:var(--gold);text-shadow:0 0 10px rgba(245,200,72,.35)}
.hud-value.energy{color:var(--energy);text-shadow:0 0 10px rgba(92,196,242,.35)}
.hud-value.bump{animation:hud-coin-bump var(--t-move) ease-out}
.hud-energy-bar{width:80px;height:6px;background:#254a25;border-radius:4px;overflow:hidden}
.hud-energy-fill{height:100%;background:linear-gradient(90deg,#3090d0,#70d0f8);border-radius:4px;transition:width var(--t-move)}
.hud-progress{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}
.hud-prog-bar{width:100%;max-width:170px;height:9px;background:#254a25;border-radius:5px;overflow:hidden;box-shadow:inset 0 1px 3px #00000040}
.hud-prog-fill{height:100%;background:linear-gradient(90deg,#4a9a28,#7fd060);border-radius:5px;transition:width 0.5s var(--e-pop);position:relative}
.hud-prog-fill::after{content:'';position:absolute;top:1px;left:6px;right:6px;height:3px;background:#ffffff30;border-radius:2px}
.hud-prog-label{font-size:10px;color:var(--text2);font-weight:500}
.hud-btn{
width:46px;height:46px;border-radius:13px;border:1.5px solid #5ea840;
background:linear-gradient(160deg,#4a9a30,#357020);color:#eafce0;
display:flex;align-items:center;justify-content:center;
cursor:pointer;font-size:20px;transition:all var(--t-ui) var(--e-pop);
box-shadow:0 3px 8px rgba(0,0,0,.4),inset 0 1px 2px rgba(255,255,255,.22);
}
.hud-btn:hover{background:linear-gradient(160deg,#5cb840,#3f8526);border-color:var(--accent);box-shadow:0 4px 12px rgba(0,0,0,.45),0 0 14px -2px var(--accent),inset 0 1px 2px rgba(255,255,255,.25);transform:translateY(-1px)}

.hud-btn.holding{transform:scale(.92);box-shadow:0 0 0 3px var(--accent-soft),0 0 18px -2px var(--accent)}
.hud-btn{touch-action:manipulation}
.hud-btn:active{transform:scale(0.9)}


@keyframes pulse-merge{
0%{transform:scale(1.18);box-shadow:0 0 0 4px #ffffff50,0 0 24px #fff6}
40%{transform:scale(1.06);box-shadow:0 0 0 2px #7fd06060}
100%{transform:scale(1);box-shadow:none;border-color:var(--cell-full)}
}
@keyframes cell-spawn{0%{transform:scale(0) rotate(-12deg);opacity:0}60%{transform:scale(1.15) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(0)}}
@keyframes cell-move{0%{transform:scale(1)}30%{transform:scale(0.88)}70%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes chain-pop{0%{transform:scale(0.6);opacity:0.3}60%{transform:scale(1.2)}100%{transform:scale(1);opacity:1}}
@keyframes hud-coin-bump{0%{transform:scale(1)}40%{transform:scale(1.25);color:#ffe066}100%{transform:scale(1)}}
@keyframes garden-enter{0%{opacity:0;transform:scale(0.96) translateY(10px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes shimmer{0%,100%{opacity:0.6}50%{opacity:1}}





#boot-loader{position:fixed;inset:0;z-index:500;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:16px;
background:radial-gradient(120% 80% at 50% 0%,#1b3320 0%,#070d08 72%);
transition:opacity var(--t-move) ease}
#boot-loader.gone{opacity:0;pointer-events:none}
#boot-logo{font-size:52px;line-height:1;animation:boot-pulse 1.6s ease-in-out infinite}
#boot-name{font-size:20px;font-weight:700;letter-spacing:.06em;color:#eaf6e2;
text-shadow:0 2px 14px rgba(127,208,96,.4);min-height:1.2em}
#boot-bar{width:180px;height:6px;border-radius:4px;background:#20381f;overflow:hidden;
box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
#boot-bar-fill{height:100%;width:38%;border-radius:4px;
background:linear-gradient(90deg,#4a9a28,#7fd060);animation:boot-slide 1.15s ease-in-out infinite}
@keyframes boot-pulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.12);opacity:1}}
@keyframes boot-slide{0%{transform:translateX(-115%)}100%{transform:translateX(280%)}}


#particles{position:fixed;inset:0;pointer-events:none;z-index:400}
#merge-anim{position:fixed;pointer-events:none;z-index:160;font-size:32px;opacity:0}
#merge-anim.pop{animation:mergepop 0.7s var(--e-snap) forwards}
@keyframes mergepop{0%{opacity:1;transform:translateY(0) scale(0.3) rotate(-10deg)}45%{opacity:1;transform:translateY(-28px) scale(1.5) rotate(6deg)}100%{opacity:0;transform:translateY(-64px) scale(0.9)}}








#popup{position:fixed;inset:0;background:rgba(4,10,6,.62);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:235}
#popup.show{display:flex}
#popup-box{background:linear-gradient(165deg,#2a412a,#1b2c1b);border:1.5px solid #35543a;border-radius:22px;padding:28px 32px;text-align:center;max-width:320px;width:90%;
box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06)}
#popup.show #popup-box{animation:popup-in var(--t-open) var(--e-snap)}
@keyframes popup-in{0%{opacity:0;transform:scale(.9) translateY(14px)}100%{opacity:1;transform:none}}
#popup-box h2{color:var(--text);font-size:20px;margin-bottom:8px}
#popup-box p{color:var(--text2);font-size:14px;margin-bottom:20px;line-height:1.5}
.popup-btn{background:linear-gradient(165deg,#8ce06a,#5fb03e);color:#0a1a0a;border:none;border-radius:13px;padding:12px 32px;font-size:15px;font-weight:700;cursor:pointer;width:100%;transition:all var(--t-ui);
box-shadow:0 4px 12px rgba(0,0,0,.35),inset 0 1px 2px rgba(255,255,255,.4)}
.popup-btn:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.4),0 0 16px -3px var(--accent),inset 0 1px 2px rgba(255,255,255,.4)}
.popup-btn:active{transform:scale(0.97)}
.popup-btn.secondary{background:transparent;color:var(--text2);border:1px solid var(--panel-border);margin-top:8px}




#unlock-popup{position:fixed;inset:0;background:rgba(4,10,6,.7);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;z-index:240}
#unlock-popup.show{display:flex}
#unlock-popup.show #unlock-box{animation:popup-in var(--t-open) var(--e-snap)}
#unlock-box{
background:linear-gradient(160deg,#263926,#152615);
border:2px solid var(--accent);border-radius:24px;padding:32px 28px;
text-align:center;max-width:340px;width:92%;position:relative;



max-height:min(92vh,92dvh);overflow-y:auto;overflow-x:hidden;
}
#unlock-box::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,#7fd06012 0%,transparent 70%);pointer-events:none}
.unlock-icon{font-size:56px;margin-bottom:12px;animation:float 2s ease-in-out infinite}
.unlock-title{font-size:22px;font-weight:700;color:var(--text);margin-bottom:6px}
.unlock-sub{font-size:14px;color:var(--text2);margin-bottom:20px;line-height:1.5}
.unlock-stars{font-size:24px;letter-spacing:4px;margin-bottom:20px}


#screen-garden{
background:linear-gradient(180deg,#1a4a28 0%,#2a6a38 40%,#3a8040 100%);
flex-direction:column;overflow:hidden;
}
#garden-header{
display:flex;align-items:center;justify-content:space-between;gap:8px;


padding:12px 16px 8px;background:linear-gradient(180deg,rgba(0,0,0,0.24),rgba(0,0,0,0.08));
border-bottom:1px solid rgba(120,200,140,.2);flex-shrink:0;
box-shadow:0 4px 14px -6px rgba(0,0,0,.4);position:relative;z-index:2;
}






#garden-title{font-size:16px;font-weight:700;color:#f2fbec;letter-spacing:0.08em;
text-shadow:0 1px 6px rgba(0,0,0,.4);
flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#garden-back,#garden-photo,#harvest-chip,#water-chip{flex:0 0 auto}
#garden-back{
background:rgba(0,0,0,0.32);border:1px solid rgba(120,190,130,.4);color:#eaf6e2;
border-radius:11px;padding:7px 15px;font-size:13px;cursor:pointer;

min-height:36px;display:flex;align-items:center;box-sizing:border-box;
transition:all var(--t-ui);font-weight:600;box-shadow:inset 0 1px 1px rgba(255,255,255,.08)}
#garden-back:hover{background:rgba(0,0,0,0.5);color:#fff;transform:translateY(-1px);border-color:var(--accent)}
#garden-back:active{transform:scale(.95)}

#garden-zones{
display:flex;gap:7px;justify-content:center;flex-wrap:wrap;
padding:9px 12px;background:linear-gradient(180deg,rgba(0,0,0,0.22),rgba(0,0,0,0.10));
border-bottom:1px solid rgba(120,200,140,.18);flex-shrink:0;position:relative;z-index:2;
}
.garden-zone-tab{
width:40px;height:40px;border-radius:11px;border:1.5px solid rgba(110,180,120,.35);
background:linear-gradient(160deg,rgba(40,68,40,.78),rgba(22,42,22,.78));display:flex;align-items:center;justify-content:center;
font-size:20px;cursor:pointer;transition:all var(--t-ui) var(--e-pop);
box-shadow:inset 0 1px 1px rgba(255,255,255,.06),0 2px 5px rgba(0,0,0,.25)}
.garden-zone-tab span{filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.garden-zone-tab:hover{border-color:var(--accent);transform:translateY(-2px)}
.garden-zone-tab:active{transform:scale(.92)}
.garden-zone-tab.active{border-color:var(--accent);background:linear-gradient(160deg,#3a6e3a,#22482a);
box-shadow:0 0 0 2px #7fd06055,0 0 14px -2px var(--accent),inset 0 1px 2px rgba(255,255,255,.1);transform:translateY(-1px)}

#garden-scene{flex:1;position:relative;overflow:hidden}


#dacha-header{
display:flex;align-items:center;justify-content:space-between;
padding:12px 16px 8px;background:linear-gradient(180deg,rgba(0,0,0,0.24),rgba(0,0,0,0.08));
border-bottom:1px solid rgba(120,200,140,.24);flex-shrink:0;
box-shadow:0 4px 14px -6px rgba(0,0,0,.4);position:relative;z-index:2;
}
#dacha-title{font-size:16px;font-weight:700;color:#f2fbec;letter-spacing:0.08em;
text-shadow:0 1px 6px rgba(0,0,0,.5)}
#dacha-back{
background:rgba(0,0,0,0.32);border:1px solid rgba(120,190,130,.4);color:#eaf6e2;
border-radius:11px;padding:7px 15px;font-size:13px;cursor:pointer;

min-height:36px;display:flex;align-items:center;box-sizing:border-box;
transition:border-color var(--t-ui),color var(--t-ui);font-weight:600;
box-shadow:inset 0 1px 1px rgba(255,255,255,.08)}
#dacha-back:hover{color:#fff;border-color:var(--accent)}
#dacha-back:active{transform:scale(.95)}
#dacha-scene{flex:1;position:relative;overflow:hidden}

#dacha-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
#dacha-seeds{background:linear-gradient(180deg,rgba(0,0,0,0.26),rgba(0,0,0,0.4));
border-top:1px solid rgba(120,200,140,.24);padding:8px 12px 12px;flex-shrink:0;
position:relative;z-index:2;box-shadow:0 -6px 18px -8px rgba(0,0,0,.5)}
#dacha-seed-hint{font-size:10px;color:#cfe6cb;letter-spacing:.08em;text-transform:uppercase;
font-weight:600;margin-bottom:7px;text-shadow:0 1px 3px rgba(0,0,0,.75)}
#dacha-seed-row{display:flex;gap:8px;overflow-x:auto;overscroll-behavior:contain;
padding-bottom:2px;scrollbar-width:thin}
.seed-card{min-width:74px;border-radius:13px;padding:7px 6px 6px;flex-shrink:0;cursor:pointer;
background:linear-gradient(160deg,rgba(54,94,54,.88),rgba(28,52,28,.88));
border:1.5px solid rgba(110,180,120,.4);text-align:center;
min-height:64px;

touch-action:pan-x;transition:border-color var(--t-ui),transform var(--t-tap)}
.seed-card:active{transform:scale(.95)}
.seed-card.selected{border-color:#f5c848;box-shadow:0 0 12px #f5c84855}
.seed-ic{font-size:20px;line-height:1}
.seed-nm{font-size:10px;color:var(--text);font-weight:600;margin-top:3px}
.seed-pr{font-size:10px;color:var(--gold);font-weight:700}







#dacha-stats{display:flex;gap:6px;padding:6px 12px 0;flex-shrink:0;position:relative;z-index:3;
overflow-x:auto;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-x;
background:linear-gradient(180deg,rgba(0,0,0,0.10),rgba(0,0,0,0.24))}
#dacha-stats::-webkit-scrollbar{display:none}

.dstat{display:flex;align-items:center;gap:5px;cursor:pointer;flex-shrink:0;
font-size:12px;font-weight:800;color:#e6f5e0;letter-spacing:.02em;
background:rgba(12,26,14,.62);border:1.5px solid rgba(110,180,120,.34);
border-radius:12px;padding:0 11px;min-height:44px;min-width:44px;justify-content:center;
text-shadow:0 1px 3px rgba(0,0,0,.7);transition:border-color var(--t-ui),transform var(--t-tap);
-webkit-tap-highlight-color:transparent}
.dstat span{font-size:15px;line-height:1}
.dstat:active{transform:scale(.94)}
.dstat.low{border-color:rgba(226,120,80,.72);color:#ffd0b4}

.dstat .dfed{display:block;width:34px;height:7px;border-radius:4px;overflow:hidden;
background:rgba(0,0,0,.5);box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.dstat .dfed b{display:block;height:100%;border-radius:4px;
background:linear-gradient(90deg,#8ce06a,#f0c94a)}


.garden-ghost{position:fixed;width:64px;height:64px;pointer-events:none;z-index:300;
filter:drop-shadow(0 4px 6px rgba(0,0,0,.4));opacity:.92;transform:scale(1.05)}


#garden-canvas{position:absolute;inset:0;width:100%;height:100%}


#garden-inventory{
background:linear-gradient(180deg,rgba(0,0,0,0.26),rgba(0,0,0,0.4));border-top:1px solid rgba(120,200,140,.24);
padding:10px 12px 14px;flex-shrink:0;position:relative;z-index:2;
box-shadow:0 -6px 18px -8px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);
}
#garden-inv-label{font-size:10px;color:#cfe6cb;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;margin-bottom:8px;
text-shadow:0 1px 3px rgba(0,0,0,.75)}
#garden-inv-row{display:flex;gap:8px;overflow-x:auto;overscroll-behavior:contain;padding-bottom:4px;
scrollbar-width:thin;scrollbar-color:rgba(110,180,120,.45) transparent}
#garden-inv-row::-webkit-scrollbar{height:4px}
#garden-inv-row::-webkit-scrollbar-thumb{background:rgba(110,180,120,.45);border-radius:3px}
.garden-item{
width:56px;height:56px;border-radius:13px;background:linear-gradient(160deg,rgba(54,94,54,.88),rgba(28,52,28,.88));
border:1.5px solid rgba(110,180,120,.4);display:flex;flex-direction:column;align-items:center;
justify-content:center;cursor:grab;flex-shrink:0;position:relative;transition:all var(--t-ui) var(--e-pop);






touch-action:pan-x;
box-shadow:inset 0 1px 2px rgba(255,255,255,.06),0 3px 7px rgba(0,0,0,.3);
}
.garden-item:active{cursor:grabbing;transform:scale(.94)}
.garden-item:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 8px 16px rgba(0,0,0,.4),0 0 14px -3px var(--accent),inset 0 1px 2px rgba(255,255,255,.08)}
.garden-item.selected-item{border-color:#f5c848;box-shadow:0 0 12px #f5c84855}
.garden-item-canvas{width:38px;height:38px;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.garden-item-count{
position:absolute;bottom:2px;right:4px;font-size:9px;color:var(--text2);
font-weight:700;background:rgba(0,0,0,0.5);border-radius:4px;padding:0 3px;
}
.garden-hint{font-size:11px;color:var(--text2);text-align:center;margin-top:8px;text-shadow:0 1px 3px rgba(0,0,0,.7)}


@media(max-width:480px){




#chapter-title{max-width:calc(100% - 110px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}




:root{--cell-max:80px;--cell-size:min(calc((100vw - 117px) / 5),80px)}
#side-panel{width:58px}
.chapter-btn{width:44px;height:44px}.chapter-icon{font-size:18px}
#chain-bar{padding:6px 10px;gap:3px}.chain-icon{width:36px;height:36px}
#garden-btn{width:44px;height:44px}
.hud-prog-bar{max-width:120px}
}


#loc-btn,#garden-btn,#shop-btn,#coll-btn,#quest-btn,#orders-btn,#bonus-btn{flex-shrink:0}

@media(max-height:700px){
#side-panel{padding:8px 0;gap:6px}
#garden-btn,#shop-btn,#coll-btn,#quest-btn,#orders-btn,#bonus-btn{
width:44px;height:44px;margin-top:0;font-size:17px;border-radius:12px;
}
#garden-btn-label,#shop-btn-label,#coll-btn-label,#quest-btn-label,#orders-btn-label,#bonus-btn-label{font-size:6px}
}
@media(min-width:700px){
:root{--cell-max:90px;--cell-size:90px}
#side-panel{width:80px}
.chapter-btn{width:60px;height:60px}
.chain-icon{width:48px;height:48px}
#garden-btn{width:60px;height:60px;font-size:24px}
}






@supports (color: color-mix(in srgb, #000 50%, #fff)){
.cell{
border-color:color-mix(in srgb, var(--amb-glow) 14%, #26402a);
background:color-mix(in srgb, var(--amb1) 26%, #0e1a10);
}
.cell.has-item{
border-color:color-mix(in srgb, var(--amb-glow) 38%, #33513a);
background:radial-gradient(125% 120% at 50% 15%,
color-mix(in srgb, var(--amb1) 58%, #22381f) 0%,
color-mix(in srgb, var(--amb2) 78%, #0c150c) 100%);
}
.cell.drag-over{background:color-mix(in srgb, var(--amb1) 45%, #14240f)}
.cell.selected{background:color-mix(in srgb, var(--amb1) 52%, #14240f)}
.chain-item.discovered .chain-icon{
border-color:color-mix(in srgb, var(--amb-glow) 60%, var(--accent));
background:color-mix(in srgb, var(--amb1) 40%, #14240f);
box-shadow:0 0 10px -2px var(--amb-glow);
}
#chain-bar{border-color:color-mix(in srgb, var(--amb-glow) 20%, #26402a)}
.hud-prog-fill{background:linear-gradient(90deg,
color-mix(in srgb, var(--amb-glow) 55%, #4a9a28),
color-mix(in srgb, var(--amb-glow) 85%, #7fd060))}
}






#orders-btn,#bonus-btn{
margin-top:8px;width:52px;height:52px;border-radius:13px;position:relative;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
cursor:pointer;transition:all var(--t-ui) var(--e-pop);font-size:20px;
box-shadow:inset 0 1px 2px rgba(255,255,255,.06),0 2px 5px rgba(0,0,0,.3);flex-shrink:0}
#orders-btn{border:1.5px solid #40c0a055;background:linear-gradient(160deg,#1c3a34,#102420);color:#5fd8b8}
#bonus-btn{border:1.5px solid #f070b055;background:linear-gradient(160deg,#3a2032,#241019);color:#ff9ad0}
#orders-btn>*,#bonus-btn>*{filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
#orders-btn-label{font-size:7px;color:#5fd8b8;font-weight:700}
#bonus-btn-label{font-size:7px;color:#ff9ad0;font-weight:700}
#orders-btn:hover{transform:translateY(-2px);border-color:#40c0a0;box-shadow:0 0 14px -2px #40c0a0}
#bonus-btn:hover{transform:translateY(-2px);border-color:#f070b0;box-shadow:0 0 14px -2px #f070b0}
#orders-btn:active,#bonus-btn:active{transform:scale(.93)}


.meta-modal{position:fixed;inset:0;z-index:230;display:none;align-items:center;justify-content:center;
background:rgba(4,10,6,.66);backdrop-filter:blur(5px);padding:16px;


padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom));
padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.meta-modal.show{display:flex}
.meta-box{width:100%;max-width:420px;max-height:88vh;max-height:min(88vh,88dvh);display:flex;flex-direction:column;
background:linear-gradient(165deg,#283a26,#19291a);border:1.5px solid #35543a;border-radius:22px;
box-shadow:0 28px 70px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden;
animation:popup-in var(--t-open) var(--e-snap);padding-bottom:14px}
.meta-head{display:flex;align-items:center;gap:10px;padding:16px 18px;flex:0 0 auto;
background:linear-gradient(180deg,rgba(40,60,40,.5),transparent);border-bottom:1px solid #2a3f2c}
.meta-title{font-size:18px;font-weight:800;color:#eef8e6}
.meta-close{margin-left:auto;width:32px;height:32px;border-radius:10px;border:1px solid #3a5a3c;
background:rgba(0,0,0,.3);color:var(--text2);font-size:15px;cursor:pointer;
display:flex;align-items:center;justify-content:center;transition:all var(--t-tap)}
.meta-close:hover{background:#e0402015;border-color:#e05040;color:#ff9080}
.meta-sub{padding:10px 18px 2px;font-size:13px;color:var(--text2);font-weight:600;flex:0 0 auto}
.meta-foot{padding:10px 16px 2px;text-align:center;font-size:11px;color:var(--text3);font-weight:600;flex:0 0 auto}


#orders-modal{position:fixed;inset:0;z-index:230;display:none;align-items:center;justify-content:center;
background:rgba(4,10,6,.66);backdrop-filter:blur(5px);padding:16px}
#orders-modal.show{display:flex}
#orders-box{width:100%;max-width:440px;max-height:88vh;max-height:min(88vh,88dvh);display:flex;flex-direction:column;
background:linear-gradient(165deg,#263a34,#182a24);border:1.5px solid #2f5a4c;border-radius:22px;
box-shadow:0 28px 70px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden;
animation:popup-in var(--t-open) var(--e-snap)}
#orders-head{display:flex;align-items:center;gap:10px;padding:16px 18px;
background:linear-gradient(180deg,rgba(30,60,52,.5),transparent);border-bottom:1px solid #24483c}
#orders-title{font-size:18px;font-weight:800;color:#e6f8f0}
#orders-total{margin-left:auto;font-size:12px;color:#7fc8ae;font-weight:600;background:rgba(0,0,0,.28);
border:1px solid #2a5a48;border-radius:14px;padding:4px 10px}
#orders-close{width:32px;height:32px;border-radius:10px;border:1px solid #3a5a4c;background:rgba(0,0,0,.3);
color:var(--text2);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center}
#orders-close:hover{background:#e0402015;border-color:#e05040;color:#ff9080}
#orders-body{padding:14px 16px 8px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;display:flex;flex-direction:column;gap:10px}
#orders-foot{padding:8px 16px 16px;text-align:center;font-size:11px;color:#5f8a78;font-weight:600}
.order-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:15px;
background:linear-gradient(160deg,#2a453c,#1e332ca0);border:1.5px solid #2c5044}
.order-card.done{opacity:.55}
.order-npc{display:flex;flex-direction:column;align-items:center;gap:2px;width:64px;flex-shrink:0}
.order-npc-ic{font-size:30px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.order-npc-nm{font-size:9px;color:#7fc8ae;font-weight:600;text-align:center}
.order-need{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.order-cv{width:44px;height:44px}
.order-inm{font-size:13px;font-weight:700;color:var(--text)}
.order-src{font-size:11px;color:var(--text3);font-weight:600}
.order-rw{flex-shrink:0;display:flex;align-items:center;justify-content:center;min-width:82px}
.order-take{border:none;border-radius:11px;padding:9px 12px;cursor:pointer;display:flex;flex-direction:column;
align-items:center;gap:1px;font-weight:800;font-size:13px;color:#0c1c14;
background:linear-gradient(160deg,#5fd8b8,#2f9a78);box-shadow:0 3px 10px rgba(64,192,160,.35)}
.order-take span{font-size:11px}
.order-take:hover{filter:brightness(1.07);transform:translateY(-1px)}
.order-take:active{transform:scale(.95)}
.order-take.cant{filter:grayscale(.7) brightness(.65);cursor:not-allowed;box-shadow:none}


#bonus-cards{padding:14px 16px 4px;display:flex;flex-direction:column;gap:10px;
flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.bonus-card{display:flex;align-items:center;gap:12px;padding:13px;border-radius:15px;cursor:pointer;
background:linear-gradient(160deg,#2c4529,#1e3320a0);border:1.5px solid #2f4a32;
transition:all var(--t-ui) var(--e-pop)}
.bonus-card:hover{transform:translateY(-1px);border-color:#4a7a50}
.bonus-card:active{transform:scale(.98)}
.bonus-card.hot{border-color:#f5c848;box-shadow:0 0 14px -4px #f5c848}
.bonus-ic{font-size:28px;width:44px;text-align:center;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.bonus-mid{flex:1;min-width:0}
.bonus-nm{font-size:14px;font-weight:800;color:var(--text)}
.bonus-sub{font-size:11px;color:var(--text3);font-weight:600}
.bonus-cta{flex-shrink:0;font-size:12px;font-weight:800;color:#0e1c12;background:linear-gradient(160deg,#f5d878,#e0a828);
border-radius:10px;padding:7px 11px;box-shadow:0 3px 8px rgba(245,200,72,.3)}
.bonus-card:not(.hot) .bonus-cta{background:rgba(255,255,255,.08);color:var(--text2);box-shadow:none}


#streak-days{display:flex;gap:6px;padding:14px 16px 6px;
flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.stk-day{flex:1;border-radius:12px;padding:8px 2px 7px;text-align:center;position:relative;
background:linear-gradient(160deg,#284026,#1c2e1c);border:1.5px solid #2a422c}
.stk-day.past{opacity:.55}
.stk-day.today{border-color:#f5c848;box-shadow:0 0 12px -3px #f5c848;transform:scale(1.06)}
.stk-day.future{opacity:.8}
.stk-num{font-size:9px;color:var(--text3);font-weight:700}
.stk-ic{font-size:17px;margin:2px 0}
.stk-rw{font-size:9px;color:var(--gold);font-weight:700}
.stk-done{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-size:18px;color:#7fd060;background:rgba(10,20,10,.55);border-radius:11px;font-weight:800}
#streak-claim{margin:12px 16px 2px;border:none;border-radius:13px;padding:13px;cursor:pointer;flex:0 0 auto;
font-size:15px;font-weight:800;color:#1c1408;background:linear-gradient(160deg,#f5d878,#e0a828);
box-shadow:0 4px 14px rgba(245,200,72,.35)}
#streak-claim:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}
#streak-claim:disabled{filter:grayscale(.6) brightness(.7);cursor:default;box-shadow:none}


#wheel-wrap{position:relative;display:flex;justify-content:center;padding:16px 0 4px;flex:0 1 auto;min-height:0}
#wheel-pointer{position:absolute;top:6px;left:50%;transform:translateX(-50%);font-size:22px;color:#f5c848;
text-shadow:0 2px 6px rgba(0,0,0,.6);z-index:2}
#wheel-cv{filter:drop-shadow(0 8px 22px rgba(0,0,0,.5))}
#wheel-result{text-align:center;font-size:15px;font-weight:800;color:var(--gold);min-height:22px;padding:4px;flex:0 0 auto}
#wheel-spin{margin:6px 16px 2px;border:none;border-radius:13px;padding:13px;cursor:pointer;flex:0 0 auto;
font-size:15px;font-weight:800;color:#1c1408;background:linear-gradient(160deg,#f5d878,#e0a828);
box-shadow:0 4px 14px rgba(245,200,72,.35)}
#wheel-spin:hover:not(:disabled){filter:brightness(1.06)}
#wheel-spin:disabled{filter:grayscale(.6) brightness(.7);cursor:default;box-shadow:none}


#event-barwrap{padding:12px 18px 4px;flex:0 0 auto}
#event-bar{height:14px;border-radius:8px;background:#1c2e18;overflow:hidden;
box-shadow:inset 0 1px 3px rgba(0,0,0,.5);border:1px solid #2a422c}
#event-fill{height:100%;border-radius:8px;transition:width .5s var(--e-pop);
background:linear-gradient(90deg,#b06ae8,#f5c848)}
#event-pts{text-align:right;font-size:11px;color:var(--text2);font-weight:700;margin-top:4px}
#event-ms{padding:8px 16px 2px;display:flex;flex-direction:column;gap:8px;
flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.evt-ms{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:13px;
background:linear-gradient(160deg,#2c4529,#1e3320a0);border:1.5px solid #2f4a32}
.evt-ms.ready{border-color:#f5c848;box-shadow:0 0 12px -4px #f5c848}
.evt-ms.done{opacity:.55}
.evt-ms-p{font-size:14px;font-weight:800;color:#b06ae8;width:44px;text-align:center;flex-shrink:0}
.evt-ms-t{flex:1;font-size:13px;font-weight:700;color:var(--text)}
.evt-lock{font-size:15px;opacity:.6}
.evt-claim{border:none;border-radius:10px;padding:8px 13px;cursor:pointer;font-size:13px;font-weight:800;
color:#1c1408;background:linear-gradient(160deg,#f5d878,#e0a828);box-shadow:0 3px 8px rgba(245,200,72,.3)}
.evt-claim:hover{filter:brightness(1.07)}
.quest-check{font-size:20px;color:#7fd060;font-weight:800}


#harvest-chip{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:800;color:var(--gold);
background:rgba(0,0,0,.3);border:1.5px solid #4a3d20;border-radius:16px;padding:6px 12px;cursor:pointer;
transition:all var(--t-ui);user-select:none}
#harvest-chip span{font-size:10px;color:var(--text3);font-weight:600}
#harvest-chip:hover{transform:translateY(-1px);border-color:var(--gold)}
#harvest-chip.rich{border-color:#f5c848;box-shadow:0 0 12px -3px #f5c848;animation:garden-pulse 2s ease-in-out infinite}


#water-chip{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:800;color:#9fe0ff;
background:rgba(0,0,0,.3);border:1.5px solid #24506a;border-radius:16px;padding:6px 12px;cursor:pointer;
transition:transform var(--t-ui),border-color var(--t-ui);user-select:none;white-space:nowrap}
#water-chip:hover{transform:translateY(-1px);border-color:#9fe0ff}
#water-chip.empty{color:var(--text3);border-color:#3a3a3a}
body.photo-mode #water-chip{display:none !important}

.gc-float{position:fixed;z-index:420;pointer-events:none;transform:translate(-50%,-50%);
font-size:17px;font-weight:900;color:#ffd84a;text-shadow:0 2px 6px rgba(0,0,0,.75);
animation:gc-float-up 1.1s ease-out forwards}
@keyframes gc-float-up{
0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}
18%{opacity:1;transform:translate(-50%,-70%) scale(1.08)}
100%{opacity:0;transform:translate(-50%,-190%) scale(1)}
}


.coll-stars{display:flex;gap:6px;margin:-2px 0 10px}
.cstar{flex:1;display:flex;align-items:center;gap:5px;padding:5px 8px;border-radius:10px;
background:linear-gradient(160deg,#263a26,#1a2c1aa0);border:1px solid #26402a;min-width:0}
.cstar-ic{font-size:14px;filter:grayscale(1) opacity(.45)}
.cstar.got .cstar-ic{filter:none;text-shadow:0 0 8px #f5c84880}
.cstar.claimed{opacity:.65}
.cstar-tip{font-size:9px;color:var(--text3);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cstar-claim{border:none;border-radius:8px;padding:4px 7px;cursor:pointer;font-size:10px;font-weight:800;
color:#1c1408;background:linear-gradient(160deg,#f5d878,#e0a828);white-space:nowrap}
.cstar-claim:hover{filter:brightness(1.08)}


.cstar-claim{min-height:44px;padding:4px 10px}
@media(max-width:420px){.cstar-tip{display:none}}









@keyframes can-merge-pulse{0%,100%{opacity:0}50%{opacity:1}}
.cell.can-merge::after{content:'';position:absolute;inset:-1.5px;border-radius:var(--radius);
pointer-events:none;box-shadow:0 0 11px 2px rgba(245,200,72,.34);opacity:0;
animation:can-merge-pulse 1.7s ease-in-out infinite}
.cell.can-merge.selected::after,.cell.can-merge.drag-over::after,
.cell.can-merge.merge-target::after{animation:none;opacity:0}




@keyframes goal-pulse{0%,100%{opacity:.35}50%{opacity:1}}
.chain-item.next-goal .chain-icon{border-color:#f5c848;position:relative}
.chain-item.next-goal .chain-icon::after{content:'';position:absolute;inset:-2px;border-radius:inherit;
pointer-events:none;box-shadow:0 0 15px 1px #f5c848;animation:goal-pulse 1.8s ease-in-out infinite}
.chain-item.next-goal .chain-label{color:var(--gold);font-weight:700}

.hud-prog-fill::before{content:'';position:absolute;inset:0;
background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
transform:translateX(-100%);animation:prog-shine 3.4s ease-in-out infinite}
@keyframes prog-shine{0%,55%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

@media(hover:hover){
.cell.has-item:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.35)}
}

.chapter-btn.active::after{content:'';position:absolute;inset:0;border-radius:12px;
background:linear-gradient(160deg,rgba(255,255,255,.14),transparent 55%);pointer-events:none}



#loc-btn{
width:52px;height:52px;border-radius:13px;position:relative;flex-shrink:0;
border:1.5px solid var(--amb-glow);background:linear-gradient(160deg,#35643a,#204526);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
cursor:pointer;transition:all var(--t-ui) var(--e-pop);
box-shadow:0 0 12px -3px var(--amb-glow),inset 0 1px 3px rgba(255,255,255,.08)}
#loc-btn:hover{transform:translateY(-2px);box-shadow:0 0 18px -2px var(--amb-glow)}
#loc-btn:active{transform:scale(.93)}
#loc-btn-ic{font-size:22px;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
#loc-btn-label{font-size:8px;color:var(--text2);font-weight:700;letter-spacing:.04em}


#loc-overlay{position:fixed;top:0;bottom:0;left:72px;right:0;z-index:194;background:rgba(4,10,6,.35);
opacity:0;pointer-events:none;transition:opacity var(--t-move) ease}
#loc-overlay.show{opacity:1;pointer-events:auto}
#loc-flyout{position:fixed;top:0;bottom:0;left:72px;width:min(78vw,280px);z-index:195;
display:flex;flex-direction:column;
background:linear-gradient(165deg,#243824f8,#16281afa);border-right:1.5px solid #35543a;
box-shadow:18px 0 44px rgba(0,0,0,.5);



transform:translateX(calc(-100% - 130px));visibility:hidden;
transition:transform var(--t-move) var(--e-out),visibility 0s linear var(--t-move);pointer-events:none}
#loc-flyout.show{transform:translateX(0);visibility:visible;
transition:transform var(--t-move) var(--e-out),visibility 0s;pointer-events:all}
#loc-head{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px;
font-size:16px;font-weight:800;color:#eef8e6;border-bottom:1px solid #2a3f2c;
background:linear-gradient(180deg,rgba(40,60,40,.5),transparent)}
#loc-close{width:30px;height:30px;border-radius:9px;border:1px solid #3a5a3c;background:rgba(0,0,0,.3);
color:var(--text2);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center}
#loc-close:hover{background:#e0402015;border-color:#e05040;color:#ff9080}
#loc-list{flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:10px;display:flex;flex-direction:column;gap:8px}
#loc-foot{padding:10px 14px 14px;font-size:10px;color:var(--text3);font-weight:600;text-align:center}
.loc-row{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:13px;cursor:pointer;
background:linear-gradient(160deg,#28402a,#1d2f1d);border:1.5px solid #2a422c;
transition:all var(--t-ui) var(--e-pop);position:relative}
.loc-row:hover{transform:translateX(3px);border-color:#4a7a50}
.loc-row:active{transform:scale(.98)}
.loc-row.active{border-color:var(--amb-glow);box-shadow:0 0 12px -4px var(--amb-glow);
background:linear-gradient(160deg,#35643a,#204526)}
.loc-row.locked{opacity:.5;filter:grayscale(.5)}
.loc-ic{font-size:24px;width:32px;text-align:center;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.loc-mid{flex:1;min-width:0}
.loc-nm{font-size:13px;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.loc-sub{font-size:10px;color:var(--text3);font-weight:600;margin:1px 0 4px}
.loc-bar{height:4px;border-radius:3px;background:#1c2e18;overflow:hidden}
.loc-bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#4a9a28,#7fd060)}
.loc-here{font-size:14px;color:var(--accent);font-weight:800}
.loc-new{font-size:9px;font-weight:800;color:#fff;background:#e0402a;border-radius:7px;padding:2px 6px;
box-shadow:0 0 8px #e0402a;animation:quest-badge-pulse 1.4s ease-in-out infinite}
@media(max-width:480px){#loc-flyout,#loc-overlay{left:58px}}
@media(min-width:700px){#loc-flyout,#loc-overlay{left:80px}}














@media (prefers-reduced-motion: no-preference){
.cell.has-item:not(.anim-spawn):not(.anim-move) .cell-canvas{
animation-name:mv-still;animation-duration:4.2s;
animation-timing-function:ease-in-out;animation-iteration-count:infinite;
transform-origin:50% 84%;
}
.cell.has-item:not(.anim-spawn):not(.anim-move) .cell-canvas[data-mv=sway]{
animation-name:mv-sway;animation-duration:3.4s}
.cell.has-item:not(.anim-spawn):not(.anim-move) .cell-canvas[data-mv=bob]{
animation-name:mv-bob;animation-duration:2.8s;transform-origin:50% 50%}
.cell.has-item:not(.anim-spawn):not(.anim-move) .cell-canvas[data-mv=pulse]{
animation-name:mv-pulse;animation-duration:2.4s;transform-origin:50% 50%}
.cell.has-item:not(.anim-spawn):not(.anim-move) .cell-canvas[data-mv=spin]{
animation-name:mv-spin;animation-duration:9s;
animation-timing-function:linear;transform-origin:50% 50%}
.cell.has-item:not(.anim-spawn):not(.anim-move) .cell-canvas[data-mv=flicker]{
animation-name:mv-flicker;animation-duration:1.15s;transform-origin:50% 78%}
.cell.has-item:not(.anim-spawn):not(.anim-move) .cell-canvas[data-mv=wobble]{
animation-name:mv-wobble;animation-duration:2.1s}
.cell.has-item:not(.anim-spawn):not(.anim-move) .cell-canvas[data-mv=shimmer]{
animation-name:mv-shimmer;animation-duration:3.8s}
.cell.has-item:not(.anim-spawn):not(.anim-move) .cell-canvas[data-mv=heat]{
animation-name:mv-heat;animation-duration:2.6s}
.cell.has-item:not(.anim-spawn):not(.anim-move) .cell-canvas[data-mv=drift]{
animation-name:mv-drift;animation-duration:5.2s;transform-origin:50% 50%}

.cell:nth-child(2n)   .cell-canvas{animation-delay:-1.3s}
.cell:nth-child(3n+1) .cell-canvas{animation-delay:-2.2s}
.cell:nth-child(5n+3) .cell-canvas{animation-delay:-.7s}
.cell:nth-child(7n+2) .cell-canvas{animation-delay:-3.1s}
}
@keyframes mv-still  {0%,100%{transform:scale(1)}          50%{transform:translateY(-1.5px) scale(1.012)}}
@keyframes mv-sway   {0%,100%{transform:rotate(-2.1deg)}   50%{transform:rotate(2.1deg)}}
@keyframes mv-bob    {0%,100%{transform:translateY(2px) rotate(-1deg)} 50%{transform:translateY(-3px) rotate(1deg)}}
@keyframes mv-pulse  {0%,100%{transform:scale(.972)}       50%{transform:scale(1.038)}}
@keyframes mv-spin   {from{transform:rotate(0)}            to{transform:rotate(360deg)}}
@keyframes mv-flicker{0%,100%{transform:scale(1,1)}  35%{transform:scale(1.02,.985)}  70%{transform:scale(.99,1.025)}}
@keyframes mv-wobble {0%,100%{transform:scale(1.03,.97)}   50%{transform:scale(.96,1.05)}}
@keyframes mv-shimmer{0%,100%{transform:skewX(-1.1deg)}    50%{transform:skewX(1.1deg)}}
@keyframes mv-heat   {0%,100%{transform:translateY(0) scaleY(1)} 50%{transform:translateY(-2px) scaleY(1.028)}}
@keyframes mv-drift  {0%,100%{transform:translate(-2.5px,1.5px)} 50%{transform:translate(2.5px,-2.5px)}}

@supports (color: color-mix(in srgb, red 50%, blue)){
#chapter-title{text-shadow:0 2px 12px color-mix(in srgb, var(--amb-glow) 45%, transparent)}
}


.cell.golden-guest{border-color:#ffd952 !important}
.cell.golden-guest .cell-canvas{
filter:sepia(.9) saturate(2.1) hue-rotate(-18deg) brightness(1.18)
drop-shadow(0 0 6px rgba(255,215,80,.8));
}
.cell.golden-guest::after{
content:'✨';position:absolute;top:1px;right:3px;font-size:12px;pointer-events:none;
animation:golden-tw 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: no-preference){
.cell.golden-guest{animation:golden-pulse 2.2s ease-in-out infinite}
}
@keyframes golden-pulse{
0%,100%{box-shadow:0 0 6px 1px rgba(255,213,74,.35)}
50%{box-shadow:0 0 16px 4px rgba(255,213,74,.65)}
}
@keyframes golden-tw{
0%,100%{opacity:.5;transform:scale(.9)}
50%{opacity:1;transform:scale(1.15)}
}



body[data-skin="wood"] #field{background:linear-gradient(160deg,#61441f,#3e2c14);border-color:#6b4a24}
body[data-skin="wood"] .cell{
background:linear-gradient(155deg,#523b1c 0%,#392810 100%);
border-color:rgba(160,120,60,.55);
}
body[data-skin="wood"] .cell.has-item{
border-color:#7a5a2c;
background:radial-gradient(125% 120% at 50% 15%,#6d5427 0%,#442f14 100%);
}
body[data-skin="wood"] .cell.drag-over,body[data-skin="wood"] .cell.selected{border-color:#e8b45a;background:#63481f}

body[data-skin="ice"] #field{background:linear-gradient(160deg,#1e4763,#123048);border-color:#2e5a7a}
body[data-skin="ice"] .cell{
background:linear-gradient(155deg,#254e6c 0%,#173650 100%);
border-color:rgba(120,190,230,.5);
box-shadow:inset 0 1px 3px rgba(0,0,0,.3),inset 0 0 12px rgba(150,220,255,.08);
}
body[data-skin="ice"] .cell.has-item{
border-color:#4e8cb4;
background:radial-gradient(125% 120% at 50% 15%,#39759d 0%,#1e4460 100%);
}
body[data-skin="ice"] .cell.drag-over,body[data-skin="ice"] .cell.selected{border-color:#9adcff;background:#2a5b7e}

body[data-skin="gold"] #field{background:linear-gradient(160deg,#544218,#33270e);border-color:#8a6c22}
body[data-skin="gold"] .cell{
background:linear-gradient(155deg,#503f18 0%,#33270e 100%);
border-color:rgba(220,180,80,.55);
box-shadow:inset 0 1px 3px rgba(0,0,0,.35),inset 0 0 10px rgba(255,215,100,.07);
}
body[data-skin="gold"] .cell.has-item{
border-color:#b8912e;
background:radial-gradient(125% 120% at 50% 15%,#725926 0%,#453413 100%);
box-shadow:inset 0 1px 4px rgba(0,0,0,.3),inset 0 0 14px rgba(255,220,120,.10),0 3px 8px rgba(0,0,0,.3);
}
body[data-skin="gold"] .cell.drag-over,body[data-skin="gold"] .cell.selected{border-color:#ffd952;background:#64501b}


#garden-photo{
background:rgba(0,0,0,0.32);border:1px solid rgba(120,190,130,.4);color:#eaf6e2;
border-radius:11px;padding:7px 12px;font-size:15px;cursor:pointer;
transition:all var(--t-ui);font-weight:600;box-shadow:inset 0 1px 1px rgba(255,255,255,.08);
margin-right:8px;
}
#garden-photo:hover{background:rgba(0,0,0,0.5);transform:translateY(-1px);border-color:var(--accent)}
#garden-photo:active{transform:scale(.95)}
body.photo-mode #garden-header,
body.photo-mode #garden-zones,
body.photo-mode #garden-inventory,
body.photo-mode #harvest-chip{display:none !important}
#photo-bar{
position:fixed;bottom:18px;left:50%;transform:translate(-50%,80px);
display:flex;gap:10px;z-index:260;opacity:0;pointer-events:none;
transition:transform var(--t-move) var(--e-pop),opacity var(--t-move);
}
#photo-bar.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
#photo-bar button{
border:none;border-radius:14px;padding:12px 20px;font-size:15px;font-weight:700;cursor:pointer;
background:linear-gradient(165deg,#8ce06a,#5fb03e);color:#0a1a0a;
box-shadow:0 6px 18px rgba(0,0,0,.45),inset 0 1px 2px rgba(255,255,255,.35);
}
#photo-bar #photo-exit{
background:rgba(10,20,12,.75);color:#eaf6e2;border:1px solid rgba(120,190,130,.4);
padding:12px 16px;
}
#photo-flash{
position:fixed;inset:0;background:#fff;z-index:270;pointer-events:none;
animation:photo-flash .42s ease-out forwards;
}
@keyframes photo-flash{0%{opacity:.85}100%{opacity:0}}
#photo-modal{
position:fixed;inset:0;background:rgba(4,10,6,.72);backdrop-filter:blur(4px);
display:none;align-items:center;justify-content:center;z-index:265;
}
#photo-modal.show{display:flex}
#photo-modal-box{
background:linear-gradient(165deg,#2a412a,#1b2c1b);border:1.5px solid #35543a;border-radius:22px;
padding:16px;max-width:min(92vw,560px);width:92%;text-align:center;
animation:popup-in var(--t-open) var(--e-snap);
}
#photo-img{max-width:100%;max-height:56vh;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
#photo-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
#photo-actions .popup-btn{flex:1;min-width:120px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}

#photo-hint{margin-top:9px;font-size:11px;line-height:1.35;text-align:center;color:var(--text3)}
#photo-actions .popup-btn.secondary{margin-top:0}


.coll-hint-sm{font-size:11px;color:var(--text3,#9ab89a);margin:4px 0 8px;line-height:1.4}








@supports (color: color-mix(in srgb, #000 50%, #fff)){
#hud{
background:
linear-gradient(180deg,
color-mix(in srgb, var(--amb1) 42%, #101c12) 0%,
color-mix(in srgb, var(--amb2) 72%, #080f09) 100%);
border-top:1px solid color-mix(in srgb, var(--amb-glow) 32%, #24402a);
box-shadow:
0 -6px 18px -6px rgba(0,0,0,.5),
0 -1px 22px -10px var(--amb-glow),
inset 0 1px 0 color-mix(in srgb, var(--amb-glow) 22%, rgba(255,255,255,.05));


transition:background .7s ease;
}

#hud::before{
content:'';position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
background:linear-gradient(90deg,
transparent 0%, color-mix(in srgb, var(--amb-glow) 55%, transparent) 50%, transparent 100%);
opacity:.7;
}
.hud-prog-bar{
background:color-mix(in srgb, var(--amb2) 60%, #0d1a10);
border:1px solid color-mix(in srgb, var(--amb-glow) 18%, transparent);
}
.hud-btn{
box-shadow:0 3px 10px rgba(0,0,0,.4),0 0 14px -4px var(--amb-glow),inset 0 1px 2px rgba(255,255,255,.2);
}
#side-panel{
background:
linear-gradient(180deg,
color-mix(in srgb, var(--amb1) 30%, #101c12) 0%,
color-mix(in srgb, var(--amb2) 62%, #080f09) 100%);
border-right:1px solid color-mix(in srgb, var(--amb-glow) 24%, #23402a);
transition:background .7s ease;
}

#sound-toggle,#lang-toggle{
background:linear-gradient(160deg,
color-mix(in srgb, var(--amb1) 55%, rgba(20,36,20,.85)),
color-mix(in srgb, var(--amb2) 75%, rgba(12,24,12,.85))) !important;
border-color:color-mix(in srgb, var(--amb-glow) 40%, rgba(120,190,130,.4)) !important;
}
}









body.garden-open[data-zone="0"]{--amb1:#22421f;--amb2:#08130a;--amb-glow:#7fd060}
body.garden-open[data-zone="1"]{--amb1:#123a5c;--amb2:#050f1c;--amb-glow:#54c2f2}
body.garden-open[data-zone="2"]{--amb1:#1d1d50;--amb2:#08081e;--amb-glow:#9a8cf5}
body.garden-open[data-zone="3"]{--amb1:#46190d;--amb2:#150604;--amb-glow:#f08a2a}
body.garden-open[data-zone="4"]{--amb1:#2a5270;--amb2:#0a1622;--amb-glow:#8fd8f8}
body.garden-open[data-zone="5"]{--amb1:#2c1a54;--amb2:#0c0722;--amb-glow:#b06ae8}
body.garden-open[data-zone="6"]{--amb1:#3a5276;--amb2:#0c1320;--amb-glow:#ffd880}
body.garden-open[data-zone="7"]{--amb1:#123322;--amb2:#04120a;--amb-glow:#5ce8a0}
body.garden-open[data-zone="8"]{--amb1:#4a3410;--amb2:#160e04;--amb-glow:#ffce5a}
body.garden-open[data-zone="9"]{--amb1:#3a2038;--amb2:#160812;--amb-glow:#ff9ac8}
body.garden-open[data-zone="10"]{--amb1:#4a1c30;--amb2:#1a0810;--amb-glow:#ff7ab0}
body.garden-open[data-zone="11"]{--amb1:#123050;--amb2:#08162e;--amb-glow:#ffd84a}

@supports (color: color-mix(in srgb, #000 50%, #fff)){




#garden-header{
background:linear-gradient(180deg,
color-mix(in srgb, var(--amb1) 42%, #101c12) 0%,
color-mix(in srgb, var(--amb2) 72%, #080f09) 100%);
border-bottom:1px solid color-mix(in srgb, var(--amb-glow) 32%, #24402a);
box-shadow:0 6px 18px -6px rgba(0,0,0,.5),
0 1px 22px -10px var(--amb-glow),
inset 0 1px 0 color-mix(in srgb, var(--amb-glow) 22%, rgba(255,255,255,.05));
transition:background .5s ease;
}

#garden-header::after{
content:'';position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
background:linear-gradient(90deg,
transparent 0%, color-mix(in srgb, var(--amb-glow) 55%, transparent) 50%, transparent 100%);
opacity:.7;
}
#garden-title{text-shadow:0 2px 12px color-mix(in srgb, var(--amb-glow) 45%, transparent),0 1px 2px rgba(0,0,0,.5)}
#garden-back,#garden-photo{
background:linear-gradient(160deg,
color-mix(in srgb, var(--amb1) 55%, rgba(20,36,20,.85)),
color-mix(in srgb, var(--amb2) 75%, rgba(12,24,12,.85)));
border-color:color-mix(in srgb, var(--amb-glow) 40%, rgba(120,190,130,.4));
}
#garden-back:hover,#garden-photo:hover{
border-color:var(--amb-glow);
box-shadow:0 0 14px -4px var(--amb-glow),inset 0 1px 1px rgba(255,255,255,.1);
}

#garden-zones{
background:linear-gradient(180deg,
color-mix(in srgb, var(--amb2) 62%, #0c1710) 0%,
color-mix(in srgb, var(--amb2) 82%, #070d08) 100%);
border-bottom:1px solid color-mix(in srgb, var(--amb-glow) 22%, #23402a);
transition:background .5s ease;
}
.garden-zone-tab{
background:linear-gradient(160deg,
color-mix(in srgb, var(--amb1) 30%, #1a2e1c),
color-mix(in srgb, var(--amb2) 60%, #0e1a10));
border-color:color-mix(in srgb, var(--amb-glow) 24%, rgba(110,180,120,.35));
}
.garden-zone-tab:hover{border-color:var(--amb-glow)}

.garden-zone-tab.active{
border-color:var(--amb-glow);
background:radial-gradient(125% 120% at 50% 15%,
color-mix(in srgb, var(--amb1) 62%, #22381f) 0%,
color-mix(in srgb, var(--amb2) 80%, #0c150c) 100%);
box-shadow:0 0 0 2px color-mix(in srgb, var(--amb-glow) 35%, transparent),
0 0 16px -2px var(--amb-glow),
inset 0 1px 2px rgba(255,255,255,.12);
}

#garden-inventory{
background:linear-gradient(0deg,
color-mix(in srgb, var(--amb1) 42%, #101c12) 0%,
color-mix(in srgb, var(--amb2) 72%, #080f09) 100%);
border-top:1px solid color-mix(in srgb, var(--amb-glow) 32%, #24402a);
box-shadow:0 -6px 18px -6px rgba(0,0,0,.5),
0 -1px 22px -10px var(--amb-glow),
inset 0 1px 0 color-mix(in srgb, var(--amb-glow) 22%, rgba(255,255,255,.05));
transition:background .5s ease;
}
#garden-inventory::before{
content:'';position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
background:linear-gradient(90deg,
transparent 0%, color-mix(in srgb, var(--amb-glow) 55%, transparent) 50%, transparent 100%);
opacity:.7;
}
#garden-inv-label{color:color-mix(in srgb, var(--amb-glow) 45%, #bcd8b8)}

.garden-item{
background:radial-gradient(125% 120% at 50% 15%,
color-mix(in srgb, var(--amb1) 58%, #22381f) 0%,
color-mix(in srgb, var(--amb2) 78%, #0c150c) 100%);
border-color:color-mix(in srgb, var(--amb-glow) 38%, #33513a);
}
.garden-item:hover{
border-color:var(--amb-glow);
box-shadow:0 8px 16px rgba(0,0,0,.4),0 0 14px -3px var(--amb-glow),inset 0 1px 2px rgba(255,255,255,.08);
}
}


#booster-bar{display:flex;gap:8px;justify-content:center;margin:8px auto 2px;flex-wrap:wrap}
.booster-btn{display:flex;align-items:center;gap:6px;padding:6px 12px 6px 8px;border-radius:14px;cursor:pointer;
background:linear-gradient(160deg,rgba(60,52,90,.85),rgba(34,28,54,.9));border:1.5px solid rgba(150,130,220,.35);
color:#eae4ff;font:inherit;font-weight:600;font-size:13px;transition:transform var(--t-tap),border-color var(--t-ui),box-shadow var(--t-ui);position:relative;


min-height:36px;box-sizing:border-box}
.booster-btn:hover{transform:translateY(-2px);border-color:var(--amb-glow,#9a8cf5);box-shadow:0 6px 14px -4px rgba(0,0,0,.5)}
.booster-btn .booster-ic{font-size:20px;line-height:1}
.booster-btn .booster-nm{opacity:.92}
.booster-btn .booster-cnt{min-width:20px;height:20px;padding:0 5px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
background:#ffce4a;color:#5a3a10;font-weight:800;font-size:12px;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.booster-btn .booster-cnt.ad{background:#4a90e0;color:#fff}
.booster-btn.empty{opacity:.78}
.booster-btn.armed{border-color:#ff6a4a;box-shadow:0 0 0 2px rgba(255,106,74,.5),0 0 16px -2px #ff6a4a;transform:translateY(-2px)}
body.booster-armed #field .cell.has-item{cursor:crosshair;outline:2px dashed rgba(255,120,90,.55);outline-offset:-3px}
body.booster-armed #field .cell.has-item:hover{outline-color:#ff6a4a;background:rgba(255,106,74,.12)}
@media(max-width:520px){.booster-btn{padding:5px 9px 5px 7px;font-size:12px}.booster-btn .booster-ic{font-size:17px}}


.achv-toast{position:fixed;left:50%;top:74px;transform:translate(-50%,-24px);z-index:9000;
display:flex;align-items:center;gap:12px;padding:10px 18px 10px 12px;border-radius:16px;
background:linear-gradient(160deg,#3a2f66,#241a44);border:1.5px solid #ffce4a;
box-shadow:0 10px 30px -6px rgba(0,0,0,.6),0 0 20px -4px #ffce4a;opacity:0;transition:opacity var(--t-move),transform var(--t-move);pointer-events:none}
.achv-toast.show{opacity:1;transform:translate(-50%,0)}
.achv-toast-ic{font-size:32px}
.achv-toast-t{font-size:12px;color:#ffce4a;font-weight:700;letter-spacing:.04em}
.achv-toast-n{font-size:15px;color:#fff;font-weight:700}
#achv-grid{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:4px 2px}
.achv-count{text-align:center;color:#cbb8ff;font-weight:600;margin:2px 0 10px}
.achv-row{display:flex;gap:12px;align-items:center;padding:10px;border-radius:14px;margin-bottom:8px;
background:rgba(255,255,255,.05);border:1px solid rgba(150,130,220,.2)}
.achv-row.got{background:linear-gradient(160deg,rgba(90,70,150,.4),rgba(50,38,90,.5));border-color:#ffce4a55}
.achv-ic{font-size:28px;width:44px;text-align:center;flex:0 0 auto}
.achv-mid{flex:1;min-width:0}
.achv-nm{font-weight:700;color:#f0ecff}
.achv-d{font-size:12px;color:#b8a8e0;margin:1px 0 4px}
.achv-done{font-size:12px;color:#8fe08f;font-weight:700}
.achv-bar{height:6px;border-radius:4px;background:rgba(0,0,0,.3);overflow:hidden}
.achv-fill{height:100%;background:linear-gradient(90deg,#9a7ce8,#ffce4a);border-radius:4px;transition:width var(--t-open)}
.achv-prog{font-size:11px;color:#a898d0;margin-top:2px;text-align:right}


.coll-item.hybrid .coll-lock{filter:grayscale(.3)}
.coll-item.breedable{cursor:pointer;border-color:#c86ae8 !important;
box-shadow:0 0 0 1.5px rgba(200,106,232,.5),0 0 16px -3px #c86ae8;animation:breedPulse 1.8s ease-in-out infinite}
.coll-item.breedable:hover{transform:translateY(-2px)}
.coll-item.breedable .coll-lock{filter:none;animation:none}
@keyframes breedPulse{0%,100%{box-shadow:0 0 0 1.5px rgba(200,106,232,.5),0 0 12px -3px #c86ae8}50%{box-shadow:0 0 0 2px rgba(200,106,232,.8),0 0 22px -2px #c86ae8}}


.order-x2{margin-top:5px;display:block;width:100%;padding:5px 8px;border-radius:10px;cursor:pointer;
background:linear-gradient(160deg,#4a90e0,#2a68b8);color:#fff;border:none;font:inherit;font-weight:700;font-size:12px;
box-shadow:0 3px 8px -2px rgba(0,0,0,.4);transition:transform var(--t-tap)}
.order-x2:hover{transform:translateY(-1px)}




#shop-close,#coll-close,#quest-close,#orders-close,#loc-close,.meta-close,
#dacha-mclose,#shed-close{
width:44px;height:44px;flex-shrink:0;font-size:16px}
.order-x2{min-height:44px}





.shop-buy{min-height:44px;justify-content:center}
#dacha-back,#garden-back{min-height:44px;display:flex;align-items:center}



















@media (max-width:560px),(pointer:coarse){




.cell-canvas{filter:none}
#ambient span{filter:none}




.cell{transition:border-color var(--t-ui),transform var(--t-tap) var(--e-pop)}


#popup,#unlock-popup,#shop-modal,#coll-modal,#quest-modal,#orders-modal,
.meta-modal,#photo-modal,#dacha-modal,#shed-modal{backdrop-filter:none!important}
#popup{background:rgba(4,10,6,.82)}
#unlock-popup{background:rgba(4,10,6,.86)}
#shop-modal,#coll-modal,#quest-modal,#orders-modal,.meta-modal,
#dacha-modal,#shed-modal{background:rgba(4,10,6,.84)}
#photo-modal{background:rgba(4,10,6,.88)}
}















@media(max-height:430px){
#main{padding:4px 8px 2px}
#chapter-title{font-size:11px;margin-bottom:4px}
#chain-bar{padding:4px 10px;margin-bottom:5px;gap:2px}
.chain-icon{width:30px;height:30px}
.chain-label{display:none}
.chain-arrow{margin-top:0}
#booster-bar{margin-top:4px}



.booster-btn{padding:3px 8px 3px 6px;font-size:11px;min-height:34px;box-sizing:border-box}
#hud{padding:5px 12px 6px}
.hud-label{font-size:8px}.hud-value{font-size:15px}
#side-panel{padding:3px 0;gap:2px}











#loc-btn,#garden-btn,#shop-btn,#coll-btn,#quest-btn,#orders-btn,#bonus-btn{
width:40px;height:40px;font-size:16px;border-radius:11px;margin-top:0;
flex-shrink:1;min-height:28px;box-sizing:border-box}
#loc-btn-ic{font-size:18px}
#loc-btn-label,#garden-btn-label,#shop-btn-label,#coll-btn-label,
#quest-btn-label,#orders-btn-label,#bonus-btn-label{display:none}
}













@media(max-height:540px){
.meta-modal{padding:8px;
padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom));
padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
.meta-box{padding-bottom:8px;border-radius:18px}
.meta-head{padding:8px 14px}
.meta-title{font-size:15px}
.meta-close{width:34px;height:34px;font-size:15px}
.meta-sub{padding:6px 14px 0;font-size:12px}
.meta-foot{padding:5px 12px 0;font-size:10px}
#wheel-wrap{padding:6px 0 2px}
#wheel-pointer{font-size:16px;top:0}
#wheel-result{font-size:13px;min-height:15px;padding:1px}
#wheel-spin{margin:4px 14px 0;padding:9px;font-size:14px}
#streak-days{padding:8px 14px 4px}
#streak-claim{margin:8px 14px 0;padding:9px;font-size:14px}
#bonus-cards{padding:8px 14px 2px;gap:7px}
.bonus-card{padding:9px}
#event-barwrap{padding:6px 14px 2px}
#event-ms{padding:4px 14px 0;gap:6px}
#achv-grid{padding:2px}
}










@media(max-height:540px){
#unlock-box{padding:16px 20px;border-radius:18px}
.unlock-icon{font-size:32px;margin-bottom:4px;animation:none}
.unlock-title{font-size:17px;margin-bottom:3px}
.unlock-stars{font-size:16px;margin-bottom:8px}
.unlock-sub{font-size:12px;margin-bottom:10px;line-height:1.35}
#unlock-box .popup-btn{padding:9px 20px;font-size:14px}
#unlock-box .popup-btn.secondary{margin-top:5px}
}





@media(max-width:480px){
#lang-toggle{top:8px !important;right:56px !important}
}





@media(max-height:360px){
#chapter-title{display:none}
#main{padding:2px 8px 2px}
#chain-bar{padding:3px 8px;margin-bottom:3px}
.chain-icon{width:26px;height:26px}
#booster-bar{margin-top:2px;gap:5px}
.booster-btn{min-height:30px;padding:2px 7px 2px 5px;font-size:10px}
#hud{padding:3px 10px 4px}
.hud-value{font-size:14px}
}









@media(max-width:430px){
#garden-header{padding:10px 10px 6px;gap:6px}




#garden-title{font-size:14px;letter-spacing:.04em}
#garden-title .gt-tx{display:none}


#garden-title{flex:0 0 auto}






#garden-header{justify-content:flex-start}
#garden-back{margin-left:auto}
#harvest-chip span{display:none}
#harvest-chip,#water-chip{padding:5px 9px;font-size:12px;gap:3px}
#garden-photo{padding:7px 9px;font-size:14px;margin-right:0}
#garden-back{padding:6px 11px;font-size:12px}
}




@media(max-height:430px){
#garden-header{padding:5px 10px 4px}
#garden-title{font-size:13px}



#garden-back{min-height:30px;padding:4px 10px;font-size:12px}
#harvest-chip,#water-chip{padding:3px 8px;font-size:11px}
#harvest-chip span{display:none}
#garden-zones{padding:4px 8px;gap:5px;flex-wrap:nowrap;overflow-x:auto;
justify-content:flex-start;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#garden-zones::-webkit-scrollbar{display:none}
.garden-zone-tab{width:32px;height:32px;font-size:16px;border-radius:9px;flex:0 0 auto}
#garden-inventory{padding:4px 8px 5px}
#garden-inv-label,.garden-hint{display:none}
.garden-item{width:34px;height:34px}
.garden-item-canvas{width:26px !important;height:26px !important}
}







@media (prefers-reduced-motion: no-preference){

@keyframes ch-enter{
0%{opacity:0;transform:scale(.985) translateY(7px)}
100%{opacity:1;transform:none}
}
@keyframes ch-enter-bg{0%{opacity:0}100%{opacity:1}}
#main.ch-enter #chapter-title,
#main.ch-enter #chain-bar,
#main.ch-enter #field-wrap{animation:ch-enter var(--t-move) var(--e-out) both}
#main.ch-enter #chain-bar{animation-delay:.04s}
#main.ch-enter #field-wrap{animation-delay:.08s}
#main.ch-enter #world-bg{animation:ch-enter-bg .5s ease both}



@keyframes cell-ripple{
0%{transform:none}
38%{transform:scale(1.07)}
100%{transform:none}
}
.cell.ripple{animation:cell-ripple var(--t-move) ease-out both}


@keyframes zone-enter{0%{opacity:.15;transform:scale(1.012)}100%{opacity:1;transform:none}}
#garden-scene.zone-enter{animation:zone-enter var(--t-open) var(--e-out) both}



@keyframes energy-sweep{
0%,72%{transform:translateX(-110%)}
100%{transform:translateX(240%)}
}
.hud-energy-bar{position:relative;overflow:hidden}
.hud-energy-bar.full::after{
content:'';position:absolute;top:0;bottom:0;width:38%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
animation:energy-sweep 3.4s ease-in-out infinite;pointer-events:none}
}









@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
#ambient{display:none}
}






.cell-canvas[data-mv=spin],
.cell.golden-guest .cell-canvas[data-mv=spin]{filter:none}















#tut-layer{position:fixed;inset:0;z-index:232;display:none;pointer-events:none}
#tut-layer.on{display:block}





.tut-sh{position:fixed;background:rgba(4,10,6,.72);pointer-events:auto}

#tut-hole{position:fixed;background:transparent}
#tut-ring{position:fixed;border:2px solid var(--accent);border-radius:16px;pointer-events:none;
transition:all var(--t-move) var(--e-out);animation:tut-pulse 1.7s ease-in-out infinite}
@keyframes tut-pulse{
0%,100%{box-shadow:0 0 0 3px rgba(127,208,96,.16),0 0 18px -4px rgba(127,208,96,.5)}
50%{box-shadow:0 0 0 7px rgba(127,208,96,.07),0 0 28px 0 rgba(127,208,96,.8)}}
#tut-hand{position:fixed;font-size:26px;line-height:1;pointer-events:none;
filter:drop-shadow(0 2px 5px rgba(0,0,0,.7));animation:tut-tap 1.3s ease-in-out infinite;
transition:opacity var(--t-ui) linear}
@keyframes tut-tap{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}









#tut-card{position:fixed;left:50%;transform:translateX(-50%);width:min(92vw,340px);pointer-events:none;
background:linear-gradient(165deg,#2a412a,#1b2c1b);border:1.5px solid #35543a;border-radius:18px;
padding:13px 15px 11px;box-shadow:0 14px 40px -10px rgba(0,0,0,.75);
animation:tut-in var(--t-open) var(--e-snap)}



@keyframes tut-in{
from{opacity:0;transform:translateX(-50%) translateY(10px) scale(.96)}
to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
.tut-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.tut-ic{font-size:20px;line-height:1}
.tut-title{color:var(--text);font-size:15px;font-weight:700}
.tut-text{color:var(--text2);font-size:13px;line-height:1.5}
.tut-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px}
.tut-dots{color:var(--text3);font-size:11px;font-weight:600;letter-spacing:.04em;flex-shrink:0}
.tut-actions{display:flex;align-items:center;gap:8px}
.tut-skip{border:none;background:none;color:var(--text3);font-size:12px;cursor:pointer;
padding:6px 4px;text-decoration:underline;text-underline-offset:2px;pointer-events:auto}
.tut-skip:hover{color:var(--text2)}
.tut-btn{border:1.5px solid #5ea840;border-radius:11px;cursor:pointer;
background:linear-gradient(160deg,#4a9a30,#357020);color:#eafce0;
font-size:13px;font-weight:700;padding:8px 15px;
box-shadow:0 3px 8px rgba(0,0,0,.35),inset 0 1px 2px rgba(255,255,255,.2);
transition:all var(--t-ui) var(--e-pop);touch-action:manipulation;pointer-events:auto}
.tut-btn:hover{background:linear-gradient(160deg,#5cb840,#3f8526);border-color:var(--accent);transform:translateY(-1px)}
.tut-btn:active{transform:scale(.94)}

#tut-help{position:fixed;top:104px;right:8px;z-index:180;width:40px;height:40px;padding:0;
border-radius:11px;border:1.5px solid rgba(120,190,130,.4);cursor:pointer;
font-size:19px;font-weight:700;color:#eaf6e2;
background:linear-gradient(160deg,rgba(28,52,28,.85),rgba(14,28,14,.85));
box-shadow:inset 0 1px 1px rgba(255,255,255,.08),0 2px 6px rgba(0,0,0,.4);
display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
#tut-help:hover{border-color:var(--accent);color:#fff}


body.tut-on #tut-help,body.tut-on #mc-admin-btn{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){
#tut-ring,#tut-hand,#tut-card{animation:none}
.tut-sh,#tut-ring,#tut-card{transition:none}
}









@media(max-height:430px){
#tut-card{width:min(74vw,300px);padding:9px 12px 8px}
.tut-title{font-size:13px}
.tut-text{font-size:11px;line-height:1.4}
.tut-row{margin-top:7px}
.tut-btn{padding:6px 13px;font-size:12px}
.tut-skip{font-size:11px;padding:5px 3px}
#tut-hand{font-size:22px}
}





@media(max-height:430px){



#wheel-foot{display:none}
#wheel-result{font-size:12px;min-height:14px;padding:0}
#wheel-wrap{padding:2px 0 0}
}








@media(max-width:480px){
#tut-help{top:8px;right:104px}




#chapter-title{margin-top:9px}
}
























@media(max-height:340px){
#screen-game{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
#app{display:contents}
#side-panel{grid-column:1;grid-row:1 / 3}
#hud{grid-column:2;grid-row:2}
#main{grid-column:2;grid-row:1;min-width:0;min-height:0;
display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:auto auto;
align-content:center;justify-items:center;align-items:center;column-gap:10px;row-gap:4px;padding:3px 8px}
#chapter-title{display:none}
#chain-bar{grid-column:1 / -1;grid-row:1;margin:0}
#field-wrap{grid-column:2;grid-row:2}
#field{padding:6px;gap:4px;border-radius:16px}
#booster-bar{display:contents}
#booster-bar .booster-btn{grid-row:2;flex-direction:column;justify-content:center;gap:2px;
min-width:60px;min-height:54px;padding:6px 8px 5px;font-size:10px;border-radius:14px}
#booster-bar .booster-btn:first-child{grid-column:1;justify-self:end}
#booster-bar .booster-btn:last-child{grid-column:3;justify-self:start}


#booster-bar .booster-btn{align-self:start}
#booster-bar .booster-ic{font-size:20px}
#booster-bar .booster-nm{max-width:72px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#booster-bar .booster-cnt{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;font-size:11px}
#hud{padding:2px 12px 3px;gap:12px}
#hud-prog-label-top{display:none}
.hud-block{gap:1px}
.hud-label{font-size:8px;line-height:1}
.hud-value{font-size:14px}
.hud-energy-bar{height:5px}
.hud-progress{gap:3px}
.hud-btn{width:36px;height:36px;font-size:16px;border-radius:11px}



#popup-box{padding:14px 20px 16px;max-height:calc(100vh - 12px);max-height:calc(100dvh - 12px);overflow-y:auto}
#popup-box h2{font-size:17px;margin-bottom:4px}
#popup-box p{font-size:13px;line-height:1.4;margin-bottom:10px}
#popup-box .popup-btn{padding:9px 24px;font-size:14px}



#wheel-box{max-width:560px;display:grid;grid-template-columns:auto minmax(0,1fr);
grid-template-areas:"head head" "wheel result" "wheel spin" "wheel foot";
grid-template-rows:auto 1fr auto auto;column-gap:6px;padding-bottom:8px}
#wheel-box .meta-head{grid-area:head}
#wheel-wrap{grid-area:wheel;align-self:center;padding:4px 8px 0}
#wheel-result{grid-area:result;align-self:end}
#wheel-spin{grid-area:spin;margin:4px 12px 0 0}
#wheel-foot{grid-area:foot}
}






@media(max-height:250px){
#main{padding:2px 8px;row-gap:3px}
#chain-bar{padding:2px 6px;gap:2px}
.chain-icon{width:22px;height:22px;border-radius:7px}
.chain-icon canvas{width:20px!important;height:20px!important}
.chain-arrow{font-size:11px}
#field{padding:4px;gap:3px;border-radius:13px}
#hud{padding:1px 12px 2px}
.hud-btn{width:32px;height:32px;font-size:15px}
.hud-label{font-size:7px}
.hud-value{font-size:13px}
}








#energy-offers{position:fixed;left:0;top:0;z-index:180;display:flex;flex-direction:column;
align-items:stretch;gap:6px}
#energy-offers[hidden],#energy-offers button[hidden]{display:none}
#energy-offers button{display:flex;align-items:center;justify-content:center;gap:8px;
min-height:34px;box-sizing:border-box;padding:7px 12px;border-radius:12px;
font:inherit;font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer;
box-shadow:0 4px 12px rgba(0,0,0,.4),inset 0 1px 2px rgba(255,255,255,.25);
-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform var(--t-tap)}
#energy-offers button:active{transform:scale(.95)}
#reward-btn{border:1.5px solid #5cc4f2;background:linear-gradient(160deg,#2a7ba8,#175a86);color:#eaf6ff}

#buy-energy-btn{border:1.5px solid #ffe08a;background:linear-gradient(165deg,#ffd86a,#e0a828);color:#1a1206}
#buy-energy-btn:disabled{filter:grayscale(.5) brightness(.8);cursor:default}
#buy-energy-btn .eo-price{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;
border-radius:9px;background:rgba(26,18,6,.14);font-weight:800}
#buy-energy-btn .eo-cur{width:16px;height:16px;object-fit:contain}

body.tut-on #energy-offers{display:none}

.shop-cur{width:14px;height:14px;object-fit:contain;vertical-align:-2px;margin-left:3px}

#energy-offers.eo-tight{gap:4px}
#energy-offers.eo-tight button{min-height:28px;padding:3px 8px;font-size:11px;gap:5px;border-radius:10px}
#energy-offers.eo-tight .eo-price{padding:1px 5px}
#energy-offers.eo-tight .eo-cur{width:14px;height:14px}







#inf-chip{display:flex;align-items:center;justify-content:center;min-height:34px;
box-sizing:border-box;padding:7px 12px;border-radius:12px;font:inherit;font-size:13px;
font-weight:800;letter-spacing:.4px;white-space:nowrap;
border:1.5px solid #ffe08a;background:linear-gradient(165deg,#ffd86a,#e0a828);color:#1a1206;
box-shadow:0 4px 12px rgba(0,0,0,.4),inset 0 1px 2px rgba(255,255,255,.25)}
#inf-chip[hidden]{display:none}
#energy-offers.eo-tight #inf-chip{min-height:28px;padding:3px 8px;font-size:11px;border-radius:10px}
.hud-energy-bar.inf .hud-energy-fill{background:linear-gradient(90deg,#e0a828,#ffe08a)}



.shop-buy:disabled{filter:grayscale(.55) brightness(.85);cursor:default;opacity:.9}
.shop-buy:disabled:hover{filter:grayscale(.55) brightness(.85);transform:none}
.shop-buy:disabled:active{transform:none}