:root {
  --bg: #140D0A;
  --card: rgba(30, 21, 17, 0.88);
  --line: #2C1F18;
  --text: #F6EFE9;
  --muted: #B9A496;
  --mint: #7DF2C9;
  --mint-ink: #0B2A21;
  --purple: #B98CFF;
  --caramel: #D9A27A;
  --cyan: #62E0F0;
  --red: #FF6B6B;
  --display: Rubik, 'Segoe UI', system-ui, sans-serif;
  --body: 'Golos Text', 'Segoe UI', system-ui, sans-serif;
  /* Telegram 8+ отдаёт свои отступы под шапку и «чёлку»; без них берём системные.
     Запасной 0px у env(): без него старый WebView выкинет всё выражение. */
  --top: max(env(safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px));
  --bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

#bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* высоту ставит bg.js: под клавиатурой фон не ужимается */
  height: 100vh;
  pointer-events: none;
}

/* Мятный ореол за кольцом калорий. Привязан к странице и уезжает с прокруткой.
   Вспышка — второй, яркий слой, который гаснет сам. Сам ореол шире узкого окна,
   поэтому обрезается контейнером — иначе появляется горизонтальная прокрутка. */
.halo-clip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 460px;
  overflow: hidden;
  pointer-events: none;
}

.halo {
  position: absolute;
  top: 0;
  left: 50%;
  width: 460px;
  height: 460px;
  margin-left: -230px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(125, 242, 201, 0.13) 2%, rgba(125, 242, 201, 0) 70%);
}

.halo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(125, 242, 201, 0.16) 2%, rgba(125, 242, 201, 0) 70%);
  opacity: 0;
  transition: opacity 900ms cubic-bezier(.22, 1, .36, 1);
}

.halo.lit::after {
  opacity: 1;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .halo::after { transition: none; }
}

.app {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  padding: calc(var(--top) + 20px) 20px calc(var(--bottom) + 120px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* имя может быть длинным — переносится оно, а не кнопка */
.top > div { flex: 1; min-width: 0; }

.top h1 {
  margin: 2px 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 30px;
  text-wrap: balance;
}

.muted { color: var(--muted); font-size: 13px; }

.chip {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid #3A2A21;
  background: rgba(30, 21, 17, 0.9);
  color: #E8DCD3;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 18px;
  line-height: 1.5;
  font-size: 15px;
}

.card b { color: var(--mint); font-weight: 600; }

.retry { margin-top: 12px; display: block; }

.chip:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }