/* ==========================================================
   ROLYGAMING V4 - VISUAL COMPETITIVO
   ========================================================== */

:root{
    --rg-bg:#06050a;
    --rg-panel:#0f0b15;
    --rg-panel-2:#15101d;
    --rg-purple:#9b4dff;
    --rg-purple-2:#c35cff;
    --rg-text:#f8f5ff;
    --rg-muted:#9f96ab;
    --rg-line:#2d2138;
    --rg-mix:#b14cff;
    --rg-warm:#f4d04f;
    --rg-public:#50d3bc;
    --rg-off:#ff5b69;
}

body{
    background:
        radial-gradient(circle at 50% 0%,rgba(108,37,168,.06),transparent 25%),
        var(--rg-bg);
}

/* HERO */

.hero-v4{
    position:relative;
    min-height:670px;
    overflow:hidden;
    display:flex;
    align-items:center;
    background:
        linear-gradient(110deg,#06050a 0%,#09060d 48%,#13091c 100%);
}

.hero-grid{
    position:absolute;
    inset:0;
    opacity:.18;
    background-image:
        linear-gradient(rgba(177,76,255,.08) 1px,transparent 1px),
        linear-gradient(90deg,rgba(177,76,255,.08) 1px,transparent 1px);
    background-size:58px 58px;
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 95%);
}

.hero-orb{
    position:absolute;
    border-radius:50%;
    filter:blur(85px);
    pointer-events:none;
}

.hero-orb-a{
    width:440px;
    height:440px;
    right:8%;
    top:10%;
    background:rgba(145,52,255,.22);
}

.hero-orb-b{
    width:260px;
    height:260px;
    left:-5%;
    bottom:-12%;
    background:rgba(99,43,177,.14);
}

.hero-v4-inner{
    position:relative;
    z-index:2;
    padding:88px 0 70px;
}

.hero-copy{
    max-width:850px;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:9px 13px;
    border:1px solid rgba(177,76,255,.28);
    border-radius:999px;
    color:#caa2ff;
    background:rgba(30,16,45,.45);
    font-size:10px;
    font-weight:900;
    letter-spacing:1.6px;
}

.hero-live-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#7df3a7;
    box-shadow:0 0 14px #7df3a7;
}

.hero-v4 h1{
    margin:24px 0 20px;
    max-width:900px;
    font-size:clamp(54px,7.5vw,94px);
    line-height:.92;
    letter-spacing:-4.5px;
}

.hero-v4 h1 em{
    color:var(--rg-purple-2);
    font-style:normal;
    text-shadow:0 0 35px rgba(177,76,255,.16);
}

.hero-v4 .hero-copy>p{
    max-width:690px;
    color:var(--rg-muted);
    font-size:18px;
    line-height:1.65;
}

.hero-actions-v4{
    display:flex;
    gap:12px;
    margin-top:30px;
}

.btn-main-v4{
    min-height:50px;
    padding:0 24px;
    background:linear-gradient(135deg,#6f29d8,#a847ef);
    box-shadow:0 12px 35px rgba(132,50,205,.22);
}

.btn-alt-v4{
    min-height:50px;
    padding:0 24px;
    border:1px solid #493458;
    background:rgba(255,255,255,.025);
}

.btn-main-v4:hover,
.play-server-v4:hover{
    filter:brightness(1.12);
    transform:translateY(-1px);
}

/* GLOBAL STATS */

.rg-global-stats-v4{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    max-width:920px;
    margin-top:52px;
}

.global-stat-card{
    position:relative;
    min-height:112px;
    padding:20px;
    overflow:hidden;
    border:1px solid #2a1d35;
    border-radius:13px;
    background:
        linear-gradient(145deg,rgba(20,13,29,.92),rgba(10,7,15,.88));
}

.global-stat-card:after{
    content:"";
    position:absolute;
    width:90px;
    height:90px;
    right:-30px;
    top:-35px;
    border-radius:50%;
    background:rgba(177,76,255,.10);
    filter:blur(18px);
}

.global-icon{
    position:absolute;
    top:18px;
    right:18px;
    opacity:.25;
    font-size:22px;
}

.global-stat-card strong{
    display:block;
    color:#fff;
    font-size:27px;
    letter-spacing:-1px;
}

.global-stat-card small{
    display:block;
    margin-top:9px;
    color:#80768a;
    font-size:9px;
    font-weight:900;
    letter-spacing:1.1px;
}

/* SECTION HEADING */

.servers-v4{
    padding-top:90px;
}

.servers-heading-v4{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:25px;
    margin-bottom:30px;
}

.section-kicker-v4{
    color:#b777ff;
    font-size:10px;
    font-weight:900;
    letter-spacing:1.8px;
}

.servers-heading-v4 h2{
    margin:8px 0 6px;
}

.servers-legend{
    display:flex;
    gap:14px;
    padding-bottom:12px;
    color:#8c8297;
    font-size:9px;
    font-weight:900;
    letter-spacing:.8px;
}

.legend-dot{
    display:inline-block;
    width:7px;
    height:7px;
    margin-right:5px;
    border-radius:50%;
}

.legend-dot.mix{background:var(--rg-mix);box-shadow:0 0 10px var(--rg-mix)}
.legend-dot.warmup{background:var(--rg-warm)}
.legend-dot.public{background:var(--rg-public)}

/* SERVER GRID */

.server-grid-v4{
    gap:18px;
}

.server-card-v4{
    position:relative;
    overflow:hidden;
    padding:23px;
    border-radius:15px;
    background:
        radial-gradient(circle at 100% 0%,rgba(132,52,197,.07),transparent 28%),
        linear-gradient(145deg,#0c0911,#14101a);
    border:1px solid #2a2034;
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.server-card-v4:hover{
    transform:translateY(-4px);
    border-color:#5d3478;
    box-shadow:0 18px 48px rgba(0,0,0,.28);
}

.server-card-v4:before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:2px;
    background:#32223e;
}

.server-card-v4[data-state="mix"]{
    border-color:rgba(177,76,255,.62);
    box-shadow:
        0 0 0 1px rgba(177,76,255,.05),
        0 18px 48px rgba(105,31,168,.13);
}

.server-card-v4[data-state="mix"]:before{
    background:linear-gradient(90deg,transparent,var(--rg-mix),transparent);
    box-shadow:0 0 18px rgba(177,76,255,.65);
    animation:rgPulseMix 2.5s ease-in-out infinite;
}

.server-card-v4[data-state="warmup"]{
    border-color:rgba(244,208,79,.30);
}

.server-card-v4[data-state="warmup"]:before{
    background:linear-gradient(90deg,transparent,var(--rg-warm),transparent);
}

.server-card-v4[data-state="public"]{
    border-color:rgba(80,211,188,.30);
}

.server-card-v4[data-state="public"]:before{
    background:linear-gradient(90deg,transparent,var(--rg-public),transparent);
}

.server-card-v4[data-state="offline"]{
    opacity:.68;
}

@keyframes rgPulseMix{
    0%,100%{opacity:.55}
    50%{opacity:1}
}

.server-card-top-v4{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
}

.server-card-top-v4 .status{
    font-size:9px;
    font-weight:900;
    letter-spacing:1px;
}

.server-slots-v4{
    color:#6f6679;
    font-size:9px;
    font-weight:900;
    letter-spacing:1px;
}

.server-title-wrap-v4{
    margin:22px 0 16px;
}

.server-title-wrap-v4 h3{
    margin:0 0 6px;
    font-size:21px;
    letter-spacing:-.5px;
}

.server-title-wrap-v4 p{
    margin:0;
    color:#756d80;
    font-size:9px;
    letter-spacing:.7px;
}

.map-panel-v4{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:15px;
    min-height:58px;
    margin:14px 0;
    padding:14px;
    border:1px solid #261b30;
    border-radius:10px;
    background:#09070d;
}

.label-v4{
    color:#6e6677;
    font-size:8px;
    font-weight:900;
    letter-spacing:1px;
}

.map-panel-v4 .rg-map{
    color:white;
    font-size:19px;
    text-align:right;
}

/* SCORE */

.score-box-v4{
    position:relative;
    margin:16px 0;
    padding:16px 18px;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:13px;
    align-items:center;
    border:1px solid rgba(177,76,255,.42);
    border-radius:12px;
    background:
        radial-gradient(circle at 50% 50%,rgba(177,76,255,.15),transparent 62%),
        #09070e;
}

.score-box-v4[hidden]{
    display:none !important;
}

.team-score-v4{
    text-align:center;
}

.team-score-v4 span{
    display:block;
    color:#9e92ab;
    font-size:9px;
    font-weight:900;
    letter-spacing:1.4px;
}

.team-score-v4 strong{
    display:block;
    margin-top:4px;
    color:#fff;
    font-size:31px;
    line-height:1;
}

.score-divider-v4{
    color:#6d5e79;
    font-size:24px;
    font-weight:700;
}

/* CARD STATS */

.card-stats-v4{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin:15px 0;
}

.card-stats-v4>div{
    padding:13px;
    border:1px solid #281e32;
    border-radius:9px;
    background:rgba(7,5,10,.75);
}

.card-stats-v4 span{
    display:block;
    color:#6d6576;
    font-size:8px;
    font-weight:900;
    letter-spacing:1px;
}

.card-stats-v4 strong{
    display:block;
    margin-top:5px;
    color:#fff;
    font-size:16px;
}

/* IP */

.server-ip-v4{
    display:flex;
    margin-top:14px;
    overflow:hidden;
    border:1px solid #2a2033;
    border-radius:9px;
    background:#08060b;
}

.server-ip-v4 code{
    flex:1;
    min-width:0;
    padding:11px 12px;
    overflow:hidden;
    color:#c3bacb;
    font-size:11px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.server-ip-v4 button{
    border:0;
    border-left:1px solid #2a2033;
    padding:0 12px;
    background:#15101b;
    color:#bf82ff;
    font-size:8px;
    font-weight:900;
    cursor:pointer;
}

.play-server-v4{
    display:flex;
    width:100%;
    min-height:43px;
    margin-top:11px;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:9px;
    background:linear-gradient(135deg,#6728c9,#9f42e7);
    color:white;
    font-size:10px;
    font-weight:900;
    letter-spacing:.8px;
    transition:.2s;
}

/* FEATURES */

.features-v4{
    padding:75px 0;
    border-block:1px solid #1c1424;
    background:#09070d;
}

.features-grid-v4{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.features-grid-v4 article{
    display:flex;
    gap:18px;
    min-height:130px;
    padding:26px;
    border:1px solid #271c31;
    border-radius:13px;
    background:
        linear-gradient(145deg,rgba(22,14,29,.7),rgba(10,7,14,.75));
}

.feature-num{
    color:#8049aa;
    font-size:13px;
    font-weight:900;
}

.features-grid-v4 h3{
    margin:0 0 8px;
    font-size:16px;
}

.features-grid-v4 p{
    margin:0;
    color:#8f8799;
    font-size:12px;
    line-height:1.6;
}

/* RESPONSIVE */

@media(max-width:900px){
    .rg-global-stats-v4{
        grid-template-columns:repeat(2,1fr);
    }

    .servers-heading-v4{
        align-items:flex-start;
        flex-direction:column;
    }

    .features-grid-v4{
        grid-template-columns:1fr;
    }
}

@media(max-width:600px){
    .hero-v4{
        min-height:auto;
    }

    .hero-v4-inner{
        padding:70px 0 55px;
    }

    .hero-v4 h1{
        font-size:47px;
        letter-spacing:-2.5px;
    }

    .hero-actions-v4{
        flex-direction:column;
    }

    .btn-main-v4,
    .btn-alt-v4{
        width:100%;
    }

    .rg-global-stats-v4{
        grid-template-columns:1fr 1fr;
        margin-top:38px;
    }

    .global-stat-card{
        min-height:100px;
        padding:16px;
    }

    .global-stat-card strong{
        font-size:21px;
    }

    .servers-legend{
        flex-wrap:wrap;
    }

    .server-card-v4{
        padding:20px;
    }
}