#rank-mode-label {
    color: var(--white);

    font-size: 0.85rem;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    text-align: center;

    margin-bottom: 0.35rem;
}

#rank-mode-toggle {
    font-size: 0.7rem;

    padding: 0.35rem 0.6rem;

    margin: 0.4rem auto;

    display: block;

    cursor: pointer;
}

#rank-card,
#match-summary-card {
    background: rgba(0, 0, 0, 0.32);

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

    padding: 14px;

    box-shadow:
        0 0 12px rgba(255, 255, 255, 0.05);
}

#online-status-card {
    position: relative;
    overflow: hidden;

    padding:
        16px 18px 15px;

    background:
        linear-gradient(
            145deg,
            rgba(24, 27, 32, 0.94),
            rgba(8, 9, 11, 0.96)
        );

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

    border-left:
        3px solid rgba(255, 59, 59, 0.82);

    box-shadow:
        inset 0 0 18px rgba(255, 255, 255, 0.025),
        0 0 18px rgba(0, 0, 0, 0.42);

    clip-path:
        polygon(
            0 0,
            calc(100% - 12px) 0,
            100% 12px,
            100% 100%,
            12px 100%,
            0 calc(100% - 12px)
        );
}

#online-status-card::before {
    content: "NETWORK STATUS";

    display: block;

    margin-bottom: 11px;
    padding-bottom: 7px;

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

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

    font-size: 0.67rem;
    font-weight: 700;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}

#online-status-card::after {
    content: "";

    position: absolute;

    top: 0;
    right: 12px;

    width: 48px;
    height: 2px;

    background:
        rgba(255, 59, 59, 0.9);

    box-shadow:
        0 0 8px rgba(255, 59, 59, 0.45);

    pointer-events: none;
}

#online-status-card
#online-status-text {
    margin: 0;

    color: #f0f1f2;

    font-size: 0.88rem;
    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

#online-status-card
#online-status-detail {
    margin-top: 6px;

    color:
        rgba(220, 223, 227, 0.58);

    font-size: 0.74rem;

    letter-spacing: 0.035em;

    line-height: 1.4;
}

#rank-icon-container {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

#rank-icon {
    width: 130px;
    height: 130px;
    object-fit: contain;
}

#rank-name,
#rank-rating,
#rank-progress-text,
#rank-record {
    text-align: center;
    margin-bottom: 7px;
}

#rank-name {
    color: var(--red);
    font-weight: bold;
    letter-spacing: 0.08em;
}

#rank-progress-container {
    height: 10px;

    background: rgba(255, 255, 255, 0.1);

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

    margin-bottom: 7px;
}

#rank-progress-bar {
    height: 100%;
    width: 0%;

    background: var(--red);
}

.match-summary-row {
    display: flex;
    justify-content: space-between;

    margin-bottom: 8px;

    font-size: 0.8rem;
}

.match-summary-row span {
    color: var(--muted);
}

.match-summary-row strong {
    color: var(--white);
}

#summary-lock-status {
    margin-top: 12px;

    padding-top: 8px;

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

    color: var(--green);

    text-align: center;

    font-size: 0.75rem;

    letter-spacing: 0.08em;
}

#move-history {
    max-height: 260px;

    overflow-y: auto;

    font-size: 0.78rem;
}

.move-history-entry {
    padding: 6px 4px;

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

    color: var(--text);
}

#system-error-modal {
    position: fixed;
    inset: 0;

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

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

    z-index: 9999;
}

.system-error-content {
    width: min(420px, 90vw);

    background: #101318;

    border:
        1px solid rgba(255, 63, 79, 0.55);

    padding: 24px;

    text-align: center;

    box-shadow:
        0 0 30px rgba(255, 63, 79, 0.3);
}

.system-error-content h1 {
    color: var(--red);

    margin-bottom: 14px;
}

.system-error-content p {
    margin-bottom: 18px;
}

.selected {
    border-color: #ff3b3b !important;
    background: rgba(255, 59, 59, 0.18) !important;
    box-shadow: 0 0 14px rgba(255, 59, 59, 0.55) !important;
}

.modal-backdrop {
    position: fixed;
    inset: 0;

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

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

    z-index: 9999;
}

.k3-modal {
    width: min(520px, 92vw);

    padding: 2rem;

    border: 1px solid rgba(255, 60, 60, 0.75);

    background:
        linear-gradient(
            145deg,
            rgba(10, 12, 18, 0.98),
            rgba(35, 10, 15, 0.96)
        );

    box-shadow:
        0 0 25px rgba(255, 60, 60, 0.35),
        inset 0 0 20px rgba(255, 255, 255, 0.04);

    color: #f5f5f5;

    text-align: center;
}

.k3-modal h1 {
    margin-top: 0;

    color: #ffffff;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.endgame-rank-block {
    margin: 1rem auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

#endgame-rank-icon {
    width: 86px;
    height: 86px;

    object-fit: contain;

    filter:
        drop-shadow(0 0 12px rgba(255, 255, 255, 0.45));
}

#endgame-rank-name {
    color: #ff5555;

    font-weight: bold;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

#endgame-mode,
#endgame-rating,
#endgame-delta {
    margin: 0.4rem 0;

    color: #ddd;
}

.modal-button-row {
    margin-top: 1.4rem;

    display: flex;
    justify-content: center;
    gap: 0.6rem;

    flex-wrap: wrap;
}

.k3-modal button {
    padding: 0.55rem 0.9rem;

    border: 1px solid rgba(255, 80, 80, 0.8);

    background: rgba(255, 60, 60, 0.12);

    color: #ffffff;

    cursor: pointer;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}

.k3-modal button:hover {
    background: rgba(255, 60, 60, 0.28);

    box-shadow: 0 0 12px rgba(255, 60, 60, 0.45);
}

button:disabled {

    opacity: 0.40;

    cursor: not-allowed;

    pointer-events: none;

    box-shadow: none;

    text-shadow: none;
}

.analysis-grade {
    margin: 1rem 0;

    font-size: 1.3rem;

    color: #00f5ff;
}

.analysis-row {
    display: flex;
    justify-content: space-between;

    padding: 0.45rem 0;

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

.history-modal-box {
    max-height: 82vh;
}

#history-modal-content {
    max-height: 58vh;

    overflow-y: auto;

    text-align: left;

    padding: 0.75rem;

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

    background: rgba(0, 0, 0, 0.35);
}

.history-modal-row {
    padding: 0.25rem 0;

    color: #e8e8e8;

    font-size: 0.9rem;
}

.card-choice-modal-box {
    width:
        min(
            1120px,
            96vw
        );

    max-height:
        94vh;

    overflow-y:
        auto;
}

#card-choice-row {
    margin:
        1.6rem 0
        1.9rem;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        clamp(
            1rem,
            2.4vw,
            2rem
        );

    min-height:
        380px;
}

.card-choice-card {
    width:
        clamp(
            190px,
            20vw,
            245px
        );

    height:
        auto;

    max-height:
        360px;

    aspect-ratio:
        165 / 245;

    object-fit:
        contain;

    flex:
        0 1 auto;

    cursor:
        pointer;

    border:
        none;

    background:
        transparent;

    transition:
        transform 0.22s ease,
        filter 0.22s ease,
        opacity 0.22s ease;

    user-select:
        none;
}

.card-choice-card:hover {
    transform:
        translateY(-10px)
        scale(1.055);

    filter:
        drop-shadow(
            0 0 15px
            rgba(255, 60, 60, 0.78)
        )
        drop-shadow(
            0 0 26px
            rgba(0, 245, 255, 0.42)
        );
}

.card-choice-card.revealed {
    width:
        clamp(
            220px,
            25vw,
            290px
        );

    max-height:
        420px;

    transform:
        scale(1.04);

    filter:
        drop-shadow(
            0 0 20px
            rgba(0, 245, 255, 0.88)
        )
        drop-shadow(
            0 0 34px
            rgba(255, 60, 60, 0.4)
        );
}

#card-intermission-countdown {
    margin:
        0.4rem auto
        1.2rem;

    padding:
        0.8rem
        1.4rem;

    width:
        fit-content;

    border:
        1px solid
        rgba(
            255,
            59,
            59,
            0.72
        );

    background:
        rgba(
            255,
            59,
            59,
            0.07
        );

    color:
        #f1f1f1;

    font-size:
        clamp(
            0.95rem,
            1.4vw,
            1.2rem
        );

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-align:
        center;

    text-transform:
        uppercase;

    box-shadow:
        0 0 16px
        rgba(
            255,
            59,
            59,
            0.18
        );

    text-shadow:
        0 0 8px
        rgba(
            255,
            59,
            59,
            0.4
        );
}

#card-choice-continue-btn {
    margin-top:
        0.9rem;
}

@media (max-width: 760px) {
    .card-choice-modal-box {
        width:
            96vw;
    }

    #card-choice-row {
        gap:
            0.55rem;

        min-height:
            260px;

        margin:
            1rem 0
            1.3rem;
    }

    .card-choice-card {
        width:
            min(
                28vw,
                150px
            );
    }

    .card-choice-card.revealed {
        width:
            min(
                58vw,
                260px
            );
    }
}

#resume-match-modal {
    position:
        fixed;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    z-index:
        10000;
}

#resume-match-modal.hidden {
    display:
        none;
}

#resume-match-content {
    width:
        min(520px, 90vw);

    padding:
        28px;

    border:
        1px solid #ff3b3b;

    background:
        #080b10;

    text-align:
        center;
}

#resume-match-content h1 {
    margin:
        0 0 18px;

    color:
        #ff5252;
}

#resume-match-content p {
    margin:
        0 0 24px;
}

#resume-match-content button {
    margin:
        6px;

    padding:
        11px 18px;
}

#resume-surrender-btn {
    border-color:
        #ff3b3b;

    color:
        #ff6262;
}

.card-resolution-entry {
    width:
        min(
            320px,
            42vw
        );

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        0.7rem;
}

.card-resolution-label {
    color:
        #00f5ff;

    font-size:
        0.9rem;

    letter-spacing:
        0.08em;
}

.card-resolution-name {
    color:
        #ffffff;

    font-size:
        1rem;

    text-align:
        center;
}

.card-resolution-description {
    margin:
        0;

    max-width:
        300px;

    color:
        #d8e7ef;

    font-size:
        0.86rem;

    line-height:
        1.4;

    text-align:
        center;
}

#account-required-modal {
    position:
        fixed;

    inset:
        0;

    z-index:
        9999;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

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

    backdrop-filter:
        blur(7px);
}

#account-required-modal.hidden {
    display:
        none;
}

#account-required-content {
    position:
        relative;

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

    padding:
        32px;

    border:
        1px solid
        rgba(
            255,
            59,
            59,
            0.78
        );

    background:
        linear-gradient(
            180deg,
            rgba(
                16,
                19,
                24,
                0.99
            ),
            rgba(
                5,
                6,
                8,
                0.99
            )
        );

    box-shadow:
        0 0 30px
        rgba(
            255,
            59,
            59,
            0.24
        );

    text-align:
        center;
}

#account-required-content h1 {
    color:
        var(--red);

    letter-spacing:
        0.12em;

    text-shadow:
        0 0 12px
        rgba(
            255,
            59,
            59,
            0.42
        );
}

#account-required-content p {
    color:
        rgba(
            235,
            238,
            242,
            0.88
        );

    line-height:
        1.5;

    margin:
        20px 0;
}

#account-required-close-btn {
    position:
        absolute;

    top:
        10px;

    right:
        12px;

    width:
        34px;

    height:
        34px;
}

#account-required-ok-btn {
    border-color:
        var(--red);

    color:
        var(--red);

    background:
        rgba(
            255,
            59,
            59,
            0.08
        );
}

.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
        rgba(255, 59, 59, 0.9);

    background:
        linear-gradient(
            145deg,
            rgba(25, 28, 33, 0.99),
            rgba(7, 8, 10, 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:
        #ff3b3b;

    box-shadow:
        0 0 9px
        rgba(255, 59, 59, 0.55);
}

.player-info-kicker {
    margin-bottom: 7px;

    color:
        rgba(255, 59, 59, 0.75);

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

#player-info-close-x:hover {
    border-color:
        rgba(255, 59, 59, 0.7);

    color:
        #ff3b3b;

    background:
        rgba(255, 59, 59, 0.07);
}

.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
        #ff3b3b;

    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.72);

    font-size: 0.84rem;

    line-height: 1.6;
}

.player-info-warning {
    margin-top: 24px;

    padding:
        13px 15px;

    border:
        1px solid
        rgba(255, 59, 59, 0.28);

    border-left:
        3px solid
        #ff3b3b;

    background:
        rgba(255, 59, 59, 0.045);

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

    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
        rgba(255, 59, 59, 0.5);

    background:
        rgba(255, 59, 59, 0.06);

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

    font-size: 0.75rem;
    font-weight: 700;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}

#player-info-close-btn:hover {
    border-color:
        #ff3b3b;

    background:
        rgba(255, 59, 59, 0.12);

    color: #ffffff;

    box-shadow:
        0 0 14px
        rgba(255, 59, 59, 0.16);
}

/* Responsive Design - Cards */
/* Tablets & Small Screens */
@media (max-width: 1100px) {

    .card-choice-modal-box {
        width:
            min(
                94vw,
                900px
            );

        padding:
            1.2rem;
    }

    #card-choice-row {
        gap:
            clamp(
                0.7rem,
                1.8vw,
                1.2rem
            );

        min-height:
            300px;

        margin:
            1rem 0
            1.3rem;
    }

    .card-choice-card {
        width:
            clamp(
                145px,
                22vw,
                190px
            );

        max-height:
            290px;
    }

    .card-choice-card.revealed {
        width:
            clamp(
                165px,
                25vw,
                215px
            );

        max-height:
            320px;
    }
}

/* Portrait Phones */
@media (max-width: 800px) {

    .card-choice-modal-box {
        width: 96vw;

        max-height: 96svh;

        padding:
            0.8rem 0.7rem;
    }

    #card-choice-row {
        flex-direction: column;

        justify-content: flex-start;

        gap: 0.8rem;

        min-height: 0;

        margin:
            0.8rem 0
            1rem;
    }

    .card-choice-card {
        width:
            min(
                46vw,
                165px
            );

        max-height: 245px;
    }

    .card-choice-card.revealed {
        width:
            min(
                50vw,
                180px
            );

        max-height: 270px;

        transform: none;
    }

    .card-choice-card:hover {
        transform: none;
    }
}

/* Online PvP Modal */

.online-pvp-modal-box {
    width:
        min(
            560px,
            92vw
        );
}


#online-pvp-content > p {
    margin:
        0.4rem 0
        1.35rem;

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

    line-height:
        1.5;
}


#online-pvp-options {
    display:
        grid;

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

    gap:
        0.7rem;

    margin:
        1.2rem 0
        1.35rem;
}


#online-pvp-options
.online-pvp-option {
    min-height:
        58px;

    padding:
        0.7rem
        0.8rem;

    border:
        1px solid
        rgba(
            255,
            80,
            80,
            0.45
        );

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

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

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    line-height:
        1.35;

    text-transform:
        uppercase;

    transition:
        border-color 120ms ease,
        background 120ms ease,
        box-shadow 120ms ease,
        transform 120ms ease;
}


#online-pvp-options
.online-pvp-option:hover {
    border-color:
        rgba(
            255,
            80,
            80,
            0.9
        );

    background:
        rgba(
            255,
            60,
            60,
            0.14
        );

    box-shadow:
        0 0 14px
        rgba(
            255,
            60,
            60,
            0.18
        );

    transform:
        translateY(
            -1px
        );
}


#online-pvp-options
.online-pvp-option
.selected-online-option,

#online-pvp-options
.selected-online-option {
    border-color:
        #ff3b3b;

    background:
        rgba(
            255,
            59,
            59,
            0.22
        );

    color:
        #ffffff;

    box-shadow:
        0 0 18px
        rgba(
            255,
            59,
            59,
            0.36
        );
}


.online-pvp-action-row {
    display:
        flex;

    justify-content:
        center;

    gap:
        0.7rem;

    margin-top:
        0.75rem;
}


.party-code-input {
    display:
        block;

    width:
        min(
            280px,
            90%
        );

    margin:
        1.25rem auto;

    padding:
        0.75rem
        0.9rem;

    border:
        1px solid
        rgba(
            255,
            80,
            80,
            0.65
        );

    outline:
        none;

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

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        1.25rem;

    font-weight:
        700;

    letter-spacing:
        0.28em;

    text-align:
        center;

    text-transform:
        uppercase;

    box-sizing:
        border-box;
}


.party-code-input:focus {
    border-color:
        #ff3b3b;

    box-shadow:
        0 0 16px
        rgba(
            255,
            59,
            59,
            0.3
        );
}


.party-code-display {
    width:
        fit-content;

    margin:
        1.3rem auto;

    padding:
        0.75rem
        1.2rem;

    border:
        1px solid
        rgba(
            255,
            80,
            80,
            0.75
        );

    background:
        rgba(
            255,
            59,
            59,
            0.08
        );

    color:
        #ffffff;

    font-size:
        1.65rem;

    font-weight:
        800;

    letter-spacing:
        0.22em;

    box-shadow:
        0 0 18px
        rgba(
            255,
            59,
            59,
            0.18
        );
}


.waiting-text {
    color:
        rgba(
            230,
            232,
            235,
            0.72
        );

    font-size:
        0.8rem;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;
}


.matchmaking-spinner {
    width:
        38px;

    height:
        38px;

    margin:
        1.3rem auto;

    border:
        3px solid
        rgba(
            255,
            255,
            255,
            0.12
        );

    border-top-color:
        #ff3b3b;

    border-radius:
        50%;

    animation:
        k3pesh-matchmaking-spin
        0.8s
        linear
        infinite;

    box-shadow:
        0 0 14px
        rgba(
            255,
            59,
            59,
            0.15
        );
}


@keyframes
k3pesh-matchmaking-spin {

    from {
        transform:
            rotate(
                0deg
            );
    }

    to {
        transform:
            rotate(
                360deg
            );
    }
}


#match-countdown-text {
    margin-top:
        1rem;

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

    font-size:
        0.85rem;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


#online-pvp-back-btn,
#confirm-join-party-btn,
#create-party-btn,
#join-party-btn,
#cancel-matchmaking-btn,
#copy-party-code-btn {
    margin:
        0.4rem;
}


@media
(max-width: 600px) {

    #online-pvp-options {
        grid-template-columns:
            1fr;
    }


    .online-pvp-action-row {
        flex-direction:
            column;
    }


    .party-code-display {
        font-size:
            1.35rem;

        letter-spacing:
            0.16em;
    }
}

/* K3PESH OPPONENT PROFILE */

#view-opponent-profile-btn {

    width: 100%;

    margin-top: 0.75rem;

    padding:
        0.65rem
        0.8rem;

    border:
        1px solid
        rgba(
            255,
            70,
            70,
            0.72
        );

    background:
        linear-gradient(
            145deg,
            rgba(
                70,
                10,
                16,
                0.34
            ),
            rgba(
                20,
                5,
                8,
                0.62
            )
        );

    color:
        #ffb0b0;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    cursor:
        pointer;

    text-transform:
        uppercase;
}


#view-opponent-profile-btn:hover {

    color:
        #ffffff;

    background:
        rgba(
            255,
            60,
            60,
            0.20
        );

    box-shadow:
        0 0 14px
        rgba(
            255,
            60,
            60,
            0.45
        );
}


#opponent-profile-content {

    position:
        relative;

    width:
        min(
            600px,
            92vw
        );
}


#opponent-profile-close-btn {

    position:
        absolute;

    top:
        12px;

    right:
        12px;

    width:
        36px;

    height:
        36px;

    padding:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


#opponent-profile-identity {

    margin:
        1.2rem
        0
        1.6rem;

    padding:
        0.8rem;

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

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

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

    line-height:
        1.8;

    letter-spacing:
        0.04em;
}


#opponent-rank-card {

    display:
        grid;

    grid-template-columns:
        54px
        1fr
        54px;

    align-items:
        center;

    gap:
        1rem;
}


#opponent-rank-display {

    min-width:
        0;
}


#opponent-rank-title {

    margin-bottom:
        0.8rem;

    color:
        #ff8080;

    letter-spacing:
        0.10em;

    text-transform:
        uppercase;
}


#opponent-rank-img {

    width:
        150px;

    max-width:
        70%;

    height:
        150px;

    object-fit:
        contain;

    filter:
        drop-shadow(
            0 0 15px
            rgba(
                255,
                70,
                70,
                0.48
            )
        );
}


#opponent-rank-name {

    margin-top:
        0.7rem;

    color:
        #ff6060;

    font-size:
        1.25rem;

    font-weight:
        700;

    letter-spacing:
        0.10em;

    text-transform:
        uppercase;
}


#opponent-rank-rating,
#opponent-rank-record {

    margin-top:
        0.45rem;

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

    letter-spacing:
        0.05em;
}


#opponent-rank-prev-btn,
#opponent-rank-next-btn {

    width:
        46px;

    height:
        46px;

    padding:
        0;
}