/* ============================================================ mobile.css — сенсорное управление и адаптация под телефон Подключается всегда, но почти всё внутри висит на классе .touch-device, который TouchControls.js вешает на только на устройствах с сенсорным вводом. На десктопе файл ничего не меняет. ============================================================ */ /* Оверлей управления. Сам контейнер прозрачен для касаний — ловят только органы управления, иначе джойстик перехватывал бы тапы по меню и чату. */ #touch-controls { position: fixed; inset: 0; z-index: 6; pointer-events: none; display: none; /* Отступы под «чёлки» и скруглённые углы */ padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } .touch-device #touch-controls:not(.hidden) { display: block; } /* ── Джойстик ─────────────────────────────────────────────── */ /* Зона захвата — вся левая нижняя четверть экрана. Палец может лечь куда угодно в ней, база джойстика появится под ним. */ #touch-stick-zone { position: absolute; left: 0; bottom: 0; width: 45%; height: 75%; pointer-events: auto; touch-action: none; } #touch-stick-base { position: fixed; width: 112px; height: 112px; margin: -56px 0 0 -56px; opacity: 0; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .35); background: rgba(0, 0, 0, .18); opacity: 0; transition: opacity .12s; pointer-events: none; } #touch-stick-base.visible { opacity: 1; } #touch-stick-knob { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: 0; border-radius: 50%; background: rgba(255, 255, 255, .55); border: 2px solid rgba(255, 255, 255, .8); transform: translate(-50%, -50%); pointer-events: none; } /* ── Кнопки действий ──────────────────────────────────────── */ #touch-buttons { position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); display: flex; align-items: flex-end; gap: 14px; pointer-events: none; } .touch-btn { pointer-events: auto; touch-action: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .40); background: rgba(0, 0, 0, .20); color: #fff; /* Полупрозрачные, чтобы не заслонять игроков; при нажатии подсвечиваются, так что промах виден */ opacity: .62; font-family: inherit; font-weight: 700; text-shadow: 0 2px 3px rgba(0, 0, 0, .5); padding: 0; transition: transform .06s, background .06s; } .touch-btn.pressed { transform: scale(.92); background: rgba(255, 255, 255, .35); } /* Прыжок — самая частая кнопка, поэтому крупнее остальных. Размеры уменьшены: прежние закрывали собой игроков у сетки. */ #btn-jump { width: 66px; height: 66px; } #btn-dash { width: 52px; height: 52px; } #btn-dive { width: 48px; height: 48px; } /* Иконки внутри кнопок */ .touch-btn svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } #btn-chat svg { fill: currentColor; stroke: none; } /* ── Вспомогательные кнопки ───────────────────────────────── */ #btn-chat { position: absolute; right: max(18px, env(safe-area-inset-right)); top: max(64px, env(safe-area-inset-top)); width: 42px; height: 42px; pointer-events: auto; touch-action: none; } #btn-fullscreen { position: fixed; right: max(12px, env(safe-area-inset-right)); top: max(12px, env(safe-area-inset-top)); z-index: 8; width: 38px; height: 38px; display: none; pointer-events: auto; touch-action: manipulation; border-radius: 12px; } .touch-device #btn-fullscreen { display: flex; } #btn-fullscreen.active { background: rgba(255, 255, 255, .35); } /* ── Подсказка повернуть устройство ───────────────────────── */ #rotate-hint { position: fixed; inset: 0; z-index: 20; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: #6ca6e6; color: #fff; font-size: 20px; text-align: center; padding: 24px; } #rotate-hint .phone { width: 64px; height: 104px; border: 4px solid #fff; border-radius: 10px; animation: rotate-hint-spin 1.8s ease-in-out infinite; } @keyframes rotate-hint-spin { 0%, 40% { transform: rotate(0deg); } 60%, 100% { transform: rotate(-90deg); } } /* Показываем только на телефоне в портретной ориентации. На планшетах в портрете играть можно, поэтому ограничиваем шириной. */ @media (orientation: portrait) and (max-width: 900px) { .touch-device #rotate-hint { display: flex; } } /* ── Общие правки под сенсорный ввод ──────────────────────── */ .touch-device, .touch-device body { overscroll-behavior: none; touch-action: manipulation; } /* Курсор на телефоне прятать не надо, а вот выделение текста при удержании мешает */ .touch-device #view-container, .touch-device #gui { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* Меню на маленьком экране в ландшафте: ужимаем, иначе панели не влезают по высоте */ @media (orientation: landscape) and (max-height: 500px) { .touch-device #gui { font-size: 12px; } .touch-device .panel { padding: 8px 12px; } .touch-device #hud-container { font-size: 1.1rem !important; } .touch-device .characterItem, .touch-device .opponent-preview-container { width: 48px; height: 48px; } } @media (orientation: landscape) and (max-height: 380px) { .touch-device #gui { font-size: 10px; } .touch-device #btn-jump { width: 62px; height: 62px; } .touch-device #btn-dash { width: 50px; height: 50px; } .touch-device #btn-dive { width: 48px; height: 48px; } .touch-device #touch-stick-base { width: 112px; height: 112px; margin: -56px 0 0 -56px; } .touch-device #touch-stick-knob { width: 50px; height: 50px; } } /* Рекламные блоки на телефоне только мешают */ @media (max-width: 900px) { .touch-device #beachball-online_3000x250, .touch-device #beachball-online_300x250_2 { display: none !important; } } /* ============================================================ АДАПТАЦИЯ ИНТЕРФЕЙСА ПОД УЗКИЕ И НИЗКИЕ ЭКРАНЫ Меню изначально верстали под десктоп: всё в em/rem от базовых 16px, панели с `white-space: nowrap` и `flex-shrink: 0`, то есть физически неспособные ужаться, а `.screen` ещё и сдвинут вверх на -7vh. На телефоне в ландшафте (типичные 844×390) это гарантированно уезжает за края. Ниже — не «подвинуть кнопку», а изменить сам масштаб: базовый размер шрифта привязан к высоте экрана, поэтому вся вёрстка, построенная на em/rem, ужимается пропорционально и сохраняет пропорции. Плюс панелям разрешено переносить текст и скроллиться. Применяется и на десктопе в узком окне — это удобно для проверки без телефона: просто сузьте окно браузера. ============================================================ */ @media (max-width: 900px), (max-height: 620px) { /* Ключевая строка. Всё меню считается от этого размера. clamp не даёт тексту стать нечитаемым на очень низких экранах и не раздувает его на планшетах. */ html { font-size: clamp(8.5px, 2vh, 16px); } /* dvh вместо vh: на телефоне адресная строка браузера то появляется, то исчезает, и 100vh оказывается больше видимой области — низ интерфейса уходит под панель браузера. */ #gui { height: 100dvh; align-items: center; } #view-container { height: 100dvh; } /* Экраны: вписываем в видимую область и разрешаем прокрутку, если содержимое всё же выше. Убираем десктопный сдвиг вверх. */ .screen { top: 0; max-width: 100vw; max-height: 100dvh; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; padding: 6px 6px 14px; -webkit-overflow-scrolling: touch; } /* Панели должны уметь ужиматься. nowrap и flex-shrink: 0 — главная причина «обрезано и криво». */ .panel { padding: 0.7em 0.9em; margin: 4px; border-width: 2px; border-radius: 12px; white-space: normal; flex-shrink: 1; max-width: calc(100vw - 12px); box-sizing: border-box; } /* Тотемы по краям канваса съедают ширину, которой и так нет */ #border-left, #border-right { display: none; } /* Счёт матча не должен ужиматься вместе с меню — его читают в динамике и издалека */ #hud-container { font-size: clamp(13px, 3.4vh, 22px); } /* Список персонажей: в разметке жёстко задано width: 304px инлайном, поэтому перебиваем через !important — на 390px это распирает модалку. */ #characterlist { width: auto !important; max-width: calc(100vw - 60px) !important; justify-content: center; } .characterItem, .opponent-preview-container { flex-shrink: 0; } /* Модалки и панели с фиксированной шириной в px */ #loadout-modal, #leaderboards-panel, #private-match-panel, #player-profile-card, .ranked-guide-panel { max-width: calc(100vw - 16px) !important; max-height: calc(100dvh - 16px) !important; box-sizing: border-box; overflow-y: auto; } /* Таблицы рекордов шире экрана — пусть скроллятся, а не рвут вёрстку */ table { display: block; max-width: 100vw; overflow-x: auto; } } /* Совсем низкие экраны (телефон в ландшафте, ~390px и меньше): ужимаем вертикальные отступы, их суммарно набирается больше, чем самого содержимого */ @media (max-height: 430px) { .screen { padding: 2px 4px 8px; } .panel { padding: 0.5em 0.7em; margin: 3px; } .hud-separator { margin: 4px; } .characterItem, .opponent-preview-container { width: 44px; height: 44px; margin: 3px; } } /* ============================================================ АРЕНА ВО ВСЮ ШИРИНУ ЭКРАНА Renderer теперь масштабирует сцену по ширине и делает canvas выше экрана (см. computeScale). Контейнер обязан обрезать верх, иначе canvas растянет страницу и появится прокрутка. ============================================================ */ #view-container { overflow: hidden; } #viewport { flex-shrink: 0; /* иначе flex сожмёт canvas обратно по высоте */ } @media (max-width: 900px), (max-height: 620px) { /* Фон арены должен доходить до краёв, а не оставлять полосы */ #view-container { background-size: cover; background-position: center bottom; } } /* Кнопки быстрого чата: на телефоне по ним теперь ТАПАЮТ, а не жмут цифру на клавиатуре. Нужна нормальная зона нажатия и отклик, а цифровая подсказка слева больше не нужна. */ .touch-device .chat-row { cursor: pointer; pointer-events: auto; touch-action: manipulation; padding: 2px 0; } .touch-device .chat-row:active .chat-label { transform: scale(0.94); filter: brightness(1.15); } .touch-device #chat-buttons .chat-btn { display: none; } .touch-device .chat-label img { height: 30px; width: auto; } @media (max-height: 500px) { .touch-device .chat-label img { height: 24px; } .touch-device #chat-container { padding: 0.2em 0.4ch !important; } }