/* Foxy in beeld, Cards: laadt enkel op play/cards (naast galerij.css). */
/* ---------- Cards: Foxy's kaarttafel (okt 2026) ----------
   De zes spellen als speelkaarten, de reel in een grote speelkaart op een groen laken, en een
   proefspel Foxy Flash (twee ronde kaarten, één figuur staat op allebei). Zelfde regels als hierboven:
   beweging enkel met transform/opacity/rotate/scale, niets bij 'minder beweging', vaste hoogtes. */

/* de zes spellen: speelkaarten */
.kaarten {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr; /* alle speelkaarten even hoog */
    gap: 28px 24px;
    max-width: 980px;
    margin: 0 auto;
    padding: 6px 4px 10px;
}
.speelkaart {
    --kc: #ff6b35;
    position: relative;
    margin: 0;
    padding: 30px 24px 34px;
    border-radius: 18px;
    background: #fffaf0;
    color: #2b1d12;
    text-align: center;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.45), inset 0 0 0 7px #fffaf0, inset 0 0 0 8.5px color-mix(in srgb, var(--kc) 45%, transparent);
    rotate: var(--r, 0deg);
    transition: rotate 0.25s ease, translate 0.25s ease, box-shadow 0.25s ease;
}
.speelkaart:nth-child(1) { --r: -2deg; }
.speelkaart:nth-child(2) { --r: 1.5deg; }
.speelkaart:nth-child(3) { --r: -1deg; }
.speelkaart:nth-child(4) { --r: 1.8deg; }
.speelkaart:nth-child(5) { --r: -1.6deg; }
.speelkaart:nth-child(6) { --r: 1deg; }
@media (hover: hover) { .speelkaart:hover { rotate: 0deg; translate: 0 -6px; box-shadow: 0 26px 44px rgba(0, 0, 0, 0.5), inset 0 0 0 7px #fffaf0, inset 0 0 0 8.5px var(--kc); } }
.speelkaart__hoek {
    position: absolute;
    top: 14px;
    left: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--kc);
    font-weight: 900;
    font-size: 0.95rem;
    line-height: 1;
}
.speelkaart__hoek .ico { width: 15px; height: 15px; }
.speelkaart__hoek--onder { top: auto; left: auto; bottom: 14px; right: 16px; rotate: 180deg; }
.speelkaart__beeld {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--kc) 15%, #fff);
    color: var(--kc);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--kc) 35%, transparent);
}
.speelkaart__beeld .ico, .speelkaart__beeld img { width: 40px; height: 40px; }
.speelkaart__beeld .kg { width: 56px; height: 56px; } /* eigen tekening per spel (cards_iconen.py) */
.speelkaart__hoek .kg { width: 16px; height: 16px; }
.speelkaart h3 { margin: 0 0 8px; color: #2b1d12; font-size: 1.15rem; font-weight: 800; }
.speelkaart p { margin: 0; color: #4b3d30; font-size: 0.93rem; line-height: 1.55; }
.kaarten__veeg { display: none; }
@media (max-width: 900px) { .kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { /* gsm: veegrij, de volgende kaart piept rechts binnen */
    .kaarten {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 80%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        gap: 16px;
        margin: 0 -16px;
        padding: 12px 16px 22px;
    }
    .kaarten::-webkit-scrollbar { display: none; }
    .speelkaart { scroll-snap-align: center; }
    .kaarten__veeg { display: block; margin: 4px 0 0; text-align: center; color: var(--text-muted); font-size: 0.85rem; }
}

/* de reel op het groene laken */
.galerij--tafel {
    background-color: #0b3d27;
    background-image:
        linear-gradient(var(--bg), rgba(13, 13, 26, 0) 70px),
        radial-gradient(ellipse 60% 55% at 50% 48%, rgba(255, 255, 255, 0.07), transparent 70%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect width='1' height='1' fill='%23ffffff' fill-opacity='.035'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%23000000' fill-opacity='.08'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 90% 80% at 50% 45%, #136a41, #0b3d27 72%, #072a1b);
    padding-bottom: 96px;
}
.galerij--tafel::after { /* houten tafelrand */
    height: 30px;
    background: linear-gradient(#7a4a22, #4a2a10 60%, #2e1a0a);
    border-top: 3px solid #a06a35;
    box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.35);
}
.galerij--tafel .section-header p { color: #cfe7d8; }
.galerij--tafel .section-tag { background: rgba(255, 250, 240, 0.12); color: #fff3d6; border-color: rgba(255, 243, 214, 0.3); }
.galerij--tafel .galerij__muur { align-items: center; gap: clamp(28px, 6vw, 72px); }
.schilderij--kaart { padding-top: 0; width: 300px; }
.schilderij--kaart .schilderij__lijst {
    border: 0;
    border-image: none;
    padding: 16px;
    border-radius: 22px;
    background: #fffaf0;
    rotate: -3deg;
    box-shadow: 0 26px 44px rgba(0, 0, 0, 0.55), 0 6px 12px rgba(0, 0, 0, 0.35), inset 0 0 0 8px #fffaf0, inset 0 0 0 9.5px rgba(255, 107, 53, 0.5);
    transition: rotate 0.35s ease, translate 0.35s ease;
}
.schilderij--kaart:hover .schilderij__lijst, .schilderij--kaart.is-film .schilderij__lijst { rotate: 0deg; translate: 0 -4px; }
.schilderij--kaart .schilderij__doek { border-radius: 12px; }
.schilderij--kaart .schilderij__doek::before { display: none; } /* geen doekstructuur: dit is een kaart */
.kaart__hoek {
    position: absolute;
    z-index: 6;
    top: 6px;
    left: 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #e2531f;
    font-weight: 900;
    font-size: 0.9rem;
    line-height: 1;
    pointer-events: none;
}
.kaart__hoek img { width: 14px; height: 14px; margin-top: 2px; }
.kaart__hoek--onder { top: auto; left: auto; bottom: 6px; right: 9px; rotate: 180deg; }
.kaart__vak { position: relative; width: 100%; }
.kaart__stapel { /* een stapeltje kaarten (ruggen) onder de grote kaart */
    position: absolute;
    z-index: 0;
    inset: 3% 3% 1%;
    pointer-events: none;
}
.kaart__stapel span {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    border: 6px solid #fffaf0;
    background:
        radial-gradient(circle at 50% 50%, #ff8a5c 0 9%, transparent 9.5%),
        repeating-linear-gradient(45deg, #c2410c 0 10px, #9a3412 10px 20px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
}
.kaart__stapel span:nth-child(1) { rotate: 9deg; translate: 18px 10px; }
.kaart__stapel span:nth-child(2) { rotate: -12deg; translate: -16px 14px; }
.galerij--tafel .bordje { rotate: 1.5deg; border-radius: 10px; }
@media (max-width: 760px) { /* gsm: één grote kaart in het midden, het bordje eronder (geen zigzag zoals in de galerij) */
    .schilderij--kaart { flex-direction: column; align-items: center; gap: 0; padding-top: 6px; }
    .schilderij--kaart .kaart__vak { width: min(64vw, 280px); }
    .schilderij--kaart .schilderij__lijst { flex: none; width: 100%; padding: 12px; border-radius: 18px; }
    .galerij--tafel .bordje { flex: none; width: min(100%, 300px); margin-top: 24px; }
}

/* proefspel Foxy Flash */
.flashproef { padding: 90px 0; background: var(--surface); }
.flash {
    max-width: 880px;
    margin: 0 auto;
    padding: 22px clamp(14px, 3vw, 28px) 24px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--bg-card);
}
.flash__stapel { display: grid; }
.flash__stapel > * { grid-area: 1 / 1; min-width: 0; }
.flash[data-staat="start"] .flash__spel, .flash[data-staat="start"] .flash__einde,
.flash[data-staat="spel"] .flash__start, .flash[data-staat="spel"] .flash__einde,
.flash[data-staat="einde"] .flash__start, .flash[data-staat="einde"] .flash__spel { visibility: hidden; pointer-events: none; }
.flash__einde { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 10px; }
.flash__einde p { margin: 0; color: var(--text-secondary); max-width: 520px; }
.flash__einde-score { font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 900; color: var(--primary); line-height: 1; }
.flash__spel { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 4vw, 44px); align-items: center; padding: 4px; }
.flash__kaart {
    position: relative;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 38%, #fffdf6, #f3e8d2);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.4), inset 0 0 0 6px #fffdf6, inset 0 0 0 8px rgba(255, 107, 53, 0.4);
}
.flash__fig {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--s);
    height: var(--s);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    translate: -50% -50%;
    rotate: var(--rot);
    transition: scale 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.flash__fig img { display: block; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25)); }
@media (hover: hover) { .flash__fig:hover { scale: 1.1; } }
.flash__fig:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.flash__fig.is-goed { scale: 1.18; box-shadow: 0 0 0 4px #22c55e, 0 0 22px rgba(34, 197, 94, 0.6); }
.flash__host { display: flex; align-items: flex-end; gap: 10px; margin-top: 16px; }
.flash__host img { width: 74px; height: 74px; flex: 0 0 auto; }
.flash__host .fx-bubble { flex: 1 1 auto; margin-bottom: 8px; }
.flash__start { position: relative; padding: 4px; }
.flash__rug { /* startscherm: de twee kaarten met de rug naar boven, even groot als in het spel */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(12px, 4vw, 44px);
    width: 100%;
}
.flash__rug span {
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #ff8a5c 0 9%, transparent 9.5%), repeating-linear-gradient(45deg, #c2410c 0 12px, #9a3412 12px 24px);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.4), inset 0 0 0 8px #fffaf0, inset 0 0 0 10px rgba(0, 0, 0, 0.12);
}
.flash__rug span:nth-child(2) { rotate: 14deg; }
.flash__starttekst {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 8%;
}
.flash__starttekst p {
    margin: 0;
    max-width: 420px;
    padding: 12px 18px;
    border-radius: 14px;
    background: rgba(13, 13, 26, 0.88);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}
@media (prefers-reduced-motion: no-preference) {
    .flash__kaart.is-fout { animation: flash-schud 0.45s ease; }
    .flash__kaart.is-nieuw { animation: flash-in 0.35s cubic-bezier(.2, .75, .2, 1.2); }
    .flash__host img.is-pop, .flash__host .fx-bubble.is-pop { animation: fx-pop 0.35s cubic-bezier(.2, .75, .2, 1.2); }
}
@keyframes flash-in { from { opacity: 0; scale: 0.85; rotate: -8deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@media (max-width: 480px) { .flash__host img { width: 60px; height: 60px; } }
html:not(.js) .flash__spel, html:not(.js) .flash__einde, html:not(.js) .flash__kop, html:not(.js) .flash__balk { display: none; }