#player-info-modal {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

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

    background:
        rgba(0, 0, 0, 0.82);

    backdrop-filter:
        blur(7px);
}

.player-info-modal-box {

    position: relative;

    width:
        min(
            720px,
            calc(100vw - 40px)
        );

    max-height:
        min(
            760px,
            calc(100vh - 50px)
        );

    padding: 0;

    overflow: hidden;

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

    border-left:
        3px solid
        var(
            --player-info-accent
        );

    background:
        linear-gradient(
            145deg,
            rgba(14, 18, 28, 0.99),
            rgba(5, 7, 12, 0.99)
        );

    box-shadow:
        0 0 40px
        rgba(0, 0, 0, 0.75),
        inset 0 0 30px
        rgba(255, 255, 255, 0.018);
}

.player-info-header {

    position: relative;

    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    padding:
        22px 24px 18px;

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

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

.player-info-header::after {

    content: "";

    position: absolute;

    bottom: -1px;
    left: 24px;

    width: 100px;
    height: 2px;

    background:
        var(
            --player-info-accent
        );

    box-shadow:
        0 0 9px
        var(
            --player-info-glow
        );
}

.player-info-kicker {

    margin-bottom: 7px;

    color:
        var(
            --player-info-accent
        );

    font-size: 0.66rem;

    font-weight: 700;

    letter-spacing: 0.2em;

    text-transform: uppercase;
}

.player-info-header h1 {

    margin: 0;

    color:
        #f1f2f3;

    font-size: 1.35rem;

    letter-spacing: 0.1em;
}

#player-info-close-x {

    width: 36px;
    height: 36px;

    margin:
        -4px -5px 0 15px;

    padding: 0;

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

    background:
        rgba(0, 0, 0, 0.3);

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

    font-size: 1.3rem;

    line-height: 1;

    cursor: pointer;
}

#player-info-close-x:hover {

    border-color:
        var(
            --player-info-accent
        );

    color:
        var(
            --player-info-accent
        );

    background:
        var(
            --player-info-soft
        );
}

.player-info-body {

    max-height:
        min(
            560px,
            calc(100vh - 230px)
        );

    padding:
        22px 26px;

    overflow-y: auto;
}

.player-info-body h2 {

    margin:
        22px 0 7px;

    padding-left: 10px;

    border-left:
        2px solid
        var(
            --player-info-accent
        );

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

    font-size: 0.8rem;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}

.player-info-body h2:first-of-type {

    margin-top: 18px;
}

.player-info-body p {

    margin:
        0 0 12px;

    color:
        rgba(
            225,
            228,
            232,
            0.76
        );

    font-size: 0.84rem;

    line-height: 1.6;
}

.player-info-warning {

    margin-top: 24px;

    padding:
        13px 15px;

    border:
        1px solid
        var(
            --player-info-border
        );

    border-left:
        3px solid
        var(
            --player-info-accent
        );

    background:
        var(
            --player-info-soft
        );

    color:
        rgba(
            240,
            240,
            240,
            0.8
        );

    font-size: 0.76rem;

    line-height: 1.5;

    letter-spacing: 0.04em;
}

#player-info-close-btn {

    display: block;

    width:
        calc(100% - 48px);

    margin:
        0 24px 22px;

    padding: 11px;

    border:
        1px solid
        var(
            --player-info-border
        );

    background:
        var(
            --player-info-soft
        );

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

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    cursor: pointer;
}

#player-info-close-btn:hover {

    border-color:
        var(
            --player-info-accent
        );

    color:
        #ffffff;

    box-shadow:
        0 0 14px
        var(
            --player-info-glow
        );
}