:root {
  --safe-top: 0px;
  --safe-bottom: 0px;
}

/* ─── «Телевизор» в браузере / широком WebView (≥600px) ─────────────────────
   • Тёмная рамка вокруг (не чистый #000), отступы сверху/снизу заметнее боковых
   • Внутри body — только 16:9-окно; скролл ТОЛЬКО у body, html не двигается
     (иначе под «экраном» проступает DOM: листы аватара, навбар и т.д.)
   • min-height:100dvh на body из страниц сбрасываем — иначе тело выше рамки
   • Скругление: максимум 12px по docs/FRONTEND.md
   • Переменные рамки — для согласованной высоты .tab в home.html
─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 600px) {
  html {
    --tv-bezel-x: 32px;
    --tv-bezel-y-top: 44px;
    --tv-bezel-y-bottom: 52px;

    background: #1c1b19 !important;
    height: 100dvh;
    max-height: 100dvh;
    width: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
    position: fixed;
    inset: 0;
    box-sizing: border-box;
    padding: var(--tv-bezel-y-top) var(--tv-bezel-x) var(--tv-bezel-y-bottom);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  body {
    box-sizing: border-box;
    width: min(
      calc(100vw - 2 * var(--tv-bezel-x)),
      calc((100dvh - var(--tv-bezel-y-top) - var(--tv-bezel-y-bottom)) * 16 / 9)
    );
    height: min(
      calc(100dvh - var(--tv-bezel-y-top) - var(--tv-bezel-y-bottom)),
      calc((100vw - 2 * var(--tv-bezel-x)) * 9 / 16)
    );
    max-width: none;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--bg, #f0ede6);
    border-radius: 12px;
    position: relative;
    flex-shrink: 0;
    transform: translate3d(0, 0, 0);
    isolation: isolate;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.06),
      0 2px 8px rgba(0, 0, 0, 0.12);
  }
}

/* Скролл вкладок home — та же внутренняя высота, что у «экрана» body */
@media (min-width: 600px) {
  .tab {
    max-height: min(
      calc(100dvh - var(--tv-bezel-y-top) - var(--tv-bezel-y-bottom)),
      calc((100vw - 2 * var(--tv-bezel-x)) * 9 / 16)
    );
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .prf-page {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (display-mode: standalone) {
  body {
    padding-top: env(safe-area-inset-top, 0px);
  }
}