*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{width:100%;height:100%;overflow:hidden;background:#2c4436;font-family:Vazirmatn,sans-serif;touch-action:none}
#cv{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
.num{font-weight:900;font-variant-numeric:tabular-nums}
#flash{position:fixed;inset:0;background:#d1345b;opacity:0;pointer-events:none;transition:opacity .25s}
#hud{position:fixed;top:calc(env(safe-area-inset-top) + 10px);left:12px;right:12px;color:#fff;text-shadow:0 2px 3px rgba(0,0,0,.45);pointer-events:none;z-index:5}
.row1{display:flex;align-items:center;justify-content:space-between}
.hearts{display:flex;gap:3px}.hearts img{width:22px;height:22px;transition:transform .2s,opacity .2s}.hearts img.off{opacity:.25;filter:grayscale(1)}
.mid{display:flex;align-items:center;gap:6px;font-size:16px}.coinIco{width:22px;height:22px}
.slots{display:flex;gap:4px;margin-inline-start:10px}.slots i{width:15px;height:15px;border-radius:50%;background:rgba(0,0,0,.28);border:2px solid rgba(255,255,255,.3)}
.slots i.on{background:radial-gradient(circle at 35% 35%,#9dffb2,#1f9a4a 70%);border-color:#d8ffd8;box-shadow:0 0 8px #4cff8a}
.timer{display:flex;align-items:center;gap:5px;font-size:16px}
.row2{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:11px;font-weight:700}
.bar{position:relative;flex:1;height:4px;border-radius:3px;background:rgba(255,255,255,.35)}
.fill{position:absolute;inset-block:0;left:0;width:0;border-radius:3px;background:linear-gradient(90deg,#d79a2b,#ffc72c)}
.dot{position:absolute;top:50%;left:0;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:#fff3c2;box-shadow:0 0 6px #ffc72c}
.totemMark{position:absolute;right:-4px;top:50%;width:9px;height:13px;margin-top:-6.5px;border-radius:3px 3px 2px 2px;background:#8a4a24;border:1.5px solid #3b1f10}
.roundBtn{position:fixed;width:38px;height:38px;border-radius:50%;border:none;background:rgba(20,30,25,.45);display:grid;place-items:center;cursor:pointer;z-index:8}
#muteBtn{right:12px;bottom:calc(env(safe-area-inset-bottom) + 14px)}
#pauseBtn{left:12px;bottom:calc(env(safe-area-inset-bottom) + 14px)}
#bigText{position:fixed;left:0;right:0;top:32%;text-align:center;font-family:Lalezar,Vazirmatn,sans-serif;font-size:46px;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.25),0 0 18px rgba(0,0,0,.35);pointer-events:none;z-index:6;animation:pop .35s cubic-bezier(.2,1.6,.4,1)}
#goalText{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top) + 72px);text-align:center;color:#fff;font-weight:700;font-size:15px;text-shadow:0 2px 4px rgba(0,0,0,.5);pointer-events:none;z-index:6}
#tip{position:fixed;padding:3px 16px 5px;border-radius:20px;background:#fff;color:#1d2a22;font-weight:900;font-size:15px;box-shadow:0 3px 8px rgba(0,0,0,.25);pointer-events:none;z-index:6;transform:translate(-50%,-100%);animation:pop .3s cubic-bezier(.2,1.6,.4,1) both;white-space:nowrap}
#hand{position:fixed;pointer-events:none;z-index:7;transform:translate(-13px,-4px)}
#hand svg{animation:tap 1s infinite}
#hand .ring{position:absolute;left:4px;top:-6px;width:16px;height:16px;border-radius:50%;border:2.5px solid #fff;animation:ring 1s infinite}
@keyframes tap{0%,100%{transform:translateY(0)}40%{transform:translateY(-8px)}}
@keyframes ring{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.8);opacity:0}}
@keyframes pop{from{transform:scale(.4);opacity:0}}
#tip{animation-name:popTip}@keyframes popTip{from{transform:translate(-50%,-100%) scale(.4);opacity:0}}
.screen{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center}
.screen.dim{background:rgba(12,24,18,.55);justify-content:center;backdrop-filter:blur(2px)}
#title{justify-content:flex-start;padding-top:calc(env(safe-area-inset-top) + 40px);background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0))}
.logoWrap{position:relative;width:min(80vw,330px);height:170px;display:grid;place-items:center}
.emblem{position:absolute;width:170px;height:170px;opacity:.95;animation:float 3s ease-in-out infinite}
.logo{position:relative;font-family:Lalezar,Vazirmatn,sans-serif;font-weight:400;font-size:clamp(58px,17vw,84px);line-height:1.3;color:#ffd24a;-webkit-text-stroke:3px #4a2a12;paint-order:stroke fill;text-shadow:0 6px 0 #6b3d16,0 10px 16px rgba(0,0,0,.45);animation:float 3s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-6px)}}
.sub{margin-top:4px;color:#fff;font-weight:700;font-size:14px;text-shadow:0 2px 4px rgba(0,0,0,.6)}
.titleBottom{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 66px);display:flex;flex-direction:column;align-items:center;gap:10px}
.tbtns{display:flex;gap:10px}
.bank{display:flex;align-items:center;gap:6px;color:#fff;font-size:17px;background:rgba(0,0,0,.35);padding:2px 14px 2px 10px;border-radius:20px}
.bank img{width:22px;height:22px}.bank.center{margin:0 auto 10px;width:max-content}
.plateBtn{min-width:150px;min-height:48px;padding:4px 22px 8px;border:none;cursor:pointer;font-family:Lalezar,Vazirmatn,sans-serif;font-size:22px;color:#fff;background:url(./assets/ui_btn_primary.webp) center/100% 100% no-repeat;text-shadow:0 2px 0 rgba(0,0,0,.35);transition:transform .1s}
.plateBtn:active{transform:scale(.93)}
.plateBtn.small{min-width:110px;min-height:42px;font-size:18px}
.plateBtn.alt{filter:hue-rotate(70deg) saturate(.7)}
.panel{position:relative;width:min(88vw,360px);padding:46px 26px 34px;display:flex;flex-direction:column;align-items:center;gap:10px;background:url(./assets/ui_panel_frame.webp) center/100% 100% no-repeat;animation:pop .3s cubic-bezier(.2,1.4,.4,1)}
.panel.tall{min-height:min(80vh,560px)}
.panel h2{font-family:Lalezar,Vazirmatn,sans-serif;font-weight:400;font-size:32px;color:#ffd24a;-webkit-text-stroke:1.5px #4a2a12;paint-order:stroke fill;line-height:1.5}
.resSub{color:#fff;font-weight:700;text-align:center;line-height:1.8}
.resRelics{display:flex;gap:10px;margin:4px 0}
.resRelics i{width:52px;height:52px;background:url(./assets/pickup_secret_relic.webp) center/contain no-repeat;filter:grayscale(1) brightness(.4);opacity:.6}
.resRelics i.on{filter:none;opacity:1;animation:pop .4s cubic-bezier(.2,1.6,.4,1) both}
.resRows{width:100%;color:#fff;font-weight:700;font-size:15px;line-height:1.9}
.resRows div{display:flex;justify-content:space-between;border-bottom:1px dashed rgba(255,255,255,.2)}
.rowBtns{display:flex;gap:8px}
.mapArea{position:relative;width:100%;flex:1;min-height:340px}
.mapPath{position:absolute;inset:0;width:100%;height:100%}
.node{position:absolute;width:86px;height:86px;transform:translate(-50%,-50%);border:none;background:center/contain no-repeat;cursor:pointer;color:#fff;font-family:Lalezar,Vazirmatn,sans-serif;font-size:26px;text-shadow:0 2px 0 #000}
.node small{position:absolute;top:100%;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:Vazirmatn;font-size:12px;font-weight:700}
.shopItem{width:100%;display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.28);border-radius:12px;padding:8px 10px;color:#fff;margin-bottom:8px}
.shopItem .t{flex:1;min-width:0}.shopItem b{display:block;font-size:15px}.shopItem span{font-size:12px;opacity:.85;line-height:1.7}
.shopItem button{border:none;border-radius:10px;padding:6px 10px;font-family:Vazirmatn;font-weight:900;background:#ffc72c;color:#4a2a12;cursor:pointer;white-space:nowrap}
.shopItem button:disabled{background:#777;color:#ddd}