/* ============================================
   Beweging — alle @keyframes van het project op één plek

   Hoort bij scripts/fx.js. Vóór dit bestand had het project nul animaties;
   door ze hier bij elkaar te houden blijft dat overzichtelijk in plaats van
   dat ze zich over vijf stylesheets verspreiden.

   Onderaan staat één centrale rem voor `prefers-reduced-motion`.
   ============================================ */

/* ---------- Bouwstenen ---------- */

@keyframes fx-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.045); }
  100% { transform: scale(1); }
}

@keyframes fx-schud {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-5px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}

@keyframes fx-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fx-onthul {
  0%   { opacity: 0; transform: scale(0.6) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* De streakvlam. Bewust klein gehouden: dit draait oneindig door, en alles wat
   oneindig beweegt in je ooghoek wordt binnen een minuut vermoeiend. */
@keyframes fx-vlam {
  0%, 100% { transform: scale(1); filter: none; }
  50%      { transform: scale(1.09); filter: drop-shadow(0 0 5px var(--vlam-gloed)); }
}

@keyframes fx-glans {
  from { background-position: -180% 0; }
  to   { background-position: 280% 0; }
}

/* Korte nadruk (Fx.vier()) — bijvoorbeeld een teller die net is opgelopen. */
@keyframes fx-vier-puls {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ---------- Toepassingen ---------- */

.fx-pop    { animation: fx-pop 0.32s ease-out; }
.fx-schud  { animation: fx-schud 0.34s ease-in-out; }
.fx-onthul { animation: fx-onthul 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.fx-in     { animation: fx-in 0.28s ease-out; }
.fx-vier   { animation: fx-vier-puls 0.9s ease-out; }

/* Feedback na een antwoord schuift in plaats van te verschijnen. Bewust alleen
   binnen de vraagspeler: het resultatenoverzicht hergebruikt dezelfde klasse
   voor vijftig statuslabels tegelijk, en die hoeven niet allemaal in te vliegen. */
#vraag-root .feedback.toon { animation: fx-in 0.26s ease-out; }

/* Streakvlam — alleen aanzetten vanaf een streak die het waard is. */
.fx-vlam { display: inline-block; animation: fx-vlam 1.9s ease-in-out infinite; }

/* ---------- Confetti ---------- */

.fx-confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;     /* mag nooit een klik blokkeren, ook niet bij een fout */
  z-index: 400;
}

/* ---------- Niveau omhoog ---------- */

.fx-niveau {
  position: fixed;
  inset: 0;
  z-index: 401;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.fx-niveau.toon { opacity: 1; }
.fx-niveau-kaart {
  text-align: center;
  padding: 30px 44px;
  border-radius: 18px;
  background: var(--paneel);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
  transform: scale(0.85);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fx-niveau.toon .fx-niveau-kaart { transform: scale(1); }
.fx-niveau-badge {
  width: 66px;
  height: 66px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--verloop-level);
  color: var(--white);
  font-family: var(--font-header);
  font-weight: 900;
  font-size: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fx-niveau-kop {
  font-family: var(--font-header);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--level-paars);
}
.fx-niveau-naam {
  font-family: var(--font-header);
  font-weight: 900;
  font-size: 27px;
  margin-top: 2px;
}

/* ---------- Spelregister ---------- */

/* Alleen op pagina's die als "spel" gemarkeerd zijn: de trainers, de sprint,
   de ranglijst en Mijn voortgang. Het examen en de oefenschermen blijven
   rood/grijs — dat onderscheid is de hele bedoeling van deze kleuren. */
.register-spel .xp-streak,
.register-spel .sprint-streak {
  color: var(--vlam-diep);
  font-weight: 700;
}
.register-spel .xp-meter-vul { background: var(--verloop-level); }
.register-spel .xp-niveau { color: var(--level-paars); }

/* Glans over de XP-meter: subtiel, en alleen waar het spel bedoeld is. */
.register-spel .xp-meter-vul::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
  background-size: 200% 100%;
  animation: fx-glans 2.8s ease-in-out infinite;
}
.register-spel .xp-meter-vul { position: relative; overflow: hidden; }

/* ---------- De centrale rem ----------
   Eén plek waar alle beweging uit gaat. fx.js controleert dezelfde
   voorkeur in JavaScript, zodat confetti en oplopende getallen ook
   daadwerkelijk overgeslagen worden en niet alleen "stil" gaan. */
@media (prefers-reduced-motion: reduce) {
  .fx-pop, .fx-schud, .fx-onthul, .fx-in, .fx-vlam, .fx-vier,
  .feedback.toon,
  .register-spel .xp-meter-vul::after {
    animation: none !important;
  }
  .fx-niveau, .fx-niveau-kaart {
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   Prestaties — het rooster en de viering
   ============================================ */

.badge-groep { margin-bottom: 22px; }
.badge-groep-kop {
  font-family: var(--font-header);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--steengrijs);
  margin-bottom: 10px;
}
.badge-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
}
.badge {
  text-align: center;
  padding: 16px 10px 13px;
  border: 1px solid var(--border-gray);
  border-radius: var(--radius);
  background: var(--paneel);
  transition: transform 0.15s, box-shadow 0.15s;
}
@media (hover: hover) {
  .badge.verdiend:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); }
}
.badge-icoon { font-size: 30px; line-height: 1; margin-bottom: 8px; }
.badge-naam {
  font-family: var(--font-header);
  font-weight: 800;
  font-size: 13.5px;
  line-height: 1.2;
}
.badge-hint {
  font-size: 11.5px;
  color: var(--steengrijs);
  margin-top: 4px;
  line-height: 1.35;
}

/* Vergrendeld: grijs, maar wél leesbaar. De drempel is de motivatie, dus die
   mag niet wegvallen in de vaagheid. */
.badge.vergrendeld { background: var(--mistgrijs); border-style: dashed; }
.badge.vergrendeld .badge-icoon { filter: grayscale(1); opacity: 0.4; }
.badge.vergrendeld .badge-naam { color: var(--steengrijs); }

.badge.verdiend.kleur-vlam  { border-color: var(--vlam);       background: var(--vlam-bg); }
.badge.verdiend.kleur-goud  { border-color: var(--goud);       background: var(--goud-bg); }
.badge.verdiend.kleur-paars { border-color: var(--level-paars); background: var(--level-bg); }
.badge.verdiend.kleur-rood { border-color: var(--examenflix-rood); background: var(--blos); }

/* ---------- De viering ---------- */

.badge-viering {
  position: fixed;
  inset: 0;
  z-index: 402;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.badge-viering.toon { opacity: 1; }
.badge-viering-kaart {
  text-align: center;
  padding: 28px 40px;
  border-radius: 18px;
  background: var(--paneel);
  border: 3px solid var(--goud);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}
.badge-viering.kleur-vlam  .badge-viering-kaart { border-color: var(--vlam); }
.badge-viering.kleur-paars .badge-viering-kaart { border-color: var(--level-paars); }
.badge-viering.kleur-rood .badge-viering-kaart { border-color: var(--examenflix-rood); }
.badge-viering-kop {
  font-family: var(--font-header);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--goud-diep);
}
.badge-viering-icoon { font-size: 54px; line-height: 1; margin: 10px 0 6px; }
.badge-viering-naam {
  font-family: var(--font-header);
  font-weight: 900;
  font-size: 24px;
}
.badge-viering-hint { font-size: 13px; color: var(--steengrijs); margin-top: 4px; }

@media (max-width: 600px) {
  .badge-raster { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 9px; }
  .badge-viering-kaart { padding: 24px 28px; }
}

/* ============================================
   Foutenbak — de kaart die naar de herhaalronde wijst
   Vlamkleur, want dit hoort bij het spelregister: het is een uitnodiging,
   geen statusmelding.
   ============================================ */
.foutenbak-kaart {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  margin-bottom: 18px;
  border: 2px solid var(--vlam);
  border-radius: var(--radius);
  background: var(--vlam-bg);
  color: var(--inktzwart);
  transition: transform 0.15s, box-shadow 0.15s;
}
@media (hover: hover) {
  .foutenbak-kaart:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
    color: var(--inktzwart);
  }
}
.foutenbak-icoon { font-size: 28px; line-height: 1; flex-shrink: 0; }
.foutenbak-tekst { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.foutenbak-tekst strong { font-family: var(--font-header); font-weight: 800; font-size: 16px; }
.foutenbak-tekst span { font-size: 13.5px; color: var(--steengrijs); }
.foutenbak-knop {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--raakvlak);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: var(--vlam);
  color: var(--white);
  font-family: var(--font-header);
  font-weight: 800;
  font-size: 14px;
}
@media (hover: hover) {
  .foutenbak-kaart:hover .foutenbak-knop { background: var(--vlam-diep); }
}

@media (max-width: 600px) {
  .foutenbak-kaart { flex-wrap: wrap; gap: 10px; }
  .foutenbak-knop { width: 100%; text-align: center; }
}

/* ============================================
   Streakstrook (startpagina) en dagmissies
   ============================================ */

.streak-strook {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 16px 0 -8px;
  padding: 12px 18px;
  border: 1px solid var(--border-gray);
  border-left: 4px solid var(--vlam);
  border-radius: var(--radius);
  background: var(--paneel);
}
.streak-strook.nieuw { border-left-color: var(--examenflix-rood); }
.streak-items { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; flex: 1; }
.streak-item { font-size: 14.5px; color: var(--steengrijs); white-space: nowrap; }
.streak-item strong {
  font-family: var(--font-header);
  font-weight: 800;
  font-size: 17px;
  color: var(--inktzwart);
}
.streak-tekst { flex: 1; font-size: 14.5px; color: var(--steengrijs); }
.streak-knop { flex-shrink: 0; font-size: 14px; padding: 9px 18px; }

/* ---------- Missies ---------- */

.missie-lijst { display: flex; flex-direction: column; gap: 8px; }
.missie {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--border-gray);
  border-radius: var(--radius);
  background: var(--paneel);
  color: var(--inktzwart);
  transition: border-color 0.15s, background 0.15s;
}
@media (hover: hover) {
  .missie:hover { border-color: var(--examenflix-rood); color: var(--inktzwart); }
}
.missie.klaar { background: var(--blos); border-color: var(--examenflix-rood); }
.missie.gefaald { border-color: var(--waarschuwing); }
.missie.gefaald .missie-meter-vul { background: var(--waarschuwing); }
.missie-icoon { font-size: 21px; line-height: 1; flex-shrink: 0; }
.missie-tekst { flex: 1; min-width: 0; }
.missie-tekst strong {
  display: block;
  font-family: var(--font-header);
  font-weight: 800;
  font-size: 14.5px;
  margin-bottom: 6px;
}
.missie-meter {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--border-gray);
  overflow: hidden;
}
.missie-meter-vul {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--verloop-vlam);
  transition: width 0.5s ease;
}
.missie.klaar .missie-meter-vul { background: var(--examenflix-rood); }
.missie-stand {
  flex-shrink: 0;
  font-family: var(--font-header);
  font-weight: 800;
  font-size: 14px;
  color: var(--steengrijs);
}
.missie.klaar .missie-stand { color: var(--diep-rood); }

.missie-toast span { display: block; font-size: 12px; opacity: 0.85; }

@media (max-width: 600px) {
  .streak-strook { gap: 10px; }
  .streak-items { gap: 14px; }
  .streak-knop { width: 100%; text-align: center; }
}

/* ---------- Micro-modi: korte rondes ---------- */
.micro-rij {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 -4px;
}
.micro-kop {
  font-family: var(--font-header);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--steengrijs);
  margin-right: 2px;
}
.micro-tegel {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px 8px 11px;
  border: 1px solid var(--border-gray);
  border-radius: var(--pil);
  background: var(--paneel);
  color: var(--inktzwart);
  min-height: var(--raakvlak);
  transition: border-color 0.15s, transform 0.15s;
}
@media (hover: hover) {
  .micro-tegel:hover { border-color: var(--vlam); transform: translateY(-1px); color: var(--inktzwart); }
}
.micro-icoon { font-size: 17px; line-height: 1; }
.micro-tekst { display: flex; flex-direction: column; line-height: 1.25; }
.micro-tekst strong { font-family: var(--font-header); font-weight: 800; font-size: 13.5px; }
.micro-tekst span { font-size: 11px; color: var(--steengrijs); }

@media (max-width: 600px) {
  .micro-rij { gap: 8px; }
  .micro-kop { width: 100%; margin-bottom: -2px; }
}

/* ============================================
   Examen-klaar — de mijlpaalstrook

   Bewust rustiger dan de missies en de micro-tegels: dit is geen speels
   dagdoel maar de aankondiging dat het echte werk binnen bereik is. Daarom
   rood (het "serieuze" register) in plaats van het spelpalet.
   ============================================ */
.examen-klaar-strook {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 14px 18px;
  border: 1px solid var(--examenflix-rood);
  border-left: 4px solid var(--examenflix-rood);
  border-radius: var(--radius);
  background: var(--paneel);
}
.examen-klaar-icoon { font-size: 22px; line-height: 1; }
.examen-klaar-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.examen-klaar-tekst strong {
  font-family: var(--font-header);
  font-weight: 800;
  font-size: 15px;
  color: var(--inktzwart);
}
.examen-klaar-tekst span { font-size: 13px; color: var(--steengrijs); }
.examen-klaar-knop { white-space: nowrap; flex-shrink: 0; }

@media (max-width: 600px) {
  .examen-klaar-strook { flex-wrap: wrap; gap: 10px; }
  .examen-klaar-knop { width: 100%; text-align: center; }
}

/* ============================================
   Team — code, deelnemers en de formulieren
   ============================================ */
.team-hero {
  padding: 24px;
  margin-bottom: 22px;
  border: 1px solid var(--border-gray);
  border-left: 4px solid var(--level-paars);
  border-radius: var(--radius);
  background: var(--paneel);
}
.team-naam {
  font-family: var(--font-header);
  font-weight: 900;
  font-size: 26px;
  margin-bottom: 12px;
}
.team-code-rij { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.team-code {
  font-family: var(--font-header);
  font-weight: 900;
  font-size: 25px;
  letter-spacing: 0.16em;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  background: var(--level-bg);
  color: var(--level-diep);
  user-select: all;              /* één klik selecteert de hele code */
}
.team-uitleg { font-size: 13.5px; color: var(--steengrijs); margin-top: 12px; }

.team-formulier { display: flex; gap: 10px; flex-wrap: wrap; }
.team-formulier input {
  flex: 1;
  min-width: 180px;
  min-height: var(--raakvlak);
  padding: 10px 14px;
  border: 1px solid var(--border-gray);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--tekst-invoer);
}
.team-formulier input:focus {
  border-color: var(--examenflix-rood);
}
.team-formulier input[name="code"] {
  font-family: var(--font-header);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.auth-optioneel { font-weight: 400; color: var(--steengrijs); font-size: 12px; }

@media (max-width: 600px) {
  .team-formulier input { min-width: 100%; }
  .team-formulier .btn { width: 100%; }
}

/* ---------- Foutenbak-melding bij een fout antwoord ----------
   Vervangt de oude "Probeer opnieuw"-knop: in plaats van de vraag meteen nog
   eens te laten invullen (te makkelijk, staat nog vers in het geheugen) laat
   dit alleen zien dát de vraag al in de foutenbak zit. */
.foutenbak-melding {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--vlam-bg);
  color: var(--inktzwart);
  font-size: 13.5px;
}
.foutenbak-melding a { font-weight: 700; }

/* ---------- Missieblok op de startpagina (besluiten 519–521) ----------
   Eén geheel: de titel, de reeks als ondertitel, een balk die pas vol is als
   alle missies gehaald zijn, en daaronder een knop per missie. Het blok is
   de terugkeer-haak zelf, dus het draagt de vlamrand van de streakstrook. */
.missie-start {
  margin: 16px 0 18px;
  padding: 18px 20px 20px;
  border: 1px solid var(--border-gray);
  border-left: 4px solid var(--vlam);
  border-radius: var(--radius);
  background: var(--paneel);
}
/* Pas als alle missies gehaald zijn wordt het blok groen (besluit 521). */
.missie-start.vol { border-left-color: var(--goed); }
.missie-start.vol .missie-start-stand strong { color: var(--goed-tekst); }
.missie-start-kop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px 16px;
  flex-wrap: wrap;
}
.missie-start-titel {
  margin: 0;
  font-family: var(--font-header);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  color: var(--inktzwart);
}
.missie-start-icoon { margin-right: 8px; }
.missie-start-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  margin: 5px 0 0;
  font-size: 14.5px;
  color: var(--steengrijs);
}
.missie-start-stand { font-size: 14px; color: var(--steengrijs); white-space: nowrap; }
.missie-start-stand strong {
  font-family: var(--font-header);
  font-weight: 800;
  font-size: 20px;
  color: var(--inktzwart);
}
.missie-start-meter {
  height: 8px;
  margin: 14px 0 16px;
  border-radius: var(--pil);
  background: var(--border-gray);
  overflow: hidden;
}
.missie-start-meter span {
  display: block;
  height: 100%;
  border-radius: var(--pil);
  background: var(--verloop-vlam);
  transition: width 0.5s ease;
}
.missie-start.vol .missie-start-meter span { background: var(--goed); }
.missie-start-knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
/* Zonder balk (bezoeker): de knoppen houden afstand tot de ondertitel. */
.missie-start-knoppen.etalage { margin-top: 14px; }
.missie-start .missie-knop {
  flex: 1 1 13rem;
  padding: 10px 16px 10px 13px;
  border-radius: var(--radius);
}
.missie-start .missie-knop .micro-icoon { font-size: 20px; }
.missie-start .missie-knop .micro-tekst strong { font-size: 14.5px; }
.missie-start .missie-knop .micro-tekst span { font-size: 12.5px; }
.missie-knop-pijl {
  margin-left: auto;
  padding-left: 8px;
  font-weight: 800;
  color: var(--steengrijs);
  transition: transform 0.15s, color 0.15s;
}
@media (hover: hover) {
  .missie-knop:hover .missie-knop-pijl { transform: translateX(3px); color: var(--examenflix-rood); }
}
.missie-knop.volgende { border-color: var(--examenflix-rood); }
.missie-knop.volgende .missie-knop-pijl { color: var(--examenflix-rood); }
.missie-knop.gefaald { border-color: var(--waarschuwing); }
.missie-knop.klaar { background: var(--goed-bg); border-color: transparent; }
.missie-knop.klaar .micro-tekst span { color: var(--goed-tekst); }
.missie-start .streak-gebroken { margin-top: 12px; }
/* "Even snel" direct onder het blok: de marge van het blok is genoeg. */
.missie-start + .micro-rij { margin-top: 0; }
/* De laatste rij van de terugkeer-haak houdt afstand tot de kaarten eronder. */
#terugkeer-strook > .micro-rij:last-child { margin-bottom: 18px; }
@media (max-width: 600px) {
  .missie-start { padding: 16px 16px 16px 14px; }
  .missie-start-titel { font-size: 19px; }
}

/* ---------- Geslaagd voor het échte examen — de grootste viering ---------- */
.fx-geslaagd {
  position: fixed;
  inset: 0;
  z-index: 403;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.fx-geslaagd.toon { opacity: 1; }
.fx-geslaagd-kaart {
  text-align: center;
  padding: 36px 50px;
  border-radius: 20px;
  background: var(--paneel);
  border: 3px solid var(--goud);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  transform: scale(0.82);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fx-geslaagd.toon .fx-geslaagd-kaart { transform: scale(1); }
.fx-geslaagd-icoon { font-size: 58px; line-height: 1; margin-bottom: 10px; }
.fx-geslaagd-kop {
  font-family: var(--font-header);
  font-weight: 900;
  font-size: 32px;
  color: var(--diep-rood);
}
.fx-geslaagd-naam { font-size: 15px; color: var(--steengrijs); margin-top: 6px; }

/* ---------- Geslaagd-kaart en -badge (voortgang, ranglijst) ---------- */
.geslaagd-kaart {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  margin-bottom: 22px;
  border: 2px solid var(--border-gray);
  border-radius: var(--radius);
  background: var(--paneel);
}
.geslaagd-kaart.uitnodiging { border-style: dashed; }
.geslaagd-kaart.behaald { border: 2px solid var(--goud); background: var(--goud-bg); }
.geslaagd-kaart-icoon { font-size: 30px; line-height: 1; flex-shrink: 0; }
.geslaagd-kaart-tekst { flex: 1; }
.geslaagd-kaart-tekst strong { display: block; font-family: var(--font-header); font-weight: 800; font-size: 15.5px; }
.geslaagd-kaart-tekst span { font-size: 13px; color: var(--steengrijs); }
.geslaagd-kaart-ongedaan {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--steengrijs);
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
}

/* Klein label naast een naam in ranglijst/team — niet de heldenkleur (die
   betekent "goed antwoord" overal elders), dus goud, consistent met de
   badges. */
.geslaagd-label {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--pil);
  background: var(--goud-bg);
  color: var(--goud-diep);
  font-size: 11px;
  font-weight: 800;
}

/* ---------- Ranglijst: zes tabs passen niet altijd op één regel ---------- */
.ranglijst-tabs-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 20px;
}
.ranglijst-tabs-wrap .examentype-switch { white-space: nowrap; }
.ranglijst-tabs-wrap .examentype-knop { white-space: nowrap; }


/* ============================================
   Missiepagina — de missies van vandaag worden hier gespeeld
   ============================================ */

.missie-dagkop {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 16px 20px;
  border: 1px solid var(--border-gray);
  border-left: 4px solid var(--examenflix-rood);
  border-radius: var(--radius);
  background: var(--paneel);
}
.missie-dagkop-stand {
  font-family: var(--font-header);
  font-weight: 900;
  font-size: 40px;
  line-height: 1;
  color: var(--examenflix-rood);
}
.missie-dagkop-stand span { font-size: 20px; color: var(--steengrijs); }
.missie-dagkop-label { font-size: 13px; color: var(--steengrijs); margin-top: 2px; }
.missie-dagkop-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13.5px;
  color: var(--steengrijs);
}
.missie-dagkop-meta strong { color: var(--inktzwart); }

.missie-kaarten { display: flex; flex-direction: column; gap: 14px; }
.missie-kaart {
  padding: 18px 20px;
  border: 1px solid var(--border-gray);
  border-radius: var(--radius);
  background: var(--paneel);
}
.missie-kaart.klaar { background: var(--blos); border-color: var(--examenflix-rood); }
.missie-kaart-kop { display: flex; align-items: flex-start; gap: 14px; }
.missie-kaart-kop h3 { margin: 0; font-size: 18px; }
.missie-kaart-icoon { font-size: 28px; line-height: 1.1; flex-shrink: 0; }
.missie-kaart-kort { margin: 2px 0 0; font-size: 13.5px; color: var(--steengrijs); }
.missie-kaart-xp {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--font-header);
  font-weight: 800;
  font-size: 13px;
  color: var(--diep-rood);
  background: var(--blos);
  border-radius: var(--pil);
  padding: 4px 11px;
}
.missie-kaart.klaar .missie-kaart-xp { background: var(--paneel); }
.missie-kaart-uitleg { margin: 12px 0 0; font-size: 14.5px; }
.missie-kaart-onder {
  margin: 8px 0 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--diep-rood);
}
.missie-kaart-voet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.missie-kaart-klaar {
  font-family: var(--font-header);
  font-weight: 800;
  color: var(--diep-rood);
}
.missie-voetnoot { margin-top: 18px; font-size: 13px; }
.missie-compleet { margin-top: 16px; border-left: 4px solid var(--examenflix-rood); }
.missie-melding {
  border-left: 4px solid var(--examenflix-rood);
  font-size: 14.5px;
}

/* ---------- de lopende ronde ---------- */
.missie-loop {
  /* Onder de bovenbalk blijven plakken, niet eroverheen: die is zelf sticky op
     top:0 met z-index 50. */
  position: sticky;
  top: var(--nav-hoogte, 0px);
  z-index: 40;
  margin-bottom: 14px;
  padding: 12px 16px 14px;
  border: 1px solid var(--border-gray);
  border-radius: var(--radius);
  background: var(--paneel);
}
.missie-loop-kop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.missie-loop-icoon { font-size: 22px; line-height: 1; }
.missie-loop-titel { flex: 1; min-width: 160px; }
.missie-loop-titel strong {
  display: block;
  font-family: var(--font-header);
  font-weight: 800;
  font-size: 15px;
}
.missie-loop-titel span { display: block; font-size: 13px; color: var(--steengrijs); }
.missie-loop-stop { padding: 5px 12px; font-size: 13px; }
.missie-loop .missie-meter { margin-top: 10px; }

/* ---------- de uitslag ---------- */
.missie-uitslag { text-align: center; }
.missie-uitslag-icoon { font-size: 42px; line-height: 1; margin-bottom: 6px; }
.missie-uitslag-xp {
  font-family: var(--font-header);
  font-weight: 800;
  color: var(--diep-rood);
  margin: 6px 0 0;
}
.missie-uitslag-alles {
  margin: 8px 0 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--diep-rood);
}

@media (max-width: 600px) {
  .missie-dagkop { gap: 14px; padding: 14px 16px; }
  .missie-dagkop-stand { font-size: 32px; }
  .missie-kaart-voet .btn { width: 100%; text-align: center; }
  .missie-loop-stop { margin-left: auto; }
}


/* ============================================
   Streak, dagdoel en de examendatum
   ============================================ */

.streak-item.rond strong,
.streak-item.rond { color: var(--diep-rood); }
.streak-item.dagdoel { display: inline-flex; align-items: center; gap: 8px; }
.dagdoel-meter {
  display: inline-block;
  width: 84px;
  height: 6px;
  border-radius: 3px;
  background: var(--border-gray);
  overflow: hidden;
  flex-shrink: 0;
}
.dagdoel-meter.groot { display: block; width: 100%; height: 9px; border-radius: 5px; margin-top: 8px; }
.dagdoel-vul {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--verloop-vlam);
  transition: width 0.5s ease;
}
.dagdoel-vul.rond { background: var(--examenflix-rood); }
.dagdoel-tekst { white-space: nowrap; }

/* Na een gebroken reeks: één regel, in de rustige toon. Nooit rood — dit is
   een uitnodiging om terug te komen, geen foutmelding. */
.streak-gebroken {
  margin: 8px 0 0;
  padding: 9px 16px;
  border: 1px solid var(--border-gray);
  border-radius: var(--radius);
  background: var(--paneel);
  color: var(--steengrijs);
  font-size: 13.5px;
}

.streak-kaart {
  margin: 0 0 16px;
  padding: 18px 20px;
  border: 1px solid var(--border-gray);
  border-left: 4px solid var(--vlam);
  border-radius: var(--radius);
  background: var(--paneel);
}
.streak-kaart-kop { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.streak-kaart-cijfer {
  font-family: var(--font-header);
  font-weight: 900;
  font-size: 40px;
  line-height: 1;
  color: var(--examenflix-rood);
}
.streak-kaart-cijfer span {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--steengrijs);
  margin-top: 3px;
}
.streak-kaart-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13.5px;
  color: var(--steengrijs);
}
.streak-kaart-meta strong { color: var(--inktzwart); }
.streak-dagdoel { margin-top: 16px; }
.streak-gered {
  margin: 12px 0 0;
  font-size: 13.5px;
  color: var(--steengrijs);
}
.streak-kaart .streak-gebroken { margin-top: 12px; padding: 0; border: 0; background: none; }

.streak-examen {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--blos);
}
.streak-examen.leeg { background: var(--mistgrijs); }
.streak-examen-cijfer {
  font-family: var(--font-header);
  font-weight: 900;
  font-size: 34px;
  line-height: 1;
  color: var(--diep-rood);
  flex-shrink: 0;
}
.streak-examen-cijfer span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--steengrijs);
  margin-top: 2px;
}
.streak-examen-tekst { flex: 1; min-width: 190px; font-size: 13.5px; }
.streak-examen-tekst strong { display: block; font-size: 14.5px; margin-bottom: 3px; }
.streak-examen-tekst span { color: var(--steengrijs); }
.streak-datumveld {
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  border: 1px solid var(--border-gray);
  border-radius: var(--radius-sm);
  background: var(--paneel);
  color: var(--inktzwart);
}
.streak-toast span { display: block; font-size: 12px; opacity: 0.85; }

@media (max-width: 600px) {
  .streak-item.dagdoel { width: 100%; }
  .dagdoel-meter { flex: 1; width: auto; }
  .streak-kaart-kop { gap: 14px; }
  .streak-kaart-cijfer { font-size: 32px; }
  .streak-examen { gap: 12px; }
  .streak-examen .btn,
  .streak-examen .rij { width: 100%; }
  .streak-datumveld { flex: 1; }
}

/* De examendatum kreeg er een eindtijd bij: twee velden naast elkaar, met een
   label erboven. Zonder labels is een los tijdveld naast een datumveld een
   raadsel — en de tijd is optioneel, dus dat moet er ook bij staan. */
.streak-examen-invoer { align-items: flex-end; gap: 10px; }
.streak-veldlabel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--steengrijs);
}
.streak-veldlabel .stil { font-weight: 400; }
@media (max-width: 600px) {
  .streak-examen-invoer { flex-direction: column; align-items: stretch; }
  .streak-veldlabel { width: 100%; }
}