/* Page fade-in animation to prevent FOUC (Flash of Unstyled Content) */

/* === Kaartschaduw: geldt voor alle kaarten in alle posities === */
.cardwithp12__True img,
.cardwithp12__False img,
.cardwidth39__True img,
.cardwidth39__False img,
.cardwidthtg img,
.cardwidthinGrid__False img,
.cardwidth__True img,
.invertedcardwidth img
{
    filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.55));
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.page-fade-in {
    animation: fadeIn 0.3s ease-in;
}

/* Prevent FOUC by initially hiding content until CSS is loaded */
.page-content {
    opacity: 0;
    animation: fadeIn 0.2s ease-in forwards;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.img__big
{
    width: 230px;
}

.img__normal
{
    width: 180px;
}

.img__small
{
    width: 70px;
}

.img__smaller
{
    width: 30px;
}

.img__verysmall
{
    width: 30px;
}

.img__minismall
{
    width: 30px;
}

.img__ultrasmall
{
    width: 9px;
}

.tooltip3
{
    position: relative;
    display: inline-block;
}

    .tooltip3 .tooltiptext3
    {
        visibility: hidden;
        width: 120px;
        color: black;
        background-color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        /* Position the tooltip */
        position: absolute;
        z-index: 50;
        top: 5px;
        left: 20%;
    }

    .tooltip3:hover .tooltiptext3
    {
        cursor: pointer;
        visibility: visible;
    }



/* *** media breakpoints *** */
@media (max-width: 319.79px)
{
}

@media (min-width: 320px)
{
    /* ** Image-sizes ** */

    .img__big
    {
        width: calc(230px + 370 * ((100vw - 320px) / 1080));
    }

    .img__normal
    {
        width: calc(180px + 90 * ((100vw - 320px) / 1080));
    }

    .img__small
    {
        width: calc(70px + 30 * ((100vw - 320px) / 1080));
    }

    .img__smaller
    {
        width: calc(30px + 35 * ((100vw - 320px) / 1080));
    }

    .img__verysmall
    {
        width: calc(30px + 15 * ((100vw - 320px) / 1080));
    }

    .img__minismall
    {
        width: calc(20px + 10 * ((100vw - 320px) / 1080));
    }

    .img__ultrasmall
    {
        width: calc(9px + 4 * ((100vw - 320px) / 1080));
    }

    .spinner
    {
        top: calc(-192px + -90 * ((100vw - 320px) / 1080));
        width: calc(186px + 90 * ((100vw - 320px) / 1080));
        height: calc(186px + 90 * ((100vw - 320px) / 1080));
    }
}

@media (min-width: 601px)
{
}

@media (min-width: 801px)
{
}

@media (min-width: 1024px)
{
    .tooltip3 .tooltiptext3
    {
        width: 200px;
    }
}

@media (min-width: 1401px)
{
    /* ** Image-sizes ** */

    .img__big
    {
        width: 600px;
    }

    .img__normal
    {
        width: 270px;
    }

    .img__small
    {
        width: 100px;
    }

    .img__smaller
    {
        width: 65px;
    }

    .img__verysmall
    {
        width: 45px;
    }

    .img__minismall
    {
        width: 30px;
    }

    .img__ultrasmall
    {
        width: 13px;
    }
}
/* ===== Landing page (Home.razor – Static SSR / SEO) ===== */
.pcb-landing {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
    font-family: inherit;
    color: #222;
}

.pcb-landing-hero {
    text-align: center;
    margin-bottom: 2.5rem;
}

.pcb-landing-hero img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 1.25rem;
}

.pcb-landing-hero h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #006E00;
}

.pcb-landing-hero p {
    font-size: 1.1rem;
    margin-bottom: 1.25rem;
}

.pcb-landing-features,
.pcb-landing-start {
    margin-bottom: 2.5rem;
}

.pcb-landing-features h2,
.pcb-landing-start h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #006E00;
    margin-bottom: 0.75rem;
}

.pcb-landing-features ul {
    list-style: disc;
    padding-left: 1.5rem;
    line-height: 1.9;
}

.pcb-landing-cta {
    display: inline-block;
    background: #006E00;
    color: #fff;
    padding: 0.6rem 1.4rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
}

.pcb-landing-cta:hover {
    background: #005500;
    color: #fff;
}

.pcb-landing-cta--secondary {
    background: #555;
}

.pcb-landing-cta--secondary:hover {
    background: #333;
}

/* ===================================================
   Card Auto-Scaling (csz)
   =================================================== */

.csz-bc { transform-origin: bottom center; }
.csz-tc { transform-origin: top center; }
.csz-tl { transform-origin: top left; }
.csz-tr { transform-origin: top right; }
.csz-cc { transform-origin: center; }

/* Desktop schaling */
@media (min-width: 768px) and (max-width: 1279px) {
    .csz-bc, .csz-tc, .csz-tl, .csz-tr, .csz-cc { transform: scale(0.90); }
}
@media (min-width: 768px) and (max-width: 1279px) {
    :fullscreen .csz-bc, :fullscreen .csz-tc, :fullscreen .csz-tl,
    :fullscreen .csz-tr, :fullscreen .csz-cc { transform: scale(1.05); }
}
@media (min-width: 1280px) {
    :fullscreen .csz-bc, :fullscreen .csz-tc, :fullscreen .csz-tl,
    :fullscreen .csz-tr, :fullscreen .csz-cc { transform: scale(1.10); }
}

/* ===================================================
   MOBILE PORTRAIT (<=767px)
   Alle kaarten even groot via --card-w-mobile.
   card_w = (100svw - 6px) / 9.4
   Geen transform:scale op csz-wrappers.
   =================================================== */
@media (max-width: 767px) {
    :root {
        --card-w-mobile: calc((100svw - 6px) / 9.4);
        /* Kaartbreedte van pos6/pos12 (zie docs/pos6-card-sizing-reference.md:
           --pos6-cardw met 13 kaarten). Posities 3 en 9 gebruiken dezelfde
           waarde zodat alle zitplaatsen even grote kaarten tonen. */
        --card-w-seat: clamp(13mm, calc(100svw / 13), 16mm);
    }

    .csz-bc, .csz-tc, .csz-tl, .csz-tr, .csz-cc { transform: none !important; }

    /* HandOfCards - positie 6 */
    .howbig {
        width: var(--card-w-mobile) !important;
        max-width: none !important;
        height: calc(var(--card-w-mobile) * 1.4 + 3vw) !important;
        max-height: none !important;
    }
    .handlayout {
        width: 100svw !important;
        grid-template-columns: repeat(13, calc(var(--card-w-mobile) * 0.7)) !important;
        grid-template-rows: 0 0 0 0 0 0 0 calc(var(--card-w-mobile) * 1.4 + 3vw) !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .handlayout .card1  { grid-column: 1  !important; grid-row: 8 !important; }
    .handlayout .card2  { grid-column: 2  !important; grid-row: 8 !important; }
    .handlayout .card3  { grid-column: 3  !important; grid-row: 8 !important; }
    .handlayout .card4  { grid-column: 4  !important; grid-row: 8 !important; }
    .handlayout .card5  { grid-column: 5  !important; grid-row: 8 !important; }
    .handlayout .card6  { grid-column: 6  !important; grid-row: 8 !important; }
    .handlayout .card7  { grid-column: 7  !important; grid-row: 8 !important; }
    .handlayout .card8  { grid-column: 8  !important; grid-row: 8 !important; }
    .handlayout .card9  { grid-column: 9  !important; grid-row: 8 !important; }
    .handlayout .card10 { grid-column: 10 !important; grid-row: 8 !important; }
    .handlayout .card11 { grid-column: 11 !important; grid-row: 8 !important; }
    .handlayout .card12 { grid-column: 12 !important; grid-row: 8 !important; }
    .handlayout .card13 { grid-column: 13 !important; grid-row: 8 !important; }
    .handlayout .cardrotate14, .handlayout .cardrotate13, .handlayout .cardrotate12,
    .handlayout .cardrotate11, .handlayout .cardrotate10, .handlayout .cardrotate9,
    .handlayout .cardrotate7,  .handlayout .cardrotate6,  .handlayout .cardrotate5,
    .handlayout .cardrotate4,  .handlayout .cardrotate3,  .handlayout .cardrotate2 {
        transform: rotate(0deg) !important;
    }

    /* DummyPosition12 - positie 12 (excludes pos6, which has its own
       mobile layout defined in DummyPosition12.razor via the
       .dummyhandlayout-pos6 class). */
    .dummyhandlayout:not(.dummyhandlayout-pos6) .cardwithp12__False img,
    .dummyhandlayout:not(.dummyhandlayout-pos6) .cardwithp12__True img,
    .dummyhandlayout-mini:not(.dummyhandlayout-pos6) .cardwithp12__False img,
    .dummyhandlayout-mini:not(.dummyhandlayout-pos6) .cardwithp12__True img,
    .dummyhandlayout-mode2:not(.dummyhandlayout-pos6) .cardwithp12__False img,
    .dummyhandlayout-mode3:not(.dummyhandlayout-pos6) .cardwithp12__False img,
    .dummyhandlayout-mode2:not(.dummyhandlayout-pos6) .cardwithp12__True img,
    .dummyhandlayout-mode3:not(.dummyhandlayout-pos6) .cardwithp12__True img {
        max-width: var(--card-w-mobile) !important;
        width: var(--card-w-mobile) !important;
    }
    .dummyhandlayout:not(.dummyhandlayout-pos6),
    .dummyhandlayout-mini:not(.dummyhandlayout-pos6) {
        display: grid !important;
        grid-template-columns: repeat(13, 1fr) !important;
        width: calc(100svw - 6px) !important;
        max-width: calc(100svw - 6px) !important;
    }
    .dummyhandlayout:not(.dummyhandlayout-pos6) > div,
    .dummyhandlayout-mini:not(.dummyhandlayout-pos6) > div { grid-row: 1 !important; }

    /* DummyPosition3and9 - posities 3 en 9.
       Dezelfde kaartbreedte als pos6/pos12, die in DummyPosition12.razor
       met clamp(13mm, 100svw / 13, 16mm) gedefinieerd is. De oude
       --card-w-mobile gaf hier een grotere kaart dan pos6/pos12. */
    .cardwidth39__True, .cardwidth39__False {
        width: var(--card-w-seat) !important;
        max-width: none !important;
    }

    /* InvertedCards */
    .invertedcardwidth { width: var(--card-w-mobile) !important; }

    /* TrickGrid */
    .cardwidthtg, .cardwidth__True, .cardwidthinGrid__False {
        width: var(--card-w-mobile) !important;
    }
    .trickcontainer, .trickcontainer-mini {
        max-width: none !important;
        width: calc(var(--card-w-mobile) * 2 + 8px) !important;
    }
    /* TrickGrid: alleen omhoog als pos12 inverted cards heeft */
    .gameboard:has(.twelveposition_ .invertedcards_True) .trickgrid_,
    .gameboard:has(.twelveposition_ .invertedcards_False) .trickgrid_ {
        grid-column: 7 / 15 !important;
        grid-row: 5 / 12 !important;
    }
    /* TrickGrid gecentreerd als zowel pos3 als pos9 inverted hebben (scenario 3 & 4) */
    .gameboard:has(.threeposition_ .inverted3_True):has(.nineposition_ .inverted9_True) .trickgrid_ {
        grid-column: 7 / 15 !important;
        grid-row: 11 / 18 !important;
    }
    /* TrickGrid rechts+lager als pos3 inverted weg (DummyHand in pos9) */
    .gameboard:has(.threeposition_ .inverted3_True):not(:has(.nineposition_ .inverted9_True)) .trickgrid_ {
        grid-column: 13 / 19 !important;
        grid-row: 8 / 15 !important;
    }
    /* TrickGrid links+lager als pos9 inverted weg (DummyHand in pos3) */
    .gameboard:has(.nineposition_ .inverted9_True):not(:has(.threeposition_ .inverted3_True)) .trickgrid_ {
        grid-column: 5 / 11 !important;
        grid-row: 8 / 15 !important;
    }
    /* TrickGrid standaard positie op mobiel (DummyHand in pos12) */
    .trickgrid_ {
        grid-column: 7 / 15 !important;
        grid-row: 11 / 18 !important;
    }

    /* Gameboard hoogte inkrimpen per scenario zodat lege rijen na contractlijn verdwijnen.
       Alleen height aanpassen (NIET --gameboard-height) zodat alle rijhoogtes gelijk blijven.
       Basis: 68dvh, 31 rijen → rijhoogte = 68dvh/31.
       ShowContract onderkant = N * rijhoogte → gameboard height = N/31 * 68dvh.
       Scenario pos12: ShowContract rij 30/31 → height = 30/31 * 68dvh.
       Scenario 1&2: ShowContract rij 29/30 → height = 29/31 * 68dvh.
       Scenario 3&4: ShowContract rij 25/26 → height = 25/31 * 68dvh. */
    .gameboard:has(.twelveposition_ .invertedcards_True),
    .gameboard:has(.twelveposition_ .invertedcards_False) {
        height: calc(30 / 31 * 68dvh) !important;
    }
    .gameboard:has(.threeposition_ .inverted3_True):not(:has(.nineposition_ .inverted9_True)),
    .gameboard:has(.nineposition_ .inverted9_True):not(:has(.threeposition_ .inverted3_True)) {
        height: calc(29 / 31 * 68dvh) !important;
    }
    .gameboard:has(.threeposition_ .inverted3_True):has(.nineposition_ .inverted9_True) {
        height: calc(25 / 31 * 68dvh) !important;
    }
}

/* Gameboard hoogte voor erg kleine schermen (<375px) per scenario - alleen height */
@media (max-width: 374px) {
    .gameboard:has(.twelveposition_ .invertedcards_True),
    .gameboard:has(.twelveposition_ .invertedcards_False) {
        height: calc(30 / 31 * 62dvh) !important;
    }
    .gameboard:has(.threeposition_ .inverted3_True):not(:has(.nineposition_ .inverted9_True)),
    .gameboard:has(.nineposition_ .inverted9_True):not(:has(.threeposition_ .inverted3_True)) {
        height: calc(29 / 31 * 62dvh) !important;
    }
    .gameboard:has(.threeposition_ .inverted3_True):has(.nineposition_ .inverted9_True) {
        height: calc(25 / 31 * 62dvh) !important;
    }
}

/* ===================================================
   Mobile portrait uniform card width
   13 kaarten met 30% overlap vullen de volledige gameboard-breedte:
   card_w × (1 + 12 × 0.7) = gameboard_width - 6px
   card_w = (gameboard_width - 6px) / 9.4
   Gameboard heeft container-type:inline-size ? 1cqw = 1% gameboard-breedte
   card_w = (100cqw - 6px) / 9.4
   =================================================== */

/* ===================================================
   Globale navigatiespinner (bridge-thema)
   Vier kaartkleuren draaien rond een centrale kern.
   De markup staat in App.razor, buiten <Routes />, zodat de
   overlay blijft staan terwijl de ene WASM-pagina wordt
   afgebroken en de volgende nog aan het opstarten is.
   Aansturing gebeurt via window.pcbSpinner in site.js.
   =================================================== */
#pcb-nav-spinner {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1.5rem;
    background: radial-gradient(circle at center, #0a6b6b 0%, #024040 70%, #012626 100%);
    color: #ECFCEC;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    opacity: 0;
    transition: opacity 0.2s ease-in;
}

#pcb-nav-spinner.pcb-nav-spinner--visible {
    display: flex;
    opacity: 1;
}

.pcb-nav-spinner__table {
    position: relative;
    width: 9.5rem;
    height: 9.5rem;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #0e8a8a 0%, #006262 60%, #004a4a 100%);
    box-shadow: 0 0 0 4px rgba(0, 176, 0, 0.35), 0 0 35px rgba(0, 0, 0, 0.55);
    animation: pcb-nav-spinner-rotate 2.4s linear infinite;
}

.pcb-nav-spinner__suit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.4rem;
    height: 2.4rem;
    margin: -1.2rem 0 0 -1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    line-height: 1;
    border-radius: 0.35rem;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    animation: pcb-nav-spinner-pulse 1.6s ease-in-out infinite;
}

/* De vier kaartkleuren worden op de wijzerplaat geplaatst en
   tegendraais teruggedraaid zodat de symbolen rechtop blijven. */
.pcb-nav-spinner__suit--spades {
    color: #1a1a1a;
    transform: rotate(0deg) translateY(-3.4rem) rotate(0deg);
    animation-delay: 0s;
}

.pcb-nav-spinner__suit--hearts {
    color: #DC0000;
    transform: rotate(90deg) translateY(-3.4rem) rotate(-90deg);
    animation-delay: 0.2s;
}

.pcb-nav-spinner__suit--diamonds {
    color: #DC0000;
    transform: rotate(180deg) translateY(-3.4rem) rotate(-180deg);
    animation-delay: 0.4s;
}

.pcb-nav-spinner__suit--clubs {
    color: #1a1a1a;
    transform: rotate(270deg) translateY(-3.4rem) rotate(-270deg);
    animation-delay: 0.6s;
}

.pcb-nav-spinner__text {
    font-size: clamp(0.95rem, 3vw, 1.25rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.9;
    /* Tegendraaien is hier niet nodig: de tekst staat buiten de draaiende tafel. */
}

@keyframes pcb-nav-spinner-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes pcb-nav-spinner-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.45;
    }
}

/* Inline variant (component Spinner.razor): dezelfde draaiende tafel met
   kaartkleuren, maar in de paginastroom in plaats van als overlay. */
.pcb-inline-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

/* "Wij begeleiden u naar uw plaats": zelfde look en feel als de lobby-lock,
   zodat het wachten tussen lobby en tafel één doorlopende ervaring is. */
.pcb-guiding-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: rgba(1, 38, 38, 0.92);
}

.pcb-guiding-text {
    color: #ECFCEC;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    text-align: center;
    padding: 0 1rem;
    font-size: clamp(0.95rem, 3vw, 1.25rem);
}

/* Tweede regel onder de titel: vertelt dat het wachten normaal is en dat de speler
   niets hoeft te doen. Bewust rustiger dan de titel (geen kapitalen, kleiner, lichter)
   zodat het leest als geruststelling en niet als tweede kop. */
.pcb-guiding-hint {
    color: #ECFCEC;
    opacity: 0.75;
    text-align: center;
    padding: 0 1.5rem;
    margin: 0;
    max-width: 32rem;
    line-height: 1.45;
    font-size: clamp(0.8rem, 2.2vw, 0.95rem);
}

/* Respecteer de systeemvoorkeur voor minder beweging, maar zet de spinner niet
   volledig stil: een laadindicator die niet beweegt lijkt vastgelopen. De tafel
   draait daarom traag door en de knipperende puls van de kaartkleuren gaat uit. */
@media (prefers-reduced-motion: reduce) {
    .pcb-nav-spinner__table {
        animation-duration: 8s;
    }

    .pcb-nav-spinner__suit {
        animation: none;
    }
}