*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#c98a4b;font-family:Vazirmatn,Tahoma,sans-serif;color:#3a1f0e;user-select:none;-webkit-user-select:none}
#cv{position:fixed;inset:0;width:100vw;height:100vh;display:block;touch-action:none}
.hidden{display:none!important}
.screen{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;z-index:10}
.screen.show{display:flex}
.modal{background:rgba(40,18,6,.55);justify-content:center;z-index:30;backdrop-filter:blur(2px)}
button{font-family:inherit}

#loading{background:#2b1609 url(./assets/title_bg.webp) center/cover;justify-content:center;gap:14px;color:#fff3d6;z-index:50}
#loading .logo{width:150px}
#loading .ttl{font-family:Lalezar,Vazirmatn;font-size:42px;text-shadow:0 3px 0 #6b2f0c}
.loadbar{position:relative;width:min(300px,76vw);height:14px;border-radius:9px;background:rgba(0,0,0,.4);border:2px solid #f2c46a}
#loadfill{position:absolute;inset-block:0;inset-inline-start:0;width:0;background:linear-gradient(90deg,#f7d27a,#e08a2c);border-radius:7px}
#loadcamel{position:absolute;top:-34px;inset-inline-start:0;width:46px;transform:translateX(50%)}
.sub{font-size:17px;line-height:1.8;opacity:.95}

#title{background:url(./assets/title_bg.webp) center/cover;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 40px) 20px calc(env(safe-area-inset-bottom) + 40px)}
.titlewrap{display:flex;flex-direction:column;align-items:center;margin-top:3vh}
.titlewrap .logo{width:min(230px,52vw);filter:drop-shadow(0 8px 12px rgba(0,0,0,.35))}
.float{animation:fl 3s ease-in-out infinite}
@keyframes fl{50%{transform:translateY(-10px) rotate(-2deg)}}
h1{font-family:Lalezar,Vazirmatn;font-weight:400;font-size:clamp(46px,13vw,68px);margin:0;line-height:1.3;color:#fff4d4;text-shadow:0 4px 0 #8a3a10,0 8px 18px rgba(0,0,0,.45)}
#title .sub{color:#fff0c8;font-size:20px;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.6)}
.titlebtns{display:flex;flex-direction:column;gap:12px;align-items:center;width:100%}
.tcoins{position:absolute;top:calc(env(safe-area-inset-top) + 14px);inset-inline-start:14px}

.btn{border:none;cursor:pointer;min-height:58px;min-width:230px;padding:0 30px;font-size:21px;font-weight:900;color:#fff8e6;background:center/100% 100% no-repeat;text-shadow:0 2px 0 rgba(0,0,0,.35);transition:transform .12s;line-height:1.7}
.btn:active{transform:scale(.94)}
.btn.primary{background-image:url(./assets/ui_button_primary.webp);min-height:70px;font-size:24px}
.btn.secondary{background-image:url(./assets/ui_button_secondary.webp)}
.btn:disabled{filter:grayscale(.8);opacity:.7}
.iconbtn{width:48px;height:48px;border-radius:14px;border:3px solid #f2c46a;background:#7a3a14;color:#fff3d6;font-size:30px;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}
.iconbtn img{width:34px;height:34px}
.coinpill{display:flex;align-items:center;gap:6px;background:rgba(60,26,8,.75);border:2px solid #f2c46a;border-radius:30px;padding:2px 14px 2px 6px;color:#ffe08a;font-weight:900;font-size:19px;min-height:40px}
.coinpill img{width:30px;height:30px}

.topbar{width:100%;max-width:560px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(env(safe-area-inset-top) + 12px) 14px 10px}
.bartitle{font-family:Lalezar,Vazirmatn;font-size:28px;color:#fff4d4;text-shadow:0 3px 0 #7a3410;flex:1;text-align:center}
#map,#shop{background:linear-gradient(rgba(60,25,5,.35),rgba(60,25,5,.15)),url(./assets/title_bg.webp) center/cover}
.mapscroll{flex:1;width:100%;max-width:560px;overflow-y:auto;overflow-x:hidden;touch-action:pan-y}
.maplist{display:flex;flex-direction:column-reverse;align-items:center;padding:20px 0 30px;position:relative}
.node{position:relative;width:168px;height:150px;border:none;background:url(./assets/map_level_card.webp) center/contain no-repeat;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#4a230b;margin:4px 0;transition:transform .15s}
.node:active{transform:scale(.93)}
.node.l{margin-inline-end:120px}.node.r{margin-inline-start:120px}
.node .nm{font-family:Lalezar,Vazirmatn;font-size:26px;line-height:1.4}
.node .ns{display:flex;gap:2px}.node .ns img{width:24px;height:24px}
.node .lvn{font-size:13px;font-weight:700}
.node.locked{filter:grayscale(.7) brightness(.8)}
.node .lock{position:absolute;width:56px;top:30%}
.node.cur{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.07)}}
.dots{width:6px;height:26px;border-inline-start:6px dotted rgba(255,240,200,.8)}
.mapfoot{padding:8px 0 calc(env(safe-area-inset-bottom) + 18px)}

.shoplist{flex:1;width:100%;max-width:520px;overflow-y:auto;padding:6px 14px 30px;display:flex;flex-direction:column;gap:12px}
.item{display:flex;align-items:center;gap:12px;background:rgba(255,240,205,.93);border:3px solid #c98a3c;border-radius:18px;padding:10px 12px;box-shadow:0 5px 0 #8a4a1a}
.item img.ic{width:64px;height:64px;flex:none}
.item .tx{flex:1;min-width:0}
.item .tt{font-weight:900;font-size:18px;line-height:1.7}
.item .ds{font-size:14px;line-height:1.7;opacity:.85;overflow-wrap:anywhere}
.buy{flex:none;min-width:96px;min-height:48px;border:none;border-radius:14px;background:#e08a2c;color:#fff;font-weight:900;font-size:17px;cursor:pointer;box-shadow:0 4px 0 #8a3d0d;display:flex;align-items:center;justify-content:center;gap:4px;padding:0 10px}
.buy img{width:22px}
.buy.owned{background:#5e9a3a;box-shadow:0 4px 0 #2f5a1a}
.buy:disabled{background:#a58f78;box-shadow:0 4px 0 #6c5b48}
.buy:active{transform:translateY(2px)}

#hud{position:fixed;top:0;inset-inline:0;z-index:15;pointer-events:none;padding:calc(env(safe-area-inset-top) + 10px) 10px 0;display:flex;justify-content:center}
.hudbar{width:100%;max-width:560px;display:flex;align-items:center;gap:10px;background:url(./assets/hud_panel_bar.webp) center/100% 100% no-repeat;padding:8px 14px;min-height:66px}
.hudbar>*{pointer-events:auto}
.pausebtn{background:transparent;border:none}
.pausebtn img{width:44px;height:44px}
.hudmid{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;color:#fff4d4;font-weight:900;font-size:17px;text-shadow:0 2px 0 #5a2508;line-height:1.6}
.prog{position:relative;width:100%;height:10px;background:rgba(0,0,0,.35);border-radius:6px;border:1px solid #f2c46a}
#progFill{position:absolute;inset-block:0;inset-inline-start:0;width:0;background:linear-gradient(90deg,#ffd76a,#ff9b3a);border-radius:6px}
#progDot{position:absolute;top:-5px;inset-inline-end:-6px;width:18px;height:18px;border-radius:50%;background:#b8321c;border:2px solid #fff}

#hint{position:fixed;inset-inline:0;bottom:16vh;z-index:14;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:6px}
.hand{width:56px;height:56px;border-radius:50%;background:radial-gradient(circle,#fff 0 30%,rgba(255,255,255,.4) 32% 60%,transparent 62%);animation:sw 1.6s ease-in-out infinite}
@keyframes sw{0%,100%{transform:translateX(-80px)}50%{transform:translateX(80px)}}
.hinttext{background:rgba(50,20,5,.75);color:#fff4d4;padding:4px 18px;border-radius:20px;font-weight:700;font-size:17px;line-height:1.8}
#banner{position:fixed;top:24%;inset-inline:0;margin:auto;width:max-content;max-width:92vw;z-index:16;pointer-events:none;font-family:Lalezar,Vazirmatn;font-size:clamp(30px,9vw,46px);color:#fff1c9;background:linear-gradient(90deg,transparent,rgba(140,25,10,.9) 15%,rgba(140,25,10,.9) 85%,transparent);padding:4px 50px;text-shadow:0 3px 0 #3a0c02;animation:bn 2.2s ease forwards}
@keyframes bn{0%{transform:scale(2.2);opacity:0}15%{transform:scale(1);opacity:1}80%{opacity:1}100%{opacity:0;transform:scale(.9)}}

.dialog{width:min(380px,92vw);min-height:360px;background:url(./assets/panel_frame_dialog.webp) center/100% 100% no-repeat;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:46px 30px 40px;animation:pop .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:scale(.5);opacity:0}}
.dialog h2{font-family:Lalezar,Vazirmatn;font-weight:400;font-size:34px;margin:0;color:#6b2a08;line-height:1.5;text-align:center}
.dialog .btn{min-width:210px;min-height:54px;font-size:19px}
.dialog .btn.primary{min-height:64px;font-size:22px}
.stars{display:flex;gap:6px;align-items:flex-end}
.stars img{width:64px;height:64px;opacity:0;animation:star .45s cubic-bezier(.2,1.8,.4,1) forwards}
.stars img:nth-child(2){width:80px;height:80px}
@keyframes star{0%{transform:scale(0) rotate(-90deg);opacity:0}100%{transform:scale(1);opacity:1}}
.resline{font-weight:700;font-size:17px;line-height:1.7;text-align:center;color:#4a230b}
.resline.gold{color:#a35a00;font-weight:900;font-size:19px}
#toast{position:fixed;bottom:12vh;inset-inline:0;margin:auto;width:max-content;max-width:90vw;z-index:60;background:rgba(50,20,5,.9);color:#fff4d4;padding:8px 22px;border-radius:20px;font-weight:700;line-height:1.8}