/* =========================================================
   STARSHIP TROOPERS: BATTLESPACE FAN ARCHIVE
   FULL REPLACEMENT STYLESHEET

   Primary palette:
   Light Federation gray: #b3b4bd
   Dark Federation gray:  #747678
   Gold accent:           #9f8b3b
   ========================================================= */


/* =========================================================
   CUSTOM FONTS

   Required files:
   /fonts/mobileinfantry.ttf
   /fonts/EurostileExtendedBlack.ttf
   /fonts/MicrogrammaDExtendedBold.otf
   /fonts/PhatRegular.otf
   ========================================================= */

@font-face {
    font-family: "Mobile Infantry";
    src: url("/fonts/mobileinfantry.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "Eurostile Extended Black";
    src: url("/fonts/EurostileExtendedBlack.ttf") format("truetype");
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}

@font-face {
    font-family: "Microgramma D Extended Bold";
    src: url("/fonts/MicrogrammaDExtendedBold.otf") format("opentype");
    font-style: normal;
    font-weight: bold;
    font-display: swap;
}

@font-face {
    font-family: "Phat Regular";
    src: url("/fonts/PhatRegular.otf") format("opentype");
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}


/* =========================================================
   VARIABLES
   ========================================================= */

:root {
    --fed-light: #b3b4bd;
    --fed-light-highlight: #c7c8d0;

    --fed-dark: #747678;
    --fed-dark-deep: #4d4f51;

    --fed-black: #000000;
    --fed-gold: #9f8b3b;

    --text-dark: #171819;
    --text-muted: #505254;

    --shell-width: 1180px;

    --shell-shadow:
        0 22px 55px rgba(0, 0, 0, 0.58),
        0 0 0 1px rgba(255, 255, 255, 0.08);
}


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

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;

    margin: 0;

    color: var(--text-dark);

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        "Segoe UI",
        Arial,
        sans-serif;

    background:
        radial-gradient(
            circle at center,
            #34363a 0%,
            #242629 42%,
            #121416 100%
        );

    background-attachment: fixed;
}


/* subtle background grid */

body::before {
    content: "";

    position: fixed;
    inset: 0;
    z-index: -1;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.014) 1px,
            transparent 1px
        );

    background-size: 5px 5px;
}


/* =========================================================
   FLOATING SITE SHELL
   ========================================================= */

.site-shell {
    display: block !important;

    width: min(calc(100% - 54px), var(--shell-width));
    min-height: 720px;

    margin: 42px auto;

    overflow: hidden;

    background: var(--fed-light);

    border: 1px solid var(--fed-dark);
    outline: 1px solid #353638;

    box-shadow: var(--shell-shadow);
}


/* Disable any old sidebar layout if legacy markup is present */

.sidebar {
    display: none !important;
}


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

.site-header {
    display: block !important;

    position: relative;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: var(--fed-dark);
}


/* =========================================================
   FEDERAL NETWORK BANNER

   Required image:
   /images/header-back.png

   This image is repeated horizontally across the banner.
   ========================================================= */

.fednet-banner {
    display: flex !important;

    position: relative;

    width: 100% !important;
    max-width: 100% !important;

    height: 330px;

    margin: 0;
    padding: 0;

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

    overflow: hidden;

    background-color: #ad821e;
    background-image: url("/images/header-back.png");
    background-repeat: repeat-x;
    background-position: top left;
    background-size: auto 100%;

    border-bottom: 1px solid #555759;
}

.fednet-banner__image {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: 100% !important;

    margin: 0 auto;

    object-fit: contain !important;

    flex: 0 0 auto !important;

    position: relative;
    z-index: 2;
}

.fednet-banner::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            to right,
            rgba(0, 0, 0, 0.10) 0%,
            rgba(0, 0, 0, 0.03) 12%,
            rgba(255, 255, 255, 0.02) 50%,
            rgba(0, 0, 0, 0.03) 88%,
            rgba(0, 0, 0, 0.10) 100%
        );
}


/* =========================================================
   HORIZONTAL MENU
   ========================================================= */

.site-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    width: 100% !important;
    max-width: 100% !important;
    min-height: 60px;

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

    align-items: stretch !important;
    justify-content: stretch !important;

    background: var(--fed-light) !important;

    border-top: 1px solid #d5d6dc;
    border-bottom: 1px solid var(--fed-dark);

    overflow: hidden;
}


/* Default menu section */

.site-nav__link {
    display: flex !important;

    position: relative;

    flex: 1 1 0 !important;

    min-width: 0 !important;
    min-height: 60px;

    margin: 0 !important;
    padding: 0 12px !important;

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

    white-space: nowrap;

    color: #000000 !important;
    text-decoration: none !important;

    font-family:
        "Microgramma D Extended Bold",
        "Eurostile Extended Black",
        Eurostile,
        Arial,
        sans-serif !important;

    font-size: 20px;
    font-style: normal;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.3px;

    text-align: center;
    text-transform: uppercase;

    background:
        linear-gradient(
            to bottom,
            #c4c5cd 0%,
            #b3b4bd 55%,
            #a7a8b0 100%
        ) !important;

    border-top: 0 !important;
    border-bottom: 0 !important;

    border-left:
        1px solid rgba(255, 255, 255, 0.45) !important;

    border-right:
        1px solid rgba(65, 66, 69, 0.45) !important;

    box-shadow: none;

    -webkit-text-stroke: 0 transparent;

    text-shadow: none;

    transition:
        background 120ms ease,
        color 120ms ease;
}

.site-nav__link:first-child {
    border-left: 0 !important;
}

.site-nav__link:last-child {
    border-right: 0 !important;
}


/* Selected/current page
   Slightly darker gray than the normal menu state. */

.site-nav__link.is-active {
    color: #000000 !important;

    background:
        linear-gradient(
            to bottom,
            #a4a5ad 0%,
            #94969d 55%,
            #898b91 100%
        ) !important;

    -webkit-text-stroke: 0 transparent;

    text-shadow: none;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -3px 0 #9f8b3b;
}


/* Hover state
   Full black effect is used only while hovering. */

.site-nav__link:hover,
.site-nav__link:focus-visible,
.site-nav__link.is-active:hover,
.site-nav__link.is-active:focus-visible {
    color: #ffffff !important;

    background: #000000 !important;

    -webkit-text-stroke:
        1px #9f8b3b;

    text-shadow: none;

    box-shadow:
        inset 0 1px 0 #9f8b3b,
        inset 0 -1px 0 #9f8b3b;
}


/* Old diamond markers are not used */

.site-nav__marker {
    display: none !important;
}


/* Fallback for browsers without text-stroke */

@supports not (-webkit-text-stroke: 1px #9f8b3b) {

    .site-nav__link:hover,
    .site-nav__link:focus-visible,
    .site-nav__link.is-active:hover,
    .site-nav__link.is-active:focus-visible {

        text-shadow:
            -1px  0   0 #9f8b3b,
             1px  0   0 #9f8b3b,
             0   -1px 0 #9f8b3b,
             0    1px 0 #9f8b3b;
    }
}


/* =========================================================
   STATUS BAR
   ========================================================= */

.topbar {
    min-height: 42px;

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

    gap: 20px;

    padding: 0 20px;

    color: #e9eaed;

    background:
        linear-gradient(
            to bottom,
            #555759,
            #444648
        );

    border-bottom: 1px solid #303234;

    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.08);
}

.topbar__title {
    min-width: 0;

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

    gap: 7px;

    font-family:
        "Eurostile Extended Black",
        Eurostile,
        Arial,
        sans-serif;

    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.7px;

    text-transform: uppercase;
}

.service-status {
    display: inline-block;

    font-weight: 900;
}

.service-status--online {
    color: #5fcf72;

    text-shadow:
        0 0 5px rgba(95, 207, 114, 0.38);
}

.service-status--offline {
    color: #d65b5b;

    text-shadow:
        0 0 5px rgba(214, 91, 91, 0.30);
}

.topbar__divider {
    color: #b3b4bd;
}

.topbar__player-count {
    color: #ffffff;
}

.topbar__citizen {
    margin-left: auto;

    flex: 0 0 auto;

    text-align: right;
    white-space: nowrap;
}

.topbar__citizen-link {
    color: #d9dadd;

    font-family:
        "Eurostile Extended Black",
        Eurostile,
        Arial,
        sans-serif;

    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.45px;

    text-decoration: none;
}

.topbar__citizen-link:hover,
.topbar__citizen-link:focus-visible {
    color: #ffffff;

    text-shadow:
        0 0 4px rgba(159, 139, 59, 0.70);
}


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

.site-main {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;

    background:
        linear-gradient(
            135deg,
            #bfc0c8,
            #b3b4bd 55%,
            #a3a4ac 100%
        );
}

.content {
    flex: 1;

    width: 100%;

    padding: 28px;

    background:
        linear-gradient(
            rgba(255, 255, 255, 0.05),
            rgba(0, 0, 0, 0.035)
        );
}


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

.hero-panel {
    position: relative;

    min-height: 215px;

    padding: 35px 38px;

    overflow: hidden;

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

    color: #f4f4f6;

    background:
        linear-gradient(
            115deg,
            rgba(69, 71, 73, 0.98),
            rgba(116, 118, 120, 0.96)
        );

    border: 1px solid #4a4c4e;

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.10),
        0 6px 14px rgba(0, 0, 0, 0.16);
}

.hero-panel::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 3px,
            rgba(255, 255, 255, 0.02) 4px
        );
}

.hero-panel::after {
    content: "FEDNET";

    position: absolute;

    right: 25px;
    bottom: -24px;

    color: rgba(255, 255, 255, 0.045);

    font-size: 88px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -4px;
}

.hero-kicker {
    position: relative;
    z-index: 1;

    margin-bottom: 10px;

    color: #dedfe3;

    font-family:
        "Eurostile Extended Black",
        Eurostile,
        Arial,
        sans-serif;

    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 1px;

    text-transform: uppercase;
}

.hero-panel h1 {
    position: relative;
    z-index: 1;

    max-width: 800px;

    margin: 0;

    font-family:
        "Eurostile Extended Black",
        Eurostile,
        Arial,
        sans-serif;

    font-size: clamp(30px, 4.7vw, 54px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.5px;

    text-transform: uppercase;

    text-shadow:
        0 2px 0 #424446;
}

.hero-subtitle {
    position: relative;
    z-index: 1;

    max-width: 650px;

    margin: 18px 0 0;

    color: #ececef;

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


/* =========================================================
   CONTENT SECTIONS
   ========================================================= */

.content-section {
    margin-top: 24px;

    padding: 24px 26px 26px;

    background:
        linear-gradient(
            to bottom,
            #cecfd5,
            #b3b4bd
        );

    border: 1px solid #747678;

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.36),
        0 4px 11px rgba(0, 0, 0, 0.11);
}

.content-section h2 {
    margin: 0 0 17px;

    padding-bottom: 8px;

    color: #3c3e40;

    font-family:
        "Eurostile Extended Black",
        Eurostile,
        Arial,
        sans-serif;

    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.5px;

    text-transform: uppercase;

    border-bottom:
        1px solid #94969d;
}

.content-section h2::before {
    content: "//";

    margin-right: 8px;

    color: #747678;
}

.content-section p {
    max-width: 780px;

    margin: 0 0 15px;

    color: #333537;

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


/* =========================================================
   FEDNET NOTICE
   ========================================================= */

.network-notice {
    display: grid;

    grid-template-columns:
        145px 1fr;

    margin-top: 22px;

    background: #b3b4bd;

    border: 1px solid #747678;
}

.network-notice__label {
    display: flex;

    padding: 14px;

    align-items: center;

    color: #f2f2f4;

    font-family:
        "Eurostile Extended Black",
        Eurostile,
        Arial,
        sans-serif;

    font-size: 10px;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0.4px;

    text-transform: uppercase;

    background: #747678;

    border-right:
        1px solid #555759;
}

.network-notice__body {
    padding: 14px 16px;

    color: #36383a;

    font-size: 13px;
    line-height: 1.55;
}


/* =========================================================
   FEATURE CARDS
   ========================================================= */

.feature-grid {
    display: grid;

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

    gap: 14px;
}

.feature-card {
    display: flex;

    position: relative;

    min-height: 125px;

    padding:
        19px
        18px
        17px
        61px;

    flex-direction: column;

    gap: 8px;

    color: #292b2d;

    text-decoration: none;

    background:
        linear-gradient(
            to bottom,
            #d0d1d6,
            #b3b4bd
        );

    border: 1px solid #747678;

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.3);

    transition:
        transform 120ms ease,
        background 120ms ease,
        box-shadow 120ms ease;
}

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

    background:
        linear-gradient(
            to bottom,
            #e0e1e5,
            #c2c3ca
        );

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.45),
        0 7px 16px rgba(0, 0, 0, 0.16);
}

.feature-card__tag {
    display: flex;

    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 43px;

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

    color: #f0f1f3;

    font-family:
        "Eurostile Extended Black",
        Eurostile,
        Arial,
        sans-serif;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;

    writing-mode: vertical-rl;

    transform: rotate(180deg);

    background: #747678;

    border-right:
        1px solid #555759;
}

.feature-card strong {
    font-family:
        "Eurostile Extended Black",
        Eurostile,
        Arial,
        sans-serif;

    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.3px;

    text-transform: uppercase;
}

.feature-card > span:last-child {
    color: #515357;

    font-size: 13px;
    line-height: 1.5;
}


/* =========================================================
   BOTTOM CALL-TO-ACTION BANNER
   ========================================================= */

.fednet-cta {
    padding: 16px 18px;

    background: #747678;

    border-top: 1px solid #5a5d60;
    border-bottom: 1px solid #3e4042;
}

.fednet-cta__inner {
    min-height: 72px;

    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 16px;

    padding: 8px 10px;
}

.fednet-cta__icon {
    width: 52px;
    height: auto;
    flex: 0 0 auto;
    display: block;
    image-rendering: auto;
}

.fednet-cta__text {
    color: #ffffff;

    font-family:
        "Phat Regular",
        "Eurostile Extended Black",
        Arial,
        sans-serif;

    font-size: clamp(24px, 2.6vw, 38px);
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.4px;

    white-space: nowrap;

    text-transform: uppercase;

    -webkit-text-stroke: 1px #9f8b3b;

    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.55);
}

@supports not (-webkit-text-stroke: 1px #9f8b3b) {
    .fednet-cta__text {
        text-shadow:
            -1px  0   0 #9f8b3b,
             1px  0   0 #9f8b3b,
             0   -1px 0 #9f8b3b,
             0    1px 0 #9f8b3b,
             0    1px 2px rgba(0, 0, 0, 0.55);
    }
}


/* =========================================================
   FOOTER
   Outside the floating site shell
   ========================================================= */

.site-footer {
    width: min(calc(100% - 54px), var(--shell-width));

    margin: 14px auto 34px;
    padding: 0 20px;

    color: #b3b4bd;

    font-family:
        "Eurostile Extended Black",
        Eurostile,
        Arial,
        sans-serif;

    font-size: 9px;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 0.4px;

    text-align: center;
    text-transform: uppercase;

    background: transparent;

    border: 0;
}

.site-footer__sub {
    margin-top: 5px;

    color: #8f9296;

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;
    font-weight: normal;
    line-height: 1.45;
    letter-spacing: 0;

    text-transform: none;
}


/* =========================================================
   LEADERBOARDS
   ========================================================= */

.leaderboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;

    margin-top: 18px;
}

.leaderboard-panel {
    overflow: hidden;

    background:
        linear-gradient(
            to bottom,
            #d3d4da,
            #b7b8c0
        );

    border: 1px solid #747678;

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.30);
}

.leaderboard-panel__title {
    margin: 0;
    padding: 14px 16px;

    font-family:
        "Eurostile Extended Black",
        Eurostile,
        Arial,
        sans-serif;

    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.4px;

    text-align: center;
    text-transform: uppercase;

    background: #747678;

    border-bottom: 1px solid #555759;
}

.leaderboard-table {
    width: 100%;

    border-collapse: collapse;

    font-family:
        "Microgramma D Extended Bold",
        "Eurostile Extended Black",
        Arial,
        sans-serif;

    font-size: 13px;
    font-weight: bold;
}

.leaderboard-table th,
.leaderboard-table td {
    padding: 10px 12px;

    border-bottom: 1px solid rgba(116, 118, 120, 0.42);
}

.leaderboard-table th {
    font-size: 10px;
    letter-spacing: 0.5px;

    text-align: left;
    text-transform: uppercase;

    background: rgba(255, 255, 255, 0.24);
}

.leaderboard-table th:first-child,
.leaderboard-table td:first-child {
    width: 92px;
    text-align: center;
}

.leaderboard-table th:last-child,
.leaderboard-table td:last-child {
    width: 100px;
    text-align: right;
}

.leaderboard-table tr:last-child td {
    border-bottom: 0;
}

.leaderboard--federation,
.leaderboard--federation .leaderboard-panel__title {
    color: #2f65a0;
}

.leaderboard--federation .leaderboard-panel__title {
    background:
        linear-gradient(
            to bottom,
            #d3d9e2,
            #b7c2d2
        );
}

.leaderboard--arachnid,
.leaderboard--arachnid .leaderboard-panel__title {
    color: #a12626;
}

.leaderboard--arachnid .leaderboard-panel__title {
    background:
        linear-gradient(
            to bottom,
            #dfcccc,
            #c9aaaa
        );
}


/* =========================================================
   GAME STATISTICS
   ========================================================= */

.stats-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;

    margin-top: 18px;
}

.stat-card {
    min-height: 112px;

    padding: 15px 14px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background:
        linear-gradient(
            to bottom,
            #d1d2d8,
            #b4b5bd
        );

    border: 1px solid #747678;

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.30);
}

.stat-card__label {
    color: #4d4f52;

    font-family:
        "Eurostile Extended Black",
        Eurostile,
        Arial,
        sans-serif;

    font-size: 10px;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0.4px;

    text-transform: uppercase;
}

.stat-card__value {
    margin-top: 10px;

    color: #202224;

    font-family:
        "Microgramma D Extended Bold",
        "Eurostile Extended Black",
        Arial,
        sans-serif;

    font-size: 25px;
    font-weight: bold;
    line-height: 1;
}

.map-stats-wrap {
    margin-top: 22px;

    overflow-x: auto;

    border: 1px solid #747678;
}

.map-stats-table {
    width: 100%;
    min-width: 760px;

    border-collapse: collapse;

    background: rgba(230, 231, 235, 0.72);
}

.map-stats-table th,
.map-stats-table td {
    padding: 11px 10px;

    text-align: center;

    border-right: 1px solid #94969d;
    border-bottom: 1px solid #94969d;
}

.map-stats-table th:last-child,
.map-stats-table td:last-child {
    border-right: 0;
}

.map-stats-table tr:last-child td {
    border-bottom: 0;
}

.map-stats-table thead th {
    color: #f1f1f3;

    font-family:
        "Eurostile Extended Black",
        Eurostile,
        Arial,
        sans-serif;

    font-size: 10px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.35px;

    text-transform: uppercase;

    background: #747678;
}

.map-stats-table thead .federation-column {
    color: #cbdcf2;
    background: #426588;
}

.map-stats-table thead .arachnid-column {
    color: #f2d1d1;
    background: #873f3f;
}

.map-stats-table tbody td:first-child {
    font-family:
        "Eurostile Extended Black",
        Eurostile,
        Arial,
        sans-serif;

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

    text-align: left;
    text-transform: uppercase;
}

.stats-note {
    margin-top: 12px;

    color: #5c5e61;

    font-size: 12px;
    line-height: 1.5;
    font-style: italic;
}


/* =========================================================
   PAGE HEADER
   ========================================================= */

.page-header {
    margin-bottom: 22px;

    padding: 24px 26px;

    color: #f1f1f3;

    background: #747678;

    border: 1px solid #555759;
}

.page-header h1 {
    margin: 0;

    font-family:
        "Eurostile Extended Black",
        Eurostile,
        Arial,
        sans-serif;

    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.5px;

    text-transform: uppercase;
}

.page-header p {
    margin: 9px 0 0;

    color: #e0e1e4;
}


/* =========================================================
   TABLES
   ========================================================= */

.data-table {
    width: 100%;

    border-collapse: collapse;

    background:
        rgba(230, 231, 235, 0.66);

    border:
        1px solid #747678;
}

.data-table th,
.data-table td {
    padding: 11px 12px;

    text-align: left;

    border-bottom:
        1px solid #94969d;
}

.data-table th {
    color: #f1f1f3;

    font-family:
        "Eurostile Extended Black",
        Eurostile,
        Arial,
        sans-serif;

    font-size: 10px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.4px;

    text-transform: uppercase;

    background: #747678;
}

.data-table tr:last-child td {
    border-bottom: 0;
}


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

@media (max-width: 1000px) {

    .fednet-banner {
        height: 285px;
    }

    .site-nav__link {
        padding-left: 8px !important;
        padding-right: 8px !important;

        font-size: 17px;
    }
}

@media (max-width: 760px) {

    .site-shell {
        width:
            min(
                calc(100% - 24px),
                var(--shell-width)
            );

        margin:
            18px auto;
    }

    .fednet-banner {
        height: 230px;
    }

    .site-nav {
        flex-wrap: wrap !important;
    }

    .site-nav__link {
        flex:
            1 1 33.333% !important;

        min-width:
            33.333% !important;

        min-height:
            50px;

        font-size:
            16px;
    }

    .fednet-cta__inner {
        gap: 12px;
    }

    .fednet-cta__icon {
        width: 44px;
    }

    .fednet-cta__text {
        font-size: clamp(18px, 3.6vw, 28px);
    }

    .content {
        padding: 18px;
    }

    .hero-panel {
        padding:
            29px 25px;
    }

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

@media (max-width: 520px) {

    .site-shell {
        width: 100%;

        min-height:
            100vh;

        margin: 0;

        border: 0;
        outline: 0;
    }

    .fednet-banner {
        height: 190px;
    }

    .site-nav__link {
        flex:
            1 1 50% !important;

        min-width:
            50% !important;

        font-size:
            15px;
    }

    .topbar {
        padding-left:
            13px;

        padding-right:
            13px;
    }

    .topbar__title,
    .topbar__players {
        font-size:
            9px;

        letter-spacing:
            0.35px;
    }

    .fednet-cta {
        padding: 12px 10px;
    }

    .fednet-cta__inner {
        flex-direction: row;
        gap: 10px;
        min-height: 58px;
    }

    .fednet-cta__icon {
        width: 36px;
    }

    .fednet-cta__text {
        font-size: clamp(13px, 4vw, 21px);
        letter-spacing: 0.2px;
    }

    .network-notice {
        grid-template-columns:
            1fr;
    }

    .network-notice__label {
        border-right:
            0;

        border-bottom:
            1px solid #555759;
    }

    .content {
        padding:
            14px;
    }

    .content-section {
        padding:
            20px;
    }
}


/* =========================================================
   STATS + EXTERNAL FOOTER RESPONSIVE OVERRIDES
   ========================================================= */

@media (max-width: 900px) {
    .leaderboard-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 520px) {
    .site-footer {
        width: calc(100% - 24px);

        margin-top: 12px;
        margin-bottom: 24px;

        padding-left: 8px;
        padding-right: 8px;
    }

    .stats-summary-grid {
        grid-template-columns: 1fr 1fr;
    }

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

    .stat-card__value {
        font-size: 21px;
    }
}






/* =========================================================
   FEDNET STATUS / ACCOUNT RESPONSIVE OVERRIDES
   ========================================================= */

@media (max-width: 760px) {
    .topbar {
        gap: 10px;

        padding-left: 13px;
        padding-right: 13px;
    }

    .topbar__title {
        gap: 5px;

        font-size: 9px;
        letter-spacing: 0.25px;
    }

    .topbar__citizen-link {
        font-size: 9px;
        letter-spacing: 0.25px;
    }
}

@media (max-width: 620px) {
    .topbar {
        min-height: 58px;

        flex-direction: column;
        align-items: stretch;
        justify-content: center;

        gap: 6px;

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

    .topbar__citizen {
        width: 100%;

        text-align: right;
    }
}


/* =========================================================
   ACCOUNT / REGISTRATION PLACEHOLDER HELPERS
   ========================================================= */

.account-panel {
    max-width: 720px;

    margin: 0 auto;

    padding: 24px 26px;

    background:
        linear-gradient(
            to bottom,
            #cecfd5,
            #b3b4bd
        );

    border: 1px solid #747678;

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.36),
        0 4px 11px rgba(0, 0, 0, 0.11);
}

.account-panel h2 {
    margin: 0 0 15px;

    font-family:
        "Eurostile Extended Black",
        Eurostile,
        Arial,
        sans-serif;

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

    text-transform: uppercase;
}

.account-panel p {
    margin: 0 0 12px;

    line-height: 1.65;
}


/* =========================================================
   CITIZENSHIP REGISTRATION
   ========================================================= */

.registration-page {
    display: flex;

    justify-content: center;

    width: 100%;
}

.registration-card {
    width: min(100%, 760px);

    overflow: hidden;

    background:
        linear-gradient(
            to bottom,
            #cecfd5 0%,
            #b3b4bd 100%
        );

    border: 1px solid #747678;

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.34),
        0 6px 16px rgba(0, 0, 0, 0.18);
}

.registration-card__image {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;

    border-bottom: 1px solid #747678;
}

.registration-card__title {
    margin: 0;
    padding: 18px 20px 10px;

    color: #202224;

    font-family:
        "Mobile Infantry",
        "Eurostile Extended Black",
        Arial,
        sans-serif;

    font-size: clamp(34px, 5vw, 54px);
    font-weight: normal;
    line-height: 1;
    letter-spacing: 0.5px;

    text-align: center;
    text-transform: uppercase;
}

.registration-form {
    width: min(100%, 580px);

    margin: 0 auto;
    padding: 18px 28px 34px;
}

.registration-field {
    margin-bottom: 17px;
}

.registration-field label {
    display: block;

    margin-bottom: 7px;

    color: #383a3c;

    font-family:
        "Eurostile Extended Black",
        Eurostile,
        Arial,
        sans-serif;

    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.55px;

    text-transform: uppercase;
}

.registration-field input {
    width: 100%;
    height: 45px;

    padding: 0 13px;

    color: #171819;

    font-family:
        Arial,
        sans-serif;

    font-size: 15px;

    background: #e4e5e9;

    border: 1px solid #747678;
    border-radius: 0;

    outline: none;

    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.14),
        0 1px 0 rgba(255, 255, 255, 0.55);

    transition:
        border-color 120ms ease,
        box-shadow 120ms ease,
        background 120ms ease;
}

.registration-field input:focus {
    background: #f0f1f3;

    border-color: #9f8b3b;

    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.10),
        0 0 0 2px rgba(159, 139, 59, 0.22);
}

.password-control {
    position: relative;
}

.password-control input {
    padding-right: 49px;
}

.password-toggle {
    position: absolute;

    top: 50%;
    right: 5px;

    width: 38px;
    height: 35px;

    padding: 7px;

    transform: translateY(-50%);

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

    color: #515457;

    background: transparent;

    border: 0;

    cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible {
    color: #000000;

    outline: none;
}

.password-toggle__icon {
    width: 23px;
    height: 23px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.password-toggle[aria-pressed="true"] {
    color: #9f8b3b;
}

.registration-submit {
    width: 100%;
    min-height: 52px;

    margin-top: 6px;
    padding: 12px 20px;

    color: #ffffff;

    font-family:
        "Microgramma D Extended Bold",
        "Eurostile Extended Black",
        Arial,
        sans-serif;

    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.5px;

    text-transform: uppercase;

    background:
        linear-gradient(
            to bottom,
            #7f8183 0%,
            #616365 100%
        );

    border: 1px solid #454749;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -3px 0 #9f8b3b;

    cursor: pointer;

    transition:
        background 120ms ease,
        color 120ms ease;
}

.registration-submit:hover,
.registration-submit:focus-visible {
    color: #ffffff;

    background: #000000;

    outline: none;

    -webkit-text-stroke: 1px #9f8b3b;

    box-shadow:
        inset 0 1px 0 #9f8b3b,
        inset 0 -1px 0 #9f8b3b;
}

.registration-errors {
    width: min(calc(100% - 56px), 580px);

    margin: 10px auto 0;
    padding: 13px 15px;

    color: #7f1717;

    font-size: 13px;
    line-height: 1.5;

    background: #ead2d2;

    border: 1px solid #9b5555;
}

.registration-errors strong {
    display: block;

    margin-bottom: 5px;

    font-family:
        "Eurostile Extended Black",
        Eurostile,
        Arial,
        sans-serif;

    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.5px;
}

.registration-errors ul {
    margin: 0;
    padding-left: 20px;
}

@media (max-width: 620px) {
    .registration-card__title {
        padding-top: 14px;

        font-size: clamp(30px, 10vw, 44px);
    }

    .registration-form {
        padding:
            14px
            18px
            26px;
    }

    .registration-errors {
        width: calc(100% - 36px);
    }
}


/* =========================================================
   ACCOUNT PLAYER ROSTER
   ========================================================= */

.account-roster {
    width: 100%;
}

.account-roster__header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 22px;

    margin-bottom: 22px;
    padding: 22px 24px;

    color: #f1f1f3;

    background:
        linear-gradient(
            to bottom,
            #7d7f81 0%,
            #686a6c 100%
        );

    border: 1px solid #555759;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.account-roster__kicker {
    margin-bottom: 7px;

    color: #d5d6da;

    font-family:
        "Eurostile Extended Black",
        Eurostile,
        Arial,
        sans-serif;

    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.7px;

    text-transform: uppercase;
}

.account-roster__header h1 {
    margin: 0;

    font-family:
        "Eurostile Extended Black",
        Eurostile,
        Arial,
        sans-serif;

    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.4px;

    text-transform: uppercase;
}

.account-add-player {
    display: inline-flex;

    min-height: 43px;

    padding: 0 18px;

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

    flex: 0 0 auto;

    color: #ffffff;

    font-family:
        "Microgramma D Extended Bold",
        "Eurostile Extended Black",
        Arial,
        sans-serif;

    font-size: 13px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.35px;

    text-decoration: none;
    text-transform: uppercase;

    background:
        linear-gradient(
            to bottom,
            #8a8c8e 0%,
            #616365 100%
        );

    border: 1px solid #414345;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        inset 0 -3px 0 #9f8b3b;

    transition:
        background 120ms ease,
        color 120ms ease;
}

.account-add-player:hover,
.account-add-player:focus-visible {
    color: #ffffff;

    background: #000000;

    outline: none;

    -webkit-text-stroke: 1px #9f8b3b;

    box-shadow:
        inset 0 1px 0 #9f8b3b,
        inset 0 -1px 0 #9f8b3b;
}

.account-add-player--large {
    margin-top: 5px;

    min-width: 190px;
}

.account-message {
    margin-bottom: 18px;
    padding: 12px 14px;

    font-size: 13px;
    line-height: 1.45;

    border: 1px solid;
}

.account-message--success {
    color: #245c31;

    background: #cce3d1;

    border-color: #5a9467;
}

.account-message--error {
    color: #7f1717;

    background: #ead2d2;

    border-color: #9b5555;
}


/* =========================================================
   PLAYER GRID
   ========================================================= */

.player-grid {
    display: grid;

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

    gap: 16px;
}

.player-card {
    position: relative;

    min-width: 0;
    min-height: 172px;

    display: grid;

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

    overflow: hidden;

    border: 2px solid #747678;

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.28),
        0 4px 10px rgba(0, 0, 0, 0.13);
}

.player-card--federation {
    background:
        linear-gradient(
            135deg,
            #d7e0ea 0%,
            #bdcbd9 48%,
            #aabccc 100%
        );
}

.player-card--arachnid {
    background:
        linear-gradient(
            135deg,
            #e8d3d3 0%,
            #d3b6b6 48%,
            #c39d9d 100%
        );
}

.player-card--active {
    border-color: #4ea65f;

    box-shadow:
        0 0 0 2px rgba(78, 166, 95, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.34),
        0 5px 13px rgba(0, 0, 0, 0.17);
}

.player-card__active-label {
    position: absolute;

    top: 0;
    right: 0;
    z-index: 3;

    padding: 5px 8px;

    color: #ffffff;

    font-family:
        "Eurostile Extended Black",
        Eurostile,
        Arial,
        sans-serif;

    font-size: 8px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.5px;

    text-transform: uppercase;

    background: #4e9c5d;

    border-left: 1px solid #397744;
    border-bottom: 1px solid #397744;
}


/* =========================================================
   PLAYER PORTRAIT
   ========================================================= */

.player-card__portrait {
    min-height: 100%;

    overflow: hidden;

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

    background:
        linear-gradient(
            to bottom,
            #727679,
            #505356
        );

    border-right: 1px solid rgba(68, 70, 72, 0.70);
}

.player-card__portrait img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.player-card__portrait-empty {
    width: 100%;
    min-height: 100%;

    display: flex;
    flex-direction: column;

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

    gap: 2px;

    color: #c7c9cc;

    font-family:
        "Eurostile Extended Black",
        Eurostile,
        Arial,
        sans-serif;

    font-size: 8px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.5px;

    text-align: center;
}


/* =========================================================
   PLAYER DETAILS
   ========================================================= */

.player-card__details {
    min-width: 0;

    display: flex;
    flex-direction: column;

    padding: 18px 13px 13px;
}

.player-card__name {
    min-width: 0;

    margin-bottom: 12px;

    overflow: hidden;

    color: #202224;

    font-family:
        "Eurostile Extended Black",
        Eurostile,
        Arial,
        sans-serif;

    font-size: 16px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0.2px;

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

    text-transform: uppercase;
}

.player-card--federation .player-card__name {
    color: #315c88;
}

.player-card--arachnid .player-card__name {
    color: #902d2d;
}

.player-card__stats {
    margin: 0 0 14px;
}

.player-card__stats > div {
    display: grid;

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

    gap: 7px;

    margin-bottom: 7px;
}

.player-card__stats dt {
    color: #55585b;

    font-family:
        "Eurostile Extended Black",
        Eurostile,
        Arial,
        sans-serif;

    font-size: 9px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.35px;

    text-transform: uppercase;
}

.player-card__stats dd {
    min-width: 0;

    margin: 0;

    overflow: hidden;

    color: #26282a;

    font-size: 12px;
    font-weight: bold;
    line-height: 1.2;

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

.player-card__active-form {
    margin-top: auto;
}

.player-card__active-button {
    width: 100%;
    min-height: 33px;

    padding: 7px 8px;

    color: #ffffff;

    font-family:
        "Eurostile Extended Black",
        Eurostile,
        Arial,
        sans-serif;

    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.35px;

    text-transform: uppercase;

    background:
        linear-gradient(
            to bottom,
            #777a7c,
            #57595b
        );

    border: 1px solid #444648;

    cursor: pointer;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15);

    transition:
        background 120ms ease,
        border-color 120ms ease;
}

.player-card__active-button:hover,
.player-card__active-button:focus-visible {
    background: #000000;

    border-color: #9f8b3b;

    outline: none;
}

.player-card__current-player {
    margin-top: auto;
    padding: 8px;

    color: #2e753d;

    font-family:
        "Eurostile Extended Black",
        Eurostile,
        Arial,
        sans-serif;

    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.35px;

    text-align: center;
    text-transform: uppercase;

    background: rgba(199, 229, 205, 0.70);

    border: 1px solid rgba(78, 156, 93, 0.65);
}


/* =========================================================
   EMPTY PLAYER ROSTER
   ========================================================= */

.account-empty {
    padding: 42px 28px;

    text-align: center;

    background:
        linear-gradient(
            to bottom,
            #cecfd5,
            #b3b4bd
        );

    border: 1px solid #747678;

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}

.account-empty__title {
    margin-bottom: 12px;

    color: #454749;

    font-family:
        "Eurostile Extended Black",
        Eurostile,
        Arial,
        sans-serif;

    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.5px;
}

.account-empty p {
    max-width: 620px;

    margin: 0 auto 18px;

    color: #505255;

    line-height: 1.6;
}


/* =========================================================
   PLAYER ROSTER RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {
    .player-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .account-roster__header {
        align-items: flex-start;

        flex-direction: column;
    }

    .account-add-player {
        align-self: stretch;
    }

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

    .player-card {
        grid-template-columns:
            105px minmax(0, 1fr);
    }
}

@media (max-width: 420px) {
    .player-card {
        grid-template-columns:
            86px minmax(0, 1fr);
    }

    .player-card__details {
        padding-left: 11px;
        padding-right: 11px;
    }
}