/* Окно скелета — скелетная анимация персонажа (web/js/ui/rig.js, СКЕЛЕТ.md).
 *
 * Поверх всего окна, как стол: сверху шаги, слева то, что делает шаг, в
 * середине холст с фигурой, костями и частями, справа — выбранная кость или
 * часть, снизу — шкала кадров. Цвета сторон — как на шаблоне поз: ближнее
 * красное, дальнее синее. */

.скелет {
  position: fixed; inset: 0; z-index: 57;
  display: grid; grid-template-rows: auto 1fr auto auto;
  background: var(--холст-поле, #101315); color: var(--текст);
  font-family: var(--шрифт);
}
.скелет[data-занят] .скелет-холст { cursor: progress !important; }

.скелет-шапка {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--фон-панели-плотный, #1b1f23);
  border-bottom: 1px solid color-mix(in srgb, var(--текст) 10%, transparent);
  flex-wrap: wrap;
}
.скелет-заголовок { font-weight: 650; font-size: 14px; margin-right: 6px; white-space: nowrap; }
.скелет-шаги { display: flex; gap: 2px; flex-wrap: wrap; }
.скелет-шаг {
  border: none; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer;
  background: color-mix(in srgb, var(--текст) 7%, transparent); color: var(--текст-тише, var(--текст));
}
.скелет-шаг[data-нажата] { background: var(--акцент); color: var(--акцент-текст, #fff); }
.скелет-шаг:disabled { opacity: 0.35; cursor: default; }

.скелет-тело { display: grid; grid-template-columns: 290px 1fr 250px; min-height: 0; }
.скелет-левая, .скелет-правая {
  gap: 8px; padding: 12px; overflow-y: auto; min-height: 0;
  background: color-mix(in srgb, var(--фон-панели-плотный, #1b1f23) 86%, transparent);
}
.скелет-левая { border-right: 1px solid color-mix(in srgb, var(--текст) 10%, transparent); }
.скелет-правая { border-left: 1px solid color-mix(in srgb, var(--текст) 10%, transparent); }
.скелет-сцена {
  position: relative; min-width: 0; min-height: 0; overflow: hidden;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--текст) 8%, transparent) 1px, transparent 1.3px);
  background-size: 22px 22px;
}
.скелет-холст { position: absolute; inset: 0; touch-action: none; }

.скелет-ряд { align-items: center; gap: 8px; }
.скелет-ряд .поле { width: 90px; }
.скелет-беда { color: var(--беда, #e5484d); }
.скелет-заготовки { display: flex; flex-wrap: wrap; gap: 4px; }
.скелет-часть {
  display: flex; align-items: center; gap: 8px; text-align: left; width: 100%;
  border: 1px solid transparent; border-radius: 8px; padding: 4px 8px; font: inherit; font-size: 12px; cursor: pointer;
  background: color-mix(in srgb, var(--текст) 5%, transparent); color: var(--текст);
}
.скелет-часть[data-нажата] { border-color: var(--цвет-части); background: color-mix(in srgb, var(--цвет-части) 22%, transparent); }
.скелет-часть-метка { width: 12px; height: 12px; border-radius: 3px; background: var(--цвет-части); flex: none; }

.скелет-шкала {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px; overflow-x: auto;
  background: var(--фон-панели-плотный, #1b1f23);
  border-top: 1px solid color-mix(in srgb, var(--текст) 10%, transparent);
}
.скелет-шкала[hidden] { display: none; }
.скелет-кадры { display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.скелет-кадр {
  position: relative; min-width: 30px; height: 30px; border: none; border-radius: 6px; font: inherit; font-size: 11px;
  cursor: pointer; background: color-mix(in srgb, var(--текст) 7%, transparent); color: var(--текст-тише, var(--текст));
}
.скелет-кадр[data-нажата] { background: var(--акцент); color: var(--акцент-текст, #fff); }
.скелет-кадр[data-ключ]::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; width: 6px; height: 6px; margin-left: -3px;
  background: #ffd166; transform: rotate(45deg);
}
.скелет-число { width: 64px; }
.скелет-весть { padding: 4px 12px 6px; font-size: 12px; min-height: 22px; color: var(--текст-тише, var(--текст));
  background: var(--фон-панели-плотный, #1b1f23); }
.скелет-весть[data-лад="беда"] { color: var(--беда, #e5484d); }
.скелет-весть[data-лад="внимание"] { color: #f5a524; }
.скелет-весть[data-лад="добро"] { color: #30a46c; }

/* Узко (телефон, iPad стоя): колонки — друг под другом, холст выше всех. */
@media (max-width: 820px) {
  .скелет-тело { grid-template-columns: 1fr; grid-template-rows: 44vh auto auto; }
  .скелет-сцена { order: -1; min-height: 44vh; }
  .скелет-левая, .скелет-правая { border: none; max-height: 30vh; }
}