html,body{margin:0;height:100%;overflow:hidden;background:#12030a;font-family:'Vazirmatn',sans-serif;color:#fbe7b5;touch-action:none;user-select:none;-webkit-user-select:none}
#game-root{width:100vw!important;max-width:480px!important;height:100vh;height:100dvh;margin:0 auto;position:relative;overflow:hidden;background:#12030a}
#game,#game canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
#startBtn,#retryBtn,#dpad,#dpad-action,#hud{display:none!important}
.scr{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;box-sizing:border-box;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));background:#12030a url(./assets/title_bg.webp) center/cover;line-height:1.7}
.scr.off{display:none}
.shade::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(40,5,10,.1),rgba(18,3,10,.85));pointer-events:none}
.scr>*{position:relative}
h1,h2{font-family:'Lalezar','Vazirmatn',sans-serif;font-weight:400;margin:0;color:#ffd36b;text-shadow:0 3px 0 #7a1010,0 0 24px rgba(255,170,40,.6)}
h1{font-size:52px}h2{font-size:34px}
.btn{border:0;cursor:pointer;font-family:'Lalezar','Vazirmatn',sans-serif;font-size:24px;color:#ffe9a8;text-shadow:0 2px 0 #5a0a06,0 0 10px #000;background:url(./assets/btn_primary.webp) center/100% 100% no-repeat;min-width:200px;min-height:72px;padding:0 30px 6px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5));transition:transform .12s}
.btn:active{transform:scale(.94)}
.btn.sm{min-width:150px;min-height:58px;font-size:20px}
.ghost{background:rgba(60,8,14,.75);border:2px solid #d9a440;color:#ffd98a;border-radius:14px;font-family:'Vazirmatn';font-weight:800;font-size:16px;padding:8px 16px;cursor:pointer;min-height:44px}
.logo{width:min(78vw,330px);animation:bob 3s ease-in-out infinite;filter:drop-shadow(0 0 30px rgba(255,160,40,.55))}
@keyframes bob{50%{transform:translateY(-10px) rotate(-1.5deg)}}
.coins{display:inline-flex;align-items:center;gap:6px;background:rgba(40,5,10,.8);border:2px solid #c98a2e;border-radius:99px;padding:2px 14px 2px 6px;font-weight:900;font-size:17px;color:#ffe08a}
.coins img{width:30px;height:30px}
.topbar{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px}
#map .path{flex:1;width:100%;overflow-y:auto;position:relative;margin-top:8px}
.node{position:absolute;width:86px;transform:translate(50%,0);text-align:center;cursor:pointer}
.node img.n{width:86px;height:86px;filter:drop-shadow(0 0 14px rgba(255,170,50,.6))}
.node.lock img.n{filter:grayscale(.6) brightness(.7)}
.node .num{position:absolute;top:22px;inset-inline:0;font-family:'Lalezar';font-size:28px;color:#fff3c4;text-shadow:0 2px 0 #6a0d0d}
.node.lock .num{display:none}
.node .st{display:flex;justify-content:center;margin-top:-10px}.node .st img{width:24px}
.node .nm{font-size:12px;font-weight:800;color:#ffe2a0;text-shadow:0 1px 3px #000;white-space:nowrap}
#shop .list{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:400px;margin-top:14px}
.card{background:url(./assets/shop_item_card.webp) center/100% 100%;aspect-ratio:1/1.15;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;box-sizing:border-box;text-align:center;min-width:0}
.card b{font-family:'Lalezar';font-size:20px;color:#ffd36b;text-shadow:0 2px 0 #500}
.card small{font-size:12px;color:#f6dcb0;overflow-wrap:anywhere}
.card .lv{display:flex;gap:3px;margin:4px 0}.card .lv i{width:14px;height:6px;border-radius:3px;background:#3a1010;border:1px solid #c98a2e}.card .lv i.on{background:#ffc845}
.card button{margin-top:4px;font-family:'Vazirmatn';font-weight:900;border:0;border-radius:10px;padding:4px 12px;background:#ffc845;color:#4a0b05;cursor:pointer;display:flex;align-items:center;gap:4px}
.card button img{width:20px}.card button:disabled{opacity:.45}
.panel{background:url(./assets/pause_panel.webp) center/100% 100% no-repeat;width:min(88vw,360px);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.modal{position:absolute;inset:0;z-index:40;background:rgba(10,0,5,.7);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.modal.off{display:none}
.rcard{background:url(./assets/results_card.webp) center/100% 100% no-repeat;width:min(92vw,380px);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;animation:pop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.4);opacity:0}}
.stars{display:flex;gap:4px;align-items:flex-end}.stars img{width:62px}.stars img:nth-child(2){width:78px}
.stars img.on{animation:pop .5s backwards}
#hudx{position:absolute;top:0;inset-inline:0;z-index:20;padding:max(8px,env(safe-area-inset-top)) 10px 0;display:flex;align-items:center;gap:8px;pointer-events:none}
#hudx.off,#bossbar.off{display:none}
.hbar{flex:1;display:flex;align-items:center;justify-content:space-between;background:url(./assets/hud_bar_frame.webp) center/100% 100%;height:58px;padding:0 22px;font-weight:900;font-size:16px;color:#ffe9b0;text-shadow:0 1px 2px #000;min-width:0}
.hbar span{display:flex;align-items:center;gap:3px}
.hbar img{width:24px;height:24px}
#pauseB{pointer-events:auto;width:52px;height:52px;border:0;background:url(./assets/icon_pause.webp) center/contain no-repeat;cursor:pointer}
#bossbar{position:absolute;top:calc(max(8px,env(safe-area-inset-top)) + 64px);inset-inline:30px;z-index:20;height:12px;border:2px solid #d9a440;border-radius:8px;background:#2a0508;overflow:hidden}
#bossbar i{display:block;height:100%;background:linear-gradient(90deg,#ff4a2a,#ffc845);width:100%;transition:width .15s}
#banner{position:absolute;top:38%;inset-inline:0;z-index:25;text-align:center;font-family:'Lalezar';font-size:40px;color:#ffd36b;text-shadow:0 3px 0 #7a1010,0 0 30px #ff8a00;pointer-events:none;opacity:0}
#banner.go{animation:ban 1.8s ease-out}
@keyframes ban{0%{opacity:0;transform:scale(2)}15%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-30px)}}
#tut{position:absolute;bottom:28%;inset-inline:20px;z-index:25;text-align:center;font-weight:800;font-size:18px;color:#fff1c8;background:rgba(40,5,10,.8);border:2px solid #d9a440;border-radius:16px;padding:10px;pointer-events:none;transition:opacity .4s}
#tut.off{opacity:0}
#hand{position:absolute;z-index:26;width:44px;height:44px;border-radius:50%;border:3px solid #fff3c4;box-shadow:0 0 18px #ffc845;pointer-events:none;animation:hand 1.6s ease-in-out infinite;bottom:36%;inset-inline-start:50%}
#hand.off{display:none}
@keyframes hand{0%,100%{transform:translate(60px,0)}50%{transform:translate(-60px,-40px) scale(.85)}}
#load .bar{width:70%;height:14px;border:2px solid #d9a440;border-radius:8px;margin-top:20px;overflow:hidden;background:#2a0508}
#load .bar i{display:block;height:100%;width:0;background:#ffc845;transition:width .2s}
.sub{color:#f6dcb0;font-size:15px;text-align:center}