@font-face{font-family:Vazirmatn;src:local('Vazirmatn')}
html,body{margin:0;height:100%;overflow:hidden;background:#3b3128;font-family:Vazirmatn,sans-serif;color:#2a2018;touch-action:none;user-select:none;-webkit-user-select:none}
body #game-root,#startBtn,#retryBtn,#hud,#dpad,#dpad-action{display:none!important}
#app{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);overflow:hidden;background:#efe3c8}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;z-index:5}
.scr.off{display:none}
.bgimg{background-size:cover;background-position:center}
.btn{position:relative;border:none;background:url(assets/btn_primary.webp) center/100% 100% no-repeat;width:210px;height:96px;font:800 24px Vazirmatn,sans-serif;color:#fff6e0;text-shadow:0 2px 0 #4a1a10,0 0 6px #000;cursor:pointer;transition:transform .12s;padding-bottom:6px}
.btn:active{transform:scale(.93)}
.btn.sm{width:160px;height:72px;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;padding:0}
.ibtn img{width:60%;height:60%}
.ibtn span{font:800 22px Vazirmatn;color:#fff6e0;text-shadow:0 1px 2px #000}
h1.logo{margin:0;font:900 44px Vazirmatn,sans-serif;color:#7a1d12;text-shadow:0 3px 0 #f6e7c6,0 5px 10px rgba(0,0,0,.35);line-height:1.6}
.sub{font-size:15px;color:#4a3a2a;line-height:1.8;text-align:center;padding:0 24px;font-weight:600}
.coinbar{display:flex;align-items:center;gap:6px;background:rgba(40,28,18,.7);color:#ffd970;border-radius:999px;padding:2px 14px 2px 6px;font-weight:800;font-size:18px}
.coinbar img{width:30px;height:30px}
.topbar{position:absolute;top:max(14px,env(safe-area-inset-top));inset-inline:14px;display:flex;justify-content:space-between;align-items:center;z-index:3}
/* map */
#map .node{position:absolute;width:74px;height:74px;transform:translate(-50%,-50%);border:none;background:center/100% 100% no-repeat;cursor:pointer;font:900 24px Vazirmatn;color:#fff7e0;text-shadow:0 2px 3px #000;padding:0}
#map .node .stars{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);display:flex;gap:0}
#map .node .stars img{width:22px;height:22px}
#map .node .nm{position:absolute;top:70px;left:50%;transform:translateX(-50%);white-space:nowrap;font:700 13px Vazirmatn;color:#3a2614;text-shadow:0 0 4px #f5e6c8,0 0 4px #f5e6c8}
#map .node.cur{animation:pulse 1.2s infinite}
@keyframes pulse{50%{transform:translate(-50%,-50%) scale(1.1)}}
/* panels */
.modal{position:absolute;inset:0;background:rgba(30,20,12,.55);display:flex;align-items:center;justify-content:center;z-index:20}
.modal.off{display:none}
.panel{width:min(92%,360px);aspect-ratio:1/1.12;background:url(assets/panel_frame.webp) center/100% 100% no-repeat;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:40px 30px;box-sizing:border-box;animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:scale(.5);opacity:0}}
.panel h2{margin:0;font:900 28px Vazirmatn;color:#7a1d12;line-height:1.7}
.panel p{margin:0;font-size:15px;font-weight:600;color:#3a2a1a;line-height:1.8;text-align:center}
.stars3{display:flex;gap:4px;align-items:flex-end}
.stars3 img{width:62px;height:62px;opacity:0;transform:scale(0);transition:all .35s cubic-bezier(.3,1.8,.5,1)}
.stars3 img:nth-child(2){width:78px;height:78px}
.stars3 img.in{opacity:1;transform:scale(1)}
/* hud */
#hudx{position:absolute;top:max(10px,env(safe-area-inset-top));inset-inline:8px;z-index:6;display:flex;align-items:center;gap:6px;pointer-events:none}
#hudx .bar{flex:1;height:54px;background:rgba(58,38,20,.82);border:2px solid #c9a35a;border-radius:16px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;box-sizing:border-box;min-width:0}
#hearts{display:flex;gap:1px}#hearts img{width:26px;height:26px}#hearts img.lost{filter:grayscale(1) opacity(.35)}
#score{font:900 20px Vazirmatn;color:#fff3d6;text-shadow:0 2px 2px #000}
#hudx .ibtn{pointer-events:auto}
#prog{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 68px);inset-inline:30px;height:10px;background:rgba(60,40,20,.35);border-radius:9px;z-index:6;overflow:hidden;border:1.5px solid #3a2614}
#prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#a3261a,#e0602e);transition:width .25s}
#tut{position:absolute;top:30%;inset-inline:20px;text-align:center;font:800 21px Vazirmatn;color:#3a1a0e;text-shadow:0 0 8px #f6e8cc,0 0 4px #f6e8cc;z-index:6;pointer-events:none;line-height:1.8;transition:opacity .3s}
#banner{position:absolute;top:40%;width:100%;text-align:center;font:900 34px Vazirmatn;color:#8a1d12;text-shadow:0 0 10px #f6e8cc;z-index:6;pointer-events:none;opacity:0;transition:opacity .4s}
/* shop */
#shopGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 14px;width:100%;box-sizing:border-box;max-width:420px;margin-top:96px}
.card{background:url(assets/shop_item_card.webp) center/100% 100% no-repeat;aspect-ratio:2/2.7;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 14px;box-sizing:border-box;text-align:center;min-width:0}
.card b{font:900 17px Vazirmatn;color:#5a1a10;line-height:1.6}
.card small{font-size:12px;color:#3a2a1a;line-height:1.6;font-weight:600;overflow-wrap:anywhere;min-height:38px}
.card .ic{width:58px;height:58px;margin-bottom:2px}
.card button{margin-top:6px;border:none;border-radius:12px;background:#8a2416;color:#fff3d6;font:800 14px Vazirmatn;padding:6px 12px;cursor:pointer;display:flex;align-items:center;gap:4px}
.card button img{width:20px;height:20px}
.card button.own{background:#3d6a5a}
.card button:disabled{opacity:.5}
.toast{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);background:#3a2614;color:#ffe9b8;padding:8px 18px;border-radius:12px;font-weight:700;z-index:30;transition:opacity .3s}
#loading .barw{width:60%;height:12px;border:2px solid #3a2614;border-radius:9px;margin-top:20px;overflow:hidden}
#loading .barw i{display:block;height:100%;width:0;background:#8a2416}