/* standon.css — дополнительный слой поверх штатных стилей игры.
 *
 * Подключается ПОСЛЕДНИМ в head() (см. patches/25_tg_mobile.py), поэтому любое правило
 * здесь выигрывает у /css/head.css, /css/conect2.css и удалённых таблиц
 * m.vten.ru при равной специфичности.
 *
 * Правила слоя:
 *   1. Слой только дополняет. Ни одна геометрия существующей вёрстки
 *      (width / height / position / float / display у блоков игры) здесь
 *      не переопределяется.
 *   2. Всё, что относится к Telegram Mini App, живёт под html.tg.
 *      Класс tg навешивается скриптом только при наличии initData,
 *      то есть обычный мобильный сайт этих правил не видит вообще.
 *   3. Никаких @import и никаких ссылок на сторонние хосты: слой обязан
 *      работать даже если все хотлинки (m.vten.ru, lords.mobi, hedark.ru)
 *      перестанут отдавать файлы.
 */

/* ------------------------------------------------------------------ */
/* 1. Общая часть: и сайт, и Telegram                                  */
/* ------------------------------------------------------------------ */

/* Safari/WebView в альбомной ориентации самовольно увеличивает кегль
   в узких колонках. Игра свёрстана под фиксированные 360-480 px,
   поэтому автоподбор только ломает строки. */
html {
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-overflow-scrolling: touch;
}

/* Убирает задержку ~300 мс перед срабатыванием тапа по ссылке.
   Затрагивает только обработку жестов, не геометрию. */
a,
button,
label,
summary,
input[type="submit"],
input[type="button"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"],
select,
.btn,
.btn_login,
.btn_start,
.main-menu-link,
.page-info-link,
.page-settings-link,
.header-gold-link {
	touch-action: manipulation;
}

/* Подсветка тапа в тон интерфейсу (по умолчанию — синеватый прямоугольник
   системы, который на тёмном фэнтези-фоне выглядит чужеродно). */
a,
button,
input[type="submit"],
input[type="button"],
.btn,
.main-menu-link {
	-webkit-tap-highlight-color: rgba(255, 204, 0, 0.16);
}

/* Видимая рамка фокуса только для клавиатурной навигации:
   мышь и палец её не вызывают, скринридер и Tab — вызывают. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 1px solid rgba(255, 204, 0, 0.6);
	outline-offset: 1px;
}

::selection {
	background: rgba(255, 204, 0, 0.28);
	color: #fff;
}

/* Шапка, плашка заголовка и нижнее меню — это чистый интерфейс.
   Случайное выделение их подписей при скролле пальцем только мешает;
   текст самой игры (чат, описания, письма) остаётся выделяемым. */
.header,
.page-info,
.main-menu,
.main-menu-link,
.link-title {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Иконки интерфейса не должны «отрываться» при долгом нажатии
   и перетаскивании. */
.header img,
.page-info img,
.main-menu img,
.link-img {
	-webkit-user-drag: none;
}

/* ------------------------------------------------------------------ */
/* 2. Только Telegram Mini App (html.tg)                               */
/* ------------------------------------------------------------------ */

/* Фон корневого элемента. В WebView при «перетягивании» страницы за
   верхнюю или нижнюю границу видна подложка html, а не body, и на светлой
   системной теме она белая — на чёрной игре это резкая вспышка.
   Внутри Telegram ширина экрана всегда меньше max-width тела, поэтому
   отключение наследования фона body ничего не открывает по бокам.
   На обычном сайте (широкий экран) правило не применяется намеренно. */
html.tg {
	background-color: #000;
}

/* Резинка прокрутки не должна доходить до жеста закрытия приложения.
   Вертикальные свайпы дополнительно глушатся вызовом
   WebApp.disableVerticalSwipes() из patches/25_tg_mobile.py, где он доступен. */
html.tg,
html.tg body {
	overscroll-behavior-y: none;
}

/* Безопасные зоны. Telegram выставляет свои переменные
   (--tg-safe-area-inset-*, --tg-content-safe-area-inset-*), iOS —
   env(safe-area-inset-*) при viewport-fit=cover, который скрипт
   дописывает в meta viewport тоже только внутри Telegram.
   max() берёт большее из двух и не складывает их дважды; если ни одного
   источника нет, оба слагаемых равны 0px и отступы не меняются.

   Низ важнее всего: последний элемент страницы — блок .main-menu
   высотой 112 px, и без отступа его нижний ряд подписей на iPhone
   попадает под полосу «домой». */
html.tg body {
	min-height: var(--tg-viewport-stable-height, 100vh);
	padding-top: max(var(--tg-content-safe-area-inset-top, 0px), 0px);
	padding-right: max(var(--tg-safe-area-inset-right, 0px), env(safe-area-inset-right, 0px));
	padding-bottom: max(var(--tg-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 0px));
	padding-left: max(var(--tg-safe-area-inset-left, 0px), env(safe-area-inset-left, 0px));
}

/* Полоса прокрутки корневого скроллера. Штатный common.css ставит телу
   overflow-y: scroll, из-за чего в Android WebView остаётся постоянный
   жёлоб справа. Скрывается только внешний скроллер — внутренние
   прокручиваемые блоки (списки товаров, чат) свои полосы сохраняют. */
html.tg {
	scrollbar-width: none;
}

html.tg::-webkit-scrollbar,
html.tg > body::-webkit-scrollbar {
	width: 0;
	height: 0;
}

/* Долгое нажатие по картинке в WebView открывает системное меню
   «Сохранить изображение» поверх игры. Для элементов интерфейса это
   всегда промах, а не намерение. */
html.tg .header,
html.tg .page-info,
html.tg .main-menu,
html.tg .main-menu img,
html.tg .link-img,
html.tg .header img,
html.tg .page-info img {
	-webkit-touch-callout: none;
}

/* iOS увеличивает масштаб всей страницы при фокусе в поле, у которого
   кегль меньше 16 px, и обратно сам не возвращает — страница остаётся
   растянутой до перезагрузки. Штатные стили ставят полям 12 px.
   Это единственное правило слоя, которое меняет размер элемента:
   поля ввода текста внутри Telegram становятся заметно выше.
   Кнопки (submit/button) не затронуты — они масштаб не вызывают. */
html.tg input[type="text"],
html.tg input[type="password"],
html.tg input[type="search"],
html.tg input[type="email"],
html.tg input[type="tel"],
html.tg input[type="url"],
html.tg input[type="number"],
html.tg input:not([type]),
html.tg textarea,
html.tg select {
	font-size: 16px;
}