/* Блоки, которых нет в eng42: выбор режима и голоса, экран «слушайте
   вопрос», разбор по пяти ответам. Всё остальное берётся из
   ../eng-common/app.css — копии стилей eng42, чтобы страницы выглядели
   одинаково. */

/* Выбор режима и голоса */
.opt{margin-top:18px}
.opt-t{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--muted)}
.rad{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin-bottom:6px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer}
.rad:hover{border-color:var(--primary)}
.rad input{margin-top:3px;flex:0 0 auto}
.rad span{font-size:14.5px;line-height:1.45}
.rad b{font-weight:700}

/* Экран «вопрос звучит». Текста вопроса здесь нет намеренно: на
   экзамене его тоже не показывают, и читать с экрана — не то умение,
   которое проверяется. */
.listen{text-align:center;padding:26px 0 18px}
.listen-ic{font-size:44px;line-height:1}
.listen-t{margin:14px 0 0;font-size:15px;font-weight:700;color:var(--muted)}
.wave{display:flex;align-items:center;justify-content:center;gap:5px;height:44px;margin-top:14px}
.wave i{width:5px;height:10px;border-radius:3px;background:var(--primary);opacity:.35}
/* Полоски оживают, только пока звучит вопрос: неподвижная волна
   выглядела бы как зависшая страница. */
.wave.on i{animation:wv .9s ease-in-out infinite;opacity:1}
.wave.on i:nth-child(2){animation-delay:.1s}
.wave.on i:nth-child(3){animation-delay:.2s}
.wave.on i:nth-child(4){animation-delay:.3s}
.wave.on i:nth-child(5){animation-delay:.4s}
.wave.on i:nth-child(6){animation-delay:.5s}
.wave.on i:nth-child(7){animation-delay:.6s}
@keyframes wv{0%,100%{height:10px}50%{height:34px}}
@media (prefers-reduced-motion:reduce){.wave.on i{animation:none;height:22px}}

.qcount{margin:0 0 4px;font-family:var(--mono);font-size:12.5px;font-weight:700;
  letter-spacing:.06em;color:var(--primary)}

/* Экран ответа */
.timer-big{font-family:var(--mono);font-size:54px;font-weight:700;letter-spacing:-.03em;
  text-align:center;margin:6px 0 10px}
.bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--primary);transition:width .9s linear}
.level{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:10px}
.level i{display:block;height:100%;width:0;background:var(--ok);transition:width .08s linear}

/* Разбор */
.score-big{font-family:var(--mono);font-size:44px;font-weight:700;letter-spacing:-.03em}
.score-big span{font-size:20px;color:var(--muted)}
.ans{border-left:4px solid var(--line)}
.ans.ok{border-left-color:var(--ok)}
.ans.no{border-left-color:var(--bad,#E23B3B)}
.qn{margin:0 0 6px;font-family:var(--mono);font-size:12px;font-weight:700;
  letter-spacing:.05em;color:var(--muted)}
.qtext{margin:0 0 8px;font-size:15px;font-weight:700}
.said,.why,.better{margin:0 0 6px;font-size:14.5px;line-height:1.55}
.said span,.better span{color:var(--muted);font-size:12.5px}
.why{color:var(--muted)}
.ans audio{width:100%;margin-top:8px}

/* Соседние задания */
.links .linkrow{display:flex;flex-wrap:wrap;gap:8px}
.links a,.links .cur{font-size:13.5px;font-weight:600;padding:8px 13px;border-radius:10px;
  border:1px solid var(--line);text-decoration:none;color:var(--ink);background:var(--surface)}
.links a:hover{border-color:var(--primary);color:var(--primary-ink)}
.links .cur{background:var(--primary-soft);color:var(--primary-ink);border-color:transparent}

.warn{color:var(--fg-b03030,#B03030);font-size:14.5px;line-height:1.55}
@media (max-width:420px){
  .timer-big{font-size:44px}
  .score-big{font-size:36px}
  .links .linkrow{flex-direction:column}
}

/* Классы разметки, у которых не было правил (check_labels.py): строка
   «На главную», подзаголовок и главная кнопка. Оформлены как их
   двойники в eng42 — .back, .sub и .btn.primary; h1, h2 и .muted
   повторяют то, что элемент уже получает от общего файла. */
.crumb{margin:0 0 14px}
.crumb a{display:inline-flex;align-items:center;gap:6px;color:var(--primary);
  text-decoration:none;font-weight:700;font-size:14px}
.crumb a:hover{color:var(--primary-ink)}
.h1{margin:0 0 8px}
.h2{margin:0 0 12px}
.lead{margin:0 0 18px;color:var(--muted);font-size:15px;max-width:60ch}
.muted{color:var(--muted)}
.btn.btn-main{background:var(--primary);border-color:var(--primary);color:var(--on-accent,#fff)}
.btn.btn-main:hover{background:var(--primary-ink);border-color:var(--primary-ink);color:var(--on-accent,#fff)}