/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-hwjq3gfyrg] {
    position: relative;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    background: #faf9f7;
}

main[b-hwjq3gfyrg] {
    min-width: 0;
    flex: 1;
}

.sidebar[b-hwjq3gfyrg] {
    position: relative;
    z-index: 10;
    flex-shrink: 0;
}

.top-row[b-hwjq3gfyrg] {
    position: relative;
    z-index: 5;
    display: flex;
    min-height: 4rem;
    align-items: center;
    justify-content: flex-end;
    padding: 0.65rem 1.5rem;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(250, 158, 55, 0.18);
    box-shadow: 0 2px 10px rgba(67, 42, 20, 0.04);
    backdrop-filter: blur(8px);
}

.content[b-hwjq3gfyrg] {
    box-sizing: border-box;
    width: 100%;
    padding: 1.5rem;
}

/* Synchronisatiebediening */

.sync-container[b-hwjq3gfyrg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.last-sync-container[b-hwjq3gfyrg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.last-sync[b-hwjq3gfyrg] {
    color: #796d64;
    font-size: 0.7rem;
    font-weight: 650;
    white-space: nowrap;
}

.last-sync-age[b-hwjq3gfyrg] {
    display: inline-flex;
    min-width: 38px;
    min-height: 30px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.65rem;
    color: rgb(145, 71, 0);
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    background: rgba(250, 158, 55, 0.14);
    border: 1px solid rgba(250, 158, 55, 0.65);
    border-radius: 999px;
    box-shadow: 0 2px 7px rgba(250, 158, 55, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.65);
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

    .last-sync-age:hover[b-hwjq3gfyrg] {
        color: rgb(116, 54, 0);
        background: rgba(250, 158, 55, 0.22);
        border-color: rgb(250, 158, 55);
        box-shadow: 0 3px 9px rgba(250, 158, 55, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }

.sync-button[b-hwjq3gfyrg] {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    padding: 0;
    cursor: pointer;
    place-items: center;
    color: rgb(183, 96, 3);
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1;
    background: rgba(255, 255, 255, 0.0);
    border: 1px solid rgba(250, 158, 55, 0.0);
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

    .sync-button:hover:not(:disabled)[b-hwjq3gfyrg] {
        transform: rotate(180deg);
    }

    .sync-button:active:not(:disabled)[b-hwjq3gfyrg] {
        transform: rotate(180deg);
    }

    .sync-button:focus-visible[b-hwjq3gfyrg] {
        outline: 3px solid rgba(250, 158, 55, 0.28);
        outline-offset: 2px;
    }

    .sync-button:disabled[b-hwjq3gfyrg] {
        cursor: wait;
        opacity: 0.65;
    }

.sync-button--active[b-hwjq3gfyrg] {
    animation: sync-button-rotate-b-hwjq3gfyrg 900ms linear infinite;
}

/* Fullscreen synchronisatie-overlay */

.sync-overlay[b-hwjq3gfyrg] {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: grid;
    padding: 1.25rem;
    place-items: center;
    background: rgba(15, 10, 6, 0.72);
    backdrop-filter: blur(5px);
    cursor: wait;
}

.sync-dialog[b-hwjq3gfyrg] {
    display: flex;
    width: min(440px, 100%);
    box-sizing: border-box;
    align-items: center;
    gap: 1.25rem;
    padding: 1.4rem;
    background: radial-gradient( circle at top right, rgba(250, 158, 55, 0.18), transparent 55% ), #ffffff;
    border: 1px solid rgba(250, 158, 55, 0.45);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32), 0 8px 24px rgba(250, 158, 55, 0.16);
}

.sync-dialog--success[b-hwjq3gfyrg] {
    background: radial-gradient( circle at top right, rgba(34, 151, 78, 0.14), transparent 55% ), #ffffff;
    border-color: rgba(34, 151, 78, 0.42);
}

.sync-dialog__content[b-hwjq3gfyrg] {
    min-width: 0;
}

    .sync-dialog__content h2[b-hwjq3gfyrg] {
        margin: 0 0 0.35rem;
        color: #28221e;
        font-size: 1.1rem;
        font-weight: 850;
    }

    .sync-dialog__content p[b-hwjq3gfyrg] {
        margin: 0;
        color: #665b53;
        font-size: 0.82rem;
        line-height: 1.5;
    }

    .sync-dialog__content span[b-hwjq3gfyrg] {
        display: block;
        margin-top: 0.55rem;
        color: #96887d;
        font-size: 0.68rem;
    }

.sync-duration[b-hwjq3gfyrg] {
    color: #287447 !important;
    font-weight: 800;
}

.sync-progress[b-hwjq3gfyrg] {
    position: relative;
    width: 100%;
    height: 0.35rem;
    margin-top: 0.9rem;
    overflow: hidden;
    background: rgba(250, 158, 55, 0.18);
    border-radius: 999px;
}

.sync-progress__bar[b-hwjq3gfyrg] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, rgb(250, 158, 55), rgb(224, 108, 21));
    border-radius: inherit;
    transition: width 250ms ease-out;
}

.sync-spinner[b-hwjq3gfyrg] {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    box-sizing: border-box;
    border: 5px solid rgba(250, 158, 55, 0.18);
    border-top-color: rgb(250, 158, 55);
    border-radius: 50%;
    animation: sync-spinner-rotate-b-hwjq3gfyrg 800ms linear infinite;
}

.sync-success-icon[b-hwjq3gfyrg] {
    display: grid;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    place-items: center;
    color: #ffffff;
    font-size: 1.55rem;
    font-weight: 900;
    background: linear-gradient( 135deg, rgb(38, 166, 91), rgb(24, 125, 65) );
    border-radius: 50%;
    box-shadow: 0 7px 18px rgba(34, 151, 78, 0.27);
    animation: sync-success-appear-b-hwjq3gfyrg 300ms ease-out;
}

/* Foutmelding */

.sync-notification[b-hwjq3gfyrg] {
    position: fixed;
    z-index: 10000;
    right: 1.25rem;
    bottom: 1.25rem;
    display: flex;
    width: min(420px, calc(100% - 2.5rem));
    box-sizing: border-box;
    align-items: center;
    gap: 0.8rem;
    padding: 0.9rem;
    background: #ffffff;
    border: 1px solid;
    border-radius: 15px;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.18);
    animation: sync-notification-appear-b-hwjq3gfyrg 250ms ease-out;
}

.sync-notification--error[b-hwjq3gfyrg] {
    border-color: rgba(196, 43, 43, 0.35);
}

.sync-notification__icon[b-hwjq3gfyrg] {
    display: grid;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    place-items: center;
    color: #ffffff;
    font-weight: 900;
    background: #c42b2b;
    border-radius: 10px;
}

.sync-notification__content[b-hwjq3gfyrg] {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 0.15rem;
}

    .sync-notification__content strong[b-hwjq3gfyrg] {
        color: #702020;
        font-size: 0.78rem;
    }

    .sync-notification__content span[b-hwjq3gfyrg] {
        color: #765d5d;
        font-size: 0.7rem;
        line-height: 1.4;
    }

.sync-notification__close[b-hwjq3gfyrg] {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    padding: 0;
    cursor: pointer;
    place-items: center;
    color: #8f7777;
    font-size: 1.1rem;
    background: transparent;
    border: 0;
    border-radius: 7px;
}

    .sync-notification__close:hover[b-hwjq3gfyrg] {
        color: #702020;
        background: rgba(196, 43, 43, 0.08);
    }

/* Blazor-foutmelding */

#blazor-error-ui[b-hwjq3gfyrg] {
    position: fixed;
    z-index: 10001;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    padding: 0.75rem 1.25rem;
    color: #34271d;
    background: #fff3cd;
    border-top: 1px solid #f1d58a;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
}

    #blazor-error-ui .reload[b-hwjq3gfyrg] {
        margin-left: 0.75rem;
        color: rgb(145, 71, 0);
        font-weight: 700;
    }

    #blazor-error-ui .dismiss[b-hwjq3gfyrg] {
        position: absolute;
        top: 0.55rem;
        right: 0.75rem;
        cursor: pointer;
    }

/* Animaties */

@keyframes sync-spinner-rotate-b-hwjq3gfyrg {
    to {
        transform: rotate(360deg);
    }
}

@keyframes sync-button-rotate-b-hwjq3gfyrg {
    to {
        transform: rotate(360deg);
    }
}

@keyframes sync-success-appear-b-hwjq3gfyrg {
    from {
        opacity: 0;
        transform: scale(0.65);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes sync-notification-appear-b-hwjq3gfyrg {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Desktop */

@media (min-width: 641px) {
    .page[b-hwjq3gfyrg] {
        flex-direction: row;
    }

    .sidebar[b-hwjq3gfyrg] {
        position: sticky;
        top: 0;
        width: 250px;
        height: 100vh;
    }

    .top-row[b-hwjq3gfyrg] {
        position: sticky;
        top: 0;
    }

    .content[b-hwjq3gfyrg] {
        padding: 1.75rem 2rem;
    }
}

/* Mobiel */

@media (max-width: 640px) {
    .page[b-hwjq3gfyrg] {
        min-height: 100vh;
    }

    .sidebar[b-hwjq3gfyrg] {
        position: relative;
        width: 100%;
    }

    .top-row[b-hwjq3gfyrg] {
        min-height: 3.75rem;
        padding: 0.55rem 0.85rem;
    }

    .content[b-hwjq3gfyrg] {
        padding: 1rem;
    }

    .last-sync[b-hwjq3gfyrg] {
        display: none;
    }

    .last-sync-age[b-hwjq3gfyrg] {
        min-width: 36px;
        min-height: 28px;
        padding: 0.2rem 0.55rem;
    }

    .sync-button[b-hwjq3gfyrg] {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
    }

    .sync-dialog[b-hwjq3gfyrg] {
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    .sync-notification[b-hwjq3gfyrg] {
        right: 0.75rem;
        bottom: 0.75rem;
        width: calc(100% - 1.5rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sync-spinner[b-hwjq3gfyrg],
    .sync-button--active[b-hwjq3gfyrg] {
        animation-duration: 1800ms;
    }

    .sync-success-icon[b-hwjq3gfyrg],
    .sync-notification[b-hwjq3gfyrg] {
        animation: none;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Complete sidebar */

.sidebar-shell[b-le3jobt6y9] {
    position: relative;
    display: flex;
    width: 100%;
    height: 100vh;
    flex-direction: column;
    overflow: hidden;
    color: #ffffff;
    background: radial-gradient( circle at bottom center, rgba(250, 158, 55, 0.32) 0%, rgba(250, 158, 55, 0.12) 25%, transparent 55% ), linear-gradient( 180deg, #050505 0%, #080706 55%, rgb(28, 17, 8) 78%, rgb(95, 47, 8) 100% );
}

/* Header en logo */

.sidebar-header[b-le3jobt6y9] {
    display: flex;
    min-height: 4rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
}

.sidebar-brand[b-le3jobt6y9] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.65rem;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 750;
    text-decoration: none;
}

    .sidebar-brand:hover[b-le3jobt6y9],
    .sidebar-brand:focus[b-le3jobt6y9] {
        color: #ffffff;
        text-decoration: none;
    }

.brand-avatar[b-le3jobt6y9] {
    display: grid;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    place-items: center;
}

    .brand-avatar img[b-le3jobt6y9] {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

/* Profielkaart */

.profile-card[b-le3jobt6y9] {
    margin: 0 0.8rem 1rem;
    padding: 1rem;
    background: radial-gradient( circle at top right, rgba(250, 158, 55, 0.1), transparent 50% ), rgba(0, 0, 0, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 17px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.profile-card__top[b-le3jobt6y9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.profile-avatar[b-le3jobt6y9] {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #21150a;
    font-weight: 850;
    background: linear-gradient( 135deg, rgb(250, 158, 55), rgb(255, 190, 112) );
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(250, 158, 55, 0.25);
}

.profile-information[b-le3jobt6y9] {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

    .profile-information strong[b-le3jobt6y9] {
        overflow: hidden;
        color: #ffffff;
        font-size: 0.82rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .profile-information span[b-le3jobt6y9] {
        margin-top: 0.15rem;
        color: #8e8984;
        font-size: 0.7rem;
    }

.server-status[b-le3jobt6y9] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.85rem;
    padding-top: 0.7rem;
    color: #aaa39d;
    font-size: 0.68rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.status-dot[b-le3jobt6y9] {
    width: 7px;
    height: 7px;
    background: #63d987;
    border-radius: 50%;
    box-shadow: 0 0 7px rgba(99, 217, 135, 0.65);
}

/* Navigatie */

.nav-scrollable[b-le3jobt6y9] {
    position: relative;
    display: none;
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.sidebar-navigation[b-le3jobt6y9] {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0 0.8rem 1rem;
}

    .sidebar-navigation[b-le3jobt6y9]  .nav-link {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        min-height: 2.8rem;
        padding: 0 0.9rem;
        color: #c8c2bd;
        font-size: 0.78rem;
        font-weight: 500;
        text-decoration: none;
        background-color: transparent;
        border: 1px solid transparent;
        border-radius: 9px;
        transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
    }

        .sidebar-navigation[b-le3jobt6y9]  .nav-link:hover {
            color: #ffffff;
            text-decoration: none;
            background-color: rgba(250, 158, 55, 0.1);
            border-color: rgba(250, 158, 55, 0.14);
            transform: translateX(3px);
        }

        .sidebar-navigation[b-le3jobt6y9]  .nav-link.active {
            color: #ffffff;
            font-weight: 650;
            background: linear-gradient( 135deg, rgb(250, 137, 20), rgb(255, 161, 38) );
            border-color: rgba(255, 190, 105, 0.55);
            box-shadow: 0 6px 17px rgba(250, 120, 10, 0.27), inset 0 1px 0 rgba(255, 255, 255, 0.25);
        }

.nav-icon[b-le3jobt6y9] {
    display: grid;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    place-items: center;
    color: #ffffff;
    font-size: 1rem;
    line-height: 1;
}

.sidebar-navigation[b-le3jobt6y9]
 .nav-link:not(.active) .nav-icon {
    color: #d8d1cb;
}

/* Afbeelding onderaan */

.sidebar-art[b-le3jobt6y9] {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 50%;
    display: block;
    width: 82%;
    height: auto;
    max-height: 225px;
    object-fit: contain;
    object-position: bottom center;
    opacity: 0.9;
    transform: translateX(-50%);
    pointer-events: none;
}

/* Footer */

.sidebar-footer[b-le3jobt6y9] {
    position: absolute;
    z-index: 4;
    right: 1rem;
    bottom: 0.8rem;
    left: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.58rem;
}

    .sidebar-footer small[b-le3jobt6y9] {
        font-size: inherit;
    }

/* Mobiele hamburgerknop */

.navbar-toggler[b-le3jobt6y9] {
    appearance: none;
    position: absolute;
    z-index: 20;
    top: 0.8rem;
    right: 1rem;
    display: none;
    width: 42px;
    height: 38px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28250, 158, 55, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center / 1.55rem, rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(250, 158, 55, 0.35);
    border-radius: 10px;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

    .navbar-toggler:hover[b-le3jobt6y9] {
        background-color: rgba(250, 158, 55, 0.1);
        border-color: rgba(250, 158, 55, 0.7);
    }

    .navbar-toggler:checked[b-le3jobt6y9] {
        background-color: rgba(250, 158, 55, 0.18);
        border-color: rgb(250, 158, 55);
        box-shadow: 0 0 0 3px rgba(250, 158, 55, 0.1);
    }

        /*
    Dit werkt alleen wanneer .navbar-toggler en
    .nav-scrollable siblings zijn binnen .sidebar-shell.
*/
        .navbar-toggler:checked ~ .nav-scrollable[b-le3jobt6y9] {
            display: block;
        }

/* Scrollbar */

.nav-scrollable[b-le3jobt6y9]::-webkit-scrollbar {
    width: 6px;
}

.nav-scrollable[b-le3jobt6y9]::-webkit-scrollbar-track {
    background: transparent;
}

.nav-scrollable[b-le3jobt6y9]::-webkit-scrollbar-thumb {
    background: rgba(250, 158, 55, 0.25);
    border-radius: 999px;
}

    .nav-scrollable[b-le3jobt6y9]::-webkit-scrollbar-thumb:hover {
        background: rgba(250, 158, 55, 0.45);
    }

/* Desktop */

@media (min-width: 641px) {
    .navbar-toggler[b-le3jobt6y9] {
        display: none;
    }

    .nav-scrollable[b-le3jobt6y9] {
        display: block;
    }
}

/* Mobiel */

@media (max-width: 640px) {
    .sidebar-shell[b-le3jobt6y9] {
        height: auto;
        min-height: 4rem;
        overflow: visible;
    }

    .sidebar-header[b-le3jobt6y9] {
        min-height: 4rem;
        padding-right: 4.5rem;
    }

    .navbar-toggler[b-le3jobt6y9] {
        display: block;
    }

    .profile-card[b-le3jobt6y9] {
        display: none;
    }

    .nav-scrollable[b-le3jobt6y9] {
        width: 100%;
        max-height: calc(100vh - 4rem);
        padding: 0.5rem 0 1rem;
        overflow-x: hidden;
        overflow-y: auto;
        background: linear-gradient( 180deg, #080706 0%, rgb(28, 17, 8) 70%, rgb(65, 34, 9) 100% );
        border-top: 1px solid rgba(250, 158, 55, 0.14);
        border-bottom: 1px solid rgba(250, 158, 55, 0.22);
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
    }

    .sidebar-navigation[b-le3jobt6y9] {
        padding: 0 0.75rem;
    }

        .sidebar-navigation[b-le3jobt6y9]  .nav-link {
            min-height: 3rem;
            font-size: 0.85rem;
        }

    
    .sidebar-art[b-le3jobt6y9],
    .sidebar-footer[b-le3jobt6y9] {
        display: none;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-sivxzgculf],
.components-reconnect-repeated-attempt-visible[b-sivxzgculf],
.components-reconnect-failed-visible[b-sivxzgculf],
.components-pause-visible[b-sivxzgculf],
.components-resume-failed-visible[b-sivxzgculf],
.components-rejoining-animation[b-sivxzgculf] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-sivxzgculf],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-sivxzgculf],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-sivxzgculf],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-sivxzgculf],
#components-reconnect-modal.components-reconnect-retrying[b-sivxzgculf],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-sivxzgculf],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-sivxzgculf],
#components-reconnect-modal.components-reconnect-failed[b-sivxzgculf],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-sivxzgculf] {
    display: block;
}


#components-reconnect-modal[b-sivxzgculf] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-sivxzgculf 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-sivxzgculf 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-sivxzgculf 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-sivxzgculf]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-sivxzgculf 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-sivxzgculf {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-sivxzgculf {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-sivxzgculf {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-sivxzgculf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-sivxzgculf] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-sivxzgculf] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-sivxzgculf] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-sivxzgculf] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-sivxzgculf] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-sivxzgculf] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-sivxzgculf 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-sivxzgculf] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-sivxzgculf {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/ChamekungluColor.razor.rz.scp.css */
.color-editor[b-kwqmfv3mag] {
    --accent: 250, 158, 55;
    box-sizing: border-box;
    width: min(100%, 760px);
    margin: 0 auto;
    padding: 2rem;
    color: #242424;
    background: radial-gradient( circle at top right, rgba(var(--accent), 0.18), transparent 55% ), #ffffff;
    border: 1px solid rgba(var(--accent), 0.3);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(var(--accent), 0.12), 0 2px 6px rgba(0, 0, 0, 0.05);
}

    .color-editor h1[b-kwqmfv3mag] {
        margin: 0 0 1.5rem;
        font-size: clamp(1.55rem, 4vw, 2rem);
        font-weight: 800;
        line-height: 1.2;
        text-align: center;
    }

.editor-layout[b-kwqmfv3mag] {
    display: grid;
    grid-template-columns: minmax(220px, 1.15fr) minmax(260px, 0.85fr);
    align-items: start;
    gap: 1.5rem;
}

.character-preview[b-kwqmfv3mag] {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
}

.character-canvas[b-kwqmfv3mag] {
    display: block;
    box-sizing: border-box;
    width: min(100%, 520px);
    height: auto;
    margin: 0 auto;
    background: rgba(var(--accent), 0.06);
    border: 1px solid rgba(var(--accent), 0.22);
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(var(--accent), 0.14);
}

.controls[b-kwqmfv3mag] {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(var(--accent), 0.22);
    border-radius: 18px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.preset-section[b-kwqmfv3mag] {
    padding-top: 1rem;
    border-top: 1px solid rgba(var(--accent), 0.2);
}

.preset-title[b-kwqmfv3mag] {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.preset-colors[b-kwqmfv3mag] {
    display: grid;
    grid-template-columns: repeat(4, 44px);
    gap: 0.65rem;
}

.preset-color[b-kwqmfv3mag] {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    cursor: pointer;
    border: 2px solid rgba(36, 36, 36, 0.25);
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

    .preset-color:hover[b-kwqmfv3mag] {
        transform: translateY(-2px) scale(1.06);
        border-color: #242424;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
    }

    .preset-color[aria-pressed="true"][b-kwqmfv3mag] {
        border-color: #242424;
        box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px rgba(var(--accent), 0.75), 0 5px 12px rgba(0, 0, 0, 0.16);
    }

        .preset-color[aria-pressed="true"][b-kwqmfv3mag]::after {
            position: absolute;
            inset: 0;
            display: grid;
            color: #242424;
            font-size: 1rem;
            font-weight: 900;
            content: "✓";
            place-items: center;
            text-shadow: 0 0 3px #ffffff, 0 0 3px #ffffff;
        }

.color-picker-row[b-kwqmfv3mag],
.slider-row[b-kwqmfv3mag],
.preview-row[b-kwqmfv3mag] {
    box-sizing: border-box;
    min-width: 0;
}

.color-picker-row[b-kwqmfv3mag] {
    display: grid;
    grid-template-columns: 80px 52px minmax(0, 120px);
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(var(--accent), 0.2);
}

    .color-picker-row > span[b-kwqmfv3mag],
    .slider-row > span[b-kwqmfv3mag],
    .preview-row > span:first-child[b-kwqmfv3mag] {
        font-size: 0.9rem;
        font-weight: 700;
    }

    .color-picker-row input[type="color"][b-kwqmfv3mag] {
        width: 52px;
        height: 42px;
        padding: 3px;
        cursor: pointer;
        background: #ffffff;
        border: 1px solid rgba(var(--accent), 0.55);
        border-radius: 10px;
    }

.hex-input[b-kwqmfv3mag] {
    box-sizing: border-box;
    width: 100%;
    padding: 0.65rem 0.75rem;
    color: #242424;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    background: #ffffff;
    border: 1px solid rgba(var(--accent), 0.4);
    border-radius: 10px;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

    .hex-input:focus[b-kwqmfv3mag] {
        border-color: rgb(var(--accent));
        box-shadow: 0 0 0 3px rgba(var(--accent), 0.16);
    }

.slider-row[b-kwqmfv3mag] {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 0.75rem;
}

    .slider-row input[type="range"][b-kwqmfv3mag] {
        width: 100%;
        height: 6px;
        margin: 0;
        cursor: pointer;
        accent-color: rgb(var(--accent));
    }

    .slider-row output[b-kwqmfv3mag] {
        color: rgb(183, 96, 3);
        font-size: 0.8rem;
        font-weight: 750;
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

.preview-row[b-kwqmfv3mag] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.25rem;
    padding: 1rem;
    background: rgba(var(--accent), 0.08);
    border: 1px solid rgba(var(--accent), 0.2);
    border-radius: 14px;
}

    .preview-row > span:first-child[b-kwqmfv3mag] {
        margin-right: auto;
    }

.color-preview[b-kwqmfv3mag] {
    display: block;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border: 2px solid #242424;
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14);
}

.preview-row strong[b-kwqmfv3mag] {
    min-width: 68px;
    color: #242424;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.reset-button[b-kwqmfv3mag] {
    justify-self: start;
    padding: 0.65rem 1rem;
    color: #ffffff;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    background: rgb(196, 99, 0);
    border: 1px solid rgb(196, 99, 0);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(var(--accent), 0.2);
    transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

    .reset-button:hover[b-kwqmfv3mag] {
        transform: translateY(-2px);
        background: rgb(var(--accent));
        border-color: rgb(var(--accent));
        box-shadow: 0 7px 16px rgba(var(--accent), 0.28);
    }

    .reset-button:focus-visible[b-kwqmfv3mag],
    .preset-color:focus-visible[b-kwqmfv3mag],
    .color-picker-row input:focus-visible[b-kwqmfv3mag],
    .slider-row input:focus-visible[b-kwqmfv3mag] {
        outline: 3px solid rgba(var(--accent), 0.3);
        outline-offset: 3px;
    }

    .reset-button:active[b-kwqmfv3mag] {
        transform: translateY(0);
    }

@media (max-width: 640px) {
    .color-editor[b-kwqmfv3mag] {
        padding: 1.25rem;
        border-radius: 18px;
    }

    .character-canvas[b-kwqmfv3mag] {
        border-radius: 14px;
    }

    .editor-layout[b-kwqmfv3mag] {
        grid-template-columns: minmax(180px, 1fr) minmax(230px, 1fr);
        align-items: start;
        gap: 0.85rem;
        overflow-x: auto;
    }

    .controls[b-kwqmfv3mag] {
        padding: 1rem;
        border-radius: 14px;
    }

    .color-picker-row[b-kwqmfv3mag] {
        grid-template-columns: 1fr 52px;
    }

    .hex-input[b-kwqmfv3mag] {
        grid-column: 1 / -1;
    }

    .slider-row[b-kwqmfv3mag] {
        grid-template-columns: 62px minmax(0, 1fr) 36px;
        gap: 0.55rem;
    }

    .preview-row[b-kwqmfv3mag] {
        flex-wrap: wrap;
    }

        .preview-row > span:first-child[b-kwqmfv3mag] {
            flex: 1 0 100%;
            margin-right: 0;
        }

    .reset-button[b-kwqmfv3mag] {
        width: 100%;
    }

    .preset-colors[b-kwqmfv3mag] {
        grid-template-columns: repeat(7, minmax(34px, 1fr));
    }

    .preset-color[b-kwqmfv3mag] {
        width: min(44px, 100%);
        aspect-ratio: 1;
        height: auto;
    }
}

@media (max-width: 420px) {
    .preset-colors[b-kwqmfv3mag] {
        grid-template-columns: repeat(4, 44px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .reset-button[b-kwqmfv3mag],
    .preset-color[b-kwqmfv3mag],
    .hex-input[b-kwqmfv3mag] {
        transition: none;
    }
}
/* /Components/Pages/PlayerDetails.razor.rz.scp.css */
.player-details-page[b-ygxdd3fy01] {
    --status-missing: 132, 139, 148;
    --status-registered: 250, 158, 55;
    --status-caught: 91, 92, 226;
    --status-owned: 35, 158, 88;
    --status-shiny: 218, 165, 32;
    width: 100%;
}

.back-link[b-ygxdd3fy01] {
    display: inline-block;
    margin-bottom: 1.25rem;
    color: rgb(196, 99, 0);
    font-size: 0.85rem;
    font-weight: 650;
    text-decoration: none;
}

    .back-link:hover[b-ygxdd3fy01] {
        color: rgb(250, 158, 55);
    }

.player-not-found[b-ygxdd3fy01] {
    padding: 2rem;
    text-align: center;
    background: #ffffff;
    border: 1px solid rgba(250, 158, 55, 0.3);
    border-radius: 18px;
}

    .player-not-found a[b-ygxdd3fy01] {
        color: rgb(196, 99, 0);
    }

/* Spelersdashboard */

.player-dashboard[b-ygxdd3fy01] {
    display: grid;
    grid-template-columns: minmax(210px, 0.75fr) minmax(280px, 1fr) minmax(520px, 1.8fr);
    gap: 2rem;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: radial-gradient( circle at top right, rgba(250, 158, 55, 0.14), transparent 48% ), #ffffff;
    border: 1px solid rgba(250, 158, 55, 0.3);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(250, 158, 55, 0.11), 0 2px 6px rgba(0, 0, 0, 0.04);
}

.player-dashboard__identity[b-ygxdd3fy01] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.25rem;
    text-align: center;
}

.player-dashboard__avatar[b-ygxdd3fy01] {
    display: block;
    width: 132px;
    height: 132px;
    image-rendering: pixelated;
    object-fit: cover;
    background: rgba(250, 158, 55, 0.12);
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(250, 158, 55, 0.22);
}

.player-dashboard__name[b-ygxdd3fy01] {
    min-width: 0;
}

    .player-dashboard__name h1[b-ygxdd3fy01] {
        max-width: 100%;
        margin: 0;
        overflow-wrap: normal;
        color: #242424;
        font-size: 1rem;
        font-weight: 850;
    }

/* Generatiestatistieken */

.generation-statistics[b-ygxdd3fy01] {
    min-width: 0;
    padding: 0.25rem 0;
}

.statistics-header[b-ygxdd3fy01] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.statistics-label[b-ygxdd3fy01] {
    display: block;
    margin-bottom: 0.2rem;
    color: rgb(183, 96, 3);
    font-size: 0.65rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.statistics-header h2[b-ygxdd3fy01] {
    margin: 0;
    color: #29231f;
    font-size: 1rem;
    font-weight: 800;
}

.statistics-mode-toggle[b-ygxdd3fy01] {
    display: flex;
    flex-shrink: 0;
    gap: 3px;
    padding: 3px;
    background: rgba(250, 158, 55, 0.08);
    border: 1px solid rgba(250, 158, 55, 0.24);
    border-radius: 10px;
}

.statistics-mode-button[b-ygxdd3fy01] {
    min-height: 30px;
    padding: 0.35rem 0.55rem;
    cursor: pointer;
    color: #77685c;
    font-size: 0.65rem;
    font-weight: 700;
    background: transparent;
    border: 0;
    border-radius: 7px;
}

    .statistics-mode-button.active[b-ygxdd3fy01] {
        color: #ffffff;
        background: linear-gradient( 135deg, rgb(250, 137, 20), rgb(250, 158, 55) );
        box-shadow: 0 3px 8px rgba(250, 137, 20, 0.22);
    }

.generation-list[b-ygxdd3fy01] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.generation-row[b-ygxdd3fy01] {
    min-width: 0;
}

.generation-row__information[b-ygxdd3fy01] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
    color: #66584e;
    font-size: 0.68rem;
}

    .generation-row__information strong[b-ygxdd3fy01] {
        color: rgb(24, 120, 66);
        font-size: 0.65rem;
    }

.generation-progress[b-ygxdd3fy01] {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 8px;
    background: #e9ecea;
    border-radius: 999px;
}

.generation-progress__value[b-ygxdd3fy01] {
    height: 100%;
    background: linear-gradient( 90deg, rgb(24, 132, 70), rgb(79, 190, 119) );
    border-radius: inherit;
    box-shadow: 0 0 9px rgba(var(--status-owned), 0.35);
    transition: width 250ms ease;
}

/* Samenvattingsstatistieken */

.player-dashboard__right[b-ygxdd3fy01] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1.4rem;
}

.summary-statistics[b-ygxdd3fy01] {
    display: grid;
    grid-template-columns: repeat(4, minmax(100px, 1fr));
    gap: 0.85rem;
}

.summary-statistic[b-ygxdd3fy01] {
    min-width: 0;
    text-align: center;
}

    .summary-statistic h3[b-ygxdd3fy01] {
        margin: 0.55rem 0 0;
        color: #62554b;
        font-size: 0.68rem;
        font-weight: 750;
    }

.summary-chart[b-ygxdd3fy01] {
    --chart-color: rgb(var(--status-registered));
    --progress: 0deg;
    position: relative;
    display: grid;
    width: 92px;
    height: 92px;
    margin: 0 auto;
    place-items: center;
    background: conic-gradient( var(--chart-color) 0deg, var(--chart-color) var(--progress), #ebe7e3 var(--progress), #ebe7e3 360deg );
    border-radius: 50%;
}

    .summary-chart[b-ygxdd3fy01]::before {
        position: absolute;
        width: 70px;
        height: 70px;
        content: "";
        background: #ffffff;
        border-radius: 50%;
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.035);
    }

.summary-chart__inside[b-ygxdd3fy01] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .summary-chart__inside strong[b-ygxdd3fy01] {
        color: #29231f;
        font-size: 0.68rem;
        font-weight: 800;
    }

    .summary-chart__inside span[b-ygxdd3fy01] {
        margin-top: 0.1rem;
        color: #847469;
        font-size: 0.6rem;
        font-weight: 700;
    }

.summary-chart--registered[b-ygxdd3fy01] {
    --chart-color: rgb(var(--status-registered));
}

.summary-chart--caught[b-ygxdd3fy01] {
    --chart-color: rgb(var(--status-caught));
}

.summary-chart--owned[b-ygxdd3fy01] {
    --chart-color: rgb(var(--status-owned));
}

.summary-chart--shiny[b-ygxdd3fy01] {
    --chart-color: rgb(var(--status-shiny));
    filter: drop-shadow(0 0 5px rgba(var(--status-shiny), 0.28));
}

.additional-statistics[b-ygxdd3fy01] {
    display: grid;
    grid-template-columns: repeat(3, minmax(110px, 1fr));
    gap: 0.65rem;
}

.additional-statistic[b-ygxdd3fy01] {
    display: flex;
    min-width: 0;
    min-height: 62px;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.65rem 0.8rem;
    background: rgba(250, 158, 55, 0.045);
    border: 1px solid rgba(250, 158, 55, 0.18);
    border-radius: 12px;
}

    .additional-statistic span[b-ygxdd3fy01] {
        color: #88796e;
        font-size: 0.63rem;
        font-weight: 650;
    }

    .additional-statistic strong[b-ygxdd3fy01] {
        color: #302923;
        font-size: 0.9rem;
        font-weight: 800;
    }

/* Filterbalk */

.pokemon-filter-bar[b-ygxdd3fy01] {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    align-items: stretch;
    gap: 1.25rem;
    margin: 1.5rem 0 0.75rem;
    padding: 1.1rem;
    background: #ffffff;
    border: 1px solid rgba(250, 158, 55, 0.28);
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(250, 158, 55, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
}

.text-filters[b-ygxdd3fy01] {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) minmax(150px, 1fr) minmax(170px, 1fr);
    width: 100%;
    justify-content: start;
    gap: 0.85rem;
}

.filter-field[b-ygxdd3fy01],
.filter-toggle[b-ygxdd3fy01] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.4rem;
    text-align: left;
}

    .filter-field span[b-ygxdd3fy01],
    .filter-toggle__label[b-ygxdd3fy01] {
        display: block;
        width: 100%;
        color: #69584a;
        font-size: 0.68rem;
        font-weight: 750;
        letter-spacing: 0.04em;
        text-align: left;
        text-transform: uppercase;
    }

    .filter-field input[b-ygxdd3fy01],
    .filter-field select[b-ygxdd3fy01] {
        box-sizing: border-box;
        width: 100%;
        height: 44px;
        padding: 0 0.85rem;
        color: #2d2824;
        font: inherit;
        font-size: 0.85rem;
        background: #ffffff;
        border: 1px solid rgba(250, 158, 55, 0.32);
        border-radius: 11px;
        outline: none;
        transition: border-color 150ms ease, box-shadow 150ms ease;
    }

        .filter-field input:focus[b-ygxdd3fy01],
        .filter-field select:focus[b-ygxdd3fy01] {
            border-color: rgb(250, 158, 55);
            box-shadow: 0 0 0 3px rgba(250, 158, 55, 0.14);
        }

.status-filters[b-ygxdd3fy01] {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0.85rem;
}

.toggle-group[b-ygxdd3fy01] {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    background: rgba(250, 158, 55, 0.08);
    border: 1px solid rgba(250, 158, 55, 0.24);
    border-radius: 12px;
}

.toggle-button[b-ygxdd3fy01] {
    min-height: 38px;
    padding: 0.5rem 0.8rem;
    cursor: pointer;
    color: #77685c;
    font-size: 0.76rem;
    font-weight: 650;
    background: transparent;
    border: 0;
    border-radius: 9px;
    transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

    .toggle-button:hover[b-ygxdd3fy01] {
        color: rgb(183, 96, 3);
        background: rgba(250, 158, 55, 0.13);
    }

    .toggle-button.active[b-ygxdd3fy01] {
        color: #ffffff;
        background: linear-gradient( 135deg, rgb(250, 137, 20), rgb(250, 158, 55) );
        box-shadow: 0 4px 10px rgba(250, 137, 20, 0.24);
    }

    .toggle-button:active[b-ygxdd3fy01] {
        transform: scale(0.97);
    }

.clear-filters-button[b-ygxdd3fy01],
.clear-filters[b-ygxdd3fy01] {
    min-height: 44px;
    padding: 0.6rem 1rem;
    cursor: pointer;
    color: rgb(183, 96, 3);
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
    background: #ffffff;
    border: 1px solid rgba(250, 158, 55, 0.4);
    border-radius: 11px;
}

    .clear-filters-button:hover[b-ygxdd3fy01],
    .clear-filters:hover[b-ygxdd3fy01] {
        color: #ffffff;
        background: rgb(250, 158, 55);
    }

.filter-result-count[b-ygxdd3fy01],
.filter-results[b-ygxdd3fy01] {
    margin: 0 0 0.5rem;
    color: #857568;
    font-size: 0.75rem;
}

.no-filter-results[b-ygxdd3fy01] {
    margin-top: 1rem;
    padding: 2rem;
    color: #777777;
    text-align: center;
    background: #ffffff;
    border: 1px dashed rgba(132, 139, 148, 0.55);
    border-radius: 16px;
}

/* Pokémon-grid */

.pokedex-grid[b-ygxdd3fy01] {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax(250px, 1fr) );
    gap: 1.25rem;
    padding: 1rem 0;
}

/*
 * Standaardstatus: niet geregistreerd.
 * De kaart blijft exact even groot; alleen kleur en beeldfilter wijzigen.
 */

.pokemon-card[b-ygxdd3fy01] {
    --status-color: var(--status-missing);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 0;
    padding: 0;
    background: radial-gradient( circle at top right, rgba(var(--status-color), 0.16), transparent 58% ), #ffffff;
    border: 1px solid rgba(var(--status-color), 0.58);
    border-radius: 18px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.055), 0 1px 3px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.72);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

    .pokemon-card:hover[b-ygxdd3fy01] {
        transform: translateY(-3px);
        border-color: rgba(var(--status-color), 0.9);
        box-shadow: 0 10px 24px rgba(var(--status-color), 0.18), 0 3px 8px rgba(0, 0, 0, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    /* Niet geregistreerd: grijs */

    .pokemon-card.species-missing[b-ygxdd3fy01] {
        --status-color: var(--status-missing);
        background: radial-gradient( circle at top right, rgba(var(--status-missing), 0.17), transparent 58% ), linear-gradient(145deg, #ffffff, #f5f6f7);
        border-color: rgba(var(--status-missing), 0.62);
    }

        .pokemon-card.species-missing .pokemon-title h2[b-ygxdd3fy01] {
            color: #666c73;
        }

        .pokemon-card.species-missing .pokemon-number[b-ygxdd3fy01] {
            color: #7e858d;
        }

    /* Geregistreerd: oranje */

    .pokemon-card.species-encountered[b-ygxdd3fy01] {
        --status-color: var(--status-registered);
        border-color: rgba(var(--status-registered), 0.84);
    }

    /* Gevangen: indigo/blauwviolet */

    .pokemon-card.species-caught[b-ygxdd3fy01] {
        --status-color: var(--status-caught);
        border-color: rgba(var(--status-caught), 0.82);
    }

    /* In bezit: groen */

    .pokemon-card.species-owned[b-ygxdd3fy01] {
        --status-color: var(--status-owned);
        border-color: rgba(var(--status-owned), 0.84);
    }

    /*
 * Shiny: goud met een glijdende lichtreflectie en fonkelstructuur.
 * Beide effecten zijn absoluut gepositioneerd en veranderen de kaartmaat niet.
 */

    .pokemon-card.species-shiny[b-ygxdd3fy01] {
        --status-color: var(--status-shiny);
        background: radial-gradient( circle at 84% 8%, rgba(255, 224, 92, 0.28), transparent 32% ), radial-gradient( circle at 12% 115%, rgba(185, 113, 0, 0.28), transparent 48% ), linear-gradient( 135deg, #17130a 0%, #2a210c 42%, #151107 72%, #2f2409 100% );
        border-color: #f2c94c;
        box-shadow: 0 9px 24px rgba(95, 61, 0, 0.28), 0 0 0 1px rgba(255, 222, 98, 0.36), 0 0 16px rgba(255, 195, 31, 0.19), inset 0 0 0 1px rgba(255, 244, 188, 0.13), inset 0 0 28px rgba(255, 190, 26, 0.12);
    }

        .pokemon-card.species-shiny[b-ygxdd3fy01]::before {
            position: absolute;
            z-index: 4;
            top: -80%;
            bottom: -80%;
            left: -62%;
            width: 22%;
            content: "";
            pointer-events: none;
            background: linear-gradient( 90deg, transparent, rgba(255, 248, 205, 0.12), rgba(255, 255, 255, 0.92), rgba(255, 218, 79, 0.2), transparent );
            filter: blur(1px);
            transform: rotate(18deg) translateX(-320%);
            animation: shiny-sweep-b-ygxdd3fy01 4.2s cubic-bezier(.45, 0, .2, 1) infinite;
        }

        .pokemon-card.species-shiny[b-ygxdd3fy01]::after {
            position: absolute;
            z-index: 2;
            inset: 0;
            content: "";
            pointer-events: none;
            background: radial-gradient(circle at 8% 20%, #fffbe7 0 1px, transparent 2px), radial-gradient(circle at 18% 76%, #fbd24c 0 1.5px, transparent 2.5px), radial-gradient(circle at 42% 16%, #ffffff 0 1px, transparent 2px), radial-gradient(circle at 67% 81%, #ffe889 0 1px, transparent 2px), radial-gradient(circle at 88% 27%, #fff7bd 0 1.5px, transparent 2.5px), radial-gradient(circle at 94% 73%, #eab52c 0 1px, transparent 2px), repeating-linear-gradient( 118deg, transparent 0 16px, rgba(255, 220, 91, 0.025) 17px 18px );
            opacity: 0.68;
            animation: shiny-sparkle-b-ygxdd3fy01 1.9s ease-in-out infinite alternate;
        }

        .pokemon-card.species-shiny:hover[b-ygxdd3fy01] {
            border-color: #ffe789;
            box-shadow: 0 13px 30px rgba(94, 60, 0, 0.36), 0 0 0 1px rgba(255, 235, 132, 0.68), 0 0 24px rgba(255, 197, 38, 0.28), inset 0 0 0 1px rgba(255, 249, 217, 0.18), inset 0 0 34px rgba(255, 192, 27, 0.17);
        }

        .pokemon-card.species-shiny .pokemon-title h2[b-ygxdd3fy01] {
            color: #ffe47a;
            background: linear-gradient( 90deg, #d99b12, #fff1a1 42%, #f3bd32 72%, #fff3b2 );
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 14px rgba(255, 205, 56, 0.18);
        }

        .pokemon-card.species-shiny .pokemon-title[b-ygxdd3fy01]::after {
            position: absolute;
            z-index: 5;
            top: 9px;
            right: 12px;
            padding: 0.18rem 0.42rem;
            content: "✦ SHINY ✦";
            color: #3d2a00;
            font-size: 0.48rem;
            font-weight: 900;
            letter-spacing: 0.09em;
            line-height: 1;
            background: linear-gradient(135deg, #fff4a6, #d99a0c 60%, #ffe982);
            border: 1px solid rgba(255, 241, 166, 0.72);
            border-radius: 999px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.75);
        }

        .pokemon-card.species-shiny .pokemon-number[b-ygxdd3fy01],
        .pokemon-card.species-shiny .expand-icon[b-ygxdd3fy01] {
            color: #f8ce50;
        }

        .pokemon-card.species-shiny .pokemon-forms[b-ygxdd3fy01] {
            border-top-color: rgba(255, 213, 72, 0.34);
        }

/* Volledig aanklikbare kaartheader */

.pokemon-card__header[b-ygxdd3fy01] {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    box-sizing: border-box;
    width: 100%;
    min-height: 80px;
    margin: 0;
    padding: 1.25rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: transparent;
}

    .pokemon-card__header[b-ygxdd3fy01]::-webkit-details-marker {
        display: none;
    }

    .pokemon-card__header[b-ygxdd3fy01]::marker {
        content: "";
    }

.pokemon-card[open] .pokemon-card__header[b-ygxdd3fy01] {
    min-height: 85px;
}

/* Pokémonafbeelding */

.pokemon-image[b-ygxdd3fy01] {
    display: block;
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    object-fit: contain;
    object-position: center;
    border-radius: 14px;
    filter: drop-shadow(0 6px 7px rgba(0, 0, 0, 0.16));
    transition: transform 180ms ease, filter 180ms ease, opacity 180ms ease;
}

.pokemon-card:hover .pokemon-image[b-ygxdd3fy01] {
    transform: translateY(-3px) scale(1.06);
    filter: drop-shadow(0 9px 9px rgba(0, 0, 0, 0.2));
}

/* Niet geregistreerde Pokémon worden zwart-wit en gedempt. */

.pokemon-card.species-missing .pokemon-image[b-ygxdd3fy01] {
    opacity: 0.58;
    filter: grayscale(1) saturate(0) contrast(0.9) drop-shadow(0 5px 6px rgba(70, 75, 82, 0.2));
}

.pokemon-card.species-missing:hover .pokemon-image[b-ygxdd3fy01] {
    opacity: 0.7;
    filter: grayscale(1) saturate(0) contrast(0.96) drop-shadow(0 8px 8px rgba(70, 75, 82, 0.24));
}

.pokemon-card.species-owned .pokemon-image[b-ygxdd3fy01] {
    filter: saturate(1.05) drop-shadow(0 7px 8px rgba(var(--status-owned), 0.22));
}

.pokemon-card.species-shiny .pokemon-image[b-ygxdd3fy01] {
    filter: saturate(1.32) brightness(1.08) contrast(1.04) drop-shadow(0 0 5px rgba(255, 241, 160, 0.72)) drop-shadow(0 0 11px rgba(255, 188, 19, 0.48)) drop-shadow(0 8px 8px rgba(0, 0, 0, 0.36));
}

.pokemon-card.species-shiny:hover .pokemon-image[b-ygxdd3fy01] {
    filter: saturate(1.42) brightness(1.12) contrast(1.06) drop-shadow(0 0 7px rgba(255, 246, 190, 0.82)) drop-shadow(0 0 15px rgba(255, 188, 19, 0.62)) drop-shadow(0 10px 9px rgba(0, 0, 0, 0.4));
}

/* Titel, ID en percentages */

.pokemon-content[b-ygxdd3fy01] {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 0.5rem;
}

.pokemon-title[b-ygxdd3fy01] {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 0.45rem;
}

    .pokemon-title h2[b-ygxdd3fy01] {
        min-width: 0;
        margin: 0;
        overflow: hidden;
        color: #242424;
        font-size: 1.05rem;
        font-weight: 700;
        line-height: 1.2;
        text-overflow: ellipsis;
        text-transform: capitalize;
        white-space: nowrap;
    }

.pokemon-number[b-ygxdd3fy01] {
    flex-shrink: 0;
    color: rgb(var(--status-color));
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.025em;
    opacity: 0.82;
}

.expand-icon[b-ygxdd3fy01] {
    flex-shrink: 0;
    margin-left: auto;
    color: rgb(var(--status-color));
    font-size: 1.25rem;
    font-weight: 700;
    transition: transform 180ms ease;
}

.pokemon-card[open] .expand-icon[b-ygxdd3fy01] {
    transform: rotate(180deg);
}

/* Forms */

.pokemon-forms[b-ygxdd3fy01] {
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0 1.25rem;
    padding: 1rem 0 1.25rem;
    border-top: 1px solid rgba(var(--status-color), 0.22);
}

.pokemon-evolutions[b-ygxdd3fy01] {
    position: relative;
    z-index: 3;
    margin: 0 1.25rem;
    padding: 0.85rem 0 1.25rem;
    border-top: 1px solid rgba(var(--status-color), 0.22);
}

.pokemon-evolutions h3[b-ygxdd3fy01] {
    margin: 0 0 0.6rem;
    color: #59616a;
    font-size: 0.8rem;
    font-weight: 700;
}

.pokemon-card.species-shiny .pokemon-evolutions h3[b-ygxdd3fy01] {
    color: #ffe47a;
}

.pokemon-evolutions__list[b-ygxdd3fy01] {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.form-badge.pokemon-evolution[b-ygxdd3fy01] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.6rem;
    border-radius: 12px;
}

.pokemon-evolution__image[b-ygxdd3fy01] {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.pokemon-evolution__content[b-ygxdd3fy01] {
    display: grid;
    min-width: 0;
    gap: 0.15rem;
    overflow-wrap: anywhere;
}

.pokemon-evolution__name[b-ygxdd3fy01] {
    font-weight: 700;
}

.pokemon-evolution__status[b-ygxdd3fy01] {
    font-size: 0.7rem;
    text-transform: none;
}

/* Niet geregistreerd: grijs */

.form-badge[b-ygxdd3fy01] {
    position: relative;
    overflow: hidden;
    padding: 0.3rem 0.65rem;
    color: #59616a;
    font-size: 0.78rem;
    font-weight: 650;
    text-transform: capitalize;
    background: #edf0f2;
    border: 1px solid #c8cdd2;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(68, 75, 82, 0.08);
}

    /* Geregistreerd: oranje */

    .form-badge.form-encountered[b-ygxdd3fy01] {
        color: #914600;
        background: #ffedd5;
        border-color: rgb(var(--status-registered));
        box-shadow: 0 2px 7px rgba(var(--status-registered), 0.16);
    }

    /* Gevangen: indigo */

    .form-badge.form-caught[b-ygxdd3fy01] {
        color: #34379a;
        background: #e5e7ff;
        border-color: #9da0f4;
        box-shadow: 0 2px 7px rgba(var(--status-caught), 0.17);
    }

    /* In bezit: groen */

    .form-badge.form-owned[b-ygxdd3fy01] {
        color: #126237;
        background: #dcf7e7;
        border-color: #76d49a;
        box-shadow: 0 2px 7px rgba(var(--status-owned), 0.18);
    }

    /* Shiny: goud, glanzend en met bewegende reflectie */

    .form-badge.form-shiny[b-ygxdd3fy01] {
        color: #fff3b0;
        background: linear-gradient( 120deg, #241b07 0%, #6e4d06 28%, #d9a414 43%, #fff0a0 52%, #9a6906 64%, #211805 100% );
        background-size: 260% 100%;
        border-color: #f0c94e;
        box-shadow: 0 2px 9px rgba(var(--status-shiny), 0.34), 0 0 0 1px rgba(255, 232, 128, 0.13), inset 0 1px 0 rgba(255, 247, 205, 0.42);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        animation: shiny-badge-b-ygxdd3fy01 3.6s linear infinite;
    }

        .form-badge.form-shiny[b-ygxdd3fy01]::after {
            position: absolute;
            top: 3px;
            right: 7px;
            width: 4px;
            height: 4px;
            content: "";
            background: #ffffff;
            border-radius: 50%;
            box-shadow: -12px 8px 0 -1px rgba(255, 255, 255, 0.82), 5px 9px 0 -1px rgba(255, 239, 159, 0.9);
            animation: shiny-sparkle-b-ygxdd3fy01 1.8s ease-in-out infinite alternate;
        }

/* Percentagebadges */

.pokemon-percentages[b-ygxdd3fy01] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.percentage[b-ygxdd3fy01] {
    padding: 0.18rem 0.4rem;
    font-size: 0.58rem;
    font-weight: 750;
    line-height: 1;
    border: 1px solid;
    border-radius: 999px;
}

.percentage-encountered[b-ygxdd3fy01] {
    color: #914600;
    background: #ffedd5;
    border-color: rgb(var(--status-registered));
}

.percentage-caught[b-ygxdd3fy01] {
    color: #34379a;
    background: #e5e7ff;
    border-color: #9da0f4;
}

.percentage-owned[b-ygxdd3fy01] {
    color: #126237;
    background: #dcf7e7;
    border-color: #76d49a;
}

.percentage-shiny[b-ygxdd3fy01] {
    color: #664400;
    background: #fff1a8;
    border-color: #d89b09;
}

.blacktext[b-ygxdd3fy01] {
    .player-details-page {
        width: 100%;
    }

    .back-link[b-ygxdd3fy01] {
        display: inline-block;
        margin-bottom: 1.25rem;
        color: rgb(196, 99, 0);
        font-size: 0.85rem;
        font-weight: 650;
        text-decoration: none;
    }

        .back-link:hover[b-ygxdd3fy01] {
            color: rgb(250, 158, 55);
        }

    .player-profile[b-ygxdd3fy01] {
        display: flex;
        min-height: 220px;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        flex-direction: column;
        padding: 2rem;
        background: radial-gradient( circle at top right, rgba(250, 158, 55, 0.18), transparent 55% ), #ffffff;
        border: 1px solid rgba(250, 158, 55, 0.3);
        border-radius: 20px;
        box-shadow: 0 8px 24px rgba(250, 158, 55, 0.12), 0 2px 6px rgba(0, 0, 0, 0.05);
    }

    .player-profile-avatar[b-ygxdd3fy01] {
        display: block;
        width: 128px;
        height: 128px;
        image-rendering: pixelated;
        object-fit: cover;
        background: rgba(250, 158, 55, 0.12);
        box-shadow: 0 10px 24px rgba(250, 158, 55, 0.25);
    }

    .player-profile h1[b-ygxdd3fy01] {
        margin: 0;
        color: #242424;
        font-size: 2rem;
        font-weight: 800;
    }

    .player-not-found[b-ygxdd3fy01] {
        padding: 2rem;
        text-align: center;
        background: #ffffff;
        border: 1px solid rgba(250, 158, 55, 0.3);
        border-radius: 18px;
    }

        .player-not-found a[b-ygxdd3fy01] {
            color: rgb(196, 99, 0);
        }
    /* Pokémon-grid */

    .pokedex-grid[b-ygxdd3fy01] {
        display: grid;
        grid-template-columns: repeat( auto-fill, minmax(250px, 1fr) );
        gap: 1.25rem;
        padding: 1rem 0;
    }
    /*
    Standaard is een species niet volledig geregistreerd.
    De gloed is daarom rood.
*/
    .pokemon-card[b-ygxdd3fy01] {
        --status-color: 220, 38, 38;
        position: relative;
        overflow: hidden;
        min-width: 0;
        padding: 0;
        background: radial-gradient( circle at top right, rgba(var(--status-color), 0.22), transparent 58% ), #ffffff;
        border: 1px solid rgba(220, 38, 38);
        border-radius: 18px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.05);
        transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
    }

        .pokemon-card:hover[b-ygxdd3fy01] {
            transform: translateY(-3px);
            border-color: rgba(var(--status-color), 0.6);
            box-shadow: 0 10px 24px rgba(var(--status-color), 0.16), 0 3px 8px rgba(0, 0, 0, 0.07);
        }
        /* Alleen de gloedkleur verandert per speciesstatus */

        .pokemon-card.species-encountered[b-ygxdd3fy01] {
            --status-color: 250, 158, 55;
            border: 1px solid rgb(250, 158, 55);
        }

        .pokemon-card.species-caught[b-ygxdd3fy01] {
            --status-color: 22, 101, 52;
            border: 1px solid rgb(22, 101, 52);
        }

        .pokemon-card.species-owned[b-ygxdd3fy01] {
            --status-color: 75, 157, 219;
            border: 1px solid rgb(75, 157, 219);
        }

        .pokemon-card.species-shiny[b-ygxdd3fy01] {
            --status-color: 218, 165, 32;
            border: 1px solid rgb(218, 165, 32);
        }
    /* Volledig aanklikbare header */

    .pokemon-card__header[b-ygxdd3fy01] {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        box-sizing: border-box;
        width: 100%;
        min-height: 80px;
        margin: 0;
        padding: 1.25rem;
        cursor: pointer;
        list-style: none;
        user-select: none;
        background: transparent;
    }

        .pokemon-card__header[b-ygxdd3fy01]::-webkit-details-marker {
            display: none;
        }

        .pokemon-card__header[b-ygxdd3fy01]::marker {
            content: "";
        }
    /* Oranje lettericoon */

    .pokemon-image[b-ygxdd3fy01] {
        display: block;
        flex: 0 0 72px;
        width: 72px;
        height: 72px;
        object-fit: contain;
        object-position: center;
        filter: drop-shadow( 0 6px 7px rgba(0, 0, 0, 0.16) );
        transition: transform 180ms ease, filter 180ms ease;
        border-radius: 14px;
    }

    .pokemon-card:hover .pokemon-image[b-ygxdd3fy01] {
        transform: translateY(-3px) scale(1.06);
        filter: drop-shadow( 0 9px 9px rgba(0, 0, 0, 0.2) );
    }

    @media (max-width: 640px) {
        .pokemon-image[b-ygxdd3fy01] {
            flex-basis: 60px;
            width: 60px;
            height: 60px;
        }
    }
    /* Titel, ID en percentages */

    .pokemon-content[b-ygxdd3fy01] {
        display: flex;
        flex: 1;
        min-width: 0;
        flex-direction: column;
        gap: 0.5rem;
    }

    .pokemon-title[b-ygxdd3fy01] {
        display: flex;
        min-width: 0;
        align-items: baseline;
        gap: 0.45rem;
    }

        .pokemon-title h2[b-ygxdd3fy01] {
            min-width: 0;
            margin: 0;
            overflow: hidden;
            color: #242424;
            font-size: 1.05rem;
            font-weight: 700;
            line-height: 1.2;
            text-overflow: ellipsis;
            text-transform: capitalize;
            white-space: nowrap;
        }

    .pokemon-number[b-ygxdd3fy01] {
        flex-shrink: 0;
        color: rgb(183, 96, 3);
        font-size: 0.7rem;
        font-weight: 750;
        letter-spacing: 0.025em;
        opacity: 0.75;
    }
    /* Uitklappijl */

    .expand-icon[b-ygxdd3fy01] {
        flex-shrink: 0;
        margin-left: auto;
        color: rgb(250, 158, 55);
        font-size: 1.25rem;
        font-weight: 700;
        transition: transform 180ms ease;
    }

    .pokemon-card[open] .expand-icon[b-ygxdd3fy01] {
        transform: rotate(180deg);
    }

    .pokemon-card[open] .pokemon-card__header[b-ygxdd3fy01] {
        min-height: 85px;
    }
    /* Forms */

    .pokemon-forms[b-ygxdd3fy01] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
        margin: 0 1.25rem;
        padding: 1rem 0 1.25rem;
        border-top: 1px solid rgba(250, 158, 55, 0.2);
    }
    /* Niet geregistreerd: rood */

    .form-badge[b-ygxdd3fy01] {
        padding: 0.3rem 0.65rem;
        color: #991b1b;
        font-size: 0.78rem;
        font-weight: 650;
        text-transform: capitalize;
        background: #fee2e2;
        border: 1px solid #fca5a5;
        border-radius: 999px;
        box-shadow: 0 2px 6px rgba(220, 38, 38, 0.08);
    }
        /* Geregistreerd/encountered: oranje */

        .form-badge.form-encountered[b-ygxdd3fy01] {
            color: #9a4d00;
            background: #ffedd5;
            border-color: rgb(250, 158, 55);
            box-shadow: 0 2px 7px rgba(250, 158, 55, 0.16);
        }
        /* Gevangen: donkergroen */

        .form-badge.form-caught[b-ygxdd3fy01] {
            color: #166534;
            background: #dcfce7;
            border-color: #86efac;
            box-shadow: 0 2px 7px rgba(20, 83, 45, 0.2);
        }
        /* In bezit: lichtblauw */

        .form-badge.form-owned[b-ygxdd3fy01] {
            color: #174f7a;
            background: #dbeeff;
            border-color: #73b9e6;
            box-shadow: 0 2px 7px rgba(75, 157, 219, 0.18);
        }
        /* Shiny: goud */

        .form-badge.form-shiny[b-ygxdd3fy01] {
            color: #664400;
            background: linear-gradient( 135deg, #fff1a8, #f5c542 );
            border-color: #d89b09;
            box-shadow: 0 2px 8px rgba(216, 155, 9, 0.25);
        }
    /* Percentages */

    .pokemon-percentages[b-ygxdd3fy01] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem;
    }

    .percentage[b-ygxdd3fy01] {
        padding: 0.18rem 0.4rem;
        font-size: 0.58rem;
        font-weight: 750;
        line-height: 1;
        border: 1px solid;
        border-radius: 999px;
    }
    /* Pokédex/geregistreerd: oranje */

    .percentage-encountered[b-ygxdd3fy01] {
        color: #9a4d00;
        background: #ffedd5;
        border-color: rgb(250, 158, 55);
    }
    /* Caught: donkergroen */

    .percentage-caught[b-ygxdd3fy01] {
        color: #166534;
        background: #dcfce7;
        border-color: #86efac;
    }
    /* Owned: lichtblauw */

    .percentage-owned[b-ygxdd3fy01] {
        color: #174f7a;
        background: #dbeeff;
        border-color: #73b9e6;
    }
    /* Shiny: goud */

    .percentage-shiny[b-ygxdd3fy01] {
        color: #664400;
        background: #fff1a8;
        border-color: #d89b09;
    }
    /* Mobiel */

    @media (max-width: 640px) {
        .player-profile[b-ygxdd3fy01] {
            min-height: 180px;
            padding: 1.5rem;
        }

        .player-profile-avatar[b-ygxdd3fy01] {
            width: 96px;
            height: 96px;
        }

        .player-profile h1[b-ygxdd3fy01] {
            font-size: 1.55rem;
        }

        .pokedex-grid[b-ygxdd3fy01] {
            grid-template-columns: 1fr;
            gap: 0.9rem;
        }

        .pokemon-card__header[b-ygxdd3fy01] {
            padding: 1rem;
        }

        .pokemon-forms[b-ygxdd3fy01] {
            margin: 0 1rem;
        }
    }


    .pokemon-filters[b-ygxdd3fy01] {
        display: grid;
        grid-template-columns: minmax(200px, 2fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(140px, 1fr) auto;
        align-items: end;
        gap: 0.85rem;
        margin-top: 1.5rem;
        padding: 1rem;
        background: radial-gradient( circle at top right, rgba(250, 158, 55, 0.12), transparent 55% ), #ffffff;
        border: 1px solid rgba(250, 158, 55, 0.25);
        border-radius: 16px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    }

    .filter-field[b-ygxdd3fy01] {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 0.4rem;
    }

        .filter-field label[b-ygxdd3fy01] {
            color: #6d6259;
            font-size: 0.68rem;
            font-weight: 750;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .filter-field input[b-ygxdd3fy01],
        .filter-field select[b-ygxdd3fy01] {
            box-sizing: border-box;
            width: 100%;
            height: 42px;
            padding: 0 0.75rem;
            color: #292929;
            font: inherit;
            font-size: 0.85rem;
            background: #ffffff;
            border: 1px solid #ded8d2;
            border-radius: 10px;
            outline: none;
            transition: border-color 150ms ease, box-shadow 150ms ease;
        }

            .filter-field input:focus[b-ygxdd3fy01],
            .filter-field select:focus[b-ygxdd3fy01] {
                border-color: rgb(250, 158, 55);
                box-shadow: 0 0 0 3px rgba(250, 158, 55, 0.14);
            }

    .clear-filters[b-ygxdd3fy01] {
        height: 42px;
        padding: 0 1rem;
        color: #984c00;
        font-size: 0.78rem;
        font-weight: 700;
        white-space: nowrap;
        background: #ffedd5;
        border: 1px solid rgba(250, 158, 55, 0.45);
        border-radius: 10px;
        cursor: pointer;
        transition: color 150ms ease, background-color 150ms ease, transform 150ms ease;
    }

        .clear-filters:hover[b-ygxdd3fy01] {
            color: #ffffff;
            background: rgb(250, 158, 55);
            transform: translateY(-1px);
        }

    .filter-results[b-ygxdd3fy01] {
        display: flex;
        justify-content: flex-end;
        margin-top: 0.65rem;
        color: #81766e;
        font-size: 0.72rem;
    }

    .no-filter-results[b-ygxdd3fy01] {
        margin-top: 1rem;
        padding: 2rem;
        color: #777777;
        text-align: center;
        background: #ffffff;
        border: 1px dashed rgba(250, 158, 55, 0.4);
        border-radius: 16px;
    }

    @media (max-width: 1000px) {
        .pokemon-filters[b-ygxdd3fy01] {
            grid-template-columns: repeat(2, 1fr);
        }

        .clear-filters[b-ygxdd3fy01] {
            width: 100%;
        }
    }

    @media (max-width: 640px) {
        .pokemon-filters[b-ygxdd3fy01] {
            grid-template-columns: 1fr;
        }
    }

    .pokemon-filter-bar[b-ygxdd3fy01] {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 1rem;
        margin: 1.5rem 0 0.75rem;
        padding: 1rem;
        background: #ffffff;
        border: 1px solid rgba(250, 158, 55, 0.28);
        border-radius: 18px;
        box-shadow: 0 6px 18px rgba(250, 158, 55, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
    }

    .filter-toggle[b-ygxdd3fy01] {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    .filter-toggle__label[b-ygxdd3fy01] {
        color: #69584a;
        font-size: 0.68rem;
        font-weight: 750;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .toggle-group[b-ygxdd3fy01] {
        display: inline-flex;
        gap: 3px;
        padding: 3px;
        background: rgba(250, 158, 55, 0.08);
        border: 1px solid rgba(250, 158, 55, 0.24);
        border-radius: 12px;
    }

    .toggle-button[b-ygxdd3fy01] {
        min-height: 38px;
        padding: 0.5rem 0.8rem;
        cursor: pointer;
        color: #77685c;
        font-size: 0.76rem;
        font-weight: 650;
        background: transparent;
        border: 0;
        border-radius: 9px;
        transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
    }

        .toggle-button:hover[b-ygxdd3fy01] {
            color: rgb(183, 96, 3);
            background: rgba(250, 158, 55, 0.13);
        }

        .toggle-button.active[b-ygxdd3fy01] {
            color: #ffffff;
            background: linear-gradient( 135deg, rgb(250, 137, 20), rgb(250, 158, 55) );
            box-shadow: 0 4px 10px rgba(250, 137, 20, 0.24);
        }

        .toggle-button:active[b-ygxdd3fy01] {
            transform: scale(0.97);
        }

    .clear-filters-button[b-ygxdd3fy01] {
        min-height: 44px;
        padding: 0.6rem 1rem;
        cursor: pointer;
        color: rgb(183, 96, 3);
        font-size: 0.76rem;
        font-weight: 700;
        background: #ffffff;
        border: 1px solid rgba(250, 158, 55, 0.4);
        border-radius: 11px;
    }

        .clear-filters-button:hover[b-ygxdd3fy01] {
            color: #ffffff;
            background: rgb(250, 158, 55);
        }

    .filter-result-count[b-ygxdd3fy01] {
        margin-bottom: 0.5rem;
        color: #857568;
        font-size: 0.75rem;
    }

    @media (max-width: 640px) {
        .filter-toggle[b-ygxdd3fy01] {
            width: 100%;
        }

        .toggle-group[b-ygxdd3fy01] {
            display: flex;
        }

        .toggle-button[b-ygxdd3fy01] {
            flex: 1;
        }

        .clear-filters-button[b-ygxdd3fy01] {
            width: 100%;
        }
    }


    .pokemon-filter-bar[b-ygxdd3fy01] {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        margin: 1.5rem 0 0.75rem;
        padding: 1.1rem;
        background: #ffffff;
        border: 1px solid rgba(250, 158, 55, 0.28);
        border-radius: 18px;
        box-shadow: 0 6px 18px rgba(250, 158, 55, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
    }

    .text-filters[b-ygxdd3fy01] {
        display: grid;
        grid-template-columns: minmax(220px, 2fr) minmax(150px, 1fr) minmax(170px, 1fr);
        gap: 0.85rem;
    }

    .filter-field[b-ygxdd3fy01] {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 0.4rem;
    }

        .filter-field span[b-ygxdd3fy01],
        .filter-toggle__label[b-ygxdd3fy01] {
            color: #69584a;
            font-size: 0.68rem;
            font-weight: 750;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .filter-field input[b-ygxdd3fy01],
        .filter-field select[b-ygxdd3fy01] {
            box-sizing: border-box;
            width: 100%;
            height: 44px;
            padding: 0 0.85rem;
            color: #2d2824;
            font: inherit;
            font-size: 0.85rem;
            background: #ffffff;
            border: 1px solid rgba(250, 158, 55, 0.32);
            border-radius: 11px;
            outline: none;
            transition: border-color 150ms ease, box-shadow 150ms ease;
        }

            .filter-field input:focus[b-ygxdd3fy01],
            .filter-field select:focus[b-ygxdd3fy01] {
                border-color: rgb(250, 158, 55);
                box-shadow: 0 0 0 3px rgba(250, 158, 55, 0.14);
            }

    .status-filters[b-ygxdd3fy01] {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 0.85rem;
    }

    .filter-toggle[b-ygxdd3fy01] {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    .toggle-group[b-ygxdd3fy01] {
        display: inline-flex;
        gap: 3px;
        padding: 3px;
        background: rgba(250, 158, 55, 0.08);
        border: 1px solid rgba(250, 158, 55, 0.24);
        border-radius: 12px;
    }

    .toggle-button[b-ygxdd3fy01] {
        min-height: 38px;
        padding: 0.5rem 0.8rem;
        cursor: pointer;
        color: #77685c;
        font-size: 0.76rem;
        font-weight: 650;
        background: transparent;
        border: 0;
        border-radius: 9px;
        transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
    }

        .toggle-button:hover[b-ygxdd3fy01] {
            color: rgb(183, 96, 3);
            background: rgba(250, 158, 55, 0.13);
        }

        .toggle-button.active[b-ygxdd3fy01] {
            color: #ffffff;
            background: linear-gradient( 135deg, rgb(250, 137, 20), rgb(250, 158, 55) );
            box-shadow: 0 4px 10px rgba(250, 137, 20, 0.24);
        }

        .toggle-button:active[b-ygxdd3fy01] {
            transform: scale(0.97);
        }

    .clear-filters-button[b-ygxdd3fy01] {
        min-height: 44px;
        padding: 0.6rem 1rem;
        cursor: pointer;
        color: rgb(183, 96, 3);
        font-size: 0.76rem;
        font-weight: 700;
        background: #ffffff;
        border: 1px solid rgba(250, 158, 55, 0.4);
        border-radius: 11px;
    }

        .clear-filters-button:hover[b-ygxdd3fy01] {
            color: #ffffff;
            background: rgb(250, 158, 55);
        }

    @media (max-width: 850px) {
        .text-filters[b-ygxdd3fy01] {
            grid-template-columns: 1fr 1fr;
        }

        .filter-field--species[b-ygxdd3fy01] {
            grid-column: 1 / -1;
        }
    }

    @media (max-width: 640px) {
        .text-filters[b-ygxdd3fy01] {
            grid-template-columns: 1fr;
        }

        .filter-field--species[b-ygxdd3fy01] {
            grid-column: auto;
        }

        .filter-toggle[b-ygxdd3fy01],
        .clear-filters-button[b-ygxdd3fy01] {
            width: 100%;
        }

        .toggle-group[b-ygxdd3fy01] {
            display: flex;
        }

        .toggle-button[b-ygxdd3fy01] {
            flex: 1;
        }
    }

    .player-dashboard[b-ygxdd3fy01] {
        display: grid;
        grid-template-columns: minmax(210px, 0.75fr) minmax(280px, 1fr) minmax(520px, 1.8fr);
        gap: 2rem;
        margin-bottom: 1.5rem;
        padding: 1.5rem;
        background: radial-gradient( circle at top right, rgba(250, 158, 55, 0.14), transparent 48% ), #ffffff;
        border: 1px solid rgba(250, 158, 55, 0.3);
        border-radius: 20px;
        box-shadow: 0 8px 24px rgba(250, 158, 55, 0.11), 0 2px 6px rgba(0, 0, 0, 0.04);
    }
    /* Speler links */

    .player-dashboard__identity[b-ygxdd3fy01] {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        padding: 1.25rem;
        text-align: center;
    }

    .player-dashboard__avatar[b-ygxdd3fy01] {
        display: block;
        width: 132px;
        height: 132px;
        image-rendering: pixelated;
        object-fit: cover;
        background: rgba(250, 158, 55, 0.12);
        border-radius: 16px;
        box-shadow: 0 10px 24px rgba(250, 158, 55, 0.22);
    }

    .player-dashboard__name[b-ygxdd3fy01] {
        min-width: 0;
    }



        .player-dashboard__name h1[b-ygxdd3fy01] {
            max-width: 100%;
            margin: 0;
            overflow-wrap: normal;
            color: #242424;
            font-size: 1.0rem;
            font-weight: 850;
        }
    /* Generaties */

    .generation-statistics[b-ygxdd3fy01] {
        min-width: 0;
        padding: 0.25rem 0;
    }

    .statistics-header[b-ygxdd3fy01] {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .statistics-label[b-ygxdd3fy01] {
        display: block;
        margin-bottom: 0.2rem;
        color: rgb(183, 96, 3);
        font-size: 0.65rem;
        font-weight: 750;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .statistics-header h2[b-ygxdd3fy01] {
        margin: 0;
        color: #29231f;
        font-size: 1rem;
        font-weight: 800;
    }

    .statistics-mode-toggle[b-ygxdd3fy01] {
        display: flex;
        flex-shrink: 0;
        gap: 3px;
        padding: 3px;
        background: rgba(250, 158, 55, 0.08);
        border: 1px solid rgba(250, 158, 55, 0.24);
        border-radius: 10px;
    }

    .statistics-mode-button[b-ygxdd3fy01] {
        min-height: 30px;
        padding: 0.35rem 0.55rem;
        cursor: pointer;
        color: #77685c;
        font-size: 0.65rem;
        font-weight: 700;
        background: transparent;
        border: 0;
        border-radius: 7px;
    }

        .statistics-mode-button.active[b-ygxdd3fy01] {
            color: #ffffff;
            background: linear-gradient( 135deg, rgb(250, 137, 20), rgb(250, 158, 55) );
            box-shadow: 0 3px 8px rgba(250, 137, 20, 0.22);
        }

    .generation-list[b-ygxdd3fy01] {
        display: flex;
        flex-direction: column;
        gap: 0.02rem;
    }

    .generation-row[b-ygxdd3fy01] {
        min-width: 0;
    }

    .generation-row__information[b-ygxdd3fy01] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 0.25rem;
        color: #66584e;
        font-size: 0.68rem;
    }

        .generation-row__information strong[b-ygxdd3fy01] {
            color: rgb(183, 96, 3);
            font-size: 0.65rem;
        }

    .generation-progress[b-ygxdd3fy01] {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 8px;
        background: #ede8e4;
        border-radius: 999px;
    }

    .generation-progress__value[b-ygxdd3fy01] {
        height: 100%;
        background: linear-gradient( 90deg, rgb(250, 137, 20), rgb(255, 184, 96) );
        border-radius: inherit;
        box-shadow: 0 0 9px rgba(250, 158, 55, 0.35);
        transition: width 250ms ease;
    }
    /* Rechterkant */

    .player-dashboard__right[b-ygxdd3fy01] {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 1.4rem;
    }

    .summary-statistics[b-ygxdd3fy01] {
        display: grid;
        grid-template-columns: repeat(4, minmax(100px, 1fr));
        gap: 0.85rem;
    }

    .summary-statistic[b-ygxdd3fy01] {
        min-width: 0;
        text-align: center;
    }

        .summary-statistic h3[b-ygxdd3fy01] {
            margin: 0.55rem 0 0;
            color: #62554b;
            font-size: 0.68rem;
            font-weight: 750;
        }
    /* Cirkelgrafieken */

    .summary-chart[b-ygxdd3fy01] {
        --chart-color: rgb(250, 158, 55);
        --progress: 0deg;
        position: relative;
        display: grid;
        width: 92px;
        height: 92px;
        margin: 0 auto;
        place-items: center;
        background: conic-gradient( var(--chart-color) 0deg, var(--chart-color) var(--progress), #ebe7e3 var(--progress), #ebe7e3 360deg );
        border-radius: 50%;
    }

        .summary-chart[b-ygxdd3fy01]::before {
            position: absolute;
            width: 70px;
            height: 70px;
            content: "";
            background: #ffffff;
            border-radius: 50%;
            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.035);
        }

    .summary-chart__inside[b-ygxdd3fy01] {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        .summary-chart__inside strong[b-ygxdd3fy01] {
            color: #29231f;
            font-size: 0.68rem;
            font-weight: 800;
        }

        .summary-chart__inside span[b-ygxdd3fy01] {
            margin-top: 0.1rem;
            color: #847469;
            font-size: 0.6rem;
            font-weight: 700;
        }

    .summary-chart--registered[b-ygxdd3fy01] {
        --chart-color: rgb(250, 158, 55);
    }

    .summary-chart--caught[b-ygxdd3fy01] {
        --chart-color: rgb(22, 101, 52);
    }

    .summary-chart--owned[b-ygxdd3fy01] {
        --chart-color: rgb(75, 157, 219);
    }

    .summary-chart--shiny[b-ygxdd3fy01] {
        --chart-color: rgb(218, 165, 32);
    }
    /* Toekomstige statistieken */

    .additional-statistics[b-ygxdd3fy01] {
        display: grid;
        grid-template-columns: repeat(3, minmax(110px, 1fr));
        gap: 0.65rem;
    }

    .additional-statistic[b-ygxdd3fy01] {
        display: flex;
        min-width: 0;
        min-height: 62px;
        flex-direction: column;
        justify-content: center;
        gap: 0.25rem;
        padding: 0.65rem 0.8rem;
        background: rgba(250, 158, 55, 0.045);
        border: 1px solid rgba(250, 158, 55, 0.18);
        border-radius: 12px;
    }

        .additional-statistic span[b-ygxdd3fy01] {
            color: #88796e;
            font-size: 0.63rem;
            font-weight: 650;
        }

        .additional-statistic strong[b-ygxdd3fy01] {
            color: #302923;
            font-size: 0.9rem;
            font-weight: 800;
        }
    /* Tablet */

    @media (max-width: 1200px) {
        .player-dashboard[b-ygxdd3fy01] {
            grid-template-columns: 210px minmax(280px, 1fr);
        }

        .player-dashboard__right[b-ygxdd3fy01] {
            grid-column: 1 / -1;
        }
    }
    /* Mobiel */

    @media (max-width: 700px) {
        .player-dashboard[b-ygxdd3fy01] {
            grid-template-columns: 1fr;
            gap: 1.25rem;
            padding: 1rem;
        }

        .player-dashboard__identity[b-ygxdd3fy01] {
            flex-direction: row;
            justify-content: flex-start;
            text-align: left;
        }

        .player-dashboard__avatar[b-ygxdd3fy01] {
            width: 88px;
            height: 88px;
        }

        .player-dashboard__right[b-ygxdd3fy01] {
            grid-column: auto;
        }

        .summary-statistics[b-ygxdd3fy01] {
            grid-template-columns: repeat(2, 1fr);
        }

        .additional-statistics[b-ygxdd3fy01] {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 420px) {
        .statistics-header[b-ygxdd3fy01] {
            flex-direction: column;
        }

        .summary-chart[b-ygxdd3fy01] {
            width: 82px;
            height: 82px;
        }

            .summary-chart[b-ygxdd3fy01]::before {
                width: 62px;
                height: 62px;
            }

        .additional-statistics[b-ygxdd3fy01] {
            grid-template-columns: 1fr;
        }
    }

    .blacktext[b-ygxdd3fy01] {
        color: black;
    }

    color: #000000;[b-ygxdd3fy01]
}

/* Animaties voor shiny-status */

@keyframes shiny-sweep-b-ygxdd3fy01 {
    0%, 58% {
        transform: rotate(18deg) translateX(-320%);
    }

    82%, 100% {
        transform: rotate(18deg) translateX(820%);
    }
}

@keyframes shiny-sparkle-b-ygxdd3fy01 {
    from {
        opacity: 0.36;
    }

    to {
        opacity: 0.92;
    }
}

@keyframes shiny-badge-b-ygxdd3fy01 {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: -120% 0;
    }
}

/* Tablet */

@media (max-width: 1200px) {
    .player-dashboard[b-ygxdd3fy01] {
        grid-template-columns: 210px minmax(280px, 1fr);
    }

    .player-dashboard__right[b-ygxdd3fy01] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 850px) {
    .text-filters[b-ygxdd3fy01] {
        grid-template-columns: 1fr 1fr;
    }

    .filter-field--species[b-ygxdd3fy01] {
        grid-column: 1 / -1;
    }
}

/* Mobiel */

@media (max-width: 700px) {
    .player-dashboard[b-ygxdd3fy01] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 1rem;
    }

    .player-dashboard__identity[b-ygxdd3fy01] {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
    }

    .player-dashboard__avatar[b-ygxdd3fy01] {
        width: 88px;
        height: 88px;
    }

    .player-dashboard__right[b-ygxdd3fy01] {
        grid-column: auto;
    }

    .summary-statistics[b-ygxdd3fy01] {
        grid-template-columns: repeat(2, 1fr);
    }

    .additional-statistics[b-ygxdd3fy01] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .text-filters[b-ygxdd3fy01] {
        grid-template-columns: 1fr;
    }

    .filter-field--species[b-ygxdd3fy01] {
        grid-column: auto;
    }

    .filter-toggle[b-ygxdd3fy01],
    .clear-filters-button[b-ygxdd3fy01],
    .clear-filters[b-ygxdd3fy01] {
        width: 100%;
    }

    .toggle-group[b-ygxdd3fy01] {
        display: flex;
    }

    .toggle-button[b-ygxdd3fy01] {
        flex: 1;
    }

    .pokedex-grid[b-ygxdd3fy01] {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }

    .pokemon-card__header[b-ygxdd3fy01] {
        padding: 1rem;
    }

    .pokemon-image[b-ygxdd3fy01] {
        flex-basis: 60px;
        width: 60px;
        height: 60px;
    }

    .pokemon-forms[b-ygxdd3fy01],
    .pokemon-evolutions[b-ygxdd3fy01] {
        margin: 0 1rem;
    }
}

@media (max-width: 420px) {
    .statistics-header[b-ygxdd3fy01] {
        flex-direction: column;
    }

    .summary-chart[b-ygxdd3fy01] {
        width: 82px;
        height: 82px;
    }

        .summary-chart[b-ygxdd3fy01]::before {
            width: 62px;
            height: 62px;
        }

    .additional-statistics[b-ygxdd3fy01] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pokemon-card[b-ygxdd3fy01],
    .pokemon-image[b-ygxdd3fy01],
    .toggle-button[b-ygxdd3fy01],
    .generation-progress__value[b-ygxdd3fy01] {
        transition: none;
    }

        .pokemon-card.species-shiny[b-ygxdd3fy01]::before,
        .pokemon-card.species-shiny[b-ygxdd3fy01]::after,
        .form-badge.form-shiny[b-ygxdd3fy01],
        .form-badge.form-shiny[b-ygxdd3fy01]::after {
            animation: none;
        }
}

.player-statistics[b-ygxdd3fy01] {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    gap: 0.75rem;
}

.statistic-card[b-ygxdd3fy01] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem;
    background: radial-gradient( circle at top right, rgba(250, 158, 55, 0.13), transparent 58% ), #ffffff;
    border: 1px solid rgba(250, 158, 55, 0.25);
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(250, 158, 55, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
}

.statistic-icon[b-ygxdd3fy01] {
    display: grid;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    place-items: center;
    font-size: 1.1rem;
    background: rgba(250, 158, 55, 0.14);
    border: 1px solid rgba(250, 158, 55, 0.25);
    border-radius: 11px;
}

.statistic-card > div[b-ygxdd3fy01] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.15rem;
}

.statistic-label[b-ygxdd3fy01] {
    color: #7b6b5d;
    font-size: 0.65rem;
    font-weight: 750;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.statistic-card strong[b-ygxdd3fy01] {
    color: #27211d;
    font-size: 0.95rem;
    font-weight: 850;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .player-statistics[b-ygxdd3fy01] {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }
}

@media (max-width: 500px) {
    .player-statistics[b-ygxdd3fy01] {
        grid-template-columns: 1fr;
    }
}

.player-name-section[b-ygxdd3fy01] {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

    .player-name-section h1[b-ygxdd3fy01] {
        margin: 0;
    }

.player-score[b-ygxdd3fy01] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    color: rgb(146, 73, 0);
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
    background: linear-gradient( 135deg, rgba(255, 190, 112, 0.22), rgba(250, 158, 55, 0.12) );
    border: 1px solid rgba(250, 158, 55, 0.45);
    border-radius: 999px;
    box-shadow: 0 3px 9px rgba(250, 158, 55, 0.12);
}

.player-score__icon[b-ygxdd3fy01] {
    color: rgb(250, 158, 55);
    font-size: 0.9rem;
}

/* ============================================================
   PC / PARTY - doorlopende lijst, filters en detailvenster
   ============================================================ */

.inventory-filter-bar[b-ygxdd3fy01] {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(230px, 1.35fr) auto;
    align-items: end;
    gap: 0.85rem;
    margin: 1.5rem 0 0.75rem;
    padding: 1.1rem;
    background: #ffffff;
    border: 1px solid rgba(250, 158, 55, 0.28);
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(250, 158, 55, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
}

.inventory-filter-field[b-ygxdd3fy01] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.35rem;
}

    .inventory-filter-field > span[b-ygxdd3fy01] {
        color: #685648;
        font-size: 0.65rem;
        font-weight: 800;
        letter-spacing: 0.045em;
        text-transform: uppercase;
    }

    .inventory-filter-field select[b-ygxdd3fy01] {
        width: 100%;
        min-height: 46px;
        padding: 0 0.8rem;
        color: #302923;
        font-size: 0.8rem;
        background: #ffffff;
        border: 1px solid rgba(250, 158, 55, 0.35);
        border-radius: 11px;
        outline: none;
    }

        .inventory-filter-field select:focus[b-ygxdd3fy01] {
            border-color: rgb(250, 158, 55);
            box-shadow: 0 0 0 3px rgba(250, 158, 55, 0.13);
        }

.inventory-clear-button[b-ygxdd3fy01] {
    min-height: 46px;
    padding: 0.6rem 0.9rem;
    cursor: pointer;
    color: rgb(183, 96, 3);
    font-size: 0.75rem;
    font-weight: 750;
    white-space: nowrap;
    background: rgba(250, 158, 55, 0.06);
    border: 1px solid rgba(250, 158, 55, 0.38);
    border-radius: 11px;
}

    .inventory-clear-button:hover[b-ygxdd3fy01] {
        color: #ffffff;
        background: rgb(250, 158, 55);
    }

.inventory-result-count[b-ygxdd3fy01] {
    margin: 0 0 0.65rem;
    color: #817166;
    font-size: 0.72rem;
    font-weight: 650;
}

.inventory-empty[b-ygxdd3fy01] {
    padding: 2rem;
    color: #776b62;
    text-align: center;
    background: #ffffff;
    border: 1px solid rgba(250, 158, 55, 0.25);
    border-radius: 18px;
}

.owned-pokemon-list[b-ygxdd3fy01] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.25rem;
    padding: 0.35rem 0 1rem;
}

.owned-pokemon-card[b-ygxdd3fy01] {
    --owned-card-color: var(--status-owned);
    position: relative;
    isolation: isolate;
    display: flex;
    min-width: 0;
    min-height: 112px;
    overflow: hidden;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem;
    cursor: pointer;
    color: #29231f;
    text-align: left;
    background: radial-gradient(circle at top right, rgba(var(--owned-card-color), 0.16), transparent 58%), #ffffff;
    border: 1px solid rgba(var(--owned-card-color), 0.58);
    border-radius: 18px;
    box-shadow: 0 4px 12px rgba(var(--owned-card-color), 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

    .owned-pokemon-card:hover[b-ygxdd3fy01] {
        border-color: rgba(var(--owned-card-color), 0.92);
        box-shadow: 0 10px 24px rgba(var(--owned-card-color), 0.18), 0 3px 8px rgba(0, 0, 0, 0.07);
        transform: translateY(-3px);
    }

.owned-pokemon-image[b-ygxdd3fy01] {
    position: relative;
    z-index: 3;
    display: block;
    flex: 0 0 78px;
    width: 78px;
    height: 78px;
    image-rendering: pixelated;
    object-fit: contain;
    transition: transform 180ms ease;
}

.owned-pokemon-card:hover .owned-pokemon-image[b-ygxdd3fy01] {
    transform: translateY(-2px) scale(1.05);
}

.owned-pokemon-content[b-ygxdd3fy01] {
    position: relative;
    z-index: 3;
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 0.35rem;
}

.owned-pokemon-title[b-ygxdd3fy01] {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 0.4rem;
}

    .owned-pokemon-title h2[b-ygxdd3fy01] {
        min-width: 0;
        margin: 0;
        overflow: hidden;
        color: #29231f;
        font-size: 1rem;
        font-weight: 780;
        text-overflow: ellipsis;
        text-transform: capitalize;
        white-space: nowrap;
    }

    .owned-pokemon-title > span[b-ygxdd3fy01] {
        flex-shrink: 0;
        color: rgb(24, 120, 66);
        font-size: 0.65rem;
        font-weight: 800;
    }

.owned-pokemon-meta[b-ygxdd3fy01] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

    .owned-pokemon-meta span[b-ygxdd3fy01] {
        padding: 0.18rem 0.42rem;
        color: rgb(22, 101, 52);
        font-size: 0.62rem;
        font-weight: 700;
        text-transform: capitalize;
        background: rgba(var(--status-owned), 0.1);
        border: 1px solid rgba(var(--status-owned), 0.2);
        border-radius: 999px;
    }

.owned-pokemon-location[b-ygxdd3fy01] {
    position: absolute;
    z-index: 5;
    right: 0.65rem;
    bottom: 0.55rem;
    color: #84756a;
    font-size: 0.55rem;
    font-weight: 750;
}

/* Shiny gebruikt dezelfde donkere gouden uitstraling als de Pokédex. */
.owned-pokemon-card--shiny[b-ygxdd3fy01] {
    --owned-card-color: var(--status-shiny);
    color: #fff4c2;
    background: radial-gradient(circle at 84% 8%, rgba(255, 224, 92, 0.28), transparent 32%), radial-gradient(circle at 12% 115%, rgba(185, 113, 0, 0.28), transparent 48%), linear-gradient(135deg, #17130a 0%, #2a210c 42%, #151107 72%, #2f2409 100%);
    border-color: #f2c94c;
    box-shadow: 0 9px 24px rgba(95, 61, 0, 0.28), 0 0 0 1px rgba(255, 222, 98, 0.36), 0 0 16px rgba(255, 195, 31, 0.19), inset 0 0 28px rgba(255, 190, 26, 0.12);
}

    .owned-pokemon-card--shiny[b-ygxdd3fy01]::before {
        position: absolute;
        z-index: 4;
        top: -80%;
        bottom: -80%;
        left: -62%;
        width: 22%;
        content: "";
        pointer-events: none;
        background: linear-gradient(90deg, transparent, rgba(255, 248, 205, 0.12), rgba(255, 255, 255, 0.92), rgba(255, 218, 79, 0.2), transparent);
        filter: blur(1px);
        transform: rotate(18deg) translateX(-320%);
        animation: shiny-sweep-b-ygxdd3fy01 4.2s cubic-bezier(.45, 0, .2, 1) infinite;
    }

    .owned-pokemon-card--shiny[b-ygxdd3fy01]::after {
        position: absolute;
        z-index: 2;
        inset: 0;
        content: "";
        pointer-events: none;
        background: radial-gradient(circle at 8% 20%, #fffbe7 0 1px, transparent 2px), radial-gradient(circle at 42% 16%, #ffffff 0 1px, transparent 2px), radial-gradient(circle at 67% 81%, #ffe889 0 1px, transparent 2px), radial-gradient(circle at 88% 27%, #fff7bd 0 1.5px, transparent 2.5px);
        opacity: 0.68;
        animation: shiny-sparkle-b-ygxdd3fy01 1.9s ease-in-out infinite alternate;
    }

    .owned-pokemon-card--shiny .owned-pokemon-title h2[b-ygxdd3fy01] {
        color: #ffe47a;
        background: linear-gradient(90deg, #d99b12, #fff1a1 42%, #f3bd32 72%, #fff3b2);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .owned-pokemon-card--shiny .owned-pokemon-title > span[b-ygxdd3fy01],
    .owned-pokemon-card--shiny .owned-pokemon-location[b-ygxdd3fy01] {
        color: #f8ce50;
    }

    .owned-pokemon-card--shiny .owned-pokemon-meta span[b-ygxdd3fy01] {
        color: #ffe89a;
        background: rgba(255, 211, 70, 0.1);
        border-color: rgba(255, 211, 70, 0.28);
    }

.pokemon-dialog-backdrop[b-ygxdd3fy01] {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: grid;
    overflow-y: auto;
    place-items: center;
    padding: 1.5rem;
    background: rgba(12, 9, 6, 0.78);
    backdrop-filter: blur(7px);
}

.pokemon-dialog[b-ygxdd3fy01] {
    position: relative;
    width: min(1080px, 100%);
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid rgba(250, 158, 55, 0.58);
    border-radius: 19px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.46);
}

.pokemon-dialog__close[b-ygxdd3fy01] {
    position: absolute;
    z-index: 10;
    top: 1.1rem;
    right: 1.1rem;
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    cursor: pointer;
    color: #c56608;
    font-size: 1.65rem;
    font-weight: 400;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgb(250, 158, 55);
    border-radius: 50%;
    transition: color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

    .pokemon-dialog__close:hover[b-ygxdd3fy01] {
        color: #ffffff;
        background: rgb(250, 158, 55);
        transform: rotate(8deg);
    }

.pokemon-dialog__hero[b-ygxdd3fy01] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    min-height: 205px;
    padding: 2rem 5.5rem 2rem 2.7rem;
    background: radial-gradient(circle at 88% 28%, rgba(250, 158, 55, 0.13), transparent 30%), radial-gradient(circle at 20% 75%, rgba(77, 176, 101, 0.09), transparent 40%), linear-gradient(110deg, #fbfff9, #f5fbea 58%, #fff9e9);
    border-bottom: 1px solid rgba(250, 158, 55, 0.22);
}

.pokemon-dialog__hero--shiny[b-ygxdd3fy01] {
    background: radial-gradient(circle at 84% 30%, rgba(255, 224, 92, 0.3), transparent 35%), radial-gradient(circle at 18% 80%, rgba(224, 157, 18, 0.17), transparent 40%), linear-gradient(125deg, #121009, #2a210c 55%, #171208);
}

.pokemon-dialog__identity[b-ygxdd3fy01] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 1.35rem;
}

.pokemon-dialog__image-shell[b-ygxdd3fy01] {
    display: grid;
    flex: 0 0 145px;
    width: 145px;
    height: 145px;
    overflow: hidden;
    place-items: center;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(120, 104, 86, 0.3);
    border-radius: 13px;
    box-shadow: inset 0 1px 0 #ffffff, 0 8px 20px rgba(67, 49, 24, 0.08);
}

.pokemon-dialog__hero--shiny .pokemon-dialog__image-shell[b-ygxdd3fy01] {
    background: rgba(255, 239, 160, 0.08);
    border-color: rgba(255, 221, 89, 0.48);
    box-shadow: inset 0 0 24px rgba(255, 214, 63, 0.12), 0 0 24px rgba(218, 155, 14, 0.15);
}

.pokemon-dialog__image-shell img[b-ygxdd3fy01] {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    object-fit: contain;
}

.pokemon-dialog__name[b-ygxdd3fy01] {
    min-width: 0;
}

.pokemon-dialog__location[b-ygxdd3fy01] {
    display: inline-flex;
    margin-top: 0.75rem;
    padding: 0.38rem 0.78rem;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 800;
    background: rgb(var(--status-owned));
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(var(--status-owned), 0.2);
}

.pokemon-dialog__hero--shiny .pokemon-dialog__location[b-ygxdd3fy01] {
    color: #3d2a00;
    background: linear-gradient(135deg, #fff4a6, #d99a0c 60%, #ffe982);
}

.pokemon-dialog__hero h2[b-ygxdd3fy01] {
    margin: 0;
    color: #332417;
    font-size: clamp(1.8rem, 4vw, 2.35rem);
    font-weight: 850;
    line-height: 1.05;
    text-transform: capitalize;
}

.pokemon-dialog__hero p[b-ygxdd3fy01] {
    margin: 0.45rem 0 0;
    color: #735d4d;
    font-size: 0.98rem;
    text-transform: capitalize;
}

.pokemon-dialog__hero--shiny h2[b-ygxdd3fy01] {
    color: #ffe47a;
}

.pokemon-dialog__hero--shiny p[b-ygxdd3fy01] {
    color: #ddc878;
}

.pokemon-dialog__highlights[b-ygxdd3fy01] {
    display: grid;
    min-width: 365px;
    grid-template-columns: repeat(3, minmax(92px, 1fr));
}

    .pokemon-dialog__highlights > div[b-ygxdd3fy01] {
        display: flex;
        min-width: 0;
        align-items: center;
        flex-direction: column;
        gap: 0.35rem;
        padding: 0.2rem 1.2rem;
        border-left: 1px solid rgba(96, 76, 58, 0.18);
    }

        .pokemon-dialog__highlights > div:first-child[b-ygxdd3fy01] {
            border-left: 0;
        }

    .pokemon-dialog__highlights span[b-ygxdd3fy01] {
        color: #755f50;
        font-size: 0.78rem;
        font-weight: 700;
    }

    .pokemon-dialog__highlights strong[b-ygxdd3fy01] {
        color: #352416;
        font-size: 1.55rem;
        font-weight: 850;
    }

.pokemon-dialog__hero--shiny .pokemon-dialog__highlights span[b-ygxdd3fy01] {
    color: #cdbd80;
}

.pokemon-dialog__hero--shiny .pokemon-dialog__highlights strong[b-ygxdd3fy01] {
    color: #ffe477;
}

.pokemon-dialog__hero--shiny .pokemon-dialog__highlights > div[b-ygxdd3fy01] {
    border-left-color: rgba(255, 224, 112, 0.22);
}

.pokemon-dialog__tabs[b-ygxdd3fy01] {
    display: flex;
    gap: 1.8rem;
    padding: 0 2rem;
    border-bottom: 1px solid rgba(92, 70, 50, 0.13);
}

    .pokemon-dialog__tabs span[b-ygxdd3fy01] {
        position: relative;
        padding: 1rem 0 0.85rem;
        color: #77675b;
        font-size: 0.82rem;
        font-weight: 750;
    }

        .pokemon-dialog__tabs span.active[b-ygxdd3fy01] {
            color: #d46b08;
        }

            .pokemon-dialog__tabs span.active[b-ygxdd3fy01]::after {
                position: absolute;
                right: 0;
                bottom: -1px;
                left: 0;
                height: 2px;
                content: "";
                background: rgb(250, 158, 55);
                border-radius: 999px;
            }

.pokemon-dialog__body[b-ygxdd3fy01] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem 1.6rem 1.2rem;
}

.pokemon-dialog__column[b-ygxdd3fy01] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1rem;
}

.pokemon-panel[b-ygxdd3fy01] {
    padding: 1rem 1.1rem;
    background: linear-gradient(145deg, #ffffff, #fffdfa);
    border: 1px solid rgba(250, 158, 55, 0.3);
    border-radius: 13px;
}

    .pokemon-panel h3[b-ygxdd3fy01] {
        margin: 0 0 0.85rem;
        color: #3e2b1d;
        font-size: 1rem;
        font-weight: 850;
    }

.pokemon-panel__heading[b-ygxdd3fy01] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

    .pokemon-panel__heading > span[b-ygxdd3fy01] {
        padding: 0.3rem 0.7rem;
        color: #c76405;
        font-size: 0.72rem;
        font-weight: 850;
        background: #fff8ef;
        border: 1px solid rgba(250, 158, 55, 0.32);
        border-radius: 999px;
    }

.pokemon-panel__empty[b-ygxdd3fy01] {
    margin: 0;
    color: #89786c;
    font-size: 0.78rem;
}

.pokemon-detail-grid[b-ygxdd3fy01] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.pokemon-detail[b-ygxdd3fy01] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.18rem;
    padding: 0.7rem 0.8rem;
    background: linear-gradient(135deg, #fffdfb, #fff8f2);
    border: 1px solid rgba(250, 158, 55, 0.25);
    border-radius: 10px;
}

    .pokemon-detail span[b-ygxdd3fy01] {
        color: #8d7d71;
        font-size: 0.66rem;
        font-weight: 700;
    }

    .pokemon-detail strong[b-ygxdd3fy01] {
        color: #30231a;
        font-size: 0.78rem;
        font-weight: 800;
        overflow-wrap: anywhere;
        text-transform: capitalize;
    }

.pokemon-moves[b-ygxdd3fy01] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pokemon-move[b-ygxdd3fy01] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 105px;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    color: #3d2b1e;
    font-size: 0.76rem;
    text-transform: capitalize;
    background: #fffaf5;
    border: 1px solid rgba(250, 158, 55, 0.22);
    border-radius: 9px;
}

    .pokemon-move span[b-ygxdd3fy01] {
        color: #6d5a4d;
        font-size: 0.7rem;
        white-space: nowrap;
    }

    .pokemon-move i[b-ygxdd3fy01] {
        height: 6px;
        background: linear-gradient(90deg, #199348, #35b663);
        border-radius: 999px;
    }

.pokemon-stats-list[b-ygxdd3fy01] {
    display: flex;
    flex-direction: column;
    gap: 0.62rem;
}

.pokemon-stat-row[b-ygxdd3fy01] {
    display: grid;
    grid-template-columns: 90px minmax(70px, 1fr) 54px;
    align-items: center;
    gap: 0.7rem;
    color: #655347;
    font-size: 0.72rem;
}

    .pokemon-stat-row > strong[b-ygxdd3fy01] {
        color: #3e2d21;
        font-size: 0.7rem;
        text-align: right;
        white-space: nowrap;
    }

    .pokemon-stat-row small[b-ygxdd3fy01] {
        color: #8d8178;
        font-size: inherit;
        font-weight: 500;
    }

.pokemon-stat-bar[b-ygxdd3fy01] {
    height: 7px;
    overflow: hidden;
    background: #e9e7e5;
    border-radius: 999px;
}

    .pokemon-stat-bar i[b-ygxdd3fy01] {
        display: block;
        height: 100%;
        min-width: 2px;
        background: linear-gradient(90deg, #ff920e, rgb(250, 158, 55));
        border-radius: inherit;
    }

.pokemon-stat-row--perfect > span[b-ygxdd3fy01],
.pokemon-stat-row--perfect > strong[b-ygxdd3fy01] {
    color: #148443;
    font-weight: 850;
}

.pokemon-stat-row--perfect .pokemon-stat-bar i[b-ygxdd3fy01] {
    background: linear-gradient(90deg, #168944, #49bb6e);
    box-shadow: 0 0 8px rgba(25, 147, 72, 0.32);
}

.pokemon-stats-list--ev .pokemon-stat-row[b-ygxdd3fy01] {
    grid-template-columns: 90px minmax(70px, 1fr) 34px;
}

.pokemon-dialog__footer[b-ygxdd3fy01] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.8rem;
    color: #817064;
    font-size: 0.72rem;
    border-top: 1px solid rgba(92, 70, 50, 0.13);
}

    .pokemon-dialog__footer button[b-ygxdd3fy01] {
        min-width: 108px;
        padding: 0.7rem 1rem;
        cursor: pointer;
        color: #c86608;
        font-size: 0.8rem;
        font-weight: 800;
        background: #ffffff;
        border: 1px solid rgb(250, 158, 55);
        border-radius: 10px;
    }

        .pokemon-dialog__footer button:hover[b-ygxdd3fy01] {
            color: #ffffff;
            background: rgb(250, 158, 55);
        }

@media (max-width: 900px) {
    .inventory-filter-bar[b-ygxdd3fy01] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inventory-clear-button[b-ygxdd3fy01] {
        width: 100%;
    }

    .pokemon-dialog__hero[b-ygxdd3fy01] {
        align-items: flex-start;
        flex-direction: column;
    }

    .pokemon-dialog__highlights[b-ygxdd3fy01] {
        width: 100%;
        min-width: 0;
    }

    .pokemon-dialog__body[b-ygxdd3fy01] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .pokemon-dialog-backdrop[b-ygxdd3fy01] {
        align-items: start;
        padding: 0;
    }

    .pokemon-dialog[b-ygxdd3fy01] {
        width: min(950px, 100%);
        max-height: calc(100vh - 5rem);
        font-size: 0.9rem;
        min-height: 100vh;
        border: 0;
        border-radius: 0;
    }

    .inventory-filter-bar[b-ygxdd3fy01] {
        grid-template-columns: 1fr;
    }

    .owned-pokemon-list[b-ygxdd3fy01] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.7rem;
    }

    .owned-pokemon-card[b-ygxdd3fy01] {
        align-items: center;
        flex-direction: column;
        min-height: 170px;
        text-align: center;
    }

    .owned-pokemon-title[b-ygxdd3fy01] {
        justify-content: center;
    }

    .owned-pokemon-meta[b-ygxdd3fy01] {
        justify-content: center;
    }

    .owned-pokemon-location[b-ygxdd3fy01] {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 0.3rem;
    }

    .pokemon-dialog__hero[b-ygxdd3fy01] {
        padding: 4.5rem 1.1rem 1.4rem;
    }

    .pokemon-dialog__identity[b-ygxdd3fy01] {
        width: 100%;
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    .pokemon-dialog__image-shell[b-ygxdd3fy01] {
        flex-basis: 125px;
        width: 125px;
        height: 125px;
    }

    .pokemon-dialog__highlights > div[b-ygxdd3fy01] {
        padding: 0.2rem 0.55rem;
    }

    .pokemon-dialog__highlights strong[b-ygxdd3fy01] {
        font-size: 1.15rem;
    }

    .pokemon-dialog__tabs[b-ygxdd3fy01] {
        padding: 0 1rem;
    }

    .pokemon-dialog__body[b-ygxdd3fy01] {
        padding: 0.8rem;
    }

    .pokemon-detail-grid[b-ygxdd3fy01] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pokemon-dialog__footer[b-ygxdd3fy01] {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 420px) {
    .owned-pokemon-list[b-ygxdd3fy01] {
        grid-template-columns: 1fr;
    }

    .owned-pokemon-card[b-ygxdd3fy01] {
        flex-direction: row;
        min-height: 112px;
        text-align: left;
    }

    .owned-pokemon-title[b-ygxdd3fy01], .owned-pokemon-meta[b-ygxdd3fy01] {
        justify-content: flex-start;
    }

    .pokemon-detail-grid[b-ygxdd3fy01] {
        grid-template-columns: 1fr;
    }

    .pokemon-stat-row[b-ygxdd3fy01], .pokemon-stats-list--ev .pokemon-stat-row[b-ygxdd3fy01] {
        grid-template-columns: 76px minmax(45px, 1fr) 48px;
        gap: 0.45rem;
    }

    .pokemon-move[b-ygxdd3fy01] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

        .pokemon-move i[b-ygxdd3fy01] {
            display: none;
        }
}

/* Compactere Pokémon-popup */
.pokemon-dialog[b-ygxdd3fy01] {
    width: min(900px, calc(100vw - 3rem));
    max-height: calc(100vh - 2rem);
    font-size: 0.85rem;
}

/* Kleinere bovenkant */
.pokemon-dialog__hero[b-ygxdd3fy01] {
    min-height: 150px;
    gap: 1.25rem;
    padding: 1.25rem 4.5rem 1.25rem 1.5rem;
}

.pokemon-dialog__image-shell[b-ygxdd3fy01] {
    flex-basis: 105px;
    width: 105px;
    height: 105px;
}

.pokemon-dialog__hero h2[b-ygxdd3fy01] {
    font-size: 1.7rem;
}

.pokemon-dialog__hero p[b-ygxdd3fy01] {
    margin-top: 0.25rem;
    font-size: 0.82rem;
}

.pokemon-dialog__location[b-ygxdd3fy01] {
    margin-top: 0.45rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.68rem;
}

/* Kleinere HP/Friendship/XP-velden */
.pokemon-dialog__highlights[b-ygxdd3fy01] {
    min-width: 300px;
}

    .pokemon-dialog__highlights > div[b-ygxdd3fy01] {
        gap: 0.15rem;
        padding: 0.1rem 0.8rem;
    }

    .pokemon-dialog__highlights span[b-ygxdd3fy01] {
        font-size: 0.68rem;
    }

    .pokemon-dialog__highlights strong[b-ygxdd3fy01] {
        font-size: 1.2rem;
    }

/* Compactere navigatieregel */
.pokemon-dialog__tabs[b-ygxdd3fy01] {
    gap: 1.4rem;
    padding: 0 1.4rem;
}

    .pokemon-dialog__tabs span[b-ygxdd3fy01] {
        padding: 0.65rem 0 0.6rem;
        font-size: 0.72rem;
    }

/* Minder ruimte tussen de panelen */
.pokemon-dialog__body[b-ygxdd3fy01] {
    gap: 0.7rem;
    padding: 0.7rem 1rem;
}

.pokemon-dialog__column[b-ygxdd3fy01] {
    gap: 0.7rem;
}

.pokemon-panel[b-ygxdd3fy01] {
    padding: 0.7rem 0.8rem;
}

    .pokemon-panel h3[b-ygxdd3fy01] {
        margin-bottom: 0.55rem;
        font-size: 0.85rem;
    }

/* Compactere details */
.pokemon-detail-grid[b-ygxdd3fy01] {
    gap: 0.4rem;
}

.pokemon-detail[b-ygxdd3fy01] {
    gap: 0.08rem;
    padding: 0.45rem 0.55rem;
}

    .pokemon-detail span[b-ygxdd3fy01] {
        font-size: 0.58rem;
    }

    .pokemon-detail strong[b-ygxdd3fy01] {
        font-size: 0.68rem;
    }

/* Compactere moves */
.pokemon-moves[b-ygxdd3fy01] {
    gap: 0.35rem;
}

.pokemon-move[b-ygxdd3fy01] {
    padding: 0.42rem 0.55rem;
    font-size: 0.68rem;
}

/* Compactere IV- en EV-regels */
.pokemon-stats-list[b-ygxdd3fy01] {
    gap: 0.4rem;
}

.pokemon-stat-row[b-ygxdd3fy01] {
    grid-template-columns: 75px minmax(60px, 1fr) 48px;
    gap: 0.5rem;
    font-size: 0.65rem;
}

.pokemon-stats-list--ev .pokemon-stat-row[b-ygxdd3fy01] {
    grid-template-columns: 75px minmax(60px, 1fr) 30px;
}

.pokemon-stat-bar[b-ygxdd3fy01] {
    height: 5px;
}

/* Compactere footer */
.pokemon-dialog__footer[b-ygxdd3fy01] {
    padding: 0.55rem 1.1rem;
}

    .pokemon-dialog__footer button[b-ygxdd3fy01] {
        min-width: 90px;
        padding: 0.5rem 0.75rem;
    }

.inventory-filter-field input[b-ygxdd3fy01] {
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    padding: 0.65rem 0.8rem;
    color: #30231a;
    font: inherit;
    background: #ffffff;
    border: 1px solid rgba(250, 158, 55, 0.32);
    border-radius: 10px;
    outline: none;
}

    .inventory-filter-field input:focus[b-ygxdd3fy01] {
        border-color: rgb(250, 158, 55);
        box-shadow: 0 0 0 3px rgba(250, 158, 55, 0.13);
    }

    .inventory-filter-field input[b-ygxdd3fy01]::placeholder {
        color: #a6988d;
    }

.inventory-filter-field--species[b-ygxdd3fy01] {
    min-width: 220px;
}

.pokemon-card__header[b-ygxdd3fy01] { flex-wrap: wrap; }
.pokemon-card__marks[b-ygxdd3fy01] { flex: 0 0 100%; min-width: 0; }
.pokemon-form-marks[b-ygxdd3fy01] { width: 100%; padding: .4rem 0; }
.pokemon-form-marks__count[b-ygxdd3fy01] { margin-left: .5rem; color: #675b51; font-size: .75rem; }

.score-breakdown[b-ygxdd3fy01] { position: relative; cursor: help; }
.score-breakdown__panel[b-ygxdd3fy01] { display: none; position: absolute; top: 100%; left: 0; z-index: 100; width: min(340px, calc(100vw - 48px)); padding: 1rem; background: #fff; color: #29231f; border: 1px solid #edcfaa; border-radius: 12px; box-shadow: 0 8px 28px #0003; text-align: left; font-size: .8rem; font-weight: 400; }
.score-breakdown:hover .score-breakdown__panel[b-ygxdd3fy01], .score-breakdown:focus-within .score-breakdown__panel[b-ygxdd3fy01] { display: block; }
.score-breakdown:focus-visible[b-ygxdd3fy01] { outline: 2px solid #b76003; outline-offset: 4px; border-radius: 8px; }
.score-breakdown__panel dl[b-ygxdd3fy01] { margin: .7rem 0; }
.score-breakdown__panel dl > div[b-ygxdd3fy01] { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; }
.score-breakdown__panel dt[b-ygxdd3fy01] { font-weight: 400; }
.score-breakdown__panel dd[b-ygxdd3fy01] { margin: 0; font-weight: 750; white-space: nowrap; }
.score-breakdown__total[b-ygxdd3fy01] { border-top: 1px solid #edcfaa; margin-top: .4rem; }
.score-breakdown__panel small[b-ygxdd3fy01] { display: block; line-height: 1.5; }
.marks-dashboard[b-ygxdd3fy01] { margin: 1rem 0; padding: .8rem 1rem; border: 1px solid #edcfaa; border-radius: 14px; background: #fffaf3; }
.marks-dashboard > summary[b-ygxdd3fy01] { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.2rem; cursor: pointer; font-size: .85rem; }
.marks-dashboard > summary > strong[b-ygxdd3fy01] { color: #975306; }
.marks-dashboard__hint[b-ygxdd3fy01] { margin-left: auto; color: #796a5b; font-size: .75rem; }
.marks-dashboard__hint[b-ygxdd3fy01]::after { content: ' \25BE'; }
.marks-dashboard[open] .marks-dashboard__hint[b-ygxdd3fy01]::after { content: ' \25B4'; }
.marks-dashboard > p[b-ygxdd3fy01] { font-size: .8rem; color: #796a5b; margin: .8rem 0; }
.marks-dashboard__grid[b-ygxdd3fy01] { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .4rem .9rem; max-height: 240px; overflow-y: auto; }
.marks-dashboard__item[b-ygxdd3fy01] { display: flex; align-items: center; gap: .5rem; font-size: .8rem; }
.marks-dashboard__item > strong[b-ygxdd3fy01] { margin-left: auto; }
@media (max-width: 650px) { .score-breakdown__panel[b-ygxdd3fy01] { position: fixed; top: 20vh; left: 50%; transform: translateX(-50%); max-height: 70vh; overflow-y: auto; } }
.marks-dashboard__item[b-ygxdd3fy01] { width: 100%; padding: .35rem .5rem; border: 1px solid transparent; border-radius: 8px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.marks-dashboard__item:hover[b-ygxdd3fy01], .marks-dashboard__item[aria-pressed="true"][b-ygxdd3fy01] { background: #fff0d8; border-color: #d5984c; }
.marks-dashboard__item:focus-visible[b-ygxdd3fy01] { outline: 2px solid #975306; outline-offset: 2px; }
.active-mark-filter[b-ygxdd3fy01] { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-bottom: .8rem; padding: .65rem 1rem; border-radius: 10px; background: #fff0d8; font-size: .85rem; }
.active-mark-filter button[b-ygxdd3fy01] { padding: .3rem .65rem; border: 1px solid #d5984c; border-radius: 6px; background: white; color: #975306; cursor: pointer; }
.owned-pokemon-title > .pokemon-score-indicator[b-ygxdd3fy01] { color: currentColor; opacity: .38; font-size: .7rem; line-height: 1; flex: 0 0 auto; }
.owned-pokemon-title > .pokemon-score-indicator:hover[b-ygxdd3fy01] { opacity: .8; }
/* Compact filter controls: size fields by their content rather than equal columns. */
.pokemon-filter-bar.compact-filters[b-ygxdd3fy01], .inventory-filter-bar.compact-filters[b-ygxdd3fy01] { padding: .75rem; margin: 1rem 0 .65rem; border-radius: 12px; gap: .65rem; }
.compact-filters .text-filters[b-ygxdd3fy01], .compact-filters .status-filters[b-ygxdd3fy01], .inventory-filter-bar.compact-filters[b-ygxdd3fy01] { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-start; gap: .55rem .75rem; }
.compact-filters .status-filters[b-ygxdd3fy01] { margin-top: .65rem; padding-top: .65rem; }
.compact-filters .filter-field[b-ygxdd3fy01], .compact-filters .inventory-filter-field[b-ygxdd3fy01] { display: flex; flex-direction: column; flex: 0 1 9rem; min-width: 0; width: auto; gap: .2rem; }
.compact-filters .filter-field--species[b-ygxdd3fy01], .compact-filters .inventory-filter-field--species[b-ygxdd3fy01] { flex: 0 1 16rem; min-width: 0; }
.compact-filters .filter-field--number[b-ygxdd3fy01] { flex: 0 0 7.5rem; }
.compact-filters .filter-field--marks[b-ygxdd3fy01] { flex: 0 0 6rem; }
.compact-filters .filter-field--status[b-ygxdd3fy01] { flex: 0 0 7rem; }
.compact-filters .inventory-filter-field--sort[b-ygxdd3fy01] { flex: 0 1 12rem; }
.compact-filters .filter-field input[b-ygxdd3fy01], .compact-filters .filter-field select[b-ygxdd3fy01], .compact-filters .inventory-filter-field input[b-ygxdd3fy01], .compact-filters .inventory-filter-field select[b-ygxdd3fy01] { box-sizing: border-box; width: 100%; height: 36px; min-height: 36px; padding: .35rem .55rem; border-radius: 7px; font-size: .78rem; }
.compact-filters label > span[b-ygxdd3fy01], .compact-filters .filter-toggle__label[b-ygxdd3fy01] { font-size: .7rem; }
.compact-filters .filter-toggle[b-ygxdd3fy01] { flex: 0 1 auto; min-width: 0; gap: .2rem; padding: 0; }
.compact-filters .toggle-group[b-ygxdd3fy01] { flex-wrap: nowrap; gap: .25rem; }
.compact-filters .toggle-group button[b-ygxdd3fy01], .compact-filters .clear-filters-button[b-ygxdd3fy01], .compact-filters .inventory-clear-button[b-ygxdd3fy01] { width: auto; min-height: 36px; padding: .35rem .65rem; font-size: .75rem; border-radius: 7px; }
@media (max-width: 520px) {
    .compact-filters .filter-field--species[b-ygxdd3fy01], .compact-filters .inventory-filter-field--species[b-ygxdd3fy01] { flex-basis: 100%; }
    .compact-filters .filter-field[b-ygxdd3fy01], .compact-filters .inventory-filter-field[b-ygxdd3fy01] { max-width: 100%; }
}
.compact-filters .filter-toggle--boolean .toggle-group button[b-ygxdd3fy01] { min-width: 36px; min-height: 30px; padding: .2rem .5rem; font-size: .72rem; }
/* /Components/Pages/Players.razor.rz.scp.css */
.players-page h1[b-oe90c28bql] {
    margin-bottom: 1.5rem;
    color: #242424;
    font-size: 2rem;
    font-weight: 800;
}

.players-grid[b-oe90c28bql] {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax(270px, 1fr) );
    gap: 1.25rem;
}

.player-card[b-oe90c28bql] {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    min-height: 110px;
    padding: 1.25rem;
    background: radial-gradient( circle at top right, rgba(250, 158, 55, 0.16), transparent 55% ), #ffffff;
    border: 1px solid rgba(250, 158, 55, 0.28);
    border-radius: 18px;
    box-shadow: 0 4px 12px rgba(250, 158, 55, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

    .player-card:hover[b-oe90c28bql] {
        transform: translateY(-3px);
        border-color: rgb(250, 158, 55);
        box-shadow: 0 10px 24px rgba(250, 158, 55, 0.18), 0 3px 8px rgba(0, 0, 0, 0.07);
    }

.player-avatar[b-oe90c28bql] {
    display: block;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    image-rendering: pixelated;
    object-fit: cover;
    background-color: rgba(250, 158, 55, 0.12);
    box-shadow: 0 5px 14px rgba(250, 158, 55, 0.2);
}

.player-card h2[b-oe90c28bql] {
    min-width: 0;
    margin: 0;
    color: #242424;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .players-grid[b-oe90c28bql] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Rankings.razor.rz.scp.css */
.rankings-page[b-zo1eus9j2g] {
    --orange: 250, 158, 55;
    --caught: 91, 92, 226;
    --owned: 35, 158, 88;
    --shiny: 218, 165, 32;
    width: 100%;
}

.rankings-grid[b-zo1eus9j2g] {
    display: grid;
    grid-template-columns: repeat(2, minmax(300px, 1fr));
    gap: 1.25rem;
}

/* Standaard: lichte kaarten */
.ranking-card[b-zo1eus9j2g] {
    --ranking-color: var(--orange);
    position: relative;
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    padding: 1.1rem 1.1rem 0;
    color: #29231f;
    background: radial-gradient(circle at 88% 4%, rgba(var(--ranking-color), .16), transparent 42%), linear-gradient(145deg, #ffffff, #fffdfa 72%, rgba(var(--ranking-color), .04));
    border: 1px solid rgba(var(--ranking-color), .34);
    border-radius: 20px;
    box-shadow: 0 8px 22px rgba(var(--ranking-color), .1), 0 2px 6px rgba(0, 0, 0, .045), inset 0 1px 0 rgba(255, 255, 255, .8);
}

    .ranking-card[b-zo1eus9j2g]::after {
        position: absolute;
        inset: 0;
        content: "";
        pointer-events: none;
        background: radial-gradient(circle at 8% 18%, rgba(var(--ranking-color), .35) 0 1px, transparent 2px), radial-gradient(circle at 84% 24%, rgba(var(--ranking-color), .38) 0 1px, transparent 2px);
        opacity: .42;
    }

.ranking-card--featured[b-zo1eus9j2g] {
    grid-column: 1 / -1;
    min-height: 520px;
    color: #ffffff;
    background: radial-gradient(circle at 50% 40%, rgba(var(--ranking-color), .21), transparent 42%), radial-gradient(circle at 90% 0, rgba(var(--ranking-color), .16), transparent 35%), linear-gradient(145deg, #18130e, #080706 70%, #1f130a);
    border-color: rgba(var(--ranking-color), .5);
    box-shadow: 0 12px 30px rgba(31, 18, 7, .24), 0 0 20px rgba(var(--ranking-color), .1), inset 0 1px 0 rgba(255, 255, 255, .05);
}

    .ranking-card--featured[b-zo1eus9j2g]::after {
        background: radial-gradient(circle at 8% 18%, rgba(255,255,255,.6) 0 1px, transparent 2px), radial-gradient(circle at 84% 24%, rgba(var(--ranking-color),.85) 0 1px, transparent 2px), radial-gradient(circle at 68% 69%, rgba(255,255,255,.35) 0 1px, transparent 2px);
        opacity: .55;
    }

.ranking-card--progress[b-zo1eus9j2g],
.ranking-card--registered[b-zo1eus9j2g] {
    --ranking-color: var(--orange);
}

.ranking-card--caught[b-zo1eus9j2g] {
    --ranking-color: var(--caught);
}

.ranking-card--owned[b-zo1eus9j2g] {
    --ranking-color: var(--owned);
}

.ranking-card--shiny[b-zo1eus9j2g] {
    --ranking-color: var(--shiny);
    background: radial-gradient(circle at 88% 4%, rgba(255, 222, 86, .32), transparent 42%), linear-gradient(145deg, #ffffff, #fff8d9 70%, #ffffff);
}

.ranking-card--walked[b-zo1eus9j2g] {
    --ranking-color: 86, 139, 87;
}

.ranking-card--flown[b-zo1eus9j2g] {
    --ranking-color: 64, 145, 180;
}

.ranking-card--playtime[b-zo1eus9j2g] {
    --ranking-color: 126, 87, 194;
}

.ranking-card--loot[b-zo1eus9j2g] {
    --ranking-color: 196, 125, 35;
}

.ranking-card--raids[b-zo1eus9j2g] {
    --ranking-color: 190, 66, 58;
}

.ranking-card--mobs[b-zo1eus9j2g] {
    --ranking-color: 113, 105, 100;
}

.ranking-card__header[b-zo1eus9j2g] {
    position: relative;
    z-index: 3;
    display: flex;
    min-height: 50px;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
}

.ranking-card__title[b-zo1eus9j2g] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .7rem;
}

.ranking-card__icon[b-zo1eus9j2g] {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #ffffff;
    font-weight: 900;
    background: rgb(var(--ranking-color));
    border-radius: 12px;
    box-shadow: 0 5px 13px rgba(var(--ranking-color), .25);
}

.ranking-card__label[b-zo1eus9j2g] {
    display: block;
    color: rgb(var(--ranking-color));
    font-size: .62rem;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.ranking-card__header h2[b-zo1eus9j2g] {
    margin: .12rem 0 0;
    color: #29231f;
    font-size: 1.05rem;
    font-weight: 820;
}

.ranking-card--featured .ranking-card__header h2[b-zo1eus9j2g] {
    color: #fff4e8;
    font-size: clamp(1.15rem, 2vw, 1.55rem);
}

/* Eigen Pokémon/Forms-keuze per geschikte kaart */
.ranking-mode[b-zo1eus9j2g] {
    display: flex;
    flex-shrink: 0;
    gap: 3px;
    padding: 3px;
    background: rgba(var(--ranking-color), .07);
    border: 1px solid rgba(var(--ranking-color), .25);
    border-radius: 10px;
}

.ranking-mode__button[b-zo1eus9j2g] {
    min-height: 32px;
    padding: .35rem .58rem;
    cursor: pointer;
    color: #77685c;
    font-size: .68rem;
    font-weight: 750;
    background: transparent;
    border: 0;
    border-radius: 7px;
}

    .ranking-mode__button:hover[b-zo1eus9j2g] {
        color: rgb(var(--ranking-color));
        background: rgba(var(--ranking-color), .12);
    }

    .ranking-mode__button.active[b-zo1eus9j2g] {
        color: #ffffff;
        background: rgb(var(--ranking-color));
        box-shadow: 0 3px 9px rgba(var(--ranking-color), .25);
    }

/* Podiumplaatsen 1, 2 en 3 */
.ranking-podium[b-zo1eus9j2g] {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: clamp(.3rem, 2vw, 1.25rem);
    min-height: 300px;
    margin: .9rem 0 0;
}

.ranking-card--featured .ranking-podium[b-zo1eus9j2g] {
    max-width: 900px;
    min-height: 350px;
    margin-right: auto;
    margin-left: auto;
}

.podium-player[b-zo1eus9j2g] {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: center;
    flex-direction: column;
    color: #29231f;
    text-decoration: none;
    transition: transform 160ms ease;
}

    .podium-player:hover[b-zo1eus9j2g] {
        color: #29231f;
        text-decoration: none;
        transform: translateY(-4px);
    }

.ranking-card--featured .podium-player[b-zo1eus9j2g],
.ranking-card--featured .podium-player:hover[b-zo1eus9j2g] {
    color: #ffffff;
}

.podium-player--first[b-zo1eus9j2g] {
    order: 2;
}

.podium-player--second[b-zo1eus9j2g] {
    order: 1;
}

.podium-player--third[b-zo1eus9j2g] {
    order: 3;
}

.podium-position[b-zo1eus9j2g] {
    position: absolute;
    z-index: 4;
    top: -11px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    font-size: .8rem;
    font-weight: 900;
    border-radius: 50%;
    box-shadow: 0 4px 11px rgba(0, 0, 0, .2);
}

.podium-player--first .podium-position[b-zo1eus9j2g] {
    top: -15px;
    width: 42px;
    height: 42px;
    font-size: 1rem;
}

.position--gold[b-zo1eus9j2g] {
    color: #604100;
    background: linear-gradient(135deg, #fff59e, #e6b413);
}

.position--silver[b-zo1eus9j2g] {
    color: #414950;
    background: linear-gradient(135deg, #f5f7f8, #aab2b9);
}

.position--bronze[b-zo1eus9j2g] {
    color: #5c2c0c;
    background: linear-gradient(135deg, #efb47d, #b6652e);
}

.podium-avatar-shell[b-zo1eus9j2g] {
    padding: 4px;
    background: rgba(var(--ranking-color), .08);
    border: 2px solid rgba(var(--ranking-color), .42);
    border-radius: 15px;
    box-shadow: 0 7px 18px rgba(var(--ranking-color), .12);
}

.ranking-card--featured .podium-avatar-shell[b-zo1eus9j2g] {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(var(--ranking-color), .5);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
}

.podium-player--first .podium-avatar-shell[b-zo1eus9j2g] {
    border-color: rgb(var(--ranking-color));
    box-shadow: 0 0 20px rgba(var(--ranking-color), .24), 0 8px 18px rgba(0, 0, 0, .12);
}

.ranking-card--featured .podium-player--first .podium-avatar-shell[b-zo1eus9j2g] {
    box-shadow: 0 0 20px rgba(var(--ranking-color), .28), 0 10px 22px rgba(0, 0, 0, .4);
}

.podium-avatar[b-zo1eus9j2g] {
    display: block;
    width: clamp(54px, 6vw, 76px);
    aspect-ratio: 1;
    image-rendering: pixelated;
    border-radius: 10px;
}

.podium-player--first .podium-avatar[b-zo1eus9j2g] {
    width: clamp(68px, 7vw, 92px);
}

.ranking-card--featured .podium-avatar[b-zo1eus9j2g] {
    width: clamp(74px, 8vw, 102px);
}

.ranking-card--featured .podium-player--first .podium-avatar[b-zo1eus9j2g] {
    width: clamp(90px, 10vw, 124px);
}

.podium-name[b-zo1eus9j2g] {
    max-width: 100%;
    margin-top: .55rem;
    overflow-wrap: anywhere;
    font-size: .78rem;
    text-align: center;
}

.podium-score[b-zo1eus9j2g] {
    margin-top: .12rem;
    color: rgb(var(--ranking-color));
    font-size: .72rem;
    font-weight: 850;
    text-align: center;
}

.podium-block[b-zo1eus9j2g] {
    width: 100%;
    height: 72px;
    margin-top: .55rem;
    background: linear-gradient(180deg, rgba(var(--ranking-color), .24), rgba(var(--ranking-color), .07));
    border: 1px solid rgba(var(--ranking-color), .3);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
}

.podium-player--first .podium-block[b-zo1eus9j2g] {
    height: 112px;
}

.podium-player--third .podium-block[b-zo1eus9j2g] {
    height: 54px;
}

.ranking-card--featured .podium-block[b-zo1eus9j2g] {
    height: 95px;
}

.ranking-card--featured .podium-player--first .podium-block[b-zo1eus9j2g] {
    height: 145px;
}

.ranking-card--featured .podium-player--third .podium-block[b-zo1eus9j2g] {
    height: 70px;
}

/* Compacte plaatsen 4 en 5 */
.ranking-runners-up[b-zo1eus9j2g] {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    margin: 0 -1.1rem;
    padding: .8rem 1.1rem 1rem;
    background: rgba(var(--ranking-color), .045);
    border-top: 1px solid rgba(var(--ranking-color), .18);
}

.ranking-card--featured .ranking-runners-up[b-zo1eus9j2g] {
    padding-right: max(1.1rem, calc((100% - 900px) / 2));
    padding-left: max(1.1rem, calc((100% - 900px) / 2));
    background: rgba(0, 0, 0, .24);
}

.runner-up[b-zo1eus9j2g] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .5rem;
    padding: .48rem .55rem;
    color: #29231f;
    text-decoration: none;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(var(--ranking-color), .2);
    border-radius: 10px;
}

    .runner-up:hover[b-zo1eus9j2g] {
        color: #29231f;
        text-decoration: none;
        background: rgba(var(--ranking-color), .1);
        border-color: rgba(var(--ranking-color), .4);
    }

.ranking-card--featured .runner-up[b-zo1eus9j2g],
.ranking-card--featured .runner-up:hover[b-zo1eus9j2g] {
    color: #ffffff;
    background: rgba(255, 255, 255, .045);
}

    .ranking-card--featured .runner-up:hover[b-zo1eus9j2g] {
        background: rgba(var(--ranking-color), .1);
    }

.runner-up__position[b-zo1eus9j2g] {
    display: grid;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    place-items: center;
    color: #766a61;
    font-size: .67rem;
    font-weight: 850;
    background: rgba(var(--ranking-color), .1);
    border-radius: 50%;
}

.ranking-card--featured .runner-up__position[b-zo1eus9j2g] {
    color: #c8bdb3;
    background: rgba(255, 255, 255, .08);
}

.runner-up__avatar[b-zo1eus9j2g] {
    display: block;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    image-rendering: pixelated;
    border-radius: 8px;
}

.runner-up__name[b-zo1eus9j2g] {
    min-width: 0;
    flex: 1;
    overflow-wrap: anywhere;
    font-size: .72rem;
    font-weight: 750;
}

.runner-up__score[b-zo1eus9j2g] {
    flex-shrink: 0;
    color: rgb(var(--ranking-color));
    font-size: .75rem;
    text-align: right;
}

.ranking-message[b-zo1eus9j2g] {
    display: flex;
    min-height: 180px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .65rem;
    padding: 1rem;
    color: #776b62;
    text-align: center;
    background: #ffffff;
    border: 1px solid rgba(var(--orange), .25);
    border-radius: 18px;
}

.ranking-message--error[b-zo1eus9j2g] {
    color: #9f2929;
    border-color: rgba(200, 45, 45, .25);
}

.ranking-message button[b-zo1eus9j2g] {
    padding: .55rem .8rem;
    cursor: pointer;
    color: #ffffff;
    font-weight: 700;
    background: rgb(var(--orange));
    border: 0;
    border-radius: 9px;
}

@media (max-width: 900px) {
    .rankings-grid[b-zo1eus9j2g] {
        grid-template-columns: 1fr;
    }

    .ranking-card--featured[b-zo1eus9j2g] {
        grid-column: auto;
    }
}

@media (max-width: 600px) {
    .ranking-card[b-zo1eus9j2g] {
        padding-right: .7rem;
        padding-left: .7rem;
    }

    .ranking-card__header[b-zo1eus9j2g] {
        align-items: stretch;
        flex-direction: column;
    }

    .ranking-mode[b-zo1eus9j2g] {
        width: 100%;
    }

    .ranking-mode__button[b-zo1eus9j2g] {
        flex: 1;
    }

    .ranking-podium[b-zo1eus9j2g] {
        min-height: 270px;
        gap: .2rem;
    }

    .ranking-card--featured[b-zo1eus9j2g] {
        min-height: auto;
    }

        .ranking-card--featured .ranking-podium[b-zo1eus9j2g] {
            min-height: 300px;
        }

    .podium-name[b-zo1eus9j2g] {
        font-size: .68rem;
    }

    .podium-score[b-zo1eus9j2g] {
        font-size: .62rem;
    }

    .ranking-runners-up[b-zo1eus9j2g] {
        grid-template-columns: 1fr;
        margin-right: -.7rem;
        margin-left: -.7rem;
        padding-right: .7rem;
        padding-left: .7rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .podium-player[b-zo1eus9j2g],
    .ranking-mode__button[b-zo1eus9j2g] {
        transition: none;
    }
}
.runner-up__identity[b-zo1eus9j2g] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }

.podium-player:hover[b-zo1eus9j2g], .podium-player:focus-within[b-zo1eus9j2g] { z-index: 5; }
.runner-up:hover[b-zo1eus9j2g], .runner-up:focus-within[b-zo1eus9j2g] { position: relative; z-index: 5; }
/* /Components/Pages/WorldMap.razor.rz.scp.css */
.world-map-page[b-xi4p0tcory] {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    gap: 0.8rem;
    overflow: hidden;
}

.world-map-header[b-xi4p0tcory] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

    .world-map-header span[b-xi4p0tcory] {
        color: rgb(183, 96, 3);
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .world-map-header h1[b-xi4p0tcory] {
        margin: 0.15rem 0 0;
        color: #242424;
        font-size: 1.6rem;
    }

    .world-map-header a[b-xi4p0tcory] {
        flex-shrink: 0;
        padding: 0.6rem 0.85rem;
        color: rgb(183, 96, 3);
        font-size: 0.75rem;
        font-weight: 750;
        text-decoration: none;
        background: #ffffff;
        border: 1px solid rgba(250, 158, 55, 0.45);
        border-radius: 10px;
    }

        .world-map-header a:hover[b-xi4p0tcory] {
            color: #ffffff;
            background: rgb(250, 158, 55);
        }

.world-map-frame[b-xi4p0tcory] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #15110d;
    border: 1px solid rgba(250, 158, 55, 0.35);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 4px 14px rgba(250, 158, 55, 0.1);
}

    .world-map-frame iframe[b-xi4p0tcory] {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 0;
        border: 0;
    }

@media (max-width: 640px) {
    .world-map-page[b-xi4p0tcory] {
        gap: 0.6rem;
    }

    .world-map-header[b-xi4p0tcory] {
        align-items: stretch;
        flex-direction: column;
    }

        .world-map-header a[b-xi4p0tcory] {
            text-align: center;
        }

    .world-map-frame[b-xi4p0tcory] {
        border-radius: 12px;
    }
}
/* /Components/Shared/BestPokemonRanking.razor.rz.scp.css */
.ranked-pokemon[b-jn2i805vzm] { display: flex; flex-direction: column; align-items: center; gap: .45rem; min-width: 0; width: 100%; color: #29231f; }
.ranked-pokemon__portrait[b-jn2i805vzm] { position: relative; flex-shrink: 0; padding: 6px; border: 2px solid rgba(35,158,88,.35); border-radius: 15px; background: #f5fbf6; box-shadow: 0 4px 12px #0000000d; }
.ranked-pokemon__image[b-jn2i805vzm] { display: block; width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; }
.ranked-pokemon__trainer[b-jn2i805vzm] { position: absolute; right: -7px; bottom: -5px; width: 32px; height: 32px; border: 2px solid white; border-radius: 7px; image-rendering: pixelated; box-sizing: content-box; background: white; }
.ranked-pokemon__details[b-jn2i805vzm] { display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 100%; }
.ranked-pokemon__details strong[b-jn2i805vzm] { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; text-transform: capitalize; }
.ranked-pokemon__owner[b-jn2i805vzm] { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #655849; font-size: .8rem; font-weight: 650; }
.ranked-pokemon[b-jn2i805vzm]  .pokemon-marks { justify-content: center; gap: 2px; margin-top: 3px; }
.ranked-pokemon[b-jn2i805vzm]  .pokemon-mark { min-width: 18px; min-height: 18px; }
.ranked-pokemon[b-jn2i805vzm]  .pokemon-mark img { width: 18px; height: 18px; }
.ranked-pokemon--shiny .ranked-pokemon__portrait[b-jn2i805vzm] { border-color: #f2c94c; background: radial-gradient(circle at top right, #ffe05c47, transparent 60%), linear-gradient(135deg, #17130a, #2a210c, #151107); box-shadow: 0 0 10px #ffc31f30; }
.ranked-pokemon__shiny[b-jn2i805vzm] { position: absolute; top: -5px; right: -5px; color: #d99b12; font-size: .9rem; text-shadow: 0 0 4px #fff1a1; }
.ranked-pokemon--compact[b-jn2i805vzm] { flex: 1; width: auto; flex-direction: row; gap: .85rem; }
.ranked-pokemon--compact .ranked-pokemon__portrait[b-jn2i805vzm] { padding: 3px; border-radius: 9px; }
.ranked-pokemon--compact .ranked-pokemon__image[b-jn2i805vzm] { width: 32px; height: 32px; }
.ranked-pokemon--compact .ranked-pokemon__trainer[b-jn2i805vzm] { width: 22px; height: 22px; border-width: 1px; right: -4px; bottom: -3px; border-radius: 4px; }
.ranked-pokemon--compact .ranked-pokemon__details[b-jn2i805vzm] { align-items: flex-start; flex: 1; }
.ranked-pokemon--compact[b-jn2i805vzm]  .pokemon-marks { justify-content: flex-start; }
@media (max-width: 420px) { .ranked-pokemon__image[b-jn2i805vzm] { width: 48px; height: 48px; } .ranked-pokemon__details strong[b-jn2i805vzm] { font-size: .72rem; } }

.ranked-pokemon__marks-tooltip[b-jn2i805vzm] { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 10; width: max-content; max-width: min(180px, 40vw); padding: .45rem .55rem; background: #fffdf8; border: 1px solid #e5d5b9; border-radius: 9px; box-shadow: 0 4px 14px #0002; }
.ranked-pokemon__portrait:hover .ranked-pokemon__marks-tooltip[b-jn2i805vzm],
.ranked-pokemon__portrait:focus-within .ranked-pokemon__marks-tooltip[b-jn2i805vzm] { display: block; }
.ranked-pokemon__portrait:focus-visible[b-jn2i805vzm] { outline: 2px solid #a77a20; outline-offset: 3px; }
.ranked-pokemon__marks-tooltip[b-jn2i805vzm]  .pokemon-marks { margin-top: 0; }
.ranked-pokemon--compact .ranked-pokemon__marks-tooltip[b-jn2i805vzm] { top: auto; bottom: 100%; left: 0; transform: none; }
/* /Components/Shared/OwnedPokemonInventory.razor.rz.scp.css */
.inventory-empty[b-vcv0hs5z6g] { padding: 2rem; color: #776b62; text-align: center; background: #fff; border: 1px solid rgba(250,158,55,.25); border-radius: 18px; }
.inventory-section[b-vcv0hs5z6g] { margin-bottom: 1.25rem; padding: 1rem; background: #fff; border: 1px solid rgba(250,158,55,.25); border-radius: 18px; box-shadow: 0 6px 18px rgba(250,158,55,.07); }
.inventory-section--party[b-vcv0hs5z6g] { background: radial-gradient(circle at top right,rgba(250,158,55,.14),transparent 48%),#fff; }
.inventory-section__header[b-vcv0hs5z6g] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.inventory-section__header span[b-vcv0hs5z6g] { display: block; color: rgb(183,96,3); font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.inventory-section__header h2[b-vcv0hs5z6g] { margin: .1rem 0 0; color: #29231f; font-size: 1.05rem; }
.inventory-section__header > strong[b-vcv0hs5z6g] { color: #8a786b; font-size: .72rem; }
.owned-pokemon-grid[b-vcv0hs5z6g] { display: grid; grid-template-columns: repeat(auto-fill,minmax(175px,1fr)); gap: .7rem; }
.owned-pokemon-grid--party[b-vcv0hs5z6g] { grid-template-columns: repeat(auto-fit,minmax(175px,1fr)); }
.owned-pokemon-card[b-vcv0hs5z6g] { display: flex; min-width: 0; min-height: 92px; align-items: center; gap: .65rem; padding: .65rem; cursor: pointer; text-align: left; background: radial-gradient(circle at top right,rgba(250,158,55,.13),transparent 55%),#fff; border: 1px solid rgba(250,158,55,.27); border-radius: 14px; box-shadow: 0 3px 9px rgba(250,158,55,.07); transition: 150ms ease; }
.owned-pokemon-card:hover[b-vcv0hs5z6g] { border-color: rgb(250,158,55); box-shadow: 0 8px 18px rgba(250,158,55,.16); transform: translateY(-2px); }
.owned-pokemon-card--shiny[b-vcv0hs5z6g] { background: radial-gradient(circle at top right,rgba(255,214,51,.4),transparent 55%),linear-gradient(145deg,#fff,#fff7ce); border-color: #d8a917; box-shadow: 0 4px 14px rgba(218,165,32,.17); }
.owned-pokemon-card img[b-vcv0hs5z6g] { display: block; flex: 0 0 68px; width: 68px; height: 68px; image-rendering: pixelated; object-fit: contain; }
.owned-pokemon-card > div[b-vcv0hs5z6g] { display: flex; min-width: 0; flex-direction: column; }
.owned-pokemon-card strong[b-vcv0hs5z6g] { overflow: hidden; color: #29231f; font-size: .82rem; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap; }
.owned-pokemon-card span[b-vcv0hs5z6g] { margin-top: .18rem; color: rgb(183,96,3); font-size: .7rem; font-weight: 750; }
.owned-pokemon-card small[b-vcv0hs5z6g] { margin-top: .1rem; color: #89796d; font-size: .64rem; text-transform: capitalize; }
.pokemon-dialog-backdrop[b-vcv0hs5z6g] { position: fixed; z-index: 10000; inset: 0; display: grid; overflow-y: auto; place-items: center; padding: 1rem; background: rgba(12,8,5,.72); backdrop-filter: blur(5px); }
.pokemon-dialog[b-vcv0hs5z6g] { position: relative; width: min(720px,100%); max-height: calc(100vh - 2rem); overflow-y: auto; padding: 1rem; background: #fff; border: 1px solid rgba(250,158,55,.4); border-radius: 20px; box-shadow: 0 22px 60px rgba(0,0,0,.38); }
.pokemon-dialog__close[b-vcv0hs5z6g] { position: absolute; z-index: 2; top: .7rem; right: .7rem; display: grid; width: 36px; height: 36px; place-items: center; cursor: pointer; color: #6e5c4d; font-size: 1.3rem; background: rgba(255,255,255,.88); border: 1px solid rgba(250,158,55,.28); border-radius: 50%; }
.pokemon-dialog__hero[b-vcv0hs5z6g] { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: radial-gradient(circle at top right,rgba(250,158,55,.18),transparent 55%),#fffaf5; border-radius: 15px; }
.pokemon-dialog__hero--shiny[b-vcv0hs5z6g] { background: radial-gradient(circle at top right,rgba(255,213,50,.42),transparent 55%),linear-gradient(145deg,#fff,#fff4bd); }
.pokemon-dialog__hero img[b-vcv0hs5z6g] { width: 120px; height: 120px; image-rendering: pixelated; object-fit: contain; }
.pokemon-dialog__hero span[b-vcv0hs5z6g] { color: rgb(183,96,3); font-size: .65rem; font-weight: 800; text-transform: uppercase; }
.pokemon-dialog__hero h2[b-vcv0hs5z6g] { margin: .15rem 0; color: #29231f; font-size: 1.55rem; text-transform: capitalize; }
.pokemon-dialog__hero p[b-vcv0hs5z6g] { margin: 0; color: #78695e; font-size: .78rem; text-transform: capitalize; }
.pokemon-detail-grid[b-vcv0hs5z6g] { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .55rem; margin-top: .8rem; }
.pokemon-detail[b-vcv0hs5z6g] { display: flex; min-width: 0; flex-direction: column; gap: .12rem; padding: .6rem; background: #fffaf6; border: 1px solid rgba(250,158,55,.16); border-radius: 10px; }
.pokemon-detail span[b-vcv0hs5z6g] { color: #8d7d71; font-size: .6rem; font-weight: 750; text-transform: uppercase; }
.pokemon-detail strong[b-vcv0hs5z6g] { color: #302923; font-size: .75rem; overflow-wrap: anywhere; text-transform: capitalize; }
.pokemon-dialog__section h3[b-vcv0hs5z6g],.pokemon-stat-columns h3[b-vcv0hs5z6g] { margin: 1rem 0 .5rem; color: #302923; font-size: .85rem; }
.pokemon-moves[b-vcv0hs5z6g] { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; }
.pokemon-moves > span[b-vcv0hs5z6g] { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .65rem; color: #3b3129; font-size: .72rem; text-transform: capitalize; background: rgba(91,92,226,.08); border: 1px solid rgba(91,92,226,.2); border-radius: 9px; }
.pokemon-moves small[b-vcv0hs5z6g] { color: #6e6fc5; white-space: nowrap; }
.pokemon-stat-columns[b-vcv0hs5z6g] { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; }
.pokemon-stat[b-vcv0hs5z6g] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .4rem .1rem; font-size: .7rem; text-transform: capitalize; border-bottom: 1px solid #eee8e3; }
.pokemon-stat span[b-vcv0hs5z6g] { color: #776a60; }.pokemon-stat strong[b-vcv0hs5z6g] { color: #2e2722; }
@media (max-width:650px) { .owned-pokemon-grid[b-vcv0hs5z6g] { grid-template-columns: repeat(2,minmax(0,1fr)); }.owned-pokemon-card[b-vcv0hs5z6g] { align-items: center; flex-direction: column; text-align: center; }.owned-pokemon-card strong[b-vcv0hs5z6g] { white-space: normal; }.pokemon-dialog__hero[b-vcv0hs5z6g] { align-items: center; flex-direction: column; text-align: center; }.pokemon-detail-grid[b-vcv0hs5z6g] { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:420px) { .owned-pokemon-grid[b-vcv0hs5z6g] { grid-template-columns: 1fr; }.owned-pokemon-card[b-vcv0hs5z6g] { flex-direction: row; text-align: left; }.pokemon-detail-grid[b-vcv0hs5z6g],.pokemon-stat-columns[b-vcv0hs5z6g],.pokemon-moves[b-vcv0hs5z6g] { grid-template-columns: 1fr; } }
/* /Components/Shared/PlayerDetailsTabs.razor.rz.scp.css */
.player-tabs[b-f4irjxwbhv] { width: 100%; margin-top: 1.25rem; }
.player-tabs__buttons[b-f4irjxwbhv] { display: inline-flex; gap: 4px; margin-bottom: 1rem; padding: 4px; background: #ffffff; border: 1px solid rgba(250,158,55,.28); border-radius: 14px; box-shadow: 0 4px 12px rgba(250,158,55,.08); }
.player-tab-button[b-f4irjxwbhv] { display: inline-flex; min-height: 42px; align-items: center; gap: .45rem; padding: .55rem 1rem; cursor: pointer; color: #75675c; font-size: .8rem; font-weight: 750; background: transparent; border: 0; border-radius: 10px; }
.player-tab-button:hover[b-f4irjxwbhv] { color: rgb(183,96,3); background: rgba(250,158,55,.1); }
.player-tab-button.active[b-f4irjxwbhv] { color: #ffffff; background: linear-gradient(135deg,rgb(250,137,20),rgb(250,158,55)); box-shadow: 0 4px 11px rgba(250,137,20,.24); }
.player-tab-button span[b-f4irjxwbhv] { display: grid; min-width: 22px; height: 22px; place-items: center; padding: 0 .3rem; color: inherit; font-size: .65rem; background: rgba(255,255,255,.18); border-radius: 999px; }
.player-tab-button:not(.active) span[b-f4irjxwbhv] { color: rgb(183,96,3); background: rgba(250,158,55,.13); }
.player-tabs__content[b-f4irjxwbhv] { min-width: 0; }
@media (max-width: 500px) { .player-tabs__buttons[b-f4irjxwbhv] { display: flex; width: 100%; } .player-tab-button[b-f4irjxwbhv] { flex: 1; justify-content: center; } }
/* /Components/Shared/PokemonMarkIcons.razor.rz.scp.css */
.pokemon-marks[b-7oqfqmagj8] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.pokemon-mark[b-7oqfqmagj8] { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; border-radius: 4px; }
.pokemon-mark img[b-7oqfqmagj8] { display: block; width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }
.pokemon-mark--collected[b-7oqfqmagj8] { background: rgba(250, 158, 55, .15); }
.pokemon-mark--missing img[b-7oqfqmagj8] { filter: grayscale(1); opacity: .22; }
.pokemon-mark--missing:hover img[b-7oqfqmagj8] { opacity: .65; }
.pokemon-marks:empty[b-7oqfqmagj8] { display: none; }
.pokemon-mark__fallback[b-7oqfqmagj8] { padding: 2px 5px; font-size: .7rem; }