/* ===== Huisstijl Venibo ===== */
:root {
  --merk: #eef4ef;          /* knoppen: licht mint met groene tekst */
  --merk-tekst: #003b15;
  --merk-donker: #99ad9f;
  --accent: #f5a524;        /* accent voor badges en streaks */
  --achtergrond: #003b15;   /* Venibo-groen */
  --achtergrond-2: #13612e;
  --kaart: #ffffff;
  --mint: #eef4ef;
  --tekst: #ffffff;
  --tekst-donker: #003110;
  --zacht: rgba(238, 244, 239, .78);

  /* de vier antwoordkleuren */
  --a0: #b82105;
  --a1: #1159af;
  --a2: #c77700;
  --a3: #2e8b3e;

  --goed: #2e8b3e;
  --fout: #b82105;
  --radius: 12px;
  --font: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  color: var(--tekst);
  background:
    radial-gradient(900px 600px at 85% 110%, rgba(153,173,159,.18), transparent 60%),
    radial-gradient(1100px 700px at 10% -20%, var(--achtergrond-2), var(--achtergrond) 65%) fixed;
  background-color: var(--achtergrond);
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}
button { font: inherit; cursor: pointer; border: 0; }
input { font: inherit; }
.verborgen { display: none !important; }

.logo { height: 44px; width: auto; display: block; }
.knop {
  background: var(--merk);
  color: var(--merk-tekst);
  font-weight: 800;
  padding: 14px 26px;
  border-radius: var(--radius);
  box-shadow: 0 5px 0 var(--merk-donker);
  transition: transform .06s, box-shadow .06s, opacity .2s;
  font-size: 1.05rem;
}
.knop:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--merk-donker); }
.knop:disabled { opacity: .5; cursor: default; }
.knop.licht { background: #fff; color: var(--tekst-donker); box-shadow: 0 5px 0 #c9c3dc; }
.knop.stil { background: rgba(255,255,255,.12); color: #fff; box-shadow: none; font-weight: 600; }

.melding {
  background: rgba(255, 196, 0, .16);
  border: 1px solid rgba(255, 196, 0, .5);
  color: #ffe9a8;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .95rem;
}
.melding a { color: #fff; }
.melding.fout { background: rgba(224, 52, 74, .18); border-color: rgba(224, 52, 74, .6); color: #ffd3d9; }

/* antwoordvormen */
.vorm svg { width: 1em; height: 1em; fill: currentColor; display: block; }
.kleur-0 { background: var(--a0); }
.kleur-1 { background: var(--a1); }
.kleur-2 { background: var(--a2); }
.kleur-3 { background: var(--a3); }

@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes schuif { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.pop { animation: pop .35s cubic-bezier(.2, 1.4, .4, 1) both; }
.schuif { animation: schuif .4s ease-out both; }
@media (prefers-reduced-motion: reduce) { .pop, .schuif { animation: none; } }