/* =========================================================
   HAVEN v3 PLAYERS DIRECTORY v0.1
   ========================================================= */

body.players-page-v3 {
    background:
        radial-gradient(
            ellipse at 88% 14%,
            rgba(190, 88, 31, .09) 0%,
            rgba(128, 58, 28, .025) 30%,
            transparent 56%
        ),
        radial-gradient(
            ellipse at 10% 52%,
            rgba(70, 105, 129, .10) 0%,
            rgba(42, 65, 81, .03) 36%,
            transparent 64%
        ),
        linear-gradient(
            180deg,
            #070b0f 0%,
            #0b1116 42%,
            #080d11 100%
        );
}

.players-page-v3 .page-main {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.players-page-v3 .page-main::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(142, 166, 182, .027) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(142, 166, 182, .027) 1px,
            transparent 1px
        );

    background-size:
        64px 64px;

    mask-image:
        linear-gradient(
            180deg,
            transparent 0%,
            black 8%,
            black 91%,
            transparent 100%
        );
}

.players-page-v3 .page-shell {
    position: relative;
    z-index: 1;
}

.players-intro {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    display: flex;
    min-height: 270px;

    margin-top: 32px;

    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);
}

.players-intro::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)
        );
}

.players-intro > * {
    position: relative;
    z-index: 1;
}

.players-intro h1 {
    margin:
        7px 0 16px;

    max-width: 760px;

    font-size:
        clamp(
            2rem,
            5vw,
            3.75rem
        );

    line-height: .98;

    letter-spacing:
        -0.035em;
}

.players-lead {
    max-width: 760px;
    margin: 0;

    color: var(--haven-text-soft);
    font-size: 1rem;
    line-height: 1.7;
}

.haven-personnel-grid {
    display: grid;

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

    gap: 15px;
}

.haven-person-card {
    min-width: 0;
    padding: 18px;

    position: relative;
    overflow: hidden;

    border:
        1px solid rgba(
            209,
            104,
            42,
            .34
        );

    background:
        linear-gradient(
            155deg,
            rgba(28, 31, 34, .98),
            rgba(12, 17, 21, .98)
        );

    box-shadow:
        0 18px 40px
        rgba(0, 0, 0, .21);
}

.haven-person-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        var(--haven-accent);
}

.haven-person-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

.haven-person-identity {
    min-width: 0;
}

.directory-avatar {
    display: block;

    width: 52px;
    height: 52px;

    flex: 0 0 auto;

    object-fit: cover;

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

    background:
        #0b0f12;
}

.directory-avatar.featured {
    width: 84px;
    height: 84px;
}

.avatar-link {
    flex: 0 0 auto;
}

.directory-player-name {
    color:
        var(--haven-text);

    font-weight: 700;
    text-decoration: none;

    overflow-wrap: anywhere;
}

.directory-player-name:hover {
    color:
        var(--haven-accent);
}

.directory-role {
    margin-top: 5px;

    color:
        var(--haven-muted);

    font-size: .7rem;
}

.classification-chip {
    width: max-content;
    margin-bottom: 7px;
    padding: 3px 7px;

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

    color:
        var(--haven-muted);

    font-family:
        var(--haven-mono);

    font-size: .58rem;

    letter-spacing: .08em;

    text-transform: uppercase;
}

.classification-chip.haven {
    border-color:
        rgba(
            209,
            104,
            42,
            .55
        );

    color:
        var(--haven-accent);

    background:
        rgba(
            209,
            104,
            42,
            .07
        );
}

.featured-stats {
    margin: 18px 0;

    display: grid;

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

    gap: 6px;
}

.featured-stats div {
    min-width: 0;

    padding: 8px 7px;

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

    background:
        rgba(
            255,
            255,
            255,
            .018
        );
}

.featured-stats dt {
    color:
        var(--haven-muted);

    font-size: .55rem;
    text-transform: uppercase;
}

.featured-stats dd {
    margin: 5px 0 0;

    color:
        var(--haven-text);

    font-family:
        var(--haven-mono);

    font-size: .82rem;
    font-weight: 700;
}

.directory-controls {
    margin-bottom: 14px;
    padding: 14px;

    display: grid;

    grid-template-columns:
        minmax(220px, 1fr)
        minmax(220px, .55fr)
        auto;

    align-items: end;

    gap: 12px;

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

    background:
        rgba(
            13,
            18,
            22,
            .91
        );
}

.directory-search,
.directory-sort {
    display: grid;
    gap: 6px;
}

.directory-search span,
.directory-sort span {
    color:
        var(--haven-muted);

    font-family:
        var(--haven-mono);

    font-size: .62rem;

    letter-spacing: .07em;

    text-transform: uppercase;
}

.directory-search input,
.directory-sort select {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;

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

    color:
        var(--haven-text);

    background:
        #090e12;

    font: inherit;
}

.directory-search input:focus,
.directory-sort select:focus {
    outline:
        2px solid
        rgba(
            209,
            104,
            42,
            .4
        );

    outline-offset: 1px;
}

.directory-result-count {
    min-width: 150px;
    padding-bottom: 11px;

    color:
        var(--haven-muted);

    font-size: .72rem;
    text-align: right;
}

.directory-result-count strong {
    color:
        var(--haven-text);
}

.directory-table-shell {
    background:
        rgba(
            9,
            13,
            16,
            .90
        );

    box-shadow:
        0 22px 50px
        rgba(0, 0, 0, .20);
}

.directory-table {
    min-width: 1040px;
}

.directory-table tbody tr {
    transition:
        background-color .12s ease;
}

.directory-table tbody tr:hover {
    background:
        rgba(
            255,
            255,
            255,
            .025
        );
}

.directory-table tbody tr[
    data-classification="haven"
] {
    background:
        rgba(
            209,
            104,
            42,
            .035
        );
}

.directory-identity-cell {
    min-width: 280px;
}

.directory-identity {
    display: flex;
    align-items: center;
    gap: 12px;
}

.directory-name-stack {
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.directory-name-stack .classification-chip {
    margin:
        5px 0 0;
}

.directory-last-seen {
    min-width: 145px;

    color:
        var(--haven-muted);

    font-size: .72rem;

    white-space: nowrap;
}

.directory-actions {
    white-space: nowrap;
}

.directory-empty {
    padding: 28px;

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

    color:
        var(--haven-muted);

    text-align: center;
}

.directory-notice {
    padding: 24px 26px;

    border:
        1px solid
        rgba(
            209,
            104,
            42,
            .35
        );

    background:
        linear-gradient(
            90deg,
            rgba(
                209,
                104,
                42,
                .06
            ),
            rgba(
                13,
                18,
                22,
                .94
            )
            34%
        );
}

.directory-notice h2 {
    margin:
        0 0 10px;
}

.directory-notice p {
    max-width: 920px;
    margin: 0;

    color:
        var(--haven-text-soft);

    line-height: 1.7;
}

.text-link {
    color:
        var(--haven-accent);

    font-family:
        var(--haven-mono);

    font-size: .69rem;

    letter-spacing: .04em;

    text-decoration: none;

    text-transform: uppercase;
}

.text-link:hover {
    color:
        var(--haven-accent-hot);
}

@media (max-width: 1180px) {

    .haven-personnel-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 820px) {

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

    .directory-controls {
        grid-template-columns:
            1fr 1fr;
    }

    .directory-result-count {
        grid-column:
            1 / -1;

        padding-bottom: 0;

        text-align: left;
    }
}

@media (max-width: 580px) {

    .players-page-v3 .page-main::before {
        background-size:
            48px 48px;
    }

    .haven-personnel-grid,
    .directory-controls {
        grid-template-columns: 1fr;
    }

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

    .directory-result-count {
        grid-column: auto;
    }
}

/* v0.1 alignment candidate 2
   Equalises the desktop HAVEN personnel identity zone. */
.haven-person-top {
    min-height: 124px;
}


/* =========================================================
   Players Hero v0.2
   Shared major-page hero rhythm
   ========================================================= */

@media (max-width: 760px) {

    .players-intro {
        min-height: 230px;

        padding:
            26px
            22px;

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

        background-size:
            auto,
            auto,
            cover;
    }

}