/* Taal oefenen: gedeeld door oefenen.php en spelletjes.php. Zelfde kleuren en knoppen als index.php */
:root {
  --bg: #fff7e8; --kaart: #ffffff; --inkt: #2b2340; --zacht: #6d6585;
  --oranje: #ff7a3d; --paars: #7b5cff; --groen: #1fbf8f; --rand: #f0e2c8;
  --rood: #d63b3b;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--inkt);
  font-family: "Baloo 2", system-ui, sans-serif; font-size: 18px;
  background-image: radial-gradient(#ffe3b8 1.5px, transparent 1.5px); background-size: 26px 26px;
}
main { max-width: 860px; margin: 0 auto; padding: 20px 16px 48px; }
[hidden] { display: none !important; }
.top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.top h1 { margin: 0 auto 0 4px; font-size: clamp(1.6rem, 6vw, 2.4rem); line-height: 1.1; }
.top h1 span { color: var(--paars); }
.knop { border: 0; border-radius: 999px; padding: 6px 14px; font: inherit; font-size: .95rem; font-weight: 700;
  cursor: pointer; background: #f3eefe; color: var(--paars); text-decoration: none; display: inline-block; }
.knop:hover { background: #e8e0ff; }
.knop.groot { padding: 8px 20px; font-size: 1.05rem; background: var(--groen); color: #fff; }
.knop.groot:hover { background: #17a87d; }
.veld { font: inherit; font-size: 1rem; border: 2px solid var(--rand); border-radius: 12px; padding: 6px 10px;
  background: #fffdf8; color: var(--inkt); min-width: 0; }
.veld:focus { outline: none; border-color: var(--paars); }

.kaart { background: var(--kaart); border: 3px solid var(--paars); border-radius: 22px; padding: 18px 16px 22px;
  box-shadow: 0 6px 0 #d9cfff; text-align: center; margin-bottom: 18px; }
.kaart h2 { margin: 0 0 6px; font-size: 1.5rem; }
.uitleg, .leeg { color: var(--zacht); margin: 0 0 14px; }
.vinkjes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.vinkje { display: inline-flex; align-items: center; gap: 6px; background: #f3eefe; border-radius: 14px; padding: 6px 12px;
  cursor: pointer; font-weight: 700; }
.vinkje input { width: 18px; height: 18px; accent-color: var(--paars); }
.vinkje small { color: var(--zacht); font-weight: 600; }
.rij { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }

/* Tegels: de drie soorten (oefenen.php) en de spelletjes per soort (spelletjes.php) */
.tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.tegel { border: 0; cursor: pointer; font: inherit; color: #fff; border-radius: 22px; padding: 18px 14px; text-align: center;
  display: flex; flex-direction: column; gap: 4px; align-items: center; transition: transform .15s; text-decoration: none; }
.tegel:hover { transform: translateY(-3px); }
.tegel[aria-disabled="true"], .tegel:disabled { opacity: .45; cursor: default; transform: none; pointer-events: none; }
.tegel .icoon { font-size: 2.6rem; line-height: 1; }
.tegel b { font-size: 1.4rem; }
.tegel small { font-size: .95rem; opacity: .92; line-height: 1.25; }
.tegel.luisteren { background: var(--paars); box-shadow: 0 6px 0 #5a3fd6; }
.tegel.onthouden { background: var(--oranje); box-shadow: 0 6px 0 #d85a22; }
.tegel.vertalen { background: var(--groen); box-shadow: 0 6px 0 #129470; }
.kaart.luisteren { border-color: var(--paars); box-shadow: 0 6px 0 #d9cfff; }
.kaart.onthouden { border-color: var(--oranje); box-shadow: 0 6px 0 #ffc7a8; }
.kaart.vertalen { border-color: var(--groen); box-shadow: 0 6px 0 #b5ecd9; }

/* Spelen */
.stand { display: flex; justify-content: space-between; gap: 10px; font-weight: 800; color: var(--zacht); margin-bottom: 8px; }
.opdracht { margin: 0 0 6px; color: var(--zacht); font-weight: 700; font-size: 1.1rem; }
.vraag { font-size: clamp(1.7rem, 6vw, 2.6rem); font-weight: 800; margin: 6px 0 14px; overflow-wrap: anywhere; min-height: 1.3em; }
.luister-knop { font-size: 3rem; width: 110px; height: 110px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--paars); color: #fff; box-shadow: 0 6px 0 #5a3fd6; margin: 6px 0 16px; }
.luister-knop:active { translate: 0 3px; box-shadow: 0 3px 0 #5a3fd6; }
.keuzes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; max-width: 660px; margin: 0 auto; }
.keuze { border: 3px solid var(--rand); background: #fffdf8; border-radius: 16px; padding: 10px 12px; font: inherit;
  font-size: 1.25rem; font-weight: 800; cursor: pointer; color: var(--inkt); overflow-wrap: anywhere; }
.keuze:hover:not(:disabled) { border-color: var(--paars); }
.keuze:disabled { cursor: default; }
.goed { background: #dcf7ee !important; border-color: var(--groen) !important; color: #12805f !important; }
.fout { background: #ffe4e4 !important; border-color: var(--rood) !important; color: #c23030 !important; }
.aftellen { height: 12px; background: #f3eefe; border-radius: 999px; overflow: hidden; max-width: 420px; margin: 0 auto 6px; }
.aftellen div { height: 100%; background: var(--oranje); width: 100%; }
.tel { font-weight: 800; color: var(--oranje); margin: 0 0 8px; }
.antwoord { font-size: 1.3rem; padding: 8px 14px; width: min(100%, 420px); text-align: center; }
.uitslag { font-size: 1.2rem; font-weight: 800; margin: 12px 0; min-height: 1.5em; }
.uitslag.goed-tekst { color: var(--groen); }
.uitslag.fout-tekst { color: var(--rood); }
.sterren { font-size: 3rem; margin: 6px 0; }
.duim { font-size: 1.4rem; padding: 12px 26px; }

/* 🎈 Ballonnen */
.lucht { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 18px; padding: 14px 0 30px; min-height: 220px; }
.ballon { position: relative; border: 0; cursor: pointer; font: inherit; font-weight: 800; font-size: 1.15rem; color: #fff;
  min-width: 120px; max-width: 200px; min-height: 120px; padding: 16px 14px; overflow-wrap: anywhere;
  border-radius: 50% 50% 48% 48% / 58% 58% 42% 42%; animation: zweef 2.6s ease-in-out infinite;
  text-shadow: 0 1px 2px rgba(0,0,0,.25); box-shadow: inset -10px -12px 0 rgba(0,0,0,.12); }
.ballon::after { content: ""; position: absolute; left: 50%; bottom: -22px; width: 2px; height: 22px; background: #b8aac9; }
.ballon.knal { animation: knal .35s forwards; }
.ballon.mis { animation: schud .4s; background: #bbb !important; }
.ballon:disabled { cursor: default; }
@keyframes zweef { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes knal { to { transform: scale(1.6); opacity: 0; } }
@keyframes schud { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

/* 🃏 Memory */
.memory { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; max-width: 700px; margin: 0 auto; }
.memkaart { border: 0; cursor: pointer; font: inherit; font-weight: 800; font-size: 1.1rem; min-height: 92px; border-radius: 16px;
  padding: 8px; overflow-wrap: anywhere; background: var(--oranje); color: #fff; box-shadow: 0 5px 0 #d85a22; }
.memkaart.open.nl { background: #e6f5ff; color: #1f5f8a; box-shadow: 0 5px 0 #9fd8ff; }
.memkaart.open.lm { background: #f3eefe; color: var(--paars); box-shadow: 0 5px 0 #d9cfff; }
.memkaart.goed { box-shadow: 0 5px 0 #9ee6cd !important; }

/* 🔍 Wat ontbreekt? */
.rijtje { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; max-width: 660px; margin: 0 auto 14px; }
.woordje { background: #fff0e6; color: #c4561c; border-radius: 16px; padding: 12px 8px; font-weight: 800; font-size: 1.25rem; overflow-wrap: anywhere; }
.woordje.weg { background: #f3eefe; color: var(--paars); font-size: 1.6rem; }

/* 🔗 Koppelen */
.koppel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; max-width: 620px; margin: 0 auto; }
.koppel .kolom { display: grid; gap: 10px; align-content: start; }
.koppel .kolom h3 { margin: 0; font-size: 1rem; color: var(--zacht); }
.koppel .keuze.gekozen { border-color: var(--paars); background: #f3eefe; }

@media (max-width: 520px) {
  .koppel { gap: 8px; }
  .keuze { font-size: 1.05rem; }
  .ballon { min-width: 100px; min-height: 100px; font-size: 1rem; }
}

/* Onderwerpen (oefenen.php): kaarten met plaatje, medaille en voortgang */
.mijnstand { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 18px; }
.mijnstand span { background: var(--kaart); border: 3px solid var(--rand); border-radius: 999px; padding: 4px 16px; font-weight: 800; font-size: 1.1rem; }
.onderwerpen { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.onderwerp { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: var(--inkt);
  background: var(--kaart); border: 3px solid var(--rand); border-radius: 22px; padding: 16px 12px 14px; box-shadow: 0 6px 0 var(--rand);
  transition: transform .15s; }
.onderwerp:hover { transform: translateY(-3px); border-color: var(--paars); }
.onderwerp .plaatje { font-size: 3rem; line-height: 1.1; }
.onderwerp b { font-size: 1.2rem; text-align: center; overflow-wrap: anywhere; }
.onderwerp small { color: var(--zacht); font-weight: 600; }
.onderwerp .medaille { position: absolute; top: 8px; right: 10px; font-size: 1.8rem; }
.onderwerp .medaille.geen { filter: grayscale(1); opacity: .35; }
.onderwerp.alles { background: linear-gradient(135deg, #fff0e6, #f3eefe); }
.voortgang { width: 100%; height: 10px; background: #f3eefe; border-radius: 999px; overflow: hidden; margin-top: 6px; }
.voortgang div { height: 100%; background: linear-gradient(90deg, var(--oranje), var(--paars)); }
.toplijst { list-style: none; margin: 0 auto; padding: 0; max-width: 420px; text-align: left; }
.toplijst li { display: flex; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 12px; font-weight: 700; }
.toplijst li:nth-child(odd) { background: #faf6ee; }
.toplijst li.ik { background: #f3eefe; color: var(--paars); }
.toplijst .plek { width: 2em; text-align: center; font-weight: 800; }
.toplijst .naam { flex: 1; overflow-wrap: anywhere; }

/* Onderwerppagina: drie stappen (leren, spelletjes, toets) */
.stappen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stap-nr { display: inline-block; background: rgba(255,255,255,.3); border-radius: 999px; padding: 0 10px; font-size: .85rem; font-weight: 800; }
.tegel.leren { background: #3fa7ff; box-shadow: 0 6px 0 #1f7fcf; }
.tegel.toets { background: #f2b100; box-shadow: 0 6px 0 #c48f00; }
.vaardigheid { margin: 16px 0 8px; font-size: 1.2rem; text-align: left; }
.vaardigheid:first-of-type { margin-top: 0; }
.kaart.leren { border-color: #3fa7ff; box-shadow: 0 6px 0 #bfe3ff; }
.kaart.toets { border-color: #f2b100; box-shadow: 0 6px 0 #ffe7a3; }
.groot-icoon { font-size: 4rem; line-height: 1; }

/* Uitleg "Zo werkt het" en oplichten van de spelletjes (stap 2) */
.zo-werkt-het { text-align: left; max-width: 560px; margin: 0 auto; padding-left: 1.4em; line-height: 1.6; font-size: 1.05rem; }
.licht-op { animation: licht-op 1.4s ease-out; }
@keyframes licht-op { 0%, 40% { box-shadow: 0 0 0 8px #ffd36e, 0 6px 0 #d9cfff; } 100% { box-shadow: 0 6px 0 #d9cfff; } }

/* Vier vaardigheden (zoals Languagenut) */
.tegel.spreken { background: #ff5c8a; box-shadow: 0 6px 0 #d63b6b; }
.tegel.lezen { background: var(--groen); box-shadow: 0 6px 0 #129470; }
.tegel.schrijven { background: var(--oranje); box-shadow: 0 6px 0 #d85a22; }
.hint { color: var(--oranje); font-weight: 800; letter-spacing: 2px; min-height: 1.4em; margin: 8px 0; }

/* 🎈 Stijgende ballonnen */
.lucht.stijg { position: relative; display: block; height: 400px; padding: 0; overflow: hidden; border-radius: 18px;
  background: linear-gradient(#cfeaff, #fff7e8); }
.lucht.stijg .ballon { position: absolute; bottom: -150px; width: 22%; min-width: 0; animation: stijg 8s linear forwards, zweef 2.6s ease-in-out infinite; }
@keyframes stijg { from { bottom: -150px; } to { bottom: 430px; } }

/* 🐹 Mollen meppen */
.holen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 600px; margin: 0 auto; }
.hol { position: relative; height: 120px; overflow: hidden; border-bottom: 18px solid #6b4a2b; border-radius: 0 0 40px 40px;
  background: radial-gradient(ellipse at 50% 100%, #3b2a1a 0 45%, transparent 46%); }
.mol { position: absolute; left: 50%; bottom: -110px; transform: translateX(-50%); width: 88%; height: 100px; border: 0; cursor: pointer;
  border-radius: 46% 46% 12px 12px; background: #a8743f; color: #fff; font: inherit; font-weight: 800; font-size: 1.05rem;
  padding: 26px 4px 4px; overflow-wrap: anywhere; transition: bottom .18s; }
.mol::before { content: "🐹"; position: absolute; top: -4px; left: 50%; transform: translateX(-50%); font-size: 1.6rem; }
.mol.op { bottom: 0; }

/* 🎤 Spreken */
.mic { font-size: 2.6rem; width: 104px; height: 104px; border-radius: 50%; border: 0; cursor: pointer; background: #ff5c8a; color: #fff;
  box-shadow: 0 6px 0 #d63b6b; margin: 8px 0; }
.mic:disabled { cursor: default; }
.mic.luistert { animation: puls 1s ease-in-out infinite; }
@keyframes puls { 50% { transform: scale(1.12); box-shadow: 0 0 0 14px rgba(255, 92, 138, .25); } }
.oordeel { font-size: clamp(1.6rem, 6vw, 2.2rem); font-weight: 800; margin: 4px 0; min-height: 1.3em; }
.oordeel.goed { background: none !important; color: var(--groen) !important; }
.oordeel.bijna { color: #12805f; }
.oordeel.redelijk { color: #c48f00; }
.oordeel.niet { color: var(--oranje); }
.hoorde { font-weight: 700; color: var(--zacht); min-height: 1.4em; margin: 4px 0 10px; }
.raket { font-size: 3.4rem; line-height: 1; transition: transform 1s ease-in, opacity 1s; }
.raket.weg { transform: translateY(-200px) rotate(-10deg); opacity: 0; }

/* 🔀 Letterhussel en 🌷 galgje */
.vakjes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 10px 0 16px; }
.vakje { width: 44px; height: 54px; border-bottom: 4px solid var(--paars); font-size: 1.8rem; font-weight: 800; display: flex;
  align-items: center; justify-content: center; }
.vakje.spatie { width: 20px; border: 0; }
.lettertegels, .toetsenbord { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 620px; margin: 0 auto 12px; }
.lettertegel { width: 52px; height: 56px; border: 0; border-radius: 14px; cursor: pointer; font: inherit; font-size: 1.6rem; font-weight: 800;
  background: var(--oranje); color: #fff; box-shadow: 0 5px 0 #d85a22; }
.lettertegel:disabled { opacity: .3; cursor: default; }
.lettertegel.klein { width: 42px; height: 46px; font-size: 1.25rem; background: #f3eefe; color: var(--paars); box-shadow: 0 4px 0 #d9cfff; }
.lettertegel.klein:disabled { opacity: 1; }
.tuin { font-size: 2rem; letter-spacing: 4px; margin: 4px 0; }
.galg { letter-spacing: .15em; }

@media (max-width: 520px) {
  .lucht.stijg .ballon { width: 24%; font-size: .9rem; min-height: 90px; padding: 10px 6px; }
  .holen { grid-template-columns: repeat(2, 1fr); }
  .lettertegel { width: 44px; height: 48px; font-size: 1.3rem; }
}

/* 🔧 Microfoon testen */
.mic-test { max-width: 560px; margin: 10px auto 0; padding: 10px 14px; background: #faf6ee; border-radius: 14px; text-align: left; font-weight: 600; line-height: 1.4; }
.mic-test > div { margin-bottom: 6px; }
.mic-test .aftellen div { background: var(--groen); }