/* Стили лаборатории существ (creature-lab.html). Игру не трогают — та живёт на style.css. */

#panel { position: fixed; top: 10px; right: 10px; z-index: 10; width: 258px; padding: 12px 14px;
  background: rgba(8,12,18,.8); border: 1px solid rgba(127,178,255,.25); border-radius: 10px;
  backdrop-filter: blur(4px); font-size: 12px; max-height: calc(100dvh - 20px); overflow-y: auto; }
#panel h1 { margin: 0 0 2px; font-size: 14px; color: #cfe6ff; }
#panel .sub { margin: 0 0 10px; color: #8b94a3; line-height: 1.35; }
#panel .hint { margin: 7px 0 0; color: #8b94a3; line-height: 1.35; min-height: 15px; }
#panel .lbl { margin: 11px 0 5px; color: #7f8b9c; text-transform: uppercase; letter-spacing: .06em; font-size: 10px; }
#panel .row { display: grid; grid-template-columns: 62px 1fr 34px; align-items: center; gap: 7px; margin-bottom: 6px; }
#panel label { color: #9aa4b2; }
#panel b { color: #8fe08a; font: 11px ui-monospace, Menlo, monospace; text-align: right; }
#panel input[type=range] { width: 100%; accent-color: #7fb2ff; }

#panel .btns { display: flex; gap: 7px; }
#panel .tools { display: flex; flex-wrap: wrap; gap: 6px; }
#panel button { flex: 1; padding: 6px 2px; background: #22303f; color: #cfe6ff; cursor: pointer;
  border: 1px solid rgba(127,178,255,.3); border-radius: 7px; font-size: 12px; white-space: nowrap; }
#panel button:hover { background: #2c3e52; }
#panel .tools button { flex: 0 0 calc(33.33% - 4px); }
#panel .btns.wrap { flex-wrap: wrap; }
#panel #pickUI .btns button { flex: 0 0 calc(50% - 4px); }
#panel button:disabled { opacity: .4; cursor: default; }
#panel .btns.wrap button { flex: 0 0 calc(33.33% - 5px); }
/* Тип связи узнаётся по цвету — тем же, каким она рисуется на холсте (KIND_UI). */
#panel .kinds button { flex: 0 0 calc(50% - 3px); border-left-width: 4px; }
#panel .kinds .k-bone { border-left-color: #96a5be; }
#panel .kinds .k-muscle { border-left-color: #e0708a; }
#panel .kinds .k-tendon { border-left-color: #6fd3c8; }
#panel .kinds .k-rope { border-left-color: #e3b64f; }
#panel button.on { background: #7fb2ff; color: #0e1116; border-color: #7fb2ff; }
#panel .big button { padding: 9px 0; font-size: 13px; font-weight: 600; }
#panel button.go { background: #2f5a3c; border-color: #4c8a5f; color: #d6f5df; }
#panel button.go:hover { background: #386b48; }
#panel button.stop { background: #5c3a34; border-color: #8a4f44; color: #ffd8cf; }

#hud { position: fixed; top: 10px; left: 10px; z-index: 5; padding: 7px 10px; white-space: pre;
  font: 12px/1.45 ui-monospace, Menlo, monospace; color: #cfe6ff; background: rgba(8,12,18,.62);
  border: 1px solid rgba(127,178,255,.25); border-radius: 8px; pointer-events: none; }

#cv { touch-action: none; }