@font-face{font-family:'Vazirmatn';src:local('Vazirmatn')}
html,body{margin:0;height:100%;overflow:hidden;background:#3a0d0a;font-family:'Vazirmatn',Tahoma,sans-serif;color:#fff3d6;touch-action:none;user-select:none;-webkit-user-select:none}
#game-root{width:100vw!important;max-width:100vw!important;height:100vh;height:100dvh;position:fixed!important;inset:0}
#game,#game canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
#startBtn,#retryBtn,#hud,#dpad,#dpad-action{display:none!important}
#ui{position:absolute;inset:0;z-index:30;pointer-events:none;direction:rtl}
.scr{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;pointer-events:auto;background-size:cover;background-position:center}
.scr.on{display:flex}
.btn{border:0;cursor:pointer;font-family:inherit;font-weight:800;font-size:22px;color:#4a0f08;background:url(assets/btn_primary.webp) center/100% 100% no-repeat;width:230px;height:76px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.45));transition:transform .12s}
.btn:active{transform:scale(.94)}
.btn.sm{width:170px;height:58px;font-size:18px}
.ghost{border:2px solid #e8b44a;background:rgba(60,10,6,.75);color:#ffe2a0;border-radius:14px;padding:8px 18px;font-family:inherit;font-weight:700;font-size:16px;cursor:pointer}
.coinbox{display:flex;align-items:center;gap:6px;background:rgba(50,8,4,.75);border:2px solid #e8b44a;border-radius:20px;padding:2px 12px;font-weight:800;font-size:18px}
.coinbox img{width:28px;height:28px}
.topbar{position:absolute;top:max(12px,env(safe-area-inset-top));inset-inline:12px;display:flex;justify-content:space-between;align-items:center}
#menu{background-image:linear-gradient(rgba(60,8,4,.15),rgba(60,8,4,.55)),url(assets/title_background.webp);justify-content:center;gap:14px}
#menu .logo{width:min(64vw,300px);animation:float 3s ease-in-out infinite;filter:drop-shadow(0 10px 20px rgba(0,0,0,.5))}
#menu h1{margin:-10px 0 4px;font-size:58px;font-weight:900;color:#ffd36b;text-shadow:0 4px 0 #8d1a0d,0 8px 18px rgba(0,0,0,.6);line-height:1.5}
#menu p{margin:0 0 18px;font-size:16px;color:#ffe8b8;text-shadow:0 2px 4px #000}
@keyframes float{50%{transform:translateY(-10px)}}
#map{background-image:url(assets/map_background.webp)}
#map h2,#shop h2{margin:70px 0 0;font-size:28px;color:#ffd36b;text-shadow:0 3px 0 #7a150a}
#nodes{position:relative;width:min(100%,420px);flex:1;margin-bottom:20px}
.node{position:absolute;width:82px;height:82px;transform:translate(50%,-50%);background:center/contain no-repeat;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;font-weight:900;font-size:24px;color:#5a1208}
.node.locked{cursor:default}
.node img.lock{width:36px}
.node .stars{position:absolute;bottom:-14px;display:flex;gap:1px}
.node .stars img{width:22px}
.node .nm{position:absolute;top:-24px;white-space:nowrap;font-size:13px;color:#fff1cc;text-shadow:0 1px 3px #000;font-weight:700}
.node.cur{animation:pulse 1.2s infinite}
@keyframes pulse{50%{transform:translate(50%,-50%) scale(1.1)}}
#shop{background:linear-gradient(#5a120a,#2c0604)}
.items{display:flex;flex-direction:column;gap:12px;width:min(92%,400px);margin-top:20px}
.item{display:flex;align-items:center;gap:10px;background:rgba(255,220,150,.1);border:2px solid #c9902f;border-radius:16px;padding:10px 12px}
.item .ic{width:46px;height:46px;border-radius:50%;background:#e8b44a;display:grid;place-items:center;color:#5a1208;font-weight:900;font-size:20px;flex:none}
.item .tx{flex:1;min-width:0}
.item b{display:block;font-size:17px}
.item small{opacity:.8;font-size:13px;line-height:1.7}
.item button{flex:none}
.item button:disabled{opacity:.45}
#hudS{pointer-events:none;background:none}
#hudS .bar{position:absolute;top:max(8px,env(safe-area-inset-top));inset-inline:8px;height:62px;background:url(assets/hud_bar_frame.webp) center/100% 100% no-repeat;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-weight:800;font-size:17px;text-shadow:0 2px 2px #000}
#hudS .hearts{color:#ff5a3c;font-size:20px}
#pauseBtn{pointer-events:auto;width:48px;height:48px;border:0;background:url(assets/btn_pause.webp) center/contain no-repeat;cursor:pointer;position:absolute;top:calc(max(8px,env(safe-area-inset-top)) + 70px);inset-inline-end:12px}
#prog{position:absolute;top:calc(max(8px,env(safe-area-inset-top)) + 84px);inset-inline:70px;height:10px;border-radius:6px;background:rgba(0,0,0,.4);border:1px solid #e8b44a;overflow:hidden}
#prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffd36b,#e8742a);margin-inline-start:auto}
#tut{position:absolute;bottom:18%;inset-inline:0;text-align:center;font-size:20px;font-weight:800;text-shadow:0 2px 6px #000;transition:opacity .3s}
#tut .hand{width:46px;height:46px;border-radius:50%;border:4px solid #fff;margin:10px auto 0;animation:swipe 1.4s ease-in-out infinite}
@keyframes swipe{0%,100%{transform:translateX(-60px)}50%{transform:translateX(60px)}}
.ovl{background:rgba(25,4,2,.65);justify-content:center}
.card{width:min(88vw,360px);aspect-ratio:1;background:url(assets/panel_frame.webp) center/100% 100% no-repeat;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:30px;box-sizing:border-box;animation:pop .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.5);opacity:0}}
.card h3{margin:0;font-size:26px;color:#ffd36b;text-shadow:0 3px 0 #6d1208;text-align:center;line-height:1.6}
.card .stars{display:flex;gap:4px}
.card .stars img{width:56px;animation:pop .4s backwards}
.card .rw{display:flex;align-items:center;gap:6px;font-size:20px;font-weight:800}
.card .rw img{width:30px}
.card .row{display:flex;gap:8px}