html,body{margin:0;height:100%;overflow:hidden;background:#07060a;font-family:'Vazirmatn',sans-serif;color:#f3eadb;touch-action:none;user-select:none;-webkit-user-select:none}
#game-root{position:fixed!important;inset:0;width:100%!important;max-width:none!important;margin:0!important}
#startBtn,#retryBtn,#hud,#dpad,#dpad-action{display:none!important}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;z-index:10;background-size:cover;background-position:center;image-rendering:pixelated;padding:calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px);box-sizing:border-box;line-height:1.8}
.scr.off{display:none}
.dim::before{content:'';position:absolute;inset:0;background:linear-gradient(#07060acc,#07060a55 40%,#07060acc);z-index:-1}
.scr>*{position:relative}
.ttl{font-family:'Lalezar','Vazirmatn';font-size:58px;color:#f6efe2;text-shadow:0 4px 0 #6b1d1d,0 0 24px #b9e3ff88;margin:0}
.sub{opacity:.85;font-size:15px;margin:0 0 8px;text-align:center}
.logo{width:min(70vw,300px);image-rendering:pixelated;animation:bob 3s ease-in-out infinite;filter:drop-shadow(0 0 20px #9ad4ff55)}
@keyframes bob{50%{transform:translateY(-8px)}}
.btn{position:relative;border:0;background:url(./assets/btn_primary.webp) center/100% 100% no-repeat;image-rendering:pixelated;color:#2a1405;font:900 22px 'Vazirmatn';width:240px;height:80px;cursor:pointer;padding-bottom:6px;transition:transform .08s}
.btn.sec{background-image:url(./assets/btn_secondary.webp);color:#f3eadb;font-size:19px;width:210px;height:70px}
.btn:active{transform:scale(.94)}
.btn:disabled{filter:grayscale(1) brightness(.6)}
.row{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.coinbox{display:flex;align-items:center;gap:6px;background:#000a;border:2px solid #6a4a22;padding:2px 12px;border-radius:6px;font-weight:900}
.coinbox img{width:26px;image-rendering:pixelated}
.top{width:100%;display:flex;justify-content:space-between;align-items:center}
.ibtn{width:52px;height:52px;border:0;background:center/contain no-repeat;image-rendering:pixelated;cursor:pointer}
.ibtn:active{transform:scale(.9)}
#map .path{flex:1;width:100%;position:relative}
.node{position:absolute;width:120px;height:150px;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;cursor:pointer;border:0;background:none;color:#f3eadb;font:700 15px 'Vazirmatn'}
.node .n{width:96px;height:96px;background:url(./assets/map_node.webp) center/contain no-repeat;image-rendering:pixelated;display:grid;place-items:center;font:900 30px 'Lalezar','Vazirmatn';color:#fff;text-shadow:0 3px 0 #000}
.node.lock .n{filter:grayscale(.8) brightness(.6)}
.node .n img{width:52px;image-rendering:pixelated}
.node .st img{width:26px;image-rendering:pixelated}
.node.cur .n{animation:bob 1.4s infinite}
.panel{background:url(./assets/panel_frame.webp) center/100% 100% no-repeat;image-rendering:pixelated;width:min(92vw,380px);padding:44px 34px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.overlay{background:#07060acc;justify-content:center;z-index:30}
.panel h2{margin:0;font:900 30px 'Lalezar','Vazirmatn';color:#ffe7b0;text-shadow:0 3px 0 #5a1b10}
.stars{display:flex;gap:6px;direction:ltr}.stars img{width:58px;image-rendering:pixelated;transform:scale(0);animation:pop .4s forwards}
.stars img:nth-child(2){width:72px;margin-top:-14px;animation-delay:.25s}.stars img:nth-child(3){animation-delay:.5s}
@keyframes pop{70%{transform:scale(1.25)}to{transform:scale(1)}}
.item{display:flex;align-items:center;gap:10px;width:100%;background:#0008;border:2px solid #5b4022;border-radius:6px;padding:6px 10px;box-sizing:border-box;text-align:start}
.item div{flex:1;min-width:0;overflow-wrap:anywhere;font-size:13px;line-height:1.6}.item b{font-size:15px;display:block}
.item button{border:0;background:#e0a33a;color:#2a1405;font:900 14px 'Vazirmatn';border-radius:5px;padding:6px 10px;cursor:pointer;display:flex;gap:4px;align-items:center;white-space:nowrap}
.item button img{width:18px}.item button:disabled{background:#555;color:#aaa}
#hud2{position:absolute;top:0;inset-inline:0;z-index:15;padding:calc(env(safe-area-inset-top) + 10px) 12px 0;display:flex;flex-direction:column;gap:6px;pointer-events:none}
#hud2.off{display:none}
#hud2 .top>*{pointer-events:auto}
.hearts{display:flex;gap:2px}.hearts img{width:30px;image-rendering:pixelated}.hearts img.e{filter:grayscale(1) brightness(.35)}
.boss{display:flex;align-items:center;gap:8px;font-weight:900;font-size:14px}
.bar{flex:1;height:14px;background:#1a0d0d;border:2px solid #000;box-shadow:0 0 0 2px #7a5a30}.bar i{display:block;height:100%;background:linear-gradient(#ff7a6a,#b3201a);transition:width .2s}
#tip{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 28px);inset-inline:16px;z-index:16;text-align:center;font-weight:900;font-size:18px;background:#000b;border:2px solid #c99a4a;padding:8px 12px;border-radius:8px;pointer-events:none;transition:opacity .3s}
#tip.off{opacity:0}
#hand{position:absolute;z-index:17;width:44px;height:44px;border-radius:50%;background:#fff8;border:3px solid #fff;pointer-events:none;bottom:calc(env(safe-area-inset-bottom) + 110px);left:50%;margin-left:-22px}
#hand.swipe{animation:sw 1.2s infinite}#hand.tap{animation:tp .7s infinite}#hand.off{display:none}
@keyframes sw{0%{transform:translateX(-70px);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateX(70px);opacity:0}}
@keyframes tp{50%{transform:scale(.7)}}
.flt{position:absolute;z-index:18;font:900 24px 'Lalezar','Vazirmatn';pointer-events:none;text-shadow:0 3px 0 #000;animation:fl .9s forwards;transform:translateX(-50%)}
@keyframes fl{to{transform:translate(-50%,-60px);opacity:0}}
#bar0{width:220px;height:12px;border:2px solid #c99a4a;margin-top:20px}#bar0 i{display:block;height:100%;width:0;background:#e0a33a}
