/* ============================================================
   RYVA V12 - FIX SERVER PANEL
   Corrige overflow/cortes causados por V10.
   Diseñado para el ancho REAL de la columna derecha.
   ============================================================ */

/* Restaurar ancho seguro del lateral */
body[data-vulk-theme="emerald"] #hero .vulk-ref-right{
    width:100% !important;
    max-width:300px !important;
    min-width:0 !important;
    overflow:visible !important;
}

/* Panel compacto vertical, sin overflow */
body[data-vulk-theme="emerald"] #hero .ref-server-panel.ref-server-panel-v2{
    width:100% !important;
    max-width:300px !important;
    min-width:0 !important;
    min-height:0 !important;

    padding:15px 14px !important;

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

    gap:7px !important;
    align-items:center !important;

    overflow:hidden !important;

    border:1px solid rgba(24,240,154,.27) !important;
    border-radius:18px !important;

    background:
        radial-gradient(circle at 50% 18%, rgba(24,240,154,.10), transparent 36%),
        linear-gradient(180deg, rgba(2,15,10,.97), rgba(1,9,6,.98)) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 18px 38px rgba(0,0,0,.24) !important;
}

/* limpiar layouts conflictivos anteriores */
body[data-vulk-theme="emerald"] #hero .ref-panel-title,
body[data-vulk-theme="emerald"] #hero .ref-server-online,
body[data-vulk-theme="emerald"] #hero .ref-server-subtext,
body[data-vulk-theme="emerald"] #hero .ref-server-count-group,
body[data-vulk-theme="emerald"] #hero .ref-server-peak,
body[data-vulk-theme="emerald"] #hero .ref-server-label,
body[data-vulk-theme="emerald"] #hero .ref-server-mini-stats,
body[data-vulk-theme="emerald"] #hero .ref-server-highlight,
body[data-vulk-theme="emerald"] #hero .ref-connect-btn{
    position:static !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    transform:none !important;
}

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

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

    justify-self:end !important;

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

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

    border:1px solid rgba(24,240,154,.20) !important;
    border-radius:999px !important;

    background:rgba(24,240,154,.055) !important;

    color:#7effcb !important;
    font-size:11px !important;
    line-height:1 !important;
    font-weight:1000 !important;
    white-space:nowrap !important;
}

body[data-vulk-theme="emerald"] #hero .ref-server-online .status-dot{
    width:8px !important;
    height:8px !important;
    flex:0 0 8px !important;
}

/* bloque online grande */
body[data-vulk-theme="emerald"] #hero .ref-server-count-group{
    grid-area:count !important;

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

    display:grid !important;
    grid-template-columns:1fr auto !important;
    align-items:center !important;
    gap:10px !important;

    border:1px solid rgba(24,240,154,.15) !important;
    border-radius:14px !important;

    background:
        radial-gradient(circle at 27% 50%, rgba(24,240,154,.13), transparent 43%),
        linear-gradient(180deg, rgba(5,31,19,.72), rgba(2,14,9,.58)) !important;
}

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

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

    color:#b9ffe6 !important;
    font-size:52px !important;
    line-height:.82 !important;
    font-weight:1000 !important;
    letter-spacing:-1.5px !important;

    text-shadow:
        0 0 8px rgba(24,240,154,.30),
        0 0 22px rgba(24,240,154,.13) !important;
}

/* pico online ahora a la derecha, limpio */
body[data-vulk-theme="emerald"] #hero .ref-server-peak{
    margin:0 !important;
    padding:6px 8px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    justify-content:center !important;
    gap:2px !important;

    border:0 !important;
    background:transparent !important;
}

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

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

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

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

    color:#718d80 !important;
    font-size:5.5px !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:#6f9a87 !important;
    font-size:5.5px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:.55px !important;
    text-align:center !important;
    text-transform:uppercase !important;
}

/* stats 3 columnas seguras */
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-width:0 !important;
    min-height:43px !important;

    padding:6px 3px !important;

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

    border:1px solid rgba(24,240,154,.13) !important;
    border-radius:9px !important;

    background:rgba(24,240,154,.025) !important;
}

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

body[data-vulk-theme="emerald"] #hero .mini-stat span{
    margin-top:4px !important;

    color:#708f81 !important;
    font-size:4.7px !important;
    line-height:1 !important;
    font-weight:900 !important;
    white-space:nowrap !important;
}

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

    min-height:24px !important;
    margin:0 !important;
    padding:5px 6px !important;

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

    border:1px solid rgba(24,240,154,.14) !important;
    border-radius:8px !important;

    background:rgba(24,240,154,.025) !important;

    color:#78c6a4 !important;
    font-size:5.3px !important;
    line-height:1 !important;
    font-weight:900 !important;

    white-space:nowrap !important;
}

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

    min-height:52px !important;
    height:auto !important;

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

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

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

    background:linear-gradient(180deg,#12d584,#087647) !important;

    color:#f7fff9 !important;
    font-size:15px !important;
    line-height:1 !important;
    font-weight:1000 !important;
    letter-spacing:.6px !important;
}

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

/* quick links: 4 columnas sin cortar */
body[data-vulk-theme="emerald"] #hero .ref-quick-grid{
    width:100% !important;
    max-width:300px !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:62px !important;
    padding:7px 2px !important;
    overflow:hidden !important;
}

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

body[data-vulk-theme="emerald"] #hero .ref-quick-grid a strong{
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;

    font-size:6.5px !important;
}

body[data-vulk-theme="emerald"] #hero .ref-quick-grid a span{
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;

    font-size:4.4px !important;
}

/* tablet: puede crecer un poco */
@media(min-width:1000px){
    body[data-vulk-theme="emerald"] #hero .vulk-ref-right{
        max-width:300px !important;
    }
}

/* mobile */
@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-quick-grid{
        grid-template-columns:repeat(2,1fr) !important;
    }
}