/* De spelkaartjes (Wrapped, Kikker Maker, Spreekbeurt, Quiz, Slootrace, Kwaakwerk), zie components/Spellenkaarten.tsx.
   Staan op de vijver (/), op /spellen en in de rondleiding (static/rondleiding.js), dus los van home.css. */
.games,.rl-kaart{--purple:#2D1459;--yellow:#FFD23F}
/* alle kaartjes even groot: één breedte (1 of 2 kolommen) en één hoogte (de hoogste bepaalt) */
.games{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;gap:18px}
/* Mobiel: op de vijver alleen Wrapped en de Maker; de spellen staan op /spellen (knop in de onderbalk, zie nav.css) */
@media (max-width:699px){ .games.vijver .spel{display:none} }
/* Snel toevoegen (SnelToevoegen): de twee .fun-btn-knoppen van /wrapped boven het Wrapped-kaartje, alleen op mobiel.
   Indeling zoals .empty-actions op /wrapped; --ink en --bg als in wrapped/base.css, want de quote-knop kleurt daarmee. */
.snel-toevoegen{display:none;--ink:#E6F6DC;--bg:#14191B}
@media (max-width:699px){
  .snel-toevoegen{display:flex;gap:12px;justify-content:center}
  .snel-toevoegen .fun-btn{flex:1 1 0;min-width:0;max-width:240px}
}
.game{position:relative;display:flex;flex-direction:column;gap:8px;padding:24px 22px 22px;border-radius:26px;text-decoration:none;overflow:hidden;min-height:250px;
  transition:transform .15s,box-shadow .15s}
.game:hover{transform:translateY(-3px)}
.game:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.game-kicker{font-weight:900;letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;opacity:.8}
.game-title{font-size:clamp(2.6rem,10vw,3.6rem);line-height:1}
.game-text{font-weight:700;max-width:34ch}
.game-stats{font-weight:900;font-size:.9rem;opacity:.85}
.game-go{margin-top:auto;align-self:flex-end;font-weight:900;padding:10px 18px;border-radius:999px}

.game.quiz{background:var(--purple);color:#fff;border:3.5px solid #000;box-shadow:7px 7px 0 #000}
.game.quiz::before{content:"";position:absolute;inset:-60%;z-index:0;background:repeating-conic-gradient(#3A1C73 0 7.5deg,var(--purple) 7.5deg 15deg);animation:spin 90s linear infinite}
.game.quiz > *{position:relative;z-index:1}
.game.quiz .game-title{font-family:"Lilita One",system-ui,sans-serif;text-shadow:3px 3px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,5px 6px 0 rgb(0 0 0 / .35)}
.game.quiz .game-go{background:var(--yellow);color:#1A1A22;border:3px solid #000;box-shadow:4px 4px 0 #000;font-family:"Lilita One",system-ui,sans-serif;font-weight:400;font-size:1.1rem}
@keyframes spin{to{transform:rotate(360deg)}}

/* Spreekbeurt: de kaart is zelf een dia op het whiteboard — crèmekleurig gelinieerd bord,
   roze kop, Lilita-titel met roze onderstreping en sparkles, zoals de titelslides in /spreekbeurt. */
.game.spreekbeurt{--board:#FFFDF7;--board-ink:#1A1A22;
  background:repeating-linear-gradient(0deg,transparent 0 30px,rgb(26 26 34 / .06) 30px 32px),
    radial-gradient(circle at 92% 88%,#DDF4E0 0 16%,transparent 16.5%),var(--board);
  color:var(--board-ink);border:3.5px solid #000;border-radius:16px;box-shadow:7px 7px 0 #000;padding-top:0}
.game.spreekbeurt > *{position:relative;z-index:1}
.game.spreekbeurt .game-kicker{display:flex;align-items:center;gap:10px;margin:0 -22px 14px;padding:8px 18px;
  background:#d6317e;color:#fff;border-bottom:3.5px solid #000;opacity:1;
  font:400 1rem/1.2 "Lilita One",system-ui,sans-serif;letter-spacing:.08em}
.game.spreekbeurt .sb-n{margin-left:auto;padding:0 .7em;border-radius:999px;background:#1a1a22;font-size:.8em;letter-spacing:.04em;text-transform:none}
.game.spreekbeurt .game-title{font-family:"Lilita One",system-ui,sans-serif;color:var(--board-ink);text-shadow:4px 4px 0 #FFE0EF;rotate:-1.5deg;align-self:flex-start}
.game.spreekbeurt .sb-underline{width:min(62%,260px);height:8px;margin:-2px 0 4px;border-radius:99px;background:#E8408F;rotate:-1deg}
.game.spreekbeurt .game-text{max-width:26ch}
.game.spreekbeurt .game-stats{color:#5E5A78;opacity:1}
.game.spreekbeurt .sb-spark{position:absolute;z-index:0;width:30px;height:30px;color:#E8408F;pointer-events:none}
.game.spreekbeurt .sb-spark.a{right:9%;top:70px}
.game.spreekbeurt .sb-spark.b{right:20%;top:112px;width:18px;height:18px;color:#2D1459}
.game.spreekbeurt .sb-spark.c{right:6%;top:128px;width:22px;height:22px;color:#F5B800}
.game.spreekbeurt .game-go{background:#d6317e;color:#fff;border:3px solid #000;box-shadow:4px 4px 0 #000;font-family:"Lilita One",system-ui,sans-serif;font-weight:400;font-size:1.1rem}

/* De vier kaartjes uit het ontwerp (Wrapped, Kikker Maker, Slootrace, Kwaakwerk): een illustratie (SVG in
   static/assets/spelkaarten/) met de tekst en knop er los bovenop. Alles is ontworpen op 470 × 314 en wordt
   in --u (1u = 1px bij die breedte) met de breedte van het kaartje meegeschaald, zoals de dia's bij Spreekbeurt. */
.game.kaart{--u:calc(100cqw / 470);container-type:inline-size;display:block;align-self:stretch;min-height:0;padding:0;
  border-radius:24px}
.kaart-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;pointer-events:none}
.kaart-tekst{position:absolute;display:flex;flex-direction:column}
.kaart .game-kicker{opacity:1;font-size:max(10px,calc(11 * var(--u)));letter-spacing:.18em;line-height:1.3}
.kaart .game-title{line-height:1;white-space:nowrap}
.kaart .game-text{max-width:none;margin-top:calc(8 * var(--u));font-size:max(12px,calc(15.5 * var(--u)));font-weight:800;line-height:1.4}
.kaart .game-stats{margin-top:calc(10 * var(--u));font-size:max(11px,calc(13 * var(--u)));opacity:1}
.kaart .game-go{position:absolute;right:calc(22 * var(--u));bottom:calc(22 * var(--u));margin:0;display:flex;align-items:center;gap:calc(6 * var(--u));
  height:calc(46 * var(--u));min-height:34px;padding:0 calc(20 * var(--u));border-radius:999px;white-space:nowrap;
  font-family:"Lilita One",system-ui,sans-serif;font-weight:400;font-size:max(14px,calc(19 * var(--u)))}

/* Wrapped */
.game.kaart.wrapped{border:2px solid #3f8a3a;background:radial-gradient(120% 100% at 100% 100%,#2f8a3a 0%,#173d1c 45%,#0f1d12 100%);
  box-shadow:0 0 40px rgb(139 224 78 / .18)}
.wrapped .kaart-tekst{left:calc(30 * var(--u));top:calc(26 * var(--u));width:calc(262 * var(--u))}
.wrapped .game-kicker{color:#d9f5c8}
.wrapped .game-title{font-family:"Rubik Wet Paint","Lilita One",system-ui,sans-serif;font-size:calc(50 * var(--u));color:#8be04e;margin-top:calc(2 * var(--u))}
.wrapped .game-text{color:#e9f7e1}
.wrapped .game-stats{color:#b5e6a0}
.kaart-alltime{position:absolute;right:calc(18 * var(--u));top:calc(190 * var(--u));font:400 calc(34 * var(--u))/1 "Lilita One",system-ui,sans-serif;
  color:transparent;-webkit-text-stroke:calc(2 * var(--u)) #8be04e;opacity:.85;pointer-events:none}
.wrapped .game-go{background:#8be04e;color:#0f2a12;box-shadow:0 0 0 calc(3 * var(--u)) #0f2a12;bottom:calc(34 * var(--u));
  font-family:"Nunito",ui-rounded,system-ui,sans-serif;font-weight:900;font-size:max(14px,calc(18 * var(--u)))}

/* Kikker Maker */
.game.kaart.maker{border:4px solid #1a1a22;background:linear-gradient(160deg,#2fa36a 0%,#1f7d52 100%);box-shadow:6px 8px 0 #0b0b10}
.maker .kaart-tekst{left:calc(30 * var(--u));top:calc(28 * var(--u));width:calc(232 * var(--u))}
.maker .game-kicker{color:#d9f5e3}
.maker .game-title{font-family:"Permanent Marker","Rubik",cursive;font-size:calc(42 * var(--u));color:#fff;margin-top:calc(4 * var(--u));
  text-shadow:calc(3 * var(--u)) calc(3 * var(--u)) 0 #1a1a22,-1px -1px 0 #1a1a22,1px -1px 0 #1a1a22,-1px 1px 0 #1a1a22;
  transform:rotate(-3deg);transform-origin:left}
.maker .game-text{color:#fff}
.maker .game-stats{color:#ffe48a}
.maker .game-go{background:#1a1a22;color:#f2b705;border:3px solid #1a1a22;box-shadow:calc(4 * var(--u)) calc(4 * var(--u)) 0 #0b0b10}

/* Slootrace */
.game.kaart.race{border:4px solid #1a1a22;background:radial-gradient(120% 90% at 20% 0%,#3a3a48 0%,#22222b 60%,#191920 100%);box-shadow:6px 8px 0 #0b0b10}
.race .kaart-tekst{left:calc(30 * var(--u));top:calc(28 * var(--u));width:calc(260 * var(--u))}
.race .game-kicker{color:#a7a7b6}
.race .game-title{font-family:"Racing Sans One","Lilita One",system-ui,sans-serif;font-size:calc(52 * var(--u));line-height:.95;color:#f2b705;
  margin-top:calc(4 * var(--u));transform:skewX(-8deg);transform-origin:left bottom;
  text-shadow:calc(4 * var(--u)) calc(4 * var(--u)) 0 #1a1a22,-2px -2px 0 #1a1a22,2px -2px 0 #1a1a22,-2px 2px 0 #1a1a22}
.race .game-text{color:#fff}
.race .game-stats{color:#c7d86b}
.race .game-go{background:#ff5a36;color:#fff;border:3px solid #1a1a22;box-shadow:calc(4 * var(--u)) calc(4 * var(--u)) 0 #1a1a22}
.kaart-klok{position:absolute;left:calc(328 * var(--u));top:calc(20 * var(--u));width:calc(56 * var(--u));height:calc(28 * var(--u));display:grid;place-items:center;
  transform:rotate(4deg);transform-origin:calc(-34 * var(--u)) 0;font:900 calc(14 * var(--u))/1 "Nunito",ui-rounded,system-ui,sans-serif;color:#1a1a22;pointer-events:none}

/* Kwaakwerk */
.game.kaart.paint{border:4px solid #1a1a22;background:#fffaf0;box-shadow:6px 8px 0 #0b0b10}
.paint .kaart-tekst{left:calc(30 * var(--u));top:calc(58 * var(--u));width:calc(250 * var(--u))}
.paint .game-kicker{color:#5a5a66}
.paint .game-title{font-family:"Lilita One",system-ui,sans-serif;font-size:calc(48 * var(--u));letter-spacing:.01em;margin-top:calc(2 * var(--u));
  -webkit-text-stroke:calc(2.5 * var(--u)) #1a1a22;paint-order:stroke fill;text-shadow:calc(4 * var(--u)) calc(4 * var(--u)) 0 #1a1a22}
.paint .game-title span:nth-child(9n+1),.paint .game-title span:nth-child(9n+7){color:#e8408f}
.paint .game-title span:nth-child(9n+2){color:#f2a705}
.paint .game-title span:nth-child(9n+3),.paint .game-title span:nth-child(9n+8){color:#3b82c4}
.paint .game-title span:nth-child(9n+4),.paint .game-title span:nth-child(9n+9){color:#43a852}
.paint .game-title span:nth-child(9n+5){color:#9b5de5}
.paint .game-title span:nth-child(9n+6){color:#f08a24}
.kw-streep{display:block;width:calc(220 * var(--u));height:calc(12 * var(--u));margin-top:calc(2 * var(--u))}
.paint .game-text{color:#1a1a22}
.paint .game-stats{color:#6b6b80}
.paint .game-go{background:#3b82c4;color:#fff;border:3px solid #1a1a22;box-shadow:calc(4 * var(--u)) calc(4 * var(--u)) 0 #1a1a22}

@media (min-width:760px){ .games{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* Hoogte van de ontwerp-kaartjes uit de breedte (470 : 314), zonder aspect-ratio: dat gaf in sommige browsers een kaartje
   van hoogte 0 of een te brede kolom. min-width:0 laat het kaartje met de kolom meekrimpen op een smal scherm. */
.game{min-width:0}
.game.kaart::before{content:"";display:block;padding-top:66.8%}
/* Op een smalle telefoon krijgt elk kaartje zijn eigen hoogte, zodat de ontwerp-kaartjes niet worden uitgerekt tot de hoogte van Quiz. */
@media (max-width:699px){ .games{grid-auto-rows:auto} .game.kaart{align-self:start} }