*{margin:0;padding:0;box-sizing:border-box}
body{overflow:hidden;background:#87ceeb;font-family:'Segoe UI',system-ui,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none;color:#fff}
canvas{display:block;width:100vw;height:100vh}
.pill{position:absolute;background:rgba(10,20,15,.5);backdrop-filter:blur(6px);border-radius:12px;padding:6px 10px;font-size:12px;font-weight:700;z-index:5;border:1px solid rgba(255,255,255,.12)}
#hud{top:10px;left:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;max-width:70vw}
#info{top:10px;right:10px;text-align:right;line-height:1.5;font-size:12px;display:none!important}
#hpbar{width:70px;height:8px;background:#400;border-radius:4px;overflow:hidden;display:inline-block;vertical-align:middle}#hpbar i{display:block;height:100%;background:#2ecc71;width:100%}
#act{position:absolute;bottom:42px;left:50%;transform:translateX(-50%);background:rgba(255,211,77,.4);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:22px;padding:10px 18px;font-size:13px;font-weight:700;box-shadow:0 3px 10px rgba(0,0,0,.3);display:none;z-index:9;backdrop-filter:blur(6px)}
#joy{position:absolute;left:16px;bottom:24px;width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.28);z-index:6}
#joy i{position:absolute;left:28px;top:28px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.45)}
#toast{position:absolute;top:90px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.8);padding:9px 18px;border-radius:18px;font-size:13px;opacity:0;transition:opacity .4s;pointer-events:none;z-index:20;text-align:center;max-width:85vw}
#bud{top:120px;right:10px;display:none;width:190px;font-size:12px}
#bud input{width:100%;margin:3px 0 7px;padding:6px;border-radius:8px;border:0;font-weight:700}
#bud button,#rolebtn{background:#27ae60;color:#fff;border:0;border-radius:8px;padding:7px 10px;font-weight:700;width:100%}
#rolebtn{position:absolute;right:10px;bottom:16px;width:auto;z-index:6;background:rgba(52,73,94,.4);backdrop-filter:blur(6px);font-size:12px;padding:6px 10px;border:1px solid rgba(255,255,255,.2);display:none!important}
#menu{position:absolute;inset:0;background:radial-gradient(circle at 50% 20%,#0b6b34,#06210f 75%);z-index:50;display:flex;flex-direction:column;align-items:center;padding:20px 14px;overflow:auto}
#menu h1{font-size:30px;letter-spacing:2px;text-shadow:0 3px 0 #064;margin-top:8px}#menu h1 b{color:#ffd34d}
#menu .sub{opacity:.8;font-size:13px;margin-bottom:12px}
#nm{padding:12px 16px;border-radius:12px;border:0;font-size:16px;font-weight:700;text-align:center;width:240px;margin-bottom:12px}
#roles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:520px;width:100%}
.role{background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2);border-radius:16px;padding:12px;text-align:left;cursor:pointer}
.role:active{transform:scale(.97);background:rgba(255,211,77,.25)}.role b{font-size:15px}.role div{font-size:11px;opacity:.8;margin-top:3px}.role .e{font-size:26px}
#err{color:#ff8a80;margin-top:10px;font-size:13px;min-height:18px}
#mm{position:absolute;top:84px;left:10px;width:90px;height:90px;border-radius:50%;z-index:5;display:none;box-shadow:0 3px 10px rgba(0,0,0,.45);border:2px solid rgba(255,255,255,.75)}
.vb{position:absolute;z-index:10;display:none;border:0;color:#fff;font-weight:700;font-size:12px;padding:12px 14px;border-radius:20px;box-shadow:0 2px 8px rgba(0,0,0,.3)}
#dest{top:222px;left:10px;font-size:12px;max-width:180px;display:none!important;line-height:1.3}
/* Vehicle controls — left side above joystick so they never cover FIRE/RELOAD */
#brk{left:16px;bottom:130px;right:auto;background:rgba(192,57,43,.45);backdrop-filter:blur(4px)}
#upb{left:16px;bottom:230px;right:auto;background:rgba(41,128,185,.45);backdrop-filter:blur(4px)}
#dnb{left:16px;bottom:180px;right:auto;background:rgba(41,128,185,.45);backdrop-filter:blur(4px)}
#xh{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;z-index:8;display:none;pointer-events:none;border:2px solid rgba(255,255,255,.85);border-radius:50%;box-shadow:0 0 4px #000}
#xh:before,#xh:after{content:'';position:absolute;background:#fff;box-shadow:0 0 3px #000}#xh:before{left:11px;top:-7px;width:2px;height:38px}#xh:after{top:11px;left:-7px;height:2px;width:38px}
#xh.hit{border-color:#ff3b30;transform:scale(1.35)}#xh.hit:before,#xh.hit:after{background:#ff3b30}
.gb{position:absolute;z-index:10;display:none;border:1px solid rgba(255,255,255,.25);border-radius:50%;color:#fff;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.3);touch-action:none}
/* Combat buttons — right side, clear of vehicle controls */
#fire{right:14px;bottom:100px;width:64px;height:64px;background:rgba(214,48,49,.4);font-size:12px;backdrop-filter:blur(4px)}
#aim{right:88px;bottom:108px;width:48px;height:48px;background:rgba(9,132,227,.4);font-size:11px;backdrop-filter:blur(4px)}
#rld{right:14px;bottom:176px;width:48px;height:48px;background:rgba(0,184,148,.4);font-size:11px;backdrop-filter:blur(4px)}
#swp{right:72px;bottom:180px;width:44px;height:44px;background:rgba(108,92,231,.4);font-size:10px;backdrop-filter:blur(4px)}
/* In vehicle/plane/heli/tank: FIRE big on right, no overlap */
body.veh-mode #fire{right:14px;bottom:90px;width:70px;height:70px;font-size:13px}
body.veh-mode #aim{right:96px;bottom:100px}
body.veh-mode #rld,body.veh-mode #swp{display:none!important}
body.veh-mode #wp{left:auto;right:14px;bottom:170px}
#wp{left:12px;bottom:130px;display:none;font-size:12px;background:rgba(10,20,15,.55)}
#lock{position:absolute;z-index:8;display:none;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:6px;align-items:flex-end;justify-content:center;font-size:10px;font-weight:900;pointer-events:none;padding-bottom:3px;text-shadow:0 1px 3px #000}
#lock.ok{border:2px solid #ff3b30;color:#ff3b30;box-shadow:0 0 12px rgba(255,59,48,.7)}#lock.no{border:2px dashed #aaa;color:#ddd}
#dmg{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(circle,rgba(255,0,0,0) 40%,rgba(255,0,0,.75) 100%)}
#scope{position:absolute;inset:0;z-index:7;pointer-events:none;display:none;background:radial-gradient(circle,rgba(0,0,0,0) 22%,rgba(0,0,0,.92) 23%)}
.dp{position:absolute;z-index:30;font-weight:900;font-size:22px;text-shadow:0 2px 4px #000;pointer-events:none;animation:dp .8s ease-out forwards}@keyframes dp{to{transform:translateY(-60px);opacity:0}}
#load{position:absolute;inset:0;background:#06210f;z-index:99;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700}

/* NaijaLife GTA polish: retain the original green, blue and gold palette */
#menu{background:radial-gradient(ellipse at top,#147d48 0%,#07351e 48%,#04170d 100%);gap:8px}
#menu h1{font-size:clamp(30px,7vw,44px);letter-spacing:2.5px;text-shadow:0 4px 0 #064b2c,0 8px 22px rgba(0,0,0,.45)}
#menu .sub{font-size:14px;line-height:1.5;text-align:center;max-width:320px}
.modebtn{transition:transform .18s ease,filter .18s ease; border:1px solid rgba(255,255,255,.22)!important}
.modebtn:active{transform:scale(.98);filter:brightness(1.12)}
#nm{max-width:90%;outline:none;box-shadow:0 4px 18px rgba(0,0,0,.2)}
#nm:focus{box-shadow:0 0 0 3px rgba(255,211,77,.45)}

#fsb{position:fixed;top:10px;right:10px;z-index:60;width:40px;height:40px;border:0;border-radius:12px;background:rgba(0,0,0,.45);color:#fff;font-size:20px;line-height:40px;padding:0;cursor:pointer;backdrop-filter:blur(4px);touch-action:manipulation}
#fsb:active{background:rgba(0,0,0,.7)}
body.plane-mode #upb,body.plane-mode #dnb{left:auto;right:14px}
body.plane-mode #upb{bottom:290px}
body.plane-mode #dnb{bottom:235px}

#jmp{right:146px;bottom:104px;width:54px;height:54px;background:rgba(241,196,15,.4);font-size:11px;backdrop-filter:blur(4px)}
body.veh-mode #jmp{display:none!important}

#smk{right:152px;bottom:100px;width:56px;height:56px;background:rgba(236,240,241,.45);color:#fff;font-size:11px;backdrop-filter:blur(4px)}
body.veh-mode #smk{right:158px;bottom:104px}

#tm{position:absolute;top:50px;left:50%;transform:translateX(-50%);z-index:30;text-align:center;pointer-events:auto;max-width:90vw}
#tover{position:fixed;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(0,0,0,.72);z-index:70;color:#fff;text-align:center}

#spbtn{position:fixed;top:10px;right:56px;z-index:60;width:40px;height:40px;border:0;border-radius:12px;background:rgba(0,0,0,.45);color:#fff;font-size:20px;padding:0;cursor:pointer;backdrop-filter:blur(4px)}
#spp{position:fixed;top:56px;right:10px;z-index:61;display:none;flex-direction:column;gap:5px;background:rgba(0,0,0,.72);color:#fff;border-radius:14px;padding:10px;min-width:170px;font-size:13px}
#spp button{border:0;border-radius:9px;padding:8px 10px;color:#fff;background:rgba(0,0,0,.65);font-weight:700;text-align:left;cursor:pointer}

#bino{right:206px;bottom:108px;width:52px;height:52px;background:rgba(52,73,94,.55);font-size:11px;line-height:1.1;backdrop-filter:blur(4px)}
#bov{position:absolute;inset:0;z-index:7;pointer-events:none;display:none;
 background:linear-gradient(#fff,#fff) 50% 50%/1px 44px no-repeat,linear-gradient(#fff,#fff) 50% 50%/44px 1px no-repeat,radial-gradient(circle closest-side at 50% 50%,rgba(0,0,0,0) 97%,#000 99.5%)}
#bovt{position:absolute;top:12px;left:50%;transform:translateX(-50%);color:#fff;font:700 12px sans-serif;letter-spacing:1px;background:rgba(0,0,0,.5);padding:4px 10px;border-radius:10px}

#cockpit{position:fixed;inset:0;z-index:6;pointer-events:none;display:none}
#cockpit .ckl,#cockpit .ckr{position:absolute;top:0;bottom:0;width:15%;background:linear-gradient(90deg,#07090c,#1a1f26)}
#cockpit .ckl{left:0;clip-path:polygon(0 0,100% 0,38% 100%,0 100%)}
#cockpit .ckr{right:0;transform:scaleX(-1);clip-path:polygon(0 0,100% 0,38% 100%,0 100%)}
#cockpit .ckt{position:absolute;top:0;left:0;right:0;height:11%;background:linear-gradient(#07090c,#161b21 70%,rgba(22,27,33,0));clip-path:polygon(0 0,100% 0,88% 100%,12% 100%)}
#cockpit .ckd{position:absolute;left:0;right:0;bottom:0;height:24%;display:flex;justify-content:center;align-items:center;gap:4vw;background:linear-gradient(#262c34,#0b0d10 80%);border-top:3px solid #3a424c;clip-path:polygon(0 38%,16% 0,84% 0,100% 38%,100% 100%,0 100%)}
#cockpit .cg{display:flex;flex-direction:column;align-items:center;justify-content:center;width:min(15vw,96px);height:min(15vw,96px);border-radius:50%;border:3px solid #596572;background:radial-gradient(circle,#0f2a1c,#05100a);color:#7CFC9a;font-family:monospace;margin-top:5%}
#cockpit .cg b{font-size:min(4.5vw,24px)} #cockpit .cg i{font-size:min(1.9vw,9px);font-style:normal;opacity:.8;text-align:center}
#cockpit .cg.big{width:min(19vw,120px);height:min(19vw,120px);color:#ffd34d;border-color:#8a7a3a}

#clk{position:fixed;top:14px;right:104px;z-index:30;font-size:12px;font-weight:700;pointer-events:none}


/* Account registration, persistent profile summary, bank and billboard forms */
.auth-panel,.account-summary{width:min(92vw,390px);padding:16px;margin:4px auto 10px;border:1px solid rgba(255,255,255,.2);border-radius:18px;background:rgba(0,0,0,.28);box-shadow:0 8px 30px rgba(0,0,0,.25);color:#fff}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.auth-tabs button,.auth-submit{border:0;border-radius:11px;padding:11px;color:#fff;background:rgba(255,255,255,.13);font-weight:800;cursor:pointer}
.auth-tabs button.active,.auth-submit{background:#e3a921;color:#182116}
#signupForm,#signinForm{display:flex;flex-direction:column;gap:7px;text-align:left}
#signupForm label,#signinForm label,.game-name-label{font-size:12px;font-weight:800;color:#dff7e8;margin-top:3px}
#signupForm input,#signinForm input,.game-modal input,.game-modal select,.game-modal textarea{width:100%;min-height:42px;border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:10px 12px;background:#f5f7f8;color:#142019;font:600 15px system-ui,sans-serif}
#signupForm input:focus,#signinForm input:focus,.game-modal input:focus,.game-modal select:focus,.game-modal textarea:focus{outline:3px solid rgba(255,211,77,.4)}
#authStatus{min-height:20px;margin-top:10px;color:#ffdd86;font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.account-summary{text-align:center;font-size:14px;line-height:1.6;border-color:rgba(255,211,77,.4)}
.account-summary b{font-size:18px;color:#ffdf70}
#accountStats,#accountWallet{font-size:13px;opacity:.9}
#gameEntry{gap:4px}
#nm{margin:4px 0 0}
#err{max-width:330px;text-align:center;line-height:1.4}
.game-modal{position:fixed;z-index:80;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,440px);max-height:86dvh;overflow:auto;padding:20px 16px 16px;border:2px solid #f7c948;border-radius:18px;background:rgba(8,13,20,.98);box-shadow:0 18px 70px rgba(0,0,0,.7);color:#fff;font:500 14px/1.45 system-ui,sans-serif;touch-action:auto}
.game-modal h2{margin:0 34px 10px 0;color:#f7c948;font-size:20px;line-height:1.25}
.game-modal label{display:block;margin:9px 0 4px;font-size:12px;font-weight:800;color:#d8e8df}
.game-modal textarea{min-height:100px;resize:vertical}
.game-modal input[type=file]{height:auto;padding:8px;background:#18211d;color:#fff;font-size:12px}
.modal-x{position:absolute;top:9px;right:10px;width:36px;height:36px;border:0;border-radius:50%;background:#4c5663;color:#fff;font-size:25px;line-height:1;cursor:pointer;touch-action:manipulation}
.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:9px 0}
.modal-actions button,.modal-secondary,.modal-primary{width:100%;min-height:42px;margin:5px 0;padding:10px;border:0;border-radius:10px;background:#237647;color:#fff;font-weight:800;cursor:pointer;touch-action:manipulation}
.modal-primary{background:#e3a921;color:#142019}
.modal-secondary{background:#284d71;color:#fff}
.game-modal button:disabled{opacity:.5;cursor:wait}
.game-modal hr{margin:12px 0;border:0;border-top:1px solid rgba(255,255,255,.18)}
.modal-note,.modal-status{margin-top:6px;font-size:12px;line-height:1.5;color:#c4d7cb;overflow-wrap:anywhere}
.modal-status{color:#ffdd86;min-height:18px}
.account-balances{margin:7px 0 12px;color:#e9f3ec;font-weight:700}
@media(max-height:760px){#menu{padding-top:10px;padding-bottom:12px;gap:5px}#menu h1{margin-top:2px}.auth-panel{padding:12px}.game-modal{max-height:90dvh}}