/* Модель чёрной дыры (black-hole.html) поверх общего оформления 3D-страниц (style.css): слева внизу — легенда
   (она же переключатели эффектов), внизу — часы, справа — карточка чёрной дыры. Сцена всегда тёмная: значки
   легенды — на кусочке тёмной сцены, тех же цветов, что на ней. */

body[data-page="blackhole"] #app { --dock-h: 62px; }       /* высоту шкалы уточняет скрипт */
#viewport canvas { position: absolute; inset: 0; }
#app .app-top { max-width: calc(100% - var(--edge) - var(--edge-r) - 56px); }

/* ── легенда ── */
#legend {
  left: var(--edge); bottom: var(--edge-b); width: 282px;
  max-height: calc(100% - var(--top) - 64px - var(--edge-b)); display: flex; flex-direction: column; overflow: hidden;
}
#legend.collapsed { width: auto; }
#legend.collapsed #legend-list { display: none; }
#legend-list { list-style: none; margin: 0; padding: 0 12px 8px; overflow: auto; overscroll-behavior: contain; }
#legend-list li { margin: 0; }
#legend label.check { gap: 9px; padding: 5px 0; font-size: 14px; line-height: 1.25; align-items: center; }
#legend label.check input { flex: none; margin: 0; }
#legend small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
.lg-row { display: flex; align-items: center; gap: 9px; padding: 5px 0 5px 26px; font-size: 14px; font-weight: 700; }
.lg-i { flex: none; width: 22px; height: 22px; padding: 1px; fill: none; stroke-width: 1.4; background: #03050c; border-radius: 6px; }
.lg-shadow circle { fill: #000; stroke: none; }
.lg-shadow .ring { fill: none; stroke: rgb(255, 238, 214); stroke-width: .9; }
.lg-ring circle { stroke: rgb(255, 240, 220); stroke-width: 1.1; }
/* цвет свечения: полоса чёрного тела, её строит скрипт тем же расчётом, что и сцену */
.lg-bb { display: block; }
.bb-scale { display: block; position: relative; height: 22px; margin: 5px 0 0; border-radius: 4px; }
.bb-scale i { position: absolute; left: 0; right: 0; top: 0; height: 9px; border-radius: 3px; }
.bb-scale b { position: absolute; top: 10px; font: 600 10.5px/1.1 var(--mono); color: var(--muted); transform: translateX(-50%); white-space: nowrap; }
.bb-scale b:first-of-type { transform: none; }
.bb-scale b:last-of-type { transform: translateX(-100%); }
.lg-glow-row > span:last-child { flex: 1; min-width: 0; }
.lg-lens .arc { stroke: rgb(255, 214, 160); stroke-width: 1.6; }
.lg-lens ellipse { stroke: rgb(255, 226, 190); stroke-width: 1.3; }
.lg-lens .hole { fill: #000; stroke: rgb(255, 240, 220); stroke-width: .8; }
.lg-dop .toward { stroke: rgb(200, 216, 255); stroke-width: 3; }
.lg-dop .away { stroke: rgb(214, 120, 70); stroke-width: 3; }
.lg-dop .arrow { stroke: rgb(220, 224, 236); stroke-width: 1.1; }
.lg-grav path { stroke: rgb(230, 140, 110); stroke-width: 1.4; }
.lg-grav .dot { fill: #000; stroke: rgb(255, 238, 214); stroke-width: .9; }
.lg-stars circle { fill: rgb(240, 236, 255); }
.lg-lab path, .lg-lab circle { stroke: rgba(238, 240, 245, .85); }

/* ── карточка чёрной дыры ── */
/* значения — словами, обычным шрифтом: «55 million light-years» в одну строку */
#info dd { white-space: normal; font: 600 13px/1.35 var(--body); }
#info dt { white-space: nowrap; }
#info-links { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 6px; }
#info-links:empty { display: none; }
#info.collapsed .info-links { display: none; }

/* модель не запустилась (нет WebGL 2 и т. п.) — сообщение обычным абзацем, а не надписью заставки */
#loader.err .orbit-spin { display: none; }
#loader.err .loader-text { max-width: 520px; margin: 0 auto; padding: 0 20px; text-align: center; text-transform: none; letter-spacing: 0; font: 600 16px/1.5 var(--body); color: var(--fg); }

/* ── «Об этой модели» ── */
#about .about-body h3 { font: 800 15px/1.25 var(--display); color: var(--fg); margin: 14px 0 6px; }
#about .credits { font-size: 13px; }
#about h2.pop-h { margin-bottom: 8px; }

/* ── часы ── на широком экране шкала — между легендой (282 px) и правым краем, подсказка — над ней */
body[data-page="blackhole"] .tm-dock { left: calc(var(--edge) + 294px); right: calc(var(--edge-r) + 12px); max-width: 640px; }
body[data-page="blackhole"] .app-hint { left: calc(50% + 64px); max-width: min(760px, calc(100% - 520px)); }
body[data-page="blackhole"] .tm-shuttle { min-width: 100px; }
/* счётчик: ширина — под «−23 h 59 min», чтобы шкала не дёргалась */
.bh-when { justify-items: start; min-width: 118px; }
.bh-when .tm-speed-v { font-size: 17px; }

/* до 1040 px шкала — во всю ширину внизу, над ней свёрнутая легенда, ещё выше — подсказка */
@media (max-width: 1040px) {
  body[data-page="blackhole"] .tm-dock { left: var(--edge); right: var(--edge-r); max-width: 760px; }
  body[data-page="blackhole"] #legend { bottom: var(--above-dock); }
  body[data-page="blackhole"] .app-hint { display: block; left: 50%; max-width: calc(100% - 32px); bottom: calc(var(--above-dock) + 52px); }
}
@media (min-width: 561px) and (max-width: 1000px) {
  body[data-page="blackhole"] .tm-bar { flex-wrap: nowrap; }
  body[data-page="blackhole"] .tm-br { display: none; }
  body[data-page="blackhole"] .tm-shuttle, body[data-page="blackhole"] .tm-speed-read { order: 0; flex-basis: auto; }
}
/* телефон: карточка — слева сверху, под переключателями (внизу место подсказке и легенде) */
@media (max-width: 760px) {
  body[data-page="blackhole"] #info { top: calc(var(--top) + 52px); bottom: auto; left: var(--edge); right: calc(var(--edge-r) + 52px);
    max-height: calc(100% - var(--top) - 52px - var(--above-dock) - 52px); }
  body[data-page="blackhole"] #info.collapsed { right: auto; }
  #legend { width: min(282px, calc(100% - 2 * var(--edge))); }
}
/* телефон: время, скорость и «Reset» — первой строкой, пуск и челнок — второй */
@media (max-width: 560px) {
  body[data-page="blackhole"] .tm-dock { left: 8px; right: 8px; }
  body[data-page="blackhole"] .bh-when { flex: 1 1 auto; min-width: 0; }
  body[data-page="blackhole"] .tm-speed-lab { display: block; }
  #app .app-top .app-seg button { padding: 7px 9px; }
}
@media (max-height: 560px) and (min-width: 520px) {
  #legend { width: 250px; }
}