*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* Любое переполнение по горизонтали заставляет мобильный браузер
     расширить layout viewport — и тогда шире экрана становится всё,
     включая position:fixed. Запираем это на корню. */
  max-width: 100%;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

body {
  height: var(--app-height);
  overflow: hidden;
}

button, input, textarea {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
}

button { cursor: pointer; }

/* Фокус виден всегда, но только при навигации с клавиатуры —
   мышью и пальцем кольцо не мешает. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-control);
}

svg { display: block; flex: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

[hidden] { display: none !important; }

/* ── каркас экрана ──
   Высота приходит от Telegram, а не от 100vh: WebView врёт при
   свёрнутой панели и при открытой клавиатуре. */
.screenview {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  height: var(--app-height);
  padding-top: var(--safe-top);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  max-width: 720px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  /* На десктопе не растягиваем мобильную колонку на весь экран,
     а даём комнате нормальную ширину под плеер. */
  .screenview { max-width: 1040px; }
}