:root{

  /* ===== NIEUW DESIGN SYSTEM ===== */

  --bg-app:#F5F0E7;
  --bg-card:#FFFFFF;

  --text-primary:#17364D;
  /* Was #6B7280 en haalde daarmee 4,26:1 op --bg-app - onder de AA-grens van
     4,5:1 voor gewone tekst, terwijl dit de kleur is van élke ondertitel in de
     app. Nu 5,50:1. Zie de contrastaudit in features/theme.test.html. */
  --text-secondary:#5A616D;

  /* Merkkleuren bestaan in twee smaken: als VLAK (knopachtergrond, hero) en als
     TEKST. In de lichte stand mag dat dezelfde waarde zijn, in de donkere niet -
     een teal die licht genoeg is om als tekst op donker te lezen, is te licht om
     witte tekst op te zetten. Vandaar de -text-varianten; die worden overal
     gebruikt waar de kleur in `color:` staat. */
  --brand-primary:#0F6D73;
  --brand-primary-dark:#0A565B;
  --brand-primary-text:#0F6D73;

  --brand-accent:#D9A441;
  --brand-accent-dark:#C88F2B;
  --brand-accent-text:#8A6014;

  --border-soft:#E9E2D6;

  --success-soft:#EEF6EF;

  --shadow-soft:
    0 8px 24px rgba(15,109,115,.08);

  /* Semantische tokens voor goed/fout-feedback en actieve accenten -
     ontbraken in het bestaande systeem (enige oude kandidaten waren
     --good, een blauwe kleur, en --bad, fel vlagrood - niet geschikt
     voor een rustige juist/onjuist-UI). Aanvulling, geen vervanging. */
  --success:#3E9A66;
  --danger:#E8865A;
  --danger-soft:#FCE9E0;
  --brand-accent-soft:#FBF0D6;

  /* --success en --danger zijn vlakkleuren: als TEKST op hun eigen zachte
     achtergrond halen ze maar 3,17:1 respectievelijk 2,24:1. Dat was al zo vóór
     darkmode en raakt uitgerekend de plekken waar het ertoe doet - "goed
     gedaan" en "fout" in de trainers, en de verwijderknop bij Account. Vandaar
     een aparte, donkerdere tekstvariant. */
  --success-text:#2C7A4E;
  --danger-text:#A63A16;

  /* De basisknop (.btn) stond op --flag-blue met witte tekst: 3,38:1. De
     vlagkleur zelf blijft ongemoeid - dat ís de vlag, en die wordt elders als
     vlag getoond - maar de knop krijgt een eigen, net iets diepere blauw dat
     wél 4,98:1 haalt. */
  --btn-primary-bg:#2E72B8;

  /* Categorie-tinten: zachte achtergrond + icoonkleur + tekstkleur per
     categorie, zodat een lijst met ingangen (Oefenen-scherm) op kleur
     scanbaar is zonder terug te vallen op de afgebouwde --flag-*-kleuren.
     Teal en goud zijn letterlijk de waarden die .trainer-card-icon en
     .profile-menu-row-icon al gebruikten. De -text-varianten zijn donkerder
     dan -fg omdat kleine vette tekst meer contrast nodig heeft dan een icoon.
     Uitsluitend als zachte vlakvulling gebruiken, nooit als knop- of randkleur. */
  --tint-teal-bg:rgba(15,109,115,.10);
  --tint-teal-fg:#0F6D73;
  --tint-teal-text:#0A565B;

  --tint-gold-bg:rgba(217,164,65,.16);
  --tint-gold-fg:#C88F2B;
  --tint-gold-text:#8A6014;

  --tint-coral-bg:rgba(214,110,84,.14);
  --tint-coral-fg:#C0563C;
  --tint-coral-text:#9C3F28;

  --tint-green-bg:rgba(58,140,110,.13);
  --tint-green-fg:#2F7A5E;
  --tint-green-text:#1F5C43;

  /* Mastery-balk (voortgangsscherm, sub-fase 1E): vier onderscheidbare
     stappen zonder een nieuwe hex-kleur te verzinnen — zelfde truc als
     --tint-teal-bg hierboven (brand-primary's rgb, oplopende alpha), nu als
     geleidelijke reeks i.p.v. één vaste tint. */
  --mastery-new-bg:var(--border-soft);
  --mastery-recognized-bg:rgba(15,109,115,.35);
  --mastery-active-bg:rgba(15,109,115,.68);
  --mastery-mastered-bg:var(--brand-primary);

  /* Iconen-schaal: vervangt losse per-component svg-groottes/stroke-widths
     (voorheen 15-42px met eigen stroke-width per plek) door één gedeelde
     reeks, zodat hetzelfde icoon niet langer willekeurig van grootte
     verschilt tussen bijvoorbeeld de oefenhub en de bottom-nav. */
  --icon-xs-size:16px; --icon-xs-stroke:2.4;
  --icon-sm-size:20px; --icon-sm-stroke:2.2;
  --icon-md-size:22px; --icon-md-stroke:2;
  --icon-lg-size:28px; --icon-lg-stroke:2;
  --icon-xl-size:42px; --icon-xl-stroke:2;

  /* Chat-personage-avatars (features/challenge.js, .chat-avatar.*) —
     benoemde tokens i.p.v. losse hex-waarden per rol, puur onderhoudbaarheid. */
  --avatar-customs:#7DD3FC;
  --avatar-traveler:#86EFAC;
  --avatar-taxi:#C4B5FD;
  --avatar-hotel:#F9A8D4;
  --avatar-ana:#F4C95D;
  --avatar-neighbor:#FCA5A5;

  /* Focusring (fase 3 punt 11). Eén token i.p.v. per component een eigen
     box-shadow, zodat toetsenbordfocus overal hetzelfde oogt — en zodat een
     latere darkmode (punt 15) alleen deze twee waarden hoeft te herdefiniëren.
     De ring is bewust dikker dan de browserstandaard: de app staat vol met
     afgeronde kaarten op een zandkleurige achtergrond, waar een dunne
     zwarte UA-ring wegvalt. */
  --focus-ring-color:var(--brand-primary);
  --focus-ring-shadow:0 0 0 3px rgba(15,109,115,.35);

  /* ===== OPPERVLAKKEN, RANDEN EN SCHADUWEN (fase 3 punt 15) =====
     Vóór darkmode stonden hier 152 losse hex-waarden en 121 rgba()'s verspreid
     door het bestand; 65 unieke waarden waarvan een groot deel onderling
     nauwelijks verschilde (#FCFAF7, #F8F5EF, #fffdf6, #f7efe1 ...). Ze zijn
     teruggebracht tot deze reeks, want een kleur die niet in een token zit kan
     in de donkere stand niet omklappen.

     De volgorde is een trap van licht naar donker in de lichte stand, en
     precies andersom in de donkere: card = het bovenste vlak (kaarten,
     invoervelden), subtle = een vlak genest ín een kaart, muted = een rustig
     zandblok, inset = een verdiept vlak (uitgeschakelde knop, spoor van een
     voortgangsbalk). */
  --bg-subtle:#FCFAF7;
  --bg-muted:#F8F5EF;
  --bg-inset:#F5F7FA;

  /* Statusvlakken. Zacht genoeg om een hele alinea op te zetten - de
     bijbehorende tekstkleur staat bij de --tint-*-text-tokens hierboven. */
  --bg-info:#EEF8FB;
  --bg-info-strong:#DFF1F5;
  --bg-warn:#FFF8E6;
  --bg-warn-strong:#FCEFC5;

  /* Neutrale rand voor onderdelen die niet op zand staan (scheidingslijnen in
     lijsten, de rand om een uitgeschakelde knop). --border-soft blijft de
     zandkleurige variant voor kaarten. */
  --border-neutral:#E5E7EB;

  /* Tekst en vlakken ÓP een merkkleur. Deze keren bewust NIET om in de
     donkere stand: --brand-primary blijft daar ook een verzadigde teal, dus
     wit blijft de leesbare keuze. Dat onderscheid - wit-als-kaartvlak
     (--bg-card, keert wél om) versus wit-op-gekleurd (hier) - is de kern
     waardoor darkmode werkt zonder elk scherm apart te herschrijven. */
  --text-on-brand:#FFFFFF;
  --text-on-brand-soft:rgba(255,255,255,.85);
  --text-on-brand-faint:rgba(255,255,255,.70);

  /* Goud is te licht voor witte tekst: wit op --brand-accent haalt 2,25:1 en op
     --brand-accent-dark 2,83:1 - allebei ruim onder AA, en dat was al zo vóór
     darkmode. Op een gouden vlak hoort donkere inkt (6,16:1). */
  --text-on-accent:#3A2A08;
  --overlay-light:rgba(255,255,255,.12);
  --overlay-light-strong:rgba(255,255,255,.25);
  --overlay-light-hairline:rgba(255,255,255,.40);

  /* Halfdoorzichtig kaartvlak dat óp de eilandkaart of een foto ligt: moet in
     beide standen de ondergrond dempen, niet alleen "wit zijn". */
  --surface-veil:rgba(255,255,255,.94);
  --surface-veil-soft:rgba(255,255,255,.70);
  --scrim:rgba(23,54,77,.15);

  /* Speelveld (ballon-, buggy- en slangenspel, en het eindscherm daarvan). Dit
     is geen UI-vlak maar een decor: het is in BEIDE standen donker, net als een
     bioscoopdoek. Vandaar eigen tokens die niet omklappen.

     Ze bestonden hiervoor niet, en dat was precies het probleem: de spellen
     leunden op --text-primary en --bg-app om "licht op donker" te krijgen. Zodra
     die twee omklapten, werd het eindscherm lichter in de donkere stand dan in
     de lichte - en stond de tekst er in de verkeerde kleur op. */
  --stage-bg-1:#17364D;
  --stage-bg-2:#0A565B;
  --stage-bg-3:#0F6D73;
  --text-on-stage:#F5F0E7;

  /* Speelstukken: het vliegtuigje, het buggy-bord, het slangenveld. Lichte
     vlakjes met donkere inkt óp het donkere decor. Ook deze klappen niet om -
     ze leunden hiervoor op --bg-app en --text-primary, en precies daardoor
     werden ze in de donkere stand elkaars omgekeerde (donker vlak, lichte
     inkt) terwijl de ondergrond donker bleef. */
  --stage-piece-bg:#F5F0E7;
  --stage-piece-ink:#17364D;

  /* Accenttekst óp het decor (de score, de aftelteller). --brand-accent-text is
     hiervoor het verkeerde token: dat is donkergoud, bedoeld voor een LICHTE
     ondergrond, en haalde op het donkere speelveld 2,25:1. */
  --accent-on-stage:#E8BC63;

  --shadow-strong:0 12px 30px rgba(0,0,0,.12);
  --shadow-pop:0 8px 20px rgba(15,109,115,.28);
  --shadow-map:0 2px 6px rgba(0,0,0,.25);

  /* Derde tekstniveau, onder --text-secondary: tijdstempels, "nr. 12 van 40",
     uitgegrijsde ondertitels. Bestond als vier verschillende grijzen (#8A8A8A,
     #9a8f80, #9CA3AF, #8A8F98).

     Dat het maar wéinig lichter is dan --text-secondary is geen slordigheid maar
     de uitkomst van de eis: op een lichte achtergrond moet ook dit nog 4,5:1
     halen (het is tekst, geen decoratie), en dan is er tussen "secundair" en
     "tertiair" simpelweg weinig ruimte over. Het onderscheid moet dus vooral uit
     grootte en gewicht komen, niet uit kleur. */
  --text-tertiary:#656B76;

  /* Decoratieve illustratiekleuren (eilandkaart, slangenspel, souvenirs).
     Apart gehouden van de UI-tokens omdat ze een tekening vormen en niet aan
     een contrasteis hoeven te voldoen - maar wél moeten kunnen dimmen in de
     donkere stand, anders licht de kaart op als een lamp. */
  --map-water-1:#CDEFEA;
  --map-water-2:#8FD3D9;
  --map-water-3:#4FA9C8;
  --map-water-4:#2C7FB0;
  --map-land:#F5FBFC;
  --sand-light:#F7DFAE;
  --sand-mid:#F0C878;
  --sand-pale:#E9D8A6;
  --sand-deep:#E0B96A;
  --sky:#8ECAE6;
  --meadow:#BFE3C7;
  --wood:#8B5A2B;

  /* Aanvullende UI-kleuren die al in gebruik waren maar los stonden. Namen
     zeggen wat ze betekenen, niet hoe ze eruitzien - anders klopt de naam niet
     meer zodra de donkere stand een andere waarde invult. */
  --brand-deep:#0F5F56;          /* donkerste teal: actieve bottom-nav, knoppen */
  --bg-brand-soft:#EAF2F0;       /* zachte teal-vulling achter die actieve staat */
  --ink:#111827;                 /* bijna-zwart voor actieve schakelaars */
  --success-deep:#1B7F5F;        /* "Wist ik"-knop, donkerder dan --success */
  --success-bright:#4CAF50;      /* weekstip: moet oplichten, niet rusten */
  --success-strong:#16A34A;
  --danger-strong:#DC2626;
  /* Was #4F83FF: witte tekst haalde daar 3,49:1 op (de chat-bubbel van de
     gebruiker, die je dus moet kunnen lezen). Nu 5,21:1. */
  --info-strong:#4064D8;
  --accent-warm:#E0A83A;         /* "Opnieuw"-knop naast --success-deep */
  --border-gold:#F1DE7A;
  --border-warn:#F3DCC0;
  --bg-neutral:#F3F4F6;
  --bg-info-alt:#E3EDF8;
  --bg-warn-soft:#FFF4E8;
  --track:#D7DDE1;               /* spoor van een schuifregelaar */

  /* Kleuren die alleen vanuit JS-templates gezet worden (features/journey.js,
     features/challenge.js). Ze staan hier en niet daar, zodat ze net als de
     rest kunnen omklappen - een inline style="" leest var() gewoon. */
  --hero-gradient-1:#0F7C82;
  --hero-gradient-2:#1E5F74;
  --badge-gold:#F4B74A;          /* scorebadge in de challenge-chat */

  /* ===== KANAALTOKENS =====
     De 121 losse rgba()'s in dit bestand waren bijna allemaal dezelfde handvol
     basiskleuren op een andere doorzichtigheid: teal op .06/.08/.10/.12/.18/.28,
     goud op .08 t/m .50, wit op .10 t/m .94. Een token per combinatie zou er
     ~78 opleveren en nog steeds niets oplossen.

     Daarom staat hier alleen het RGB-drietal, en blijft de alfa op de plek van
     gebruik staan: rgba(var(--rgb-brand-primary),.08). De donkere stand hoeft
     dan één regel te herdefiniëren om elke tint die eruit volgt mee te laten
     kantelen. Alfa kán niet in een token - dat is precies waarom de vier
     benoemde --shadow-*-tokens hierboven wél de hele waarde bevatten: schaduw
     werkt in de donkere stand met een ándere sterkte, niet met een andere
     kleur. */
  --rgb-brand-primary:15,109,115;
  --rgb-brand-accent:217,164,65;
  --rgb-brand-deep:15,95,86;
  --rgb-ink-blue:23,54,77;       /* = --text-primary */
  --rgb-neutral-dark:31,41,55;   /* = --text */
  --rgb-success:62,154,102;
  --rgb-success-deep:27,127,95;
  --rgb-success-bright:76,175,80;
  --rgb-danger:232,134,90;
  --rgb-flag-blue:65,143,222;
  --rgb-flag-red:200,16,46;
  --rgb-blue-dark:37,99,166;
  --rgb-border-soft:233,226,214;
  --rgb-bg-muted:248,245,239;
  --rgb-decor-gold:224,167,46;   /* alleen de sfeergloed op het challenge-scherm */
  --rgb-decor-coral:200,89,58;
  --rgb-white:255,255,255;
  --rgb-shadow:0,0,0;

  /* Google-inlogknop, zie .btn.account-btn-google verderop: eigen tokens omdat
     de vormgeving door Google is voorgeschreven en niet met de app mag
     meekleuren. */
  --google-btn-bg:#FFFFFF;
  --google-btn-bg-hover:#F7F8F8;
  --google-btn-text:#3C4043;
  --google-btn-border:#DADCE0;

  /* ===== OUDE VARIABELEN LATEN STAAN ===== */

  --bg:#f4f8fc;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#5f6b7a;

  --flag-blue:#418FDE;
  --flag-red:#C8102E;
  --flag-yellow:#FBE122;
  --flag-white:#FFFFFF;

  --accent:var(--flag-blue);
  --accent2:var(--flag-red);
  --accent3:var(--flag-yellow);

  --border:#d8e6f5;
  --good:#2563a6;
  --bad:var(--flag-red);

  --blue-dark:#2563a6;
  --red-dark:#991127;
  --yellow-dark:#d4b700;

  --blue-soft:#eaf4ff;
  --red-soft:#fdecef;
  --yellow-soft:#fff9d6;

  --sand:#f7f1e3;

  --shadow:0 1px 2px rgba(0,0,0,.04);

  /* Laat de browser formuliervelden, scrollbars en de standaard tekstcursor
     meekleuren. Zonder dit blijft een <select> of een scrollbalk in de donkere
     stand hardnekkig licht. De waarde wordt hieronder per stand vastgezet. */
  color-scheme:light;
}

/* ===== DONKERE STAND (fase 3 punt 15) =====
   Eén alternatieve set met exact dezelfde tokennamen - geen enkele regel
   verderop in dit bestand weet dat darkmode bestaat. Dat is de hele opzet: de
   152 losse hex-waarden en 121 rgba()'s die hier ooit stonden zijn eerst naar
   tokens gebracht (zie het blok hierboven), zodat er hier één set overblijft in
   plaats van een tweede stylesheet.

   De regel wordt op twee manieren aangezet:

     1. [data-theme="dark"] - de handmatige keuze uit Profiel > Weergave. Een
        inline script in de <head> van index.html zet dit attribuut vóór de
        eerste paint, anders zie je een witte flits bij elke pageload.
     2. prefers-color-scheme:dark - de systeemvoorkeur, maar alleen als de
        gebruiker niet expliciet "Licht" heeft gekozen. Vandaar de
        :not([data-theme="light"]): het attribuut moet de media-query kunnen
        overrulen, in béide richtingen.

   Beide takken delen dezelfde waarden via één placeholder-selector zou fijn
   zijn, maar CSS kent dat niet - vandaar de letterlijke herhaling. De
   pariteitstest in features/theme.test.html bewaakt dat de twee gelijk blijven
   én dat er geen token uit de lichte set ontbreekt. */
:root[data-theme="dark"]{
  color-scheme:dark;

  /* Dezelfde trap als in de lichte stand, met dezelfde onderlinge volgorde:
     card is het bovenste vlak, dan subtle, dan de paginabodem (muted/app), en
     inset ligt het diepst. In de lichte stand loopt die reeks van wit naar zand;
     hier van bijna-zwart naar iets lichter. Wat NIET mag: card donkerder maken
     dan de pagina - dan lijkt een kaart een gat in het scherm in plaats van een
     vlak dat erbovenop ligt. */
  --bg-app:#121A1E;
  --bg-card:#1E272D;
  --bg-subtle:#1A2329;
  --bg-muted:#161E23;
  --bg-inset:#0E1519;

  --text-primary:#E8EDF0;
  --text-secondary:#A9B3BB;
  --text-tertiary:#8D979F;

  /* Twee tealtinten in plaats van één: #14757C is donker genoeg om witte tekst
     te dragen (5,4:1), #4FBFC5 is licht genoeg om zélf tekst te zijn op een
     donkere kaart (7,5:1). In de lichte stand mocht dat nog dezelfde waarde
     zijn; hier niet. Zelfde verhaal voor goud. */
  --brand-primary:#14757C;
  --brand-primary-dark:#0F5F65;
  --brand-primary-text:#4FBFC5;

  --brand-accent:#C8912F;
  --brand-accent-dark:#A87826;
  --brand-accent-text:#E8BC63;
  --text-on-accent:#1E1503;

  --border-soft:#2C3740;
  --border-neutral:#333F48;
  --success-soft:#16261E;

  --success:#4FB87E;
  --danger:#F09A72;
  --danger-soft:#3A241C;
  --brand-accent-soft:#332C1D;

  --tint-teal-bg:rgba(79,191,197,.14);
  --tint-teal-fg:#4FBFC5;
  --tint-teal-text:#7FD4D9;

  --tint-gold-bg:rgba(232,188,99,.16);
  --tint-gold-fg:#E8BC63;
  --tint-gold-text:#EFCE8C;

  --tint-coral-bg:rgba(240,154,114,.16);
  --tint-coral-fg:#F09A72;
  --tint-coral-text:#F5B79A;

  --tint-green-bg:rgba(79,184,126,.16);
  --tint-green-fg:#4FB87E;
  --tint-green-text:#7FCEA0;

  --mastery-new-bg:var(--border-soft);
  --mastery-recognized-bg:rgba(79,191,197,.30);
  --mastery-active-bg:rgba(79,191,197,.60);
  --mastery-mastered-bg:var(--brand-primary-text);

  --avatar-customs:#3E7FA6;
  --avatar-traveler:#3F8C5C;
  --avatar-taxi:#6B5FA8;
  --avatar-hotel:#A85B84;
  --avatar-ana:#A8823A;
  --avatar-neighbor:#A85C5C;

  --focus-ring-color:var(--brand-primary-text);
  --focus-ring-shadow:0 0 0 3px rgba(79,191,197,.40);

  --bg-info:#16262C;
  --bg-info-strong:#1B3038;
  --bg-warn:#2C2515;
  --bg-warn-strong:#3A301A;
  --bg-warn-soft:#2A2016;
  --bg-neutral:#232B32;
  --bg-info-alt:#1C2833;
  --bg-brand-soft:#17282A;

  --border-gold:#5A4A1E;
  --border-warn:#4A3A24;
  --track:#39434B;

  /* --ink is uitsluitend rand en indicatorstreepje (nooit een vlak met tekst
     erop, zie .nav .btn.active), dus die mag hier gewoon omklappen naar licht. */
  --ink:#E8EDF0;

  --brand-deep:#0E5A60;
  /* Donker genoeg gehouden om witte tekst te dragen (6,4:1): --success-deep is
     de achtergrond van de "Wist ik"-knop en van de afgerond-badge op de
     eilandkaart. Een lichtere groen zou daar mooier ogen en onleesbaar zijn. */
  --success-deep:#1E6B4E;
  --success-bright:#5CC46A;
  --success-strong:#3FBF6C;
  /* Vlakkleur, dus donker genoeg voor witte tekst (5,4:1) - de lichtere rode
     die je hier zou verwachten hoort bij --danger-text hieronder. */
  --danger-strong:#C0392B;
  --info-strong:#4064D8;
  --accent-warm:#D0A24A;

  --success-text:#4FB87E;
  --danger-text:#F09A72;

  --btn-primary-bg:#2E72B8;

  /* Wit-op-gekleurd blijft wit: --brand-primary is hierboven bewust donker
     genoeg gehouden. De doorzichtige witte lagen worden wél subtieler - op een
     donkere ondergrond springt dezelfde alfa veel harder naar voren. */
  --text-on-brand:#FFFFFF;
  --text-on-brand-soft:rgba(255,255,255,.82);
  --text-on-brand-faint:rgba(255,255,255,.62);
  --overlay-light:rgba(255,255,255,.08);
  --overlay-light-strong:rgba(255,255,255,.16);
  --overlay-light-hairline:rgba(255,255,255,.24);

  --surface-veil:rgba(30,39,45,.94);
  --surface-veil-soft:rgba(30,39,45,.78);
  --scrim:rgba(0,0,0,.55);

  /* Het speelveld blijft donker - alleen iets dieper, zodat het ook in de
     donkere stand nog van de app-achtergrond te onderscheiden is. */
  --stage-bg-1:#0F2334;
  --stage-bg-2:#083C41;
  --stage-bg-3:#0B4E53;
  --text-on-stage:#F5F0E7;
  --stage-piece-bg:#E4E0D6;
  --stage-piece-ink:#17364D;
  --accent-on-stage:#E8BC63;

  /* Schaduw is de reden dat deze vier de hele waarde bevatten en niet alleen een
     kleur: op donker werkt schaduw pas als hij fors sterker is. */
  --shadow-soft:0 8px 24px rgba(0,0,0,.45);
  --shadow-strong:0 12px 30px rgba(0,0,0,.55);
  --shadow-pop:0 8px 20px rgba(0,0,0,.50);
  --shadow-map:0 2px 6px rgba(0,0,0,.60);
  --shadow:0 1px 2px rgba(0,0,0,.30);

  /* De tekening op de eilandkaart en in de spellen. Gedempt, niet omgekeerd:
     water blijft water. Zonder dit licht de kaart op als een lamp in een verder
     donker scherm. */
  --map-water-1:#1E3A44;
  --map-water-2:#1B4A5C;
  --map-water-3:#17566E;
  --map-water-4:#134A62;
  --map-land:#243038;
  --sand-light:#6B5A3A;
  --sand-mid:#7A6438;
  --sand-pale:#6E6244;
  --sand-deep:#7A6338;
  --sky:#2C4A5E;
  --meadow:#33513C;
  --wood:#5A3C1C;

  --hero-gradient-1:#0F5F65;
  --hero-gradient-2:#153F4F;
  --badge-gold:#C8912F;

  /* Kanaaltokens: alleen de tinten die op een donkere ondergrond anders moeten
     uitpakken. De rest blijft staan omdat de alfa-vlakken die eruit volgen ook
     op donker kloppen. */
  --rgb-brand-primary:79,191,197;
  --rgb-brand-accent:232,188,99;
  --rgb-brand-deep:20,117,124;
  --rgb-ink-blue:232,237,240;
  --rgb-neutral-dark:232,237,240;
  --rgb-success:79,184,126;
  --rgb-success-deep:62,154,112;
  --rgb-success-bright:92,196,106;
  --rgb-danger:240,154,114;
  --rgb-flag-blue:123,161,255;
  --rgb-border-soft:44,55,64;
  --rgb-bg-muted:22,30,35;

  /* De drie sfeergloeden achter body/#challengeChat.fullscreen. Ongedimd bleven
     die op volle sterkte staan en kreeg elk donker scherm een warme waas langs
     de randen - het duidelijkst zichtbaar op Reis en Oefenen. */
  --rgb-decor-gold:120,88,24;
  --rgb-decor-coral:106,47,31;

  /* Google's donkere knopvariant, letterlijk uit hun richtlijn. */
  --google-btn-bg:#131314;
  --google-btn-bg-hover:#1E1F20;
  --google-btn-text:#E3E3E3;
  --google-btn-border:#8E918F;

  /* De oude variabelenset blijft bestaan (hij heeft nog gebruikers), maar krijgt
     hier passende waarden - anders breekt één vergeten var(--bg) het scherm
     open. De vlagkleuren zelf blijven ongewijzigd: dat is een vlag. */
  --bg:#11171B;
  --card:#1A2228;
  --text:#E8EDF0;
  --muted:#A9B3BB;
  --border:#2C3740;
  --good:#7BA1FF;
  --blue-dark:#7BA1FF;
  --red-dark:#F26A6A;
  --yellow-dark:#D0A24A;
  --blue-soft:#1A2733;
  --red-soft:#2E1C1F;
  --yellow-soft:#2C2515;
  --sand:#26313A;
}

/* ===== TOETSENBORDFOCUS (fase 3 punt 11) =====
   Vóór deze regel had geen enkele knop een eigen focusstijl: je zag alleen de
   browserstandaard, die op de eigen knopvormen van deze app grotendeels
   wegvalt. :focus-visible i.p.v. :focus, zodat de ring alleen verschijnt bij
   toetsenbord-/hulpmiddelnavigatie en niet bij elke muisklik.
   Staat bewust vroeg in het bestand: elke component mag deze overschrijven
   met een eigen, béter passende ring — maar nooit met outline:none zonder
   zichtbare vervanging. */
:focus-visible{
  outline:2px solid var(--focus-ring-color);
  outline-offset:2px;
  border-radius:inherit;
}

/* ===== SKIP-LINK (fase 3 punt 11, rest) =====
   Eerste tabstop van de pagina. Boven de header zit een taal-/variantkeuze en
   een profielknop; wie met toetsenbord of schermlezer binnenkomt moest daar
   elke keer doorheen vóór hij bij de inhoud was. Deze link springt er in één
   keer overheen.

   Bewust géén `display:none`/`visibility:hidden`: dat haalt het element uit de
   tabvolgorde, waarmee de link precies zijn functie verliest. Hij staat dus
   altijd in de DOM en wordt alleen buiten beeld geparkeerd tot hij focus
   krijgt. `:focus` en niet `:focus-visible`: een schermlezer op mobiel kan
   focus verplaatsen zonder dat de browser dat als toetsenbordinteractie
   telt — dan moet hij alsnog zichtbaar worden. */
.skip-link{
  position:fixed;
  top:0;
  left:50%;
  transform:translate(-50%,-120%);
  z-index:1000;
  padding:10px 18px;
  border-radius:0 0 12px 12px;
  background:var(--brand-primary);
  color:var(--text-on-brand);
  font-weight:700;
  text-decoration:none;
  box-shadow:0 2px 10px rgba(var(--rgb-shadow),.25);
}

.skip-link:focus{
  transform:translate(-50%,0);
}

/* Het doelwit krijgt tabindex="-1" zodat de sprong daadwerkelijk focus
   verplaatst (anders leest een schermlezer gewoon verder waar hij was). Die
   programmatische focus mag geen ring tekenen — de gebruiker ziet dan een
   kader om de hele pagina-inhoud. */
#mainContent:focus{
  outline:none;
}

/* ===== SKELETON-STATES =====
   Rustige placeholder-vlakken voor de allereerste paint (vóór init() klaar
   is) en het cloud-sync-venster op Home. Alleen een opacity-puls, geen
   shimmer-sweep of beweging — respecteert prefers-reduced-motion hieronder.
   Elk element dat een skeleton krijgt, wordt onvoorwaardelijk overschreven
   door de bijbehorende render-functie; er is dus geen eigen "laden klaar"
   state nodig om de skeleton weer weg te halen. */
.skel{
  display:inline-block;
  border-radius:8px;
  background:rgba(var(--rgb-ink-blue),.08);
  animation:skelPulse 1.8s ease-in-out infinite;
  vertical-align:middle;
}

.skel-on-dark{
  background:rgba(var(--rgb-white),.16);
}

.skel-line{
  width:70%;
  height:1em;
}

.skel-line-sm{
  width:40%;
  height:.85em;
}

.skel-line-lg{
  width:85%;
  height:1.2em;
}

.skel-block{
  width:100%;
  height:52px;
}

.skel-circle{
  width:1.6em;
  height:1.6em;
  border-radius:50%;
}

.hero-progress.is-skeleton{
  background:rgba(var(--rgb-white),.16);
  animation:skelPulse 1.8s ease-in-out infinite;
}

.hero-progress.is-skeleton .hero-progress-fill{
  display:none;
}

@keyframes skelPulse{
  0%, 100%{ opacity:.55; }
  50%{ opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  .skel,
  .hero-progress.is-skeleton{
    animation:none;
    opacity:.75;
  }
}

  *{box-sizing:border-box}

body,
#challengeChat.fullscreen{
  background-color:var(--bg-muted);
  background-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMjAnIGhlaWdodD0nMTIwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjxmZUNvbG9yTWF0cml4IHR5cGU9J3NhdHVyYXRlJyB2YWx1ZXM9JzAnLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTIwJyBoZWlnaHQ9JzEyMCcgZmlsdGVyPSd1cmwoI24pJyBvcGFjaXR5PScwLjMnLz48L3N2Zz4="),
    radial-gradient(circle at 100% 0%, rgba(var(--rgb-brand-deep),.55) 0%, rgba(var(--rgb-brand-deep),.3) 32%, rgba(var(--rgb-brand-deep),0) 66%),
    radial-gradient(circle at 0% 32%, rgba(var(--rgb-decor-coral),.5) 0%, rgba(var(--rgb-decor-coral),.26) 32%, rgba(var(--rgb-decor-coral),0) 66%),
    radial-gradient(circle at 92% 100%, rgba(var(--rgb-decor-gold),.55) 0%, rgba(var(--rgb-decor-gold),.3) 32%, rgba(var(--rgb-decor-gold),0) 66%);
  background-repeat:repeat, no-repeat, no-repeat, no-repeat;
  background-size:120px 120px, 60vmax 60vmax, 60vmax 60vmax, 55vmax 55vmax;
  background-position:0 0, top right, left top, bottom right;
  background-blend-mode:overlay, normal, normal, normal;
  background-attachment:fixed;
}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text-primary);
}

.screen-bar{
  position:sticky;
  top:0;
  z-index:1000;

  height:64px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 16px;

  background:transparent;
  border-bottom:1px solid transparent;
  box-shadow:none;
  transition:box-shadow .2s, border-color .2s;
}

.screen-bar.is-scrolled{
  background:var(--bg-app);
  border-bottom:1px solid rgba(var(--rgb-ink-blue),.12);
  box-shadow:0 4px 14px rgba(var(--rgb-shadow),.18);
}

.back-btn{
  width:40px;
  height:40px;

  border:none;
  background:transparent;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
}

.back-btn svg{
  width:24px;
  height:24px;

  stroke-width:3;

  color:var(--text-primary);
}

.screen-title{
  font-size:1.1rem;
  font-weight:800;
  color:var(--text-primary);
}


header .wrap{
  padding:10px 16px;
}

  .wrap{
    max-width:1000px;
    margin:0 auto;
    padding:16px;
  }

  .brand{
    display:flex;
    align-items:center;
    gap:14px;
  }

  .logo{
    width:60px;
    height:40px;
    border-radius:10px;
    background:
      linear-gradient(
        to bottom,
        var(--flag-blue) 0%,
        var(--flag-blue) 70%,
        var(--flag-yellow) 70%,
        var(--flag-yellow) 74%,
        var(--flag-blue) 74%,
        var(--flag-blue) 78%,
        var(--flag-yellow) 78%,
        var(--flag-yellow) 82%,
        var(--flag-blue) 82%,
        var(--flag-blue) 100%
      );
    display:grid;
    place-items:center;
    box-shadow:var(--shadow);
    border:2px solid var(--text-on-brand);
    overflow:hidden;
    flex:0 0 auto;
    position:relative;
  }

  .logo::before{
    content:"";
    position:absolute;
    top:7px;
    left:8px;
    width:14px;
    height:14px;
    background:var(--flag-red);
    clip-path:polygon(50% 0%, 64% 36%, 100% 50%, 64% 64%, 50% 100%, 36% 64%, 0% 50%, 36% 36%);
    z-index:0;
  }

  .logo svg{
    width:38px;
    height:38px;
    display:block;
    position:relative;
    z-index:1;
    margin-top:1px;
  }

  h1{
    font-size:1.25rem;
    margin:0;
  }

  .sub{
    color:var(--muted);
    font-size:.95rem;
    margin-top:4px;
  }

  .nav{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin-top:14px;
  }

  button,select,input{
    font:inherit;
  }

    .btn{
    border:2px solid transparent;
    border-radius:14px;
    padding:14px 12px;
    background:var(--btn-primary-bg);
    color:var(--text-on-brand);
    font-weight:700;
    cursor:pointer;
    transition:background .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    box-shadow:var(--shadow);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    position:relative;
  }
  .nav .btn.active{
    border-color:var(--ink);
    box-shadow:0 0 0 2px rgba(var(--rgb-neutral-dark),.08), 0 2px 8px rgba(var(--rgb-shadow),.08);
  }

  .nav .btn.active::after{
    content:"";
    position:absolute;
    left:12px;
    right:12px;
    bottom:6px;
    height:4px;
    border-radius:999px;
    background:var(--ink);
  }
  
  .btn:hover{
    background:var(--blue-dark);
    transform:translateY(-1px);
  }

  .btn.secondary{
    background:var(--flag-yellow);
    color:var(--text-on-accent);
  }

  .btn.secondary:hover{
    background:var(--yellow-dark);
  }

  .btn.alt{
    background:var(--flag-red);
    color:var(--text-on-brand);
  }

  .btn.alt:hover{
    background:var(--red-dark);
  }

  .btn.white-outline{
    background:var(--bg-card);
    color:var(--brand-accent-text);
    border:2px solid var(--brand-accent);
  }

  .btn.white-outline:hover{
    background:var(--brand-accent-soft);
  }

  .btn .ico{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    font-size:1.55rem;
  }

  .btn .ico svg{
    width:28px;
    height:28px;
    display:block;
    flex:0 0 auto;
  }

  .nav .ico svg{
    width:34px;
    height:34px;
    display:block;
    flex:0 0 auto;
  }

  .btn-flash .ico svg{
    width:40px;
    height:40px;
  }

  main{
    padding:16px 0 36px;
  }

.panel{
  background:var(--bg-card);
  border:1px solid var(--border-soft);
  border-radius:22px;
  padding:16px;
  box-shadow:var(--shadow-soft);
  margin-bottom:14px;
}

.content-screen{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
}

  .hidden{
    display:none;
  }

  .row{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:flex-start;
  }

  .row>*{
    flex:1 1 180px;
  }
  
#woordenlijst .row{
  margin-bottom:16px;
}

  input,select{
    width:100%;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--bg-card);
    color:var(--text);
  }

  /* Invoervelden houden hun eigen, rustigere focusstijl (randkleur + zachte
     gloed) i.p.v. de globale ring — bij een veld is de rand zelf al de
     focusaanduiding, en die gloed is hier de zichtbare vervanging voor de
     outline die we weghalen. :focus-visible i.p.v. :focus is voor een
     tekstveld gedragsbehoudend (browsers laten :focus-visible daar ook bij
     een muisklik matchen) maar houdt de regel gelijk aan de rest van het
     bestand; bij een <select> verdwijnt de gloed wél bij muisgebruik, wat de
     bedoeling is. */
  input:focus-visible,select:focus-visible{
    outline:none;
    border-color:var(--flag-blue);
    box-shadow:0 0 0 3px rgba(var(--rgb-flag-blue),.15);
  }

  .week-picker{
    position:relative;
    flex:0 0 230px;
    max-width:230px;
    min-width:190px;
  }

  .week-picker-btn{
    width:100%;
    min-height:44px;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--bg-card);
    color:var(--text);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    text-align:left;
    font-weight:600;
    box-shadow:var(--shadow);
  }

  .week-picker-btn:hover{
    border-color:var(--flag-blue);
    background:var(--bg-inset);
  }

  /* Zelfde afweging als bij input/select hierboven: eigen randgloed als
     zichtbare vervanging, alleen bij toetsenbordfocus. */
  .week-picker-btn:focus-visible{
    outline:none;
    border-color:var(--flag-blue);
    box-shadow:0 0 0 3px rgba(var(--rgb-flag-blue),.15);
  }

  .week-picker-label{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .week-picker-arrow{
    flex:0 0 auto;
    font-size:.9rem;
    color:var(--muted);
  }

  .week-picker-menu{
    position:absolute;
    top:calc(100% + 6px);
    left:0;
    right:0;
    z-index:30;
    display:none;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:14px;
    padding:8px;
    box-shadow:0 10px 24px rgba(var(--rgb-neutral-dark),.12);
  }

  .week-picker.open .week-picker-menu{
    display:block;
  }

  .week-option{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    border-radius:10px;
    cursor:pointer;
  }

  .week-option:hover{
    background:var(--blue-soft);
  }

  .week-option input{
    width:18px;
    height:18px;
    margin:0;
    padding:0;
    flex:0 0 auto;
  }

  .week-option span{
    font-size:.95rem;
  }

  .stats{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:12px;
  }

.stat{
  background:var(--blue-soft);
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  font-size:.92rem;
}

.word-counter{
  background:var(--bg-muted);
  border:1px solid var(--border-soft);
  color:var(--text-primary);

  border-radius:999px;

  padding:8px 14px;

  display:inline-flex;
  align-items:center;
  gap:8px;

  font-weight:700;
  
  font-size:.92rem;
	padding:6px 12px;
}

.stat-compact{
  min-width:auto;
  padding:8px 10px;
  text-align:center;
  font-weight:700;
}


  .top-tools{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    margin-bottom:10px;
  }

  .icon-toggle{
    border:2px solid var(--flag-yellow);
    background:var(--bg-card);
    color:var(--text);
    border-radius:12px;
    padding:10px 12px;
    font-weight:700;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:8px;
  }

  .icon-toggle .toggle-text{
    display:inline;
  }

  .icon-toggle:hover{
    background:var(--yellow-soft);
  }

.btn svg,
.icon-toggle svg{
  width:20px;
  height:20px;
  stroke-width:2;
  display:block;
  flex:0 0 auto;
}

  .list-item{
    padding:12px 14px;
    margin-bottom:10px;
    border:none;
    border-left:4px solid var(--flag-blue);
    border-radius:20px;
    background:var(--bg-subtle);
    box-shadow:0 12px 30px rgba(var(--rgb-brand-primary),.06);
	transition:
  transform .15s ease,
  box-shadow .15s ease;
  }

.list-item:hover{
  transform:translateY(-1px);

  box-shadow:
    0 10px 22px rgba(var(--rgb-brand-primary),.08);
}

  .list-item:last-child{
    border-bottom:1px solid var(--border);
  }

  .list-item-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    margin-bottom:6px;
  }

  .list-main{
    flex:1 1 auto;
    min-width:0;
  }

.word-toggle{
  flex:0 0 auto;

  border:1px solid var(--border-soft);
  background:var(--bg-card);
  color:var(--text-secondary);

  border-radius:10px;

  padding:8px 10px;

  cursor:pointer;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:34px;
  min-height:34px;
  padding:6px;

  transition:.2s ease;
}

.word-toggle svg{
  width:16px;
  height:16px;
  stroke-width:2;
}

.word-toggle:hover{
  background:var(--bg-muted);
  border-color:var(--brand-accent);
  color:var(--brand-primary-text);
}

.list-item.group-blue{
  border-left-color:var(--brand-primary);

  background:
    linear-gradient(
      90deg,
      rgba(var(--rgb-brand-primary),.06) 0%,
      var(--bg-card) 18%
    );
}

.list-item.group-red{
  border-left-color:var(--brand-accent);

  background:
    linear-gradient(
      90deg,
      rgba(var(--rgb-brand-accent),.08) 0%,
      var(--bg-card) 18%
    );
}

.list-item.group-yellow{
  border-left-color:var(--border-soft);

  background:
    linear-gradient(
      90deg,
      rgba(var(--rgb-border-soft),.35) 0%,
      var(--bg-card) 18%
    );
}

  .meta{
    color:var(--muted);
    font-size:.9rem;
    margin-bottom:4px;
  }

.word{
  font-weight:800;
  font-size:1.55rem;

  color:var(--brand-primary-text);
}

  .meaning-line{
    min-height:24px;
  }

  .flash-wrap{
    position:relative;
    margin-top:12px;
    margin-bottom:22px;
    padding-bottom:20px;
    perspective:1200px;
  }

  .flash-stack{
    position:absolute;
    top:12px;
    left:12px;
    right:12px;
    height:calc(100% - 34px);
    pointer-events:none;
    z-index:1;
  }

  .flash-stack::before,
  .flash-stack::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    border-radius:18px;
    background:linear-gradient(180deg,var(--bg-card) 0%, var(--bg-inset) 100%);
    border:2px solid rgba(var(--rgb-neutral-dark),.18);
    box-shadow:0 6px 16px rgba(var(--rgb-neutral-dark),.06);
  }

  .flash-stack::before{
    top:10px;
    bottom:12px;
    transform:translateX(6px) scale(.985);
    opacity:.82;
  }

  .flash-stack::after{
    top:20px;
    bottom:24px;
    transform:translateX(12px) scale(.97);
    opacity:.62;
  }

  .flash{
    position:relative;
    z-index:2;
  }

  .flash{
    position:relative;
    z-index:2;
    height:340px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:20px;
    border:1px solid var(--border-soft);
    border-radius:18px;
    background:var(--bg-subtle);
    box-shadow:0 10px 24px rgba(var(--rgb-neutral-dark),.08);
    transform-origin:center center;
    will-change:transform, opacity;
    overflow-y:auto;
    overscroll-behavior:contain;
    touch-action:pan-y;
    transition:
      transform .42s cubic-bezier(.22,.8,.24,1),
      opacity .42s cubic-bezier(.22,.8,.24,1),
      box-shadow .25s ease,
      border-color .25s ease;
  }

  .flash > div{
    width:100%;
    max-width:100%;
  }

  .flash.is-flipping{
    animation:flashFlipPulse .26s ease;
  }

  @keyframes flashFlipPulse{
    0%{ transform:scale(1); }
    45%{ transform:scale(.965); }
    100%{ transform:scale(1); }
  }

  .flash.is-entering{
    animation:flashCardIn .32s cubic-bezier(.22,.8,.24,1);
  }

  .flash.swipe-left{
    transform:translateX(-110%) rotate(-12deg) scale(.96);
    opacity:0;
  }

  .flash.swipe-right{
    transform:translateX(110%) rotate(12deg) scale(.96);
    opacity:0;
  }

  .flash.reset-bounce{
    animation:flashReset .52s cubic-bezier(.22,.8,.24,1);
  }

  .flash.flash-good{
    box-shadow:0 0 0 4px rgba(var(--rgb-blue-dark),.12), 0 14px 30px rgba(var(--rgb-blue-dark),.16);
    border-color:var(--good);
  }

  .flash.flash-hard{
    box-shadow:0 0 0 4px rgba(var(--rgb-flag-red),.10), 0 14px 30px rgba(var(--rgb-flag-red),.14);
    border-color:var(--bad);
  }

.flash-hard-btn{
  background:rgba(var(--rgb-brand-accent),.12);
  color:var(--brand-accent-text);

  border:1px solid rgba(var(--rgb-brand-accent),.45);
  border-radius:14px;

  font-weight:700;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:var(--shadow-soft);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.flash-hard-btn:hover{
  background:rgba(var(--rgb-brand-accent),.20);
  border-color:var(--brand-accent);
}

.flash-hard-btn:active{
  transform:scale(.96);
}

.flash-know-btn{
  background:rgba(var(--rgb-success-deep),.12);
  color:var(--success-deep);

  border:1px solid rgba(var(--rgb-success-deep),.45);
  border-radius:14px;

  font-weight:700;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:var(--shadow-soft);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.flash-know-btn:hover{
  background:rgba(var(--rgb-success-deep),.20);
  border-color:var(--success-deep);
}

.flash-know-btn:active{
  transform:scale(.96);
}

/* ===== FLASHCARD ACTION BUTTONS (V3) ===== */

.flash-btn{
  border-radius:14px;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.flash-btn:active{
  transform:scale(.96);
}

.flash-btn-outline{
  background:var(--bg-subtle);
  border:1px solid var(--border-soft);
  color:var(--brand-primary-text);
  box-shadow:var(--shadow-soft);
}

.flash-btn-outline:hover{
  background:var(--bg-muted);
  border-color:var(--brand-primary);
  transform:translateY(-1px);
}

.flash-btn-primary{
  background:var(--brand-primary);
  border:1px solid var(--brand-primary);
  color:var(--text-on-brand);
  box-shadow:0 8px 20px rgba(var(--rgb-brand-primary),.28);
}

.flash-btn-primary:hover{
  background:var(--brand-primary-dark);
  border-color:var(--brand-primary-dark);
  transform:translateY(-1px);
}

@media (min-width:560px){
  #flashcards .action-btn .label{
    display:block;
    margin-top:2px;
    font-size:.78rem;
    font-weight:700;
  }
}

#flashHardCount{
  background:rgba(var(--rgb-brand-accent),.12);
  border:1px solid rgba(var(--rgb-brand-accent),.35);
  border-radius:999px;
  padding:8px 14px;
  font-size:.88rem;
  font-weight:700;
  color:var(--brand-accent-text);
  display:inline-flex;
  align-items:center;
  gap:6px;
}

#flashHardCount svg{
  width:var(--icon-xs-size);
  height:var(--icon-xs-size);
  stroke-width:var(--icon-xs-stroke);
  flex-shrink:0;
}

.flash .big{
  font-size:1.6rem;
  font-weight:800;
}

.flash .small{
  margin-top:10px;
  color:var(--muted);
}

/* ===== FLASHCARD V2 ===== */

.flash-learning-context{
  margin-bottom:20px;
}

.flash-week{
  color:var(--brand-primary-text);
  font-weight:800;
  font-size:.95rem;
  margin-bottom:4px;
}

.flash-topic{
  font-size:1.45rem;
  font-weight:800;
  color:var(--text-primary);
  margin-bottom:10px;
}

.flash-progress-text{
  font-size:.95rem;
  color:var(--text-secondary);
  margin-bottom:8px;
}

.flash-progress-bar{
  height:10px;
  background:var(--border-soft);
  border-radius:999px;
  overflow:hidden;
}

.flash-progress-fill{
  width:0%;
  height:100%;
  background:var(--brand-accent);
  transition:width .3s ease;
}

.flash-front-word{
  font-size:1.9rem;
  font-weight:800;
}

/* ===== FLASHCARD ANSWER V2 ===== */

.flash-answer-word{
  font-size:2rem;
  font-weight:800;
  color:var(--brand-primary-text);
  margin-bottom:10px;
}

.flash-answer-variants{
  color:var(--text-secondary);
  margin-bottom:18px;
}

.flash-example{
  padding:14px;
  background:var(--bg-muted);
  border:1px solid var(--border-soft);
  border-radius:14px;
}

.flash-example-title{
  font-weight:700;
  margin-bottom:8px;
}

.flash-example-pa{
  font-weight:600;
  margin-bottom:6px;
}

.flash-example-nl{
  color:var(--text-secondary);
}

.flash-header-row{
  display:flex;
  justify-content:flex-end;
  margin-bottom:12px;
}

.flash-settings-btn{
  border:1px solid var(--border-soft);
  background:var(--bg-card);
  color:var(--text-primary);

  border-radius:12px;

  padding:10px 14px;

  font-weight:700;

  cursor:pointer;

  box-shadow:var(--shadow-soft);
}

.flash-settings-btn:hover{
  background:var(--bg-muted);
}

@keyframes flashCardIn{
  0%{
    transform:translateX(24%) scale(.97);
    opacity:0;
  }
	
    100%{
      transform:translateX(0) scale(1);
      opacity:1;
    }
  }

  @keyframes flashReset{
    0%{
      transform:scale(1) rotate(0deg);
    }
    25%{
      transform:scale(.94) rotate(-4deg);
    }
    55%{
      transform:scale(1.03) rotate(2deg);
    }
    100%{
      transform:scale(1) rotate(0deg);
    }
  }

  .actions{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:10px;
    margin-top:12px;
  }
  .action-btn{
    min-height:56px;
    padding:10px 8px;
    flex-direction:column;
    gap:4px;
  }

  .action-btn .ico{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
  }

  .action-btn .ico svg{
    width:22px;
    height:22px;
    display:block;
    flex:0 0 auto;
  }

.action-btn .label{
	display:none;
}

  .quiz-q{
    font-size:1.15rem;
    font-weight:700;
    margin-bottom:10px;
  }

  /* Input+Controleer-knop staan sinds de rustigere quiz-layout naast elkaar
     via .trainer-typed-row/.trainer-typed-input/.trainer-typed-submit —
     dezelfde klassen als de Vertalen-tab bij Zinnen (features/sentences.js),
     dus geen eigen kleurregels hier meer nodig. "Volgende" leeft in de
     feedback zelf (.trainer-next-btn), Reset is vervallen. */

  .quiz-enter-hint{
    text-align:center;
    font-size:.75rem;
    color:var(--text-secondary);
    margin-top:8px;
  }

  /* Rustiger dan de vorige gekleurde pillen (achtergrond+rand): platte tekst
     met een klein gekleurd bolletje ervoor, zoals de rest van het
     ontstoffigde quizscherm (zie .quiz-round-number/.quiz-enter-hint
     hieronder). */
  .quiz-stats-row .stat{
    background:none;
    border:none;
    padding:0;
    font-size:.82rem;
    font-weight:700;
    color:var(--text-secondary);
    display:flex;
    align-items:center;
    gap:6px;
  }

  .quiz-stats-row .stat::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    flex-shrink:0;
  }

  #quizScoreGood::before{
    background:var(--success);
  }

  #quizScoreBad::before{
    background:var(--danger);
  }

  #quizQueueInfo::before{
    background:var(--brand-accent);
  }

  .quiz-pep{
    position:relative;
    overflow:hidden;
    margin:12px 0;
    padding:16px 14px;
    border-radius:16px;
    background:linear-gradient(180deg, var(--bg-card) 0%, var(--brand-accent-soft) 100%);
    border:2px solid var(--brand-accent);
    box-shadow:var(--shadow-soft);
  }

  .quiz-pep-badge{
    display:inline-block;
    margin-bottom:8px;
    padding:5px 10px;
    border-radius:999px;
    background:var(--bg-card);
    border:1px solid var(--brand-accent);
    font-weight:800;
    font-size:.84rem;
    color:var(--brand-accent-text);
  }

  .quiz-pep-pa{
    font-weight:800;
    font-size:1.05rem;
    margin-bottom:6px;
    position:relative;
    z-index:1;
  }

  .quiz-pep-nl{
    color:var(--muted);
    position:relative;
    z-index:1;
  }

  .quiz-confetti{
    position:absolute;
    inset:0;
    pointer-events:none;
  }

  .quiz-confetti span{
    position:absolute;
    top:-14px;
    width:9px;
    height:16px;
    border-radius:3px;
    opacity:.95;
    animation:quizConfettiFall 1.6s ease-out forwards;
  }

  .quiz-confetti span:nth-child(1){left:6%; background:var(--brand-primary); animation-delay:0s;}
  .quiz-confetti span:nth-child(2){left:14%; background:var(--brand-accent); animation-delay:.08s;}
  .quiz-confetti span:nth-child(3){left:22%; background:var(--success); animation-delay:.02s;}
  .quiz-confetti span:nth-child(4){left:31%; background:var(--brand-primary); animation-delay:.12s;}
  .quiz-confetti span:nth-child(5){left:39%; background:var(--brand-accent); animation-delay:.04s;}
  .quiz-confetti span:nth-child(6){left:48%; background:var(--success); animation-delay:.1s;}
  .quiz-confetti span:nth-child(7){left:57%; background:var(--brand-primary); animation-delay:.03s;}
  .quiz-confetti span:nth-child(8){left:65%; background:var(--brand-accent); animation-delay:.14s;}
  .quiz-confetti span:nth-child(9){left:73%; background:var(--success); animation-delay:.06s;}
  .quiz-confetti span:nth-child(10){left:81%; background:var(--brand-primary); animation-delay:.11s;}
  .quiz-confetti span:nth-child(11){left:89%; background:var(--brand-accent); animation-delay:.05s;}
  .quiz-confetti span:nth-child(12){left:95%; background:var(--success); animation-delay:.09s;}

  @keyframes quizConfettiFall{
    0%{
      transform:translateY(-10px) rotate(0deg);
      opacity:0;
    }
    15%{
      opacity:1;
    }
    100%{
      transform:translateY(120px) rotate(220deg);
      opacity:0;
    }
  }
  .pill{
    display:inline-block;
    padding:4px 10px;
    border-radius:999px;
    background:var(--yellow-soft);
    color:var(--tint-gold-text);
    font-size:.85rem;
    font-weight:700;
    margin-right:6px;
    border:1px solid var(--border-gold);
  }

  code.note{
    display:inline-block;
    background:var(--bg-neutral);
    padding:2px 6px;
    border-radius:6px;
  }

.prep-icon{
  margin-right:6px;
}

/* ===== TRAINER HEADER ===== */

.trainer-header{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.trainer-header h3,
.trainer-header h2{
  margin:0;
}

.trainer-reference-btn{
  position:relative;
  flex-shrink:0;
  width:32px;
  height:32px;
  border:none;
  border-radius:999px;
  background:var(--brand-accent-soft);
  color:var(--brand-accent-text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.trainer-reference-btn svg{
  width:var(--icon-xs-size);
  height:var(--icon-xs-size);
  stroke-width:var(--icon-xs-stroke);
}

.trainer-reference-pulse{
  display:none;
  position:absolute;
  inset:-4px;
  border-radius:50%;
  background:var(--brand-accent);
  opacity:.55;
  animation:islandMarkerPulse 1.8s ease-out infinite;
}

.trainer-reference-btn.pulse .trainer-reference-pulse{
  display:block;
}

.trainer-reference-hint{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:5;

  padding:8px 12px;
  border-radius:10px;
  background:var(--brand-accent-dark);
  /* Was --text-on-brand (wit): 2,83:1 op dit goud, ruim onder AA - en dit is
     juist een tipballonnetje dat gelézen moet worden. Zie --text-on-accent. */
  color:var(--text-on-accent);
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  box-shadow:var(--shadow-soft);
}

.trainer-reference-hint::before{
  content:'';
  position:absolute;
  top:-5px;
  right:12px;

  width:10px;
  height:10px;
  background:var(--brand-accent-dark);
  transform:rotate(45deg);
}

.trainer-reference-overlay{
  position:fixed;
  inset:0;
  background:rgba(var(--rgb-brand-deep),.4);
  display:flex;
  align-items:flex-end;
  z-index:1000;
}

/* .hidden{display:none} en deze regel hebben gelijke specificiteit -
   zonder deze override wint display:flex altijd door bestandsvolgorde,
   waardoor het naslagblad nooit echt verborgen is. */
.trainer-reference-overlay.hidden{
  display:none;
}

.trainer-reference-sheet{
  width:100%;
  max-height:75vh;
  overflow-y:auto;
  background:var(--bg-card);
  border-radius:20px 20px 0 0;
  box-shadow:var(--shadow-soft);
  padding:16px;
}

.trainer-reference-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}

.trainer-reference-title{
  font-weight:800;
  font-size:1rem;
  color:var(--text-primary);
}

.trainer-reference-close{
  width:32px;
  height:32px;
  border:none;
  border-radius:999px;
  background:var(--bg-app);
  color:var(--text-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.trainer-reference-close svg{
  width:var(--icon-xs-size);
  height:var(--icon-xs-size);
  stroke-width:var(--icon-xs-stroke);
}

.trainer-reference-item{
  padding:10px 0;
  border-bottom:1px solid var(--border-soft);
}

.trainer-reference-item:last-child{
  border-bottom:none;
}

.trainer-reference-term{
  font-weight:800;
  font-size:.88rem;
  color:var(--brand-primary-text);
  margin-bottom:2px;
}

.trainer-reference-explain{
  font-size:.85rem;
  color:var(--text-secondary);
  line-height:1.5;
}

.trainer-difficulty-wrap{
  margin-bottom:12px;
}

.difficulty-title{
  display:block;
  margin-bottom:6px;
  font-size:.9rem;
  color:var(--muted);
  font-weight:700;
  letter-spacing:.04em;
}

.trainer-difficulty{
  display:flex;
  width:100%;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  background:var(--bg-card);
}

.trainer-difficulty .btn{
  flex:1;
  border:none;
  border-radius:0;
  padding:10px;
  background:var(--bg-card);
  color:var(--text);
  box-shadow:none;
}

.trainer-difficulty .btn:hover{
  background:var(--bg-inset);
}

.trainer-difficulty .btn.active{
  background:var(--brand-primary-dark);
  color:var(--text-on-brand);
}

/* ===== TRAINERS HERONTWERP (overzicht + generieke speler) ===== */

.trainer-intro{
  font-size:.85rem;
  color:var(--text-secondary);
  line-height:1.5;
  margin-bottom:16px;
}

/* Gedeelde sectiekop voor elke platte lijst die in groepen is opgedeeld
   (Trainers-overzicht, Profielmenu, Oefenen-scherm) — één klasse i.p.v. een
   derde bijna-identieke kopie per scherm. */
.trainer-group-label,
.profile-group-label,
.group-label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-secondary);
  margin:14px 2px 9px;
}

.trainer-group-label svg,
.profile-group-label svg,
.group-label svg{
  width:14px;
  height:14px;
  stroke-width:2.4;
  flex-shrink:0;
}

.trainer-group-label:first-child,
.profile-group-label:first-child,
.group-label:first-child{
  margin-top:0;
}

.trainer-card{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--bg-card);
  border:1px solid var(--border-soft);
  border-radius:18px;
  padding:14px;
  margin-bottom:10px;
  box-shadow:var(--shadow-soft);
  cursor:pointer;
  transition:transform .12s ease;
  /* Sinds fase 3 punt 11 is dit een <button> i.p.v. een <div> (de variant
     .soon blijft een div — die is niet klikbaar). Deze vier regels zetten de
     knop-defaults terug die de kaartlook zouden breken; verder is er niets
     veranderd. */
  width:100%;
  font:inherit;
  color:inherit;
  text-align:left;
}

.trainer-card:active{
  transform:scale(.99);
}

.trainer-card.soon{
  opacity:.6;
  cursor:default;
}

/* Gedeelde basis voor de "icoon-in-getint-vlak"-chips: .practice-icon,
   .practice-rec-icon, .trainer-card-icon, .profile-menu-row-icon,
   .hero-icon-box. Grootte, radius, tint en icoon-svg-sizing blijven per
   component (zie losse regels), dit voorkomt alleen duplicatie van de
   layout-eigenschappen. */
.practice-icon,
.practice-rec-icon,
.trainer-card-icon,
.profile-menu-row-icon,
.hero-icon-box{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.trainer-card-icon{
  width:46px;
  height:46px;
  border-radius:14px;
  background:rgba(var(--rgb-brand-primary),.1);
  color:var(--brand-primary-text);
}

.trainer-card-icon svg{
  width:var(--icon-md-size);
  height:var(--icon-md-size);
  stroke-width:var(--icon-md-stroke);
}

.trainer-card-icon.accent{
  background:rgba(var(--rgb-brand-accent),.16);
  color:var(--brand-accent-text);
}

.trainer-card-meta{
  flex:1;
  min-width:0;
}

.trainer-card-name{
  font-weight:800;
  font-size:.95rem;
  color:var(--text-primary);
}

.trainer-card-desc{
  font-size:.78rem;
  color:var(--text-secondary);
  margin-top:1px;
  line-height:1.4;
}

.trainer-card-bar{
  background:var(--border-soft);
  border-radius:999px;
  height:5px;
  margin-top:8px;
  overflow:hidden;
}

.trainer-card-fill{
  height:100%;
  border-radius:999px;
  background:var(--brand-primary);
}

.trainer-card-pct{
  font-size:.68rem;
  font-weight:700;
  color:var(--text-secondary);
  margin-top:4px;
}

.trainer-soon-badge{
  flex-shrink:0;
  font-size:.65rem;
  font-weight:800;
  background:var(--border-soft);
  color:var(--text-secondary);
  padding:3px 8px;
  border-radius:999px;
}

/* --- Akademia: niveaus + setkaarten --- */

.akademia-level{
  margin-bottom:18px;
}

.akademia-level-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}

.akademia-level-title{
  font-size:.85rem;
  font-weight:800;
  color:var(--text-primary);
}

.akademia-level-pct{
  font-size:.75rem;
  font-weight:700;
  color:var(--text-secondary);
}

/* Twee knoppen i.p.v. één klik-op-de-hele-kaart (zoals .trainer-card in het
   Trainers-overzicht doet) — de kaart zelf is dus niet klikbaar. */
.akademia-set-card{
  cursor:default;
}

.akademia-set-actions{
  display:flex;
  gap:8px;
  margin-top:10px;
}

.akademia-set-actions .btn{
  flex:1;
  min-width:0;
  flex-direction:column;
  gap:2px;
  font-size:.8rem;
  padding:8px 10px;
}

/* Losstaand van de generieke .btn (lichtblauw, overal in de app de default
   actieknop) — dit is de "volgende stap"-knop in Akademia, dus krijgt de
   merkkleur die ook de voortgangsbalken al gebruiken (--brand-primary),
   zodat hij als iets nieuws/eigens leest i.p.v. als zomaar-een-blauwe-knop. */
.akademia-sentence-btn{
  background:var(--brand-primary);
  border-color:var(--brand-primary);
}

.akademia-sentence-btn:hover{
  background:var(--tint-teal-text);
}

/* Zachte gate: de knop blijft klikbaar (zie isSentenceTrainerUnlocked in
   features/akademia.js — precies zoals de Reis ook nergens vergrendelt).
   Bewust geen gedimde variant van de teal knop (dat oogt als "dezelfde knop,
   even minder fel"), maar een echt andere, duidelijk secundaire stijl —
   zodat "nog niet klaar voor" ook visueel iets anders is dan "klaar om te
   doen".*/
.akademia-gated{
  background:var(--border-soft);
  border-color:var(--border-soft);
  color:var(--text-secondary);
  box-shadow:none;
}

.akademia-gated:hover{
  background:var(--border-soft);
  transform:none;
}

.akademia-lock-icon{
  width:14px;
  height:14px;
  stroke-width:2.4;
}

.akademia-gate-hint{
  display:block;
  font-size:.62rem;
  font-weight:600;
  opacity:.85;
}

/* Fase 1, sub-fase 1F (niveaucheck): een niveau/set overgeslagen door de
   check — geen fout, geen gate, dus bewust géén danger/warning-kleur. Neemt
   de bestaande merkkleur van .akademia-sentence-btn over (herkenbaar als
   "hoort bij het leerpad", niet als waarschuwing). */
.akademia-level-title-row{
  display:flex;
  align-items:center;
  gap:6px;
}

.akademia-skipped-badge{
  font-size:.62rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--brand-primary-text);
  background:rgba(var(--rgb-brand-primary),.12);
  padding:2px 8px;
  border-radius:999px;
}

.trainer-card-bar.akademia-bar-skipped{
  opacity:.45;
}

/* --- Zinnentrainer (features/sentences.js) --- */

.sentence-mode-toggle{
  margin-bottom:14px;
}

.words-mode-toggle{
  margin-bottom:14px;
}

.sentence-slots{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  min-height:46px;
  padding:10px;
  border:1px dashed var(--border-soft);
  border-radius:14px;
  margin-bottom:14px;
  transition:border-color .15s ease, background .15s ease;
}

.sentence-slots.bad{
  border-color:var(--danger);
  background:var(--danger-soft);
}

.sentence-slot-tile{
  padding:8px 14px;
  border-radius:10px;
  background:var(--brand-primary);
  color:var(--text-on-brand);
  font-weight:700;
  font-size:.9rem;
  cursor:pointer;
}

.sentence-slot-tile[disabled]{
  cursor:default;
  opacity:.85;
}

.sentence-slot-placeholder{
  color:var(--text-secondary);
  font-size:.85rem;
  align-self:center;
}

.sentence-bank{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:14px;
}

/* .profile-group-label zelf staat nu in het gedeelde .group-label-blok
   hierboven (bij .trainer-group-label), samen met .trainer-card. */

.profile-menu-row{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--bg-card);
  border:1px solid var(--border-soft);
  border-radius:18px;
  padding:14px;
  margin-bottom:10px;
  box-shadow:var(--shadow-soft);
  cursor:pointer;
  transition:transform .12s ease;
  /* Zelfde omzetting naar <button> als .trainer-card hierboven, fase 3
     punt 11 — knop-defaults terug naar de kaartlook. */
  width:100%;
  font:inherit;
  color:inherit;
  text-align:left;
}

.profile-menu-row:active{
  transform:scale(.99);
}

.profile-menu-row-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  background:rgba(var(--rgb-brand-primary),.1);
  color:var(--brand-primary-text);
}

.profile-menu-row-icon.accent{
  background:rgba(var(--rgb-brand-accent),.16);
  color:var(--brand-accent-text);
}

.profile-menu-row-icon svg{
  width:var(--icon-md-size);
  height:var(--icon-md-size);
  stroke-width:var(--icon-md-stroke);
}

.profile-menu-row-meta{
  flex:1;
  min-width:0;
}

.profile-menu-row-title{
  font-weight:800;
  font-size:.95rem;
  color:var(--text-primary);
}

.profile-menu-row-subtitle{
  font-size:.78rem;
  color:var(--text-secondary);
  margin-top:1px;
  line-height:1.4;
}

.profile-menu-row-chevron{
  flex-shrink:0;
  width:18px;
  height:18px;
  color:var(--text-secondary);
}

.trainer-round-head{
  margin-bottom:12px;
}

.trainer-round-progline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
}

/* Rondeteller ("Ronde 4/4"), alleen zichtbaar bij een enkele geselecteerde
   Akademia-set (features/quiz.js updateQuizRoundUI) — op dezelfde regel als
   "Woord n van 10" i.p.v. een eigen regel erboven, voor een rustiger
   quizscherm (minder regels boven de vraag). */
.quiz-round-number{
  font-size:.8rem;
  font-weight:700;
  color:var(--text-secondary);
}

.trainer-round-count{
  font-size:.8rem;
  font-weight:700;
  color:var(--text-secondary);
}

.trainer-round-streak{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:.78rem;
  font-weight:800;
  color:var(--brand-accent-text);
  background:var(--brand-accent-soft);
  padding:4px 10px;
  border-radius:999px;
}

.trainer-round-streak svg{
  width:var(--icon-xs-size);
  height:var(--icon-xs-size);
  stroke-width:var(--icon-xs-stroke);
  fill:var(--brand-accent-dark);
}

.trainer-round-track{
  background:var(--border-soft);
  border-radius:999px;
  height:6px;
  overflow:hidden;
}

.trainer-round-fill{
  background:var(--brand-primary);
  height:100%;
  border-radius:999px;
  transition:width .35s ease;
}

.trainer-qcard{
  background:var(--bg-card);
  border-radius:18px;
  padding:18px 16px;
  box-shadow:var(--shadow-soft);
  margin-bottom:12px;
}

.trainer-sentence{
  font-weight:700;
  font-size:1.15rem;
  color:var(--text-primary);
  line-height:1.7;
  margin-bottom:8px;
}

.trainer-gap{
  display:inline-block;
  min-width:52px;
  border-bottom:2.5px dashed var(--border-soft);
  text-align:center;
  vertical-align:baseline;
  margin:0 2px;
}

.trainer-gap.active{
  border-bottom-color:var(--brand-accent);
  background:var(--brand-accent-soft);
  border-radius:5px 5px 0 0;
}

.trainer-gap.filled{
  border-bottom:none;
  background:var(--brand-accent-soft);
  color:var(--text-primary);
  font-weight:800;
  border-radius:999px;
  padding:1px 10px;
  min-width:0;
}

.trainer-gap.filled.bad{
  background:var(--danger-soft);
  color:var(--danger-text);
}

.trainer-translation{
  font-size:.82rem;
  color:var(--text-secondary);
  font-style:italic;
}

.trainer-choices{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

.trainer-choices.three{
  grid-template-columns:1fr 1fr 1fr;
}

.trainer-choice{
  background:var(--bg-card);
  border:2px solid var(--border-soft);
  border-radius:14px;
  padding:14px 8px;
  min-height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  cursor:pointer;
  font-weight:800;
  font-size:.95rem;
  color:var(--text-primary);
  box-shadow:0 2px 8px rgba(var(--rgb-brand-deep),.05);
  transition:transform .12s ease;
}

.trainer-choice:active{
  transform:scale(.96);
}

.trainer-choice.good{
  background:var(--success-soft);
  border-color:var(--success);
  color:var(--success-text);
}

.trainer-choice.bad{
  background:var(--danger-soft);
  border-color:var(--danger);
  color:var(--danger-text);
}

.trainer-choice.faded{
  opacity:.35;
}

.trainer-choice[disabled]{
  cursor:default;
}

.trainer-feedback{
  border-radius:16px;
  padding:14px 15px;
  margin-top:12px;
  animation:trainerFbRise .25s ease;
}

@keyframes trainerFbRise{
  from{ transform:translateY(8px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}

.trainer-feedback.good{
  background:var(--success-soft);
  border:1.5px solid rgba(var(--rgb-success),.35);
}

.trainer-feedback.bad{
  background:var(--danger-soft);
  border:1.5px solid rgba(var(--rgb-danger),.4);
}

.trainer-feedback-top{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:7px;
}

.trainer-feedback-icon svg{
  width:var(--icon-sm-size);
  height:var(--icon-sm-size);
  stroke-width:var(--icon-sm-stroke);
  display:block;
}

.trainer-feedback.good .trainer-feedback-icon svg{
  color:var(--success-text);
}

.trainer-feedback.bad .trainer-feedback-icon svg{
  color:var(--brand-accent-text);
}

.trainer-feedback-verdict{
  font-weight:800;
  font-size:.9rem;
}

.trainer-feedback.good .trainer-feedback-verdict{
  color:var(--success-text);
}

.trainer-feedback.bad .trainer-feedback-verdict{
  color:var(--danger-text);
}

.trainer-feedback-why{
  font-size:.85rem;
  color:var(--text-primary);
  line-height:1.55;
}

.trainer-feedback-why b{
  color:var(--brand-primary-text);
}

.trainer-next-btn{
  width:100%;
  border:none;
  border-radius:999px;
  padding:15px;
  background:linear-gradient(135deg,var(--brand-accent),var(--brand-accent-dark));
  color:var(--brand-primary-text);
  font-weight:800;
  font-size:.95rem;
  box-shadow:0 5px 14px rgba(var(--rgb-brand-accent),.35);
  cursor:pointer;
  margin-top:12px;
}

.trainer-typed-row{
  display:flex;
  gap:8px;
}

.trainer-typed-input{
  flex:1;
  min-width:0;
  border:2px solid var(--border-soft);
  border-radius:14px;
  padding:12px 14px;
  font-size:.95rem;
  font-weight:700;
  color:var(--text-primary);
  background:var(--bg-card);
}

/* Antwoordveld van quiz/trainers/zinnen: alleen een randkleur, geen gloed —
   dit veld staat direct naast de Controleer-knop en een gloed zou de twee
   optisch aan elkaar plakken. De rand is hier de zichtbare vervanging voor
   de outline. */
.trainer-typed-input:focus-visible{
  outline:none;
  border-color:var(--brand-primary);
}

.trainer-typed-submit{
  flex-shrink:0;
  border:none;
  border-radius:14px;
  padding:12px 18px;
  background:var(--brand-primary);
  color:var(--text-on-brand);
  font-weight:800;
  font-size:.9rem;
  cursor:pointer;
}

.trainer-typed-submit[disabled],
.trainer-typed-input[disabled]{
  opacity:.6;
}

.trainer-done{
  background:var(--bg-card);
  border-radius:20px;
  padding:26px 18px;
  text-align:center;
  box-shadow:var(--shadow-soft);
}

.trainer-done-stars{
  font-size:26px;
  letter-spacing:3px;
  margin-bottom:6px;
}

.trainer-done-title{
  font-weight:800;
  font-size:1.2rem;
  color:var(--text-primary);
}

.trainer-done-sub{
  font-size:.8rem;
  color:var(--text-secondary);
  margin:4px 0 16px;
}

.trainer-missed{
  background:var(--bg-app);
  border-radius:14px;
  padding:12px 14px;
  text-align:left;
  margin-bottom:14px;
}

.trainer-missed-label{
  font-size:.65rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--danger-text);
  margin-bottom:7px;
}

.trainer-missed-item{
  font-size:.82rem;
  color:var(--text-primary);
  padding:3px 0;
  line-height:1.45;
}

.trainer-missed-item b{
  color:var(--brand-primary-text);
}

.trainer-done-btn{
  width:100%;
  border:none;
  border-radius:999px;
  padding:13px;
  margin-bottom:8px;
  font-weight:800;
  font-size:.88rem;
  cursor:pointer;
}

.trainer-done-btn.primary{
  background:linear-gradient(135deg,var(--brand-accent),var(--brand-accent-dark));
  color:var(--brand-primary-text);
}

.trainer-done-btn.secondary{
  background:var(--bg-app);
  color:var(--brand-primary-text);
}

  @media (max-width:820px){
    .actions{
      grid-template-columns:repeat(3,1fr);
    }
  }

.bottom-nav button{
  background:none;
  border:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  color:var(--text);
  font-size:.85rem;
  cursor:pointer;

  position:relative;
  transition:.2s ease;
}

.bottom-nav svg{
  width:22px;
  height:22px;
  stroke-width:2;
}

.bottom-nav button span{
  font-size:.75rem;
}

.bottom-nav{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  
  height:72px;

  display:flex;
  justify-content:space-around;

  background:var(--surface-veil);
  border-top:none;
  padding:10px 0;
  box-shadow:0 -2px 14px rgba(var(--rgb-shadow),.15);

  z-index:999;

  max-width:1000px;
  margin:auto;
}

body{
  padding-bottom:90px;
}

/* Bovenaan i.p.v. onderaan (was bottom:90px): een toast die verschijnt
   terwijl je in #quizA typt (het toetsenbord is dan open) viel op mobiel
   buiten beeld onderaan — bovenaan blijft altijd zichtbaar. */
.app-toast{
  position:fixed;
  left:50%;
  top:calc(env(safe-area-inset-top, 0px) + 16px);
  transform:translateX(-50%) translateY(-12px);
  max-width:min(420px, calc(100vw - 32px));
  background:var(--success-soft);
  border:1.5px solid rgba(var(--rgb-success),.35);
  color:var(--text-primary);
  border-radius:16px;
  padding:12px 16px;
  box-shadow:var(--shadow-soft);
  font-size:.85rem;
  text-align:center;
  z-index:9999;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}

.app-toast.visible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}

  @media (max-width:720px){
    .wrap{
      padding:12px;
    }

    .brand{
      align-items:flex-start;
      gap:10px;
    }

    .logo{
      width:72px;
      height:48px;
    }

    .logo svg{
      width:46px;
      height:46px;
    }

    h1{
      font-size:1.05rem;
      line-height:1.2;
    }

    .sub{
      font-size:.82rem;
    }

    .nav{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:8px;
      margin-top:10px;
    }

    .nav .btn{
      min-width:0;
      padding:8px;
      border-radius:12px;
      font-size:0;
      justify-content:center;
    }

    .nav .btn .ico{
      font-size:1.45rem;
    }

    .nav .btn .ico svg{
      width:32px;
      height:32px;
    }

    .nav .btn-flash .ico svg{
      width:38px;
      height:38px;
    }
    .actions{
      grid-template-columns:repeat(5,1fr);
      gap:8px;
    }
    .action-btn{
      min-height:52px;
      padding:8px;
    }

    .action-btn .ico svg{
      width:24px;
      height:24px;
    }

    .action-btn .label{
      display:none;
    }
  
	.row{
	flex-direction:column;
	gap:6px;
}

/* ===== OEFENINGKEUZE MOBIEL ===== */

#oefeningen > .panel .row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

#oefeningen > .panel .row button{
  width:100%;
}

#oefeningen .row button{
  width:100%;
}

    .row > *{
      flex:1 1 auto;
      width:100%;
      max-width:none;
    }

    #search{
      padding:8px 11px;
      border-radius:8px;
      font-size:.92rem;
    }

    select{
      padding:8px 10px;
      border-radius:8px;
      font-size:.9rem;
    }

    .week-picker{
      flex:1 1 auto;
      width:100%;
      max-width:none;
      min-width:0;
    }

    .week-picker-btn{
      min-height:42px;
      padding:8px 10px;
      border-radius:10px;
      font-size:.92rem;
    }

    .week-picker-menu{
      padding:6px;
      border-radius:12px;
    }

    .week-option{
      padding:8px 9px;
    }

    .week-option span{
      font-size:.92rem;
    }

    .top-tools{
      justify-content:flex-end;
      padding-right:2px;
    }

    .top-tools .icon-toggle{
      width:42px;
      min-width:42px;
      height:42px;
      min-height:42px;
      padding:0;
      justify-content:center;
    }

    .icon-toggle .toggle-text{
      display:none;
    }

    .list-item{
      padding:10px 12px;
    }

    .list-item-top{
      gap:8px;
    }

    .word-toggle{
      padding:7px 9px;
      min-width:42px;
      min-height:42px;
    }
	
    .panel{
      padding:12px;
    }

	.stats{
  gap:6px;
}

.stat{
  padding:6px 8px;
  font-size:.8rem;
}

        .flash-wrap{
      margin-bottom:18px;
      padding-bottom:14px;
    }

    .flash-stack{
      top:10px;
      left:10px;
      right:10px;
      height:calc(100% - 26px);
    }

    .flash-stack::before{
      top:8px;
      bottom:10px;
      transform:translateX(4px) scale(.987);
    }

    .flash-stack::after{
      top:15px;
      bottom:18px;
      transform:translateX(8px) scale(.975);
    }

    .flash{
      height:300px;
      padding:16px;
    }

    .flash .big{
      font-size:1.25rem;
    }

    .flash-front-word{
      font-size:1.55rem;
    }

    .flash-answer-word{
      font-size:1.6rem;
      margin-bottom:6px;
    }

    .flash-answer-variants{
      margin-bottom:12px;
      font-size:.9rem;
    }

    .flash-example{
      padding:12px;
    }

    .flash-example-title{
      margin-bottom:6px;
      font-size:.92rem;
    }

    .flash-example-pa,
    .flash-example-nl{
      font-size:.92rem;
      margin-bottom:4px;
    }

    .quiz-q{
      font-size:1rem;
    }
	.prep-label{
  display:none;
}

.prep-icon{
  font-size:1.3rem;
}

/* ===== COMPACTE MOEILIJKHEID ===== */

.flash-settings-panel{
  padding:12px;
  border-radius:16px;
}

.week-chip{
  min-width:38px;
  height:38px;
  font-size:.85rem;
}

}
  
/* Lesknoppen en locatiekaarten op de Reis-schermen (features/journey.js).
   Deelden voorheen de .practice-*-classes met het Oefenen-scherm; nu dat
   scherm een rij-layout heeft staan ze los, met exact de oude gestapelde
   vormgeving. */

.lesson-card{
  background:var(--bg-subtle);
  border:1px solid rgba(var(--rgb-brand-primary),.08);
  border-radius:20px;
  padding:18px;
  box-shadow:0 4px 12px rgba(var(--rgb-brand-primary),.05);
  text-align:left;
  cursor:pointer;
  transition:all .2s ease;
}

.lesson-card:hover{
  transform:translateY(-2px);
  border-color:var(--brand-primary);
}

.lesson-card-title{
  font-size:1.1rem;
  font-weight:800;
  color:var(--text-primary);
  margin-bottom:4px;
}

.lesson-card-subtitle{
  color:var(--text-secondary);
  font-size:.9rem;
}

/* ===== PRACTICE SCREEN V3 =====
   Rij-layout (icoonchip · titel/ondertitel/badge · chevron) met dezelfde maten
   als .profile-menu-row en .trainer-card, zodat de drie lijstschermen identiek
   aanvoelen. Kleur komt uitsluitend uit de categorie-tinten in :root. */

/* Elke sectie (Akademia / Vrij leren) is een eigen blok met een .group-label
   erboven en een eigen .practice-grid eronder — het label moet BUITEN de
   grid staan, anders wordt het zelf een grid-item op de 2-koloms breedte. */
.practice-section{
  margin-bottom:4px;
}

.practice-grid{
  display:grid;
  gap:10px;
}

.practice-card{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  background:var(--bg-card);
  border:1px solid var(--border-soft);
  border-radius:18px;
  padding:14px;
  box-shadow:var(--shadow-soft);
  text-align:left;
  cursor:pointer;
  transition:transform .12s ease;
}

.practice-card:active{
  transform:scale(.99);
}

/* Uitgelichte Akademia-kaart: eigen kolom-layout i.p.v. de rij-vorm van
   .practice-card, want deze kaart heeft naast de titel/status ook een
   voortgangsbalk en een losse CTA-knop (zie renderPracticeLeadCard). */
.practice-card-lead{
  flex-direction:column;
  align-items:stretch;
  gap:0;
  /* De kaart zelf is sinds fase 3 punt 11 niet meer klikbaar — de knop
     .practice-lead-open hieronder heeft die rol overgenomen. Zonder deze
     regel erft hij nog cursor:pointer van .practice-card en suggereert hij
     een klikvlak dat er niet is. */
  cursor:default;
}

.practice-card-lead:active{
  transform:none;
}

/* De klikbare kop van de leerpad-kaart. Neemt de plek in van het vroegere
   onclick op de kaart zelf; die kon geen <button> worden omdat er al twee
   knoppen ín zitten (uitleg + CTA). Alleen de knop-defaults die de div-look
   zouden breken worden teruggezet — de rest komt van .practice-lead-head. */
.practice-lead-open{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
  min-width:0;
  border:none;
  background:none;
  padding:0;
  margin:0;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
}

.practice-lead-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

.practice-lead-meta{
  margin:0 0 12px;
  font-size:.72rem;
  font-weight:700;
  color:var(--text-secondary);
}

.practice-icon{
  width:46px;
  height:46px;
  border-radius:14px;
  background:var(--tint-teal-bg);
  color:var(--tint-teal-fg);
}

.practice-icon svg{
  width:var(--icon-md-size);
  height:var(--icon-md-size);
  stroke-width:var(--icon-md-stroke);
}

.practice-icon.tint-gold{
  background:var(--tint-gold-bg);
  color:var(--tint-gold-fg);
}

.practice-icon.tint-coral{
  background:var(--tint-coral-bg);
  color:var(--tint-coral-fg);
}

.practice-icon.tint-green{
  background:var(--tint-green-bg);
  color:var(--tint-green-fg);
}

.practice-meta{
  flex:1;
  min-width:0;
}

.practice-title{
  font-size:.95rem;
  font-weight:800;
  color:var(--text-primary);
}

.practice-subtitle{
  font-size:.78rem;
  color:var(--text-secondary);
  margin-top:1px;
  line-height:1.4;
}

.practice-badge{
  display:inline-flex;
  align-items:center;
  margin-top:6px;
  padding:3px 9px;
  border-radius:999px;
  font-size:.68rem;
  font-weight:800;
  background:var(--tint-teal-bg);
  color:var(--tint-teal-text);
}

.practice-badge.tint-gold{
  background:var(--tint-gold-bg);
  color:var(--tint-gold-text);
}

.practice-badge.tint-coral{
  background:var(--tint-coral-bg);
  color:var(--tint-coral-text);
}

.practice-badge.tint-green{
  background:var(--tint-green-bg);
  color:var(--tint-green-text);
}

.practice-chevron{
  flex-shrink:0;
  width:18px;
  height:18px;
  color:var(--text-secondary);
}

/* "Nu aanbevolen": accent-soft zoals .daily-words-panel, zodat het als advies
   leest en niet als vijfde ingang. */
.practice-rec{
  background:var(--brand-accent-soft);
  border:1px solid rgba(var(--rgb-brand-accent),.35);
  border-radius:22px;
  padding:16px;
  margin-bottom:16px;
}

.practice-rec-eyebrow{
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--brand-accent-text);
  margin-bottom:10px;
}

.practice-rec-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}

/* Was een witte schijf (rgba wit .7) met een goudkleurig icoon erop: dat gaf
   goud-op-crème, in de donkere stand een oplichtende witte vlek met een geel
   icoon dat er nauwelijks op te zien was. Nu het tint-patroon uit
   docs/design-system.md — een zachte vulling van dezelfde kleurfamilie als het
   icoon, die in beide standen meebeweegt. */
.practice-rec-icon{
  width:46px;
  height:46px;
  border-radius:14px;
  background:var(--tint-gold-bg);
  color:var(--tint-gold-text);
}

.practice-rec-icon svg{
  width:var(--icon-md-size);
  height:var(--icon-md-size);
  stroke-width:var(--icon-md-stroke);
}

.practice-rec-meta{
  flex:1;
  min-width:0;
}

.practice-rec-title{
  font-size:1rem;
  font-weight:800;
  color:var(--text-primary);
}

.practice-rec-text{
  font-size:.8rem;
  color:var(--text-secondary);
  margin-top:2px;
  line-height:1.45;
}

@media (min-width:768px){

  .practice-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .practice-card-lead{
    grid-column:1 / -1;
  }

}

/* ===== SPRINT 2 HOME REDESIGN ===== */

#homeScreen{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
}

.home-subtitle{
  color:var(--muted);
  margin-bottom:20px;
}

.hero-card{
  background:var(--brand-primary);
  color:var(--text-on-brand);

  padding:18px;

  border-radius:22px;

  margin-bottom:16px;

  box-shadow:
    0 12px 30px rgba(var(--rgb-shadow),.12);
}

.hero-eyebrow{
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.7;
  margin-bottom:6px;
}

.hero-header{
  display:flex;
  align-items:center;
  gap:12px;
}

.hero-icon-box{
  width:40px;
  height:40px;

  border-radius:14px;

  background:rgba(var(--rgb-white),.15);

  font-size:1.2rem;
}

.hero-title{
  font-size:1.1rem;
  font-weight:800;
}

.hero-lesson{
  margin-top:4px;
  opacity:.9;
}

.hero-lesson-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-top:12px;

  font-size:.85rem;
  font-weight:700;
}

/* .hidden{display:none} en deze regel hebben gelijke specificiteit -
   zonder deze override wint display:flex altijd door bestandsvolgorde,
   waardoor de 0%-rij bij een net-gestarte reis nooit echt verborgen is
   (zelfde bekende quirk als .trainer-reference-overlay.hidden). */
.hero-lesson-row.hidden{
  display:none;
}

.hero-percent{
  color:var(--brand-accent-text);
}

.hero-progress{
  margin:8px 0 14px;

  height:8px;

  background:
    rgba(var(--rgb-white),.2);

  border-radius:999px;

  overflow:hidden;
}

.hero-progress-fill{
  width:65%;
  height:100%;

  background:var(--brand-accent);
}

/* Alleen bij een net-gestarte reis (geen les/balk zichtbaar, zie
   renderJourneyHero()): zonder deze marge staat de knop direct onder de
   ondertitel, want de ruimte die normaal door hero-lesson-row/hero-progress
   wordt opgebouwd valt dan volledig weg. */
.hero-card--empty .hero-btn{
  margin-top:16px;
}

.hero-btn{
  width:100%;

  border:none;

  border-radius:14px;

  padding:12px;

  background:var(--brand-accent);

  color:var(--text-on-accent);

  font-weight:700;
  font-size:.95rem;

  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.hero-btn svg{
  width:var(--icon-sm-size);
  height:var(--icon-sm-size);
  stroke-width:var(--icon-sm-stroke);
  flex-shrink:0;
}

.hero-btn-compact{
  padding:10px;
  font-size:.9rem;
}

.flash-settings-panel.hidden{
  display:none !important;
}

.week-chip{

  min-width:42px;

  height:42px;

  padding:0 12px;

  border-radius:10px;

  display:flex;

  align-items:center;

  justify-content:center;

	border:1px solid var(--border-soft);
 
	background:var(--bg-subtle);

  font-size:.9rem;

  font-weight:700;

  cursor:pointer;
}

.week-chip:hover{
  background:var(--bg-info-alt);
}

.week-chip.active{
  background:var(--brand-primary);

  border-color:var(--brand-primary);

  color:var(--text-on-brand);
}

.flash-settings-panel{
  display:flex;
  flex-direction:column;

  gap:12px;

  padding:0;

  border:none;

  border-radius:0;

  background:transparent;

  box-shadow:none;

  margin-bottom:20px;
}

.flash-settings-panel select{
  width:100%;
  max-width:420px;
}

.filter-label{
  font-size:.9rem;
  font-weight:700;
  color:var(--text-secondary);
}

.week-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.week-chips.is-disabled{
  opacity:.45;
  pointer-events:none;
}

.flash-settings-panel select:disabled{
  opacity:.45;
}

.source-toggle{
  display:flex;
  gap:8px;
}

/* Drie bronnen (Alle / Dagset / Moeilijk) moeten op smalle toestellen naast
   elkaar passen, vandaar de krappere padding en tekstgrootte. */
.source-toggle-btn{
  flex:1;
  min-width:0;
  min-height:42px;
  padding:0 8px;

  border-radius:10px;
  border:1px solid var(--border-soft);
  background:var(--bg-subtle);

  font-size:.85rem;
  font-weight:700;
  white-space:nowrap;

  cursor:pointer;
}

.source-toggle-btn:hover{
  background:var(--bg-info-alt);
}

.source-toggle-btn.active{
  background:var(--brand-primary);
  border-color:var(--brand-primary);
  color:var(--text-on-brand);
}

.source-hint{
  font-size:.8rem;
  font-style:italic;
  color:var(--text-secondary);
  margin-top:-6px;
}

.filterbtn{
  width:38px;
  height:38px;
  flex:0 0 38px;

  border:none;
  border-radius:12px;

  background:var(--brand-deep);
  color:var(--text-on-brand);

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  box-shadow:0 2px 8px rgba(var(--rgb-brand-deep),.35);
}

.filterbtn svg{
  width:17px;
  height:17px;
}

.stats .filterbtn{
  margin-left:auto;
}

/* De uitleg-(i)-knop op de quiz (.trainer-reference-btn, zie
   TRAINER HEADER hierboven) hangt hier in .stats i.p.v. in een eigen
   .trainer-header — dus moet .stats zelf de positioneringscontext leveren
   voor de sprekende-bubbel (.trainer-reference-hint is position:absolute). */
#quiz .stats{
  position:relative;
}

/* De twee ronde knoppen (filterbtn 38px, reference-btn 32px) naast elkaar
   laten uitlijnen ondanks het maatverschil. */
#quiz .stats .trainer-reference-btn{
  margin-left:8px;
}

.quiz-method-note{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  margin-top:12px;
  padding:10px 12px;

  background:var(--brand-accent-soft);
  border:1px solid var(--brand-accent);
  border-radius:14px;

  font-size:.85rem;
  color:var(--brand-accent-text);
}

/* .hidden{display:none} en deze regel hebben gelijke specificiteit -
   zonder deze override wint display:flex altijd door bestandsvolgorde,
   waardoor de melding nooit echt verdween na het wegklikken. */
.quiz-method-note.hidden{
  display:none;
}

.quiz-method-note-close{
  flex-shrink:0;
  width:24px;
  height:24px;

  border:none;
  border-radius:50%;
  background:transparent;
  color:var(--brand-accent-text);

  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.quiz-method-note-close svg{
  width:16px;
  height:16px;
}

#woordenlijst .search-row{
  display:flex;
  flex-direction:row;
  align-items:center;
  flex-wrap:nowrap;
  gap:8px;
}

#woordenlijst .search-row > #search{
  flex:1 1 0;
  width:auto;
  min-width:0;
  margin-bottom:0;
}

.bottom-nav button{
  padding:6px 10px;
  border-radius:12px;
}

.bottom-nav button.active{
  color:var(--brand-primary-text);
  background:var(--bg-brand-soft);
}

.bottom-nav button.active svg{
  stroke-width:2.8;
}

.bottom-nav button.active span{
  font-weight:800;
}

@media (min-width: 900px){

  .flash-settings-panel{
    max-width:500px;
  }

  #flashcards,
  #quiz,
  #woordenlijst{
    max-width:900px;
    margin:0 auto;
  }

}

/* ===== WEEK TRACKER ===== */

.week-tracker{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}

.week-day{
  display:flex;
  flex-direction:column;
  align-items:center;
  flex:1;
  gap:3px;
}

.week-day-label{
  font-size:.68rem;
  font-weight:700;
  color:rgba(var(--rgb-white),.85);
}

.week-day-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:rgba(var(--rgb-white),.25);
}

.week-day-dot.active{
  background:var(--success-bright);
  box-shadow:
    0 0 0 3px rgba(var(--rgb-success-bright),.20);
}

.week-day-dot.today{
  width:12px;
  height:12px;

  background:var(--brand-accent);
  box-shadow:
    0 0 0 3px rgba(var(--rgb-brand-accent),.30);
}

.trainer-header h3{
  display:flex;
  align-items:center;
  gap:8px;
}

.trainer-header svg{
  width:18px;
  height:18px;
  stroke-width:2;
}

#progressScreen h2,
#profileScreen h2,
#homeScreen h3{
  display:flex;
  align-items:center;
  gap:8px;
}

#progressScreen h2 svg,
#profileScreen h2 svg,
#homeScreen h3 svg{
  width:20px;
  height:20px;
  stroke-width:2;
  flex-shrink:0;
}

#homeScreen h3{
  margin:0 0 8px;
  font-size:.95rem;
}

.home-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}

.home-logo{
  width:44px;
  height:44px;
  object-fit:contain;
  flex-shrink:0;
}

.home-brand-tagline{
  color:var(--muted);
  font-size:.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.02em;
  margin-bottom:2px;
}

.home-brand h2{
  margin:0;
  font-size:1.2rem;
}

.home-brand .home-subtitle{
  margin:2px 0 0;
  font-size:.85rem;
}

.home-streak-badge{
  display:flex;
  align-items:center;
  gap:4px;

  margin-left:auto;
  flex-shrink:0;

  padding:4px 10px;

  border-radius:999px;

  background:var(--brand-accent-soft);
  color:var(--brand-accent-text);

  font-size:.78rem;
  font-weight:800;
}

.home-streak-badge.hidden{
  display:none;
}

.home-streak-badge svg{
  width:var(--icon-xs-size);
  height:var(--icon-xs-size);
  stroke-width:var(--icon-xs-stroke);
  fill:var(--brand-accent-dark);
}

.login-status-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;

  margin-top:8px;
  padding:4px 10px;

  border-radius:999px;

  background:var(--success-soft);
  color:var(--success-text);

  font-size:.78rem;
  font-weight:700;
}

.login-status-chip.hidden{
  display:none;
}

.login-status-chip svg{
  width:14px;
  height:14px;
  stroke-width:2.4;
  flex:0 0 auto;
}

#progressScreen h3{
  display:flex;
  align-items:center;
  gap:8px;
}

#progressScreen h3 svg{
  width:18px;
  height:18px;
  stroke-width:2;
  flex-shrink:0;
}

/* --- Voortgangsscherm (sub-fase 1E, + de tabs-herziening erna): mastery-
   balk + activiteitshistogram. Balk-primitief (.trainer-card-bar/-fill/-pct)
   en rij-omhulsel (.akademia-level) zijn bewust hergebruikt in
   features/progress.js i.p.v. hier gedupliceerd — alleen wat écht nieuw is
   staat hieronder. --- */

.progress-mastery-summary{
  font-size:.85rem;
  font-weight:800;
  color:var(--text-primary);
  margin-bottom:8px;
}

.mastery-bar{
  display:flex;
  height:14px;
  border-radius:999px;
  overflow:hidden;
  background:var(--border-soft);
}

/* Compacte "klaar om te herhalen"-regel in het kopblok — bewust geen volle
   .practice-rec-kaart meer, dat advies staat al breed uitgewerkt op Oefenen
   (getPracticeRecommendation()). Zelfde accent-soft kleurtaal als
   .practice-rec (een uitnodiging, geen meetwaarde), maar dan als één dunne
   klikbare rij. */
.progress-due-row{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  margin-top:12px;
  padding:10px 12px;
  border-radius:12px;
  background:var(--brand-accent-soft);
  border:1px solid rgba(var(--rgb-brand-accent),.35);
  font-size:.85rem;
  font-weight:700;
  color:var(--text-primary);
  text-align:left;
  cursor:pointer;
}

.progress-due-row svg:first-child{
  flex-shrink:0;
  width:var(--icon-sm-size);
  height:var(--icon-sm-size);
  stroke-width:var(--icon-sm-stroke);
  color:var(--brand-accent-text);
}

.progress-due-row-text{
  flex:1;
  min-width:0;
}

.progress-due-row-chevron{
  flex-shrink:0;
  width:16px;
  height:16px;
  color:var(--text-secondary);
}

/* Tab-balk onder het kopblok (Woorden/Activiteit/Reis) — zelfde
   .source-toggle als switchWordsMode() (utils/core.js), alleen de
   marge-klasse is eigen omdat .words-mode-toggle een verwarrende naam zou
   zijn voor dit scherm. */
.progress-tab-toggle{
  margin-bottom:14px;
}

.mastery-seg{
  height:100%;
}

.mastery-seg.m0{ background:var(--mastery-new-bg); }
.mastery-seg.m1{ background:var(--mastery-recognized-bg); }
.mastery-seg.m2{ background:var(--mastery-active-bg); }
.mastery-seg.m3{ background:var(--mastery-mastered-bg); }

.mastery-legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  margin-top:10px;
}

.mastery-legend-item{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.72rem;
  font-weight:700;
  color:var(--text-secondary);
}

.mastery-legend-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  flex-shrink:0;
}

.mastery-legend-dot.m0{ background:var(--mastery-new-bg); border:1px solid var(--border-soft); }
.mastery-legend-dot.m1{ background:var(--mastery-recognized-bg); }
.mastery-legend-dot.m2{ background:var(--mastery-active-bg); }
.mastery-legend-dot.m3{ background:var(--mastery-mastered-bg); }

.activity-chart{
  display:flex;
  align-items:flex-end;
  gap:4px;
  height:64px;
}

.activity-bar-col{
  flex:1;
  height:100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.activity-bar{
  width:100%;
  max-width:16px;
  min-height:3px;
  border-radius:4px 4px 0 0;
  background:var(--brand-primary);
}

.activity-bar.is-empty{
  background:var(--border-soft);
}

.activity-summary{
  font-size:.72rem;
  font-weight:700;
  color:var(--text-secondary);
  margin-top:8px;
}

.word-card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}

.word-number{
  color:var(--text-secondary);
  font-size:.85rem;
  font-weight:600;
}

/* Stond hier met twee color-declaraties, waarvan de hardgecodeerde #8A8A8A de
   token-regel erboven overschreef. De token wint nu - dat is meteen wat meer
   contrast (#8A8A8A haalde 3,2:1 op zand, ruim onder AA). */
.word-type{
  color:var(--text-secondary);
  font-size:.8rem;
  margin-bottom:12px;
}

.word-week-badge{
  display:inline-flex;
  align-items:center;

  padding:4px 10px;

  border-radius:999px;

  background:var(--bg-muted);

  font-size:.8rem;
  font-weight:700;
}

.word-example{
  margin-top:12px;

  padding:12px;

  background:rgba(var(--rgb-bg-muted),.6);

  border:none;
  border-left:3px solid
	var(--brand-accent);

  border-radius:12px;
}

.word-example-pa{
  font-weight:600;

  margin-bottom:6px;

  color:var(--text-primary);
}

.word-example-nl{
  font-size:.9rem;

  color:var(--text-secondary);
}

#woordenlijst #search{
  margin-bottom:16px;
  background:var(--bg-subtle);
	border:1px solid var(--border-soft);
}

.words-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-bottom:18px;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}

.language-chip:active{
  transform:scale(.96);
}

.word-secondary{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:4px;
  margin-bottom:8px;
  color:var(--text-secondary);
  font-size:14px;
}

.variant-tag{
  font-size:10px;
  font-weight:700;
  padding:2px 6px;
  border-radius:999px;
  background:var(--border-neutral);
  color:var(--text);
}

.flash-secondary-word{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;

  margin-top:8px;
  margin-bottom:10px;

  color:var(--text-secondary);
  font-size:14px;
  font-weight:500;
}

.quiz-variant-warning{
  margin-top:12px;
  margin-bottom:8px;
  padding:10px;
  border-radius:12px;
  background:var(--bg-warn);
  color:var(--tint-gold-text);
  font-weight:600;
}

.quiz-variant-pair{
  margin-top:8px;
  line-height:1.8;
}

.word-of-day{
  background:transparent;
  border:none;
  padding:0;
}

.word-of-day .word{
  color:var(--brand-primary-text);
  font-size:26px;
  font-weight:800;
}

.word-of-day .meta{
  margin-top:4px;
  color:var(--text-secondary);
}

.word-of-day-panel{
  background:var(--bg-info);
  border:none;
}

.setting-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;

  gap:20px;

  margin-top:8px;

  padding-top:12px;
}

.setting-row .setting-title{
  font-size:15px;
  font-weight:600;
}

.setting-content{
  flex:1;
}

.setting-title{
  font-weight:700;
  margin-bottom:6px;
}

.setting-description{
  font-size:14px;
  line-height:1.4;
  color:var(--text-secondary);
}

.setting-example{
  margin-top:6px;
  font-size:13px;
  color:var(--brand-primary-text);
  font-weight:600;
}

#showOtherVariantToggle{
  width:22px;
  height:22px;
  cursor:pointer;
}

.setting-row span{
  font-weight:600;
}

.language-toggle{
  display:flex;

  background:var(--bg-card);

  border-radius:999px;

  padding:3px;

  gap:0;

  box-shadow:0 1px 3px rgba(var(--rgb-shadow),.12);
}

.language-toggle button{

  border:none;
  background:transparent;

  min-width:48px;
  height:30px;

  border-radius:999px;

  font-size:12px;
  font-weight:700;

  color:var(--text-tertiary);

  cursor:pointer;

  transition:all .2s ease;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

.travel-view-toggle button svg{
  width:var(--icon-xs-size);
  height:var(--icon-xs-size);
  stroke-width:var(--icon-xs-stroke);
}

.language-toggle button.active{

  background:var(--brand-deep);

  color:var(--text-on-brand);

  box-shadow:none;
}

/* ===== Reis: Kaart/Lijst-toggle + eilandkaart (features/island-map.js) ===== */

.travel-view-toggle{
  justify-content:center;
  width:fit-content;
  margin:0 auto 16px;
}

.travel-view-toggle button{
  min-width:96px;
  padding:0 16px;
  font-size:13px;
}

.island-map{
  position:relative;
  width:100%;
  max-width:520px;
  margin:0 auto 16px;
  border-radius:24px;
  overflow:hidden;

  background:
    radial-gradient(
      ellipse 90% 80% at 50% 50%,
      var(--map-water-1) 0%,
      var(--map-water-2) 38%,
      var(--map-water-3) 68%,
      var(--map-water-4) 100%
    );

  box-shadow:var(--shadow-soft);

  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}

.island-map-zoom-layer{
  position:absolute;
  inset:0;
  transform-origin:center center;
  will-change:transform;
}

.island-map-svg{
  position:absolute;
  inset:18px;
  width:calc(100% - 36px);
  height:calc(100% - 36px);
  display:block;
}

.island-map-land{
  fill:var(--brand-accent-soft);
  stroke:var(--brand-primary);
  stroke-width:4;
  stroke-linejoin:round;
}

.island-map-route{
  fill:none;
  stroke:var(--brand-primary);
  stroke-width:3;
  stroke-dasharray:2 10;
  stroke-linecap:round;
  opacity:.5;
}

.island-map-wave-line-strong{
  fill:none;
  stroke:var(--text-on-brand);
  stroke-width:2;
  stroke-linecap:round;
  opacity:.55;
}

.island-map-wave-line-soft{
  fill:none;
  stroke:var(--text-on-brand);
  stroke-width:1.5;
  stroke-linecap:round;
  opacity:.35;
}

.island-map-zoom-controls{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:3;

  display:flex;
  flex-direction:column;
  gap:6px;
}

.island-map-zoom-btn{
  width:32px;
  height:32px;
  border-radius:50%;
  border:none;

  background:var(--surface-veil);
  color:var(--text-primary);
  font-size:18px;
  font-weight:700;
  line-height:1;

  box-shadow:0 2px 6px rgba(var(--rgb-shadow),.25);
  cursor:pointer;
}

.island-map-zoom-btn:active{
  background:var(--bg-card);
  transform:scale(.94);
}

.island-map-sea-label{
  font-family:Georgia,'Times New Roman',serif;
  font-style:italic;
  font-size:26px;
  letter-spacing:2px;
  fill:var(--map-land);
  fill-opacity:.55;
  text-anchor:middle;
}

.island-map-decorations{
  position:absolute;
  inset:18px;
  pointer-events:none;
}

.island-map-decoration{
  position:absolute;
  transform:translate(-50%,-50%);
  opacity:.6;
  filter:drop-shadow(0 1px 2px rgba(var(--rgb-shadow),.15));
}

.island-map-landmarks{
  position:absolute;
  inset:18px;
}

.island-map-landmark{
  position:absolute;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  z-index:1;
}

.island-map-landmark-icon{
  font-size:15px;
  opacity:.75;
  filter:drop-shadow(0 1px 2px rgba(var(--rgb-shadow),.2));
}

.island-map-landmark-label{
  font-size:9px;
  font-weight:700;
  font-style:italic;
  color:var(--text-primary);
  background:var(--surface-veil-soft);
  padding:1px 5px;
  border-radius:6px;
  white-space:nowrap;
}

.island-map-markers{
  position:absolute;
  inset:18px;
}

.island-map-marker{
  position:absolute;
  width:0;
  height:0;
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  z-index:1;
  overflow:visible;
}

.island-map-marker:hover .island-map-dot{
  transform:translate(-50%,-50%) scale(1.08);
}

/* Stip, badges en label zijn op 2026-08-05 bewust een maatje kleiner gemaakt
   (stip 36→30px, label 10.5→10px, labelafstand 22→16px). Reden: op een
   360px-kaart liggen Eagle Beach en Tanki Flip maar 53px uit elkaar terwijl
   stip + label ~100px nodig hadden, waardoor tanki-flip in aruba.js ~3 km te
   ver oostwaarts gezet moest worden. Met deze maten past het Eagle
   Beach-label links van zijn stip in zee en staat elk dorp weer op zijn echte
   plek. features/island-map.test.html meet dit na. */

.island-map-dot{
  position:absolute;
  left:0;
  top:0;
  transform:translate(-50%,-50%);
  width:30px;
  height:30px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  background:var(--bg-card);
  box-shadow:0 3px 8px rgba(var(--rgb-shadow),.18);
  border:2.5px solid var(--border-soft);
  transition:transform .15s ease;
}

.island-map-dot-icon{
  position:relative;
  z-index:1;
}

.island-map-marker-done .island-map-dot{
  border-color:var(--success);
  background:var(--success-soft);
}

.island-map-marker-current .island-map-dot{
  border-color:var(--brand-accent);
  background:var(--brand-accent-soft);
  box-shadow:0 4px 12px rgba(var(--rgb-brand-accent),.5);
}

.island-map-marker-locked .island-map-dot{
  filter:grayscale(35%);
  opacity:.8;
}

.island-map-pulse{
  position:absolute;
  inset:-8px;
  border-radius:50%;
  background:var(--brand-accent);
  opacity:.55;
  animation:islandMarkerPulse 1.8s ease-out infinite;
}

.island-map-chapter-badge{
  position:absolute;
  top:-4px;
  left:-4px;
  z-index:2;

  width:15px;
  height:15px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;

  background:var(--brand-primary);
  color:var(--text-on-brand);
  font-size:8px;
  font-weight:700;
  border:1.5px solid var(--text-on-brand);
  box-shadow:0 1px 3px rgba(var(--rgb-shadow),.25);
}

.island-map-done-badge{
  position:absolute;
  bottom:-3px;
  right:-3px;
  z-index:2;

  width:14px;
  height:14px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;

  /* --success-deep i.p.v. --success: op dit vinkje van 14px staat een witte ✓
     van 8px, en op de lichtere groen haalde dat 3,49:1. */
  background:var(--success-deep);
  color:var(--text-on-brand);
  font-size:8px;
  font-weight:700;
  border:1.5px solid var(--text-on-brand);
  box-shadow:0 1px 3px rgba(var(--rgb-shadow),.25);
}

@keyframes islandMarkerPulse{
  0%{
    transform:scale(.6);
    opacity:.55;
  }
  100%{
    transform:scale(1.9);
    opacity:0;
  }
}

.island-map-label{
  position:absolute;
  z-index:1;

  font-size:10px;
  font-weight:700;
  line-height:1.2;
  color:var(--text-primary);
  background:var(--surface-veil);
  padding:3px 6px;
  border-radius:8px;
  max-width:92px;
  text-align:center;
  white-space:normal;
  box-shadow:0 1px 4px rgba(var(--rgb-shadow),.18);
}

.island-map-marker-locked .island-map-label{
  opacity:.8;
}

/* Label groeit vanaf de rand van de dot naar buiten (in plaats van samen met
   de dot gecentreerd te worden), zodat de dot altijd exact op de coördinaat
   blijft staan, ook bij locaties dicht tegen de kaartrand. Elk label krijgt
   ook een klein "staartje" (::after) dat naar de bijbehorende dot wijst, zodat
   altijd duidelijk is welk label bij welke locatie hoort. */

.island-map-label::after{
  content:'';
  position:absolute;
  width:0;
  height:0;
  border:6px solid transparent;
}

.island-map-label-bottom{
  left:0;
  top:16px;
  transform:translateX(-50%);
}

.island-map-label-bottom::after{
  top:-6px;
  left:50%;
  transform:translateX(-50%);
  border-bottom-color:var(--surface-veil);
}

.island-map-label-top{
  left:0;
  bottom:16px;
  transform:translateX(-50%);
}

.island-map-label-top::after{
  bottom:-6px;
  left:50%;
  transform:translateX(-50%);
  border-top-color:var(--surface-veil);
}

.island-map-label-right{
  left:16px;
  top:0;
  transform:translateY(-50%);
}

.island-map-label-right::after{
  left:-6px;
  top:50%;
  transform:translateY(-50%);
  border-right-color:var(--surface-veil);
}

.island-map-label-left{
  right:16px;
  top:0;
  transform:translateY(-50%);
}

.island-map-label-left::after{
  right:-6px;
  top:50%;
  transform:translateY(-50%);
  border-left-color:var(--surface-veil);
}

.island-map-legend{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:20px;
}

.island-map-legend-item{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--text-secondary);
  font-weight:600;
}

.island-map-legend-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  display:inline-block;
}

.island-map-legend-done{
  background:var(--success);
}

.island-map-legend-current{
  background:var(--brand-accent);
}

.island-map-legend-locked{
  background:var(--border-soft);
  border:2px solid var(--text-secondary);
}

.setting-block{
  background:var(--bg-inset);
  border-radius:16px;
  padding:16px;
  margin-bottom:24px;
}


.setting-block > .setting-title{
  font-size:18px;
  font-weight:700;
}

.setting-divider{
  height:1px;
  background:var(--border-neutral);
  margin:18px 0;
}

/* Over Papi na ABC — "wat erin zit" (features/profile.js renderProfileAbout):
   vijf getallen als kleine pillen op één regel, wrapt vanzelf op smal. */
.about-facts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.about-fact{
  padding:5px 12px;
  border-radius:999px;
  background:var(--tint-teal-bg);
  color:var(--tint-teal-text);
  font-size:.78rem;
  font-weight:700;
}

/* --- Account (inloggen/registreren/uitloggen), features/account.js --- */

.account-block .setting-description{
  margin-bottom:16px;
}

/* Google's eigen tokens, bewust NIET --bg-card/--text-primary: dit is de
   voorgeschreven vormgeving van de inlogknop en die heeft een eigen lichte en
   donkere variant (#FFFFFF/#3C4043 om #DADCE0 tegenover #131314/#E3E3E3 om
   #8E918F). Zou hij met de app meekleuren, dan wijkt hij van de richtlijn af.
   Zelfde reden waarom de vier merkkleuren in de G-svg (features/account.js)
   hardgecodeerd blijven. */
.btn.account-btn-google{
  width:100%;
  background:var(--google-btn-bg);
  color:var(--google-btn-text);
  border:1px solid var(--google-btn-border);
  margin-bottom:14px;
}

.btn.account-btn-google:hover{
  background:var(--google-btn-bg-hover);
  box-shadow:0 1px 2px rgba(var(--rgb-shadow),.12);
}

.btn.account-btn-google svg{
  width:20px;
  height:20px;
  flex:0 0 auto;
}

.btn.account-btn-primary{
  width:100%;
  background:var(--brand-primary);
  color:var(--text-on-brand);
  border-color:var(--brand-primary);
  box-shadow:0 8px 20px rgba(var(--rgb-brand-primary),.28);
}

.btn.account-btn-primary:hover{
  background:var(--brand-primary-dark);
  border-color:var(--brand-primary-dark);
}

.account-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:4px 0 16px;
  color:var(--text-secondary);
  font-size:.85rem;
}

.account-divider::before,
.account-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--border-soft);
}

.account-field{
  margin-bottom:14px;
}

.account-field label{
  display:block;
  font-size:.85rem;
  font-weight:600;
  margin-bottom:6px;
  color:var(--text-primary);
}

.account-link-btn{
  background:none;
  border:none;
  padding:0;
  color:var(--brand-primary-text);
  font-weight:700;
  cursor:pointer;
  text-decoration:underline;
  font-size:inherit;
}

.account-forgot-btn{
  display:block;
  margin-top:12px;
  font-size:.85rem;
}

#accountFormMessage:empty{
  margin:0;
}

#accountFormMessage{
  margin-top:8px;
}

.account-identity-name{
  font-weight:800;
  font-size:1.1rem;
  color:var(--text-primary);
}

.account-identity-email{
  color:var(--text-secondary);
  font-size:.9rem;
  margin-top:2px;
}

.btn.account-btn-danger{
  width:100%;
  background:var(--danger-soft);
  color:var(--danger-text);
  border-color:var(--danger);
  margin-top:10px;
}

.btn.account-btn-danger:hover{
  background:var(--danger-strong);
  color:var(--text-on-brand);
}

#profilePrivacyView .setting-description a{
  color:var(--brand-primary-text);
  font-weight:600;
}

/* Was ooit bedoeld als omhulsel rond .account-link-btn (afstammeling-
   selector), maar in index.html staan beide klassen op hetzelfde element —
   de afstammeling-versie matchte daardoor nooit en de link toonde de volle
   .account-link-btn-stijl (onderstreept, brand-primary) i.p.v. gedempt. */
.account-privacy-link.account-link-btn{
  margin-top:4px;
  font-size:.8rem;
  color:var(--text-secondary);
  text-decoration:none;
}

/* --- Onboarding-intro (eerste bezoek), features/onboarding.js --- */

.onboarding-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:2000;

  align-items:center;
  justify-content:center;
  text-align:center;

  /* De inhoud van stap 2 (drie manieren om te leren) is de langste van de
     vier stappen. align-items:center centreert prima zolang alles past,
     maar zonder scroll valt de onderkant op een korte/liggende viewport
     gewoon weg. overflow-y:auto + margin:auto op .onboarding-step is de
     standaardtruc: kort blijft gecentreerd, lang krijgt een scrollbalk. */
  overflow-y:auto;

  padding:32px 28px;

  background:linear-gradient(
    180deg,
    var(--stage-bg-1) 0%,
    var(--stage-bg-2) 55%,
    var(--stage-bg-3) 100%
  );
}

.onboarding-overlay:not(.hidden){
  display:flex;
}

.onboarding-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  max-width:360px;
  margin:auto;
}

.onboarding-step.hidden{
  display:none;
}

.onboarding-logo{
  width:72px;
  height:72px;
  object-fit:contain;
}

.onboarding-title{
  font-weight:800;
  font-size:1.35rem;
  color:var(--text-on-brand);
}

.onboarding-text{
  font-size:.95rem;
  line-height:1.5;
  color:rgba(var(--rgb-white),.85);
}

.onboarding-choice-row{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  width:100%;
}

.btn.onboarding-btn-primary{
  width:100%;
  max-width:320px;
  background:var(--brand-accent);
  color:var(--text-on-accent);
  border-color:var(--brand-accent);
}

.btn.onboarding-btn-primary:hover{
  background:var(--brand-accent-dark);
  border-color:var(--brand-accent-dark);
}

.btn.onboarding-btn-secondary{
  width:100%;
  max-width:320px;
  background:rgba(var(--rgb-white),.12);
  color:var(--text-on-brand);
  border:2px solid rgba(var(--rgb-white),.4);
}

.btn.onboarding-btn-secondary:hover{
  background:rgba(var(--rgb-white),.2);
}

/* Tweede regel op de "Ik ken al wat Papiaments"-knop (stap 2, niveaucheck-
   ingang, fase 1 sub-fase 1F) — kleiner en gedempter dan de hoofdtekst,
   zelfde knop, geen los element. */
.onboarding-btn-subtext{
  font-size:.72rem;
  font-weight:600;
  opacity:.75;
}

.onboarding-variant-row{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  width:100%;
}

/* Twee identieke kaarten, geen enkele met standaard nadruk — bewust géén
   hergebruik van .onboarding-btn-primary/-secondary hier: dat paar oogt
   ongelijk (gevulde knop vs. outline) en zou één eiland als "aanbevolen"
   laten lezen. Beide varianten delen precies deze ene class. */
.onboarding-variant-card{
  width:100%;
  max-width:320px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:16px 20px;
  border-radius:14px;
  border:2px solid rgba(var(--rgb-white),.4);
  background:rgba(var(--rgb-white),.12);
  color:var(--text-on-brand);
  font-family:inherit;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}

.onboarding-variant-card:hover{
  background:rgba(var(--rgb-white),.2);
}

/* Korte tik-bevestiging vlak vóór het automatisch doorschuiven naar stap 3
   (zie chooseOnboardingVariant in features/onboarding.js) — geen van beide
   kaarten heeft deze class bij het tonen van het scherm. */
.onboarding-variant-card.selected{
  background:var(--brand-accent);
  border-color:var(--brand-accent);
  color:var(--text-on-accent);
}

.onboarding-variant-name{
  font-weight:800;
  font-size:1.05rem;
}

.onboarding-variant-place{
  font-size:.85rem;
  color:rgba(var(--rgb-white),.85);
}

.onboarding-variant-card.selected .onboarding-variant-place{
  color:var(--text-primary);
}

/* Taalkeuze (stap 1) hergebruikt de variantkaart volledig — zelfde vorm,
   zelfde tik-bevestiging — en voegt er alleen een vlag boven de naam aan toe.
   De vlag draagt geen informatie die de naam niet al geeft (die staat er
   voluit onder), dus hij is puur herkenningshulp. */
.onboarding-lang-flag{
  font-size:1.6rem;
  line-height:1;
}

.onboarding-hint{
  font-size:.8rem;
  line-height:1.4;
  color:rgba(var(--rgb-white),.7);
}

/* Stap 2: "Zo werkt Papi na ABC" — drie compacte rijen (Reis/Akademia/Vrij
   leren) op het donkere verloop. Bewust links uitgelijnd (i.p.v. de
   gecentreerde tekst van de rest van de overlay): drie regels icoon+naam+
   tekst lezen als lijst, niet als los blok. */
.onboarding-ways{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
  text-align:left;
}

.onboarding-way{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(var(--rgb-white),.10);
}

.onboarding-way-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:36px;
  height:36px;
  border-radius:11px;
  background:rgba(var(--rgb-white),.15);
  color:var(--text-on-brand);
}

.onboarding-way-icon svg{
  width:var(--icon-sm-size);
  height:var(--icon-sm-size);
  stroke-width:var(--icon-sm-stroke);
}

.onboarding-way-name{
  font-weight:800;
  font-size:.95rem;
  color:var(--text-on-brand);
}

.onboarding-way-text{
  font-size:.8rem;
  line-height:1.4;
  color:rgba(var(--rgb-white),.8);
  margin-top:1px;
}

/* --- Niveaucheck (fase 1, sub-fase 1F), features/level-check.js --- */

.level-check-intro-panel{
  text-align:center;
}

.level-check-intro-title{
  font-weight:800;
  font-size:1.2rem;
  color:var(--text-primary);
  margin-bottom:4px;
}

.level-check-intro-duration{
  font-size:.8rem;
  font-weight:700;
  color:var(--text-secondary);
  margin-bottom:14px;
}

.level-check-intro-text{
  font-size:.88rem;
  line-height:1.55;
  color:var(--text-secondary);
  margin-bottom:10px;
}

.level-check-intro-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:16px;
}

/* Sportjes-stepper (4 niveaus) op het vraagscherm, naast "Vraag n" op
   dezelfde regel als trainer-round-count — zelfde plek/patroon als
   .quiz-round-number (features/quiz.js updateQuizRoundUI). */
.level-check-rungs{
  display:flex;
  gap:5px;
}

.level-check-rung{
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--border-soft);
}

.level-check-rung.done{
  background:var(--brand-primary);
}

.level-check-rung.current{
  background:var(--brand-accent);
}

.level-check-dontknow-btn{
  display:block;
  margin:14px auto 0;
  font-size:.82rem;
}

/* --- Dismissible "bewaar je voortgang"-kaart op Home, features/onboarding.js --- */

.home-account-card{
  background:var(--brand-accent-soft);
  border-color:var(--brand-accent);
  position:relative;
  padding-right:40px;
}

.home-account-card.hidden{
  display:none;
}

.home-account-card-dismiss{
  position:absolute;
  top:12px;
  right:12px;

  width:28px;
  height:28px;

  border:none;
  background:rgba(var(--rgb-white),.6);
  border-radius:999px;

  display:flex;
  align-items:center;
  justify-content:center;

  color:var(--text-secondary);
  cursor:pointer;
}

.home-account-card-dismiss svg{
  width:16px;
  height:16px;
  stroke-width:2.4;
}

.home-account-card-text{
  font-size:.9rem;
  line-height:1.45;
  color:var(--text-primary);
  margin-bottom:12px;
}

.home-account-card-btn{
  width:100%;
}

.switch{
  position:relative;
  display:inline-block;
  width:52px;
  height:30px;
  margin-top:4px;
}

.switch input{
  opacity:0;
  width:0;
  height:0;
}

.slider{
  position:absolute;
  inset:0;

  background:var(--track);

  border-radius:999px;

  transition:.25s;
}

.slider:before{
  content:'';

  position:absolute;

  width:24px;
  height:24px;

  left:3px;
  top:3px;

  background:var(--bg-card);

  border-radius:50%;

  transition:.25s;
}

.switch input:checked + .slider{
  background:var(--brand-primary);
}

.switch input:checked + .slider:before{
  transform:translateX(22px);
}

.language-option{
  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:16px 0;
}

.language-option + .language-option{
  border-top:1px solid var(--border-neutral);
}

.language-name{
  font-weight:700;
  font-size:15px;
}

.language-description{
  font-size:13px;
  color:var(--text-secondary);

  margin-top:3px;
}

.language-option{
  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:18px 0;
}

.language-option:first-of-type{
  margin-top:8px;
}

.audio-btn{
  width:36px;
  height:36px;

  border:none;
  border-radius:50%;

  background:var(--bg-info);
  color:var(--brand-primary-text);

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  transition:
    transform .15s ease,
    background .15s ease;
}

.audio-btn:hover{
  background:var(--bg-info-strong);
  transform:scale(1.05);
}

.audio-btn svg{
  width:18px;
  height:18px;
}

.flash-audio-row{
  display:flex;
  justify-content:center;
  margin-bottom:16px;
}

.flash-audio-btn{
  width:42px;
  height:42px;
}

.quiz-listen-prompt{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;

  padding:8px 0 4px;
}

.quiz-listen-btn{
  width:52px;
  height:52px;
}

.quiz-listen-btn svg{
  width:24px;
  height:24px;
}

.word-of-day{
  position:relative;
}

.word-of-day{
  position:relative;
}

.word-of-day-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.word-of-day-header .word{
  min-width:0;
  overflow-wrap:break-word;
}

.word-of-day-header .audio-btn{
  flex-shrink:0;
  margin-top:2px;
}

.flash-card-audio{
  position:absolute;
  top:14px;
  right:14px;
  z-index:20;
}

.flash-card-audio-slow{
  position:absolute;
  top:14px;
  right:58px;
  z-index:20;
}

.word-actions{
  display:flex;
  gap:8px;

  align-items:center;
  flex-shrink:0;
}

.home-cards-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;

  margin-bottom:16px;
}

/* Compacte Akademia-rij (features/home-stats.js renderHomeAkademiaRow) —
   hergebruikt .practice-card zelf (geen .panel-omhulsel), dus de
   tussenruimte met de tegels erboven/eronder komt van hier i.p.v. van de
   normale .panel-marge. */
#homeAkademiaCard:not(:empty){
  margin-bottom:12px;
}

.saying-panel{
  background:var(--bg-card);
}

#sayingOfDay{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.saying-text{
  font-size:1rem;
  font-weight:800;
  color:var(--brand-primary-text);
}

.saying-translation{
  color:var(--text-secondary);
  font-style:italic;
}

@media (max-width:720px){

  .home-cards-grid{
    grid-template-columns:1fr 1fr;
  }

  .saying-text{
    font-size:.92rem;
  }

}

#homeScreen .panel{
  padding:14px;
  border-radius:18px;
  margin-bottom:12px;
}

.difficult-actions{
  display:flex;
  gap:10px;
  margin-top:12px;
}

.difficult-actions button{
  flex:1;
  border:none;
  border-radius:14px;
  padding:11px 10px;

  font-size:.9rem;
  font-weight:700;

  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

.difficult-actions button svg{
  width:var(--icon-sm-size);
  height:var(--icon-sm-size);
  stroke-width:var(--icon-sm-stroke);
  flex-shrink:0;
}

.daily-set-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;

  margin-top:10px;
  padding:10px 12px;

  background:var(--brand-accent-soft);
  border:1px solid var(--brand-accent);
  border-radius:14px;
}

/* .hidden{display:none} en deze regel hebben gelijke specificiteit -
   zonder deze override wint display:flex altijd door bestandsvolgorde,
   waardoor de banner nooit echt verborgen is (leeg goud balkje bleef
   zichtbaar op flashcards/quiz zolang de dagset niet voltooid was). */
.daily-set-banner.hidden{
  display:none;
}

.daily-set-banner-text{
  font-size:.85rem;
  font-weight:600;
  color:var(--brand-accent-text);
  white-space:nowrap;
}

.daily-set-banner-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}

.daily-set-banner .btn{
  flex-shrink:0;
}

/* Compacte chips i.p.v. de standaard hoge .btn-padding: dit balkje moet
   klein blijven zodat de vaste actierij erboven (Vorige/Omdraaien/...)
   niet buiten beeld duwt op mobiel. */
.daily-set-banner-btn{
  padding:8px 12px;
  font-size:.8rem;
  gap:6px;
  border-radius:999px;
}

/* Zelfde goud als de Bonusronde-knop op de Home-tegel (.hero-btn): één
   herkenbare kleur voor dezelfde actie, ongeacht waar hij vandaan komt. */
.daily-set-banner-btn.btn:not(.white-outline){
  background:var(--brand-accent);
}

.daily-set-banner-btn.btn:not(.white-outline):hover{
  background:var(--brand-accent-dark);
}

.daily-set-banner-btn svg{
  width:16px;
  height:16px;
}

.btn-know{
  background:var(--success-deep);
  color:var(--text-on-brand);
}

.btn-hard{
  background:var(--accent-warm);
  color:var(--text-on-accent);
}

.difficult-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:8px;
}

.difficult-word{
  font-size:1.4rem;
  font-weight:800;
  color:var(--brand-primary-text);
}

.difficult-counter{
  flex-shrink:0;

  font-size:.78rem;
  font-weight:700;

  color:var(--text-secondary);
}

#difficultWordsPanel{
  background:var(--bg-warn-soft);
  border:1px solid var(--border-warn);
}

.daily-words-panel{
  background:var(--brand-accent-soft);
  border:1px solid var(--brand-accent);
}

.daily-words-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:2px;
}

.daily-words-eyebrow{
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--brand-accent-text);
}

.daily-words-count{
  font-size:.8rem;
  font-weight:800;
  color:var(--brand-accent-text);
}

.daily-words-title{
  font-size:.98rem;
  font-weight:700;
  color:var(--text-primary);
}

.daily-words-progress-track{
  width:100%;
  height:7px;
  border-radius:999px;
  background:rgba(var(--rgb-white),.6);
  overflow:hidden;

  margin:10px 0 12px;
}

.daily-words-progress{
  margin-bottom:14px;
}

.daily-words-progress-label{
  display:flex;
  justify-content:space-between;
  font-size:.8rem;
  font-weight:700;
  color:var(--brand-accent-text);
  margin-bottom:5px;
}

.daily-words-progress .daily-words-progress-track{
  margin-top:0;
}

.daily-words-progress-fill{
  height:100%;
  border-radius:999px;
  background:var(--brand-accent-dark);
}

.daily-words-sub{
  font-size:.8rem;
  font-weight:600;
  color:var(--text-secondary);
  margin-top:2px;
}

.daily-words-mix{
  font-size:.78rem;
  font-weight:700;
  color:var(--brand-accent-text);
  margin-top:2px;
}

.daily-words-weekline{
  font-size:.78rem;
  font-weight:700;
  color:var(--text-secondary);
  margin-top:10px;
}

.daily-words-weektrack{
  height:5px;
  margin:6px 0 12px;
}

.daily-words-week-dots .week-day-label{
  color:var(--text-secondary);
}

.daily-words-week-dots .week-day-dot:not(.active):not(.today){
  background:var(--border-soft);
  border:1.5px solid rgba(var(--rgb-ink-blue),.15);
}

.daily-words-week-dots .week-day-dot.today{
  background:var(--brand-accent-dark);
  border-color:var(--brand-accent-dark);
  box-shadow:0 0 0 3px rgba(var(--rgb-brand-accent),.25);
}

.daily-words-celebrate{
  color:var(--brand-primary-text);
}

.daily-words-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:4px;
}

.hero-btn.secondary{
  background:transparent;
  border:1px solid var(--brand-accent);
  color:var(--brand-accent-text);
}

.daily-words-gear{
  flex-shrink:0;

  width:30px;
  height:30px;
  border-radius:50%;

  border:1px solid var(--brand-accent);
  background:rgba(var(--rgb-white),.5);
  color:var(--brand-accent-text);

  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.daily-words-gear:hover{
  background:rgba(var(--rgb-white),.85);
}

.daily-words-gear svg{
  width:16px;
  height:16px;
}

.filter-label-value{
  margin-left:6px;
  font-weight:700;
  color:var(--text-primary);
}

.daily-review-options .source-toggle-btn{
  font-size:.82rem;
  padding:0 6px;
}

.daily-mix-explainer{
  font-size:.8rem;
  color:var(--text-secondary);
  margin-top:8px;
  line-height:1.4;
}

#challengeChat{
  display:flex;
  flex-direction:column;
  min-height:calc(100vh - 230px);
  padding-bottom:260px;
}

#challengeChat.fullscreen{
  position:fixed;
  top:64px;
  left:0;
  right:0;
  bottom:calc(72px + env(safe-area-inset-bottom, 0px));
  min-height:0;
  padding:0 16px;
  z-index:500;
}

#challengeChat.fullscreen #challengeMessages{
  flex:1;
  overflow-y:auto;
  padding-top:16px;
}

#challengeChat.fullscreen #challengeFooter{
  flex-shrink:0;
  padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
}


/* ===== STORY MODE CHAT ===== */

.chat-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}

.chat-avatar{
  width:42px;
  height:42px;
  flex-shrink:0;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:20px;
}

.chat-avatar.customs{
  background:var(--avatar-customs);
}

.chat-avatar.traveler{
  background:var(--avatar-traveler);
}

.chat-avatar.taxi{
  background:var(--avatar-taxi);
}

.chat-avatar.hotel{
  background:var(--avatar-hotel);
}

.chat-avatar.ana{
  background:var(--avatar-ana);
}

/* Buurtbewoners, winkeliers, etc */
.chat-avatar.neighbor{
  background:var(--avatar-neighbor);
}

/* Lokale inwoners */
.chat-avatar.local{
  background:var(--avatar-traveler);
}

.chat-bubble{
  display:inline-block;
  line-height:1.45;

  max-width:320px;

  padding:14px;

  border-radius:18px;

  background:var(--bg-card);

  border:1px solid var(--border-neutral);
}

.chat-bubble.local{
  background:var(--bg-card);
}

.chat-bubble.ana{
  background:var(--bg-warn);
  border:1px solid var(--brand-accent);
}

.chat-name{
  font-size:11px;
  font-weight:700;
  margin-bottom:2px;
  opacity:.9;
}

.chat-name.local{
  color:var(--flag-blue);
}

.chat-name.ana{
  color:var(--tint-gold-text);
}

.chat-name.neighbor{
  color:var(--danger-text);
}

.chat-name.local{
  color:var(--success-strong);
}

.chat-user{
  margin-left:50px;
  background:var(--info-strong);
  color:var(--text-on-brand);
}

.translation-link{

  margin-top:8px;

  font-size:12px;

  color:var(--text-secondary);

  border-top:1px solid var(--border-neutral);

  padding-top:6px;

  cursor:pointer;

  user-select:none;

  display:inline-flex;
  align-items:center;
  gap:4px;

}

.translation-link svg{
  width:var(--icon-xs-size);
  height:var(--icon-xs-size);
  stroke-width:var(--icon-xs-stroke);
  flex-shrink:0;
}

.chat-speak-btn svg{
  width:var(--icon-xs-size);
  height:var(--icon-xs-size);
  stroke-width:var(--icon-xs-stroke);
  flex-shrink:0;
  color:inherit;
}

/* Reis-scherm (features/journey.js): gedeelde groottes voor de decoratieve
   locatie-/souvenir-emoji, i.p.v. losse inline font-size per plek. De emoji
   zelf blijven ongewijzigd — dit is alleen sizing-consolidatie. */
.journey-icon-sm{
  font-size:28px;
}

.journey-icon-souvenir-sm{
  font-size:30px;
}

.journey-icon-souvenir-lg{
  font-size:34px;
}

.journey-icon-lg{
  font-size:40px;
}

.journey-lesson-step svg{
  width:var(--icon-sm-size);
  height:var(--icon-sm-size);
  stroke-width:3;
}

#airportLessonScreen{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
}

.story-action-bar{
  margin-top:12px;
  margin-bottom:12px;
}

.story-action-btn{
  width:100%;
  border-radius:28px;
  min-height:56px;
  background:var(--bg-warn);
  color:var(--tint-gold-text);
  border:2px solid var(--brand-accent);
  box-shadow:none;
}

.story-action-btn:hover{
  background:var(--bg-warn-strong);
}

.story-primary-action{
  width:100%;
}

.balloon-game{
  flex-direction:column;
  overflow:hidden;
  background:linear-gradient(
    180deg,
    var(--stage-bg-1) 0%,
    var(--stage-bg-2) 55%,
    var(--stage-bg-3) 100%
  );
}

.balloon-game:not(.hidden){
  display:flex;
  position:fixed;
  top:64px;
  left:0;
  right:0;
  bottom:calc(72px + env(safe-area-inset-bottom, 0px));
  z-index:500;
  border-radius:0;
  box-shadow:none;
}

.mini-game-intro{
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:12px;
  padding:28px;
  background:linear-gradient(
    180deg,
    var(--stage-bg-1) 0%,
    var(--stage-bg-2) 55%,
    var(--stage-bg-3) 100%
  );
}

.mini-game-intro:not(.hidden){
  display:flex;
  position:fixed;
  top:64px;
  left:0;
  right:0;
  bottom:calc(72px + env(safe-area-inset-bottom, 0px));
  z-index:700;
}

.mini-game-intro-title{
  font-weight:800;
  font-size:24px;
  color:var(--text-on-stage);
}

.mini-game-intro-sub{
  font-size:14px;
  color:var(--text-on-stage);
  opacity:.7;
  margin-bottom:10px;
}

.mini-game-level-btn{
  width:100%;
  max-width:280px;
  background:rgba(var(--rgb-white),.1);
  color:var(--text-on-stage);
  border:2px solid rgba(var(--rgb-white),.25);
  box-shadow:none;
}

.mini-game-countdown-number{
  font-weight:800;
  font-size:64px;
  color:var(--accent-on-stage);
}

.balloon-hud{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:14px 16px 6px;
  color:var(--text-on-stage);
  font-weight:700;
  font-size:13px;
}

.balloon-lives{
  display:flex;
  gap:2px;
  font-size:16px;
}

.balloon-life{
  transition:opacity .3s, transform .3s;
}
.balloon-life.lost{
  opacity:.25;
  transform:scale(.8);
}

.balloon-score{
  background:rgba(var(--rgb-white),.1);
  padding:4px 12px;
  border-radius:20px;
  color:var(--accent-on-stage);
  white-space:nowrap;
}

.balloon-prompt-wrap{ text-align:center; padding:4px 16px 14px; }
.balloon-prompt-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--text-on-stage);
  opacity:.6;
}
.balloon-prompt-word{
  font-weight:800;
  font-size:28px;
  color:var(--text-on-stage);
}

.balloon-sky{
  position:relative;
  flex:1;
  min-height:260px;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 20% 15%, rgba(var(--rgb-brand-accent),.18), transparent 55%),
    radial-gradient(ellipse at 80% 75%, rgba(var(--rgb-brand-primary),.18), transparent 50%);
}

.balloon-plane{
  position:absolute;
  bottom:-70px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 14px 8px 10px;
  background:var(--stage-piece-bg);
  border-radius:999px;
  box-shadow:0 6px 16px rgba(var(--rgb-brand-deep),.35);
  cursor:pointer;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.balloon-plane-emoji{ font-size:20px; display:inline-block; transform:rotate(-45deg); }
.balloon-plane-word{ font-weight:700; font-size:15px; color:var(--stage-piece-ink); }

.balloon-plane.flying{
  animation-name:balloon-fly-up;
  animation-timing-function:linear;
  animation-fill-mode:forwards;
}
@keyframes balloon-fly-up{
  from{ transform:translateY(0); }
  to{ transform:translateY(calc(-1 * var(--balloon-fly-distance, 700px))); }
}

.balloon-plane.correct-pop{
  animation:balloon-pop-good .45s ease forwards !important;
  pointer-events:none;
}
.balloon-plane.wrong-pop{
  animation:balloon-pop-bad .4s ease forwards !important;
  pointer-events:none;
}
@keyframes balloon-pop-good{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.35) rotate(-6deg); background:var(--brand-accent); }
  100%{ transform:scale(0); opacity:0; }
}
@keyframes balloon-pop-bad{
  0%{ transform:scale(1); }
  30%{ transform:scale(.9) rotate(4deg); background:var(--bad); }
  100%{ transform:scale(.4); opacity:0; }
}

.balloon-link-btn{
  display:block;
  margin:0 auto 14px;
  background:none;
  border:none;
  color:var(--text-on-stage);
  opacity:.7;
  font-size:13px;
  font-weight:600;
  text-decoration:underline;
  cursor:pointer;
}

.balloon-end-screen{
  position:fixed;
  top:64px;
  left:0;
  right:0;
  bottom:calc(72px + env(safe-area-inset-bottom, 0px));
  z-index:600;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:28px;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s;
  background:linear-gradient(180deg, var(--stage-bg-1), var(--stage-bg-2));
}
.balloon-end-screen.show{ opacity:1; pointer-events:all; }

.balloon-end-emoji{ font-size:44px; margin-bottom:6px; }
.balloon-end-title{ font-weight:800; font-size:22px; color:var(--text-on-stage); margin-bottom:6px; }
.balloon-end-reason{
  font-weight:700;
  font-size:14px;
  color:var(--flag-yellow);
  margin-bottom:6px;
}
.balloon-end-reason:empty{ display:none; }
.balloon-end-score{ font-weight:700; color:var(--accent-on-stage); margin-bottom:12px; }
.balloon-end-note{
  font-size:13px;
  color:var(--text-on-stage);
  opacity:.8;
  max-width:280px;
  line-height:1.4;
}

.buggy-game{
  background:linear-gradient(
    180deg,
    var(--sand-light) 0%,
    var(--sand-mid) 45%,
    var(--brand-accent) 100%
  );
}

.buggy-game .balloon-prompt-label,
.buggy-game .balloon-prompt-word,
.buggy-game .balloon-progress,
.buggy-game .balloon-link-btn{
  color:var(--text-primary);
}

.buggy-game .balloon-score{
  color:var(--brand-primary-text);
}

.buggy-timer-bar{
  height:8px;
  margin:0 16px 6px;
  border-radius:999px;
  background:rgba(var(--rgb-ink-blue),.15);
  overflow:hidden;
}
.buggy-timer-fill{
  height:100%;
  width:100%;
  background:var(--brand-primary-dark);
  border-radius:999px;
}

.buggy-road{
  position:relative;
  flex:1;
  min-height:260px;
  overflow:hidden;
  background:linear-gradient(
    180deg,
    var(--sky) 0%,
    var(--meadow) 20%,
    var(--sand-pale) 42%,
    var(--sand-deep) 68%,
    var(--brand-accent) 100%
  );
}

.buggy-decor{
  position:absolute;
  font-size:34px;
  opacity:.65;
  pointer-events:none;
  user-select:none;
  transform:translateX(-50%);
  z-index:1;
}
.buggy-decor-small{ font-size:24px; opacity:.5; }
.buggy-decor-large{ font-size:46px; opacity:.75; }

.buggy-lanes{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
  padding:20px 12px 0;
}

.buggy-signpost{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.buggy-signpost-pole{
  width:6px;
  height:20px;
  background:var(--wood);
  border-radius:0 0 2px 2px;
  box-shadow:inset -2px 0 2px rgba(var(--rgb-shadow),.2);
}

.buggy-sign{
  min-height:60px;
  padding:10px 6px;
  border:none;
  border-bottom:4px solid var(--wood);
  border-radius:10px;
  background:var(--bg-app);
  color:var(--text-primary);
  font-weight:700;
  font-size:13px;
  line-height:1.25;
  box-shadow:0 6px 14px rgba(var(--rgb-ink-blue),.25);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  word-break:break-word;
  transition:transform .2s, opacity .2s;
}
.buggy-sign:active{ transform:scale(.96); }

.buggy-sign.buggy-sign-passed{
  animation:buggy-sign-pass .5s ease forwards;
}
@keyframes buggy-sign-pass{
  0%{ transform:scale(1) translateY(0); opacity:1; }
  60%{ transform:scale(1.15) translateY(-6px); opacity:1; }
  100%{ transform:scale(.8) translateY(-16px); opacity:0; }
}

.buggy-vehicle{
  position:absolute;
  font-size:60px;
  line-height:1;
  z-index:3;
  filter:drop-shadow(0 5px 8px rgba(var(--rgb-shadow),.3));
}

.buggy-vehicle.buggy-crash{
  animation:buggy-crash-shake .4s ease;
}
@keyframes buggy-crash-shake{
  0%{ transform:translateX(0); }
  25%{ transform:translateX(-8px) rotate(-5deg); }
  50%{ transform:translateX(8px) rotate(5deg); }
  75%{ transform:translateX(-5px) rotate(-3deg); }
  100%{ transform:translateX(0); }
}

.buggy-confetti-piece{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:2px;
  z-index:4;
  animation:buggy-confetti-fall .9s ease forwards;
  pointer-events:none;
}
@keyframes buggy-confetti-fall{
  0%{ transform:translateY(0) rotate(0deg); opacity:1; }
  100%{ transform:translateY(50px) rotate(200deg); opacity:0; }
}

/* ===== Cascabel Snake ===== */

.snake-wrap{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:0;
  padding:6px 12px 0;
}

.snake-board{
  flex:1;
  min-height:0;
  min-width:0;
  width:100%;
  max-width:480px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(var(--snake-cols), 1fr);
  grid-template-rows:repeat(var(--snake-rows), 1fr);
  background:var(--stage-piece-bg);
  border:4px solid var(--stage-piece-ink);
  border-radius:8px;
  box-sizing:border-box;
  /* Voorkomt dat de browser een vinger-swipe hier oppakt als paginascroll
     i.p.v. als richting-input. */
  touch-action:none;
}

.snake-cell{
  position:relative;
  min-width:0;
  min-height:0;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
}

.snake-head,
.snake-segment{
  width:78%;
  height:78%;
  border-radius:50%;
  box-sizing:border-box;
}

.snake-head{
  background:var(--stage-piece-ink);
  border:2px solid var(--brand-primary-dark);
  z-index:2;
}

.snake-segment{
  background:var(--brand-primary);
  opacity:.85;
}

/* Een rechthoek i.p.v. cirkel gebruikt de hele celbreedte voor tekst (een
   cirkel snijdt de hoeken weg, precies waar langere woorden de ruimte
   nodig hebben). overflow-wrap zorgt dat ook een enkel lang woord zonder
   natuurlijke spatie (bijv. "problema") desnoods midden in het woord mag
   afbreken i.p.v. eraf te lopen of onleesbaar klein te worden. */
.snake-food-label{
  display:flex;
  align-items:center;
  justify-content:center;
  width:96%;
  height:96%;
  padding:1px 2px;
  background:var(--brand-accent);
  color:var(--text-on-accent);
  border:2px solid var(--brand-accent-dark);
  border-radius:8px;
  font-weight:700;
  font-size:clamp(6.5px, 2.3vw, 10px);
  line-height:1.05;
  text-align:center;
  overflow:hidden;
  overflow-wrap:break-word;
  word-break:break-word;
  hyphens:auto;
  box-shadow:0 2px 6px rgba(var(--rgb-shadow),.25);
}

.snake-food-cell.snake-food-correct .snake-food-label{
  animation:balloon-pop-good .45s ease forwards;
}
.snake-food-cell.snake-food-wrong .snake-food-label{
  animation:balloon-pop-bad .4s ease forwards;
}

.snake-dpad{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:8px 0 4px;
}

.snake-dpad-row{
  display:flex;
  gap:34px;
}

.snake-dpad-btn{
  width:48px;
  height:48px;
  border-radius:50%;
  border:2px solid rgba(var(--rgb-white),.3);
  background:rgba(var(--rgb-white),.12);
  font-size:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.snake-dpad-btn:active{
  background:rgba(var(--rgb-white),.25);
  transform:scale(.94);
}

#locationOverviewScreen{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
}