*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#0b0d22;font-family:Vazirmatn,sans-serif;color:#fff3d6;user-select:none;touch-action:none}
#cv{position:fixed;inset:0;width:100vw;height:100vh;display:block}
.hidden{display:none!important}
.screen{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;background-size:cover;background-position:center;padding:env(safe-area-inset-top) 16px env(safe-area-inset-bottom)}
.sky{background:url(./assets/bg_starry_sky.webp) center/cover,#0b0d22}
#loading{justify-content:center;gap:18px}
.logo{width:min(46vw,220px);filter:drop-shadow(0 0 24px #ffb84d88);animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
.bar{width:min(70vw,300px);height:14px;border-radius:9px;background:#0006;border:1px solid #f5c26b88;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffde8a,#f08a24);box-shadow:0 0 12px #ffb84d}
#menu{justify-content:space-between;padding-top:calc(env(safe-area-inset-top) + 40px);padding-bottom:calc(env(safe-area-inset-bottom) + 50px)}
#menu::before{content:"";position:absolute;inset:0;background:linear-gradient(#0b0d2299,transparent 40%,transparent 60%,#0b0d22cc);pointer-events:none}
.menuTop,.menuBtns{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
h1{margin:0;font-size:clamp(28px,8vw,44px);font-weight:900;color:#ffe2a0;text-shadow:0 3px 0 #6b2f0f,0 0 24px #ffb84d88;line-height:1.7}
.sub{margin:0;opacity:.9;line-height:1.8}
.btn{font-family:inherit;font-weight:800;font-size:19px;color:#4a1e05;min-width:220px;min-height:62px;padding:0 26px;border:none;cursor:pointer;background:linear-gradient(#ffe39a,#f2a63c 60%,#c8701c);border:2px solid #fff0c4;border-radius:22px;box-shadow:inset 0 -4px 0 #9a4d10;filter:drop-shadow(0 6px 10px #0008);transition:transform .12s}
.btn:active{transform:scale(.94)}
.btn.big{min-width:260px;min-height:74px;font-size:24px}
.btn.ghost{background:#1b1636cc;color:#ffe2a0;border:2px solid #f5c26b88;border-radius:18px;min-height:50px;font-size:16px}
.topbar{position:relative;width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px}
.pill{display:flex;align-items:center;gap:6px;background:#140f2bcc;border:1.5px solid #f5c26b99;border-radius:999px;padding:6px 14px;font-family:inherit;font-weight:700;font-size:15px;color:#ffe9b8;cursor:pointer}
.pill img{width:24px;height:24px}
.mapTitle{margin:10px 0 0;color:#ffe2a0;text-shadow:0 2px 6px #000;font-size:26px}
#nodes{position:relative;flex:1;width:100%;max-width:520px}
.node{position:absolute;transform:translate(50%,-50%);width:74px;height:74px;border-radius:50%;border:3px solid #ffd27a;background:radial-gradient(#ffcf6b,#c46a17);box-shadow:0 0 18px #ffb84d,0 6px 10px #000a;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:900;font-size:24px;color:#4a1e05;cursor:pointer;font-family:inherit}
.node.locked{background:radial-gradient(#4b4766,#221d3d);border-color:#77708f;box-shadow:0 4px 8px #000a;color:#aaa}
.node.locked img.lk{width:38px}
.node .ns{position:absolute;bottom:-20px;display:flex}
.node .ns img{width:22px}
.node .nn{position:absolute;top:-30px;white-space:nowrap;font-size:13px;color:#ffe9b8;text-shadow:0 1px 4px #000;font-weight:700}
.node.cur{animation:pulse 1.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 34px #ffe08a,0 6px 10px #000a}}
.shopPanel{position:relative;margin-top:14px;width:min(100%,460px);flex:1;max-height:calc(100% - 90px);background:url(./assets/panel_shop.webp) center/100% 100%;padding:60px 34px 40px;display:flex;flex-direction:column;align-items:center}
.shopPanel h2{margin:0;color:#ffe2a0}
.tabs{display:flex;gap:8px;margin:8px 0}
.tabs button{font-family:inherit;font-weight:700;padding:6px 18px;border-radius:999px;border:1.5px solid #f5c26b88;background:#140f2b;color:#ffe9b8;cursor:pointer}
.tabs .on{background:#f5b84a;color:#4a1e05}
#shopList{width:100%;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:4px}
.item{display:flex;align-items:center;gap:10px;background:#140f2bd9;border:1px solid #f5c26b55;border-radius:16px;padding:10px}
.item .sw{width:52px;height:52px;flex:none;border-radius:12px;background:#0006 center/80% no-repeat}
.item .tx{flex:1;min-width:0;line-height:1.7}
.item .tx b{display:block}.item .tx small{opacity:.75}
.item button{font-family:inherit;font-weight:800;border:none;border-radius:12px;padding:8px 12px;background:#f5b84a;color:#4a1e05;cursor:pointer;min-width:78px}
.item button.eq{background:#3d8a6a;color:#fff}
.item button:disabled{opacity:.5}
#hud{position:fixed;inset:0;z-index:5;pointer-events:none}
.hudRow{position:absolute;top:calc(env(safe-area-inset-top) + 10px);inset-inline:8px;display:flex;gap:6px;justify-content:space-between;align-items:center}
.hudRow .pill{padding:4px 10px;font-size:14px;cursor:default}
#bPause{pointer-events:auto;width:46px;height:46px;border:none;background:none;padding:0;cursor:pointer}
#bPause img{width:100%}
#toast{position:absolute;top:22%;width:100%;text-align:center;font-size:26px;font-weight:900;color:#ffe08a;text-shadow:0 0 16px #ff9d2e,0 2px 0 #6b2f0f;opacity:0;transition:opacity .3s,transform .3s}
#tut{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 70px);width:100%;text-align:center}
#tut p{display:inline-block;margin:0 16px;background:#140f2bd9;border:1px solid #f5c26b88;border-radius:16px;padding:8px 16px;line-height:1.8}
.hand{width:46px;height:46px;margin:0 auto 10px;border-radius:50%;background:radial-gradient(#fff,#ffd27a88 60%,transparent 70%);animation:swipe 1.6s ease-in-out infinite}
@keyframes swipe{0%{transform:translateX(40px);opacity:0}20%{opacity:1}80%{transform:translateX(-40px);opacity:1}100%{opacity:0}}
.overlay{position:fixed;inset:0;z-index:20;background:#05061299;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.card{width:min(92vw,400px);aspect-ratio:1;background:center/100% 100% no-repeat;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:40px;animation:pop .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.card h2{margin:0;font-size:24px;color:#ffe2a0;text-shadow:0 2px 0 #4a1e05;line-height:1.7;text-align:center}
.card .btn{min-width:190px;min-height:52px;font-size:17px}
.card .btn.ghost{min-height:42px}
.card p{margin:0;line-height:1.8;text-align:center}
.stars{display:flex;gap:4px}.stars img{width:56px;animation:pop .4s backwards}
.stars img:nth-child(2){animation-delay:.15s}.stars img:nth-child(3){animation-delay:.3s}