/* Экран «Старт» (.p0-stage--start). Подключается после frontend-demo/styles/presentation0.css.
   Панели управления на «Старте» нет: сфера слева, меню глав справа,
   «Cognisphere» и «Дальше» под сферой. Сфера — SphereMode::Splash
   (SPHERE_START), вокруг неё кольцо-циферблат каналов. */

.p0-stage--start .p0-stage__copy { bottom: calc(10.5 * var(--su)); width: calc(60 * var(--su)); }
.p0-stage--start .p0-stage__copy h1 { font-size: max(28px, calc(6.4 * var(--su))); }
.p0-start-floor {
  --floor-x: calc(var(--frame-left) + 32 * var(--su));
  --floor-y: calc(var(--frame-top) + 30 * var(--su));
}

/* --- Кольцо-циферблат каналов ------------------------------------------------ */

.p0-start-dial__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.p0-start-dial__line { stroke: #e6cd9a38; stroke-width: 1; vector-effect: non-scaling-stroke; }
.p0-start-dial__line--outer { stroke: #b7a2f52e; stroke-dasharray: 2 5; }
.p0-start-dial__ticks { stroke: #e6cd9a70; stroke-width: 1; vector-effect: non-scaling-stroke; }
.p0-start-dial__rotor { transform-origin: 0 0; animation: cs-orbit 240s linear infinite reverse; }
.p0-start-dial {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
/* Подписи идут по эллипсу с ключевыми кадрами орбит сферы (глубина
   и слой); инлайн-стиль задаёт место покоя. */
.p0-start-dial__label {
  position: absolute;
  left: 0;
  top: 0;
  offset-rotate: 0deg;
  padding: .2em .75em;
  border: 1px solid #e6cd9a38;
  border-radius: 999px;
  background: #0d1414b8;
  color: #eadfc4;
  font: 500 max(9px, calc(.9 * var(--su)))/1.2 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  animation-name: p0-sphere-orbit;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.p0-start-dial__label:nth-child(3n + 1) { border-color: #b7a2f544; color: #ddd3f7; }

/* --- Кнопка «Дальше» и меню -------------------------------------------------- */

.p0-start-actions {
  position: absolute;
  z-index: 9;
  left: calc(3 * var(--su));
  bottom: calc(3.4 * var(--su));
}
.p0-start-next {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  min-height: max(44px, calc(4.4 * var(--su)));
  padding: 0 1.6em;
  border: 1px solid #efe0c1;
  border-radius: 999px;
  background: linear-gradient(135deg, #eddbb8, #e0c184);
  color: #1c2a29;
  font: inherit;
  font-size: max(15px, calc(1.8 * var(--su)));
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 0 calc(3 * var(--su)) #e6cd9a55;
}
.p0-start-next:hover,
.p0-start-next:focus-visible { background: linear-gradient(135deg, #f5ead3, #e8cf9b); outline: 2px solid #f5ead3; outline-offset: 3px; }
.p0-start-next__icon { display: inline-flex; }
.p0-start-next__icon .ui-icon { width: 1.1em; height: 1.1em; }
.p0-stage--start .p0-pres-menu {
  position: absolute;
  z-index: 9;
  left: calc(66 * var(--su));
  width: calc(31.5 * var(--su));
  top: calc(4.6 * var(--su));
  bottom: calc(2.6 * var(--su));
}

/* Телефон и планшет стоя: меню — колонка с прокруткой внутри своей панели
   под сферой, «Дальше» всегда видна у нижнего края. На 4:3 (1024 × 768)
   меню остаётся справа: под сферой ему не хватает высоты. */
@media (max-aspect-ratio: 5/4) {
  .p0-stage--start .p0-stage__copy { top: calc(33 * var(--su)); bottom: auto; width: calc(94 * var(--su)); }
  .p0-start-dial__label { font-size: 8px; letter-spacing: .08em; }
  .p0-start-actions {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    display: flex;
    justify-content: center;
  }
  .p0-start-next { flex: 1; justify-content: center; font-size: 16px; }
  .p0-stage--start .p0-pres-menu {
    position: fixed;
    left: 8px;
    right: 8px;
    width: auto;
    top: calc(50% + 24 * var(--su));
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    font-size: 13px;
  }
}