/* ═══════════════════════════════════════════════════════════════
   style.css — ArnariFotografie Kennisquiz
   Elke regel heeft een commentaar dat uitlegt wat het doet
═══════════════════════════════════════════════════════════════ */

/* ── RESET & BASIS ── */
* { box-sizing: border-box; margin: 0; padding: 0; } /* Alle elementen: breedte inclusief padding, geen standaard marge/opvulling */
body { font-family: 'Nunito', sans-serif; background: #eef0f8; min-height: 100vh; } /* Lettertype, lichtblauwe achtergrond, minimaal volledig scherm hoog */
.app { max-width: 540px; margin: 0 auto; min-height: 100vh; position: relative; } /* App gecentreerd, max 540px breed, relatief voor absolute kinderen */
.screen { display: none; } /* Alle schermen standaard verborgen */
.screen.active { display: block; } /* Alleen het actieve scherm is zichtbaar */

/* ── AUTH SCHERM (login / registreer) ── */
.auth-hero { background: linear-gradient(150deg, #0d1b2a 0%, #172637 50%, #3b1908 100%); padding: 2.75rem 1.5rem 3rem; text-align: center; position: relative; overflow: hidden; } /* Donkere gradient hero met driekleuren overgang, gecentreerde tekst, inhoud verborgen buiten de rand */
.auth-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 70% 90%, rgba(210,95,10,0.32), transparent 65%); pointer-events: none; } /* Oranje gloed decoratie rechtsboven via pseudo-element, kliks passeren erdoorheen */
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #e2e4ef; border-radius: 14px; padding: 4px; margin: 1.4rem 1.25rem 0; } /* Twee gelijke kolommen als tab-balk, lichtgrijze achtergrond, afgeronde hoeken */
.atab { padding: .6rem; border-radius: 11px; border: none; background: transparent; font-size: 14px; font-weight: 800; color: #888; cursor: pointer; font-family: 'Nunito', sans-serif; transition: all .15s; } /* Tab-knop: opvulling, afgeronde hoeken, geen rand, grijs, pointer cursor, vloeiende animatie */
.atab.on { background: #fff; color: #1a1a2e; box-shadow: 0 2px 8px rgba(0,0,0,.1); } /* Actieve tab: witte achtergrond, donkere tekst, subtiele schaduw */
.auth-body { padding: 1.25rem 1.25rem 3rem; } /* Opvulling rondom het formulier */
.field-group { margin-bottom: 1rem; } /* Ruimte onder elk invoerveld */
.field-label { display: block; font-size: 12.5px; font-weight: 800; color: #555; margin-bottom: .35rem; } /* Label als blok element, klein vetgedrukt, donkergrijs */
.field-input { width: 100%; padding: .75rem 1rem; border-radius: 12px; border: 1.5px solid #e0e2ef; background: #fff; font-size: 14px; font-family: 'Nunito', sans-serif; color: #1a1a2e; outline: none; transition: border-color .15s; } /* Invoerveld: volledige breedte, opvulling, afgeronde hoeken, lichte rand, wit, Nunito lettertype, vloeiende randkleur */
.field-input:focus { border-color: #7c3aed; } /* Paarse rand bij focussen van het invoerveld */
.auth-error { font-size: 12.5px; color: #dc2626; font-weight: 700; margin-bottom: .75rem; min-height: 18px; } /* Foutmelding: klein, rood, vetgedrukt, minimale hoogte zodat layout niet springt */
.auth-btn { width: 100%; padding: .95rem; border-radius: 16px; border: none; background: linear-gradient(135deg, #6366f1, #a855f7); color: #fff; font-size: 15px; font-weight: 900; cursor: pointer; font-family: 'Nunito', sans-serif; box-shadow: 0 4px 16px rgba(99,102,241,.38); transition: filter .15s; } /* Actieknop: volledig breed, paarse gradient, witte tekst, paarse schaduw, vloeiende helderheid */
.auth-btn:hover { filter: brightness(1.07); } /* Iets helderder bij hover */

/* ── GEDEELD: LOGO & HERO ── */
.logo-box { width: 78px; height: 78px; border-radius: 18px; background: #120d03; border: 2px solid rgba(210,155,28,0.5); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.2rem; position: relative; z-index: 1; } /* Logo container: vierkant met afgeronde hoeken, donkere achtergrond, gouden rand, gecentreerd */
.logo-ring { width: 48px; height: 48px; border-radius: 50%; border: 2.5px solid #c8961a; display: flex; align-items: center; justify-content: center; } /* Cirkel rondom het SVG icoon met gouden rand */
.logo-ring svg { width: 26px; height: 26px; fill: #c8961a; } /* Camera SVG: goud gekleurd */
.hero-tag { font-size: 10.5px; font-weight: 900; color: #e8a018; letter-spacing: 3px; text-transform: uppercase; margin-bottom: .45rem; position: relative; z-index: 1; } /* Kleine gele tag tekst met spatiëring en hoofdletters */
.hero-h1 { font-size: 30px; font-weight: 900; color: #fff; letter-spacing: -.5px; position: relative; z-index: 1; } /* Grote witte koptekst, licht negatieve letter-spatiëring */
.hero-desc { font-size: 15.5px; color: rgba(187, 211, 59, 1.0); max-width: 340px; margin: .6rem auto 0; line-height: 1.65; position: relative; z-index: 1; } /* Grijswitte beschrijvingstekst, gecentreerd met max breedte */

/* ── HOME SCHERM ── */
.home-hero { background: linear-gradient(150deg, #0d1b2a 0%, #172637 50%, #3b1908 100%); padding: 2.75rem 1.5rem 4rem; text-align: center; position: relative; overflow: hidden; } /* Zelfde donkere hero als auth, maar iets meer opvulling onderaan */
.home-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 70% 90%, rgba(210,95,10,0.32), transparent 65%); pointer-events: none; } /* Oranje gloed decoratie */

.stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0 1.25rem; margin-top: -1.75rem; position: relative; z-index: 2; } /* Vier gelijke kaarten naast elkaar, overlapt de hero door negatieve marge-top */
.stat-card { background: #fff; border-radius: 16px; padding: .9rem .4rem; text-align: center; box-shadow: 0 2px 14px rgba(0,0,0,.09); } /* Witte statistiekkaart met afgeronde hoeken en zachte schaduw */
.stat-ico { width: 36px; height: 36px; border-radius: 10px; margin: 0 auto .45rem; display: flex; align-items: center; justify-content: center; font-size: 17px; } /* Vierkant icoon container, gecentreerd */
.si-y { background: #fff3cc; } /* Geel icoon achtergrond (sterren) */
.si-p { background: #ede9fe; } /* Paars icoon achtergrond (trofee) */
.si-b { background: #dbeafe; } /* Blauw icoon achtergrond (vinkje) */
.si-r { background: #fee2e2; } /* Rood icoon achtergrond (vuur) */
.stat-n { font-size: 20px; font-weight: 900; color: #1a1a2e; } /* Groot vetgedrukt getal */
.stat-l { font-size: 10.5px; color: #999; font-weight: 700; margin-top: 1px; } /* Klein grijs label onder het getal */

.home-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #e2e4ef; border-radius: 14px; padding: 4px; margin: 1.4rem 1.25rem 0; } /* Tab-balk: twee kolommen, lichtgrijs, afgerond */
.htab { padding: .6rem; border-radius: 11px; border: none; background: transparent; font-size: 14px; font-weight: 800; color: #888; cursor: pointer; font-family: 'Nunito', sans-serif; transition: all .15s; } /* Tabknop stijl */
.htab.on { background: #fff; color: #1a1a2e; box-shadow: 0 2px 8px rgba(0,0,0,.1); } /* Actieve tabknop: wit met schaduw */

.home-content { padding: 1.1rem 1.25rem 3rem; } /* Opvulling voor de lessenlijst en badges */
.lessons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* Twee kolommen leskaarten */
.lesson-card { background: #fff; border-radius: 18px; padding: 1.05rem; cursor: pointer; transition: all .18s; position: relative; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.07); } /* Witte leskaart, afgeronde hoeken, pointer cursor, vloeiende animatie */
.lesson-card:hover:not(.locked) { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.13); } /* Kaart beweegt omhoog bij hover (alleen als niet vergrendeld) */
.lesson-card.locked { opacity: .52; cursor: default; } /* Vergrendelde kaart: half transparant, geen pointer */
.lnum { position: absolute; top: 0; left: 0; width: 24px; height: 24px; border-radius: 0 0 8px 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; color: #fff; } /* Levelnummer badge linksboven in de kaart */
.l-ico { font-size: 24px; margin: .65rem 0 .5rem; } /* Emoji icoon van het level */
.l-name { font-size: 12.5px; font-weight: 800; color: #1a1a2e; margin-bottom: 3px; } /* Levelnaam: klein vetgedrukt donker */
.l-desc { font-size: 10.5px; color: #999; line-height: 1.4; margin-bottom: .6rem; } /* Levelomschrijving: klein grijs */
.l-foot { display: flex; align-items: center; justify-content: space-between; } /* Voettekst: sterren links, vraagaantal rechts */
.l-stars span { font-size: 12px; color: #ddd; } /* Lege ster: lichtgrijs */
.l-stars span.on { color: #f59e0b; } /* Verdiende ster: goud */
.l-qc { font-size: 10px; color: #bbb; font-weight: 700; } /* Vraagaantal tekst: heel klein grijs */
.lock-note { font-size: 9.5px; color: #bbb; text-align: center; margin-top: 4px; } /* Tekst die aangeeft hoeveel sterren nodig zijn */

.badges-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } /* Drie kolommen badgekaarten */
.badge-card { background: #fff; border-radius: 16px; padding: 1rem .7rem; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,.07); } /* Witte badgekaart */
.badge-card.locked { opacity: .42; } /* Niet-verdiende badge: half transparant */
.b-ico { font-size: 28px; margin-bottom: .45rem; display: block; } /* Badge emoji: groot, blok-element */
.b-name { font-size: 11.5px; font-weight: 800; color: #1a1a2e; margin-bottom: 2px; } /* Badgenaam: klein vetgedrukt */
.b-desc { font-size: 10px; color: #aaa; } /* Badge beschrijving: heel klein grijs */
.b-earned { font-size: 10.5px; color: #22c55e; font-weight: 800; margin-top: 4px; } /* "Verdiend!" tekst: groen vetgedrukt */

.logout-wrap { padding: .5rem 1.25rem 2rem; text-align: center; } /* Ruimte rondom de uitlogknop */
.logout-btn { padding: .55rem 1.5rem; border-radius: 99px; border: 1.5px solid #e0e2ef; background: #fff; color: #888; font-size: 13px; font-weight: 700; cursor: pointer; font-family: 'Nunito', sans-serif; transition: all .15s; } /* Uitlogknop: pilvorm, lichte rand, grijs */
.logout-btn:hover { border-color: #dc2626; color: #dc2626; } /* Rood bij hover */

/* ── QUIZ SCHERM ── */
.quiz-wrap { min-height: 100vh; background: #eef0f8; display: flex; flex-direction: column; } /* Quizomhulsel: volledig scherm, lichtblauw, kolom layout */

.topbar { background: #fff; padding: .8rem 1.25rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; box-shadow: 0 1px 0 #e4e6f0; position: sticky; top: 0; z-index: 10; } /* Plakkerige bovenbalk: wit, drie kolommen (terug | midden | timer), dunne schaduw onderaan */
.back-btn { width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid #e8eaf2; background: #fff; cursor: pointer; font-size: 17px; display: flex; align-items: center; justify-content: center; color: #555; } /* Vierkante terugknop met rand */
.back-btn:hover { background: #f5f6fb; } /* Lichtgrijze achtergrond bij hover */
.topbar-mid { display: flex; align-items: center; gap: 8px; justify-content: center; } /* Midden gedeelte: icoon + naam gecentreerd */
.lv-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; } /* Cirkelvormig level emoji icoontje */
.lv-name { font-size: 14px; font-weight: 800; color: #1a1a2e; } /* Levelnaam naast het icoon */
.topbar-right { display: flex; align-items: center; gap: 6px; } /* Rechterkant: timerbalk + getal naast elkaar */
.timer-track { width: 72px; height: 7px; background: #e8eaf2; border-radius: 99px; overflow: hidden; } /* Grijze tijdbalkcontainer */
.timer-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #7c3aed, #a855f7); transition: width 1s linear; } /* Paarse tijdbalk die krimpt per seconde */
.timer-num { font-size: 13px; font-weight: 800; color: #555; min-width: 26px; text-align: right; } /* Secondenteller rechts van de balk */
.timer-num.urgent { color: #ef4444; } /* Rood als er minder dan 5 seconden over zijn */

.prog-row { padding: .65rem 1.25rem 0; display: flex; justify-content: space-between; align-items: center; } /* Voortgangsrij: vraagnummer links, percentage rechts */
.prog-label { font-size: 13px; font-weight: 800; color: #555; } /* "Vraag X van Y" tekst */
.prog-pct { font-size: 13px; font-weight: 800; color: #7c3aed; } /* Percentage in paars */
.prog-track { height: 7px; background: #e0e2ef; margin: .35rem 1.25rem 0; border-radius: 99px; overflow: hidden; } /* Grijze voortgangsbalkkontainer */
.prog-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #6366f1, #a855f7); transition: width .4s ease; } /* Paarse voortgangsbalk die groeit per vraag */

.points-row { display: flex; justify-content: center; margin: 1.1rem 0 .4rem; } /* Puntenrij: gecentreerd */
.points-pill { background: #fff; border-radius: 99px; padding: .4rem 1.15rem; font-size: 13px; font-weight: 800; color: #555; box-shadow: 0 2px 8px rgba(0,0,0,.09); } /* Pilvormige puntenweergave */
.points-pill span { color: #7c3aed; } /* Puntengetal in paars */

.q-area { padding: 0 1.25rem; } /* Zijdelingse opvulling rondom de vraagkaart */
.q-card { background: #fff; border-radius: 22px; padding: 1.75rem 1.5rem; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,.09); margin-bottom: 1.1rem; } /* Witte vraagkaart: grote afgeronde hoeken, gecentreerd, stevige schaduw */
.q-text { font-size: 17px; font-weight: 800; color: #1a1a2e; line-height: 1.5; } /* Vraagtekst: groot vetgedrukt donker */

.opts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; padding: 0 1.25rem; } /* 2×2 raster voor de vier antwoordknoppen */
.opt-btn { border: 2px solid rgba(255,255,255,0.35); border-radius: 18px; padding: 1.15rem .9rem; font-size: 15px; font-weight: 800; color: #fff; cursor: pointer; font-family: 'Nunito', sans-serif; transition: transform .12s, filter .12s, opacity .2s; text-align: center; line-height: 1.35; min-height: 68px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.18); } /* Grote gekleurde antwoordknop: dun wit randje (35% doorzichtig), afgerond, witte tekst, schaduw, vloeiende animaties */
.opt-btn:hover:not(:disabled) { transform: translateY(-3px) scale(1.02); filter: brightness(1.1); } /* Knop beweegt omhoog en wordt helderder bij hover (tenzij uitgeschakeld) */
.opt-btn:active:not(:disabled) { transform: scale(.97); } /* Knop krimpt licht bij indrukken */
.opt-btn:disabled { cursor: default; } /* Geen pointer cursor als de knop uitgeschakeld is */
.opt-btn.correct { outline: 5px solid rgba(34,197,94,.6); filter: brightness(1.1); transform: scale(1.03); } /* Juist antwoord: groene rand, iets groter en helderder */
.opt-btn.wrong { opacity: .35; transform: scale(.97); } /* Fout antwoord: half transparant en kleiner */
.opt-btn.show-correct { outline: 5px solid rgba(34,197,94,.6); filter: brightness(1.1); } /* Juist antwoord tonen na timeout: groene rand */

.fb-area { padding: .9rem 1.25rem 0; } /* Opvulling rondom de feedbackbox */
.fb-box { border-radius: 14px; padding: .9rem 1.1rem; font-size: 14px; font-weight: 700; display: none; } /* Feedbackbox: afgerond, standaard verborgen */
.fb-box.good { background: #f0fdf4; color: #15803d; } /* Groen feedbackvak bij goed antwoord */
.fb-box.bad { background: #fff5f5; color: #dc2626; } /* Rood feedbackvak bij fout antwoord of timeout */

.next-wrap { padding: .85rem 1.25rem 2rem; } /* Opvulling rondom de volgende-vraagknop */
.next-btn { width: 100%; padding: .95rem; border-radius: 16px; border: none; background: linear-gradient(135deg, #6366f1, #a855f7); color: #fff; font-size: 15px; font-weight: 900; cursor: pointer; font-family: 'Nunito', sans-serif; display: none; box-shadow: 0 4px 16px rgba(99,102,241,.38); } /* Paarse volgende-knop: breed, standaard verborgen */
.next-btn:hover { filter: brightness(1.06); } /* Iets helderder bij hover */

/* ── RESULTAAT SCHERM ── */
.result-wrap { text-align: center; padding: 3rem 1.75rem 2rem; } /* Resultaatinhoud gecentreerd met ruime opvulling */
.r-emoji { font-size: 62px; margin-bottom: .9rem; } /* Grote resultaat emoji */
.r-title { font-size: 26px; font-weight: 900; color: #1a1a2e; margin-bottom: .3rem; } /* Resultaattitel: groot en vetgedrukt */
.r-sub { font-size: 14px; color: #888; margin-bottom: 1.75rem; } /* Subtitel: grijs, ruimte eronder */
.r-stars { display: flex; gap: 10px; justify-content: center; margin-bottom: 1.75rem; } /* Sterrenbeoordeling: gecentreerd met ruimte eronder */
.r-star { font-size: 42px; filter: grayscale(1); transition: filter .4s; } /* Resultaat ster: groot, standaard grijsgetint */
.r-star.on { filter: grayscale(0); } /* Verdiende ster: kleur aan */
.r-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-bottom: 1.75rem; } /* Drie statistieken naast elkaar */
.rs { background: #fff; border-radius: 16px; padding: 1.15rem .6rem; box-shadow: 0 2px 10px rgba(0,0,0,.07); } /* Witte statistiekvakje */
.rs-n { font-size: 24px; font-weight: 900; color: #1a1a2e; } /* Groot getal in statistiekvakje */
.rs-l { font-size: 11px; color: #999; font-weight: 700; margin-top: 3px; } /* Klein label onder het getal */
.r-home { width: 100%; padding: .95rem; border-radius: 16px; border: 2px solid #e0e2ef; background: #fff; color: #1a1a2e; font-size: 15px; font-weight: 800; cursor: pointer; font-family: 'Nunito', sans-serif; margin-bottom: 10px; } /* Knop terug naar lessen: wit met grijze rand */
.r-retry { width: 100%; padding: .95rem; border-radius: 16px; border: none; background: linear-gradient(135deg, #6366f1, #a855f7); color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; font-family: 'Nunito', sans-serif; box-shadow: 0 4px 14px rgba(99,102,241,.35); } /* Opnieuw proberen knop: paarse gradient */

/* ── GELUID KNOP & TOAST ── */
.mute-btn { position: fixed; top: .85rem; right: .85rem; z-index: 99; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid #e0e2ef; background: #fff; cursor: pointer; font-size: 17px; box-shadow: 0 2px 8px rgba(0,0,0,.1); } /* Ronde geluidknop vast rechtsboven in het scherm */
.toast { position: fixed; bottom: 1.75rem; left: 50%; transform: translateX(-50%) translateY(90px); background: #fff; border-radius: 16px; padding: .9rem 1.35rem; display: flex; align-items: center; gap: 11px; box-shadow: 0 8px 30px rgba(0,0,0,.14); transition: transform .4s; z-index: 200; min-width: 250px; } /* Toast melding: vast onderaan gecentreerd, begint buiten beeld (translateY 90px) */
.toast.show { transform: translateX(-50%) translateY(0); } /* Toast schuift omhoog in beeld */
.t-ico { font-size: 26px; } /* Toast emoji icoon */
.t-title { font-size: 13.5px; font-weight: 800; color: #1a1a2e; } /* Toast titel: vetgedrukt donker */
.t-sub { font-size: 11.5px; color: #999; } /* Toast ondertekst: grijs */