:root{

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

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

  --text-primary:#17364D;
  --text-secondary:#6B7280;

  --brand-primary:#0F6D73;
  --brand-primary-dark:#0A565B;

  --brand-accent:#D9A441;
  --brand-accent-dark:#C88F2B;

  --border-soft:#E9E2D6;

  --success-soft:#EEF6EF;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  --sand:#f7f1e3;

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

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

.skel-on-dark{
  background:rgba(255,255,255,.16);
}

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

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

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

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

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

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

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

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

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

  *{box-sizing:border-box}

body,
#challengeChat.fullscreen{
  background-color:#f7efe1;
  background-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMjAnIGhlaWdodD0nMTIwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjxmZUNvbG9yTWF0cml4IHR5cGU9J3NhdHVyYXRlJyB2YWx1ZXM9JzAnLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTIwJyBoZWlnaHQ9JzEyMCcgZmlsdGVyPSd1cmwoI24pJyBvcGFjaXR5PScwLjMnLz48L3N2Zz4="),
    radial-gradient(circle at 100% 0%, rgba(15,95,86,.55) 0%, rgba(15,95,86,.3) 32%, rgba(15,95,86,0) 66%),
    radial-gradient(circle at 0% 32%, rgba(200,89,58,.5) 0%, rgba(200,89,58,.26) 32%, rgba(200,89,58,0) 66%),
    radial-gradient(circle at 92% 100%, rgba(224,167,46,.55) 0%, rgba(224,167,46,.3) 32%, rgba(224,167,46,0) 66%);
  background-repeat:repeat, no-repeat, no-repeat, no-repeat;
  background-size:120px 120px, 60vmax 60vmax, 60vmax 60vmax, 55vmax 55vmax;
  background-position:0 0, top right, left top, bottom right;
  background-blend-mode:overlay, normal, normal, normal;
  background-attachment:fixed;
}

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

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

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

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

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

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

  border:none;
  background:transparent;

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

  cursor:pointer;
}

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

  stroke-width:3;

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

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


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

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

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

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

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

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

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

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

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

  button,select,input{
    font:inherit;
  }

    .btn{
    border:2px solid transparent;
    border-radius:14px;
    padding:14px 12px;
    background:#418FDE;
    color:#fff;
    font-weight:700;
    cursor:pointer;
    transition:background .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    box-shadow:var(--shadow);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    position:relative;
  }
  .nav .btn.active{
    border-color:#111827;
    box-shadow:0 0 0 2px rgba(17,24,39,.08), 0 2px 8px rgba(0,0,0,.08);
  }

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

  .btn.secondary{
    background:var(--flag-yellow);
    color:#1f2937;
  }

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

  .btn.alt{
    background:var(--flag-red);
    color:#fff;
  }

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

  .btn.white-outline{
    background:#fff;
    color:var(--brand-accent-dark);
    border:2px solid var(--brand-accent);
  }

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

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

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

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

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

  main{
    padding:16px 0 36px;
  }

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

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

  .hidden{
    display:none;
  }

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

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

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

  input:focus,select:focus{
    outline:none;
    border-color:var(--flag-blue);
    box-shadow:0 0 0 3px rgba(65,143,222,.15);
  }

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

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

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

  .week-picker-btn:focus{
    outline:none;
    border-color:var(--flag-blue);
    box-shadow:0 0 0 3px rgba(65,143,222,.15);
  }

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

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

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

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

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

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

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

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

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

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

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

  border-radius:999px;

  padding:8px 14px;

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

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

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


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

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

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

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

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

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

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

  box-shadow:
    0 10px 22px rgba(15,109,115,.08);
}

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

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

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

.word-toggle{
  flex:0 0 auto;

  border:1px solid var(--border-soft);
  background:#fff;
  color:var(--text-secondary);

  border-radius:10px;

  padding:8px 10px;

  cursor:pointer;

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

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

  transition:.2s ease;
}

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

.word-toggle:hover{
  background:#F8F5EF;
  border-color:var(--brand-accent);
  color:var(--brand-primary);
}

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

  background:
    linear-gradient(
      90deg,
      rgba(15,109,115,.06) 0%,
      #fff 18%
    );
}

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

  background:
    linear-gradient(
      90deg,
      rgba(217,164,65,.08) 0%,
      #fff 18%
    );
}

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

  background:
    linear-gradient(
      90deg,
      rgba(233,226,214,.35) 0%,
      #fff 18%
    );
}

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

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

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

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

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

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

  .flash-stack::before,
  .flash-stack::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    border-radius:18px;
    background:linear-gradient(180deg,#ffffff 0%, #f7fbff 100%);
    border:2px solid rgba(31,41,55,.18);
    box-shadow:0 6px 16px rgba(31,41,55,.06);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

.flash-hard-btn{
  background:rgba(217,164,65,.12);
  color:var(--brand-accent-dark);

  border:1px solid rgba(217,164,65,.45);
  border-radius:14px;

  font-weight:700;
  cursor:pointer;

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

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

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

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

.flash-know-btn{
  background:rgba(27,127,95,.12);
  color:#1b7f5f;

  border:1px solid rgba(27,127,95,.45);
  border-radius:14px;

  font-weight:700;
  cursor:pointer;

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

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

.flash-know-btn:hover{
  background:rgba(27,127,95,.20);
  border-color:#1b7f5f;
}

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

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

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

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

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

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

.flash-btn-primary{
  background:var(--brand-primary);
  border:1px solid var(--brand-primary);
  color:#fff;
  box-shadow:0 8px 20px rgba(15,109,115,.28);
}

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

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

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

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

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

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

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

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

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

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

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

.flash-progress-bar{
  height:10px;
  background:#E9E2D6;
  border-radius:999px;
  overflow:hidden;
}

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

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

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

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

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

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

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

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

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

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

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

  border-radius:12px;

  padding:10px 14px;

  font-weight:700;

  cursor:pointer;

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

.flash-settings-btn:hover{
  background:#F8F5EF;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  code.note{
    display:inline-block;
    background:#f3f4f6;
    padding:2px 6px;
    border-radius:6px;
  }

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

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

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

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

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

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

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

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

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

  padding:8px 12px;
  border-radius:10px;
  background:var(--brand-accent-dark);
  color:#fff;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  box-shadow:var(--shadow-soft);
}

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

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

.trainer-reference-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,59,68,.4);
  display:flex;
  align-items:flex-end;
  z-index:1000;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.trainer-difficulty .btn:hover{
  background:#f5f7fa;
}

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

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

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

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

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

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

.trainer-card{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--bg-card);
  border:1px solid var(--border-soft);
  border-radius:18px;
  padding:14px;
  margin-bottom:10px;
  box-shadow:var(--shadow-soft);
  cursor:pointer;
  transition:transform .12s ease;
}

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

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

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

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

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

.trainer-card-icon.accent{
  background:rgba(217,164,65,.16);
  color:var(--brand-accent-dark);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.profile-menu-row{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--bg-card);
  border:1px solid var(--border-soft);
  border-radius:18px;
  padding:14px;
  margin-bottom:10px;
  box-shadow:var(--shadow-soft);
  cursor:pointer;
  transition:transform .12s ease;
}

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

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

.profile-menu-row-icon.accent{
  background:rgba(217,164,65,.16);
  color:var(--brand-accent-dark);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.trainer-typed-input:focus{
  outline:none;
  border-color:var(--brand-primary);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  background:rgba(255,255,255,.92);
  border-top:none;
  padding:10px 0;
  box-shadow:0 -2px 14px rgba(0,0,0,.15);

  z-index:999;

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

body{
  padding-bottom:90px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	.stats{
  gap:6px;
}

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

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

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

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

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

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

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

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

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

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

    .flash-example{
      padding:12px;
    }

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

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

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

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

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

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

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

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

.lesson-card{
  background:#FCFAF7;
  border:1px solid rgba(15,109,115,.08);
  border-radius:20px;
  padding:18px;
  box-shadow:0 4px 12px rgba(15,109,115,.05);
  text-align:left;
  cursor:pointer;
  transition:all .2s ease;
}

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

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

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

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

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

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

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

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

/* Uitgelichte Akademia-kaart: eigen kolom-layout i.p.v. de rij-vorm van
   .practice-card, want deze kaart heeft naast de titel/status ook een
   voortgangsbalk en een losse CTA-knop (zie renderPracticeLeadCard). */
.practice-card-lead{
  flex-direction:column;
  align-items:stretch;
  gap:0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.practice-rec-icon{
  width:46px;
  height:46px;
  border-radius:14px;
  background:rgba(255,255,255,.7);
  color:var(--brand-accent-dark);
}

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

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

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

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

@media (min-width:768px){

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

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

}

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

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

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

.hero-card{
  background:#0F6D73;
  color:#fff;

  padding:18px;

  border-radius:22px;

  margin-bottom:16px;

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

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

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

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

  border-radius:14px;

  background:rgba(255,255,255,.15);

  font-size:1.2rem;
}

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

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

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

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

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

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

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

  height:8px;

  background:
    rgba(255,255,255,.2);

  border-radius:999px;

  overflow:hidden;
}

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

  background:#D9A441;
}

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

.hero-btn{
  width:100%;

  border:none;

  border-radius:14px;

  padding:12px;

  background:#D9A441;

  color:#fff;

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

  cursor:pointer;

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

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

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

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

.week-chip{

  min-width:42px;

  height:42px;

  padding:0 12px;

  border-radius:10px;

  display:flex;

  align-items:center;

  justify-content:center;

	border:1px solid var(--border-soft);
 
	background:#FCFAF7;

  font-size:.9rem;

  font-weight:700;

  cursor:pointer;
}

.week-chip:hover{
  background:#E3EDF8;
}

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

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

  color:#fff;
}

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

  gap:12px;

  padding:0;

  border:none;

  border-radius:0;

  background:transparent;

  box-shadow:none;

  margin-bottom:20px;
}

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

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

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

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

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

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

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

  border-radius:10px;
  border:1px solid var(--border-soft);
  background:#FCFAF7;

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

  cursor:pointer;
}

.source-toggle-btn:hover{
  background:#E3EDF8;
}

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

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

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

  border:none;
  border-radius:12px;

  background:#0f5f56;
  color:#fff;

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

  cursor:pointer;
  box-shadow:0 2px 8px rgba(15,95,86,.35);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.bottom-nav button.active{
  color:#0f5f56;
  background:#eaf2f0;
}

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

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

@media (min-width: 900px){

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

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

}

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

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

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

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

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

.week-day-dot.active{
  background:#4CAF50;
  box-shadow:
    0 0 0 3px rgba(76,175,80,.20);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  padding:4px 10px;

  border-radius:999px;

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

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

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

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

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

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

  border-radius:999px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.mastery-seg{
  height:100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

.word-type{
  color:var(--text-secondary);
  font-size:.8rem;
	color:#8A8A8A;
  margin-bottom:12px;
}

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

  padding:4px 10px;

  border-radius:999px;

  background:#F8F5EF;

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

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

  padding:12px;

  background:rgba(248,245,239,.6);

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

  border-radius:12px;
}

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

  margin-bottom:6px;

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

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

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

#woordenlijst #search{
  margin-bottom:16px;
  background:#FCFAF7;
	border:1px solid #E7DED0;
}

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

  margin-bottom:18px;
}

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

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

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

.variant-tag{
  font-size:10px;
  font-weight:700;
  padding:2px 6px;
  border-radius:999px;
  background:#e5e7eb;
  color:#374151;
}

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

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

  color:#6b7280;
  font-size:14px;
  font-weight:500;
}

.quiz-variant-warning{
  margin-top:12px;
  margin-bottom:8px;
  padding:10px;
  border-radius:12px;
  background:#fff3cd;
  color:#7c5a00;
  font-weight:600;
}

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

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

.word-of-day .word{
  color:#0F6D73;
  font-size:26px;
  font-weight:800;
}

.word-of-day .meta{
  margin-top:4px;
  color:#315261;
}

.word-of-day-panel{
  background:#eef8fb;
  border:none;
}

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

  gap:20px;

  margin-top:8px;

  padding-top:12px;
}

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

.setting-content{
  flex:1;
}

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

.setting-description{
  font-size:14px;
  line-height:1.4;
  color:#475569;
}

.setting-example{
  margin-top:6px;
  font-size:13px;
  color:#0F6D73;
  font-weight:600;
}

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

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

.language-toggle{
  display:flex;

  background:#fff;

  border-radius:999px;

  padding:3px;

  gap:0;

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

.language-toggle button{

  border:none;
  background:transparent;

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

  border-radius:999px;

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

  color:#9a8f80;

  cursor:pointer;

  transition:all .2s ease;

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

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

.language-toggle button.active{

  background:#0f5f56;

  color:#fff;

  box-shadow:none;
}

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

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

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

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

  background:
    radial-gradient(
      ellipse 90% 80% at 50% 50%,
      #CDEFEA 0%,
      #8FD3D9 38%,
      #4FA9C8 68%,
      #2C7FB0 100%
    );

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

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

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

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

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

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

.island-map-wave-line-strong{
  fill:none;
  stroke:#fff;
  stroke-width:2;
  stroke-linecap:round;
  opacity:.55;
}

.island-map-wave-line-soft{
  fill:none;
  stroke:#fff;
  stroke-width:1.5;
  stroke-linecap:round;
  opacity:.35;
}

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

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

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

  background:rgba(255,255,255,.94);
  color:var(--text-primary);
  font-size:18px;
  font-weight:700;
  line-height:1;

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

.island-map-zoom-btn:active{
  background:#fff;
  transform:scale(.94);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  background:var(--success);
  color:#fff;
  font-size:8px;
  font-weight:700;
  border:1.5px solid #fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}

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

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

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

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

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

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

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

.island-map-label-bottom::after{
  top:-6px;
  left:50%;
  transform:translateX(-50%);
  border-bottom-color:rgba(255,255,255,.94);
}

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

.island-map-label-top::after{
  bottom:-6px;
  left:50%;
  transform:translateX(-50%);
  border-top-color:rgba(255,255,255,.94);
}

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

.island-map-label-right::after{
  left:-6px;
  top:50%;
  transform:translateY(-50%);
  border-right-color:rgba(255,255,255,.94);
}

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

.island-map-label-left::after{
  right:-6px;
  top:50%;
  transform:translateY(-50%);
  border-left-color:rgba(255,255,255,.94);
}

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

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

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

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

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

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

.setting-block{
  background:#f8fafb;
  border-radius:16px;
  padding:16px;
  margin-bottom:24px;
}


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

.setting-divider{
  height:1px;
  background:#e5e7eb;
  margin:18px 0;
}

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

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

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

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

.btn.account-btn-google{
  width:100%;
  background:#fff;
  color:#3c4043;
  border:1px solid #dadce0;
  margin-bottom:14px;
}

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

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

.btn.account-btn-primary{
  width:100%;
  background:var(--brand-primary);
  color:#fff;
  border-color:var(--brand-primary);
  box-shadow:0 8px 20px rgba(15,109,115,.28);
}

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

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

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

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

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

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

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

#accountFormMessage:empty{
  margin:0;
}

#accountFormMessage{
  margin-top:8px;
}

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

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

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

.btn.account-btn-danger:hover{
  background:var(--danger);
  color:#fff;
}

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

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

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

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

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

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

  padding:32px 28px;

  background:linear-gradient(
    180deg,
    var(--text-primary) 0%,
    var(--brand-primary-dark) 55%,
    var(--brand-primary) 100%
  );
}

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

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

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

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

.onboarding-title{
  font-weight:800;
  font-size:1.35rem;
  color:#fff;
}

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

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

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

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

.btn.onboarding-btn-secondary{
  width:100%;
  max-width:320px;
  background:rgba(255,255,255,.12);
  color:#fff;
  border:2px solid rgba(255,255,255,.4);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.onboarding-way-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:36px;
  height:36px;
  border-radius:11px;
  background:rgba(255,255,255,.15);
  color:#fff;
}

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

.onboarding-way-name{
  font-weight:800;
  font-size:.95rem;
  color:#fff;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  width:28px;
  height:28px;

  border:none;
  background:rgba(255,255,255,.6);
  border-radius:999px;

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

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

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

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

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

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

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

.slider{
  position:absolute;
  inset:0;

  background:#d7dde1;

  border-radius:999px;

  transition:.25s;
}

.slider:before{
  content:'';

  position:absolute;

  width:24px;
  height:24px;

  left:3px;
  top:3px;

  background:white;

  border-radius:50%;

  transition:.25s;
}

.switch input:checked + .slider{
  background:#0F6D73;
}

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

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

  padding:16px 0;
}

.language-option + .language-option{
  border-top:1px solid #e5e7eb;
}

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

.language-description{
  font-size:13px;
  color:#6B7280;

  margin-top:3px;
}

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

  padding:18px 0;
}

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

.audio-btn{
  width:36px;
  height:36px;

  border:none;
  border-radius:50%;

  background:#EEF8FB;
  color:var(--brand-primary);

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

  cursor:pointer;

  transition:
    transform .15s ease,
    background .15s ease;
}

.audio-btn:hover{
  background:#DFF1F5;
  transform:scale(1.05);
}

.audio-btn svg{
  width:18px;
  height:18px;
}

.flash-audio-row{
  display:flex;
  justify-content:center;
  margin-bottom:16px;
}

.flash-audio-btn{
  width:42px;
  height:42px;
}

.quiz-listen-prompt{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;

  padding:8px 0 4px;
}

.quiz-listen-btn{
  width:52px;
  height:52px;
}

.quiz-listen-btn svg{
  width:24px;
  height:24px;
}

.word-of-day{
  position:relative;
}

.word-of-day{
  position:relative;
}

.word-of-day-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.word-of-day-header .word{
  min-width:0;
  overflow-wrap:break-word;
}

.word-of-day-header .audio-btn{
  flex-shrink:0;
  margin-top:2px;
}

.flash-card-audio{
  position:absolute;
  top:14px;
  right:14px;
  z-index:20;
}

.flash-card-audio-slow{
  position:absolute;
  top:14px;
  right:58px;
  z-index:20;
}

.word-actions{
  display:flex;
  gap:8px;

  align-items:center;
  flex-shrink:0;
}

.home-cards-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;

  margin-bottom:16px;
}

/* Compacte Akademia-rij (features/home-stats.js renderHomeAkademiaRow) —
   hergebruikt .practice-card zelf (geen .panel-omhulsel), dus de
   tussenruimte met de tegels erboven/eronder komt van hier i.p.v. van de
   normale .panel-marge. */
#homeAkademiaCard:not(:empty){
  margin-bottom:12px;
}

.saying-panel{
  background:#ffffff;
}

#sayingOfDay{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.saying-text{
  font-size:1rem;
  font-weight:800;
  color:var(--brand-primary);
}

.saying-translation{
  color:var(--text-secondary);
  font-style:italic;
}

@media (max-width:720px){

  .home-cards-grid{
    grid-template-columns:1fr 1fr;
  }

  .saying-text{
    font-size:.92rem;
  }

}

#homeScreen .panel{
  padding:14px;
  border-radius:18px;
  margin-bottom:12px;
}

.difficult-actions{
  display:flex;
  gap:10px;
  margin-top:12px;
}

.difficult-actions button{
  flex:1;
  border:none;
  border-radius:14px;
  padding:11px 10px;

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

  cursor:pointer;

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

.difficult-actions button svg{
  width:var(--icon-sm-size);
  height:var(--icon-sm-size);
  stroke-width:var(--icon-sm-stroke);
  flex-shrink:0;
}

.daily-set-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;

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

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

/* .hidden{display:none} en deze regel hebben gelijke specificiteit -
   zonder deze override wint display:flex altijd door bestandsvolgorde,
   waardoor de banner nooit echt verborgen is (leeg goud balkje bleef
   zichtbaar op flashcards/quiz zolang de dagset niet voltooid was). */
.daily-set-banner.hidden{
  display:none;
}

.daily-set-banner-text{
  font-size:.85rem;
  font-weight:600;
  color:var(--brand-accent-dark);
  white-space:nowrap;
}

.daily-set-banner-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}

.daily-set-banner .btn{
  flex-shrink:0;
}

/* Compacte chips i.p.v. de standaard hoge .btn-padding: dit balkje moet
   klein blijven zodat de vaste actierij erboven (Vorige/Omdraaien/...)
   niet buiten beeld duwt op mobiel. */
.daily-set-banner-btn{
  padding:8px 12px;
  font-size:.8rem;
  gap:6px;
  border-radius:999px;
}

/* Zelfde goud als de Bonusronde-knop op de Home-tegel (.hero-btn): één
   herkenbare kleur voor dezelfde actie, ongeacht waar hij vandaan komt. */
.daily-set-banner-btn.btn:not(.white-outline){
  background:var(--brand-accent);
}

.daily-set-banner-btn.btn:not(.white-outline):hover{
  background:var(--brand-accent-dark);
}

.daily-set-banner-btn svg{
  width:16px;
  height:16px;
}

.btn-know{
  background:#1b7f5f;
  color:white;
}

.btn-hard{
  background:#e0a83a;
  color:white;
}

.difficult-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:8px;
}

.difficult-word{
  font-size:1.4rem;
  font-weight:800;
  color:var(--brand-primary);
}

.difficult-counter{
  flex-shrink:0;

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

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

#difficultWordsPanel{
  background:#fff4e8;
  border:1px solid #f3dcc0;
}

.daily-words-panel{
  background:var(--brand-accent-soft);
  border:1px solid var(--brand-accent);
}

.daily-words-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:2px;
}

.daily-words-eyebrow{
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--brand-accent-dark);
}

.daily-words-count{
  font-size:.8rem;
  font-weight:800;
  color:var(--brand-accent-dark);
}

.daily-words-title{
  font-size:.98rem;
  font-weight:700;
  color:var(--text-primary);
}

.daily-words-progress-track{
  width:100%;
  height:7px;
  border-radius:999px;
  background:rgba(255,255,255,.6);
  overflow:hidden;

  margin:10px 0 12px;
}

.daily-words-progress{
  margin-bottom:14px;
}

.daily-words-progress-label{
  display:flex;
  justify-content:space-between;
  font-size:.8rem;
  font-weight:700;
  color:var(--brand-accent-dark);
  margin-bottom:5px;
}

.daily-words-progress .daily-words-progress-track{
  margin-top:0;
}

.daily-words-progress-fill{
  height:100%;
  border-radius:999px;
  background:var(--brand-accent-dark);
}

.daily-words-sub{
  font-size:.8rem;
  font-weight:600;
  color:var(--text-secondary);
  margin-top:2px;
}

.daily-words-mix{
  font-size:.78rem;
  font-weight:700;
  color:var(--brand-accent-dark);
  margin-top:2px;
}

.daily-words-weekline{
  font-size:.78rem;
  font-weight:700;
  color:var(--text-secondary);
  margin-top:10px;
}

.daily-words-weektrack{
  height:5px;
  margin:6px 0 12px;
}

.daily-words-week-dots .week-day-label{
  color:var(--text-secondary);
}

.daily-words-week-dots .week-day-dot:not(.active):not(.today){
  background:var(--border-soft);
  border:1.5px solid rgba(23,54,77,.15);
}

.daily-words-week-dots .week-day-dot.today{
  background:var(--brand-accent-dark);
  border-color:var(--brand-accent-dark);
  box-shadow:0 0 0 3px rgba(192,141,38,.25);
}

.daily-words-celebrate{
  color:var(--brand-primary-dark);
}

.daily-words-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:4px;
}

.hero-btn.secondary{
  background:transparent;
  border:1px solid var(--brand-accent);
  color:var(--brand-accent-dark);
}

.daily-words-gear{
  flex-shrink:0;

  width:30px;
  height:30px;
  border-radius:50%;

  border:1px solid var(--brand-accent);
  background:rgba(255,255,255,.5);
  color:var(--brand-accent-dark);

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

.daily-words-gear:hover{
  background:rgba(255,255,255,.85);
}

.daily-words-gear svg{
  width:16px;
  height:16px;
}

.filter-label-value{
  margin-left:6px;
  font-weight:700;
  color:var(--text-primary);
}

.daily-review-options .source-toggle-btn{
  font-size:.82rem;
  padding:0 6px;
}

.daily-mix-explainer{
  font-size:.8rem;
  color:var(--text-secondary);
  margin-top:8px;
  line-height:1.4;
}

#challengeChat{
  display:flex;
  flex-direction:column;
  min-height:calc(100vh - 230px);
  padding-bottom:260px;
}

#challengeChat.fullscreen{
  position:fixed;
  top:64px;
  left:0;
  right:0;
  bottom:calc(72px + env(safe-area-inset-bottom, 0px));
  min-height:0;
  padding:0 16px;
  z-index:500;
}

#challengeChat.fullscreen #challengeMessages{
  flex:1;
  overflow-y:auto;
  padding-top:16px;
}

#challengeChat.fullscreen #challengeFooter{
  flex-shrink:0;
  padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
}


/* ===== STORY MODE CHAT ===== */

.chat-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}

.chat-avatar{
  width:42px;
  height:42px;
  flex-shrink:0;

  border-radius:50%;

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

  font-size:20px;
}

.chat-avatar.customs{
  background:var(--avatar-customs);
}

.chat-avatar.traveler{
  background:var(--avatar-traveler);
}

.chat-avatar.taxi{
  background:var(--avatar-taxi);
}

.chat-avatar.hotel{
  background:var(--avatar-hotel);
}

.chat-avatar.ana{
  background:var(--avatar-ana);
}

/* Buurtbewoners, winkeliers, etc */
.chat-avatar.neighbor{
  background:var(--avatar-neighbor);
}

/* Lokale inwoners */
.chat-avatar.local{
  background:var(--avatar-traveler);
}

.chat-bubble{
  display:inline-block;
  line-height:1.45;

  max-width:320px;

  padding:14px;

  border-radius:18px;

  background:white;

  border:1px solid #E6E6E6;
}

.chat-bubble.local{
  background:white;
}

.chat-bubble.ana{
  background:#FFF8E6;
  border:1px solid #D9A441;
}

.chat-name{
  font-size:11px;
  font-weight:700;
  margin-bottom:2px;
  opacity:.9;
}

.chat-name.local{
  color:#418FDE;
}

.chat-name.ana{
  color:#B98100;
}

.chat-name.neighbor{
  color:#DC2626;
}

.chat-name.local{
  color:#16A34A;
}

.chat-user{
  margin-left:50px;
  background:#4F83FF;
  color:white;
}

.translation-link{

  margin-top:8px;

  font-size:12px;

  color:#6B7280;

  border-top:1px solid #ECECEC;

  padding-top:6px;

  cursor:pointer;

  user-select:none;

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

}

.translation-link svg{
  width:var(--icon-xs-size);
  height:var(--icon-xs-size);
  stroke-width:var(--icon-xs-stroke);
  flex-shrink:0;
}

.chat-speak-btn svg{
  width:var(--icon-xs-size);
  height:var(--icon-xs-size);
  stroke-width:var(--icon-xs-stroke);
  flex-shrink:0;
  color:inherit;
}

/* Reis-scherm (features/journey.js): gedeelde groottes voor de decoratieve
   locatie-/souvenir-emoji, i.p.v. losse inline font-size per plek. De emoji
   zelf blijven ongewijzigd — dit is alleen sizing-consolidatie. */
.journey-icon-sm{
  font-size:28px;
}

.journey-icon-souvenir-sm{
  font-size:30px;
}

.journey-icon-souvenir-lg{
  font-size:34px;
}

.journey-icon-lg{
  font-size:40px;
}

.journey-lesson-step svg{
  width:var(--icon-sm-size);
  height:var(--icon-sm-size);
  stroke-width:3;
}

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

.story-action-bar{
  margin-top:12px;
  margin-bottom:12px;
}

.story-action-btn{
  width:100%;
  border-radius:28px;
  min-height:56px;
  background:#FFF8E6;
  color:#B98100;
  border:2px solid #D9A441;
  box-shadow:none;
}

.story-action-btn:hover{
  background:#FCEFC5;
}

.story-primary-action{
  width:100%;
}

.balloon-game{
  flex-direction:column;
  overflow:hidden;
  background:linear-gradient(
    180deg,
    var(--text-primary) 0%,
    var(--brand-primary-dark) 55%,
    var(--brand-primary) 100%
  );
}

.balloon-game:not(.hidden){
  display:flex;
  position:fixed;
  top:64px;
  left:0;
  right:0;
  bottom:calc(72px + env(safe-area-inset-bottom, 0px));
  z-index:500;
  border-radius:0;
  box-shadow:none;
}

.mini-game-intro{
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:12px;
  padding:28px;
  background:linear-gradient(
    180deg,
    var(--text-primary) 0%,
    var(--brand-primary-dark) 55%,
    var(--brand-primary) 100%
  );
}

.mini-game-intro:not(.hidden){
  display:flex;
  position:fixed;
  top:64px;
  left:0;
  right:0;
  bottom:calc(72px + env(safe-area-inset-bottom, 0px));
  z-index:700;
}

.mini-game-intro-title{
  font-weight:800;
  font-size:24px;
  color:var(--bg-app);
}

.mini-game-intro-sub{
  font-size:14px;
  color:var(--bg-app);
  opacity:.7;
  margin-bottom:10px;
}

.mini-game-level-btn{
  width:100%;
  max-width:280px;
  background:rgba(255,255,255,.1);
  color:var(--bg-app);
  border:2px solid rgba(255,255,255,.25);
  box-shadow:none;
}

.mini-game-countdown-number{
  font-weight:800;
  font-size:64px;
  color:var(--brand-accent);
}

.balloon-hud{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:14px 16px 6px;
  color:var(--bg-app);
  font-weight:700;
  font-size:13px;
}

.balloon-lives{
  display:flex;
  gap:2px;
  font-size:16px;
}

.balloon-life{
  transition:opacity .3s, transform .3s;
}
.balloon-life.lost{
  opacity:.25;
  transform:scale(.8);
}

.balloon-score{
  background:rgba(255,255,255,.1);
  padding:4px 12px;
  border-radius:20px;
  color:var(--brand-accent);
  white-space:nowrap;
}

.balloon-prompt-wrap{ text-align:center; padding:4px 16px 14px; }
.balloon-prompt-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--bg-app);
  opacity:.6;
}
.balloon-prompt-word{
  font-weight:800;
  font-size:28px;
  color:var(--bg-app);
}

.balloon-sky{
  position:relative;
  flex:1;
  min-height:260px;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 20% 15%, rgba(217,164,65,.18), transparent 55%),
    radial-gradient(ellipse at 80% 75%, rgba(15,109,115,.18), transparent 50%);
}

.balloon-plane{
  position:absolute;
  bottom:-70px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 14px 8px 10px;
  background:var(--bg-app);
  border-radius:999px;
  box-shadow:0 6px 16px rgba(11,68,72,.35);
  cursor:pointer;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.balloon-plane-emoji{ font-size:20px; display:inline-block; transform:rotate(-45deg); }
.balloon-plane-word{ font-weight:700; font-size:15px; color:var(--text-primary); }

.balloon-plane.flying{
  animation-name:balloon-fly-up;
  animation-timing-function:linear;
  animation-fill-mode:forwards;
}
@keyframes balloon-fly-up{
  from{ transform:translateY(0); }
  to{ transform:translateY(calc(-1 * var(--balloon-fly-distance, 700px))); }
}

.balloon-plane.correct-pop{
  animation:balloon-pop-good .45s ease forwards !important;
  pointer-events:none;
}
.balloon-plane.wrong-pop{
  animation:balloon-pop-bad .4s ease forwards !important;
  pointer-events:none;
}
@keyframes balloon-pop-good{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.35) rotate(-6deg); background:var(--brand-accent); }
  100%{ transform:scale(0); opacity:0; }
}
@keyframes balloon-pop-bad{
  0%{ transform:scale(1); }
  30%{ transform:scale(.9) rotate(4deg); background:var(--bad); }
  100%{ transform:scale(.4); opacity:0; }
}

.balloon-link-btn{
  display:block;
  margin:0 auto 14px;
  background:none;
  border:none;
  color:var(--bg-app);
  opacity:.7;
  font-size:13px;
  font-weight:600;
  text-decoration:underline;
  cursor:pointer;
}

.balloon-end-screen{
  position:fixed;
  top:64px;
  left:0;
  right:0;
  bottom:calc(72px + env(safe-area-inset-bottom, 0px));
  z-index:600;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:28px;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s;
  background:linear-gradient(180deg, rgba(23,54,77,.97), rgba(10,86,91,.97));
}
.balloon-end-screen.show{ opacity:1; pointer-events:all; }

.balloon-end-emoji{ font-size:44px; margin-bottom:6px; }
.balloon-end-title{ font-weight:800; font-size:22px; color:var(--bg-app); margin-bottom:6px; }
.balloon-end-reason{
  font-weight:700;
  font-size:14px;
  color:var(--flag-yellow);
  margin-bottom:6px;
}
.balloon-end-reason:empty{ display:none; }
.balloon-end-score{ font-weight:700; color:var(--brand-accent); margin-bottom:12px; }
.balloon-end-note{
  font-size:13px;
  color:var(--bg-app);
  opacity:.8;
  max-width:280px;
  line-height:1.4;
}

.buggy-game{
  background:linear-gradient(
    180deg,
    #F7DFAE 0%,
    #F0C878 45%,
    #D9A441 100%
  );
}

.buggy-game .balloon-prompt-label,
.buggy-game .balloon-prompt-word,
.buggy-game .balloon-progress,
.buggy-game .balloon-link-btn{
  color:var(--text-primary);
}

.buggy-game .balloon-score{
  color:var(--brand-primary-dark);
}

.buggy-timer-bar{
  height:8px;
  margin:0 16px 6px;
  border-radius:999px;
  background:rgba(23,54,77,.15);
  overflow:hidden;
}
.buggy-timer-fill{
  height:100%;
  width:100%;
  background:var(--brand-primary-dark);
  border-radius:999px;
}

.buggy-road{
  position:relative;
  flex:1;
  min-height:260px;
  overflow:hidden;
  background:linear-gradient(
    180deg,
    #8ECAE6 0%,
    #BFE3C7 20%,
    #E9D8A6 42%,
    #E0B96A 68%,
    #D9A441 100%
  );
}

.buggy-decor{
  position:absolute;
  font-size:34px;
  opacity:.65;
  pointer-events:none;
  user-select:none;
  transform:translateX(-50%);
  z-index:1;
}
.buggy-decor-small{ font-size:24px; opacity:.5; }
.buggy-decor-large{ font-size:46px; opacity:.75; }

.buggy-lanes{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
  padding:20px 12px 0;
}

.buggy-signpost{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.buggy-signpost-pole{
  width:6px;
  height:20px;
  background:#8B5A2B;
  border-radius:0 0 2px 2px;
  box-shadow:inset -2px 0 2px rgba(0,0,0,.2);
}

.buggy-sign{
  min-height:60px;
  padding:10px 6px;
  border:none;
  border-bottom:4px solid #8B5A2B;
  border-radius:10px;
  background:var(--bg-app);
  color:var(--text-primary);
  font-weight:700;
  font-size:13px;
  line-height:1.25;
  box-shadow:0 6px 14px rgba(23,54,77,.25);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  word-break:break-word;
  transition:transform .2s, opacity .2s;
}
.buggy-sign:active{ transform:scale(.96); }

.buggy-sign.buggy-sign-passed{
  animation:buggy-sign-pass .5s ease forwards;
}
@keyframes buggy-sign-pass{
  0%{ transform:scale(1) translateY(0); opacity:1; }
  60%{ transform:scale(1.15) translateY(-6px); opacity:1; }
  100%{ transform:scale(.8) translateY(-16px); opacity:0; }
}

.buggy-vehicle{
  position:absolute;
  font-size:60px;
  line-height:1;
  z-index:3;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.3));
}

.buggy-vehicle.buggy-crash{
  animation:buggy-crash-shake .4s ease;
}
@keyframes buggy-crash-shake{
  0%{ transform:translateX(0); }
  25%{ transform:translateX(-8px) rotate(-5deg); }
  50%{ transform:translateX(8px) rotate(5deg); }
  75%{ transform:translateX(-5px) rotate(-3deg); }
  100%{ transform:translateX(0); }
}

.buggy-confetti-piece{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:2px;
  z-index:4;
  animation:buggy-confetti-fall .9s ease forwards;
  pointer-events:none;
}
@keyframes buggy-confetti-fall{
  0%{ transform:translateY(0) rotate(0deg); opacity:1; }
  100%{ transform:translateY(50px) rotate(200deg); opacity:0; }
}

/* ===== Cascabel Snake ===== */

.snake-wrap{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:0;
  padding:6px 12px 0;
}

.snake-board{
  flex:1;
  min-height:0;
  min-width:0;
  width:100%;
  max-width:480px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(var(--snake-cols), 1fr);
  grid-template-rows:repeat(var(--snake-rows), 1fr);
  background:var(--bg-app);
  border:4px solid var(--text-primary);
  border-radius:8px;
  box-sizing:border-box;
  /* Voorkomt dat de browser een vinger-swipe hier oppakt als paginascroll
     i.p.v. als richting-input. */
  touch-action:none;
}

.snake-cell{
  position:relative;
  min-width:0;
  min-height:0;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
}

.snake-head,
.snake-segment{
  width:78%;
  height:78%;
  border-radius:50%;
  box-sizing:border-box;
}

.snake-head{
  background:var(--text-primary);
  border:2px solid var(--brand-primary-dark);
  z-index:2;
}

.snake-segment{
  background:var(--brand-primary);
  opacity:.85;
}

/* Een rechthoek i.p.v. cirkel gebruikt de hele celbreedte voor tekst (een
   cirkel snijdt de hoeken weg, precies waar langere woorden de ruimte
   nodig hebben). overflow-wrap zorgt dat ook een enkel lang woord zonder
   natuurlijke spatie (bijv. "problema") desnoods midden in het woord mag
   afbreken i.p.v. eraf te lopen of onleesbaar klein te worden. */
.snake-food-label{
  display:flex;
  align-items:center;
  justify-content:center;
  width:96%;
  height:96%;
  padding:1px 2px;
  background:var(--brand-accent);
  color:var(--text-primary);
  border:2px solid var(--brand-accent-dark);
  border-radius:8px;
  font-weight:700;
  font-size:clamp(6.5px, 2.3vw, 10px);
  line-height:1.05;
  text-align:center;
  overflow:hidden;
  overflow-wrap:break-word;
  word-break:break-word;
  hyphens:auto;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}

.snake-food-cell.snake-food-correct .snake-food-label{
  animation:balloon-pop-good .45s ease forwards;
}
.snake-food-cell.snake-food-wrong .snake-food-label{
  animation:balloon-pop-bad .4s ease forwards;
}

.snake-dpad{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:8px 0 4px;
}

.snake-dpad-row{
  display:flex;
  gap:34px;
}

.snake-dpad-btn{
  width:48px;
  height:48px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.12);
  font-size:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.snake-dpad-btn:active{
  background:rgba(255,255,255,.25);
  transform:scale(.94);
}

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