/* Сброс стилей, раскладка сцены 1920×1080 и киоск-режим.
   Фирменные значения не хардкодим — всё через переменные из tokens.css.
   Оформление конкретных экранов живёт в screens.css, лента — в feed.css. */

/* --- Сброс --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  /* Киоск: курсора нет нигде, включая кнопки и ссылки.
     Класс has-cursor вешает main.js при движении мыши и снимает через
     несколько секунд простоя — на стенде курсор не появится никогда,
     а при отладке им можно пользоваться. */
  cursor: none;
}

html.has-cursor,
html.has-cursor * {
  cursor: default;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--stage-bg);
  color: var(--stage-text);
  font-family: var(--font-brand);
  font-size: var(--fs-body);
  line-height: 1.25;
  /* Стенд шумный и людный: ни выделения текста, ни системных жестов,
     ни перетаскивания элементов, ни резинового скролла. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  overscroll-behavior: none;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums lining-nums;
}

::selection {
  background: transparent;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

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

button {
  -webkit-appearance: none;
  appearance: none;
}

:focus,
:focus-visible {
  outline: none;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  font-size: inherit;
  font-family: var(--font-display);
}

[hidden] {
  display: none !important;
}

/* --- Сцена --- */
/* Экран стенда ровно 1920×1080, поэтому сцена фиксированного размера.
   Для отладки на другом мониторе интегратор может выставить
   --stage-scale (например, document.documentElement.style) — сцена
   отмасштабируется целиком, пропорции и все размеры сохранятся. */
#stage,
.stage {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: var(--stage-bg);
  transform: translate(-50%, -50%) scale(var(--stage-scale, 1));
  transform-origin: 50% 50%;
  /* Сцена — изолированный контейнер: содержимое не влияет на layout страницы. */
  contain: strict;
}

/* Полноэкранные слои внутри сцены (см. index.html):
   #feed-root — живая витрина, #screen-root — экраны и HUD поверх неё.
   Оба слоя одного размера, порядок задаётся z-index, а не потоком. */
.stage__layer,
.feed-root,
.screen-root {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
}

.feed-root {
  z-index: 0;
}

.screen-root {
  z-index: 10;
}

/* Служебный класс: убрать элемент из виду, не трогая раскладку. */
.is-hidden {
  visibility: hidden;
}