html,body{margin:0;height:100%;background:#1b3a1a;overflow:hidden;font-family:'Vazirmatn',sans-serif;touch-action:none;user-select:none}
#game-root{position:fixed!important;inset:0;width:100%!important;max-width:none!important;margin:0!important}
#game{width:100%;height:100%}
#game canvas{display:block;width:100%!important;height:100%!important;image-rendering:pixelated}
#hud{position:absolute!important;inset:0!important;top:0!important;display:block!important;pointer-events:none;color:#fff}
#hud.hidden{display:none!important}
.box{background:#2b1d55;border:3px solid #f2c94c;box-shadow:0 0 0 2px #120a24,0 4px 0 2px #120a24;border-radius:4px;color:#fff}
#banner{position:absolute;top:max(16px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);padding:6px 14px;font-size:15px;font-weight:800;line-height:1.7;white-space:nowrap;max-width:68vw;overflow:hidden;text-overflow:ellipsis}
#snd{position:absolute;top:max(16px,env(safe-area-inset-top));inset-inline-start:12px;width:42px;height:42px;display:flex;align-items:center;justify-content:center;font-size:18px;pointer-events:auto;cursor:pointer}
#dlg{position:absolute;top:76px;inset-inline:12px;max-width:520px;margin:auto;padding:8px 10px;display:flex;gap:10px;align-items:center;transition:opacity .4s,transform .4s}
#dlg.off{opacity:0;transform:translateY(-12px)}
#dlg img{width:54px;height:54px;border:2px solid #f2c94c;image-rendering:pixelated;background:#533}
#dlg b{color:#f2c94c;font-size:13px;display:block}
#dlg span{font-size:15px;font-weight:700;line-height:1.7}
#legion,#sun{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));padding:6px 12px;min-width:116px}
#legion{inset-inline-start:12px}#sun{inset-inline-end:12px}
.cap{font-size:12px;color:#f2c94c;font-weight:800;line-height:1.5}
.big{font-size:30px;font-weight:900;line-height:1.2}
#bar{height:8px;background:#120a24;margin-top:4px}#barf{height:100%;width:0;background:#4f7dff}
#hint{position:absolute;left:50%;top:66%;transform:translateX(-50%);padding:6px 16px;font-size:15px;font-weight:800;white-space:nowrap;transition:opacity .4s}
.glabel{position:absolute;left:0;top:0;font-size:26px;font-weight:900;color:#fff;text-shadow:2px 2px 0 #120a24,-2px 2px 0 #120a24,2px -2px 0 #120a24,-2px -2px 0 #120a24;display:none;direction:ltr;will-change:transform}
.pop{position:absolute;font-size:30px;font-weight:900;direction:ltr;text-shadow:2px 2px 0 #120a24,-2px -2px 0 #120a24,2px -2px 0 #120a24,-2px 2px 0 #120a24;animation:pop .8s forwards}
@keyframes pop{from{opacity:1;transform:translate(-50%,0) scale(.6)}30%{transform:translate(-50%,-14px) scale(1.2)}to{opacity:0;transform:translate(-50%,-60px) scale(1)}}
#title,#endBox{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(18,10,36,.72);text-align:center;padding:24px;gap:6px}
#title h1,#endBox h1{margin:0;font-size:44px;font-weight:900;color:#f2c94c;text-shadow:4px 4px 0 #120a24;line-height:1.5}
#title p,#endBox p{margin:0 0 150px;font-size:17px;font-weight:700;line-height:1.9;max-width:300px}
#title.hidden,#endBox.hidden{display:none!important}
#startBtn,#retryBtn{background:#f2c94c;color:#2b1d55;border:3px solid #120a24!important;border-radius:4px!important;box-shadow:0 5px 0 #8a6a12;top:62%!important;pointer-events:auto;font-weight:900!important}
#startBtn:active,#retryBtn:active{transform:translate(-50%,-46%)}