*{
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}

html,body{
    width:100%;
    height:100%;
    margin:0;
    overflow:hidden;
    background:#07100b;
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

button{
    font:inherit;
}

#gameShell{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#07100b;
}

#gameCanvas{
    width:100%;
    height:100%;
    display:block;
    touch-action:none;
    outline:none;
}

#loadingScreen{
    position:absolute;
    inset:0;
    z-index:100;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:
      radial-gradient(circle at center,#173c27 0,#09140d 42%,#030806 100%);
    color:white;
    transition:opacity .45s ease,visibility .45s ease;
}

#loadingScreen.hide{
    opacity:0;
    visibility:hidden;
}

.brandMark{
    display:grid;
    place-items:center;
    width:84px;
    height:84px;
    border-radius:24px;
    background:linear-gradient(145deg,#0ddc68,#087d3d);
    color:#fff;
    font-weight:1000;
    font-size:25px;
    box-shadow:0 15px 60px rgba(0,255,121,.25);
}

.loadingTitle{
    margin-top:20px;
    font-weight:900;
    font-size:27px;
}

.loadingSub{
    color:#aebbb2;
    margin-top:7px;
    font-size:14px;
}

.loader{
    width:190px;
    height:5px;
    margin-top:24px;
    border-radius:20px;
    background:#223329;
    overflow:hidden;
}

.loader span{
    display:block;
    width:55%;
    height:100%;
    background:#10da6c;
    border-radius:20px;
    animation:load 1.1s ease-in-out infinite alternate;
}

@keyframes load{
    from{transform:translateX(-70%)}
    to{transform:translateX(160%)}
}

#hudTop{
    position:absolute;
    z-index:15;
    left:14px;
    right:14px;
    top:14px;
    display:flex;
    justify-content:space-between;
    gap:12px;
    pointer-events:none;
}

.brand,.moneyBox{
    backdrop-filter:blur(14px);
    background:rgba(7,15,10,.78);
    border:1px solid rgba(255,255,255,.12);
    color:white;
    box-shadow:0 10px 30px rgba(0,0,0,.18);
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 12px 9px 9px;
    border-radius:18px;
}

.logo{
    width:38px;
    height:38px;
    border-radius:12px;
    display:grid;
    place-items:center;
    background:#0abd5b;
    font-size:12px;
    font-weight:1000;
}

.brand strong{
    display:block;
    font-size:13px;
}

.brand small{
    display:block;
    margin-top:2px;
    color:#a4b1a8;
    font-size:10px;
}

.moneyBox{
    padding:8px 15px;
    border-radius:18px;
    min-width:122px;
}

.moneyBox span{
    display:block;
    color:#9dac9f;
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.moneyBox strong{
    display:block;
    margin-top:2px;
    font-size:18px;
    color:#5df291;
}

#stats{
    position:absolute;
    z-index:14;
    top:83px;
    left:14px;
    width:min(250px,calc(100% - 28px));
    display:grid;
    gap:6px;
    pointer-events:none;
}

.stat{
    background:rgba(7,15,10,.69);
    border:1px solid rgba(255,255,255,.09);
    backdrop-filter:blur(10px);
    padding:7px 10px;
    border-radius:12px;
}

.statRow{
    display:flex;
    justify-content:space-between;
    color:white;
    font-size:10px;
    font-weight:750;
}

.bar{
    margin-top:5px;
    height:4px;
    background:rgba(255,255,255,.1);
    border-radius:20px;
    overflow:hidden;
}

.bar i{
    display:block;
    height:100%;
    border-radius:20px;
    background:#18df72;
    width:100%;
    transition:width .3s ease;
}

#hungerBar{
    background:#f8ad2a;
}

#energyBar{
    background:#34a6ff;
}

#locationChip{
    position:absolute;
    z-index:14;
    top:83px;
    right:14px;
    padding:9px 13px;
    border-radius:13px;
    color:white;
    background:rgba(7,15,10,.7);
    border:1px solid rgba(255,255,255,.1);
    backdrop-filter:blur(10px);
    font-size:11px;
    font-weight:800;
    pointer-events:none;
}

#objective{
    position:absolute;
    z-index:14;
    left:50%;
    transform:translateX(-50%);
    top:16px;
    padding:8px 15px;
    min-width:170px;
    text-align:center;
    border-radius:14px;
    color:white;
    background:rgba(7,15,10,.72);
    border:1px solid rgba(255,255,255,.1);
    backdrop-filter:blur(10px);
    pointer-events:none;
}

#objective small{
    display:block;
    color:#7be49d;
    font-size:8px;
    font-weight:900;
    letter-spacing:.1em;
}

#objective strong{
    font-size:11px;
}

#nearby{
    position:absolute;
    z-index:14;
    left:50%;
    bottom:90px;
    transform:translateX(-50%);
    width:min(390px,calc(100% - 130px));
    min-height:61px;
    padding:10px 12px;
    display:flex;
    align-items:center;
    gap:10px;
    color:white;
    background:rgba(6,14,9,.82);
    border:1px solid rgba(255,255,255,.11);
    backdrop-filter:blur(13px);
    border-radius:16px;
    pointer-events:none;
}

#nearbyIcon{
    display:grid;
    place-items:center;
    width:37px;
    height:37px;
    flex:0 0 37px;
    border-radius:12px;
    background:rgba(27,218,105,.15);
    font-size:18px;
}

#nearby small{
    display:block;
    color:#87a08f;
    font-size:8px;
    letter-spacing:.11em;
    font-weight:900;
}

#nearby strong{
    display:block;
    font-size:12px;
}

#nearby p{
    margin:2px 0 0;
    color:#adb9b0;
    font-size:9px;
}

#interactBtn{
    position:absolute;
    z-index:20;
    right:22px;
    bottom:26px;
    min-width:100px;
    height:58px;
    padding:0 17px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border:0;
    border-radius:18px;
    color:#052012;
    background:#31e37b;
    box-shadow:0 10px 35px rgba(29,227,119,.28);
    font-size:11px;
    cursor:pointer;
}

#interactBtn span{
    font-size:18px;
}

#interactBtn:active{
    transform:scale(.96);
}

#joystick{
    position:absolute;
    z-index:20;
    left:20px;
    bottom:19px;
    width:92px;
    height:92px;
}

#joyBase{
    position:relative;
    width:92px;
    height:92px;
    border-radius:50%;
    background:rgba(5,13,8,.38);
    border:2px solid rgba(255,255,255,.22);
    backdrop-filter:blur(5px);
    touch-action:none;
}

#joyKnob{
    position:absolute;
    left:50%;
    top:50%;
    width:42px;
    height:42px;
    margin-left:-21px;
    margin-top:-21px;
    border-radius:50%;
    background:rgba(255,255,255,.85);
    box-shadow:0 4px 14px rgba(0,0,0,.22);
    transform:translate(0,0);
}

#desktopHint{
    position:absolute;
    z-index:13;
    bottom:15px;
    left:50%;
    transform:translateX(-50%);
    padding:7px 11px;
    border-radius:10px;
    color:#d1d9d3;
    background:rgba(4,10,6,.55);
    font-size:9px;
    pointer-events:none;
}

#toast{
    position:absolute;
    z-index:70;
    left:50%;
    top:155px;
    transform:translate(-50%,-15px);
    opacity:0;
    visibility:hidden;
    max-width:calc(100% - 40px);
    padding:10px 15px;
    border-radius:12px;
    background:rgba(5,12,7,.9);
    color:white;
    border:1px solid rgba(255,255,255,.1);
    font-size:12px;
    font-weight:700;
    text-align:center;
    transition:.25s ease;
}

#toast.show{
    opacity:1;
    visibility:visible;
    transform:translate(-50%,0);
}

#modalBackdrop{
    position:absolute;
    z-index:60;
    inset:0;
    display:grid;
    place-items:center;
    padding:20px;
    background:rgba(0,0,0,.58);
    backdrop-filter:blur(8px);
}

#modalBackdrop.hidden{
    display:none;
}

#gameModal{
    position:relative;
    width:min(390px,100%);
    padding:25px;
    border-radius:24px;
    color:white;
    background:#0d1811;
    border:1px solid rgba(255,255,255,.11);
    box-shadow:0 25px 80px rgba(0,0,0,.4);
}

#modalIcon{
    font-size:35px;
}

#gameModal h2{
    margin:12px 0 8px;
    font-size:22px;
}

#gameModal p{
    margin:0;
    color:#b6c2b9;
    line-height:1.55;
    font-size:13px;
}

#modalAction{
    width:100%;
    margin-top:21px;
    padding:14px 16px;
    border:0;
    border-radius:14px;
    background:#24d66e;
    color:#062112;
    font-weight:900;
    cursor:pointer;
}

#modalClose{
    position:absolute;
    right:14px;
    top:14px;
    width:35px;
    height:35px;
    border:0;
    border-radius:50%;
    background:#1a281f;
    color:white;
    font-size:20px;
    cursor:pointer;
}

@media(max-width:700px){
    #objective{
        top:145px;
    }

    #locationChip{
        top:190px;
    }

    #desktopHint{
        display:none;
    }

    #nearby{
        bottom:122px;
        width:calc(100% - 34px);
    }

    #interactBtn{
        right:18px;
        bottom:29px;
    }

    #joystick{
        left:18px;
        bottom:21px;
    }
}

@media(min-width:900px){
    #joystick{
        opacity:.35;
    }
}


/* ==================================================
   NAIJAWORLDLIFE V0.3
   AUTH + PHONE + CHAT
================================================== */

.hidden{
    display:none !important;
}

#authScreen{
    position:absolute;
    inset:0;
    z-index:200;
    display:grid;
    place-items:center;
    padding:20px;
    overflow:auto;
    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(20,157,83,.28),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #07120c,
            #020604
        );
}

.authCard{
    width:min(420px,100%);
    padding:28px;
    border-radius:28px;
    color:#fff;
    background:rgba(10,22,14,.94);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 30px 80px rgba(0,0,0,.35);
}

.authLogo{
    width:68px;
    height:68px;
    margin:auto;
    display:grid;
    place-items:center;
    border-radius:20px;
    background:#16cf68;
    color:#062211;
    font-weight:1000;
    font-size:19px;
}

.authCard h1{
    margin:16px 0 5px;
    text-align:center;
    font-size:27px;
}

.authCard > p{
    margin:0 0 23px;
    color:#9ca9a0;
    text-align:center;
}

.authTabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px;
    padding:4px;
    margin-bottom:18px;
    border-radius:14px;
    background:#07110b;
}

.authTabs button{
    border:0;
    padding:11px;
    border-radius:11px;
    background:transparent;
    color:#829188;
    font-weight:800;
}

.authTabs button.active{
    background:#17261c;
    color:white;
}

.authCard form{
    display:grid;
    gap:13px;
}

.authCard label{
    display:grid;
    gap:6px;
    color:#bbc5be;
    font-size:12px;
    font-weight:700;
}

.authCard input,
.playerSearchRow input,
#messageInput,
#transferAmount{
    width:100%;
    min-height:46px;
    padding:0 13px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:12px;
    outline:none;
    background:#08110c;
    color:#fff;
    font-size:16px;
}

.authCard input:focus,
.playerSearchRow input:focus,
#messageInput:focus,
#transferAmount:focus{
    border-color:#25dc76;
}

.authPrimary{
    min-height:49px;
    margin-top:5px;
    border:0;
    border-radius:14px;
    background:#29dc75;
    color:#062010;
    font-weight:900;
    cursor:pointer;
}

#authError{
    min-height:21px;
    margin-top:12px;
    color:#ff8e8e;
    text-align:center;
    font-size:12px;
}

.virtualNote{
    display:block;
    margin-top:12px;
    color:#718078;
    text-align:center;
    line-height:1.4;
}

#phoneBtn{
    position:absolute;
    z-index:25;
    right:20px;
    top:145px;
    width:52px;
    height:52px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:17px;
    background:rgba(6,15,9,.82);
    color:#fff;
    font-size:23px;
    backdrop-filter:blur(10px);
    cursor:pointer;
}

#phoneBackdrop{
    position:absolute;
    z-index:120;
    inset:0;
    display:flex;
    justify-content:flex-end;
    padding:14px;
    background:rgba(0,0,0,.5);
    backdrop-filter:blur(5px);
}

#phone{
    width:min(410px,100%);
    height:100%;
    max-height:760px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border-radius:31px;
    background:#08110c;
    color:#fff;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 25px 80px rgba(0,0,0,.45);
}

.phoneHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:19px 19px 10px;
}

.phoneHeader small{
    display:block;
    color:#7e9184;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.1em;
}

.phoneHeader strong{
    display:block;
    margin-top:2px;
}

#phoneClose{
    width:39px;
    height:39px;
    border:0;
    border-radius:50%;
    background:#15221a;
    color:#fff;
    font-size:22px;
    cursor:pointer;
}

.phoneBalance{
    margin:4px 17px 12px;
    padding:15px;
    border-radius:17px;
    background:
        linear-gradient(
            135deg,
            #126c3b,
            #0b3d24
        );
}

.phoneBalance small{
    display:block;
    font-size:9px;
    opacity:.72;
    letter-spacing:.1em;
}

.phoneBalance strong{
    display:block;
    margin-top:3px;
    font-size:24px;
}

.phoneTabs{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:4px;
    margin:0 17px 12px;
    padding:4px;
    border-radius:14px;
    background:#0e1912;
}

.phoneTabs button{
    border:0;
    min-height:39px;
    border-radius:10px;
    background:transparent;
    color:#829087;
    font-weight:800;
    cursor:pointer;
}

.phoneTabs button.active{
    color:white;
    background:#1b2b20;
}

.phonePage{
    flex:1;
    min-height:0;
    overflow:auto;
    padding:3px 17px 17px;
}

.phonePage h3{
    margin:9px 0 14px;
}

.playerSearchRow{
    display:grid;
    grid-template-columns:1fr auto;
    gap:7px;
}

.playerSearchRow button{
    border:0;
    padding:0 15px;
    border-radius:12px;
    background:#25d971;
    color:#05200f;
    font-weight:900;
}

#playerResults{
    margin-top:10px;
}

.playerResult{
    width:100%;
    display:flex;
    align-items:center;
    gap:11px;
    padding:11px;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.06);
    background:transparent;
    color:white;
    text-align:left;
    cursor:pointer;
}

.playerResultAvatar{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    flex:0 0 42px;
    border-radius:50%;
    background:#173923;
}

.playerResult span{
    display:block;
}

.playerResult small{
    display:block;
    color:#7f9086;
}

.phoneEmpty{
    margin-top:35px;
    padding:22px;
    color:#6f8176;
    text-align:center;
    font-size:12px;
}

#conversationBack{
    border:0;
    padding:6px 0;
    background:transparent;
    color:#6ee697;
    font-weight:800;
}

.conversationPerson{
    padding:8px 0 12px;
}

.conversationPerson strong,
.conversationPerson small{
    display:block;
}

.conversationPerson small{
    color:#819088;
    margin-top:2px;
}

#messages{
    min-height:280px;
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:5px 0 12px;
}

.chatBubble{
    align-self:flex-start;
    max-width:82%;
    padding:10px 12px;
    border-radius:15px 15px 15px 4px;
    background:#152219;
    color:#e9efeb;
    font-size:13px;
    line-height:1.4;
}

.chatBubble.mine{
    align-self:flex-end;
    border-radius:15px 15px 4px 15px;
    background:#17683d;
}

.chatBubble time{
    display:block;
    margin-top:4px;
    color:rgba(255,255,255,.48);
    font-size:8px;
}

.transferBubble{
    width:min(260px,87%);
    padding:13px;
    border:1px solid rgba(64,225,121,.2);
    border-radius:17px;
    background:
        linear-gradient(
            135deg,
            rgba(27,119,65,.55),
            rgba(12,40,23,.8)
        );
}

.transferBubble.mine{
    align-self:flex-end;
}

.transferBubble.received{
    align-self:flex-start;
}

.transferBubble small{
    display:block;
    color:#8fa899;
    font-size:9px;
    text-transform:uppercase;
}

.transferBubble strong{
    display:block;
    margin:4px 0;
    color:#67f298;
    font-size:21px;
}

.transferBubble span{
    font-size:10px;
    color:#b2c0b6;
}

#messageForm{
    position:sticky;
    bottom:0;
    display:grid;
    grid-template-columns:44px 1fr auto;
    gap:6px;
    padding-top:9px;
    background:#08110c;
}

#messageForm button{
    border:0;
    min-height:45px;
    padding:0 13px;
    border-radius:12px;
    background:#20cf68;
    color:#05200e;
    font-weight:900;
}

#moneyToggle{
    font-size:18px;
}

#sendMoneyPanel{
    padding:13px;
    margin-bottom:5px;
    border-radius:16px;
    background:#101c14;
    border:1px solid rgba(255,255,255,.08);
}

.moneySendTitle{
    margin-bottom:9px;
    font-weight:900;
}

.sendMoneyRow{
    display:flex;
    align-items:center;
    gap:7px;
}

.sendMoneyRow span{
    font-size:22px;
    color:#52ec8c;
}

.sendMoneyActions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    margin-top:9px;
}

.sendMoneyActions button{
    min-height:42px;
    border:0;
    border-radius:11px;
    background:#17261c;
    color:white;
    font-weight:800;
}

#confirmTransfer{
    background:#27d971;
    color:#05200f;
}

#sendMoneyPanel > small{
    display:block;
    margin-top:8px;
    color:#6f8276;
}

.walletHero{
    padding:21px;
    border-radius:19px;
    background:
        linear-gradient(
            135deg,
            #147342,
            #0a3c22
        );
}

.walletHero small{
    display:block;
    font-size:9px;
    opacity:.7;
}

.walletHero strong{
    display:block;
    margin-top:4px;
    font-size:29px;
}

#phoneWallet h4{
    margin:22px 0 9px;
    color:#94a59a;
}

.transaction{
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:12px 2px;
    border-bottom:1px solid rgba(255,255,255,.06);
}

.transaction div:first-child{
    min-width:0;
}

.transaction strong{
    display:block;
    font-size:12px;
}

.transaction small{
    display:block;
    margin-top:3px;
    color:#718178;
    font-size:9px;
}

.transactionAmount{
    font-weight:900;
    white-space:nowrap;
}

.transactionAmount.in{
    color:#5eea8e;
}

.transactionAmount.out{
    color:#ef9292;
}

.profileCard{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:28px 18px;
    border-radius:20px;
    background:#101a13;
}

.profileAvatar{
    width:72px;
    height:72px;
    display:grid;
    place-items:center;
    margin-bottom:12px;
    border-radius:50%;
    background:#1a4228;
    font-size:32px;
}

.profileCard strong{
    font-size:19px;
}

.profileCard span{
    margin-top:2px;
    color:#6ee395;
}

.profileCard small{
    margin-top:7px;
    color:#708077;
}

#logoutBtn{
    width:100%;
    min-height:48px;
    margin-top:16px;
    border:1px solid rgba(255,100,100,.2);
    border-radius:14px;
    background:#241314;
    color:#ff9c9c;
    font-weight:900;
}

@media(max-width:700px){

    #phoneBtn{
        top:auto;
        right:18px;
        bottom:98px;
    }

    #phoneBackdrop{
        padding:0;
    }

    #phone{
        width:100%;
        max-height:none;
        height:100%;
        border-radius:0;
        border:0;
    }

}

/* =========================================
   V0.3.1 GUEST ACCESS
========================================= */

.guestBtn{
    width:100%;
    min-height:48px;
    margin-top:13px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:14px;
    background:#121e16;
    color:#fff;
    font-weight:900;
    cursor:pointer;
}

.guestBtn:active{
    transform:scale(.98);
}

.guestNote{
    margin-top:8px;
    color:#708078;
    text-align:center;
    font-size:10px;
    line-height:1.45;
}

/* V0.4.1 */
#gameCanvas{
    image-rendering:auto;
}

@media(max-width:700px){
    #stats{
        width:190px;
    }
}

/* ==================================================
   NAIJAWORLDLIFE V0.4.3
   CLEANER REAL-LIFE GAME PRESENTATION
================================================== */

#gameCanvas{
    filter:saturate(.88) contrast(1.02);
}

#hudTop{
    top:10px;
    left:10px;
    right:10px;
}

.brand,
.moneyBox,
.stat,
#locationChip,
#objective,
#nearby{
    background:rgba(8,14,10,.72);
    border-color:rgba(255,255,255,.07);
    box-shadow:none;
}

#stats{
    top:72px;
}

#objective{
    top:12px;
}

#locationChip{
    top:72px;
}

#nearby{
    background:rgba(8,14,10,.78);
}

#interactBtn{
    box-shadow:none;
}

@media(max-width:700px){

    #stats{
        width:178px;
    }

    #objective{
        top:130px;
    }

    #locationChip{
        top:173px;
    }

    #phoneBtn{
        width:46px;
        height:46px;
        border-radius:14px;
    }
}


/* ==================================================
   NAIJAWORLDLIFE V0.5 MOBILE GAME FRAME
================================================== */

@media(max-width:700px){

    #hudTop{
        top:10px;
        left:10px;
        right:10px;
    }

    .brand{
        padding:7px 10px 7px 7px;
        border-radius:15px;
    }

    .logo{
        width:34px;
        height:34px;
        border-radius:10px;
    }

    .brand strong{
        font-size:12px;
    }

    .brand small{
        font-size:8px;
    }

    .moneyBox{
        min-width:108px;
        padding:7px 11px;
        border-radius:15px;
    }

    .moneyBox strong{
        font-size:16px;
    }

    #stats{
        top:67px;
        width:165px;
        gap:4px;
        left:10px;
    }

    .stat{
        padding:5px 8px;
        border-radius:9px;
    }

    .statRow{
        font-size:9px;
    }

    #objective{
        top:130px;
        padding:6px 11px;
        min-width:150px;
        border-radius:12px;
    }

    #objective strong{
        font-size:10px;
    }

    #locationChip{
        top:172px;
        right:10px;
        padding:7px 10px;
        border-radius:11px;
        font-size:9px;
    }

    #nearby{
        left:12px;
        right:12px;
        transform:none;
        width:auto;
        bottom:105px;
        min-height:54px;
        border-radius:15px;
    }

    #joystick{
        width:78px;
        height:78px;
        left:18px;
        bottom:15px;
    }

    #joyBase{
        width:78px;
        height:78px;
    }

    #joyKnob{
        width:36px;
        height:36px;
        margin-left:-18px;
        margin-top:-18px;
    }

    #interactBtn{
        right:18px;
        bottom:22px;
        height:52px;
        min-width:92px;
        padding:0 13px;
        border-radius:15px;
    }

    #phoneBtn{
        top:auto;
        right:18px;
        bottom:83px;
        width:44px;
        height:44px;
    }

}


/* less glass / glow, more game-like */
.brand,
.moneyBox,
.stat,
#objective,
#locationChip,
#nearby{
    backdrop-filter:blur(6px);
    box-shadow:none;
}


/* ==================================================
   V0.5.1 CONTROLLER
================================================== */

#joyBase{
    background:rgba(8,13,10,.30);
    border:1px solid rgba(255,255,255,.30);
    box-shadow:
        inset 0 0 0 8px rgba(255,255,255,.025);
}

#joyKnob{
    background:rgba(244,247,244,.92);
    border:1px solid rgba(0,0,0,.12);
    box-shadow:
        0 3px 12px rgba(0,0,0,.25);
}

@media(max-width:700px){

    #joystick,
    #joyBase{
        width:92px;
        height:92px;
    }

    #joyKnob{
        width:42px;
        height:42px;
        margin-left:-21px;
        margin-top:-21px;
    }

}


/* =========================================================
   NAIJAWORLDLIFE V0.5.3
   CLEAN COMPACT MOBILE HUD
========================================================= */


/* ---------------------------
   TOP HUD
--------------------------- */

#hudTop{
    top:12px;
    left:12px;
    right:12px;
    gap:8px;
    align-items:flex-start;
}

.brand{
    min-height:55px;
    padding:7px 11px 7px 7px;

    border-radius:19px;

    background:
        rgba(246,248,246,.95);

    border:
        1px solid rgba(0,0,0,.07);

    box-shadow:
        0 6px 22px rgba(0,0,0,.10);

    backdrop-filter:blur(12px);
}

.logo{
    width:40px;
    height:40px;

    border-radius:13px;

    background:
        linear-gradient(
            145deg,
            #20d979,
            #10a958
        );

    color:#fff;

    font-size:12px;
    font-weight:1000;
}

.brand strong{
    color:#152019;
    font-size:13px;
    font-weight:900;
}

.brand small{
    color:#768078;
    font-size:9px;
    font-weight:650;
}


/* ---------------------------
   WALLET CARD
--------------------------- */

.moneyBox{
    min-width:132px;
    min-height:55px;

    padding:8px 14px;

    border-radius:19px;

    background:
        rgba(247,249,247,.96);

    border:
        1px solid rgba(0,0,0,.07);

    box-shadow:
        0 6px 22px rgba(0,0,0,.10);

    backdrop-filter:blur(12px);
}

.moneyBox span{
    color:#737c75;

    font-size:8px;
    font-weight:900;

    letter-spacing:.13em;
}

.moneyBox strong{
    margin-top:1px;

    color:#159f5a;

    font-size:20px;
    line-height:1.1;

    font-weight:1000;

    letter-spacing:-.03em;
}


/* =========================================================
   PLAYER NEEDS
========================================================= */

#stats{
    top:76px;
    left:12px;

    width:190px;

    gap:5px;
}

.stat{
    padding:7px 10px 8px;

    border-radius:14px;

    background:
        rgba(248,249,248,.94);

    border:
        1px solid rgba(0,0,0,.065);

    box-shadow:
        0 4px 15px rgba(0,0,0,.08);

    backdrop-filter:blur(10px);
}

.statRow{
    color:#263129;

    font-size:10px;
    font-weight:850;
}

.statRow b{
    color:#172019;
    font-weight:1000;
}

.bar{
    height:5px;

    margin-top:5px;

    background:
        rgba(20,28,22,.09);

    border-radius:100px;
}

.bar i{
    border-radius:100px;
}


/* =========================================================
   CURRENT GOAL
========================================================= */

#objective{
    top:15px;

    min-width:174px;

    padding:8px 15px;

    border-radius:17px;

    background:
        rgba(249,250,249,.95);

    border:
        1px solid rgba(0,0,0,.065);

    box-shadow:
        0 5px 18px rgba(0,0,0,.09);

    backdrop-filter:blur(10px);
}

#objective small{
    color:#169557;

    font-size:7px;
    font-weight:1000;

    letter-spacing:.14em;
}

#objective strong{
    color:#182119;

    font-size:11px;
    font-weight:900;
}


/* =========================================================
   LOCATION
========================================================= */

#locationChip{
    top:78px;
    right:12px;

    padding:9px 13px;

    border-radius:16px;

    color:#222b25;

    background:
        rgba(249,250,249,.95);

    border:
        1px solid rgba(0,0,0,.065);

    box-shadow:
        0 5px 18px rgba(0,0,0,.08);

    backdrop-filter:blur(10px);

    font-size:10px;
    font-weight:900;
}


/* =========================================================
   NEARBY CARD
========================================================= */

#nearby{
    left:14px;
    right:14px;

    bottom:102px;

    width:auto;

    transform:none;

    min-height:62px;

    padding:9px 11px;

    border-radius:20px;

    color:#162019;

    background:
        rgba(249,250,249,.96);

    border:
        1px solid rgba(0,0,0,.075);

    box-shadow:
        0 8px 28px rgba(0,0,0,.10);

    backdrop-filter:blur(12px);
}

#nearbyIcon{
    width:42px;
    height:42px;

    flex:0 0 42px;

    border-radius:14px;

    background:
        rgba(22,171,91,.11);

    font-size:18px;
}

#nearby small{
    color:#758078;

    font-size:7px;
    font-weight:1000;

    letter-spacing:.14em;
}

#nearby strong{
    color:#1c261f;

    font-size:13px;
    font-weight:900;
}

#nearby p{
    color:#7b867f;

    margin-top:1px;

    font-size:9px;
}


/* =========================================================
   INTERACT BUTTON
========================================================= */

#interactBtn{
    right:18px;
    bottom:25px;

    height:54px;

    min-width:107px;

    padding:0 16px;

    border-radius:18px;

    background:
        rgba(247,249,247,.96);

    color:#177344;

    border:
        1px solid rgba(0,0,0,.07);

    box-shadow:
        0 7px 22px rgba(0,0,0,.12);

    font-size:10px;
    font-weight:1000;
}

#interactBtn span{
    font-size:18px;
}


/* =========================================================
   PHONE BUTTON
========================================================= */

#phoneBtn{
    width:46px;
    height:46px;

    right:19px;
    bottom:88px;

    border-radius:16px;

    background:
        rgba(248,249,248,.96);

    color:#172019;

    border:
        1px solid rgba(0,0,0,.08);

    box-shadow:
        0 5px 18px rgba(0,0,0,.11);

    font-size:19px;
}


/* =========================================================
   ANALOG
========================================================= */

#joystick{
    left:18px;
    bottom:16px;

    width:88px;
    height:88px;
}

#joyBase{
    width:88px;
    height:88px;

    border:
        1px solid rgba(255,255,255,.60);

    background:
        rgba(245,247,245,.28);

    box-shadow:
        inset 0 0 0 7px rgba(255,255,255,.08),
        0 5px 18px rgba(0,0,0,.10);

    backdrop-filter:blur(8px);
}

#joyKnob{
    width:40px;
    height:40px;

    margin-left:-20px;
    margin-top:-20px;

    background:
        rgba(250,251,250,.96);

    box-shadow:
        0 4px 12px rgba(0,0,0,.18);
}


/* =========================================================
   REMOVE DARK OLD HUD STYLE
========================================================= */

.brand,
.moneyBox,
.stat,
#objective,
#locationChip,
#nearby{
    color:#172019;
}


/* =========================================================
   PHONE LAYOUT
========================================================= */

@media(max-width:700px){

    #hudTop{
        top:10px;
        left:10px;
        right:10px;
    }

    .brand{
        min-height:52px;
        padding:6px 9px 6px 6px;
    }

    .logo{
        width:38px;
        height:38px;
    }

    .moneyBox{
        min-width:122px;
        min-height:52px;

        padding:7px 12px;
    }

    .moneyBox strong{
        font-size:18px;
    }


    #stats{
        top:70px;
        left:10px;

        width:176px;
    }


    #objective{
        top:126px;

        min-width:154px;

        padding:7px 11px;
    }


    #locationChip{
        top:165px;
        right:10px;

        padding:8px 11px;
    }


    #nearby{
        left:12px;
        right:12px;

        bottom:102px;
    }


    #phoneBtn{
        right:15px;
        bottom:86px;
    }


    #interactBtn{
        right:15px;
        bottom:23px;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media(max-width:380px){

    .brand strong{
        font-size:11px;
    }

    .brand small{
        font-size:7px;
    }

    .moneyBox{
        min-width:108px;
    }

    .moneyBox strong{
        font-size:16px;
    }

    #stats{
        width:160px;
    }

    #objective{
        min-width:145px;
    }

}


/* ==========================================================
   NAIJAWORLDLIFE V0.5.4
   FULL HUD REBUILD
========================================================== */

#nwlGameHud{
    position:absolute;
    inset:0;
    z-index:18;
    pointer-events:none;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/* ==========================================================
   TOP MAIN CAPSULE
========================================================== */

#nwlTopCard{
    position:absolute;

    top:13px;
    left:14px;
    right:14px;

    min-height:64px;

    display:flex;
    align-items:center;

    padding:8px 10px 8px 13px;

    border-radius:26px;

    background:
        rgba(249,250,250,.96);

    border:
        1px solid rgba(0,0,0,.07);

    box-shadow:
        0 8px 30px rgba(0,0,0,.13);

    backdrop-filter:
        blur(16px);

    pointer-events:auto;
}


.nwlTimeBlock{
    display:flex;
    align-items:center;
    gap:7px;

    white-space:nowrap;
}

.nwlSun{
    font-size:17px;
}

.nwlTimeBlock strong{
    color:#252a2d;

    font-size:14px;
    font-weight:900;
}


.nwlTopDivider{
    width:1px;
    height:28px;

    margin:0 11px;

    background:
        rgba(20,25,22,.12);
}


.nwlMood{
    display:flex;
    align-items:center;

    gap:6px;

    color:#d8883d;

    white-space:nowrap;
}

.nwlMood span{
    font-size:18px;
}

.nwlMood strong{
    font-size:12px;
    font-weight:850;
}


.nwlTopSpacer{
    flex:1;
}


.nwlWallet{
    text-align:right;

    min-width:0;
}

.nwlWallet small{
    display:block;

    margin-bottom:1px;

    color:#7e8580;

    font-size:7px;
    font-weight:900;

    letter-spacing:.08em;
}

.nwlWallet strong{
    display:block;

    color:#22282b;

    font-size:17px;
    font-weight:1000;

    line-height:1.1;

    white-space:nowrap;
}


#nwlWalletAdd{
    width:42px;
    height:42px;

    flex:0 0 42px;

    margin-left:8px;

    display:grid;
    place-items:center;

    border:0;

    border-radius:50%;

    background:#22c978;

    color:white;

    font-size:24px;
    font-weight:400;

    pointer-events:auto;
}


/* ==========================================================
   WORLD STATUS
========================================================== */

#nwlWorldStats{
    position:absolute;

    top:84px;
    left:50%;

    transform:
        translateX(-50%);

    display:flex;
    align-items:center;

    gap:7px;
}


.nwlMiniPill{
    height:27px;

    display:flex;
    align-items:center;

    gap:5px;

    padding:0 11px;

    border-radius:50px;

    background:
        rgba(248,249,249,.91);

    border:
        1px solid rgba(0,0,0,.055);

    color:#5e6662;

    box-shadow:
        0 3px 10px rgba(0,0,0,.06);

    white-space:nowrap;
}


.nwlMiniPill span{
    font-size:11px;
}


.nwlMiniPill strong{
    font-size:9px;
    font-weight:850;
}


.nwlMiniPill.online i{
    width:7px;
    height:7px;

    display:block;

    border-radius:50%;

    background:#24c97a;

    box-shadow:
        0 0 0 3px rgba(36,201,122,.12);
}


/* ==========================================================
   OBJECTIVE
========================================================== */

#nwlObjective{
    position:absolute;

    top:122px;
    left:50%;

    transform:
        translateX(-50%);

    min-width:210px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:9px;

    padding:9px 17px;

    border-radius:22px;

    background:
        rgba(249,250,250,.95);

    border:
        1px solid rgba(0,0,0,.07);

    box-shadow:
        0 6px 20px rgba(0,0,0,.10);
}


#nwlObjective > span{
    font-size:18px;
}


#nwlObjective small{
    display:block;

    color:#178958;

    font-size:7px;
    font-weight:1000;

    letter-spacing:.12em;
}


#nwlObjective strong{
    display:block;

    margin-top:1px;

    color:#202624;

    font-size:11px;
    font-weight:900;

    white-space:nowrap;
}


/* ==========================================================
   LOCATION
========================================================== */

#locationChip{
    position:absolute;

    top:177px;
    left:50%;

    transform:
        translateX(-50%);

    padding:6px 12px;

    border-radius:50px;

    background:
        rgba(248,249,249,.90);

    border:
        1px solid rgba(0,0,0,.055);

    box-shadow:
        0 3px 11px rgba(0,0,0,.06);

    color:#525a56;

    font-size:9px;
    font-weight:850;

    white-space:nowrap;
}


/* ==========================================================
   PLAYER NEEDS
========================================================== */

#nwlNeeds{
    position:absolute;

    left:16px;
    bottom:98px;

    display:flex;
    align-items:center;

    gap:8px;
}


.nwlAvatar{
    width:62px;
    height:62px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:
        #f7f7f6;

    border:
        4px solid white;

    box-shadow:
        0 5px 18px rgba(0,0,0,.14);

    font-size:28px;
}


.nwlNeedBars{
    width:142px;

    display:grid;

    gap:5px;

    padding:8px 11px;

    border-radius:22px;

    background:
        rgba(249,250,250,.94);

    border:
        1px solid rgba(0,0,0,.06);

    box-shadow:
        0 5px 17px rgba(0,0,0,.10);
}


.nwlNeedRow{
    display:grid;

    grid-template-columns:
        16px
        1fr
        20px;

    align-items:center;

    gap:5px;
}


.nwlNeedRow span{
    font-size:11px;
}


.nwlNeedRow > div{
    height:6px;

    overflow:hidden;

    border-radius:20px;

    background:
        #e4e6e4;
}


.nwlNeedRow i{
    display:block;

    height:100%;

    width:100%;

    border-radius:20px;
}


.nwlNeedRow.health i{
    background:#24bf72;
}


.nwlNeedRow.energy i{
    background:#33a5eb;
}


.nwlNeedRow.hunger i{
    background:#ef9c33;
}


.nwlNeedRow b{
    color:#545c57;

    font-size:7px;

    text-align:right;
}


/* ==========================================================
   BOTTOM NAVIGATION
========================================================== */

#nwlBottomNav{
    position:absolute;

    left:13px;
    right:13px;
    bottom:11px;

    height:72px;

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    align-items:stretch;

    gap:3px;

    padding:6px;

    border-radius:27px;

    background:
        rgba(250,250,250,.97);

    border:
        1px solid rgba(0,0,0,.07);

    box-shadow:
        0 10px 32px rgba(0,0,0,.15);

    backdrop-filter:
        blur(15px);

    pointer-events:auto;
}


#nwlBottomNav button{
    min-width:0;

    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    gap:2px;

    border:0;

    border-radius:21px;

    background:transparent;

    color:#707977;

    cursor:pointer;
}


#nwlBottomNav button span{
    font-size:18px;
}


#nwlBottomNav button small{
    font-size:8px;

    font-weight:800;
}


#nwlBottomNav button.active{
    background:#1d2b3d;

    color:white;
}


/* ==========================================================
   MOVE GAME CONTROLS ABOVE NEW NAV
========================================================== */

#joystick{
    bottom:92px;

    z-index:30;
}


#interactBtn{
    bottom:103px;

    z-index:30;
}


#phoneBtn{
    display:none !important;
}


/* ==========================================================
   NEARBY — MUCH SMALLER NOW
========================================================== */

#nearby{
    left:auto;
    right:15px;

    bottom:167px;

    width:195px;

    min-height:47px;

    transform:none;

    padding:7px 9px;

    border-radius:17px;

    background:
        rgba(249,250,250,.93);

    color:#232a26;

    border:
        1px solid rgba(0,0,0,.06);

    box-shadow:
        0 4px 15px rgba(0,0,0,.09);
}


#nearbyIcon{
    width:32px;
    height:32px;

    flex:0 0 32px;

    border-radius:10px;

    background:
        rgba(30,179,102,.10);
}


#nearby small{
    color:#78817b;

    font-size:6px;
}


#nearby strong{
    color:#212824;

    font-size:10px;
}


#nearby p{
    display:none;
}


/* ==========================================================
   DESKTOP
========================================================== */

@media(min-width:701px){

    #nwlTopCard{
        max-width:700px;

        left:50%;

        transform:
            translateX(-50%);
    }


    #nwlBottomNav{
        max-width:520px;

        left:50%;
        right:auto;

        width:520px;

        transform:
            translateX(-50%);
    }

}


/* ==========================================================
   SMALL MOBILE DEVICES
========================================================== */

@media(max-width:380px){

    #nwlTopCard{
        left:8px;
        right:8px;

        padding-left:10px;
    }


    .nwlTimeBlock strong{
        font-size:12px;
    }


    .nwlMood strong{
        display:none;
    }


    .nwlTopDivider{
        margin-left:7px;
        margin-right:7px;
    }


    .nwlWallet strong{
        font-size:15px;
    }


    #nwlWalletAdd{
        width:37px;
        height:37px;

        flex-basis:37px;
    }


    #nwlNeeds{
        left:10px;
    }


    .nwlAvatar{
        width:55px;
        height:55px;
    }


    .nwlNeedBars{
        width:127px;
    }

}


/* ==================================================
   NAIJAWORLDLIFE V0.5.4 HUD REPAIR
================================================== */

#mobileGameHUD{
    display:none;
}

@media(max-width:700px){

    #hudTop,
    #stats,
    #objective,
    #locationChip{
        display:none !important;
    }


    #mobileGameHUD{
        display:block;
        position:absolute;
        inset:0;
        z-index:25;
        pointer-events:none;
        color:#172019;
    }


    .nwlTopBar{
        position:absolute;

        top:14px;
        left:14px;
        right:14px;

        height:64px;

        display:grid;
        grid-template-columns:
            auto auto minmax(80px,1fr) 44px;

        align-items:center;
        gap:8px;

        padding:8px 10px 8px 14px;

        border-radius:24px;

        background:
            rgba(250,250,248,.96);

        border:
            1px solid rgba(255,255,255,.82);

        box-shadow:
            0 4px 13px rgba(0,0,0,.08);

        pointer-events:auto;
    }


    .nwlTime,
    .nwlMood{
        display:flex;
        align-items:center;
        gap:5px;

        padding-right:8px;

        border-right:
            1px solid rgba(0,0,0,.08);

        white-space:nowrap;

        font-size:12px;
    }


    .nwlMood{
        color:#a86d27;
    }


    .nwlWallet{
        min-width:0;
        text-align:right;
    }


    .nwlWallet small{
        display:block;

        color:#777e79;

        font-size:6px;
        font-weight:950;

        letter-spacing:.13em;
    }


    .nwlWallet strong{
        display:block;

        font-size:17px;
        font-weight:1000;

        white-space:nowrap;
    }


    #walletPlusBtn{
        width:42px;
        height:42px;

        border:0;
        border-radius:50%;

        background:#28cf80;
        color:#fff;

        font-size:25px;

        pointer-events:auto;
    }


    .nwlMeta{
        position:absolute;

        top:87px;
        left:50%;

        transform:translateX(-50%);

        display:flex;
        gap:6px;

        white-space:nowrap;
    }


    .nwlMeta span{
        height:27px;

        display:flex;
        align-items:center;
        gap:5px;

        padding:0 10px;

        border-radius:999px;

        background:
            rgba(250,250,248,.93);

        color:#68706a;

        font-size:9px;
        font-weight:800;

        box-shadow:
            0 2px 7px rgba(0,0,0,.06);
    }


    .nwlMeta i{
        width:7px;
        height:7px;

        border-radius:50%;

        background:#29d07f;
    }


    .nwlGoal{
        position:absolute;

        top:121px;
        left:50%;

        transform:translateX(-50%);

        width:min(
            285px,
            calc(100% - 70px)
        );

        min-height:50px;

        display:flex;
        align-items:center;
        justify-content:center;

        gap:8px;

        padding:7px 14px;

        border-radius:22px;

        background:
            rgba(250,250,248,.94);

        box-shadow:
            0 3px 10px rgba(0,0,0,.07);
    }


    .nwlGoal small{
        display:block;

        color:#23845a;

        font-size:6px;
        font-weight:950;

        letter-spacing:.13em;
    }


    .nwlGoal strong{
        display:block;

        margin-top:1px;

        font-size:11px;
        font-weight:900;
    }


    .nwlLocation{
        position:absolute;

        top:178px;
        left:50%;

        transform:translateX(-50%);

        min-width:175px;

        padding:7px 13px;

        border-radius:999px;

        background:
            rgba(250,250,248,.92);

        color:#5c645e;

        text-align:center;

        font-size:9px;
        font-weight:850;
    }


    #nearby{
        left:auto;
        right:14px;

        bottom:167px;

        transform:none;

        width:220px;
        min-height:52px;

        padding:8px 10px;

        border:0;
        border-radius:18px;

        background:
            rgba(250,250,248,.94);

        color:#172019;

        box-shadow:
            0 3px 10px rgba(0,0,0,.08);
    }


    #nearbyIcon{
        width:35px;
        height:35px;
        flex-basis:35px;

        background:
            rgba(39,203,124,.12);

        border-radius:11px;
    }


    #nearby strong{
        color:#182019;
        font-size:10px;
    }


    #nearby small{
        color:#858c87;
        font-size:6px;
    }


    #nearby p{
        display:none;
    }


    #joystick{
        left:15px;
        bottom:101px;

        width:82px;
        height:82px;
    }


    #joyBase{
        width:82px;
        height:82px;

        background:
            rgba(230,233,230,.45);

        border:
            1px solid rgba(255,255,255,.68);

        box-shadow:
            0 3px 10px rgba(0,0,0,.13);
    }


    #joyKnob{
        width:39px;
        height:39px;

        margin-left:-19.5px;
        margin-top:-19.5px;

        background:
            rgba(250,250,248,.98);
    }


    .nwlVitals{
        position:absolute;

        left:91px;
        bottom:106px;

        width:156px;

        display:grid;
        gap:6px;

        padding:9px 10px;

        border-radius:18px;

        background:
            rgba(250,250,248,.94);

        box-shadow:
            0 3px 10px rgba(0,0,0,.07);
    }


    .nwlVitals > div{
        display:grid;

        grid-template-columns:
            17px 1fr 22px;

        align-items:center;

        gap:5px;
    }


    .nwlVitals > div > span{
        font-size:11px;
    }


    .nwlVitals i{
        height:6px;

        overflow:hidden;

        border-radius:50px;

        background:#e5e8e5;
    }


    .nwlVitals b{
        display:block;
        width:100%;
        height:100%;

        border-radius:50px;

        background:#28bf75;
    }


    .nwlVitals > div:nth-child(2) b{
        background:#37a7ec;
    }


    .nwlVitals > div:nth-child(3) b{
        background:#efa725;
    }


    .nwlVitals small{
        text-align:right;

        color:#59615b;

        font-size:7px;
        font-weight:800;
    }


    #interactBtn{
        right:14px;
        bottom:102px;

        width:142px;
        min-width:0;

        height:48px;

        border-radius:17px;

        background:
            rgba(250,250,248,.92);

        color:#297552;

        box-shadow:
            0 3px 10px rgba(0,0,0,.07);

        font-size:9px;
    }


    #phoneBtn{
        display:none !important;
    }


    .nwlBottomNav{
        position:absolute;

        left:13px;
        right:13px;
        bottom:12px;

        height:76px;

        display:grid;
        grid-template-columns:
            repeat(4,1fr);

        padding:5px;

        border-radius:25px;

        background:
            rgba(250,250,248,.97);

        box-shadow:
            0 4px 14px rgba(0,0,0,.09);

        pointer-events:auto;
    }


    .nwlBottomNav button{
        border:0;
        border-radius:19px;

        display:flex;
        flex-direction:column;

        align-items:center;
        justify-content:center;

        gap:2px;

        background:transparent;

        color:#747b76;
    }


    .nwlBottomNav button span{
        font-size:18px;
    }


    .nwlBottomNav button small{
        font-size:8px;
        font-weight:850;
    }


    .nwlBottomNav button.active{
        background:#183047;
        color:#fff;
    }

}


/* =====================================================
   NAIJAWORLDLIFE V0.5.6
   SLIM PHONE GAME HUD
===================================================== */

.nwlSvgIcon{
    width:16px;
    height:16px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    flex:0 0 auto;
}

.nwlSvgIcon svg{
    width:100%;
    height:100%;

    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}


@media(max-width:700px){

    /*
     * TOP CARD
     * Much thinner than previous version.
     */

    .nwlTopBar{
        top:12px;
        left:16px;
        right:16px;

        height:52px;
        min-height:52px;

        grid-template-columns:
            auto auto 1fr 36px;

        gap:7px;

        padding:6px 8px 6px 12px;

        border-radius:19px;

        background:
            rgba(250,250,249,.94);

        box-shadow:
            0 2px 8px rgba(0,0,0,.07);
    }


    .nwlTime,
    .nwlMood{
        gap:4px;

        padding-right:7px;

        font-size:10px;

        font-weight:600;
    }


    .nwlTime strong,
    .nwlMood strong{
        font-size:11px;
        font-weight:650;
    }


    .nwlTime .nwlSvgIcon,
    .nwlMood .nwlSvgIcon{
        width:14px;
        height:14px;
    }


    .nwlWallet small{
        font-size:5px;
        font-weight:750;

        letter-spacing:.11em;
    }


    .nwlWallet strong{
        margin-top:1px;

        font-size:15px;
        font-weight:750;
    }


    #walletPlusBtn{
        width:35px;
        height:35px;

        font-size:20px;

        font-weight:300;
    }


    /*
     * SMALL PILLS
     */

    .nwlMeta{
        top:71px;

        gap:5px;
    }


    .nwlMeta span{
        height:23px;

        padding:0 8px;

        border-radius:12px;

        font-size:8px;
        font-weight:600;

        box-shadow:
            0 1px 5px rgba(0,0,0,.05);
    }


    .nwlMeta .nwlSvgIcon{
        width:12px;
        height:12px;
    }


    .nwlMeta i{
        width:6px;
        height:6px;
    }


    /*
     * GOAL CARD
     */

    .nwlGoal{
        top:100px;

        width:min(
            245px,
            calc(100% - 100px)
        );

        min-height:42px;

        gap:7px;

        padding:6px 12px;

        border-radius:18px;

        box-shadow:
            0 2px 7px rgba(0,0,0,.06);
    }


    .nwlGoal > .nwlSvgIcon{
        width:15px;
        height:15px;

        color:#b84042;
    }


    .nwlGoal small{
        font-size:5px;

        font-weight:700;

        letter-spacing:.11em;
    }


    .nwlGoal strong{
        font-size:10px;

        font-weight:650;
    }


    /*
     * LOCATION
     */

    .nwlLocation{
        top:147px;

        min-width:138px;

        padding:5px 10px;

        border-radius:14px;

        font-size:8px;

        font-weight:600;
    }


    .nwlLocation .nwlSvgIcon{
        width:10px;
        height:10px;

        color:#c2484a;
    }


    /*
     * NEARBY
     */

    #nearby{
        right:15px;

        bottom:137px;

        width:183px;
        min-height:43px;

        gap:7px;

        padding:6px 8px;

        border-radius:15px;

        box-shadow:
            0 2px 7px rgba(0,0,0,.06);
    }


    #nearbyIcon{
        width:30px;
        height:30px;

        flex-basis:30px;

        border-radius:9px;
    }


    #nearbyIcon .nwlSvgIcon{
        width:14px;
        height:14px;

        color:#b84042;
    }


    #nearby small{
        font-size:5px;

        letter-spacing:.1em;
    }


    #nearby strong{
        font-size:9px;
        font-weight:650;
    }


    /*
     * JOYSTICK
     */

    #joystick{
        left:18px;

        bottom:109px;

        width:70px;
        height:70px;
    }


    #joyBase{
        width:70px;
        height:70px;

        border:
            1px solid rgba(255,255,255,.54);

        background:
            rgba(232,234,232,.31);

        box-shadow:
            0 2px 7px rgba(0,0,0,.10);
    }


    #joyKnob{
        width:33px;
        height:33px;

        margin-left:-16.5px;
        margin-top:-16.5px;

        box-shadow:
            0 1px 5px rgba(0,0,0,.13);
    }


    /*
     * VITALS
     */

    .nwlVitals{
        left:82px;

        bottom:110px;

        width:133px;

        gap:4px;

        padding:7px 8px;

        border-radius:15px;

        box-shadow:
            0 2px 7px rgba(0,0,0,.06);
    }


    .nwlVitals > div{
        grid-template-columns:
            14px 1fr 18px;

        gap:4px;
    }


    .nwlVitals .nwlSvgIcon{
        width:11px;
        height:11px;
    }


    .nwlVitals i{
        height:5px;
    }


    .nwlVitals small{
        font-size:6px;
    }


    /*
     * INTERACT
     */

    #interactBtn{
        right:15px;

        bottom:91px;

        width:122px;
        height:41px;

        gap:5px;

        border-radius:14px;

        font-size:8px;

        font-weight:650;
    }


    #interactBtn .nwlSvgIcon{
        width:15px;
        height:15px;
    }


    /*
     * BOTTOM NAV
     */

    .nwlBottomNav{
        left:15px;
        right:15px;

        bottom:10px;

        height:67px;

        padding:4px;

        border-radius:21px;

        box-shadow:
            0 3px 10px rgba(0,0,0,.07);
    }


    .nwlBottomNav button{
        gap:2px;

        border-radius:17px;

        font-weight:600;
    }


    .nwlBottomNav button span{
        height:18px;
    }


    .nwlBottomNav .nwlSvgIcon{
        width:17px;
        height:17px;
    }


    .nwlBottomNav button small{
        font-size:7px;

        font-weight:600;
    }


    .nwlBottomNav button.active{
        background:#203b50;
    }

}


/*
 * Very small phones
 */

@media(max-width:390px){

    .nwlTopBar{
        left:9px;
        right:9px;

        grid-template-columns:
            auto auto 1fr 34px;
    }


    .nwlGoal{
        width:225px;
    }


    #nearby{
        width:170px;
    }

}


/* ==================================================
   NAIJAWORLDLIFE V0.6
   CLEAN MOBILE HUD + NO OVERLAP
================================================== */

#mobileGameHUD{
    display:none;
}

.nwlIcon{
    width:14px;
    height:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
}

.nwlIcon svg{
    width:100%;
    height:100%;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

@media(max-width:700px){

    #hudTop,
    #stats,
    #objective,
    #locationChip{
        display:none !important;
    }

    #mobileGameHUD{
        display:block;
        position:absolute;
        inset:0;
        z-index:30;
        pointer-events:none;
        color:#182019;
    }

    .nwlTopBar{
        position:absolute;
        top:12px;
        left:14px;
        right:14px;
        height:52px;
        display:grid;
        grid-template-columns:auto auto 1fr 36px;
        align-items:center;
        gap:7px;
        padding:6px 8px 6px 12px;
        border-radius:18px;
        background:rgba(251,251,249,.94);
        box-shadow:0 2px 8px rgba(0,0,0,.08);
        border:1px solid rgba(255,255,255,.85);
        pointer-events:auto;
    }

    .nwlTime,
    .nwlMood{
        display:flex;
        align-items:center;
        gap:4px;
        padding-right:7px;
        border-right:1px solid rgba(0,0,0,.08);
        font-size:10px;
        font-weight:600;
        white-space:nowrap;
    }

    .nwlMood{ color:#a9742f; }

    .nwlWallet{
        min-width:0;
        text-align:right;
    }

    .nwlWallet small{
        display:block;
        color:#7a817c;
        font-size:5px;
        font-weight:800;
        letter-spacing:.12em;
    }

    .nwlWallet strong{
        display:block;
        font-size:15px;
        font-weight:780;
        line-height:1.05;
        white-space:nowrap;
    }

    #walletPlusBtn{
        width:35px;
        height:35px;
        border:0;
        border-radius:50%;
        background:#27d581;
        color:#fff;
        font-size:22px;
        line-height:1;
        pointer-events:auto;
    }

    .nwlMeta{
        position:absolute;
        top:69px;
        left:50%;
        transform:translateX(-50%);
        display:flex;
        gap:5px;
        white-space:nowrap;
    }

    .nwlPill{
        height:23px;
        display:flex;
        align-items:center;
        gap:5px;
        padding:0 8px;
        border-radius:12px;
        background:rgba(250,250,248,.93);
        box-shadow:0 1px 5px rgba(0,0,0,.05);
        color:#656d67;
        font-size:8px;
        font-weight:620;
    }

    .nwlDot{
        width:6px;
        height:6px;
        border-radius:50%;
        background:#2dd481;
    }

    .nwlGoal{
        position:absolute;
        top:97px;
        left:50%;
        transform:translateX(-50%);
        width:min(245px, calc(100% - 110px));
        min-height:42px;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:7px;
        padding:6px 12px;
        border-radius:17px;
        background:rgba(250,250,248,.95);
        box-shadow:0 2px 7px rgba(0,0,0,.06);
    }

    .nwlPin{
        color:#c34c4f;
    }

    .nwlGoal small{
        display:block;
        color:#24855a;
        font-size:5px;
        font-weight:760;
        letter-spacing:.11em;
    }

    .nwlGoal strong{
        display:block;
        font-size:10px;
        font-weight:670;
    }

    .nwlLocation{
        position:absolute;
        top:145px;
        left:50%;
        transform:translateX(-50%);
        min-width:140px;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:5px;
        padding:5px 10px;
        border-radius:14px;
        background:rgba(250,250,248,.93);
        box-shadow:0 1px 5px rgba(0,0,0,.05);
        color:#5e655f;
        font-size:8px;
        font-weight:620;
    }

    #nearby{
        left:auto;
        right:14px;
        bottom:141px;
        transform:none;
        width:185px;
        min-height:43px;
        gap:7px;
        padding:6px 8px;
        border-radius:15px;
        border:0;
        background:rgba(250,250,248,.95);
        box-shadow:0 2px 7px rgba(0,0,0,.06);
        color:#172019;
    }

    #nearbyIcon{
        width:30px;
        height:30px;
        flex-basis:30px;
        border-radius:9px;
        background:rgba(39,203,124,.10);
    }

    #nearby small{
        font-size:5px;
        letter-spacing:.1em;
        color:#8a908b;
    }

    #nearby strong{
        font-size:9px;
        font-weight:650;
        color:#1a211b;
    }

    #nearby p{
        display:none;
    }

    #joystick{
        left:16px;
        bottom:109px;
        width:76px;
        height:76px;
    }

    #joyBase{
        width:76px;
        height:76px;
        background:rgba(231,234,231,.33);
        border:1px solid rgba(255,255,255,.62);
        box-shadow:0 2px 7px rgba(0,0,0,.11);
    }

    #joyKnob{
        width:34px;
        height:34px;
        margin-left:-17px;
        margin-top:-17px;
        background:rgba(250,250,248,.98);
        box-shadow:0 2px 6px rgba(0,0,0,.12);
    }

    .nwlVitals{
        position:absolute;
        left:96px;
        bottom:110px;
        width:150px;
        display:grid;
        gap:4px;
        padding:7px 8px;
        border-radius:15px;
        background:rgba(250,250,248,.95);
        box-shadow:0 2px 7px rgba(0,0,0,.06);
    }

    .nwlVitals > div{
        display:grid;
        grid-template-columns:14px 1fr 18px;
        align-items:center;
        gap:4px;
    }

    .nwlVitals i{
        height:5px;
        overflow:hidden;
        border-radius:40px;
        background:#e4e8e4;
    }

    .nwlVitals b{
        display:block;
        width:100%;
        height:100%;
        border-radius:40px;
        background:#29c477;
    }

    .nwlVitals > div:nth-child(2) b{ background:#37a8ed; }
    .nwlVitals > div:nth-child(3) b{ background:#efa826; }

    .nwlVitals small{
        font-size:6px;
        font-weight:700;
        text-align:right;
        color:#5d645f;
    }

    #interactBtn{
        right:14px;
        bottom:94px;
        width:124px;
        min-width:0;
        height:41px;
        border-radius:14px;
        background:rgba(250,250,248,.94);
        box-shadow:0 2px 7px rgba(0,0,0,.06);
        color:#297652;
        font-size:8px;
        font-weight:670;
        gap:5px;
    }

    #interactBtn .nwlIcon,
    #interactBtn span{
        width:15px;
        height:15px;
        font-size:0;
    }

    #phoneBtn{
        display:none !important;
    }

    .nwlBottomNav{
        position:absolute;
        left:14px;
        right:14px;
        bottom:10px;
        height:68px;
        display:grid;
        grid-template-columns:repeat(4,1fr);
        padding:4px;
        border-radius:21px;
        background:rgba(250,250,248,.97);
        box-shadow:0 3px 10px rgba(0,0,0,.07);
        pointer-events:auto;
    }

    .nwlBottomNav button{
        border:0;
        border-radius:17px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:2px;
        background:transparent;
        color:#737b75;
    }

    .nwlBottomNav button small{
        font-size:7px;
        font-weight:630;
    }

    .nwlBottomNav button.active{
        background:#203b50;
        color:#fff;
    }
}


/* =====================================================
   NAIJAWORLDLIFE V0.6.4
   FINAL CLEAN MOBILE HUD
===================================================== */

#mobileGameHUD{
    display:none;
}

@media(max-width:700px){

    #hudTop,
    #stats,
    #objective,
    #locationChip{
        display:none !important;
    }


    #mobileGameHUD{
        display:block;
        position:absolute;
        inset:0;
        z-index:30;
        pointer-events:none;
        font-family:
            Inter,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            sans-serif;
    }


    #mobileGameHUD svg{
        width:15px;
        height:15px;

        fill:none;

        stroke:currentColor;
        stroke-width:1.8;

        stroke-linecap:round;
        stroke-linejoin:round;

        flex:0 0 auto;
    }


    /* TOP */

    .nwl64Top{
        position:absolute;

        top:12px;
        left:15px;
        right:15px;

        height:50px;

        display:grid;

        grid-template-columns:
            auto auto 1fr 35px;

        align-items:center;

        gap:7px;

        padding:6px 8px 6px 12px;

        border-radius:19px;

        background:
            rgba(251,251,250,.96);

        border:
            1px solid rgba(255,255,255,.8);

        box-shadow:
            0 2px 8px rgba(0,0,0,.07);

        color:#252925;

        pointer-events:auto;
    }


    .nwl64Time,
    .nwl64Mood{
        display:flex;
        align-items:center;
        gap:5px;

        padding-right:8px;

        border-right:
            1px solid rgba(0,0,0,.08);

        white-space:nowrap;
    }


    .nwl64Time strong,
    .nwl64Mood span{
        font-size:10px;
        font-weight:600;
    }


    .nwl64Mood{
        color:#99702e;
    }


    .nwl64Balance{
        min-width:0;

        text-align:right;
    }


    .nwl64Balance small{
        display:block;

        color:#7d827e;

        font-size:5px;
        font-weight:700;

        letter-spacing:.13em;
    }


    .nwl64Balance strong{
        display:block;

        margin-top:1px;

        font-size:15px;

        line-height:1;

        font-weight:720;

        color:#252825;

        white-space:nowrap;
    }


    #walletPlusBtn{
        width:34px;
        height:34px;

        display:grid;
        place-items:center;

        border:0;
        border-radius:50%;

        background:#27d481;
        color:#fff;

        font-size:20px;
        font-weight:300;

        padding:0;

        cursor:pointer;
    }


    /* SMALL STATUS PILLS */

    .nwl64Info{
        position:absolute;

        top:68px;
        left:50%;

        transform:translateX(-50%);

        display:flex;
        gap:5px;

        white-space:nowrap;
    }


    .nwl64Info > div{
        height:22px;

        display:flex;
        align-items:center;

        gap:5px;

        padding:0 8px;

        border-radius:999px;

        background:
            rgba(251,251,249,.93);

        box-shadow:
            0 1px 5px rgba(0,0,0,.05);

        color:#6c726d;

        font-size:7px;
        font-weight:600;
    }


    .nwl64Info svg{
        width:11px !important;
        height:11px !important;
    }


    .nwl64Online{
        width:6px;
        height:6px;

        border-radius:50%;

        background:#29d17f;
    }


    /* GOAL */

    .nwl64Goal{
        position:absolute;

        top:96px;
        left:50%;

        transform:translateX(-50%);

        width:min(
            230px,
            calc(100% - 120px)
        );

        min-height:40px;

        display:flex;

        align-items:center;
        justify-content:center;

        gap:7px;

        padding:6px 11px;

        border-radius:17px;

        background:
            rgba(251,251,249,.95);

        color:#242924;

        box-shadow:
            0 2px 7px rgba(0,0,0,.06);
    }


    .nwl64Goal > svg{
        color:#cf5355;
    }


    .nwl64Goal small{
        display:block;

        color:#29835b;

        font-size:5px;

        font-weight:700;

        letter-spacing:.12em;
    }


    .nwl64Goal strong{
        display:block;

        margin-top:1px;

        font-size:9px;
        font-weight:650;
    }


    /* LOCATION */

    .nwl64Location{
        position:absolute;

        top:141px;
        left:50%;

        transform:translateX(-50%);

        min-width:130px;

        height:26px;

        display:flex;
        align-items:center;
        justify-content:center;

        gap:5px;

        padding:0 10px;

        border-radius:999px;

        background:
            rgba(251,251,249,.92);

        color:#626963;

        font-size:7px;
        font-weight:600;

        box-shadow:
            0 1px 5px rgba(0,0,0,.05);
    }


    .nwl64Location svg{
        width:10px !important;
        height:10px !important;

        color:#cf5355;
    }


    /* ORIGINAL NEARBY CARD */

    #nearby{
        left:auto;
        right:14px;

        bottom:134px;

        transform:none;

        width:177px;

        min-height:41px;

        gap:7px;

        padding:6px 8px;

        border:0;

        border-radius:14px;

        background:
            rgba(251,251,249,.94);

        color:#1b201c;

        box-shadow:
            0 2px 7px rgba(0,0,0,.06);
    }


    #nearbyIcon{
        width:29px;
        height:29px;

        flex-basis:29px;

        border-radius:9px;

        font-size:0;
    }


    #nearbyIcon::before{
        content:"";

        width:13px;
        height:16px;

        display:block;

        margin:auto;

        border:
            1.5px solid #cf5355;

        border-radius:
            9px 9px 9px 2px;

        transform:rotate(-45deg);
    }


    #nearby small{
        font-size:5px;

        color:#8a8f8a;
    }


    #nearby strong{
        font-size:9px;

        font-weight:650;

        color:#202520;
    }


    #nearby p{
        display:none;
    }


    /* JOYSTICK */

    #joystick{
        left:16px;

        bottom:94px;

        width:68px;
        height:68px;
    }


    #joyBase{
        width:68px;
        height:68px;

        background:
            rgba(238,240,238,.28);

        border:
            1px solid rgba(255,255,255,.58);

        box-shadow:
            0 2px 6px rgba(0,0,0,.10);
    }


    #joyKnob{
        width:31px;
        height:31px;

        margin-left:-15.5px;
        margin-top:-15.5px;

        background:
            rgba(251,251,249,.98);

        box-shadow:
            0 2px 5px rgba(0,0,0,.11);
    }


    /* VITALS — SEPARATE FROM JOYSTICK */

    .nwl64Vitals{
        position:absolute;

        left:96px;

        bottom:96px;

        width:135px;

        display:grid;

        gap:4px;

        padding:7px 8px;

        border-radius:14px;

        background:
            rgba(251,251,249,.94);

        box-shadow:
            0 2px 7px rgba(0,0,0,.06);
    }


    .nwl64Vitals > div{
        display:grid;

        grid-template-columns:
            13px 1fr 18px;

        align-items:center;

        gap:4px;
    }


    .nwl64Vitals svg{
        width:11px !important;
        height:11px !important;

        color:#313732;
    }


    .nwl64Vitals i{
        height:5px;

        overflow:hidden;

        border-radius:20px;

        background:#e7e9e7;
    }


    .nwl64Vitals b{
        display:block;

        height:100%;
        width:100%;

        border-radius:20px;

        background:#2bc37a;
    }


    .nwl64Vitals > div:nth-child(2) b{
        background:#3ba8e9;
    }


    .nwl64Vitals > div:nth-child(3) b{
        background:#efa92c;
    }


    .nwl64Vitals small{
        font-size:6px;

        font-weight:650;

        color:#606660;

        text-align:right;
    }


    /* INTERACT */

    #interactBtn{
        right:14px;

        bottom:88px;

        width:116px;
        height:39px;

        min-width:0;

        padding:0 11px;

        border-radius:13px;

        background:
            rgba(251,251,249,.92);

        color:#35765a;

        box-shadow:
            0 2px 7px rgba(0,0,0,.06);

        font-size:7px;
        font-weight:650;
    }


    #interactBtn span{
        display:none;
    }


    /* BOTTOM NAV */

    #phoneBtn{
        display:none !important;
    }


    .nwl64Nav{
        position:absolute;

        left:14px;
        right:14px;

        bottom:9px;

        height:65px;

        display:grid;

        grid-template-columns:
            repeat(4,1fr);

        padding:4px;

        border-radius:20px;

        background:
            rgba(251,251,249,.97);

        box-shadow:
            0 3px 10px rgba(0,0,0,.07);

        pointer-events:auto;
    }


    .nwl64Nav button{
        border:0;

        border-radius:16px;

        display:flex;

        flex-direction:column;

        align-items:center;
        justify-content:center;

        gap:3px;

        background:transparent;

        color:#747b76;
    }


    .nwl64Nav button svg{
        width:16px !important;
        height:16px !important;
    }


    .nwl64Nav button span{
        font-size:7px;
        font-weight:600;
    }


    .nwl64Nav button.active{
        background:#203c51;
        color:#fff;
    }

}

/* ===============================================
   NAIJAWORLDLIFE V0.7 ANALOG
=============================================== */

@media(max-width:700px){

    #joystick{
        width:76px;
        height:76px;
    }

    #joyBase{
        width:76px;
        height:76px;

        background:
            rgba(230,234,231,.24);

        border:
            1px solid rgba(255,255,255,.52);

        box-shadow:
            inset 0 0 0 5px rgba(255,255,255,.025),
            0 3px 9px rgba(0,0,0,.10);

        touch-action:none;
    }

    #joyKnob{
        width:35px;
        height:35px;

        margin-left:-17.5px;
        margin-top:-17.5px;

        background:
            rgba(252,252,250,.97);

        border:
            1px solid rgba(0,0,0,.08);

        box-shadow:
            0 2px 6px rgba(0,0,0,.13);

        transition:
            transform .025s linear;
    }
}