/* =============================================================================
 * Emma — кастомные стили поверх Tailwind CDN (Tailwind отдаёт utility-classes,
 * этот файл — компонентный слой: bubbles, screens, buttons, animations).
 *
 * Палитра:
 *   --brand-* (индиго #4f46e5) — primary CTA, header, focus rings
 *   --peach-* (тёплый персик #fb923c) — акценты Эммы: bubble, voice btn, secondary CTA, progress fill
 * ============================================================================= */

:root {
  --brand-50:  #eef2ff;
  --brand-100: #e0e7ff;
  --brand-300: #a5b4fc;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;

  --peach-50:  #fff7ed;
  --peach-100: #fef3c7;
  --peach-200: #fed7aa;
  --peach-400: #fb923c;
  --peach-500: #f97316;
  --peach-600: #ea580c;

  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-500: #64748b;
  --slate-700: #334155;
  --slate-900: #0f172a;

  --success: #10b981;
  --warning: #f59e0b;
  --error:   #ef4444;

  --bubble-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
                   0 1px 3px rgba(15, 23, 42, 0.06);
}

/* v3.1.3: восстанавливаем естественный скролл — body скроллится сам внутри iframe.
   overscroll-behavior-y: auto разрешает передачу скролла на родительскую KWIGA-страницу
   на краях контента (видео-iframe того же урока ведёт себя точно так же).
   touch-action: pan-y явно разрешает вертикальный pan на мобильных. */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
body {
  overflow-y: auto;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 25%, #c7d2fe 75%, #a5b4fc 100%);
}

/* =============================================================================
 * v2.2 — Трёхколоночный layout
 *   <1100px: только центральная #app (480px / 100% на мобильном)
 *   ≥1100px: sidebar-left (280) + #app (480) + sidebar-right (280), с gap 24
 * ============================================================================= */
#layout {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  padding: 24px 16px;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* v3.1.3: #app растёт под содержимое; скроллит body, не #app. */
#app {
  width: 480px;
  max-width: 100%;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.08);
  min-height: 100vh;
}

#screen-container {
  flex: 1 1 auto;
}

/* По умолчанию sidebar'ы скрыты — показываются на ≥1100px */
.sidebar { display: none; }

@media (min-width: 1100px) {
  .sidebar {
    display: flex;
    width: 280px;
    flex-shrink: 0;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 24px;
  }
}

.sidebar-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  animation: emma-bubble-in 0.3s ease-out;
}

.sidebar-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px 10px;
  border-bottom: 1px solid #f1f5f9;
}
.sidebar-card-icon { font-size: 20px; line-height: 1; }
.sidebar-card-header h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* v3.1.1: фикс возможного фиолетового артефакта (browser default, link inheritance и т.п.) */
  background: none;
  background-color: transparent;
  outline: none;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.sidebar-card-body { padding: 14px 18px 18px; }

.sidebar-text {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #475569;
}
.sidebar-text-small {
  font-size: 12px;
  color: #94a3b8;
  margin: 8px 0 0;
}

.sidebar-cta-button {
  width: 100%;
  padding: 11px 16px;
  background: var(--peach-400);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, transform 0.08s;
  font-family: inherit;
}
.sidebar-cta-button:hover  { background: var(--peach-600); }
.sidebar-cta-button:active { transform: scale(0.98); }

/* --- Левый блок: Цей урок --- */
.lesson-title {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 8px;
  line-height: 1.35;
}
.lesson-can-do-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}
.lesson-can-do-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
  font-size: 12.5px;
  color: #475569;
  line-height: 1.4;
}
.lesson-can-do-item::before {
  content: "✓";
  flex-shrink: 0;
  color: var(--peach-400);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
}
.lesson-teacher {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
  font-size: 12.5px;
  color: #64748b;
}
.lesson-teacher-icon { font-size: 18px; line-height: 1; }

/* --- Правый блок: Підказка від Вікторії --- */
.victoria-hint-quote {
  font-style: italic;
  color: #1e293b;
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 12px;
  padding-left: 12px;
  border-left: 3px solid var(--peach-400);
}
.victoria-hint-timestamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--brand-600);
  font-weight: 500;
}

/* =============================================================================
 * Адаптивность v2.2
 * ============================================================================= */

/* Tablet 520–1099px: только #app, sidebars скрыты, gradient body виден по бокам */
@media (max-width: 1099px) {
  #layout { padding: 16px 8px; }
}

/* Мобильный <520px: #app во всю ширину, без скруглений, белый фон body */
@media (max-width: 519px) {
  body { background: #fff; }
  #layout {
    padding: 0;
    align-items: stretch;
    max-width: none;
  }
  #app {
    /* v3.1.3: на мобильном — во всю ширину, без скруглений. Скроллит body как обычно. */
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    box-shadow: none;
    min-height: 100vh;
  }
}

/* =============================================================================
 * Screen transitions — state machine: один экран показан, остальные скрыты
 * ============================================================================= */
/* v3.1.5: плавные iOS-style переходы (fade + slide 8px).
   .screen — базовый transition таргет. Видимость через .active (display: flex).
   .screen-entering / .screen-leaving — временные состояния анимации, навешиваются
   и снимаются JS-ом в showScreen() с force reflow для гарантии trigger transition. */
.screen {
  display: none;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 220ms ease-out, transform 220ms ease-out;
}
.screen.active,
.screen.screen-entering,
.screen.screen-leaving {
  display: flex;
}

/* v2.2.1: вертикальное центрирование на коротких экранах (welcome, brief, verdict, limit).
   Длинные экраны (menu, exercise) остаются top-aligned. */
.screen.active.screen-short,
.screen.screen-entering.screen-short,
.screen.screen-leaving.screen-short {
  justify-content: center;
  min-height: 100%;
}

/* v3.1.5: входное состояние — невидимый, снизу на 8px */
.screen.screen-entering {
  opacity: 0;
  transform: translateY(8px);
}
/* v3.1.5: выходное состояние — невидимый, вверх на 8px, без обработки кликов */
.screen.screen-leaving {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

/* prefers-reduced-motion обрабатывается общим блоком в конце файла */

/* =============================================================================
 * Bubbles: Emma (peach) и студент (indigo)
 * ============================================================================= */
.emma-bubble {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: min(95%, 620px);
  margin-left: 0;
  animation: emma-bubble-in 0.22s ease-out;
}
.emma-bubble.user {
  margin-left: auto;
  flex-direction: row-reverse;
}

@keyframes emma-bubble-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.emma-avatar-mini {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--peach-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}
.emma-bubble.user .emma-avatar-mini {
  background: var(--slate-200);
}

.emma-bubble-content {
  background: var(--peach-50);
  border-left: 3px solid var(--peach-400);
  border-radius: 14px;
  padding: 11px 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--slate-900);
  box-shadow: var(--bubble-shadow);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.emma-bubble.user .emma-bubble-content {
  background: linear-gradient(135deg, var(--brand-600) 0%, #7c3aed 100%);
  color: #fff;
  border-left: none;
  border-right: 3px solid var(--brand-700);
}

/* Маркдаун в bubble */
.emma-bubble-content strong {
  font-weight: 700;
  color: var(--brand-700);
}
.emma-bubble.user .emma-bubble-content strong { color: #fff; }

.emma-bubble-content em {
  font-style: italic;
  color: var(--slate-500);
}
.emma-bubble-content code {
  font-family: ui-monospace, SFMono-Regular, "Menlo", "Consolas", monospace;
  background: var(--slate-100);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.875em;
  color: var(--slate-700);
}

/* =============================================================================
 * Кнопки
 * ============================================================================= */
.btn-primary {
  background-image: linear-gradient(180deg, var(--brand-600) 0%, var(--brand-700) 100%);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 20px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: filter 0.12s, transform 0.08s, box-shadow 0.12s;
  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.25);
}
.btn-primary:hover:not(:disabled)  { filter: brightness(1.08); box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3); }
.btn-primary:active:not(:disabled) { transform: scale(0.97); }
.btn-primary:disabled               { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
  background: #fff;
  color: var(--peach-600);
  font-weight: 600;
  font-size: 14px;
  padding: 11px 18px;
  border-radius: 12px;
  border: 1.5px solid var(--peach-400);
  cursor: pointer;
  transition: background 0.12s, transform 0.08s, color 0.12s;
}
.btn-secondary:hover:not(:disabled)  { background: var(--peach-50); }
.btn-secondary:active:not(:disabled) { transform: scale(0.97); }
.btn-secondary:disabled               { opacity: 0.5; cursor: not-allowed; }

/* v2.2.1: персиковая кнопка куратора, унифицированная с sidebar-cta-button.
   Раньше тут был розовый pink→magenta градиент из v1. */
.btn-curator {
  align-self: flex-start;
  background: var(--peach-400);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 11px 20px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.08s;
  box-shadow: 0 2px 8px rgba(251, 146, 60, 0.3);
  font-family: inherit;
}
.btn-curator:hover  { background: var(--peach-600); }
.btn-curator:active { transform: scale(0.98); }

/* Кнопка «Послухай» — outline персиком, hover fill */
.btn-voice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: var(--peach-600);
  font-weight: 500;
  font-size: 13px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--peach-400);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, transform 0.08s;
}
.btn-voice:hover  { background: var(--peach-400); color: #fff; }
.btn-voice:active { transform: scale(0.96); }
.btn-voice.speaking { background: var(--peach-400); color: #fff; }
.btn-voice:disabled { opacity: 0.5; cursor: not-allowed; }

/* =============================================================================
 * Exercise cards (меню упражнений)
 * ============================================================================= */
.exercise-card {
  display: flex;
  gap: 12px;
  padding: 13px 14px;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.12s, transform 0.08s, box-shadow 0.12s;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
  position: relative;
}
.exercise-card:hover  { border-color: var(--brand-300); box-shadow: var(--bubble-shadow); }
.exercise-card:active { transform: scale(0.99); }

.exercise-card-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--brand-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.exercise-card-body { flex: 1; min-width: 0; }
.exercise-card-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--slate-900);
  line-height: 1.3;
  margin-bottom: 3px;
}
.exercise-card-desc {
  font-size: 12px;
  color: var(--slate-500);
  line-height: 1.4;
}

/* ⭐ для priority high — справа сверху */
.exercise-card.priority-high::after {
  content: '⭐';
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 14px;
}

/* ✓ для выполненных сегодня — слева на иконке */
.exercise-card.completed .exercise-card-icon {
  background: var(--success);
  color: #fff;
}
.exercise-card.completed .exercise-card-icon::before {
  content: '✓';
  font-size: 22px;
  font-weight: 700;
}
.exercise-card.completed .exercise-card-icon > span { display: none; }
.exercise-card.completed { opacity: 0.75; }

/* =============================================================================
 * Progress bar — градиент индиго → персик
 * ============================================================================= */
.progress-bar {
  background: var(--slate-200);
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
}
.progress-fill {
  background: linear-gradient(90deg, var(--brand-500) 0%, var(--peach-400) 100%);
  height: 100%;
  transition: width 0.4s ease;
  width: 0%;
}

/* =============================================================================
 * Поле ввода в упражнении
 * ============================================================================= */
.exercise-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--slate-200);
  border-radius: 12px;
  font-size: 16px; /* >= 16px чтобы iOS не зумил */
  background: #fff;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.exercise-input:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}
.exercise-input:disabled { background: var(--slate-100); opacity: 0.7; }

/* Большой prompt в упражнении (цифра, слово, ситуация) */
.exercise-prompt {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  color: var(--slate-900);
  padding: 16px;
  background: var(--slate-100);
  border-radius: 14px;
  line-height: 1.2;
}
.exercise-prompt-sm {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
  padding: 14px 16px;
}

/* =============================================================================
 * Inline feedback после ответа: ✅ Так! / 🟡 Майже!
 * ============================================================================= */
.feedback {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  animation: emma-bubble-in 0.18s ease-out;
}
.feedback.correct {
  background: #d1fae5;
  color: #065f46;
  border-left: 3px solid var(--success);
}
.feedback.almost {
  background: #fef3c7;
  color: #92400e;
  border-left: 3px solid var(--warning);
}
.feedback.wrong {
  background: #fee2e2;
  color: #991b1b;
  border-left: 3px solid var(--error);
}

/* =============================================================================
 * Focus rings (accessibility)
 * ============================================================================= */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 6px;
}

/* =============================================================================
 * Mobile
 * ============================================================================= */
@media (max-width: 480px) {
  header h1            { font-size: 15px; }
  #attempts-counter    { font-size: 11px; padding: 3px 8px; }
  .emma-bubble-content { font-size: 14px; padding: 10px 12px; }
  .btn-primary         { font-size: 14px; padding: 11px 18px; }
  .btn-secondary       { font-size: 13px; padding: 10px 16px; }
  .exercise-prompt     { font-size: 24px; padding: 14px; }
  .exercise-prompt-sm  { font-size: 16px; padding: 12px 14px; }
}

/* =============================================================================
 * v2.1 — Multiple choice buttons (listen_and_choose, read_and_choose)
 * ============================================================================= */
.choice-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  background: #fff;
  border: 2px solid var(--slate-200);
  border-radius: 12px;
  font-size: 18px;
  font-weight: 500;
  color: var(--slate-900);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.08s;
  min-height: 56px;
  user-select: none;
  font-family: inherit;
}
.choice-button:hover:not(:disabled) {
  border-color: var(--peach-400);
  background: var(--peach-50);
}
.choice-button:active:not(:disabled) { transform: scale(0.98); }
.choice-button.selected {
  border-color: var(--peach-400);
  background: var(--peach-100);
  color: #c2410c;
}
.choice-button.correct {
  border-color: var(--success);
  background: #d1fae5;
  color: #065f46;
  animation: pulse-correct 0.4s ease;
}
.choice-button.wrong {
  border-color: var(--error);
  background: #fee2e2;
  color: #991b1b;
  animation: shake 0.3s ease;
}
.choice-button:disabled {
  cursor: not-allowed;
}

.choices-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 8px 0;
}

@keyframes pulse-correct {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* =============================================================================
 * v2.1 — Word pills для word_bingo phase 1 (self-assessment)
 * ============================================================================= */
.word-pill {
  display: inline-flex;
  padding: 10px 16px;
  background: var(--slate-100);
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  font-size: 15px;
  color: var(--slate-700);
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
  font-family: inherit;
  font-weight: 500;
}
.word-pill:hover { background: var(--slate-200); }
.word-pill:active { transform: scale(0.97); }
.word-pill.selected {
  background: var(--success);
  border-color: #059669;
  color: #fff;
}

.words-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
}

/* =============================================================================
 * v2.1 — Study card (word_bingo phase 3 + review)
 * ============================================================================= */
.study-card {
  text-align: center;
  padding: 16px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.study-card-word {
  font-size: 44px;
  font-weight: 700;
  color: var(--brand-600);
  margin: 16px 0 4px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.study-card-translation {
  font-size: 20px;
  color: var(--slate-700);
  margin: 4px 0;
}
.study-card-digit {
  font-size: 16px;
  color: var(--slate-500);
}
.study-card-hint {
  background: var(--peach-100);
  border-left: 4px solid var(--peach-400);
  padding: 11px 14px;
  border-radius: 8px;
  text-align: left;
  font-size: 14px;
  color: #78350f;
  margin: 12px 0;
  line-height: 1.45;
}
.study-card-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
}

/* =============================================================================
 * v2.1 — Big digit для read_and_choose
 * ============================================================================= */
.big-digit {
  font-size: 88px;
  font-weight: 800;
  color: var(--brand-600);
  text-align: center;
  margin: 16px 0 8px;
  letter-spacing: -0.04em;
  line-height: 1;
}

/* Mobile подстройки для v2.1 */
@media (max-width: 480px) {
  .choice-button   { font-size: 16px; min-height: 52px; padding: 14px 10px; }
  .study-card-word { font-size: 36px; }
  .study-card-translation { font-size: 18px; }
  .big-digit       { font-size: 72px; }
  .word-pill       { font-size: 14px; padding: 8px 14px; }
}

/* =============================================================================
 * v3.0 — Lesson completion screen
 * ============================================================================= */
.lesson-level-emoji {
  font-size: 96px;
  line-height: 1;
  text-align: center;
  margin: 8px 0 4px;
}
.lesson-level-emoji.animate-pop {
  animation: emma-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes emma-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); }
}

.lesson-level-name {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  color: var(--brand-600);
  margin: 0;
  letter-spacing: -0.02em;
  animation: emma-bubble-in 0.25s ease-out 0.2s both;
}

.lesson-level-message {
  text-align: center;
  font-size: 15px;
  color: var(--slate-700);
  margin: 0 8px;
  line-height: 1.5;
  animation: emma-bubble-in 0.25s ease-out 0.4s both;
}

.lesson-completion-title {
  text-align: center;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-500);
  animation: emma-bubble-in 0.25s ease-out 0.5s both;
}

.lesson-completion-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 6px 0 4px;
  text-align: center;
  justify-content: center;
}
.lesson-completion-divider::before,
.lesson-completion-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--slate-200);
}

.lesson-completion-exercises {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 4px;
  animation: emma-bubble-in 0.25s ease-out 0.6s both;
}

.completion-exercise-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 14px;
  background: #f8fafc;
  border-radius: 10px;
  font-size: 14px;
  color: var(--slate-700);
}

.completion-exercise-status {
  font-weight: 600;
  font-size: 13px;
  color: var(--slate-900);
}

.lesson-completion-avg {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-700);
  margin: 8px 0 4px;
  animation: emma-bubble-in 0.25s ease-out 0.7s both;
}

/* Badge "🚀 Новий рівень!" — pulse */
#lesson-completion-badge {
  animation: badge-pulse 1.2s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.05); opacity: 0.95; }
}

/* =============================================================================
 * v3.0 — Sidebar progress card
 * ============================================================================= */
.progress-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
}
.progress-icon { font-size: 16px; line-height: 1; text-align: center; }
.progress-label { color: var(--slate-700); }
.progress-detail {
  color: var(--slate-500);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.progress-bar-mini {
  height: 5px;
  background: var(--slate-200);
  border-radius: 3px;
  margin-top: 12px;
  overflow: hidden;
}
.progress-bar-mini > .progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-500), var(--peach-400));
  border-radius: 3px;
  transition: width 0.4s ease;
}

.progress-counter {
  margin-top: 8px;
  font-size: 12px;
  color: var(--slate-500);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* =============================================================================
 * v3.1 — Skills sidebar block (заменил can_do_list)
 * ============================================================================= */
.skills-intro,
.skills-outro {
  font-size: 13px;
  color: var(--slate-700);
  line-height: 1.45;
  margin: 0 0 10px;
}
.skills-outro { margin: 12px 0 0; color: #92400e; }

.skills-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.skill-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  font-size: 12.5px;
  color: var(--slate-700);
  line-height: 1.4;
}
.skill-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #d1fae5;
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  margin-top: 1px;
}
.teacher-credit {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
  font-size: 12.5px;
  color: var(--slate-500);
}

/* =============================================================================
 * v3.1 — Short praise screen (1.5s overlay-style между упражнениями)
 * ============================================================================= */
#screen-short-praise {
  text-align: center;
  gap: 12px;
}
.praise-emoji {
  font-size: 88px;
  line-height: 1;
}
.praise-emoji.animate-pop {
  animation: emma-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.praise-text {
  font-size: 30px;
  font-weight: 700;
  color: var(--brand-700);
  margin-top: 4px;
}
.praise-score {
  font-size: 16px;
  color: var(--slate-500);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

/* =============================================================================
 * v3.1 — 3-zone menu (interrupted state)
 * ============================================================================= */
.menu-zone {
  margin-bottom: 16px;
}
.menu-zone-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin: 0 0 8px;
  padding: 0 4px;
}
.menu-zone-completed .menu-zone-title { color: #059669; }
.menu-zone-current   .menu-zone-title { color: var(--peach-600); }
.menu-zone-locked    .menu-zone-title { color: var(--slate-300); }

.menu-exercises { display: flex; flex-direction: column; gap: 8px; }

.exercise-card-v31 {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  transition: transform 0.08s, box-shadow 0.12s;
}
.exercise-card-completed {
  background: #f0fdf4;
  border: 1px solid #d1fae5;
}
.exercise-card-current {
  background: #fff7ed;
  border: 2px solid var(--peach-400);
  box-shadow: 0 4px 12px rgba(251, 146, 60, 0.15);
}
.exercise-card-locked {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  opacity: 0.55;
}

.exercise-status-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  flex-shrink: 0;
}
.status-perfect { background: var(--success); }
.status-good    { background: #fbbf24; }
.status-current { background: var(--peach-400); }
.status-locked  { background: #cbd5e1; }

.exercise-info { min-width: 0; }
.exercise-info h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--slate-900);
}
.exercise-info .exercise-result {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--slate-500);
}

.btn-continue {
  padding: 9px 16px !important;
  font-size: 13px !important;
  white-space: nowrap;
}

/* =============================================================================
 * v3.1 — Lesson results screen
 * ============================================================================= */
.results-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--peach-50), var(--brand-50));
  border-radius: 14px;
}
.results-level-emoji {
  font-size: 56px;
  line-height: 1;
  flex-shrink: 0;
}
.results-header-text h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-700);
}
.results-avg {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--slate-700);
  font-variant-numeric: tabular-nums;
}

.results-section-title {
  margin: 12px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.results-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.result-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 11px 14px;
  border-radius: 10px;
  background: #f8fafc;
  font-size: 14px;
}
.result-row .result-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--slate-200);
  color: var(--slate-500);
  font-weight: 700;
  font-size: 13px;
}
.result-row-perfect .result-icon { background: var(--success); color: #fff; }
.result-row-good    .result-icon { background: #fbbf24; color: #fff; }
.result-row-improve .result-icon { background: #fb923c; color: #fff; }
.result-name { color: var(--slate-700); }
.result-detail {
  font-size: 13px;
  color: var(--slate-900);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.results-improve-section { margin-top: 8px; }
.improve-hint {
  font-size: 13px;
  color: var(--slate-500);
  margin: 0 0 10px;
  line-height: 1.4;
}
.improve-list { display: flex; flex-direction: column; gap: 8px; }
.improve-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid var(--peach-200);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.12s, transform 0.08s, box-shadow 0.12s;
  font-family: inherit;
  text-align: left;
}
.improve-card:hover  { border-color: var(--peach-400); box-shadow: 0 2px 8px rgba(251, 146, 60, 0.15); }
.improve-card:active { transform: scale(0.98); }
.improve-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.improve-info strong { color: var(--slate-900); font-size: 14px; }
.improve-info span   { font-size: 12px; color: var(--slate-500); font-variant-numeric: tabular-nums; }
.improve-arrow {
  font-size: 20px;
  color: var(--peach-500);
  font-weight: 700;
}

/* v3.1: Completion screen footer text (нейтральная констатация) */
.lesson-completion-footer {
  font-size: 13px;
  color: var(--slate-500);
  text-align: center;
  line-height: 1.5;
  margin: 8px 4px 0;
}

/* v3.1.4: motivational блок поверх меню — показывается JS-ом если урок завершён.
   Без рамки/фона/обводки — простой текст по центру. */
.lesson-complete-motivational {
  text-align: center;
  padding: 16px 16px 8px;
  margin-bottom: 8px;
  background: none;
  border: none;
  box-shadow: none;
}
.motivational-emoji {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 6px;
}
.motivational-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-600);
  margin-bottom: 6px;
}
.motivational-line {
  font-size: 14px;
  color: #374151;
  line-height: 1.45;
  margin: 2px 0;
}

/* v3.1.1: Мотивационный блок на lesson-results — БЕЗ РАМКИ, без фона, без обводки.
   Простой текст в индиго, чтобы не выглядел как кнопка/карточка. */
.lesson-completion-message {
  text-align: center;
  margin: 32px 20px 24px;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}
.lesson-completion-message h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-600);
  margin: 0 0 10px;
  background: none;
  border: none;
  text-transform: none;
  letter-spacing: 0;
}
.lesson-completion-message p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate-700);
  margin: 4px 0;
  background: none;
  border: none;
}

/* v3.1: Header level badge — clickable */
.header-badge-btn {
  border: none;
  font-family: inherit;
  transition: transform 0.12s, box-shadow 0.12s;
}
.header-badge-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.18);
}

/* =============================================================================
 * Reduced motion
 * ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  /* v3.1.5: убираем fade+slide для тех, кто включил OS Reduce Motion */
  .screen,
  .screen.screen-entering,
  .screen.screen-leaving { transition: none !important; transform: none !important; }
  .screen.active,
  .emma-bubble,
  .feedback,
  .progress-fill,
  .btn-primary,
  .btn-secondary,
  .btn-curator,
  .btn-voice,
  .exercise-card,
  .choice-button,
  .word-pill,
  .lesson-level-emoji.animate-pop,
  .lesson-level-name,
  .lesson-level-message,
  .lesson-completion-title,
  .lesson-completion-exercises,
  .lesson-completion-avg,
  #lesson-completion-badge {
    animation: none !important;
    transition: none !important;
  }
}