/* =========================================================
   MARKER NORTH ACHIEVEMENTS
   ========================================================= */

.achievements-main {
    width: 100%;
    min-width: 0;
    padding: 24px 28px 18px;
    background: radial-gradient( circle at 83% 10%, rgba(30, 115, 190, 0.07), transparent 28% ), var(--page-bg);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}


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

.achievements-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

    .achievements-page-header h1 {
        margin: 0;
        color: var(--text);
        font-size: 34px;
        line-height: 1.1;
    }

    .achievements-page-header p {
        margin: 7px 0 0;
        color: var(--muted);
        font-size: 16px;
        font-style: italic;
    }

.achievement-filters {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .achievement-filters label {
        position: relative;
        display: block;
    }

    .achievement-filters select {
        width: 190px;
        height: 42px;
        padding: 0 38px 0 14px;
        border: 1px solid var(--panel-border);
        border-radius: 6px;
        outline: none;
        appearance: none;
        background: #071522;
        color: #edf3f7;
        font: inherit;
        font-size: 11px;
        cursor: pointer;
    }

        .achievement-filters select:focus {
            border-color: var(--brand-blue);
        }

    .achievement-filters label i {
        position: absolute;
        top: 50%;
        right: 13px;
        color: #9cb0bf;
        font-size: 9px;
        transform: translateY(-50%);
        pointer-events: none;
    }


/* =========================================================
   SUMMARY CARDS
   ========================================================= */

.achievement-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.achievement-summary-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    gap: 13px;
    min-height: 98px;
    padding: 15px;
    border: 1px solid var(--panel-border);
    border-radius: 9px;
    background: linear-gradient( 145deg, rgba(8, 23, 37, 0.98), rgba(5, 15, 25, 0.98) );
}

    .achievement-summary-card > div:last-child {
        display: grid;
        gap: 3px;
    }

    .achievement-summary-card span {
        color: #91a9bb;
        font-size: 10px;
    }

    .achievement-summary-card > div:last-child > strong {
        color: #ffffff;
        font-size: 25px;
        line-height: 1.1;
    }

    .achievement-summary-card strong small {
        color: #8da2b2;
        font-size: 13px;
    }

    .achievement-summary-card > div:last-child > small {
        color: #728b9e;
        font-size: 8px;
    }

.summary-icon {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 50%;
    font-size: 22px;
}

.achievement-summary-card.unlocked .summary-icon {
    color: #ffbd24;
    background: rgba(255, 189, 36, 0.14);
}

.achievement-summary-card.points .summary-icon {
    color: #49df77;
    background: rgba(73, 223, 119, 0.14);
}

.achievement-summary-card.rarity .summary-icon {
    color: #bd71ff;
    background: rgba(189, 113, 255, 0.14);
}

.achievement-summary-card.unlocked > div:last-child > strong {
    color: #ffbd24;
}

.achievement-summary-card.completion > div:last-child > strong {
    color: #4da8fa;
}

.achievement-summary-card.points > div:last-child > strong {
    color: #49df77;
}

.achievement-summary-card.rarity > div:last-child > strong {
    color: #bd71ff;
}

.summary-progress-ring {
    position: relative;
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient( #2f9cff 0 40%, #173047 40% 100% );
}

    .summary-progress-ring::after {
        position: absolute;
        inset: 7px;
        border-radius: 50%;
        background: #071522;
        content: "";
    }

    .summary-progress-ring strong {
        position: relative;
        z-index: 1;
        color: #ffffff;
        font-size: 12px;
    }


/* =========================================================
   FEATURED PROGRESS
   ========================================================= */

.featured-progress {
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 189, 36, 0.72);
    border-radius: 9px;
    background: linear-gradient( 110deg, rgba(255, 189, 36, 0.07), rgba(6, 17, 28, 0.96) 42% );
}

.achievement-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 13px 16px;
    border-bottom: 1px solid rgba(34, 54, 74, 0.72);
}

    .achievement-section-header h2 {
        display: flex;
        align-items: center;
        gap: 9px;
        margin: 0;
        color: #ffffff;
        font-size: 15px;
        text-transform: uppercase;
    }

.featured-progress .achievement-section-header h2 {
    color: var(--accent);
}

.achievement-section-header span {
    color: #7891a4;
    font-size: 8px;
    font-style: italic;
}

.featured-progress-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

    .featured-progress-grid article {
        display: grid;
        grid-template-columns: 66px minmax(0, 1fr);
        align-items: center;
        gap: 13px;
        padding: 16px;
        border-right: 1px solid rgba(34, 54, 74, 0.72);
    }

        .featured-progress-grid article:last-child {
            border-right: 0;
        }

.featured-badge,
.achievement-badge {
    display: grid;
    place-items: center;
    clip-path: polygon( 50% 0, 91% 23%, 91% 76%, 50% 100%, 9% 76%, 9% 23% );
}

.featured-badge {
    width: 64px;
    height: 70px;
    font-size: 25px;
}

    .featured-badge.legendary {
        border: 0;
        background: linear-gradient(145deg, #ffcb52, #9e6300);
        color: #2b1900;
    }

    .featured-badge.rare {
        background: linear-gradient(145deg, #83c9ff, #126bb1);
        color: #03121e;
    }

    .featured-badge.epic {
        background: linear-gradient(145deg, #83e596, #22713a);
        color: #05170a;
    }

.featured-information {
    display: grid;
    min-width: 0;
    gap: 8px;
}

    .featured-information > div:first-child {
        display: grid;
        gap: 3px;
    }

        .featured-information > div:first-child strong {
            color: #ffffff;
            font-size: 13px;
        }

        .featured-information > div:first-child span {
            color: #8fa6b8;
            font-size: 9px;
        }

    .featured-information > strong {
        color: var(--accent);
        font-size: 15px;
    }

        .featured-information > strong small {
            color: #c6d1da;
            font-size: 11px;
            font-weight: 500;
        }

.achievement-progress,
.achievement-card-progress {
    overflow: hidden;
    border-radius: 999px;
    background: #172b3a;
}

.achievement-progress {
    height: 7px;
}

.achievement-card-progress {
    height: 5px;
}

    .achievement-progress span,
    .achievement-card-progress span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #df9500, #ffca3d);
    }


/* =========================================================
   COLLECTION AND RIGHT SIDEBAR
   ========================================================= */

.achievements-content-grid {
    display: grid;
    grid-template-columns: minmax(700px, 1fr) minmax(300px, 350px);
    align-items: start;
    gap: 14px;
}

.achievement-collection,
.achievement-side-card {
    border: 1px solid var(--panel-border);
    border-radius: 9px;
    background: linear-gradient( 145deg, rgba(8, 23, 37, 0.98), rgba(5, 15, 25, 0.98) );
}

.achievement-collection {
    min-width: 0;
    overflow: hidden;
}


/* =========================================================
   CATEGORY TABS
   ========================================================= */

.achievement-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 12px 0;
    border-bottom: 1px solid rgba(34, 54, 74, 0.7);
}

    .achievement-tabs button {
        min-height: 34px;
        padding: 0 14px;
        border: 0;
        border-bottom: 2px solid transparent;
        background: transparent;
        color: #9db0bf;
        font: inherit;
        font-size: 10px;
        cursor: pointer;
    }

        .achievement-tabs button:hover {
            color: #ffffff;
        }

        .achievement-tabs button.active {
            border-bottom-color: var(--accent);
            color: var(--accent);
        }


/* =========================================================
   ACHIEVEMENT CARDS
   ========================================================= */

.achievement-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    padding: 12px;
}

.achievement-card {
    display: grid;
    grid-template-columns: 59px minmax(0, 1fr);
    min-width: 0;
    gap: 11px;
    min-height: 132px;
    padding: 12px;
    border: 1px solid rgba(34, 54, 74, 0.9);
    border-radius: 7px;
    background: rgba(7, 20, 32, 0.9);
}

    .achievement-card.unlocked {
        border-color: rgba(66, 111, 143, 0.92);
    }

    .achievement-card.in-progress {
        border-color: rgba(255, 189, 36, 0.5);
    }

    .achievement-card.locked {
        background: rgba(6, 15, 24, 0.78);
        opacity: 0.78;
    }

.achievement-badge {
    width: 58px;
    height: 64px;
    color: #ffffff;
    font-size: 22px;
}

    .achievement-badge.common {
        background: linear-gradient(145deg, #53df74, #145e27);
    }

    .achievement-badge.rare {
        background: linear-gradient(145deg, #62baff, #12598e);
    }

    .achievement-badge.epic {
        background: linear-gradient(145deg, #bf6cff, #5b2387);
    }

    .achievement-badge.legendary {
        background: linear-gradient(145deg, #ffd05b, #9e6200);
        color: #2b1900;
    }

.achievement-card.locked .achievement-badge {
    filter: grayscale(0.85);
}

.achievement-card-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
}

    .achievement-card-content header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .achievement-card-content h3 {
        margin: 0;
        color: #ffffff;
        font-size: 12px;
    }

    .achievement-card-content header > i {
        color: #49df77;
        font-size: 13px;
    }

.achievement-card.locked header > i {
    color: #7d8d99;
}

.achievement-card-content header > span {
    color: var(--accent);
    font-size: 9px;
    font-weight: 700;
}

.achievement-card-content p {
    flex: 1;
    margin: 0;
    color: #9fb1bf;
    font-size: 9px;
    line-height: 1.45;
}

.achievement-card-content footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
}

    .achievement-card-content footer span {
        color: #778fa2;
        font-size: 8px;
    }

    .achievement-card-content footer strong {
        font-size: 8px;
        text-align: right;
    }

.common-text {
    color: #49df77;
}

.rare-text {
    color: #4da8fa;
}

.epic-text {
    color: #bd71ff;
}

.legendary-text {
    color: var(--accent);
}


/* =========================================================
   ACHIEVEMENT RIGHT SIDEBAR
   ========================================================= */

.achievement-sidebar {
    display: grid;
    min-width: 0;
    gap: 12px;
}

.achievement-side-card {
    overflow: hidden;
}

.achievement-side-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 15px;
    border-bottom: 1px solid rgba(34, 54, 74, 0.68);
}

    .achievement-side-header h2 {
        margin: 0;
        color: #ffffff;
        font-size: 14px;
        text-transform: uppercase;
    }

    .achievement-side-header a {
        color: var(--accent);
        font-size: 8px;
        font-weight: 700;
        text-decoration: none;
    }


/* RECENT UNLOCKS */

.recent-unlock-list {
    display: grid;
}

    .recent-unlock-list article {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 10px;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(34, 54, 74, 0.58);
    }

        .recent-unlock-list article:last-child {
            border-bottom: 0;
        }

.recent-badge {
    display: grid;
    width: 46px;
    height: 50px;
    place-items: center;
    clip-path: polygon( 50% 0, 91% 23%, 91% 76%, 50% 100%, 9% 76%, 9% 23% );
    font-size: 17px;
}

    .recent-badge.rare {
        color: #06131e;
        background: #4da8fa;
    }

    .recent-badge.epic {
        color: #150721;
        background: #bd71ff;
    }

    .recent-badge.legendary {
        color: #2b1900;
        background: var(--accent);
    }

.recent-unlock-list article > div:last-child {
    display: grid;
    gap: 4px;
}

.recent-unlock-list strong {
    color: #ffffff;
    font-size: 10px;
}

.recent-unlock-list span {
    color: #97aaba;
    font-size: 8px;
    line-height: 1.4;
}

.recent-unlock-list time {
    color: #6f899d;
    font-size: 7px;
}


/* NEXT ACHIEVEMENT */

.next-achievement {
    padding-bottom: 14px;
}

.next-achievement-content {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 14px 14px 10px;
}

    .next-achievement-content > div:last-child {
        display: grid;
        gap: 4px;
    }

    .next-achievement-content strong {
        color: #ffffff;
        font-size: 12px;
    }

    .next-achievement-content span {
        color: #9bafbd;
        font-size: 9px;
    }

.next-achievement-numbers {
    display: flex;
    align-items: baseline;
    gap: 5px;
    padding: 0 14px 8px;
}

    .next-achievement-numbers strong {
        color: var(--accent);
        font-size: 21px;
    }

    .next-achievement-numbers span {
        color: #c8d2da;
        font-size: 11px;
    }

.next-achievement > .achievement-progress {
    margin: 0 14px;
}

.next-achievement > small {
    display: block;
    margin: 7px 14px 0;
    color: #718b9e;
    font-size: 8px;
    text-align: right;
}


/* ACHIEVEMENT RANK */

.achievement-rank-current {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 15px 14px 12px;
    text-align: center;
}

    .achievement-rank-current > div {
        display: grid;
        width: 54px;
        height: 58px;
        place-items: center;
        clip-path: polygon( 50% 0, 91% 23%, 91% 76%, 50% 100%, 9% 76%, 9% 23% );
        color: #271700;
        background: linear-gradient(145deg, #ffd05b, #a86800);
        font-size: 22px;
    }

    .achievement-rank-current > span {
        color: #899fae;
        font-size: 8px;
        text-transform: uppercase;
    }

    .achievement-rank-current > strong {
        color: #ffffff;
        font-size: 14px;
    }

    .achievement-rank-current > small {
        color: var(--accent);
        font-size: 9px;
    }

.rank-progress-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 14px 7px;
}

    .rank-progress-heading span {
        color: #9db0be;
        font-size: 8px;
    }

    .rank-progress-heading strong {
        color: #ffffff;
        font-size: 8px;
    }

.achievement-progress.rank {
    margin: 0 14px;
}

.achievement-rank > p {
    margin: 11px 14px 14px;
    color: #71899c;
    font-size: 8px;
    font-style: italic;
    line-height: 1.4;
    text-align: center;
}


/* RARITY GUIDE */

.rarity-guide ul {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 6px 14px 10px;
    list-style: none;
}

.rarity-guide li {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 31px;
    border-bottom: 1px solid rgba(34, 54, 74, 0.52);
}

    .rarity-guide li:last-child {
        border-bottom: 0;
    }

    .rarity-guide li > i {
        width: 11px;
        height: 11px;
        transform: rotate(45deg);
    }

        .rarity-guide li > i.common {
            border: 1px solid #49df77;
        }

        .rarity-guide li > i.rare {
            border: 1px solid #4da8fa;
        }

        .rarity-guide li > i.epic {
            border: 1px solid #bd71ff;
        }

        .rarity-guide li > i.legendary {
            border: 1px solid var(--accent);
        }

.rarity-guide strong {
    color: #d9e2e8;
    font-size: 9px;
}

.rarity-guide span {
    color: #718b9e;
    font-size: 8px;
}


/* =========================================================
   SIDEBAR ACHIEVEMENT POINTS
   ========================================================= */

.sidebar-achievement-points {
    display: grid;
    grid-template-columns: 20px auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    margin: 12px 0;
    padding: 9px 10px;
    border: 1px solid rgba(255, 189, 36, 0.28);
    border-radius: 5px;
    background: rgba(255, 189, 36, 0.06);
}

    .sidebar-achievement-points i,
    .sidebar-achievement-points strong {
        color: var(--accent);
    }

    .sidebar-achievement-points i {
        font-size: 14px;
    }

    .sidebar-achievement-points strong {
        font-size: 13px;
    }

    .sidebar-achievement-points span {
        color: #9eb0bd;
        font-size: 8px;
    }


/* =========================================================
   CAPS SIGNATURE
   ========================================================= */

.achievements-caps-signature {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin-top: 16px;
    padding: 10px 0 0;
}

.achievements-caps-line {
    width: 125px;
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(255, 189, 36, 0.72) );
}

    .achievements-caps-line:last-child {
        background: linear-gradient( 90deg, rgba(255, 189, 36, 0.72), transparent );
    }

.achievements-caps-icon {
    color: var(--accent);
    font-size: 17px;
}

.achievements-caps-signature > div:nth-child(3) {
    display: grid;
    gap: 3px;
    text-align: center;
}

.achievements-caps-signature strong {
    color: #ffffff;
    font-size: 11px;
}

    .achievements-caps-signature strong span {
        color: var(--accent);
    }

.achievements-caps-signature small {
    color: #8298a9;
    font-size: 8px;
    font-style: italic;
}


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

@media (max-width: 1500px) {
    .achievement-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .achievements-content-grid {
        grid-template-columns: minmax(600px, 1fr) 300px;
    }
}

@media (max-width: 1280px) {
    .achievement-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .achievements-content-grid {
        grid-template-columns: 1fr;
    }

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

    .featured-progress-grid {
        grid-template-columns: 1fr;
    }

        .featured-progress-grid article {
            border-right: 0;
            border-bottom: 1px solid rgba(34, 54, 74, 0.72);
        }

            .featured-progress-grid article:last-child {
                border-bottom: 0;
            }
}

@media (max-width: 900px) {
    .achievements-page-header {
        align-items: stretch;
        flex-direction: column;
    }

    .achievement-filters {
        width: 100%;
    }

        .achievement-filters label,
        .achievement-filters select {
            width: 100%;
        }

    .achievement-sidebar,
    .achievement-card-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .achievements-main {
        padding: 18px 14px;
    }

    .achievement-summary {
        grid-template-columns: 1fr;
    }

    .achievement-filters {
        align-items: stretch;
        flex-direction: column;
    }

    .achievement-tabs {
        overflow-x: auto;
    }

        .achievement-tabs button {
            flex: 0 0 auto;
        }

    .achievements-caps-line {
        display: none;
    }
}

/* =========================================================
   ACHIEVEMENTS HEADER RESET
   Prevent the global site header style from affecting cards
   ========================================================= */

/* Main Achievements page heading */

.achievements-page-header {
    padding: 0;
    border: 0;
    background: transparent;
}


/* Featured Progress and Achievement Collection headings */

.achievement-section-header {
    padding: 13px 16px;
    border: 0;
    border-bottom: 1px solid rgba(34, 54, 74, 0.72);
    background: rgba(5, 15, 25, 0.72);
}


/* Headers inside individual achievement cards */

.achievement-card-content header {
    padding: 0;
    border: 0;
    background: transparent;
}


/* Recent Unlocks, Next Achievement, Rank, and Rarity headings */

.achievement-side-header {
    padding: 13px 15px;
    border: 0;
    border-bottom: 1px solid rgba(34, 54, 74, 0.68);
    background: rgba(5, 15, 25, 0.72);
}

/* =========================================================
   ACHIEVEMENTS SIDEBAR DRIVER CARD POSITION
   ========================================================= */

.dashboard-sidebar .sidebar-driver-card {
    margin-top: 24px;
}

.dashboard-sidebar .sidebar-sign-out {
    margin-top: 14px;
}

/* =========================================================
   ACHIEVEMENTS READABILITY IMPROVEMENTS
   ========================================================= */

/* Summary cards */

.achievement-summary-card span {
    font-size: 11px;
}

.achievement-summary-card > div:last-child > small {
    font-size: 9px;
}


/* Featured Progress */

.achievement-section-header span {
    font-size: 10px;
}

.featured-information > div:first-child strong {
    font-size: 14px;
}

.featured-information > div:first-child span {
    font-size: 10px;
    line-height: 1.4;
}

.featured-information > strong {
    font-size: 16px;
}

    .featured-information > strong small {
        font-size: 12px;
    }


/* Collection category tabs */

.achievement-tabs button {
    font-size: 11px;
}


/* Main achievement cards */

.achievement-card {
    min-height: 145px;
}

.achievement-card-content h3 {
    font-size: 13px;
}

.achievement-card-content p {
    font-size: 10px;
    line-height: 1.55;
}

.achievement-card-content footer span {
    font-size: 9px;
}

.achievement-card-content footer strong {
    font-size: 9px;
}

.achievement-card-content header > span {
    font-size: 10px;
}


/* Right-side card headings */

.achievement-side-header h2 {
    font-size: 15px;
}

.achievement-side-header a {
    font-size: 9px;
}


/* Recent Unlocks */

.recent-unlock-list strong {
    font-size: 11px;
}

.recent-unlock-list span {
    font-size: 9px;
    line-height: 1.5;
}

.recent-unlock-list time {
    font-size: 8px;
}


/* Next Achievement */

.next-achievement-content strong {
    font-size: 13px;
}

.next-achievement-content span {
    font-size: 10px;
}

.next-achievement > small {
    font-size: 9px;
}


/* Achievement Rank */

.achievement-rank-current > span {
    font-size: 9px;
}

.achievement-rank-current > strong {
    font-size: 15px;
}

.achievement-rank-current > small {
    font-size: 10px;
}

.rank-progress-heading span,
.rank-progress-heading strong {
    font-size: 9px;
}

.achievement-rank > p {
    font-size: 9px;
}


/* Rarity Guide */

.rarity-guide strong {
    font-size: 10px;
}

.rarity-guide span {
    font-size: 9px;
}

/* Achievement page two-column alignment fix.
   Paste this complete block at the very bottom of achievements.css. */

.achievement-primary-column {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 14px;
}

    .achievement-primary-column .featured-progress {
        margin-bottom: 0;
    }

@media (max-width: 1280px) {
    .achievement-primary-column {
        gap: 12px;
    }
}

/* Achievement page readability increase */

.achievement-summary-card > div > span,
.achievement-summary-card > div > small {
    font-size: 11px;
}

.featured-information span,
.featured-information small {
    font-size: 11px;
}

.achievement-card-content p,
.achievement-card-content footer span,
.achievement-card-content footer strong {
    font-size: 11px;
}

.recent-unlock-list article span,
.recent-unlock-list article time {
    font-size: 10px;
    line-height: 1.4;
}

.next-achievement-content span,
.next-achievement small {
    font-size: 11px;
}

.rarity-guide li {
    font-size: 11px;
}