/* Экраны. Всё, что относится к одному конкретному месту приложения. */

/* ------------------------------------------------------------------ вход */

.auth-page {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--gap-lg) var(--page-pad);
}

.auth-card {
  width: min(420px, 100%);
  padding: var(--gap-xl) var(--gap-lg);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.auth-logo {
  font-size: 38px;
  line-height: 1;
  text-align: center;
}

.auth-switch {
  text-align: center;
  font-size: var(--size-caption);
  color: var(--text-muted);
}

/* --------------------------------------------------------------- главная */

.hero {
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
  padding: var(--gap-lg);
  border-radius: var(--radius-lg);
}

.hero-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-stats {
  display: flex;
  gap: var(--gap-lg);
  flex-wrap: wrap;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.stat-label {
  font-size: var(--size-micro);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  font-weight: 600;
}

@media (max-width: 520px) {
  .hero {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .hero .ring {
    align-self: center;
  }
}

/* ------------------------------------------------------------------ наборы */

.deck-card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding: var(--gap);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  color: inherit;
  transition: transform var(--slow) var(--ease-spring),
    border-color var(--fast) var(--ease);
}

.deck-card:hover {
  transform: translateY(-3px);
  border-color: var(--glass-edge-strong);
  text-decoration: none;
}

.deck-card-title {
  font-size: var(--size-section);
  font-weight: 620;
  letter-spacing: -0.01em;
  /* Название набора бывает длинным, но в плитке ему отведено две строки:
     иначе плитки в ряду перестают быть одного размера. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.deck-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--size-caption);
  color: var(--text-muted);
}

.deck-langs {
  font-family: var(--font-mono);
  font-size: var(--size-micro);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

/* -------------------------------------------------------------- один набор */

.mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--gap-sm);
}

.mode-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: var(--gap);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  color: inherit;
  transition: transform var(--slow) var(--ease-spring),
    border-color var(--fast) var(--ease);
}

.mode-card:hover {
  transform: translateY(-3px);
  border-color: var(--glass-edge-strong);
  text-decoration: none;
}

.mode-icon {
  font-size: 22px;
  line-height: 1;
}

.mode-name {
  font-weight: 620;
}

.mode-hint {
  font-size: var(--size-caption);
  color: var(--text-muted);
}

/* Строка карточки в списке набора: слово, перевод, уровень. */
.card-row {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: 12px 14px;
  border-bottom: 1px solid var(--glass-edge);
}

.card-row:last-child {
  border-bottom: 0;
}

.card-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.card-row-term {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-row-translation {
  font-size: var(--size-caption);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-row-marks {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  color: var(--text-faint);
  font-size: var(--size-caption);
}

.card-thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex: none;
  border: 1px solid var(--glass-edge);
}

/* ------------------------------------------------------------ тренировка */

.study-top {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  flex: none;
}

.study-progress {
  flex: 1;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--level-0);
  overflow: hidden;
}

.study-progress span {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width var(--slow) var(--ease);
}

.study-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap);
  min-height: 0;
}

/* Карточка тренировки. Переворот — настоящий, в трёх измерениях: у стекла
   есть толщина, и «перевернуть» его подменой текста было бы обманом. */
.flashcard {
  perspective: 1600px;
  flex: 1;
  min-height: 280px;
  display: flex;
}

.flashcard-inner {
  position: relative;
  flex: 1;
  transform-style: preserve-3d;
  transition: transform 520ms var(--ease-spring);
  cursor: pointer;
}

.flashcard[data-flipped="true"] .flashcard-inner {
  transform: rotateY(180deg);
}

.flashcard-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  padding: var(--gap-lg);
  border-radius: var(--radius-lg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow-y: auto;
  text-align: center;
}

.flashcard-face-back {
  transform: rotateY(180deg);
}

.term {
  font-size: var(--size-term);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.transcription {
  font-family: var(--font-mono);
  font-size: var(--size-section);
  color: var(--text-muted);
}

.card-image {
  max-height: min(30dvh, 220px);
  width: auto;
  border-radius: var(--radius);
  border: 1px solid var(--glass-edge);
  object-fit: contain;
}

/* Разделы обратной стороны: примеры и синонимы. Разделены линией, а не
   заголовками: заголовок «Примеры» над двумя строками занимает больше
   места, чем сами строки. */
.card-sections {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  text-align: left;
}

.card-section {
  padding: var(--gap-sm) var(--gap);
  border-radius: var(--radius-sm);
  background: var(--glass-fill-sunken);
}

.card-section-label {
  font-size: var(--size-micro);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 650;
  color: var(--text-faint);
  margin-bottom: 4px;
}

.card-section ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-section li {
  font-size: var(--size-caption);
  line-height: 1.5;
}

.synonym-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Варианты ответа */
.options {
  display: grid;
  gap: var(--gap-sm);
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .options {
    grid-template-columns: 1fr 1fr;
  }
}

.option {
  min-height: 60px;
  padding: 14px 18px;
  border-radius: var(--radius);
  text-align: left;
  font-size: var(--size-section);
  cursor: pointer;
  transition: transform var(--fast) var(--ease-spring),
    background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.option:hover:not(:disabled) {
  background: var(--glass-fill-strong);
  transform: translateY(-2px);
}

.option:disabled {
  cursor: default;
}

.option[data-state="correct"] {
  background: var(--positive-soft);
  border-color: var(--positive);
  color: var(--positive);
}

.option[data-state="wrong"] {
  background: var(--negative-soft);
  border-color: var(--negative);
  color: var(--negative);
  animation: shake 320ms var(--ease);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .option[data-state="wrong"] {
    animation: none;
  }
}

/* Отклик после ответа */
.verdict {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-sm);
  padding: var(--gap);
  border-radius: var(--radius);
  animation: rise var(--fast) var(--ease-spring);
}

.verdict-exact {
  background: var(--positive-soft);
  border: 1px solid var(--positive);
}

.verdict-typo {
  background: var(--warning-soft);
  border: 1px solid var(--warning);
}

.verdict-wrong {
  background: var(--negative-soft);
  border: 1px solid var(--negative);
}

.verdict-icon {
  font-size: 20px;
  line-height: 1.2;
  flex: none;
}

.verdict-title {
  font-weight: 620;
}

.verdict-answer {
  font-size: var(--size-section);
  font-weight: 600;
}

/* Игра «Собери пару» */
.match-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-sm);
  flex: 1;
  align-content: start;
}

@media (min-width: 620px) {
  .match-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.match-tile {
  min-height: 84px;
  padding: 12px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: 550;
  cursor: pointer;
  overflow-wrap: anywhere;
  font-size: var(--size-caption);
  transition: transform var(--fast) var(--ease-spring),
    opacity var(--slow) var(--ease), background var(--fast) var(--ease);
}

.match-tile[data-state="picked"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: scale(0.96);
}

.match-tile[data-state="wrong"] {
  background: var(--negative-soft);
  border-color: var(--negative);
  animation: shake 320ms var(--ease);
}

/* Собранная пара не исчезает мгновенно: короткая вспышка успеха и уход —
   иначе плитки просто пропадают, и непонятно, что произошло. */
.match-tile[data-state="done"] {
  background: var(--positive-soft);
  border-color: var(--positive);
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
  transition-delay: 120ms;
}

.match-timer {
  font-family: var(--font-mono);
  font-size: var(--size-section);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Итог занятия */
.summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  padding: var(--gap-xl) var(--gap-lg);
  text-align: center;
}

.summary-score {
  font-size: clamp(44px, 14vw, 72px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

/* ------------------------------------------------------------ правка карточки */

.pair-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--gap-sm);
  align-items: start;
}

@media (max-width: 560px) {
  .pair-row {
    grid-template-columns: 1fr auto;
  }
  .pair-row .pair-translation {
    grid-column: 1 / -1;
  }
}

/* Зона перетаскивания файла. Пунктир — единственное место в оформлении, где
   он уместен: он прямо говорит «сюда можно положить». */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 108px;
  padding: var(--gap);
  border: 1px dashed var(--glass-edge-strong);
  border-radius: var(--radius);
  background: var(--glass-fill-sunken);
  color: var(--text-muted);
  font-size: var(--size-caption);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.dropzone:hover,
.dropzone[data-over="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}

.media-preview {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: var(--gap-sm);
  border-radius: var(--radius);
  background: var(--glass-fill-sunken);
}

.media-preview img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-edge);
  flex: none;
}

/* Кнопка записи с микрофона: во время записи пульсирует, чтобы было видно,
   что микрофон включён. */
.recording {
  background: var(--negative-soft) !important;
  border-color: var(--negative) !important;
  color: var(--negative) !important;
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
  50% {
    box-shadow: 0 0 0 8px transparent;
    opacity: 0.72;
  }
}

@media (prefers-reduced-motion: reduce) {
  .recording {
    animation: none;
  }
}

/* --------------------------------------------------------------- статистика */

/* Лента занятий: клетка на день. Не график — календарь: важно не «сколько»,
   а «в какие дни», потому что смысл в непрерывности. */
.heatmap {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 1fr);
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.heatmap-cell {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: var(--level-0);
}

.heatmap-cell[data-level="1"] {
  background: color-mix(in srgb, var(--accent) 35%, transparent);
}
.heatmap-cell[data-level="2"] {
  background: color-mix(in srgb, var(--accent) 60%, transparent);
}
.heatmap-cell[data-level="3"] {
  background: color-mix(in srgb, var(--accent) 85%, transparent);
}
.heatmap-cell[data-level="4"] {
  background: var(--accent-strong);
}

.trouble-row {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: 10px 14px;
  border-bottom: 1px solid var(--glass-edge);
}

.trouble-row:last-child {
  border-bottom: 0;
}

/* Название набора в строке — ссылка, а не главное в ней. Одна строка с
   многоточием: развернувшись на две, оно растягивает строку вдвое и
   отодвигает само слово, ради которого строка и существует. */
.trouble-deck {
  display: block;
  max-width: 130px;
  line-height: 32px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trouble-count {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--negative);
  flex: none;
}

/* --------------------------------------------------------------- импорт */

.import-preview {
  max-height: 320px;
  overflow-y: auto;
}

.import-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-sm);
  padding: 8px 14px;
  border-bottom: 1px solid var(--glass-edge);
  font-size: var(--size-caption);
}

.import-row:last-child {
  border-bottom: 0;
}

.import-row-num {
  color: var(--text-faint);
  font-family: var(--font-mono);
}

/* ------------------------------------------------------------- оформление */

/* Плитки выбора темы. Образец цвета крупнее подписи намеренно: выбирают
   глазами, а название только подтверждает выбор. */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}

.theme-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-md);
  background: var(--glass-fill-sunken);
  color: var(--text-muted);
  font-size: var(--size-micro);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease),
    transform var(--fast) var(--ease);
}

.theme-tile:hover {
  transform: translateY(-2px);
}

.theme-tile.is-active {
  border-color: var(--accent);
  color: var(--text);
}

.theme-swatch {
  width: 100%;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-edge);
}

.theme-tile.is-active .theme-swatch {
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* ----------------------------------------------------------- экран «Слово» */

/* Экран открывается снаружи — с ярлыка, из меню «Поделиться», с иконки на
   домашнем экране, — поэтому у него своя шапка с кнопкой «Закрыть»: нижней
   панели здесь нет, и уйти иначе некуда. */
.quick-page {
  padding-top: calc(var(--safe-top) + var(--gap));
}

.quick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}

/* Поле крупное: в него попадают пальцем на ходу, а не мышью за столом. */
.quick-input {
  font-size: max(20px, 1.25rem);
  padding: 14px 16px;
  text-align: center;
}

/* Кнопка под полем — во всю ширину: по ней попадают большим пальцем на ходу.
   Нужна не для скорости (перевод приходит сам), а для ответа на вопрос «оно
   вообще работает?» — без неё экран с одним полем выглядит мёртвым. */
.quick-find {
  width: 100%;
}

.quick-result {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quick-term {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.quick-word {
  font-size: var(--size-h2);
  font-weight: 700;
}

.quick-transcription {
  color: var(--text-muted);
  font-size: var(--size-small);
}

/* Перевод — самое крупное на экране после самого слова: чаще всего человек
   заходит сюда ровно за ним и закрывает, не сохраняя. */
.quick-translation {
  text-align: center;
  font-size: var(--size-h3);
  line-height: 1.35;
}

.quick-translation.faint {
  color: var(--text-faint);
  font-size: var(--size-body);
}

/* Толкование — справка под переводом, а не второй перевод: мельче, тусклее,
   с отступом. Внешне должно быть видно, что читать это необязательно. */
.quick-definitions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 10px;
  border-left: 2px solid var(--border);
}

.quick-examples {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--glass-fill-sunken);
}

.quick-example div:first-child {
  font-style: italic;
}

.quick-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quick-destination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
}

.quick-lang {
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--glass-edge-strong);
  color: inherit;
  font: inherit;
  padding: 0 2px;
  cursor: pointer;
}

.quick-existing {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--warning-soft);
  color: var(--text);
  font-size: var(--size-small);
  text-align: center;
}

/* Перевод в словарной панели выделен: среди английских толкований русское
   слово должно находиться глазом сразу, без чтения. */
.dict-translation {
  font-weight: 600;
}