*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#3b2216;font-family:'Vazirmatn',sans-serif;color:#fff8ec;user-select:none;-webkit-user-select:none}
#game-root,#startBtn,#retryBtn,#hud,#dpad,#dpad-action{display:none!important}
#cv{position:fixed;inset:0;width:100vw;height:100vh;display:block;touch-action:none}
.scr{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;z-index:10;line-height:1.8}
.scr.off{display:none}
.bgimg{background-size:cover;background-position:center}
.btn{position:relative;border:none;cursor:pointer;font-family:inherit;font-weight:900;font-size:22px;color:#4a2208;min-width:190px;min-height:64px;padding:6px 26px 12px;background:url(./assets/btn_primary.webp) center/100% 100% no-repeat;filter:drop-shadow(0 5px 0 rgba(60,25,8,.45));transition:transform .12s}
.btn.sec{background-image:url(./assets/btn_secondary.webp);color:#fff;font-size:18px;min-width:150px;min-height:54px}
.btn:active{transform:scale(.93)}
.btn:hover{transform:translateY(-2px)}
#title .logo{width:min(82vw,420px);margin-top:9vh;animation:bob 2.6s ease-in-out infinite;filter:drop-shadow(0 10px 10px rgba(0,0,0,.4))}
#title h1{margin:-10px 0 4px;font-size:44px;font-weight:900;color:#fff3d6;text-shadow:0 4px 0 #7a3a12,0 7px 12px rgba(0,0,0,.5)}
#title p{margin:0 0 22px;font-size:16px;background:rgba(60,28,10,.55);padding:2px 16px;border-radius:20px}
.col{display:flex;flex-direction:column;gap:12px;align-items:center}
@keyframes bob{50%{transform:translateY(-10px) rotate(-2deg)}}
.topbar{width:100%;display:flex;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top) + 12px) 14px 8px;gap:8px}
.pill{display:flex;align-items:center;gap:6px;background:rgba(58,26,10,.72);border:3px solid #f3c77d;border-radius:30px;padding:2px 14px 2px 8px;font-weight:900;font-size:18px;min-height:42px}
.pill img{width:30px;height:30px}
.ico{width:52px;height:52px;border:none;background:none;padding:0;cursor:pointer}
.ico img{width:100%;height:100%}
.ico:active{transform:scale(.9)}
h2{margin:0;font-size:26px;font-weight:900;text-shadow:0 3px 0 #6b300e}
#map,#shop{box-shadow:inset 0 0 0 100vmax rgba(60,28,10,.35)}
#map .path{position:relative;flex:1;width:100%;max-width:480px;overflow-y:auto;overflow-x:hidden}
.node{position:absolute;width:84px;height:84px;transform:translate(-50%,-50%);background:url(./assets/level_node.webp) center/contain no-repeat;border:none;cursor:pointer;font-family:inherit;font-weight:900;font-size:26px;color:#5a2508;display:flex;align-items:center;justify-content:center;padding-bottom:6px;filter:drop-shadow(0 6px 4px rgba(0,0,0,.4))}
.node.lock{filter:grayscale(.8) brightness(.75) drop-shadow(0 6px 4px rgba(0,0,0,.4))}
.node.lock img.lk{width:42px}
.node.cur{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{transform:translate(-50%,-50%) scale(1.1)}}
.node .st{position:absolute;bottom:-14px;display:flex;gap:0}
.node .st img{width:24px}
.node .st img.no{filter:grayscale(1) brightness(.5);opacity:.7}
.node .nm{position:absolute;top:-24px;white-space:nowrap;font-size:13px;color:#fff;background:rgba(60,26,8,.75);border-radius:10px;padding:0 8px}
svg.trail{position:absolute;inset:0;pointer-events:none}
.panel{position:relative;width:min(92vw,380px);padding:46px 30px 36px;background:url(./assets/panel_frame.webp) center/100% 100% no-repeat;display:flex;flex-direction:column;align-items:center;gap:12px;color:#4a2208;text-align:center}
.panel h3{margin:0;font-size:26px;font-weight:900}
.dim{background:rgba(30,12,4,.62);justify-content:center;backdrop-filter:blur(3px)}
.stars{display:flex;gap:6px;align-items:flex-end}
.stars img{width:62px;transform:scale(0);transition:transform .4s cubic-bezier(.3,1.8,.5,1)}
.stars img:nth-child(2){width:78px}
.stars img.on{transform:scale(1)}
.stars img.no{filter:grayscale(1) brightness(.6);transform:scale(1)}
.reward{display:flex;align-items:center;gap:6px;font-size:22px;font-weight:900}
.reward img{width:34px}
#shop .list{width:100%;max-width:440px;padding:10px 16px;display:grid;gap:12px;overflow-y:auto}
.item{display:flex;align-items:center;gap:12px;background:rgba(255,240,215,.94);color:#4a2208;border-radius:22px;padding:10px 14px;border:4px solid #c9873f;box-shadow:0 6px 0 #7a3e14}
.item canvas{width:64px;height:64px;flex:none;background:#f5d9ad;border-radius:16px}
.item .tx{flex:1;min-width:0}
.item b{display:block;font-size:18px}
.item small{font-size:13px;opacity:.8}
.item .buy{min-width:96px;min-height:46px;font-size:16px;padding:2px 10px 8px}
#hud2{position:fixed;top:0;inset-inline:0;z-index:5;padding:calc(env(safe-area-inset-top) + 10px) 12px 0;display:flex;flex-direction:column;gap:6px;pointer-events:none}
#hud2 .row{display:flex;justify-content:space-between;align-items:center;gap:6px}
#hud2 .ico{pointer-events:auto}
.hearts{display:flex;gap:2px}.hearts img{width:30px}.hearts img.no{filter:grayscale(1);opacity:.4}
.bar{height:16px;background:rgba(50,22,8,.7);border:3px solid #f3c77d;border-radius:12px;overflow:hidden;position:relative}
.bar i{position:absolute;inset-block:0;inset-inline-start:0;background:linear-gradient(#ffd66b,#f29a2e);border-radius:8px;transition:width .2s}
.bar i.full{background:linear-gradient(#a8f07a,#4fbf3a)}
.barlbl{font-size:13px;font-weight:700;text-shadow:0 2px 2px #000;text-align:center;margin-top:-4px}
#tip{position:fixed;bottom:calc(env(safe-area-inset-bottom) + 70px);inset-inline:16px;z-index:6;text-align:center;font-weight:900;font-size:19px;pointer-events:none;transition:opacity .3s}
#tip span{background:rgba(255,246,228,.95);color:#5a2508;padding:6px 18px;border-radius:20px;border:3px solid #c9873f;display:inline-block}
#hand{position:fixed;z-index:6;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.85);border:4px solid #5a2508;pointer-events:none;animation:swipe 1.6s ease-in-out infinite;bottom:28%;inset-inline-start:45%}
@keyframes swipe{0%{transform:translate(0,0)}50%{transform:translate(-70px,-60px)}100%{transform:translate(0,0)}}
.pop{position:fixed;z-index:7;font-weight:900;font-size:20px;pointer-events:none;color:#fff;text-shadow:0 2px 0 #6b300e,0 0 6px #000;animation:pop .9s ease-out forwards}
@keyframes pop{to{transform:translateY(-50px) scale(1.2);opacity:0}}
#loading{background:#5a3420;justify-content:center;gap:16px}
.cup{width:70px;height:90px;border:5px solid #fff3d6;border-top:none;border-radius:0 0 22px 22px;position:relative;overflow:hidden}
.cup i{position:absolute;bottom:0;inset-inline:0;background:#c8461c;height:0;transition:height .2s}