/* ============================================================
   RYVA V9
   - Online actual como dato más protagonista
   - Estado servidor más vistoso
   - Apertura mucho más lineal/compacta
   - Rey del MU guild mark robusto y limpio
   ============================================================ */

:root{
    --v9-green:#18f09a;
    --v9-green-2:#08a563;
    --v9-green-soft:#9affdb;
    --v9-panel:rgba(2,13,9,.92);
    --v9-line:rgba(24,240,154,.24);
    --v9-muted:#789487;
}

/* ============================================================
   COUNTDOWN APERTURA: formato horizontal compacto
   ============================================================ */

#vulk-opening-countdown{
    padding:4px 10px !important;
    background:transparent !important;
}

#vulk-opening-countdown .vulk-opening-panel{
    width:min(1320px, calc(100% - 20px)) !important;
    min-height:58px !important;
    margin:0 auto !important;
    padding:8px 16px !important;

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

    border-radius:15px !important;
    border:1px solid rgba(24,240,154,.20) !important;
    background:
        linear-gradient(90deg,
            rgba(1,9,6,.94),
            rgba(3,25,16,.91) 50%,
            rgba(1,9,6,.94)) !important;

    box-shadow:0 8px 22px rgba(0,0,0,.16) !important;
}

#vulk-opening-countdown .vulk-opening-panel:before{
    display:none !important;
}

#vulk-opening-countdown .vulk-opening-panel:after{
    height:1px !important;
    left:18px !important;
    right:18px !important;
    opacity:.46 !important;
}

#vulk-opening-countdown .vulk-opening-info{
    width:auto !important;
    min-width:310px !important;
    text-align:right !important;
    padding:0 !important;
}

#vulk-opening-countdown .vulk-opening-date{
    margin:0 !important;
    color:#8bffd4 !important;
    font-size:18px !important;
    line-height:1 !important;
    font-weight:1000 !important;
    letter-spacing:.65px !important;
}

#vulk-opening-countdown .vulk-opening-subtitle{
    margin-top:5px !important;
    color:#779084 !important;
    font-size:7px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:.95px !important;
}

#vulk-opening-countdown .vulk-opening-timer{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:5px !important;
}

#vulk-opening-countdown .vulk-opening-time{
    width:58px !important;
    min-width:58px !important;
    min-height:42px !important;
    padding:5px 3px !important;

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

    border-radius:10px !important;
    border:1px solid rgba(24,240,154,.29) !important;
    background:linear-gradient(180deg, rgba(10,118,70,.23), rgba(2,16,10,.55)) !important;
}

#vulk-opening-countdown .vulk-opening-time strong{
    color:#9effdc !important;
    font-size:16px !important;
    line-height:1 !important;
    font-weight:1000 !important;
}

#vulk-opening-countdown .vulk-opening-time span{
    margin-top:3px !important;
    color:#789487 !important;
    font-size:5.5px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:.6px !important;
}


/* ============================================================
   ESTADO DEL SERVIDOR:
   online actual es EL elemento principal
   ============================================================ */

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

body[data-vulk-theme="emerald"] #hero .ref-server-panel.ref-server-panel-v2{
    position:relative !important;
    overflow:hidden !important;

    width:100% !important;
    padding:14px !important;

    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    grid-template-areas:
        "title title"
        "online online"
        "count count"
        "sub peak"
        "label label"
        "stats stats"
        "highlight highlight"
        "play play" !important;
    gap:6px !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,.09), transparent 34%),
        linear-gradient(180deg, rgba(2,15,10,.95), rgba(1,9,6,.97)) !important;

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

body[data-vulk-theme="emerald"] #hero .ref-server-panel.ref-server-panel-v2:after{
    content:"" !important;
    position:absolute !important;
    left:18% !important;
    right:18% !important;
    top:0 !important;
    height:1px !important;
    background:linear-gradient(90deg,transparent,#5dffc1,transparent) !important;
    opacity:.62 !important;
}

body[data-vulk-theme="emerald"] #hero .ref-panel-title{
    grid-area:title !important;
    margin:0 !important;
    color:#dffff0 !important;
    font-size:9px !important;
    line-height:1 !important;
    text-align:center !important;
    font-weight:1000 !important;
    letter-spacing:.8px !important;
    text-transform:uppercase !important;
}

body[data-vulk-theme="emerald"] #hero .ref-server-online{
    grid-area:online !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
    margin:0 !important;

    color:#7effcb !important;
    font-size:15px !important;
    line-height:1 !important;
    font-weight:1000 !important;
}

body[data-vulk-theme="emerald"] #hero .ref-server-online .status-dot{
    width:9px !important;
    height:9px !important;
    border-radius:50% !important;
    background:#2aff9d !important;
    box-shadow:0 0 11px rgba(42,255,157,.78) !important;
}

/* Número online enorme y protagonista */
body[data-vulk-theme="emerald"] #hero .ref-server-count-group{
    grid-area:count !important;
    margin:3px 0 1px !important;
    padding:8px 10px 10px !important;

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

    background:
        radial-gradient(circle at 50% 38%, rgba(24,240,154,.08), transparent 58%),
        rgba(24,240,154,.018) !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:#b8ffe5 !important;
    font-size:68px !important;
    line-height:.86 !important;
    font-weight:1000 !important;
    letter-spacing:-2px !important;

    text-shadow:
        0 0 10px rgba(24,240,154,.22),
        0 0 26px rgba(24,240,154,.11) !important;
}

body[data-vulk-theme="emerald"] #hero .ref-server-subtext{
    grid-area:sub !important;
    align-self:center !important;
    margin:0 !important;
    color:#748d82 !important;
    font-size:6.5px !important;
    line-height:1.25 !important;
    text-align:left !important;
}

/* Pico online como dato secundario, pero claro */
body[data-vulk-theme="emerald"] #hero .ref-server-peak{
    grid-area:peak !important;

    min-height:30px !important;
    padding:5px 8px !important;

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

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

body[data-vulk-theme="emerald"] #hero .ref-server-peak .peak-kicker{
    color:#5e9f83 !important;
    font-size:6px !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
}

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

body[data-vulk-theme="emerald"] #hero .ref-server-label{
    grid-area:label !important;
    margin:3px 0 0 !important;
    color:#73a28e !important;
    font-size:6px !important;
    font-weight:900 !important;
    letter-spacing:.65px !important;
    text-align:center !important;
    text-transform:uppercase !important;
}

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:42px !important;
    padding:6px 4px !important;

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

    border:1px solid rgba(24,240,154,.12) !important;
    border-radius:10px !important;
    background:rgba(24,240,154,.025) !important;
}

body[data-vulk-theme="emerald"] #hero .mini-stat strong{
    color:#effff7 !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:#6b8a7c !important;
    font-size:5px !important;
    line-height:1 !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
}

body[data-vulk-theme="emerald"] #hero .ref-server-highlight{
    grid-area:highlight !important;
    min-height:24px !important;
    padding:5px 7px !important;
    margin:0 !important;

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

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

    color:#77c8a4 !important;
    font-size:5.8px !important;
    font-weight:900 !important;
}

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

    min-height:52px !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(139,255,213,.68) !important;
    border-radius:11px !important;

    background:linear-gradient(180deg,#0dcc7d,#087b4a) !important;
    color:#f5fff9 !important;

    font-size:16px !important;
    font-weight:1000 !important;
    letter-spacing:.7px !important;

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

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


/* Quick links un poco más importantes visualmente */
body[data-vulk-theme="emerald"] #hero .ref-quick-grid{
    margin-top:7px !important;
    grid-template-columns:repeat(4,1fr) !important;
    gap:6px !important;
}

body[data-vulk-theme="emerald"] #hero .ref-quick-grid a{
    min-height:58px !important;
    padding:7px 4px !important;
    border-color:rgba(24,240,154,.22) !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:7.5px !important;
}

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


/* ============================================================
   REY DEL MU: guild mark real, más limpio y legible
   ============================================================ */

body[data-vulk-theme="emerald"] .vulcanus-castle-card .ryva-rey-guildmark{
    width:136px !important;
    height:136px !important;
    margin:0 auto !important;

    display:grid !important;
    place-items:center !important;

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

    background:
        radial-gradient(circle at 50% 45%, rgba(24,240,154,.10), transparent 58%),
        rgba(2,13,9,.88) !important;

    box-shadow:
        inset 0 0 20px rgba(24,240,154,.035),
        0 0 24px rgba(24,240,154,.06) !important;
}

body[data-vulk-theme="emerald"] .vulcanus-castle-card .ryva-rey-guildmark img{
    width:112px !important;
    height:112px !important;
    max-width:112px !important;
    max-height:112px !important;

    padding:0 !important;
    margin:0 !important;

    border:0 !important;
    border-radius:8px !important;
    background:transparent !important;

    image-rendering:pixelated !important;
    image-rendering:crisp-edges !important;
    box-shadow:none !important;
}

/* Quita estilos viejos que agrandaban/emborronaban el mark */
body[data-vulk-theme="emerald"] .vulcanus-castle-card img[src*="guildmark.php"]{
    filter:none !important;
    opacity:1 !important;
}


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

@media(max-width:1000px){
    #vulk-opening-countdown .vulk-opening-panel{
        width:calc(100% - 14px) !important;
        gap:16px !important;
    }

    #vulk-opening-countdown .vulk-opening-info{
        min-width:270px !important;
    }

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

@media(max-width:720px){
    #vulk-opening-countdown .vulk-opening-panel{
        flex-direction:column !important;
        gap:7px !important;
        padding:9px !important;
    }

    #vulk-opening-countdown .vulk-opening-info{
        min-width:0 !important;
        text-align:center !important;
    }

    #vulk-opening-countdown .vulk-opening-date{
        font-size:15px !important;
    }

    #vulk-opening-countdown .vulk-opening-time{
        width:54px !important;
        min-width:54px !important;
    }

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

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