@charset "UTF-8";
/**
 * Kids Digitaal - Leer Engine v3
 */

/* ===== DESIGN SYSTEM ===== */
:root {
  /* Brand Colors - Vibrant & Fun */
  --kd-primary: #4BADFF;
  --kd-primary-dark: #2E8FD9;
  --kd-primary-light: #E3F3FF;
  --kd-primary-glow: rgba(75, 173, 255, 0.5);
  
  --kd-success: #00D68F;
  --kd-success-dark: #00B377;
  --kd-success-light: #E0FFF5;
  --kd-success-glow: rgba(0, 214, 143, 0.5);
  
  --kd-error: #FF4757;
  --kd-error-dark: #E8303F;
  --kd-error-light: #FFE8EA;
  --kd-error-glow: rgba(255, 71, 87, 0.5);
  
  --kd-warning: #FFBE0B;
  --kd-purple: #A855F7;
  --kd-purple-glow: rgba(168, 85, 247, 0.5);
  
  /* Neutrals */
  --kd-text: #1A1D29;
  --kd-text-secondary: #6B7280;
  --kd-bg: #FFFFFF;
  --kd-card: #FFFFFF;
  --kd-border: #C9CCD2;
  
  /* Streak Colors */
  --streak-1: #4BADFF;
  --streak-2: #00D68F;
  --streak-3: #FFBE0B;
  --streak-4: #FF6B35;
  --streak-5: #A855F7;
  
  /* Animation Curves - Buttery Smooth */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
  --spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Sizing */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
  --shadow-glow: 0 0 40px var(--kd-primary-glow);
}

/* ===== RESET & BASE ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body.kd-leer-fullscreen {
  font-family: "Baloo 2", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  background: #fff;
  color: var(--kd-text);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== APP CONTAINER ===== */
.kd-leer-engine {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Ambient background gradient verborgen */
.kd-leer-engine::before {
  display: none;
}

/* ===== LOADING STATE ===== */
.kd-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  gap: 24px;
}

.kd-loader {
  width: 64px;
  height: 64px;
  position: relative;
}

.kd-loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: var(--kd-primary);
  animation: loaderSpin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.kd-loader-ring:nth-child(2) {
  inset: 8px;
  border-top-color: var(--kd-success);
  animation-delay: -0.15s;
}

.kd-loader-ring:nth-child(3) {
  inset: 16px;
  border-top-color: var(--kd-purple);
  animation-delay: -0.3s;
}

@keyframes loaderSpin {
  to { transform: rotate(360deg); }
}

.kd-loading-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--kd-text-secondary);
  animation: loadingPulse 1.5s ease-in-out infinite;
}

@keyframes loadingPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ===== HEADER ===== */
.kd-engine-header {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  padding: 15px 24px;
  padding-left: max(24px, calc((100% - 950px) / 2 + 24px));
  padding-right: max(24px, calc((100% - 950px) / 2 + 24px));
  background-color: #ffffff00; /* f0f8ff*/
  border-bottom: 0px solid rgba(0,0,0,0.08);
  position: sticky;
  top: 0;
  z-index: 100;
  animation: headerSlide 0.6s var(--ease-out-expo);
  gap: 4px 20px;
  overflow: hidden;
}

.kd-engine-header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(https://kidsdigitaal.nl/wp-content/uploads/2026/01/Achtergrond-golf-v3.png?v=2);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.0; /* 0.04*/
  pointer-events: none;
  z-index: 0;
}

.kd-header-top,
.kd-header-bottom {
  position: relative;
  z-index: 1;
}

.kd-header-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kd-header-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@keyframes headerSlide {
  from { 
    opacity: 0;
    transform: translateY(-100%);
  }
}

/* Close Button */
.kd-close-btn {
  grid-row: 1 / 3;
  align-self: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: 2px solid var(--kd-border);
  background: var(--kd-card);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.3s var(--ease-out-expo);
  flex-shrink: 0;
  z-index: 2;
}

.kd-close-btn svg {
  width: 16px;
  height: 16px;
  stroke: var(--kd-text-secondary);
  stroke-width: 2.5;
  fill: none;
  transition: all 0.3s var(--ease-out-expo);
}

.kd-close-btn:hover {
  border-color: var(--kd-error);
  background: var(--kd-error-light);
  transform: rotate(90deg);
}

.kd-close-btn:hover svg {
  stroke: var(--kd-error);
}

.kd-close-btn:active {
  transform: rotate(90deg) scale(0.92);
}

/* ===== PROGRESS BAR ===== */
.kd-progress-container {
  flex: 1;
  height: 18px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid #b3d9f2;
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

.kd-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--kd-primary), var(--kd-success));
  border-radius: var(--radius-full);
  transition: width 0.8s var(--ease-out-expo);
  position: relative;
}

/* Shimmer on progress */
.kd-progress-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.4) 50%,
    transparent 100%
  );
  animation: progressShimmer 2s ease-in-out infinite;
}

@keyframes progressShimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.kd-progress-text {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--kd-text-secondary);
}

/* ===== LIVES ===== */
.kd-lives {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.kd-heart {
  width: 22px;
  height: 22px;
  transition: all 0.4s var(--ease-out-back);
  cursor: default;
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.9));
}

.kd-heart:hover {
  transform: scale(1.15) rotate(-5deg);
}

.kd-heart.losing {
  animation: heartBreak 0.8s var(--ease-out-expo) forwards;
}

@keyframes heartBreak {
  0% { 
    transform: scale(1); 
    filter: none;
  }
  15% { 
    transform: scale(1.4) rotate(-15deg); 
  }
  30% { 
    transform: scale(1.2) rotate(10deg);
  }
  50% {
    transform: scale(0.9) translateY(-10px);
    filter: grayscale(0.5);
  }
  100% { 
    transform: scale(0.75) translateY(5px);
    opacity: 0.3;
    filter: grayscale(1);
  }
}

.kd-heart.lost {
  transform: scale(0.75);
  opacity: 0.3;
  filter: grayscale(1);
}

/* ===== STREAK INDICATOR ===== */
.kd-streak-container {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 110;
  pointer-events: none;
}

.kd-streak-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--kd-warning), #FF8C00);
  border-radius: var(--radius-full);
  color: white;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 4px 20px rgba(255, 190, 11, 0.4);
  opacity: 0;
  transform: scale(0.5) translateX(50px);
  transition: all 0.5s var(--ease-out-back);
}

.kd-streak-badge.visible {
  opacity: 1;
  transform: scale(1) translateX(0);
}

.kd-streak-badge.fire {
  animation: streakFire 0.6s var(--ease-out-back);
}

@keyframes streakFire {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.kd-streak-badge svg {
  width: 22px;
  height: 22px;
  animation: fireFlicker 0.5s ease-in-out infinite alternate;
}

@keyframes fireFlicker {
  from { transform: scale(1) rotate(-3deg); }
  to { transform: scale(1.1) rotate(3deg); }
}
/* ===== MAIN CONTENT ===== */
.kd-engine-content {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 32px 20px 16px;
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
  scrollbar-width: none; /* Firefox */
}

/* Wanneer het feedback-paneel onderaan zichtbaar is, voeg extra
   padding-bottom toe zodat lange vragen (bv. sorteer met veel items)
   helemaal doorgescrollt kunnen worden. Anders dekt het fixed paneel
   de laatste items af. De class wordt door JS toegevoegd zodat het
   ook werkt op oudere iOS-versies (zonder :has()-support) - belangrijk
   voor schoolkiosken/iPads die nog op iOS <15.4 zitten. */
.kd-leer-engine.has-feedback .kd-engine-content {
  padding-bottom: 320px;
}

.kd-engine-content::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

/* ===== QUESTION CONTAINER ===== */
.kd-question-container {
  animation: questionEnter 0.7s var(--ease-out-expo);
}

@keyframes questionEnter {
  from {
    opacity: 0;
    transform: translateX(80px) scale(0.96);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

.kd-question-container.exiting {
  animation: questionExit 0.4s var(--ease-in-out-circ) forwards;
}

@keyframes questionExit {
  to {
    opacity: 0;
    transform: translateX(-60px) scale(0.96);
    filter: blur(4px);
  }
}

/* ===== QUESTION HEADER ===== */
.kd-question-header {
  text-align: center;
  margin-bottom: 36px;
}

.kd-question-type-badge {
  display: none !important;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--kd-primary-light), #F3E8FF);
  color: var(--kd-primary-dark);
  padding: 10px 20px;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 20px;
  animation: badgeDrop 0.6s var(--ease-out-back) 0.1s backwards;
}

@keyframes badgeDrop {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.8);
  }
}

.kd-question-text {
  font-size: clamp(1.4rem, 4vw, 1.75rem);
  font-weight: 600;
  color: var(--kd-text);
  line-height: 1.35;
  margin-bottom: 12px;
  /* Behoud regelovergangen die de admin in de vraagtekst heeft getypt;
     standaard CSS collapse-t \n naar één spatie. */
  white-space: pre-wrap;
  animation: textFloat 0.7s var(--ease-out-expo) 0.15s backwards;
}

@keyframes textFloat {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
}

.kd-question-hint {
  font-size: 1rem;
  color: var(--kd-text-secondary);
  text-align: center;
  animation: textFloat 0.7s var(--ease-out-expo) 0.25s backwards;
}

/* ===== MULTIPLE CHOICE ===== */
.kd-options-grid {
  display: grid;
  gap: 10px;
}

/* Compact grid voor korte antwoorden (2x2) */
.kd-options-grid.kd-options-compact {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.kd-options-compact .kd-option-btn {
  padding: 16px 22px;
  font-size: 1rem;
  text-align: center;
}

.kd-options-compact .kd-option-btn.correct {
  background: var(--kd-success-light);
  border-color: var(--kd-success);
  color: var(--kd-success-dark);
}

.kd-options-compact .kd-option-btn.incorrect {
  background: var(--kd-error-light);
  border-color: var(--kd-error);
  color: var(--kd-error-dark);
}

.kd-options-compact .kd-option-btn.correct::before,
.kd-options-compact .kd-option-btn.incorrect::before {
  color: inherit;
}

.kd-options-compact .kd-option-btn.correct::after {
  background: rgba(0, 214, 143, 0.15);
}

.kd-option-btn {
  position: relative;
  padding: 20px 28px;
  background: var(--kd-card);
  border: 3px solid var(--kd-border);
  border-radius: var(--radius-md);
  font-size: 1.1rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--kd-text);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  transition: all 0.3s var(--ease-out-expo);
  animation: optionSlide 0.5s var(--ease-out-expo) backwards;
}

.kd-option-btn:nth-child(1) { animation-delay: 0.15s; }
.kd-option-btn:nth-child(2) { animation-delay: 0.2s; }
.kd-option-btn:nth-child(3) { animation-delay: 0.25s; }
.kd-option-btn:nth-child(4) { animation-delay: 0.3s; }

@keyframes optionSlide {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
}

/* Hover glow effect */
.kd-option-btn:hover:not(:disabled) {
  border-color: var(--kd-primary);
  transform: translateY(-4px) scale(1.01);
  box-shadow: 
    0 10px 30px -10px var(--kd-primary-glow),
    0 4px 10px rgba(0,0,0,0.08);
}

.kd-option-btn:active:not(:disabled) {
  transform: translateY(-2px) scale(0.99);
  transition-duration: 0.1s;
}

/* Correct Answer */
.kd-option-btn.correct {
  background: var(--kd-success);
  border-color: var(--kd-success);
  color: white;
  animation: correctPop 0.6s var(--ease-out-back);
  box-shadow: 0 10px 40px -10px var(--kd-success-glow);
}

@keyframes correctPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  70% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

/* Checkmark appear */
.kd-option-btn.correct::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,0.3);
  border-radius: 50%;
  display: grid;
  place-items: center;
  animation: checkPop 0.4s var(--ease-out-back) 0.15s backwards;
}

.kd-option-btn.correct::before {
  content: '\2713';
  position: absolute;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-size: 1.1rem;
  font-weight: 600;
  z-index: 1;
  animation: checkPop 0.4s var(--ease-out-back) 0.2s backwards;
}

@keyframes checkPop {
  from {
    opacity: 0;
    transform: translateY(-50%) scale(0) rotate(-180deg);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) scale(1) rotate(0);
  }
}

/* Incorrect Answer */
.kd-option-btn.incorrect {
  background: var(--kd-error);
  border-color: var(--kd-error);
  color: white;
  animation: incorrectShake 0.6s var(--ease-out-expo);
}

@keyframes incorrectShake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-14px) rotate(-2deg); }
  30% { transform: translateX(12px) rotate(2deg); }
  45% { transform: translateX(-10px) rotate(-1deg); }
  60% { transform: translateX(8px) rotate(1deg); }
  75% { transform: translateX(-4px); }
}

.kd-option-btn.incorrect::before {
  content: '\2717';
  position: absolute;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-size: 1.2rem;
  font-weight: 600;
  animation: checkPop 0.4s var(--ease-out-back) 0.1s backwards;
}

.kd-option-btn:disabled {
  cursor: not-allowed;
}

.kd-option-btn:disabled:not(.correct):not(.incorrect) {
  opacity: 0.5;
}

/* ===== INPUT FIELD ===== */
.kd-input-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.kd-answer-input {
  width: 100%;
  max-width: 400px;
  padding: 20px 28px;
  font-size: 1.4rem;
  font-family: inherit;
  font-weight: 600;
  text-align: center;
  border: 3px solid var(--kd-border);
  border-radius: var(--radius-lg);
  background: var(--kd-card);
  color: var(--kd-text);
  outline: none;
  transition: all 0.3s var(--ease-out-expo);
  animation: inputGrow 0.6s var(--ease-out-back);
}

@keyframes inputGrow {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
}

.kd-answer-input::placeholder {
  color: var(--kd-text-secondary);
  font-weight: 500;
}

.kd-answer-input:focus {
  border-color: var(--kd-primary);
  box-shadow: 
    0 0 0 4px var(--kd-primary-light),
    0 10px 30px -10px var(--kd-primary-glow);
  transform: scale(1.02);
}

.kd-answer-input.correct {
  border-color: var(--kd-success);
  background: var(--kd-success-light);
  animation: inputSuccess 0.5s var(--ease-out-back);
}

@keyframes inputSuccess {
  50% { transform: scale(1.04); }
}

.kd-answer-input.incorrect {
  border-color: var(--kd-error);
  background: var(--kd-error-light);
  animation: incorrectShake 0.5s var(--ease-out-expo);
}

/* ===== VUL-IN ===== */
.kd-vulin-container {
  text-align: left;
}

.kd-vulin-sentence {
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 2.8;
  color: var(--kd-text);
  margin-bottom: 28px;
  text-align: center;
}

.kd-vulin-blank {
  display: inline-block;
  min-width: 80px;
  width: auto;
  max-width: 200px;
  padding: 4px 12px;
  margin: 0 4px;
  font-size: 1.1rem;
  font-family: inherit;
  font-weight: 600;
  text-align: center;
  border: none;
  border-bottom: 4px solid var(--kd-primary);
  border-radius: 8px 8px 0 0;
  background: var(--kd-primary-light);
  color: var(--kd-text);
  outline: none;
  transition: all 0.3s var(--ease-out-expo);
  vertical-align: baseline;
  box-sizing: content-box;
}

.kd-vulin-blank:focus {
  background: white;
  border-bottom-width: 5px;
  box-shadow: 0 8px 20px -8px var(--kd-primary-glow);
  transform: translateY(-2px);
}

.kd-vulin-blank.correct {
  border-color: var(--kd-success);
  background: var(--kd-success-light);
  animation: blankBounce 0.4s var(--ease-out-back);
}

@keyframes blankBounce {
  50% { transform: translateY(-6px) scale(1.05); }
}

.kd-vulin-blank.incorrect {
  border-color: var(--kd-error);
  background: var(--kd-error-light);
  animation: incorrectShake 0.5s var(--ease-out-expo);
}
/* ===== DRAG & DROP ===== */
.kd-dragdrop-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.kd-drop-zone {
  width: 100%;
  min-height: 130px;
  border: 4px dashed var(--kd-primary);
  border-radius: var(--radius-xl);
  background: var(--kd-primary-light);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  transition: all 0.4s var(--ease-out-expo);
  position: relative;
}

/* Breathing animation hint */
.kd-drop-zone::before {
  content: '';
  position: absolute;
  inset: -8px;
  border: 3px solid var(--kd-primary);
  border-radius: calc(var(--radius-xl) + 8px);
  opacity: 0;
  animation: zoneBreathe 2.5s ease-in-out infinite;
}

@keyframes zoneBreathe {
  0%, 100% { opacity: 0; transform: scale(0.98); }
  50% { opacity: 0.3; transform: scale(1); }
}

.kd-drop-placeholder {
  color: var(--kd-primary);
  font-weight: 600;
  font-size: 1.1rem;
  opacity: 0.7;
}

.kd-drop-zone.has-items .kd-drop-placeholder {
  display: none;
}

.kd-drop-zone.correct {
  border-color: var(--kd-success);
  background: var(--kd-success-light);
  animation: zoneSuccess 0.5s var(--ease-out-back);
}

.kd-drop-zone.correct::before {
  display: none;
}

@keyframes zoneSuccess {
  50% { transform: scale(1.02); }
}

.kd-drop-zone.incorrect {
  border-color: var(--kd-error);
  background: var(--kd-error-light);
  animation: incorrectShake 0.5s var(--ease-out-expo);
}

.kd-drag-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.kd-drag-item {
  padding: 16px 28px;
  background: var(--kd-card);
  border: 3px solid var(--kd-border);
  border-radius: var(--radius-md);
  font-size: 1.05rem;
  font-weight: 600;
  cursor: grab;
  user-select: none;
  transition: all 0.3s var(--ease-out-expo);
  animation: itemPop 0.5s var(--ease-out-back) backwards;
}
.kd-drag-item:active { cursor: grabbing; }
/* Tijdens slepen: source-element wordt halftransparent zodat de admin
   ziet welk blokje verplaatst wordt (de browser toont al een ghost-image). */
.kd-drag-item.dragging { opacity: 0.4; }
/* Na fout antwoord: markeer welke blokjes goed waren (groen) en welke
   foutief in het doelvak waren geplaatst (rood). Geen hover-effect meer
   want de vraag is afgerond.
   .in-zone heeft een blauwe gradient — voor blokjes IN de zone moeten we
   de styling daarom met hogere specificity (.in-zone.correct-answer) opnieuw
   zetten, anders wint de blauwe achtergrond. */
.kd-drag-item.correct-answer {
  border-color: var(--kd-success, #00d68f);
  background: rgba(0, 214, 143, 0.08);
  box-shadow: 0 0 0 2px rgba(0, 214, 143, 0.2);
}
.kd-drag-item.wrong-placement {
  border-color: var(--kd-error, #ff4757);
  background: rgba(255, 71, 87, 0.08);
}
.kd-drag-item.in-zone.correct-answer {
  background: linear-gradient(135deg, #00d68f, #00b377);
  border-color: var(--kd-success, #00d68f);
  color: white;
  box-shadow: 0 8px 25px -8px rgba(0, 214, 143, 0.5);
}
.kd-drag-item.in-zone.wrong-placement {
  background: linear-gradient(135deg, #ff4757, #e8303f);
  border-color: var(--kd-error, #ff4757);
  color: white;
  box-shadow: 0 8px 25px -8px rgba(255, 71, 87, 0.5);
}
.kd-drag-item.correct-answer:hover,
.kd-drag-item.wrong-placement:hover {
  transform: none;
}
/* Drop-targets lichten op als het versleepte item eroverheen hangt. */
.kd-drop-zone.drag-over {
  border-color: var(--kd-primary);
  background: rgba(56, 189, 248, 0.08);
}
.kd-drag-items.drag-over {
  outline: 2px dashed var(--kd-border);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

.kd-drag-item:nth-child(1) { animation-delay: 0.1s; }
.kd-drag-item:nth-child(2) { animation-delay: 0.14s; }
.kd-drag-item:nth-child(3) { animation-delay: 0.18s; }
.kd-drag-item:nth-child(4) { animation-delay: 0.22s; }
.kd-drag-item:nth-child(5) { animation-delay: 0.26s; }
.kd-drag-item:nth-child(6) { animation-delay: 0.3s; }

@keyframes itemPop {
  from {
    opacity: 0;
    transform: scale(0.7) translateY(20px);
  }
}

.kd-drag-item:hover {
  border-color: var(--kd-primary);
  transform: translateY(-4px) scale(1.03);
  box-shadow: var(--shadow-md);
}

.kd-drag-item:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
}

.kd-drag-item.in-zone {
  background: linear-gradient(135deg, var(--kd-primary), var(--kd-primary-dark));
  border-color: var(--kd-primary);
  color: white;
  animation: itemSelect 0.35s var(--ease-out-back);
  box-shadow: 0 8px 25px -8px var(--kd-primary-glow);
}

@keyframes itemSelect {
  50% { transform: scale(1.12); }
}

/* ===== CONNECT ===== */
.kd-connect-container {
  padding: 10px 0;
}

.kd-connect-columns {
  display: grid;
  grid-template-columns: 1fr 50px 1fr;
  gap: 12px;
  align-items: start;
}

.kd-connect-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kd-connect-item {
  padding: 18px 22px;
  background: var(--kd-card);
  border: 3px solid var(--kd-border);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--kd-text);
  cursor: pointer;
  transition: all 0.3s var(--ease-out-expo);
  animation: connectSlide 0.5s var(--ease-out-expo) backwards;
  position: relative;
  overflow: hidden;
}

.kd-connect-column:first-child .kd-connect-item {
  --direction: -1;
}

.kd-connect-column:last-child .kd-connect-item {
  --direction: 1;
}

@keyframes connectSlide {
  from {
    opacity: 0;
    transform: translateX(calc(30px * var(--direction, 1)));
  }
}

.kd-connect-item:nth-child(1) { animation-delay: 0.1s; }
.kd-connect-item:nth-child(2) { animation-delay: 0.15s; }
.kd-connect-item:nth-child(3) { animation-delay: 0.2s; }
.kd-connect-item:nth-child(4) { animation-delay: 0.25s; }

.kd-connect-item:hover:not(.matched):not(.selected) {
  border-color: var(--kd-primary);
  transform: scale(1.03);
  box-shadow: var(--shadow-md);
}

.kd-connect-item.selected {
  border-color: var(--kd-primary);
  background: var(--kd-primary-light);
  box-shadow: 0 0 0 4px rgba(75, 173, 255, 0.2);
  animation: selectPulse 1.5s ease-in-out infinite;
}

@keyframes selectPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(75, 173, 255, 0.2); }
  50% { box-shadow: 0 0 0 8px rgba(75, 173, 255, 0.1); }
}

.kd-connect-item.matched {
  background: var(--kd-success);
  border-color: var(--kd-success);
  color: white;
  cursor: default;
  animation: matchPop 0.5s var(--ease-out-back);
}

@keyframes matchPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.kd-connect-item.matched::after {
  content: '\2713';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
}

.kd-connect-item.incorrect-flash {
  border-color: var(--kd-error);
  background: var(--kd-error-light);
  animation: incorrectShake 0.5s var(--ease-out-expo);
}

.kd-connect-lines {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== SORTEER ===== */
.kd-sorteer-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: rgba(0,0,0,0.02);
  border-radius: var(--radius-xl);
}

/* Zwevende scroll-pijltjes voor sorteer op touch-devices.
   Klein, semi-transparant, rechts naast de items zodat ze de drag-area
   niet hinderen. Smooth scroll bij tap, continu bij vasthouden. */
.kd-scroll-arrow {
  position: fixed;
  right: 8px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: rgba(30, 30, 30, 0.55);
  color: white;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* Hoger dan het feedback-paneel (z-index 200) zodat de pijltjes ook
     bovenop het paneel zichtbaar blijven en de leerling tijdens de
     feedback-fase nog door de items kan scrollen (tabs Jouw/Juiste
     antwoord bij sorteer, etc.). */
  z-index: 250;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.2s, background 0.15s, top 0.3s, bottom 0.3s;
}
.kd-scroll-arrow:active { background: rgba(30, 30, 30, 0.85); }
.kd-scroll-arrow-up   { top: 80px; }
.kd-scroll-arrow-down { bottom: 80px; }
/* Wanneer het feedback-paneel onderaan zichtbaar is, schuift de onderste
   pijl boven het paneel zodat 'ie niet eronder verdwijnt. 320px ≈ max
   panel-hoogte; iets ruimer voor zekerheid bij lange uitleg. */
.kd-leer-engine.has-feedback .kd-scroll-arrow-down { bottom: 340px; }

/* Tab-balk boven sorteer-lijsten na een fout antwoord: switchen tussen
   eigen antwoord en juiste volgorde. Eén lijst tegelijk in beeld. */
.kd-sorteer-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  border-bottom: 2px solid var(--kd-border);
}
.kd-sorteer-tab {
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 8px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--kd-text-secondary);
  cursor: pointer;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}
.kd-sorteer-tab:hover { color: var(--kd-text); }
.kd-sorteer-tab.active {
  color: var(--kd-success, #00d68f);
  border-bottom-color: var(--kd-success, #00d68f);
}

/* Read-only sorteer-lijst (juiste volgorde): geen drag, geen hover-lift. */
.kd-sorteer-readonly .kd-sorteer-item {
  cursor: default;
}
.kd-sorteer-readonly .kd-sorteer-item:hover {
  transform: none;
  box-shadow: none;
}

.kd-sorteer-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: var(--kd-card);
  border: 3px solid var(--kd-border);
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: grab;
  user-select: none;
  touch-action: none;
  -webkit-touch-callout: none;
  transition: all 0.3s var(--ease-out-expo);
  animation: sortSlide 0.4s var(--ease-out-expo) backwards;
}

.kd-sorteer-item:nth-child(1) { animation-delay: 0.05s; }
.kd-sorteer-item:nth-child(2) { animation-delay: 0.1s; }
.kd-sorteer-item:nth-child(3) { animation-delay: 0.15s; }
.kd-sorteer-item:nth-child(4) { animation-delay: 0.2s; }
.kd-sorteer-item:nth-child(5) { animation-delay: 0.25s; }

@keyframes sortSlide {
  from {
    opacity: 0;
    transform: translateX(-25px);
  }
}

.kd-sorteer-nr {
  width: 36px;
  height: 36px;
  background: var(--kd-primary-light);
  color: var(--kd-primary);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  font-weight: 600;
  flex-shrink: 0;
  transition: all 0.3s var(--ease-out-expo);
}

.kd-sorteer-item:hover {
  border-color: var(--kd-primary);
  transform: translateX(8px);
  box-shadow: var(--shadow-md);
}

.kd-sorteer-item:active,
.kd-sorteer-item.dragging {
  cursor: grabbing;
  transform: scale(1.03);
  box-shadow: var(--shadow-lg);
  z-index: 10;
  background: var(--kd-primary-light);
  border-color: var(--kd-primary);
}

.kd-sorteer-item.correct {
  border-color: var(--kd-success);
  background: var(--kd-success-light);
}

.kd-sorteer-item.correct .kd-sorteer-nr {
  background: var(--kd-success);
  color: white;
}

.kd-sorteer-item.incorrect {
  border-color: var(--kd-error);
  background: var(--kd-error-light);
  animation: incorrectShake 0.5s var(--ease-out-expo);
}

.kd-sorteer-item.incorrect .kd-sorteer-nr {
  background: var(--kd-error);
  color: white;
}
/* ===== MEMORY GAME ===== */
.kd-memory-container {
  padding: 10px 0;
}

.kd-memory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 480px;
  margin: 0 auto;
}

@media (max-width: 480px) {
  .kd-memory-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

.kd-memory-card {
  aspect-ratio: 1;
  perspective: 1200px;
  cursor: pointer;
  animation: cardDeal 0.6s var(--ease-out-back) backwards;
}

.kd-memory-card:nth-child(1) { animation-delay: 0.05s; }
.kd-memory-card:nth-child(2) { animation-delay: 0.08s; }
.kd-memory-card:nth-child(3) { animation-delay: 0.11s; }
.kd-memory-card:nth-child(4) { animation-delay: 0.14s; }
.kd-memory-card:nth-child(5) { animation-delay: 0.17s; }
.kd-memory-card:nth-child(6) { animation-delay: 0.2s; }
.kd-memory-card:nth-child(7) { animation-delay: 0.23s; }
.kd-memory-card:nth-child(8) { animation-delay: 0.26s; }

@keyframes cardDeal {
  from {
    opacity: 0;
    transform: rotateY(-180deg) scale(0.6) translateY(-30px);
  }
}

.kd-memory-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.7s var(--ease-out-expo);
}

.kd-memory-card:hover:not(.flipped):not(.matched) .kd-memory-card-inner {
  transform: rotateY(15deg) scale(1.05);
}

.kd-memory-card.flipped .kd-memory-card-inner,
.kd-memory-card.matched .kd-memory-card-inner {
  transform: rotateY(180deg);
}

.kd-memory-card-front,
.kd-memory-card-back {
position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  padding: 12px;
  border: 3px solid transparent;
}

.kd-memory-card-front {
  background: linear-gradient(145deg, var(--kd-primary), #3B8EE8);
  color: white;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

/* Card pattern */
.kd-memory-card-front::before {
  content: '?';
  font-size: 2.2rem;
  opacity: 0.4;
}

.kd-memory-card-front::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: calc(var(--radius-md) - 6px);
}

.kd-memory-card-back {
  background: var(--kd-card);
  color: var(--kd-text);
  transform: rotateY(180deg);
  border-color: var(--kd-border);
  box-shadow: var(--shadow-md);
}

.kd-memory-card.matched .kd-memory-card-back {
  border-color: var(--kd-success);
  background: linear-gradient(145deg, var(--kd-success-light), white);
  animation: memoryMatch 0.6s var(--ease-out-back);
}

@keyframes memoryMatch {
  0% { transform: rotateY(180deg) scale(1); }
  50% { transform: rotateY(180deg) scale(1.15); }
  100% { transform: rotateY(180deg) scale(1); }
}

/* ===== BUTTONS ===== */
.kd-btn {
  position: relative;
  padding: 15px 45px;
  border-radius: 15px;
  border: none;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.2s ease;
  isolation: isolate;
}

/* Shine effect uitgeschakeld voor 3D-stijl */
.kd-btn::before {
  display: none;
}

.kd-btn:hover::before {
  display: none;
}

.kd-btn-primary {
  background: #0099FF;
  color: #fff;
  box-shadow: inset 0 -4px 0 rgba(0, 122, 204, 0.4);
}

.kd-btn-primary:hover:not(:disabled) {
  background: #008ae5;
  transform: none;
  box-shadow: inset 0 -4px 0 rgba(0, 122, 204, 0.4);
}

.kd-btn-primary:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: none;
}

.kd-btn-success {
  background: var(--kd-success);
  color: white;
  box-shadow: inset 0 -4px 0 var(--kd-success-dark);
}

.kd-btn-success::before {
  display: none;
}

.kd-btn-success:hover:not(:disabled) {
  background: #00c483;
  transform: none;
  box-shadow: inset 0 -4px 0 var(--kd-success-dark);
}

.kd-btn-success:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: none;
}

.kd-btn-error {
  background: var(--kd-error);
  color: white;
  box-shadow: inset 0 -4px 0 var(--kd-error-dark);
}

.kd-btn-error::before {
  display: none;
}

.kd-btn-error:hover:not(:disabled) {
  background: #f03e4d;
  transform: none;
  box-shadow: inset 0 -4px 0 var(--kd-error-dark);
}

.kd-btn-error:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: none;
}

.kd-btn-secondary {
  background: var(--kd-card);
  color: var(--kd-text);
  border: 3px solid var(--kd-border);
  border-radius: 15px;
}

.kd-btn-secondary:hover:not(:disabled) {
  border-color: var(--kd-primary);
  background: var(--kd-primary-light);
  color: var(--kd-primary);
  transform: none;
}

.kd-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ===== STICKY NAKIJKEN BUTTON ===== */
.kd-check-btn-wrapper {
  background: var(--kd-card);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
  padding: 16px 24px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  z-index: 150;
  flex-shrink: 0;
}

.kd-check-btn {
  min-width: 200px;
  pointer-events: auto;
  box-shadow: inset 0 -4px 0 rgba(0, 122, 204, 0.4), 0 4px 20px rgba(0,0,0,0.15);
}

/* Leestekst terugkijk-knop */
.kd-leestekst-terugkijk-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--kd-primary, #4BADFF);
  background: rgba(75, 173, 255, 0.08);
  border: 1.5px solid rgba(75, 173, 255, 0.25);
  border-radius: var(--radius-full, 50px);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.kd-leestekst-terugkijk-btn:hover {
  background: rgba(75, 173, 255, 0.15);
  border-color: rgba(75, 173, 255, 0.4);
  transform: none;
}

.kd-leestekst-terugkijk-btn:active {
  transform: scale(0.96);
}

.kd-leestekst-terugkijk-btn svg {
  flex-shrink: 0;
}

.kd-check-btn:hover:not(:disabled) {
  transform: none;
}

.kd-check-btn:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: none;
}

/* Geselecteerde optie styling (voor meerkeuze met Controleer) */
.kd-option-btn.selected {
  border-color: var(--kd-primary);
  background: var(--kd-primary-light);
  color: var(--kd-text);
  box-shadow: 0 0 0 3px rgba(75, 173, 255, 0.25);
}

/* Correct/incorrect moet altijd winnen van selected */
.kd-option-btn.selected.correct {
  background: var(--kd-success);
  border-color: var(--kd-success);
  color: white;
  box-shadow: 0 10px 40px -10px var(--kd-success-glow);
}

.kd-option-btn.selected.incorrect {
  background: var(--kd-error);
  border-color: var(--kd-error);
  color: white;
}

/* Loading state */
.kd-btn.loading {
  pointer-events: none;
  color: transparent;
}

.kd-btn.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 3px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: btnSpin 0.8s linear infinite;
}

@keyframes btnSpin {
  to { transform: rotate(360deg); }
}
/* ===== FEEDBACK PANEL ===== */
.kd-feedback-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--kd-card);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 -10px 60px rgba(0,0,0,0.15);
  padding: 32px 24px 40px;
  z-index: 200;
  transform: translateY(100%);
  transition: transform 0.5s var(--ease-out-expo);
}

.kd-feedback-panel.visible {
  transform: translateY(0);
}

.kd-feedback-content {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}

.kd-feedback-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}

.kd-feedback-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  animation: iconBurst 0.6s var(--ease-out-back);
}

@keyframes iconBurst {
  from {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  to {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}

.kd-feedback-panel.correct .kd-feedback-icon {
  background: linear-gradient(135deg, var(--kd-success), #00B377);
  box-shadow: 0 8px 25px rgba(0, 214, 143, 0.4);
}

.kd-feedback-panel.incorrect .kd-feedback-icon {
  background: linear-gradient(135deg, var(--kd-error), #E8303F);
  box-shadow: 0 8px 25px rgba(255, 71, 87, 0.4);
}

.kd-feedback-icon svg {
  width: 15px;
  height: 15px;
  stroke: white;
  stroke-width: 3;
  fill: none;
}

.kd-feedback-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 600;
  animation: titleSlide 0.5s var(--ease-out-expo) 0.1s backwards;
}

@keyframes titleSlide {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
}

.kd-feedback-panel.correct .kd-feedback-title {
  color: var(--kd-success);
}

.kd-feedback-panel.incorrect .kd-feedback-title {
  color: var(--kd-error);
}

.kd-feedback-explanation {
  color: var(--kd-text-secondary);
  font-size: 1.05rem;
  margin: 0 0 24px;
  line-height: 1.5;
  /* Behoud regelovergangen die de admin in de uitleg/feedback heeft getypt.
     Zonder dit collapse-t de browser \n naar één spatie en wordt alles als
     één lange zin getoond. */
  white-space: pre-wrap;
  animation: textUp 0.5s var(--ease-out-expo) 0.15s backwards;
}

@keyframes textUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
}

.kd-feedback-panel .kd-btn {
  animation: btnUp 0.5s var(--ease-out-expo) 0.25s backwards;
  min-width: 100px;
}

@keyframes btnUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* ===== COMBO / STREAK POPUP ===== */
.kd-combo-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 300;
  pointer-events: none;
  text-align: center;
}

.kd-combo-popup.visible {
  /* Fix: haakje stond verkeerd (var(--ease-out-expo forwards)), waardoor de
     hele animation-regel ongeldig was en de popup nooit zichtbaar werd. */
  animation: comboBurst 1.2s var(--ease-out-expo) forwards;
}

@keyframes comboBurst {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(-10deg);
    opacity: 0;
  }
  20% {
    transform: translate(-50%, -50%) scale(1.2) rotate(5deg);
    opacity: 1;
  }
  40% {
    transform: translate(-50%, -50%) scale(0.95) rotate(-2deg);
  }
  60% {
    transform: translate(-50%, -50%) scale(1.05);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5) translateY(-50px);
    opacity: 0;
  }
}

.kd-combo-text {
  font-size: 3.5rem;
  font-weight: 600;
  background: linear-gradient(135deg, var(--kd-warning), #FF6B35, var(--kd-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 4px 20px rgba(255, 190, 11, 0.5));
}

.kd-combo-sub {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--kd-text);
  margin-top: 8px;
}

/* ===== PARTICLE EFFECTS ===== */
.kd-particles-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 250;
  overflow: hidden;
}

.kd-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.kd-particle.star {
  width: 20px;
  height: 20px;
  background: var(--kd-warning);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: particleStar 1s var(--ease-out-expo) forwards;
}

@keyframes particleStar {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: scale(1.5) rotate(180deg) translateY(-100px);
    opacity: 0;
  }
}

.kd-particle.circle {
  animation: particleCircle 0.8s var(--ease-out-expo) forwards;
}

@keyframes particleCircle {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

.kd-particle.spark {
  width: 6px;
  height: 6px;
  animation: particleSpark 0.6s var(--ease-out-expo) forwards;
}

@keyframes particleSpark {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx), var(--ty)) scale(0);
    opacity: 0;
  }
}

/* ===== CONFETTI ===== */
.kd-confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.kd-confetti {
  position: absolute;
  top: -20px;
  animation: confettiFall linear forwards;
}

@keyframes confettiFall {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    transform: translateY(110vh) rotate(var(--rotation, 720deg)) scale(0.5);
    opacity: 0;
  }
}

/* Different confetti shapes */
.kd-confetti.rect {
  width: 12px;
  height: 8px;
  border-radius: 2px;
}

.kd-confetti.circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.kd-confetti.triangle {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 12px solid var(--color);
  background: transparent !important;
}

.kd-confetti.star {
  width: 14px;
  height: 14px;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* ===== SCREEN EFFECTS ===== */
.kd-leer-engine.flash-correct::after,
.kd-leer-engine.flash-incorrect::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 150;
  animation: screenFlash 0.5s ease-out forwards;
}

.kd-leer-engine.flash-correct::after {
  background: radial-gradient(circle at center, var(--kd-success-glow), transparent 70%);
}

.kd-leer-engine.flash-incorrect::after {
  background: radial-gradient(circle at center, var(--kd-error-glow), transparent 70%);
}

@keyframes screenFlash {
  0% { opacity: 0; }
  25% { opacity: 0.6; }
  100% { opacity: 0; }
}

/* Streak fire background */
.kd-leer-engine.streak-fire::before {
  background: 
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(255, 190, 11, 0.15), transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(168, 85, 247, 0.06), transparent);
  animation: fireGlow 0.8s ease-out;
}

@keyframes fireGlow {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 1; }
}

/* ===== FLOATING +POINTS ===== */
.kd-points-float {
  position: fixed;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--kd-success);
  pointer-events: none;
  z-index: 300;
  animation: pointsFloat 2.5s var(--ease-out-expo) forwards;
  text-shadow: 0 2px 10px rgba(0, 214, 143, 0.5);
}

@keyframes pointsFloat {
  0% {
    opacity: 1;
    transform: translateY(0) scale(0.5);
  }
  15% {
    opacity: 1;
    transform: translateY(-10px) scale(1.2);
  }
  50% {
    opacity: 1;
    transform: translateY(-40px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-90px) scale(0.8);
  }
}

.kd-points-float.bonus {
  font-size: 2.2rem;
  color: var(--kd-warning);
  text-shadow: 0 2px 15px rgba(255, 190, 11, 0.6);
}
/* ===== END SCREENS ===== */
.kd-end-screen {
  text-align: center;
  padding: 20px 20px 40px;
  animation: endEnter 0.8s var(--ease-out-expo);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

@keyframes endEnter {
  from {
    opacity: 0;
    transform: scale(0.9);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

.kd-end-icon {
  margin-bottom: 16px;
  animation: trophyDrop 1s var(--ease-out-back) 0.2s backwards;
  flex-shrink: 0;
}

@keyframes trophyDrop {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-30deg) translateY(-100px);
  }
  60% {
    transform: scale(1.15) rotate(5deg) translateY(0);
  }
  80% {
    transform: scale(0.95) rotate(-2deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

.kd-end-icon svg {
  width: 90px;
  height: 90px;
  filter: drop-shadow(0 10px 30px rgba(0, 214, 143, 0.4));
}

.kd-game-over .kd-end-icon svg {
  filter: drop-shadow(0 15px 40px rgba(255, 71, 87, 0.4));
}

.kd-end-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--kd-text);
  margin: 0 0 6px;
  animation: textFloat 0.7s var(--ease-out-expo) 0.4s backwards;
}

.kd-end-subtitle {
  font-size: 1.05rem;
  color: var(--kd-text-secondary);
  margin: 0 0 20px;
  animation: textFloat 0.7s var(--ease-out-expo) 0.5s backwards;
}

/* Score Cards */
.kd-score-display {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.kd-score-card {
  background: var(--kd-card);
  border: 3px solid var(--kd-border);
  border-radius: var(--radius-lg);
  padding: 14px 24px;
  animation: scoreCardPop 0.6s var(--ease-out-back) backwards;
  transition: all 0.3s var(--ease-out-expo);
}

.kd-score-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--kd-primary);
}

.kd-score-card:nth-child(1) { animation-delay: 0.6s; }
.kd-score-card:nth-child(2) { animation-delay: 0.75s; }
.kd-score-card:nth-child(3) { animation-delay: 0.9s; }

@keyframes scoreCardPop {
  from {
    opacity: 0;
    transform: scale(0.5) translateY(30px);
  }
}

.kd-score-value {
  font-size: 2rem;
  font-weight: 600;
  color: var(--kd-primary);
  line-height: 1;
}

.kd-score-card:nth-child(2) .kd-score-value {
  color: var(--kd-success);
}

.kd-score-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--kd-text-secondary);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Star rating */
.kd-stars-display {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}

.kd-star {
  width: 40px;
  height: 40px;
  animation: starEarn 0.6s var(--ease-out-back) backwards;
}

.kd-star:nth-child(1) { animation-delay: 0.8s; }
.kd-star:nth-child(2) { animation-delay: 1s; }
.kd-star:nth-child(3) { animation-delay: 1.2s; }

@keyframes starEarn {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-180deg);
  }
  60% {
    transform: scale(1.3) rotate(10deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

.kd-star.empty {
  opacity: 0.3;
  filter: grayscale(1);
  animation-name: starEmpty;
}

/* Lege ster eindigt op zijn eigen 0.3; met starEarn flitste hij eerst vol op */
@keyframes starEmpty {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-180deg);
  }
  60% {
    transform: scale(1.15) rotate(10deg);
  }
  100% {
    opacity: 0.3;
    transform: scale(1) rotate(0);
  }
}

.kd-star svg {
  width: 100%;
  height: 100%;
  fill: var(--kd-warning);
  filter: drop-shadow(0 4px 10px rgba(255, 190, 11, 0.4));
}

.kd-end-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  animation: textFloat 0.7s var(--ease-out-expo) 1.1s backwards;
}

/* ===== EINDSCHERM-ANIMATIE PER AANTAL STERREN =====
   Alleen op het gewone eindscherm (.kd-end-anim, gezet in showComplete), niet
   op game-over. De starttijden van de sterren en van het slot komen uit de JS
   (--kd-ster-start, --kd-ster-piek, --kd-eind-slot), zodat ze gelijk lopen met
   de belletjes van de fanfare. */
.kd-end-anim .kd-end-icon {
  position: relative;
  display: inline-block;
  line-height: 0;
  margin-top: 30px;
  animation: kdEindSchijf 0.6s var(--ease-out-back) backwards;
}

.kd-end-anim .kd-end-icon svg {
  position: relative;
}

.kd-end-anim .kd-end-icon svg path {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: kdEindTeken 0.5s ease-out 0.3s forwards;
}

.kd-end-ring {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  border: 4px solid var(--kd-success);
  opacity: 0;
  pointer-events: none;
}

.kd-end-anim .kd-end-ring-1 {
  animation: kdEindRing 1s ease-out 0.45s;
}

/* Het feest rond het vinkje (tweede ring, huppel, stralenkrans) is bij elke
   score gelijk, ook bij 0 sterren (Robert, 20 sep 2026). */
.kd-end-anim .kd-end-ring-2 {
  animation: kdEindRing 1.1s ease-out 0.7s;
}

.kd-end-stralen {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 200px;
  margin: -100px 0 0 -100px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 190, 11, 0.3) 0deg 12deg, transparent 12deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 42px, #000 48px, transparent 99px);
  mask: radial-gradient(circle, transparent 42px, #000 48px, transparent 99px);
}

.kd-end-anim .kd-end-stralen {
  animation: kdEindStralenIn 1.2s ease-out var(--kd-eind-slot, 2.4s) forwards,
             kdEindDraai 14s linear var(--kd-eind-slot, 2.4s) infinite;
}

/* Huppel van het vinkje: eigen laag, anders botst hij met kdEindSchijf */
.kd-end-anim .kd-end-icon svg {
  animation: kdEindHuppel 0.8s ease-in-out var(--kd-eind-slot, 2.4s);
}

.kd-end-anim .kd-end-title {
  margin-bottom: 16px;
  animation: textFloat 0.8s var(--ease-out-expo) 0.5s backwards;
}

.kd-end-anim .kd-star,
.kd-end-anim .kd-star.empty {
  position: relative;
  opacity: 1;
  filter: none;
  animation: none;
}

/* Golfje: alleen de verdiende sterren, ook bij 1 en 2 (Robert, 20 sep 2026) */
.kd-end-anim.kd-end-n1 .kd-star:not(.empty),
.kd-end-anim.kd-end-n2 .kd-star:not(.empty),
.kd-end-anim.kd-end-n3 .kd-star:not(.empty) {
  animation: kdEindGolf 0.6s ease-in-out calc(var(--kd-eind-slot, 2.4s) + var(--kd-ster-i, 0) * 0.09s);
}

.kd-end-anim .kd-star svg {
  position: absolute;
  inset: 0;
}

.kd-end-anim .kd-star .kd-star-grijs {
  fill: #d9dce3;
  filter: none;
  animation: kdEindGrijs 0.6s ease-out calc(0.55s + var(--kd-ster-i, 0) * 0.07s) backwards;
}

.kd-end-anim .kd-star .kd-star-goud {
  opacity: 0;
  animation: kdEindSterPlop 0.6s var(--ease-out-back) var(--kd-ster-start, 1.2s) forwards;
}

.kd-star-vonk {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px;
  border-radius: 50%;
  background: var(--kd-warning);
  opacity: 0;
  pointer-events: none;
  animation: kdEindVonk 0.7s ease-out var(--kd-ster-piek, 1.55s) forwards;
}

.kd-star-vonk:nth-of-type(odd) {
  background: #ff8a3d;
  width: 5px;
  height: 5px;
  margin: -2.5px;
}

@media (max-width: 600px) {
  /* Het vinkje is hier 70 px; de stralenkrans schaalt mee */
  .kd-end-stralen {
    width: 156px;
    height: 156px;
    margin: -78px 0 0 -78px;
    -webkit-mask: radial-gradient(circle, transparent 33px, #000 38px, transparent 77px);
    mask: radial-gradient(circle, transparent 33px, #000 38px, transparent 77px);
  }

  .kd-end-anim .kd-end-icon {
    margin-top: 22px;
  }
}

@keyframes kdEindSchijf {
  from { opacity: 0; transform: scale(0); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes kdEindTeken {
  to { stroke-dashoffset: 0; }
}

@keyframes kdEindRing {
  0% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.1); }
}

@keyframes kdEindHuppel {
  0%, 100% { transform: none; }
  35% { transform: translateY(-14px) scale(1.06); }
  65% { transform: translateY(0) scale(0.97); }
}

@keyframes kdEindStralenIn {
  to { opacity: 1; }
}

@keyframes kdEindDraai {
  to { transform: rotate(360deg); }
}

@keyframes kdEindGrijs {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: none; }
}

@keyframes kdEindSterPlop {
  0% { opacity: 0; transform: scale(0) rotate(-180deg); }
  60% { opacity: 1; transform: scale(1.35) rotate(10deg); }
  100% { opacity: 1; transform: none; }
}

@keyframes kdEindGolf {
  0%, 100% { transform: none; }
  45% { transform: translateY(-12px) rotate(-6deg); }
}

@keyframes kdEindVonk {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}

/* Pictogram voor de knoptekst op het eindscherm */
.kd-end-actions .kd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.kd-btn-ico {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Eindscherm: brede hoofdknop, daaronder de kleine knoppen naast elkaar.
   Drie klassen diep, zodat de telefoonregel voor .kd-end-actions .kd-btn
   verderop dit niet overschrijft. */
.kd-end-actions.kd-end-actions--rij {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.kd-end-actions.kd-end-actions--rij .kd-btn {
  flex: 0 1 auto;
  padding: 15px 24px;
}

.kd-end-actions.kd-end-actions--rij .kd-btn-breed {
  flex: 1 1 100%;
  padding: 17px 24px;
  font-size: 1.2rem;
}

@media (max-width: 600px) {
  /* Telefoon: de kleine knoppen delen de rij eerlijk, ieder de helft */
  .kd-end-actions.kd-end-actions--rij .kd-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 13px 10px;
    font-size: 1rem;
  }

  .kd-end-actions.kd-end-actions--rij .kd-btn-breed {
    flex: 1 1 100%;
    padding: 15px 16px;
    font-size: 1.1rem;
  }
}

@media (max-width: 360px) {
  /* Smalste telefoons: anders past "Overzicht" net niet naast "Opnieuw" */
  .kd-end-actions.kd-end-actions--rij .kd-btn {
    gap: 6px;
    padding: 13px 6px;
    font-size: 0.95rem;
  }

  .kd-end-actions.kd-end-actions--rij .kd-btn:not(.kd-btn-breed) .kd-btn-ico {
    width: 19px;
    height: 19px;
  }

  .kd-end-actions.kd-end-actions--rij .kd-btn-breed {
    gap: 10px;
    padding: 15px 12px;
    font-size: 1.05rem;
  }
}

/* ===== ERROR STATE ===== */
.kd-error-state {
  text-align: center;
  padding: 80px 24px;
  animation: errorShake 0.7s var(--ease-out-expo);
}

@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-20px); }
  30% { transform: translateX(20px); }
  45% { transform: translateX(-15px); }
  60% { transform: translateX(15px); }
  75% { transform: translateX(-10px); }
}

.kd-error-state h2 {
  font-size: 2rem;
  color: var(--kd-error);
  margin: 0 0 16px;
}

.kd-error-state p {
  color: var(--kd-text-secondary);
  font-size: 1.1rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
  .kd-engine-header {
    padding: 6px 12px;
    gap: 3px 10px;
  }
  
  .kd-close-btn {
    width: 28px;
    height: 28px;
  }
  
  .kd-heart {
    width: 20px;
    height: 20px;
  }
  
  .kd-progress-container {
    height: 12px;
  }
  
  .kd-progress-text {
    font-size: 0.7rem;
  }
  
  .kd-engine-content {
    padding: 20px 16px 12px;
  }
  
  .kd-question-text {
    font-size: 1.3rem;
  }
  
  .kd-option-btn {
    padding: 16px 20px;
    font-size: 1rem;
  }
  
  .kd-connect-columns {
    grid-template-columns: 1fr 30px 1fr;
    gap: 8px;
  }
  
  .kd-connect-item {
    padding: 14px 16px;
    font-size: 0.9rem;
  }
  
  .kd-drag-item {
    padding: 14px 20px;
    font-size: 0.95rem;
  }
  
  .kd-feedback-panel {
    padding: 28px 20px 36px;
  }
  
  .kd-feedback-title {
    font-size: 1.4rem;
  }
  
  .kd-feedback-icon {
    width: 25px;
    height: 25px;
  }
  
  .kd-btn {
    padding: 16px 36px;
    font-size: 1rem;
  }
  
  .kd-check-btn-wrapper {
    bottom: 16px;
    gap: 8px;
  }
  
  .kd-check-btn {
    min-width: 180px;
    padding: 14px 32px;
  }
  
  .kd-leestekst-terugkijk-btn {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
  
  .kd-end-title {
    font-size: 1.5rem;
  }
  
  .kd-end-subtitle {
    margin-bottom: 12px;
    font-size: 0.95rem;
  }
  
  .kd-end-icon svg {
    width: 70px;
    height: 70px;
  }
  
  .kd-end-icon {
    margin-bottom: 10px;
  }
  
  .kd-stars-display {
    gap: 8px;
    margin-bottom: 12px;
  }
  
  .kd-star {
    width: 32px;
    height: 32px;
  }
  
  .kd-score-display {
    gap: 10px;
  }
  
  .kd-score-card {
    padding: 10px 16px;
  }
  
  .kd-score-value {
    font-size: 1.5rem;
  }
  
  .kd-score-label {
    font-size: 0.75rem;
  }
  
  .kd-xp-result {
    margin-top: 10px;
    padding: 10px 16px;
  }
  
  .kd-xp-earned {
    font-size: 1.3em;
  }
  
  .kd-end-actions {
    gap: 8px;
  }
  
  .kd-end-actions .kd-btn {
    padding: 12px 24px;
    font-size: 0.9rem;
  }
  
  .kd-combo-text {
    font-size: 2.8rem;
  }
  
  .kd-streak-badge {
    top: 70px;
    right: 12px;
    padding: 8px 14px;
    font-size: 0.9rem;
  }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.2s !important;
  }
  
  .kd-confetti-container,
  .kd-particles-container,
  .kd-combo-popup {
    display: none !important;
  }
}

/* ===== v3.0: XP & LEVEL SYSTEM ===== */

.kd-xp-result {
  margin-top: 16px;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(75, 173, 255, 0.1), rgba(168, 85, 247, 0.1));
  border-radius: var(--radius-lg);
  text-align: center;
  animation: slideUp 0.6s var(--ease-out-expo) 0.3s backwards;
  width: 100%;
  max-width: 400px;
}

.kd-xp-earned {
  font-size: 1.6em;
  font-weight: 600;
  background: linear-gradient(135deg, #4BADFF, #A855F7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: xpPop 0.6s var(--bounce) 0.5s backwards;
}

@keyframes xpPop {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.kd-new-record {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 16px;
  background: linear-gradient(135deg, #FFBE0B, #FF6B35);
  color: white;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.9em;
  animation: recordBounce 0.5s var(--bounce) 0.7s backwards;
}

@keyframes recordBounce {
  from { transform: scale(0) rotate(-10deg); }
  to { transform: scale(1) rotate(0); }
}

.kd-level-bar {
  margin-top: 16px;
}

.kd-level-label {
  font-weight: 600;
  font-size: 0.95em;
  color: var(--kd-text);
  margin-bottom: 6px;
}

.kd-level-progress {
  height: 12px;
  background: var(--kd-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.kd-level-fill {
  height: 100%;
  background: linear-gradient(90deg, #4BADFF, #A855F7);
  border-radius: var(--radius-full);
  transition: width 1.5s var(--ease-out-expo) 0.8s;
}

.kd-level-xp {
  font-size: 0.8em;
  color: var(--kd-text-secondary);
  margin-top: 4px;
}

/* ===== v3.0: OUDER DASHBOARD ===== */

.kd-leer-dashboard {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  font-family: "Baloo 2", "Inter", -apple-system, sans-serif;
}

.kd-dash-header {
  text-align: center;
  margin-bottom: 32px;
}

.kd-dash-level {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #4BADFF, #A855F7);
  color: white;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 1.2em;
  margin-bottom: 16px;
}

.kd-dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.kd-dash-stat {
  background: var(--kd-card);
  border: 2px solid var(--kd-border);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
}

.kd-dash-stat-value {
  font-size: 2em;
  font-weight: 600;
  color: var(--kd-primary);
  line-height: 1;
}

.kd-dash-stat-label {
  font-size: 0.85em;
  color: var(--kd-text-secondary);
  margin-top: 4px;
}

.kd-dash-section {
  margin-bottom: 32px;
}

.kd-dash-section h3 {
  font-size: 1.1em;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--kd-border);
}

/* XP Grafiek */
.kd-dash-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 120px;
  padding: 10px 0;
}

.kd-dash-bar {
  flex: 1;
  background: linear-gradient(180deg, #4BADFF, #A855F7);
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  position: relative;
  transition: height 0.5s var(--ease-out-expo);
}

.kd-dash-bar-label {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65em;
  color: var(--kd-text-secondary);
  white-space: nowrap;
}

/* Zwakke vragen lijst */
.kd-dash-weak-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kd-dash-weak-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--kd-card);
  border: 2px solid var(--kd-border);
  border-radius: var(--radius-sm);
}

.kd-dash-weak-question {
  font-weight: 600;
  flex: 1;
  margin-right: 12px;
}

.kd-dash-weak-ratio {
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.85em;
  font-weight: 600;
}

.kd-dash-weak-ratio.bad {
  background: var(--kd-error-light);
  color: var(--kd-error);
}

.kd-dash-weak-ratio.ok {
  background: #FFF3CD;
  color: #856404;
}

/* Recente activiteit */
.kd-dash-activity {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kd-dash-activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--kd-card);
  border: 2px solid var(--kd-border);
  border-radius: var(--radius-sm);
}

.kd-dash-activity-stars {
  color: #FFBE0B;
  white-space: nowrap;
}

.kd-dash-activity-title {
  font-weight: 600;
  flex: 1;
}

.kd-dash-activity-xp {
  font-weight: 600;
  color: var(--kd-primary);
}

.kd-dash-activity-time {
  font-size: 0.8em;
  color: var(--kd-text-secondary);
}

.kd-dash-empty {
  text-align: center;
  padding: 40px;
  color: var(--kd-text-secondary);
}

/* Loading spinner voor dashboard */
.kd-dash-loading {
  text-align: center;
  padding: 60px;
}

/* ===== OVERLAY SYSTEEM ===== */

.kd-leer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
  background: var(--kd-bg, #FFFFFF);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.kd-leer-overlay.active {
  transform: translateY(0);
}

.kd-leer-overlay .kd-leer-engine {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Zorg dat de overlay boven alles staat inclusief WordPress admin bar */
body.admin-bar .kd-leer-overlay {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .kd-leer-overlay {
    top: 46px;
  }
}

/* ===== v3.0: AFBEELDINGEN IN VRAGEN ===== */

/* Vraag afbeelding onder de tekst */
.kd-question-image {
  margin: 16px 0;
  text-align: center;
}

.kd-question-image img {
  max-width: 100%;
  max-height: 320px;
  border-radius: var(--radius-md);
  object-fit: contain;
  box-shadow: var(--shadow-sm);
}

@media (max-width: 768px) {
  .kd-question-image img {
    max-height: 220px;
  }
}

/* Afbeeldingen in opties (MC, drag-drop, sorteer) */
.kd-content-img {
  max-width: 120px;
  max-height: 80px;
  border-radius: 8px;
  object-fit: contain;
  vertical-align: middle;
}

/* MC grid met afbeeldingen: 2x2 layout */
.kd-options-grid.kd-options-images {
  grid-template-columns: 1fr 1fr;
}

.kd-options-grid.kd-options-images .kd-option-btn {
  padding: 12px;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.kd-options-grid.kd-options-images .kd-content-img {
  max-width: 100%;
  max-height: 240px;
  object-fit: contain;
}

/* Connect items met afbeeldingen */
.kd-connect-item:has(.kd-content-img) {
  padding: 8px 12px;
}

.kd-connect-item .kd-content-img {
  max-width: 100%;
  max-height: 80px;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  padding: 2px;
}

/* Memory kaarten met afbeeldingen */
.kd-memory-card-back .kd-content-img {
  max-width: 100%;
  max-height: 160px;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

/* Drag items met afbeeldingen */
.kd-drag-item .kd-content-img {
  max-width: 100%;
  max-height: 120px;
  vertical-align: middle;
  object-fit: contain;
}

/* Sorteer items met afbeeldingen */
.kd-sorteer-item .kd-content-img {
  max-width: 100%;
  max-height: 120px;
  vertical-align: middle;
  object-fit: contain;
}

/* Admin: media field styling */
.kd-media-field {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.kd-media-field .regular-text {
  flex: 1;
}

.kd-media-preview {
  flex-shrink: 0;
}

.kd-media-preview img {
  max-width: 60px;
  max-height: 40px;
  border-radius: 4px;
  object-fit: contain;
  border: 1px solid #ddd;
}

.kd-media-upload-btn,
.kd-media-remove-btn {
  flex-shrink: 0;
  padding: 4px 8px !important;
  min-width: auto !important;
}

.kd-media-remove-btn {
  color: #FF4757 !important;
}

.kd-feedback-image {
  margin: 12px 0;
  text-align: center;
}

.kd-feedback-image img {
  max-width: 200px;
  max-height: 150px;
  border-radius: 8px;
  object-fit: contain;
}

/* ===== PUNT 8: TEKST BIJ DE VRAAG ===== */
.kd-question-extra-text {
  margin: 16px 0;
  padding: 16px 24px;
  background: linear-gradient(135deg, var(--kd-primary-light), #F3E8FF);
  border-radius: var(--radius-md);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--kd-text);
  text-align: center;
  line-height: 1.5;
  animation: textFloat 0.5s var(--ease-out-expo) 0.2s backwards;
}

/* ===== PUNT 12: TIMER ===== */
.kd-question-timer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  animation: textFloat 0.4s var(--ease-out-expo);
}

.kd-timer-bar {
  flex: 1;
  height: 8px;
  background: var(--kd-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.kd-timer-fill {
  height: 100%;
  background: var(--kd-primary);
  border-radius: var(--radius-full);
  transition: width 1s linear;
}

.kd-timer-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--kd-text-secondary);
  min-width: 32px;
  text-align: right;
}

.kd-timer-warning .kd-timer-fill {
  background: var(--kd-error);
}

.kd-timer-warning .kd-timer-text {
  color: var(--kd-error);
  animation: timerPulse 0.5s ease-in-out infinite alternate;
}

@keyframes timerPulse {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0.6; transform: scale(1.1); }
}

/* ===== PUNT 14: ONBEPERKT LEVENS ===== */
.kd-lives-unlimited {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--kd-success);
  line-height: 1;
}

/* ===== PUNT 2: GOED/FOUT BUTTONS ===== */
.kd-goedfout-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 32px;
}

.kd-goedfout-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 40px;
  font-size: 1.15rem;
  min-width: 160px;
  justify-content: center;
}

.kd-goedfout-btn svg {
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .kd-goedfout-buttons {
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
    padding: 0 20px;
  }
  
  .kd-goedfout-btn {
    min-width: auto;
    padding: 16px 32px;
  }
}

/* ===== PUNT 5: ZINNEN SAMENSTELLEN ===== */
.kd-zin-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.kd-zin-zone {
  min-height: 70px;
  width: 100%;
  padding: 16px;
  background: var(--kd-primary-light);
  border: 3px dashed var(--kd-primary);
  border-radius: var(--radius-lg);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  transition: all 0.3s var(--ease-out-expo);
}

.kd-zin-zone.has-items {
  border-style: solid;
  background: rgba(75, 173, 255, 0.05);
  justify-content: flex-start;
}

.kd-zin-zone.correct {
  border-color: var(--kd-success);
  background: var(--kd-success-light);
}

.kd-zin-zone.incorrect {
  border-color: var(--kd-error);
  background: var(--kd-error-light);
}

.kd-zin-placeholder {
  color: var(--kd-text-secondary);
  font-size: 0.95rem;
  font-weight: 600;
}

.kd-zin-words {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.kd-zin-word {
  padding: 12px 20px;
  background: var(--kd-card);
  border: 3px solid var(--kd-border);
  border-radius: var(--radius-md);
  font-size: 1.05rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--kd-text);
  cursor: pointer;
  transition: all 0.25s var(--ease-out-expo);
  user-select: none;
  -webkit-user-select: none;
}

.kd-zin-word:hover:not(:disabled) {
  border-color: var(--kd-primary);
  transform: scale(1.05);
  box-shadow: var(--shadow-sm);
}

.kd-zin-word.in-zone {
  background: var(--kd-primary-light);
  border-color: var(--kd-primary);
  color: var(--kd-primary-dark);
}

/* ===== PUNT 6: WOORDEN SELECTEREN ===== */
.kd-woord-select-container {
  text-align: center;
}

.kd-woord-select-zin {
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 2.4;
  color: var(--kd-text);
  margin-bottom: 28px;
  text-align: center;
  padding: 20px;
  background: rgba(75, 173, 255, 0.04);
  border-radius: var(--radius-lg);
}

.kd-woord-select-item {
  display: inline;
  padding: 4px 6px;
  margin: 2px 0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s var(--ease-out-expo);
  border-bottom: 3px solid transparent;
  user-select: none;
  -webkit-user-select: none;
}

.kd-woord-select-item:hover:not(.correct):not(.incorrect) {
  background: var(--kd-primary-light);
  border-bottom-color: var(--kd-primary);
}

.kd-woord-select-item.selected {
  background: var(--kd-primary-light);
  border-bottom-color: var(--kd-primary);
  color: var(--kd-primary-dark);
  font-weight: 600;
}

.kd-woord-select-item.correct {
  background: var(--kd-success-light);
  border-bottom-color: var(--kd-success);
  color: var(--kd-success-dark);
}

.kd-woord-select-item.incorrect {
  background: var(--kd-error-light);
  border-bottom-color: var(--kd-error);
  color: var(--kd-error-dark);
}

@media (max-width: 600px) {
  .kd-woord-select-zin {
    font-size: 1.15rem;
    line-height: 2.2;
    padding: 16px;
  }
  
  .kd-zin-word {
    padding: 10px 16px;
    font-size: 0.95rem;
  }
}
/* ===== FEEDBACK BUTTON ROW ===== */
.kd-feedback-btn-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: relative;
}

.kd-report-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--kd-text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: all 0.2s ease;
  position: absolute;
  right: 0;
}

.kd-report-btn:hover {
  color: var(--kd-text);
  background: rgba(0,0,0,0.05);
}

.kd-report-btn svg {
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .kd-feedback-btn-row {
    flex-direction: column;
    gap: 12px;
  }
  
  .kd-report-btn {
    position: static;
    order: 2;
  }
}

/* ===== RAPPORTEER POPUP ===== */
.kd-report-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
}

.kd-report-popup {
  background: var(--kd-card);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  max-width: 400px;
  width: 100%;
  position: relative;
  box-shadow: var(--shadow-lg);
  animation: popupSlide 0.3s var(--ease-out-expo);
}

@keyframes popupSlide {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
}

.kd-report-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--kd-border);
  color: var(--kd-text-secondary);
  font-size: 1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.2s ease;
}

.kd-report-close:hover {
  background: var(--kd-error-light);
  color: var(--kd-error);
}

.kd-report-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--kd-text);
  margin: 0 0 20px;
}

.kd-report-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kd-report-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 2px solid var(--kd-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--kd-text);
  transition: all 0.2s ease;
  user-select: none;
}

.kd-report-option:hover {
  border-color: var(--kd-primary);
  background: var(--kd-primary-light);
}

.kd-report-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--kd-primary);
  flex-shrink: 0;
}

.kd-report-option input[type="checkbox"]:checked + span {
  color: var(--kd-primary-dark);
}

/* ===== VUL-IN MEERKEUZE MODUS ===== */
.kd-vulin-blank-mc {
  cursor: pointer;
  min-width: 60px;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
}

.kd-vulin-blank-mc.filled {
  background: var(--kd-primary-light);
  border-bottom-color: var(--kd-primary);
  color: var(--kd-primary-dark);
  font-weight: 600;
}

.kd-vulin-blank-mc:hover:not(.correct):not(.incorrect) {
  background: rgba(75, 173, 255, 0.15);
  transform: translateY(-1px);
}

.kd-vulin-mc-blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 24px 0 8px;
}

.kd-vulin-mc-block {
  padding: 10px 18px;
  background: var(--kd-card);
  border: 3px solid var(--kd-border);
  border-radius: var(--radius-md);
  font-size: 1.05rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--kd-text);
  cursor: pointer;
  transition: all 0.25s var(--ease-out-expo);
  user-select: none;
  -webkit-user-select: none;
}

.kd-vulin-mc-block:hover:not(.used) {
  border-color: var(--kd-primary);
  transform: scale(1.05);
  box-shadow: var(--shadow-sm);
}

.kd-vulin-mc-block.used {
  opacity: 0.3;
  transform: scale(0.95);
  pointer-events: none;
  border-style: dashed;
}

.kd-vulin-mc-separator {
  width: 100%;
  height: 1px;
  background: var(--kd-border);
  margin: 4px 0;
}

.kd-vulin-mc-group-label {
  width: 100%;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--kd-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ===== INTRO SCHERM ===== */
.kd-intro-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  padding: 32px 20px;
  animation: endEnter 0.8s var(--ease-out-expo);
}

.kd-intro-title {
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  font-weight: 600;
  color: var(--kd-text);
  margin: 0 0 20px;
}

.kd-intro-image {
  margin: 0 0 24px;
}

.kd-intro-image img {
  max-width: 280px;
  max-height: 200px;
  border-radius: var(--radius-lg);
  object-fit: contain;
  box-shadow: var(--shadow-md);
}

.kd-intro-text {
  max-width: 500px;
  margin: 0 0 24px;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--kd-text-secondary);
}

.kd-intro-text p {
  margin: 0 0 8px;
}

.kd-intro-info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: var(--kd-primary-light);
  color: var(--kd-primary-dark);
  border-radius: var(--radius-full);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 28px;
}

.kd-intro-start-btn {
  padding: 18px 60px;
  font-size: 1.2rem;
}

/* v8 (15 okt 2026): de daglimiet telt starten. Voor het starten zegt het
   startscherm dat dit de gratis les van vandaag wordt. De voortgangsbalk en
   het aantal vragen staan er niet (rustiger scherm, Robert). */
.kd-op-intro .kd-progress-container,
.kd-op-intro .kd-progress-text,
.kd-op-intro .kd-lives,
.kd-op-intro .kdv-knoppen {
  visibility: hidden; /* hartjes en de knoppen rechtsboven net als de voortgangsbalk pas na het starten (Robert) */
}

.kd-intro-gratis {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  box-sizing: border-box;
  width: min(100%, 420px);
  margin: 0 0 24px;
  padding: 18px 20px;
  background: var(--kd-primary-light);
  border-radius: 20px;
  text-align: left;
}

.kd-intro-gratis-icoon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
}

.kd-intro-gratis-icoon svg {
  width: 22px;
  height: 22px;
  fill: var(--kd-primary-dark);
}

.kd-intro-gratis-kop {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: #1C6AAE; /* donkerder dan --kd-primary-dark: minstens 4,5:1 op lichtblauw */
}

.kd-intro-gratis-uitleg {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #4B5563; /* donkerder dan --kd-text-secondary: contrast op lichtblauw */
}

/* Introtekst tot de melding: 24 px, net als de melding tot de knoppen. */
.kd-intro-met-gratis .kd-intro-text {
  margin-bottom: 16px;
}

/* Met de melding erboven even breed als de melding, zodat de randen gelijk lopen. */
.kd-intro-met-gratis .kd-intro-geluid,
.kd-intro-met-gratis .kd-intro-start-btn {
  width: min(100%, 420px);
}

@media (max-width: 360px) {
  .kd-intro-gratis {
    gap: 12px;
    padding: 16px;
  }
}

@media (max-width: 600px) {
  .kd-intro-screen {
    padding: 24px 16px;
  }
  
  .kd-intro-image img {
    max-width: 200px;
    max-height: 150px;
  }
  
  .kd-intro-text {
    font-size: 1rem;
  }
  
  .kd-intro-start-btn {
    padding: 16px 48px;
    font-size: 1.1rem;
  }
}

/* v4.2: Oude upsell CSS verwijderd — nu in kd-funnel.css */

/* ===== LEESTEKST TYPE ===== */
.kd-leestekst-wrapper {
  max-width: 680px;
  margin: 0 auto;
  animation: textFloat 0.7s var(--ease-out-expo) 0.1s backwards;
  padding-bottom: 16px;
}

.kd-leestekst-image {
  width: 100%;
  max-height: 300px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.kd-leestekst-image img {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.kd-leestekst-title {
  font-size: clamp(1.3rem, 3.5vw, 1.6rem);
  font-weight: 700;
  color: var(--kd-primary-dark, #6C3FA5);
  text-align: center;
  margin-bottom: 20px;
  line-height: 1.3;
}

.kd-leestekst-content {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  padding: 28px 32px;
  font-size: clamp(1rem, 2.5vw, 1.15rem);
  line-height: 1.75;
  color: var(--kd-text, #1a1a2e);
  margin-bottom: 28px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* Scroll-hint: klein pijltje vast onderaan, boven de Volgende knop */
.kd-leestekst-scroll-hint {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  animation: scrollHintBounce 1.5s ease-in-out infinite;
  transition: opacity 0.4s ease;
  z-index: 200;
  pointer-events: none;
}

.kd-leestekst-scroll-hint.hidden {
  opacity: 0;
}

.kd-leestekst-scroll-hint svg {
  width: 18px;
  height: 18px;
  color: var(--kd-primary, #4BADFF);
}

@keyframes scrollHintBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(5px); }
}

.kd-leestekst-content p {
  margin: 0 0 14px 0;
}

.kd-leestekst-content p:last-child {
  margin-bottom: 0;
}

.kd-leestekst-content strong,
.kd-leestekst-content b,
.kd-intro-text strong,
.kd-intro-text b {
  font-weight: 700;
  color: var(--kd-primary-dark, #6C3FA5);
}

.kd-leestekst-content em,
.kd-leestekst-content i,
.kd-intro-text em,
.kd-intro-text i {
  font-style: italic;
}

/* list-style expliciet zetten - sommige WordPress-thema's resetten dit
   naar 'none', waardoor de bolletjes/nummers onzichtbaar werden. */
.kd-leestekst-content ul,
.kd-intro-text ul {
  margin: 12px 0;
  padding-left: 24px;
  list-style: disc outside;
}
.kd-leestekst-content ol,
.kd-intro-text ol {
  margin: 12px 0;
  padding-left: 24px;
  list-style: decimal outside;
}

.kd-leestekst-content li,
.kd-intro-text li {
  margin-bottom: 6px;
  display: list-item;
}

.kd-leestekst-content h3,
.kd-intro-text h3 {
  font-size: 1.2em;
  font-weight: 700;
  color: var(--kd-text, #1a1a2e);
  margin: 20px 0 10px 0;
}

.kd-leestekst-content h4,
.kd-intro-text h4 {
  font-size: 1.05em;
  font-weight: 600;
  color: var(--kd-text-secondary, #555);
  margin: 16px 0 8px 0;
}

.kd-leestekst-content blockquote,
.kd-intro-text blockquote {
  border-left: 4px solid var(--kd-primary, #8B5CF6);
  margin: 16px 0;
  padding: 12px 20px;
  background: rgba(139, 92, 246, 0.05);
  border-radius: 0 12px 12px 0;
  font-style: italic;
  color: var(--kd-text-secondary, #555);
}

/* Tabellen in leestekst — WordPress-thema-defaults wegslaan zodat
   de inline styles die de admin invoert, dominant blijven.
   !important is nodig omdat veel WP-themes specifieke selectors
   met hoge specificiteit gebruiken voor tabellen. Cellen met een
   inline 'border'-style worden via :not() ontzien, zodat een
   admin-bedoelde streep (bv. boven het antwoord bij cijferend
   optellen) wel zichtbaar blijft. */
.kd-leestekst-content table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  margin: 12px 0;
  max-width: 100%;
  width: auto !important;
  background: transparent !important;
  border: 0 !important;
  table-layout: auto;
}

.kd-leestekst-content thead,
.kd-leestekst-content tbody,
.kd-leestekst-content tfoot,
.kd-leestekst-content tr {
  background: transparent !important;
  border: 0 !important;
}

.kd-leestekst-content th,
.kd-leestekst-content td {
  padding: 2px 4px !important;
  background: transparent !important;
  vertical-align: middle !important;
  line-height: 1.3 !important;
}

/* Borders alleen weghalen wanneer de admin er zelf geen heeft gezet. */
.kd-leestekst-content th:not([style*="border"]),
.kd-leestekst-content td:not([style*="border"]) {
  border: 0 !important;
}

.kd-leestekst-content th {
  font-weight: 700;
  text-align: left;
}

@media (max-width: 700px) {
  .kd-leestekst-content {
    padding: 20px 20px;
    font-size: 1rem;
    border-radius: 12px;
  }
  
  .kd-leestekst-image {
    max-height: 200px;
    border-radius: 12px;
  }
  
  .kd-leestekst-image img {
    max-height: 200px;
    object-fit: contain;
  }
  
  .kd-leestekst-title {
    font-size: 1.2rem;
  }
  
  .kd-leestekst-scroll-hint {
    bottom: 80px;
    width: 32px;
    height: 32px;
  }
  
  .kd-leestekst-scroll-hint svg {
    width: 16px;
    height: 16px;
  }
}

/* ========================================
   REKENVARIANTEN — flexibele grid met lijntjes
   ======================================== */
.kd-rv-canvas {
  position: relative;
  width: 100%;
  margin: 12px 0 24px;
  padding: 8px 4px;
  /* Geen overflow:hidden meer nodig: grid is absoluut gepositioneerd zodat het
     canvas's eigen layout-hoogte niet meer beïnvloedt. Per CSS-spec gebruiken
     transforms hun visuele bounding box voor scrollable-overflow, dus ook
     geen verticale scrollbar-coercion. Resultaat: cel-borders worden nooit
     geclipt door subpixel-rendering. */
}
.kd-rv-canvas.is-scrollable {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.kd-rv-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}

.kd-rv-line {
  stroke: #c8d2dc;
  stroke-width: 2;
  stroke-linecap: round;
}

.kd-rv-grid {
  /* Absolute zodat grid uit canvas's layout-flow gehaald is: de canvas-hoogte
     wordt 100% door JS bepaald (geen layout-overflow meer dat clipping nodig
     maakt). top/left matchen de canvas padding zodat content op de juiste
     plek begint. */
  position: absolute;
  top: 8px;
  left: 4px;
  display: flex;
  flex-direction: column;
  gap: 44px;
  z-index: 1;
  width: max-content;
  max-width: none;
  transform-origin: top left;
  transform: translateX(var(--kd-rv-tx, 0px)) scale(var(--kd-rv-scale, 1));
}

.kd-rv-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  justify-content: center;
  align-items: center;
}

.kd-rv-cel {
  min-width: 80px;
  min-height: 54px;
  padding: 10px 16px;
  border: 2px solid #d7dde3;
  border-radius: 14px;
  background: #ffffff;
  font-size: 1.6rem;
  font-weight: 700;
  color: #1f2933;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  white-space: nowrap;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}

.kd-rv-cel.is-blank {
  /* min-width zet de comfortabele lege-staat-breedte; cel mag groeien
     wanneer gevuld met meerdere icoontjes of langere tekst. Typ-blanks
     gebruiken absolute-positioned input dus blijven feitelijk op min-width. */
  min-width: 110px;
  position: relative;
}

.kd-rv-cel.is-blank.is-typ {
  /* Typ-blank: vaste breedte zodat de absolute input een stabiele cel-content-area
     heeft. Voorkomt ook dat een lang getal de cel laat uitzetten tijdens typen. */
  max-width: 140px;
  overflow: hidden;
}

.kd-rv-cel.is-blank.is-typ {
  /* Typ-specific: padding op 0 zodat de absolute input de hele cel-content-area
     kan vullen (inset:0 hieronder). Geen align-items override nodig — abs
     input zit buiten flex-flow. */
  padding: 0;
}

.kd-rv-cel.is-tekst {
  /* default */
}

.kd-rv-cel.is-operator {
  border: none;
  background: transparent;
  min-width: 28px;
  padding: 0 4px;
  color: #5c6773;
  font-size: 1.5rem;
}

.kd-rv-cel.is-spacer {
  visibility: hidden;
}

.kd-rv-cel.is-blank {
  color: #9aa4ad;
  background: #f5f8fb;
  border-style: dashed;
}

.kd-rv-cel.is-blank.filled {
  color: #1f2933;
  background: #eaf3ff;
  border-color: #4a90e2;
  border-style: solid;
}

/* Actief/focus: alleen de buitenste dashed border kleurt blauw — geen
   shadow-ring, geen extra inner-element. Wordt niet toegepast wanneer de
   blank al `filled` is (die wint met solid blauwe rand). */
.kd-rv-cel.is-blank.is-active:not(.filled),
.kd-rv-cel.is-blank:focus-within:not(.filled),
.kd-rv-cel.is-blank:focus-visible:not(.filled) {
  border-color: #4a90e2;
  box-shadow: none;
  outline: none;
}

.kd-rv-cel.is-vraag-inline {
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 1rem;
  font-weight: 600;
  color: #3b4550;
  padding: 6px 14px;
  text-align: center;
  line-height: 1.35;
  /* Override base white-space: lange vraag mag wel wrappen binnen z'n cel. */
  white-space: normal;
}

.kd-rv-cel.is-blank.correct {
  background: #e8faf0;
  border-color: #00d68f;
  color: #0a6b47;
  animation: kd-pop .25s ease-out;
}

.kd-rv-cel.is-blank.incorrect {
  background: #fdecec;
  border-color: #e53935;
  color: #8a1c1a;
}

/* Input is een flex-stretch child van de typ-cel: vult zowel horizontaal als
   verticaal de hele cel. line-height matcht expliciet de cel-content-hoogte
   (cel min-height 54 - 2*2 border = 50px) zodat de glyph in het midden van
   het line-box gerenderd wordt — zonder dat verliest de browser z'n
   natuurlijke vertical-centering wanneer de input een geforceerde hoogte
   heeft, en de tekst zou top-aligned in upper-left landen.
   background-color expliciet (niet alleen shorthand) want sommige browsers
   negeren transparent op text-inputs en houden de UA-default white. */
/* Selector geprefixed met .kd-rv-cel zodat specificity (0,2,0) wint van
   het Blocksy theme dat `input:is([type=text], ...)` (specificity 0,1,1)
   gebruikt om alle inputs op height:40px en eigen padding/border te zetten.
   Zonder deze prefix overschreef het theme onze input-dimensies en padding. */
.kd-rv-cel .kd-rv-input,
.kd-rv-cel .kd-rv-input:focus,
.kd-rv-cel .kd-rv-input:focus-visible,
.kd-rv-cel .kd-rv-input:hover,
.kd-rv-cel .kd-rv-input:active {
  /* position:absolute + inset:0 dwingt de input om de cel-content-area
     (= padding-box, want padding:0) volledig te vullen. line-height matcht
     de content-hoogte (cel min-height 54 - 2*2 border = 50px) zodat de
     glyph verticaal gecentreerd wordt. */
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  box-sizing: border-box;
  border: 0 none;
  background: transparent;
  background-color: transparent;
  background-image: none;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 50px;
  text-align: center;
  color: inherit;
  caret-color: currentColor;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  min-width: 0;
  min-height: 0;
}

.kd-rv-blank-text {
  display: block;
  min-width: 28px;
  text-align: center;
}

/* Breuk weergave */
.kd-rv-cel.is-breuk {
  padding: 10px 18px;
}

.kd-rv-breuk {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  gap: 2px;
}

.kd-rv-teller,
.kd-rv-noemer {
  font-size: 1.6rem;
  font-weight: 700;
  padding: 0 6px;
}

.kd-rv-breukstreep {
  width: 100%;
  min-width: 28px;
  height: 2px;
  background: #1f2933;
  border-radius: 2px;
}

/* Opties grid onder canvas erft stijl van bestaande .kd-options-grid */
.kd-rv-opties {
  margin-top: 8px;
}

@keyframes kd-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@media (max-width: 700px) {
  .kd-rv-cel {
    min-width: 64px;
    min-height: 48px;
    padding: 8px 12px;
    font-size: 1.3rem;
    border-radius: 12px;
  }
  .kd-rv-cel.is-blank { min-width: 80px; }
  .kd-rv-cel.is-blank.is-typ { max-width: 110px; }
  .kd-rv-row {
    gap: 14px;
  }
  .kd-rv-grid {
    gap: 32px;
  }
  .kd-rv-teller,
  .kd-rv-noemer {
    font-size: 1.3rem;
  }
  .kd-rv-cel .kd-rv-input {
    font-size: 1.3rem;
    /* Cel min-height op mobile: 48 - 2*2 border = 44px content-area. */
    line-height: 44px;
  }
}

/* ============================================================
   FLITSEN — kaartje 3s zichtbaar, dan typen/MC
   ============================================================ */

.kd-flits-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  margin: 20px 0;
  perspective: 1200px;
  position: relative;
}

.kd-flits-stage-answered {
  min-height: 0;
  perspective: none;
  align-items: stretch;
}

.kd-flits-empty {
  color: #888;
  font-style: italic;
  text-align: center;
}

/* ----- Intro ----- */
.kd-flits-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 30px 24px;
  background: none;
  border-radius: 24px;
  border: none;
  box-shadow: none;
  max-width: 460px;
  animation: kd-flits-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kd-flits-intro.kd-flits-fade-out {
  animation: kd-flits-fadeout 0.25s ease forwards;
}

.kd-flits-intro-icon {
  font-size: 48px;
  filter: drop-shadow(0 4px 8px var(--kd-primary-glow));
  animation: kd-flits-bolt 1.2s ease-in-out infinite;
}

.kd-flits-intro-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--kd-primary-dark);
}

.kd-flits-intro-sub {
  margin: 0;
  color: #555;
  font-size: 1rem;
  line-height: 1.4;
}

.kd-flits-start-btn {
  margin-top: 6px;
  font-size: 1.1rem;
  padding: 14px 32px;
}

@keyframes kd-flits-bolt {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-4px) rotate(3deg); }
}

@keyframes kd-flits-pop {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes kd-flits-fadeout {
  to { opacity: 0; transform: scale(0.95); }
}

/* ----- Countdown 3-2-1-Kijk ----- */
.kd-flits-countdown {
  font-size: clamp(80px, 18vw, 180px);
  font-weight: 900;
  color: var(--kd-primary);
  text-shadow: 0 8px 30px var(--kd-primary-glow);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
}

.kd-flits-countdown.animate {
  animation: kd-flits-countbeat 0.65s cubic-bezier(0.5, 0, 0.5, 1) forwards;
}

@keyframes kd-flits-countbeat {
  0% { opacity: 0; transform: scale(0.4); }
  30% { opacity: 1; transform: scale(1.1); }
  60% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.4); }
}

/* ----- Kaart ----- */
.kd-flits-card-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.kd-flits-card-counter {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--kd-primary-dark);
  background: var(--kd-primary-light);
  padding: 4px 14px;
  border-radius: 999px;
  letter-spacing: 0.05em;
}

.kd-flits-card {
  min-width: 220px;
  min-height: 220px;
  max-width: min(90vw, 360px);
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #fff;
  border: 4px solid var(--kd-primary);
  border-radius: 28px;
  box-shadow:
    0 20px 60px -20px var(--kd-primary-glow),
    0 6px 20px -8px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: rotateY(-90deg) scale(0.8);
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.kd-flits-card.flits-in {
  animation: kd-flits-cardin 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.kd-flits-card.flits-out {
  animation: kd-flits-cardout 0.35s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}

@keyframes kd-flits-cardin {
  0%   { opacity: 0; transform: rotateY(-90deg) scale(0.7); }
  60%  { opacity: 1; transform: rotateY(8deg) scale(1.04); }
  100% { opacity: 1; transform: rotateY(0deg) scale(1); }
}

@keyframes kd-flits-cardout {
  0%   { opacity: 1; transform: rotateY(0deg) scale(1); }
  100% { opacity: 0; transform: rotateY(90deg) scale(0.85); }
}

.kd-flits-card-text {
  font-size: clamp(48px, 12vw, 96px);
  font-weight: 900;
  color: #1a1a1a;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  word-break: break-word;
  max-width: 100%;
}

.kd-flits-card-img {
  max-width: 100%;
  max-height: 220px;
  height: auto;
  width: auto;
  border-radius: 16px;
  display: block;
}

.kd-flits-card-empty {
  background: repeating-linear-gradient(
    45deg,
    #fafafa,
    #fafafa 10px,
    #f0f0f0 10px,
    #f0f0f0 20px
  );
}

/* ----- Spoel vooruit onder het kaartje ----- */
.kd-flits-skip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border: 1.5px solid #e4e4e9;
  border-radius: 999px;
  background: transparent;
  color: #a0a0a8;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  animation: kd-flits-skip-in 0.3s ease 0.35s forwards;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.kd-flits-skip svg {
  flex: none;
  display: block;
}

.kd-flits-skip:hover,
.kd-flits-skip:focus-visible {
  color: var(--kd-primary-dark);
  border-color: var(--kd-primary);
  background: var(--kd-primary-light);
}

.kd-flits-skip:active {
  transform: scale(0.94);
}

.kd-flits-skip.kd-flits-skip-used {
  animation: kd-flits-skip-uit 0.2s ease forwards;
  color: #bcbcc3;
  border-color: #eeeef1;
  background: transparent;
  cursor: default;
}

@keyframes kd-flits-skip-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes kd-flits-skip-uit {
  from { opacity: 1; }
  to   { opacity: 0.35; }
}

/* ----- Antwoord-fase ----- */
.kd-flits-answer-question {
  margin-bottom: 18px;
  text-align: center;
  animation: kd-flits-pop 0.35s ease;
}

.kd-flits-answer-question .kd-question-text {
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0;
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  .kd-flits-card,
  .kd-flits-card.flits-in,
  .kd-flits-card.flits-out,
  .kd-flits-countdown.animate,
  .kd-flits-intro,
  .kd-flits-intro.kd-flits-fade-out,
  .kd-flits-intro-icon,
  .kd-flits-answer-question {
    animation: none !important;
    transition: opacity 0.15s ease;
  }
  .kd-flits-skip,
  .kd-flits-skip.kd-flits-skip-used {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .kd-flits-skip.kd-flits-skip-used {
    opacity: 0.35;
  }
  .kd-flits-card {
    opacity: 1;
    transform: none;
  }
  .kd-flits-card.flits-out {
    opacity: 0;
  }
}

/* ----- Mobile ----- */
@media (max-width: 600px) {
  .kd-flits-stage {
    min-height: 260px;
  }
  .kd-flits-card {
    min-width: 180px;
    min-height: 180px;
    padding: 24px 28px;
  }
  .kd-flits-intro {
    padding: 24px 18px;
  }
  .kd-flits-intro-icon {
    font-size: 40px;
  }
  .kd-flits-intro-title {
    font-size: 1.25rem;
  }
  .kd-flits-skip {
    padding: 10px 18px;
    font-size: 0.9rem;
  }
}

/* ===== Klik-om-te-vergroten lightbox ===== */
.kd-question-image img,
.kd-leestekst-image img,
.kd-intro-image img,
.kd-feedback-image img {
  cursor: zoom-in;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.kd-question-image img:hover,
.kd-leestekst-image img:hover,
.kd-intro-image img:hover,
.kd-feedback-image img:hover {
  transform: scale(1.03);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.12));
}

body.kd-img-lightbox-open {
  overflow: hidden;
}

.kd-img-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.2s ease;
  cursor: zoom-out;
}
.kd-img-lightbox.is-open {
  opacity: 1;
}
.kd-img-lightbox img {
  max-width: 95vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  background: #fff;
  transform: scale(0.96);
  transition: transform 0.2s ease;
}
.kd-img-lightbox.is-open img {
  transform: scale(1);
}
.kd-img-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  color: #0f172a;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.kd-img-lightbox__close:hover {
  background: #fff;
  transform: scale(1.05);
}

/* ===== Gekleurde wijshand-cursor (lichtgroen) =====
   Drag & drop laten we expliciet over aan de browser (cursor: grab / grabbing). */
.kd-leer-overlay :is(button, a, label, summary, select, [role="button"], [onclick], input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="button"]):not(:disabled):not([readonly]),
.kd-leer-overlay .kd-option-btn:not(.used):not(:disabled),
.kd-leer-overlay [class*="kd-"][class*="-btn"]:not(:disabled),
.kd-leer-overlay [class*="kd-"][class*="-clickable"],
.kd-leer-overlay .kd-toggle,
.kd-leer-overlay .kd-tab,
.kd-leer-overlay .kd-card-clickable {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='32' viewBox='0 0 28 32'><path fill='%2386EFAC' stroke='%23166534' stroke-width='1.6' stroke-linejoin='round' d='M10 2.5c0-1.1.9-2 2-2s2 .9 2 2v11l1.8-1.2c.8-.5 1.9-.4 2.5.4.4.5.5 1.2.3 1.8.6-.2 1.2-.1 1.7.3.8.6 1 1.7.4 2.5-.1.2-.3.3-.4.5.6-.1 1.2.1 1.6.5.8.7.9 1.9.2 2.7l-3.9 4.4c-1.2 1.4-2.9 2.1-4.6 2.1h-2.8c-2 0-3.8-1-4.8-2.7L1.6 16.5c-.6-.9-.3-2 .6-2.6.9-.6 2-.3 2.6.6L6.6 17V9.5c0-1.1.9-2 2-2s2 .9 2 2v-7z'/></svg>") 11 2, pointer;
}