:root{ --bg:#0d0420; --bg2:#160a30; --card:#1c0e3d; --card-soft:#241252; --purple:#9600f4; --purple2:#7100B7; --purple3:#B649FF; --cyan:#00F2FF; --cyan2:#00BBFF; --magenta:#D42BFF; --green:#16e0a3; --red:#ff476f; --text:#f3eeff; --muted:#a99fc9; --line:rgba(255,255,255,.10); --inset:#0c0622; } /* --------------------------------------------------------------------------- Licht thema — zakelijker en rustiger: gedempte indigo/blauw-accenten, lichte achtergrond en lichte invulvelden. Wordt geactiveerd door een data-theme="light" op (zie i18n.js, knop linksboven). --------------------------------------------------------------------------- */ :root[data-theme="light"]{ --bg:#eef1f6; --bg2:#ffffff; --card:#ffffff; --card-soft:#f4f6fa; --purple:#5b4bd6; --purple2:#4a3cc0; --purple3:#6d5ce0; --cyan:#1f6fa8; --cyan2:#1f6fa8; --magenta:#7b4bc0; --green:#0f9d6e; --red:#d6395f; --text:#1e2430; --muted:#5d667a; --line:rgba(30,40,70,.14); --inset:#f4f6fa; } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;} html,body{margin:0;padding:0;} body{ background: radial-gradient(1200px 600px at 80% -10%, rgba(150,0,244,.25), transparent 60%), radial-gradient(900px 500px at -10% 10%, rgba(0,242,255,.12), transparent 55%), var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; min-height:100dvh; padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom); line-height:1.5; } .wrap{max-width:560px;margin:0 auto;padding:18px 16px 40px;} header{display:flex;align-items:center;gap:12px;margin-bottom:18px;} header .logo{ width:42px;height:42px;border-radius:12px;flex:none; background:linear-gradient(135deg,var(--cyan),var(--purple) 90%); display:grid;place-items:center;font-weight:800;font-size:20px;color:#fff; box-shadow:0 6px 22px rgba(150,0,244,.45);text-decoration:none; } header h1{font-size:18px;margin:0;font-weight:700;letter-spacing:.2px;} header p{margin:0;font-size:12px;color:var(--muted);} .grad{background:linear-gradient(90deg,var(--cyan),var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent;} /* tildeo-merknaam — de õ draagt de tilde waar de naam naar verwijst */ .brand{ display:inline-block;font-weight:800;font-size:13px;letter-spacing:1.5px; text-transform:lowercase;color:var(--text);text-decoration:none;line-height:1; margin:0 0 3px; } .brand:hover{opacity:.85;} .brand .grad{font-weight:800;} footer .brand{font-size:12px;letter-spacing:1px;margin:0 0 2px;color:var(--text);} .back{display:inline-block;margin-bottom:14px;color:var(--muted);text-decoration:none;font-size:14px;} .back:hover{color:var(--text);} .card{ background:linear-gradient(180deg,var(--card),var(--bg2)); border:1px solid var(--line); border-radius:20px; padding:20px; box-shadow:0 18px 50px rgba(0,0,0,.45); } /* scoreboard */ .stats{display:flex;gap:10px;margin-bottom:16px;} .stat{ flex:1;background:var(--card-soft);border:1px solid var(--line); border-radius:14px;padding:10px 8px;text-align:center; } .stat b{display:block;font-size:22px;font-weight:800;line-height:1;} .stat span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;} .stat.good b{color:var(--green);} .stat.bad b{color:var(--red);} .stat.streak b{color:var(--cyan);} /* question */ .tense-tag{ display:inline-block;font-size:12px;font-weight:700;letter-spacing:.4px; padding:6px 12px;border-radius:999px;margin-bottom:14px; background:rgba(0,242,255,.12);color:var(--cyan);border:1px solid rgba(0,242,255,.3); } /* regelmatig / onregelmatig-badge */ .reg-tag{ display:inline-block;font-size:12px;font-weight:700;letter-spacing:.3px; padding:6px 12px;border-radius:999px;margin:0 0 14px 8px;border:1px solid var(--line); } .reg-tag:empty{display:none;} .reg-tag.reg{color:var(--green);background:rgba(22,224,163,.12);border-color:rgba(22,224,163,.35);} .reg-tag.irr{color:#ffb454;background:rgba(255,180,84,.12);border-color:rgba(255,180,84,.4);} .verb{font-size:34px;font-weight:800;margin:0 0 2px;} .verb small{font-size:14px;font-weight:500;color:var(--muted);} .pron{font-size:20px;color:var(--purple3);font-weight:700;margin:10px 0 4px;} .hint-form{font-size:13px;color:var(--muted);min-height:18px;} /* hint */ .hint-btn{ margin-top:14px;background:rgba(0,242,255,.10);border:1px solid rgba(0,242,255,.3); color:var(--cyan);border-radius:12px;padding:9px 14px;font-size:14px;font-weight:600;cursor:pointer; } .hint-btn:active{background:rgba(0,242,255,.2);} .hint-box{ display:none;margin-top:10px;padding:13px 15px;border-radius:12px; background:var(--inset);border:1px solid var(--line);font-size:14px;line-height:1.7; } .hint-box.open{display:block;} .hint-box .hi{color:var(--cyan);font-weight:800;background:rgba(0,242,255,.12); padding:1px 7px;border-radius:6px;} .hint-box .muted{color:var(--muted);font-size:12.5px;} .hint-box b{color:var(--purple3);} input[type=text]{ width:100%;margin-top:16px;padding:15px 16px;font-size:20px; border-radius:14px;border:1.5px solid var(--line); background:var(--inset);color:var(--text);outline:none; transition:border-color .15s, box-shadow .15s; } input[type=text]:focus{border-color:var(--purple3);box-shadow:0 0 0 3px rgba(182,73,255,.25);} input.correct{border-color:var(--green);box-shadow:0 0 0 3px rgba(22,224,163,.25);} input.wrong{border-color:var(--red);box-shadow:0 0 0 3px rgba(255,71,111,.25);} /* accent helper */ .accents{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;} .accents button{ background:var(--card-soft);border:1px solid var(--line);color:var(--text); border-radius:10px;min-width:42px;padding:9px 0;font-size:18px;cursor:pointer;flex:1; } .accents button:active{background:var(--purple2);} .feedback{margin-top:14px;font-size:15px;min-height:24px;font-weight:600;} .feedback.ok{color:var(--green);} .feedback.no{color:var(--red);} .feedback .ans{color:var(--cyan);} .btn{ width:100%;margin-top:16px;padding:15px;border:none;border-radius:14px; font-size:17px;font-weight:700;cursor:pointer;color:#fff; background:linear-gradient(90deg,var(--purple),var(--magenta)); box-shadow:0 10px 26px rgba(150,0,244,.4); } .btn:active{transform:translateY(1px);} .btn.ghost{background:transparent;border:1.5px solid var(--line);box-shadow:none;color:var(--text);} /* settings */ .toolbar{display:flex;justify-content:space-between;align-items:center;margin:18px 2px 8px;} .toolbar h2{font-size:14px;margin:0;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.6px;} .gear{background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer;padding:6px;} .gear:hover{color:var(--text);} .settings{margin-top:14px;display:none;} .settings.open{display:block;} .settings h3{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin:16px 0 8px;} .chips{display:flex;flex-wrap:wrap;gap:8px;} .chip{ display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none; background:var(--card-soft);border:1.5px solid var(--line);border-radius:999px; padding:8px 13px;font-size:14px; } .chip input{display:none;} .chip.on{border-color:var(--purple3);background:rgba(182,73,255,.18);color:#fff;} .chip .nl{color:var(--muted);font-size:12px;} .chip.on .nl{color:var(--text);} .chip.focus::after{content:"★";color:var(--cyan);font-size:11px;margin-left:2px;} footer{text-align:center;margin-top:26px;font-size:12px;color:var(--muted);} footer a{color:var(--purple3);text-decoration:none;} footer .version{margin-top:6px;font-size:11px;opacity:.65;} /* richtingen-oefening: vraag (emoji + woord) */ .dir-prompt{display:flex;flex-direction:column;align-items:center;gap:6px;margin:14px 0 18px;} .dir-prompt .dir-emoji{font-size:48px;line-height:1;} .dir-prompt .dir-word{font-size:26px;font-weight:700;color:var(--text);text-align:center;} /* taal-wissel pil rechtsboven */ .lang-switch{ position:fixed; top:calc(env(safe-area-inset-top) + 12px); right:14px; z-index:50; min-width:42px; padding:7px 12px; font-size:13px;font-weight:800;letter-spacing:.6px; border-radius:999px;cursor:pointer; color:var(--text); background:rgba(28,14,61,.85); border:1.5px solid var(--purple3); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); box-shadow:0 6px 22px rgba(150,0,244,.35); } .lang-switch:active{transform:translateY(1px);} /* deel-knop (links van de taalpil) + deel-menu (desktop fallback) */ .share-switch{ position:fixed; top:calc(env(safe-area-inset-top) + 12px); right:14px; z-index:50; width:42px;height:35px; display:flex;align-items:center;justify-content:center; border-radius:999px;cursor:pointer; color:var(--text); background:rgba(28,14,61,.85); border:1.5px solid var(--purple3); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); box-shadow:0 6px 22px rgba(150,0,244,.35); } .share-switch:active{transform:translateY(1px);} .share-switch svg{display:block;} .share-menu{ position:fixed; top:calc(env(safe-area-inset-top) + 56px); right:14px; z-index:51; display:flex;flex-direction:column; min-width:180px;padding:6px; border-radius:14px; background:rgba(28,14,61,.97); border:1.5px solid var(--purple3); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); box-shadow:0 12px 34px rgba(0,0,0,.45); } .share-menu a,.share-menu button{ display:block;width:100%;text-align:left; padding:11px 12px;border-radius:10px; background:transparent;border:0;cursor:pointer; color:var(--text);font-size:14px;font-weight:600; text-decoration:none; } .share-menu a:hover,.share-menu button:hover{background:rgba(150,0,244,.25);} /* ============ voornaamwoorden-quiz ============ */ .pron-choices{ display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px; } .pron-choice{ padding:16px 8px;border-radius:14px;border:1.5px solid var(--line); background:var(--card-soft);color:var(--text); font-size:20px;font-weight:800;cursor:pointer;letter-spacing:.5px; transition:border-color .15s, background .15s, transform .1s; } .pron-choice:active{transform:translateY(1px);} .pron-choice.correct{border-color:var(--green);background:rgba(22,224,163,.18);color:var(--green);} .pron-choice.wrong{border-color:var(--red);background:rgba(255,71,111,.18);color:var(--red);} .pron-choice:disabled{cursor:default;opacity:.9;} .pron-tag{ display:inline-block;margin-left:6px;padding:2px 9px;border-radius:999px; font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px; border:1px solid var(--line); } .pron-tag.cd{color:var(--cyan);border-color:rgba(0,242,255,.4);background:rgba(0,242,255,.1);} .pron-tag.ci{color:var(--purple3);border-color:rgba(182,73,255,.45);background:rgba(182,73,255,.12);} /* woordenschat-oefening */ .vocab-prompt{font-size:34px;font-weight:800;text-align:center;margin:6px 0 2px;line-height:1.2;} .vocab-type{display:block;text-align:center;color:var(--muted);font-size:12px; text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px;} .vocab-choices{display:flex;flex-direction:column;gap:10px;margin-top:16px;} .vocab-choice{ width:100%;padding:15px 16px;border-radius:14px;border:1.5px solid var(--line); background:var(--card-soft);color:var(--text);font-size:17px;font-weight:600; cursor:pointer;text-align:left; transition:border-color .15s, background .15s, transform .1s; } .vocab-choice:active{transform:translateY(1px);} .vocab-choice.correct{border-color:var(--green);background:rgba(22,224,163,.18);color:var(--green);} .vocab-choice.wrong{border-color:var(--red);background:rgba(255,71,111,.18);color:var(--red);} .vocab-choice:disabled{cursor:default;opacity:.92;} /* meerkeuze-rijen (plaatsing) */ .opt-list{display:flex;flex-direction:column;gap:10px;margin-top:16px;} .opt{ display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer; padding:13px 15px;border-radius:13px;border:1.5px solid var(--line); background:var(--card-soft);color:var(--text);font-size:16px;font-weight:600; transition:border-color .15s, background .15s, transform .1s; } .opt:active{transform:translateY(1px);} .opt .box{ flex:none;width:22px;height:22px;border-radius:7px;border:2px solid var(--muted); display:grid;place-items:center;font-size:14px;font-weight:800;color:#fff; } .opt.sel{border-color:var(--purple3);background:rgba(182,73,255,.16);} .opt.sel .box{background:var(--purple3);border-color:var(--purple3);} .opt.sel .box::after{content:"✓";} .opt:disabled{cursor:default;} .opt.ok{border-color:var(--green);background:rgba(22,224,163,.16);color:var(--green);} .opt.ok .box{background:var(--green);border-color:var(--green);color:#04221a;} .opt.ok .box::after{content:"✓";} .opt.bad{border-color:var(--red);background:rgba(255,71,111,.16);color:var(--red);} .opt.bad .box{background:var(--red);border-color:var(--red);} .opt.bad .box::after{content:"✕";} .opt.miss{border-color:var(--green);border-style:dashed;background:transparent;color:var(--green);} .opt.miss .box{border-color:var(--green);color:var(--green);} .opt.miss .box::after{content:"✓";} /* ============ hoofdmenu ============ */ .home-start{ margin:0 2px 18px;padding:12px 14px;border-radius:12px; background:rgba(0,242,255,.07);border:1px solid rgba(0,242,255,.25); color:var(--muted);font-size:13.5px;line-height:1.55; } .home-start strong{color:var(--text);font-weight:700;} .home-start .lvl{font-weight:800;color:var(--cyan);} .home-soon{ margin:20px 2px 0;padding:12px 14px;border-radius:12px; background:rgba(182,73,255,.08);border:1px dashed rgba(182,73,255,.35); color:var(--muted);font-size:13px;text-align:center; } /* ============ spiekbriefje ============ */ .cheat-sub{ color:var(--muted);font-size:13px;margin:0 0 12px;font-style:italic; } .cheat-h{ font-size:13px;color:var(--purple3);text-transform:uppercase;letter-spacing:.6px; margin:16px 0 8px;font-weight:700; } .cheat-rule{margin:6px 0 4px;font-size:14.5px;color:var(--text);} .cheat-ex{ margin:8px 0 0;padding:10px 12px;border-radius:10px; background:var(--inset);border:1px solid var(--line); font-size:13.5px;color:var(--muted);line-height:1.7; } .cheat-ex b{color:var(--cyan);} .cheat-ex .cheat-inf{color:var(--purple3);font-weight:800;} .cheat-ex .cheat-mean{color:var(--muted);font-weight:400;} .cheat-table{ width:100%;border-collapse:collapse;margin-top:6px;font-size:14.5px; } .cheat-table th,.cheat-table td{ padding:7px 8px;text-align:left;border-bottom:1px solid var(--line); } .cheat-table th{ color:var(--muted);font-size:11.5px;font-weight:700; text-transform:uppercase;letter-spacing:.5px; } .cheat-table tr:last-child td{border-bottom:none;} .cheat-table td:first-child{color:var(--purple3);font-weight:600;} .cheat-table b{color:var(--cyan);} .cheat-list{ margin:8px 0 0;padding:0 0 0 18px;font-size:14px;line-height:1.7;color:var(--text); } .cheat-list li{margin-bottom:8px;} .cheat-list b{color:var(--purple3);} .cheat-list i{color:var(--cyan);font-style:normal;} /* uitleg-alinea in spiekbriefje */ .cheat-text{margin:4px 0 10px;font-size:14px;line-height:1.65;color:var(--text);} .cheat-text b{color:var(--purple3);} .cheat-text i{color:var(--cyan);font-style:normal;} .cheat-when-h{ font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px; font-weight:700;margin:12px 0 4px; } .install-btn{ display:block;width:100%;margin-top:24px;padding:15px;border:none;border-radius:16px; font-size:16px;font-weight:700;cursor:pointer;color:#fff;text-align:center;text-decoration:none; background:linear-gradient(90deg,var(--cyan2),var(--purple)); box-shadow:0 10px 28px rgba(0,178,255,.35); transition:transform .12s, box-shadow .12s; } .install-btn:active{transform:translateY(1px);box-shadow:0 6px 16px rgba(0,178,255,.25);} .ios-hint{ margin-top:20px;padding:14px 16px;border-radius:14px; background:rgba(0,242,255,.08);border:1px solid rgba(0,242,255,.25); font-size:14px;color:var(--muted);text-align:center;line-height:1.6; } .ios-hint strong{color:var(--text);} /* ============ landingspagina-tegels ============ */ .tiles{display:flex;flex-direction:column;gap:14px;} .group-h{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px; color:var(--muted);margin:22px 2px 10px;} .group-h:first-of-type{margin-top:8px;} .tile{ display:block;text-decoration:none;color:var(--text); background:linear-gradient(180deg,var(--card),var(--bg2)); border:1px solid var(--line);border-radius:20px;padding:20px; box-shadow:0 18px 50px rgba(0,0,0,.45);transition:transform .15s, border-color .15s; } .tile:hover{transform:translateY(-2px);border-color:var(--purple3);} .tile .ico{font-size:30px;} .tile h2{margin:8px 0 4px;font-size:19px;} .tile p{margin:0;color:var(--muted);font-size:14px;} .tile .go{display:inline-block;margin-top:12px;color:var(--cyan);font-weight:700;font-size:14px;} /* CEFR-niveaubadge op een tegel */ .tile{position:relative;} .level{ position:absolute;top:16px;right:16px; font-size:11px;font-weight:800;letter-spacing:.5px;line-height:1; padding:4px 9px;border-radius:999px;border:1px solid var(--line);white-space:nowrap; } .level.a{color:var(--green);background:rgba(22,224,163,.10);border-color:rgba(22,224,163,.35);} .level.b{color:var(--purple3);background:rgba(182,73,255,.12);border-color:rgba(182,73,255,.40);} .level.begin{color:var(--cyan);background:rgba(0,242,255,.10);border-color:rgba(0,242,255,.35);} /* "Nieuw"-badge naast de niveaubadge. .level is los nog steeds absoluut geplaatst; binnen .badges zetten we dat uit zodat de twee naast elkaar staan in plaats van over elkaar. Gevuld in plaats van getint, want deze badge moet juist opvallen. */ .badges{position:absolute;top:16px;right:16px;display:flex;align-items:center;gap:6px;} .badges .level{position:static;} .tag-new{ font-size:11px;font-weight:800;letter-spacing:.5px;line-height:1; padding:4px 9px;border-radius:999px;white-space:nowrap; color:#fff;background:var(--purple);border:1px solid transparent; } /* ============ tabel-oefening ============ */ .selectors{margin-bottom:6px;} .selectors label{display:block;font-size:13px;color:var(--muted);text-transform:uppercase; letter-spacing:.6px;margin:0 0 8px;} select{ width:100%;padding:13px 14px;font-size:17px;border-radius:14px; border:1.5px solid var(--line);background:var(--inset);color:var(--text); outline:none;-webkit-appearance:none;appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--purple3) 50%), linear-gradient(135deg,var(--purple3) 50%,transparent 50%); background-position:calc(100% - 20px) center, calc(100% - 14px) center; background-size:6px 6px, 6px 6px;background-repeat:no-repeat; } select:focus{border-color:var(--purple3);box-shadow:0 0 0 3px rgba(182,73,255,.25);} .conj-item{margin-top:14px;} .conj-item .lbl{font-size:14px;color:var(--purple3);font-weight:700;margin-bottom:6px;} .conj-item input[type=text]{margin-top:0;} .conj-item .sol{font-size:13.5px;margin-top:5px;min-height:0;color:var(--cyan);font-weight:600;} .conj-item .sol.hide{display:none;} /* ============ zin-oefeningen ============ */ .sentence{font-size:20px;line-height:1.85;margin:8px 0 4px;} .blank{ display:inline-block;background:rgba(0,242,255,.12); border:1px dashed rgba(0,242,255,.55);color:var(--cyan); border-radius:8px;padding:1px 9px;font-weight:700;white-space:nowrap; } .blank.filled{background:rgba(22,224,163,.15);border-style:solid;border-color:var(--green);color:var(--green);} .blank.filled.bad{background:rgba(255,71,111,.15);border-color:var(--red);color:var(--red);} .nl-trans{color:var(--muted);font-size:14px;font-style:italic;margin-top:4px;} /* vraagregel in de vraag-en-antwoord-oefening */ .qa-q{font-size:18px;font-weight:700;margin:2px 0 2px;color:var(--cyan);line-height:1.5;} .reason{margin-top:12px;padding:12px 15px;border-radius:12px;background:var(--inset); border:1px solid var(--line);font-size:14px;line-height:1.6;color:var(--text);} .reason b{color:var(--purple3);} .choices{display:flex;gap:12px;margin-top:18px;} .choice{ flex:1;padding:16px 10px;border-radius:14px;border:1.5px solid var(--line); background:var(--card-soft);color:var(--text);font-size:17px;font-weight:700;cursor:pointer; transition:border-color .15s, background .15s; } .choice:active{transform:translateY(1px);} .choice .sub{display:block;font-size:11px;color:var(--muted);font-weight:500;margin-top:4px; text-transform:none;letter-spacing:0;} .choice.correct{border-color:var(--green);background:rgba(22,224,163,.18);} .choice.correct .sub{color:var(--green);} .choice.wrong{border-color:var(--red);background:rgba(255,71,111,.18);} .choice:disabled{cursor:default;opacity:.85;} /* ---- práctico: el cuerpo (lichaamsdelen) ---- */ .body-wrap{display:flex;justify-content:center;margin:10px 0 4px;} .body-svg{width:100%;max-width:260px;height:auto;touch-action:manipulation;user-select:none;} .body-svg .part{fill:#2a1c52;stroke:var(--purple2);stroke-width:2;cursor:pointer; transition:fill .12s,stroke .12s;} .body-svg.locked .part{cursor:default;} .body-svg .part:hover{fill:#3d2a72;} .body-svg.locked .part:hover{fill:#2a1c52;} .body-svg .part.hi{fill:var(--purple3);stroke:var(--purple3);} .body-svg .part.ok{fill:var(--green);stroke:var(--green);} .body-svg .part.bad{fill:var(--red);stroke:var(--red);} .body-face{fill:none;stroke:var(--muted);stroke-width:2;pointer-events:none;opacity:.5;} /* ---- práctico: la hora (klok) ---- */ .clock-wrap{display:flex;justify-content:center;margin:10px 0 6px;} .clock-svg{width:200px;height:200px;} .clock-svg .face{fill:var(--card-soft);stroke:var(--purple2);stroke-width:3;} .clock-svg .tick{stroke:var(--muted);stroke-width:2;} .clock-svg .tick.big{stroke:var(--text);stroke-width:3;} .clock-svg .hand-h{stroke:var(--text);stroke-width:5;stroke-linecap:round;} .clock-svg .hand-m{stroke:var(--cyan);stroke-width:3;stroke-linecap:round;} .clock-svg .pin{fill:var(--purple3);} .choices.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;} .choices.grid .choice{font-size:15px;} /* ---- práctico: el restaurante (rollenspel als gesprek) ---- */ .choices.list{display:grid;grid-template-columns:1fr;gap:10px;} .choices.list .choice{font-size:15.5px;font-weight:600;text-align:left;line-height:1.4;} /* scenariokeuze */ .scn-list{display:flex;flex-direction:column;gap:12px;margin-top:6px;} .scn-card{ display:flex;gap:13px;align-items:flex-start;text-align:left;width:100%; padding:15px 16px;border-radius:16px;border:1.5px solid var(--line); background:var(--card-soft);color:var(--text);cursor:pointer; transition:border-color .15s, background .15s; } .scn-card:active{transform:translateY(1px);} .scn-card .scn-ico{font-size:30px;line-height:1.05;} .scn-card h3{margin:0 0 4px;font-size:16px;} .scn-card p{margin:0;font-size:13px;color:var(--muted);line-height:1.5;} /* reset / ander scenario tijdens het spel */ .scn-reset{ display:inline-flex;align-items:center;gap:5px;margin:0 0 12px; background:rgba(157,78,221,.12);border:1px solid var(--purple2); color:var(--purple3);border-radius:999px;padding:6px 13px; font-size:13px;font-weight:700;cursor:pointer; } .scn-reset:active{transform:translateY(1px);} /* gesprekskop */ .scn-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px;} .scn-head .scn-title{font-weight:700;font-size:15px;} .scn-head .scn-prog{font-size:12.5px;color:var(--muted);white-space:nowrap;} /* chat */ .chat{display:flex;flex-direction:column;gap:11px;margin:2px 0 16px;} .bubble{max-width:88%;padding:10px 13px;border-radius:16px;font-size:15px;line-height:1.45;animation:bubbleIn .22s ease;} .bubble .who{display:block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px;} .bubble .tr{display:block;margin-top:5px;font-size:12.5px;color:var(--muted);} .bubble.them{align-self:flex-start;background:#19112e;border:1px solid var(--line);border-bottom-left-radius:5px;} .bubble.them .who{color:var(--cyan);} .bubble.me{align-self:flex-end;background:rgba(157,78,221,.20);border:1px solid var(--purple2);border-bottom-right-radius:5px;} .bubble.me .who{color:var(--purple3);} .bubble.me .tr{color:#c7b6e6;} @keyframes bubbleIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}} /* opdracht boven de keuzes */ .scn-task{ text-align:center;font-size:13.5px;color:var(--text);line-height:1.45; background:rgba(0,242,255,.07);border:1px solid rgba(0,242,255,.25); border-radius:12px;padding:10px 13px;margin:0 0 12px; } /* afrondingsbanner + knoppen */ .scn-done{ text-align:center;padding:16px;border-radius:14px;margin-bottom:14px; background:rgba(22,224,163,.13);border:1px solid var(--green);color:var(--text); } .scn-done .scn-done-h{font-size:19px;font-weight:800;margin-bottom:5px;} .scn-done .scn-done-p{font-size:13.5px;color:var(--muted);line-height:1.5;} .scn-btns{display:flex;gap:10px;} .scn-btns .btn{flex:1;margin-top:0;font-size:15px;padding:13px;} /* =========================================================================== Thema-knop (zon/maan) — staat links van de deel-knop, zelfde pil-stijl. =========================================================================== */ .theme-switch{ position:fixed; top:calc(env(safe-area-inset-top) + 12px); right:138px; z-index:50; width:42px;height:35px; display:flex;align-items:center;justify-content:center; border-radius:999px;cursor:pointer; color:var(--text); background:rgba(28,14,61,.85); border:1.5px solid var(--purple3); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); box-shadow:0 6px 22px rgba(150,0,244,.35); } .theme-switch:active{transform:translateY(1px);} .theme-switch svg{display:block;} /* =========================================================================== Licht thema — overrides voor zaken die niet enkel via de kleurvariabelen gaan: rustigere achtergrond, zachtere schaduwen en een paar losse kleuren. =========================================================================== */ :root[data-theme="light"] body{ background: radial-gradient(1100px 560px at 80% -10%, rgba(91,75,214,.10), transparent 60%), radial-gradient(900px 500px at -10% 10%, rgba(31,111,168,.08), transparent 55%), var(--bg); } :root[data-theme="light"] .card{box-shadow:0 12px 30px rgba(30,40,70,.10);} :root[data-theme="light"] .tile{box-shadow:0 12px 30px rgba(30,40,70,.08);} :root[data-theme="light"] header .logo{box-shadow:0 6px 18px rgba(91,75,214,.30);} :root[data-theme="light"] .btn{box-shadow:0 8px 20px rgba(91,75,214,.28);} :root[data-theme="light"] .theme-switch, :root[data-theme="light"] .lang-switch, :root[data-theme="light"] .share-switch{ background:rgba(255,255,255,.85); box-shadow:0 6px 18px rgba(30,40,70,.12); } :root[data-theme="light"] .share-menu{background:rgba(255,255,255,.98);} :root[data-theme="light"] .chip.on{color:#fff;} :root[data-theme="light"] .bubble.them{background:var(--card-soft);} :root[data-theme="light"] .bubble.me .tr{color:#6b5fb0;} :root[data-theme="light"] .body-svg .part{fill:#dfe3ee;} :root[data-theme="light"] .body-svg .part:hover{fill:#cfd5e6;} :root[data-theme="light"] .body-svg.locked .part:hover{fill:#dfe3ee;} /* =========================================================================== Onderbalk — vaste navigatie (Home · Statistieken · Instellingen) op elke pagina. Wordt in i18n.js (mountBottomNav) ingehangen. =========================================================================== */ .bottom-nav{ position:fixed;left:0;right:0;bottom:0;z-index:60; display:flex;align-items:stretch; background:rgba(13,4,32,.92); border-top:1px solid var(--line); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -6px 24px rgba(0,0,0,.35); } .bottom-nav a{ flex:1;display:flex;flex-direction:column;align-items:center;gap:3px; padding:9px 4px 8px;text-decoration:none;color:var(--muted); font-size:11px;font-weight:600;letter-spacing:.3px; } .bottom-nav a svg{display:block;opacity:.9;} .bottom-nav a.active{color:var(--purple3);} .bottom-nav a:active{transform:translateY(1px);} /* ruimte vrijhouden onder de inhoud zodat niets achter de balk valt */ .wrap{padding-bottom:calc(40px + 60px + env(safe-area-inset-bottom));} :root[data-theme="light"] .bottom-nav{ background:rgba(255,255,255,.92); box-shadow:0 -6px 20px rgba(30,40,70,.10); } /* =========================================================================== Statistieken-pagina — lijst met werkwoorden + nauwkeurigheidsbalk. =========================================================================== */ .stat-list{display:flex;flex-direction:column;gap:8px;margin-top:8px;} .stat-row{ display:flex;align-items:center;gap:11px; padding:11px 13px;border-radius:13px; background:var(--card-soft);border:1px solid var(--line); } .stat-row .v{flex:none;min-width:88px;font-weight:700;font-size:15px;} .stat-row .v small{display:block;font-weight:500;color:var(--muted);font-size:11px;} .stat-row .bar{flex:1;height:8px;border-radius:999px;background:var(--inset);overflow:hidden;} .stat-row .bar i{display:block;height:100%;border-radius:999px;} .stat-row .pct{flex:none;min-width:44px;text-align:right;font-weight:800;font-size:14px;} .stat-row .gb{flex:none;min-width:64px;text-align:right;font-size:11px;color:var(--muted);} .stat-empty{ text-align:center;color:var(--muted);font-size:14.5px;line-height:1.6; padding:24px 10px; } /* segment-knoppen (instellingen): hergebruiken .chips/.chip, maar als brede pillen */ .seg{display:flex;gap:10px;margin-top:4px;} .seg .chip{flex:1;justify-content:center;font-size:15px;padding:12px 10px;} /* info-pagina: voordelen-lijst */ .info-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px;} .info-list li{position:relative;padding-left:28px;font-size:14.5px;line-height:1.5;color:var(--text);} .info-list li::before{ content:"✓";position:absolute;left:0;top:0; width:20px;height:20px;border-radius:999px;display:grid;place-items:center; font-size:12px;font-weight:800;color:#04221a;background:var(--green); } .info-list b{color:var(--purple3);} /* =========================================================================== Flashcards (Anki-stijl herhaalsysteem) — practico/flashcards.html =========================================================================== */ /* voortgangsbalk van de ronde */ .fc-top{display:flex;align-items:center;gap:10px;margin:0 2px 12px;} .fc-bar{flex:1;height:8px;border-radius:999px;background:var(--inset); border:1px solid var(--line);overflow:hidden;} .fc-bar i{display:block;height:100%;border-radius:999px;width:0; background:linear-gradient(90deg,var(--purple),var(--magenta));transition:width .25s;} .fc-top .fc-pos{flex:none;font-size:12px;font-weight:700;color:var(--muted); letter-spacing:.4px;min-width:52px;text-align:right;} /* De kaart zelf. Omdraaien is een halve draai: naar de zijkant toe, daar wisselt de inhoud (op 90° is de kaart onzichtbaar, dus je ziet de wissel niet), en dan terug. Zo hoeven voor- en achterkant niet even hoog te zijn. */ .fc-card{min-height:236px;display:flex;flex-direction:column;justify-content:center; text-align:center;cursor:pointer; transform:perspective(900px) rotateY(0deg); transition:transform .17s ease-in-out;} .fc-card.flipping{transform:perspective(900px) rotateY(90deg);} .fc-card.revealed{cursor:default;} @media (prefers-reduced-motion: reduce){ .fc-card{transition:none;} } .fc-q{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.6px; margin:0 0 10px;} .fc-word{font-size:34px;font-weight:800;line-height:1.2;margin:0;overflow-wrap:anywhere;} .fc-type{display:block;color:var(--muted);font-size:12px;text-transform:uppercase; letter-spacing:.6px;margin-top:8px;} /* Geschiedenis van deze kaart: één stip per beurt, oudste links. Gevuld groen = goed, open rood = fout. Staat op de voorkant, zodat je vóór je antwoordt al ziet of dit een woord is waar je vaker over struikelt. */ .fc-hist{display:flex;justify-content:center;align-items:center;flex-wrap:wrap; gap:6px;margin-top:12px;min-height:10px;} .fc-hist[hidden]{display:none;} .fc-hist i{width:10px;height:10px;border-radius:50%;box-sizing:border-box;flex:none;} .fc-hist i.ok{background:var(--green);border:1.5px solid var(--green);} .fc-hist i.no{background:transparent;border:1.5px solid var(--red);} .fc-hist i.more{width:auto;height:auto;border:none;border-radius:0; color:var(--muted);font-size:12px;font-style:normal;line-height:1;} .fc-tap{color:var(--muted);font-size:13px;margin:18px 0 0;} /* Uitleg onder de instellingen; per methode is er een andere en de niet- actieve staat op hidden. */ .fc-note{color:var(--muted);font-size:13px;line-height:1.6;margin:18px 0 0;} .settings [hidden]{display:none;} .fc-tap b{color:var(--purple3);} /* achterkant: scheidingslijn + antwoord */ .fc-sep{border:none;border-top:1px dashed var(--line);margin:18px 0 16px;} .fc-answer{font-size:26px;font-weight:800;color:var(--cyan);line-height:1.25;margin:0; overflow-wrap:anywhere;} /* Illustratie (niet elk woord heeft er een). Staat op de kant waar de betekenis staat: bij NL → ES groot op de voorkant als onderdeel van de vraag, bij ES → NL kleiner op de achterkant bij het antwoord. */ .fc-pic{ display:block;width:100%;max-width:190px;aspect-ratio:1;object-fit:cover; margin:14px auto 0;border-radius:16px;border:1px solid var(--line); background:var(--card-soft); } .fc-pic.big{max-width:240px;margin:2px auto 16px;} .fc-pic[hidden]{display:none;} /* teller per kaart: hoe vaak goed / fout */ .fc-meta{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:16px;} .fc-meta span{ font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px; background:var(--card-soft);border:1px solid var(--line);color:var(--muted); } .fc-meta .g{color:var(--green);border-color:rgba(22,224,163,.35);background:rgba(22,224,163,.10);} .fc-meta .b{color:var(--red);border-color:rgba(255,71,111,.35);background:rgba(255,71,111,.10);} /* twee keuzes: ken ik niet / ken ik wel */ .fc-grades{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px;} .fc-grade{ display:flex;flex-direction:column;align-items:center;gap:4px; padding:16px 8px;border-radius:14px;cursor:pointer; border:1.5px solid var(--line);background:var(--card-soft);color:var(--text); font-family:inherit;transition:border-color .15s, background .15s, transform .1s; } .fc-grade:active{transform:translateY(1px);} .fc-grade b{font-size:16px;font-weight:700;} .fc-grade small{font-size:11.5px;color:var(--muted);font-weight:600;letter-spacing:.2px;} .fc-grade.no{border-color:rgba(255,71,111,.45);background:rgba(255,71,111,.08);} .fc-grade.no b{color:var(--red);} .fc-grade.yes{border-color:rgba(22,224,163,.45);background:rgba(22,224,163,.08);} .fc-grade.yes b{color:var(--green);} /* woordenlijst in de instellingen: per woord goed/fout + resetknop */ .fc-search{margin-top:10px !important;padding:11px 13px !important;font-size:15px !important;} .fc-wcount{color:var(--muted);font-size:12px;margin:12px 2px 0;} .fc-words{ display:flex;flex-direction:column;gap:7px;margin-top:8px; max-height:min(58vh,430px);overflow-y:auto;-webkit-overflow-scrolling:touch; } .fc-row{ display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:12px; background:var(--card-soft);border:1px solid var(--line); } .fc-row .w{flex:1;min-width:0;} .fc-row .w b{display:block;font-size:14.5px;font-weight:700; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .fc-row .w small{display:block;font-size:11.5px;color:var(--muted); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .fc-row .n{flex:none;font-size:12.5px;font-weight:800;min-width:32px;text-align:right;} .fc-row .n.g{color:var(--green);} .fc-row .n.b{color:var(--red);} .fc-row .n.off{color:var(--muted);opacity:.45;} .fc-row .nx{flex:none;font-size:11px;color:var(--muted);min-width:50px;text-align:right;} .fc-rowreset{ flex:none;width:29px;height:29px;border-radius:9px;cursor:pointer;font-size:14px;line-height:1; border:1px solid var(--line);background:transparent;color:var(--muted);font-family:inherit; } .fc-rowreset:hover{color:var(--text);border-color:var(--purple3);} .fc-rowreset:disabled{opacity:.25;cursor:default;} /* eindscherm van een ronde */ .fc-done{text-align:center;} .fc-done .fc-emoji{font-size:46px;line-height:1;} .fc-done h2{font-size:22px;margin:10px 0 4px;} .fc-done p{color:var(--muted);font-size:14px;margin:0 0 4px;line-height:1.6;} .fc-summary{display:flex;gap:10px;margin:18px 0 4px;} .fc-summary div{ flex:1;background:var(--card-soft);border:1px solid var(--line); border-radius:14px;padding:12px 6px; } .fc-summary b{display:block;font-size:22px;font-weight:800;line-height:1.1;} .fc-summary span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;} .fc-summary .ok b{color:var(--green);} .fc-summary .no b{color:var(--red);} .fc-summary .nw b{color:var(--cyan);} /* back-up in de instellingen: tekstvak als uitwijk wanneer downloaden of een bestandskiezer niet werkt (o.a. in de Android-app) */ .backup-text{ width:100%;margin-top:14px;padding:12px 13px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px;line-height:1.5;resize:vertical; border-radius:12px;border:1.5px solid var(--line); background:var(--inset);color:var(--text);outline:none; } .backup-text:focus{border-color:var(--purple3);box-shadow:0 0 0 3px rgba(182,73,255,.25);}