/**
 * /assets/css/pages/servers.css
 *
 * Hosted server network page-specific components.
 * Global tokens, typography, buttons, containers and the public hero
 * are supplied by core.css/components.css.
 */

.page-servers {
  --hero-min-height: 76vh;
  --hero-accent-x: 82%;
  --hero-accent-y: 40%;
  --hero-accent-alpha: .16;

  --green: #45d483;
  --green-soft: rgba(69,212,131,.07);
  --green-border: rgba(69,212,131,.25);
  --border-strong: rgba(255,255,255,.14);
}

.servers-hero-art {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 40%, rgba(189,0,0,.11), transparent 30%),
    linear-gradient(120deg, #080808, #101010 55%, #080808);
}

.network-summary {
  position: relative;
  z-index: 4;
  padding: 0 0 8px;
  background: var(--bg);
}

.network-summary .server-overview {
  margin-top: -1px;
}


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

        .server-overview {

            position: relative;

            z-index: 3;

            display: grid;

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

            margin-top: 47px;

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

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

        }


        .overview-item {

            min-height: 83px;

            display: flex;

            align-items: center;

            gap: 14px;

            padding:
                15px
                19px;

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

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

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

        }


        .overview-icon {

            width: 32px;
            height: 32px;

            flex-shrink: 0;

            display: flex;

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

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

            color:
                var(--red-bright);

            background:
                var(--red-soft);

            font-size: .75rem;

        }


        .overview-label {

            color:
                rgba(255,255,255,.25);

            font-size: .47rem;

            font-weight: 800;

            letter-spacing: .09em;

            text-transform: uppercase;

        }


        .overview-value {

            margin-top: 4px;

            color: #fff;

            font-size: 1.25rem;

            font-weight: 900;

            line-height: 1;

            letter-spacing: -.035em;

        }


        .overview-live {

            display: inline-flex;

            align-items: center;

            gap: 6px;

        }


        .live-dot {

            width: 6px;
            height: 6px;

            flex-shrink: 0;

            border-radius: 50%;

            background:
                var(--green);

            box-shadow:
                0 0 8px
                rgba(69,212,131,.5);

        }


        .live-dot.error {

            background:
                var(--red-bright);

            box-shadow:
                0 0 8px
                rgba(224,0,0,.5);

        }


        /* =========================================================
           MAIN SERVER AREA
        ========================================================= */

        .servers-main {

            padding:
                47px
                0
                105px;

        }


        /* =========================================================
           TOOLBAR
        ========================================================= */

        .servers-toolbar {

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 25px;

            margin-bottom: 48px;

            padding-bottom: 18px;

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

        }


        .server-filters {

            display: flex;

            flex-wrap: wrap;

            gap: 6px;

        }


        .server-filter {

            min-height: 35px;

            padding:
                0
                13px;

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

            color:
                rgba(255,255,255,.38);

            background:
                transparent;

            font-size: .49rem;

            font-weight: 800;

            letter-spacing: .07em;

            text-transform: uppercase;

            cursor: pointer;

            transition:
                color .18s ease,
                border-color .18s ease,
                background .18s ease;

        }


        .server-filter:hover {

            color: #fff;

            border-color:
                rgba(255,255,255,.18);

        }


        .server-filter.active {

            color: #fff;

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

            background:
                var(--red-soft);

        }


        .server-update {

            display: flex;

            align-items: center;

            gap: 8px;

            flex-shrink: 0;

            color:
                rgba(255,255,255,.26);

            font-size: .51rem;

            font-weight: 700;

            letter-spacing: .03em;

        }


        /* =========================================================
           GAME GROUP
        ========================================================= */

        .game-group {

            margin-bottom: 65px;

        }


        .game-group:last-child {
            margin-bottom: 0;
        }


        .game-heading {

            display: grid;

            grid-template-columns:
                auto
                1fr
                auto;

            gap: 16px;

            align-items: center;

            margin-bottom: 17px;

        }


        .game-heading-left {

            display: flex;

            align-items: center;

            gap: 11px;

        }


        .game-heading-icon {

            width: 31px;
            height: 31px;

            display: flex;

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

            flex-shrink: 0;

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

            color:
                var(--red-bright);

            background:
                var(--red-soft);

            font-size: .72rem;

        }


        .game-heading-title {

            color: #fff;

            font-size:
                clamp(
                    .9rem,
                    1.5vw,
                    1.08rem
                );

            font-weight: 850;

            letter-spacing: -.02em;

            text-transform: uppercase;

        }


        .game-heading-line {

            height: 1px;

            background:
                var(--border);

        }


        .game-heading-count {

            color:
                rgba(255,255,255,.24);

            font-size: .48rem;

            font-weight: 800;

            letter-spacing: .08em;

            text-transform: uppercase;

        }


        /* =========================================================
           SERVER GRID
        ========================================================= */

        .game-server-grid {

            display: grid;

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

            gap: 13px;

        }


        .game-server-grid.single {

            grid-template-columns: 1fr;

        }


        /* =========================================================
           SERVER CARD
        ========================================================= */

        .server-card {

            position: relative;

            min-width: 0;

            overflow: hidden;

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

            background:
                var(--panel);

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

        }


        .server-card::before {

            content: "";

            position: absolute;

            top: -1px;
            left: 0;

            width: 72px;
            height: 1px;

            background:
                var(--red-bright);

        }


        .server-card:hover {

            transform:
                translateY(-2px);

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

            background:
                var(--panel-hover);

        }


        /* =========================================================
           CARD HEADER
        ========================================================= */

        .server-card-header {

            display: flex;

            align-items: flex-start;

            justify-content: space-between;

            gap: 25px;

            padding:
                22px
                23px
                19px;

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

        }


        .server-card-kicker {

            color:
                rgba(255,255,255,.22);

            font-size: .46rem;

            font-weight: 800;

            letter-spacing: .09em;

            text-transform: uppercase;

        }


        .server-name {

            max-width: 850px;

            margin-top: 7px;

            color:
                rgba(255,255,255,.90);

            font-size:
                clamp(
                    .92rem,
                    1.4vw,
                    1.15rem
                );

            font-weight: 800;

            line-height: 1.35;

        }


        .server-status {

            display: inline-flex;

            align-items: center;

            gap: 6px;

            flex-shrink: 0;

            min-height: 27px;

            padding:
                0
                9px;

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

            color:
                rgba(190,255,219,.78);

            background:
                var(--green-soft);

            font-size: .46rem;

            font-weight: 800;

            letter-spacing: .07em;

            text-transform: uppercase;

        }


        .server-status.offline {

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

            color:
                rgba(255,185,185,.72);

            background:
                var(--red-soft);

        }


        .status-dot {

            width: 5px;
            height: 5px;

            border-radius: 50%;

            background:
                var(--green);

        }


        .server-status.offline
        .status-dot {

            background:
                var(--red-bright);

        }


        /* =========================================================
           CARD BODY
        ========================================================= */

        .server-card-body {

            padding:
                21px
                23px
                23px;

        }


        .server-primary-info {

            display: grid;

            grid-template-columns:
                minmax(150px, .65fr)
                minmax(200px, 1.35fr);

            gap: 30px;

            align-items: center;

        }


        /* =========================================================
           PLAYER COUNT
        ========================================================= */

        .players-label {

            color:
                rgba(255,255,255,.22);

            font-size: .46rem;

            font-weight: 800;

            letter-spacing: .09em;

            text-transform: uppercase;

        }


        .players-row {

            display: flex;

            align-items: baseline;

            flex-wrap: wrap;

            gap: 10px;

            margin-top: 6px;

        }


        .players-count {

            color: #fff;

            font-size:
                clamp(
                    2rem,
                    3vw,
                    2.85rem
                );

            font-weight: 900;

            line-height: .9;

            letter-spacing: -.055em;

        }


        .players-max {

            color:
                rgba(255,255,255,.25);

            font-size: .48em;

        }


        .queue-count {

            color:
                var(--red-bright);

            font-size: .58rem;

            font-weight: 850;

            letter-spacing: .04em;

            text-transform: uppercase;

        }


        .population-track {

            width: 100%;
            height: 3px;

            margin-top: 13px;

            overflow: hidden;

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

        }


        .population-bar {

            width: 0;
            height: 100%;

            background:
                var(--red-bright);

            transition:
                width .3s ease;

        }


        /* =========================================================
           MAP
        ========================================================= */

        .map-block {

            min-width: 0;

            padding-left: 28px;

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

        }


        .map-label {

            color:
                rgba(255,255,255,.22);

            font-size: .46rem;

            font-weight: 800;

            letter-spacing: .09em;

            text-transform: uppercase;

        }


        .map-name {

            margin-top: 6px;

            overflow-wrap: anywhere;

            color: #fff;

            font-size: .92rem;

            font-weight: 800;

        }


        .mode-name {

            margin-top: 4px;

            color:
                rgba(255,255,255,.34);

            font-size: .57rem;

            font-weight: 700;

            text-transform: uppercase;

            letter-spacing: .05em;

        }


        /* =========================================================
           SERVER META
        ========================================================= */

        .server-meta {

            display: grid;

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

            gap: 20px;

            align-items: center;

            margin-top: 21px;

            padding-top: 17px;

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

        }


        .server-address-label {

            color:
                rgba(255,255,255,.21);

            font-size: .44rem;

            font-weight: 800;

            letter-spacing: .08em;

            text-transform: uppercase;

        }


        .server-address {

            margin-top: 4px;

            overflow-wrap: anywhere;

            color:
                rgba(255,255,255,.57);

            font-family:
                ui-monospace,
                SFMono-Regular,
                Menlo,
                Monaco,
                Consolas,
                monospace;

            font-size: .59rem;

        }


        .server-platforms {

            display: flex;

            flex-wrap: wrap;

            justify-content: flex-end;

            gap: 5px;

        }


        .server-platform {

            min-height: 23px;

            display: inline-flex;

            align-items: center;

            padding:
                0
                8px;

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

            color:
                rgba(255,255,255,.32);

            font-size: .44rem;

            font-weight: 800;

            letter-spacing: .07em;

            text-transform: uppercase;

        }


        /* =========================================================
           ACTIONS
        ========================================================= */

        .server-actions {

            display: flex;

            flex-wrap: wrap;

            gap: 6px;

            margin-top: 18px;

        }


        .server-button {

            min-height: 35px;

            display: inline-flex;

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

            gap: 6px;

            padding:
                0
                12px;

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

            color:
                rgba(255,255,255,.53);

            background:
                transparent;

            font-size: .47rem;

            font-weight: 800;

            letter-spacing: .07em;

            text-transform: uppercase;

            cursor: pointer;

            transition:
                color .18s ease,
                border-color .18s ease,
                background .18s ease;

        }


        .server-button:hover {

            color: #fff;

            border-color:
                rgba(255,255,255,.19);

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

        }


        .server-button.primary {

            border-color:
                var(--red);

            color: #fff;

            background:
                var(--red);

        }


        .server-button.primary:hover {

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

            background:
                var(--red-bright);

        }


        .server-button.disabled {

            opacity: .32;

            cursor: default;

            pointer-events: none;

        }


        /* =========================================================
           EMPTY / LOADING / ERROR
        ========================================================= */

        .server-message {

            min-height: 270px;

            display: flex;

            flex-direction: column;

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

            padding: 45px;

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

            background:
                var(--panel);

            text-align: center;

        }


        .server-message-icon {

            width: 42px;
            height: 42px;

            display: flex;

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

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

            color:
                var(--red-bright);

            background:
                var(--red-soft);

        }


        .server-message-title {

            margin-top: 16px;

            color: #fff;

            font-size: .66rem;

            font-weight: 800;

            letter-spacing: .08em;

            text-transform: uppercase;

        }


        .server-message-copy {

            max-width: 460px;

            margin-top: 7px;

            color:
                rgba(255,255,255,.28);

            font-size: .58rem;

            line-height: 1.65;

        }


        .loading-spinner {

            width: 25px;
            height: 25px;

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

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

            border-radius: 50%;

            animation:
                serverSpin
                .75s
                linear
                infinite;

        }


        @keyframes serverSpin {

            to {
                transform: rotate(360deg);
            }

        }


        /* =========================================================
           SERVER HELP STRIP
        ========================================================= */

        .server-help {

            padding:
                64px
                0;

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

            background:
                var(--bg-deep);

        }


        .server-help-inner {

            display: grid;

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

            gap: 50px;

            align-items: center;

        }


        .help-kicker {

            color:
                var(--red-bright);

            font-size: .52rem;

            font-weight: 800;

            letter-spacing: .13em;

            text-transform: uppercase;

        }


        .help-title {

            margin-top: 8px;

            color: #fff;

            font-size:
                clamp(
                    1.65rem,
                    3vw,
                    2.75rem
                );

            font-weight: 900;

            line-height: 1;

            letter-spacing: -.04em;

            text-transform: uppercase;

        }


        .help-copy {

            max-width: 680px;

            margin-top: 11px;

            color:
                rgba(255,255,255,.33);

            font-size: .69rem;

            line-height: 1.7;

        }


        .help-actions {

            display: flex;

            gap: 7px;

        }



        /* =========================================================
           COPY TOAST
        ========================================================= */

        .copy-toast {

            position: fixed;

            right: 22px;
            bottom: 22px;

            z-index: 99999;

            display: flex;

            align-items: center;

            gap: 8px;

            padding:
                12px
                15px;

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

            color: #fff;

            background:
                #111;

            font-size: .56rem;

            font-weight: 700;

            opacity: 0;

            transform:
                translateY(10px);

            pointer-events: none;

            transition:
                opacity .2s ease,
                transform .2s ease;

        }


        .copy-toast.show {

            opacity: 1;

            transform:
                translateY(0);

        }


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

        @media (max-width: 991.98px) {



            .server-overview {

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

            }


            .game-server-grid {

                grid-template-columns: 1fr;

            }


            .server-help-inner {

                grid-template-columns: 1fr;

            }

        }


        @media (max-width: 767.98px) {



            .servers-toolbar {

                align-items: flex-start;

                flex-direction: column;

            }


            .server-primary-info {

                grid-template-columns: 1fr;

                gap: 20px;

            }


            .map-block {

                padding:
                    18px
                    0
                    0;

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

                border-left: 0;

            }


            .server-meta {

                grid-template-columns: 1fr;

            }


            .server-platforms {

                justify-content: flex-start;

            }

        }


        @media (max-width: 520px) {

            .server-overview {

                grid-template-columns: 1fr 1fr;

            }


            .overview-item {

                padding:
                    13px
                    12px;

            }


            .overview-icon {
                display: none;
            }


            .server-card-header {

                flex-direction: column;

                gap: 13px;

            }


            .server-actions {

                display: grid;

                grid-template-columns: 1fr;

            }


            .server-button {
                width: 100%;
            }


            .help-actions {

                display: grid;

                grid-template-columns: 1fr;

            }

        }