/* Мини-приложение «Галактика навыков» в Telegram: обвязка движка VND под WebView Telegram — отступы безопасной зоны
   (--tg-safe-area-inset-*, --tg-content-safe-area-inset-* ставит telegram-web-app.js), высота окна Telegram, экраны
   «загрузка / нет доступа». Космос всегда тёмный; светлая тема Telegram меняет только стекло панелей (data-theme движка)
   и экран ожидания. Системных эмодзи нет. */
html, body { height: 100%; margin: 0; background: #0a081b; overscroll-behavior: none; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Segoe UI", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.vnd-tg {
  --tg-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  --tg-bottom: calc(var(--tg-safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px));
  position: fixed;
  inset: 0;
  height: var(--tg-viewport-height, 100%);
  overflow: hidden;
}
.vnd-tg .vnd-gx { --gx-top: calc(10px + var(--tg-top)); }
.vnd-tg .vnd-gx--phone .vnd-gx__side,
.vnd-tg .vnd-gx--phone .vnd-gx__card,
.vnd-tg .vnd-gx--phone .vnd-gx__tourcard { bottom: calc(8px + var(--tg-bottom)); }

/* экран ожидания и отказа */
.vnd-tg__screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: calc(24px + var(--tg-top)) 28px calc(24px + var(--tg-bottom));
  text-align: center;
  color: #fff;
  background:
    radial-gradient(70% 50% at 50% 42%, rgba(90, 60, 190, 0.35) 0%, transparent 70%),
    radial-gradient(140% 110% at 50% 50%, #0f0b26 0%, #0a081b 55%, #05040d 100%);
}
.vnd-tg__screen[hidden] { display: none; }
.vnd-tg__orb {
  width: 92px;
  height: 92px;
  margin-bottom: 8px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 6%, rgba(255, 236, 200, 0.95) 9%, rgba(180, 150, 255, 0.55) 22%, transparent 48%),
    conic-gradient(from 20deg, rgba(157, 132, 255, 0.0), rgba(157, 132, 255, 0.55), rgba(255, 170, 120, 0.35), rgba(157, 132, 255, 0.0));
  filter: blur(0.3px);
  animation: vnd-tg-spin 9s linear infinite;
}
.vnd-tg__screen[data-state='denied'] .vnd-tg__orb,
.vnd-tg__screen[data-state='error'] .vnd-tg__orb { animation: none; opacity: 0.55; }
@keyframes vnd-tg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vnd-tg__orb { animation: none; } }
.vnd-tg__msg { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; max-width: 22em; }
.vnd-tg__sub { margin: 0; font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.7); max-width: 24em; }
.vnd-tg__sub:empty { display: none; }

/* выбор темы в карточке и подсказка про запасной путь */
.vnd-tg__route { display: grid; gap: 6px; margin: 10px 0 8px; font-size: 13px; color: var(--gx-sub); }
.vnd-tg__route select {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--gx-edge);
  border-radius: 12px;
  background: var(--gx-glass-strong);
  color: var(--gx-text);
}
.vnd-tg__hint { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--gx-dim); }