/* =========================================================
   DUTCH FAMILY
   EREGALERIJ & RECORDS
   VOLLEDIG NIEUWE CSS

   VERSIE:
   - Nieuwe Power Rush ranglijst
   - Power Rush + Elite Power Rush naast elkaar
   - Hoogste score bovenaan
   - Datum hoogste score
   - Screenshot hoogste score
   - Totaal aantal prestaties
   - Flying Contest
   - Grand Tournament
   - Dungeon Escape
   - Eregalerij
   - Teamrecords
   - Desktop / tablet / mobiel
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

:root {
    --ach-page-bg: #f5f7f9;
    --ach-white: #ffffff;
    --ach-soft: #f8fafb;
    --ach-soft-blue: #f2f6f8;

    --ach-text: #092a45;
    --ach-text-soft: #647c8e;
    --ach-muted: #94a3ae;

    --ach-blue: #164f76;
    --ach-blue-dark: #082942;

    --ach-gold: #e0b62b;
    --ach-gold-dark: #9e7300;
    --ach-gold-soft: #fff7dc;
    --ach-gold-border: #ead889;

    --ach-red: #e04a26;
    --ach-green: #2d8755;

    --ach-border: #dfe6ea;
    --ach-border-soft: #e8edf0;

    --ach-shadow:
        0 8px 24px rgba(9, 42, 69, .065);

    --ach-shadow-small:
        0 3px 12px rgba(9, 42, 69, .04);

    --ach-radius: 14px;
    --ach-radius-small: 10px;

    --ach-transition: .18s ease;
}


/* =========================================================
   BASIS
   ========================================================= */

html {
    scroll-behavior: smooth;
}


body {
    overflow-x: hidden;
}


.achievements-page {
    min-height: 100vh;
    overflow-x: hidden;

    color: var(--ach-text);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            var(--ach-page-bg) 100%
        );
}


.achievements-page *,
.achievements-page *::before,
.achievements-page *::after {
    box-sizing: border-box;
}


.achievements-page img {
    max-width: 100%;
}


.achievements-page .eyebrow {
    margin: 0 0 .45rem;

    color: #e95430;

    font-size: .72rem;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: .1em;
}


/* =========================================================
   HERO
   ========================================================= */

.achievements-hero {
    position: relative;

    overflow: hidden;

    padding: 5.6rem 0 4.5rem;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 84% 15%,
            rgba(236, 188, 39, .20),
            transparent 27rem
        ),
        linear-gradient(
            125deg,
            #081e32 0%,
            #103c5d 58%,
            #1a608c 100%
        );
}


.achievements-hero::after {
    content: "🏆";

    position: absolute;

    top: 50%;
    right: 5%;

    transform:
        translateY(-50%)
        rotate(8deg);

    opacity: .04;

    font-size: 15rem;

    pointer-events: none;
}


.achievements-hero__content {
    position: relative;

    z-index: 2;

    max-width: 940px;
}


.achievements-hero .eyebrow {
    color: #ffd553;
}


.achievements-hero h1 {
    margin: 0 0 1rem;

    color: #ffffff;

    font-size:
        clamp(
            3rem,
            7vw,
            5.4rem
        );

    font-weight: 950;

    line-height: .98;
    letter-spacing: -.05em;
}


.achievements-hero__intro {
    max-width: 760px;

    margin: 0;

    color:
        rgba(255,255,255,.8);

    font-size: .96rem;
    line-height: 1.7;
}


/* =========================================================
   HERO STATS
   ========================================================= */

.achievements-hero__stats {
    display: flex;
    flex-wrap: wrap;

    gap: .7rem;

    margin-top: 1.7rem;
}


.achievements-hero__stats > div {
    min-width: 155px;

    padding: .82rem .95rem;

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

    border-radius: 12px;

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

    backdrop-filter:
        blur(8px);
}


.achievements-hero__stats strong {
    display: block;

    color: #ffd34e;

    font-size: 1.35rem;
    font-weight: 950;

    line-height: 1;
}


.achievements-hero__stats span {
    display: block;

    margin-top: .25rem;

    color:
        rgba(255,255,255,.68);

    font-size: .62rem;
    font-weight: 700;
}


/* =========================================================
   SWITCHER
   ========================================================= */

.achievements-switcher-section {
    position: relative;

    z-index: 10;

    margin-top: -1.25rem;
}


.achievements-switcher {
    display: grid;

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

    gap: .55rem;

    padding: .6rem;

    border:
        1px solid var(--ach-border);

    border-radius: 15px;

    background: #ffffff;

    box-shadow:
        var(--ach-shadow);
}


.achievements-switcher__item {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: .65rem;

    padding: .75rem .85rem;

    color: #526b80;

    border-radius: 10px;

    text-decoration: none;

    transition:
        background var(--ach-transition),
        transform var(--ach-transition);
}


.achievements-switcher__item:hover {
    background: #f4f7f9;

    transform: translateY(-1px);
}


.achievements-switcher__item--active {
    background:
        linear-gradient(
            135deg,
            rgba(255,205,61,.22),
            rgba(255,205,61,.07)
        );
}


.achievements-switcher__item > span:first-child {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 10px;

    background: #eef3f6;

    font-size: 1rem;
}


.achievements-switcher__item strong {
    display: block;

    color: var(--ach-text);

    font-size: .73rem;
    font-weight: 900;
}


.achievements-switcher__item small {
    display: block;

    margin-top: .08rem;

    color: #8999a5;

    font-size: .56rem;
}


/* =========================================================
   EREGALERIJ SECTIE
   ========================================================= */

.hall-section {
    padding: 4.6rem 0 5rem;
}


.hall-section__header {
    display: grid;

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

    gap: 1rem;

    align-items: center;

    max-width: 900px;

    margin-bottom: 1.7rem;
}


.hall-section__header-icon {
    width: 54px;
    height: 54px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #ffdb55,
            #efb426
        );

    box-shadow:
        0 8px 20px rgba(214,164,25,.16);

    font-size: 1.25rem;
}


.hall-section__header h2 {
    margin: 0 0 .2rem;

    font-size:
        clamp(
            1.9rem,
            4vw,
            2.8rem
        );

    font-weight: 950;

    letter-spacing: -.04em;
}


.hall-section__header p:last-child {
    margin: 0;

    color: var(--ach-text-soft);

    font-size: .8rem;
    line-height: 1.55;
}


/* =========================================================
   ACCORDIONS
   ========================================================= */

.achievement-accordion-list,
.achievement-subcategory-list {
    display: grid;

    gap: .65rem;
}


.achievement-category-accordion,
.achievement-subcategory-accordion {
    margin: 0;

    overflow: hidden;

    border:
        1px solid var(--ach-border);

    border-radius:
        var(--ach-radius);

    background:
        #ffffff;

    box-shadow:
        var(--ach-shadow-small);

    transition:
        border-color var(--ach-transition),
        box-shadow var(--ach-transition);
}


.achievement-category-accordion:hover,
.achievement-subcategory-accordion:hover {
    border-color:
        #d9c66d;
}


.achievement-category-accordion[open],
.achievement-subcategory-accordion[open] {
    border-color:
        #d7bf58;

    box-shadow:
        var(--ach-shadow);
}


.achievement-category-accordion > summary,
.achievement-subcategory-accordion > summary {
    list-style: none;
}


.achievement-category-accordion > summary::-webkit-details-marker,
.achievement-subcategory-accordion > summary::-webkit-details-marker {
    display: none;
}


/* =========================================================
   HOOFDCATEGORIE
   ========================================================= */

.achievement-category-summary {
    display: grid;

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

    gap: .8rem;

    align-items: center;

    min-height: 78px;

    padding: .8rem .9rem;

    cursor: pointer;
    user-select: none;

    background: #ffffff;

    transition:
        background var(--ach-transition);
}


.achievement-category-summary:hover {
    background:
        #fffdf8;
}


.achievement-category-accordion[open]
> .achievement-category-summary {
    border-bottom:
        1px solid var(--ach-border-soft);

    background:
        linear-gradient(
            90deg,
            #fff9e8,
            #ffffff 55%
        );
}


.achievement-category-summary__icon {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background:
        var(--ach-gold-soft);

    font-size: 1rem;
}


.achievement-category-summary__content {
    min-width: 0;
}


.achievement-category-summary__content small {
    display: block;

    color:
        var(--ach-gold-dark);

    font-size: .52rem;
    font-weight: 950;

    text-transform: uppercase;
    letter-spacing: .06em;
}


.achievement-category-summary__content strong {
    display: block;

    margin-top: .05rem;

    color:
        var(--ach-text);

    font-size: .88rem;
    font-weight: 950;
}


.achievement-category-summary__content > span {
    display: block;

    margin-top: .12rem;

    overflow: hidden;

    color:
        var(--ach-text-soft);

    font-size: .6rem;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.achievement-category-summary__count {
    padding: .32rem .55rem;

    color: #725d14;

    border:
        1px solid #f0dfa1;

    border-radius: 999px;

    background: #fffae9;

    font-size: .54rem;
    font-weight: 850;

    white-space: nowrap;
}


/* =========================================================
   CHEVRON
   ========================================================= */

.achievement-chevron {
    position: relative;

    width: 32px;
    height: 32px;

    display: block;

    flex-shrink: 0;

    border:
        1px solid var(--ach-border);

    border-radius: 9px;

    background: #ffffff;
}


.achievement-chevron::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 7px;
    height: 7px;

    border-right:
        2px solid #718696;

    border-bottom:
        2px solid #718696;

    transform:
        translate(-50%, -65%)
        rotate(45deg);

    transition:
        transform .2s ease;
}


details[open]
> summary
.achievement-chevron::before {
    transform:
        translate(-50%, -35%)
        rotate(225deg);
}


/* =========================================================
   CATEGORY BODY
   ========================================================= */

.achievement-category-accordion__body {
    padding: .65rem;

    background:
        #f7f9fa;
}


/* =========================================================
   SUBCATEGORIE
   ========================================================= */

.achievement-subcategory-accordion {
    border-radius: 11px;
}


.achievement-subcategory-summary {
    display: grid;

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

    gap: .65rem;

    align-items: center;

    min-height: 61px;

    padding: .58rem .68rem;

    cursor: pointer;
    user-select: none;

    background:
        #ffffff;
}


.achievement-subcategory-summary:hover {
    background:
        #fbfcfd;
}


.achievement-subcategory-accordion[open]
> .achievement-subcategory-summary {
    border-bottom:
        1px solid var(--ach-border-soft);

    background:
        #fffdf7;
}


.achievement-subcategory-summary > span:first-child {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            rgba(22,79,118,.08),
            rgba(224,182,43,.15)
        );

    font-size: .9rem;
}


.achievement-subcategory-summary > strong {
    min-width: 0;

    overflow: hidden;

    color:
        var(--ach-text);

    font-size: .73rem;
    font-weight: 950;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.achievement-subcategory-summary > small {
    color:
        var(--ach-text-soft);

    font-size: .52rem;
    font-weight: 800;
}


.achievement-subcategory-body {
    padding: .6rem;

    background:
        #f7f9fa;
}


/* =========================================================
   NORMALE EREGALERIJ KAARTEN
   ========================================================= */

.achievement-hall-ranking {
    display: grid;

    gap: .48rem;
}


.achievement-hall-card {
    display: grid;

    grid-template-columns:
        42px
        80px
        minmax(180px, 1fr)
        minmax(115px, auto);

    gap: .75rem;

    align-items: center;

    min-height: 92px;

    padding: .65rem .72rem;

    border:
        1px solid #e3e9ed;

    border-radius: 11px;

    background: #ffffff;

    transition:
        border-color var(--ach-transition),
        background var(--ach-transition),
        box-shadow var(--ach-transition);
}


.achievement-hall-card:hover {
    border-color:
        #d8c46c;

    background:
        #fffdf8;

    box-shadow:
        0 4px 13px rgba(14,44,67,.05);
}


/* =========================================================
   HALL POSITIE
   ========================================================= */

.achievement-hall-card__position {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        #edf2f5;

    color:
        #697f90;

    font-size: .67rem;
    font-weight: 950;
}


.achievement-hall-card__position small {
    display: none;
}


.achievement-hall-card:nth-child(1)
.achievement-hall-card__position {
    color: #604700;

    background:
        linear-gradient(
            135deg,
            #ffe576,
            #ffc63b
        );
}


.achievement-hall-card:nth-child(2)
.achievement-hall-card__position {
    color: #566570;

    background:
        linear-gradient(
            135deg,
            #edf1f4,
            #d4dde3
        );
}


.achievement-hall-card:nth-child(3)
.achievement-hall-card__position {
    color: #754424;

    background:
        linear-gradient(
            135deg,
            #f3c5a4,
            #dfa06f
        );
}


/* =========================================================
   HALL IMAGE
   ========================================================= */

.achievement-hall-card__image {
    width: 80px;
    height: 64px;

    display: block;

    overflow: hidden;

    padding: 0;

    border:
        1px solid var(--ach-border);

    border-radius: 9px;

    background:
        #edf2f5;

    cursor: zoom-in;

    transition:
        transform var(--ach-transition),
        border-color var(--ach-transition);
}


.achievement-hall-card__image:hover {
    transform:
        translateY(-1px);

    border-color:
        #d7bf58;
}


.achievement-hall-card__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.achievement-hall-card__image--empty {
    display: grid;
    place-items: center;

    color: #a0abb4;

    cursor: default;
}


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

.achievement-hall-card__badges,
.achievement-record-card__badges {
    display: flex;
    flex-wrap: wrap;

    gap: .22rem;

    align-items: center;

    margin-bottom: .15rem;
}


.achievement-team-badge,
.achievement-small-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 19px;

    padding: 0 .35rem;

    border-radius: 999px;

    font-size: .48rem;
    font-weight: 900;
}


.achievement-team-badge {
    color: #705600;

    background:
        #fff0b1;
}


.achievement-small-badge {
    color: #667c8d;

    border:
        1px solid #e0e7eb;

    background:
        #ffffff;
}


/* =========================================================
   HALL MAIN
   ========================================================= */

.achievement-hall-card__main {
    min-width: 0;
}


.achievement-hall-card__main > strong {
    display: block;

    overflow: hidden;

    color:
        var(--ach-text);

    font-size: .8rem;
    font-weight: 950;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.achievement-hall-card__main > small {
    display: block;

    margin-top: .1rem;

    color:
        var(--ach-text-soft);

    font-size: .54rem;
}


.achievement-hall-card__main > p {
    margin:
        .25rem 0 0;

    color:
        var(--ach-text-soft);

    font-size:
        .55rem;
}


.achievement-hall-card__main > p strong {
    color:
        var(--ach-blue-dark);
}


/* =========================================================
   HALL TOTAAL
   ========================================================= */

.achievement-hall-card__achievement-count {
    min-width: 105px;

    text-align: right;
}


.achievement-hall-card__achievement-count small {
    display: block;

    color: #8999a5;

    font-size: .46rem;
    font-weight: 850;

    text-transform: uppercase;
}


.achievement-hall-card__achievement-count strong {
    display: block;

    margin-top: .05rem;

    color:
        var(--ach-text);

    font-size: .93rem;
    font-weight: 950;
}


/* =========================================================
   NIEUWE POWER RUSH RANGLIJST

   DESKTOP:
   POWER RUSH | ELITE POWER RUSH
   ========================================================= */

.power-rush-ranking-columns {
    display: grid;

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

    gap: .8rem;

    align-items: start;
}


/* =========================================================
   POWER RUSH KOLOM
   ========================================================= */

.power-rush-ranking-column {
    min-width: 0;

    overflow: hidden;

    border:
        1px solid var(--ach-border);

    border-radius: 12px;

    background:
        #ffffff;

    box-shadow:
        0 3px 12px rgba(9,42,69,.035);
}


.power-rush-ranking-column--elite {
    border-color:
        #eaded9;
}


/* =========================================================
   KOLOMKOP
   ========================================================= */

.power-rush-ranking-column__header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: .75rem;

    min-height: 56px;

    padding: .65rem .75rem;

    border-bottom:
        1px solid var(--ach-border-soft);

    background:
        linear-gradient(
            90deg,
            #fffaf0,
            #ffffff
        );
}


.power-rush-ranking-column--elite
.power-rush-ranking-column__header {
    background:
        linear-gradient(
            90deg,
            #fff5f1,
            #ffffff
        );
}


.power-rush-ranking-column__header > div {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: .45rem;
}


.power-rush-ranking-column__header > div > span {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 8px;

    background:
        var(--ach-gold-soft);

    font-size:
        .82rem;
}


.power-rush-ranking-column--elite
.power-rush-ranking-column__header > div > span {
    background:
        #fff0eb;
}


.power-rush-ranking-column__header strong {
    min-width: 0;

    color:
        var(--ach-text);

    font-size:
        .72rem;
    font-weight: 950;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.power-rush-ranking-column__header > small {
    flex-shrink: 0;

    padding:
        .27rem .45rem;

    border-radius:
        999px;

    color:
        #7b691d;

    background:
        #fff8df;

    font-size:
        .47rem;

    font-weight:
        900;
}


.power-rush-ranking-column--elite
.power-rush-ranking-column__header > small {
    color:
        #a64930;

    background:
        #fff1ec;
}


/* =========================================================
   RANGLIJST
   ========================================================= */

.power-rush-ranking-list {
    display: grid;

    gap: .4rem;

    padding: .5rem;
}


/* =========================================================
   POWER RUSH REGEL

   positie | screenshot | speler | datum | score | aantal
   ========================================================= */

.power-rush-ranking-row {
    display: grid;

    grid-template-columns:
        32px
        72px
        minmax(80px, 1fr)
        minmax(78px, .7fr)
        minmax(74px, .7fr)
        56px;

    gap: .5rem;

    align-items: center;

    min-height: 70px;

    padding: .45rem .5rem;

    border:
        1px solid #e6ebee;

    border-radius: 9px;

    background:
        #ffffff;

    transition:
        border-color var(--ach-transition),
        background var(--ach-transition),
        box-shadow var(--ach-transition);
}


.power-rush-ranking-row:hover {
    border-color:
        #d7c46e;

    background:
        #fffdf9;

    box-shadow:
        0 3px 10px rgba(9,42,69,.04);
}


.power-rush-ranking-column--elite
.power-rush-ranking-row:hover {
    border-color:
        #e3b7a9;

    background:
        #fffaf8;
}


/* =========================================================
   POSITIE
   ========================================================= */

.power-rush-ranking-row__position {
    width: 29px;
    height: 29px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color:
        #718492;

    background:
        #edf2f5;

    font-size:
        .61rem;

    font-weight:
        950;
}


.power-rush-ranking-row:nth-child(1)
.power-rush-ranking-row__position {
    color:
        #654a00;

    background:
        linear-gradient(
            135deg,
            #ffe66f,
            #ffc638
        );

    box-shadow:
        0 3px 8px rgba(216,163,18,.15);
}


.power-rush-ranking-row:nth-child(2)
.power-rush-ranking-row__position {
    color:
        #566570;

    background:
        linear-gradient(
            135deg,
            #eef1f4,
            #d7dee4
        );
}


.power-rush-ranking-row:nth-child(3)
.power-rush-ranking-row__position {
    color:
        #744522;

    background:
        linear-gradient(
            135deg,
            #f4c7a7,
            #df9f6f
        );
}


/* =========================================================
   SCREENSHOT
   ========================================================= */

.power-rush-ranking-row__image {
    width: 72px;
    height: 52px;

    display: block;

    overflow: hidden;

    padding: 0;

    border:
        1px solid var(--ach-border);

    border-radius:
        7px;

    background:
        #edf2f5;

    cursor: zoom-in;

    transition:
        transform var(--ach-transition),
        border-color var(--ach-transition),
        box-shadow var(--ach-transition);
}


.power-rush-ranking-row__image:hover {
    transform:
        translateY(-1px);

    border-color:
        #d2b84d;

    box-shadow:
        0 4px 10px rgba(9,42,69,.08);
}


.power-rush-ranking-row__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}


.power-rush-ranking-row__image--empty {
    display: grid;
    place-items: center;

    color:
        #9caab4;

    cursor: default;

    font-size:
        .9rem;
}


/* =========================================================
   SPELER
   ========================================================= */

.power-rush-ranking-row__player {
    min-width: 0;
}


.power-rush-ranking-row__player strong {
    display: block;

    overflow: hidden;

    color:
        var(--ach-text);

    font-size:
        .68rem;

    font-weight:
        950;

    white-space: nowrap;
    text-overflow: ellipsis;
}


/* =========================================================
   DATUM / SCORE / AANTAL ALGEMEEN
   ========================================================= */

.power-rush-ranking-row__date,
.power-rush-ranking-row__score,
.power-rush-ranking-row__count {
    min-width: 0;
}


.power-rush-ranking-row__date small,
.power-rush-ranking-row__score small,
.power-rush-ranking-row__count small {
    display: block;

    margin-bottom:
        .12rem;

    color:
        #8a99a4;

    font-size:
        .41rem;

    font-weight:
        850;

    text-transform:
        uppercase;

    letter-spacing:
        .045em;
}


/* =========================================================
   DATUM
   ========================================================= */

.power-rush-ranking-row__date strong {
    display: block;

    color:
        var(--ach-text-soft);

    font-size:
        .58rem;

    font-weight:
        750;

    font-variant-numeric:
        tabular-nums;

    white-space:
        nowrap;
}


/* =========================================================
   SCORE
   ========================================================= */

.power-rush-ranking-row__score {
    text-align: right;
}


.power-rush-ranking-row__score strong {
    display: block;

    color:
        var(--ach-blue-dark);

    font-size:
        .76rem;

    font-weight:
        950;

    font-variant-numeric:
        tabular-nums;

    white-space:
        nowrap;
}


.power-rush-ranking-column--elite
.power-rush-ranking-row__score strong {
    color:
        var(--ach-red);
}


/* =========================================================
   AANTAL
   ========================================================= */

.power-rush-ranking-row__count {
    text-align: center;

    padding:
        .32rem .25rem;

    border-radius:
        7px;

    background:
        #fff8df;
}


.power-rush-ranking-row__count small {
    color:
        #8c7418;
}


.power-rush-ranking-row__count strong {
    display: block;

    color:
        #b77e00;

    font-size:
        .8rem;

    font-weight:
        950;

    line-height:
        1;
}


.power-rush-ranking-column--elite
.power-rush-ranking-row__count {
    background:
        #fff0eb;
}


.power-rush-ranking-column--elite
.power-rush-ranking-row__count small {
    color:
        #a45b45;
}


.power-rush-ranking-column--elite
.power-rush-ranking-row__count strong {
    color:
        var(--ach-red);
}


/* =========================================================
   RECORDS INTRO
   ========================================================= */

.records-divider-section {
    padding:
        3.5rem 0 0;
}


.records-divider {
    display: grid;

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

    gap: .9rem;

    align-items: center;

    max-width: 900px;

    margin:
        0 auto;

    padding:
        1.5rem 1.7rem;

    border-radius:
        18px;

    color:
        #ffffff;

    background:
        linear-gradient(
            125deg,
            #081e32,
            #123f60
        );

    box-shadow:
        var(--ach-shadow);
}


.records-divider > span {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background:
        rgba(255,205,61,.12);

    font-size: 1.2rem;
}


.records-divider .eyebrow {
    color:
        #ffd24d;
}


.records-divider h2 {
    margin:
        0 0 .2rem;

    color:
        #ffffff;

    font-size:
        clamp(
            1.8rem,
            4vw,
            2.7rem
        );

    font-weight:
        950;
}


.records-divider p:last-child {
    margin: 0;

    color:
        rgba(255,255,255,.68);

    font-size:
        .74rem;

    line-height:
        1.5;
}


/* =========================================================
   TEAM SECTIES
   ========================================================= */

.achievements-record-section {
    padding:
        4.1rem 0;
}


.achievements-record-section--dk {
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255,255,255,.45)
        );
}


.achievements-record-section--d3 {
    background:
        linear-gradient(
            180deg,
            rgba(238,243,247,.6),
            transparent
        );
}


.achievements-team-heading {
    display: grid;

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

    gap: .85rem;

    align-items: center;

    margin-bottom:
        1.3rem;
}


.achievements-team-heading__badge {
    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #ffd84a,
            #efb426
        );

    font-size:
        .67rem;

    font-weight:
        950;
}


.achievements-team-heading--d3
.achievements-team-heading__badge {
    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #dd5235,
            #b93827
        );
}


.achievements-team-heading h2 {
    margin:
        0 0 .15rem;

    font-size:
        clamp(
            1.7rem,
            4vw,
            2.5rem
        );

    font-weight:
        950;
}


.achievements-team-heading p:last-child {
    margin:
        0;

    color:
        var(--ach-text-soft);

    font-size:
        .7rem;
}


/* =========================================================
   NORMALE RECORD KAARTEN

   GRAND TOURNAMENT
   DUNGEON ESCAPE
   FLYING CONTEST
   ========================================================= */

.achievement-record-ranking {
    display: grid;

    gap:
        .42rem;
}


.achievement-record-card {
    display: grid;

    grid-template-columns:
        38px
        76px
        minmax(0, 1fr)
        minmax(110px, auto);

    gap:
        .7rem;

    align-items:
        center;

    min-height:
        80px;

    padding:
        .55rem .65rem;

    border:
        1px solid #e3e9ed;

    border-radius:
        10px;

    background:
        #ffffff;

    transition:
        border-color var(--ach-transition),
        background var(--ach-transition),
        box-shadow var(--ach-transition);
}


.achievement-record-card:hover {
    border-color:
        #d8c46d;

    background:
        #fffdf8;

    box-shadow:
        0 4px 12px rgba(9,42,69,.04);
}


/* =========================================================
   RECORD POSITIE
   ========================================================= */

.achievement-record-card__position {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    border-radius:
        50%;

    background:
        #edf2f5;

    color:
        #718492;

    font-size:
        .63rem;

    font-weight:
        950;
}


.achievement-record-card:nth-child(1)
.achievement-record-card__position {
    color:
        #614800;

    background:
        linear-gradient(
            135deg,
            #ffe56f,
            #ffc739
        );
}


.achievement-record-card:nth-child(2)
.achievement-record-card__position {
    background:
        linear-gradient(
            135deg,
            #eef1f4,
            #d8dfe4
        );
}


.achievement-record-card:nth-child(3)
.achievement-record-card__position {
    color:
        #754523;

    background:
        linear-gradient(
            135deg,
            #f3c5a4,
            #dfa06f
        );
}


/* =========================================================
   RECORD IMAGE
   ========================================================= */

.achievement-record-card__image {
    width:
        76px;

    height:
        57px;

    display:
        block;

    overflow:
        hidden;

    padding:
        0;

    border:
        1px solid var(--ach-border);

    border-radius:
        8px;

    background:
        #edf2f5;

    cursor:
        zoom-in;

    transition:
        transform var(--ach-transition),
        border-color var(--ach-transition);
}


.achievement-record-card__image:hover {
    transform:
        translateY(-1px);

    border-color:
        #d7bf58;
}


.achievement-record-card__image img {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;
}


.achievement-record-card__image--empty {
    display:
        grid;

    place-items:
        center;

    color:
        #9eabb5;

    cursor:
        default;
}


/* =========================================================
   RECORD MAIN
   ========================================================= */

.achievement-record-card__main {
    min-width:
        0;
}


.achievement-record-card__main > strong {
    display:
        block;

    overflow:
        hidden;

    color:
        var(--ach-text);

    font-size:
        .76rem;

    font-weight:
        950;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


.achievement-record-card__main > small {
    display:
        block;

    margin-top:
        .08rem;

    color:
        var(--ach-text-soft);

    font-size:
        .52rem;
}


.achievement-record-card__main > p {
    margin:
        .2rem 0 0;

    overflow:
        hidden;

    color:
        var(--ach-text-soft);

    font-size:
        .53rem;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


/* =========================================================
   RECORD VALUE
   ========================================================= */

.achievement-record-card__value {
    min-width:
        110px;

    text-align:
        right;
}


.achievement-record-card__value small {
    display:
        block;

    color:
        #8a98a4;

    font-size:
        .45rem;

    font-weight:
        850;

    text-transform:
        uppercase;

    letter-spacing:
        .04em;
}


.achievement-record-card__value strong {
    display:
        block;

    margin-top:
        .05rem;

    color:
        var(--ach-red);

    font-size:
        1rem;

    font-weight:
        950;

    font-variant-numeric:
        tabular-nums;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.achievement-empty {
    display:
        grid;

    place-items:
        center;

    min-height:
        110px;

    padding:
        1rem;

    text-align:
        center;

    border:
        1px dashed #d5dee5;

    border-radius:
        9px;

    background:
        #ffffff;
}


.achievement-empty > span {
    margin-bottom:
        .3rem;

    font-size:
        1.05rem;
}


.achievement-empty strong {
    color:
        var(--ach-text);

    font-size:
        .67rem;
}


.achievement-empty p {
    margin:
        .18rem 0 0;

    color:
        #8797a3;

    font-size:
        .52rem;
}


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

.achievements-footer-section {
    padding:
        1rem 0 4rem;
}


.achievements-footer-box {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1.8rem;

    padding:
        1.4rem 1.5rem;

    color:
        #ffffff;

    border-radius:
        16px;

    background:
        linear-gradient(
            125deg,
            #092944,
            #154f79
        );

    box-shadow:
        var(--ach-shadow);
}


.achievements-footer-box .eyebrow {
    color:
        #ffd24d;
}


.achievements-footer-box h2 {
    margin:
        0 0 .2rem;

    color:
        #ffffff;

    font-size:
        clamp(
            1.4rem,
            3vw,
            2.1rem
        );

    font-weight:
        950;
}


.achievements-footer-box p:last-child {
    max-width:
        650px;

    margin:
        0;

    color:
        rgba(255,255,255,.7);

    font-size:
        .65rem;

    line-height:
        1.5;
}


.achievements-page .button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        42px;

    padding:
        .65rem .95rem;

    border-radius:
        9px;

    text-decoration:
        none;

    font-size:
        .66rem;

    font-weight:
        900;
}


.achievements-page .button--primary {
    color:
        #0d2b45;

    background:
        linear-gradient(
            135deg,
            #ffd84d,
            #efb426
        );
}


/* =========================================================
   LIGHTBOX
   ========================================================= */

body.achievement-modal-open {
    overflow:
        hidden;
}


.achievement-image-modal {
    position:
        fixed;

    inset:
        0;

    z-index:
        9999;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        1rem;
}


.achievement-image-modal[hidden] {
    display:
        none !important;
}


.achievement-image-modal__backdrop {
    position:
        absolute;

    inset:
        0;

    padding:
        0;

    border:
        0;

    background:
        rgba(4,18,31,.9);

    backdrop-filter:
        blur(6px);

    cursor:
        zoom-out;
}


.achievement-image-modal__dialog {
    position:
        relative;

    z-index:
        2;

    width:
        min(
            94vw,
            1100px
        );

    max-height:
        94vh;

    overflow:
        auto;

    padding:
        .8rem;

    border-radius:
        14px;

    background:
        #ffffff;

    box-shadow:
        0 30px 90px rgba(0,0,0,.38);
}


.achievement-image-modal__dialog > strong {
    display:
        block;

    margin:
        0 2.5rem .6rem 0;

    color:
        var(--ach-text);

    font-size:
        .7rem;

    font-weight:
        900;
}


.achievement-image-modal__dialog img {
    width:
        100%;

    height:
        auto;

    max-height:
        calc(
            94vh - 5rem
        );

    display:
        block;

    object-fit:
        contain;

    border-radius:
        9px;

    background:
        #edf1f4;
}


.achievement-image-modal__close {
    position:
        absolute;

    top:
        .5rem;

    right:
        .5rem;

    width:
        32px;

    height:
        32px;

    display:
        grid;

    place-items:
        center;

    color:
        #465e71;

    border:
        1px solid var(--ach-border);

    border-radius:
        8px;

    background:
        #ffffff;

    cursor:
        pointer;
}


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

.achievements-page summary:focus-visible,
.achievements-page button:focus-visible,
.achievements-page a:focus-visible {
    outline:
        3px solid rgba(225,182,45,.32);

    outline-offset:
        3px;
}


/* =========================================================
   KLEINER DESKTOP
   ========================================================= */

@media (max-width: 1250px) {

    .power-rush-ranking-row {
        grid-template-columns:
            30px
            62px
            minmax(75px,1fr)
            minmax(72px,.65fr)
            minmax(70px,.65fr)
            52px;

        gap:
            .4rem;
    }


    .power-rush-ranking-row__image {
        width:
            62px;

        height:
            48px;
    }


    .power-rush-ranking-row__date strong {
        font-size:
            .53rem;
    }


    .power-rush-ranking-row__score strong {
        font-size:
            .7rem;
    }

}


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

@media (max-width: 1000px) {

    /*
     * Vanaf tablet staan Power Rush en Elite
     * onder elkaar. Daardoor blijven de regels
     * goed leesbaar.
     */

    .power-rush-ranking-columns {
        grid-template-columns:
            1fr;

        gap:
            .7rem;
    }


    .power-rush-ranking-row {
        grid-template-columns:
            34px
            80px
            minmax(120px,1fr)
            minmax(100px,.75fr)
            minmax(90px,.65fr)
            65px;

        min-height:
            76px;

        gap:
            .6rem;
    }


    .power-rush-ranking-row__image {
        width:
            80px;

        height:
            58px;
    }


    .power-rush-ranking-row__player strong {
        font-size:
            .72rem;
    }


    .power-rush-ranking-row__date strong {
        font-size:
            .61rem;
    }


    .power-rush-ranking-row__score strong {
        font-size:
            .82rem;
    }


    .power-rush-ranking-row__count strong {
        font-size:
            .85rem;
    }

}


@media (max-width: 820px) {

    .achievements-hero {
        padding:
            4.7rem 0 3.7rem;
    }


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


    .hall-section__header,
    .records-divider,
    .achievements-team-heading {
        grid-template-columns:
            1fr;
    }


    .achievement-category-summary {
        grid-template-columns:
            auto
            minmax(0,1fr)
            auto;
    }


    .achievement-category-summary__count {
        display:
            none;
    }


    .achievement-subcategory-summary {
        grid-template-columns:
            auto
            minmax(0,1fr)
            auto;
    }


    .achievement-subcategory-summary > small {
        display:
            none;
    }


    /* =============================================
       EREGALERIJ
       ============================================= */

    .achievement-hall-card {
        grid-template-columns:
            36px
            68px
            minmax(0,1fr)
            auto;
    }


    .achievement-hall-card__image {
        width:
            68px;

        height:
            55px;
    }


    /* =============================================
       NORMALE RECORDS
       ============================================= */

    .achievement-record-card {
        grid-template-columns:
            32px
            64px
            minmax(0,1fr);

        grid-template-areas:
            "position image main"
            "position image value";
    }


    .achievement-record-card__position {
        grid-area:
            position;
    }


    .achievement-record-card__image {
        grid-area:
            image;

        width:
            64px;

        height:
            52px;
    }


    .achievement-record-card__main {
        grid-area:
            main;
    }


    .achievement-record-card__value {
        grid-area:
            value;

        min-width:
            0;

        text-align:
            left;
    }


    .achievement-record-card__value small {
        display:
            none;
    }

}


/* =========================================================
   POWER RUSH MOBIEL / SMALLE TABLET
   ========================================================= */

@media (max-width: 680px) {

    .power-rush-ranking-column__header {
        min-height:
            52px;

        padding:
            .55rem .6rem;
    }


    .power-rush-ranking-list {
        padding:
            .4rem;
    }


    .power-rush-ranking-row {
        grid-template-columns:
            30px
            62px
            minmax(0,1fr)
            auto;

        grid-template-areas:
            "position image player count"
            "position image date score";

        gap:
            .25rem .5rem;

        min-height:
            70px;

        padding:
            .45rem;
    }


    .power-rush-ranking-row__position {
        grid-area:
            position;
    }


    .power-rush-ranking-row__image {
        grid-area:
            image;

        width:
            62px;

        height:
            50px;
    }


    .power-rush-ranking-row__player {
        grid-area:
            player;
    }


    .power-rush-ranking-row__date {
        grid-area:
            date;
    }


    .power-rush-ranking-row__score {
        grid-area:
            score;

        text-align:
            right;
    }


    .power-rush-ranking-row__count {
        grid-area:
            count;

        min-width:
            44px;

        padding:
            .25rem .3rem;
    }


    .power-rush-ranking-row__date small,
    .power-rush-ranking-row__score small {
        display:
            none;
    }


    .power-rush-ranking-row__player strong {
        font-size:
            .68rem;
    }


    .power-rush-ranking-row__date strong {
        font-size:
            .56rem;
    }


    .power-rush-ranking-row__score strong {
        font-size:
            .74rem;
    }


    .power-rush-ranking-row__count small {
        font-size:
            .36rem;
    }


    .power-rush-ranking-row__count strong {
        font-size:
            .72rem;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 560px) {

    .achievements-hero {
        padding:
            4rem 0 3.1rem;
    }


    .achievements-hero h1 {
        font-size:
            2.75rem;
    }


    .achievements-hero__intro {
        font-size:
            .84rem;
    }


    .achievements-hero__stats {
        display:
            grid;

        grid-template-columns:
            1fr;
    }


    .achievements-switcher-section {
        margin-top:
            -.8rem;
    }


    .hall-section {
        padding:
            3.5rem 0;
    }


    /* =============================================
       CATEGORIEËN
       ============================================= */

    .achievement-category-summary {
        gap:
            .5rem;

        min-height:
            68px;

        padding:
            .65rem;
    }


    .achievement-category-summary__icon {
        width:
            38px;

        height:
            38px;
    }


    .achievement-category-summary__content > span {
        display:
            none;
    }


    .achievement-category-accordion__body {
        padding:
            .45rem;
    }


    .achievement-subcategory-summary {
        min-height:
            55px;

        padding:
            .48rem .52rem;
    }


    .achievement-subcategory-summary > span:first-child {
        width:
            32px;

        height:
            32px;
    }


    .achievement-subcategory-body {
        padding:
            .4rem;
    }


    /* =============================================
       EREGALERIJ
       ============================================= */

    .achievement-hall-card {
        grid-template-columns:
            30px
            52px
            minmax(0,1fr);

        grid-template-areas:
            "position image main"
            ". . count";

        gap:
            .45rem;

        min-height:
            0;

        padding:
            .52rem;
    }


    .achievement-hall-card__position {
        grid-area:
            position;

        width:
            28px;

        height:
            28px;
    }


    .achievement-hall-card__image {
        grid-area:
            image;

        width:
            52px;

        height:
            46px;
    }


    .achievement-hall-card__main {
        grid-area:
            main;
    }


    .achievement-hall-card__achievement-count {
        grid-area:
            count;

        min-width:
            0;

        text-align:
            left;
    }


    /* =============================================
       POWER RUSH
       ============================================= */

    .power-rush-ranking-column__header > small {
        font-size:
            .42rem;
    }


    .power-rush-ranking-row {
        grid-template-columns:
            28px
            54px
            minmax(0,1fr)
            44px;

        gap:
            .22rem .4rem;

        padding:
            .4rem;
    }


    .power-rush-ranking-row__position {
        width:
            27px;

        height:
            27px;

        font-size:
            .57rem;
    }


    .power-rush-ranking-row__image {
        width:
            54px;

        height:
            46px;
    }


    .power-rush-ranking-row__player strong {
        font-size:
            .65rem;
    }


    .power-rush-ranking-row__date strong {
        font-size:
            .52rem;
    }


    .power-rush-ranking-row__score strong {
        font-size:
            .69rem;
    }


    /* =============================================
       NORMALE RECORDS
       ============================================= */

    .achievement-record-card {
        grid-template-columns:
            28px
            52px
            minmax(0,1fr);

        min-height:
            68px;

        gap:
            .45rem;

        padding:
            .45rem;
    }


    .achievement-record-card__position {
        width:
            26px;

        height:
            26px;
    }


    .achievement-record-card__image {
        width:
            52px;

        height:
            45px;
    }


    .achievement-record-card__main > strong {
        font-size:
            .69rem;
    }


    .achievement-record-card__main > small {
        font-size:
            .48rem;
    }


    .achievement-record-card__value strong {
        font-size:
            .85rem;
    }


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

    .achievements-footer-box {
        align-items:
            stretch;

        flex-direction:
            column;

        padding:
            1.15rem;
    }


    .achievements-page .button {
        width:
            100%;
    }


    .achievement-image-modal {
        padding:
            .45rem;
    }


    .achievement-image-modal__dialog {
        width:
            100%;
    }

}


/* =========================================================
   ZEER KLEIN
   ========================================================= */

@media (max-width: 390px) {

    .power-rush-ranking-column__header strong {
        font-size:
            .65rem;
    }


    .power-rush-ranking-column__header > small {
        display:
            none;
    }


    .power-rush-ranking-row {
        grid-template-columns:
            26px
            48px
            minmax(0,1fr)
            40px;

        gap:
            .2rem .35rem;
    }


    .power-rush-ranking-row__position {
        width:
            25px;

        height:
            25px;
    }


    .power-rush-ranking-row__image {
        width:
            48px;

        height:
            43px;
    }


    .power-rush-ranking-row__player strong {
        font-size:
            .62rem;
    }


    .power-rush-ranking-row__date strong {
        font-size:
            .49rem;
    }


    .power-rush-ranking-row__score strong {
        font-size:
            .65rem;
    }


    .power-rush-ranking-row__count strong {
        font-size:
            .68rem;
    }

}


/* =========================================================
   AANPASSING NIEUWE EREGALERIJ-OPZET
   20.000 CLUB / 10.000 CLUB / #1 NEDERLAND
   ========================================================= */


/* =========================================================
   HALL KAART
   ========================================================= */

.achievement-hall-card {
    min-height: 104px;
}


.achievement-hall-card__main {
    align-self: center;
}


.achievement-hall-card__main > small + small {
    margin-top: .08rem;
}


/* =========================================================
   EERSTE / LAATSTE SCREENSHOT KNOPPEN
   ========================================================= */

.achievement-hall-card__screenshots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: .3rem;

    margin-top: .38rem;
}


.achievement-hall-card__screenshot-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 25px;

    padding: .26rem .46rem;

    border:
        1px solid var(--ach-gold-border);

    border-radius: 7px;

    color:
        #705600;

    background:
        linear-gradient(
            135deg,
            #fff9e7,
            #fff4d0
        );

    cursor: zoom-in;

    font-family: inherit;
    font-size: .48rem;
    font-weight: 900;

    line-height: 1.15;

    white-space: nowrap;

    box-shadow:
        0 2px 6px rgba(9,42,69,.025);

    transition:
        transform var(--ach-transition),
        border-color var(--ach-transition),
        background var(--ach-transition),
        box-shadow var(--ach-transition);
}


.achievement-hall-card__screenshot-button:hover {
    transform: translateY(-1px);

    border-color: #d4b742;

    background:
        linear-gradient(
            135deg,
            #fff5d0,
            #ffedaa
        );

    box-shadow:
        0 3px 9px rgba(9,42,69,.055);
}


.achievement-hall-card__screenshot-button:active {
    transform: translateY(0);
}


.achievement-hall-card__screenshot-button +
.achievement-hall-card__screenshot-button {
    color:
        var(--ach-blue);

    border-color:
        #cbdde8;

    background:
        linear-gradient(
            135deg,
            #f5f9fb,
            #edf5f9
        );
}


.achievement-hall-card__screenshot-button +
.achievement-hall-card__screenshot-button:hover {
    border-color:
        #9fc3d8;

    background:
        #eaf4f9;
}


/* =========================================================
   AANTAL KEER BEHAALD
   ========================================================= */

.achievement-hall-card__achievement-count {
    padding: .42rem .55rem;

    border:
        1px solid #f0dfa1;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #fffbed,
            #fff7d9
        );
}


.achievement-hall-card__achievement-count small {
    color: #8a731c;
}


.achievement-hall-card__achievement-count strong {
    color: #9f7400;
}


.achievement-hall-card__image {
    align-self: center;
}


/* =========================================================
   TABLET - NIEUWE EREGALERIJ
   ========================================================= */

@media (max-width: 820px) {

    .achievement-hall-card {
        min-height: 96px;
    }


    .achievement-hall-card__screenshots {
        gap: .25rem;

        margin-top: .32rem;
    }


    .achievement-hall-card__screenshot-button {
        min-height: 24px;

        padding:
            .23rem .38rem;

        font-size:
            .45rem;
    }


    .achievement-hall-card__achievement-count {
        padding:
            .36rem .46rem;
    }

}


/* =========================================================
   MOBIEL - NIEUWE EREGALERIJ
   ========================================================= */

@media (max-width: 680px) {

    .achievement-hall-card {
        min-height: 0;
    }


    .achievement-hall-card__main > small {
        line-height: 1.38;
    }


    .achievement-hall-card__screenshots {
        width: 100%;

        gap: .24rem;

        margin-top: .32rem;
    }


    .achievement-hall-card__screenshot-button {
        flex: 1 1 auto;

        min-width: 0;
        min-height: 27px;

        padding:
            .25rem .35rem;

        font-size:
            .44rem;

        white-space: normal;

        text-align: center;
    }


    .achievement-hall-card__achievement-count {
        margin-top: .08rem;

        padding:
            .34rem .42rem;
    }


    .achievement-hall-card__achievement-count small {
        font-size: .43rem;
    }


    .achievement-hall-card__achievement-count strong {
        font-size: .84rem;
    }

}


/* =========================================================
   ZEER KLEIN - NIEUWE EREGALERIJ
   ========================================================= */

@media (max-width: 390px) {

    .achievement-hall-card__screenshots {
        display: grid;

        grid-template-columns:
            1fr;

        gap: .22rem;
    }


    .achievement-hall-card__screenshot-button {
        width: 100%;
    }

}

/* =========================================================
   DEFINITIEVE HALL-KAART OPMAAK
   20.000 CLUB / 10.000 CLUB / #1 NEDERLAND
   ========================================================= */

.achievement-hall-card {
    grid-template-columns:
        44px
        90px
        minmax(0, 1fr)
        118px;

    gap: .8rem;

    align-items: start;

    min-height: 0;

    padding: .85rem;

    border: 1px solid #e3e9ed;
    border-radius: 12px;

    background: #ffffff;
}


/* Positie linksboven */
.achievement-hall-card__position {
    margin-top: 0;
}


/* Screenshot / afbeelding links netjes bovenaan */
.achievement-hall-card__image {
    width: 90px;
    height: 72px;

    margin-top: 0;

    align-self: start;
}


/* Hoofdinhoud */
.achievement-hall-card__main {
    min-width: 0;

    align-self: start;
}


/* Naam speler */
.achievement-hall-card__main > strong {
    font-size: .9rem;
    line-height: 1.25;

    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}


/* Datums / kleine informatie */
.achievement-hall-card__main > small {
    margin-top: .22rem;

    color: #62798a;

    font-size: .68rem;
    line-height: 1.45;
}


/* Badges iets beter leesbaar */
.achievement-hall-card__badges {
    gap: .3rem;

    margin-bottom: .32rem;
}

.achievement-team-badge,
.achievement-small-badge {
    min-height: 22px;

    padding: 0 .48rem;

    font-size: .57rem;
}


/* =========================================================
   VERHAALTJE
   ========================================================= */

.achievement-hall-card__story {
    width: 100%;

    margin-top: .7rem;

    padding: .72rem .82rem;

    border: 1px solid #e6ebef;
    border-left: 4px solid var(--ach-gold-border);
    border-radius: 9px;

    background: #f8fafb;

    color: #40596c;

    font-size: .76rem;
    font-weight: 500;
    line-height: 1.65;

    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

.achievement-hall-card__story strong {
    color: var(--ach-blue-dark);
}


/* =========================================================
   SCREENSHOT KNOPPEN
   ========================================================= */

.achievement-hall-card__screenshots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: .38rem;

    margin-top: .55rem;
}

.achievement-hall-card__screenshot-button {
    min-height: 30px;

    padding: .35rem .6rem;

    font-size: .58rem;
}


/* =========================================================
   AANTAL KEER BEHAALD
   ========================================================= */

.achievement-hall-card__achievement-count {
    min-width: 118px;

    margin-top: 0;

    padding: .65rem .7rem;

    align-self: start;

    text-align: center;
}

.achievement-hall-card__achievement-count small {
    font-size: .55rem;
    line-height: 1.2;
}

.achievement-hall-card__achievement-count strong {
    display: block;

    margin-top: .16rem;

    font-size: 1rem;
    line-height: 1.15;
}


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

@media (max-width: 900px) {

    .achievement-hall-card {
        grid-template-columns:
            38px
            72px
            minmax(0, 1fr)
            105px;

        gap: .65rem;

        padding: .72rem;
    }


    .achievement-hall-card__image {
        width: 72px;
        height: 58px;
    }


    .achievement-hall-card__main > strong {
        font-size: .84rem;
    }


    .achievement-hall-card__main > small {
        font-size: .64rem;
    }


    .achievement-hall-card__story {
        margin-top: .6rem;

        padding: .65rem .72rem;

        font-size: .71rem;
        line-height: 1.6;
    }


    .achievement-hall-card__achievement-count {
        min-width: 105px;

        padding: .55rem .6rem;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 680px) {

    .achievement-hall-card {
        grid-template-columns:
            34px
            62px
            minmax(0, 1fr);

        grid-template-areas:
            "position image main"
            ". story story"
            ". count count";

        gap: .55rem .6rem;

        padding: .68rem;
    }


    .achievement-hall-card__position {
        grid-area: position;
    }


    .achievement-hall-card__image {
        grid-area: image;

        width: 62px;
        height: 52px;
    }


    .achievement-hall-card__main {
        grid-area: main;
    }


    .achievement-hall-card__story {
        margin-top: .55rem;

        padding: .62rem .68rem;

        font-size: .7rem;
        line-height: 1.6;
    }


    /*
     * Het verhaal staat in de main-kolom in de HTML.
     * Daarom laten we main op mobiel gewoon de volledige inhoud dragen
     * en zetten we het aantal daaronder.
     */
    .achievement-hall-card__main {
        min-width: 0;
    }


    .achievement-hall-card__achievement-count {
        grid-area: count;

        width: 100%;
        min-width: 0;

        margin-top: .1rem;

        padding: .5rem .6rem;

        text-align: left;
    }


    .achievement-hall-card__achievement-count strong {
        display: inline;

        margin: 0 0 0 .35rem;

        font-size: .88rem;
    }


    .achievement-hall-card__screenshot-button {
        flex: 1 1 auto;

        min-height: 30px;

        padding: .34rem .45rem;

        font-size: .56rem;

        white-space: normal;
        text-align: center;
    }

}


/* =========================================================
   KLEINE MOBIELE SCHERMEN
   ========================================================= */

@media (max-width: 430px) {

    .achievement-hall-card {
        grid-template-columns:
            30px
            54px
            minmax(0, 1fr);

        gap: .48rem;

        padding: .58rem;
    }


    .achievement-hall-card__image {
        width: 54px;
        height: 46px;
    }


    .achievement-hall-card__main > strong {
        font-size: .8rem;
    }


    .achievement-hall-card__main > small {
        font-size: .61rem;
    }


    .achievement-hall-card__story {
        padding: .58rem .62rem;

        font-size: .68rem;
    }


    .achievement-hall-card__screenshots {
        display: grid;

        grid-template-columns: 1fr;

        gap: .3rem;
    }


    .achievement-hall-card__screenshot-button {
        width: 100%;
    }

}


/* =========================================================
   TEAM CLUBSCHILD - RECORDS
   ========================================================= */

.achievements-team-heading__badge--logo {
    padding: 0;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid var(--ach-border);

    box-shadow:
        0 6px 18px rgba(9, 42, 69, .07);
}

.achievements-team-heading__logo {
    width: 100%;
    height: 100%;

    display: block;

    padding: 5px;

    object-fit: contain;
    object-position: center;
}

.achievements-team-heading--d3
.achievements-team-heading__badge--logo {
    background: #ffffff;
}

@media (max-width: 560px) {

    .achievements-team-heading__logo {
        padding: 4px;
    }

}


/* =========================================================
   CLUBSCHILDEN IN BOVENSTE SWITCHER
   ========================================================= */

.achievements-switcher__team-logo {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    overflow: hidden;

    border: 1px solid var(--ach-border);
    border-radius: 10px;

    background: #eef3f6;

    color: var(--ach-text);

    font-size: .62rem;
    font-weight: 950;
}

.achievements-switcher__team-logo--has-image {
    padding: 0;
    background: #ffffff;
}

.achievements-switcher__team-logo img {
    width: 100%;
    height: 100%;

    display: block;

    padding: 4px;

    object-fit: contain;
    object-position: center;
}

@media (max-width: 560px) {
    .achievements-switcher__team-logo img {
        padding: 3px;
    }
}

/* =========================================================
   SPELERSRECORDS — definitieve subcategorie-layout
   PHP: eregalerij-PRESTATIES-RECHTS.php

   Desktop + mobiel:
   [icoon] [titel]       [57 prestaties] [pijl]
           [100.000+]
   ========================================================= */

.achievement-subcategory-summary {
    grid-template-columns: 36px minmax(0, 1fr) auto auto !important;
    grid-template-rows: auto auto !important;
    column-gap: .65rem !important;
    row-gap: .12rem !important;
    align-items: center !important;
}

/* Icoon links, over beide tekstregels */
.achievement-subcategory-summary > span:first-child {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
}

/* Titel linksboven */
.achievement-subcategory-summary > strong {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: end !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

/* Toelichting/eis direct onder de titel */
.achievement-subcategory-summary > .achievement-subcategory-summary__threshold {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
    justify-self: start !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ach-text-soft) !important;
    font-size: .52rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

/* Aantal helemaal rechts, net vóór het pijltje */
.achievement-subcategory-summary > .achievement-subcategory-summary__count {
    display: block !important;
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    justify-self: end !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ach-text-soft) !important;
    font-size: .52rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-align: right !important;
    white-space: nowrap !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Chevron blijft uiterst rechts */
.achievement-subcategory-summary > .achievement-chevron {
    grid-column: 4 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    justify-self: end !important;
}

/* Mobiel: exact dezelfde logica, alleen compacter */
@media (max-width: 760px) {
    .achievement-subcategory-summary {
        grid-template-columns: 32px minmax(0, 1fr) auto auto !important;
        grid-template-rows: auto auto !important;
        column-gap: .45rem !important;
        row-gap: .10rem !important;
        min-height: 55px !important;
        padding: .48rem .52rem !important;
    }

    .achievement-subcategory-summary > .achievement-subcategory-summary__threshold {
        display: block !important;
        font-size: .50rem !important;
    }

    .achievement-subcategory-summary > .achievement-subcategory-summary__count {
        display: block !important;
        font-size: .50rem !important;
        max-width: none !important;
    }
}

/* Zeer smalle telefoons: teller blijft rechts zichtbaar */
@media (max-width: 430px) {
    .achievement-subcategory-summary {
        grid-template-columns: 30px minmax(0, 1fr) auto auto !important;
        column-gap: .34rem !important;
    }

    .achievement-subcategory-summary > strong {
        font-size: .68rem !important;
    }

    .achievement-subcategory-summary > .achievement-subcategory-summary__threshold,
    .achievement-subcategory-summary > .achievement-subcategory-summary__count {
        font-size: .47rem !important;
    }
}

.achievements-page .achievement-extra-card[hidden] { display: none !important; }
.achievements-page :is(.achievement-hall-ranking, .achievement-record-ranking, .power-rush-ranking-list):not(.is-expanded) > article:nth-of-type(n+11) { display: none !important; }
.achievements-page button.achievement-more-button { display: block; margin: .8rem auto 1.2rem; padding: .4rem .8rem; border: 1px solid #d8b944; border-radius: 999px; background: #fff8db; color: #573d00; font-family: inherit; font-size: .73rem !important; line-height: 1.3; font-weight: 800; cursor: pointer; }
@media (max-width: 430px) { .achievements-page button.achievement-more-button { font-size: .68rem !important; } }
.achievement-more-button:hover, .achievement-more-button:focus-visible { background: #f5e7aa; }

.df-record-focus { outline: 3px solid #e2b532; outline-offset: 3px; scroll-margin-top: 200px; }