:root{--sand:#f3d39c;--sand2:#e8b77a;--orange:#e8742a;--ink:#3a1f12;--night:#1d1230;--deep:#120a1f}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#3b2318;font-family:'Vazirmatn',sans-serif;color:#fff4e0;user-select:none;-webkit-user-select:none}
#cv{position:fixed;inset:0;display:block;touch-action:none}
.hidden{display:none!important}
button{font-family:'Vazirmatn',sans-serif;cursor:pointer}
#flash{position:fixed;inset:0;pointer-events:none;background:#ff3a1a;opacity:0;transition:opacity .25s;z-index:40}

.screen{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;z-index:20;overflow:hidden}
.screen.show{display:flex}
.bgImg{position:absolute;inset:0;background:url(assets/title_bg.webp) center/cover no-repeat;z-index:-1}
.bgImg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,10,31,.15),rgba(18,10,31,.55) 70%,rgba(59,35,24,.9))}
.bgImg.dim{filter:blur(2px) brightness(.55)}

.ttl{font-family:'Lalezar','Vazirmatn',sans-serif;font-weight:400;font-size:clamp(34px,10vw,54px);margin:0;color:var(--sand);text-shadow:0 3px 0 #8a3c12,0 6px 18px rgba(0,0,0,.6);line-height:1.5}
.sub{margin:-6px 0 18px;color:#ffd9a0;font-size:17px;opacity:.9}

#sLoad{background:radial-gradient(circle at 50% 40%,#3d2340,#120a1f);justify-content:center}
.loadWrap{text-align:center;width:min(80vw,340px)}
.bar{height:14px;border-radius:10px;background:rgba(255,255,255,.12);overflow:hidden;margin:18px 0 10px;border:1px solid rgba(243,211,156,.35)}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffb04a,#e8742a);transition:width .2s}
#loadTxt{opacity:.8;font-size:14px}

#sTitle{justify-content:flex-end}
.titleWrap{display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 24px calc(env(safe-area-inset-bottom) + 34px);width:100%;max-width:440px;text-align:center}
.logo{width:min(46vw,210px);filter:drop-shadow(0 8px 20px rgba(0,0,0,.5));animation:float 4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
.btnP{min-height:64px;width:min(78vw,300px);border:none;background:url(assets/btn_primary.webp) center/100% 100% no-repeat;color:#fff8e6;font-size:22px;font-weight:900;text-shadow:0 2px 0 rgba(90,30,5,.8);transition:transform .1s;padding:0 20px 4px}
.btnS{min-height:50px;width:min(70vw,260px);border:2px solid rgba(243,211,156,.6);border-radius:16px;background:rgba(40,20,30,.6);color:var(--sand);font-size:17px;font-weight:700;backdrop-filter:blur(4px);transition:transform .1s}
.btnS.sm{width:auto;min-height:42px;padding:0 14px;font-size:14px}
.btnP:active,.btnS:active{transform:scale(.95)}
.tstats{display:flex;gap:14px;margin-top:6px}
.tstats span,.pill{display:inline-flex;align-items:center;gap:6px;background:rgba(30,15,25,.62);border:1px solid rgba(243,211,156,.35);border-radius:999px;padding:4px 12px 4px 10px;font-weight:700;color:#ffe6b8}
.tstats img,.pill img{width:24px;height:24px}
.snd{background:none;border:none;color:#ffd9a0;opacity:.75;font-size:14px;min-height:40px}

.topbar{position:relative;width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(env(safe-area-inset-top) + 12px) 14px 10px;z-index:2;background:linear-gradient(180deg,rgba(18,10,31,.9),transparent)}
.topbar h2{margin:0;font-family:'Lalezar','Vazirmatn';font-weight:400;font-size:26px;color:var(--sand)}
.botbar{padding:10px 0 calc(env(safe-area-inset-bottom) + 16px);z-index:2;width:100%;display:flex;justify-content:center;background:linear-gradient(0deg,rgba(18,10,31,.9),transparent)}
#mapScroll{flex:1;width:100%;max-width:520px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
#mapScroll::-webkit-scrollbar{display:none}
#mapInner{position:relative;width:100%}
.dot{position:absolute;width:9px;height:9px;margin:0 0 -4px -4px;border-radius:50%;background:#f3d39c;opacity:.55;box-shadow:0 0 6px rgba(255,180,90,.6)}
.dot.dim{background:#6c5a6e;box-shadow:none;opacity:.5}
.node{position:absolute;transform:translate(-50%,50%);background:none;border:none;padding:0;display:flex;flex-direction:column;align-items:center;color:#fff4e0;width:130px}
.node img.n{width:86px;height:86px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.node .num{position:absolute;top:22px;font-size:26px;font-weight:900;color:#fff;text-shadow:0 2px 3px #5a2508}
.node .nm{font-size:13px;font-weight:700;background:rgba(30,15,25,.7);border-radius:10px;padding:1px 10px;margin-top:-4px;white-space:nowrap}
.node .st{display:flex;gap:2px;margin-top:3px}
.node .st img{width:20px;height:20px}
.node.locked{opacity:.8}
.node.locked .nm{opacity:.6}
.node.cur img.n{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.1);filter:drop-shadow(0 0 16px rgba(255,170,60,.9))}}

.tabs{display:flex;gap:8px;z-index:2;margin:4px 0 10px}
.tabs button{min-height:44px;padding:0 22px;border-radius:999px;border:2px solid rgba(243,211,156,.4);background:rgba(30,15,25,.6);color:#ffe6b8;font-size:15px;font-weight:700}
.tabs button.on{background:var(--orange);border-color:#ffc27a;color:#fff}
#shopGrid{flex:1;width:100%;max-width:520px;overflow-y:auto;padding:4px 14px calc(env(safe-area-inset-bottom) + 20px);display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start;z-index:2}
.card{position:relative;background:url(assets/shop_card_frame.webp) center/100% 100% no-repeat;padding:14px 12px 12px;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;border-radius:14px}
.card .prev{width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4))}
.card h3{margin:2px 0 0;font-size:14px;color:#3a1f12;line-height:1.7;overflow-wrap:anywhere}
.card p{margin:0 0 6px;font-size:12px;color:#6b3a1c;line-height:1.7}
.card button{min-height:40px;width:100%;border:none;border-radius:12px;font-size:14px;font-weight:900;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;gap:4px}
.card button img{width:20px;height:20px}
.card button.eq{background:#2f7d55}
.card button.on{background:#5b4a5a;opacity:.85}
.card button.no{background:#8a6a5a;opacity:.7}

.modal{background:rgba(14,8,24,.62);justify-content:center;z-index:30;backdrop-filter:blur(3px)}
.panel{width:min(90vw,380px);aspect-ratio:1/1.15;background:url(assets/panel_frame.webp) center/100% 100% no-repeat;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:13% 12%;text-align:center;animation:pop .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.panel h2{margin:0;font-family:'Lalezar','Vazirmatn';font-weight:400;font-size:30px;color:#ffe2a8;text-shadow:0 2px 0 #6b2a0a;line-height:1.5}
.panel .muted{margin:0;font-size:14px;color:#ffe9c8;opacity:.9;line-height:1.7}
.panel .btnP{width:100%;min-height:56px;font-size:19px}
.panel .btnS{width:100%;min-height:44px;font-size:15px}
.stars{display:flex;gap:4px;align-items:flex-end}
.stars img{width:62px;height:62px;opacity:0;animation:starIn .45s cubic-bezier(.2,1.8,.4,1) forwards}
.stars img:nth-child(2){width:76px;height:76px}
@keyframes starIn{from{transform:scale(0) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}
.rstats{font-size:14px;color:#ffe9c8;line-height:1.8}

#hud{position:fixed;top:calc(env(safe-area-inset-top) + 10px);inset-inline:10px;display:flex;align-items:center;gap:6px;z-index:15;flex-wrap:wrap}
.hbtn{width:46px;height:46px;border:none;background:none;padding:0}
.hbtn img{width:100%;height:100%}
#hud .pill{font-size:15px;padding:3px 10px}
#hud .keys img{opacity:.28;filter:grayscale(1);transition:all .3s}
#hud .keys img.got{opacity:1;filter:none;animation:pop .4s}
#hud .time{flex-direction:column;gap:0;line-height:1.3;padding:2px 12px}
#hud .time small{font-size:10px;opacity:.7}
#banner{position:fixed;top:30%;left:50%;transform:translateX(-50%);z-index:16;text-align:center;display:flex;flex-direction:column;align-items:center;pointer-events:none;background:rgba(25,12,22,.72);border:2px solid rgba(243,211,156,.5);border-radius:20px;padding:12px 26px;animation:bannerA 2.8s forwards;width:max-content;max-width:88vw}
#banner small{color:#ffb15a;font-weight:700}
#banner b{font-family:'Lalezar','Vazirmatn';font-weight:400;font-size:30px;color:var(--sand);line-height:1.5}
#banner span{font-size:14px;opacity:.9}
@keyframes bannerA{0%{opacity:0;transform:translate(-50%,20px)}12%{opacity:1;transform:translate(-50%,0)}80%{opacity:1}100%{opacity:0}}
#toast{position:fixed;bottom:calc(env(safe-area-inset-bottom) + 90px);left:50%;transform:translate(-50%,20px);z-index:17;background:rgba(40,16,16,.85);border:1px solid #ffb15a;color:#ffe2a8;padding:8px 18px;border-radius:14px;font-size:15px;font-weight:700;opacity:0;transition:all .25s;pointer-events:none;max-width:90vw;text-align:center;line-height:1.7}
#toast.on{opacity:1;transform:translate(-50%,0)}
#tut{position:fixed;bottom:calc(env(safe-area-inset-bottom) + 40px);left:50%;transform:translateX(-50%);z-index:16;pointer-events:none;text-align:center;width:min(86vw,340px)}
#tut p{margin:0;background:rgba(25,12,22,.75);border-radius:14px;padding:8px 14px;font-weight:700;line-height:1.7}
#tut .hand{width:44px;height:44px;margin:0 auto 10px;border-radius:50%;background:rgba(255,240,210,.9);box-shadow:0 0 0 8px rgba(255,200,120,.35);animation:swipe 1.6s ease-in-out infinite}
@keyframes swipe{0%{transform:translate(0,0);opacity:0}15%{opacity:1}60%{transform:translate(0,-60px);opacity:1}100%{transform:translate(0,-60px);opacity:0}}