/* =========================================================
   SPEED SMP — SEASON 3
   ORIGINAL / COMPACT MEMBER STYLE
   ========================================================= */

:root {
    --bg: #050b12;
    --bg-2: #08131d;
    --panel: #0a1722;
    --panel-2: #0d1e2b;

    --blue: #63dfff;
    --blue-bright: #b8f3ff;
    --blue-soft: #8eeaff;
    --blue-dark: #16485e;

    --white: #f3fbff;
    --text: #b8cbd4;
    --muted: #718692;

    --border: rgba(99, 223, 255, .15);
    --border-bright: rgba(99, 223, 255, .35);

    --max-width: 1180px;
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(99, 223, 255, .06),
            transparent 35%
        ),
        var(--bg);

    color: var(--text);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    overflow-x: hidden;
}

body::before {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            rgba(255,255,255,.01) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.01) 1px,
            transparent 1px
        );

    background-size: 50px 50px;

    opacity: .35;

    z-index: -1;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
}


/* =========================================================
   NAVBAR
   ========================================================= */

.navbar {
    position: sticky;
    top: 0;

    z-index: 1000;

    width: 100%;

    border-bottom: 1px solid var(--border);

    background:
        rgba(5, 11, 18, .88);

    backdrop-filter: blur(16px);
}

.nav-container {
    width: min(
        var(--max-width),
        calc(100% - 40px)
    );

    min-height: 74px;

    margin: auto;

    display: flex;
    align-items: center;

    gap: 30px;
}

.brand {
    display: flex;
    align-items: center;

    gap: 10px;

    flex-shrink: 0;
}

.brand-icon {
    width: 42px;
    height: 42px;

    object-fit: contain;

    image-rendering: pixelated;

    filter:
        drop-shadow(
            0 0 13px
            rgba(99,223,255,.28)
        );
}

.brand-text {
    display: flex;
    flex-direction: column;

    line-height: 1;
}

.brand-text strong {
    color: var(--white);

    font-size: .95rem;
    font-weight: 900;
}

.brand-text span {
    margin-top: 5px;

    color: var(--blue);

    font-size: .55rem;
    font-weight: 900;

    letter-spacing: .18em;
}

.nav-links {
    display: flex;
    align-items: center;

    gap: 4px;

    margin-left: auto;
}

.nav-links a {
    position: relative;

    padding: 10px 13px;

    color: var(--muted);

    font-size: .7rem;
    font-weight: 800;

    letter-spacing: .07em;
    text-transform: uppercase;

    transition: color .2s ease;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--blue);
}

.nav-links a.active::after {
    content: "";

    position: absolute;

    left: 13px;
    right: 13px;
    bottom: 2px;

    height: 1px;

    background: var(--blue);

    box-shadow:
        0 0 8px
        rgba(99,223,255,.4);
}

.discord-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 40px;

    padding: 0 15px;

    border: 1px solid var(--border-bright);

    background:
        rgba(99,223,255,.06);

    color: var(--blue-bright);

    font-size: .65rem;
    font-weight: 900;

    letter-spacing: .08em;
    text-transform: uppercase;

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

.discord-button:hover {
    transform: translateY(-2px);

    background:
        rgba(99,223,255,.12);

    border-color: var(--blue);
}


/* =========================================================
   GLOBAL
   ========================================================= */

.section {
    width: min(
        var(--max-width),
        calc(100% - 40px)
    );

    margin: auto;

    padding-top: 90px;
    padding-bottom: 90px;
}

.section-label {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: var(--blue);

    font-size: .6rem;
    font-weight: 900;

    letter-spacing: .19em;
    text-transform: uppercase;
}

.section-label::before {
    content: "";

    width: 20px;
    height: 1px;

    background: var(--blue);
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    position: relative;

    min-height: 720px;

    display: flex;
    align-items: center;

    overflow: hidden;

    border-bottom: 1px solid var(--border);

    background:
        radial-gradient(
            circle at 78% 48%,
            rgba(99,223,255,.11),
            transparent 29%
        ),
        linear-gradient(
            180deg,
            #07131d,
            var(--bg)
        );
}

.hero::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .45;

    background:
        repeating-linear-gradient(
            115deg,
            transparent 0,
            transparent 100px,
            rgba(99,223,255,.035) 101px,
            transparent 103px,
            transparent 190px
        );
}

.hero-content {
    position: relative;
    z-index: 3;

    width: min(
        var(--max-width),
        calc(100% - 40px)
    );

    margin: auto;
}

.hero-badge {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 8px 11px;

    border: 1px solid var(--border);

    color: var(--blue-soft);

    background:
        rgba(99,223,255,.03);

    font-size: .6rem;
    font-weight: 900;

    letter-spacing: .14em;
}

.badge-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--blue);

    box-shadow:
        0 0 10px
        var(--blue);
}

.hero h1 {
    max-width: 820px;

    margin: 25px 0;

    color: var(--white);

    font-size: clamp(
        4rem,
        9vw,
        8rem
    );

    line-height: .8;

    letter-spacing: -.07em;
}

.hero h1 span {
    display: block;

    color: var(--blue);
}

.hero-description {
    max-width: 560px;

    margin-bottom: 28px;

    color: var(--text);

    line-height: 1.7;
}

.hero-description strong {
    color: var(--white);
}

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

    gap: 10px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    min-height: 48px;

    padding: 0 20px;

    font-size: .65rem;
    font-weight: 900;

    letter-spacing: .08em;
    text-transform: uppercase;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

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

.button-primary {
    background: var(--blue);

    border: 1px solid var(--blue);

    color: #031018;
}

.button-secondary {
    border: 1px solid var(--border);

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

    color: var(--white);
}

.hero-stats {
    display: flex;
    align-items: center;

    gap: 22px;

    margin-top: 48px;
}

.stat {
    display: flex;
    flex-direction: column;
}

.stat-number {
    color: var(--white);

    font-size: 1.35rem;
    font-weight: 900;
}

.stat-label {
    margin-top: 4px;

    color: var(--muted);

    font-size: .52rem;
    font-weight: 900;

    letter-spacing: .15em;
}

.stat-divider {
    width: 1px;
    height: 32px;

    background: var(--border);
}


/* HERO ICON */

.hero-visual {
    position: absolute;

    right: 6%;
    top: 50%;

    width: 380px;
    height: 380px;

    transform: translateY(-50%);

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

    z-index: 2;
}

.hero-glow {
    position: absolute;

    width: 270px;
    height: 270px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(99,223,255,.15),
            transparent 70%
        );

    filter: blur(10px);
}

.hero-icon-ring {
    width: 230px;
    height: 230px;

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

    border: 1px solid var(--border-bright);

    border-radius: 50%;

    background:
        rgba(99,223,255,.025);
}

.hero-icon {
    width: 105px;
    height: 105px;

    image-rendering: pixelated;

    filter:
        drop-shadow(
            0 0 30px
            rgba(99,223,255,.3)
        );
}

.hero-floating-text {
    position: absolute;

    bottom: 20px;
    right: 0;

    color: var(--muted);

    font-size: .58rem;
    font-weight: 900;

    letter-spacing: .15em;
}


/* =========================================================
   PAGE HERO
   ========================================================= */

.page-hero {
    position: relative;

    min-height: 390px;

    display: flex;
    align-items: center;

    overflow: hidden;

    border-bottom: 1px solid var(--border);

    background:
        radial-gradient(
            circle at 75% 50%,
            rgba(99,223,255,.1),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #07131d,
            var(--bg)
        );
}

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

    width: min(
        var(--max-width),
        calc(100% - 40px)
    );

    margin: auto;
}

.page-hero h1 {
    margin: 15px 0;

    color: var(--white);

    font-size: clamp(
        4rem,
        8vw,
        7rem
    );

    line-height: .82;

    letter-spacing: -.07em;
}

.page-hero h1 span {
    display: block;

    color: var(--blue);
}

.page-hero p {
    max-width: 550px;

    color: var(--text);

    line-height: 1.7;
}

.page-hero-lines {
    position: absolute;
    inset: 0;

    background:
        repeating-linear-gradient(
            115deg,
            transparent 0,
            transparent 90px,
            rgba(99,223,255,.035) 91px,
            transparent 93px,
            transparent 180px
        );
}


/* =========================================================
   MEMBERS
   ========================================================= */

.members-section {
    padding-top: 80px;
}

.members-header {
    margin-bottom: 28px;
}

.members-header h2 {
    margin: 10px 0;

    color: var(--white);

    font-size: clamp(
        2.6rem,
        5vw,
        4.4rem
    );

    line-height: .87;

    letter-spacing: -.06em;
}

.members-header h2 span {
    display: block;

    color: var(--blue);
}

.members-count {
    margin: 0;

    color: var(--muted);

    font-size: .75rem;
}

.members-count strong {
    color: var(--blue);
}


/* =========================================================
   SEARCH / FILTER
   ========================================================= */

.member-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 25px;

    padding: 12px;

    border: 1px solid var(--border);

    background:
        rgba(10,23,34,.7);

    backdrop-filter: blur(10px);
}

.member-search {
    position: relative;

    width: 100%;
    max-width: 400px;
}

.member-search input {
    width: 100%;
    height: 44px;

    padding: 0 15px 0 42px;

    outline: none;

    border: 1px solid var(--border);

    background: var(--bg);

    color: var(--white);

    font-size: .75rem;
}

.member-search input:focus {
    border-color: var(--border-bright);
}

.member-search input::placeholder {
    color: var(--muted);
}

.search-icon {
    position: absolute;

    left: 14px;
    top: 50%;

    transform: translateY(-50%);

    color: var(--blue);

    font-size: 1.1rem;
}

.tier-filters {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;
}

.tier-filter-button {
    min-width: 40px;
    height: 36px;

    border: 1px solid var(--border);

    background: transparent;

    color: var(--muted);

    cursor: pointer;

    font-size: .62rem;
    font-weight: 900;

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

.tier-filter-button:hover {
    color: var(--white);

    border-color: var(--border-bright);
}

.tier-filter-button.active {
    color: #031018;

    border-color: var(--blue);

    background: var(--blue);
}


/* =========================================================
   ORIGINAL MEMBER CARDS
   [ SKIN ] USERNAME
             RANKED
   ========================================================= */

.members-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;
}

.member-card {
    position: relative;

    min-height: 95px;

    display: grid;

    grid-template-columns: 70px 1fr auto;

    align-items: center;

    gap: 15px;

    padding: 10px 15px;

    overflow: hidden;

    border: 1px solid var(--border);

    background:
        linear-gradient(
            100deg,
            rgba(99,223,255,.035),
            transparent 65%
        ),
        var(--panel);

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

.member-card:hover {
    transform: translateY(-2px);

    border-color: var(--border-bright);

    background:
        linear-gradient(
            100deg,
            rgba(99,223,255,.07),
            transparent 70%
        ),
        var(--panel-2);
}


/* SKIN */

.member-skin {
    width: 70px;
    height: 70px;

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

    overflow: hidden;

    background:
        rgba(99,223,255,.025);
}

.member-skin img {
    width: 64px;
    height: 64px;

    object-fit: contain;

    image-rendering: pixelated;

    filter:
        drop-shadow(
            0 5px 7px
            rgba(0,0,0,.5)
        );

    transition:
        transform .2s ease,
        filter .2s ease;
}

.member-card:hover .member-skin img {
    transform: scale(1.08);

    filter:
        drop-shadow(
            0 7px 9px
            rgba(0,0,0,.6)
        )
        drop-shadow(
            0 0 10px
            rgba(99,223,255,.1)
        );
}


/* USERNAME */

.member-info {
    min-width: 0;
}

.member-info h3 {
    margin: 0 0 5px;

    overflow: hidden;

    color: var(--white);

    font-size: .92rem;
    font-weight: 900;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-info span {
    color: var(--muted);

    font-size: .56rem;
    font-weight: 900;

    letter-spacing: .15em;

    text-transform: uppercase;
}


/* RANKED */

.member-tier {
    min-width: 35px;
    height: 35px;

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

    border: 1px solid currentColor;

    background:
        rgba(4,10,16,.65);

    font-size: .8rem;
    font-weight: 950;
}

.member-number {
    display: none;
}


/* TIER COLORS */

.tier-s {
    color: #d5f9ff;
}

.tier-a {
    color: #63dfff;
}

.tier-b {
    color: #8cecff;
}

.tier-c {
    color: #69abc0;
}

.tier-d {
    color: #7d8d95;
}

.tier-f {
    color: #59666d;
}


/* NO RESULTS */

.no-members {
    padding: 70px 20px;

    text-align: center;

    border: 1px solid var(--border);

    background: var(--panel);
}

.no-members-icon {
    width: 44px;
    height: 44px;

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

    margin: 0 auto 12px;

    border: 1px solid var(--border);

    color: var(--blue);
}

.no-members h3 {
    margin: 0 0 6px;

    color: var(--white);

    font-size: .9rem;
}

.no-members p {
    margin: 0;

    color: var(--muted);

    font-size: .72rem;
}


/* =========================================================
   PLUGIN PAGE
   ========================================================= */

.plugin-section {
    padding-top: 90px;
    padding-bottom: 90px;
}

.plugin-feature {
    display: grid;

    grid-template-columns:
        .8fr
        1.2fr;

    gap: 70px;

    align-items: center;
}

.plugin-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.plugin-image img {
    width: 170px;
    height: 170px;

    image-rendering: pixelated;

    filter:
        drop-shadow(
            0 0 30px
            rgba(99,223,255,.25)
        );
}

.plugin-feature h2 {
    margin: 12px 0 18px;

    color: var(--white);

    font-size: clamp(
        2.8rem,
        5vw,
        5rem
    );

    line-height: .86;

    letter-spacing: -.06em;
}

.plugin-feature h2 span {
    display: block;

    color: var(--blue);
}

.plugin-feature p {
    color: var(--text);

    line-height: 1.75;
}


/* =========================================================
   RANKED
   ========================================================= */

.rank-preview-list,
.rankings-list {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.rank-preview-row,
.ranking-row {
    display: grid;

    grid-template-columns:
        65px
        170px
        1fr;

    align-items: center;

    min-height: 75px;

    padding: 0 18px;

    border: 1px solid var(--border);

    background: var(--panel);

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

.rank-preview-row:hover,
.ranking-row:hover {
    transform: translateX(4px);

    border-color: var(--border-bright);
}

.rank-letter,
.ranking-tier {
    color: var(--blue);

    font-size: 1.7rem;
    font-weight: 950;
}

.rank-info {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.rank-info strong,
.ranking-name {
    color: var(--white);

    font-size: .75rem;
    font-weight: 900;
}

.rank-info span {
    color: var(--muted);

    font-size: .58rem;
}

.rank-players,
.ranking-players {
    color: var(--text);

    font-size: .7rem;

    text-align: right;
}


/* =========================================================
   CTA
   ========================================================= */

.cta-section {
    position: relative;

    overflow: hidden;

    padding: 110px 20px;

    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(99,223,255,.09),
            transparent 45%
        ),
        var(--bg-2);
}

.cta-speed-lines {
    position: absolute;
    inset: 0;

    background:
        repeating-linear-gradient(
            115deg,
            transparent 0,
            transparent 90px,
            rgba(99,223,255,.035) 91px,
            transparent 93px,
            transparent 180px
        );
}

.cta-content {
    position: relative;
    z-index: 2;

    max-width: 700px;

    margin: auto;

    text-align: center;
}

.cta-content h2 {
    margin: 13px 0 17px;

    color: var(--white);

    font-size: clamp(
        3rem,
        7vw,
        6rem
    );

    line-height: .84;

    letter-spacing: -.07em;
}

.cta-content h2 span {
    display: block;

    color: var(--blue);
}

.cta-content p {
    max-width: 500px;

    margin: 0 auto 28px;

    color: var(--text);

    line-height: 1.7;
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer {
    border-top: 1px solid var(--border);

    background: #03080d;
}

.footer-container {
    width: min(
        var(--max-width),
        calc(100% - 40px)
    );

    min-height: 100px;

    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;
}

.footer-brand {
    display: flex;
    align-items: center;

    gap: 9px;
}

.footer-brand img {
    width: 36px;
    height: 36px;

    image-rendering: pixelated;
}

.footer-brand div {
    display: flex;
    flex-direction: column;
}

.footer-brand strong {
    color: var(--white);

    font-size: .76rem;
}

.footer-brand span {
    margin-top: 3px;

    color: var(--blue);

    font-size: .48rem;
    font-weight: 900;

    letter-spacing: .17em;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;

    gap: 17px;
}

.footer-links a {
    color: var(--muted);

    font-size: .6rem;
    font-weight: 800;

    transition: color .2s ease;
}

.footer-links a:hover {
    color: var(--blue);
}

.footer-copy {
    color: #52646e;

    font-size: .55rem;

    white-space: nowrap;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    .hero-visual {
        right: -40px;
        opacity: .45;
    }

    .members-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 800px) {

    .nav-links {
        display: none;
    }

    .hero {
        min-height: 650px;
    }

    .hero-visual {
        right: -100px;
        opacity: .25;
    }

    .plugin-feature {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .member-toolbar {
        flex-direction: column;

        align-items: stretch;
    }

    .member-search {
        max-width: none;
    }

    .tier-filters {
        justify-content: center;
    }

    .footer-container {
        padding: 25px 0;

        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 600px) {

    .nav-container {
        width: calc(100% - 25px);

        min-height: 65px;
    }

    .brand-text {
        display: none;
    }

    .discord-button {
        padding: 0 12px;
    }

    .hero-content {
        width: calc(100% - 30px);
    }

    .hero h1 {
        font-size: 4rem;
    }

    .hero-buttons {
        flex-direction: column;

        max-width: 330px;
    }

    .button {
        width: 100%;
    }

    .hero-stats {
        gap: 15px;
    }

    .hero-visual {
        display: none;
    }

    .section {
        width: calc(100% - 30px);

        padding-top: 70px;
        padding-bottom: 70px;
    }

    .page-hero {
        min-height: 320px;
    }

    .page-hero-content {
        width: calc(100% - 30px);
    }

    .page-hero h1 {
        font-size: 4rem;
    }

    .members-grid {
        grid-template-columns: 1fr;
    }

    .member-card {
        min-height: 88px;

        grid-template-columns:
            65px
            1fr
            auto;
    }

    .member-skin {
        width: 65px;
        height: 65px;
    }

    .member-skin img {
        width: 60px;
        height: 60px;
    }

    .rank-preview-row,
    .ranking-row {
        grid-template-columns:
            50px
            1fr;
    }

    .rank-players,
    .ranking-players {
        grid-column: 2;

        text-align: left;
    }

    .footer-links {
        gap: 12px;
    }

}


@media (max-width: 400px) {

    .member-card {
        grid-template-columns:
            58px
            1fr
            auto;

        gap: 10px;

        padding: 9px;
    }

    .member-skin {
        width: 58px;
        height: 58px;
    }

    .member-skin img {
        width: 56px;
        height: 56px;
    }

    .member-info h3 {
        font-size: .82rem;
    }

    .member-tier {
        min-width: 31px;
        height: 31px;
    }

}