/* ==========================================================================
   Per scherm.
   ========================================================================== */

/* ======================================================================== */
/* Wie speelt er?                                                            */
/* ======================================================================== */

.scherm--wie { justify-content: center; }

.wie-binnen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--r-4);
    padding: var(--r-5);
    width: 100%;
    max-width: 640px;
}

.wie-mascotte { line-height: 0; }

.wie-titel {
    font-size: var(--t-groot);
    color: var(--paars);
    text-align: center;
}

.wie-kaarten {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--r-4);
    width: 100%;
}

.speler-kaart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--r-2);
    min-height: 180px;
    padding: var(--r-4);
    border: none;
    border-radius: var(--rond-l);
    background: var(--kaart-verloop);
    color: var(--kaart-inkt);
    box-shadow: var(--schaduw-m);
    cursor: pointer;
    -webkit-appearance: none;
    transition: transform .14s ease, box-shadow .14s ease;
}

.speler-kaart:active { transform: scale(.96); box-shadow: var(--schaduw-s); }

.speler-kaart__avatar { font-size: 4rem; line-height: 1; }

.speler-kaart__naam {
    font-size: 1.4rem;
    font-weight: 800;
    text-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* Bewust klein en tekstueel: bedoeld voor een logeetje of een snelle demo,
   niet voor dagelijks gebruik. */
.gast-knop {
    margin-top: var(--r-2);
    padding: var(--r-2) var(--r-4);
    min-height: 48px;
    border: none;
    border-radius: var(--rond-vol);
    background: transparent;
    color: var(--inkt-zacht);
    font-size: var(--t-klein);
    text-decoration: underline;
    cursor: pointer;
    -webkit-appearance: none;
}

.gast-knop:active { color: var(--paars); }

/* ======================================================================== */
/* Hoofdmenu                                                                 */
/* ======================================================================== */

.scherm--menu {
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.menu-groet {
    flex: 1;
    text-align: center;
    font-size: var(--t-groot);
    color: var(--paars);
}

.profiel-knop {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border: 3px solid var(--paars-rand);
    border-radius: var(--rond-vol);
    background: var(--vlak);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
}

.profiel-knop__avatar { font-size: 1.7rem; line-height: 1; }

/* De wereldbalk: waar speel je, en de knop om te wisselen. Hij staat op het
   menu in plaats van er een scherm voor te zetten, zodat de weg naar een level
   even kort blijft als hij was: menu, leerlijn, onderwerp. */
.wereldbalk {
    display: flex;
    align-items: center;
    gap: var(--r-3);
    width: calc(100% - 2 * var(--r-4));
    max-width: 880px;
    min-height: var(--raak-min);
    margin: 0 var(--r-4) var(--r-3);
    padding: var(--r-2) var(--r-4);
    border: none;
    border-radius: var(--rond-vol);
    background: var(--kaart-verloop);
    color: var(--kaart-inkt);
    box-shadow: var(--schaduw-m);
    cursor: pointer;
    -webkit-appearance: none;
    transition: transform .14s ease;
}

.wereldbalk:active { transform: scale(.98); }

.wereldbalk__icoon { font-size: 1.7rem; line-height: 1; }

.wereldbalk__naam {
    flex: 1;
    text-align: left;
    font-size: 1.15rem;
    font-weight: 800;
}

.wereldbalk__pijl { font-size: 1.6rem; line-height: 1; opacity: .8; }

/* De ring van de modulekaart hergebruiken, maar meelopend in de balk in plaats
   van in de hoek geparkeerd. Relatief en niet statisch: de svg erin staat
   absoluut en moet zich aan de ring vasthouden. */
.wereldbalk .module-kaart__ring {
    position: relative;
    top: auto;
    right: auto;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

.wereldbalk .module-kaart__ringtekst { font-size: .52rem; }

.module-raster {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--r-4);
    width: 100%;
    max-width: 880px;
    padding: 0 var(--r-4) var(--r-7);
}

@media (min-width: 620px) { .module-raster { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 940px) { .module-raster { grid-template-columns: repeat(4, 1fr); } }

/* Het leerlijn-scherm hergebruikt .module-raster; alleen de scroll verschilt. */
.scherm--lijn {
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* De leerlijnkaart is dezelfde kaart als een onderwerp, maar er staan er maar
   vier, dus hij mag groter en er past een regel tekst onder. */
.module-kaart--lijn { min-height: 150px; }

/* Een leerlijn telt de levels van al zijn onderwerpen bij elkaar op, dus daar
   staat "0/105" in plaats van "0/21" — en dat past niet meer in dezelfde ring. */
.module-kaart--lijn .module-kaart__ring { width: 38px; height: 38px; }
.module-kaart--lijn .module-kaart__ringtekst { font-size: .52rem; }

.module-kaart__onder {
    font-size: var(--t-klein);
    font-weight: 600;
    opacity: .85;
}

.module-kaart {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--r-2);
    min-height: 128px;
    padding: var(--r-4);
    border: none;
    border-radius: var(--rond-l);
    background: var(--kaart-verloop);
    color: var(--kaart-inkt);
    font-size: 1.1rem;
    font-weight: 700;
    box-shadow: var(--schaduw-m);
    cursor: pointer;
    -webkit-appearance: none;
    transition: transform .14s ease, box-shadow .14s ease;
}

.module-kaart:active { transform: scale(.95); box-shadow: var(--schaduw-s); }

.module-kaart__icoon { font-size: 2.9rem; line-height: 1; }
.module-kaart__label { text-shadow: 0 1px 3px rgba(0,0,0,.28); }

.module-kaart__ring {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
}

.module-kaart__ring svg { position: absolute; inset: 0; }

.module-kaart__ringtekst {
    position: relative;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: -.02em;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

.module-kaart__ring--kaal {
    position: absolute;
    width: auto; height: auto;
    font-size: .7rem;
    font-weight: 700;
}

/* ======================================================================== */
/* Werelden                                                                  */
/* ======================================================================== */

.scherm--werelden {
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Onder elkaar en niet in een raster: er zijn er hooguit vier en de volgorde
   is de opbouw — een raster zou suggereren dat je maar wat kunt kiezen. */
.werelden-raster {
    display: flex;
    flex-direction: column;
    gap: var(--r-4);
    width: 100%;
    max-width: 560px;
    padding: var(--r-4) var(--r-4) var(--r-7);
}

.wereld-kaart {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    align-items: center;
    gap: 0 var(--r-4);
    min-height: 110px;
    padding: var(--r-4) var(--r-5);
    border: none;
    border-radius: var(--rond-l);
    background: var(--kaart-verloop);
    color: var(--kaart-inkt);
    text-align: left;
    box-shadow: var(--schaduw-m);
    cursor: pointer;
    -webkit-appearance: none;
    transition: transform .14s ease;
}

.wereld-kaart:active { transform: scale(.98); }

/* Een wereld op slot blijft leesbaar maar vraagt geen aandacht: hij is er om
   te laten zien dát er meer komt, niet om op te tikken. */
.wereld-kaart--slot { opacity: .6; box-shadow: var(--schaduw-s); }

/* Waar je nu speelt krijgt een rand in plaats van een tekstlabel alleen —
   een kind dat niet leest ziet het zo ook. */
.wereld-kaart--hier { outline: 4px solid var(--goud); outline-offset: 3px; }

.wereld-kaart__icoon {
    grid-row: 1 / span 3;
    font-size: 2.6rem;
    line-height: 1;
}

.wereld-kaart__naam { font-size: 1.35rem; font-weight: 800; }

.wereld-kaart__onder {
    font-size: var(--t-klein);
    font-weight: 600;
    opacity: .9;
}

.wereld-kaart__balk {
    display: block;
    margin-top: var(--r-2);
    height: 8px;
    border-radius: var(--rond-vol);
    background: rgba(255,255,255,.35);
    overflow: hidden;
}

.wereld-kaart__balk i {
    display: block;
    height: 100%;
    border-radius: var(--rond-vol);
    background: #fff;
}

/* ======================================================================== */
/* Levelpad                                                                  */
/* ======================================================================== */

.scherm--pad { justify-content: flex-start; }

.stickerkaart {
    width: 100%;
    max-width: 560px;
    flex-shrink: 0;
    padding: var(--r-3) var(--r-4) var(--r-2);
    text-align: center;
}

.stickerkaart__rij {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--r-2);
}

.sticker {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: var(--rond-s);
    background: rgba(255,255,255,.6);
    border: 2px dashed var(--lijn);
    font-size: 1.2rem;
    line-height: 1;
}

.sticker--verdiend {
    background: var(--vlak);
    border-style: solid;
    border-color: var(--goud);
    box-shadow: var(--schaduw-s);
}

.stickerkaart__label {
    margin-top: var(--r-2);
    font-size: var(--t-klein);
    font-weight: 700;
    color: var(--inkt-zacht);
}

/* "Meer tellen wacht in Het Strand" — alleen als dit paadje uit is. */
.stickerkaart__verder {
    margin-top: var(--r-1);
    font-size: var(--t-klein);
    font-weight: 600;
    color: var(--paars);
}

.pad-schuif {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.pad {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--r-4) var(--r-4) var(--r-7);
}

.pad-stap {
    transform: translateX(var(--uitwijking, 0));
}

/* Drie stipjes tussen twee stappen: leest als een pad, zonder dat er een
   SVG-lijn tussen dynamische hoogtes gerekend hoeft te worden. */
.pad-verbinding {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 6px 0;
    transform: translateX(var(--uitwijking, 0));
}

.pad-verbinding i {
    width: 7px;
    height: 7px;
    border-radius: var(--rond-vol);
    background: var(--paars-rand);
}

.stap-knop {
    position: relative;
    width: 88px;
    height: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 4px solid var(--paars-rand);
    border-radius: var(--rond-vol);
    background: var(--vlak);
    color: var(--paars);
    cursor: pointer;
    box-shadow: var(--schaduw-s);
    -webkit-appearance: none;
    transition: transform .12s ease;
}

.stap-knop:active { transform: scale(.94); }

.stap-knop__nummer { font-size: 1.7rem; font-weight: 800; line-height: 1; }
.stap-knop__merk   { font-size: .78rem; line-height: 1; }

.stap-knop--gehaald {
    border-color: var(--goed);
    background: var(--goed-vlak);
    color: #1d7a4d;
}

.stap-knop--nu {
    border-color: var(--goud);
    box-shadow: 0 0 0 6px rgba(240, 193, 75, .28), var(--schaduw-m);
    animation: kloppen 1.9s ease-in-out infinite;
}

.stap-knop--slot {
    border-color: var(--lijn);
    background: #f6f7fb;
    color: var(--inkt-zacht);
    opacity: .6;
    cursor: default;
    box-shadow: none;
}

/* ======================================================================== */
/* Oefenscherm                                                               */
/* ======================================================================== */

.scherm--oefening { justify-content: flex-start; }

.bolletjes {
    display: flex;
    gap: var(--r-2);
    flex: 1;
    justify-content: center;
}

.bol {
    width: 14px;
    height: 14px;
    border-radius: var(--rond-vol);
    background: var(--lijn);
    transition: background .2s ease, transform .2s ease;
}

.bol--goed { background: var(--goed); }
.bol--fout { background: var(--mis); }
.bol--nu   { background: var(--paars); transform: scale(1.35); }

/* Alles zit in het midden bij elkaar: vraag, antwoorden en de doorgaan-knop.
   In de oude versie stond die knop in een sticky footer onderaan het scherm,
   met op een liggende iPad honderden pixels leegte ertussen. */
.oefening-midden {
    flex: 1;
    width: 100%;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--r-4);
    padding: var(--r-4);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.vraagblok {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--r-3);
    width: 100%;
}

.oef-mascotte { flex-shrink: 0; line-height: 0; }

.vraagblok__tekst { text-align: center; min-width: 0; }

.vraag-tekst {
    font-size: var(--t-groot);
    font-weight: 800;
    line-height: 1.25;
    color: var(--inkt);
}

.vraag-beeld {
    margin-top: var(--r-2);
    font-size: clamp(2.2rem, 7vw, 4rem);
    line-height: 1.15;
    word-break: break-word;
}

.vraag-beeld--veel { font-size: clamp(1.4rem, 4.5vw, 2.4rem); }
.vraag-beeld img   { max-height: 130px; max-width: 100%; }

.kleurvlak {
    width: min(240px, 60vw);
    height: 92px;
    margin: 0 auto;
    border-radius: var(--rond-m);
    box-shadow: var(--schaduw-m);
}

.luisterknop {
    width: 104px;
    height: 104px;
    border: none;
    border-radius: var(--rond-vol);
    background: var(--v-indigo);
    color: #fff;
    font-size: 2.6rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    margin: var(--r-2) auto 0;
    box-shadow: var(--schaduw-m);
    -webkit-appearance: none;
    transition: transform .14s ease;
}

.luisterknop:active { transform: scale(.93); }
.luisterknop--speelt { animation: kloppen .6s ease infinite; }

/* --- Antwoorden --- */

.opties {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--r-3);
    width: 100%;
}

.optie {
    position: relative;
    flex: 1 1 150px;
    max-width: 230px;
    min-height: 96px;
    padding: var(--r-4) var(--r-5);
    border: 4px solid var(--lijn);
    border-radius: var(--rond-m);
    background: var(--vlak);
    font-size: clamp(1.25rem, 3.6vw, 1.8rem);
    font-weight: 700;
    color: var(--inkt);
    cursor: pointer;
    box-shadow: var(--schaduw-s);
    -webkit-appearance: none;
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.optie:active { transform: scale(.96); }

.optie-groot { font-size: clamp(2.4rem, 8vw, 3.6rem); min-height: 118px; }

.optie--kleur { min-height: 104px; border-color: rgba(0,0,0,.12); }

.optie__luister {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: .82rem;
    opacity: .4;
    padding: 6px;
    line-height: 1;
}

.optie--goed {
    border-color: var(--goed);
    background: var(--goed-vlak);
    animation: ploppen .35s ease;
}

.optie--mis {
    border-color: var(--mis);
    background: var(--mis-vlak);
    animation: schudden .4s ease;
}

.optie--uit { pointer-events: none; opacity: .45; }
.optie--goed.optie--uit { opacity: 1; }

/* De knop die na twee fouten aanwijst wat het juiste antwoord was. */
.optie--wijs { animation: ploppen .45s ease 2; }

/* Licht op terwijl de app dit antwoord voorleest. */
.optie--leest {
    border-color: var(--paars);
    box-shadow: 0 0 0 5px rgba(74, 60, 181, .18), var(--schaduw-s);
}

/* --- Terugkoppeling en acties --- */

.terugkoppeling { min-height: 2.2rem; text-align: center; }

.terugkoppeling__tekst { font-size: 1.35rem; font-weight: 800; }
.terugkoppeling__tekst--goed  { color: var(--goed); }
.terugkoppeling__tekst--bijna { color: var(--bijna); }
.terugkoppeling__tekst--fout  { color: var(--mis); }

.oefening-acties {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--r-3);
    min-height: var(--raak-min);
}

/* --- Uitslag --- */

.uitslag { text-align: center; }

.uitslag__sterren {
    display: flex;
    justify-content: center;
    gap: var(--r-2);
    font-size: clamp(2.6rem, 9vw, 4.4rem);
    line-height: 1;
}

.uitslag__ster { opacity: .3; }
.uitslag__ster--aan { opacity: 1; animation: sterIn .5s ease both; }

.uitslag__tekst {
    margin-top: var(--r-3);
    font-size: clamp(1.2rem, 4vw, 1.8rem);
    font-weight: 700;
    color: var(--paars);
    line-height: 1.4;
}

.uitslag__wereld {
    margin-top: var(--r-3);
    padding: var(--r-2) var(--r-4);
    border-radius: var(--rond-vol);
    background: var(--v-groen);
    color: #fff;
    font-size: clamp(1rem, 3.4vw, 1.35rem);
    font-weight: 800;
    display: inline-block;
    animation: sterIn .5s .3s ease both;
}

/* ======================================================================== */
/* Ouderhoek                                                                 */
/* ======================================================================== */

.scherm--ouders { justify-content: flex-start; }

.ouders-inhoud {
    width: 100%;
    max-width: 680px;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--r-4) var(--r-4) var(--r-7);
    display: flex;
    flex-direction: column;
    gap: var(--r-4);
    user-select: text;
    -webkit-user-select: text;
}

.ouders-blok {
    background: var(--vlak);
    border-radius: var(--rond-m);
    padding: var(--r-4);
    box-shadow: var(--schaduw-s);
}

.ouders-blok h3 { font-size: 1.15rem; color: var(--paars); margin-bottom: var(--r-3); }
.ouders-blok h4 { font-size: 1rem; color: var(--paars); margin: var(--r-4) 0 var(--r-2); }

.ouders-regel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--r-3);
    min-height: 48px;
    padding: var(--r-2) 0;
    border-bottom: 1px solid var(--lijn);
    font-size: var(--t-basis);
}

.ouders-regel:last-of-type { border-bottom: none; }

.ouders-regel input[type="checkbox"] { width: 26px; height: 26px; }
.ouders-regel input[type="range"]    { width: 160px; }

.ouders-uitleg,
.ouders-laden {
    font-size: var(--t-klein);
    color: var(--inkt-zacht);
    line-height: 1.5;
}

.ouders-let-op {
    margin-top: var(--r-3);
    padding: var(--r-3);
    border-radius: var(--rond-s);
    background: var(--bijna-vlak);
    color: #7a4f06;
    font-size: var(--t-klein);
    line-height: 1.5;
}

.ouders-tabel { width: 100%; border-collapse: collapse; font-size: var(--t-klein); }
.ouders-tabel th,
.ouders-tabel td { padding: var(--r-2); text-align: left; border-bottom: 1px solid var(--lijn); }
.ouders-tabel th { color: var(--inkt-zacht); font-weight: 700; }
.ouders-tabel td:nth-child(2),
.ouders-tabel td:nth-child(3),
.ouders-tabel th:nth-child(2),
.ouders-tabel th:nth-child(3) { text-align: right; width: 4.5rem; }

.ouders-lijst { list-style: none; font-size: var(--t-klein); line-height: 1.7; }
.ouders-lijst li { padding: var(--r-1) 0; border-bottom: 1px solid var(--lijn); }
.ouders-lijst em { color: var(--inkt-zacht); font-style: normal; }

.ouders-blok .knop { margin-top: var(--r-3); width: 100%; }

/* ======================================================================== */
/* Responsief                                                                */
/* ======================================================================== */

/* Liggend op een korte telefoon: de mascotte kost hier meer dan hij oplevert. */
@media (orientation: landscape) and (max-height: 520px) {
    .oefening-midden { gap: var(--r-3); padding: var(--r-2) var(--r-4); }
    .oef-mascotte { display: none; }
    .vraag-beeld { margin-top: var(--r-1); font-size: clamp(1.8rem, 5vw, 2.8rem); }
    .luisterknop { width: 78px; height: 78px; font-size: 2rem; margin-top: 0; }
    .optie { min-height: 74px; padding: var(--r-3); }
    .optie-groot { min-height: 84px; }
    .kleurvlak { height: 62px; }
    .terugkoppeling { min-height: 1.6rem; }
    .terugkoppeling__tekst { font-size: 1.1rem; }

    .stap-knop { width: 72px; height: 72px; }
    .stap-knop__nummer { font-size: 1.4rem; }
    .stickerkaart { padding: var(--r-2) var(--r-4) 0; }
    .sticker { width: 28px; height: 28px; font-size: 1rem; }

    .module-raster { grid-template-columns: repeat(5, 1fr); gap: var(--r-3); }
    .module-kaart { min-height: 96px; padding: var(--r-3); font-size: .92rem; }
    .module-kaart__icoon { font-size: 2rem; }

    .wie-kaarten .speler-kaart { min-height: 130px; }
    .speler-kaart__avatar { font-size: 3rem; }
}

/* Smalle telefoons. */
@media (max-width: 400px) {
    .module-kaart { min-height: 108px; font-size: .95rem; }
    .module-kaart__icoon { font-size: 2.3rem; }
    .optie { min-height: 84px; padding: var(--r-3); flex-basis: 120px; }
    .stap-knop { width: 78px; height: 78px; }
    .speler-kaart { min-height: 150px; }
    .speler-kaart__avatar { font-size: 3.2rem; }
}

/* Regel in de ouderhoek die onder elkaar staat (route met uitleg eronder). */
.ouders-regel--kolom {
    flex-direction: column;
    align-items: stretch;
    gap: var(--r-2);
}

.ouders-regel--kolom select { width: 100%; padding: var(--r-2); border-radius: var(--rond-s);
                              border: 2px solid var(--lijn); background: var(--vlak); }

/* Tweekeuzevragen: instapniveau voor de jongste. Grotere knoppen, want een
   peuter mikt met de hele hand en niet met een vingertop. */
.opties--weinig .optie {
    flex: 1 1 44%;
    max-width: 330px;
    min-height: 128px;
    font-size: clamp(1.5rem, 5vw, 2.2rem);
}

.opties--weinig .optie-groot { font-size: clamp(3rem, 11vw, 5rem); min-height: 150px; }

@media (orientation: landscape) and (max-height: 520px) {
    .opties--weinig .optie { min-height: 92px; }
    .opties--weinig .optie-groot { min-height: 104px; font-size: clamp(2.2rem, 7vw, 3.4rem); }
}

/* Plaatje en luisterknop naast elkaar (rijmvragen: hoor "tak", zie er ook een). */
.vraag-beeld--duo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--r-4);
}

.vraag-beeld--duo .luisterknop { margin: 0; width: 84px; height: 84px; font-size: 2.1rem; }
.vraag-beeld__plaatje { line-height: 1.1; }