@charset "UTF-8";
/* Most colors are controlled in assets/css/variables.css. Change color variables there. */
.word-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:24px}
.word-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;display:flex;flex-direction:column;gap:4px;transition:box-shadow var(--tr),opacity var(--tr),border-color var(--tr),background var(--tr);cursor:pointer}
.word-card:hover{box-shadow:var(--shadow);border-color:var(--card-hover-border)}
.word-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.word-card.is-skipped{opacity:.45;background:var(--surface2)}
.word-de{font-weight:600;font-size:1rem;display:flex;align-items:center;gap:6px}
.word-trans{font-size:.85rem;color:var(--text2)}
.word-card-action{font-size:.72rem;color:var(--text2);margin-top:4px}
#activity-area{min-height:300px}

.module-instruction{background:var(--surface);border:1.5px solid var(--border);border-left:4px solid var(--accent);border-radius:var(--radius-sm);padding:12px 16px;margin:-8px 0 22px;color:var(--text2);font-size:.92rem;line-height:1.55}
.activity-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:12px}
.activity-header h2{font-family:var(--font-display);font-size:1.5rem}
.card-counter{background:var(--counter-bg);border-radius:20px;padding:4px 12px;font-size:.84rem;color:var(--text2);font-weight:500;white-space:nowrap}
.flashcard-wrap{perspective:1000px;margin:0 auto 20px;max-width:440px}
.flashcard{width:100%;height:200px;position:relative;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,0,.2,1);cursor:pointer;border-radius:var(--radius)}
.flashcard.flipped{transform:rotateY(180deg)}
.fc-front,.fc-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;border:1.5px solid var(--border);box-shadow:var(--shadow)}
.fc-front{background:var(--flashcard-front-bg)}
.fc-back{background:var(--flashcard-back-bg);transform:rotateY(180deg)}
.fc-content{text-align:center;padding:20px}
.fc-word{font-family:var(--font-display);font-size:2rem;color:var(--flashcard-front-text);display:block;margin-bottom:10px}
.fc-translation{font-size:1.8rem;color:var(--flashcard-back-text);font-weight:600;display:block;margin-bottom:6px}
.fc-de-small{font-size:.95rem;color:var(--flashcard-back-small-text)}
.flip-hint{text-align:center;font-size:.8rem;color:var(--text2);margin-bottom:16px}
.fc-controls{display:flex;gap:10px;justify-content:center;margin-bottom:14px;flex-wrap:wrap}
.quiz-question{text-align:center;margin-bottom:24px;display:flex;align-items:center;justify-content:center;gap:12px}
.quiz-de-word{font-family:var(--font-display);font-size:2.2rem;color:var(--text)}
.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:500px;margin:0 auto 16px}
.quiz-opt{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;display:flex;align-items:center;gap:10px;font-size:.95rem;text-align:left;transition:all var(--tr);cursor:pointer}
.quiz-opt:hover:not(:disabled){border-color:var(--accent);background:var(--accent-light)}
.quiz-opt.correct{background:var(--correct-bg);border-color:var(--correct-text);color:var(--correct-text)}
.quiz-opt.wrong{background:var(--wrong-bg);border-color:var(--wrong-text);color:var(--wrong-text)}
.quiz-opt:disabled{cursor:default}
.opt-num{width:24px;height:24px;border-radius:50%;background:var(--counter-bg);display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;flex-shrink:0;color:var(--text2)}
.hint-keys{text-align:center;font-size:.78rem;color:var(--text2);margin-bottom:16px}
.listen-center{text-align:center;padding:16px 0 24px}
.listen-instruction{color:var(--text2);font-size:.95rem;margin-bottom:20px}
.listen-big-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--listen-button-bg);color:var(--listen-button-text);border-radius:50%;width:100px;height:100px;font-size:.85rem;font-weight:600;transition:all var(--tr);box-shadow:var(--listen-button-shadow)}
.listen-big-btn:hover{transform:scale(1.08);box-shadow:var(--listen-button-shadow-hover)}
.listen-icon{font-size:2rem}
.fill-list{display:flex;flex-direction:column;gap:14px;margin-bottom:24px}
.fill-item{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:16px 18px;transition:border-color var(--tr)}
.fill-item.fill-correct{border-color:var(--correct-text)}
.fill-item.fill-wrong{border-color:var(--wrong-text)}
.fill-sentence{font-size:1rem;line-height:1.7}
.fill-select{display:inline-block;margin:0 4px;padding:3px 8px;border:1.5px solid var(--accent);border-radius:6px;background:var(--accent-light);color:var(--accent);font-size:.95rem;font-weight:500;cursor:pointer}
.fill-feedback{font-size:.83rem;font-weight:600;margin-top:8px}
.fill-feedback.correct{color:var(--accent)}
.fill-feedback.wrong{color:var(--danger)}
.result-mini{background:var(--correct-bg);border-radius:var(--radius-sm);padding:12px 16px;color:var(--correct-text);font-weight:600;margin-top:14px;text-align:center}
.result-screen{text-align:center;padding:32px 20px;animation:pageEnter .4s ease forwards}
.result-score{font-family:var(--font-display);font-size:5rem;color:var(--result-score-color);line-height:1;margin-bottom:8px}
.result-label{font-size:1.3rem;font-weight:600;margin-bottom:8px}
.result-detail{color:var(--text2);margin-bottom:20px}
.result-mistakes{margin-bottom:20px}
.mistake-tag{display:inline-block;background:var(--wrong-bg);color:var(--wrong-text);border-radius:6px;padding:3px 10px;margin:3px;font-size:.85rem;font-weight:600}
.result-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.empty-state{color:var(--text2);text-align:center;padding:40px 0}

/* Guess Word activity */
.guess-definition-card{
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  padding:18px 20px;
  margin:0 auto 18px;
  max-width:560px;
  box-shadow:var(--shadow);
}
.guess-label{
  color:var(--text2);
  font-size:.86rem;
  font-weight:600;
  margin-bottom:8px;
}
.guess-definition{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  color:var(--text);
  font-size:1.05rem;
  line-height:1.55;
}