@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700;900&display=swap');
html,body{margin:0;height:100%;overflow:hidden;background:#1b1712;font-family:'Vazirmatn',sans-serif;color:#2a2118;touch-action:none;user-select:none;-webkit-user-select:none}
#startBtn,#retryBtn,#hud,#dpad,#dpad-action{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;background-size:cover;background-position:center;line-height:1.8}
.hide{display:none!important}
.btn{position:relative;border:0;background:url(./assets/ui_button_primary.webp) center/100% 100% no-repeat;min-width:200px;min-height:64px;padding:0 30px 6px;font:900 22px 'Vazirmatn';color:#fff6e0;text-shadow:0 2px 0 #5a1d10;cursor:pointer;transition:transform .12s}
.btn:active{transform:scale(.94)}
.btn.sm{min-width:150px;min-height:52px;font-size:18px}
.ghost{border:2px solid #2a2118;background:#f3e6c8e6;border-radius:14px;min-height:48px;padding:0 18px;font:700 17px 'Vazirmatn';color:#2a2118;cursor:pointer}
.ghost:active{transform:scale(.95)}
#boot{background:#efe2c4;justify-content:center;gap:16px}
#boot .bar{width:220px;height:10px;border:2px solid #2a2118;border-radius:8px;overflow:hidden}
#boot .bar i{display:block;height:100%;width:0;background:#b8321f;transition:width .2s}
#menu{background-image:url(./assets/title_bg.webp);justify-content:space-between;padding:max(30px,env(safe-area-inset-top)) 0 max(50px,env(safe-area-inset-bottom))}
#menu .logo{width:min(78vw,360px);animation:float 3s ease-in-out infinite;filter:drop-shadow(0 10px 16px #0006);margin-top:20px}
#menu h1{margin:-10px 0 0;font-size:clamp(34px,10vw,52px);font-weight:900;color:#1d1610;text-shadow:0 0 18px #f6ecd2,0 0 6px #f6ecd2}
#menu .sub{font-size:16px;font-weight:700;background:#f3e6c8cc;padding:2px 14px;border-radius:12px}
#menu .col{display:flex;flex-direction:column;align-items:center;gap:12px}
@keyframes float{50%{transform:translateY(-10px) rotate(-1deg)}}
.topbar{position:absolute;top:max(10px,env(safe-area-inset-top));inset-inline:10px;display:flex;justify-content:space-between;align-items:center;gap:8px;z-index:3}
.pill{display:flex;align-items:center;gap:6px;background:#f3e6c8ee;border:2px solid #2a2118;border-radius:20px;padding:2px 12px 2px 8px;font-weight:900;font-size:18px;min-height:36px}
.pill img{width:28px;height:28px}
#map{background-image:url(./assets/mountain_map_bg.webp)}
#map h2,#shop h2{margin:62px 0 0;font-size:26px;font-weight:900;background:#f3e6c8dd;padding:0 18px;border-radius:14px}
#nodes{position:absolute;inset:110px 0 90px 0}
.node{position:absolute;transform:translate(50%,-50%);width:76px;display:flex;flex-direction:column;align-items:center;cursor:pointer}
.node .disc{width:66px;height:66px;border-radius:50%;background:radial-gradient(#fff4dc,#d9c39a);border:3px solid #2a2118;display:grid;place-items:center;font-size:26px;font-weight:900;box-shadow:0 5px 0 #2a2118;transition:transform .15s}
.node.cur .disc{background:radial-gradient(#ffd77a,#d4892a);animation:pulse 1.2s infinite}
@keyframes pulse{50%{transform:scale(1.1)}}
.node.lock .disc{background:#9a9183;filter:grayscale(1)}
.node .disc img{width:40px}
.node .st{display:flex;margin-top:2px}.node .st img{width:22px}
.node .nm{font-size:13px;font-weight:700;background:#f3e6c8dd;border-radius:8px;padding:0 6px;white-space:nowrap}
.bottombar{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));inset-inline:0;display:flex;justify-content:center;gap:12px}
#shop{background:url(./assets/mountain_map_bg.webp) center/cover}
#shop::before{content:'';position:absolute;inset:0;background:#1b1712aa}
#shop>*{position:relative}
.items{display:flex;flex-direction:column;gap:12px;margin-top:16px;width:min(92vw,420px)}
.item{display:flex;align-items:center;gap:12px;background:#f3e6c8;border:3px solid #2a2118;border-radius:18px;padding:10px 12px}
.item img{width:58px;height:58px;object-fit:contain}
.item .t{flex:1;min-width:0}.item b{display:block;font-size:17px}.item small{font-size:13px;opacity:.8;overflow-wrap:anywhere}
.lv{display:flex;gap:3px;margin-top:2px}.lv i{width:16px;height:6px;border-radius:3px;background:#0002}.lv i.on{background:#b8321f}
.buy{border:0;border-radius:12px;background:#b8321f;color:#fff;font:900 15px 'Vazirmatn';min-height:46px;min-width:84px;display:flex;align-items:center;justify-content:center;gap:4px;cursor:pointer}
.buy img{width:20px;height:20px}.buy:disabled{background:#8a8070}
#hudbar{position:absolute;top:max(8px,env(safe-area-inset-top));inset-inline:8px;display:flex;gap:6px;align-items:center;z-index:4;pointer-events:none}
#hudbar .pill{font-size:16px;min-height:34px;padding:0 10px 0 6px}
#hudbar .pill img{width:24px;height:24px}
#hudbar .sp{flex:1}
#pauseB{pointer-events:auto;width:48px;height:48px;border:0;background:url(./assets/icon_pause.webp) center/contain no-repeat;cursor:pointer}
#waveB{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));inset-inline-start:50%;transform:translateX(50%);z-index:4}
#tip{position:absolute;top:66px;inset-inline:16px;margin:auto;max-width:380px;background:#f3e6c8f2;border:3px solid #2a2118;border-radius:16px;padding:8px 14px;font-weight:700;font-size:16px;text-align:center;z-index:5;pointer-events:none;animation:pop .3s}
@keyframes pop{from{transform:scale(.7);opacity:0}}
#build{position:absolute;z-index:6;display:flex;gap:6px;background:#f3e6c8f5;border:3px solid #2a2118;border-radius:16px;padding:6px;transform:translate(50%,0);animation:pop .15s}
#build .opt{width:76px;border:2px solid #2a2118;border-radius:12px;background:#fffaf0;display:flex;flex-direction:column;align-items:center;padding:2px;cursor:pointer;font:700 12px 'Vazirmatn';color:#2a2118;line-height:1.5}
#build .opt img.e{width:50px;height:50px;object-fit:contain}
#build .opt span{display:flex;align-items:center;gap:2px;font-weight:900;font-size:14px}#build .opt span img{width:16px}
#build .opt.no{opacity:.45}
.modal{position:absolute;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:10}
.panel{width:min(90vw,380px);aspect-ratio:1/1.05;background:url(./assets/ui_panel_frame.webp) center/100% 100% no-repeat;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:40px;box-sizing:border-box;animation:pop .3s cubic-bezier(.3,1.6,.6,1)}
.panel h3{margin:0;font-size:30px;font-weight:900}
.stars{display:flex;gap:4px}.stars img{width:62px;animation:pop .4s backwards}
.stars img:nth-child(2){width:78px;margin-top:-14px;animation-delay:.25s}.stars img:nth-child(3){animation-delay:.5s}
.reward{display:flex;align-items:center;gap:6px;font-size:22px;font-weight:900}.reward img{width:34px}
.row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}