/* Окно «Сгенерировать обложку» (js/covergen.js, 07.10). Общее для игры и
   страниц Таверны: токены тем — с запасными значениями (у Таверны набор
   сайта, у игры — 13 тем). Подложка непрозрачная: окно поверх затемнения. */
dialog.cg-dialog {
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow: auto;
  margin: auto;
  padding: 22px;
  color: var(--text, #f3ede4);
  background: linear-gradient(165deg, var(--surface, #1b1726), var(--surface-tint, var(--surface, #1b1726))), var(--bg, #0b0a12);
  border: 1px solid var(--border-strong, rgba(255,255,255,.18));
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
}
dialog.cg-dialog::backdrop { background: rgba(0, 0, 0, .66); backdrop-filter: blur(4px); }
.cg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cg-title { margin: 0; font-size: 1.25rem; line-height: 1.25; font-family: var(--font-display, inherit); }
.cg-beta {
  flex: none; padding: 2px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--gold, #e8934c); border: 1px solid var(--gold, #e8934c);
}
.cg-x {
  margin-left: auto; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border, rgba(255,255,255,.12));
  background: transparent; color: var(--text-2, #cfc6b8); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.cg-x:hover { color: var(--text, #fff); background: rgba(255,255,255,.06); }
.cg-label { display: block; font-size: .9rem; font-weight: 600; margin: 0 0 6px; color: var(--text, #f3ede4); }
dialog.cg-dialog textarea {
  width: 100%; min-height: 104px; resize: vertical; box-sizing: border-box; font: inherit; line-height: 1.5;
  color: var(--text, #f3ede4); background: var(--surface-2, rgba(255,255,255,.06));
  border: 1px solid var(--border-strong, rgba(255,255,255,.18)); border-radius: 12px; padding: 10px 12px;
}
dialog.cg-dialog textarea:focus { outline: 2px solid var(--gold, #e8934c); outline-offset: 1px; }
.cg-count { text-align: right; font-size: .8rem; color: var(--text-2, #cfc6b8); margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.cg-count.is-over { color: #ff8f8f; }
.cg-hint { font-size: .84rem; line-height: 1.5; color: var(--text-2, #cfc6b8); margin: 0 0 4px; }
.cg-error {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; font-size: .9rem;
  color: #ffd0d0; background: rgba(220, 70, 70, .16); border: 1px solid rgba(240, 120, 120, .45);
}
.cg-stage[hidden], .cg-variants[hidden], .cg-error[hidden] { display: none; }
.cg-busy { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 0; color: var(--text-2, #cfc6b8); }
.cg-spinner {
  width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid var(--border, rgba(255,255,255,.12)); border-top-color: var(--gold, #e8934c);
  animation: cg-spin .9s linear infinite;
}
@keyframes cg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cg-spinner { animation-duration: 3s; } }
.cg-result { display: flex; justify-content: center; }
.cg-preview {
  width: min(300px, 64vw); aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; max-height: 48vh;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .5), 0 0 0 2px var(--gold, #e8934c);
}
.cg-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-variants { margin-top: 16px; }
.cg-var-row { display: flex; gap: 10px; }
.cg-var {
  width: 72px; aspect-ratio: 3 / 4; padding: 0; border-radius: 10px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; background: rgba(255,255,255,.05); transition: border-color .2s, transform .2s;
}
.cg-var img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-var:hover { transform: translateY(-2px); }
.cg-var[aria-pressed="true"] { border-color: var(--gold, #e8934c); }
.cg-var:focus-visible { outline: 2px solid var(--gold-2, #f0b46f); outline-offset: 2px; }
.cg-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.cg-actions.is-result { display: grid; grid-template-columns: 1fr 1fr; }
.cg-actions.is-result .btn-primary { grid-column: 1 / -1; }
.cg-price { display: inline-flex; align-items: center; gap: 3px; }
.cg-drop { width: 14px; height: 14px; fill: currentColor; }
@media (max-width: 480px) {
  dialog.cg-dialog { padding: 16px; }
  .cg-actions { flex-direction: column-reverse; align-items: stretch; }
  .cg-actions.is-result { grid-template-columns: 1fr; }
  .cg-var { width: 64px; }
}