body{font-family:'Space Grotesk',sans-serif;background:#07070c;color:#fff;overflow:hidden;height:100vh;height:100dvh;display:flex;flex-direction:column}

header{height:64px;background:#0d0d15;border-bottom:2px solid #1e1e2e;display:flex;align-items:center;justify-content:space-between;padding:0 14px;z-index:50}

.pill{padding:8px 13px;border-radius:999px;background:#16161f;border:1px solid #23233a;font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px}

.pill.money{color:#d6ff00;border-color:#2a2f15;background:#151a0a}

.btn{padding:10px 18px;border-radius:14px;font-weight:800;font-size:12px;letter-spacing:.5px;border:none;cursor:pointer}

.btn-buy{background:#1e1e2e;color:#fff;border:1px solid #2a2a44}

#world{flex:1;position:relative;background:#08080f;overflow:hidden}

#stateModal{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,#1a1a35 0%,#08080c 60%);z-index:200;display:flex;align-items:center;justify-content:center;padding:18px}

.s-card{width:100%;max-width:420px;background:#10101a;border:2px solid #24243e;border-radius:28px;padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.8)}

.s-card h1{font-size:28px;line-height:.9;letter-spacing:-1px}.s-card h1 span{color:#d6ff00}

.s-card.sub{font-size:11px;color:#777;margin:8px 0 16px;line-height:1.5}

.state{padding:13px 14px;border-radius:16px;background:#151525;border:1px solid #23233f;margin-bottom:9px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:.2s}

.state:hover{border-color:#d6ff00;background:#1c1c33;transform:translateX(3px)}

.state b{font-size:13px}.state small{display:block;font-size:10px;color:#888;font-family:'Space Grotesk';margin-top:2px}

.badge{font-size:10px;padding:4px 8px;border-radius:999px;background:#1f1f2e;border:1px solid #2a2a44}

.event{position:absolute;top:16px;left:16px;z-index:20;max-width:300px;background:rgba(16,16,26,.9);backdrop-filter:blur(20px);border:1px solid #2a2a44;border-radius:18px;padding:14px}

.event b{font-size:12px;color:#fff;display:block;margin-bottom:3px}.event span{font-size:11px;color:#aaa;line-height:1.4}

.grid-root{position:absolute;top:50%;left:50%;width:560px;height:560px;transform:translate(-50%,-50%)}

.iso{width:100%;height:100%;position:relative;transform:rotateX(60deg) rotateZ(-45deg);transform-style:preserve-3d}

.tile{position:absolute;width:68px;height:68px;background:linear-gradient(180deg,#1a1a2a,#13131d);border:1px solid #222233;cursor:pointer;transition:.15s}

.furni{position:absolute;width:68px;height:68px;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;transform:rotateZ(45deg) rotateX(-60deg) translateZ(24px);transform-style:preserve-3d}

#catalog{position:absolute;top:0;right:0;bottom:0;width:400px;max-width:94%;background:#0a0a12;border-left:2px solid #1e1e32;transform:translateX(102%);transition:.45s cubic-bezier(.2,.8,.2,1);z-index:40;display:flex;flex-direction:column}

.cat-h{padding:20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #1e1e32}

.cat-tabs{display:flex;gap:7px;padding:14px;overflow-x:auto;white-space:nowrap}

.ct{padding:8px 14px;border-radius:999px;background:#151525;border:1px solid #23233f;font-size:11px;font-weight:700;cursor:pointer;flex-shrink:0}

.cat-grid{flex:1;overflow:auto;padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}

.it{background:#141422;border:1px solid #22223a;border-radius:20px;padding:16px;cursor:pointer;transition:.2s}

.it b{font-size:11px;display:block;margin-top:8px}.it s{font-size:11px;color:#d6ff00;text-decoration:none;font-weight:700}

.dock{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:10px;background:rgba(18,18,28,.88);backdrop-filter:blur(24px);border:1px solid #2a2a44;padding:10px 14px;border-radius:22px;z-index:35;box-shadow:0 10px 40px rgba(0,0,0,.6)}

.dk{width:50px;height:50px;border-radius:14px;background:#16161f;border:1px solid #2a2a44;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;transition:.2s}

.dk:hover{background:#1f1f33;border-color:#d6ff00;transform:translateY(-2px)}

#phone{position:absolute;bottom:0;left:50%;transform:translateX(-50%) translateY(104%);width:380px;max-width:94%;height:580px;background:#07070a;border:2px solid #2a2a44;border-bottom:none;border-radius:34px 34px 0 0;transition:.5s cubic-bezier(.2,.8,.2,1);z-index:45;display:flex;flex-direction:column;overflow:hidden}

.ph-bar{height:36px;background:#000;display:flex;align-items:center;justify-content:center;gap:8px}

.ph-dot{width:6px;height:6px;border-radius:99px;background:#333}.ph-notch{width:92px;height:7px;background:#222;border-radius:99px}

.apps{flex:1;background:linear-gradient(180deg,#12121e,#0a0a12);padding:20px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;overflow:auto}

.ap{aspect-ratio:1;background:linear-gradient(180deg,#1b1b2e,#141422);border:1px solid #22223a;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer}

#toast{position:absolute;top:90px;left:50%;transform:translateX(-50%) translateY(10px);background:#fff;color:#000;padding:12px 20px;border-radius:999px;font-weight:800;font-size:12px;opacity:0;transition:.35s;z-index:90;pointer-events:none}

#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

<div class="pill city"><span id="cityLabel">Pick State</span> - LVL <span id="lvl">1</span></div>

<div class="sub">Your story no start for Lekki. E start for where you dey. Pick your state — different hustle, same Naija spirit.</div>

<div class="event" id="eventBox">Choose your state to start!</div>

<div class="cat-h"><div><b id="marketName">Market</b><div style="font-size:10px;color:#666;margin-top:2px" id="hoodName">Select area</div></div><span style="font-size:22px;cursor:pointer" onclick="toggleBuy()">X</span></div>

oyo:{name:"Oyo - Ibadan",city:"Ibadan",hoods:["Beere","Bodija","Jericho GRA"],land:"Baba Riliwan",food:"Amala & Gbegiri",bus:"Sango! Mokola! Beere!",hustle:"Pure Water for Oja Oba"},

anambra:{name:"Anambra - Onitsha",city:"Onitsha",hoods:["Main Market","Awka Road","GRA"],land:"Chief Obiora",food:"Nkwobi & Isi Ewu",bus:"Main Market! Upper Iweka!",hustle:"Load goods for Main Market"},

kano:{name:"Kano",city:"Kano",hoods:["Sabon Gari","Nassarawa","Nasarawa GRA"],land:"Alhaji Musa",food:"Tuwo & Miyan Kuka",bus:"Sabon Gari! Bata!",hustle:"Hawk charger for Kanti Kwari"},

rivers:{name:"Rivers - PH",city:"Port Harcourt",hoods:["Diobu","Rumuola","Odili GRA"],land:"Bro Precious",food:"Bole & Fish",bus:"Mile 1! Rumuola!",hustle:"Sell water for Diobu"},

enugu:{name:"Enugu",city:"Enugu",hoods:["Abakpa","Ogui","Independence Layout"],land:"Igwe Okoro",food:"Abacha",bus:"Holy Ghost! Ogbete!",hustle:"Sell Okpa for Ogbete"},

lagos:{name:"Lagos",city:"Lagos",hoods:["Surulere","Yaba","Banana Island"],land:"Baba Landlord",food:"Jollof & Turkey",bus:"Oshodi! CMS!",hustle:"Pure water for Surulere"}

Shanty:[["🛏️","Mat",800],["🪑","Stool",1500],["💡","Bulb",2200]],

FaceMe:[["🛋️","Sofa Small",12000],["📺","TV 32",26000],["🎮","PS4 Used",45000]],

SelfCon:[["🛏️","Bed Frame",32000],["🧊","Fridge Small",48000],["💻","Reading Table",12000]],

BigBoy:[["📺","TV 55 Smart",95000],["🎮","PS5",185000],["❄️","AC 1.5HP",120000]],

Hustle:[["💧","Water Tray",1500],["🏍️","Okada Hire",80000],["💻","Laptop Used",75000],["🚐","Keke Hire",280000]]

const PRICE={};Object.values(CAT).flat().forEach(a=>PRICE[a[1]]=a[2]);

let S=JSON.parse(localStorage.getItem('9ja_v4')||'null')||{money:25000,lvl:1,energy:100,grid:{},state:null};

function save(){localStorage.setItem('9ja_v4',JSON.stringify(S));upd()}

document.getElementById('money').textContent=S.money.toLocaleString();

if(cur){document.getElementById('cityLabel').textContent=cur.city;document.getElementById('marketName').textContent=cur.city+" Market";document.getElementById('hoodName').textContent=cur.hoods[Math.min(S.lvl-1,2)]+" - LVL "+S.lvl;}

function toast(m){let t=document.getElementById('toast');t.textContent=m;t.classList.add('show');setTimeout(()=>t.classList.remove('show'),2500)}

let d=document.createElement('div');d.className='tile';d.style.left=x*68+'px';d.style.top=y*68+'px';

let el=document.createElement('div');el.className='furni';el.style.left=x*68+'px';el.style.top=y*68+'px';

let icon='🟦';for(let cat in CAT){let f=CAT[cat].find(i=>i[1]==v);if(f)icon=f[0];}

el.innerHTML=`<div style="font-size:28px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))">${icon}</div><div style="font-size:8px;font-weight:800;background:rgba(0,0,0,.7);padding:2px 5px;border-radius:6px;margin-top:2px;border:1px solid #ffffff15">${v}</div>`;

el.onclick=(e)=>{e.stopPropagation();if(buy){delete S.grid[k];S.money+=Math.floor((PRICE[v]||2000)*0.6);toast('Sold '+v);save();render();}};

buy=!buy;document.getElementById('buyBtn').classList.toggle('on',buy);document.getElementById('catalog').classList.toggle('open',buy);if(buy)buildTabs();

let b=document.createElement('div');b.className='ct'+(i==0?' active':'');b.textContent=c;b.onclick=()=>{document.querySelectorAll('.ct').forEach(x=>x.classList.remove('active'));b.classList.add('active');buildGrid(c)};

let d=document.createElement('div');d.className='it';d.innerHTML=`<div style="font-size:36px">${ic}</div><b>${nm}</b><s>₦${pr.toLocaleString()}</s>`;

d.onclick=()=>{sel=nm;toast('Tap ground for '+nm)};g.appendChild(d);

let pr=PRICE[sel]||3000;if(S.money<pr){toast('Money no reach! Go hustle');return}

S.money-=pr;S.grid[k]=sel;S.lvl=Math.floor(S.money/20000)+1;save();render();progress();

let msg=S.lvl==1?`You dey ${cur.hoods[0]}. ${cur.land} wan collect rent. Bus shout: "${cur.bus}"`:S.lvl<4?`You don move to ${hood}!`:S.lvl<7?`Big boy for ${cur.city}! Chop ${cur.food}`:`Odogwu! You don buy house for ${hood}, ${cur.city}!`;

document.getElementById('eventBox').innerHTML=`<b>${cur.city} - ${hood}</b><span>${msg}</span>`;

let ap=document.getElementById('apps');if(!ap.children.length){

let apps=[["💧","Hustle","main"],["🏍️","Okada","okada"],["⚽","Bet","bet"],["💻","Yahoo","laptop"],["🍲","Food","food"],["🏠","Rent","rent"]];

let d=document.createElement('div');d.className='ap';d.innerHTML=`<span>${ic}</span><span>${nm}</span>`;d.onclick=()=>phoneAct(act);ap.appendChild(d);

if(a=='rent'){let need=15000;if(S.money>=need){S.money-=need;S.energy=100;toast('Rent paid to '+cur.land);save()}else toast(cur.land+' dey knock! Need N'+need);}

else if(a=='food'){if(S.money>=800){S.money-=800;S.energy=Math.min(100,S.energy+30);toast('You chop '+cur.food);save()}else toast('No money for food')}

let gain=t=='main'?800+Math.floor(Math.random()*400):t=='okada'?1800+Math.floor(Math.random()*800):t=='bet'?Math.random()>0.55?3200:-1000:5000;

S.money=Math.max(0,S.money+gain);S.lvl=Math.floor(S.money/20000)+1;save();render();progress();

let s=STATES[k];let d=document.createElement('div');d.className='state';

d.innerHTML=`<div><b>${s.name}</b><small>${s.hoods[0]} -> ${s.hoods[2]} - ${s.food}</small></div><div class="badge">${s.city}</div>`;

document.getElementById('eventBox').innerHTML=`<b>Welcome to ${cur.city}!</b><span>You dey ${cur.hoods[0]}. Landlord na ${cur.land}. Hustle: ${cur.hustle}</span>`;