/* ==========================================================
   PROJECT HERO V2
   separate from HOME
   ========================================================== */


.server-stage {
    position: relative;

    min-height:
        calc(100vh - 81.6px);

    overflow: hidden;

    background:
        url("../images/header/bg.webp")
        center 48% / cover no-repeat;
}


.server-stage__shade {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(3,5,9,.74) 0%,
            rgba(3,5,9,.43) 32%,
            rgba(5,4,10,.12) 56%,
            rgba(17,8,36,.34) 100%
        );
}


.server-stage__shell {
    position: relative;

    width:
        min(1408px,calc(100% - 48px));

    min-height:
        calc(100vh - 81.6px);

    margin: 0 auto;

    padding:
        44.8px 0 48px;

    display: grid;

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

    gap: 32px;
}


.server-stage__main {
    min-width: 0;
}


.server-stage__logo {
    position: relative;

    display: block;

    width: 288px;

    margin-bottom: 32px;
}


.server-stage__logo img {
    display: block;

    width: 100%;

    filter:
        drop-shadow(
            0 11.2px 19.2px
            rgba(0,0,0,.72)
        );
}


.server-stage__logo::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        url("../images/logotype/logotype.webp")
        center / contain no-repeat;

    opacity: 0;
}


@media (hover:hover) and (pointer:fine) {

    .server-stage__logo:hover::after {
        animation:
            savageLogoPulse .30s ease;
    }

}


.server-stage__intro {
    width:
        min(608px,100%);
}


.server-stage__eyebrow {
    margin-bottom: 11.2px;

    color: #e69039;

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

    letter-spacing: .22em;
}


.server-stage_multi
.server-stage__eyebrow {
    color: #a994ff;
}


.server-stage__status {
    margin-bottom: 13.6px; display: flex; align-items: center; gap: 6.72px;
    color: #69e982; font-size: 9.28px; font-weight: 850; letter-spacing: .025em;
    text-shadow: 0 1px 10.4px rgba(0,0,0,.9);
}
.server-stage__status[data-state="upcoming"] { color: #d7ac72; }
.server-stage__status i {
    width: 5.44px; height: 5.44px; flex: 0 0 5.44px; border-radius: 50%;
    background: currentColor; box-shadow: 0 0 10.4px currentColor;
}





.server-stage__title {
    margin: 0;

    display: flex;
    align-items: baseline;
    gap: 11.2px;

    font-family:
        "Times New Roman",
        Georgia,
        serif;

    line-height: .92;
}


.server-stage__title span {
    color: #efe2d1;

    font-size:
        clamp(62.4px,5vw,89.6px);
}


.server-stage__title b {
    color: #ef8a31;

    font-family:
        Arial,
        sans-serif;

    font-size: 28px;
}


.server-stage_multi
.server-stage__title b {
    color: #a98bff;
}


.server-stage__subtitle {
    margin-top: 15.2px;

    color: #e9d9c6;

    font-family:
        "Times New Roman",
        Georgia,
        serif;

    font-size: 22.72px;
    font-weight: 700;
}


.server-stage__description {
    max-width: 560px;

    margin: 12px 0 0;

    color:
        rgba(239,230,221,.84);

    font-size: 13.12px;

    line-height: 1.55;
}


/* LOWER LEFT */


.server-stage__bottom {
    margin-top: 25.6px;

    display: grid;

    grid-template-columns:
        minmax(368px,464px)
        minmax(192px,1fr);

    gap: 16px;

    align-items: stretch;
}


/* ACTIONS / ORIGINAL SWITCHER HOVER */

.server-stage__actions {
    display: flex;

    flex-direction: column;

    gap: 10.4px;

    justify-content: flex-end;
}


.server-stage__actions
.hero-btn {
    width: 100%;
}


.server-other-link {
    min-height: 50.4px;

    padding: 8.32px 10.88px;

    display: flex;

    align-items: center;

    gap: 9.6px;

    border:
        1px solid rgba(255,187,105,.30);

    border-radius: 6.72px;

    background:
        rgba(52,23,14,.88);

    color: #e8d3bb;

    text-decoration: none;

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


.server-other-link_multisub {
    border-color:
        rgba(157,139,255,.34);

    background:
        rgba(43,34,84,.90);

    color: #d7cfff;
}


.server-other-link__icon {
    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    display: grid;

    place-items: center;

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

    border-radius: 50%;

    background:
        rgba(3,4,8,.48);
}


.server-other-link__icon img {
    width: 19.52px;
    height: 19.52px;

    object-fit: contain;
}


.server-other-link__text {
    flex: 1;

    min-width: 0;

    font-size: 11.68px;

    font-weight: 750;
}


.server-other-link__arrow {
    font-size: 16px;

    font-weight: 900;
}


@media (hover:hover) and (pointer:fine) {

    .server-other-link:hover {
        transform:
            translateY(-2px);

        border-color:
            rgba(255,187,105,.60);

        background:
            rgba(65,27,15,.96);
    }

    .server-other-link_multisub:hover {
        border-color:
            rgba(177,165,255,.68);

        background:
            rgba(56,43,108,.98);
    }

}


/* ==========================================================
   RIGHT RATINGS
   ========================================================== */

.server-stage__ratings {
    padding-top: 75.2px;

    display: flex;

    flex-direction: column;

    gap: 16px;
}


.rating-panel {
    --accent: 196,139,72;
    position: relative;
    overflow: visible;
    min-height: 0;
    height: auto;
    padding: 10px 12px 9px;
    border: 1px solid rgba(var(--accent),.48);
    border-radius: 2px;
    background: linear-gradient(160deg,rgba(21,18,23,.91),rgba(10,11,16,.94));
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 1px rgba(255,255,255,.035),0 10px 28px rgba(0,0,0,.12);
}
.rating-panel::before {
    content: "";
    position: absolute;
    inset: 6px;
    pointer-events: none;
    background:
      linear-gradient(rgba(var(--accent),.55),rgba(var(--accent),.55)) left top / 20px 1px no-repeat,
      linear-gradient(rgba(var(--accent),.55),rgba(var(--accent),.55)) left top / 1px 20px no-repeat,
      linear-gradient(rgba(var(--accent),.55),rgba(var(--accent),.55)) right bottom / 20px 1px no-repeat,
      linear-gradient(rgba(var(--accent),.55),rgba(var(--accent),.55)) right bottom / 1px 20px no-repeat;
}
.rating-panel::after {
    content: "";
    position: absolute;
    top: -3px;
    left: 50%;
    width: 4px;
    height: 4px;
    border: 1px solid rgba(var(--accent),.60);
    background: #0c0b0f;
    transform: translateX(-50%) rotate(45deg);
}
.rating-panel h2 {
    position: relative;
    z-index: 1;
    margin: 0 0 7px;
    padding: 0 0 7px;
    border-bottom: 1px solid rgba(210,158,83,.16);
    color: #e4b477;
    font-family: Georgia,"Times New Roman",serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.15;
    text-align: left;
    text-transform: uppercase;
}
.rating-table {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.rating-row_head { display: none; }
.rating-row:not(.rating-row_head) {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 26px;
    padding: 2px 7px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #ded3c5;
    transition: background-color .25s ease,border-color .25s ease;
}
.rating-row:not(.rating-row_head):not(.is-top) {
    border-bottom-color: rgba(255,255,255,.045);
    border-radius: 0;
}
.rating-row > span:first-child {
    display: grid;
    place-items: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(196,139,72,.15);
    border-radius: 50%;
    background: rgba(196,139,72,.055);
    color: #a99a89;
    font-size: 10px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.rating-row strong {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #e8ddd1;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}
.rating-row b {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 5px;
    flex: 0 0 auto;
    padding: 2px 5px;
    border-radius: 4px;
    background: rgba(8,9,13,.24);
    color: #ddbd86;
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.rating-row:not(.rating-row_head) b::after {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .035em;
    color: #9e8d78;
}
.rating-panel_clans .rating-row b::after { content: "CRP"; }
.rating-panel:not(.rating-panel_clans) .rating-row b::after { content: "PvP"; }
.rating-row.is-top {
    border-radius: 7px;
    border-color: rgba(196,139,72,.16);
}
.rating-row.is-top-1 {
    min-height: 34px;
    background: linear-gradient(95deg,rgba(170,115,43,.24),rgba(170,115,43,.045) 75%,transparent);
    border-color: rgba(224,174,94,.31);
}
.rating-row.is-top-2 {
    min-height: 30px;
    background: linear-gradient(95deg,rgba(159,171,192,.13),rgba(159,171,192,.02) 80%,transparent);
    border-color: rgba(159,171,192,.19);
}
.rating-row.is-top-3 {
    min-height: 30px;
    background: linear-gradient(95deg,rgba(167,105,65,.15),rgba(167,105,65,.02) 80%,transparent);
    border-color: rgba(167,105,65,.20);
}
.rating-row.is-top-1 > span:first-child {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    color: #ffe2a0;
    background: rgba(195,135,51,.18);
    border-color: rgba(242,196,111,.48);
    font-size: 11px;
}
.rating-row.is-top-2 > span:first-child {
    color: #d9dfe8;
    background: rgba(172,188,207,.12);
    border-color: rgba(172,188,207,.35);
}
.rating-row.is-top-3 > span:first-child {
    color: #e1ab82;
    background: rgba(181,113,73,.13);
    border-color: rgba(181,113,73,.36);
}
.rating-row.is-top-1 strong,.rating-row.is-top-1 b { color: #ffda91; }
.rating-row.is-top-2 strong { color: #dde0e7; }
.rating-row.is-top-3 strong { color: #e4c0a4; }
.rating-more {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    min-width: 130px;
    min-height: 27px;
    margin: 9px 0 0 auto;
    padding: 0 12px;
    border: 1px solid rgba(196,139,72,.34);
    border-radius: 5px;
    background: rgba(66,38,18,.35);
    color: #e6ccaa;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    transition: background-color .25s ease,border-color .25s ease;
}
@media (hover:hover) and (pointer:fine) {
    .rating-row:not(.rating-row_head):hover {
        background-color: rgba(208,158,83,.035);
    }
    .rating-more:hover {
        background-color: rgba(89,48,19,.45);
        border-color: rgba(224,161,84,.45);
    }
}
@media (max-width: 600px) {
    .rating-panel { padding: 12px; }
    .rating-panel h2 { font-size: 16px; }
    .rating-row:not(.rating-row_head) { gap: 7px; padding-inline: 6px; }
    .rating-row strong { font-size: 11px; }
    .rating-row b { font-size: 11px; padding-inline: 5px; }
}

/* RESPONSIVE */

@media (max-width: 1200px) {

    .server-stage__shell {
        grid-template-columns:
            minmax(0,1fr)
            336px;
    }

    .server-stage__bottom {
        grid-template-columns:
            minmax(336px,1fr);
    }

    .server-stage__actions {
        display: grid;

        grid-template-columns:
            1fr 1fr;
    }

    .server-other-link {
        grid-column:
            1 / -1;
    }

}


@media (max-width: 900px) {

    .server-stage {
        overflow: visible;
    }

    .server-stage__shell {
        grid-template-columns: 1fr;

        padding-bottom: 64px;
    }

    .server-stage__ratings {
        padding-top: 0;

        display: grid;

        grid-template-columns:
            1fr 1fr;
    }

}


@media (max-width: 650px) {

    .server-stage {
        background-image:
            url("../images/header/bg-mobile.webp");
    }

    .server-stage__shell {
        width:
            min(100% - 22.4px,576px);
    }

    .server-stage__logo {
        width:
            min(256px,80vw);
    }

    .server-stage__title {
        display: block;
    }

    .server-stage__title span {
        font-size:
            clamp(48px,15vw,65.6px);
    }

    .server-stage__title b {
        display: block;

        margin-top: 5.6px;
    }

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

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

    .server-other-link {
        grid-column: auto;
    }

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

}


/* PROJECT PAGES SAVAGE UI V3 */


/* ==========================================================
   BACKGROUND
   ========================================================== */

.server-stage {
    background-position:
        center 33%;
}


.server-stage__shade {
    background:
        linear-gradient(
            90deg,
            rgba(3,5,9,.82) 0%,
            rgba(4,5,8,.50) 34%,
            rgba(5,4,9,.12) 57%,
            rgba(12,7,21,.31) 100%
        );
}


/* ==========================================================
   INTRO
   One bronze / graphite system for BOTH projects
   ========================================================== */

.server-stage__eyebrow,
.server-stage_multi .server-stage__eyebrow {
    color: #c48b48;

    letter-spacing: .18em;
}


.server-stage__title span {
    color: #efe7dc;
}


.server-stage__title b,
.server-stage_multi .server-stage__title b {
    color: #c48b48;
}


.server-stage__subtitle {
    color: #eadfd2;
}


.server-stage__description {
    color:
        rgba(239,232,223,.84);
}


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

.server-stage__actions
.hero-btn {
    border-radius: 1.6px;

    border-color:
        rgba(196,139,72,.48);
}


.server-other-link,
.server-other-link_multisub {
    position: relative;

    min-height: 50.4px;

    border:
        1px solid rgba(196,139,72,.36);

    border-radius: 1.6px;

    background:
        linear-gradient(
            100deg,
            rgba(45,27,15,.72),
            rgba(10,10,13,.72)
        );

    color: #e6d8c7;

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


.server-other-link__icon {
    border-color:
        rgba(196,139,72,.24);

    background:
        rgba(6,6,9,.45);
}


@media (hover:hover) and (pointer:fine) {

    .server-other-link:hover,
    .server-other-link_multisub:hover {
        transform: none;

        border-color:
            rgba(224,160,82,.72);

        background:
            linear-gradient(
                100deg,
                rgba(65,37,17,.82),
                rgba(14,12,14,.78)
            );

        box-shadow:
            0 0 13.6px
            rgba(196,139,72,.09);
    }

}


@media (hover:hover) and (pointer:fine) {
    .rating-panel:hover {
        border-color: rgba(196,139,72,.51);
        box-shadow: inset 0 1px rgba(255,255,255,.035),0 10px 28px rgba(0,0,0,.14);
    }
}

.rating-empty {
    min-height: 112px;

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

    padding: 16px;

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

    color: rgba(222,213,204,.48);

    text-align: center;

    font-size: 9.92px;
    line-height: 1.45;
}


/* PROJECT INTRO TYPOGRAPHY V4 */

.server-stage__intro {
    position: relative;

    width: min(624px,100%);

    padding-left: 18.4px;
}


/* subtle editorial line, not a card */

.server-stage__intro::before {
    content: "";

    position: absolute;

    left: 0;
    top: 1.6px;
    bottom: 1.6px;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            rgba(196,139,72,.00),
            rgba(196,139,72,.78) 18%,
            rgba(196,139,72,.34) 78%,
            rgba(196,139,72,.00)
        );
}


/* project identity */

.server-stage__eyebrow,
.server-stage_multi .server-stage__eyebrow {
    margin-bottom: 9.92px;

    color: #c99456;

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

    letter-spacing: .19em;

    text-transform: uppercase;

    text-shadow:
        0 1px 12.8px rgba(0,0,0,.82);
}


/* status becomes part of composition */







/* main project title */

.server-stage__title {
    margin: 0;

    gap: 11.52px;

    align-items: baseline;

    line-height: .88;

    text-shadow:
        0 2.88px 20px rgba(0,0,0,.78);
}


.server-stage__title span {
    color: #f0e8dd;

    font-size:
        clamp(64px,4.8vw,84.8px);

    font-weight: 700;

    letter-spacing: -.035em;
}


.server-stage__title b,
.server-stage_multi .server-stage__title b {
    color: #c98a45;

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

    letter-spacing: -.02em;

    text-shadow:
        0 0 12.8px rgba(196,139,72,.18);
}


/* subtitle — not another giant heading */

.server-stage__subtitle {
    position: relative;

    margin-top: 16px;

    padding-bottom: 11.52px;

    color: #eadfd2;

    font-size: 19.2px;
    font-weight: 700;

    line-height: 1.22;

    text-shadow:
        0 2.4px 12.8px rgba(0,0,0,.78);
}


.server-stage__subtitle::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 128px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(196,139,72,.75),
            rgba(196,139,72,.05)
        );
}


/* description */

.server-stage__description {
    max-width: 560px;

    margin: 12.48px 0 0;

    color: rgba(234,226,217,.78);

    font-size: 12.16px;

    line-height: 1.62;

    text-shadow:
        0 1px 11.2px rgba(0,0,0,.88);
}


/* better spacing between logo and copy */

.server-stage__logo {
    margin-bottom: 37.6px;
}


@media (max-width: 650px) {

    .server-stage__intro {
        padding-left: 13.6px;
    }

    .server-stage__title span {
        font-size:
            clamp(48px,14vw,66.4px);
    }

    .server-stage__title b {
        font-size: 20px;
    }

    .server-stage__subtitle {
        font-size: 16.8px;
    }

}


/* ==========================================================
   PROD V3 — SPHERE ISOLATION
   ========================================================== */

.server-stage {
    width: 100%;
    margin-top: var(--navigation-height);
    font-family: Arial, sans-serif;
}

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

.server-stage img {
    max-width: 100%;
}

/* Project pages reuse the home card, with expanded season information. */
.project-card_detail {
    height: auto;
    min-height: 0;
    padding: 18px;
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: 12px;
}
.project-card_detail > * { grid-row: auto; }
.project-card_detail .project-head { gap: 10px; }
.project-card_detail .project-head strong { font-size: 13px; }
.project-card_detail.project-card_multi .project-head strong { padding-right: 76px; }
.project-card_detail .project-icon { flex-basis: 36px; width: 36px; height: 36px; }
.project-card_detail .project-icon img { width: 24px; height: 24px; }
.project-card_detail .project-season { top: 9px; right: 12px; }
.project-card_detail .project-title { font-size: 22px; padding-top: 10px; }
.project-card_detail .project-clock { gap: 8px; font-size: 9px; }
.project-card_detail .project-clock-unit { padding: 5px 6px; gap: 4px; }
.project-card_detail .project-clock-unit b { font-size: 15px; }
.project-card_detail .project-clock-unit small { font-size: 7px; }
.project-card_detail .project-details {
    display: grid;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(196,139,72,.18);
}
.project-card_detail .project-detail-row {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: baseline;
    gap: 12px;
}
.project-card_detail .project-detail-row > span,
.project-card_detail .stage-progress__label,
.project-card_detail .next-stage__label {
    color: #bba789;
    font-size: 8px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: .03em;
}
.project-card_detail .project-detail-row > strong {
    color: #d8c5aa;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    text-align: right;
}
.project-card_detail .stage-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.project-card_detail .stage-progress__items {
    position: relative;
    display: flex;
    align-items: center;
    gap: 25px;
    flex-shrink: 0;
}
.project-card_detail .stage-progress__items::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 11px;
    right: 11px;
    height: 1px;
    background: rgba(196,139,72,.35);
}
.project-card_detail .stage-dot {
    position: relative;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid rgba(196,139,72,.4);
    border-radius: 50%;
    background: #15120f;
    color: #bba789;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}
.project-card_detail .stage-dot_complete { border-color: #a47b47; color: #d7ac72; }
.project-card_detail .stage-dot_current {
    border-color: #e4b06c;
    background: linear-gradient(145deg,#aa7333,#705025);
    color: #fff0d7;
    box-shadow: 0 0 10px rgba(196,139,72,.2);
}
.project-card_detail .next-stage { display: flex; flex-wrap: wrap; gap: 6px; }
.project-card_detail .next-stage__label { flex-basis: 100%; }
.project-card_detail .next-stage > span:not(.next-stage__label) {
    color: #d8c5aa;
    font-size: 9px;
    line-height: 1.4;
}
.project-card_detail .project-online { padding: 10px 0 0; }
.project-card_detail .project-online__state { line-height: 1.3; }
@media (max-width: 650px) {
    .project-card_detail { padding: 14px; gap: 10px; }
    .project-card_detail .project-title { font-size: 21px; }
    .project-card_detail .project-clock { font-size: 8px; gap: 6px; }
    .project-card_detail .project-clock-unit { padding: 5px; gap: 3px; }
    .project-card_detail .project-clock-unit b { font-size: 14px; }
    .project-card_detail .project-detail-row { gap: 8px; }
}