@charset "UTF-8"; /* * Brave Rush — панель поверх игры и поправки кадра для Telegram. * * Грузится ПОСЛЕ i18n/layout.css и только уточняет его: рамка #gameFrame, * её пропорции 750:1334 и поведение на узких экранах остаются там. * Здесь два блока: * 1) высота кадра в Telegram, где 100vh врёт; * 2) сама панель (звук / язык / обучение). */ /* ------------------------------------------------------------------ * * 1. Telegram Mini App * * --tg-h viewportStableHeight, выставляет ui.js * --tg-top safeAreaInset.top + contentSafeAreaInset.top * --tg-bottom то же снизу * * Внутри Mini App 100vh — это высота окна вебвью, а не видимой области: * сверху её режет шапка Telegram (или статус-бар в полноэкранном * режиме), снизу — системная панель. Кадр, посчитанный по 100vh, * получается выше видимого, и нижний ряд кнопок игры уезжает под край. * Поэтому в Telegram считаем от --tg-h, а не от vh. Вне Telegram класса * tg-ui на нет и ничего из этого блока не применяется. * ------------------------------------------------------------------ */ html.tg-ui, html.tg-ui body { height: var(--tg-h, 100%); overflow: hidden; /* Свайп вниз по странице в Mini App сворачивает окно. Вертикальные свайпы гасит ui.js через disableVerticalSwipes(), здесь — запрет собственной прокрутки страницы, чтобы не было что тянуть. */ overscroll-behavior: none; touch-action: none; } /* Кадр в Telegram: пропорция ВСЕГДА макетная, лишнее место — в поля. * * ПОЧЕМУ ИМЕННО ТАК, А НЕ «во всю видимую область». * * Раньше здесь высота бралась как вся доступная область, а ширина * ограничивалась сверху через max-width. Пока предел по пропорции уже * окна — кадр макетный; как только окно уже предела, ширину ограничивает * 100 %, и пропорция кадра становится какой угодно. На телефоне это * происходит ВСЕГДА: окно узкое и высокое. * * Само по себе это было бы не страшно, если бы игра умела растягивать * фон. Она не умеет. Слои параллакса — узлы ПОСТОЯННОГО размера * 1500x1334 (проверено на двух устройствах с разным разрешением макета), * а движок настроен fitWidth: ширина всегда ровно 750 единиц, высота * видимой области = 750 * высота кадра / ширина кадра. Отсюда правило * в одну строку: * * видимая высота > 1334 -> фон физически не достаёт до края. * * Самоотчёт с телефона (Android, окно 392x872, плотность 2.75): * * кадр 393x773, пропорция 0.5082 при макетной 0.5622 * visibleSize 750x1475 * небо 1500x1334 масштабируется и закрывает, остальные четыре слоя * достают до 1334 — 141 единица сверху не закрыта ничем * * Это и есть «выше небо есть, ниже полоса без фона, между ними шов». * * Замер этой правки на стенде (onboarding/tools/frame.js, те же три * таблицы стилей, что и на сервере), колонка «видимая высота»: * * окно было стало * 392x872 0.4804 / 1561 0.5622 / 1334 * 375x812 0.4960 / 1512 0.5622 / 1334 * 414x896 0.4929 / 1522 0.5622 / 1334 * 600x1300 0.4823 / 1555 0.5622 / 1334 * 828x1408 0.5622 / 1334 0.5622 / 1334 (не изменилось) * 1280x900 0.5622 / 1334 0.5622 / 1334 (не изменилось) * * Цена — пустое место: на 392x872 это 175 px, поделённые поровну сверху * и снизу. Платим осознанно: непокрытая полоса фона хуже поля. * * ОДНА ВЕЛИЧИНА-ИСТОЧНИК. Ширину считаем, высоту выводим из неё. Так * пропорция не может измениться ПОСЛЕ старта движка: --tg-h приходит от * Telegram событием viewportChanged, то есть иногда уже после boot(), а * движок запекает designResolution один раз. Раньше на каждом телефонном * размере пропорция между «до» и «после» менялась; теперь держится. * * aspect-ratio тут не годится: у position: fixed с заданными top и * bottom высота auto разрешается через позиционирование (CSS 2.1 * §10.6.4), а не через пропорцию, и aspect-ratio молча игнорируется. * Поэтому height считается явно. */ html.tg-ui #gameFrame { --tg-avail: calc(var(--tg-h, 100vh) - var(--tg-top, 0px) - var(--tg-bottom, 0px)); --frame-w: min(100vw, calc(var(--tg-avail) * 750 / 1334)); /* top/bottom задают ПОЛОСУ видимой области, а margin: auto делит остаток поровну — кадр висит по центру полосы, а не прижат к шапке Telegram. Проценты в --tg-avail использовать нельзя: величина участвует в расчёте ШИРИНЫ, а там 100 % разрешается от ширины родителя, а не от высоты. Отсюда запасное значение 100vh. */ top: var(--tg-top, 0px); bottom: var(--tg-bottom, 0px); margin: auto; width: var(--frame-w); height: calc(var(--frame-w) * 1334 / 750); /* пределы из layout.css больше не нужны: ширина уже ограничена */ max-width: none; max-height: none; } /* Медиазапроса «узкий экран — кадр во всю ширину», как в layout.css, * здесь НЕ повторяем, и это не пропуск: правило выше и так перебивает * его по весу селектора (html.tg-ui #gameFrame против #gameFrame), а * «во всю ширину» — ровно то поведение, от которого мы уходим. */ /* ------------------------------------------------------------------ * * 2. Панель * * Живёт ВНУТРИ #gameFrame, а не в окне: в ландшафтном окне игра сидит в * портретной рамке, а по бокам чёрные поля, и кнопка, прибитая к окну, * висела бы в пустоте отдельно от интерфейса. * * Палитра — тёмно-коричневое стекло с тёплым золотым кантом: у игры * весь интерфейс на золоте по коричневому, и панель не спорит с ним, * как спорили синие системные кнопки отладки. * ------------------------------------------------------------------ */ #brave-ui { position: absolute; /* top/left ставит ui.js: место найдено замером свободной полосы на главном экране, в единицах дизайн-разрешения, и пересчитывается в пиксели по масштабу кадра */ top: 100px; left: 7px; /* Выше всех чужих слоёв страницы: окно объявления из index.html (9999) и оверлей авторизации (10001) растянуты на весь экран, и под ними кнопка звука была бы недоступна как раз там, где играет музыка логина. Пересечения нет: панель стоит в левой полосе, а карточки этих слоёв — по центру. */ z-index: 10002; font: 500 13px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; /* Ключевое: сама панель кликов НЕ ловит. Иначе её прямоугольник закрывал бы канвас, и под ним переставали бы нажиматься кнопки игры — ровно та жалоба «нажимаю, ничего не происходит», с которой всё начиналось. Ловят только сами кнопки, ниже. */ pointer-events: none; } #brave-ui .bui-bar, #brave-ui .bui-menu { pointer-events: auto; } #brave-ui .bui-bar { display: flex; gap: 4px; padding: 2px; border-radius: 50%; background: rgba(24, 16, 10, 0.5); border: 1px solid rgba(201, 162, 39, 0.4); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); /* В покое кнопка приглушена: она стоит в просвете верхней панели игры и не должна спорить с ней за внимание. */ opacity: 0.72; transition: opacity 0.15s; } #brave-ui .bui-bar:hover, #brave-ui .bui-bar:active, #brave-ui.open .bui-bar { opacity: 1; } #brave-ui .bui-btn { width: var(--bui-size, 30px); height: var(--bui-size, 30px); padding: 0; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: transparent; color: #f0d69a; cursor: pointer; transition: background 0.12s, color 0.12s; } #brave-ui .bui-btn:hover, #brave-ui .bui-btn:focus-visible { background: rgba(201, 162, 39, 0.2); outline: none; } #brave-ui .bui-btn:active { background: rgba(201, 162, 39, 0.32); } #brave-ui .bui-btn.bui-off { color: #8c8377; } #brave-ui .bui-btn svg { width: 64%; height: 64%; fill: currentColor; stroke: currentColor; stroke-linecap: round; } /* выпадающее меню */ #brave-ui .bui-menu { display: none; margin-top: 5px; padding: 7px; min-width: 168px; border-radius: 10px; background: rgba(24, 16, 10, 0.92); border: 1px solid rgba(201, 162, 39, 0.45); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); } #brave-ui.open .bui-menu { display: block; } /* Кнопка стоит у правого края кадра (см. PANEL_X в ui.js): меню шире кнопки в шесть раз и, раскрываясь вправо, уезжало бы за кадр. Прижимаем его правым краем к кнопке. Позиционируется от #brave-ui, у которого position: absolute, — своей системы координат меню не заводит и порядок в потоке не меняет. */ #brave-ui.bui-right .bui-menu { position: absolute; top: 100%; right: 0; margin-top: 5px; } #brave-ui .bui-row { display: flex; gap: 4px; margin-bottom: 6px; } #brave-ui .bui-chip { flex: 1; padding: 6px 0; border: 1px solid rgba(201, 162, 39, 0.35); border-radius: 7px; background: transparent; color: #d8c79a; font: inherit; cursor: pointer; } #brave-ui .bui-chip.on { background: rgba(201, 162, 39, 0.85); border-color: rgba(201, 162, 39, 0.9); color: #2a1c0c; font-weight: 700; } #brave-ui .bui-item { display: block; width: 100%; padding: 8px 9px; border: none; border-radius: 7px; background: transparent; color: #e6d7b0; font: inherit; text-align: left; cursor: pointer; } #brave-ui .bui-item:hover:not(:disabled) { background: rgba(201, 162, 39, 0.18); } #brave-ui .bui-item:disabled { color: #8c8377; cursor: default; }