:root {
    --rh-detail-bg: #090d10;
    --rh-detail-panel: #10161a;
    --rh-detail-panel-2: #0c1114;
    --rh-detail-line: #263139;
    --rh-detail-line-soft: rgba(255, 255, 255, .08);
    --rh-detail-text: #f6f7f8;
    --rh-detail-muted: #98a6af;
    --rh-detail-orange: #e6421d;
    --rh-detail-orange-bright: #ff5128;
    --rh-detail-green: #63e86d;
    --rh-detail-blue: #4ca7ff;
}


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

.rh-detail-page {
    min-height: calc(100vh - 160px);
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(224, 61, 27, .055),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #090d10 0%,
            #080c0f 100%
        );
    color: var(--rh-detail-text);
    padding: 20px 22px 70px;
    box-sizing: border-box;
}

.rh-detail-shell {
    width: min(1420px, 100%);
    margin: 0 auto;
}


/* =========================================================
   BACK TO SERVERS
   ========================================================= */

.rh-detail-button-back {
    width: auto;
    margin: 0 0 14px;
    background: linear-gradient(
        180deg,
        #ed4a24,
        #c93217
    );
    border-color: #f05a32;
    box-shadow: 0 12px 26px rgba(196, 48, 20, .22);
}


/* =========================================================
   SERVER TITLE
   ========================================================= */

.rh-detail-server-title {
    width: 100%;
    padding: 12px 18px;
    box-sizing: border-box;
    background: var(--rh-detail-panel);
    border: 1px solid var(--rh-detail-line);
    border-bottom: 0;
}

.rh-detail-server-title h1 {
    margin: 0;
    color: #ffffff;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 900;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}


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

.rh-detail-hero {
    width: 100%;
    aspect-ratio: 2 / 1;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid var(--rh-detail-line);
    background:
        #050708
        var(--rh-detail-hero)
        center / cover
        no-repeat;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}

/* =========================================================
   SERVER LINKS / SOCIALS
   ========================================================= */

.rh-detail-server-links {
    display: flex;
    align-items: stretch;
    justify-content: center;

    margin-top: 10px;

    border: 1px solid var(--rh-detail-line);
    background: var(--rh-detail-line);

    overflow: visible;
}


/* =========================================================
   ICON LINK
   ========================================================= */

.rh-detail-server-link {
    position: relative;

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

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

    flex: 1 1 0;

    box-sizing: border-box;

    background: #10161a;

    color: #ffffff;
    text-decoration: none;

    transition:
        background .15s ease,
        transform .15s ease;
}


/* =========================================================
   ICON LINK HOVER
   ========================================================= */

.rh-detail-server-link:hover,
.rh-detail-server-link:focus-visible {
    z-index: 20;

    background: #171e22;

    transform: translateY(-1px);

    outline: none;
}


/* =========================================================
   ICON IMAGE
   ========================================================= */

.rh-detail-server-link img {
    width: 42px;
    height: 42px;

    display: block;

    object-fit: contain;

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


.rh-detail-server-link:hover img,
.rh-detail-server-link:focus-visible img {
    transform: scale(1.08);
}


/* =========================================================
   HOVER LABEL / TOOLTIP
   ========================================================= */

.rh-detail-server-link span {
    position: absolute;

    left: 50%;
    bottom: calc(100% + 8px);

    padding: 7px 10px;

    transform:
        translateX(-50%)
        translateY(4px);

    border: 1px solid #39454d;
    background: #0b1013;

    color: #ffffff;

    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    box-shadow: 0 7px 20px rgba(0, 0, 0, .4);

    transition:
        opacity .15s ease,
        visibility .15s ease,
        transform .15s ease;
}


/* Tooltip arrow */

.rh-detail-server-link span::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 100%;

    transform: translateX(-50%);

    border: 5px solid transparent;
    border-top-color: #39454d;
}


/* Show label on hover */

.rh-detail-server-link:hover span,
.rh-detail-server-link:focus-visible span {
    opacity: 1;
    visibility: visible;

    transform:
        translateX(-50%)
        translateY(0);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

    .rh-detail-server-link {
        min-height: 56px;
    }

    .rh-detail-server-link img {
        width: 34px;
        height: 34px;
    }

    .rh-detail-server-link span {
        display: none;
    }

}


/* =========================================================
   KICKER
   Used on error / not-found screen
   ========================================================= */

.rh-detail-kicker {
    display: block;
    margin-bottom: 10px;
    color: var(--rh-detail-orange-bright);
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.rh-detail-button {
    min-height: 48px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid var(--rh-detail-orange);
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: .045em;
    box-sizing: border-box;
    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease;
}

.rh-detail-button:hover {
    transform: translateY(-1px);
}

.rh-detail-button-join {
    width: 100%;
    margin-top: 22px;
    background: linear-gradient(
        180deg,
        #ed4a24,
        #c93217
    );
    border-color: #f05a32;
    box-shadow: 0 12px 26px rgba(196, 48, 20, .22);
}

.rh-detail-button-outline {
    background: transparent;
}


/* =========================================================
   MAIN GRID
   ========================================================= */

.rh-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
    align-items: stretch;
}


/* =========================================================
   PANELS
   ========================================================= */

.rh-detail-panel {
    min-width: 0;
    padding: 0 18px 18px;
    background: linear-gradient(
        180deg,
        var(--rh-detail-panel),
        var(--rh-detail-panel-2)
    );
    border: 1px solid var(--rh-detail-line);
    box-shadow: inset 0 1px rgba(255, 255, 255, .018);
}

.rh-detail-panel h2 {
    position: relative;
    margin: 0 -18px 14px;
    padding: 15px 18px 14px 31px;
    border-bottom: 1px solid var(--rh-detail-line-soft);
    color: #ffffff;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .055em;
}

.rh-detail-panel h2::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 14px;
    bottom: 13px;
    width: 3px;
    background: var(--rh-detail-orange-bright);
    box-shadow: 0 0 12px rgba(255, 81, 40, .34);
}

.rh-detail-panel h2 span {
    margin-left: 5px;
    color: var(--rh-detail-muted);
    font-size: 10px;
    font-weight: 800;
}


/* =========================================================
   DATA LISTS
   ========================================================= */

.rh-detail-data-list {
    margin: 0;
}

.rh-detail-data-list > div {
    min-height: 38px;
    display: grid;
    grid-template-columns:
        minmax(120px, .8fr)
        minmax(0, 1.2fr);
    align-items: center;
    gap: 14px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .065);
}

.rh-detail-data-list > div:last-child {
    border-bottom: 0;
}

.rh-detail-data-list dt {
    color: var(--rh-detail-muted);
    font-size: 12px;
    font-weight: 650;
}

.rh-detail-data-list dd {
    margin: 0;
    color: #f4f6f7;
    font-size: 12px;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.rh-detail-data-list a {
    color: #e9edf0;
}


/* =========================================================
   STATUS COLOURS
   ========================================================= */

.rh-detail-status-text-online,
.rh-detail-good {
    color: #6ff27a !important;
}

.rh-detail-status-text-unreachable {
    color: #ff7165 !important;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.rh-detail-description-copy {
    color: #d9dfe3;
    font-size: 13px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}


/* =========================================================
   SERVER IMAGES
   ========================================================= */

.rh-detail-images figure {
    margin: 0 0 14px;
}

.rh-detail-images figure:last-child {
    margin-bottom: 0;
}

.rh-detail-images img,
.rh-detail-map-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    background: #050708;
    border: 1px solid rgba(255, 255, 255, .08);
}

.rh-detail-images figcaption {
    padding-top: 6px;
    color: var(--rh-detail-muted);
    font-size: 10px;
}


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

.rh-detail-map-image {
    aspect-ratio: 1.38 / 1;
    margin-bottom: 12px;
}


/* =========================================================
   SERVER TAGS
   ========================================================= */

.rh-detail-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rh-detail-tag-cloud span {
    min-height: 31px;
    padding: 4px 12px;
    display: inline-flex;
    align-items: center;
    border: 1px solid #3a4851;
    border-radius: 4px;
    background: linear-gradient(
        180deg,
        #192229,
        #11181d
    );
    color: #e8ecef;
    font-size: 12px;
    font-weight: 800;
    box-sizing: border-box;
}

.rh-detail-tags-panel h3 {
    margin: 18px 0 8px;
    color: #aab5bc;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.rh-detail-tags-panel code {
    display: block;
    padding: 12px;
    background: #090d10;
    border: 1px solid #2d3941;
    color: #c9d2d7;
    font-family: Consolas, Monaco, monospace;
    font-size: 11px;
    line-height: 1.65;
    white-space: normal;
    overflow-wrap: anywhere;
}


/* =========================================================
   PLAYER CHART
   ========================================================= */

.rh-detail-chart {
    padding-top: 5px;
}

.rh-detail-chart svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 210px;
    overflow: visible;
}

.rh-detail-chart line {
    stroke: rgba(255, 255, 255, .12);
    stroke-width: 1;
}

.rh-detail-chart .rh-detail-chart-grid {
    stroke: rgba(255, 255, 255, .06);
}

.rh-detail-chart-area {
    fill: rgba(225, 64, 28, .13);
}

.rh-detail-chart-line {
    fill: none;
    stroke: #e84420;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rh-detail-chart-times {
    display: flex;
    justify-content: space-between;
    margin-top: -2px;
    color: #77858d;
    font-size: 9px;
}


/* =========================================================
   PLAYER STATS BOXES
   ========================================================= */

.rh-detail-stat-boxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 15px;
}

.rh-detail-stat-boxes > div {
    min-height: 70px;
    padding: 10px 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #0a0f12;
    border: 1px solid #222d34;
    text-align: center;
}

.rh-detail-stat-boxes strong {
    color: #ffffff;
    font-size: 20px;
    line-height: 1;
}

.rh-detail-stat-boxes span {
    margin-top: 7px;
    color: var(--rh-detail-muted);
    font-size: 9px;
    font-weight: 700;
}


/* =========================================================
   COPY VALUES
   ========================================================= */

.rh-detail-copy-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.rh-detail-copy-value button {
    flex: 0 0 auto;
    min-width: 42px;
    min-height: 25px;
    padding: 2px 7px;
    background: transparent;
    color: #aeb9bf;
    border: 1px solid #344149;
    cursor: pointer;
    font-size: 9px;
    font-weight: 800;
}

.rh-detail-copy-value button:hover,
.rh-detail-copy-value button.is-copied {
    color: #ffffff;
    border-color: var(--rh-detail-orange);
}


/* =========================================================
   MONOSPACE VALUES
   ========================================================= */

.rh-detail-mono {
    font-family: Consolas, Monaco, monospace;
    font-size: 10px !important;
}


/* =========================================================
   MUTED TEXT
   ========================================================= */

.rh-detail-muted {
    margin: 20px 0;
    color: var(--rh-detail-muted);
    font-size: 12px;
}


/* =========================================================
   NOT FOUND
   ========================================================= */

.rh-detail-not-found {
    max-width: 700px;
    margin: 80px auto;
    padding: 36px;
    border: 1px solid var(--rh-detail-line);
    background: var(--rh-detail-panel);
    text-align: center;
}

.rh-detail-not-found h1 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 34px;
}

.rh-detail-not-found p {
    color: var(--rh-detail-muted);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

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

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

    .rh-detail-page {
        padding: 14px 12px 45px;
    }

    .rh-detail-server-title {
        padding: 10px 14px;
    }

    .rh-detail-server-title h1 {
        font-size: 15px;
    }

    .rh-detail-grid {
        grid-template-columns: 1fr;
    }

    .rh-detail-data-list > div {
        grid-template-columns:
            minmax(105px, .8fr)
            minmax(0, 1.2fr);
    }

    .rh-detail-stat-boxes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}