@font-face{font-family:Vazirmatn;src:url('/assets/Vazirmatn.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--bg:#07151f;--panel:#102736;--line:#275063;--text:#f4fbff;--muted:#93adba;--mint:#4de0b5;--gold:#ffd15b;--blue:#4e9dff;--danger:#e46070}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Vazirmatn,Tahoma,sans-serif}
body{background:radial-gradient(circle at 50% -10%,#225a65,transparent 38%),linear-gradient(#0b202a,#07151f)}
.app{width:min(720px,100%);margin:auto;padding:16px 14px 96px}
header{display:flex;align-items:center;justify-content:space-between;gap:12px}
h1,h2,p{margin:0}
h1{font-size:23px;color:var(--mint)}
small{display:block;color:var(--muted)}
select,button{font:700 13px Vazirmatn;border:1px solid var(--line);border-radius:12px;color:var(--text);background:#142f40;padding:9px}
.resources{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0 9px}
.resource,.status>div{background:#102736;border:1px solid var(--line);border-radius:16px;padding:11px;text-align:center}
.resource b,.status b{display:block;font-size:19px}
.status{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.status>div{padding:9px 4px}
.status small{font-size:10px}
.daily-reward{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:18px 0 10px;padding:13px;border:1px solid #4e9dff;border-radius:18px;background:linear-gradient(135deg,#163d5d,#102736)}
.daily-reward h2{font-size:17px;color:#8ec5ff}
.daily-reward button{background:var(--blue);border:0}
.daily-reward button:disabled{opacity:.55}
.referral{margin:18px 0 10px;padding:14px;border:1px solid #8d6a29;border-radius:18px;background:linear-gradient(135deg,#3b3018,#102736)}
.referral h2{font-size:18px;color:var(--gold)}
.referral-stats{margin:10px 0;color:#dceaf0;font-size:12px}
.referral-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.referral-actions button:last-child{background:var(--gold);color:#2a1b00;border:0}
.referral-milestones{display:grid;gap:6px;margin:10px 0}
.referral-milestone{display:flex;justify-content:space-between;align-items:center;padding:7px 9px;border:1px solid #66572f;border-radius:11px;background:#142b38;font-size:11px}
.referral-milestone.complete{border-color:var(--gold)}
.referral-milestone button{padding:4px 9px}
.missions{margin:18px 0;padding:13px;border:1px solid var(--line);border-radius:18px;background:#0c202d}
.missions-head{margin-bottom:10px}
.missions-head h2{font-size:17px}
#missionList{display:grid;gap:8px}
.mission{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:13px;background:#132d3d;border:1px solid #284b5d}
.mission b,.mission small{display:block}
.mission button{white-space:nowrap;font-size:11px}
.mission.complete{border-color:#b88b35}
.mission.complete button{background:var(--gold);color:#2a1b00}
.mission.claimed{opacity:.58}
.map-title{display:flex;justify-content:space-between;align-items:center;margin:24px 2px 12px}
.map-title button{font-size:20px;padding:5px 13px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding:14px;background:linear-gradient(135deg,#315e3c,#244c35);border:1px solid #54815d;border-radius:24px;box-shadow:0 18px 50px #0007;position:relative;z-index:2}
.tile{aspect-ratio:1;border:1px solid #76a46e;border-radius:15px;padding:2px;background:linear-gradient(145deg,#6a9b5e,#3f7749);display:grid;place-items:center;position:relative;font-size:clamp(28px,10vw,48px);box-shadow:inset 0 -9px 16px #173f2b88,0 5px 8px #07120c77;overflow:hidden}
.tile.empty{font-size:16px;color:#74a79d;background:linear-gradient(145deg,#1d4d46,#133b35)}
.tile.locked{font-size:13px;filter:saturate(.25);opacity:.72;background:linear-gradient(145deg,#23343a,#15252b);border-style:dashed}
.tile.constructing{filter:saturate(.5)}
.tile .timer{position:absolute;inset:auto 2px 2px;background:#06121dcc;border-radius:5px;font-size:8px;padding:1px;color:#fff}
.building-level{position:absolute;inset:2px 2px auto auto;min-width:16px;padding:1px 4px;border-radius:8px;background:#07151fdd;color:var(--gold);font:700 9px Vazirmatn;font-style:normal}
.production{margin:12px 4px;color:var(--muted);text-align:center;font-size:12px}
dialog{width:min(560px,calc(100% - 24px));max-height:85vh;background:#0d2230;color:var(--text);border:1px solid var(--line);border-radius:22px;padding:15px}
dialog::backdrop{background:#02080dcc;backdrop-filter:blur(5px)}
.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.dialog-head button{border:0;background:transparent;font-size:18px}
.catalog{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;overflow:auto;max-height:62vh}
.building{display:flex;align-items:center;gap:10px;text-align:start;background:#123044;border:1px solid var(--line);border-radius:15px;padding:11px}
.building:disabled{opacity:.4}
.unlock-land{grid-column:1/-1;border-color:#b88b35;background:linear-gradient(135deg,#44371b,#213643)}
.building .icon{font-size:30px}
.building b,.building small{display:block}
.danger{width:100%;margin-top:12px;background:#4a1f2a;border-color:#7e3544;color:#ff9baa}
#upgrade{width:100%;margin-top:12px;background:#174b43;border-color:#2f806f;color:#8ff5d8}
#upgrade:disabled{opacity:.42}
[dir=rtl] .building{text-align:right}
@media(max-width:420px){.app{padding-inline:9px}
.grid{gap:7px;padding:9px}
.tile{border-radius:12px}
.resources{gap:5px}
.resource{padding:8px 3px}
.status{gap:4px}
.catalog{grid-template-columns:1fr}
}
.page{display:none;animation:page-in .2s ease}.page.active{display:block}@keyframes page-in{from{opacity:.2;transform:translateY(5px)}}
.nav{position:fixed;z-index:30;inset:auto 0 0;display:grid;grid-template-columns:repeat(6,1fr);background:#091a27f2;border-top:1px solid #2b5365;padding:7px max(5px,calc((100% - 720px)/2)) calc(7px + env(safe-area-inset-bottom));backdrop-filter:blur(14px)}
.nav button{border:0;background:transparent;padding:3px 1px;color:#7896a6;display:grid;place-items:center;gap:1px;border-radius:12px}.nav button span{font-size:20px}.nav button i{font:700 9px Vazirmatn;font-style:normal}.nav button.active{color:var(--gold);background:#173448}
.city-scene{position:relative;padding:6px;border-radius:25px;background:radial-gradient(circle at 20% 10%,#6fb7dc55,transparent 35%),linear-gradient(#203e49,#162e35)}
.road{position:absolute;background:#26333a;border:2px dashed #d0c78c44;z-index:1}.road.horizontal{height:26px;inset:48% 0 auto}.road.vertical{width:26px;inset:0 auto 0 48%}
.economy-summary,.economy-card,.trade-card{margin:18px 0;padding:16px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,#132f40,#0b202d);box-shadow:0 12px 30px #0003}.economy-summary h2,.economy-card h2,.trade-card h2{font-size:18px;color:var(--mint);margin-bottom:9px}.economy-card div,.trade-card p{color:#b9ccd5;margin:8px 0 13px}.economy-card button,.trade-card button{margin:4px 3px;background:#174b43;border-color:#2f806f}.economy-card button:disabled,.trade-card button:disabled{opacity:.4}.truck{font-size:70px;text-align:center;position:relative;padding:25px}.truck i{position:absolute;width:70%;height:5px;background:repeating-linear-gradient(90deg,#fff3 0 18px,transparent 18px 30px);left:15%;bottom:14px}.trade-card{text-align:center}.trade-card button{width:100%;background:var(--gold);color:#2a1b00;border:0}
.onboarding{margin:18px 0;padding:13px;display:flex;align-items:center;gap:10px;border:1px solid var(--mint);border-radius:16px;background:#12382f}.onboarding[hidden]{display:none}.onboarding>span{font-size:30px}.onboarding div{flex:1}.onboarding button{background:var(--mint);color:#062119}