/* =========================================================
   APEX GAMES — PROFILE
========================================================= */

body {
    background: #05070b;
}


/* =========================================================
   PAGE
========================================================= */

.profile-page {
    min-height: 100vh;
    padding-top: 78px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(22, 140, 255, 0.08),
            transparent 32%
        ),
        #05070b;
}


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

.profile-header {
    position: relative;

    min-height: 310px;

    overflow: visible;

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

    background:
        linear-gradient(
            135deg,
            #07111c 0%,
            #081421 45%,
            #05080c 100%
        );

    z-index: 20;
}


.profile-cover-glow {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 75% 20%,
            rgba(22,140,255,.25),
            transparent 30%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(22,140,255,.10),
            transparent 35%
        );
}


.profile-header-inner {
    position: relative;

    max-width: 1280px;
    min-height: 310px;

    margin: 0 auto;

    padding:
        70px
        35px
        45px;

    display: flex;
    align-items: flex-end;

    gap: 28px;

    z-index: 2;
}


/* =========================================================
   AVATAR
========================================================= */

.profile-avatar {
    width: 164px;
    height: 164px;

    flex-shrink: 0;

    object-fit: cover;

    background: #0a0f16;

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

    box-shadow:
        0 18px 45px rgba(0,0,0,.35);
}


/* =========================================================
   IDENTITY
========================================================= */

.profile-identity {
    min-width: 0;
}


.profile-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 15px;
}


.profile-name-row h1 {
    font-size:
        clamp(38px, 5vw, 62px);

    line-height: 1;

    letter-spacing: -2px;
}


.profile-gamertag {
    margin-top: 8px;

    color: #8996a7;

    font-size: 17px;
}


.profile-bio {
    max-width: 600px;

    margin-top: 18px;

    color: #a0abba;

    line-height: 1.6;
}


/* =========================================================
   EDIT PROFILE
========================================================= */

.profile-header-actions {
    margin-left: auto;
}


.edit-profile-button {
    min-height: 44px;

    padding: 0 20px;

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

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

    background:
        rgba(255,255,255,.04);

    color: white;

    text-decoration: none;

    font-weight: 800;

    transition:
        background .2s ease,
        border-color .2s ease;
}


.edit-profile-button:hover {
    background:
        rgba(22,140,255,.10);

    border-color:
        rgba(22,140,255,.35);
}


/* =========================================================
   STATUS
========================================================= */

.status-wrapper {
    position: relative;

    width: fit-content;

    margin-top: 10px;

    z-index: 100;
}


.profile-status {
    padding: 0;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    border: 0;

    background: transparent;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1.5px;

    cursor: pointer;

    text-transform: uppercase;
}


.profile-status .status-dot {
    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;
}


.status-arrow {
    margin-left: 2px;

    font-size: 9px;

    opacity: .6;
}


/* ONLINE */

.profile-status.online {
    color: #43d17a;
}

.profile-status.online .status-dot {
    background: #43d17a;

    box-shadow:
        0 0 12px rgba(67,209,122,.8);
}


/* AWAY */

.profile-status.away {
    color: #e8b84a;
}

.profile-status.away .status-dot {
    background: #e8b84a;

    box-shadow:
        0 0 12px rgba(232,184,74,.7);
}


/* DND */

.profile-status.dnd {
    color: #ef5b5b;
}

.profile-status.dnd .status-dot {
    background: #ef5b5b;

    box-shadow:
        0 0 12px rgba(239,91,91,.7);
}


/* OFFLINE */

.profile-status.offline {
    color: #7d8998;
}

.profile-status.offline .status-dot {
    background: #7d8998;
}


/* =========================================================
   STATUS MENU
========================================================= */

.status-menu {
    position: absolute;

    top: calc(100% + 10px);
    left: 0;

    width: 190px;

    padding: 7px;

    background: #0b1118;

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

    box-shadow:
        0 15px 35px rgba(0,0,0,.45);

    z-index: 200;
}


.status-menu[hidden] {
    display: none;
}


.status-menu button {
    width: 100%;

    padding: 11px 10px;

    display: flex;
    align-items: center;

    gap: 10px;

    border: 0;

    background: transparent;

    color: #dce4ed;

    text-align: left;

    font: inherit;

    cursor: pointer;
}


.status-menu button:hover {
    background:
        rgba(255,255,255,.05);
}


.status-choice-dot {
    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;
}


.status-choice-dot.online {
    background: #43d17a;
}

.status-choice-dot.away {
    background: #e8b84a;
}

.status-choice-dot.dnd {
    background: #ef5b5b;
}

.status-choice-dot.offline {
    background: #7d8998;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.profile-layout {
    position: relative;

    max-width: 1280px;

    margin: 0 auto;

    padding:
        35px
        35px
        90px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        330px;

    gap: 25px;

    z-index: 1;
}


.profile-main-column,
.profile-sidebar {
    display: grid;

    align-content: start;

    gap: 22px;
}


/* =========================================================
   PANELS
========================================================= */

.profile-panel {
    padding: 26px;

    background:
        linear-gradient(
            145deg,
            rgba(13,19,27,.98),
            rgba(7,11,17,.98)
        );

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


.compact-panel {
    padding: 22px;
}


.panel-label {
    color: #3ea1ff;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 2px;
}


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

    display: flex;

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


.panel-heading h2 {
    margin-top: 4px;

    font-size: 25px;
}


/* =========================================================
   RECENT ACTIVITY
========================================================= */

.activity-game {
    display: grid;

    grid-template-columns:
        150px
        minmax(0, 1fr);

    gap: 22px;
}


.activity-game-art {
    min-height: 190px;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            145deg,
            #168cff,
            #07325c
        );

    font-size: 58px;
    font-weight: 900;
}


.activity-game-info h3 {
    font-size: 24px;
}


.activity-game-info > p {
    margin-top: 6px;

    color: #8995a5;

    line-height: 1.6;
}


.activity-stats {
    margin-top: 18px;

    display: flex;
    flex-wrap: wrap;

    gap: 24px;

    color: #7f8b9c;

    font-size: 12px;
}


.activity-stats strong {
    color: white;
}


.achievement-summary {
    margin-top: 28px;
}


.achievement-top {
    display: flex;

    justify-content: space-between;

    color: #8995a5;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1px;
}


.achievement-track {
    height: 5px;

    margin-top: 9px;

    overflow: hidden;

    background: #17202b;
}


.achievement-fill {
    width: 0%;
    height: 100%;

    background: #168cff;
}


/* =========================================================
   FEATURED GAME
========================================================= */

.featured-game-showcase {
    position: relative;

    min-height: 220px;

    overflow: hidden;

    background:
        linear-gradient(
            110deg,
            #071728,
            #05080c
        );
}


.featured-game-background {
    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 75% 50%,
            rgba(22,140,255,.35),
            transparent 30%
        );
}


.featured-game-content {
    position: relative;

    max-width: 500px;

    padding: 35px;

    z-index: 2;
}


.showcase-label {
    color: #3ea1ff;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 2px;
}


.featured-game-content h3 {
    margin-top: 9px;

    font-size: 28px;
}


.featured-game-content p {
    margin-top: 10px;

    color: #8d99a9;

    line-height: 1.6;
}


.featured-game-content a {
    display: inline-block;

    margin-top: 20px;

    color: #3ea1ff;

    text-decoration: none;

    font-weight: 800;
}


/* =========================================================
   EMPTY SECTION
========================================================= */

.empty-profile-section {
    min-height: 145px;

    display: flex;
    align-items: center;

    gap: 18px;

    color: #7f8b9a;
}


.empty-icon {
    width: 55px;
    height: 55px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(22,140,255,.25);

    color: #168cff;

    font-size: 24px;
}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar-heading {
    display: flex;

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

    gap: 15px;
}


.sidebar-heading h3,
.compact-panel > h3 {
    margin-top: 5px;
}


.sidebar-heading a {
    color: #3ea1ff;

    text-decoration: none;

    font-size: 12px;
    font-weight: 800;
}


/* =========================================================
   LEVEL
========================================================= */

.level-display {
    margin-top: 16px;

    display: flex;
    align-items: center;

    gap: 14px;
}


.level-ring {
    width: 54px;
    height: 54px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 50%;

    border:
        2px solid #168cff;

    color: white;

    font-size: 20px;
    font-weight: 900;

    box-shadow:
        0 0 18px rgba(22,140,255,.12);
}


.level-display strong,
.level-display span {
    display: block;
}


.level-display span {
    margin-top: 3px;

    color: #768293;

    font-size: 11px;
}


/* =========================================================
   FRIEND PREVIEWS
========================================================= */

.friend-preview-list {
    margin-top: 18px;

    display: grid;

    gap: 8px;
}


.friend-preview {
    min-width: 0;

    padding: 9px;

    display: flex;
    align-items: center;

    gap: 11px;

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

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

    color: white;

    text-decoration: none;

    transition:
        background .18s ease,
        border-color .18s ease;
}


.friend-preview:hover {
    background:
        rgba(22,140,255,.07);

    border-color:
        rgba(22,140,255,.18);
}


.friend-preview-avatar-wrap {
    position: relative;

    width: 44px;
    height: 44px;

    flex-shrink: 0;
}


.friend-preview-avatar {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 3px;

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

    background: #0a0f16;
}


.friend-preview-status {
    position: absolute;

    right: -3px;
    bottom: -3px;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    border:
        3px solid #090e15;
}


.friend-preview-status.online {
    background: #43d17a;

    box-shadow:
        0 0 7px rgba(67,209,122,.45);
}


.friend-preview-status.away {
    background: #e8b84a;
}


.friend-preview-status.dnd {
    background: #ef5b5b;
}


.friend-preview-status.offline {
    background: #657184;
}


.friend-preview-info {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}


.friend-preview-name {
    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color: #e8edf3;

    font-size: 12px;
    font-weight: 800;
}


.friend-preview-presence {
    color: #778495;

    font-size: 10px;
}


.friend-preview-empty {
    margin: 2px 0 0;

    color: #728094;

    font-size: 13px;
}


/* =========================================================
   BADGES
========================================================= */

.profile-badges {
    margin-top: 16px;

    display: grid;

    gap: 10px;
}


.apex-badge {
    padding: 12px;

    display: flex;
    align-items: center;

    gap: 12px;

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

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


.badge-emblem {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            145deg,
            rgba(22,140,255,.20),
            rgba(22,140,255,.055)
        );

    border:
        1px solid rgba(22,140,255,.32);

    color: #58adff;

    font-size: 24px;
    font-weight: 900;

    box-shadow:
        inset 0 0 20px rgba(22,140,255,.06);
}


.badge-content {
    min-width: 0;
}


.badge-content strong,
.badge-content span {
    display: block;
}


.badge-content strong {
    color: #eef6ff;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1px;
}


.badge-content span {
    margin-top: 4px;

    color: #748396;

    font-size: 10px;
}


.beta-tester-badge {
    border-color:
        rgba(22,140,255,.18);

    background:
        linear-gradient(
            100deg,
            rgba(22,140,255,.07),
            rgba(255,255,255,.015)
        );
}


.badge-empty {
    margin: 0;

    color: #728094;

    font-size: 13px;
}


/* =========================================================
   PROFILE DETAILS
========================================================= */

.profile-detail-row {
    padding: 12px 0;

    display: flex;
    justify-content: space-between;

    gap: 15px;

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

    font-size: 12px;
}


.profile-detail-row:last-child {
    border-bottom: 0;
}


.profile-detail-row span {
    color: #728092;
}


.profile-detail-row strong {
    min-width: 0;

    overflow-wrap: anywhere;

    color: #dce4ed;

    text-align: right;
}


/* =========================================================
   LOGOUT
========================================================= */

.logout-button {
    width: 100%;
    min-height: 46px;

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

    background:
        rgba(255,255,255,.025);

    color: #aeb8c4;

    font-weight: 800;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease;
}


.logout-button:hover {
    background:
        rgba(255,255,255,.06);

    color: white;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (
    max-width: 900px
) {

    .profile-layout {
        grid-template-columns:
            1fr;
    }


    .profile-header-inner {
        align-items:
            flex-start;

        flex-wrap:
            wrap;
    }


    .profile-header-actions {
        width: 100%;

        margin-left: 0;
    }

}


@media (
    max-width: 650px
) {

    .profile-header-inner {
        padding:
            45px
            20px
            35px;

        flex-direction:
            column;
    }


    .profile-layout {
        padding:
            22px
            20px
            70px;
    }


    .profile-avatar {
        width: 125px;
        height: 125px;
    }


    .activity-game {
        grid-template-columns:
            1fr;
    }


    .activity-game-art {
        min-height:
            140px;
    }

}