/* =========================================================
   HAVEN Website v3
   Weapons v0.1 candidate
   ========================================================= */


.weapons-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    display: flex;
    min-height: 270px;

    margin-top: 32px;
    margin-bottom: 22px;

    padding:
        clamp(26px, 4vw, 48px);

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

    border:
        1px solid
        #2b343b;

    background:
        linear-gradient(
            90deg,
            rgba(5, 9, 12, 0.96) 0%,
            rgba(5, 9, 12, 0.91) 32%,
            rgba(5, 9, 12, 0.66) 62%,
            rgba(5, 9, 12, 0.76) 100%
        ),
        linear-gradient(
            180deg,
            rgba(5, 9, 12, 0.16),
            rgba(5, 9, 12, 0.58)
        ),
        url("../img/haven-v3-industrial-bg.png");

    background-position:
        center,
        center,
        center 52%;

    background-size:
        auto,
        auto,
        cover;

    background-repeat:
        no-repeat;

    box-shadow:
        inset 0 0 0 1px
        rgba(0, 0, 0, 0.28),
        0 18px 52px
        rgba(0, 0, 0, 0.28);
}


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

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.025),
            rgba(0, 0, 0, 0.10)
        );
}


.weapons-hero > * {
    position: relative;
    z-index: 1;
}


.weapons-kicker {
    margin-bottom: 7px;

    color:
        rgba(221, 126, 67, 0.92);

    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}


.weapons-hero h1,
.weapons-panel h2,
.weapons-telemetry-note h2 {
    margin: 0;

    color:
        rgba(244, 247, 249, 0.96);
}


.weapons-hero h1 {
    font-size:
        clamp(
            2rem,
            5vw,
            3.75rem
        );

    letter-spacing:
        -0.035em;
}


.weapons-intro {
    max-width: 760px;

    margin:
        14px
        0
        0;

    color:
        rgba(232, 238, 242, 0.62);

    font-size:
        clamp(
            0.96rem,
            1.6vw,
            1.08rem
        );

    line-height: 1.7;
}


/* =========================================================
   Summary
   ========================================================= */


.weapon-summary-grid {
    display: grid;

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

    gap: 12px;

    margin-bottom: 22px;
}


.weapon-summary-card {
    min-width: 0;

    padding:
        20px
        20px
        18px;

    border:
        1px solid
        rgba(255, 255, 255, 0.075);

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.026),
            rgba(255, 255, 255, 0.008)
        ),
        rgba(8, 12, 15, 0.82);

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


.weapon-summary-label {
    display: block;

    margin-bottom: 11px;

    color:
        rgba(232, 238, 242, 0.42);

    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.weapon-summary-card > strong {
    display: block;

    overflow-wrap: anywhere;

    color:
        rgba(246, 248, 250, 0.96);

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

    line-height: 1.05;

    font-variant-numeric:
        tabular-nums;
}


.weapon-summary-card
.weapon-summary-highlight {
    color:
        rgba(239, 154, 102, 0.98);
}


.weapon-summary-card
.weapon-summary-specialist {
    font-size:
        clamp(
            1.05rem,
            2vw,
            1.4rem
        );

    line-height: 1.3;
}


.weapon-summary-player {
    color:
        rgba(239, 154, 102, 0.96);

    text-decoration: none;
}


.weapon-summary-player:hover {
    text-decoration: underline;
}


.weapon-summary-card p {
    margin:
        10px
        0
        0;

    color:
        rgba(232, 238, 242, 0.48);

    font-size: 0.78rem;
    line-height: 1.55;
}


/* =========================================================
   Panels
   ========================================================= */


.weapons-panel {
    margin-bottom: 22px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    background:
        rgba(8, 12, 15, 0.82);

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


.weapons-panel-heading {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;

    padding:
        22px
        24px
        18px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.065);
}


.weapons-panel h2,
.weapons-telemetry-note h2 {
    font-size:
        clamp(
            1.45rem,
            3vw,
            2.15rem
        );
}


.weapons-panel-count {
    flex: 0 0 auto;

    color:
        rgba(232, 238, 242, 0.44);

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

    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}


/* =========================================================
   Top Armoury
   ========================================================= */


.weapon-feature-grid {
    display: grid;

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

    gap: 1px;

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


.weapon-feature {
    min-width: 0;

    padding:
        20px;

    background:
        rgba(9, 14, 18, 0.98);
}


.weapon-feature-1 {
    background:
        linear-gradient(
            180deg,
            rgba(209, 106, 45, 0.095),
            rgba(9, 14, 18, 0.98) 52%
        );
}


.weapon-feature-head {
    display: flex;

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

    gap: 12px;

    margin-bottom: 16px;
}


.weapon-rank {
    display: inline-flex;

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

    min-width: 31px;
    min-height: 27px;

    border:
        1px solid
        rgba(255, 255, 255, 0.11);

    color:
        rgba(232, 238, 242, 0.64);

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

    font-size: 0.73rem;
    font-weight: 800;
}


.weapon-feature-1
.weapon-rank {
    border-color:
        rgba(239, 154, 102, 0.9);

    background:
        rgba(209, 106, 45, 0.16);

    color:
        rgba(255, 221, 197, 0.98);
}


.weapon-category {
    overflow: hidden;

    color:
        rgba(232, 238, 242, 0.37);

    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}


.weapon-feature h3 {
    min-height: 2.8em;

    margin:
        0
        0
        13px;

    color:
        rgba(244, 247, 249, 0.95);

    font-size:
        clamp(
            1rem,
            1.8vw,
            1.25rem
        );

    line-height: 1.3;
}


.weapon-feature-kills {
    margin-bottom: 12px;

    color:
        rgba(246, 248, 250, 0.97);

    font-size:
        clamp(
            1.35rem,
            2.4vw,
            1.9rem
        );

    font-weight: 800;

    font-variant-numeric:
        tabular-nums;
}


.weapon-feature-kills span {
    display: block;

    margin-top: 3px;

    color:
        rgba(232, 238, 242, 0.35);

    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}


.weapon-share-meter {
    display: block;

    width: 100%;
    height: 5px;

    margin:
        0
        0
        9px;

    border: 0;

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


.weapon-share-meter::-webkit-progress-bar {
    background:
        rgba(255, 255, 255, 0.055);
}


.weapon-share-meter::-webkit-progress-value {
    background:
        rgba(221, 126, 67, 0.82);
}


.weapon-share-meter::-moz-progress-bar {
    background:
        rgba(221, 126, 67, 0.82);
}


.weapon-feature-meta {
    display: flex;

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

    gap: 12px;

    color:
        rgba(232, 238, 242, 0.4);

    font-size: 0.68rem;

    font-variant-numeric:
        tabular-nums;
}


.weapon-feature-specialist {
    margin-top: 18px;
    padding-top: 15px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.06);
}


.weapon-meta-label {
    display: block;

    margin-bottom: 6px;

    color:
        rgba(232, 238, 242, 0.31);

    font-size: 0.59rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.weapon-specialist-link,
.weapon-table-specialist {
    color:
        rgba(239, 154, 102, 0.96);

    text-decoration: none;
}


.weapon-specialist-link {
    display: block;

    overflow-wrap: anywhere;

    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
}


.weapon-specialist-link:hover,
.weapon-table-specialist:hover {
    text-decoration: underline;
}


.weapon-specialist-kills {
    display: block;

    margin-top: 4px;

    color:
        rgba(232, 238, 242, 0.38);

    font-size: 0.67rem;

    font-variant-numeric:
        tabular-nums;
}


/* =========================================================
   Full Arsenal
   ========================================================= */


.weapons-scope-note {
    padding:
        15px
        24px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);

    background:
        rgba(209, 106, 45, 0.045);

    color:
        rgba(232, 238, 242, 0.57);

    font-size: 0.82rem;
    line-height: 1.6;
}


.weapons-scope-note strong {
    color:
        rgba(244, 247, 249, 0.92);
}


.weapons-scope-note span {
    margin-left: 6px;
}


.weapon-table-shell {
    width: 100%;
    overflow-x: auto;
}


.weapon-table {
    width: 100%;
    min-width: 980px;

    border-collapse: collapse;

    font-variant-numeric:
        tabular-nums;
}


.weapon-table caption {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip:
        rect(
            0,
            0,
            0,
            0
        );

    white-space: nowrap;

    border: 0;
}


.weapon-table th,
.weapon-table td {
    padding:
        12px
        14px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.055);

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


.weapon-table th {
    background:
        rgba(13, 19, 23, 0.98);

    color:
        rgba(232, 238, 242, 0.48);

    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.weapon-table th:nth-child(2),
.weapon-table td:nth-child(2),
.weapon-table th:nth-child(3),
.weapon-table td:nth-child(3),
.weapon-table th:nth-child(7),
.weapon-table td:nth-child(7) {
    text-align: left;
}


.weapon-table tbody tr {
    background:
        rgba(255, 255, 255, 0.008);

    transition:
        background 100ms ease;
}


.weapon-table tbody tr:nth-child(even) {
    background:
        rgba(255, 255, 255, 0.018);
}


.weapon-table tbody tr:hover {
    background:
        rgba(209, 106, 45, 0.065);
}


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


.weapon-table-rank {
    width: 62px;

    text-align: center !important;
}


.weapon-table-rank span {
    display: inline-flex;

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

    min-width: 31px;
    min-height: 27px;

    border:
        1px solid
        rgba(255, 255, 255, 0.1);

    color:
        rgba(232, 238, 242, 0.64);

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

    font-size: 0.73rem;
    font-weight: 800;
}


.weapon-table-top-1
.weapon-table-rank span {
    border-color:
        rgba(239, 154, 102, 0.92);

    background:
        rgba(209, 106, 45, 0.17);

    color:
        rgba(255, 221, 197, 0.98);
}


.weapon-table-top-2
.weapon-table-rank span,
.weapon-table-top-3
.weapon-table-rank span {
    border-color:
        rgba(209, 106, 45, 0.42);

    background:
        rgba(209, 106, 45, 0.065);

    color:
        rgba(239, 191, 160, 0.9);
}


.weapon-table-name strong {
    display: block;

    color:
        rgba(241, 245, 247, 0.9);

    font-size: 0.82rem;
}


.weapon-table-name span {
    display: block;

    margin-top: 2px;

    color:
        rgba(232, 238, 242, 0.31);

    font-size: 0.64rem;
}


.weapon-table-category {
    color:
        rgba(232, 238, 242, 0.46);

    font-size: 0.74rem;
}


.weapon-table-number {
    color:
        rgba(232, 238, 242, 0.68);

    font-size: 0.76rem;
}


.weapon-table-specialist {
    font-size: 0.76rem;
}


/* =========================================================
   Telemetry note
   ========================================================= */


.weapons-telemetry-note {
    display: grid;

    grid-template-columns:
        minmax(0, 0.75fr)
        minmax(0, 1.25fr);

    gap: 34px;

    margin-bottom: 30px;

    padding:
        22px
        24px;

    border:
        1px solid
        rgba(209, 106, 45, 0.22);

    background:
        linear-gradient(
            90deg,
            rgba(209, 106, 45, 0.055),
            rgba(8, 12, 15, 0.72) 52%
        );
}


.weapons-telemetry-note p {
    align-self: center;

    margin: 0;

    color:
        rgba(232, 238, 242, 0.54);

    font-size: 0.82rem;
    line-height: 1.7;
}


/* =========================================================
   Responsive
   ========================================================= */


@media (max-width: 1100px) {

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


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

}


@media (max-width: 760px) {

    .weapons-hero {
        min-height: 230px;

        padding:
            26px
            22px;

        background-position:
            center,
            center,
            58% 52%;

        background-size:
            auto,
            auto,
            cover;
    }


    .weapon-summary-grid,
    .weapon-feature-grid,
    .weapons-telemetry-note {
        grid-template-columns:
            1fr;
    }


    .weapons-panel-heading {
        align-items: flex-start;
        flex-direction: column;
    }


    .weapons-scope-note span {
        display: block;

        margin:
            5px
            0
            0;
    }


    .weapon-table {
        min-width: 900px;
    }


    .weapons-telemetry-note {
        gap: 14px;
    }

}