@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700;900&family=Lalezar&display=swap');
html,body{margin:0;height:100%;overflow:hidden;background:#2a1a12;font-family:'Vazirmatn',sans-serif;color:#3b2214;touch-action:none;user-select:none;-webkit-user-select:none}
#game-root{position:fixed!important;inset:0;width:100%!important;max-width:none!important;margin:0!important}
#startBtn,#retryBtn,#hud,#dpad,#dpad-action{display:none!important}
#cv{position:fixed;inset:0;width:100vw;height:100vh;display:block}
.scr{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;direction:rtl}
.hide{display:none!important}
.bgimg{background:#c98a52 url(assets/title_bg.webp) center/cover}
.btn{border:none;background:url(assets/btn_primary.webp) center/100% 100% no-repeat;min-width:220px;min-height:72px;padding:0 30px 6px;font:900 24px 'Vazirmatn';color:#fff6e4;cursor:pointer;text-shadow:0 2px 0 #6b3416;transition:transform .12s}
.btn:active{transform:scale(.94)}
.btn.sm{min-width:160px;min-height:56px;font-size:19px}
.ibtn{width:54px;height:54px;border:none;background:url(assets/btn_secondary.webp) center/100% 100%;cursor:pointer;display:grid;place-items:center;font:900 15px 'Vazirmatn';color:#fff3df}
.ibtn img{width:60%;height:60%}
.logo{width:min(82vw,380px);animation:bob 3s ease-in-out infinite;filter:drop-shadow(0 8px 10px rgba(60,25,8,.45))}
@keyframes bob{50%{transform:translateY(-8px) rotate(-1deg)}}
.title{font-family:'Lalezar','Vazirmatn';font-size:40px;color:#fff3df;text-shadow:0 3px 0 #8a3f17,0 6px 14px rgba(0,0,0,.4);margin:-6px 0 4px;line-height:1.7}
.sub{color:#fbe6c6;font-size:15px;margin-bottom:26px;text-shadow:0 1px 3px #000a;line-height:1.7}
.coins{position:absolute;top:calc(14px + env(safe-area-inset-top));inset-inline-start:14px;background:#5a2f17cc;color:#ffe08a;font-weight:900;padding:6px 14px;border-radius:20px;display:flex;align-items:center;gap:6px;font-size:17px}
.coins img{width:24px;height:24px}
.panel{width:min(90vw,380px);aspect-ratio:1;background:url(assets/card_panel_dialog.webp) center/100% 100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:40px;box-sizing:border-box;text-align:center}
.panel h2{margin:0;font-size:28px;color:#6b2e10;line-height:1.7}
.dim{background:rgba(30,14,6,.6);backdrop-filter:blur(2px)}
.stars{display:flex;gap:4px;align-items:flex-end}
.stars img{width:62px}.stars img:nth-child(2){width:78px}
.stars img.pop{animation:pop .45s cubic-bezier(.2,1.6,.4,1) both}
@keyframes pop{from{transform:scale(0) rotate(-40deg)}}
.reward{font-weight:900;color:#7a3a12;font-size:17px;display:flex;gap:14px;align-items:center;line-height:1.7}
.reward img{width:26px;vertical-align:middle}
/* map */
#map{justify-content:flex-start;background:linear-gradient(rgba(240,215,170,.7),rgba(240,215,170,.7)),#d9a066 url(assets/adobe_ground_texture.webp) center/260px}
#map h1,#shop h1{margin:calc(18px + env(safe-area-inset-top)) 0 4px;font-family:'Lalezar','Vazirmatn';color:#6b2e10;font-size:32px;font-weight:400;line-height:1.7}
.mapwrap{position:relative;width:min(100vw,420px);flex:1;max-height:640px}
.mapwrap svg{position:absolute;inset:0;width:100%;height:100%}
.node{position:absolute;width:86px;transform:translate(50%,-50%);text-align:center;cursor:pointer;inset-inline-end:0}
.node .nimg{width:78px;height:78px;background:center/contain no-repeat;display:grid;place-items:center;font:900 26px 'Vazirmatn';color:#fff;text-shadow:0 2px 0 #6b2e10;margin:auto}
.node.cur .nimg{animation:bob 1.4s infinite}
.node .nm{font-size:12px;font-weight:700;color:#4a2210;background:#f6dcb4d0;border-radius:10px;padding:0 6px;line-height:1.7;white-space:nowrap}
.node .st{display:flex;justify-content:center}.node .st img{width:20px}
.bottombar{display:flex;gap:14px;align-items:center;margin-bottom:calc(16px + env(safe-area-inset-bottom))}
/* shop */
#shop{justify-content:flex-start;background:#c98a52 url(assets/adobe_wall_top.webp) center/300px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(94vw,400px);margin:10px 0;overflow:auto;flex:1;align-content:start}
.card{background:url(assets/shop_card_frame.webp) center/100% 100%;aspect-ratio:3/4;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;box-sizing:border-box;text-align:center;gap:2px}
.card .ic{width:58px;height:58px;display:grid;place-items:center}
.card b{font-size:16px;color:#5a2410;line-height:1.7}
.card small{font-size:12px;color:#6b3a1f;line-height:1.6;min-height:38px}
.card button{border:none;background:#2f8f8a;color:#fff;font:900 14px 'Vazirmatn';border-radius:14px;padding:6px 14px;cursor:pointer;display:flex;gap:4px;align-items:center}
.card button img{width:18px}
.card button:disabled{background:#9c8270}
/* hud */
#hud2{position:fixed;top:calc(8px + env(safe-area-inset-top));inset-inline:8px;z-index:20;height:62px;display:flex;align-items:center;gap:8px;direction:rtl}
.hbar{flex:1;height:58px;background:url(assets/hud_bar_frame.webp) center/100% 100%;display:flex;align-items:center;justify-content:space-around;padding:0 16px;color:#fff3df;font-weight:900;font-size:16px;text-shadow:0 1px 2px #000a;min-width:0}
.hbar span{display:flex;align-items:center;gap:3px;white-space:nowrap}
.hbar img{width:24px;height:24px}
#hearts img{width:20px;height:20px}
#toast{position:fixed;bottom:calc(26px + env(safe-area-inset-bottom));inset-inline:16px;z-index:25;text-align:center;pointer-events:none}
#toast div{display:inline-block;background:#fff1d9ee;color:#5a2410;font-weight:700;padding:8px 18px;border-radius:18px;box-shadow:0 4px 0 #b06b36;font-size:16px;line-height:1.7;transition:opacity .3s,transform .3s}
#toast div.off{opacity:0;transform:translateY(20px)}
.alert{position:fixed;inset:0;pointer-events:none;z-index:19;box-shadow:inset 0 0 0 0 #e33;transition:box-shadow .15s}
#loading .bar{width:220px;height:14px;border-radius:8px;background:#5a2f17;overflow:hidden;margin-top:20px}
#loading .bar i{display:block;height:100%;width:0;background:#f2b134;transition:width .2s}