/* Ailex — spelkaarten (22-10-2026, klus "Ailex game-kaartjes 2", Gustavo). Alex 18:03: "al die kaartjes moeten een game effect hebben,
   visueel moet het lijken op een game, alles. Visueel alleen." Alleen uiterlijk: geen tekst, geen logica. gamekaart.js zet
   data-gk="<familie>" op elk kaartje (.vb) en kort .gk-nieuw / .gk-sprank / .gk-in; deze laag laadt als laatste.
   - kader + lint in een eigen accentkleur per soort, icoon als rond spel-badge, knoppen met een glimrandje
   - .gk-nieuw: één keer een sprongetje met veer (380 ms) en een glans die er één keer overheen loopt (480 ms)
   - .gk-sprank: sprankel bij afvinken in de catalogus en de takenlijst (450 ms); .gk-in: tegels springen één keer binnen (380 ms, 40 ms na elkaar)
   Leesbaarheid: lettergrootte blijft gelijk; tekst op het lint is #262A4D of #fff, elke combinatie haalt minstens 4,5:1 (proef rekent na).
   Alleen transform/opacity bewegen. Uit bij prefers-reduced-motion. */
:root { --gk-veer: cubic-bezier(.34, 1.56, .64, 1); --gk-inkt: #262A4D; }

/* ---------- accent per familie: a = lint, d = kader en schaduw, t = tekst op het lint ---------- */
.vb[data-gk] { --gk-a: #9AA6FF; --gk-d: #5B6CFF; --gk-t: var(--gk-inkt); }
.vb[data-gk="weer"] { --gk-a: #FFB43D; --gk-d: #C26A12; --gk-t: var(--gk-inkt); }
.vb[data-gk="agenda"] { --gk-a: #4453E0; --gk-d: #2B37A8; --gk-t: #FFFFFF; }
.vb[data-gk="lijst"] { --gk-a: #36D1A8; --gk-d: #168565; --gk-t: var(--gk-inkt); }
.vb[data-gk="route"] { --gk-a: #7A50D6; --gk-d: #5E36B0; --gk-t: #FFFFFF; }
.vb[data-gk="recept"] { --gk-a: #FF6B8A; --gk-d: #B8314F; --gk-t: var(--gk-inkt); }
.vb[data-gk="geld"] { --gk-a: #FFC83D; --gk-d: #C48700; --gk-t: var(--gk-inkt); }
.vb[data-gk="taak"] { --gk-a: #4BE07A; --gk-d: #1E8A45; --gk-t: var(--gk-inkt); }
.vb[data-gk="keuze"] { --gk-a: #3FA7FF; --gk-d: #1F6FC0; --gk-t: var(--gk-inkt); }
.vb[data-gk="media"] { --gk-a: #FF6F6F; --gk-d: #B83232; --gk-t: var(--gk-inkt); }
.vb[data-gk="melding"] { --gk-a: #B48CFF; --gk-d: #7A50D6; --gk-t: var(--gk-inkt); }

/* ---------- de spelkaart zelf ---------- */
.vb[data-gk] { position: relative; border-color: var(--gk-d); box-shadow: 0 4px 0 var(--gk-d), 0 8px 18px -10px var(--gk-d); }
/* icoon als spel-badge: rond wit muntje met de accentkleur */
/* G1 A17: het zwarte lint (oude geel-zwart-witte stijl) is nu gewoon een familielint, met een randje in de donkere soortkleur */
.vb[data-gk] { color: var(--gk-inkt); }   /* één inkt (Camila): #262A4D in plaats van #111 */
/* knoppen op de kaart: glimrandje bovenaan; de hoofdknop in de accentkleur */
.vb[data-gk] .vb-knop { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), 0 3px 0 var(--gk-d); border-color: var(--gk-d); }
.vb[data-gk] .vb-knop.geel { background: var(--gk-a); color: var(--gk-t); }
.vb[data-gk] .vb-knop.gekozen { background: var(--gk-inkt); color: #FFFFFF; box-shadow: none; }
.vb[data-gk] .vb-knop:active { box-shadow: none; }
/* boodschappencatalogus: tegeltjes in de kaartkleur, met glimrandje */
.vb[data-gk] .ak-tegel { border-color: var(--gk-d); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), 0 3px 0 var(--gk-d); }
.vb[data-gk] .ak-tegel.af { box-shadow: 0 1px 0 var(--gk-d); }
.vb[data-gk] .ak-plaatje.letter { background: var(--gk-a); color: var(--gk-t); border-color: var(--gk-d); }

/* ---------- binnenkomst: sprongetje + glans, één keer ---------- */
.vb.gk-nieuw { animation: gk-pop 380ms var(--gk-veer) var(--gk-wacht, 0ms) both; }
.vb.gk-nieuw::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .6) 48%, rgba(255, 255, 255, 0) 66%);
  transform: translateX(-120%); animation: gk-glans 480ms ease-out calc(var(--gk-wacht, 0ms) + 120ms) both; }
@keyframes gk-pop { 0% { opacity: 0; transform: translateY(10px) scale(.92); } 65% { opacity: 1; transform: translateY(-2px) scale(1.025); } 100% { opacity: 1; transform: none; } }
@keyframes gk-glans { from { transform: translateX(-120%); } to { transform: translateX(120%); } }

/* ---------- sprankel bij afvinken (catalogus, takenlijst in de tegels) en de tegels bij binnenkomst ---------- */
.ak-tegel.gk-sprank, .pl-todo.gk-sprank { position: relative; }
.gk-sprank::after { content: ""; position: absolute; left: 50%; top: 50%; z-index: 3; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  pointer-events: none; background: #FFC83D; color: #36D1A8; opacity: 0;
  box-shadow: 0 -22px 0 #FFC83D, 19px -11px 0 currentColor, 19px 11px 0 #FF6B8A, 0 22px 0 #FFC83D, -19px 11px 0 currentColor, -19px -11px 0 #FF6B8A;
  animation: gk-sprank 450ms ease-out both; }
.gk-sprank .ak-vink, .gk-sprank .pl-vink { animation: gk-plof 320ms var(--gk-veer) both; }
.pl-tegel.gk-in { animation: gk-pop 380ms var(--gk-veer) var(--gk-wacht, 0ms) both; }
@keyframes gk-sprank { 0% { opacity: 1; transform: scale(.3); } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes gk-plof { 0% { transform: scale(.4); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* ---------- minder beweging: kleuren en badges blijven, er beweegt niets ---------- */
@media (prefers-reduced-motion: reduce) {
  .vb.gk-nieuw, .gk-sprank .ak-vink, .gk-sprank .pl-vink, .pl-tegel.gk-in { animation: none !important; }
  .vb.gk-nieuw::after, .gk-sprank::after { animation: none !important; display: none !important; }
}
.m3g-rustig .vb.gk-nieuw, .m3g-rustig .gk-sprank .ak-vink, .m3g-rustig .pl-tegel.gk-in { animation: none !important; }
.m3g-rustig .vb.gk-nieuw::after, .m3g-rustig .gk-sprank::after { display: none !important; }