/* Озвучка ответов мастера (14.10, js/ozvuchka-ui.js): кнопка «Слушать» под ответом и настройки в Кабинете. */
.igra-listen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; white-space: normal; }
.igra-listen[hidden], .igra-listen-stop[hidden], .igra-listen-msg[hidden] { display: none; }
.igra-listen-btn, .igra-listen-stop {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--border, rgba(255,255,255,.18)); background: rgba(255,255,255,.06); color: var(--text-2, inherit);
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease;
}
.igra-listen-stop { padding: 0 10px; }
/* Цвет — от текста самого пузыря, а не общий --text-2: на пергаменте «Летописи» и в «Нуаре» светло-серая кнопка
   сливалась с фоном (контраст ~1,5:1, ночная проверка 15.10, находка 036). У пузыря тема уже подобрала читаемый цвет. */
.igra-turn-assistant .igra-listen-btn, .igra-turn-assistant .igra-listen-stop {
  color: inherit; border-color: color-mix(in srgb, currentColor 45%, transparent); background: color-mix(in srgb, currentColor 8%, transparent);
}
.igra-turn-assistant .igra-listen-btn:hover:not(:disabled), .igra-turn-assistant .igra-listen-stop:hover { background: color-mix(in srgb, currentColor 16%, transparent); color: inherit; }
.igra-turn-assistant .igra-listen-msg { color: inherit; }
.igra-listen-btn:hover:not(:disabled), .igra-listen-stop:hover { background: rgba(255,255,255,.12); color: var(--text, inherit); }
.igra-listen-btn.is-on { color: var(--text, inherit); border-color: currentColor; }
/* «Пауза» и «Продолжить» под ответом мастера (владелец 16.10: на пергаменте «Летописи» надпись была почти невидима):
   правило .is-on выше стоит позже общего .igra-turn-assistant .igra-listen-btn и перебивало его цветом --text — светлым
   на тёмных темах и потому бледным на светлом пузыре. Внутри пузыря цвет всегда его собственный, в любом состоянии. */
.igra-turn-assistant .igra-listen-btn.is-on, .igra-turn-assistant .igra-listen-btn.is-on:hover:not(:disabled) { color: inherit; border-color: currentColor; }
.igra-listen-btn:disabled { cursor: progress; }
/* «Готовим голос…»: читаемо в любой теме. Цвет текста не гасим (раньше opacity .7 на всей кнопке давал на пергаменте
   «Летописи» почти прозрачную надпись): кнопка остаётся обычной, а ожидание показывает бегущая полоса снизу. */
.igra-listen-btn.is-loading, .igra-turn-assistant .igra-listen-btn.is-loading {
  opacity: 1; color: var(--text, inherit); position: relative; overflow: hidden; cursor: progress;
  border-color: currentColor; background: color-mix(in srgb, currentColor 14%, transparent);
}
.igra-turn-assistant .igra-listen-btn.is-loading { color: inherit; }
.igra-listen-btn.is-loading::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 40%; background: currentColor; border-radius: 3px;
  animation: igra-listen-bar 1.1s ease-in-out infinite alternate;
}
@keyframes igra-listen-bar { from { transform: translateX(0); } to { transform: translateX(150%); } }
@media (prefers-reduced-motion: reduce) { .igra-listen-btn.is-loading::after { animation: none; width: 100%; opacity: .5; } }
.igra-listen-btn:focus-visible, .igra-listen-stop:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.igra-listen-msg { font-size: .8rem; color: var(--text-2, inherit); }

.igra-voice-row { align-items: center; }
.igra-voice-label { font-size: .95rem; margin-right: 8px; }
.igra-voice-select {
  min-height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--border, rgba(255,255,255,.18));
  background: rgba(255,255,255,.06); color: inherit; font: inherit; font-size: .9rem; max-width: 100%;
}
.igra-voice-select option { color: #111; }

/* Выбор голоса по ролям (Кабинет): список и кнопка «Послушать» */
.igra-voice-picks { display: flex; flex-direction: column; gap: 8px; flex: 1 1 100%; width: 100%; }
.igra-voice-pick { width: 100%; box-sizing: border-box; }
.igra-voice-picks[hidden] { display: none; }
.igra-voice-pick .igra-voice-label { min-width: 84px; }
.igra-voice-pick .igra-voice-select { flex: 1 1 auto; min-width: 0; }
.igra-voice-play {
  display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border-radius: 50%;
  border: 1px solid var(--border, rgba(255,255,255,.18)); background: rgba(255,255,255,.06); color: inherit; cursor: pointer;
}
.igra-voice-play[hidden] { display: none; }
/* Узкий экран (23.10): на 320 px список голоса сжимался до 96 px рядом с подписью «Мастер» и кнопкой ▶ и обрезал даже «Дмитрий (онлайн)».
   Подпись — отдельной строкой, список и ▶ — под ней; на телефоне зоны нажатия 44 px. */
@media (max-width: 480px) {
  .igra-voice-pick { flex-wrap: wrap; }
  .igra-voice-pick .igra-voice-label { flex: 1 1 100%; min-width: 0; margin-right: 0; }
  .igra-voice-pick .igra-voice-select { flex: 1 1 0; }
}
@media (pointer: coarse), (max-width: 767.98px) {
  .igra-voice-pick .igra-voice-select { min-height: 44px; }
  .igra-voice-pick .igra-voice-play { width: 44px; height: 44px; }
}
.igra-voice-play:hover { background: rgba(255,255,255,.14); }
.igra-voice-play:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }