/* Телефон, планшет и узкие окна: панель с пояснением и кнопками внизу во всю ширину,
   главы в строку с прокруткой. Камера сама вписывает окна в место над панелью.
   Граница та же, что в app.js (compact) */
@media (max-width: 900px) {
  .hud {
    top: 10px;
    left: 10px;
    right: 10px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .pill {
    height: 40px;
    padding: 0 14px;
  }

  .hud__title {
    display: none;
  }

  /* Ссылка на портфолио на телефоне без подписи, только стрелка */
  .pill--back {
    width: 40px;
    padding: 0;
    justify-content: center;
    font-size: 0;
  }

  .pill--back > span {
    font-size: 16px;
  }

  .pill--clock {
    margin-left: auto;
  }

  .clock__date {
    font-size: 11px;
  }

  .clock__time {
    font-size: 16px;
  }

  .chapters {
    order: 3;
    flex: 1 0 100%;
    margin-left: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .chapters::-webkit-scrollbar {
    display: none;
  }

  .chapter {
    flex: 0 0 auto;
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
  }

  .panel {
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    width: auto;
    max-width: 640px;
    margin: 0 auto;
    padding: 14px 12px 12px 16px;
    border-radius: 24px;
  }

  .panel__title {
    margin: 10px 0 5px;
    font-size: 18px;
  }

  .panel__text {
    font-size: 13.5px;
    line-height: 1.45;
  }

  .panel__choices:not(:empty) {
    margin-top: 12px;
  }

  .choice {
    height: 34px;
    padding: 0 13px;
    font-size: 12px;
  }

  .controls {
    margin-top: 12px;
    gap: 8px;
  }

  .ctl-prev {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
  }

  .dots {
    gap: 4px;
  }

  .dot {
    width: 6px;
    height: 6px;
  }

  .dot.is-now {
    width: 18px;
  }

  .ctl-next {
    height: 48px;
    padding: 0 6px 0 18px;
    font-size: 14px;
  }

  .ctl-next__arrow {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 460px) {
  .clock__date {
    display: none;
  }
}