@font-face{font-family:'Vazirmatn';src:local('Vazirmatn');}
html,body{margin:0;height:100%;overflow:hidden;background:#3b2216;font-family:'Vazirmatn',Tahoma,sans-serif;color:#3b2216;touch-action:none;user-select:none;-webkit-user-select:none}
#game-root{position:fixed!important;inset:0;width:100vw!important;max-width:none!important;height:100%;margin:0!important;overflow:hidden}
#game{position:absolute;inset:0}
#game canvas{width:100%!important;height:100%!important;display:block}
#startBtn,#retryBtn,#dpad,#dpad-action,#hud{display:none!important}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;z-index:30;background:url(./assets/menu_bg.webp) center/cover;padding:calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px);box-sizing:border-box;line-height:1.8}
.scr.hidden,.modal.hidden,.hide{display:none!important}
.btn{border:0;cursor:pointer;font-family:inherit;font-weight:900;color:#fff8e8;text-shadow:0 2px 0 #7a3a12;background:url(./assets/button_primary.webp) center/100% 100% no-repeat;width:min(300px,78vw);height:78px;font-size:26px;transition:transform .12s}
.btn:active{transform:scale(.94)}
.btn.sm{background-image:url(./assets/button_secondary.webp);width:140px;height:66px;font-size:19px}
.logo{width:min(330px,80vw);margin-top:4vh;animation:bob 2.4s ease-in-out infinite;filter:drop-shadow(0 10px 10px rgba(60,25,10,.4))}
@keyframes bob{50%{transform:translateY(-10px) rotate(-1.5deg)}}
.title{font-size:40px;font-weight:900;color:#fff4d6;text-shadow:0 4px 0 #a2481c,0 8px 14px rgba(0,0,0,.35);margin:4px 0 0}
.sub{color:#fff4d6;font-weight:700;text-shadow:0 2px 0 #7a3a12;margin:0 0 auto}
.row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.coins{display:flex;align-items:center;gap:6px;background:rgba(59,34,22,.75);color:#ffe28a;font-weight:900;font-size:20px;border-radius:30px;padding:2px 14px 2px 6px}
.coins img{width:34px}
.top{display:flex;width:100%;justify-content:space-between;align-items:center;max-width:520px}
.h2{font-size:28px;font-weight:900;color:#fff4d6;text-shadow:0 3px 0 #a2481c}
.map{flex:1;width:100%;max-width:440px;overflow-y:auto;position:relative;margin:8px 0;touch-action:pan-y}
.node{position:relative;width:76px;height:76px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:center/contain no-repeat;border:0;font-family:inherit;margin:4px auto 18px}
.node .n{font-size:28px;font-weight:900;color:#fff;text-shadow:0 2px 0 #6b2c0c}
.node .nm{position:absolute;top:72px;white-space:nowrap;font-size:13px;font-weight:700;color:#fff4d6;background:rgba(59,34,22,.7);border-radius:10px;padding:0 8px}
.node .st{position:absolute;top:-14px;display:flex}
.node .st img{width:26px}
.node.cur{animation:pulse 1.2s infinite}
@keyframes pulse{50%{transform:scale(1.08)}}
.modal{position:absolute;inset:0;z-index:40;background:rgba(40,20,10,.55);display:flex;align-items:center;justify-content:center}
.panel{width:min(360px,92vw);min-height:380px;background:url(./assets/panel_frame.webp) center/100% 100% no-repeat;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:46px 30px;box-sizing:border-box;text-align:center;animation:pop .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.5);opacity:0}}
.panel h3{margin:0;font-size:30px;font-weight:900;color:#7a3a12}
.panel p{margin:0;font-weight:700;color:#5a2e14}
.stars{display:flex;gap:4px}
.stars img{width:64px;animation:pop .4s backwards}
.stars img:nth-child(2){width:80px;margin-top:-14px;animation-delay:.2s}.stars img:nth-child(3){animation-delay:.4s}
.shop{width:100%;max-width:440px;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;margin-top:10px}
.item{display:flex;align-items:center;gap:10px;background:rgba(255,240,210,.92);border-radius:22px;padding:10px 14px;box-shadow:0 5px 0 #a2481c}
.item .ic{width:52px;height:52px;border-radius:50%;flex:none;box-shadow:inset 0 -5px 0 rgba(0,0,0,.2)}
.item .tx{flex:1;min-width:0}
.item b{display:block;font-size:18px}.item small{display:block;color:#7a4a2a;overflow-wrap:anywhere}
.buy{border:0;border-radius:16px;background:#e2762f;color:#fff;font-family:inherit;font-weight:900;font-size:15px;padding:8px 12px;box-shadow:0 4px 0 #8a3b10;cursor:pointer;white-space:nowrap}
.buy.own{background:#5a9e86;box-shadow:0 4px 0 #2d6150}
.buy:disabled{opacity:.5}
#hud2{position:absolute;top:calc(env(safe-area-inset-top) + 10px);inset-inline:10px;z-index:20;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
#hud2 .grp{display:flex;gap:8px;align-items:center}
#hearts img{width:34px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.3))}#hearts img.off{opacity:.25;filter:grayscale(1)}
#pauseBtn{pointer-events:auto;width:52px;height:52px;border:0;background:url(./assets/icon_pause.webp) center/contain no-repeat;cursor:pointer}
#prog{position:absolute;top:calc(env(safe-area-inset-top) + 70px);inset-inline:20px;height:12px;border-radius:8px;background:rgba(59,34,22,.5);z-index:20;overflow:hidden}
#prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffd35a,#e2762f);border-radius:8px}
#tut{position:absolute;top:30%;inset-inline:0;text-align:center;z-index:21;pointer-events:none;font-size:24px;font-weight:900;color:#fff;text-shadow:0 3px 0 #7a3a12,0 0 12px rgba(0,0,0,.4)}
#tut .hand{font-size:52px;display:block;animation:sw 1s infinite}
.hand{width:46px;height:46px;border-radius:50%;background:#fff4d6;border:4px solid #7a3a12;margin:10px auto;display:block}
@keyframes sw{0%{transform:translateY(var(--a))}100%{transform:translateY(var(--b));opacity:.2}}
#toast{position:absolute;top:22%;inset-inline:0;text-align:center;z-index:21;pointer-events:none;font-size:30px;font-weight:900;color:#ffe28a;text-shadow:0 3px 0 #7a3a12}
#boot{z-index:50;justify-content:center;gap:16px}
#bar{width:70%;max-width:300px;height:16px;border-radius:10px;background:rgba(59,34,22,.6);overflow:hidden}#bar i{display:block;height:100%;width:0;background:#ffd35a;transition:width .2s}