/* hola, spelerskant. Thema "Spaanse sfeer" (mock-v3): kleuren en lettertypen uit thema.css.
   el = blauw en la = oranje door de hele app. Mobiel eerst (390 px). */
:root {
    --kaart: var(--wit);
    --r: 22px;
    /* De zwevende onderbalk: vaste hoogte, zodat de pagina eronder precies genoeg ruimte houdt. */
    --onderbalk-hoogte: 76px;
    --onderbalk-marge: 14px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; font-family: var(--font-tekst); font-size: 16px; line-height: 1.45;
       color: var(--inkt); background: var(--grond); -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { margin: 0; font-family: var(--font-kop); font-weight: 800; letter-spacing: -.01em; }
a { color: var(--rojo); }
button { font: inherit; }
.dof { color: var(--grijs); }
.klein { font-size: .85rem; }
[hidden] { display: none !important; }

.lw { font-weight: 800; }
.lw-el { color: var(--el); }
.lw-la { color: var(--la); }

/* --- Knoppen ----------------------------------------------------------------------- */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        padding: 12px 18px; border: 1px solid transparent; border-radius: 14px;
        font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .08s, background .15s; }
.knop:active { transform: scale(.98); }
.knop:focus-visible { outline: 3px solid color-mix(in srgb, currentColor 35%, transparent); outline-offset: 2px; }
.knop-hoofd { color: var(--wit); background: var(--rojo); box-shadow: var(--schaduw-rojo); }
.knop-hoofd:hover, .knop-hoofd:active { background: var(--rojo-donker); }
.knop-hoofd:disabled { opacity: .6; }
.knop-stil { color: var(--inkt); background: var(--kaart); border-color: var(--rand); }
.knop-groot { width: 100%; min-height: 58px; font-size: 1.15rem; border-radius: 18px; }
.knop-klaar { color: var(--olijf-tekst); background: var(--olijf-licht); cursor: default; }

/* --- Logo ----------------------------------------------------------------------------- */
.merk-tekst { font-family: var(--font-kop); font-style: italic; font-weight: 800; font-size: 1.75rem;
              font-variation-settings: var(--logo-variatie);
              letter-spacing: -.02em; color: var(--inkt); text-decoration: none; }
.merk-tekst span { color: var(--gualda); }
.merk-wit { color: var(--wit); }

/* --- Losse schermen: inloggen, registreren, reset, foutpagina ------------------------ */
body.los-scherm { display: grid; place-items: center; padding: 24px 16px;
                  background: radial-gradient(120% 60% at 50% 0%, var(--gualda-licht) 0%, var(--grond) 60%); }
.los-kaart { width: min(400px, 100%); padding: 28px 24px; border-radius: var(--r); background: var(--kaart);
             border: 1px solid var(--rand);
             /* dezelfde gele band als onder de kop van de app */
             box-shadow: var(--schaduw), inset 0 -8px 0 var(--gualda); padding-bottom: 34px; }
.los-kaart h1 { margin-top: 18px; font-size: 1.7rem; }
.los-kaart p { margin: 6px 0 18px; }
.los-kaart .knop { width: 100%; margin-top: 6px; }
.formulier { display: grid; gap: 14px; }
.formulier label { display: grid; gap: 6px; font-weight: 700; font-size: .9rem; }
.formulier input { width: 100%; padding: 13px 14px; border: 2px solid var(--rand); border-radius: 14px;
                   font: inherit; font-size: 1rem; background: var(--wit); color: var(--inkt); }
.formulier input:focus { outline: none; border-color: var(--rojo); box-shadow: 0 0 0 4px var(--rojo-licht); }
.melding { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; font-weight: 600; font-size: .92rem; }
.melding-ok { color: var(--olijf-tekst); background: var(--olijf-licht); }
.melding-fout { color: var(--rojo); background: var(--rojo-licht); }

/* --- App: kop ---------------------------------------------------------------------- */
/* Ruimte onderaan = balk + marge eronder + veilige zone (gebaren-/homebalk) + lucht boven de balk. */
body.app { padding-bottom: calc(var(--onderbalk-hoogte) + var(--onderbalk-marge) + env(safe-area-inset-bottom) + 28px); }
.held { position: relative; padding: calc(18px + env(safe-area-inset-top)) 20px 92px; color: var(--wit);
        border-radius: 0 0 34px 34px; overflow: hidden;
        background-color: var(--rojo);
        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.14' stroke-width='1.2'%3E%3Crect x='6' y='6' width='44' height='44' rx='8'/%3E%3Cpath d='M28 14 42 28 28 42 14 28z'/%3E%3Ccircle cx='28' cy='28' r='4'/%3E%3C/g%3E%3C/svg%3E"),
            linear-gradient(160deg, color-mix(in srgb, var(--rojo) 82%, var(--wit)), var(--rojo) 55%, var(--rojo-donker));
        /* de gele band onderaan, binnen de afgeronde hoek */
        box-shadow: inset 0 -12px 0 var(--gualda); }
.held::after { content: ""; position: absolute; top: -90px; right: -70px; width: 260px; height: 260px;
               border-radius: 50%; background: rgb(255 255 255 / .08); pointer-events: none; }
.held-kort { padding-bottom: 70px; }
.held-boven { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; }
.avatar-knop { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px;
               color: var(--rojo); background: var(--wit); font-weight: 800; font-size: 1.2rem; text-decoration: none; }
.held-datum { position: relative; z-index: 1; margin: 22px 0 2px; opacity: .9; font-weight: 500; }
.held-groet { position: relative; z-index: 1; font-size: 1.9rem; line-height: 1.12; }
.held-tegels { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.held-tegel { display: grid; padding: 10px 12px; border: 1px solid rgb(255 255 255 / .24); border-radius: 16px;
              background: rgb(255 255 255 / .1); backdrop-filter: blur(4px); }
.held-tegel b { font-size: 1.45rem; font-weight: 800; line-height: 1.2; }
.held-tegel span { font-size: .8rem; opacity: .92; }

.pagina { position: relative; z-index: 2; padding: 0 16px; margin-top: -64px; display: grid; gap: 22px; }
.kaart { padding: 20px; border-radius: var(--r); background: var(--kaart); box-shadow: var(--schaduw);
         border: 1px solid var(--rand); }
.kaart h2 { font-size: 1.25rem; }
.kaart p { margin: 6px 0 0; }

/* --- Herhalen vandaag ------------------------------------------------------------------ */
.herhaal-boven { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.ring { position: relative; flex: 0 0 auto; width: 92px; height: 92px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 9; }
.ring-achter { stroke: var(--gualda-licht); }
.ring-voor { stroke: var(--rojo); stroke-linecap: round; stroke-dasharray: calc(var(--deel) * 100) 100; }
.ring-leeg .ring-voor { display: none; }  /* anders tekent de ronde kap een stip bij 0 */
.ring-tekst { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-tekst b { font-family: var(--font-kop); font-size: 1.8rem; font-weight: 800; line-height: 1; }
.ring-tekst span { font-size: .72rem; color: var(--grijs); font-weight: 600; }
.herhaal-info p { color: var(--grijs); font-size: .95rem; }
.pillen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pil { padding: 3px 11px; border-radius: 999px; font-size: .85rem; font-weight: 700; border: 1px solid; }
.pil-el { color: var(--el); background: var(--el-licht); border-color: color-mix(in srgb, var(--el) 25%, var(--wit)); }
.pil-la { color: var(--la); background: var(--la-licht); border-color: color-mix(in srgb, var(--la) 25%, var(--wit)); }

/* --- Lessen ----------------------------------------------------------------------------- */
.blok-kop { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.blok-kop h2 { font-size: 1.35rem; }
.lessen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.les-kaart { overflow: hidden; border-radius: 20px; background: var(--kaart); border: 1px solid var(--rand); }
.les-beeld { position: relative; display: grid; place-items: center; height: 92px; background: var(--la-licht); }
.les-bezig .les-beeld, .les-klaar .les-beeld { background: var(--olijf-licht); }
.les-label { position: absolute; top: 10px; left: 10px; padding: 2px 9px; border-radius: 8px;
             background: var(--wit); font-size: .75rem; font-weight: 700; color: var(--la); }
.les-bezig .les-label, .les-klaar .les-label { color: var(--olijf-tekst); }
.les-icoon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px;
             background: var(--wit); color: var(--la); box-shadow: 0 6px 16px rgb(35 24 21 / .08); }
.les-bezig .les-icoon, .les-klaar .les-icoon { color: var(--olijf); }
.les-tekst { display: grid; gap: 2px; padding: 12px 14px 14px; }
.les-tekst .dof { font-size: .85rem; }
.les-tekst h3 { font-family: var(--font-tekst); font-size: 1.05rem; margin-bottom: 8px; }
.balk { height: 6px; border-radius: 999px; background: var(--zand); overflow: hidden; margin-bottom: 6px; }
.balk span { display: block; height: 100%; border-radius: inherit; background: var(--olijf); transition: width .3s; }

/* --- Onderbalk ------------------------------------------------------------------------- */
.onderbalk { position: fixed; z-index: 10; left: 16px; right: 16px;
             bottom: calc(var(--onderbalk-marge) + env(safe-area-inset-bottom));
             height: var(--onderbalk-hoogte); max-width: 480px; margin: 0 auto;
             display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center; padding: 0 8px;
             border-radius: 24px; background: var(--kobalt); box-shadow: 0 14px 34px rgb(23 53 122 / .35); }
.onderbalk-item { display: grid; justify-items: center; gap: 2px; color: rgb(255 255 255 / .7);
                  font-size: .8rem; font-weight: 600; text-decoration: none; }
.onderbalk-item .icoon { padding: 4px 16px; box-sizing: content-box; border-radius: 10px; }
.onderbalk-item.is-actief { color: var(--wit); }
.onderbalk-item.is-actief .icoon { background: var(--rojo); }

/* --- Profiel ----------------------------------------------------------------------------- */
.profiel-kop { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.avatar-groot { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px;
                background: var(--wit); color: var(--rojo); font-weight: 800; font-size: 1.6rem; }
.cijfers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.cijfers b { display: block; font-family: var(--font-kop); font-size: 1.7rem; font-weight: 800; }
.cijfers span { font-size: .8rem; color: var(--grijs); }

/* --- Oefenen --------------------------------------------------------------------------- */
body.oefen-body { background: var(--grond); }
.oefen { max-width: 520px; margin: 0 auto; padding: 18px 16px 24px;
         padding-bottom: calc(24px + var(--uitslag-hoogte, 0px)); }

/* Rode kop (mock-v5): tegelpatroon en gele band zoals het beginscherm, maar laag. */
.oefen-held { position: relative; padding: calc(14px + env(safe-area-inset-top)) 16px 26px; color: var(--wit);
              border-radius: 0 0 28px 28px; overflow: hidden;
              background-color: var(--rojo);
              background-image:
                  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.14' stroke-width='1.2'%3E%3Crect x='6' y='6' width='44' height='44' rx='8'/%3E%3Cpath d='M28 14 42 28 28 42 14 28z'/%3E%3Ccircle cx='28' cy='28' r='4'/%3E%3C/g%3E%3C/svg%3E"),
                  linear-gradient(160deg, color-mix(in srgb, var(--rojo) 85%, var(--wit)), var(--rojo) 60%);
              box-shadow: inset 0 -10px 0 var(--gualda); }
.oefen-held > * { max-width: 520px; margin-left: auto; margin-right: auto; }
.oefen-held-rij { display: flex; align-items: center; gap: 12px; }
.sluit { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; color: var(--inkt); }
.sluit-glas { color: var(--wit); background: rgb(255 255 255 / .16); border: 1px solid rgb(255 255 255 / .4);
              backdrop-filter: blur(4px); }
.oefen-titel { flex: 1 1 auto; min-width: 0; display: grid; line-height: 1.1; }
.oefen-les { color: var(--gualda-licht); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oefen-lesnaam { font-family: var(--font-kop); font-weight: 800; font-size: 1.6rem; letter-spacing: -.01em;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oefen-voortgang { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.balk-held { flex: 1 1 auto; height: 9px; margin: 0; background: rgb(255 255 255 / .28); }
.balk-held span { background: var(--gualda); }
.oefen-teller { flex: 0 0 auto; font-weight: 800; font-size: .95rem; font-variant-numeric: tabular-nums; }
.reeks { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 6px 11px; border-radius: 999px;
         color: var(--gualda-tekst); background: var(--gualda-licht); border: 1px solid var(--gualda); font-weight: 800; font-size: .85rem; }
.reeks .icoon { color: var(--gualda); }
.reeks-held { color: var(--inkt); background: var(--gualda); border-color: var(--gualda); }
.reeks-held .icoon { color: var(--rojo); }

/* Vraagkaart. Basis (¿El o la?): gecentreerd. Vertaaloefening: .vraag-compact, één rij. */
.vraag-kaart { position: relative; padding: 18px; border-radius: 22px; text-align: center;
               background: var(--wit); border: 1px solid var(--rand); box-shadow: var(--schaduw); }
.vraag-label { margin: 0 0 2px; color: var(--rojo); font-size: .78rem; font-weight: 800;
               letter-spacing: .1em; text-transform: uppercase; }
.vraag-woord { font-size: clamp(2rem, 10vw, 2.7rem); line-height: 1.1; letter-spacing: -.02em; overflow-wrap: anywhere; }
.vraag-compact { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 14px; text-align: left; }
.vraag-compact .vraag-icoon { grid-row: 1 / span 2; }
.vraag-icoon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px;
               color: var(--rojo); background: var(--la-licht); }
.vraag-compact .vraag-woord { font-size: 32px; }
.vraag-meta { margin: 4px 0 0; color: var(--grijs); font-size: .9rem; font-weight: 600; }
/* Chips (nieuw, herkansing) onder de soortregel, zodat "VERTAAL NAAR HET SPAANS" op één regel past. */
.vraag-chips { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; }
body:not(.toetsenbord-open) .vraag-chips:not(:has(.chip:not([hidden]):not(.chip-met-lw))) { display: none; }
.vraag-chips .chip { padding: 2px 10px; font-size: .8rem; }
.chip-met-lw { display: none; }
.chip { padding: 4px 12px; border-radius: 999px; background: var(--zand); color: var(--grijs); font-size: .88rem; font-weight: 600; }
.chip-nieuw { color: var(--rojo); background: var(--rojo-licht); }
.chip-herkansing { color: var(--la); background: var(--la-licht); }

/* Kennismaken (1f): een nieuw woord eerst laten zien, met vertaling en tip. */
.kennis-kaart { padding: 20px 20px 16px; border-radius: 22px; background: var(--wit); border: 1px solid var(--rand);
                box-shadow: var(--schaduw), inset 0 6px 0 var(--gualda); }
.kennis-boven { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kennis-nl { margin: 10px 0 0; color: var(--grijs); font-size: 1.1rem; font-weight: 600; }
.kennis-es { margin: 2px 0 2px; font-size: clamp(2.3rem, 11vw, 3rem); line-height: 1.1; overflow-wrap: anywhere; }
.kennis-soort { margin: 0 0 14px; color: var(--grijs); font-size: .9rem; font-weight: 600; }
.kennis-kaart .tip { margin-bottom: 18px; }
.kennis-uitleg { margin: 10px 0 0; text-align: center; color: var(--grijs); font-size: .85rem; }

/* "Weet ik niet": een tekstknop onder Controleer. */
.knop-tekst { justify-self: center; padding: 8px 14px; border: 0; background: none; color: var(--grijs);
              font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.knop-tekst:hover { color: var(--rojo); }

/* Controleer: direct onder de accenten. Leeg veld: rood maar transparanter. */
.knop-controleer .icoon, .knop-controleer .alleen-toetsenbord { display: none; }
.knop-controleer.is-leeg { opacity: .55; box-shadow: none; }

/* --- Toetsenbord open (toetsenbord.js zet body.toetsenbord-open en --vv-onder) ------------ */
/* Kop en kaart klappen in; het antwoordformulier wordt een witte balk direct boven het toetsenbord,
   met het veld, rechts "Check ✓" en daaronder de accentknoppen (mock-v4). */
body.toetsenbord-open .oefen-held { padding-top: calc(8px + env(safe-area-inset-top)); padding-bottom: 18px; }
body.toetsenbord-open .oefen-lesnaam { font-size: 1.15rem; }
body.toetsenbord-open .sluit { width: 38px; height: 38px; border-radius: 12px; }
body.toetsenbord-open .oefen-voortgang { margin-top: 8px; }
body.toetsenbord-open .oefen { padding-top: 12px; padding-bottom: 200px; }
body.toetsenbord-open .vraag-compact { padding: 12px 14px; gap: 12px; grid-template-columns: auto 1fr; }
/* Chips rechtsboven over de kaart, zodat het label op één regel past (mock-v4). */
body.toetsenbord-open .vraag-chips { position: absolute; top: 10px; right: 12px; display: grid; justify-items: end; gap: 4px; }
body.toetsenbord-open .vraag-chips .chip { padding: 2px 10px; font-size: .8rem; }
body.toetsenbord-open .vraag-label { font-size: .68rem; letter-spacing: .06em; white-space: nowrap; }
body.toetsenbord-open .vraag-compact .vraag-icoon { width: 44px; height: 44px; border-radius: 13px; color: var(--wit); background: var(--rojo); }
body.toetsenbord-open .vraag-compact .vraag-woord { font-size: 28px; }
body.toetsenbord-open .vraag-meta { display: none; }
body.toetsenbord-open .chip-met-lw:not([hidden]) { display: inline-block; }
body.toetsenbord-open .antwoord { position: fixed; z-index: 15; left: 0; right: 0; bottom: var(--vv-onder, 0px); margin: 0;
                                  padding: 10px 16px 10px; grid-template-columns: 1fr auto; gap: 10px;
                                  background: var(--wit); border-top: 1px solid var(--rand);
                                  box-shadow: 0 -12px 28px rgb(35 24 21 / .1); }
body.toetsenbord-open .antwoord-label { display: none; }
body.toetsenbord-open .invoer { grid-column: 1; grid-row: 1; }
body.toetsenbord-open .invoer input { padding: 11px 44px 11px 14px; font-size: 1.25rem; }
body.toetsenbord-open .knop-controleer { grid-column: 2; grid-row: 1; width: auto; min-height: 0; padding: 0 18px;
                                         font-size: 1.1rem; border-radius: 16px; }
body.toetsenbord-open .knop-controleer .alleen-groot { display: none; }
body.toetsenbord-open .knop-controleer .alleen-toetsenbord, body.toetsenbord-open .knop-controleer .icoon { display: inline; }
body.toetsenbord-open .accenten { grid-column: 1 / -1; grid-row: 2; }
body.toetsenbord-open .accent { min-height: 40px; font-size: 1.15rem; }
body.toetsenbord-open .weet-niet { grid-column: 1 / -1; grid-row: 3; padding: 2px 10px; font-size: .85rem; }

/* Andere invoerschermen (inloggen, registreren, reset): de verzendknop blijft boven het toetsenbord. */
body.los-scherm.toetsenbord-open { place-items: start center; padding-top: 12px; }
body.los-scherm.toetsenbord-open .los-kaart > p.dof { display: none; }
body.los-scherm.toetsenbord-open .formulier .knop-hoofd { position: sticky; z-index: 2;
                                                          bottom: calc(10px + var(--vv-onder, 0px)); }
/* Het actieve veld scrolt in beeld boven de plakkende knop (toetsenbord.js), niet erachter. */
body.los-scherm.toetsenbord-open .formulier input { scroll-margin-bottom: 84px; scroll-margin-top: 12px; }

.antwoord { margin-top: 20px; display: grid; gap: 12px; }
.antwoord-label { font-weight: 800; font-size: 1rem; }
.invoer { position: relative; border-radius: 20px; transition: box-shadow .15s; }
.invoer input { width: 100%; padding: 16px 56px 16px 20px; border: 2px solid var(--rand); border-radius: 18px;
                font: inherit; font-size: 1.45rem; font-weight: 700; color: var(--inkt); background: var(--wit);
                scroll-margin: 120px; }
.invoer input::placeholder { color: color-mix(in srgb, var(--grijs) 55%, var(--wit)); font-weight: 500; font-size: 1.1rem; }
.invoer input:focus { outline: none; border-color: var(--rojo); box-shadow: 0 0 0 5px var(--rojo-licht); }
.invoer-badge { position: absolute; top: 50%; right: 14px; display: grid; place-items: center; width: 32px; height: 32px;
                margin-top: -16px; border-radius: 50%; color: var(--wit); }
.invoer-badge:empty { display: none; }
.invoer-goed input { border-color: var(--olijf); box-shadow: 0 0 0 5px var(--olijf-licht); }
.invoer-goed .invoer-badge { background: var(--olijf); }
.invoer-bijna input { border-color: var(--gualda); box-shadow: 0 0 0 5px var(--gualda-licht); }
.invoer-bijna .invoer-badge { background: var(--gualda); }
.invoer-lidwoord input { border-color: var(--la); box-shadow: 0 0 0 5px var(--la-licht); }
.invoer-lidwoord .invoer-badge { background: var(--la); }
.invoer-fout input { border-color: var(--rojo); box-shadow: 0 0 0 5px var(--rojo-licht); }
.invoer-fout .invoer-badge { background: var(--rojo); }

.accenten { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.accent { min-height: 50px; padding: 0; border: 1px solid var(--rand); border-radius: 13px; background: var(--wit);
          color: var(--inkt); font-size: 1.3rem; font-weight: 700; cursor: pointer;
          box-shadow: 0 3px 0 var(--rand); touch-action: manipulation; }
.accent:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--rand); }

/* Het uitslagpaneel: een vel van onderen, in de kleur van de uitkomst. */
.uitslag { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto;
           padding: 22px 20px calc(20px + env(safe-area-inset-bottom)); border-radius: 30px 30px 0 0;
           background: var(--wit); border: 1px solid var(--rand); border-bottom: 0;
           box-shadow: 0 -16px 40px rgb(35 24 21 / .12); animation: omhoog .22s ease-out; }
@keyframes omhoog { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.uitslag-kop { display: flex; gap: 14px; align-items: center; }
.uitslag-icoon { flex: 0 0 auto; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; color: var(--wit); }
.uitslag-kop h2 { font-size: 1.4rem; line-height: 1.2; }
.uitslag-kop p { margin: 2px 0 0; color: var(--grijs); font-weight: 500; }
.juist { margin: 16px 0 12px; padding: 14px 18px; border-radius: 18px; background: var(--wit); border: 1px solid var(--rand);
         font-size: 1.75rem; font-weight: 800; letter-spacing: -.01em; white-space: pre-wrap; overflow-wrap: anywhere; }
.letter { border-radius: 7px; }
.letter-accent { padding: 0 2px; color: var(--wit); background: var(--gualda); }
.letter-fout { padding: 0 2px; color: var(--wit); background: var(--rojo); }
.letter-lidwoord { text-decoration: underline 3px; text-underline-offset: 6px; }
.tip { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; color: var(--grijs); font-weight: 500; }
.tip .icoon { flex: 0 0 auto; color: var(--rojo); margin-top: 1px; }
.uitslag .knop { color: var(--wit); }

.uitslag-goed { background: var(--olijf-licht); border-color: color-mix(in srgb, var(--olijf) 30%, var(--wit)); }
.uitslag-goed .uitslag-icoon, .uitslag-goed .knop { background: var(--olijf); }
.uitslag-goed h2 { color: var(--olijf-tekst); }
.uitslag-bijna { background: var(--gualda-licht); border-color: color-mix(in srgb, var(--gualda) 45%, var(--wit)); }
.uitslag-bijna .uitslag-icoon, .uitslag-bijna .knop { background: var(--gualda); }
.uitslag-bijna .knop { color: var(--inkt); }   /* wit op gualda haalt geen 4,5:1; inkt wel */
.uitslag-bijna h2 { color: var(--gualda-tekst); }
.uitslag-lidwoord { background: var(--la-licht); border-color: color-mix(in srgb, var(--la) 30%, var(--wit)); }
.uitslag-lidwoord .uitslag-icoon, .uitslag-lidwoord .knop { background: var(--la); }
.uitslag-lidwoord h2 { color: var(--la); }
.uitslag-fout { background: var(--rojo-licht); border-color: color-mix(in srgb, var(--rojo) 25%, var(--wit)); }
.uitslag-fout .uitslag-icoon, .uitslag-fout .knop { background: var(--rojo); }
.uitslag-fout h2 { color: var(--rojo-donker); }

.klaar-kaart { margin-top: 30px; padding: 30px 22px; border-radius: 26px; text-align: center; background: var(--wit);
               border: 1px solid var(--rand); box-shadow: var(--schaduw); }
.klaar-icoon { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 24px;
               color: var(--wit); background: var(--olijf); }
.klaar-kaart h1 { font-size: 1.9rem; }
.klaar-cijfers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 20px 0; }
.klaar-cijfer { display: grid; padding: 10px 4px; border-radius: 14px; font-size: .78rem; font-weight: 600; }
.klaar-cijfer b { font-size: 1.4rem; font-weight: 800; }
.klaar-goed { color: var(--olijf-tekst); background: var(--olijf-licht); }
.klaar-bijna { color: var(--gualda-tekst); background: var(--gualda-licht); }
.klaar-lidwoord { color: var(--la); background: var(--la-licht); }
.klaar-fout { color: var(--rojo); background: var(--rojo-licht); }

/* --- ¿El o la? (fase 1d) ------------------------------------------------------------- */
.genero-kaart { display: flex; gap: 14px; align-items: center; }
.genero-beeld { flex: 0 0 auto; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px;
                background: var(--grond); border: 1px solid var(--rand); font-family: var(--font-kop); font-weight: 800;
                font-size: 1.15rem; line-height: 1; }
.genero-info { flex: 1 1 auto; min-width: 0; }
.genero-info p { color: var(--grijs); font-size: .92rem; }
.genero-info .genero-procent { color: var(--olijf-tekst); font-weight: 700; }
.knop-kobalt { color: var(--wit); background: var(--kobalt); }
.knop-kobalt:hover, .knop-kobalt:active { background: color-mix(in srgb, var(--kobalt) 80%, var(--inkt)); }
.genero-kaart .knop { flex: 0 0 auto; padding: 12px 16px; }
.held-tegel .klein-procent { font-size: 1rem; }

.genero-kaart-vraag { padding-top: 18px; }
.genero-labels { display: flex; justify-content: center; gap: 6px; min-height: 28px; }
.genero-labels:not(:has(.chip:not([hidden]))) { display: none; }   /* geen label: geen lege rij */
.chip-ojo { color: var(--gualda-tekst); background: var(--gualda-licht); border: 1px solid var(--gualda); font-weight: 800; }
.genero-nl { margin: 10px 0 2px; color: var(--grijs); font-size: 1.05rem; font-weight: 600; }
.genero-es { margin: 2px 0 6px; font-size: clamp(2.4rem, 12vw, 3.2rem); }
.genero-lw:empty { display: none; }
.genero-knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.genero-knop { display: grid; place-items: center; gap: 2px; min-height: 96px; padding: 10px; border: 0; border-radius: 22px;
               color: var(--wit); font-family: var(--font-kop); font-size: 2.4rem; font-weight: 800; line-height: 1;
               cursor: pointer; touch-action: manipulation; transition: transform .08s, background .15s, opacity .15s; }
.genero-knop small { font-family: var(--font-tekst); font-size: .72rem; font-weight: 600; opacity: .8; }
.genero-knop:active { transform: scale(.97); }
.genero-knop:focus-visible { outline: 3px solid var(--gualda); outline-offset: 3px; }
.genero-el { background: var(--el); box-shadow: 0 8px 0 color-mix(in srgb, var(--el) 70%, var(--inkt)); }
.genero-la { background: var(--la); box-shadow: 0 8px 0 color-mix(in srgb, var(--la) 70%, var(--inkt)); }
.genero-knop:disabled { cursor: default; }
.genero-knop.is-goed { background: var(--olijf); box-shadow: 0 8px 0 color-mix(in srgb, var(--olijf) 70%, var(--inkt)); }
.genero-knop.is-fout { background: var(--rojo); box-shadow: 0 8px 0 var(--rojo-donker); }
.genero-knop.is-juist { outline: 4px solid var(--olijf); outline-offset: 3px; }
.genero-knop.is-uit { opacity: .35; }
#genero[data-staat="goed"] .vraag-kaart { border-color: var(--olijf); box-shadow: 0 0 0 5px var(--olijf-licht), var(--schaduw); }
.genero-score { margin: 6px 0 2px; font-family: var(--font-kop); font-size: 1.5rem; font-weight: 800; color: var(--olijf-tekst); }
.genero-gemist { margin: 14px 0 6px; text-align: left; }
.genero-gemist h2 { font-size: 1.05rem; margin-bottom: 6px; }
.genero-gemist ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.genero-gemist li { padding: 5px 12px; border-radius: 999px; background: var(--grond); border: 1px solid var(--rand);
                    font-weight: 700; }

/* --- Stipjes in plaats van "bak" (fase 1f) ----------------------------------------------- */
.stipjes { display: inline-flex; gap: 4px; vertical-align: middle; margin-right: 2px; }
.stipjes i { width: 10px; height: 10px; border-radius: 50%; background: var(--rand); }
.stipjes i.vol { background: var(--olijf); }
/* ⓘ: klein rondje, maar een tikvlak van 44 x 44 px. */
.info-knop { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -12px -10px -12px -4px;
             padding: 0; border: 0; background: none; cursor: pointer; vertical-align: middle; color: var(--grijs);
             font: italic 800 .8rem/1 var(--font-kop); }
.info-knop::before { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
                     border: 1.5px solid currentColor; }
.info-knop:hover, .info-knop:focus-visible { color: var(--rojo); outline: none; }

/* Uitlegblad: een <dialog> als vel van onderen. */
.blad { width: min(560px, 100%); max-width: 100%; margin: auto auto 0; padding: 22px 20px calc(18px + env(safe-area-inset-bottom));
        border: 1px solid var(--rand); border-bottom: 0; border-radius: 26px 26px 0 0; background: var(--wit); color: var(--inkt);
        box-shadow: 0 -16px 40px rgb(35 24 21 / .18); }
.blad[open] { animation: omhoog .2s ease-out; }
.blad::backdrop { background: rgb(35 24 21 / .45); }
.blad h2 { font-size: 1.35rem; margin-bottom: 8px; }
.blad p { margin: 0 0 12px; color: var(--grijs); }
.blad form { margin-top: 16px; }
.stipjes-legenda { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-weight: 600; }
.stipjes-legenda li { display: flex; align-items: center; gap: 10px; }
.stipjes-legenda .stipjes { min-width: 66px; }

/* Pagina "Hoe werkt hola?" */
.uitleg-titel { margin-top: 18px; }
.held:has(.uitleg-titel) { padding-bottom: 92px; }
.uitleg-pagina .kaart h2 { margin-bottom: 6px; }
.uitleg-pagina .kaart p { color: var(--grijs); }
.uitleg-pagina .kaart p + p { margin-top: 8px; }
.uitleg-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--inkt);
               font-weight: 800; text-decoration: none; }
.uitleg-link .icoon { color: var(--rojo); }

@media (min-width: 600px) {
    .pagina { max-width: 560px; margin-left: auto; margin-right: auto; }
    .held { padding-left: max(20px, calc(50% - 260px)); padding-right: max(20px, calc(50% - 260px)); }
}