/* Окно «Нарисовать картинку профиля» (js/avatargen.js, бета 29.09).
   Отдельный файл, а не igra.css: окно живёт поверх любого экрана и любой из
   13 тем, всё берёт из токенов темы. Подложка — непрозрачная смесь --bg и
   --surface: у --surface в темах своя прозрачность под размытый задник, а у
   окна поверх затемнения задника нет — полупрозрачная карточка читалась бы хуже. */
dialog.avatar-gen {
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  margin: auto;
  padding: 24px;
  color: var(--text);
  background: linear-gradient(165deg, var(--surface), var(--surface-tint, var(--surface))), var(--bg);
  border: 1px solid var(--border-strong, var(--border));
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
}
dialog.avatar-gen::backdrop { background: rgba(0, 0, 0, .62); backdrop-filter: blur(4px); }
.avatar-gen-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.avatar-gen-head h2 { margin: 0; font-size: 1.2rem; line-height: 1.25; }
.avatar-gen-beta {
  flex: none; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--gold);
}
dialog.avatar-gen textarea {
  width: 100%; min-height: 84px; resize: vertical; box-sizing: border-box;
  font: inherit; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm, 10px); padding: 10px 12px;
}
dialog.avatar-gen textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
dialog.avatar-gen .igra-hint { color: var(--text-2); margin: 0 0 10px; }
.avatar-gen-count { text-align: right; margin-top: -8px !important; }
.avatar-gen-busy { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 36px 0; color: var(--text-2); }
.avatar-gen-busy[hidden], .avatar-gen-result[hidden], #avatarGenForm[hidden] { display: none; }
.avatar-gen-spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--gold);
  animation: avatar-gen-spin .9s linear infinite;
}
@keyframes avatar-gen-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .avatar-gen-spinner { animation-duration: 3s; } }
.avatar-gen-result { display: flex; justify-content: center; padding: 4px 0 8px; }
.avatar-gen-result img {
  width: min(256px, 70vw); height: auto; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid var(--gold); box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
}
.avatar-gen-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 16px; }
/* Результат: главное действие — «Установить» — во всю ширину сверху, под ним
   «Перегенерировать» и «Изменить описание» поровну. В строку три кнопки в окно
   не влезают, и «Установить» падала одна на вторую строку */
.avatar-gen-actions.is-result { display: grid; grid-template-columns: 1fr 1fr; }
.avatar-gen-actions.is-result .btn-primary { grid-column: 1 / -1; order: -1; }
.avatar-gen-price { display: inline-flex; align-items: center; gap: 3px; }
.avatar-gen-price .ink-drop { width: 14px; height: 14px; }
@media (max-width: 480px) {
  dialog.avatar-gen { padding: 18px; }
  .avatar-gen-actions { flex-direction: column-reverse; align-items: stretch; }
  .avatar-gen-actions.is-result { grid-template-columns: 1fr; }
}