/* Verhaalpagina (/editor/story): een begeleide flow op een open boek
   (docs/VERHAAL-MAKEN.md). Eén vraag per bladzijde op de rechterbladzijde;
   de feed met verhalen is bladzijde 4. Logica in story_editor.js. */

.vk-page {
    --vk-green: #448c74; --vk-green-dark: #2f4a3f; --vk-green-soft: #f0f7f4; --vk-line: #e3e9ef; --vk-muted: #6b7280; --vk-ink: #2f3742;
    --ob-papier: #fff; --ob-kaft: #2f6f59;
}
.vk-page { overflow-x: clip; }  /* stroken en de linkerbladzijde nooit horizontaal laten scrollen */

/* ── Het open boek ──────────────────────────────────────────────────── */
/* Zoals een opengeslagen hardcover van voren gezien: rechts de bladzijde,
   plat, met kaft en snede; links de omgeslagen kaft met de eerste bladzijde,
   een plat vlak dat om de rug naar je toe staat (--ob-hoek). Door het
   perspectief is de buitenrand daar hoger dan de rug en wordt alles erop,
   ook "Het boek van Noor", vanzelf mee verkort. Echte 3D: perspective op
   .ob-boek met de rug als oorsprong, zodat het omslaande blad (blader) in
   precies de stand van de linkerkant landt.
   --ob-w/--ob-h: maat van de rechterbladzijde. Desktop vierkant (het boek is
   21 x 21), mobiel staand zoals een A4. --ob-links: hoe breed de omgeslagen
   kant er van voren uitziet. Het boek staat verticaal in het midden en past
   altijd op het scherm. */
.ob-tafel { min-height: 100vh; padding: calc(70px + 1.25rem) 0 1.5rem; display: flex; align-items: center; }
@supports (height: 100dvh) { .ob-tafel { min-height: 100dvh; } }
.ob-tafel > .container { width: 100%; }
.ob-boek {
    --ob-s: max(28rem, min(46rem, calc((100vh - 70px - 3rem) / 1.22), calc((100vw - 6rem) / 1.43)));
    --ob-w: var(--ob-s); --ob-h: var(--ob-s);
    --ob-hoek: 70deg;
    --ob-links: calc(var(--ob-w) * .39);
    --ob-pad: calc(var(--ob-w) * .058);
    display: flex; justify-content: center; align-items: stretch; margin: 0 auto; width: max-content; max-width: 100%;
    perspective: calc(var(--ob-w) * 8); perspective-origin: var(--ob-links) 50%;
}
@supports (height: 100dvh) {
    .ob-boek { --ob-s: max(28rem, min(46rem, calc((100dvh - 70px - 3rem) / 1.22), calc((100vw - 6rem) / 1.43))); }
}
.ob-links { position: relative; flex: none; width: var(--ob-links); height: var(--ob-h); transform-style: preserve-3d; }
.ob-links-blad {
    position: absolute; top: 0; right: 0; width: var(--ob-w); height: var(--ob-h);
    transform-origin: right center; transform: rotateY(var(--ob-hoek)); transform-style: preserve-3d;
}
/* Kaft (boven, buiten, onder), snede van de bladzijden aan de buitenkant, papier */
.ob-links-kaft {
    position: absolute; inset: -10px 0 -22px -20px; border-radius: 10px 0 0 10px;
    background: repeating-linear-gradient(45deg, #2b6652 0 2px, #2f6f59 2px 5px);
}
.ob-links-snede {
    position: absolute; inset: 0; border-radius: 4px 0 0 4px;
    box-shadow:
        -1.6px 1.6px 0 #d8d8d8, 0 1.6px 0 #d8d8d8, -3.2px 3.2px 0 #f2f2f2, 0 3.2px 0 #f2f2f2,
        -4.8px 4.8px 0 #d8d8d8, 0 4.8px 0 #d8d8d8, -6.4px 6.4px 0 #f2f2f2, 0 6.4px 0 #f2f2f2,
        -8px 8px 0 #d8d8d8, 0 8px 0 #d8d8d8, -9.6px 9.6px 0 #f2f2f2, 0 9.6px 0 #f2f2f2,
        -11.2px 11.2px 0 #d8d8d8, 0 11.2px 0 #d8d8d8, -12.8px 12.8px 0 #f2f2f2, 0 12.8px 0 #f2f2f2,
        -14.4px 14.4px 0 #cfcfcf, 0 14.4px 0 #cfcfcf;
}
.ob-links-papier {
    position: absolute; inset: 0; border-radius: 4px 0 0 4px; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; padding: 18% 0 12%; text-align: center;
    /* Een pixel voor kaft en snede: in hetzelfde 3D-vlak kiest de browser bij een klik anders het verkeerde element */
    transform: translateZ(1px);
    background-color: var(--ob-papier);
    background-image: linear-gradient(to right, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, .05) 80%, rgba(0, 0, 0, .2));
}
/* De titelpagina: bij elke keuze een regel erbij; een tik gaat terug naar die vraag.
   Op het vlak zelf horizontaal opgerekt (--ob-rek), anders maakt de steile
   hoek de letters onleesbaar smal; het perspectief houdt hij wel. */
.ob-links-tekst {
    --ob-rek: 1.9;
    width: calc(76% / var(--ob-rek)); transform: scaleX(var(--ob-rek)); transform-origin: center top;
    display: flex; flex-direction: column; align-items: center;
}
.ob-links-kop { font-family: Georgia, 'Times New Roman', serif; font-style: italic; color: #7b828c; font-size: calc(var(--ob-w) * .042); margin: 0; }
.ob-links-regel.ob-links-naam { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; color: var(--vk-ink); font-size: calc(var(--ob-w) * .1); line-height: 1.1; margin: .2em 0 .25em; max-width: 100%; overflow-wrap: anywhere; }
.ob-links-regel.ob-links-naam.is-leeg { color: #c4c9cf; font-weight: 400; font-style: italic; }
.ob-links-sier { width: 30%; height: 1px; background: #d8d8d8; margin: .4rem 0 1.6rem; }
.ob-links-regel {
    display: block; border: 0; background: none; padding: .15em .3em; margin: 0 0 .35em; border-radius: .3em; cursor: pointer;
    font-family: Georgia, 'Times New Roman', serif; color: #4b5563; font-size: calc(var(--ob-w) * .04); line-height: 1.3;
    transition: color .15s ease, background-color .15s ease;
}
.ob-links-regel:hover { color: var(--vk-green-dark); background: rgba(68, 140, 116, .08); }
/* Bij hover een potlood achter de regel: dit kun je wijzigen */
/* Naast de regel, zonder ruimte in te nemen (anders schuift een lange regel op) */
.ob-links-regel { position: relative; }
.ob-potlood {
    position: absolute; left: 100%; top: 50%; margin-left: .15em; font-size: .6em; line-height: 1;
    opacity: 0; transform: translate(-.25em, -50%); transition: opacity .15s ease, transform .2s cubic-bezier(.2, .8, .2, 1);
}
.ob-links-regel.ob-links-naam .ob-potlood { font-size: .32em; }
.ob-links-regel:hover .ob-potlood, .ob-links-regel:focus-visible .ob-potlood { opacity: 1; transform: translate(0, -50%); }
.ob-links-regel.is-titel { font-style: italic; font-weight: 700; color: var(--vk-green-dark); font-size: calc(var(--ob-w) * .046); }
/* Een nieuwe regel verschijnt terwijl de omgeslagen bladzijde neerkomt */
.ob-links-papier .is-nieuw { animation: ob-regel-in .7s .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ob-regel-in { from { opacity: 0; transform: translateY(.3em); } to { opacity: 1; transform: none; } }
.ob-rechts { position: relative; flex: none; width: var(--ob-w); height: var(--ob-h); transform-style: preserve-3d; }
/* De kaft (groen, zoals het boek op de homepage) om de pagina's: boven, buiten en onder zichtbaar, niet bij de rug */
.ob-kaft {
    position: absolute; inset: -10px -20px -22px 0; border-radius: 0 10px 10px 0; pointer-events: none;
    background: repeating-linear-gradient(45deg, #2b6652 0 2px, #2f6f59 2px 5px);
    box-shadow: 16px 26px 44px rgba(0, 0, 0, .22), 4px 6px 10px rgba(0, 0, 0, .12);
}
/* De rechterbladzijde: wit papier met een heel zachte korrel en een grijze snede, zoals in de boekeditor (.book),
   links de vouwschaduw, en buiten en onder de snede van de andere bladzijden
   (gestapelde schaduwen, zodat het boek dikte heeft). */
.ob-blad {
    position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
    padding: calc(var(--ob-pad) * .8) var(--ob-pad) var(--ob-pad);
    background-color: var(--ob-papier);
    background-image:
        radial-gradient(rgba(0, 0, 0, .025) 1px, transparent 1px),
        radial-gradient(rgba(0, 0, 0, .018) 1px, transparent 1px);
    background-size: 7px 7px, 11px 11px; background-position: 0 0, 3px 5px;
    border-radius: 0 4px 4px 0;
}
.ob-snede {
    position: absolute; inset: 0; border-radius: 0 4px 4px 0; pointer-events: none;
    /* Elke laag twee keer: schuin (buitenrand) en recht omlaag (0 k), zodat de onderkant van de snede tot de rug doorloopt */
    box-shadow:
        1.6px 1.6px 0 #d8d8d8, 0 1.6px 0 #d8d8d8, 3.2px 3.2px 0 #f2f2f2, 0 3.2px 0 #f2f2f2,
        4.8px 4.8px 0 #d8d8d8, 0 4.8px 0 #d8d8d8, 6.4px 6.4px 0 #f2f2f2, 0 6.4px 0 #f2f2f2,
        8px 8px 0 #d8d8d8, 0 8px 0 #d8d8d8, 9.6px 9.6px 0 #f2f2f2, 0 9.6px 0 #f2f2f2,
        11.2px 11.2px 0 #d8d8d8, 0 11.2px 0 #d8d8d8, 12.8px 12.8px 0 #f2f2f2, 0 12.8px 0 #f2f2f2,
        14.4px 14.4px 0 #cfcfcf, 0 14.4px 0 #cfcfcf;
}
.ob-blad::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 18%; pointer-events: none; z-index: 1;
    background: linear-gradient(to right, rgba(0, 0, 0, .2), rgba(0, 0, 0, .06) 30%, rgba(0, 0, 0, 0));
}

/* Bladzijde omslaan (story_editor.js, blader): een blad met de oude inhoud
   draait om de rug naar de linkerbladzijde, met licht en een slagschaduw op
   de pagina eronder. Terug komt het blad van links. */
.ob-omslag { position: absolute; inset: 0; z-index: 5; transform-origin: left center; transform-style: preserve-3d; pointer-events: none; will-change: transform; }
.ob-omslag-zijde { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; border-radius: 0 4px 4px 0; }
.ob-omslag-zijde > .ob-blad { position: absolute; inset: 0; }
/* De kopie op het blad is stilstaand: geen binnenkomende kaarten */
.ob-omslag .vk-card, .ob-omslag-onder .vk-card { animation: none !important; }
.ob-omslag-onder > .ob-blad { position: absolute; inset: 0; }
.ob-omslag-achter { transform: rotateY(180deg); background: var(--ob-papier); border-radius: 4px 0 0 4px; }
.ob-omslag-achter::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0) 35%); }
.ob-omslag-achter > .ob-links-papier { position: absolute; inset: 0; }
.ob-omslag-licht { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 6; }
.ob-omslag-voor .ob-omslag-licht { background: linear-gradient(to left, rgba(255, 255, 255, .5), rgba(0, 0, 0, .28)); }
.ob-omslag-achter .ob-omslag-licht { background: linear-gradient(to right, rgba(255, 255, 255, .35), rgba(0, 0, 0, .3)); }
.ob-omslag-onder { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.ob-slagschaduw { position: absolute; top: 0; bottom: 0; left: 0; z-index: 4; pointer-events: none; background: linear-gradient(to right, rgba(0, 0, 0, .32), rgba(0, 0, 0, 0)); opacity: 0; }

/* Kop van de bladzijde: terugpijl, en op mobiel de antwoorden tot nu toe.
   Op desktop staan de antwoorden op de linkerbladzijde; de chips blijven dan
   alleen voor schermlezers en het toetsenbord. */
.ob-kop { position: relative; z-index: 2; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; min-height: 2rem; margin-bottom: .6rem; flex: none; }
.ob-terug {
    display: inline-flex; align-items: center; gap: .35rem; border: 0; background: none; padding: .25rem .4rem .25rem 0;
    color: var(--vk-green-dark); font-weight: 600; font-size: .9rem;
}
.ob-terug:hover { text-decoration: underline; }
/* Op de feed staat de titel klein naast "Terug" (#ob_kop_titel) */
.ob-kop-titel { font-size: 1.05rem; font-weight: 800; color: var(--vk-ink); letter-spacing: -.01em; }
.ob-kop-titel:empty { display: none; }
.ob-terug:not([hidden]) + .ob-kop-titel { padding-left: .6rem; margin-left: .1rem; border-left: 1.5px solid #e3e7eb; }
.ob-terug[hidden] { visibility: hidden; display: inline-flex; }
.ob-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.ob-chip {
    display: inline-flex; align-items: center; gap: .3rem; border: 1px solid #e3e7eb; background: rgba(255, 255, 255, .7);
    color: var(--vk-ink); border-radius: 50rem; padding: .18rem .7rem; font-size: .8rem; font-weight: 600;
}
.ob-chip:hover { border-color: #a9cbbe; background: #fff; }
.ob-chip span { color: var(--vk-muted); font-weight: 500; }
/* Een heel licht potloodje: hier kun je het aanpassen */
.ob-chip-potlood { font-size: .78em; color: #c4c9cf; margin-left: .1rem; }
@media (min-width: 992px) {
    .ob-chips:not(:focus-within) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* De bladzijden: elk vult de pagina; wat niet past scrolt binnen de pagina */
.ob-inhoud { position: relative; z-index: 2; flex: 1; min-height: 0; }
.ob-pagina { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.ob-pagina::-webkit-scrollbar { display: none; }
.ob-pagina[hidden] { display: none; }
.ob-pagina > [hidden] { display: none; }
.ob-tekst { max-width: 44rem; }
/* De vraagbladzijden (naam, leeftijd, keuze): alles in het midden van de
   bladzijde. Met automatische marges in plaats van justify-content, zodat een
   bladzijde die toch te hoog is gewoon bovenaan begint en scrolt. */
.ob-midden:not([hidden]) { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ob-midden > :first-child { margin-top: auto; }
.ob-midden > :last-child { margin-bottom: auto; }
.ob-midden > [data-deel] { margin: auto 0; width: 100%; display: flex; flex-direction: column; align-items: center; }
.ob-midden > [data-deel][hidden] { display: none; }
.ob-midden .ob-keuzes, .ob-midden .ob-onthul { width: 100%; }
.ob-midden .ob-keuzes-vnw { max-width: 34rem; margin-left: auto; margin-right: auto; }
.ob-midden .ob-invoer { width: 100%; text-align: center; }
.ob-midden .ob-niveaus { width: 100%; text-align: left; margin-left: auto; margin-right: auto; }
.ob-vraag { font-size: clamp(1.45rem, calc(var(--ob-s) * .048), 2rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--vk-ink); margin: 0 0 1.25rem; }
.ob-uitleg { color: var(--vk-muted); font-size: .98rem; margin: 0 0 1.1rem; max-width: 36rem; }

/* Grote keuzeknoppen op het papier: een tik gaat meteen door */
.ob-keuzes { display: grid; gap: .85rem; margin-bottom: 1rem; }
.ob-keuzes[hidden] { display: none; }
.ob-keuzes-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ob-keuzes-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ob-keuzes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ob-keuze {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .2rem; text-align: left;
    border: 2px solid #eef0f2; background: #fff; border-radius: .9rem; padding: .8rem .9rem; overflow: hidden; cursor: pointer;
    box-shadow: 0 .2rem .7rem rgba(18, 21, 25, .09); transition: transform 120ms ease-out, box-shadow .15s ease, border-color .15s ease;
}
.ob-keuze:hover { transform: translateY(-2px); box-shadow: 0 .6rem 1.4rem rgba(18, 21, 25, .15); }
.ob-keuze:active { transform: scale(.985); }
.ob-keuze.is-gekozen, .ob-keuze[aria-pressed="true"] { border-color: var(--vk-green); }
.ob-keuze:focus-visible { outline: 3px solid rgba(68, 140, 116, .35); outline-offset: 2px; }
.ob-keuze-beeld { display: block; width: calc(100% + 1.8rem); margin: -.8rem -.9rem .5rem; aspect-ratio: 4 / 3; background: #f3f4f6; overflow: hidden; }
.ob-keuze-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ob-keuze-titel { font-size: 1.05rem; font-weight: 800; color: var(--vk-ink); line-height: 1.2; }
.ob-keuze-sub { font-size: .8rem; color: var(--vk-muted); line-height: 1.35; }
/* Jongen, meisje of neutraal komt pas tevoorschijn vanaf de tweede letter van de naam */
.ob-onthul { opacity: 0; transform: translateY(10px); visibility: hidden; transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1), visibility 0s .45s; }
.ob-onthul.is-zichtbaar { opacity: 1; transform: none; visibility: visible; transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
/* Jongen, meisje of neutraal: drie naast elkaar, ook op mobiel */
.ob-keuzes-vnw { max-width: 34rem; margin-bottom: .25rem; }
.ob-keuzes-vnw .ob-keuze { min-height: 0; align-items: center; text-align: center; }
.ob-ga-verder { margin-top: .25rem; }
.ob-ga-verder[hidden] { display: none; }
/* Route: met een waaier van drie verhaalbeelden of de mascotte */
.ob-waaier { position: relative; display: block; width: calc(100% + 1.8rem); margin: -.8rem -.9rem .6rem; aspect-ratio: 16 / 9; background: #f3f4f6; overflow: hidden; }
.ob-waaier img { position: absolute; top: 14%; width: 44%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .6rem; box-shadow: 0 .35rem 1rem rgba(18, 21, 25, .25); border: 3px solid #fff; }
.ob-waaier img:nth-child(1) { left: 6%; transform: rotate(-8deg); }
.ob-waaier img:nth-child(2) { left: 28%; top: 8%; z-index: 2; transform: rotate(1deg); }
.ob-waaier img:nth-child(3) { left: 50%; transform: rotate(9deg); }
/* Eén beeld (Schrijf zelf): recht en vullend; specifieker dan de waaier-regels hierboven, anders kreeg het de schuine stand van de eerste waaierkaart */
.ob-waaier.ob-waaier-een img:nth-child(n) { position: static; width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; transform: none; object-fit: cover; }

.ob-link { border: 0; background: none; padding: 0; color: var(--vk-green-dark); font-weight: 600; font-size: .9rem; }
.ob-link:hover { text-decoration: underline; }
.ob-link span { color: var(--vk-muted); font-weight: 500; }
.ob-niveaus { margin: 0 0 1rem; max-width: 40rem; text-align: left; }
.ob-niveau-groep + .ob-niveau-groep { margin-top: 1rem; }
.ob-niveau-kop { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin: 0 0 .45rem; font-size: .78rem; font-weight: 700; color: var(--vk-muted); text-transform: uppercase; letter-spacing: .05em; }
.ob-niveau-kop span { font-size: .72rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
.ob-niveau-lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.ob-niveaus[hidden] { display: none; }
.ob-niveau {
    display: flex; flex-direction: column; gap: .15rem; text-align: left;
    border: 1.5px solid #e3e7eb; background: #fff; border-radius: .75rem; padding: .6rem .85rem;
}
.ob-niveau:hover { border-color: #a9cbbe; }
.ob-niveau.is-gekozen { border-color: var(--vk-green); background: var(--vk-green-soft); }
.ob-niveau-titel { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ob-niveau b { color: var(--vk-ink); font-size: .95rem; }
.ob-niveau-sub { color: var(--vk-muted); font-size: .8rem; }
.ob-avi { flex: none; font-size: .7rem; font-weight: 700; color: var(--vk-green-dark); background: var(--vk-green-soft); border-radius: 50rem; padding: .12rem .5rem; white-space: nowrap; }

/* Naam */
.ob-label { display: block; font-size: .78rem; font-weight: 700; color: var(--vk-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .55rem; }
.ob-invoer { max-width: 24rem; height: 3.4rem; font-size: 1.3rem; font-weight: 700; border-radius: .85rem; border-color: #e3e7eb; margin-bottom: 1.75rem; }
.ob-invoer:focus { border-color: var(--vk-green); box-shadow: 0 0 0 3px rgba(68, 140, 116, .15); }
.ob-hint { font-size: .85rem; color: var(--vk-muted); margin: .4rem 0 1.5rem; }
.ob-hint.is-warn { color: #9a6a12; }
.ob-fout { color: #9a3412; font-weight: 600; font-size: .9rem; margin: 1rem 0 0; }
.ob-fout[hidden] { display: none; }

/* Zelf schrijven: een wit schrijfvlak met de teller klein rechtsonder erin */
.ob-schrijfvlak {
    background: #fff; border-radius: 1rem; padding: .85rem 1.1rem .5rem; box-shadow: 0 .2rem .8rem rgba(18, 21, 25, .08);
    border: 1.5px solid transparent; transition: border-color .15s ease, box-shadow .15s ease;
}
.ob-schrijfvlak:focus-within { border-color: rgba(68, 140, 116, .45); box-shadow: 0 0 0 3px rgba(68, 140, 116, .12), 0 .2rem .8rem rgba(18, 21, 25, .08); }
.ob-tekstvak {
    display: block; width: 100%; border: 0; outline: 0; resize: none; padding: 0; color: var(--vk-ink);
    font-size: 1rem; line-height: 1.6; min-height: 8rem; background: transparent;
}
.ob-tekstvak::placeholder { color: #a3a9b0; }
/* Alleen het schrijfvlak licht op bij focus (:focus-within), niet het veld erin */
.ob-tekstvak:focus, .ob-tekstvak:focus-visible { outline: 0; box-shadow: none; border: 0; }
.ob-schrijfvlak-teller { margin: .35rem 0 0; text-align: right; font-size: .75rem; color: var(--vk-muted); min-height: 1.1em; }
.ob-schrijfvlak-teller.is-warn { color: #9a6a12; }
.ob-eigen:not([hidden]) { display: flex; flex-direction: column; }
/* Wie doen er mee: kaartjes voor de hoofdrol en de zelf toegevoegde personages */
.ob-rollen { margin-top: 1.25rem; }
.ob-rollen-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .5rem; }
.ob-rollen-extra { display: contents; }
.ob-rol {
    display: flex; align-items: center; gap: .65rem; min-height: 3.6rem; padding: .5rem .6rem .5rem .55rem;
    background: #fff; border: 1.5px solid #eef0f2; border-radius: .9rem; box-shadow: 0 .15rem .5rem rgba(18, 21, 25, .05); text-align: left;
}
.ob-rol-avatar {
    flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--vk-green-soft); color: var(--vk-green-dark); font-weight: 800; font-size: 1rem;
}
.ob-rol-hoofd .ob-rol-avatar { background: var(--vk-green); color: #fff; }
/* Ook als .vk-person (gedeelde handlers): een kaartje op één regel, niet de rij-opmaak van het venster */
.ob-rol.vk-person { display: flex; }
.ob-rol.vk-person + .vk-person { margin-top: 0; }
.ob-rol-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.ob-rol-tekst b { color: var(--vk-ink); font-size: .95rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-rol-tekst > span { color: var(--vk-muted); font-size: .76rem; }
.ob-rol-naam { border: 0; outline: 0; padding: 0; background: transparent; font-weight: 700; font-size: .95rem; color: var(--vk-ink); width: 100%; }
.ob-rol-naam::placeholder { color: #a3a9b0; font-weight: 600; }
.ob-rol-vnw { margin-top: 0; gap: .25rem; }
.ob-rol-vnw .vk-pronoun { padding: .1rem .5rem; font-size: .72rem; }
.ob-rol-wijzig { flex: none; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: #f3f5f7; color: #576071; display: inline-flex; align-items: center; justify-content: center; }
.ob-rol-wijzig:hover { background: var(--vk-green-soft); color: var(--vk-green-dark); }
.ob-rol-nieuw { justify-content: center; gap: .4rem; border-style: dashed; border-color: #cfe3da; color: var(--vk-green-dark); font-weight: 700; font-size: .88rem; box-shadow: none; background: rgba(255, 255, 255, .6); cursor: pointer; }
.ob-rol-nieuw:hover { border-color: var(--vk-green); background: #fff; }
.ob-rol-nieuw[hidden] { display: none; }

/* De knop: altijd onderaan en in het midden, en een feestje */
/* De ruimte onder de knop is altijd vrij voor een foutmelding (--ob-voet-fout), zodat de knop op elke bladzijde op dezelfde
   hoogte staat en niet verspringt als er een melding komt; de melding ligt in die ruimte (absoluut onder de knop). */
.ob-eigen-voet { --ob-voet-fout: 4.25rem; position: relative; margin-top: auto; padding: 1.5rem 0 var(--ob-voet-fout); display: flex; flex-direction: column; align-items: center; }
.ob-eigen-voet .ob-fout { position: absolute; left: 0; right: 0; bottom: 0; height: var(--ob-voet-fout); margin: 0; padding-top: .85rem; text-align: center; line-height: 1.35; }
.ob-maak {
    position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .55rem; border: 0; border-radius: 50rem;
    padding: .95rem 2.3rem; font-size: 1.08rem; font-weight: 800; color: #fff; letter-spacing: .005em;
    background: linear-gradient(135deg, #4fcf98 0%, #36a57c 45%, #2f6f59 100%);
    box-shadow: 0 .55rem 1.5rem rgba(47, 111, 89, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
}
.ob-maak::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
    animation: ob-glans 3.4s ease-in-out infinite;
}
@keyframes ob-glans { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.ob-maak i { display: inline-block; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.ob-maak:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 .9rem 2.2rem rgba(47, 111, 89, .45), 0 0 0 6px rgba(79, 207, 152, .15), inset 0 1px 0 rgba(255, 255, 255, .35); }
.ob-maak:hover i { transform: rotate(144deg) scale(1.2); }
.ob-maak:active { transform: scale(.98); }
.ob-maak:focus-visible { outline: 3px solid rgba(68, 140, 116, .45); outline-offset: 3px; }
/* De sterretjes en glitters die eruit vliegen (vonk in story_editor.js) */
.ob-vonk { position: absolute; z-index: 6; pointer-events: none; line-height: 1; text-shadow: 0 0 6px rgba(255, 216, 107, .8); will-change: transform, opacity; }
.ob-waarschuwing { background: #fff6e0; border-radius: .85rem; padding: .85rem 1rem; margin: 0 0 1rem; color: #7a5410; }
.ob-waarschuwing[hidden] { display: none; }
.ob-waarschuwing p { margin: 0 0 .6rem; font-weight: 600; }
.ob-waarschuwing .btn + .btn { margin-left: .4rem; }

/* Het verhaal wordt geschreven */
.ob-schrijven { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 100%; }
.ob-schrijven img { width: auto; max-width: 100%; height: auto; max-height: 48%; margin-bottom: 1rem; border-radius: 1rem; }
.ob-schrijf-regel { min-height: 1.6rem; font-size: 1.05rem; color: var(--vk-green-dark); font-weight: 600; margin: .25rem 0; transition: opacity .3s ease; }
.ob-schrijf-regel.is-wissel { opacity: 0; }
.ob-schrijf-fout { margin-top: 1rem; }
.ob-schrijf-fout[hidden] { display: none; }

/* ── Bladzijde 4a: de feed ────────────────────────────────────────────── */
/* De feed vult de bladzijde: kop en filters staan vast, daaronder scrollen
   alle verhalen onder elkaar binnen de bladzijde (het boek wordt niet groter). */
/* De feed loopt iets in de marge van het papier door (en evenveel binnenruimte), zodat de filterstrook bij het opzij
   scrollen niet tegen een harde rand midden op het papier wordt afgeknipt en de ring en schaduw van een tegel heel blijven */
.ob-pagina[data-blad="verhaal"] { display: flex; flex-direction: column; overflow: hidden; inset: -.5rem -1rem 0; padding: .5rem 1rem 0; }
.ob-pagina[data-blad="verhaal"][hidden] { display: none; }
.vk-search { position: relative; flex: 0 1 14rem; min-width: 10rem; }
.vk-search i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #9aa3ad; }
.vk-search input { padding-left: 2.6rem; border-radius: 50rem; height: 2.5rem; border-color: #e3e7eb; }
.vk-search input:focus { border-color: var(--vk-green); box-shadow: 0 0 0 3px rgba(68, 140, 116, .15); }
.vk-label { display: block; font-size: .72rem; font-weight: 700; color: var(--vk-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .45rem; }

/* Horizontaal scrollende strook (filtertegels), met pijlen op desktop.
   overflow-x knipt ook verticaal: binnen de strook ruimte vrijhouden voor de
   schaduw en die met een negatieve marge terugnemen. */
.vk-strip-wrap { position: relative; }
.vk-strip { display: flex; gap: .85rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 1rem 1rem 2.25rem; margin: -1rem -1rem -1.75rem; scroll-padding-left: 1rem; }
.vk-strip::-webkit-scrollbar { display: none; }
.vk-strip > * { scroll-snap-align: start; flex: 0 0 auto; }
.vk-arrow {
    position: absolute; top: 40%; transform: translateY(-50%); z-index: 2; width: 2.3rem; height: 2.3rem; border-radius: 50%;
    border: 0; background: #fff; color: var(--vk-ink); box-shadow: 0 .3rem .9rem rgba(18, 21, 25, .18); display: none;
    align-items: center; justify-content: center;
}
.vk-arrow-left { left: -.6rem; }
.vk-arrow-right { right: -.6rem; }
@media (hover: hover) and (min-width: 768px) { .vk-strip-wrap.can-left .vk-arrow-left, .vk-strip-wrap.can-right .vk-arrow-right { display: inline-flex; } }

/* Filtertegels (Onderwerpen, Gelegenheden): de kleine versie van een kaart.
   Eén filter tegelijk; actief = groene rand; zonder verhalen uitgeschakeld. */
.vk-filters { flex: none; }
.vk-filter-row + .vk-filter-row { margin-top: .35rem; }
.vk-strip-kop { align-self: center; font-size: .66rem; font-weight: 700; color: var(--vk-muted); text-transform: uppercase; letter-spacing: .05em; line-height: 1.2; }
.vk-strip-kop:not(:first-child) { margin-left: .6rem; }
.vk-filter-row .vk-strip { gap: .6rem; padding-top: .35rem; padding-bottom: .9rem; margin-top: -.35rem; margin-bottom: -.6rem; }
.vk-filter {
    flex: 0 0 auto; display: flex; align-items: center; gap: .55rem; width: 10.5rem; height: 2.9rem; padding: .3rem .65rem .3rem .3rem;
    border: 0; border-radius: .85rem; background: #fff; text-align: left; cursor: pointer; box-shadow: 0 .15rem .55rem rgba(18, 21, 25, .08);
    transition: box-shadow .15s ease, opacity .15s ease, transform 100ms ease-out;
}
.vk-filter:hover { box-shadow: 0 .35rem 1rem rgba(18, 21, 25, .13); }
.vk-filter:active { transform: scale(.97); }
.vk-filter.active { box-shadow: 0 0 0 2px var(--vk-green), 0 .35rem 1rem rgba(68, 140, 116, .2); }
.vk-filter:disabled { opacity: .45; cursor: default; box-shadow: none; }
.vk-filter-img { flex: 0 0 2.3rem; width: 2.3rem; height: 2.3rem; border-radius: .6rem; overflow: hidden; background: #dfe8e3; }
.vk-filter-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vk-filter-text { min-width: 0; display: flex; flex-direction: column; }
.vk-filter-title { font-size: .85rem; font-weight: 700; line-height: 1.2; color: var(--vk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vk-filter-sub { font-size: .74rem; font-weight: 600; color: var(--vk-green-dark); }
.vk-filter.active .vk-filter-title { color: var(--vk-green-dark); }

/* Kop boven de feed: titel en "Wis filters" */
.vk-feed-head { display: flex; align-items: center; flex-wrap: nowrap; gap: .6rem 1rem; margin: .75rem 0 .6rem; flex: none; }
.vk-feed-head .vk-row-title, .vk-feed-head .vk-clear { flex: none; white-space: nowrap; }
.vk-feed-head .vk-search { margin-left: auto; }
.vk-feed-head .vk-row-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--vk-muted); margin: 0; }
.vk-clear { border: 0; background: none; color: var(--vk-green); font-weight: 600; padding: 0; font-size: .9rem; }
.vk-clear:hover { text-decoration: underline; }
/* Kaarten komen zacht binnen na een filterwissel */
@keyframes vk-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.vk-grid > .vk-card { animation: vk-in .28s ease-out both; animation-delay: calc(var(--vk-i, 0) * 18ms); }

.vk-row-title { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--vk-ink); margin-bottom: .75rem; }
.vk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; align-content: start; }
.vk-feed {
    position: relative; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    margin: 0 calc(-1 * var(--ob-pad)); padding: 0 var(--ob-pad) .5rem; scrollbar-width: thin;
    /* Nevel onderaan zolang er nog verhalen onder staan (updateNevel) */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 2.5rem), transparent);
}
.vk-feed.is-eind { -webkit-mask-image: none; mask-image: none; }
.vk-card {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; align-content: start; text-align: left; padding: 0; border: 0; background: #fff;
    border-radius: 1rem; overflow: hidden; cursor: pointer; box-shadow: 0 .2rem .7rem rgba(18, 21, 25, .09);
    transition: transform 120ms ease-out, box-shadow .15s ease;
}
.vk-card:hover { box-shadow: 0 .6rem 1.4rem rgba(18, 21, 25, .16); transform: translateY(-2px); }
.vk-card:active { transform: scale(.985); }
.vk-card-img { position: relative; aspect-ratio: 4 / 3; background: #dfe8e3; }
/* Het verhaalbeeld als voorkant van een klein 3D-boek, zoals het boek op de
   homepage (.mboek in custom_css.css) en de boekmockup voor Google Ads:
   dezelfde schuine stand, de snede rechts en onder met papierlijntjes en de
   groene achterkaft. Bij hover draait het boek iets naar je toe. */
.vk-card-boek { display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 42%, #f5f8f7, #e6ecee); perspective: 900px; }
.vk-boek {
    position: relative; height: 76%; aspect-ratio: 1; transform-style: preserve-3d;
    transform: rotateX(9deg) rotateY(-26deg) rotateZ(1deg); transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.vk-card:hover .vk-boek { transform: rotateX(6deg) rotateY(-16deg) rotateZ(.5deg) translateY(-3px); }
.vk-boek-voor { position: absolute; inset: 0; overflow: hidden; border-radius: 0 .3em .3em 0; box-shadow: 6px 10px 16px rgba(0, 0, 0, .28); background: #1d2a4a; }
.vk-boek-voor img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Scharnier langs de rug en een zachte glans */
.vk-boek-voor::before { content: ""; position: absolute; top: 0; bottom: 0; left: 5%; width: 3%; background: linear-gradient(90deg, rgba(0, 0, 0, .18), rgba(255, 255, 255, .25), rgba(0, 0, 0, .1)); z-index: 1; }
.vk-boek-voor::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 40%); z-index: 1; }
.vk-boek-snede { position: absolute; }
.vk-boek-snede-rechts {
    left: calc(100% - 1px); top: 2%; bottom: 2%; width: 12%; transform-origin: left center; transform: rotateY(90deg);
    background: linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .05) 25%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .3)), repeating-linear-gradient(90deg, #fffdf7 0 1px, #d9d0bd 1px 2px);
    border-right: 2px solid #2f6f59;
}
.vk-boek-snede-onder {
    left: 0; right: 3px; top: 100%; height: 12%; transform-origin: center top; transform: rotateX(-90deg);
    background: linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .35)), repeating-linear-gradient(180deg, #fbf7ee 0 1px, #d4cab6 1px 2px);
    border-bottom: 2px solid #2f6f59;
}
.vk-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Titel op één regel (titels zijn kort genoeg, test), zodat elke kaart in een rij even hoog is */
.vk-card-title {
    padding: .45rem .65rem 0; color: var(--vk-ink); font-weight: 700; font-size: .88rem; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* De eerste zin van het verhaal met de naam erin: altijd twee regels hoog */
.vk-card-zin {
    padding: .2rem .65rem 0; margin-bottom: .55rem; font-size: .74rem; color: var(--vk-muted); line-height: 1.35; height: calc(2 * 1.35em + .2rem);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vk-card-zin b { color: var(--vk-ink); font-weight: 700; }
/* Hover op een verhaal: het boek uit het logo met "Schrijf dit verhaal" */
.vk-card-write {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
    background: rgba(28, 52, 43, .42); color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: .01em; text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.vk-card-write-icon { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgba(255, 255, 255, .22); display: inline-flex; align-items: center; justify-content: center; transform: translateY(4px) scale(.92); transition: transform .24s cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) {
    .vk-card:hover .vk-card-write { opacity: 1; }
    .vk-card:hover .vk-card-write-icon { transform: none; }
}
.vk-card:focus-visible .vk-card-write { opacity: 1; }
.vk-card-tags { display: flex; flex-wrap: nowrap; overflow: hidden; gap: .3rem; padding: .45rem .75rem .7rem; }
.vk-tag { flex: 0 0 auto; font-size: .7rem; font-weight: 600; color: var(--vk-green-dark); background: var(--vk-green-soft); border-radius: 50rem; padding: .12rem .55rem; }
.vk-empty { grid-column: 1 / -1; padding: 2rem 1rem; text-align: center; color: var(--vk-muted); }

/* ── Bladzijde "Het verhaal": het gekozen verhaal ─────────────────────── */
/* Het boek met de titel ernaast, daaronder de samenvatting, open rollen en
   de opdracht, en onderaan de knop (zoals bij zelf schrijven) */
.ob-gekozen:not([hidden]) { display: flex; flex-direction: column; }
.ob-gekozen-kop { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.25rem; }
.ob-gekozen-boek { flex: none; width: 9.5rem; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; perspective: 900px; }
.ob-gekozen-boek .vk-boek { height: 86%; }
.ob-gekozen-titel .ob-vraag { margin-bottom: .5rem; }
.ob-gekozen-titel .vk-card-tags { padding: 0; flex-wrap: wrap; gap: .4rem; }
/* Naast de grote titel groter dan op de kleine feedkaarten */
.ob-gekozen-titel .vk-tag { font-size: .88rem; padding: .25rem .8rem; }
/* De samenvatting: gewoon tekst op de bladzijde, de naam vet */
.vk-story-text { font-size: .98rem; line-height: 1.65; color: #3d4652; max-width: 40rem; }
.vk-story-text .vk-name { font-weight: 700; color: var(--vk-ink); }
/* Kind toevoegen en de opdracht links onder de tekst, niet over de breedte gecentreerd */
.ob-gekozen .vk-prompt-toggle, .ob-gekozen .vk-add-person { align-self: flex-start; }
.ob-gekozen .vk-persons-block { align-self: stretch; }
.vk-story-extra { margin-top: .6rem; font-size: .9rem; color: var(--vk-green-dark); }
.vk-roles:not(:empty) { margin-top: 1.1rem; }
.vk-role + .vk-role { margin-top: .75rem; }
.vk-pronouns { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .4rem; }
.vk-pronoun { border: 1.5px solid var(--vk-line); background: #fff; border-radius: 50rem; padding: .25rem .75rem; font-size: .82rem; font-weight: 600; color: var(--vk-ink); }
.vk-pronoun.active { border-color: var(--vk-green); background: var(--vk-green); color: #fff; }
.vk-prompt-toggle { border: 0; background: none; padding: 0; color: var(--vk-green-dark); font-weight: 600; font-size: .9rem; margin-top: 1rem; }
.vk-prompt-toggle i { display: inline-block; transition: transform .15s ease; }
.vk-prompt-toggle[aria-expanded="true"] i { transform: rotate(90deg); }
.vk-prompt { margin-top: .5rem; }
.vk-prompt textarea { border-radius: .75rem; }
.vk-hint { font-size: .8rem; color: var(--vk-muted); margin-top: .35rem; }
.vk-hint.is-warn { color: #9a6a12; }
.vk-person { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: start; }
.vk-person + .vk-person { margin-top: .75rem; }
.vk-person-remove { border: 0; background: #f3f5f7; width: 2rem; height: 2rem; border-radius: 50%; color: #576071; }
/* Optionele invoer wordt niet gevraagd: alleen een knop die het veld opent */
.vk-add-role { display: inline-flex; align-items: center; gap: .3rem; border: 0; background: none; padding: 0; color: var(--vk-green-dark); font-weight: 600; font-size: .88rem; }
.vk-add-role:hover { text-decoration: underline; }
.vk-persons-block { margin-top: 1rem; }
.vk-persons-block[hidden] { display: none; }
.vk-persons:not(:empty) { margin-bottom: .85rem; }
.vk-add-person { display: inline-flex; align-items: center; border: 1.5px dashed #a9cbbe; background: #fff; color: var(--vk-green-dark); border-radius: 50rem; padding: .3rem .9rem; font-weight: 600; font-size: .85rem; }
.vk-add-person:disabled { opacity: .4; }

/* ── Tablet en mobiel ─────────────────────────────────────────────────── */
/* Onder 992px past geen open boek: alleen de rechterbladzijde met de rug als
   smalle strook links, zo groot als het scherm toelaat. De antwoorden staan
   dan als chips bovenaan de bladzijde. */
@media (max-width: 991.98px) {
    /* Bovenaan beginnen (niet verticaal centreren) en de hoogte van het scherm benutten */
    .ob-tafel { padding: calc(70px + .75rem) 0 1.4rem; align-items: flex-start; }
    .ob-tafel > .container { padding-left: 0; padding-right: 30px; }  /* rechts ruimte voor kaft en snede */
    /* Staand, en de omgeslagen kant steiler (smaller), zodat de bladzijde de
       breedte houdt. Een strikte A4 werd op een telefoon te klein (240 x 340
       op een iPhone), dus de hoogte loopt door tot hooguit 2 x de breedte.
       De tekst op de linkerkant zou te smal worden en is er niet.
       De omgeslagen kant loopt links van het scherm af: alleen een randje
       (--ob-rand) bij de rug blijft over, de bladzijde krijgt de rest. */
    .ob-boek {
        --ob-rand: 18px;
        --ob-w: calc(100vw - 30px - var(--ob-rand));
        --ob-h: min(calc(var(--ob-w) * 2.1), calc(100vh - 70px - 6.4rem));
        --ob-hoek: 82deg; --ob-links: calc(var(--ob-w) * .17); --ob-pad: 1.15rem;
        margin: 0 0 0 calc(var(--ob-rand) - var(--ob-links)); max-width: none;
    }
    .ob-links-tekst { display: none; }
    .ob-kaft { inset: -8px -16px -18px 0; }
    /* De antwoorden als pills boven het boek (op desktop staan ze op de
       linkerkant). Altijd even hoog, ook leeg, zodat het boek niet verspringt. */
    .ob-chips {
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-height: 1.6rem; align-items: center; gap: .3rem;
        margin: 0 0 1.6rem calc(18px + 1.15rem); padding-right: 30px;  /* in lijn met de tekst op de bladzijde */
    }
    .ob-chips::-webkit-scrollbar { display: none; }
    .ob-chip {
        flex: none; font-size: .72rem; font-weight: 600; line-height: 1.2; padding: .22rem .62rem;
        color: #4b5563; background: rgba(255, 255, 255, .7); border-color: #e3e7eb;
    }

    .ob-keuzes-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@supports (height: 100dvh) { @media (max-width: 991.98px) { .ob-boek { --ob-h: min(calc(var(--ob-w) * 2.1), calc(100dvh - 70px - 6.4rem)); } } }
/* Een liggende telefoon: te laag voor een staand boek. Dan het boek van een
   tablet (vierkant, met de omgeslagen kant en zijn tekst) en scrollt de pagina. */
@media (max-width: 991.98px) and (orientation: landscape) and (max-height: 560px) {
    .ob-tafel { align-items: flex-start; min-height: 0; }
    .ob-tafel > .container { padding-left: 1rem; padding-right: 1rem; }
    .ob-boek {
        --ob-w: min(28rem, calc((100vw - 5rem) / 1.43)); --ob-h: var(--ob-w);
        --ob-hoek: 70deg; --ob-links: calc(var(--ob-w) * .39); --ob-pad: 1.25rem;
        margin: 1rem auto 1.5rem; max-width: 100%;
    }
    .ob-links-tekst { display: flex; }
    .ob-chips:not(:focus-within) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
}
@media (max-width: 767.98px) {
    .ob-boek { --ob-pad: 1rem; }
    .ob-uitleg { font-size: .9rem; margin-bottom: .9rem; }
    .ob-kop { margin-bottom: .5rem; }
    .ob-keuzes { gap: .55rem; }
    .ob-keuzes-3, .ob-keuzes-2 { grid-template-columns: minmax(0, 1fr); }
    .ob-keuzes-vnw { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
    .ob-keuzes-vnw .ob-keuze { padding: .55rem .45rem; }
    .ob-keuzes-vnw .ob-keuze-beeld { width: calc(100% + .9rem); margin: -.55rem -.45rem .35rem; }
    .ob-keuze { padding: .65rem .7rem; }
    .ob-keuze-beeld { width: calc(100% + 1.4rem); margin: -.65rem -.7rem .4rem; }
    .ob-waaier { width: calc(100% + 1.4rem); margin: -.65rem -.7rem .5rem; aspect-ratio: 21 / 9; }
    .ob-keuze-titel { font-size: .98rem; }
    .ob-niveau-lijst { grid-template-columns: minmax(0, 1fr); }
    /* Zelf schrijven op één scherm */
    .ob-tekstvak { min-height: 6.5rem; }
    .ob-schrijfvlak { padding: .7rem .85rem .4rem; }
    .ob-eigen-voet { --ob-voet-fout: 3.9rem; padding-top: 1.1rem; }
    .ob-eigen-voet .ob-fout { padding-top: .7rem; font-size: .85rem; }
    .ob-maak { width: 100%; justify-content: center; padding: .85rem 1.1rem; font-size: .98rem; white-space: nowrap; box-shadow: 0 .3rem .7rem rgba(47, 111, 89, .28), inset 0 1px 0 rgba(255, 255, 255, .35); }
    .ob-maak > span { overflow: hidden; text-overflow: ellipsis; }
    .ob-rollen { margin-top: 1rem; }
    .ob-rollen-lijst { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
    .ob-rol { min-height: 3.2rem; }
    .ob-keuze-sub { font-size: .76rem; }
    .ob-invoer, .ob-tekstvak, .vk-search input { font-size: 16px; }  /* anders zoomt iOS in */
    .ob-invoer { font-size: 1.15rem; max-width: none; }

    .vk-row-title { font-size: 1.3rem; }
    .vk-filter { width: auto; height: 2.7rem; }
    .vk-filter-title { overflow: visible; text-overflow: clip; }
    .vk-filter-img { flex-basis: 2.1rem; width: 2.1rem; height: 2.1rem; }
    /* De zoekbalk staat op mobiel in de rij van de feedkop (plaatsZoekbalk in
       story_editor.js): klein, rechts, hooguit 10rem */
    .vk-feed-head { margin-top: .6rem; gap: .6rem; }
    .vk-feed-head .vk-search { flex: 0 1 10rem; min-width: 0; }
    .vk-feed-head .vk-search input {
        -webkit-appearance: none; appearance: none; box-sizing: border-box; height: 1.5rem; min-height: 0; max-height: 1.5rem;
        padding: 0 .6rem 0 1.65rem; font-size: 16px; line-height: 1.5rem;
    }
    .vk-feed-head .vk-search input::-webkit-search-decoration, .vk-feed-head .vk-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
    .vk-feed-head .vk-search i { left: .55rem; font-size: .8rem; }
    .vk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
    .vk-card-title { font-size: .85rem; }
    .vk-card-zin { font-size: .74rem; }

    .ob-gekozen-kop { gap: 1rem; margin-bottom: 1rem; }
    .vk-story-text { font-size: .9rem; line-height: 1.55; }
    .ob-gekozen-boek { width: 6.5rem; }
    .ob-gekozen-titel .vk-tag { font-size: .78rem; padding: .2rem .65rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ob-onthul, .ob-onthul.is-zichtbaar { transition: none; transform: none; }
    .ob-maak::after { animation: none; }
    .ob-maak, .ob-maak i { transition: none; }
    .ob-keuze, .vk-card, .vk-filter, .vk-prompt-toggle i, .vk-card-write, .vk-card-write-icon { transition: none; }
    .vk-grid > .vk-card { animation: none; }
    .ob-links-papier .is-nieuw { animation: none; }
    .vk-card-write-icon { transform: none; }
    .vk-card:hover, .ob-keuze:hover { transform: none; }
    .vk-boek { transition: none; }
    .vk-card:hover .vk-boek { transform: rotateX(9deg) rotateY(-26deg) rotateZ(1deg); }
}