:root{
  --paper:#fbf4e4; --paper2:#f3e6cb; --ink:#2f4a33; --ink2:#5b6f52;
  --red:#d9475a; --gold:#e5a93b; --leaf:#5e9a55; --glass:#cfe8e6;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{background:#e9dcc0 url(./assets/greenhouse_tile.webp) center/360px;font-family:'Vazirmatn',sans-serif;color:var(--ink);user-select:none;-webkit-user-select:none}
#game-root{box-shadow:0 0 60px rgba(60,40,20,.35);background:#e8efe0}
button{font-family:'Vazirmatn',sans-serif;cursor:pointer;color:inherit}
img{-webkit-user-drag:none;pointer-events:none}

/* boot */
#boot{background:radial-gradient(circle at 50% 40%,#fffaf0,#efe0c0);display:grid;place-items:center;z-index:80}
.boot-inner{width:72%;text-align:center}
.boot-title{font-size:34px;font-weight:900;color:var(--red);line-height:1.8}
.boot-bar{height:14px;border-radius:10px;background:#e6d6b5;overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,.12)}
.boot-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7bb56c,#e46b7c);border-radius:10px;transition:width .2s}
.boot-sub{margin-top:10px;font-size:14px;color:var(--ink2);line-height:1.8}

/* shared */
.topbar{position:absolute;top:calc(var(--sat) + 10px);inset-inline:12px;display:flex;align-items:center;justify-content:space-between;gap:8px;z-index:5}
.coinpill{display:flex;align-items:center;gap:6px;background:rgba(255,250,238,.92);border:2px solid #e2c98f;border-radius:999px;padding:3px 12px 3px 6px;font-weight:800;font-size:17px;box-shadow:0 3px 10px rgba(80,50,10,.18);min-height:40px}
.coinpill img{width:30px;height:30px}
.iconbtn{width:46px;height:46px;border-radius:14px;border:2px solid #e2c98f;background:rgba(255,250,238,.94);display:grid;place-items:center;padding:0;box-shadow:0 3px 10px rgba(80,50,10,.18);color:var(--ink)}
.iconbtn svg{width:24px;height:24px}
.iconbtn img{width:34px;height:34px}
.iconbtn:active,.softbtn:active,.bigbtn:active{transform:scale(.94)}
.bigbtn{display:block;width:72%;max-width:280px;min-height:64px;margin:10px auto;border:none;background:url(./assets/btn_primary.webp) center/100% 100% no-repeat;font-size:24px;font-weight:900;color:#fff;text-shadow:0 2px 0 rgba(90,30,20,.55),0 0 8px rgba(90,30,20,.35);transition:transform .12s;filter:drop-shadow(0 6px 8px rgba(80,40,10,.25))}
.softbtn{display:block;width:62%;max-width:240px;min-height:48px;margin:8px auto;border-radius:16px;border:2px solid #d9bf86;background:#fff8e8;font-size:17px;font-weight:800;color:var(--ink);box-shadow:0 4px 0 #dcc28c;transition:transform .12s}
.softbtn.wide{display:flex;align-items:center;justify-content:center;gap:6px}
.softbtn svg,.iconbtn.soundBtn svg{width:22px;height:22px}

/* menu */
.menu-bg{position:absolute;inset:0;background:url(./assets/title_bg.webp) center/cover}
.menu-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,250,235,.15),rgba(255,248,230,.25) 50%,rgba(255,246,226,.75))}
.menu-center{position:absolute;inset-inline:0;top:calc(var(--sat) + 70px);bottom:calc(var(--sab) + 20px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 16px}
.menu-logo{width:min(62%,250px);aspect-ratio:1;animation:floaty 3.2s ease-in-out infinite;filter:drop-shadow(0 10px 14px rgba(70,40,10,.3))}
.menu-title{margin:0;font-size:44px;font-weight:900;color:var(--red);line-height:1.6;text-shadow:0 3px 0 #fff,0 0 18px rgba(255,255,255,.9)}
.menu-sub{margin:0 0 14px;font-size:15px;font-weight:600;line-height:1.9;color:var(--ink);background:rgba(255,250,238,.75);padding:2px 14px;border-radius:12px}
@keyframes floaty{50%{transform:translateY(-10px) rotate(-2deg)}}

/* map */
.map-bg{position:absolute;inset:0;background:linear-gradient(rgba(251,244,228,.72),rgba(251,244,228,.8)),url(./assets/title_bg.webp) center/cover}
.map-head{font-size:20px;font-weight:900;color:var(--ink)}
#mapNodes{position:absolute;inset-inline:0;top:calc(var(--sat) + 70px);bottom:calc(var(--sab) + 80px)}
#mapNodes svg.path{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.node{position:absolute;width:78px;height:78px;transform:translate(50%,-50%);border:none;background:none;padding:0}
.node img.base{width:100%;height:100%;filter:drop-shadow(0 5px 6px rgba(60,40,10,.3))}
.node .num{position:absolute;inset:0;display:grid;place-items:center;font-size:26px;font-weight:900;color:#fff;text-shadow:0 2px 0 rgba(80,30,30,.6),0 0 6px rgba(80,30,30,.5);padding-bottom:4px}
.node.locked .num{display:none}
.node .st{position:absolute;bottom:-14px;inset-inline:0;display:flex;justify-content:center;gap:0}
.node .st img{width:24px;height:24px}
.node .st img:nth-child(2){transform:translateY(5px)}
.node.current img.base{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.1)}}
.node.locked{cursor:default}
.shopfab{position:absolute;bottom:calc(var(--sab) + 16px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:6px 22px 6px 14px;min-height:54px;border-radius:999px;border:2px solid #d9bf86;background:#fff8e8;font-size:18px;font-weight:900;box-shadow:0 5px 0 #dcc28c}
.shopfab img{width:34px;height:34px}

/* shop */
#shopList{position:absolute;inset-inline:14px;top:calc(var(--sat) + 72px);bottom:calc(var(--sab) + 12px);overflow:auto;display:flex;flex-direction:column;gap:12px;padding-bottom:10px}
.sitem{display:flex;align-items:center;gap:12px;background:rgba(255,250,238,.95);border:2px solid #e2c98f;border-radius:20px;padding:10px 12px;box-shadow:0 4px 0 #e0c891}
.sitem .ic{width:70px;height:70px;flex:none;border-radius:16px;background:radial-gradient(circle,#fff,#f1e3c2);display:grid;place-items:center}
.sitem .ic img{width:62px;height:62px;object-fit:contain}
.sitem .ic img.gold{filter:sepia(1) saturate(3.5) hue-rotate(-8deg) brightness(1.08)}
.sitem .tx{flex:1;min-width:0}
.sitem .tx b{display:block;font-size:17px;font-weight:900;line-height:1.7}
.sitem .tx span{display:block;font-size:13px;color:var(--ink2);line-height:1.7;overflow-wrap:anywhere}
.buy{flex:none;min-width:84px;min-height:46px;border-radius:14px;border:none;background:linear-gradient(#f6c75a,#e09a2c);color:#5a3200;font-weight:900;font-size:17px;display:flex;align-items:center;justify-content:center;gap:4px;box-shadow:0 4px 0 #b9761a}
.buy img{width:24px;height:24px}
.buy:disabled{filter:grayscale(.7);opacity:.6}
.buy.owned{background:#cfe5c4;color:var(--ink);box-shadow:0 4px 0 #9fc191}

/* play HUD */
#play{pointer-events:none}
#play > *{pointer-events:auto}
#hud2{position:absolute;top:calc(var(--sat) + 8px);inset-inline:8px;display:flex;align-items:center;gap:6px;height:50px}
#hud2 .iconbtn{width:44px;height:44px;flex:none}
.scorebox{flex:1;min-width:0;display:flex;align-items:center;gap:4px;background:rgba(255,250,238,.94);border:2px solid #e2c98f;border-radius:999px;padding:2px 8px 2px 4px;height:42px}
.scorebox img{width:30px;height:30px;flex:none}
.scorebar{flex:1;min-width:30px;height:12px;border-radius:8px;background:#ead9b6;overflow:hidden}
.scorebar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#f0b84a,#e46b7c);border-radius:8px;transition:width .25s}
#scoreTxt{font-weight:900;font-size:14px;white-space:nowrap}
#hearts{display:flex;gap:1px;flex:none}
#hearts svg{width:24px;height:24px;fill:var(--red);filter:drop-shadow(0 2px 0 #fff);transition:transform .3s}
#hearts svg.off{fill:#c9bba0;transform:scale(.8)}
#hearts svg.hit{animation:hit .5s}
@keyframes hit{30%{transform:scale(1.5) rotate(-12deg)}}
#timer{flex:none;min-width:58px;text-align:center;font-weight:900;font-size:16px;background:rgba(255,250,238,.94);border:2px solid #e2c98f;border-radius:12px;height:42px;line-height:38px}
#timer.low{color:#fff;background:var(--red);border-color:#a8323f;animation:pulse 1s infinite}
#lvlTag{position:absolute;top:calc(var(--sat) + 60px);right:50%;transform:translateX(50%);font-size:12px;font-weight:800;color:var(--ink2);background:rgba(255,250,238,.8);border-radius:8px;padding:0 10px;line-height:1.8;pointer-events:none}

#orders{position:absolute;top:calc(var(--sat) + 86px);inset-inline:6px;height:100px;display:flex;gap:4px}
.oc{flex:1;min-width:0;position:relative;background:url(./assets/order_card_frame.webp) center/100% 100% no-repeat;border:none;padding:12px 10px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:transform .2s,opacity .3s}
.oc.empty{opacity:.45;filter:grayscale(.6)}
.oc.empty .wait{font-size:12px;font-weight:700;color:var(--ink2);line-height:1.8}
.oc .items{display:flex;gap:2px;justify-content:center;flex-wrap:wrap}
.oc .it{display:flex;align-items:center;font-weight:900;font-size:14px}
.oc .it img{width:30px;height:30px}
.oc .bar{width:70%;height:7px;border-radius:5px;background:rgba(0,0,0,.12);overflow:hidden}
.oc .bar i{display:block;height:100%;background:var(--leaf);border-radius:5px}
.oc .rw{display:flex;align-items:center;gap:2px;font-size:13px;font-weight:900;color:#8a5a10}
.oc .rw img{width:18px;height:18px}
.oc.ready{animation:bob .8s ease-in-out infinite;filter:drop-shadow(0 0 8px #ffd96a)}
.oc.shake{animation:shake .35s}
.oc.leave{transform:translateY(-30px) scale(.8);opacity:0}
.oc.angry{transform:translateY(-20px) rotate(-8deg);opacity:0;filter:sepia(1) hue-rotate(-40deg)}
@keyframes bob{50%{transform:translateY(-5px)}}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

#bottom{position:absolute;bottom:0;inset-inline:0;padding:8px 10px calc(var(--sab) + 10px);background:linear-gradient(rgba(251,244,228,.9),rgba(246,234,208,.97));border-top:2px solid #e2c98f;border-radius:22px 22px 0 0;box-shadow:0 -6px 18px rgba(80,50,10,.15);display:flex;flex-direction:column;gap:6px}
#bottom .row{display:flex;align-items:center;gap:8px;min-height:52px}
#bottom .lbl{font-size:14px;font-weight:900;color:var(--ink2);flex:none;width:30px}
#seedChips{display:flex;gap:6px;flex:1}
.chip{flex:1;min-width:0;height:52px;border-radius:14px;border:2px solid #e2c98f;background:#fffaf0;display:flex;align-items:center;justify-content:center;gap:2px;font-size:13px;font-weight:800;padding:0 4px;position:relative}
.chip img{width:36px;height:36px}
.chip.sel{border-color:var(--red);background:#ffe9e4;box-shadow:0 0 0 3px rgba(217,71,90,.25)}
.chip.locked{opacity:.6;filter:grayscale(.8)}
.chip svg{width:18px;height:18px;fill:var(--ink2)}
.chip .k{position:absolute;top:1px;inset-inline-end:5px;font-size:10px;opacity:.5}
#basket{flex:1;display:flex;gap:10px;min-width:0}
#basket .b{display:flex;align-items:center;font-weight:900;font-size:16px}
#basket .b img{width:34px;height:34px}
#basket .b.pop{animation:hit .4s}
#sellBtn{flex:none;min-width:96px;height:48px;border-radius:14px;border:none;background:linear-gradient(#8cc57a,#5e9a55);color:#fff;font-size:16px;font-weight:900;box-shadow:0 4px 0 #3f7a3a;display:flex;align-items:center;justify-content:center;gap:4px}
#sellBtn img{width:22px;height:22px}
#sellBtn:disabled{filter:grayscale(.8);opacity:.55}
#sellBtn:active{transform:scale(.95)}

#hand{position:absolute;width:56px;height:56px;pointer-events:none!important;z-index:30;transform:translate(50%,-100%)}
#hand svg{position:absolute;inset:0;width:100%;height:100%;animation:handb .9s ease-in-out infinite;filter:drop-shadow(0 3px 3px rgba(0,0,0,.3))}
#hand .ring{position:absolute;left:50%;bottom:-14px;width:40px;height:40px;margin-left:-20px;border-radius:50%;border:3px solid #fff;animation:ring 1s ease-out infinite}
@keyframes handb{50%{transform:translateY(-10px)}}
@keyframes ring{from{transform:scale(.3);opacity:1}to{transform:scale(1.6);opacity:0}}
#tip{position:absolute;inset-inline:18px;bottom:calc(var(--sab) + 148px);background:#fffaf0;border:2px solid var(--red);border-radius:18px;padding:8px 14px;font-size:15px;font-weight:800;line-height:1.8;text-align:center;box-shadow:0 6px 16px rgba(80,40,10,.2);pointer-events:none!important;animation:tipIn .3s}
@keyframes tipIn{from{transform:translateY(12px);opacity:0}}
#toast{position:absolute;top:44%;right:50%;transform:translate(50%,0);background:rgba(47,74,51,.92);color:#fff;font-weight:800;font-size:15px;line-height:1.8;padding:6px 16px;border-radius:14px;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none!important;white-space:nowrap}
#toast.on{opacity:1;transform:translate(50%,-12px)}

/* modals */
.dim{position:absolute;inset:0;background:rgba(40,30,15,.5);backdrop-filter:blur(2px)}
.panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(90%,360px);background:url(./assets/panel_frame.webp) center/100% 100% no-repeat;padding:40px 26px 34px;text-align:center;animation:panelIn .35s cubic-bezier(.2,1.4,.5,1)}
.panel::before{content:"";position:absolute;inset:16px;background:rgba(255,250,238,.82);border-radius:26px;z-index:-1}
@keyframes panelIn{from{transform:translate(-50%,-50%) scale(.7);opacity:0}}
.panel h2{margin:0;font-size:30px;font-weight:900;color:var(--red);line-height:1.6}
.psub{margin:0 0 8px;font-size:15px;font-weight:700;color:var(--ink2);line-height:1.8}
.panel .bigbtn{width:80%}
.panel .softbtn{width:70%}
.endstars{display:flex;justify-content:center;align-items:flex-end;gap:2px;margin:4px 0 8px}
.endstars img{width:68px;height:68px;opacity:0;transform:scale(.2)}
.endstars img:nth-child(2){width:84px;height:84px;margin-bottom:12px}
.endstars img.in{animation:starIn .45s cubic-bezier(.2,1.6,.5,1) forwards}
@keyframes starIn{to{opacity:1;transform:scale(1)}}
.endrow{display:flex;justify-content:space-between;align-items:center;width:78%;margin:4px auto;font-size:16px;font-weight:800;background:rgba(240,226,196,.7);border-radius:12px;padding:2px 12px;line-height:1.9}
.endrow b{display:flex;align-items:center;gap:4px;font-size:18px}
.endrow img{width:24px;height:24px}
.endrow.reward b{color:#a8650c}