/* Отличия мини-аппа от витринной страницы: внутри Telegram нет «стола» вокруг
   телефона, а высоту окна задаёт клиент, а не браузер. */

html, body, .page { background: #17171a; }

.page { align-items: stretch; }

/* --tg-height приходит из Telegram (viewportStableHeight): на iOS 100dvh уезжает
   под панель клиента и низ навигации срезается. В браузере переменной нет — работает 100dvh. */
.shell {
  height: min(var(--tg-height, 100dvh), 980px);
  margin: 0 auto;
}

/* Страховка вёрстки: у `1fr` нижняя граница — ширина содержимого, поэтому один
   слишком длинный таймер раздвигал сетку и выталкивал четвёртый чип за экран
   (у .shell overflow:hidden, так что чип просто обрезался). minmax(0,1fr) держит
   колонки равными, а подписи в этом случае обрезаются многоточием. */
.chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chip { min-width: 0; }
.chip-label, .chip-time { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Гостю (страница открыта не из Telegram) честно говорим, что прогресс не пишется. */
.guest-note {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  z-index: 11; pointer-events: none;
  background: rgba(10,10,12,.86); border: 1px solid #34343c; border-radius: 99px;
  color: #8b8b95; font-size: 10.5px; font-weight: 700; padding: 4px 12px; white-space: nowrap;
}