@import url('https://fonts.googleapis.com/css2?family=Lalezar&family=Vazirmatn:wght@400;700;900&display=swap');
html,body{margin:0;height:100%;overflow:hidden;background:#120c1e;font-family:'Vazirmatn',sans-serif;color:#fff3d6;touch-action:none;user-select:none;-webkit-user-select:none}
#game-root{display:none!important}
#app{position:fixed;inset:0;overflow:hidden}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;z-index:10;background-size:cover;background-position:center;overflow:hidden}
.hidden{display:none!important}
.ttl{font-family:'Lalezar',sans-serif;color:#ffd36b;text-shadow:0 3px 0 #6b2a0c,0 0 18px rgba(255,170,60,.6);line-height:1.5;margin:0;text-align:center}
.btn{font-family:'Lalezar',sans-serif;font-size:24px;color:#3a1505;border:none;background:url(./assets/btn_primary.webp) center/100% 100% no-repeat;min-width:210px;min-height:76px;padding:0 26px 6px;cursor:pointer;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5));transition:transform .12s}
.btn.sec{background-image:url(./assets/btn_secondary.webp);color:#fff3d6;font-size:20px;min-width:170px;min-height:64px}
.btn:active{transform:scale(.94)}
.btn[disabled]{opacity:.45}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
#title{background-image:linear-gradient(180deg,rgba(18,12,30,.2),rgba(18,12,30,.85)),url(./assets/title_bg.webp);justify-content:center;gap:12px}
#title img.logo{width:min(70vw,300px);animation:float 3s ease-in-out infinite;filter:drop-shadow(0 0 30px rgba(255,180,60,.5))}
#title .sub{font-size:17px;opacity:.9;margin-top:-6px}
@keyframes float{50%{transform:translateY(-10px)}}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.topbar{position:absolute;top:max(12px,env(safe-area-inset-top));inset-inline:12px;display:flex;justify-content:space-between;align-items:center;z-index:3}
.chip{display:flex;align-items:center;gap:6px;background:rgba(20,10,5,.7);border:2px solid #c9902f;border-radius:20px;padding:2px 12px;font-weight:900;font-size:17px}
.chip img{width:26px;height:26px}
.ibtn{width:52px;height:52px;border:none;border-radius:50%;background:rgba(20,10,5,.7) center/70% no-repeat;border:2px solid #c9902f;color:#ffd36b;font-size:15px;font-weight:900;font-family:inherit;cursor:pointer}
#map{background-image:url(./assets/world_map_bg.webp)}
#mapScroll{position:absolute;inset:0;overflow-y:auto;padding:80px 0 120px;touch-action:pan-y}
.world{position:relative;margin:10px 14px 26px;padding:12px 10px 18px;border-radius:22px;background:rgba(20,10,5,.55);border:2px solid rgba(201,144,47,.6)}
.world h2{font-family:'Lalezar';color:#ffd36b;margin:0 0 4px;text-align:center;font-weight:400;font-size:26px}
.world p{margin:0 0 8px;text-align:center;font-size:13px;opacity:.85}
.nodes{display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap;gap:4px}
.node{position:relative;width:76px;height:96px;display:flex;flex-direction:column;align-items:center;cursor:pointer;background:none;border:none;color:#fff;font-family:inherit}
.node .disc{width:72px;height:72px;background:url(./assets/map_node_unlocked.webp) center/contain no-repeat;display:grid;place-items:center;font-family:'Lalezar';font-size:24px;color:#3a1505;transition:transform .15s}
.node.locked .disc{background-image:url(./assets/map_node_locked.webp);color:transparent}
.node.boss .disc{width:84px;height:84px;filter:hue-rotate(-30deg) saturate(1.6)}
.node.cur .disc{animation:float 1.4s ease-in-out infinite}
.stars{display:flex;gap:1px}.stars img{width:20px;height:20px}
#mapBottom{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));inset-inline:0;display:flex;justify-content:center;z-index:3}
.panelWrap{position:absolute;inset:0;background:rgba(8,4,14,.72);display:flex;align-items:center;justify-content:center;z-index:30}
.panel{width:min(92vw,420px);min-height:360px;background:url(./assets/pause_panel.webp) center/100% 100% no-repeat;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:46px 34px;box-sizing:border-box;animation:pop .3s cubic-bezier(.3,1.6,.5,1)}
.panel.res{background-image:url(./assets/results_card.webp);min-height:460px}
.panel .ttl{font-size:36px}
.bigStars{display:flex;gap:6px;align-items:flex-end}.bigStars img{width:64px;height:64px;animation:pop .4s backwards}.bigStars img:nth-child(2){width:80px;height:80px}
.stat{font-weight:700;font-size:17px;display:flex;gap:16px}
#shop{background:linear-gradient(rgba(18,12,30,.6),rgba(18,12,30,.9)),url(./assets/title_bg.webp) center/cover}
#shopList{position:absolute;inset:80px 0 0;overflow-y:auto;padding:0 12px 40px;touch-action:pan-y}
.shead{font-family:'Lalezar';color:#ffd36b;font-size:24px;text-align:center;margin:10px 0 4px}
.item{display:flex;align-items:center;gap:10px;background:rgba(20,10,5,.7);border:2px solid rgba(201,144,47,.6);border-radius:16px;padding:8px 10px;margin:8px 0}
.item img{width:62px;height:62px;flex:none}
.item .inf{flex:1;min-width:0}.item b{display:block;font-size:17px}.item small{opacity:.8}
.item .buy{min-width:96px;min-height:46px;font-size:16px;border-radius:12px;border:none;font-family:'Vazirmatn';font-weight:900;background:#f2b134;color:#3a1505;cursor:pointer}
.item .buy.own{background:#3b6b3a;color:#e9ffe0}.item .buy.eq{background:transparent;border:2px solid #9fd88f;color:#9fd88f}
#hud2{position:absolute;inset:0;pointer-events:none;z-index:5}
#hudTop{position:absolute;top:max(10px,env(safe-area-inset-top));inset-inline:10px;display:flex;justify-content:space-between;align-items:center;gap:6px}
#hudTop .grp{display:flex;gap:6px;align-items:center}
#hearts{display:flex;gap:3px}
.hrt{width:22px;height:20px;background:#e8343b;clip-path:path('M11 20 L1 9 A5.5 5.5 0 0 1 11 3 A5.5 5.5 0 0 1 21 9 Z');filter:drop-shadow(0 0 1px #000)}
.hrt.off{background:#4a2a2a}
#pauseB{pointer-events:auto;background-image:url(./assets/icon_pause.webp)}
#bossBar{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 58px);inset-inline:30px;text-align:center;font-family:'Lalezar';font-size:20px;color:#ffb38a}
#bossBar .bar{height:14px;border-radius:8px;background:#2a0d0d;border:2px solid #c9902f;overflow:hidden}
#bossBar .fill{height:100%;background:linear-gradient(90deg,#ff4a2a,#ffb02a);transition:width .2s;margin-inline-start:auto}
#ctrls{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));inset-inline:14px;display:flex;justify-content:space-between;pointer-events:none}
.cb{pointer-events:auto;width:96px;height:96px;border-radius:50%;border:3px solid #ffd36b;background:radial-gradient(circle at 40% 35%,rgba(255,211,107,.45),rgba(60,25,8,.75));color:#fff3d6;font-family:'Lalezar';font-size:21px;touch-action:none;box-shadow:0 6px 14px rgba(0,0,0,.5)}
.cb.sm{width:74px;height:74px;font-size:17px;align-self:flex-end}
.cb.on{transform:scale(.92);background:radial-gradient(circle,rgba(255,211,107,.8),rgba(120,50,10,.8))}
#ctrls .side{display:flex;gap:10px;align-items:flex-end}
#banner{position:absolute;top:28%;inset-inline:0;text-align:center;pointer-events:none;z-index:6}
#banner .ttl{font-size:34px;padding:0 16px}
#banner .q{font-size:17px;margin-top:4px;text-shadow:0 2px 4px #000;padding:0 20px}
#tip{position:absolute;bottom:150px;inset-inline:20px;text-align:center;background:rgba(20,10,5,.75);border-radius:14px;padding:8px 12px;font-size:15px;border:1px solid #c9902f}
#toast{position:absolute;top:120px;inset-inline:0;text-align:center;z-index:40;font-weight:900;pointer-events:none}