/* ======================================================================
   SHADOWSKINGS — PLAYER INFO PANEL
   DESKTOP + TABLET + MOBILE
   MATCHES WORLD MAP / SHADOWSKINGS UI
   ====================================================================== */


/* ======================================================================
   PANEL
   ====================================================================== */

#player-info-panel {
    position: fixed;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%);

    width:
        min(420px, calc(100vw - 32px));

    max-height:
        min(760px, calc(100dvh - 40px));

    box-sizing:
        border-box;

    overflow-x:
        hidden;

    overflow-y:
        auto;

    background:
        radial-gradient(
            circle at top left,
            rgba(40, 20, 80, 0.98),
            rgba(10, 5, 25, 0.99)
        );

    border:
        1px solid #7b4bff;

    border-radius:
        10px;

    box-shadow:
        0 0 22px rgba(123, 75, 255, 0.7),
        0 0 8px rgba(0, 0, 0, 0.95);

    font-family:
        "Cinzel",
        "Trajan Pro",
        serif;

    font-size:
        12px;

    line-height:
        1.4;

    color:
        #e5d9ff;

    z-index:
        10050;

    display:
        none;
}


/* ======================================================================
   SCROLLBAR
   ====================================================================== */

#player-info-panel::-webkit-scrollbar {
    width:
        7px;
}


#player-info-panel::-webkit-scrollbar-track {
    background:
        rgba(5, 3, 12, 0.8);
}


#player-info-panel::-webkit-scrollbar-thumb {
    background:
        #50329a;

    border-radius:
        999px;

    border:
        1px solid #8f6bff;
}


#player-info-panel::-webkit-scrollbar-thumb:hover {
    background:
        #6847ba;
}


/* ======================================================================
   HEADER
   ====================================================================== */

#player-info-panel .player-info-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    padding:
        12px 14px;

    background:
        linear-gradient(
            to right,
            rgba(20, 10, 40, 0.98),
            rgba(59, 35, 117, 0.98),
            rgba(20, 10, 40, 0.98)
        );

    border-bottom:
        1px solid rgba(169, 139, 255, 0.55);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.35);
}


/* ======================================================================
   HEADER TITLE
   ====================================================================== */

#player-info-title {
    min-width:
        0;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        15px;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    color:
        #f3e8ff;

    text-shadow:
        0 0 7px #7b4bff;
}


/* ======================================================================
   CLOSE BUTTON
   ====================================================================== */

#player-info-panel .player-info-close-btn {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    width:
        30px;

    height:
        30px;

    padding:
        0;

    box-sizing:
        border-box;

    background:
        linear-gradient(
            to bottom,
            #3b2375,
            #241347
        );

    border:
        1px solid #a98bff;

    border-radius:
        6px;

    font-family:
        inherit;

    font-size:
        12px;

    font-weight:
        700;

    color:
        #f3e8ff;

    cursor:
        pointer;

    box-shadow:
        0 0 10px rgba(169, 139, 255, 0.6);

    transition:
        transform 0.1s ease,
        background 0.1s ease,
        box-shadow 0.1s ease;

    touch-action:
        manipulation;
}


#player-info-panel .player-info-close-btn:hover {
    transform:
        translateY(-1px);

    background:
        linear-gradient(
            to bottom,
            #50329a,
            #30185d
        );

    box-shadow:
        0 0 14px rgba(169, 139, 255, 0.9);
}


#player-info-panel .player-info-close-btn:active {
    transform:
        translateY(1px);
}


/* ======================================================================
   SECTIONS
   ====================================================================== */

#player-info-panel .player-info-section {
    margin:
        10px;

    padding:
        10px 12px;

    background:
        linear-gradient(
            135deg,
            rgba(25, 12, 50, 0.82),
            rgba(8, 4, 20, 0.88)
        );

    border:
        1px solid rgba(123, 75, 255, 0.38);

    border-radius:
        7px;

    box-shadow:
        inset 0 0 10px rgba(123, 75, 255, 0.08);
}


/* ======================================================================
   SECTION TITLES
   ====================================================================== */

#player-info-panel .player-info-section-title {
    margin:
        0 0 8px 0;

    padding-bottom:
        5px;

    border-bottom:
        1px solid rgba(180, 150, 255, 0.4);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    color:
        #f3e8ff;

    text-shadow:
        0 0 6px #7b4bff;
}


/* ======================================================================
   SUBTITLE
   ====================================================================== */

#player-info-panel .player-info-subtitle {
    margin:
        4px 0 7px 0;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;

    color:
        #c8b7f5;
}


/* ======================================================================
   INFORMATION ROWS
   ====================================================================== */

#player-info-panel .player-info-row {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        16px;

    min-height:
        20px;

    padding:
        3px 0;

    box-sizing:
        border-box;
}


#player-info-panel .player-info-row + .player-info-row {
    border-top:
        1px solid rgba(180, 150, 255, 0.08);
}


/* ======================================================================
   LABELS
   ====================================================================== */

#player-info-panel .player-info-label {
    flex:
        0 0 auto;

    color:
        #c8b7f5;

    font-weight:
        600;
}


/* ======================================================================
   VALUES
   ====================================================================== */

#player-info-panel .player-info-value {
    min-width:
        0;

    flex:
        1 1 auto;

    text-align:
        right;

    color:
        #f3e8ff;

    overflow-wrap:
        anywhere;

    text-shadow:
        0 0 3px rgba(123, 75, 255, 0.45);
}


/* ======================================================================
   ONLINE / OFFLINE STATUS
   ====================================================================== */

#player-info-status.player-online {
    color:
        #bfffc7;

    text-shadow:
        0 0 6px rgba(110, 255, 130, 0.75);
}


#player-info-status.player-offline {
    color:
        #c8b7f5;

    text-shadow:
        none;
}


/* ======================================================================
   ACHIEVEMENT DESCRIPTION
   ====================================================================== */

#player-info-panel .player-info-description {
    margin-top:
        7px;

    padding:
        8px 9px;

    min-height:
        18px;

    box-sizing:
        border-box;

    background:
        rgba(5, 3, 12, 0.45);

    border:
        1px solid rgba(169, 139, 255, 0.18);

    border-radius:
        5px;

    color:
        #c8b7f5;

    font-size:
        10px;

    line-height:
        1.45;

    text-align:
        left;
}


#player-info-panel .player-info-description:empty {
    display:
        none;
}


/* ======================================================================
   ACTION SECTION
   ====================================================================== */

#player-info-panel .player-info-actions-section {
    display:
        grid;

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

    gap:
        8px;
}


#player-info-panel .player-info-actions-section
.player-info-section-title {
    grid-column:
        1 / -1;

    width:
        100%;

    box-sizing:
        border-box;
}


/* ======================================================================
   ACTION BUTTONS
   ====================================================================== */

#player-info-panel .player-info-action-btn {
    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    width:
        100%;

    min-width:
        0;

    min-height:
        38px;

    box-sizing:
        border-box;

    padding:
        7px 8px;

    background:
        linear-gradient(
            to bottom,
            #3b2375,
            #241347
        );

    border:
        1px solid #a98bff;

    border-radius:
        6px;

    font-family:
        inherit;

    font-size:
        9px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        0.045em;

    color:
        #f3e8ff;

    text-align:
        center;

    cursor:
        pointer;

    box-shadow:
        0 0 10px rgba(169, 139, 255, 0.7);

    transition:
        transform 0.1s ease,
        box-shadow 0.1s ease,
        background 0.1s ease;

    touch-action:
        manipulation;
}


#player-info-panel .player-info-action-btn:hover {
    transform:
        translateY(-1px);

    background:
        linear-gradient(
            to bottom,
            #50329a,
            #30185d
        );

    box-shadow:
        0 0 14px rgba(169, 139, 255, 0.9);
}


#player-info-panel .player-info-action-btn:active {
    transform:
        translateY(1px);
}


#player-info-panel .player-info-action-btn:disabled {
    opacity:
        0.45;

    cursor:
        not-allowed;

    transform:
        none;

    box-shadow:
        none;
}


/* ======================================================================
   ATTACK BUTTON
   ====================================================================== */

#player-info-attack {
    background:
        linear-gradient(
            to bottom,
            #4b235f,
            #2b1239
        );
}


#player-info-attack:hover {
    background:
        linear-gradient(
            to bottom,
            #67327f,
            #3b194e
        );
}


/* ======================================================================
   FOOTER
   ====================================================================== */

#player-info-panel .player-info-footer {
    margin:
        0 10px 10px 10px;

    padding:
        8px 10px;

    border-top:
        1px solid rgba(180, 150, 255, 0.25);

    font-size:
        9px;

    line-height:
        1.35;

    letter-spacing:
        0.03em;

    text-align:
        center;

    color:
        #a998d5;
}


/* ======================================================================
   FOCUS
   ====================================================================== */

#player-info-panel button:focus-visible {
    outline:
        2px solid #c8b7f5;

    outline-offset:
        2px;
}


/* ======================================================================
   TABLET
   ====================================================================== */

@media
(max-width: 900px)
and
(min-width: 601px) {

    #player-info-panel {
        width:
            min(400px, calc(100vw - 28px));

        max-height:
            calc(100dvh - 28px);
    }


    #player-info-panel .player-info-header {
        padding:
            11px 12px;
    }


    #player-info-panel .player-info-section {
        margin:
            9px;

        padding:
            9px 11px;
    }
}


/* ======================================================================
   MOBILE — IPHONE / ANDROID
   ====================================================================== */

@media (max-width: 600px) {

    #player-info-panel {
        top:
            50%;

        left:
            50%;

        width:
            calc(100vw - 20px);

        max-width:
            none;

        max-height:
            calc(
                100dvh
                -
                env(safe-area-inset-top, 0px)
                -
                env(safe-area-inset-bottom, 0px)
                -
                20px
            );

        border-radius:
            9px;
    }


    #player-info-panel .player-info-header {
        padding:
            10px 11px;
    }


    #player-info-title {
        font-size:
            13px;
    }


    #player-info-panel .player-info-close-btn {
        width:
            32px;

        height:
            32px;
    }


    #player-info-panel .player-info-section {
        margin:
            8px;

        padding:
            9px 10px;
    }


    #player-info-panel .player-info-section-title {
        font-size:
            11px;
    }


    #player-info-panel .player-info-row {
        gap:
            10px;

        min-height:
            22px;

        padding:
            4px 0;
    }


    #player-info-panel .player-info-label {
        font-size:
            10px;
    }


    #player-info-panel .player-info-value {
        font-size:
            10px;
    }


    #player-info-panel .player-info-actions-section {
        grid-template-columns:
            1fr 1fr;

        gap:
            7px;
    }


    #player-info-panel .player-info-action-btn {
        min-height:
            40px;

        padding:
            7px 5px;

        font-size:
            9px;

        white-space:
            normal;

        overflow-wrap:
            anywhere;
    }


    #player-info-panel .player-info-footer {
        margin:
            0 8px 8px 8px;
    }
}


/* ======================================================================
   VERY SMALL PHONES
   ====================================================================== */

@media (max-width: 430px) {

    #player-info-panel {
        width:
            calc(100vw - 12px);

        max-height:
            calc(
                100dvh
                -
                env(safe-area-inset-top, 0px)
                -
                env(safe-area-inset-bottom, 0px)
                -
                12px
            );
    }


    #player-info-panel .player-info-header {
        padding:
            8px 9px;
    }


    #player-info-title {
        font-size:
            12px;

        letter-spacing:
            0.06em;
    }


    #player-info-panel .player-info-section {
        margin:
            6px;

        padding:
            8px;
    }


    #player-info-panel .player-info-row {
        gap:
            8px;
    }


    #player-info-panel .player-info-label,
    #player-info-panel .player-info-value {
        font-size:
            9px;
    }


    #player-info-panel .player-info-actions-section {
        grid-template-columns:
            1fr;
    }


    #player-info-panel .player-info-action-btn {
        min-height:
            38px;
    }


    #player-info-panel .player-info-footer {
        margin:
            0 6px 6px 6px;

        font-size:
            8px;
    }
}


/* ======================================================================
   LANDSCAPE PHONE
   ====================================================================== */

@media
(max-width: 900px)
and
(orientation: landscape)
and
(max-height: 520px) {

    #player-info-panel {
        width:
            min(460px, calc(100vw - 24px));

        max-height:
            calc(100dvh - 16px);
    }


    #player-info-panel .player-info-header {
        padding:
            7px 10px;
    }


    #player-info-panel .player-info-section {
        margin:
            6px 8px;

        padding:
            7px 9px;
    }


    #player-info-panel .player-info-action-btn {
        min-height:
            34px;
    }
}


/* ======================================================================
   REDUCED MOTION
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {

    #player-info-panel,
    #player-info-panel *,
    #player-info-panel *::before,
    #player-info-panel *::after {
        transition-duration:
            0.001ms !important;

        animation-duration:
            0.001ms !important;

        animation-iteration-count:
            1 !important;
    }
}


/* ======================================================================
   END PlayerInfoPanel.css
   ====================================================================== */