*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:#1a2440;font-family:Vazirmatn,sans-serif;color:#fff;user-select:none;-webkit-user-select:none;touch-action:none}
#app{position:fixed;inset:0;overflow:hidden}
#cv{position:absolute;inset:0;display:block;touch-action:none}
.hidden{display:none!important}
button{font-family:inherit;border:none;cursor:pointer;color:#fff}

/* shared */
.coinpill{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(#22345e,#16223f);border:2px solid #0d1630;border-radius:999px;padding:2px 14px 2px 4px;box-shadow:inset 0 2px 0 rgba(255,255,255,.15),0 3px 0 rgba(0,0,0,.35);font-weight:900;font-size:18px;direction:ltr;min-width:76px}
.coinpill img{width:30px;height:30px}
.coinpill.center{align-self:center}
.coinpill.big{font-size:24px}
.roundbtn{width:46px;height:46px;border-radius:50%;background:linear-gradient(#4f86e6,#2B4C8C);border:3px solid #13285a;box-shadow:inset 0 3px 0 rgba(255,255,255,.3),0 4px 0 rgba(0,0,0,.35);display:grid;place-items:center;position:relative;transition:transform .1s}
.roundbtn img{width:30px;height:30px}
.roundbtn:active{transform:scale(.9)}
.roundbtn.muted::after{content:"";position:absolute;width:34px;height:4px;background:#ff4545;border-radius:3px;transform:rotate(-45deg);box-shadow:0 0 0 2px #5a0d0d}

/* menu */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:stretch;padding:calc(env(safe-area-inset-top) + 10px) 14px calc(env(safe-area-inset-bottom) + 14px);gap:clamp(6px,1.2vh,12px);background:#2a3560 url(./assets/menu_bg.webp) center/cover no-repeat}
.screen::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(10,15,40,.15),rgba(10,15,40,.05) 40%,rgba(10,15,40,.45));pointer-events:none}
.screen>*{position:relative;max-width:480px;width:100%;margin-inline:auto}
.topbar{display:flex;justify-content:space-between;align-items:center;direction:ltr}
.logo{display:flex;flex-direction:column;align-items:center;margin-top:-4px}
.logo img{height:clamp(64px,12vh,120px);width:auto;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4));animation:bob 2.4s ease-in-out infinite}
.logo .title{font-family:Lalezar,Vazirmatn,sans-serif;font-size:clamp(34px,5.6vh,50px);line-height:1.2;color:#FFC72C;margin-top:-10px;text-shadow:0 3px 0 #8a4b0e,0 -2px 0 #3a1f05,2px 0 0 #3a1f05,-2px 0 0 #3a1f05,0 5px 0 #3a1f05,0 8px 10px rgba(0,0,0,.45)}
@keyframes bob{50%{transform:translateY(-5px)}}

#worlds{display:flex;flex-direction:column;gap:clamp(12px,2.2vh,20px);flex:1;justify-content:center;min-height:0;padding-top:8px}
.world{position:relative;border-radius:16px;padding:clamp(16px,2.6vh,22px) 10px clamp(10px,1.6vh,14px);border:3px solid rgba(0,0,0,.45);box-shadow:inset 0 3px 0 rgba(255,255,255,.22),inset 0 -4px 0 rgba(0,0,0,.25),0 5px 0 rgba(0,0,0,.35)}
.world.w0{background:linear-gradient(#3d68bf,#2B4C8C 60%,#223e75)}
.world.w1{background:linear-gradient(#e0a352,#C28232 60%,#9a6020)}
.world.w2{background:linear-gradient(#6545a8,#4A2E80 60%,#3a2266)}
.world.locked{filter:saturate(.75) brightness(.85)}
.wtab{position:absolute;top:-13px;inset-inline-start:12px;background:linear-gradient(#ffe07a,#FFC72C 55%,#e09a12);color:#3a2004;font-weight:900;font-size:15px;line-height:1.7;padding:0 14px;border-radius:9px;border:2px solid #6b3e05;box-shadow:0 3px 0 rgba(0,0,0,.3)}
.nodes{display:flex;align-items:center;justify-content:space-between;gap:2px;position:relative}
.nodes::before{content:"";position:absolute;inset-inline:20px;top:50%;border-top:3px dotted rgba(255,255,255,.45);transform:translateY(-50%)}
.node{position:relative;width:clamp(42px,12vw,54px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 35%,#3a4f78,#1d2a48);border:3px solid #8796b3;box-shadow:inset 0 -3px 0 rgba(0,0,0,.35),0 3px 0 rgba(0,0,0,.35);display:grid;place-items:center;font-weight:900;font-size:20px;color:#fff;transition:transform .12s}
.node img.lock{width:55%;height:55%;opacity:.9}
.node.open{background:radial-gradient(circle at 50% 35%,#5a7bc0,#253a6a);border-color:#dfe7ff;cursor:pointer}
.node.done{border-color:#7fe08f}
.node.sel{border-color:#FFC72C;box-shadow:0 0 0 3px rgba(255,199,44,.45),0 0 16px rgba(255,199,44,.8),0 3px 0 rgba(0,0,0,.35);animation:pulse 1.2s ease-in-out infinite}
.node:active{transform:scale(.9)}
@keyframes pulse{50%{transform:scale(1.08)}}
.node.boss{width:clamp(54px,15vw,66px);background:#14141f;overflow:hidden;border-color:#5b5b6b}
.node.boss img.bimg{width:120%;height:120%;object-fit:cover;filter:grayscale(1) brightness(.35)}
.node.boss.open{border-color:#ff5a4a}
.node.boss.open img.bimg{filter:none}
.node.boss img.lock{position:absolute;width:45%;height:45%}
.nstars{position:absolute;bottom:-11px;left:50%;transform:translateX(-50%);display:flex;gap:0;direction:ltr}
.nstars i{width:12px;height:12px;background:#2a2a3a;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.nstars i.on{background:#FFC72C}

.btns{display:flex;flex-direction:column;gap:10px;align-items:center}
.btn{display:flex;flex-direction:column;align-items:center;justify-content:center;width:86%;border-radius:18px;border:3px solid rgba(0,0,0,.5);font-weight:900;text-shadow:0 2px 0 rgba(0,0,0,.45);transition:transform .1s;line-height:1.5}
.btn:active{transform:scale(.94)}
.btn.green{background:linear-gradient(#7af08a,#38C154 50%,#25953b);border-color:#155e24;box-shadow:inset 0 4px 0 rgba(255,255,255,.35),inset 0 -5px 0 rgba(0,0,0,.2),0 6px 0 #0f4a1b,0 10px 14px rgba(0,0,0,.35)}
.btn.blue{background:linear-gradient(#6ea2ff,#3a6fe0 50%,#2850b8);border-color:#14306e;box-shadow:inset 0 4px 0 rgba(255,255,255,.3),inset 0 -5px 0 rgba(0,0,0,.2),0 5px 0 #0f2558,0 8px 12px rgba(0,0,0,.3)}
.btn.purple{background:linear-gradient(#8f6ad8,#4A2E80);border-color:#2a1650;box-shadow:inset 0 4px 0 rgba(255,255,255,.25),0 5px 0 #1e0f3c}
.btn.gold{background:linear-gradient(#f4c06a,#C28232);border-color:#6a400e;box-shadow:inset 0 4px 0 rgba(255,255,255,.3),0 5px 0 #5a360c}
#playBtn{height:clamp(66px,10vh,84px);animation:breathe 1.6s ease-in-out infinite}
#playBtn b{font-size:clamp(28px,4.4vh,36px);line-height:1.2}
#playBtn small{font-size:13px;font-weight:700;opacity:.95}
#upBtn{height:clamp(48px,6.6vh,56px);font-size:20px;flex-direction:row;gap:8px}
@keyframes breathe{50%{transform:scale(1.035)}}
.btn.small{width:100%;height:52px;font-size:19px;margin-top:10px}

/* modals */
.modal{position:absolute;inset:0;background:rgba(8,12,30,.62);display:grid;place-items:center;z-index:30;padding:20px}
.card{position:relative;width:min(340px,92vw);background:linear-gradient(#3d68bf,#2B4C8C 55%,#203a70);border:4px solid #0f1f45;border-radius:22px;padding:42px 18px 20px;display:flex;flex-direction:column;box-shadow:inset 0 4px 0 rgba(255,255,255,.2),0 10px 0 rgba(0,0,0,.35);animation:pop .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.5);opacity:0}}
.ribbon{position:absolute;top:-24px;left:50%;transform:translateX(-50%);white-space:nowrap;background:linear-gradient(#ffe07a,#FFC72C 55%,#e09a12);color:#3a2004;font-family:Lalezar,Vazirmatn;font-size:30px;line-height:1.6;padding:0 30px;border-radius:14px;border:3px solid #6b3e05;box-shadow:0 4px 0 rgba(0,0,0,.35)}
.ribbon.lose{background:linear-gradient(#ff8a7a,#e04a3a 55%,#a82a20);color:#fff;border-color:#5a0f0a}
.stars{display:flex;justify-content:center;gap:6px;direction:ltr;margin:4px 0 8px}
.stars i{width:62px;height:62px;background:#1a2550;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);transform:scale(.3);opacity:.6;transition:transform .35s cubic-bezier(.2,1.8,.4,1),opacity .2s}
.stars i:nth-child(2){transform:translateY(-10px) scale(.3)}
.stars i.show{transform:scale(1);opacity:1}
.stars i:nth-child(2).show{transform:translateY(-10px) scale(1.12)}
.stars i.on{background:linear-gradient(#fff2a8,#FFC72C 50%,#e08a10)}
.resline{text-align:center;font-size:16px;line-height:1.8;margin-bottom:8px;opacity:.95}
#upList{display:flex;flex-direction:column;gap:10px;margin:14px 0 4px}
.uprow{display:flex;align-items:center;gap:10px;background:rgba(10,20,50,.45);border:2px solid rgba(0,0,0,.35);border-radius:14px;padding:8px}
.uprow .ic{width:48px;height:48px;border-radius:12px;background:linear-gradient(#4A2E80,#2a1a50);display:grid;place-items:center;flex:none}
.uprow .ic img{width:42px;height:42px;object-fit:contain}
.uprow .tx{flex:1;min-width:0;line-height:1.6}
.uprow .tx b{display:block;font-size:15px}
.uprow .tx small{font-size:12px;opacity:.8}
.uprow button{flex:none;min-width:84px;height:44px;border-radius:12px;background:linear-gradient(#7af08a,#38C154 50%,#25953b);border:2px solid #155e24;font-weight:900;font-size:16px;display:flex;align-items:center;justify-content:center;gap:4px;box-shadow:0 3px 0 #0f4a1b;direction:ltr}
.uprow button img{width:20px;height:20px}
.uprow button:disabled{filter:grayscale(.9) brightness(.8);cursor:default}
.uprow button:active:not(:disabled){transform:scale(.92)}

/* hud */
#hud{position:absolute;inset:0;pointer-events:none;z-index:10}
.hudtop{position:absolute;top:calc(env(safe-area-inset-top) + 10px);inset-inline:12px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.hudtop>*{pointer-events:auto}
.lvlbox{flex:1;max-width:200px;text-align:center;pointer-events:none}
#lvlLabel{font-weight:900;font-size:17px;line-height:1.6;text-shadow:0 2px 0 #13285a,0 0 6px rgba(0,0,0,.6)}
.prog{height:12px;border-radius:8px;background:#16223f;border:2px solid #0d1630;overflow:hidden;direction:rtl}
.prog i{display:block;height:100%;width:0;background:linear-gradient(#ffe07a,#FFC72C);border-radius:6px}
#bossBar{position:absolute;top:calc(env(safe-area-inset-top) + 66px);left:50%;transform:translateX(-50%);width:min(300px,78vw);display:flex;align-items:center;gap:8px;animation:pop .3s}
#bossBar span{font-weight:900;color:#ffd0c8;text-shadow:0 2px 0 #5a0f0a}
#bossBar .bb{flex:1;height:16px;border-radius:9px;background:#2a0f12;border:2px solid #120406;overflow:hidden;direction:rtl}
#bossBar i{display:block;height:100%;width:100%;background:linear-gradient(#ff8a7a,#e0302a);transition:width .1s}
#hint{position:absolute;bottom:18%;left:50%;transform:translateX(-50%);text-align:center;font-weight:900;font-size:17px;line-height:1.8;text-shadow:0 2px 0 #13285a,0 0 8px #000;width:90%}
#hint .hand{width:44px;height:44px;margin:0 auto 6px;border-radius:50%;background:radial-gradient(#fff,#ffe9b0 60%,transparent 62%);box-shadow:0 0 0 6px rgba(255,255,255,.25);animation:swipe 1.3s ease-in-out infinite}
@keyframes swipe{0%,100%{transform:translateX(-70px)}50%{transform:translateX(70px)}}
#loading{position:absolute;inset:0;display:grid;place-items:center;background:#1a2440;z-index:50;font-size:18px}