/* ============================================================
   RYVA V10
   Server status: más ancho, más impactante, sin ganar altura.
   ============================================================ */

/* Dar más ancho al sector derecho sin crecer verticalmente */
body[data-vulk-theme="emerald"] #hero .vulk-ref-right{
    width:min(100%, 560px) !important;
    max-width:560px !important;
}

/* Panel principal: formato horizontal premium */
body[data-vulk-theme="emerald"] #hero .ref-server-panel.ref-server-panel-v2{
    width:100% !important;
    min-height:0 !important;
    padding:14px 16px !important;

    display:grid !important;
    grid-template-columns:150px 150px minmax(180px,1fr) !important;
    grid-template-areas:
        "head online play"
        "count stats play"
        "count highlight play" !important;

    column-gap:12px !important;
    row-gap:7px !important;
    align-items:center !important;

    border:1px solid rgba(26,244,157,.32) !important;
    border-radius:18px !important;

    background:
        radial-gradient(circle at 22% 48%, rgba(25,242,155,.12), transparent 34%),
        radial-gradient(circle at 78% 38%, rgba(0,150,88,.08), transparent 38%),
        linear-gradient(140deg, rgba(3,18,12,.97), rgba(1,9,6,.985)) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        inset 0 0 28px rgba(20,240,150,.025),
        0 18px 42px rgba(0,0,0,.27),
        0 0 26px rgba(20,240,150,.055) !important;
}

/* línea superior glow */
body[data-vulk-theme="emerald"] #hero .ref-server-panel.ref-server-panel-v2:after{
    content:"" !important;
    position:absolute !important;
    left:8% !important;
    right:8% !important;
    top:0 !important;
    height:1px !important;
    background:linear-gradient(90deg,transparent,#7effcc,#16ee97,#7effcc,transparent) !important;
    box-shadow:0 0 12px rgba(22,238,151,.32) !important;
    opacity:.9 !important;
}

/* Cabezal combinado */
body[data-vulk-theme="emerald"] #hero .ref-panel-title{
    grid-area:head !important;
    margin:0 !important;
    padding:0 !important;
    align-self:center !important;

    color:#f2fff8 !important;
    font-size:10px !important;
    line-height:1.05 !important;
    font-weight:1000 !important;
    letter-spacing:.8px !important;
    text-align:left !important;
}

body[data-vulk-theme="emerald"] #hero .ref-server-online{
    grid-area:online !important;
    margin:0 !important;
    padding:6px 9px !important;

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

    border:1px solid rgba(34,255,159,.18) !important;
    border-radius:999px !important;
    background:rgba(22,238,151,.045) !important;

    color:#82ffd0 !important;
    font-size:13px !important;
    line-height:1 !important;
    font-weight:1000 !important;
}

/* ocultamos el texto descriptivo porque ocupa alto; la info importante queda */
body[data-vulk-theme="emerald"] #hero .ref-server-subtext,
body[data-vulk-theme="emerald"] #hero .ref-server-label{
    display:none !important;
}

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

    min-height:94px !important;
    margin:0 !important;
    padding:11px 12px !important;

    display:grid !important;
    grid-template-columns:1fr !important;
    align-content:center !important;
    justify-items:center !important;
    gap:8px !important;

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

    background:
        radial-gradient(circle at 50% 45%, rgba(22,238,151,.13), transparent 60%),
        linear-gradient(180deg, rgba(4,29,18,.76), rgba(2,14,9,.56)) !important;

    box-shadow:
        inset 0 0 24px rgba(22,238,151,.03),
        0 0 18px rgba(22,238,151,.045) !important;
}

body[data-vulk-theme="emerald"] #hero .ref-server-count.ref-server-count-single strong{
    color:#b7ffe5 !important;
    font-size:62px !important;
    line-height:.82 !important;
    font-weight:1000 !important;
    letter-spacing:-2px !important;
    text-shadow:
        0 0 8px rgba(22,238,151,.32),
        0 0 22px rgba(22,238,151,.14) !important;
}

/* Pico online legible, no comprimido */
body[data-vulk-theme="emerald"] #hero .ref-server-peak{
    width:auto !important;
    min-width:104px !important;
    padding:5px 9px !important;

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

    border:1px solid rgba(22,238,151,.17) !important;
    border-radius:999px !important;
    background:rgba(1,12,8,.76) !important;
}

body[data-vulk-theme="emerald"] #hero .ref-server-peak .peak-kicker{
    color:#66aa8c !important;
    font-size:6px !important;
    font-weight:950 !important;
    white-space:nowrap !important;
}

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

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

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

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

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

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

    background:
        linear-gradient(180deg, rgba(22,238,151,.055), rgba(22,238,151,.018)) !important;
}

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

body[data-vulk-theme="emerald"] #hero .mini-stat span{
    margin-top:5px !important;
    color:#73a18d !important;
    font-size:5.5px !important;
    line-height:1 !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
}

/* Franja comunidad */
body[data-vulk-theme="emerald"] #hero .ref-server-highlight{
    grid-area:highlight !important;
    min-height:28px !important;
    margin:0 !important;
    padding:6px 8px !important;

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

    border:1px solid rgba(22,238,151,.16) !important;
    border-radius:9px !important;

    background:
        linear-gradient(90deg, rgba(22,238,151,.025), rgba(22,238,151,.075), rgba(22,238,151,.025)) !important;

    color:#8ce1b7 !important;
    font-size:6px !important;
    font-weight:950 !important;
    letter-spacing:.45px !important;
    text-align:center !important;
}

/* JUGAR: vertical al costado, sin aumentar alto del panel */
body[data-vulk-theme="emerald"] #hero .ref-connect-btn{
    grid-area:play !important;
    align-self:stretch !important;

    min-height:0 !important;
    height:100% !important;
    margin:0 !important;
    padding:10px !important;

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

    border:1px solid rgba(150,255,218,.72) !important;
    border-radius:14px !important;

    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.10), transparent 38%),
        linear-gradient(180deg,#13d886,#087547) !important;

    color:#f7fff9 !important;

    font-size:18px !important;
    font-weight:1000 !important;
    letter-spacing:.8px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 0 24px rgba(22,238,151,.12) !important;
}

body[data-vulk-theme="emerald"] #hero .ref-connect-btn:hover{
    transform:translateY(-2px) !important;
    filter:brightness(1.09) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 0 32px rgba(22,238,151,.20) !important;
}

body[data-vulk-theme="emerald"] #hero .ref-connect-btn small{
    margin-top:5px !important;
    color:#d1ffec !important;
    font-size:6px !important;
    letter-spacing:1.8px !important;
}


/* ============================================================
   Quick links: usar el ancho nuevo, una sola línea
   ============================================================ */

body[data-vulk-theme="emerald"] #hero .ref-quick-grid{
    width:100% !important;
    margin-top:7px !important;

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

body[data-vulk-theme="emerald"] #hero .ref-quick-grid a{
    min-height:62px !important;
    padding:8px 5px !important;

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

    background:
        radial-gradient(circle at 50% 0%, rgba(22,238,151,.05), transparent 55%),
        linear-gradient(180deg, rgba(5,22,15,.97), rgba(2,11,7,.99)) !important;

    transition:.18s ease !important;
}

body[data-vulk-theme="emerald"] #hero .ref-quick-grid a:hover{
    transform:translateY(-3px) !important;
    border-color:rgba(133,255,208,.54) !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(22,238,151,.10), transparent 60%),
        linear-gradient(180deg, rgba(7,35,22,.98), rgba(2,13,8,.99)) !important;
}

body[data-vulk-theme="emerald"] #hero .ref-quick-grid a i{
    color:#22f19c !important;
    font-size:19px !important;
    margin-bottom:5px !important;
}

body[data-vulk-theme="emerald"] #hero .ref-quick-grid a strong{
    color:#83ffd1 !important;
    font-size:8px !important;
    font-weight:1000 !important;
}

body[data-vulk-theme="emerald"] #hero .ref-quick-grid a span{
    margin-top:3px !important;
    color:#789185 !important;
    font-size:5.2px !important;
}


/* ============================================================
   Responsive
   ============================================================ */

@media(max-width:1200px){
    body[data-vulk-theme="emerald"] #hero .vulk-ref-right{
        width:min(100%, 510px) !important;
        max-width:510px !important;
    }

    body[data-vulk-theme="emerald"] #hero .ref-server-panel.ref-server-panel-v2{
        grid-template-columns:135px 140px minmax(160px,1fr) !important;
    }
}

@media(max-width:1000px){
    body[data-vulk-theme="emerald"] #hero .vulk-ref-right{
        width:min(100%, 720px) !important;
        max-width:720px !important;
    }

    body[data-vulk-theme="emerald"] #hero .ref-server-panel.ref-server-panel-v2{
        grid-template-columns:160px 180px minmax(180px,1fr) !important;
    }
}

@media(max-width:720px){
    body[data-vulk-theme="emerald"] #hero .vulk-ref-right{
        width:100% !important;
        max-width:100% !important;
    }

    body[data-vulk-theme="emerald"] #hero .ref-server-panel.ref-server-panel-v2{
        grid-template-columns:1fr !important;
        grid-template-areas:
            "head"
            "online"
            "count"
            "stats"
            "highlight"
            "play" !important;
    }

    body[data-vulk-theme="emerald"] #hero .ref-server-peak{
        position:absolute !important;
        right:18px !important;
        top:58px !important;
    }

    body[data-vulk-theme="emerald"] #hero .ref-panel-title{
        text-align:center !important;
    }

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