/* ============================================================
   RYVA V13
   FIX FINAL: Online gigante + Pico debajo + Navbar resuelto
   ============================================================ */

/* ============================================================
   ESTADO DEL SERVIDOR
   ============================================================ */

body[data-vulk-theme="emerald"] #hero .vulk-ref-right{
    width:100% !important;
    max-width:320px !important;
    min-width:0 !important;
}

body[data-vulk-theme="emerald"] #hero .ref-server-panel.ref-server-panel-v2{
    width:100% !important;
    max-width:320px !important;
    min-width:0 !important;

    padding:15px 15px 14px !important;

    display:grid !important;
    grid-template-columns:1fr auto !important;
    grid-template-areas:
        "title online"
        "count count"
        "sub sub"
        "label label"
        "stats stats"
        "highlight highlight"
        "play play" !important;

    gap:7px !important;
    overflow:hidden !important;

    border:1px solid rgba(23,238,151,.28) !important;
    border-radius:18px !important;

    background:
        radial-gradient(circle at 50% 26%, rgba(23,238,151,.11), transparent 40%),
        linear-gradient(180deg, rgba(2,15,10,.97), rgba(1,9,6,.985)) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 18px 38px rgba(0,0,0,.25),
        0 0 22px rgba(23,238,151,.045) !important;
}

/* Título */
body[data-vulk-theme="emerald"] #hero .ref-panel-title{
    grid-area:title !important;
    margin:0 !important;
    color:#f2fff8 !important;
    font-size:10px !important;
    line-height:1.05 !important;
    font-weight:1000 !important;
    letter-spacing:.55px !important;
    text-align:left !important;
}

/* ONLINE */
body[data-vulk-theme="emerald"] #hero .ref-server-online{
    grid-area:online !important;
    justify-self:end !important;

    margin:0 !important;
    padding:5px 10px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;

    border:1px solid rgba(23,238,151,.18) !important;
    border-radius:999px !important;
    background:rgba(23,238,151,.055) !important;

    color:#88ffd2 !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:1000 !important;
    white-space:nowrap !important;
}

/* Número ONLINE protagonista */
body[data-vulk-theme="emerald"] #hero .ref-server-count-group{
    grid-area:count !important;

    margin:1px 0 0 !important;
    padding:12px 14px 10px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    min-height:122px !important;

    border:1px solid rgba(23,238,151,.17) !important;
    border-radius:15px !important;

    background:
        radial-gradient(circle at 50% 42%, rgba(23,238,151,.15), transparent 58%),
        linear-gradient(180deg, rgba(4,28,18,.78), rgba(2,13,9,.58)) !important;

    box-shadow:
        inset 0 0 26px rgba(23,238,151,.035),
        0 0 20px rgba(23,238,151,.045) !important;
}

body[data-vulk-theme="emerald"] #hero .ref-server-count.ref-server-count-single{
    margin:0 !important;
    text-align:center !important;
}

body[data-vulk-theme="emerald"] #hero .ref-server-count.ref-server-count-single strong{
    display:block !important;

    color:#baffE7 !important;
    font-size:82px !important;
    line-height:.78 !important;
    font-weight:1000 !important;
    letter-spacing:-3px !important;

    text-shadow:
        0 0 9px rgba(23,238,151,.38),
        0 0 24px rgba(23,238,151,.16) !important;
}

/* Pico online DEBAJO del 49 */
body[data-vulk-theme="emerald"] #hero .ref-server-peak{
    margin:11px 0 0 !important;
    padding:6px 11px !important;

    display:inline-flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;

    width:auto !important;
    min-width:142px !important;

    border:1px solid rgba(23,238,151,.18) !important;
    border-radius:999px !important;

    background:rgba(1,11,7,.76) !important;
}

body[data-vulk-theme="emerald"] #hero .ref-server-peak .peak-kicker{
    color:#72b092 !important;
    font-size:6.3px !important;
    line-height:1 !important;
    font-weight:950 !important;
    letter-spacing:.5px !important;
    white-space:nowrap !important;
}

body[data-vulk-theme="emerald"] #hero .ref-server-peak strong{
    color:#f1fff8 !important;
    font-size:10px !important;
    line-height:1 !important;
    font-weight:1000 !important;
    white-space:nowrap !important;
}

/* Texto descriptivo legible */
body[data-vulk-theme="emerald"] #hero .ref-server-subtext{
    grid-area:sub !important;
    display:block !important;

    margin:0 !important;
    padding:0 2px !important;

    color:#7d998c !important;
    font-size:6px !important;
    line-height:1.25 !important;
    text-align:left !important;
}

/* Label stats */
body[data-vulk-theme="emerald"] #hero .ref-server-label{
    grid-area:label !important;
    display:block !important;

    margin:2px 0 0 !important;

    color:#76a08d !important;
    font-size:6px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:.6px !important;
    text-align:center !important;
    text-transform:uppercase !important;
}

/* Stats */
body[data-vulk-theme="emerald"] #hero .ref-server-mini-stats{
    grid-area:stats !important;

    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:6px !important;

    margin:0 !important;
}

body[data-vulk-theme="emerald"] #hero .mini-stat{
    min-height:45px !important;
    padding:6px 3px !important;

    border:1px solid rgba(23,238,151,.13) !important;
    border-radius:10px !important;

    background:rgba(23,238,151,.025) !important;
}

body[data-vulk-theme="emerald"] #hero .mini-stat strong{
    color:#f4fff9 !important;
    font-size:10px !important;
    line-height:1 !important;
    font-weight:1000 !important;
}

body[data-vulk-theme="emerald"] #hero .mini-stat span{
    margin-top:4px !important;
    color:#718f82 !important;
    font-size:5px !important;
    line-height:1 !important;
    font-weight:900 !important;
}

/* Comunidad */
body[data-vulk-theme="emerald"] #hero .ref-server-highlight{
    grid-area:highlight !important;

    min-height:25px !important;
    margin:0 !important;
    padding:5px 7px !important;

    border:1px solid rgba(23,238,151,.14) !important;
    border-radius:8px !important;

    background:
        linear-gradient(90deg, rgba(23,238,151,.02), rgba(23,238,151,.07), rgba(23,238,151,.02)) !important;

    color:#80cbaa !important;
    font-size:5.6px !important;
    font-weight:900 !important;
}

/* Jugar */
body[data-vulk-theme="emerald"] #hero .ref-connect-btn{
    grid-area:play !important;

    min-height:54px !important;
    margin:0 !important;
    padding:8px !important;

    border:1px solid rgba(143,255,215,.70) !important;
    border-radius:11px !important;

    background:
        linear-gradient(180deg,#14d987,#087a49) !important;

    color:#f7fff9 !important;
    font-size:16px !important;
    font-weight:1000 !important;
    letter-spacing:.65px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 8px 20px rgba(0,0,0,.16) !important;
}

/* Accesos inferiores */
body[data-vulk-theme="emerald"] #hero .ref-quick-grid{
    width:100% !important;
    max-width:320px !important;

    margin-top:7px !important;

    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:6px !important;
}

body[data-vulk-theme="emerald"] #hero .ref-quick-grid a{
    min-width:0 !important;
    min-height:64px !important;
    padding:7px 3px !important;
}

body[data-vulk-theme="emerald"] #hero .ref-quick-grid a i{
    font-size:17px !important;
}

body[data-vulk-theme="emerald"] #hero .ref-quick-grid a strong{
    font-size:6.7px !important;
}

body[data-vulk-theme="emerald"] #hero .ref-quick-grid a span{
    font-size:4.5px !important;
}


/* ============================================================
   NAVBAR - REHECHO / ALINEADO / SIN DESFASES
   ============================================================ */

/* Navbar wrapper */
#navbar{
    position:relative !important;

    width:min(1420px, calc(100% - 40px)) !important;
    min-height:74px !important;

    margin:4px auto 0 !important;
    padding:0 18px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    border:1px solid rgba(23,238,151,.23) !important;
    border-radius:17px !important;

    background:
        linear-gradient(180deg, rgba(2,13,9,.95), rgba(1,9,6,.97)) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.02),
        0 12px 30px rgba(0,0,0,.18) !important;
}

/* menú ocupa su zona real */
#navbar #cssmenu,
#navbar .vulk-main-nav{
    position:static !important;
    width:auto !important;
    flex:1 1 auto !important;

    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;

    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

#navbar #cssmenu > ul{
    width:100% !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    flex-wrap:nowrap !important;

    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
}

#navbar #cssmenu > ul > li{
    float:none !important;
    display:block !important;
    margin:0 5px 0 0 !important;
}

#navbar #cssmenu > ul > li > a{
    min-height:44px !important;

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

    padding:0 17px !important;

    border:1px solid transparent !important;
    border-radius:10px !important;

    color:#d8e8df !important;
    font-size:11px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:.45px !important;
    text-transform:uppercase !important;

    white-space:nowrap !important;
}

#navbar #cssmenu > ul > li.active > a,
#navbar #cssmenu > ul > li > a:hover{
    border-color:rgba(23,238,151,.31) !important;
    background:linear-gradient(180deg, rgba(23,238,151,.13), rgba(23,238,151,.045)) !important;
    color:#f2fff8 !important;

    box-shadow:0 0 14px rgba(23,238,151,.06) !important;
}

/* Login queda DENTRO del navbar, no flotando */
#navbar .navbar-login-btn{
    position:static !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    flex:0 0 auto !important;

    margin:0 0 0 14px !important;
    padding:0 !important;

    transform:none !important;

    display:flex !important;
    align-items:center !important;
    gap:6px !important;
}

#navbar .navbar-login-btn .btn-login-small{
    min-height:45px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;

    margin:0 !important;
    padding:0 20px !important;

    border:1px solid rgba(118,255,200,.58) !important;
    border-radius:10px !important;

    background:
        linear-gradient(180deg, rgba(13,183,108,.32), rgba(6,83,50,.30)) !important;

    color:#f0fff7 !important;
    font-size:10px !important;
    font-weight:1000 !important;
    letter-spacing:.55px !important;
    text-transform:uppercase !important;

    box-shadow:none !important;
}

#navbar .navbar-login-btn .btn-login-small:hover{
    background:
        linear-gradient(180deg, rgba(23,238,151,.30), rgba(7,118,70,.30)) !important;

    border-color:rgba(154,255,217,.76) !important;
}

/* countdown no se pisa con navbar */
#vulk-opening-countdown{
    position:relative !important;
    z-index:20 !important;
}

#navbar{
    z-index:19 !important;
}


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

@media(max-width:1100px){
    #navbar{
        width:calc(100% - 24px) !important;
        padding:0 12px !important;
    }

    #navbar #cssmenu > ul > li > a{
        padding:0 11px !important;
        font-size:10px !important;
    }

    #navbar .navbar-login-btn .btn-login-small{
        padding:0 14px !important;
    }
}

@media(max-width:860px){
    #navbar{
        min-height:0 !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:8px !important;

        padding:10px !important;
    }

    #navbar #cssmenu > ul{
        justify-content:center !important;
        flex-wrap:wrap !important;
        gap:5px !important;
    }

    #navbar #cssmenu > ul > li{
        margin:0 !important;
    }

    #navbar .navbar-login-btn{
        width:100% !important;
        margin:0 !important;
        justify-content:center !important;
    }

    #navbar .navbar-login-btn .btn-login-small{
        min-width:150px !important;
    }
}

@media(max-width:760px){
    body[data-vulk-theme="emerald"] #hero .vulk-ref-right,
    body[data-vulk-theme="emerald"] #hero .ref-server-panel.ref-server-panel-v2,
    body[data-vulk-theme="emerald"] #hero .ref-quick-grid{
        max-width:100% !important;
    }

    body[data-vulk-theme="emerald"] #hero .ref-server-count.ref-server-count-single strong{
        font-size:68px !important;
    }

    body[data-vulk-theme="emerald"] #hero .ref-quick-grid{
        grid-template-columns:repeat(2,1fr) !important;
    }
}