/* De les: schuift over de app heen. Voortgangsbalk, oefeningen, het oordeel en het eindscherm met de oven. */
#les {
  position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; background: var(--kalk);
  transform: translateY(100%); transition: transform 0.55s var(--glij); overflow: hidden;
}
#les.is-open { transform: none; }
.les__kop { display: flex; align-items: center; gap: 0.875rem; padding: calc(env(safe-area-inset-top) + 1rem) 1.25rem 0.5rem; }
.balk { flex: 1; height: 0.875rem; border-radius: 1rem; background: var(--voeg); overflow: hidden; }
.balk__vul {
  height: 100%; width: 0; min-width: 0.875rem; border-radius: 1rem; transition: width 0.8s var(--veer);
  background: linear-gradient(180deg, #4d73f2 0%, var(--kobalt) 55%); box-shadow: 0 0.1875rem 0 rgba(255, 255, 255, 0.35) inset;
}
.les__stap { flex: 1; overflow-y: auto; padding: 1.25rem 1.25rem 2rem; display: flex; flex-direction: column; }
.les__voet { padding: 0.75rem 1.25rem calc(env(safe-area-inset-bottom) + 1.25rem); min-height: 5.5rem; }

.les__stap.komt-binnen > * { animation: stap-in 0.65s var(--veer) both; }
.les__stap.komt-binnen > *:nth-child(2) { animation-delay: 0.07s; }
.les__stap.komt-binnen > *:nth-child(3) { animation-delay: 0.14s; }
.les__stap.komt-binnen > *:nth-child(4) { animation-delay: 0.21s; }
@keyframes stap-in { from { opacity: 0; transform: translateX(2.5rem) scale(0.96); } }

.etiket { font-family: var(--kop); font-weight: 700; font-size: 1.125rem; color: var(--inkt-zacht); }
.etiket--geel { align-self: flex-start; padding: 0.25rem 0.75rem; border-radius: 2rem; font-size: 0.875rem; color: var(--inkt); background: var(--geel); }

/* Nieuwe zin: een witte tegel met blauwe hoeken */
.leerkaart { position: relative; margin-top: 1rem; padding: 2.75rem 1.5rem 2.25rem; border-radius: 1.75rem; text-align: center; background: var(--wit); box-shadow: var(--schaduw), var(--schaduw-hoog); overflow: hidden; }
.leerkaart__hoek { position: absolute; width: 3.5rem; height: 3.5rem; border-radius: 50%; border: 0.5rem solid var(--kobalt); box-shadow: 0 0 0 0.375rem var(--wit), 0 0 0 0.625rem var(--lucht); }
.leerkaart__hoek:nth-child(1) { left: -1.75rem; top: -1.75rem; }
.leerkaart__hoek:nth-child(2) { right: -1.75rem; top: -1.75rem; }
.leerkaart__hoek:nth-child(3) { left: -1.75rem; bottom: -1.75rem; }
.leerkaart__hoek:nth-child(4) { right: -1.75rem; bottom: -1.75rem; }
.leerkaart__pt { font-family: var(--kop); font-weight: 800; font-size: 2.25rem; line-height: 1.08; letter-spacing: -0.03em; color: var(--kobalt); text-wrap: balance; }
.leerkaart__uit { margin-top: 0.75rem; font-size: 0.875rem; color: var(--inkt-zacht); }
.leerkaart__uit em { display: block; font-style: normal; font-weight: 600; font-size: 1rem; color: var(--inkt); }
.leerkaart .luister { margin: 1.25rem auto 0; }
.leerkaart__nl { margin-top: 1.25rem; padding-top: 1.125rem; border-top: 0.125rem dashed var(--voeg); font-size: 1.25rem; font-weight: 600; }
.tip { margin-top: 1rem; padding: 0.875rem 1rem; border-radius: 1rem; background: var(--lucht); font-size: 0.9375rem; }

/* Luisterknop: geel en rond, met een kring die uitdijt als hij spreekt */
.luister { position: relative; width: 3.5rem; height: 3.5rem; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: radial-gradient(circle at 35% 28%, #ffe08a, var(--geel) 60%); box-shadow: 0 0.25rem 0 var(--geel-diep), 0 0.875rem 1.25rem -0.5rem rgba(224, 157, 0, 0.8); transition: transform 0.4s var(--veer); }
.luister:active { transform: scale(0.88); }
.luister svg { width: 1.625rem; height: 1.625rem; fill: var(--inkt); stroke: none; }
.luister .golf { fill: none; stroke: var(--inkt); stroke-width: 2; stroke-linecap: round; }
.luister::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 0.1875rem solid var(--geel); opacity: 0; }
.luister.klinkt::after { animation: kring 0.9s var(--glij); }
.luister--groot { width: 7rem; height: 7rem; }
.luister--groot svg { width: 3rem; height: 3rem; }
.luister--groot::after { animation: kring 2.2s var(--glij) infinite; }
@keyframes kring { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.9); opacity: 0; } }

.vraag { margin-top: 0.875rem; padding: 1.5rem; min-height: 8.5rem; border-radius: 1.5rem; background: var(--wit); box-shadow: var(--schaduw); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.vraag h2 { font-family: var(--kop); font-weight: 800; font-size: 2rem; line-height: 1.1; letter-spacing: -0.03em; color: var(--kobalt); text-wrap: balance; }
.vraag--luister { justify-content: center; padding: 2.5rem 0; background: none; box-shadow: none; }

.opties { margin-top: auto; padding-top: 1.5rem; display: grid; gap: 0.75rem; transition: transform 0.6s var(--veer); }
/* Het oordeel schuift over de onderkant: de antwoorden veren omhoog zodat ze zichtbaar blijven */
.les__stap:has(~ .oordeel.is-open) .opties { transform: translateY(-9.5rem); }
.optie {
  padding: 1.125rem 1.25rem; border-radius: 1.125rem; text-align: left; font-weight: 600; font-size: 1.0625rem; background: var(--wit);
  box-shadow: 0 0.25rem 0 var(--voeg), 0 0.75rem 1.25rem -0.75rem rgba(19, 31, 77, 0.3);
  transition: transform 0.4s var(--veer), background 0.25s, color 0.25s, box-shadow 0.25s;
  animation: stap-in 0.6s var(--veer) both; animation-delay: calc(var(--i) * 0.07s + 0.15s);
}
.optie:active { transform: translateY(0.1875rem) scale(0.98); }
.optie.is-juist { background: var(--olijf); color: var(--wit); box-shadow: 0 0.25rem 0 #20693f; transform: scale(1.03); }
.optie.is-fout { background: var(--terra); color: var(--wit); box-shadow: 0 0.25rem 0 #a03a24; animation: schud 0.45s; }
.optie:disabled:not(.is-juist):not(.is-fout) { opacity: 0.45; }
@keyframes schud { 20% { transform: translateX(-0.5rem); } 40% { transform: translateX(0.5rem); } 60% { transform: translateX(-0.3rem); } 80% { transform: translateX(0.3rem); } }

/* Paren */
.paren { margin-top: 1.25rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.paren > div { display: grid; gap: 0.75rem; align-content: start; }
.paar {
  min-height: 4.5rem; padding: 0.75rem; border-radius: 1rem; font-weight: 600; font-size: 0.9375rem; line-height: 1.25; background: var(--wit);
  box-shadow: 0 0.25rem 0 var(--voeg); transition: transform 0.4s var(--veer), background 0.25s, opacity 0.4s, box-shadow 0.25s;
  animation: stap-in 0.6s var(--veer) both; animation-delay: calc(var(--i) * 0.06s + 0.1s);
}
.paar.is-gekozen { transform: translateY(-0.25rem) scale(1.04); box-shadow: 0 0 0 0.1875rem var(--kobalt), 0 0.75rem 1.25rem -0.5rem rgba(29, 63, 191, 0.5); }
.paar.is-paar { background: var(--olijf-licht); color: var(--olijf); box-shadow: none; opacity: 0.6; transform: scale(0.94); }
.paar.schudt { animation: schud 0.45s; }

/* Zin bouwen */
.zinregel { margin-top: 1rem; min-height: 7rem; padding: 0.75rem; border-radius: 1.125rem; border: 0.125rem dashed var(--biscuit-diep); display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0.5rem; transition: border-color 0.3s, background 0.3s; }
.zinregel.is-juist { border-color: var(--olijf); background: var(--olijf-licht); }
.zinregel.is-fout { border-color: var(--terra); background: var(--terra-licht); }
.blokjes { margin-top: 1.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.blokje { padding: 0.625rem 0.875rem; border-radius: 0.75rem; font-family: var(--kop); font-weight: 700; font-size: 1.0625rem; background: var(--wit); box-shadow: 0 0.1875rem 0 var(--voeg), 0 0.5rem 0.75rem -0.5rem rgba(19, 31, 77, 0.35); }
.blokjes .blokje { animation: stap-in 0.55s var(--veer) both; animation-delay: calc(var(--i) * 0.05s + 0.1s); }
.zinregel .blokje { background: var(--kobalt); color: var(--wit); box-shadow: 0 0.1875rem 0 var(--kobalt-diep); }

/* Oordeel: veert van onderen in beeld */
.oordeel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 1.25rem 1.25rem calc(env(safe-area-inset-bottom) + 1.25rem); border-radius: 1.75rem 1.75rem 0 0; display: grid; gap: 1rem; transform: translateY(110%); transition: transform 0.6s var(--veer); }
.oordeel.is-open { transform: none; }
.oordeel strong { display: block; font-family: var(--kop); font-weight: 800; font-size: 1.75rem; letter-spacing: -0.03em; }
.oordeel span { font-size: 0.9375rem; }
.oordeel--goed { background: var(--olijf-licht); color: #1c5a39; }
.oordeel--goed .knop { background: var(--olijf); box-shadow: 0 0.3125rem 0 #20693f; }
.oordeel--fout { background: var(--terra-licht); color: #8f3220; }
.oordeel--fout .knop { background: var(--terra); box-shadow: 0 0.3125rem 0 #a03a24; }

/* Eindscherm: de ruwe tegel gloeit in de oven, draait om en komt er geglazuurd uit */
.klaar { margin: auto 0; text-align: center; }
.oven { position: relative; width: 12rem; height: 12rem; margin: 0 auto 2rem; perspective: 50rem; }
.oven__gloed { position: absolute; inset: -3rem; border-radius: 50%; background: radial-gradient(circle, rgba(255, 196, 46, 0.9) 0%, rgba(212, 85, 58, 0.45) 40%, rgba(212, 85, 58, 0) 68%); animation: gloed 2.4s ease-out both; }
.oven__tegel { position: absolute; inset: 0; transform-style: preserve-3d; animation: bak 2.4s var(--glij) both; }
.oven__voor, .oven__achter { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.oven__achter { transform: rotateY(180deg); }
.oven .tegel { border-radius: 1.25rem; }
.oven__achter .tegel__glans::after { content: ''; position: absolute; top: -20%; bottom: -20%; width: 35%; left: -60%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent); animation: veeg 1.1s 2s var(--glij) both; }
@keyframes bak {
  /* Geen doorzichtigheid hier: die maakt de tegel plat en dan blijft de achterkant onzichtbaar */
  0% { transform: scale(0) rotateY(0); }
  12% { transform: scale(1) rotateY(0); }
  20%, 28%, 36%, 44% { transform: scale(1) rotateY(0) rotateZ(-2.5deg); }
  24%, 32%, 40%, 48% { transform: scale(1) rotateY(0) rotateZ(2.5deg); }
  62% { transform: scale(1.25) rotateY(180deg); }
  78% { transform: scale(0.94) rotateY(180deg); }
  100% { transform: scale(1) rotateY(180deg); }
}
@keyframes gloed { 0% { opacity: 0; transform: scale(0.4); } 15%, 50% { opacity: 1; transform: scale(1); } 100% { opacity: 0.35; transform: scale(1.15); } }
@keyframes veeg { to { left: 130%; } }
.oven--kopje .kopje { position: static; width: 100%; filter: drop-shadow(0 1rem 1rem rgba(19, 31, 77, 0.3)); }
.oven--kopje .stoom { stroke: var(--kobalt); }
.klaar__kop { font-family: var(--kop); font-weight: 800; font-size: 2.5rem; letter-spacing: -0.04em; line-height: 1; color: var(--kobalt); animation: omhoog 0.7s 1.5s var(--veer) both; }
.klaar__sub { margin-top: 0.5rem; color: var(--inkt-zacht); animation: omhoog 0.7s 1.6s var(--veer) both; }
.cijfers { margin-top: 1.75rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.cijfers div { padding: 1rem 0.375rem; border-radius: 1.125rem; background: var(--wit); box-shadow: var(--schaduw); animation: omhoog 0.7s var(--veer) both; }
.cijfers div:nth-child(1) { animation-delay: 1.75s; }
.cijfers div:nth-child(2) { animation-delay: 1.85s; }
.cijfers div:nth-child(3) { animation-delay: 1.95s; }
.cijfers strong { display: block; font-family: var(--kop); font-weight: 800; font-size: 1.75rem; letter-spacing: -0.03em; color: var(--kobalt); }
.cijfers span { font-size: 0.75rem; color: var(--inkt-zacht); font-weight: 600; }
.scherven { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }