/* =========================================================================
   SHELL  (SHELL area) — app frame, topbar, tab bar, view container,
   connection banner, age gate sheet.
   ========================================================================= */
#app {
  position: fixed; inset: 0; z-index: 1;
  width: 100%; max-width: var(--app-max); margin: 0 auto;
  overflow: hidden;
}

/* ---------- views: each <section> is its own scroll container ---------- */
#views { position: absolute; inset: 0; }
.view {
  position: absolute; inset: 0;
  overflow-x: hidden; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: calc(var(--view-top) + var(--s-2)) var(--gutter) var(--view-bottom);
  scrollbar-width: none;
}
.view::-webkit-scrollbar { display: none; }
.view.no-topbar { padding-top: calc(var(--tg-top) + var(--s-3)); }
.view.no-tabbar { padding-bottom: calc(var(--safe-bottom) + var(--s-6)); }
.view.is-leaving { pointer-events: none; }

/* ---------- topbar ---------- */
.topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: var(--z-topbar);
  height: calc(var(--tg-top) + var(--topbar-h));
  padding: var(--tg-top) var(--gutter) 0;
  display: flex; align-items: center; gap: var(--s-3);
  /* fully opaque: bright cards must never ghost through the balance row */
  background: linear-gradient(180deg, #19191c, var(--bg) 70%);
  border-bottom: 1px solid var(--line);
  transition: transform var(--dur-ui) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard);
}
.topbar::after {
  /* soft fade below the hairline so scrolled content dissolves under it */
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.22), transparent);
  opacity: 0; transition: opacity var(--dur-fast);
}
.topbar.is-scrolled::after { opacity: 1; }
.topbar.is-hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }

.me { display: flex; align-items: center; gap: var(--s-3); min-width: 0; flex: 1; }
.me__avatar { position: relative; }
.me__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.me__balance {
  position: relative; display: flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); letter-spacing: -0.02em; line-height: 1;
}
.me__balance .coin { --coin: 20px; }
.me__balance .num { font-variant-numeric: tabular-nums; }
.me__delta {
  position: absolute; left: 28px; top: -4px;
  font-family: var(--font-text); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0;
  color: var(--green-400); pointer-events: none; white-space: nowrap;
}
.me__delta.is-neg { color: var(--text-2); }
.topbar__cta { flex: none; transition: transform var(--dur-ui) var(--ease-spring), opacity var(--dur-fast) var(--ease-standard); }
/* on the wallet the page has its own «Пополнить» — the CTA steps aside */
.topbar.is-wallet .topbar__cta { opacity: 0; transform: scale(0.9); pointer-events: none; transition-timing-function: var(--ease-exit); }
.topbar__cta.btn { --btn-h: 42px; padding: 0 var(--s-4) 0 var(--s-3); border-radius: var(--r-md); font-size: var(--fs-sm); }
.topbar__cta .ic { width: 18px; height: 18px; --ic-stroke: 2; }

/* skeleton state before 'me' arrives */
.me.is-loading .me__balance .num { color: transparent; border-radius: 6px; background: var(--surface-3); min-width: 72px; }

/* ---------- connection banner ---------- */
.netbar {
  position: absolute; left: 50%; top: calc(var(--tg-top) + var(--topbar-h) + var(--s-2)); z-index: calc(var(--z-topbar) + 1);
  display: flex; align-items: center; gap: var(--s-2);
  height: 32px; padding: 0 var(--s-3) 0 var(--s-2); border-radius: var(--r-pill);
  background: rgba(40, 24, 28, 0.94); color: #ffd4d8;
  border: 1px solid rgba(255, 71, 87, 0.28);
  font-size: var(--fs-xs); font-weight: 700;
  box-shadow: var(--shadow-2);
  transform: translate(-50%, -8px); opacity: 0; pointer-events: none;
  transition: transform var(--dur-ui) var(--ease-spring), opacity var(--dur-fast);
}
.netbar .ic { width: 16px; height: 16px; color: var(--red-400); }
.netbar.is-on { transform: translate(-50%, 0); opacity: 1; }
body.no-topbar .netbar { top: calc(var(--tg-top) + var(--s-16)); }

/* ---------- tab bar ---------- */
.tabbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: var(--z-tabbar);
  height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding: 0 var(--s-2) var(--safe-bottom);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch;
  background: linear-gradient(180deg, rgba(27, 27, 30, 0.97), rgba(21, 21, 23, 0.985));
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-top: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 -12px 32px rgba(0, 0, 0, 0.4);
  transition: transform var(--dur-ui) var(--ease-standard);
}
.tabbar.is-hidden { transform: translateY(105%); }
.tabbar__indicator {
  position: absolute; top: -1px; left: var(--s-2);
  width: calc((100% - var(--s-4)) / 5); height: 3px;
  display: flex; justify-content: center; pointer-events: none;
  transition: transform 420ms var(--ease-spring), opacity var(--dur-fast);
}
.tabbar__indicator::before {
  content: ''; width: 26px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--violet-400);
  box-shadow: 0 0 12px 1px rgba(160, 139, 255, 0.75);
}
.tabbar__indicator.is-none,
.tabbar__indicator.is-home { opacity: 0; } /* the raised tile already says "you are here" */
.tabbar__item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--text-3); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0;
  white-space: nowrap;
}
.tabbar__item .ic { width: 24px; height: 24px; transition: transform var(--dur-ui) var(--ease-spring); }
.tabbar__item.is-active { color: var(--text); }
.tabbar__item.is-active .ic { color: var(--violet-300); --ic-fill: 0.22; transform: translateY(-1px); }
.tabbar__item.is-pressed { transform: scale(0.94); }

/* center "Главная" — raised tile */
.tabbar__item--home { padding: 0 2px; }
.tabbar__tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 64px; height: 52px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  border: 1px solid var(--line); border-top-color: var(--line-top);
  box-shadow: var(--hl-top), var(--shadow-1);
  color: var(--text-2);
  transition: background var(--dur-ui) var(--ease-standard), box-shadow var(--dur-ui), color var(--dur-fast);
}
.tabbar__item--home.is-active .tabbar__tile {
  background: linear-gradient(180deg, #957dff, var(--violet-600));
  /* light only on the top edge: a light rim along the rounded bottom read as a stray white line */
  border-color: transparent;
  border-top-color: rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 6px 18px -6px rgba(109, 80, 232, 0.65), 0 2px 4px rgba(0, 0, 0, 0.3);
  color: #fff;
}
.tabbar__item--home.is-active .ic { color: #fff; --ic-fill: 0.28; }
.tabbar__item--home .tabbar__tile .ic { width: 22px; height: 22px; }
.tabbar__item--home.is-pressed { transform: none; filter: none; }
.tabbar__item--home.is-pressed .tabbar__tile { transform: scale(0.95); filter: brightness(1.08); }
.tabbar__tile { transition: background var(--dur-ui) var(--ease-standard), box-shadow var(--dur-ui), color var(--dur-fast), transform var(--dur-press) var(--ease-standard); }

/* ---------- age gate ---------- */
.agegate { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: var(--s-2); }
.agegate__art { width: 168px; height: 150px; margin-bottom: var(--s-4); }
.agegate__art svg { width: 100%; height: 100%; overflow: visible; }
.agegate__title { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; letter-spacing: var(--tracking-display); line-height: var(--lh-tight); }
.agegate__text { color: var(--text-2); font-size: var(--fs-sm); margin-top: var(--s-3); max-width: 32ch; }
.agegate__art .float { animation: agegate-float 4.8s var(--ease-inout) infinite; transform-origin: center; }
.agegate__art .drift { animation: agegate-float 5.6s var(--ease-inout) infinite; animation-delay: -2s; }
.agegate__art .drift.d2 { animation-duration: 4.4s; animation-delay: -0.6s; }
@keyframes agegate-float { 50% { transform: translateY(-5px); } }

/* very narrow windows (Telegram Desktop zoomed in) */
@media (max-width: 359px) {
  .topbar__cta.btn { width: 42px; padding: 0; justify-content: center; }
  .topbar__cta .btn__label { display: none; }
  .me__balance { font-size: var(--fs-lg); }
  .tabbar__item { font-size: 10px; }
  .tabbar__tile { width: min(64px, 100%); }
}
@media (max-width: 319px) {
  .tabbar__item { font-size: 9px; letter-spacing: -0.01em; }
}