/* ============================================================
   wordsquest/wordsquest.css — стили подсистемы «Английские слова».
   Использует токены дизайн-системы (--paper-*, --ink-*, --signal,
   --font-*, --s-*, --t-*). Префикс классов: wq-. Независим от
   стилей других игровых подсистем (dq-*, aiq-*, uq-*).
   ============================================================ */
.wq-btn { appearance: none; cursor: pointer; font-family: var(--font-mono); font-size: var(--t-meta); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border: 2px solid var(--ink-100); padding: 10px 16px; background: var(--paper-00); color: var(--ink-100); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: all 90ms cubic-bezier(0.2,0,0,1); }
.wq-btn:hover { box-shadow: var(--shadow-tap); transform: translate(-1px,-1px); }
.wq-btn--ink { background: var(--ink-100); color: var(--paper-00); }
.wq-btn--signal { background: var(--signal); border-color: var(--signal); color: #fff; }
.wq-btn--sm { padding: 5px 10px; font-size: var(--t-micro); }
.wq-link { appearance: none; background: none; border: none; cursor: pointer; font-family: var(--font-mono); font-size: var(--t-small); color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.wq-link:hover { color: var(--ink-100); }

/* ---- герой / общая статистика ---- */
.wq-hero { display: flex; gap: var(--s-6); align-items: center; justify-content: space-between; border: 2px solid var(--ink-100); background: var(--paper-00); padding: var(--s-6); margin-bottom: var(--s-6); flex-wrap: wrap; }
.wq-hero__main { flex: 1; display: grid; gap: var(--s-4); min-width: 260px; }
.wq-hero__row { display: flex; gap: var(--s-7); align-items: center; flex-wrap: wrap; }
.wq-hero__stat { display: grid; gap: 2px; }
.wq-hero__stat--due .wq-hero__num { color: var(--signal); }
.wq-hero__num { font-family: var(--font-slab); font-weight: 700; font-size: var(--t-h2); line-height: 1; }

/* ---- полоса прогресса ---- */
.wq-bar { height: 10px; background: var(--paper-20); border: 1px solid var(--ink-100); }
.wq-bar i { display: block; height: 100%; background: var(--signal); transition: width 200ms var(--ease-mech, ease); }

/* ---- стрик ---- */
.wq-streak { display: flex; align-items: center; gap: 8px; }
.wq-streak__num { font-family: var(--font-slab); font-weight: 700; font-size: var(--t-h3); line-height: 1; }
.wq-streak--compact { border: 1px solid var(--ink-40); padding: 4px 10px; }

/* ---- категории ---- */
.wq-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-4); margin-bottom: var(--s-6); }
.wq-cat { appearance: none; text-align: left; cursor: pointer; border: 1px solid var(--ink-100); background: var(--paper-00); padding: var(--s-4); display: grid; gap: 10px; font-family: inherit; color: inherit; transition: transform 90ms var(--ease-mech, ease), box-shadow 90ms var(--ease-mech, ease); }
.wq-cat:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-tap); }
.wq-cat__top { display: flex; align-items: center; gap: 10px; }
.wq-cat__title { font-weight: 600; font-size: var(--t-small); }
.wq-cat__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--t-micro); color: var(--text-muted); }
.wq-cat__due { color: var(--signal); font-weight: 700; }
.wq-cat__fresh { color: var(--text-faint); }

.wq-reset { margin-top: var(--s-4); display: flex; align-items: center; gap: var(--s-3); }

/* ---- настройка сессии ---- */
.wq-setup { max-width: 640px; }
.wq-setup__back { margin-bottom: var(--s-4); }
.wq-setup__title { font-family: var(--font-slab); font-weight: 700; font-size: var(--t-h2); margin: 0 0 6px; }
.wq-setup__stats { color: var(--text-muted); font-size: var(--t-small); margin-bottom: var(--s-6); }
.wq-setup__block { margin-bottom: var(--s-5); }
.wq-setup__label { margin-bottom: 8px; }
.wq-setup__hint { margin-top: 8px; font-size: var(--t-small); color: var(--text-muted); }
.wq-setup__go { margin-top: var(--s-3); }

.wq-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); }
.wq-mode { appearance: none; cursor: pointer; border: 1px solid var(--ink-100); background: var(--paper-00); padding: var(--s-4); display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: inherit; color: inherit; }
.wq-mode--on { border-width: 2px; border-color: var(--signal); background: var(--signal-tint); }
.wq-mode__label { font-size: var(--t-small); font-weight: 600; }

.wq-empty { border: 1px dashed var(--ink-40); padding: var(--s-6); text-align: center; color: var(--text-muted); font-size: var(--t-small); }

/* ---- сессия ---- */
.wq-session { max-width: 640px; }
.wq-session__top { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-6); }
.wq-session__top .wq-bar { flex: 1; }
.wq-session__count { color: var(--text-muted); white-space: nowrap; }

/* ---- карточка ---- */
.wq-card { border: 2px solid var(--ink-100); background: var(--paper-00); padding: var(--s-7); display: grid; gap: var(--s-3); justify-items: center; text-align: center; cursor: pointer; min-height: 220px; align-content: center; }
.wq-card--learn, .wq-card--flipped { cursor: default; }
.wq-card__kicker { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.wq-card__front, .wq-card__en { font-family: var(--font-slab); font-weight: 700; font-size: var(--t-h1); display: flex; align-items: center; gap: 12px; }
.wq-card__back, .wq-card__ru { font-family: var(--font-slab); font-weight: 700; font-size: var(--t-h2); color: var(--signal); display: flex; align-items: center; gap: 10px; }
.wq-card__ts { color: var(--text-muted); font-size: var(--t-small); }
.wq-card__ex { color: var(--text-secondary); font-size: var(--t-small); max-width: 46ch; font-style: italic; }
.wq-card__hint { color: var(--text-faint); margin-top: var(--s-2); }
.wq-card__next { margin-top: var(--s-4); }

.wq-speak { appearance: none; border: 1px solid var(--ink-40); background: var(--paper-00); cursor: pointer; border-radius: 999px; width: 30px; height: 30px; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.wq-speak:hover { border-color: var(--ink-100); }

.wq-card__rate { margin-top: var(--s-5); display: grid; gap: 10px; justify-items: center; }
.wq-card__rate-label { color: var(--text-muted); }
.wq-card__rate-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.wq-rate { appearance: none; cursor: pointer; border: 2px solid var(--ink-100); background: var(--paper-00); padding: 8px 14px; font-family: var(--font-mono); font-size: var(--t-meta); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.wq-rate:hover { box-shadow: var(--shadow-tap); transform: translate(-1px,-1px); }
.wq-rate--0 { color: #B23A2E; border-color: #B23A2E; }
.wq-rate--3 { color: #A66A1E; border-color: #A66A1E; }
.wq-rate--4 { color: #1F8A5B; border-color: #1F8A5B; }
.wq-rate--5 { background: #1F8A5B; border-color: #1F8A5B; color: #fff; }

/* ---- выбор варианта ---- */
.wq-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; width: 100%; margin-top: var(--s-4); }
.wq-choice { appearance: none; cursor: pointer; border: 1px solid var(--ink-100); background: var(--paper-00); padding: var(--s-4); font-family: inherit; font-size: var(--t-body); color: inherit; }
.wq-choice:hover:not(:disabled) { border-width: 2px; }
.wq-choice--correct { border-width: 2px; border-color: #1F8A5B; background: color-mix(in oklab, var(--paper-00) 85%, #1F8A5B); }
.wq-choice--wrong { border-width: 2px; border-color: #B23A2E; background: color-mix(in oklab, var(--paper-00) 85%, #B23A2E); }
.wq-choice--dim { opacity: 0.5; }

/* ---- ввод перевода ---- */
.wq-typeform { display: flex; gap: 10px; width: 100%; margin-top: var(--s-4); }
.wq-input { flex: 1; border: 1px solid var(--ink-100); background: var(--paper-00); padding: 10px 12px; font-family: var(--font-mono); font-size: var(--t-body); outline: none; }
.wq-input:focus { border-color: var(--signal); }

.wq-feedback { margin-top: var(--s-4); display: grid; gap: 10px; justify-items: center; }
.wq-feedback__ok { color: #1F8A5B; font-weight: 700; }
.wq-feedback__bad { color: #B23A2E; font-weight: 700; }
.wq-feedback__ts { color: var(--text-muted); }

/* ---- итоги сессии ---- */
.wq-summary { display: grid; justify-items: center; gap: var(--s-4); text-align: center; padding: var(--s-8) 0; }
.wq-summary__title { font-family: var(--font-slab); font-weight: 700; font-size: var(--t-h2); margin: 0; }
.wq-summary__row { display: flex; gap: var(--s-7); }
.wq-summary__stat { display: grid; gap: 2px; }

@media (max-width: 700px) {
  .wq-hero { flex-direction: column; align-items: stretch; }
  .wq-card__front, .wq-card__en { font-size: var(--t-h2); }
}

/* ---- картинка-ассоциация ---- */
.wq-wordimg { max-width: 220px; max-height: 160px; width: auto; height: auto; object-fit: contain; border: 1px solid var(--ink-40); display: block; }
.wq-wordimg--sm { max-width: 150px; max-height: 110px; }

/* ---- футер карточки категории ---- */
.wq-cat__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; border-top: 1px solid var(--ink-10, var(--paper-20)); padding-top: 8px; }
.wq-cat__foot .wq-link { font-size: var(--t-micro); }

/* ---- список слов ---- */
.wq-wordlist { display: grid; gap: 2px; margin-top: var(--s-5); }
.wq-wordrow { appearance: none; cursor: pointer; text-align: left; font-family: inherit; color: inherit;
  display: grid; grid-template-columns: 34px 1fr 1fr auto; align-items: center; gap: var(--s-4);
  border: 1px solid transparent; border-bottom: 1px solid var(--paper-20); background: none; padding: 8px var(--s-3); }
.wq-wordrow:hover { background: var(--paper-10); border-color: var(--ink-40); }
.wq-wordrow__thumb { width: 34px; height: 34px; flex: none; border: 1px solid var(--paper-30); background: var(--paper-10); display: grid; place-items: center; overflow: hidden; }
.wq-wordrow__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wq-wordrow__en { font-family: var(--font-slab); font-weight: 700; font-size: var(--t-body); }
.wq-wordrow__ru { color: var(--text-secondary); font-size: var(--t-small); }
.wq-wordrow__st { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; }
.wq-wordrow__st--learning { color: #A66A1E; }
.wq-wordrow__st--learned { color: #1F8A5B; }

/* ---- модалка слова ---- */
.wq-overlay { position: fixed; inset: 0; z-index: 300; background: color-mix(in oklab, var(--ink-100) 42%, transparent); display: grid; place-items: center; padding: var(--s-6); }
.wq-modal { width: min(520px, 100%); max-height: 88vh; overflow: auto; background: var(--paper-00); border: 2px solid var(--ink-100); box-shadow: var(--shadow-tap); }
.wq-modal__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); border-bottom: 1px solid var(--ink-40); padding: var(--s-3) var(--s-5); }
.wq-modal__x { appearance: none; background: none; border: 1px solid var(--ink-100); padding: 5px; cursor: pointer; color: var(--ink-100); display: grid; place-items: center; }
.wq-modal__x:hover { background: var(--ink-100); color: var(--paper-00); }
.wq-modal__body { padding: var(--s-6); display: grid; gap: var(--s-3); justify-items: center; text-align: center; }

/* ---- зона загрузки картинки ---- */
.wq-imgzone { width: 100%; min-height: 120px; border: 2px dashed var(--ink-40); background: var(--paper-10); cursor: pointer; display: grid; place-items: center; padding: var(--s-3); margin-top: var(--s-3); }
.wq-imgzone:hover, .wq-imgzone--over { border-color: var(--signal); background: var(--signal-tint); }
.wq-imgzone__img { max-width: 100%; max-height: 220px; object-fit: contain; display: block; }
.wq-imgzone__empty { color: var(--text-muted); text-align: center; padding: var(--s-4); }

/* ---- таблица прогресса слова ---- */
.wq-progtable { width: 100%; display: grid; gap: 6px; margin-top: var(--s-4); border-top: 1px solid var(--paper-30); padding-top: var(--s-4); }
.wq-progtable > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.wq-progtable .mono { font-size: var(--t-small); }

@media (max-width: 700px) {
  .wq-wordrow { grid-template-columns: 28px 1fr auto; }
  .wq-wordrow__ru { grid-column: 2 / -1; }
  .wq-wordrow__thumb { width: 28px; height: 28px; }
}

/* ---- форма карточки (правка / новая) ---- */
.wq-form { display: grid; gap: var(--s-3); width: 100%; text-align: left; }
.wq-field { display: grid; gap: 4px; }
.wq-field .wq-input { width: 100%; box-sizing: border-box; font-family: var(--font-slab); resize: vertical; }
.wq-btn:disabled { opacity: 0.45; cursor: default; }
.wq-btn:disabled:hover { box-shadow: none; transform: none; }

/* пометка «своё» / «изменено» в списке слов */
.wq-wordrow__mark { margin-left: 8px; font-family: var(--font-mono); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); border: 1px solid var(--paper-30); padding: 1px 5px; vertical-align: middle; }

/* ---- панель поиска и фильтра в словаре ---- */
.wq-listtools { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; margin-top: var(--s-5); }
.wq-listtools__search { flex: 1; min-width: 200px; }
.wq-select { border: 1px solid var(--ink-100); background: var(--paper-00); padding: 9px 12px; font-family: var(--font-mono); font-size: var(--t-small); color: var(--ink-100); cursor: pointer; outline: none; }
.wq-select:focus { border-color: var(--signal); }
.wq-field .wq-select { width: 100%; }

/* кнопка входа в словарь на карточке категории */
.wq-cat__browse { cursor: pointer; }
.wq-cat__browse:hover { background: var(--ink-100); color: var(--paper-00); }

/* ---- создание своей категории ---- */
.wq-addcat { margin: var(--s-3) 0 var(--s-5); }
.wq-addcat__form { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.wq-addcat__form .wq-input { flex: 1; min-width: 220px; font-family: var(--font-slab); }

/* ---- пропуск в предложении (cloze) ---- */
.wq-cloze { font-family: var(--font-slab); font-size: var(--t-h3); line-height: 1.5; text-align: center; max-width: 52ch; }
.wq-cloze__gap { display: inline-block; min-width: 90px; border-bottom: 3px solid var(--signal); vertical-align: baseline; margin: 0 4px; }
.wq-cloze--full { font-size: var(--t-body-lg); color: var(--text-secondary); }
.wq-cloze--full b { color: var(--signal); font-weight: 700; }

/* ---- аудирование ---- */
.wq-audio { appearance: none; cursor: pointer; border: 2px solid var(--ink-100); background: var(--paper-00); width: 84px; height: 84px; border-radius: 999px; font-size: 34px; display: inline-flex; align-items: center; justify-content: center; }
.wq-audio:hover { background: var(--ink-100); }

/* ---- вопрос-картинка ---- */
.wq-qimg { max-width: 320px; max-height: 240px; width: auto; height: auto; object-fit: contain; border: 1px solid var(--ink-40); display: block; }

@media (max-width: 700px) {
  .wq-card { padding: var(--s-5); }
  .wq-typeform { flex-wrap: wrap; }
  .wq-input { min-width: 0; }
  .wq-cloze { max-width: 100%; font-size: var(--t-body-lg); }
  .wq-cloze__gap { min-width: 60px; }
  .wq-qimg { max-width: 100%; }
  .wq-choices { grid-template-columns: 1fr; }
}