/* ==========================================
   БАЗОВЫЕ СТИЛИ И ПЕРЕМЕННЫЕ
   Оболочка скопирована из Cabinet-schulte-table (визуальный эталон, §2.1
   техплана). Значения не «похожие», а те же самые — расхождения Fast Words
   (коммит 29addea) не повторять.
   Бренд MindWorld: основной цвет #FF7C00, фон #FDFCF5, шрифт Montserrat.
   ========================================== */

:root {
  --primary: #ff7c00;
  --primary-hover: #e06600;
  --secondary: #4a90e2;
  --success: #4caf50;
  --error: #f44336;
  --warning: #ff9800;
  --text-primary: #2c3e50;
  --text-secondary: #7d733a;
  --bg-light: #fdfcf5;
  --bg-white: #ffffff;
  --border: #e0e0e0;
  --shadow: rgba(0, 0, 0, 0.1);
  --radius: 16px;
  --spacing: 1rem;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text-primary);
  background: var(--bg-light);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ==========================================
   HEADER
   ========================================== */

.app-header {
  background: var(--primary);
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 8px var(--shadow);
}

.app-header__brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.app-header__logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.app-header__titles {
  display: flex;
  flex-direction: column;
}

/* Baloo 2 — единственное место во всём тренажёре, где не Montserrat.
   Ровно как в эталоне: тег <h1>, 1.6rem, без явного font-weight (жирность
   держится на браузерном дефолте <h1> и на том, что Baloo 2 подключён
   единственным начертанием wght@600). Fast Words здесь ошибся дважды —
   был <div> вместо <h1> и Montserrat вместо Baloo 2. */
.app-header__title {
  font-family: "Baloo 2", cursive;
  font-size: 1.6rem;
  color: var(--bg-white);
  margin: 0;
  line-height: 1.2;
}

.app-header__tagline {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 400;
  margin: 0.25rem 0 0 0;
}

.app-header__languages {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 50px;
  padding: 4px;
}

.language-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 1.2rem;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.25s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.language-btn:hover {
  color: white;
  background: rgba(255, 255, 255, 0.15);
}

.language-btn--active {
  background: var(--bg-white) !important;
  color: var(--primary) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ==========================================
   MAIN CONTAINER / SCREEN
   ========================================== */

.app-main {
  flex: 1;
  padding: 2rem 1rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.screen {
  width: 100%;
  max-width: 720px;
  background: var(--bg-white);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(255, 124, 0, 0.15);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.screen__header { display: flex; flex-direction: column; gap: 4px; }
.screen__title { margin: 0; font-size: 1.5rem; }
.screen__description { margin: 0; color: var(--text-secondary); }
.screen__body,
.screen__content { display: flex; flex-direction: column; gap: 20px; }
.screen__footer { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }

/* Текст заглушки на экранах, которые наполняются в следующих PR.
   Цвет и размер — из оболочки, новых оттенков не вводим. */
.screen__stub {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

/* ==========================================
   STEP INDICATOR (settings → confirmation → game → results)
   ========================================== */

.step-indicator__list {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  gap: 12px;
}
.step-indicator__item { display: flex; align-items: center; gap: 8px; opacity: 0.5; }
.step-indicator__item--active,
.step-indicator__item--completed { opacity: 1; }
.step-indicator__number {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; flex-shrink: 0;
}
.step-indicator__label { font-size: 0.85rem; color: var(--text-secondary); }

/* ==========================================
   HOME (экран-хаб)
   ========================================== */

/* Только раскладка: кнопки те же самые .btn--primary из оболочки,
   новых цветов, радиусов и шрифтов не вводим (§2.1 техплана). */
.home-modes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* ==========================================
   ПРОГРЕСС НА ХАБЕ (§4, §12)
   Оттенки статусов — только существующие переменные оболочки, новых не вводим.
   «Учу» и «Нужно повторить» не берут --primary и --warning вместе: #ff7c00 и
   #ff9800 в точке 8 px неразличимы. Взяты --warning (жёлтый, как 🟡 в §9) и
   --error (красный — глагол ошибочный, его надо повторить).
   ========================================== */

.home-progress {
  background: var(--bg-light);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}
.home-progress__value { font-size: 1.6rem; font-weight: 800; color: var(--primary); }

.home-legend {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px; font-size: 0.85rem; color: var(--text-secondary);
}
.home-legend__item { display: inline-flex; align-items: center; gap: 6px; }

.block-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
}
.block-dot--learning { background: var(--warning); }
.block-dot--review { background: var(--error); }
.block-dot--known { background: var(--success); }

.block-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
}

.block-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 6px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg-white);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.block-card:hover { border-color: var(--primary); }
/* Рекомендуемый блок — первый, где остались новые (§4) */
.block-card--recommended { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(255, 124, 0, 0.2); }
.block-card__number { font-size: 0.95rem; line-height: 1.2; }
.block-card__dots {
  display: grid;
  grid-template-columns: repeat(5, 8px);
  gap: 3px;
  justify-content: center;
}

/* ==========================================
   СВОЙ СПИСОК ГЛАГОЛОВ (§4)
   ========================================== */

.verb-list { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; }
.verb-list__block { border: 2px solid var(--border); border-radius: 10px; }
.verb-list__title {
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.verb-list__title::-webkit-details-marker { display: none; }
.verb-list__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  padding: 0 14px 12px;
}

.checkbox-label {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; font-size: 0.95rem;
}
.checkbox-label input { accent-color: var(--primary); }

/* Пустой фильтр «Какие» выключен и заметно тусклее (§4) */
.radio-label--disabled { opacity: 0.4; cursor: not-allowed; }

/* ==========================================
   CONFIRMATION SCREEN
   ========================================== */

.confirmation-list { display: flex; flex-direction: column; gap: 10px; }
.confirmation-list__item {
  display: flex; justify-content: space-between;
  padding: 10px 16px; background: var(--bg-light); border-radius: 10px;
}
.confirmation-list__label { color: var(--text-secondary); }
.confirmation-list__value { font-weight: 700; }
.form__actions { display: flex; justify-content: flex-end; gap: 12px; }

/* ==========================================
   BUTTONS
   ========================================== */

.btn {
  border: none; border-radius: var(--radius); padding: 12px 24px;
  font-weight: 700; font-size: 1rem; cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-hover); }
.btn--secondary { background: transparent; color: var(--primary-hover); border: 2px solid var(--primary); }
/* btn--large в эталоне стоит ровно на одной кнопке — «Далі» на экране
   settings. Шире не применяем (на этом ошибся Fast Words). */
.btn--large { padding: 14px 32px; font-size: 1.1rem; align-self: flex-start; }
.btn--exit {
  background: transparent; color: var(--text-secondary);
  border: 2px solid var(--border); align-self: center;
  margin-top: 8px;
}

/* ==========================================
   ФОРМЫ НА ЭКРАНЕ НАСТРОЕК
   Только компоненты оболочки: .form-group / .radio-group из эталона.
   ========================================== */

.form-group { display: flex; flex-direction: column; gap: 8px; border: none; }
/* Класс с display перебивает браузерное правило [hidden] { display: none },
   поэтому скрытие задаём явно — иначе «Мой список» показывался вместе
   с блоками. */
.form-group[hidden] { display: none; }
.form-group__label { font-weight: 600; padding: 0; }
.form-group__hint { margin: 0; font-size: 0.85rem; color: var(--text-secondary); }

.radio-group { display: flex; gap: 16px; flex-wrap: wrap; }
.radio-label {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; font-size: 0.95rem;
}
.radio-label input { accent-color: var(--primary); }

/* Плитки блоков. Радиус, цвета и шрифт — те же, что у .btn оболочки,
   меняется только размер: цифра от 1 до 15 в квадрате кнопки не нуждается
   в padding 12px 24px. */
.chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 8px;
}
.chip {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 10px 0;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: var(--bg-white);
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.chip:hover { border-color: var(--primary); }
.chip--on { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip-grid__all { align-self: flex-start; }

.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn:disabled:hover { transform: none; }

/* ==========================================
   ИГРОВОЙ ЭКРАН: СЧЁТЧИК И ПОЛОСКА
   ========================================== */

.game-status {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-light); border-radius: 12px; padding: 12px;
}
.game-status__value { font-weight: 700; flex-shrink: 0; }
.progress-bar {
  flex: 1; height: 8px; border-radius: 50px;
  background: var(--border); overflow: hidden;
}
.progress-bar__fill {
  height: 100%; width: 0;
  background: var(--primary);
  transition: width 0.25s ease;
}

.game-stage { display: flex; flex-direction: column; gap: 20px; align-items: stretch; }

/* ==========================================
   КАРТОЧКА ГЛАГОЛА (§6.1)
   ========================================== */

.card {
  background: var(--bg-light);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease;
}
.card:hover, .card:focus-visible { border-color: var(--primary); }
.card--flipped { cursor: default; }

.card__face { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.card__face--back { display: none; }
.card--flipped .card__face--front { display: none; }
.card--flipped .card__face--back { display: flex; }

.card__emoji { font-size: 3rem; line-height: 1; }
.card__word { font-size: 2rem; font-weight: 700; letter-spacing: 1px; }

.card__chain {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: baseline; gap: 8px;
  font-size: 1.5rem; font-weight: 700;
}
/* Форма, которую в этой сессии не спрашивают, показывается бледной,
   а не прячется: ученик всё равно видит полную цепочку (§6.1). */
.card__form--dim { opacity: 0.35; }
.card__dash { color: var(--text-secondary); }

.card__translation { font-size: 1.1rem; color: var(--text-secondary); }
.card__note {
  font-size: 0.85rem; color: var(--text-secondary);
  background: var(--bg-white); border-radius: 10px; padding: 8px 12px;
}

.card__tools { display: flex; align-items: center; gap: 12px; }
.card__hint { margin: 0; text-align: center; font-size: 0.85rem; color: var(--text-secondary); }

.card__star {
  background: none; border: none; cursor: pointer;
  font-size: 1.3rem; line-height: 1;
  filter: grayscale(1); opacity: 0.5;
  transition: filter 0.15s ease, opacity 0.15s ease;
}
.card__star--on { filter: none; opacity: 1; }

.card-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Кнопка озвучки. Скрывать её не нужно классом — модуль просто не создаёт
   её, если английского голоса нет (§10). */
.speak-btn {
  background: none; border: none; cursor: pointer;
  font-size: 1.3rem; line-height: 1; padding: 4px;
}

/* ==========================================
   ЗАДАНИЯ НА УЗНАВАНИЕ
   ========================================== */

.task { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.task__question { font-size: 2rem; font-weight: 700; letter-spacing: 1px; }
.task__prompt { margin: 0; color: var(--text-secondary); }

.task__options { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.option {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 1rem;
  padding: 12px 24px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background: var(--bg-white);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.option:hover:not(:disabled) { border-color: var(--primary); }
.option:disabled { cursor: default; }
/* Верно/неверно — цветами оболочки (--success / --error), новых не вводим */
.option--correct { border-color: var(--success); background: rgba(76, 175, 80, 0.15); }
.option--wrong { border-color: var(--error); background: rgba(244, 67, 54, 0.12); }

.task__feedback {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: wrap;
  background: var(--bg-light); border-radius: 12px; padding: 12px 16px;
  width: 100%;
}
.task__chain { font-weight: 700; }

/* ==========================================
   ЗАДАНИЯ ЭТАПА 2 (§6.2)
   Ни одного нового цвета, шрифта и стиля кнопки: всё на переменных
   оболочки и на существующих .btn / .option.
   ========================================== */

/* Цепочка форм в заданиях: «найди ошибку» и «пропуск» */
.task__chain--broken,
.task__chain--gapped {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px;
  font-size: 1.4rem;
}
.task__form { font-weight: 700; }
/* Неверная форма — зачёркнута цветом ошибки из оболочки */
.task__form--broken { color: var(--error); text-decoration: line-through; }
.task__dash { color: var(--text-secondary); }

.task__question--translation { font-size: 1.5rem; letter-spacing: 0; }

/* Вердикт после письменного ответа */
.task__verdict { font-weight: 700; }
.task__verdict--ok { color: var(--success); }
.task__verdict--no { color: var(--error); }

/* ---------- поля ввода ---------- */

.write-fields { display: flex; flex-direction: column; gap: 12px; width: 100%; }

.write-field { display: flex; align-items: center; gap: 10px; }
.write-field__label {
  font-weight: 700; color: var(--text-secondary);
  min-width: 2.2em; flex-shrink: 0;
}
.write-field__input {
  flex: 1; min-width: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem; font-weight: 700;
  padding: 10px 14px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg-white);
  color: var(--text-primary);
}
.write-field__input:focus {
  outline: none;
  border-color: var(--primary);
}
.write-field__input:disabled { background: var(--bg-light); }
.write-field__input--correct { border-color: var(--success); background: rgba(76, 175, 80, 0.15); }
.write-field__input--wrong { border-color: var(--error); background: rgba(244, 67, 54, 0.12); }

/* Поле прямо в цепочке — узкое, по ширине слова */
.write-field--inline { display: inline-flex; }
.write-field--inline .write-field__input {
  width: 6.5em; flex: none;
  text-align: center;
  padding: 6px 10px;
}

.task__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- анаграмма ---------- */

.anagram-answer,
.anagram-bank {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.anagram-answer { min-height: 52px; }

.letter-tile {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2rem; font-weight: 700; text-transform: uppercase;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg-white);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s ease, opacity 0.15s ease;
}
.letter-tile:hover:not(:disabled) { border-color: var(--primary); }
/* Плитка, уже поставленная в ответ: остаётся на месте, но гаснет,
   чтобы не разъезжалась раскладка банка */
.letter-tile--used { opacity: 0.25; pointer-events: none; }
.letter-tile--placed { border-color: var(--primary); }
.letter-tile--empty { border-style: dashed; cursor: default; }
.letter-tile--correct { border-color: var(--success); background: rgba(76, 175, 80, 0.15); }
.letter-tile--wrong { border-color: var(--error); background: rgba(244, 67, 54, 0.12); }

/* ==========================================
   РЕЗУЛЬТАТЫ
   ========================================== */

.results-stars { display: flex; justify-content: center; gap: 8px; font-size: 2rem; }
.results-stars__item--off { filter: grayscale(1); opacity: 0.3; }
.results-praise { margin: 0; text-align: center; font-weight: 700; font-size: 1.1rem; }

.results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.result-card { background: var(--bg-light); border-radius: 12px; padding: 16px; text-align: center; }
.result-card__value { font-size: 1.6rem; font-weight: 800; }
.result-card__value--primary { color: var(--primary); }
.result-card__label { font-size: 0.85rem; color: var(--text-secondary); margin-top: 4px; }

.results-hard__title { margin: 0; font-size: 1rem; }
.results-hard { display: flex; flex-direction: column; gap: 8px; }
.results-hard__item {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--bg-light); border-radius: 10px; padding: 10px 16px;
}
.results-hard__chain { font-weight: 700; }
.results-hard__translation { color: var(--text-secondary); font-size: 0.9rem; }

/* Разбор ошибки контрольной (§7): глагол, ответ ученика, правильная цепочка */
.results-mistake { align-items: flex-start; }
.results-mistake__verb { font-weight: 700; flex-shrink: 0; }
.results-mistake__lines { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
/* Неверный ответ — цветом ошибки из оболочки, новых оттенков не вводим */
.results-mistake__given { color: var(--error); font-size: 0.9rem; }

/* Контрольная: вопрос без обратной связи (§6.3) */
.task--test .task__actions { justify-content: flex-end; }

/* ==========================================
   ХАБ: БЛОК ПРОГРЕССА
   ========================================== */

.home-progress { background: var(--bg-light); border-radius: 12px; padding: 16px; text-align: center; }
.home-progress__value { font-size: 1.6rem; font-weight: 800; color: var(--primary); }
.home-progress__label { font-size: 0.85rem; color: var(--text-secondary); margin-top: 4px; }

/* ==========================================
   FOOTER
   ========================================== */

.app-footer {
  text-align: center;
  padding: 1rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* ==========================================
   RESPONSIVE
   Единственный брейкпоинт эталона — 600px.
   ========================================== */

@media (max-width: 600px) {
  .app-header { padding: 0.75rem 1rem; flex-wrap: wrap; gap: 8px; }
  .app-header__title { font-size: 1.3rem; }
  .screen { padding: 20px; }
  .home-modes { grid-template-columns: 1fr; }
  .card { padding: 16px; }
  .card__emoji { font-size: 2.5rem; }
  .card__word, .task__question { font-size: 1.6rem; }
  .card__chain { font-size: 1.2rem; }
  /* На узком экране кнопки самооценки не растягиваем: при flex:1
     подпись «Пам’ятаю 👍» ломалась на две строки. */
  .card-actions .btn { padding: 12px 16px; }
  .results-grid { grid-template-columns: 1fr 1fr; }

  /* Задания этапа 2 на узком экране */
  .task__chain--broken,
  .task__chain--gapped { font-size: 1.1rem; gap: 6px; }
  .write-field--inline .write-field__input { width: 5em; }
  .letter-tile { width: 38px; height: 38px; font-size: 1.05rem; }
  .task__actions .btn { padding: 12px 20px; }

  /* Прогресс и блоки на узком экране */
  .block-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
  .home-legend { gap: 8px; font-size: 0.8rem; }
  .verb-list__items { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}