/* === Lesson Player Layout === */
.lesson-player {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
}

.lesson-player__header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--color-white);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.lesson-player__close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.lesson-player__close:hover {
  background: var(--color-bg-input);
  color: var(--color-text);
}

.lesson-player__progress {
  flex: 1;
}

.lesson-player__counter {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  min-width: 36px;
  text-align: right;
  flex-shrink: 0;
}

.lesson-player__hearts {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
}

.heart {
  font-size: 20px;
  transition: transform 300ms var(--ease-spring);
}

.heart--lost {
  opacity: 0.2;
  filter: grayscale(100%);
  animation: heartBreak 400ms ease forwards;
}

/* === Exercise Container === */
.exercise {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-8) var(--space-4);
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  animation: fadeInUp 400ms var(--ease-out-expo) both;
}

.exercise__prompt {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  text-align: center;
  margin-bottom: var(--space-2);
  line-height: var(--leading-tight);
}

.exercise__hint {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: var(--space-8);
}

.exercise__display {
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  color: var(--color-primary);
  margin-bottom: var(--space-6);
  text-align: center;
  letter-spacing: 0.02em;
}

/* === Multiple Choice === */
.mcq-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  width: 100%;
  max-width: 480px;
}

.mcq-option {
  padding: var(--space-4);
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 3px 0 var(--color-border);
  user-select: none;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mcq-option:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-50);
  transform: translateY(-1px);
}

.mcq-option:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--color-border);
}

.mcq-option--selected {
  border-color: var(--color-primary);
  background: var(--color-primary-50);
  color: var(--color-primary);
  box-shadow: 0 3px 0 var(--color-primary-dark);
}

.mcq-option--correct {
  border-color: var(--color-success);
  background: var(--color-success-light);
  color: var(--color-success-dark);
  box-shadow: 0 3px 0 var(--color-success-dark);
  animation: correctPulse 400ms ease;
}

.mcq-option--wrong {
  border-color: var(--color-error);
  background: var(--color-error-light);
  color: var(--color-error-dark);
  animation: wrongShake 500ms ease;
}

.mcq-option--disabled {
  pointer-events: none;
  opacity: 0.6;
}

/* === Matching Exercise === */
.matching {
  display: flex;
  gap: var(--space-6);
  width: 100%;
  max-width: 500px;
}

.matching__column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.matching__item {
  padding: var(--space-3) var(--space-4);
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 0 var(--color-border);
  user-select: none;
}

.matching__item:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-50);
}

.matching__item--selected {
  border-color: var(--color-primary);
  background: var(--color-primary-100);
  color: var(--color-primary);
  transform: scale(1.03);
  box-shadow: var(--shadow-glow-primary);
}

.matching__item--matched {
  border-color: var(--color-success);
  background: var(--color-success-light);
  color: var(--color-success-dark);
  pointer-events: none;
  animation: correctPulse 400ms ease;
}

.matching__item--wrong {
  animation: wrongShake 500ms ease;
  border-color: var(--color-error);
  background: var(--color-error-light);
}

/* === Fill in the Blank === */
.fill-blank {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.fill-blank__input-wrapper {
  position: relative;
  width: 100%;
}

.fill-blank__input {
  width: 100%;
  padding: var(--space-4);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  text-align: center;
  border: var(--border-width-thick) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.fill-blank__input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-50);
}

.fill-blank__keyboard {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

.fill-blank__key {
  min-width: 48px;
  font-size: var(--text-sm);
}

.translation__placeholder {
  font-size: var(--text-sm);
  font-style: italic;
}

.fill-blank__input--correct {
  border-color: var(--color-success);
  background: var(--color-success-light);
  box-shadow: var(--shadow-glow-success);
}

.fill-blank__input--wrong {
  border-color: var(--color-error);
  background: var(--color-error-light);
  animation: wrongShake 500ms ease;
}

/* === Translation / Word Bank === */
.translation {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.translation__answer {
  min-height: 64px;
  padding: var(--space-3);
  border: var(--border-width) dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-fast);
}

.translation__answer--active {
  border-color: var(--color-primary);
  border-style: solid;
}

.translation__answer--correct {
  border-color: var(--color-success);
  border-style: solid;
  background: var(--color-success-light);
}

.translation__answer--wrong {
  border-color: var(--color-error);
  border-style: solid;
  background: var(--color-error-light);
  animation: wrongShake 500ms ease;
}

.translation__bank {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

.word-tile {
  padding: var(--space-2) var(--space-4);
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all 200ms var(--ease-out-expo);
  box-shadow: 0 2px 0 var(--color-border);
  user-select: none;
}

.word-tile:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-50);
  transform: translateY(-1px);
}

.word-tile:active {
  transform: translateY(2px);
  box-shadow: none;
}

.word-tile--placed {
  opacity: 0.3;
  pointer-events: none;
  transform: scale(0.95);
}

.word-tile--in-answer {
  background: var(--color-primary-50);
  border-color: var(--color-primary);
  cursor: pointer;
}

.word-tile--in-answer:hover {
  background: var(--color-error-light);
  border-color: var(--color-error);
}

/* === Bottom Action Bar === */
.lesson-player__bottom {
  position: sticky;
  bottom: 0;
  background: var(--color-white);
  border-top: 1px solid var(--color-border-light);
  padding: var(--space-4);
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
}

.lesson-player__bottom .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* === Feedback Bar === */
.feedback-bar {
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  animation: fadeInUp 300ms var(--ease-out-expo) both;
}

.feedback-bar--correct {
  background: var(--color-success-light);
  color: var(--color-success-dark);
}

.feedback-bar--wrong {
  background: var(--color-error-light);
  color: var(--color-error-dark);
}

.feedback-bar__icon {
  font-size: var(--text-2xl);
  flex-shrink: 0;
}

.feedback-bar__text {
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
}

.feedback-bar__correct-answer {
  font-weight: var(--font-bold);
  font-size: var(--text-base);
  margin-top: var(--space-1);
}

/* === Lesson Intro Screen === */
.lesson-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  text-align: center;
  padding: var(--space-8) var(--space-4);
  animation: fadeInUp 500ms var(--ease-out-expo) both;
}

.lesson-intro__icon {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  margin-bottom: var(--space-6);
}

.lesson-intro__title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
}

.lesson-intro__desc {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.lesson-intro__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}

/* === Lesson Summary Screen === */
.lesson-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  text-align: center;
  padding: var(--space-8) var(--space-4);
  animation: fadeInUp 500ms var(--ease-out-expo) both;
}

.lesson-summary__score {
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.lesson-summary__label {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

.lesson-summary__stats {
  display: flex;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.lesson-summary__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.lesson-summary__stat-value {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
}

.lesson-summary__stat-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.lesson-summary__xp {
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  color: var(--color-gold);
  margin-bottom: var(--space-8);
}

/* === Enhanced Feedback (Change #1) === */

.feedback-bar--detailed {
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-4) var(--space-5);
}

.feedback-bar--detailed .feedback-bar__icon {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
}

.feedback-bar--detailed {
  position: relative;
}

.feedback-bar__content {
  width: 100%;
}

.feedback-comparison {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

.feedback-comparison__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.feedback-comparison__label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  min-width: 90px;
  opacity: 0.8;
}

.feedback-comparison__value {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
}

.feedback-comparison__value--wrong {
  background: rgba(255, 255, 255, 0.3);
  text-decoration: line-through;
  opacity: 0.7;
}

.feedback-comparison__value--correct {
  background: rgba(255, 255, 255, 0.5);
}

.feedback-tip {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-input);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-primary);
  margin-top: var(--space-2);
  animation: fadeInUp 300ms var(--ease-out-expo) 100ms both;
}

.feedback-tip__icon {
  font-size: var(--text-xl);
  flex-shrink: 0;
  line-height: 1;
}

.feedback-tip__title {
  font-weight: var(--font-bold);
  font-size: var(--text-sm);
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}

.feedback-tip__text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* === Culture Fact Card (Change #2) === */

.culture-card {
  width: 100%;
  max-width: 420px;
  background: var(--color-text);
  border: 2px solid var(--color-gold);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  margin-top: var(--space-2);
  text-align: left;
}

.culture-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.culture-card__icon {
  font-size: var(--text-2xl);
}

.culture-card__title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-gold);
}

.culture-card__text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.85);
}

/* === Pre-test Banner (Change #3) === */

.pretest-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary-50);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-primary-100);
}

.pretest-banner__label {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
}

.pretest-banner__text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-align: center;
}

.feedback-bar--compact {
  padding: var(--space-3) var(--space-4);
}

/* === Mnemonic Hint (Change #5) === */

.fill-blank__mnemonic-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--space-2);
}

.fill-blank__mnemonic-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.fill-blank__mnemonic-btn:hover {
  background: var(--color-primary-50);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.fill-blank__mnemonic-btn--active {
  background: var(--color-primary-50);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.fill-blank__mnemonic-btn-icon {
  font-size: var(--text-base);
  line-height: 1;
}

.fill-blank__mnemonic-content {
  width: 100%;
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--color-bg-input);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--color-primary);
  animation: fadeInUp 200ms var(--ease-out-expo) both;
}

.fill-blank__mnemonic-text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.fill-blank__mnemonic-text + .fill-blank__mnemonic-text {
  margin-top: var(--space-2);
}