/* ==========================================================
   RAMPAGE GAMING COMMUNITY
   WARDOGS PAGE
========================================================== */

.wd-page {
    background: #07090b;
    color: #fff;
}

.wd-container {
    width: min(1500px, calc(100% - 80px));
    margin: 0 auto;
}


/* HERO */

.wd-hero {
    min-height: 610px;

    position: relative;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        url("/assets/hero-wardogs.jpg")
        center 42% / cover no-repeat;

    border-bottom:
        1px solid rgba(255,255,255,.08);
}

.wd-hero-shade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(3,5,7,.97) 0%,
            rgba(3,5,7,.82) 36%,
            rgba(3,5,7,.30) 70%,
            rgba(3,5,7,.55) 100%
        ),
        linear-gradient(
            0deg,
            rgba(3,5,7,.78),
            transparent 45%
        );
}

.wd-hero-content {
    position: relative;
    z-index: 2;
}

.wd-eyebrow,
.wd-section-label {
    color: #ef233c;

    font-size: 13px;
    font-weight: 900;

    letter-spacing: 3px;

    text-transform: uppercase;
}

.wd-hero h1 {
    margin: 12px 0 5px;

    font-size: clamp(76px, 9vw, 145px);
    font-weight: 1000;

    line-height: .78;

    letter-spacing: -6px;

    text-transform: uppercase;
}

.wd-hero h1 span {
    color: #ef233c;
}

.wd-hero h2 {
    margin: 22px 0 0;

    font-size: clamp(24px, 2.3vw, 40px);
    font-weight: 900;

    letter-spacing: 1px;
}

.wd-hero-description {
    max-width: 620px;

    margin: 16px 0 0;

    color: #c2c9ce;

    font-size: 18px;
    line-height: 1.7;
}

.wd-buttons {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 28px;
}

.wd-btn {
    min-height: 48px;

    padding: 0 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 16px;

    text-decoration: none;

    font-size: 13px;
    font-weight: 900;

    letter-spacing: .7px;

    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease;
}

.wd-btn:hover {
    transform: translateY(-2px);
}

.wd-btn-primary {
    color: #fff;

    background: #e31932;

    border:
        1px solid #f22b42;
}

.wd-btn-primary:hover {
    background: #f0233c;
}

.wd-btn-secondary {
    color: #fff;

    background:
        rgba(9,12,15,.72);

    border:
        1px solid rgba(255,255,255,.18);
}

.wd-btn-secondary:hover {
    border-color:
        rgba(255,255,255,.45);
}

.wd-hero-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 32px;
}

.wd-hero-tags span {
    padding: 7px 11px;

    color: #aab3b9;

    background:
        rgba(0,0,0,.45);

    border:
        1px solid rgba(255,255,255,.12);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.3px;
}


/* QUICK STRIP */

.wd-quick-strip {
    background: #0d1013;

    border-bottom:
        1px solid rgba(255,255,255,.07);
}

.wd-quick-grid {
    min-height: 92px;

    display: grid;
    grid-template-columns:
        repeat(4, 1fr);
}

.wd-quick-item {
    padding: 18px 30px;

    display: flex;
    align-items: center;

    gap: 15px;

    border-right:
        1px solid rgba(255,255,255,.07);
}

.wd-quick-item:first-child {
    border-left:
        1px solid rgba(255,255,255,.07);
}

.wd-quick-icon {
    color: #ef233c;

    font-size: 24px;
}

.wd-quick-item strong {
    display: block;

    font-size: 13px;
    font-weight: 900;

    letter-spacing: .8px;
}

.wd-quick-item span {
    display: block;

    margin-top: 3px;

    color: #7f8a91;

    font-size: 12px;
}


/* SECTIONS */

.wd-section {
    padding: 90px 0;

    background: #080b0e;
}

.wd-section-dark {
    background: #050709;
}

.wd-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 50px;

    margin-bottom: 32px;
}

.wd-section-heading h2,
.wd-centred-heading h2,
.wd-info-panel h2,
.wd-discord-panel h2 {
    margin: 7px 0 0;

    font-size: clamp(32px, 3vw, 52px);
    font-weight: 1000;

    line-height: .95;

    text-transform: uppercase;
}

.wd-section-heading > p {
    max-width: 470px;

    margin: 0;

    color: #88939a;

    line-height: 1.6;
}


/* SERVER */

.wd-server-card {
    display: grid;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(300px, .8fr);

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #12171b,
            #0a0d10
        );

    border:
        1px solid rgba(255,255,255,.10);

    box-shadow:
        0 25px 80px rgba(0,0,0,.25);
}

.wd-server-main {
    padding: 34px;
}

.wd-server-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 30px;
}

.wd-server-game {
    margin-bottom: 9px;

    color: #ef233c;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 2px;
}

.wd-server-top h3 {
    margin: 0;

    font-size: clamp(23px, 2vw, 35px);
    font-weight: 1000;

    text-transform: uppercase;
}

.wd-server-top p {
    margin: 8px 0 0;

    color: #79858d;
}

.wd-status {
    flex-shrink: 0;

    padding: 9px 12px;

    display: flex;
    align-items: center;

    gap: 8px;

    background:
        rgba(255,255,255,.04);

    border:
        1px solid rgba(255,255,255,.09);

    font-size: 10px;

    letter-spacing: 1px;
}

.wd-status-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #d6a313;
}

.wd-status.online {
    color: #62df91;
}

.wd-status.online
.wd-status-dot {
    background: #35d477;

    box-shadow:
        0 0 12px rgba(53,212,119,.65);
}

.wd-status.unknown {
    color: #d8b45c;
}

.wd-server-stats {
    margin-top: 38px;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    border:
        1px solid rgba(255,255,255,.08);
}

.wd-server-stats > div {
    min-height: 92px;

    padding: 18px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    border-right:
        1px solid rgba(255,255,255,.08);
}

.wd-server-stats > div:last-child {
    border-right: 0;
}

.wd-server-stats span,
.wd-side-label {
    color: #68737b;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1.6px;
}

.wd-server-stats strong {
    margin-top: 6px;

    font-size: 17px;
}

.wd-server-side {
    padding: 34px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background:
        linear-gradient(
            150deg,
            rgba(227,25,50,.16),
            rgba(7,9,11,.65)
        );

    border-left:
        1px solid rgba(255,255,255,.08);
}

.wd-server-side > strong {
    margin-top: 8px;

    font-size: 18px;
    line-height: 1.3;
}

.wd-server-side p {
    margin: 14px 0 22px;

    color: #8d979d;

    line-height: 1.6;
}

.wd-full-button {
    width: 100%;
}


/* FEATURES */

.wd-centred-heading {
    max-width: 760px;

    margin:
        0 auto 40px;

    text-align: center;
}

.wd-centred-heading p {
    color: #7f8990;

    line-height: 1.7;
}

.wd-feature-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 12px;
}

.wd-feature-card {
    min-height: 260px;

    padding: 28px;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #11161a,
            #090c0f
        );

    border:
        1px solid rgba(255,255,255,.08);
}

.wd-feature-card::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 3px;

    background: #e31932;

    transform: scaleX(0);

    transform-origin: left;

    transition:
        transform .25s ease;
}

.wd-feature-card:hover::after {
    transform: scaleX(1);
}

.wd-card-number {
    color: #e31932;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 2px;
}

.wd-feature-card h3 {
    margin: 48px 0 12px;

    font-size: 19px;
    font-weight: 1000;
}

.wd-feature-card p {
    margin: 0;

    color: #7f8a91;

    font-size: 14px;
    line-height: 1.65;
}


/* TWO COLUMN */

.wd-two-column {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 16px;
}

.wd-info-panel,
.wd-discord-panel {
    min-height: 470px;

    padding: 42px;

    background:
        linear-gradient(
            145deg,
            #111519,
            #090c0f
        );

    border:
        1px solid rgba(255,255,255,.08);
}

.wd-rule-list {
    margin: 30px 0;
}

.wd-rule-list > div {
    min-height: 62px;

    display: flex;
    align-items: center;

    gap: 18px;

    border-bottom:
        1px solid rgba(255,255,255,.07);
}

.wd-rule-list span {
    color: #e31932;

    font-size: 10px;
    font-weight: 900;
}

.wd-rule-list p {
    margin: 0;

    color: #a1a9ae;

    font-size: 14px;
}

.wd-text-link {
    color: #fff;

    text-decoration: none;

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 1px;
}

.wd-discord-panel {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(227,25,50,.25),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #12171b,
            #080b0e
        );
}

.wd-discord-panel > p {
    max-width: 600px;

    color: #8c969d;

    line-height: 1.7;
}

.wd-discord-points {
    margin: 28px 0;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 14px;
}

.wd-discord-points span {
    color: #bbc2c6;

    font-size: 13px;
}


/* FINAL CTA */

.wd-final {
    padding: 70px 0;

    background:
        linear-gradient(
            90deg,
            rgba(175,10,31,.92),
            #e31932
        );
}

.wd-final-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}

.wd-final-inner > div > span {
    font-size: 11px;
    font-weight: 900;

    letter-spacing: 2px;
}

.wd-final h2 {
    margin: 7px 0 0;

    font-size: clamp(38px, 4vw, 65px);
    font-weight: 1000;

    line-height: .86;
}

.wd-final h2 strong {
    color: #090b0d;
}

.wd-final .wd-btn-primary {
    background: #090b0d;

    border-color: #090b0d;
}


/* FOOTER */

.wd-footer {
    padding: 55px 0 22px;

    background: #030506;

    border-top:
        1px solid rgba(255,255,255,.07);
}

.wd-footer-grid {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 30px;
}

.wd-footer-logo {
    font-size: 20px;
    font-weight: 1000;
}

.wd-footer-logo span {
    color: #e31932;
}

.wd-footer p {
    color: #68737b;

    font-size: 12px;
}

.wd-footer-links {
    display: flex;

    gap: 24px;
}

.wd-footer-links a {
    color: #8e989e;

    text-decoration: none;

    font-size: 11px;
    font-weight: 800;
}

.wd-footer-links a:hover {
    color: #fff;
}

.wd-copyright {
    margin-top: 35px;

    padding-top: 18px;

    color: #4e585f;

    border-top:
        1px solid rgba(255,255,255,.06);

    font-size: 10px;
}


/* RESPONSIVE */

@media (max-width: 1100px) {

    .wd-feature-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .wd-server-card {
        grid-template-columns: 1fr;
    }

    .wd-server-side {
        border-left: 0;

        border-top:
            1px solid rgba(255,255,255,.08);
    }

}


@media (max-width: 900px) {

    .wd-container {
        width:
            calc(100% - 36px);
    }

    .wd-hero {
        min-height: 650px;
    }

    .wd-hero h1 {
        letter-spacing: -3px;
    }

    .wd-quick-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .wd-two-column {
        grid-template-columns: 1fr;
    }

    .wd-section-heading {
        align-items: flex-start;

        flex-direction: column;
    }

}


@media (max-width: 650px) {

    .wd-section {
        padding: 60px 0;
    }

    .wd-quick-grid,
    .wd-feature-grid,
    .wd-server-stats,
    .wd-discord-points {
        grid-template-columns: 1fr;
    }

    .wd-quick-item {
        border-left:
            1px solid rgba(255,255,255,.07);
    }

    .wd-server-top {
        flex-direction: column;
    }

    .wd-server-stats > div {
        border-right: 0;

        border-bottom:
            1px solid rgba(255,255,255,.08);
    }

    .wd-server-stats > div:last-child {
        border-bottom: 0;
    }

    .wd-info-panel,
    .wd-discord-panel,
    .wd-server-main,
    .wd-server-side {
        padding: 25px;
    }

    .wd-final-inner,
    .wd-footer-grid {
        align-items: flex-start;

        flex-direction: column;
    }

    .wd-footer-links {
        flex-wrap: wrap;
    }

}


/* WARDOGS LIVE PLAYERS START */


.wd-live-section {
    padding: 80px 24px;

    background:
        linear-gradient(
            180deg,
            #070b0e 0%,
            #090e12 100%
        );

    border-top:
        1px solid
        rgba(255,255,255,.06);

    border-bottom:
        1px solid
        rgba(255,255,255,.06);
}


.wd-live-inner {
    width: min(
        1200px,
        100%
    );

    margin: 0 auto;
}


.wd-live-heading {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 40px;

    margin-bottom: 30px;
}


.wd-section-kicker {
    display: block;

    margin-bottom: 8px;

    color: #ef233c;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 3px;
}


.wd-live-heading h2 {
    margin: 0;

    color: #fff;

    font-size: clamp(
        34px,
        5vw,
        58px
    );

    font-weight: 1000;

    line-height: .95;
}


.wd-live-heading p {
    max-width: 600px;

    margin:
        14px 0 0;

    color: #84909a;

    line-height: 1.7;
}


.wd-live-summary {
    display: flex;

    align-items: flex-end;

    gap: 30px;
}


.wd-live-count {
    min-width: 130px;

    padding-left: 18px;

    border-left:
        2px solid
        #ef233c;
}


.wd-live-count span {
    display: block;

    margin-bottom: 5px;

    color: #68737c;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.5px;
}


.wd-live-count strong {
    color: #fff;

    font-size: 24px;

    font-weight: 1000;
}


.wd-live-refresh {
    display: flex;

    align-items: center;

    gap: 7px;

    padding-bottom: 5px;

    color: #69747c;

    font-size: 11px;
}


.wd-live-dot {
    width: 7px;
    height: 7px;

    display: inline-block;

    border-radius: 50%;

    background: #45e27b;

    box-shadow:
        0 0 10px
        rgba(69,226,123,.6);
}



.wd-live-table-wrap {
    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.08);

    background:
        #0c1115;

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.22);
}


.wd-live-table-header,
.wd-live-player-row {
    display: grid;

    grid-template-columns:
        80px
        minmax(240px, 2fr)
        minmax(150px, 1fr)
        100px
        100px
        100px;

    align-items: center;
}


.wd-live-table-header {
    min-height: 52px;

    padding: 0 22px;

    background:
        #11171c;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

    color: #66717a;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.4px;
}


.wd-live-player-row {
    min-height: 66px;

    padding: 0 22px;

    border-bottom:
        1px solid
        rgba(255,255,255,.055);

    color: #dce2e6;

    transition:
        background .2s ease;
}


.wd-live-player-row:last-child {
    border-bottom: 0;
}


.wd-live-player-row:hover {
    background:
        rgba(255,255,255,.025);
}


.wd-live-rank {
    color: #ef233c;

    font-weight: 1000;
}


.wd-live-name {
    display: flex;

    align-items: center;

    gap: 10px;

    color: #fff;

    font-weight: 900;
}


.wd-live-name i {
    width: 7px;
    height: 7px;

    display: inline-block;

    flex-shrink: 0;

    border-radius: 50%;

    background: #45e27b;

    box-shadow:
        0 0 8px
        rgba(69,226,123,.5);
}


.wd-live-faction {
    color: #aeb8bf;

    font-weight: 700;
}


.wd-live-kd {
    color: #fff;

    font-weight: 900;
}



.wd-live-loading,
.wd-live-error,
.wd-live-empty {
    min-height: 180px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 10px;

    padding: 35px;

    text-align: center;

    color: #77828a;
}


.wd-live-loading {
    flex-direction: row;
}


.wd-live-loader {
    width: 14px;
    height: 14px;

    display: inline-block;

    border:
        2px solid
        rgba(255,255,255,.15);

    border-top-color:
        #ef233c;

    border-radius: 50%;

    animation:
        wdLiveSpin .8s
        linear infinite;
}


@keyframes wdLiveSpin {

    to {
        transform:
            rotate(360deg);
    }

}


.wd-live-empty-icon {
    color: #ef233c;

    font-size: 30px;
}


.wd-live-empty strong,
.wd-live-error strong {
    color: #fff;

    font-size: 18px;

    font-weight: 1000;
}


.wd-live-empty span,
.wd-live-error span {
    color: #75818a;
}


.wd-live-empty a {
    margin-top: 8px;

    color: #ef233c;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1px;

    text-decoration: none;
}



.wd-live-footer {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 18px 2px 0;

    color: #626e77;

    font-size: 11px;
}


.wd-live-footer a {
    color: #ef233c;

    font-weight: 900;

    text-decoration: none;

    letter-spacing: .5px;
}



@media (max-width: 900px) {

    .wd-live-heading {
        align-items: flex-start;

        flex-direction: column;
    }


    .wd-live-summary {
        width: 100%;

        justify-content: space-between;
    }


    .wd-live-table-header {
        display: none;
    }


    .wd-live-player-row {
        grid-template-columns:
            1fr 1fr;

        gap: 15px;

        padding:
            20px;

        min-height: 0;
    }


    .wd-live-player-row span {
        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 5px;
    }


    .wd-live-player-row span::before {
        content:
            attr(data-label);

        color: #606b74;

        font-size: 9px;

        font-weight: 900;

        letter-spacing: 1px;

        text-transform: uppercase;
    }


    .wd-live-name {
        flex-direction: row !important;

        align-items: center !important;
    }

}


@media (max-width: 600px) {

    .wd-live-section {
        padding:
            55px 16px;
    }


    .wd-live-summary {
        align-items: flex-start;

        flex-direction: column;

        gap: 15px;
    }


    .wd-live-player-row {
        grid-template-columns:
            1fr;
    }


    .wd-live-footer {
        align-items: flex-start;

        flex-direction: column;
    }

}


/* WARDOGS LIVE PLAYERS END */


/* LIVE PLAYERS ANCHOR */

html {
    scroll-behavior: smooth;
}

#live-players {
    scroll-margin-top: 90px;
}


/* =========================================================
   WARDOGS HERO - MATCH HOMEPAGE
   ========================================================= */

html body .wd-hero {
    position: relative !important;
    overflow: hidden !important;

    height: 430px !important;
    min-height: 430px !important;

    background-image: url("/assets/discord-background.png?v=8000") !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #05080b !important;
}


/* Keep WARDOGS hero content above background */

html body .wd-hero-content {
    position: relative !important;
    z-index: 5 !important;
}


/* Dark overlay for text readability */

html body .wd-hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;

    background:
        linear-gradient(
            90deg,
            rgba(3,7,10,.82) 0%,
            rgba(3,7,10,.40) 35%,
            rgba(3,7,10,.08) 65%,
            rgba(3,7,10,0) 100%
        ) !important;
}


/* Stop old pseudo-element backgrounds overriding new image */

html body .wd-hero::before,
html body .wd-hero::after {
    background-image: none !important;
}


/* ========================================================= */