*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
.hidden{display:none!important}
:root{
  --bg:#0f0f13;--surface:#1a1a24;--card:#22223a;
  --accent:#6c63ff;--accent-hover:#5a52e0;
  --easy:#2ecc71;--easy-hover:#27ae60;
  --hard:#e74c3c;--hard-hover:#c0392b;
  --partial:#f39c12;--partial-hover:#e67e22;
  --text:#f0f0f5;--text-muted:#8888a0;
  --radius:20px;--shadow:0 8px 32px rgba(0,0,0,.4);
  --quiz-correct:#2ecc71;--quiz-wrong:#e74c3c;
}
html{font-size:16px}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--text);
  min-height:100dvh;display:flex;flex-direction:column;
  align-items:center;-webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}

/* Header */
.header{width:100%;max-width:480px;padding:16px 20px 8px}
.header-top{display:flex;justify-content:space-between;align-items:center}
.header-top h1{font-size:1.3rem;font-weight:700}
.header-right{display:flex;align-items:center;gap:8px}
.accent{color:var(--accent)}
.streak{display:flex;align-items:center;gap:4px;background:var(--surface);padding:6px 12px;border-radius:20px;font-weight:600}
.streak-fire{font-size:1.1rem}
.streak-count{font-size:1.1rem}

.btn-stats-toggle{
  width:36px;height:36px;border-radius:50%;border:none;
  background:var(--surface);color:var(--text-muted);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}

.vacation-bar{margin-top:10px}
.vacation-label{font-size:.75rem;color:var(--text-muted);margin-bottom:4px}
.progress-bar{width:100%;height:6px;background:var(--surface);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;border-radius:3px;transition:width .4s ease}
.vacation-fill{background:linear-gradient(90deg,var(--accent),var(--easy))}

.stats-row{display:flex;gap:8px;margin-top:8px}
.stat-chip{
  flex:1;display:flex;align-items:center;gap:4px;
  background:var(--surface);padding:6px 10px;border-radius:10px;
  font-size:.78rem;color:var(--text-muted);
}
.stat-icon{font-size:.85rem}

/* Mode Bar */
.mode-bar{
  width:100%;max-width:480px;padding:4px 20px 4px;
  display:flex;gap:6px;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
.mode-bar::-webkit-scrollbar{display:none}
.mode-btn{
  flex-shrink:0;padding:6px 14px;border-radius:20px;
  border:1.5px solid var(--surface);background:var(--surface);
  color:var(--text-muted);font-size:.75rem;font-weight:600;
  cursor:pointer;transition:all .2s;white-space:nowrap;
}
.mode-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(108,99,255,.12)}
.mode-btn.locked{opacity:.55}

/* Category Bar */
.category-bar{
  width:100%;max-width:480px;padding:2px 20px 4px;
  display:flex;gap:4px;overflow-x:auto;flex-wrap:nowrap;
  scrollbar-width:none;-ms-overflow-style:none;
}
.category-bar::-webkit-scrollbar{display:none}
.category-bar.hidden{display:none}
.cat-btn{
  flex-shrink:0;padding:4px 10px;border-radius:12px;
  border:1px solid var(--surface);background:var(--surface);
  color:var(--text-muted);font-size:.68rem;font-weight:500;
  cursor:pointer;transition:all .2s;white-space:nowrap;
}
.cat-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(108,99,255,.12)}

/* Level Nav */
.level-nav{
  width:100%;max-width:480px;padding:4px 20px;
  display:flex;gap:6px;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
.level-nav::-webkit-scrollbar{display:none}
.level-btn{
  flex-shrink:0;width:40px;height:40px;border-radius:12px;
  border:2px solid var(--surface);background:var(--surface);
  color:var(--text-muted);font-size:.85rem;font-weight:700;
  cursor:pointer;transition:all .2s;display:flex;
  align-items:center;justify-content:center;
}
.level-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(108,99,255,.15)}
.level-btn.completed{border-color:var(--easy);color:var(--easy);background:rgba(46,204,113,.1)}
.level-btn.locked{opacity:.35;cursor:default}
.level-btn.phase-two{border-color:#f1c40f;color:#f1c40f;animation:quizPulse 2s infinite}
@keyframes quizPulse{0%,100%{box-shadow:0 0 0 0 rgba(241,196,15,.4)}50%{box-shadow:0 0 0 6px rgba(241,196,15,0)}}

/* Main */
.main{flex:1;display:flex;flex-direction:column;align-items:center;width:100%;max-width:480px;padding:8px 20px 0}

/* Flashcard */
.card-container{width:100%;min-height:300px;display:flex;align-items:center;justify-content:center}
.flashcard{
  width:100%;background:var(--card);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
  animation:cardIn .3s ease;
}
.flashcard.card-out{animation:cardOut .25s ease forwards}
@keyframes cardIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
@keyframes cardOut{to{opacity:0;transform:translateY(-20px) scale(.97)}}

.card-image{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--surface)}
.card-body{padding:20px;text-align:center}
.word-spanish{font-size:1.7rem;font-weight:700;margin-bottom:2px}
.word-dutch{font-size:1.05rem;color:var(--text-muted);min-height:1.5em;transition:opacity .25s}
.word-dutch.hidden{opacity:0;pointer-events:none}
.word-example{font-size:.85rem;color:var(--text-muted);font-style:italic;margin-top:6px;min-height:1.3em;transition:opacity .25s}
.word-example.hidden{opacity:0}

.card-actions{display:flex;gap:10px;margin-top:16px;justify-content:center;align-items:center}
.btn-icon{
  width:44px;height:44px;border-radius:50%;border:2px solid var(--accent);
  background:transparent;color:var(--accent);font-size:1.1rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s;flex-shrink:0;
}
.btn-icon:active,.btn-icon.active{background:var(--accent);color:#fff}
.card-actions{position:relative}
.btn-reveal{
  flex:1;max-width:180px;padding:12px 0;border:none;border-radius:14px;
  background:var(--accent);color:#fff;font-size:.95rem;font-weight:600;
  cursor:pointer;transition:background .2s,transform .1s;
}
.btn-reveal:active{transform:scale(.97);background:var(--accent-hover)}

/* Rating */
.rating-container{width:100%;display:flex;gap:12px;padding:12px 0}
.rating-container.hidden{display:none}
.btn-rate{
  flex:1;padding:14px 0;border:none;border-radius:14px;
  font-size:.95rem;font-weight:600;cursor:pointer;
  transition:background .2s,transform .1s;color:#fff;
}
.btn-rate:active{transform:scale(.96)}
.btn-rate.easy{background:var(--easy)}
.btn-rate.easy:active{background:var(--easy-hover)}
.btn-rate.hard{background:var(--hard)}
.btn-rate.hard:active{background:var(--hard-hover)}
.btn-rate.primary{background:var(--accent)}
.btn-rate.primary:active{background:var(--accent-hover)}
.btn-rate.neutral{background:var(--surface);color:var(--text-muted)}

/* Kaart-label: voortgang ES → NL (bolletjes) of modus */
.card-tag-row{display:flex;justify-content:center;min-height:18px;margin-bottom:6px}
.card-tag{font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);background:rgba(108,99,255,.12);padding:3px 10px;border-radius:10px}
.word-progress{display:flex;gap:6px;align-items:center}
.word-progress .dot{width:9px;height:9px;border-radius:50%;background:var(--surface);border:1.5px solid var(--text-muted)}
.word-progress .dot.on{background:var(--easy);border-color:var(--easy)}
.key-hint{font-size:.7rem;opacity:.6;margin:0 2px}

/* Quiz */
.quiz-container{width:100%;padding:12px 0}
.quiz-container.hidden{display:none}
.quiz-progress{font-size:.85rem;color:var(--text-muted);margin-bottom:8px;text-align:center}
.quiz-input-wrap{display:flex;gap:8px}
.quiz-input{
  flex:1;padding:12px 16px;border-radius:14px;border:2px solid var(--surface);
  background:var(--surface);color:var(--text);font-size:1rem;outline:none;
  transition:border-color .2s;
}
.quiz-input:focus{border-color:var(--accent)}
.btn-quiz-submit{
  padding:12px 20px;border:none;border-radius:14px;
  background:var(--accent);color:#fff;font-size:.95rem;font-weight:600;cursor:pointer;
}
.quiz-feedback{text-align:center;padding:8px;border-radius:10px;font-weight:600;margin-top:8px}
.quiz-feedback.hidden{display:none}
.quiz-feedback.correct{background:rgba(46,204,113,.15);color:var(--quiz-correct)}
.quiz-feedback.wrong{background:rgba(231,76,60,.15);color:var(--quiz-wrong)}

/* Type / Cloze containers */
.type-container{width:100%;padding:12px 0}
.type-container.hidden{display:none}
.cloze-sentence{
  font-size:1.05rem;text-align:center;padding:12px;margin-bottom:10px;
  background:var(--surface);border-radius:14px;line-height:1.5;
  color:var(--text);
}
.cloze-blank{
  display:inline-block;min-width:80px;border-bottom:2px dashed var(--accent);
  color:var(--accent);font-weight:700;padding:0 4px;
}
.cloze-translation{
  font-size:.9rem;text-align:center;color:var(--text-muted);
  margin-bottom:10px;font-style:italic;
}
.btn-peek{
  display:block;margin:0 auto 10px;padding:8px 16px;
  background:var(--surface);border:1px solid var(--accent);border-radius:10px;
  color:var(--accent);font-size:.85rem;cursor:pointer;
  transition:background .2s;
}
.btn-peek:hover{background:var(--card)}

/* Done / Level Complete */
.done-screen{text-align:center;padding:48px 20px}
.done-icon{font-size:3.5rem;margin-bottom:12px}
.done-screen h2{font-size:1.4rem;margin-bottom:6px}
.done-screen p{color:var(--text-muted);font-size:.95rem;line-height:1.5}
.btn-action{
  margin-top:16px;padding:14px 28px;border:none;border-radius:14px;
  background:var(--accent);color:#fff;font-size:1rem;font-weight:600;cursor:pointer;
}

/* Stats Bar */
.stats-bar{
  width:100%;max-width:480px;padding:16px 20px;
  display:flex;justify-content:space-around;
}
.stat{text-align:center}
.stat-value{font-size:1.3rem;font-weight:700;color:var(--accent)}
.stat-label{font-size:.7rem;color:var(--text-muted);margin-top:2px}

/* Stats Panel (overlay) */
.stats-panel{
  position:fixed;inset:0;background:rgba(0,0,0,.85);
  z-index:100;display:flex;justify-content:center;
  align-items:flex-start;overflow-y:auto;padding:20px;
}
.stats-panel.hidden{display:none}
.stats-panel-inner{
  width:100%;max-width:480px;background:var(--bg);
  border-radius:var(--radius);padding:24px 20px;
}
.stats-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.stats-panel-header h2{font-size:1.3rem;font-weight:700}
.btn-close-stats{
  width:36px;height:36px;border-radius:50%;border:none;
  background:var(--surface);color:var(--text);font-size:1.4rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.stats-section{margin-bottom:24px}
.stats-section h3{font-size:.9rem;color:var(--text-muted);margin-bottom:12px;font-weight:600}

/* Leitner chart */
.leitner-chart{display:flex;gap:8px;align-items:flex-end;height:120px;padding:0 4px}
.leitner-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}
.leitner-bar{
  width:100%;border-radius:6px 6px 0 0;background:var(--accent);
  transition:height .4s ease;min-height:2px;margin-top:auto;
}
.leitner-bar-label{font-size:.7rem;color:var(--text-muted);margin-top:4px}
.leitner-bar-count{font-size:.75rem;font-weight:700;margin-bottom:4px}

/* Level chart */
.level-chart{display:flex;flex-direction:column;gap:8px}
.level-chart-row{display:flex;align-items:center;gap:10px}
.level-chart-label{font-size:.75rem;color:var(--text-muted);width:20px;text-align:right;flex-shrink:0}
.level-chart-bar-bg{flex:1;height:18px;background:var(--surface);border-radius:9px;overflow:hidden;position:relative}
.level-chart-bar-fill{height:100%;border-radius:9px;transition:width .4s ease}
.level-chart-pct{font-size:.7rem;color:var(--text-muted);width:36px;text-align:right;flex-shrink:0}

/* Category chart */
.category-chart{display:flex;flex-direction:column;gap:6px}
.cat-chart-row{display:flex;align-items:center;gap:8px}
.cat-chart-label{font-size:.72rem;color:var(--text-muted);width:100px;text-align:right;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-chart-bar-bg{flex:1;height:14px;background:var(--surface);border-radius:7px;overflow:hidden}
.cat-chart-bar-fill{height:100%;border-radius:7px;background:var(--hard);transition:width .4s ease}
.cat-chart-pct{font-size:.68rem;color:var(--text-muted);width:32px;flex-shrink:0}

/* Streak info */
.streak-info{
  background:var(--surface);border-radius:14px;padding:16px;
  display:flex;flex-direction:column;gap:8px;
}
.streak-info-row{display:flex;justify-content:space-between;align-items:center}
.streak-info-label{font-size:.85rem;color:var(--text-muted)}
.streak-info-value{font-size:1.1rem;font-weight:700}

/* Overview stats */
.overview-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.overview-stat{
  background:var(--surface);border-radius:14px;padding:16px;text-align:center;
}
.overview-stat-value{font-size:1.5rem;font-weight:700;color:var(--accent)}
.overview-stat-label{font-size:.75rem;color:var(--text-muted);margin-top:4px}

/* Keyboard Hints */
.keyboard-hints{
  display:none;width:100%;max-width:480px;padding:8px 20px 16px;
  justify-content:center;gap:12px;flex-wrap:wrap;
}
.keyboard-hints span{font-size:.7rem;color:var(--text-muted);background:var(--surface);padding:3px 8px;border-radius:6px}

/* Desktop */
@media(min-width:600px){
  .keyboard-hints{display:flex}
  .word-spanish{font-size:2rem}
  .btn-rate{padding:16px 0;font-size:1rem;border-radius:16px}
  .btn-reveal{padding:14px 0;font-size:1rem}
}
@media(hover:hover){
  .btn-icon:hover{background:var(--accent);color:#fff}
  .btn-reveal:hover{background:var(--accent-hover)}
  .btn-rate.easy:hover{background:var(--easy-hover)}
  .btn-rate.hard:hover{background:var(--hard-hover)}
  .btn-rate.partial:hover{background:var(--partial-hover)}
  .level-btn:not(.locked):hover{border-color:var(--accent);color:var(--accent)}
  .btn-stats-toggle:hover{background:var(--accent);color:#fff}
  .mode-btn:hover{border-color:var(--accent);color:var(--accent)}
  .cat-btn:hover{border-color:var(--accent);color:var(--accent)}
  .mc-option:hover{border-color:var(--accent);color:var(--accent)}
  .order-item:hover{border-color:var(--accent);color:var(--accent)}
  .subject-btn:hover{color:var(--text)}
}

/* Subject Switcher */
.subject-bar{
  width:100%;max-width:480px;margin:0 auto;padding:12px 20px 4px;
  display:flex;gap:4px;
}
.subject-btn{
  flex:1;padding:10px 0;border-radius:12px;border:2px solid transparent;
  background:var(--surface);color:var(--text-muted);
  font-size:.85rem;font-weight:700;cursor:pointer;
  transition:all .2s;text-align:center;
}
.subject-btn.active{
  border-color:var(--accent);color:var(--accent);
  background:rgba(108,99,255,.12);
}

/* 3-button self-rating */
.rating-container-3{width:100%;display:flex;gap:8px;padding:12px 0}
.rating-container-3.hidden{display:none}
.rating-container-3 .btn-rate{flex:1;padding:12px 0;font-size:.85rem}
.btn-rate.partial{background:var(--partial)}
.btn-rate.partial:active{background:var(--partial-hover)}

/* Session progress (PM) */
.session-progress{
  width:100%;max-width:480px;padding:4px 20px 8px;margin:0 auto;
}
.session-progress.hidden{display:none}
.session-label{font-size:.75rem;color:var(--text-muted);margin-bottom:4px}
.session-fill{background:linear-gradient(90deg,var(--accent),var(--easy))}

/* PM card styles */
.pm-card{
  width:100%;background:var(--card);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;animation:cardIn .3s ease;
}
.pm-card.card-out{animation:cardOut .25s ease forwards}
.pm-card-body{padding:24px 20px;text-align:center}
.pm-card-type{
  display:inline-block;font-size:.65rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;
  padding:3px 10px;border-radius:8px;margin-bottom:14px;
  background:rgba(108,99,255,.15);color:var(--accent);
}
.pm-card-type.type-open{background:rgba(243,156,18,.15);color:var(--partial)}
.pm-card-type.type-case{background:rgba(231,76,60,.15);color:var(--hard)}
.pm-card-type.type-mc{background:rgba(46,204,113,.15);color:var(--easy)}
.pm-card-type.type-fillin{background:rgba(108,99,255,.15);color:var(--accent)}
.pm-card-type.type-order{background:rgba(52,152,219,.15);color:#3498db}

.pm-question{font-size:1.15rem;font-weight:600;line-height:1.4;margin-bottom:8px}
.pm-hint{font-size:.82rem;color:var(--text-muted);font-style:italic;margin-top:6px}
.pm-answer{
  font-size:.95rem;color:var(--text);line-height:1.5;
  text-align:left;margin-top:14px;padding:16px;
  background:var(--surface);border-radius:14px;
  min-height:1.5em;transition:opacity .25s;
}
.pm-answer.hidden{opacity:0;pointer-events:none}
.pm-situation{
  font-size:.9rem;color:var(--text-muted);line-height:1.5;
  text-align:left;padding:14px;margin-bottom:12px;
  background:var(--surface);border-radius:14px;
  border-left:3px solid var(--partial);
}
.pm-chapter-tag{
  font-size:.65rem;color:var(--text-muted);margin-bottom:6px;
}

/* Multichoice */
.mc-container{width:100%;padding:8px 0}
.mc-container.hidden{display:none}
.mc-options{display:flex;flex-direction:column;gap:8px}
.pm-question-label{font-size:.8rem;font-weight:600;color:var(--text-muted);margin-bottom:8px}
.mc-option{
  width:100%;padding:14px 16px;border:2px solid var(--surface);
  background:var(--surface);border-radius:14px;
  color:var(--text);font-size:.9rem;text-align:left;
  cursor:pointer;transition:all .2s;
}
.mc-option.selected{border-color:var(--accent);background:rgba(108,99,255,.1)}
.mc-option.correct{border-color:var(--easy);background:rgba(46,204,113,.15);color:var(--easy)}
.mc-option.wrong{border-color:var(--hard);background:rgba(231,76,60,.15);color:var(--hard)}
.mc-option.disabled{pointer-events:none;opacity:.7}
.mc-option-letter{
  display:inline-block;width:24px;height:24px;border-radius:50%;
  background:rgba(255,255,255,.08);text-align:center;line-height:24px;
  font-size:.75rem;font-weight:700;margin-right:10px;flex-shrink:0;
}

/* Order mode */
.order-container{width:100%;padding:8px 0}
.order-container.hidden{display:none}
.order-placed{
  min-height:40px;padding:8px;margin-bottom:12px;
  display:flex;flex-direction:column;gap:6px;
}
.order-slot{
  padding:10px 14px;border-radius:10px;font-size:.85rem;
  background:rgba(108,99,255,.1);border:1px solid var(--accent);
  color:var(--accent);display:flex;align-items:center;gap:8px;
}
.order-slot-num{
  width:22px;height:22px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:.7rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.order-options{display:flex;flex-direction:column;gap:6px}
.order-item{
  padding:12px 16px;border:2px solid var(--surface);
  background:var(--surface);border-radius:12px;
  color:var(--text);font-size:.88rem;cursor:pointer;
  transition:all .2s;
}
.order-item.placed{display:none}
.order-correct .order-slot{border-color:var(--easy);background:rgba(46,204,113,.1);color:var(--easy)}
.order-wrong .order-slot{border-color:var(--hard);background:rgba(231,76,60,.1);color:var(--hard)}

/* PM fill-in sentence on card */
.pm-fillin-sentence{
  font-size:1.05rem;line-height:1.6;text-align:center;padding:12px;
  margin-bottom:4px;color:var(--text);
}
.pm-fillin-blank{
  display:inline-block;min-width:80px;border-bottom:2px dashed var(--accent);
  color:var(--accent);font-weight:700;padding:0 4px;
}

/* Celebration confetti */
.celebration-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  pointer-events:none;z-index:9999;overflow:hidden;
}
.confetti{
  position:absolute;top:-10px;width:8px;height:14px;
  border-radius:2px;opacity:.9;
  animation:confettiFall 2s ease-in forwards;
}
@keyframes confettiFall{
  0%{transform:translateY(0) rotate(0deg);opacity:1}
  100%{transform:translateY(100vh) rotate(720deg);opacity:0}
}