/*
  css/app.css — общее оформление страниц проекта: рамка сцены, кнопки,
  панели ошибок и предупреждений. Используется и index.html, и gallery.html.

  Внешний вид самой анимации здесь не описан: за обвязку сцены отвечает
  engine/engine.css, за движение — engine/behaviors.css,
  за раскладку — файл конкретного шаблона.
*/

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 32px 20px 48px;
  background: #14161d;
  color: #e8eaf2;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  display: flex;
  justify-content: center;
}

.app {
  width: 100%;
  max-width: 960px;
}

h1, h2, h3, h4 { font-weight: 600; }

a { color: #94aeff; }

code {
  font-family: Consolas, "Courier New", monospace;
  background: #22252f;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 0.92em;
}

.muted { font-size: 13px; color: #8b91a6; }

/* Рамка сцены.
   position: relative обязательно: движок кладёт внутрь слой с position: absolute.
   Пропорции берутся из спеки — движок записывает их в --scene-w и --scene-h. */
.stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--scene-w, 960) / var(--scene-h, 540);
  background: #0f1220;
  border: 1px solid #2a2e3b;
  border-radius: 14px;
  overflow: hidden;
}

.controls {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.btn {
  font: inherit;
  font-weight: 600;
  color: #10121a;
  background: #7c9cff;
  border: 0;
  border-radius: 9px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.btn:hover:not(:disabled) { background: #94aeff; }
.btn:active:not(:disabled) { transform: translateY(1px); }

.btn:disabled {
  background: #3a3f52;
  color: #8b91a6;
  cursor: default;
}

/*
  Тихая кнопка: второстепенное действие рядом с главным. Заведена после
  снимка «Моих работ»: три одинаково ярких кнопки в строке дерутся
  за внимание. Главное действие остаётся .btn, остальные — тихие.
  Класс существовал в разметке раньше, чем в css, — кнопки выглядели
  главными молча; теперь у имени есть тело.
*/
.btn.btn-quiet {
  background: #1c1f29;
  color: #c8cee6;
  border: 1px solid #2a2e3b;
  font-weight: 500;
}

.btn.btn-quiet:hover:not(:disabled) {
  background: #232736;
  border-color: #4a6cf7;
}

/*
  Кнопка, которая сейчас — очевидный следующий шаг. Ролик кончился
  пустым кадром (так и задумано для вставки), и дверь «проиграть снова»
  должна быть видна без поиска. Подсветка статичная: заметность,
  а не мигание — мигать на странице нечему, кроме самого ролика.
*/
.btn.is-ready {
  box-shadow: 0 0 0 3px rgba(124, 156, 255, 0.35);
}

.status { font-size: 13px; color: #9aa0b5; }

.badge {
  font-size: 12px;
  color: #8b91a6;
  background: #1c1f29;
  border: 1px solid #2a2e3b;
  border-radius: 999px;
  padding: 5px 12px;
}

.badge b { color: #c8cee6; font-weight: 600; }

/*
  Способы показать один и тот же текст. Приходят одним ответом модели,
  поэтому переключение мгновенное — это не новый запрос, а уже готовая
  спека. Выбранный подсвечен, чтобы было видно, что смотришь.
*/
.variants {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.variants-label { font-size: 12px; color: #8b91a6; }

.variant {
  font: inherit;
  font-size: 13px;
  color: #c8cee6;
  background: #1c1f29;
  border: 1px solid #2a2e3b;
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.variant:hover { border-color: #4a6cf7; }

.variant.is-picked {
  border-color: #7c9cff;
  background: #1d2438;
  color: #e8eaf2;
}

/* Предупреждения движка: сцена работает, но что-то стоит поправить. */
.warn {
  margin-top: 16px;
  padding: 14px 16px;
  background: #2a2418;
  border: 1px solid #6b5a2f;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
}

.warn strong { color: #ffd479; }
.warn ul { margin: 8px 0 0; padding-left: 20px; }
.warn li { margin-bottom: 6px; }

/* Ошибки: сцена не запустилась. */
.error {
  margin-top: 16px;
  padding: 16px 18px;
  background: #2a1a1e;
  border: 1px solid #6b2f3a;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
}

.error strong { color: #ff9aa8; }
.error p { margin: 8px 0 0; }
.error-hint { color: #b79aa0; font-size: 13px; }