/* ===== Spaans: leerpad, lesspeler en woordenboek ===== */

/* ---------- stat-balk boven het pad ---------- */
.stats-bar{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  margin-bottom:34px;
}
.stat-chip{
  background:var(--soft);
  border:3px solid var(--ink);
  border-radius:999px;
  padding:8px 18px;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.05rem;
  box-shadow:3px 3px 0 var(--ink);
  display:inline-flex;align-items:center;gap:8px;
}
.stat-chip b{color:var(--coral);}
.stat-chip.streak{background:#ffe1c4;}
.stat-chip.xp{background:#fde6a8;}
.stat-chip.crown{background:#dfd1f0;}
.stat-chip a{color:inherit;text-decoration:none;}

.tool-row{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:40px;
}
.tool-btn{
  text-decoration:none;color:var(--ink);
  background:var(--peach);
  border:3px solid var(--ink);
  padding:10px 20px;border-radius:999px;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:1rem;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .15s,box-shadow .15s;
  cursor:pointer;display:inline-flex;align-items:center;gap:8px;
}
.tool-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);}
.tool-btn.go{background:var(--gold);}
.tool-btn.soft{background:#c8e2c9;}

/* ---------- het leerpad ---------- */
.unit-block{margin-bottom:46px;}
.unit-banner{
  border:4px solid var(--ink);
  border-radius:24px;
  padding:18px 24px;
  box-shadow:6px 6px 0 var(--ink);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-bottom:26px;
}
.unit-banner .u-emoji{font-size:2.6rem;line-height:1;}
.unit-banner .u-text{flex:1;min-width:180px;}
.unit-banner h2{
  font-family:'Fredoka',sans-serif;font-weight:700;
  font-size:1.5rem;color:var(--ink);line-height:1.1;margin:0;
}
.unit-banner .u-sub{
  font-family:'Caveat',cursive;font-size:1.3rem;color:var(--plum);
}
.unit-banner .u-num{
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.85rem;
  background:var(--soft);border:2px solid var(--ink);border-radius:999px;
  padding:3px 12px;display:inline-block;margin-bottom:4px;
}
.tip-btn{
  background:var(--soft);border:3px solid var(--ink);
  border-radius:999px;padding:8px 16px;cursor:pointer;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.9rem;
  box-shadow:3px 3px 0 var(--ink);transition:all .15s;
}
.tip-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);}

.path{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  position:relative;
}
.node-row{display:flex;justify-content:center;width:100%;}
.node{
  width:88px;height:88px;border-radius:50%;
  border:4px solid var(--ink);
  background:var(--soft);
  box-shadow:0 6px 0 var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:'Fredoka',sans-serif;font-weight:700;
  cursor:pointer;text-decoration:none;color:var(--ink);
  transition:transform .12s,box-shadow .12s;
  position:relative;
}
.node:hover{transform:translateY(-3px);box-shadow:0 9px 0 var(--ink);}
.node:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink);}
.node .n-icon{font-size:1.9rem;line-height:1;}
.node .n-label{font-size:.72rem;opacity:.75;margin-top:2px;}
.node.done{background:#c8e2c9;}
.node.done .n-icon{font-size:1.7rem;}
.node.gold{background:var(--gold);}
.node.locked{
  background:#e6ded4;color:#9d9086;
  box-shadow:0 6px 0 #b9ada2;border-color:#b9ada2;
  cursor:not-allowed;
}
.node.locked:hover{transform:none;box-shadow:0 6px 0 #b9ada2;}
.node.current{
  animation:node-bounce 1.6s ease-in-out infinite;
}
@keyframes node-bounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
.node .start-flag{
  position:absolute;top:-40px;left:50%;transform:translateX(-50%);
  background:var(--coral);color:#fff;
  border:3px solid var(--ink);border-radius:999px;
  padding:4px 14px;font-size:.8rem;white-space:nowrap;
  box-shadow:3px 3px 0 var(--ink);
}
.node .start-flag::after{
  content:"";position:absolute;bottom:-9px;left:50%;
  transform:translateX(-50%);
  border-left:7px solid transparent;border-right:7px solid transparent;
  border-top:8px solid var(--ink);
}
.node-connector{
  width:7px;height:26px;border-radius:4px;
  background:repeating-linear-gradient(to bottom,var(--ink) 0 7px,transparent 7px 13px);
  opacity:.5;
}
.unit-locked-note{
  text-align:center;font-family:'Caveat',cursive;
  font-size:1.3rem;color:var(--plum);opacity:.8;padding:10px;
}

/* ---------- tip / uitleg-venster ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(61,44,46,.55);
  display:none;align-items:center;justify-content:center;
  z-index:200;padding:20px;
}
.overlay.open{display:flex;}
.modal{
  background:var(--soft);
  border:4px solid var(--ink);
  border-radius:26px;
  box-shadow:8px 8px 0 var(--ink);
  padding:28px;max-width:460px;width:100%;
  text-align:center;
  animation:pop-in .25s ease-out;
}
@keyframes pop-in{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.modal h3{
  font-family:'Fredoka',sans-serif;font-size:1.4rem;color:var(--coral);margin-bottom:12px;
}
.modal p{font-size:1.02rem;line-height:1.7;margin-bottom:18px;}

/* ---------- lesspeler ---------- */
.lesson-top{
  display:flex;align-items:center;gap:14px;
  padding:16px 22px;
  background:var(--soft);
  border-bottom:3px solid var(--ink);
  position:sticky;top:0;z-index:60;
}
.quit-btn{
  background:none;border:none;cursor:pointer;
  font-family:'Fredoka',sans-serif;font-size:1.6rem;
  color:var(--ink);opacity:.6;line-height:1;padding:0 4px;
}
.quit-btn:hover{opacity:1;}
.bar{
  flex:1;height:20px;background:#eadfd0;
  border:3px solid var(--ink);border-radius:999px;overflow:hidden;
}
.bar-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--gold),var(--coral));
  border-radius:999px;transition:width .35s ease;
}
.hearts{font-size:1.25rem;letter-spacing:2px;white-space:nowrap;}
.hearts .gone{filter:grayscale(1);opacity:.35;}
.timer{
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.1rem;
  background:var(--peach);border:3px solid var(--ink);
  border-radius:999px;padding:4px 14px;white-space:nowrap;
}

.lesson-wrap{
  max-width:640px;margin:0 auto;
  padding:34px 20px 190px;
}
.q-title{
  font-family:'Fredoka',sans-serif;font-weight:600;
  font-size:1.3rem;margin-bottom:22px;text-align:center;
}
.q-title small{display:block;font-family:'Caveat',cursive;font-size:1.2rem;color:var(--plum);font-weight:400;}

.prompt-word{
  background:var(--soft);border:4px solid var(--ink);
  border-radius:22px;box-shadow:6px 6px 0 var(--ink);
  padding:22px;text-align:center;margin-bottom:26px;
}
.prompt-word .big-emoji{font-size:4.2rem;line-height:1;display:block;margin-bottom:8px;}
.prompt-word .es{
  font-family:'Fredoka',sans-serif;font-size:2.1rem;color:var(--coral);
  display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
}
.prompt-word .nl-word{
  font-family:'Fredoka',sans-serif;font-size:2rem;color:var(--plum);
}

.speak-btn{
  background:var(--lavender);border:3px solid var(--ink);
  border-radius:50%;width:46px;height:46px;
  font-size:1.3rem;cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);
  transition:all .12s;flex-shrink:0;
}
.speak-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);}
.speak-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.speak-btn.big{width:110px;height:110px;font-size:3rem;border-width:4px;box-shadow:5px 5px 0 var(--ink);}
.speak-btn.slow{background:var(--peach);width:40px;height:40px;font-size:1rem;}

/* keuzeknoppen */
.choices{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.choices.one-col{grid-template-columns:1fr;}
.choice{
  background:var(--soft);border:3px solid var(--ink);
  border-radius:18px;padding:16px 14px;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.05rem;
  cursor:pointer;box-shadow:4px 4px 0 var(--ink);
  transition:transform .12s,box-shadow .12s,background .12s;
  text-align:center;color:var(--ink);
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.choice:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);}
.choice .c-emoji{font-size:3rem;line-height:1;}
.choice.sel{background:#cfe4f7;transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink);}
.choice.right{background:#c8e2c9;}
.choice.wrong{background:#f8c8d4;}
.choice[disabled]{cursor:default;}

/* woorden koppelen */
.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.match-col{display:flex;flex-direction:column;gap:10px;}
.match-item{
  background:var(--soft);border:3px solid var(--ink);
  border-radius:14px;padding:13px 10px;cursor:pointer;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:1rem;
  box-shadow:3px 3px 0 var(--ink);transition:all .12s;text-align:center;
}
.match-item:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);}
.match-item.sel{background:#cfe4f7;}
.match-item.ok{background:#c8e2c9;opacity:.55;pointer-events:none;box-shadow:none;transform:none;}
.match-item.bad{background:#f8c8d4;}

/* zin bouwen */
.answer-slot{
  min-height:78px;
  border-bottom:4px dashed rgba(61,44,46,.28);
  display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;
  padding:10px 4px 14px;margin-bottom:24px;
}
.tile-bank{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.tile{
  background:var(--soft);border:3px solid var(--ink);
  border-radius:12px;padding:10px 15px;cursor:pointer;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.05rem;
  box-shadow:3px 3px 0 var(--ink);transition:all .12s;
}
.tile:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);}
.tile.used{opacity:.25;pointer-events:none;box-shadow:none;}
.tile.letter{min-width:46px;text-align:center;}

/* onderbalk met controleknop */
.check-bar{
  position:fixed;left:0;right:0;bottom:0;
  background:var(--soft);
  border-top:3px solid var(--ink);
  padding:18px 20px;z-index:70;
}
.check-inner{
  max-width:640px;margin:0 auto;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.check-btn{
  flex:1;min-width:160px;
  background:var(--green);color:#fff;
  border:4px solid var(--ink);border-radius:999px;
  padding:15px 26px;
  font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.15rem;
  cursor:pointer;box-shadow:5px 5px 0 var(--ink);
  transition:all .12s;
}
.check-btn:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink);}
.check-btn:active:not(:disabled){transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink);}
.check-btn:disabled{background:#ded4c8;color:#8d8177;cursor:not-allowed;box-shadow:5px 5px 0 #b9ada2;border-color:#b9ada2;}
.check-btn.next{background:var(--coral);}
.skip-btn{
  background:none;border:none;cursor:pointer;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.95rem;
  color:var(--plum);text-decoration:underline;
}
.check-bar.good{background:#d8efd9;}
.check-bar.bad{background:#fbdde4;}
.verdict{
  max-width:640px;margin:0 auto 12px;
  font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.2rem;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.verdict.good{color:var(--leaf);}
.verdict.bad{color:#b33f3f;}
.verdict .sol{
  font-weight:600;font-size:1rem;color:var(--ink);
  font-family:'Quicksand',sans-serif;width:100%;
}

/* eindscherm */
.finish{
  max-width:520px;margin:0 auto;text-align:center;
  background:var(--soft);border:4px solid var(--ink);
  border-radius:28px;box-shadow:8px 8px 0 var(--ink);
  padding:38px 28px;
}
.finish .trophy{font-size:4.6rem;line-height:1;}
.finish h2{
  font-family:'Fredoka',sans-serif;font-size:1.9rem;color:var(--coral);margin:10px 0 6px;
}
.finish .sub{font-family:'Caveat',cursive;font-size:1.5rem;color:var(--plum);margin-bottom:24px;}
.result-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:26px;}
.result-box{
  border:3px solid var(--ink);border-radius:18px;
  padding:12px 20px;min-width:104px;
  font-family:'Fredoka',sans-serif;box-shadow:4px 4px 0 var(--ink);
}
.result-box .rb-label{font-size:.8rem;opacity:.7;}
.result-box .rb-value{font-size:1.7rem;font-weight:700;}
.result-box.xp{background:#fde6a8;}
.result-box.acc{background:#c8e2c9;}
.result-box.time{background:#dfd1f0;}

/* ---------- woordenboek ---------- */
.search-row{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:26px;
}
.search-row input{
  border:3px solid var(--ink);border-radius:999px;
  padding:12px 22px;font-family:'Quicksand',sans-serif;font-weight:600;font-size:1.05rem;
  background:var(--soft);color:var(--ink);
  box-shadow:3px 3px 0 var(--ink);min-width:260px;
}
.search-row input:focus{outline:none;background:#fff;}
.filter-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:30px;}
.filter-chip{
  background:var(--soft);border:3px solid var(--ink);
  border-radius:999px;padding:6px 14px;cursor:pointer;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.88rem;
  box-shadow:2px 2px 0 var(--ink);transition:all .12s;
}
.filter-chip:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink);}
.filter-chip.on{background:var(--gold);}
.word-section{margin-bottom:38px;}
.word-section h3{
  font-family:'Fredoka',sans-serif;font-size:1.3rem;color:var(--ink);
  border-bottom:3px dashed rgba(61,44,46,.25);
  padding-bottom:8px;margin-bottom:16px;
}
.word-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px;
}
.word-row{
  background:var(--soft);border:3px solid var(--ink);
  border-radius:16px;padding:12px 14px;
  box-shadow:4px 4px 0 var(--ink);
  display:flex;align-items:center;gap:12px;
}
.word-row .w-emoji{font-size:1.9rem;line-height:1;}
.word-row .w-text{flex:1;min-width:0;}
.word-row .w-es{font-family:'Fredoka',sans-serif;font-weight:600;color:var(--coral);font-size:1.05rem;}
.word-row .w-nl{font-size:.92rem;opacity:.85;}
.word-row .speak-btn{width:38px;height:38px;font-size:1rem;}
.empty-note{
  text-align:center;font-family:'Caveat',cursive;
  font-size:1.5rem;color:var(--plum);padding:40px;
}

@media print{
  .topbar,.search-row,.filter-row,.speak-btn,.tool-row,.stats-bar{display:none !important;}
  .word-row{box-shadow:none;break-inside:avoid;}
  body{background:#fff;}
}

@media (max-width:640px){
  .lesson-wrap{padding:24px 16px 200px;}
  .choices{gap:10px;}
  .choice{font-size:.98rem;padding:13px 10px;}
  .choice .c-emoji{font-size:2.5rem;}
  .prompt-word .es{font-size:1.7rem;}
  .node{width:74px;height:74px;}
  .node .n-icon{font-size:1.6rem;}
  .unit-banner{padding:14px 16px;gap:12px;}
  .unit-banner h2{font-size:1.25rem;}
  .match-item{font-size:.92rem;padding:11px 6px;}
}