/* Zelfgehost (SIL OFL 1.1) i.p.v. Google Fonts: Amdal is een sierlijke Tifinagh-stijl,
   los van Noto Sans Tifinagh, als tweede lettertype-keuze bij de naam-generator. */
@font-face{font-family:'Amdal';src:url('/shared/fonts/AMDAL-Regular.woff2') format('woff2');font-display:swap;}

:root{
  --paper:#F1EAD9; --paper-raised:#F8F3E7; --ink:#1E1B16; --ink-soft:#5B5346;
  --indigo:#2E4870; --indigo-soft:#5A7099; --ochre:#B97F27; --clay:#9C4A34;
  --line:#D8CBAE; --radius:2px; --radius-btn:12px;
}
/* Kosmisch paars i.p.v. het eerdere neutrale donkerbruin — zelfde kleurtaal als
   de "Ontwaken van je Naam"-animatie en de streamer-modi (signature.js,
   stream.html, quizstream.html). Goud/koraal-accenten (--ochre/--clay) bleven
   ongewijzigd: die matchten toevallig al bijna exact. Contrastratio's tegen de
   nieuwe achtergrond geverifieerd (WCAG AA, ≥4.5:1 voor tekst) vóór dit werd
   doorgevoerd — zie geen regressie t.o.v. het vorige donkerbruin. */
html[data-theme="dark"]{
  --paper:#1B1330; --paper-raised:#241A3D; --ink:#EFE6D3; --ink-soft:#B8AC93;
  --indigo:#7C97C4; --indigo-soft:#5A7099; --ochre:#E0A64B; --clay:#C97256; --line:#3C3158;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Work Sans',sans-serif;font-size:17px;line-height:1.55;transition:background .25s ease,color .25s ease;}
h1,h3,.serif{font-family:'Newsreader',serif;font-weight:500;color:var(--ink);margin:0;}
a{color:inherit;} button{font-family:inherit;}

[dir="rtl"] .quiz-grid,[dir="rtl"] .alpha-grid,[dir="rtl"] .form-grid{direction:rtl;}
[dir="rtl"] .row-actions,[dir="rtl"] .size-row{flex-direction:row-reverse;}
[dir="rtl"] .site-nav .nav-link{margin-right:0;margin-left:24px;}
/* Tifinagh-tekst blijft altijd links-naar-rechts, ook in een RTL-pagina */
.tifinagh-stage,.tifinagh-out{direction:ltr;}

.wrap{max-width:1080px;margin:0 auto;padding:0 28px;}
/* Twee bewust vaste rijen i.p.v. één rij die op laptopbreedte toevallig ergens
   afbreekt: op de normale sitebreedte (max. 1080px content) past logo + navigatie +
   taal/thema/donatie samen niet op één regel (gemeten: ~1377px nodig vs. 1024px
   beschikbaar) — dus liever een nette, voorspelbare twee-rijen-opbouw binnen
   dezelfde headerbalk dan een flex-wrap die per breedte ergens anders knapt. */
header.site{display:flex;flex-direction:column;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);}
.header-top-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;}
.brand svg{width:30px;height:30px;flex:none;}
.brand-name{font-family:'Newsreader',serif;font-size:20px;font-weight:500;}
.brand-sub{font-size:14px;color:var(--ink-soft);margin-top:-2px;}

.nav-menu{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.theme-btn{border:1px solid var(--line);background:var(--paper-raised);color:var(--ink);padding:10px 18px;border-radius:var(--radius-btn);cursor:pointer;font-size:15px;font-weight:600;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease;}
.theme-btn:hover{border-color:var(--indigo-soft);transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.08);}

#lang-suggest-banner{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:10px 16px;background:var(--indigo);color:#fff;font-size:14px;text-align:center;}
#lang-suggest-banner button{font-family:inherit;cursor:pointer;}
#lang-suggest-banner button[data-action="switch"]{border:1px solid rgba(255,255,255,.6);background:transparent;color:#fff;padding:6px 14px;border-radius:var(--radius-btn);font-size:13px;font-weight:600;}
#lang-suggest-banner button[data-action="switch"]:hover{background:rgba(255,255,255,.15);}
#lang-suggest-banner button[data-action="dismiss"]{border:none;background:transparent;color:#fff;padding:2px 6px;font-size:18px;line-height:1;opacity:.85;}
#lang-suggest-banner button[data-action="dismiss"]:hover{opacity:1;}

.name-card-hero{text-align:center;padding:40px 28px;}
.name-card-hero .name-card-title{font-size:40px;line-height:1.15;margin-bottom:14px;}
.name-card-hero .name-card-lede{font-size:17px;max-width:none;margin-bottom:20px;}
.name-card-hero .mode-pills{justify-content:center;}
.name-card-hero #name-input{display:block;max-width:420px;margin:0 auto;}
.name-card-hero .tifinagh-out{text-align:center;}

@media (max-width:720px){.name-card-hero{padding:32px 20px;}.name-card-hero .name-card-title{font-size:30px;}}

.page-title{padding:36px 0 28px;text-align:center;}
.page-title h1{font-size:32px;}

/* Hoofdnavigatie — de tweede, vaste rij van header.site (zie hierboven), zodat het
   altijd hetzelfde nette tweeledige patroon is i.p.v. een flex-wrap die per
   schermbreedte ergens anders knapt. Nog steeds in dezelfde headerbalk (geen extra
   marge/rand die het als los onderdeel van de pagina laat aanvoelen). */
.site-nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap;}
.site-nav .nav-link{background:none;border:none;padding:8px 4px;margin-right:20px;font-size:15px;font-weight:700;color:var(--ink-soft);text-decoration:none;cursor:pointer;position:relative;border-bottom:2px solid transparent;}
.site-nav .nav-link:hover{color:var(--ink);}
.site-nav .nav-link.active{color:var(--ink);border-bottom-color:var(--clay);}

/* "Extra's"-uitklapmenu — verzamelt de leuke bijkomstige pagina's (stickers, kaartjes,
   ...) op hetzelfde zichtbaarheidsniveau als de rest van de navigatie, i.p.v. ze weg te
   stoppen in kleine footer-linkjes. Schaalt mee: een nieuwe pagina is gewoon een extra
   regel hierin, geen extra hoofdnav-item of footer-rommel. */
.nav-dropdown{position:relative;display:inline-block;}
.nav-dropdown-toggle{font-family:inherit;}
.nav-dropdown-toggle::after{content:" ▾";font-size:11px;}
/* position:fixed + JS-berekende top/left (zie toggleNavDropdown in i18n.js) i.p.v.
   absoluut t.o.v. .nav-dropdown — de site-nav is op mobiel horizontaal scrollbaar
   (overflow-x:auto), wat een absoluut gepositioneerd menu daarbinnen verticaal zou
   afsnijden. Fixed-positionering ontsnapt daaraan, ongeacht LTR/RTL. */
.nav-dropdown-menu{display:none;position:fixed;min-width:200px;background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.16);overflow:hidden;z-index:30;}
.nav-dropdown-menu.open{display:block;}
.nav-dropdown-menu a{display:block;padding:11px 16px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap;}
.nav-dropdown-menu a:hover{background:var(--paper);}

.card{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius);padding:28px;}
.mode-pills{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;}
.pill{border:1px solid var(--line);background:transparent;color:var(--ink-soft);padding:11px 22px;border-radius:999px;font-size:15px;font-weight:600;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.pill:hover{border-color:var(--indigo-soft);transform:translateY(-1px);}
.pill.active{background:var(--indigo);border-color:var(--indigo);color:#F8F3E7;box-shadow:0 4px 10px rgba(46,72,112,.25);}
textarea#input-text{width:100%;min-height:90px;resize:vertical;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);font-family:'Newsreader',serif;font-size:19px;padding:14px 16px;}

.row-actions{display:flex;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap;}
.btn{border:none;border-radius:var(--radius-btn);padding:15px 30px;font-size:16px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.10);transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease;}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.16);} .btn-primary{background:var(--clay);color:#F8F3E7;}
.btn-secondary{background:var(--indigo);color:#F8F3E7;}
.btn-ghost{background:var(--paper-raised);border:1px solid var(--line);color:var(--ink);box-shadow:none;}
.btn-ghost:hover{border-color:var(--indigo-soft);}
.btn:active{transform:translateY(0);box-shadow:0 2px 6px rgba(0,0,0,.12);}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}

#results{margin-top:36px;}
.result-block{border-top:1px solid var(--line);padding-top:24px;margin-top:24px;}
.label{font-size:15px;color:var(--ink-soft);margin-bottom:6px;}
/* Voor sectiekoppen die als losse, herkenbare titel moeten opvallen (bv. op de
   premium-/accountpagina) i.p.v. de gedempte .label-stijl hierboven, die bedoeld is
   voor kleine invoervelden-labels en er daardoor als gewone tekst uitziet wanneer
   'm ook voor een hele sectie gebruikt wordt. */
.section-title{font-family:'Newsreader',serif;font-size:21px;font-weight:600;color:var(--ink);margin-bottom:4px;}
.tarifit-line{font-size:18px;font-family:'Newsreader',serif;font-style:italic;color:var(--indigo);}

/* Latijn boven Tifinagh (Ruby styling) */
.tifinagh-stage{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:36px 28px;margin-top:6px;overflow-x:auto;}
.tifinagh-out{font-family:'Noto Sans Tifinagh', serif;white-space:normal;line-height:3.5;}
ruby{ruby-position: over; margin-right: 12px;}
rt{font-family:'Work Sans',sans-serif;color:var(--ink);font-size:14px;font-weight:600; padding-bottom:6px;}

.size-row{display:flex;align-items:center;gap:10px;margin-top:14px;}
.size-row input[type=range]{width:160px;accent-color:var(--indigo);}
.size-row label{font-size:14px;color:var(--ink-soft);}

.alpha-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:2px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.alpha-cell{background:var(--paper-raised);padding:18px 10px;text-align:center;}
.alpha-cell .g{font-family:'Noto Sans Tifinagh',serif;font-size:28px;display:block;}
.alpha-cell .l{font-size:15px;font-weight:600;color:var(--ink-soft);margin-top:6px;display:block;}
.alpha-cell .hint{font-size:12px;color:var(--ink-soft);opacity:.8;margin-top:4px;display:block;line-height:1.3;}

.subtabs{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;}
.subtab-btn{border:1px solid var(--line);background:transparent;color:var(--ink-soft);padding:11px 22px;border-radius:999px;font-size:15px;font-weight:600;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.subtab-btn:hover{border-color:var(--indigo-soft);transform:translateY(-1px);}
.subtab-btn.active{background:var(--indigo);border-color:var(--indigo);color:#F8F3E7;box-shadow:0 4px 10px rgba(46,72,112,.25);}
.subtab-panel{display:none;} .subtab-panel.active{display:block;}

.status-msg{font-size:14px;color:var(--ink-soft);margin-top:10px;min-height:18px;}
.status-msg.error{color:var(--clay);}

/* Korte hint-tekst onder formuliervelden en toelichtende regels in lijsten (admin, resultaten) */
.hint{font-size:14px;color:var(--ink-soft);line-height:1.5;}
.note-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;font-size:14px;color:var(--ink);}

.premium-badge{display:inline-block;background:var(--ochre);color:#241a0a;font-size:14px;padding:4px 12px;border-radius:999px;margin-bottom:16px;}
.device-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;flex-wrap:wrap;}
.device-row:last-child{border-bottom:none;}
.device-row .device-current{color:var(--indigo);font-weight:500;}
/* Content-kolom mag krimpen/wrappen; actieknoppen (Goedkeuren/Verwijderen/etc.)
   duwen zichzelf anders buiten beeld op smalle schermen (zie admin-lijsten). */
.device-row > *:first-child{flex:1 1 220px;min-width:0;}
@media (max-width:480px){
  .device-row{flex-direction:column;align-items:stretch;}
  /* Zonder dit erft het eerste kind de "flex-basis:220px" hierboven, wat in
     kolom-layout als MINIMUMHOOGTE wordt gelezen i.p.v. breedte — dat gaf een
     grote lege ruimte tussen naam en waarde (zie scoreboard op mobiel). */
  .device-row > *:first-child{flex:none;}
}

/* Begrenst lange lijsten (vertaalgeschiedenis, favorieten) tot ~5 rijen zichtbaar,
   zodat de accountpagina niet eindeloos lang wordt bij veelgebruikers. */
.scroll-list{max-height:280px;overflow-y:auto;}

/* Herbruikbare knoppenrij voor admin-lijsten (bv. Kernwoorden/Gebruikers
   beheren): op mobiel 1-2 knoppen per rij i.p.v. drie smalle, los ogende
   knoppen onder elkaar. */
.admin-actions{display:flex;flex-wrap:wrap;gap:8px;flex-shrink:0;}
.admin-actions .btn{flex:1 1 140px;}
@media (max-width:480px){
  .admin-actions{width:100%;}
  /* De standaard .btn-padding/lettergrootte is te breed om twee naast elkaar
     te laten passen op een telefoonscherm — hier compacter zodat 1-2 per rij
     past i.p.v. drie losse, volle-breedte knoppen onder elkaar. */
  .admin-actions .btn{flex:1 1 115px;min-width:0;padding:10px 12px;font-size:14px;white-space:normal;}
}

.dash-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;}
.dash-stat-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:18px;text-align:center;}
.dash-stat-value{font-family:'Newsreader',serif;font-size:32px;color:var(--indigo);}
.dash-stat-label{font-size:14px;color:var(--ink-soft);margin-top:6px;}
.dash-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;}
.dash-action-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-btn);padding:18px;cursor:pointer;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease;}
.dash-action-card:hover{border-color:var(--indigo-soft);transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.10);}
.dash-action-title{font-weight:700;font-size:15px;}
.dash-action-desc{font-size:14px;color:var(--ink-soft);margin-top:4px;}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px;}
@media (max-width:600px){.form-grid{grid-template-columns:1fr;}}
.field label{display:block;font-size:14px;color:var(--ink-soft);margin-bottom:6px;}
.field input[type=text],.field input[type=password],.field input[type=email]{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);padding:10px 12px; font-size:15px;}
.field select{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);padding:10px 12px; font-size:15px;}
.field textarea{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);padding:10px 12px;font-size:15px;font-family:inherit;resize:vertical;}
.field.span-full{grid-column:1 / -1;}

/* Regio-aanvinklijst (bijdragen.html/beheer.html) — checkboxes i.p.v. een dropdown,
   want een woord kan bij meerdere stammen tegelijk horen. */
.region-checkbox-list{display:flex;flex-wrap:wrap;gap:8px;}
.region-chip{display:inline-flex;align-items:center;gap:6px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13px;cursor:pointer;user-select:none;transition:border-color .15s ease;}
.region-chip:has(input:checked){border-color:var(--indigo);background:var(--indigo);color:#F8F3E7;}
.region-chip input{margin:0;}

.quiz-container{text-align:center;max-width:550px;margin:0 auto;position:relative;}
.quiz-fullscreen-close{display:none;}
/* Mobiele "popup"-modus: zodra er een vraag actief is, vult de quiz het hele scherm
   i.p.v. een blok te zijn in een scrollende pagina — dat was de bron van het
   spring-effect bij "Volgende vraag" (elke vraag heeft een andere hoogte, dus de
   vaste scrollpositie liet steeds andere pagina-inhoud zien). Een schermvullend,
   zelf-scrollend paneel heeft geen paginascroll die kan verspringen. Alleen op
   mobiel (op desktop is er al genoeg ruimte, geen probleem om op te lossen) en
   alleen na expliciete JS-toggle (body.quiz-fullscreen, zie quiz.html) — nooit
   actief vóórdat er echt een categorie/vraag gekozen is. dvh i.p.v. vh: vh blijft
   op mobiel vastzitten aan de volledige schermhoogte inclusief de adresbalk, wat
   bij het in-/uitschuiven daarvan alsnog voor precies zo'n spring-effect zorgt. */
@media (max-width:700px){
  body.quiz-fullscreen .quiz-container{
    position:fixed;inset:0;z-index:100;margin:0;max-width:none;border-radius:0;
    height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:56px 20px 24px;
  }
  body.quiz-fullscreen .quiz-fullscreen-close{
    display:flex;position:fixed;top:14px;right:14px;z-index:101;
    width:40px;height:40px;align-items:center;justify-content:center;
    background:var(--paper-raised);border:1px solid var(--line);border-radius:999px;
    font-size:18px;color:var(--ink);cursor:pointer;
  }
  /* "Volgende vraag" als vaste voettekstbalk (fixed t.o.v. het scherm, niet sticky
     t.o.v. de scrollende inhoud) — staat zo altijd op precies dezelfde plek, ongeacht
     scrollpositie of hoeveel de antwoorden innemen. Met sticky stond de knop soms
     "los" tussen de inhoud en sprong hij pas vast zodra je er voorbij scrolde — dat
     voelde inconsistent. De extra padding-bottom op #quiz-active-panel voorkomt dat
     de laatste antwoordknop achter deze vaste balk verdwijnt. */
  body.quiz-fullscreen #quiz-next-btn{
    position:fixed;left:0;right:0;bottom:0;z-index:102;margin:0;border-radius:0;
    padding:16px 20px;background:var(--indigo);box-shadow:0 -8px 16px -4px rgba(0,0,0,.35);
  }
  /* --indigo is in donkere modus bewust lichter gemaakt (#7C97C4) zodat het als
     tekst-/randkleur op de donkere achtergrond leesbaar blijft (zie html[data-theme=
     "dark"] bovenin dit bestand) — maar juist dáárom is het als knop-áchtergrond met
     witte tekst te licht, te weinig contrast. Alleen hier de lichtthema-tint van
     --indigo hardcoded gebruiken, i.p.v. de variabele aan te passen (die lichtere
     tint is elders, als tekstkleur, wél de bedoeling). */
  html[data-theme="dark"] body.quiz-fullscreen #quiz-next-btn{background:#2E4870;}
  body.quiz-fullscreen #quiz-active-panel{padding-bottom:76px;}
  /* Vóór het indrukken van "Start quiz" is er op mobiel niets te spelen: de vraag,
     antwoorden én het afrondscherm blijven allemaal verborgen totdat de fullscreen-
     modus echt aanstaat. Zonder dit kon je gewoon inline doorspelen zonder ooit op
     "Start quiz" te drukken, en kon je bij "Ronde afgerond" komen terwijl die knop
     (die anders altijd zichtbaar is zolang je niet fullscreen zit) er nog naast
     stond — !important omdat quiz.html deze elementen zelf met een inline
     style.display aan/uit zet (resetQuizRound/showRoundComplete). */
  body:not(.quiz-fullscreen) #quiz-active-panel,
  body:not(.quiz-fullscreen) #quiz-round-complete{
    display:none !important;
  }
}
/* "Start quiz"-knop: alleen op mobiel, en alleen zolang de fullscreen-modus nog niet
   aanstaat — zie enterQuizFullscreenIfMobile() in quiz.html. Op desktop nooit nodig. */
.quiz-start-mobile{display:none;}
@media (max-width:700px){
  body:not(.quiz-fullscreen) .quiz-start-mobile{display:block;width:100%;margin-top:14px;}
}
/* Vraagkaart: geeft de vraag zelf (het Tifinagh-woord of de betekenis die je moet
   raden, plus evt. foto) een eigen, herkenbare tegel — zoals een trivia-kaart — i.p.v.
   dat 'm visueel wegvalt tussen de titel en de "zwakke woorden"-knop erboven. De
   indigo accentrand sluit aan bij de kleur die het te raden woord zelf al had. */
.quiz-question-card{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--indigo);border-radius:var(--radius);padding:32px 20px 28px;margin:20px 0 24px;box-shadow:0 4px 14px rgba(0,0,0,.12);}
.quiz-img-frame{margin:20px auto 0;max-width:320px;height:220px;border-radius:var(--radius);overflow:hidden;background:var(--paper-raised);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;}
.quiz-img-frame img{width:100%;height:100%;object-fit:cover;}
.quiz-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px;min-width:0;}
.quiz-opt{min-width:0;max-width:100%;overflow-x:auto;padding:18px 20px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-btn);font-size:16px;cursor:pointer;color:var(--ink);font-weight:600;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.quiz-opt:hover{border-color:var(--indigo-soft);transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.10);}
@media (max-width:480px){.quiz-grid{grid-template-columns:1fr;}}
/* Antwoordknop met Tarifit-woord: Latijn (waar de doelgroep vooral op leunt — diaspora
   die Tarifit in Latijns schrift leest, geen Tifinagh) is hier bewust het dominante,
   vaste-grootte woord; Tifinagh eronder is kleiner en gedempt, als ondersteuning i.p.v.
   het hoofdelement. Los van elkaar geschaald (zie renderChoiceWord() in quiz.html) en
   Noto Sans Tifinagh rendert sowieso al fors groter dan Latijn bij gelijke font-size,
   dus de nominale getallen liggen verder uit elkaar dan het uiteindelijke verschil
   op het scherm. Beide mogen afbreken naar een tweede regel i.p.v. te moeten krimpen. */
.quiz-opt-latin{font-size:18px;font-weight:700;word-break:break-word;}
.quiz-opt-tifinagh{font-family:'Noto Sans Tifinagh',serif;line-height:1.2;margin-top:4px;word-break:break-word;color:var(--ink-soft);}
.quiz-opt.correct-answer .quiz-opt-latin,.quiz-opt.wrong-answer .quiz-opt-latin,
.quiz-opt.correct-answer .quiz-opt-tifinagh,.quiz-opt.wrong-answer .quiz-opt-tifinagh{color:#fff;}
/* Kopiëren/Delen/Voor Stories-knopjes: op smalle schermen past nooit meer dan 2 naast
   elkaar (samen te breed), waardoor losse flex-knoppen willekeurig anders breed uitvallen
   als ze los onder elkaar terechtkomen. Een vast 2-koloms rooster geeft ze allemaal
   dezelfde breedte; .span-full laat de derde knop (Voor Stories) netjes de rij eronder vullen. */
.share-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;align-items:stretch;}
.share-actions .btn{width:100%;padding:12px 10px;white-space:normal;line-height:1.3;text-align:center;}
.share-actions .btn.span-full{grid-column:1 / -1;}
@media (max-width:360px){.share-actions{grid-template-columns:1fr;}.share-actions .btn.span-full{grid-column:auto;}}

.name-lovecard-cta{text-align:center;margin-top:16px;color:var(--clay);font-size:14px;font-weight:600;text-decoration:none;}
.name-lovecard-cta:hover{text-decoration:underline;}
.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:14px;}
.category-tile{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-btn);padding:14px 10px;text-align:center;cursor:pointer;font-size:14px;font-weight:600;color:var(--ink);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.category-tile:hover{border-color:var(--indigo-soft);transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.10);}
.category-tile.active{background:var(--indigo);border-color:var(--indigo);color:#F8F3E7;}
.category-tile .cat-count{display:block;font-size:12px;font-weight:400;color:var(--ink-soft);margin-top:4px;}
.category-tile.active .cat-count{color:#F8F3E7;opacity:.8;}

/* Tweekleurige voortgangsbalk op elke categorie-tegel: het lichte deel is "geoefend",
   het gouden deel erbovenop is "beheerst" (≥3x goed) — dus altijd mastered ⊆ practiced. */
.cat-progress-track{position:relative;display:block;height:5px;border-radius:999px;background:var(--line);margin-top:6px;overflow:hidden;}
.cat-progress-practiced,.cat-progress-mastered{position:absolute;top:0;left:0;height:100%;border-radius:999px;transition:width .3s ease;}
[dir="rtl"] .cat-progress-practiced,[dir="rtl"] .cat-progress-mastered{left:auto;right:0;}
.cat-progress-practiced{background:var(--indigo-soft);}
.cat-progress-mastered{background:var(--ochre);}
.category-tile.active .cat-progress-track{background:rgba(248,243,231,.3);}
.category-tile.active .cat-progress-practiced{background:rgba(248,243,231,.55);}
.category-tile.active .cat-progress-mastered{background:#F8F3E7;}
.quiz-opt.correct-answer{background:#16a34a;border-color:#16a34a;color:#fff;}
.quiz-opt.wrong-answer{background:#dc2626;border-color:#dc2626;color:#fff;}
/* "rt" (de kleine Latijnse letters boven een Tifinagh-teken) heeft altijd een
   vaste --ink-soft kleur, die op de verzadigde groene/rode achtergrond hierboven
   nauwelijks leesbaar is — hier expliciet wit maken zodra die kleuren gelden. */
.quiz-opt.correct-answer rt,.quiz-opt.wrong-answer rt{color:#fff;}
.quiz-feedback{margin-top:20px;font-size:16px;font-weight:600;}
.quiz-score{font-size:14px;color:var(--ink-soft);margin-top:6px;}

/* Voortgangswidget (level/XP/streak) */
.progress-widget{margin-bottom:24px;}
.progress-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;margin-bottom:8px;}
.progress-streak{color:var(--ochre);}
.progress-bar-track{background:var(--paper);border:1px solid var(--line);border-radius:999px;height:10px;overflow:hidden;}
.progress-bar-fill{background:var(--indigo);height:100%;border-radius:999px;transition:width .3s ease;}
.progress-xp-label{font-size:14px;color:var(--ink-soft);margin-top:6px;text-align:right;}

/* Sleepoefening (letters slepen) */
.letter-drop-zone{width:120px;height:120px;margin:20px auto;border:2px dashed var(--line);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-family:'Noto Sans Tifinagh',serif;font-size:4rem;color:var(--indigo);transition:border-color .15s ease,background .15s ease;}
.letter-drop-zone.drag-over{border-color:var(--indigo);background:var(--paper);}
.letter-drop-zone.selected-target{border-color:var(--ochre);border-style:solid;}
.letter-source-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px;}
.letter-tile{width:60px;height:60px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-btn);cursor:grab;user-select:none;color:var(--ink);transition:transform .15s ease,box-shadow .15s ease;}
.letter-tile:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.10);}
.letter-tile:active{cursor:grabbing;}
.letter-tile.tile-selected{border-color:var(--ochre);background:var(--paper-raised);}
.letter-tile.tile-used{opacity:.35;cursor:default;}
.letter-tile.tile-correct{background:#16a34a;border-color:#16a34a;color:#fff;opacity:1;}
.letter-tile.tile-wrong{background:#dc2626;border-color:#dc2626;color:#fff;opacity:1;}

/* Klikbare klankknoppen bij Bijdragen, voor letters die vaak verkeerd getypt worden */
.special-letters-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.special-letter-btn{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:56px;padding:6px 8px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-btn);cursor:pointer;color:var(--ink);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.special-letter-btn:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.10);border-color:var(--indigo-soft);}
.special-letter-btn:active{transform:translateY(0);}
.special-letter-btn .sl-glyph{font-family:'Noto Sans Tifinagh',serif;font-size:22px;line-height:1;color:var(--indigo);}
.special-letter-btn .sl-latin{font-size:14px;font-weight:700;line-height:1;}
.special-letter-btn .sl-hint{font-size:10px;color:var(--ink-soft);line-height:1.2;text-align:center;}

footer{border-top:1px solid var(--line);margin-top:60px;padding:28px 0 48px;font-size:14px;color:var(--ink-soft);}
footer .admin-link{font-size:13px;color:var(--ink-soft);opacity:.7;text-decoration:none;}
footer .admin-link:hover{opacity:1;}
@media (max-width:720px){.hero h1{font-size:32px;max-width:none;}}

/* Volledig-scherm mobiel menu (zie public/shared/mobileMenu.js) — vervangt op smalle
   schermen zowel de horizontaal scrollbare site-nav als het "Extra's"-dropdownmenu,
   die op sommige iPhones onbetrouwbaar bleken (positionering-gerelateerd, niet
   reproduceerbaar in simulatie hier). Een volledig-scherm overlay heeft geen precieze
   positionering nodig (gewoon inset:0), dus dat soort problemen kan hier niet optreden.
   Ook: één centrale plek voor alle menu-items i.p.v. 9 HTML-bestanden bijwerken bij
   een nieuwe pagina. */
.mobile-menu-btn{display:none;background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-btn);width:44px;height:44px;font-size:20px;line-height:1;cursor:pointer;color:var(--ink);align-items:center;justify-content:center;flex:none;}
.mobile-donate-btn{display:none;background:var(--clay);color:#F8F3E7;border:none;border-radius:999px;height:40px;padding:0 14px;font-size:14px;font-weight:700;line-height:40px;white-space:nowrap;text-decoration:none;align-items:center;justify-content:center;flex:none;box-shadow:0 2px 8px rgba(0,0,0,.10);}
.mobile-menu-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;}
.mobile-menu-overlay.open{display:block;}
.mobile-menu-panel{position:absolute;top:0;right:0;bottom:0;width:82%;max-width:340px;background:var(--paper-raised);padding:24px 20px;overflow-y:auto;box-shadow:-8px 0 24px rgba(0,0,0,.25);}
[dir="rtl"] .mobile-menu-panel{right:auto;left:0;box-shadow:8px 0 24px rgba(0,0,0,.25);}
.mobile-menu-close{display:block;background:none;border:none;font-size:24px;color:var(--ink-soft);cursor:pointer;padding:6px;margin:-6px -6px 14px auto;}
[dir="rtl"] .mobile-menu-close{margin:-6px auto 14px -6px;}
.mobile-menu-links{display:flex;flex-direction:column;gap:2px;margin-bottom:26px;}
.mobile-menu-links a{padding:14px 8px;font-size:17px;font-weight:700;color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line);}
.mobile-menu-links a.active{color:var(--clay);}
.mobile-menu-controls{display:flex;flex-direction:column;gap:10px;}
body.mobile-menu-active{overflow:hidden;}

@media (max-width:640px){
  .wrap{padding:0 16px;}
  header.site{flex-direction:row;align-items:center;justify-content:space-between;gap:14px;padding:16px 0;flex-wrap:nowrap;}
  header.site .nav-menu{display:none;}
  header.site .mobile-menu-btn{display:flex;}
  header.site .mobile-donate-btn{display:flex;}
  .brand{min-width:0;}
  .brand > div{min-width:0;}
  .brand-name{font-size:17px;}
  .brand-sub{font-size:11px;line-height:1.3;}
  .site-nav{display:none;}
  .row-actions{flex-direction:column;align-items:stretch;}
  .row-actions .btn{width:100%;}
  [dir="rtl"] .row-actions{flex-direction:column;}

  .mode-pills{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .mode-pills .pill{width:100%;text-align:center;padding-left:10px;padding-right:10px;}
}

/* --- Quiz-afrondscherm (na QUIZ_SESSION_LENGTH vragen) --- */
.quiz-round-complete{text-align:center;padding:20px 10px 6px;}
.quiz-round-complete-emoji{font-size:48px;line-height:1;margin-bottom:6px;}
.quiz-round-complete-score{font-family:'Newsreader',serif;font-size:56px;color:var(--ochre);margin:6px 0;}

/* --- Badges/achievements --- */

/* Kleine chip-rij onder de voortgangsbalk (quiz.html/account.html) — alleen verdiende badges. */
.progress-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.badge-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--paper);border:1px solid var(--line);font-size:17px;cursor:default;transition:transform .15s ease;}
.badge-icon:hover{transform:translateY(-2px) scale(1.08);}

/* Volledig badge-overzicht op de accountpagina: verdiend vs. nog te verdienen. */
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:4px;}
.badge-tile{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:16px 10px;text-align:center;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.badge-tile.earned{border-color:var(--ochre);box-shadow:0 4px 12px rgba(224,166,75,.18);}
.badge-tile.earned:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(224,166,75,.28);}
.badge-tile.locked{opacity:.45;filter:grayscale(1);}
.badge-tile .badge-tile-icon{font-size:32px;display:block;margin-bottom:8px;}
.badge-tile .badge-tile-name{font-size:13px;font-weight:600;display:block;line-height:1.3;}
.badge-tile .badge-tile-desc{font-size:11px;color:var(--ink-soft);display:block;margin-top:4px;line-height:1.35;}

/* Felicitatie-toast rechtsonder (linksonder in RTL) wanneer een nieuwe badge verdiend wordt. */
.badge-toast-host{position:fixed;bottom:20px;right:20px;z-index:1000;display:flex;flex-direction:column;gap:10px;pointer-events:none;}
[dir="rtl"] .badge-toast-host{right:auto;left:20px;}
.badge-toast{display:flex;align-items:center;gap:12px;background:var(--paper-raised);border:1px solid var(--ochre);border-radius:var(--radius-btn);padding:12px 18px;box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;transform:translateY(16px) scale(.96);transition:opacity .3s ease,transform .3s ease;max-width:280px;}
.badge-toast.badge-toast-in{opacity:1;transform:translateY(0) scale(1);}
.badge-toast-icon{font-size:30px;line-height:1;}
.badge-toast-text{display:flex;flex-direction:column;font-size:13px;line-height:1.4;}
.badge-toast-text strong{color:var(--ochre);font-size:12px;text-transform:uppercase;letter-spacing:.04em;}

/* --- Scoreboard: rangrijen met medailles, avatar en badge-iconen --- */
.rank-row{display:flex;align-items:center;gap:14px;padding:12px 8px;border-bottom:1px solid var(--line);}
.rank-row:last-child{border-bottom:none;}
.rank-row.rank-top{border-radius:var(--radius);background:linear-gradient(90deg,rgba(224,166,75,.12),transparent);}
.rank-medal{flex:0 0 34px;font-size:22px;text-align:center;}
.rank-number{flex:0 0 34px;text-align:center;font-size:14px;font-weight:600;color:var(--ink-soft);}
.rank-avatar{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:var(--indigo);color:#F8F3E7;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px;font-family:'Newsreader',serif;}
.rank-row.rank-top .rank-avatar{background:var(--ochre);color:#241a0a;}
.rank-main{flex:1 1 auto;min-width:0;}
.rank-name{font-weight:600;font-size:15px;display:block;}
.rank-badges{display:flex;gap:4px;margin-top:4px;flex-wrap:wrap;}
.rank-badges .badge-icon{width:22px;height:22px;font-size:12px;}
.rank-score{flex:0 0 auto;text-align:right;font-size:14px;color:var(--ink-soft);white-space:nowrap;}
.rank-score strong{color:var(--ink);font-family:'Newsreader',serif;font-size:17px;}
@media (max-width:480px){
  .rank-row{flex-wrap:wrap;}
  .rank-score{flex:1 1 100%;text-align:left;margin-top:4px;}
  [dir="rtl"] .rank-score{text-align:right;}
}