/* ═══════════════════════════════════════════════════════════
   Mubtada · Nachtblauw & messing (لَيْل) — webapp
   Systeemletters voor tekst en cijfers; één accent, één messing voor sterren.
   Arabisch: Noto Naskh Arabic, meegeleverd — zie hieronder
   ═══════════════════════════════════════════════════════════ */

/* O-20 · Het Arabisch kwam van het toestel: Geeza Pro op Apple, iets anders op
   Windows en Android. Bij kale tekst valt dat mee, maar deze cursus staat vol
   klinkertekens, en juist die worden per lettertype anders geplaatst. Het
   lettertype reist nu mee: één bestand van 18 kB met de 47 tekens die de cursus
   gebruikt, in alle diktes van 400 tot 700.

   Waarom Noto Naskh en niet Amiri: Amiri is een klassieke naskh die letters op
   elkaar stapelt (مُحَمَّدٌ wordt één kalligrafisch blok). Prachtig, maar een
   beginner moet elke letter apart kunnen zien. Noto Naskh zet ze naast elkaar
   en plaatst de klinkertekens net zo precies. Licentie: SIL OFL 1.1, volledige
   tekst in OFL-NotoNaskh.txt naast de app. */
@font-face{
  font-family:"Naskh Mubtada";
  font-style:normal; font-weight:400 700; font-display:swap;
  src:url("naskh.woff2") format("woff2");
}
:root{
  --disp:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --arabic:"Naskh Mubtada","Geeza Pro","Noto Naskh Arabic","Segoe UI","Times New Roman",serif;
}
/* ---- LIGHT (default) ---- */
.app{
  /* PALET · Nachtblauw & messing — لَيْل
     Eén accent (nachtblauw) voor alles wat je kunt aanraken en voor voortgang.
     Messing (--ster) bestaat alleen voor sterren; daardoor betekent goud iets in
     plaats van dat het ergens los ligt. Rood en groen alleen bij goed en fout. */
  --ac:#1E3157; --ac2:#3A5280; --ac-deep:#1A2A4B;
  --bg:#F2F4F7; --bg2:#E9ECF1; --surface:#FFFFFF; --ink:#10141C; --sub:#4B5261; --faint:#5F6779;
  --line:rgba(16,20,28,.11);
  --gt:255,255,255; --ga:.62; --ge:rgba(255,255,255,.86); --gsp:rgba(255,255,255,.93); --blur:22px;
  --track:rgba(16,20,28,.09); --sh:16,24,44; --btn-ink:#fff;
  --good:#2C6B52; --bad:#A02F3E; --warn:#8A6A24; --ster:#8A6A24;
  --mesh:radial-gradient(72% 56% at 10% -4%,rgba(30,49,87,.14),transparent 62%),radial-gradient(56% 46% at 102% 8%,rgba(58,82,128,.10),transparent 60%);
}
.app.dark{
  --ac:#7C9CD4; --ac2:#9AB6E6; --ac-deep:#93B0E1;
  --bg:#0D111A; --bg2:#0A0E15; --surface:#161C28; --ink:#E7EBF2; --sub:#9CA6B8; --faint:#8A94A8;
  --line:rgba(255,255,255,.10);
  --gt:225,235,250; --ga:.07; --ge:rgba(255,255,255,.13); --gsp:rgba(255,255,255,.17); --blur:24px;
  --track:rgba(255,255,255,.10); --sh:0,0,0; --btn-ink:#0A0E15;
  --good:#63C29B; --bad:#ED7B86; --warn:#C79B4A; --ster:#C79B4A;
  --mesh:radial-gradient(72% 56% at 10% -4%,rgba(124,156,212,.16),transparent 62%),radial-gradient(56% 46% at 102% 8%,rgba(124,156,212,.07),transparent 60%);
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* Geen per-ongeluk-zoom: de viewport-meta houdt knijp-zoomen tegen, touch-action
   haalt de dubbeltik-zoom eruit. De app heeft zijn eigen tekstgrootte (Klein ·
   Normaal · Groot) in Instellingen, dus groter zetten kan nog steeds. */
html,body{ height:100%; touch-action:manipulation; }
body{ margin:0; font-family:var(--body); background:#0A0E15; -webkit-font-smoothing:antialiased; }

.app{ position:fixed; inset:0; color:var(--ink); display:flex; justify-content:center;
  background:var(--mesh),linear-gradient(165deg,var(--bg),var(--bg2)); background-attachment:fixed; }
.frame{ position:relative; width:100%; max-width:480px; height:100%; display:flex; flex-direction:column; overflow:hidden; }
@media(min-width:560px){
  .app{ align-items:center; }
  .frame{ height:min(100%,880px); border-radius:34px; border:1px solid var(--ge);
    background:linear-gradient(165deg,var(--bg),var(--bg2));
    box-shadow:0 40px 90px -30px rgba(10,14,21,.55), inset 0 1px 0 var(--gsp); }
}
.view{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:22px 20px 120px; scrollbar-width:none; }
.view::-webkit-scrollbar{ width:0; }
.view.noTab{ padding-bottom:34px; }
/* Volledige-schermweergaven die hun inhoud verticaal centreren (het eindscherm van
   een les, de splash, de accountschermen) zetten dat met een inline stijl. Op een
   klein of laag scherm — een kleine telefoon, of de browser met een adresbalk erbij —
   paste die inhoud niet en werden de titel bovenaan en de onderste knop afgesneden,
   zonder dat je kon scrollen. `safe center` centreert zolang het past en lijnt bovenaan
   uit zodra het niet past, zodat alles bereikbaar blijft. De inline stijl wint normaal,
   dus hier is !important nodig. */
.view[style*="justify-content:center"]{
  justify-content:safe center !important;
  overflow-y:auto !important;
}

/* eyebrow / display helpers */
/* Ontwerpregel 4. Dit was mono in hoofdletters met .11em spatiëring, en het
   stond overal: boven elke groep, in elke tegel, in elke lesrij. Op Home leverde
   dat dertien kapitaalregels op, op het profiel drieëntwintig. Kapitalen met
   spatiëring lezen als een dashboard, niet als een boek.

   Nu een rustig label in dezelfde letter als de rest. Dezelfde functie, dezelfde
   grootte, een kwart van het lawaai. (O-15 blijft gerespecteerd: 11,5 px, niet
   de 10,5 van vroeger.) */
.eb{ font-family:var(--body); font-size:11.5px; font-weight:600; letter-spacing:.01em; color:var(--sub); }
.dh{ font-family:var(--disp); font-weight:600; letter-spacing:-.02em; line-height:1.08; }
.dh em{ font-style:italic; color:var(--ac); font-weight:600; }
.num{ font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
/* Arabisch middenin een Nederlandse zin liet de leestekens verspringen: een punt
   of komma na een Arabisch woord sprong naar de andere kant van dat woord, en bij
   twee Arabische stukken in één zin raakte de volgorde in de war. `isolate` zet
   elk Arabisch stukje in zijn eigen richting-eilandje, zodat de zin eromheen van
   links naar rechts blijft lopen. */
.ar{ font-family:var(--arabic); direction:rtl; unicode-bidi:isolate; }
.press{ transition:transform .12s ease; cursor:pointer; user-select:none; } .press:active{ transform:scale(.985); }
.muted{ color:var(--sub); }

/* glass surfaces */
.g{ position:relative;
  background:linear-gradient(150deg,rgba(var(--gt),calc(var(--ga) + .16)),rgba(var(--gt),var(--ga)) 56%,rgba(var(--gt),calc(var(--ga) + .05)));
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.8); backdrop-filter:blur(var(--blur)) saturate(1.8);
  border:1px solid var(--ge); border-radius:22px;
  box-shadow:inset 0 1px 0 var(--gsp), 0 16px 38px -16px rgba(var(--sh),.28); }
.gs{ background:linear-gradient(150deg,rgba(var(--gt),calc(var(--ga) - .06)),rgba(var(--gt),calc(var(--ga) - .18)));
  border:1px solid color-mix(in srgb,var(--ge) 65%,transparent); border-radius:15px;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.gc{ background:rgba(var(--gt),calc(var(--ga) + .1));
  -webkit-backdrop-filter:blur(14px) saturate(1.7); backdrop-filter:blur(14px) saturate(1.7);
  border:1px solid var(--ge); box-shadow:inset 0 1px 0 var(--gsp); }
.gac{ background:linear-gradient(150deg,color-mix(in srgb,var(--ac) 30%,rgba(var(--gt),var(--ga))),color-mix(in srgb,var(--ac) 15%,rgba(var(--gt),var(--ga))));
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.9); backdrop-filter:blur(var(--blur)) saturate(1.9);
  border:1px solid color-mix(in srgb,var(--ac) 55%,var(--ge)); border-radius:16px;
  box-shadow:inset 0 1px 0 var(--gsp), 0 10px 26px -10px color-mix(in srgb,var(--ac) 55%,transparent); }
.ghero{ position:relative; overflow:hidden; border-radius:22px;
  background:radial-gradient(120% 120% at 88% -10%,color-mix(in srgb,var(--ac) 40%,transparent),transparent 55%),linear-gradient(150deg,#131B2B 0%,#0A0E15 100%);
  border:1px solid rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 16px 40px -16px rgba(0,0,0,.5); color:#E7EBF2;
  /* De hero is in beide thema's donker. Zijn tekstkleuren mogen daarom niet uit de
     thematokens komen (var(--ac2) is in het lichte thema donkerblauw → 2,2:1). Deze
     drie zijn licht op donker en in beide thema's doorgerekend boven 4,5:1. */
  --hero-sub:#C8D2E4; --hero-faint:#9BA6BD; --hero-ac:#9AB6E6; }

/* buttons */
.btn{ font-family:var(--disp); font-weight:600; font-size:14.5px; border:none; border-radius:14px; padding:14px 20px;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:transform .12s,opacity .15s; white-space:nowrap; color:var(--ink); }
.btn:active{ transform:scale(.97); }
.btn-pri{ background:linear-gradient(150deg,var(--ac2),var(--ac)); color:var(--btn-ink);
  box-shadow:0 10px 24px -10px color-mix(in srgb,var(--ac) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.3); }
.btn-glass{ background:rgba(var(--gt),calc(var(--ga) + .1)); border:1px solid var(--ge);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.btn-ghost{ background:transparent; border:1.5px solid var(--line); }
.btn[disabled]{ opacity:.45; pointer-events:none; }
.fullw{ width:100%; }

/* chips */
.chip{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; padding:7px 13px; border-radius:999px;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.chip-glass{ background:rgba(var(--gt),calc(var(--ga) + .08)); border:1px solid var(--ge); color:var(--ink); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.chip-ac{ background:color-mix(in srgb,var(--ac) 16%,transparent); color:var(--ac-deep); border:1px solid color-mix(in srgb,var(--ac) 30%,transparent); }
.app.dark .chip-ac{ color:var(--ac); }
.dot{ width:6px; height:6px; border-radius:99px; background:var(--ac); }

/* progress */
.bar{ height:7px; border-radius:99px; background:var(--track); overflow:hidden; }
.bar > i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--ac-deep),var(--ac2)); transition:width .35s ease; }
.seg{ display:flex; gap:4px; flex:1; }
.seg > i{ flex:1; height:5px; border-radius:99px; background:var(--track); transition:background .25s; }
.seg > i.on{ background:var(--ac); }

/* rows */
.row{ display:flex; align-items:center; gap:13px; padding:14px 0; border-bottom:1px solid var(--line); }
.row:last-child{ border-bottom:none; }
.rtitle{ font-family:var(--disp); font-weight:600; font-size:14.5px; }

/* word card */
.word{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:22px 20px 26px; }
.word .arw{ font-family:var(--arabic); font-weight:700; font-size:50px; line-height:1.55; margin-top:16px; padding:0 6px; direction:rtl; }
.word .tr{ font-family:var(--disp); font-weight:600; font-size:19px; color:var(--ac); margin-top:12px; }
.word .en{ font-size:13px; color:var(--sub); margin-top:4px; }
/* Deel C: rustige aan/uit-knoppen voor uitspraak en vertaling in een les. Aan = accent
   (getoond), uit = grijs (verborgen). */
.lestg{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:16px; }
.lestg-b{ font-family:var(--body); font-size:12px; font-weight:600; padding:7px 14px; border-radius:999px; cursor:pointer;
  border:1px solid var(--ge); background:transparent; color:var(--faint); }
.lestg-b.on{ background:color-mix(in srgb,var(--ac) 14%,transparent); color:var(--ac-deep); border-color:color-mix(in srgb,var(--ac) 32%,transparent); }
.app.dark .lestg-b.on{ color:var(--ac); }

/* quiz options */
.opt{ display:flex; align-items:center; gap:12px; padding:15px 17px; border-radius:15px; cursor:pointer;
  background:rgba(var(--gt),calc(var(--ga) + .06)); border:1.5px solid var(--ge); transition:border-color .15s,background .15s; }
.opt .ot{ font-family:var(--disp); font-weight:600; font-size:15px; flex:1; color:var(--ink); }
.opt .ot.ar{ font-family:var(--arabic); font-weight:700; font-size:19px; text-align:right; }
.opt .ok{ width:24px; height:24px; border-radius:99px; border:1.5px solid var(--faint); display:grid; place-items:center; flex-shrink:0;
  font-family:var(--mono); font-size:11px; color:var(--sub); }
.opt.sel{ border-color:var(--ac); background:color-mix(in srgb,var(--ac) 14%,transparent); }
.opt.sel .ok{ border-color:var(--ac); background:var(--ac); color:var(--btn-ink); }
.opt.correct{ border-color:var(--good); background:color-mix(in srgb,var(--good) 18%,transparent); }
.opt.correct .ok{ border:none; background:var(--good); color:var(--btn-ink); }
.opt.wrong{ border-color:var(--bad); background:color-mix(in srgb,var(--bad) 16%,transparent); }
.opt.wrong .ok{ border:none; background:var(--bad); color:var(--btn-ink); }
.opt.dim{ opacity:.55; pointer-events:none; }

/* hint / feedback */
.hint{ display:flex; gap:10px; padding:13px 15px; border-radius:14px; align-items:flex-start;
  background:color-mix(in srgb,var(--ac) 10%,transparent); border:1px solid color-mix(in srgb,var(--ac) 24%,transparent); font-size:13px; line-height:1.55; }
.fbsheet{ position:absolute; left:0; right:0; bottom:0; z-index:25; border-radius:22px 22px 0 0; padding:20px 20px 22px;
  animation:up .28s cubic-bezier(.3,1.1,.4,1); }
@keyframes up{ from{ transform:translateY(40px); opacity:0; } to{ transform:none; opacity:1; } }
.fbsheet.ok{ background:linear-gradient(180deg,color-mix(in srgb,var(--good) 22%,var(--surface)),var(--surface)); border-top:1px solid color-mix(in srgb,var(--good) 40%,transparent); }
.fbsheet.bad{ background:linear-gradient(180deg,color-mix(in srgb,var(--bad) 18%,var(--surface)),var(--surface)); border-top:1px solid color-mix(in srgb,var(--bad) 40%,transparent); }
.fbsheet .ft{ font-family:var(--disp); font-weight:700; font-size:18px; display:flex; align-items:center; gap:9px; }
.fbsheet .fx{ font-size:13px; color:var(--sub); line-height:1.55; margin-top:7px; }

/* vocab table */
.vt{ width:100%; border-collapse:collapse; }
.vt td{ padding:11px 4px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle; }
.vt tr:last-child td{ border-bottom:none; }
.vt .a{ font-family:var(--arabic); font-weight:700; font-size:20px; text-align:right; direction:rtl; color:var(--ink); white-space:nowrap; }
.vt .t{ font-family:var(--mono); font-size:11px; color:var(--ac-deep); }
.app.dark .vt .t{ color:var(--ac); }

/* tab bar */
.tabbar{ position:absolute; left:14px; right:14px; bottom:calc(13px + env(safe-area-inset-bottom)); z-index:6; display:flex; padding:8px; border-radius:24px; }
.tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 0; border-radius:14px; cursor:pointer; border:none; background:transparent; color:var(--sub); }
.tab.on{ background:color-mix(in srgb,var(--ac) 16%,transparent); color:var(--ac); }
/* Ontwerpregel 4: de tabbalk stond in mono-kapitalen met spatiëring. Vijf van de
   dertien kapitaalregels op Home kwamen alleen al hiervandaan. Gewone tekst op
   dezelfde grootte leest rustiger en neemt minder breedte. */
.tab .tl{ font-family:var(--body); font-size:11.5px; letter-spacing:0; font-weight:500; }
.tab.on .tl{ font-weight:600; }
/* Op smalle telefoons (ongeveer 320-360px) verdeelde de balk de breedte ongelijk: het
   langste label ("Schatkaart") eiste zijn volle woordbreedte op en drukte de buren
   ertegenaan, met bijna geen tussenruimte. min-width:0 laat de vijf vakken even breed
   worden; een iets kleiner label, wat minder marge en padding geven elk woord weer lucht. */
@media (max-width:360px){
  .tabbar{ left:10px; right:10px; padding:6px; }
  .tab{ min-width:0; }
  .tab .tl{ font-size:10px; white-space:nowrap; }
}

/* misc */
/* De dikte komt uit ic() en hoort bij het formaat; deze waarde is de terugval. */
svg.i{ fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.backbtn{ width:38px; height:38px; border-radius:99px; display:grid; place-items:center; flex-shrink:0; border:none; color:var(--ink); }
.headrow{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.av{ width:40px; height:40px; border-radius:13px; display:grid; place-items:center; flex-shrink:0; background:color-mix(in srgb,var(--ac) 16%,transparent); color:var(--ac-deep); }
.app.dark .av{ color:var(--ac); }
.av.solid{ background:linear-gradient(150deg,var(--ac2),var(--ac)); color:var(--btn-ink); }
.av.lock{ background:var(--track); color:var(--faint); }
.modetoggle{ display:inline-flex; gap:4px; padding:4px; border-radius:999px;
  background:rgba(var(--gt),calc(var(--ga) + .1)); border:1px solid var(--ge); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
/* O-16: deze twee knoppen waren 37×25 px. Dat is kleiner dan waar een vinger
   betrouwbaar op mikt. De pil blijft even breed, maar het aanraakvlak is nu
   44 px hoog en 40 px breed, zonder dat de twee vlakken elkaar overlappen. */
.modetoggle button{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  border:none; background:transparent; color:var(--sub); padding:9px 13px; border-radius:999px; cursor:pointer;
  min-width:40px; min-height:34px; position:relative; display:inline-flex; align-items:center; justify-content:center; }
.modetoggle button::after{ content:""; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%); }
.modetoggle button.on{ background:var(--ac); color:var(--btn-ink); font-weight:600; }
.scrim{ position:absolute; inset:0; background:rgba(10,14,21,.45); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); z-index:20; }
.fade{ animation:fade .3s ease; }
@keyframes fade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.bigar{ font-family:var(--arabic); font-weight:700; direction:rtl; line-height:1.6; }
.theory p{ font-size:14px; line-height:1.7; color:var(--ink); margin:0 0 12px; }
.theory p:last-child{ margin-bottom:0; }
.theory b{ font-family:var(--disp); font-weight:700; }
.theory .arr{ font-family:var(--arabic); font-weight:700; font-size:18px; direction:rtl; unicode-bidi:embed; }
.exline{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 15px; border-radius:14px; margin-top:9px;
  background:rgba(var(--gt),calc(var(--ga) + .06)); border:1px solid var(--ge); }
.exline .l{ font-size:12.5px; color:var(--sub); }
.exline .r{ font-family:var(--arabic); font-weight:700; font-size:21px; direction:rtl; white-space:nowrap; }
.starline{ display:flex; gap:10px; justify-content:center; margin:18px 0 6px; }
.star{ width:44px; height:44px; }

/* ── extra components (cat 1/5/6) ── */
/* Ontwerpregel 4, ook voor formuliervelden: hier kwamen de laatste kapitalen op
   het profiel en in de instellingen vandaan. */
.field .lab{ font-family:var(--body); font-size:12px; font-weight:600; letter-spacing:.01em; color:var(--sub); margin-bottom:7px; display:block; }
/* 16px: onder de 16 zoomt iOS Safari automatisch in op een veld, en omdat de app
   een vast frame is schuift dan de hele layout uit beeld. */
.input{ width:100%; padding:13px 15px; border-radius:14px; font-family:var(--body); font-size:16px; font-weight:500; color:var(--ink);
  background:rgba(var(--gt),calc(var(--ga) - .04)); border:1px solid var(--ge); outline:none;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.input::placeholder{ color:var(--faint); font-weight:400; }
.input:focus{ border-color:var(--ac); box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 22%,transparent); }
.segctrl{ display:flex; padding:4px; gap:3px; border-radius:13px; background:var(--track); }
.segctrl button{ flex:1; font-family:var(--disp); font-weight:600; font-size:12.5px; border:none; background:transparent; color:var(--sub); padding:9px 0; border-radius:10px; cursor:pointer; }
/* De actieve pil verschilde maar 1,25:1 van zijn baan: in fel zonlicht of met minder
   scherp zicht zie je niet welke keuze aanstaat. Een rand in het accent maakt het
   verschil hard, zonder de rustige vormgeving aan te tasten. */
.segctrl button.on{ background:var(--surface); color:var(--ink); box-shadow:0 2px 6px rgba(var(--sh),.18); border:1.5px solid var(--ac); padding:7.5px 0; }
.app.dark .segctrl button.on{ background:rgba(255,255,255,.12); }
.switch{ width:48px; height:28px; border-radius:99px; padding:3px; cursor:pointer; flex-shrink:0; border:none; }
.switch > span{ display:block; width:22px; height:22px; border-radius:99px; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.25); transition:transform .2s; }
.switch.on{ background:var(--ac); } .switch.on > span{ transform:translateX(20px); }
.switch.off{ background:var(--track); }
.cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:7px; }
/* O-15: de weekkalender stond op 9 en 10 px in --faint. Dat haalde het contrast
   niet en het was ook gewoon te klein om te lezen. */
.cal .hd{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--sub); text-align:center; }
.cal .d{ aspect-ratio:1; border-radius:9px; display:grid; place-items:center; font-family:var(--mono); font-size:11.5px; background:var(--track); color:var(--sub); }
.cal .d.on{ background:color-mix(in srgb,var(--ac) 30%,transparent); color:var(--ink); }
.cal .d.hot{ background:linear-gradient(150deg,var(--ac2),var(--ac)); color:var(--btn-ink); font-weight:600; }
.medal{ width:48px; height:48px; border-radius:15px; display:grid; place-items:center; flex-shrink:0;
  background:linear-gradient(150deg,var(--ac2),var(--ac-deep)); color:var(--btn-ink); box-shadow:0 12px 26px -10px color-mix(in srgb,var(--ac) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.35); }
.medal.lock{ background:var(--track); color:var(--faint); box-shadow:none; }
.bcol{ display:flex; flex-direction:column; align-items:center; gap:8px; }
/* 9,5 px was ook te klein om te lezen (O-15). */
.bcap{ font-family:var(--body); font-size:11px; letter-spacing:.01em; color:var(--sub); text-align:center; line-height:1.35; hyphens:none; overflow-wrap:break-word; }
.avatar{ border-radius:99px; display:grid; place-items:center; font-family:var(--disp); font-weight:700; color:var(--btn-ink); flex-shrink:0;
  background:linear-gradient(150deg,var(--ac2),var(--ac)); }
.player{ display:flex; align-items:center; gap:14px; padding:13px 16px; border-radius:16px; background:rgba(var(--gt),calc(var(--ga) + .06)); border:1px solid var(--ge); }
.pbtn{ width:40px; height:40px; border-radius:99px; flex-shrink:0; display:grid; place-items:center; background:linear-gradient(150deg,var(--ac2),var(--ac)); color:var(--btn-ink); border:none; cursor:pointer; }
.wave{ flex:1; display:flex; align-items:center; gap:3px; height:34px; }
.wave > i{ width:3px; border-radius:99px; background:var(--ac); opacity:.4; }
.wave > i.on{ opacity:1; }
/* splash */
.splashRing{ animation:haloPulse 2.6s ease-in-out infinite; transform-origin:center; }
@keyframes haloPulse{ 0%,100%{ opacity:.7; transform:scale(1);} 50%{ opacity:.3; transform:scale(1.05);} }
.splashMark{ animation:markIn .8s cubic-bezier(.2,1.2,.4,1); }
@keyframes markIn{ from{ transform:scale(.7); opacity:0; } to{ transform:none; opacity:1; } }
.loadbar{ overflow:hidden; }
.loadbar > i{ display:block; height:100%; width:40%; border-radius:99px; background:linear-gradient(90deg,var(--ac-deep),var(--ac2)); animation:load 1.6s ease-in-out infinite; }
@keyframes load{ 0%{ margin-left:-40%; } 100%{ margin-left:100%; } }
.slidewrap{ animation:fade .35s ease; }
/* flashcard flip */
.flip3d{ perspective:1000px; }
.flipcard{ position:relative; transition:transform .45s cubic-bezier(.3,1,.4,1); transform-style:preserve-3d; cursor:pointer; }
.flipcard.flipped{ transform:rotateY(180deg); }
.face{ backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.face.back{ position:absolute; inset:0; transform:rotateY(180deg); display:flex; flex-direction:column; align-items:center; justify-content:center; }

/* ── v4: split-diagram, tree recap, match ── */
.split{ display:flex; flex-direction:column; align-items:center; }
.snode{ padding:13px 22px; border-radius:16px; text-align:center; min-width:120px; }
.snode .na{ font-family:var(--arabic); font-weight:800; font-size:22px; direction:rtl; }
.snode .nl{ font-family:var(--body); font-size:11px; letter-spacing:.01em; font-weight:600; color:var(--sub); margin-top:4px; }
.snode.acc{ border:1px solid color-mix(in srgb,var(--ac) 55%,var(--ge)); }
.snode.acc .na{ color:var(--ac); }
.skids{ display:flex; gap:12px; width:100%; justify-content:center; }
.skids .snode{ flex:1; max-width:190px; }
.sline{ width:100%; height:34px; display:block; }
.sline path{ stroke:color-mix(in srgb,var(--ac) 55%,var(--line)); stroke-width:1.5; fill:none; }
.sex{ font-size:11.5px; color:var(--sub); margin-top:6px; font-family:var(--body); }
.sex b{ font-family:var(--arabic); font-size:15px; color:var(--ink); font-weight:700; }
/* tree recap */
.tree{ display:flex; flex-direction:column; gap:0; }
.tdot{ width:9px; height:9px; border-radius:99px; background:var(--ac); flex-shrink:0; box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 22%,transparent); }
.tdot.mut{ background:var(--faint); box-shadow:none; }
/* match */
.matchwrap{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mtoken{ padding:14px 10px; border-radius:14px; text-align:center; cursor:pointer; font-family:var(--disp); font-weight:600; font-size:13.5px;
  background:rgba(var(--gt),calc(var(--ga) + .06)); border:1.5px solid var(--ge); transition:all .15s; color:var(--ink); }
.mtoken.ar{ font-family:var(--arabic); font-weight:700; font-size:20px; }
.mtoken.sel{ border-color:var(--ac); background:color-mix(in srgb,var(--ac) 14%,transparent); transform:scale(1.03); }
.mtoken.ok{ border-color:var(--good); background:color-mix(in srgb,var(--good) 14%,transparent); opacity:.5; pointer-events:none; transform:none; }
.mtoken.bad{ border-color:var(--bad); background:color-mix(in srgb,var(--bad) 16%,transparent); animation:shake .35s; }
@keyframes shake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

/* ── Fase 7: splash & onboarding animaties ── */
/* O-11: het woord verdween pas op 35% terwijl het volgende al op 4% van zijn
   eigen ronde begon. Bij vier woorden in negen seconden overlapten ze elkaar
   0,54 s: twee Arabische woorden dwars door elkaar heen in het logo. Elk woord
   blijft nu binnen zijn eigen kwart van de ronde. */
@keyframes arMorph{0%{opacity:0;transform:translateY(10px) scale(.9)}3%,21%{opacity:1;transform:translateY(0) scale(1)}24%,100%{opacity:0;transform:translateY(-10px) scale(.9)}}
.arMorphWrap{position:relative;display:grid;place-items:center}
.arMorphWrap>.arMorph{grid-area:1/1;animation:arMorph var(--mdur,9s) cubic-bezier(.4,0,.2,1) infinite}
@keyframes bookOpenPage{0%{transform:rotateY(-158deg)}58%{transform:rotateY(7deg)}100%{transform:rotateY(0)}}
@keyframes bookFadeIn{from{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.bookScene{perspective:1100px}
.bookScene .bookPage{transform-origin:left center;backface-visibility:hidden;animation:bookOpenPage 1.5s cubic-bezier(.45,.05,.2,1) both}
.bookFadeIn{animation:bookFadeIn .55s ease both}
@keyframes upFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.upFade{animation:upFade .5s ease both}
.upFade2{animation:upFade .5s ease .08s both}
.upFade3{animation:upFade .5s ease .16s both}

/* ── Fase 8: toegankelijkheid (tekstgrootte + lettertype) ── */
/* O-17: dit stond als bevinding genoteerd omdat `zoom` geen webstandaard was.
   Dat klopt niet meer: `zoom` staat in CSS Viewport en werkt in alle grote
   browsers. En als een browser hem toch niet kent, gebeurt er niets — de tekst
   blijft dan op 100%, wat precies de standaardinstelling is. */
.app.fs-s .frame{zoom:.9}
.app.fs-l .frame{zoom:1.14}
/* Vierde stand. Groot bleef op 1,14x steken, en omdat de stylesheet nergens rem
   gebruikt doet de systeeminstelling van het toestel ook niets. Wie echt slecht ziet
   had dus geen enkele weg. */
.app.fs-xl .frame{zoom:1.45}
.app.font-system,.app.font-system .dh,.app.font-system .eb,.app.font-system .lab,.app.font-system .bcap,.app.font-system input,.app.font-system textarea,.app.font-system button{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important}
.app.font-serif,.app.font-serif .dh,.app.font-serif .eb,.app.font-serif .lab,.app.font-serif .bcap,.app.font-serif input,.app.font-serif textarea,.app.font-serif button{font-family:"Iowan Old Style",Georgia,"Times New Roman",serif!important}
.fbshot{width:100%;border-radius:12px;max-height:200px;object-fit:cover;display:block}

/* ===== Schatkaart · Hemelreis (floating-island module map) ===== */
/* De schatkaart had zijn eigen groene palet en zou als enige scherm uit de toon
   vallen. De vormen blijven, de kleuren volgen het nachtblauw: leisteen voor de
   eilanden, warm zand voor het pad en de stam, en messing voor het licht eromheen. */
.skymap{ --grass1:#5C7BAE;--grass2:#3E5A8A;--grasshi:#89A6D4;--rock1:#33507E;--rock2:#243D63;
  --bld:#F0F3F8;--bld2:#CBD6E6;--bld-door:#243D63;--leaf:#4A6E95;--leaf2:#5E85AE;--trunk:#7A6749;
  --islglow:rgba(124,156,212,.30);--lkg1:#C2C7D0;--lkg2:#A8AEBA;--lkr1:#9AA1AF;--lkr2:#7E8694;
  position:relative; height:448px; margin:14px 0 2px; overflow:hidden; border-radius:22px;
  /* Een zachte lucht met een gloed achter het huidige eiland geeft de kaart diepte
     en sfeer, zonder een tweede kleur toe te voegen (alles blijft nachtblauw). */
  background:
    radial-gradient(66% 46% at 50% 48%, color-mix(in srgb,var(--ac) 11%,transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb,var(--ac) 6%,transparent), transparent 42%),
    linear-gradient(180deg, rgba(var(--gt),.14), transparent 30%);
  border:1px solid var(--ge);
  box-shadow:inset 0 1px 0 var(--gsp), inset 0 -30px 50px -30px color-mix(in srgb,var(--ac) 22%,transparent); }
.app.dark .skymap{ --grass1:#4A6C9E;--grass2:#33507E;--grasshi:#7C9CD4;--rock1:#2A4470;--rock2:#1B2F4E;
  --islglow:rgba(124,156,212,.34);--bld:#E3EAF5;--bld2:#93A8C6;--lkg1:#5A6270;--lkg2:#474E5A;--lkr1:#454C58;--lkr2:#363C46; }
.skymap .sm-cloud{ position:absolute; border-radius:99px; background:rgba(var(--gt),calc(var(--ga) + .10));
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); z-index:1; opacity:.85;
  box-shadow:0 8px 22px -10px rgba(var(--sh),.18); animation:smDrift 13s ease-in-out infinite; }
.skymap .c1{ width:132px; height:36px; left:-6%; top:15%; animation-duration:16s; opacity:.7; }
.skymap .c2{ width:88px; height:28px; right:1%; top:6%; animation-duration:12s; animation-delay:-4s; }
.skymap .c3{ width:104px; height:32px; left:28%; top:62%; animation-duration:18s; animation-delay:-7s; opacity:.6; }
@keyframes smDrift{ 0%,100%{transform:translateX(-14px)} 50%{transform:translateX(14px)} }
.skymap .sm-rock{ position:absolute; width:26px; height:12px; border-radius:50%; background:var(--rock1); z-index:2;
  box-shadow:0 4px 6px -2px rgba(var(--sh),.3); animation:smBob 5s ease-in-out infinite; }
.skymap .sm-rock.r1{ left:30%; top:42%; animation-delay:-1s; } .skymap .sm-rock.r2{ left:62%; top:30%; animation-delay:-2.4s; }
@keyframes smBob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
.skymap .sm-balloon{ position:absolute; right:14%; top:33%; z-index:3; animation:smBob 6s ease-in-out infinite; filter:drop-shadow(0 8px 8px rgba(var(--sh),.2)); }
.skymap .sm-isl{ position:absolute; z-index:3; text-align:center; width:var(--sz); }
.skymap .sm-isl.sm-center{ left:50%; top:46%; transform:translate(-50%,-50%); z-index:4; }
.skymap .sm-isl.sm-left{ left:1%; top:120px; z-index:3; }
.skymap .sm-isl.sm-right{ right:1%; top:2%; z-index:3; }
.skymap .sm-art{ position:relative; width:var(--sz); height:var(--sz); margin:0 auto; animation:smFloat 5s ease-in-out infinite; filter:drop-shadow(0 22px 26px rgba(var(--sh),.22)); }
.skymap .sm-isl.sm-left .sm-art,.skymap .sm-isl.sm-right .sm-art{ animation-delay:-1.6s; }
.skymap .sm-isl.locked .sm-art{ opacity:.62; filter:drop-shadow(0 12px 14px rgba(var(--sh),.14)) saturate(.85); }
@keyframes smFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-11px)} }
.skymap .isl-glow{ fill:var(--islglow); animation:smGlow 3.4s ease-in-out infinite; }
@keyframes smGlow{ 0%,100%{opacity:.6;transform:scaleX(1)} 50%{opacity:1;transform:scaleX(1.1)} }
.skymap .isl-grass{ fill:var(--grass1); } .skymap .isl-grass2{ fill:var(--grass2); } .skymap .isl-grasshi{ fill:var(--grasshi); opacity:.55; }
.skymap .isl-rock{ fill:var(--rock1); } .skymap .isl-rock2{ fill:var(--rock2); }
.skymap .isl.locked .isl-grass{ fill:var(--lkg1); } .skymap .isl.locked .isl-grass2{ fill:var(--lkg2); } .skymap .isl.locked .isl-grasshi{ opacity:.3; }
.skymap .isl.locked .isl-rock{ fill:var(--lkr1); } .skymap .isl.locked .isl-rock2{ fill:var(--lkr2); } .skymap .isl.locked .isl-glow{ fill:rgba(120,132,150,.2); }
.skymap .bld{ fill:var(--bld); } .skymap .bld2{ fill:var(--bld2); } .skymap .bld-door{ fill:var(--bld-door); }
.skymap .leaf{ fill:var(--leaf); } .skymap .leaf2{ fill:var(--leaf2); } .skymap .trunk{ fill:var(--trunk); }
.skymap .tree{ animation:smSway 4s ease-in-out infinite; transform-origin:bottom center; } .skymap .tree.t2{ animation-delay:-1.5s; }
@keyframes smSway{ 0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(2deg)} }
.skymap .spark{ fill:#DCE6F5; animation:smSpark 3.2s ease-out infinite; opacity:0; }
@keyframes smSpark{ 0%{opacity:0;transform:translateY(6px) scale(.6)} 25%{opacity:1} 100%{opacity:0;transform:translateY(-30px) scale(1.1)} }
.skymap .mist ellipse{ fill:rgba(222,230,240,.6); animation:smMist 6s ease-in-out infinite; }
.app.dark .skymap .mist ellipse{ fill:rgba(120,130,148,.4); }
@keyframes smMist{ 0%,100%{transform:translateX(-4px)} 50%{transform:translateX(6px)} }
.skymap .sm-mark{ position:absolute; top:6%; right:12%; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; z-index:5; box-shadow:0 4px 10px -3px rgba(var(--sh),.4); }
.skymap .sm-mark.done{ background:linear-gradient(150deg,var(--ac2),var(--ac)); color:var(--btn-ink); }
.skymap .sm-mark.lock{ background:var(--surface); color:var(--faint); border:1px solid var(--ge); }
.skymap .sm-here{ display:inline-block; background:var(--ac-deep); color:var(--btn-ink); font-family:var(--mono); font-weight:700; font-size:10.5px; letter-spacing:.04em; padding:3px 9px; border-radius:99px; margin-bottom:5px; box-shadow:0 4px 10px -3px rgba(var(--sh),.4); }
.skymap .sm-cap{ margin-top:4px; }
.skymap .sm-name{ font-family:var(--disp); font-weight:600; font-size:13px; color:var(--ink); margin-top:1px; line-height:1.15; }
.skymap .sm-name .ar{ font-size:12px; color:var(--sub); }
.skymap .sm-isl.locked .sm-name{ color:var(--sub); }
.skymap .sm-center .sm-name{ font-size:15px; }
.skymap .sm-chip{ display:inline-flex; align-items:center; gap:4px; margin-top:4px; font-family:var(--mono); font-weight:600; font-size:10.5px; color:var(--ac-deep);
  background:color-mix(in srgb,var(--ac) 13%,transparent); padding:3px 9px; border-radius:99px; }
.app.dark .skymap .sm-chip{ color:var(--ac2); }
.skymap .sm-chip.lk{ color:var(--faint); background:color-mix(in srgb,var(--faint) 14%,transparent); }
.sm-info{ padding:18px; margin-top:14px; }
.sm-info-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.sm-cur{ display:flex; align-items:center; gap:11px; margin-top:13px; padding:11px 13px; border-radius:14px;
  background:color-mix(in srgb,var(--ac) 9%,transparent); border:1px solid color-mix(in srgb,var(--ac) 20%,var(--ge)); }

/* ═══════════════════════════════════════════════════════════
   v2.0 · Premium Learning Update
   vloeiende lesbalk · combo · lof · ster-pop · confetti · TTS-golf
   ═══════════════════════════════════════════════════════════ */
.lprog{ flex:1; height:8px; border-radius:99px; background:var(--track); overflow:hidden; }
.lprog > i{ display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--ac-deep),var(--ac2));
  transition:width .5s cubic-bezier(.3,1,.4,1);
  box-shadow:0 0 12px -2px color-mix(in srgb,var(--ac) 75%,transparent); }

.combochip{ display:inline-flex; align-items:center; gap:5px; flex-shrink:0;
  font-family:var(--mono); font-weight:700; font-size:10.5px; color:var(--ac-deep);
  background:color-mix(in srgb,var(--ac) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--ac) 28%,transparent);
  padding:4px 10px; border-radius:99px; animation:comboPop .4s cubic-bezier(.2,1.5,.4,1); }
@keyframes comboPop{ from{ transform:scale(.5); opacity:0; } to{ transform:scale(1); opacity:1; } }

.fxans{ margin-top:10px; font-size:13px; color:var(--ink); line-height:1.5;
  background:color-mix(in srgb,var(--good) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--good) 26%,transparent);
  border-radius:12px; padding:10px 13px; }
.fxans b{ color:var(--good); }

.starpop{ display:inline-block; animation:starPop .6s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes starPop{ 0%{ transform:scale(0) rotate(-30deg); opacity:0; }
  70%{ transform:scale(1.22) rotate(5deg); opacity:1; } 100%{ transform:scale(1) rotate(0); opacity:1; } }

.confetti{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:3; }
.confetti > i{ position:absolute; top:-14px; left:var(--cx); width:7px; height:11px; border-radius:2px;
  background:hsl(var(--ch) 72% 56%); opacity:0;
  animation:cfall 2.8s cubic-bezier(.3,.4,.6,1) var(--cd) forwards; }
.confetti > i:nth-child(2n){ width:5px; height:9px; border-radius:99px; }
@keyframes cfall{ 0%{ opacity:1; transform:translateY(0) rotate(0) translateX(0); }
  60%{ opacity:1; } 100%{ opacity:0; transform:translateY(580px) rotate(560deg) translateX(26px); } }

.wave.speaking > i{ animation:waveDance .45s ease-in-out infinite alternate; opacity:1; }
.wave.speaking > i:nth-child(2n){ animation-delay:.1s; }
.wave.speaking > i:nth-child(3n){ animation-delay:.2s; }
.wave.speaking > i:nth-child(5n){ animation-delay:.28s; }
@keyframes waveDance{ from{ transform:scaleY(.45); } to{ transform:scaleY(1.3); } }

.vt .a .press{ transition:color .15s; border-radius:6px; }
.vt .a .press:active{ color:var(--ac); }

/* ═══════════════════════════════════════════════════════════
   v2.1 · Cohesion — één ritme, toegankelijk, rustig
   ═══════════════════════════════════════════════════════════ */
/* één headercomponent voor alle hoofdschermen */
.phead{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:4px 2px 20px; }
.phead .pht{ font-size:26px; margin-top:6px; }
.phead .phr{ flex-shrink:0; padding-top:2px; }

/* één sectieritme voor alle sectiekopjes */
.eb.sect{ display:block; margin:26px 4px 10px; font-size:12px; color:var(--sub); }
.eb.sect:first-of-type{ margin-top:20px; }

/* toegankelijkheid */
:focus-visible{ outline:2px solid var(--ac); outline-offset:2px; border-radius:8px; }
button[data-save],button[data-unsave]{ min-width:36px; min-height:36px; display:grid; place-items:center; }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .confetti{ display:none; }
}

/* ═══════════════════════════════════════════════════════════
   v3.0 · Mastery — slimme herhaling · XP & rangen · badge
   ═══════════════════════════════════════════════════════════ */
/* Ontwerpregel 1: dit bolletje was rood — de zesde kleur op een scherm dat er al
   te veel had, en voor iets wat geen alarm is maar een uitnodiging. Nu in het
   accent, dezelfde kleur als al het andere wat je kunt aanraken. Contrast met
   wit blijft ruim boven de eis. */
.tbadge{ position:absolute; top:5px; right:calc(50% - 21px); min-width:17px; height:17px; padding:0 4px;
  border-radius:99px; background:var(--ac-deep); color:var(--btn-ink); font-family:var(--mono); font-size:10.5px; font-weight:700;
  display:grid; place-items:center; box-shadow:0 2px 6px -1px rgba(0,0,0,.35); }

.xpchip{ display:inline-flex; align-items:center; gap:6px; margin-top:12px;
  font-family:var(--mono); font-weight:800; font-size:12px; color:var(--ac-deep);
  background:color-mix(in srgb,var(--ac) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--ac) 30%,transparent);
  padding:6px 14px; border-radius:99px; animation:comboPop .45s cubic-bezier(.2,1.5,.4,1) .5s both; }
.app.dark .xpchip{ color:var(--ac2); }

.lvlup{ display:flex; align-items:center; justify-content:center; gap:8px; margin:14px auto 0; max-width:340px;
  padding:12px 16px; border-radius:14px; font-family:var(--disp); font-weight:700; font-size:13.5px; color:var(--btn-ink);
  background:linear-gradient(150deg,var(--ac2),var(--ac));
  box-shadow:0 14px 30px -12px color-mix(in srgb,var(--ac) 75%,transparent);
  animation:comboPop .5s cubic-bezier(.2,1.5,.4,1) .3s both; }

.flipcard .face{ border-radius:inherit; }
.flipcard{ border-radius:22px; }

/* ── lettertabel (zonne- en maanletters) ──────────────────────────────────
   Vier kolommen: de letter, zijn naam, een voorbeeldwoord met de uitspraak
   eronder, en de betekenis. Het voorbeeldwoord staat in het Arabische
   lettertype en van rechts naar links, wat het als woordenlijst niet deed. */
.lt{ width:100%; border-collapse:collapse; }
.lt td{ padding:11px 6px; border-bottom:1px solid var(--line); vertical-align:middle; }
.lt tr:last-child td{ border-bottom:none; }
.lt .ll{ font-family:var(--arabic); font-weight:700; font-size:26px; width:14%;
  text-align:center; color:var(--ac-deep); direction:rtl; }
.app.dark .lt .ll{ color:var(--ac); }
.lt .ln{ font-family:var(--mono); font-size:11px; color:var(--sub); width:20%; white-space:nowrap; }
.lt .lv{ width:36%; text-align:right; }
.lt .lv .ar{ font-family:var(--arabic); font-weight:700; font-size:19px; display:block; direction:rtl; }
.lt .lv .lu{ font-family:var(--mono); font-size:11px; color:var(--ac-deep); display:block; margin-top:2px; }
.app.dark .lt .lv .lu{ color:var(--ac); }
.lt .lb{ font-size:13px; color:var(--ink); padding-left:12px; }
@media (max-width:380px){
  .lt .ln{ display:none; }
  .lt .lv{ width:46%; }
}

/* ── O-01: interactieve elementen zijn nu knoppen ─────────────────────────
   De lesspeler gebruikte klikbare div's. Die krijgen geen focus, worden door een
   schermlezer niet als knop aangekondigd en reageren niet op Enter of spatie.
   Nu het knoppen zijn, moeten ze wel de opmaak van hun kaart houden. */
button.g, button.gs, button.gac, button.opt, button.mtoken{
  font: inherit; color: inherit; -webkit-appearance: none; appearance: none;
}
button.g, button.gs, button.gac{ width:100%; text-align:left; }
button.opt{ width:100%; text-align:left; }
button.opt:disabled, button.mtoken:disabled{ cursor:default; }
button.opt:disabled{ opacity:1; }

/* ── O-08: de vijf prestaties stonden met 0px tussenruimte naast elkaar, waardoor
   je "STERSPELERVOLTOOID!" las. Een raster met echte ruimte en bijschriften die
   over twee regels mogen breken. */
.badges{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.badges .bcol{ min-width:0; }
.badges .bcap{ overflow-wrap:anywhere; hyphens:auto; line-height:1.25; }
@media (max-width:360px){ .badges{ gap:6px; } .badges .bcap{ font-size:10.5px; } }

/* ── O-07: de eilanden op de schatkaart botsten ───────────────────────────
   De drie eilanden stonden met vaste percentages in een vak van 430 px. Op een
   telefoon van 375 px overlapten ze elkaar 42 en 54 px: het label "Je bent hier"
   hing boven het verkeerde eiland en de luchtballon lag over het sterrenchip van
   eiland 02. Ook werd het onderste eiland afgesneden.

   Een rij van drie kolommen kan per definitie niet overlappen en heeft geen vaste
   hoogte nodig. De zwevende indruk komt van de verschillende marges bovenaan,
   niet meer van absolute posities. */
.skymap{
  display:flex;
  align-items:flex-start;
  gap:6px;
  height:auto;
  min-height:0;
  overflow:visible;
  padding:14px 6px 10px;
  position:relative;
}
.skymap .sm-isl{
  position:relative; z-index:4;
  flex:1 1 0; min-width:0; width:auto; transform:none;
}
/* De oorspronkelijke regels voor de drie varianten zijn even specifiek als de
   algemene regel hierboven, dus positie, left/top en transform moeten hier
   opnieuw worden gezet. Zonder dat hielden ze hun absolute plek en bleven ze
   over elkaar heen liggen. */
.skymap .sm-isl.sm-left,
.skymap .sm-isl.sm-center,
.skymap .sm-isl.sm-right{
  position:relative; left:auto; right:auto; top:auto; bottom:auto; transform:none;
}
.skymap .sm-isl.sm-left  { order:1; margin-top:84px; }
.skymap .sm-isl.sm-center{ order:2; flex:1.35 1 0; margin-top:26px; }
.skymap .sm-isl.sm-right { order:3; margin-top:0; }

.skymap .sm-art{ width:100%; height:auto; aspect-ratio:1; max-width:none; }
.skymap .sm-cap{ margin-top:6px; }
.skymap .sm-name{ overflow-wrap:anywhere; }

/* wolken, rotsjes en ballon zijn decoratie: achter de eilanden en uit de buurt
   van de bijschriften */
.skymap .sm-cloud, .skymap .sm-rock, .skymap .sm-balloon{ pointer-events:none; z-index:1; }
.skymap .sm-cloud{ opacity:.5; }
.skymap .sm-balloon{ position:absolute; right:auto; left:2%; top:4%; }
/* de wolkjes horen in de lege lucht te zweven, niet achter een bijschrift */
.skymap .c1{ left:auto; right:6%; top:2%; width:74px; }
.skymap .c2{ right:auto; left:26%; top:0; width:70px; }
.skymap .c3{ left:2%; top:12%; width:64px; }
.skymap .sm-rock.r1{ left:30%; top:22%; }
.skymap .sm-rock.r2{ left:76%; top:40%; }

@media (max-width:360px){
  .skymap .sm-isl.sm-left{ margin-top:70px; }
  .skymap .sm-name{ font-size:12px; }
}

/* ── O-09: glastegels op de donkere kaart ─────────────────────────────────
   De donkere hoofdkaart staat altijd op donker, maar .gc haalde zijn kleur uit het
   thema van de app. In licht thema was dat wit met 65% dekking: een ondoorzichtig
   grijs vierkant op een bijna zwarte kaart. Deze tegels horen bij de kaart, niet bij
   het thema, dus krijgen ze hun eigen waarden. */
.ghero .gc{
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}

/* Onzichtbaar op het scherm, wel hoorbaar voor een schermlezer. */
.srOnly{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Tikvlakken van minstens 44px. De app deed dit al voor .modetoggle met een onzichtbaar
   ::after-vlak; deze zes elementen waren vergeten en zitten tussen de 28 en 38 px.
   Het vlak vergroot alleen het aanraakgebied, niet hoe de knop eruitziet. */
.switch,.segctrl button,.lestg-b,button[data-save],button[data-unsave],.backbtn{ position:relative; }
.switch::after,.segctrl button::after,.lestg-b::after,
button[data-save]::after,button[data-unsave]::after,.backbtn::after{
  content:""; position:absolute; left:50%; top:50%;
  width:max(100%,44px); height:44px; transform:translate(-50%,-50%);
}

/* Bij grote tekst liep de licht/donker-knop buiten de rechterrand op een smal scherm. */
.headrow{ flex-wrap:wrap; }