: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;

  /* 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);
}

  *{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;
  }
  .actions-quiz{
    grid-template-columns:repeat(3,1fr);
  }
  .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;
  }

  /* Quiz-scherm gebruikt verder nog de gedeelde .btn/.stat-basisklasses (blauw/
     geel vlagpalet, elders nog in gebruik) - hier lokaal getild naar het
     huidige teal/goud-systeem zonder die basisklasses zelf aan te passen. */
  #quiz .actions-quiz .btn:not(.secondary):not(.white-outline){
    background:var(--brand-primary);
    border-color:var(--brand-primary);
    box-shadow:0 8px 20px rgba(15,109,115,.28);
  }

  #quiz .actions-quiz .btn:not(.secondary):not(.white-outline):hover{
    background:var(--brand-primary-dark);
    border-color:var(--brand-primary-dark);
  }

  #quiz .actions-quiz .btn.secondary{
    background:#fff;
    border-color:var(--brand-accent);
    color:var(--brand-accent-dark);
    box-shadow:var(--shadow-soft);
  }

  #quiz .actions-quiz .btn.secondary:hover{
    background:var(--brand-accent-soft);
  }

  #quizScoreGood,
  #quizScoreBad,
  #quizQueueInfo{
    border-radius:999px;
    font-weight:700;
  }

  #quizScoreGood{
    background:var(--success-soft);
    border-color:var(--success);
    color:var(--success);
  }

  #quizScoreBad{
    background:var(--danger-soft);
    border-color:var(--danger);
    color:var(--danger);
  }

  #quizQueueInfo{
    background:var(--brand-accent-soft);
    border-color:var(--brand-accent);
    color:var(--brand-accent-dark);
  }

  .feedback.good{
    color:var(--success);
    font-weight:700;
  }

  .feedback.bad{
    color:var(--danger);
    font-weight:700;
  }
  .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{
  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;
}

.trainer-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{
  width:14px;
  height:14px;
  stroke-width:2.4;
  flex-shrink:0;
}

.trainer-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,
   .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,
.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;
}

.profile-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;
}

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

.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;
}

.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);
    }
    .actions-quiz{
      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;
}

.sync-merge-toast{
  position:fixed;
  left:50%;
  bottom:90px;
  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;
}

.sync-merge-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;
    }
    .actions-quiz{
      grid-template-columns:repeat(3,1fr);
    }
    .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;
}

}
  
/* ===== PRACTICE SCREEN V2 ===== */

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

.practice-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;
}

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

.practice-icon{
  width:56px;
  height:56px;

  border-radius:16px;

  background:rgba(15,109,115,.08);
}

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

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

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

@media (min-width:768px){

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

}

/* ===== 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;
}

.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;
}

.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;
}

.source-toggle-btn{
  flex:1;
  min-height:42px;
  padding:0 12px;

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

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

  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;
}

#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-wrap{
  background:none;

  padding:0;

  margin:0 0 14px;
}

.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 h2{
  margin:0;
  font-size:1.2rem;
}

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

.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,
#progressScreen .stat{
  display:flex;
  align-items:center;
  gap:8px;
}

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

/* Was nog de oude vlakblauwe .stat-basisstyling (var(--blue-soft)) - hier
   getild naar het huidige teal-systeem, net als de stat-pilletjes op de
   quizpagina. */
#progressScreen .stat{
  background:rgba(15,109,115,.07);
  border-color:rgba(15,109,115,.22);
  color:var(--text-primary);
  border-radius:999px;
  font-weight:600;
}

#progressScreen .stat svg{
  color:var(--brand-primary);
}

.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);
}

.island-map-dot{
  position:absolute;
  left:0;
  top:0;
  transform:translate(-50%,-50%);
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  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:-5px;
  left:-5px;
  z-index:2;

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

  background:var(--brand-primary);
  color:#fff;
  font-size:9px;
  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:-4px;
  right:-4px;
  z-index:2;

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

  background:var(--success);
  color:#fff;
  font-size:9px;
  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:10.5px;
  font-weight:700;
  line-height:1.2;
  color:var(--text-primary);
  background:rgba(255,255,255,.94);
  padding:3px 7px;
  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:22px;
  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:22px;
  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:22px;
  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:22px;
  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;
}

/* --- 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;
}

.account-privacy-link{
  margin-top:4px;
}

.account-privacy-link .account-link-btn{
  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;

  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;
}

.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);
}

.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);
}

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

/* --- 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;
}

.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;
}

.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;
}

.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:10px;

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

  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:.9rem;
  font-weight:600;
  color:var(--brand-accent-dark);
}

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

.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;
}