@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&display=swap');

:root{
    --bg:#030a08;
    --bg2:#05110d;
    --panel:#06140f;
    --panel2:#081b15;
    --line:#12382d;
    --line2:#1a5a45;

    --green:#08d894;
    --green2:#0aa573;

    --text:#dce9e4;
    --muted:#6e8b80;

    --gold:#e7b323;
    --orange:#ef8a2c;
    --red:#d35b63;

    --top-h:66px;
    --chat-w:315px;
    --map-side-w:270px;
}


/* ============================================================
   RESET
   ============================================================ */

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    min-height:100%;
    background:#020806;
    color:var(--text);
    font-family:Rajdhani,Arial,sans-serif;
}

body{
    overflow-x:hidden;

    background:
        radial-gradient(
            circle at 55% 0,
            rgba(10,55,39,.24),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #06140f,
            #020806 60%
        );
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input{
    font:inherit;
}

button{
    cursor:pointer;
}

.hidden{
    display:none !important;
}


/* ============================================================
   TOP NAVIGATION
   ============================================================ */

.top{
    height:var(--top-h);

    width:100%;

    display:flex;
    align-items:stretch;

    position:relative;
    z-index:1500;

    background:
        linear-gradient(
            180deg,
            #08251b,
            #061910
        );

    border-bottom:1px solid #0d5139;

    box-shadow:
        0 5px 22px rgba(0,0,0,.35);
}


/* LOGO */

.logo{
    width:220px;
    min-width:220px;

    padding:0 18px;

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

    color:#08d894;

    border-right:
        1px solid rgba(18,56,45,.7);

    font-size:18px;

    font-weight:700;

    white-space:nowrap;
}

.logo strong{
    color:#19d692;

    font-size:15px;

    letter-spacing:1px;
}


/* NAV LINKS */

.top nav{
    flex:1;

    display:flex;

    min-width:0;

    overflow-x:auto;

    overflow-y:hidden;
}

.top nav::-webkit-scrollbar{
    height:0;
}

.top nav a{
    height:100%;

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

    padding:0 14px;

    border-right:
        1px solid rgba(18,56,45,.52);

    color:#8ba39a;

    font-size:10px;

    font-weight:700;

    letter-spacing:.45px;

    white-space:nowrap;
}

.top nav a:hover,
.top nav a.active{
    color:#dff9ef;

    background:#0a3024;

    box-shadow:
        inset 0 -2px 0 #08d894;
}


/* ============================================================
   WALLET / PROFILE
   ============================================================ */

.me{
    margin-left:auto;

    display:flex;
    align-items:stretch;

    position:relative;

    min-width:max-content;

    background:#06150f;
}

.coins,
.shards{
    display:flex;
    align-items:center;

    padding:0 12px;

    border-left:
        1px solid #17382f;

    font-size:10px;

    font-weight:700;
}

.coins{
    color:#e7c561;
}

.shards{
    color:#56c9ff;
}


#profileBtn{
    min-width:150px;

    height:100%;

    padding:0 12px;

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

    color:#dce9e4;

    background:#06150f;

    border:0;

    border-left:
        1px solid #17382f;
}

#profileBtn img,
#profileBtn i{
    width:31px;
    height:31px;

    flex:0 0 31px;

    object-fit:cover;

    display:grid;
    place-items:center;

    color:#08d894;

    background:#0b251d;

    border:
        1px solid #1b5f48;

    font-style:normal;
}

#profileBtn span{
    max-width:100px;

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;

    font-size:10px;

    font-weight:700;
}


/* PROFILE DROPDOWN */

.profile-menu{
    position:absolute;

    right:8px;

    top:61px;

    width:185px;

    background:#061711;

    border:
        1px solid #1b5f48;

    box-shadow:
        0 18px 40px rgba(0,0,0,.45);

    z-index:2500;

    display:flex;
    flex-direction:column;
}

.profile-menu > *{
    padding:12px 13px;

    text-align:left;

    color:#91a79e;

    background:transparent;

    border:0;

    border-bottom:
        1px solid #12382d;

    font-size:10px;

    font-weight:700;
}

.profile-menu > *:hover{
    color:#08d894;

    background:#0a3024;
}


/* ============================================================
   MAIN APP STRUCTURE
   ============================================================ */

.app{
    width:100%;

    min-height:
        calc(100vh - var(--top-h));

    display:grid;

    grid-template-columns:
        var(--chat-w)
        minmax(0,1fr);

    margin:0;

    padding:0;
}


/* ============================================================
   LEFT COLUMN
   ============================================================ */

.left{
    width:var(--chat-w);

    min-width:var(--chat-w);

    max-width:var(--chat-w);

    height:
        calc(100vh - var(--top-h));

    position:sticky;

    top:0;

    align-self:start;

    padding:10px;

    display:flex;
    flex-direction:column;

    gap:8px;

    background:
        linear-gradient(
            180deg,
            #06140f,
            #04100c
        );

    border-right:
        1px solid #0e513a;

    overflow:hidden;
}


/* ============================================================
   SERVER STATUS
   ============================================================ */

.server-box{
    flex:0 0 auto;

    background:#071b14;

    border:
        1px solid #174536;

    padding:11px 12px;
}

.server-box > div{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;
}

.server-box span{
    color:#08d894;

    font-size:8px;

    font-weight:700;

    letter-spacing:.4px;
}

.server-box b{
    color:#dce9e4;

    font-size:10px;
}


/* ============================================================
   GLOBAL CHAT
   ============================================================ */

.chat{
    flex:1;

    min-height:0;

    width:100%;

    display:flex;

    flex-direction:column;

    background:#06160f;

    border:
        1px solid #174536;

    overflow:hidden;
}

.chat-title{
    min-height:42px;

    flex:0 0 42px;

    padding:0 10px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    border-bottom:
        1px solid #174536;

    font-size:10px;
}

.chat-title b{
    color:#dce9e4;
}

.chat-title span{
    color:#08d894;

    font-size:9px;
}


.chat-tabs{
    flex:0 0 auto;

    display:grid;

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

    margin:8px;

    border:
        1px solid #17382f;
}

.chat-tabs > *{
    padding:8px 4px;

    text-align:center;

    color:#60776e;

    font-size:8px;
}

.chat-tabs b{
    color:#08d894;

    background:#0a3024;
}


.messages{
    flex:1;

    min-height:0;

    overflow-y:auto;

    padding:4px 8px;
}

.messages::-webkit-scrollbar{
    width:4px;
}

.messages::-webkit-scrollbar-thumb{
    background:#13503d;
}

.chatmsg{
    padding:9px 3px;

    border-bottom:
        1px solid rgba(18,56,45,.48);
}

.chatmsg b{
    display:block;

    color:#dce9e4;

    font-size:10px;
}

.chatmsg small{
    display:block;

    margin-top:1px;

    color:#526b62;

    font-size:8px;
}

.chatmsg p{
    margin:4px 0 0;

    color:#91a79e;

    font-size:10px;

    line-height:1.35;
}


.slow{
    flex:0 0 auto;

    padding:7px 8px;

    color:#546e64;

    font-size:8px;

    border-top:
        1px solid #12382d;
}


.chat form{
    flex:0 0 auto;

    display:flex;

    gap:6px;

    padding:8px;

    border-top:
        1px solid #174536;
}

.chat form input{
    flex:1;

    min-width:0;

    padding:9px;

    color:#fff;

    background:#071612;

    border:
        1px solid #17382f;

    outline:none;
}

.chat form button{
    padding:9px 12px;

    color:#fff;

    background:#0a9c6a;

    border:
        1px solid #0db77e;

    font-size:9px;

    font-weight:700;
}


/* ============================================================
   MAIN CONTENT
   ============================================================ */

main{
    width:100%;

    min-width:0;

    min-height:
        calc(100vh - var(--top-h));

    padding:28px 5vw 70px;

    overflow:hidden;
}


/* Map page must not have normal content padding */

.page-map main{
    padding:0;

    height:
        calc(100vh - var(--top-h));

    min-height:
        calc(100vh - var(--top-h));
}


/* ============================================================
   SECTION HEADINGS
   ============================================================ */

.section-head{
    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:15px;

    padding-bottom:14px;

    border-bottom:
        1px solid #154333;
}

.section-head h1{
    margin:0 0 4px;

    color:#f0f7f4;

    font-size:24px;

    letter-spacing:.6px;
}

.section-head p{
    margin:0;

    color:#6e8b80;

    font-size:11px;
}

.more-title{
    margin:25px 0 10px;

    font-size:15px;

    color:#dce9e4;
}


/* ============================================================
   HOME NEWS
   ============================================================ */

.featured{
    margin-top:18px;

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:14px;
}

.featured article,
.updates article{
    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #082118,
            #06140f
        );

    border:
        1px solid #174536;
}

.featured article{
    min-height:260px;

    padding:16px;

    display:flex;

    flex-direction:column;
}

.card-img{
    height:135px;

    margin:-16px -16px 12px;

    display:grid;

    place-items:center;

    font-size:45px;

    background:
        radial-gradient(
            circle at 50% 40%,
            #1d5b45,
            #0b2c21
        );
}

.featured article > span,
.updates article > span{
    align-self:flex-start;

    padding:4px 7px;

    color:#fff;

    background:#1877d2;

    font-size:7px;

    font-weight:700;
}

.featured h3,
.updates h3{
    margin:10px 0 6px;

    color:#f0f7f4;

    font-size:14px;
}

.featured small,
.updates small{
    color:#718a80;

    font-size:9px;
}

.featured a{
    margin-top:auto;

    padding-top:15px;

    color:#08d894;

    font-size:8px;

    font-weight:700;
}


.updates{
    display:grid;

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

    gap:10px;
}

.updates article{
    min-height:160px;

    padding:12px;
}

.gift{
    height:70px;

    margin:-12px -12px 10px;

    display:grid;

    place-items:center;

    background:#0a3829;

    font-size:28px;
}


/* ============================================================
   LARGE PANELS
   ============================================================ */

.large-panel{
    margin-top:18px;

    min-height:230px;

    padding:24px;

    background:#071811;

    border:
        1px solid #174536;
}

.large-panel.empty{
    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;
}

.large-panel h2{
    margin:0 0 8px;

    color:#f0f7f4;
}

.large-panel p{
    color:#6e8b80;
}


/* ============================================================
   LIVE DINO STATS
   ============================================================ */

.stats{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:8px;

    margin-top:15px;
}

.stats > div{
    padding:13px;

    background:#081a13;

    border:
        1px solid #174536;
}

.stats small{
    display:block;

    color:#637b71;

    font-size:8px;
}

.stats b{
    display:block;

    margin-top:5px;

    color:#08d894;

    font-size:18px;
}


/* ============================================================
   PRODUCT GRIDS
   ============================================================ */

.grid{
    display:grid;

    grid-template-columns:
        repeat(auto-fill,minmax(210px,1fr));

    gap:13px;

    margin-top:18px;
}

.product{
    min-height:310px;

    padding:14px;

    display:flex;

    flex-direction:column;

    background:
        linear-gradient(
            180deg,
            #081a13,
            #06140f
        );

    border:
        1px solid #174536;
}

.product:hover{
    border-color:#238260;
}

.product-art{
    height:105px;

    display:grid;

    place-items:center;

    color:#08d894;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0 18px,
            rgba(0,217,149,.05) 19px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0 18px,
            rgba(0,217,149,.05) 19px
        ),
        #0a251c;

    font-size:38px;

    font-weight:700;
}

.product > small{
    margin-top:10px;

    color:#08d894;

    font-size:8px;

    letter-spacing:1px;
}

.product h3{
    margin:7px 0;

    color:#f0f7f4;

    font-size:15px;
}

.product p{
    flex:1;

    color:#6e8b80;

    font-size:10px;
}

.product b{
    padding:10px 0;

    color:#e7c561;

    border-top:
        1px solid #15382e;

    font-size:11px;
}

.product button,
#dailyBtn,
#dailyBtn2{
    padding:10px;

    color:#fff;

    background:#0a9164;

    border:
        1px solid #0ab77e;

    font-size:9px;

    font-weight:700;
}


/* ============================================================
   LEADERBOARD
   ============================================================ */

.leader{
    margin-top:18px;

    background:#06140f;

    border:
        1px solid #174536;
}

.leader-row{
    display:grid;

    grid-template-columns:
        50px
        minmax(180px,1.5fr)
        repeat(4,minmax(70px,.6fr));

    gap:10px;

    align-items:center;

    padding:12px 14px;

    border-bottom:
        1px solid #12382d;

    font-size:10px;
}

.leader-row.head{
    color:#08d894;

    font-size:8px;

    font-weight:700;
}

.leader-row .player{
    display:flex;

    align-items:center;

    gap:8px;
}

.leader-row .player img{
    width:28px;

    height:28px;

    object-fit:cover;

    border:
        1px solid #1b5f48;
}


/* ============================================================
   ACCOUNT MODAL
   ============================================================ */

.modal{
    position:fixed;

    inset:0;

    z-index:5000;

    display:grid;

    place-items:center;

    background:
        rgba(0,5,3,.83);

    backdrop-filter:
        blur(7px);
}

.modal-box{
    width:
        min(900px,92vw);

    max-height:88vh;

    min-height:550px;

    position:relative;

    display:grid;

    grid-template-columns:
        230px minmax(0,1fr);

    overflow:hidden;

    background:#06150f;

    border:
        1px solid #245f49;
}

.modal-box > aside{
    padding:18px 12px;

    display:flex;

    flex-direction:column;

    background:#071d16;

    border-right:
        1px solid #174536;
}

.modal-box > section{
    padding:30px;

    overflow-y:auto;
}

.close{
    position:absolute;

    right:12px;

    top:8px;

    z-index:5;

    color:#70857d;

    background:transparent;

    border:0;

    font-size:25px;
}

.account-person{
    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:16px;
}

.account-person img,
.account-person i{
    width:43px;

    height:43px;

    display:grid;

    place-items:center;

    object-fit:cover;

    color:#08d894;

    background:#0b251d;

    border:
        1px solid #1b5f48;

    font-style:normal;
}

.account-person b{
    display:block;

    font-size:11px;
}

.account-person small{
    display:block;

    margin-top:3px;

    color:#63776f;

    font-size:8px;
}

.account-tab{
    padding:10px;

    color:#71887f;

    background:transparent;

    border:0;

    border-left:
        2px solid transparent;

    text-align:left;

    font-size:10px;
}

.account-tab.active{
    color:#e5fff5;

    background:#0a3024;

    border-left-color:#08d894;
}


/* ============================================================
   MAP PAGE
   ============================================================ */

.map-layout{
    width:100%;

    height:
        calc(100vh - var(--top-h));

    display:grid;

    grid-template-columns:
        var(--map-side-w)
        minmax(0,1fr);

    overflow:hidden;

    background:#020806;
}


/* MAP CONTROL COLUMN */

.map-side{
    width:var(--map-side-w);

    height:100%;

    padding:14px;

    overflow-y:auto;

    background:
        linear-gradient(
            180deg,
            #061811,
            #04110d
        );

    border-right:
        1px solid #174536;
}

.map-eyebrow{
    color:#08d894;

    font-size:7px;

    letter-spacing:2px;
}

.map-side h2{
    margin:4px 0 8px;

    color:#f0f7f4;

    font-size:15px;

    letter-spacing:.5px;
}

.map-status{
    margin-bottom:12px;

    color:#08d894;

    font-size:9px;
}

.map-side > input{
    width:100%;

    padding:10px;

    color:#fff;

    background:#071612;

    border:
        1px solid #174536;

    outline:none;
}

.map-side h4{
    margin:18px 0 5px;

    color:#499b80;

    font-size:8px;

    letter-spacing:1px;
}

.map-side label{
    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:10px 0;

    color:#91a79e;

    border-bottom:
        1px solid #12382d;

    font-size:9px;
}

.map-side input[type="checkbox"]{
    accent-color:#08d894;
}


.mapplayer{
    padding:9px 2px;

    border-bottom:
        1px solid #12382d;

    cursor:pointer;
}

.mapplayer:hover{
    background:
        rgba(8,216,148,.055);
}

.mapplayer b{
    display:block;

    color:#fff;

    font-size:10px;
}

.mapplayer small{
    display:block;

    margin-top:2px;

    color:#667970;

    font-size:8px;
}


/* MAP STAGE */

.map-stage{
    position:relative;

    width:100%;

    height:100%;

    min-width:0;

    min-height:0;

    overflow:hidden;

    background:#02101a;
}

#map{
    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    min-width:0;

    min-height:0;

    background:#02101a;
}

.leaflet-container{
    width:100% !important;

    height:100% !important;

    background:#02101a !important;
}

.leaflet-image-layer{
    image-rendering:auto;
}


/* PLAYER MARKER */

.player-marker{
    width:0 !important;

    height:0 !important;
}

.player-marker .mk{
    width:14px;

    height:14px;

    border-radius:50%;

    background:#08d894;

    border:
        3px solid #022119;

    box-shadow:
        0 0 0 4px rgba(8,216,148,.22),
        0 0 18px rgba(8,216,148,.9);

    transform:
        translate(-50%,-50%);
}

.player-marker .mkl{
    position:absolute;

    left:11px;

    top:-11px;

    padding:3px 6px;

    white-space:nowrap;

    color:#fff;

    background:
        rgba(3,20,15,.96);

    border:
        1px solid #1b5f48;

    font-size:9px;
}


/* MAP CREDIT */

.map-credit{
    position:absolute;

    right:10px;

    bottom:10px;

    z-index:800;

    padding:5px 8px;

    color:#8ca49a;

    background:
        rgba(3,15,11,.88);

    border:
        1px solid #174536;

    font-size:8px;
}

.map-credit a{
    color:#08d894;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:1200px){

    :root{
        --chat-w:260px;
        --map-side-w:230px;
    }

    .logo{
        width:190px;

        min-width:190px;
    }

    .top nav a{
        padding:0 9px;

        font-size:9px;
    }

    .coins,
    .shards{
        display:none;
    }

    .updates{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}


@media(max-width:900px){

    :root{
        --map-side-w:210px;
    }

    .left{
        display:none;
    }

    .app{
        grid-template-columns:
            1fr;
    }

    .page-map main{
        height:
            calc(100vh - var(--top-h));
    }

    .featured{
        grid-template-columns:1fr;
    }
}


@media(max-width:700px){

    .top{
        height:auto;

        flex-wrap:wrap;
    }

    .logo{
        height:58px;
    }

    .top nav{
        order:3;

        width:100%;

        height:44px;
    }

    .top nav a{
        height:44px;
    }

    .me{
        height:58px;
    }

    main{
        padding:18px 12px 50px;
    }

    .page-map main{
        height:
            calc(100vh - 102px);
    }

    .map-layout{
        height:
            calc(100vh - 102px);

        grid-template-columns:1fr;

        grid-template-rows:
            190px
            minmax(0,1fr);
    }

    .map-side{
        width:100%;

        height:190px;

        border-right:0;

        border-bottom:
            1px solid #174536;
    }

    .updates{
        grid-template-columns:1fr;
    }

    .stats{
        grid-template-columns:
            1fr 1fr;
    }

    .modal-box{
        grid-template-columns:1fr;

        overflow-y:auto;
    }

    .modal-box > aside{
        border-right:0;

        border-bottom:
            1px solid #174536;
    }
}