/* mobile.css — mobile-first слой казино (эпик: мобильная адаптация). Грузится ПОСЛЕДНИМ (после tokens/base/components/layout) → при равной специфичности выигрывает по порядку каскада над desktop-first базой. Версионируется ?v= в layout.jsx (иначе протухает на 4ч — см. ESM-кэш). Точечный !important применяется только там, где надо пробить collapsed-сайдбар (`.app.is-sidebar-collapsed .X`, специфичность 0-3-0) в режиме drawer. */ /* ========================================================================= M0 — safe-area для chrome (нотч / home-indicator iOS) ========================================================================= */ @media (max-width: 768px) { .topbar { height: calc(var(--topbar-height) + var(--safe-top)); padding-top: var(--safe-top); padding-inline: max(var(--space-3), var(--safe-left)) max(var(--space-3), var(--safe-right)); gap: var(--space-2); } .main { padding-bottom: calc(var(--bottomnav-height) + var(--safe-bottom) + var(--space-4)) !important; padding-inline: max(var(--space-3), var(--safe-left)) max(var(--space-3), var(--safe-right)); } .bottom-nav { height: calc(var(--bottomnav-height) + var(--safe-bottom)); padding-bottom: var(--safe-bottom); } } /* ========================================================================= M1 — Навигация: hamburger-drawer + «More»-bottom-sheet + bottom-nav (5-up) ========================================================================= */ /* Общий backdrop (один элемент, добавляется shell.js в ). */ .mobile-backdrop { position: fixed; inset: 0; z-index: var(--z-overlay); background: rgba(0, 0, 0, 0.55); opacity: 0; visibility: hidden; transition: opacity var(--transition-base), visibility var(--transition-base); } body.drawer-open .mobile-backdrop, body.sheet-open .mobile-backdrop { opacity: 1; visibility: visible; } /* scroll-lock фона, пока открыт drawer/sheet */ body.drawer-open, body.sheet-open { overflow: hidden; } @media (max-width: 768px) { /* ---- Drawer: сайдбар как off-canvas панель слева ---- */ .sidebar { display: flex !important; /* пробить layout.css `.sidebar{display:none}` */ flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; /* height:100dvh is viewport-relative, so the drawer fills the full screen even when an ancestor (.app, via its fade animation's transform) becomes the containing block and would otherwise clip `bottom:0` short by the bottom-nav. */ height: 100vh; height: 100dvh; width: var(--drawer-width); z-index: var(--z-drawer); transform: translateX(-100%); transition: transform var(--transition-base); background: var(--color-bg-secondary); border-right: 1px solid var(--color-border); box-shadow: var(--shadow-lg); overflow-y: auto !important; /* пробить collapsed `overflow:visible` */ overscroll-behavior: contain; padding: calc(var(--safe-top) + var(--space-4)) var(--space-3) calc(var(--safe-bottom) + var(--space-4)); } body.drawer-open .sidebar { transform: translateX(0); } /* В drawer всегда РАЗВЁРНУТЫЙ вид — отменяем collapsed-иконочный рельс. */ .sidebar .nav-item { justify-content: flex-start !important; position: relative !important; } .sidebar .nav-item__chevron { display: flex !important; } .sidebar .nav-item__label, .sidebar .nav-group > [data-nav-group] .nav-item__label { position: static !important; display: flex !important; flex: 1 !important; opacity: 1 !important; transform: none !important; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; white-space: normal !important; pointer-events: auto !important; font-weight: 400; } .sidebar .lang-badge { display: inline-block !important; } /* аккордеон Originals — статичный (не flyout), раскрытие по .is-open */ .sidebar .nav-group__sub { position: static !important; margin-left: var(--space-6) !important; min-width: 0 !important; max-height: 0 !important; overflow: hidden !important; opacity: 1 !important; pointer-events: auto !important; transform: none !important; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } .sidebar .nav-group.is-open .nav-group__sub { max-height: 360px !important; } /* увеличенные тач-таргеты в drawer */ .sidebar .nav-item, .sidebar .nav-subitem { min-height: var(--tap-min); } .sidebar .nav-subitem { display: flex; align-items: center; } /* ---- Bottom-nav: 5-я кнопка «Ещё» + safe-area + тач-таргеты ---- min-width:0 КРИТИЧНО: 5 flex-пунктов иначе не ужимаются ниже min-content (≈385px) и распирают фикс-бар шире вьюпорта на узких телефонах. */ .bottom-nav__item { min-width: 0; min-height: var(--tap-min); padding-bottom: var(--safe-bottom); } .bottom-nav__item span { font-size: 10px; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- More bottom-sheet (добавляется shell.js в ) ---- */ .more-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sheet); background: var(--color-bg-secondary); border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); border-top: 1px solid var(--color-border); box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.45); max-height: var(--sheet-max-h); overflow-y: auto; overscroll-behavior: contain; padding: var(--space-2) var(--space-4) calc(var(--safe-bottom) + var(--space-5)); transform: translateY(100%); transition: transform var(--transition-base); } body.sheet-open .more-sheet { transform: translateY(0); } .more-sheet__grab { width: 40px; height: 4px; border-radius: 2px; background: var(--color-border-hover); margin: var(--space-2) auto var(--space-3); } .more-sheet__title { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-tertiary); margin: var(--space-2) var(--space-1) var(--space-2); } .more-sheet__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); } .more-sheet__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: var(--space-3) var(--space-2); background: var(--color-bg-tertiary); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-secondary); font-size: 12px; text-align: center; line-height: 1.15; } .more-sheet__item.is-active { border-color: var(--color-accent); color: var(--color-accent); } .more-sheet__item svg { width: auto; height: 22px; } .more-sheet__item--danger { color: var(--color-danger); } .more-sheet__row { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min); padding: var(--space-3) var(--space-2); border-top: 1px solid var(--color-border); color: var(--color-text-secondary); } /* ---- Топбар: компактнее, чтобы topbar__right не вылазил (аватар у края) ---- */ .topbar__spacer { display: none; } .balance-box__label { display: none; } .balance-box__coin { display: none; } /* декоративная монета — убираем на мобиле */ .balance-box { padding-inline: var(--space-2); gap: 4px; min-width: 0; } .topbar { gap: var(--space-2); } .topbar__brand { gap: 4px; } .topbar__right { gap: var(--space-2); min-width: 0; } /* «Deposit» текст прячем — оставляем иконку (узкие экраны) */ .btn--deposit .btn-label { display: none; } .btn--deposit { padding-inline: var(--space-3); } /* Футер местами на ~4px шире вьюпорта — клипуем в его рамке. */ .site-footer { max-width: 100%; overflow-x: clip; } } /* Самые узкие телефоны — только лого-марка, без текста «GTSpin» (освобождает топбар). */ @media (max-width: 380px) { .brand-text { display: none; } } /* Support-FAB (z-index 1500) плавает ВЫШЕ drawer/sheet (1000) и перехватывал тапы по сайдбару/играм. Прячем его, пока открыт любой оверлей. */ body.drawer-open .support-fab, body.sheet-open .support-fab { display: none !important; } /* iOS Safari: `.app` имеет `animation: gtFadeIn … both` (layout.css), и из-за fill:both Safari держит .app как stacking-context даже ПОСЛЕ анимации. Тогда drawer (z1000, ребёнок .app) оказывается ПОД backdrop (z900, ребёнок body) — backdrop перехватывает тапы, и в открытом сайдбаре нельзя выбрать игру. Снимаем анимацию при открытом оверлее → .app перестаёт быть контекстом → z-index drawer честно бьёт backdrop на корневом уровне. (Анимация и так давно отыграла.) */ body.drawer-open .app, body.sheet-open .app { animation: none !important; } /* На широких (десктоп) chrome мобильной нав не существует. */ @media (min-width: 769px) { .mobile-backdrop, .more-sheet, .bottom-nav__more { display: none !important; } } /* ========================================================================= M2 — Игровые страницы (originals): раскладка + фикс досок + bet-панель ========================================================================= */ @media (max-width: 768px) { /* board сверху на всю ширину, bet-панель ниже, чат скрыт */ .originals-layout, .originals-layout.is-chat-hidden { grid-template-columns: 1fr !important; grid-template-areas: "game" "bet" !important; gap: var(--space-3) !important; } .originals-chat { display: none !important; } /* уменьшенные паддинги досок на мобиле */ .mines-board, .tower-board, .coin-stage, .crash-stage, .plinko-stage, .dice-stage, .limbo-stage { padding: var(--space-3) !important; } /* Mines: колонки могут ужиматься ниже контента (minmax(0,1fr)) — без оверфлоу */ .mines-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); max-width: 100%; } /* Tower / Coinflip — гарантированно во всю ширину контейнера */ .tower-rows { max-width: 100%; } .coin-sides { max-width: 100%; } .coin-stage { gap: var(--space-3); min-height: 260px; } .coin { width: 112px; height: 112px; } /* тач-таргеты тайлов */ .tower-tile { min-height: var(--tap-min); } /* bet-панель: на очень узких — On Win / On Loss в одну колонку */ .bet-amount-row { flex-wrap: wrap; } } @media (max-width: 400px) { .bet-auto-grid { grid-template-columns: 1fr; } } /* ========================================================================= M3 — Лобби / контент / таблицы / тач-фоллбэк ========================================================================= */ /* game-card overlay: на тач-устройствах hover не срабатывает → показываем аффорданс «Play» всегда (на устройствах без точного указателя). */ @media (hover: none) { .game-card__overlay { opacity: 1; background: linear-gradient(to top, rgba(14,14,20,0.62) 0%, rgba(14,14,20,0) 55%); align-items: flex-end; } .game-card__overlay .btn { transform: scale(0.92); } .game-card:active { transform: scale(0.98); } } @media (max-width: 768px) { /* Таблицы (история ставок / транзакции): импульс-скролл + не распирают страницу */ .table-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; border-radius: var(--radius-md); } .data-table { font-size: var(--text-xs); } .data-table th, .data-table td { padding: var(--space-2); } /* Лобби: карусели game-card остаются скроллируемыми; карточки не слишком узкие */ .wins__card, .wincard { min-width: 150px; } /* Модалки: почти на всю ширину, но с отступами и без оверфлоу */ .modal { width: calc(100vw - 2 * var(--space-3)); max-width: calc(100vw - 2 * var(--space-3)); max-height: calc(100dvh - 2 * var(--space-5)); overflow-y: auto; padding: var(--space-4); } /* кнопки-сетки выравниваем под палец */ .btn--sm { min-height: 38px; } } /* ========================================================================= M3.1 — Сдерживание оверфлоу (КРИТИЧНО) Корневая причина «обрезанного» контента на мобиле: широкий потомок (recent-bets .data-table, ticker, длинная строка) в grid/flex-ячейке с дефолтным min-width:auto РАСТЯГИВАЕТ ячейку → раздувает весь layout-viewport (innerWidth уезжает с 375 до 465), и всё считается от завышенной ширины → срез справа. overflow-x:clip это маскирует, но РЕЖЕТ контент. Лечим источник: min-width:0 на контейнерах, чтобы они могли ужиматься, а широкое (таблица) скроллилось ВНУТРИ. ========================================================================= */ /* Таблицы скроллятся внутри своей обёртки и НЕ распирают страницу (любой ширины). */ .table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 768px) { /* grid/flex-ячейки контента могут ужиматься ниже min-content */ .originals-layout > *, .bet-panel, .game-stats, .main > *, .lobby__sections, .carousel, .carousel__track { min-width: 0; } /* «Big Wins» бегущая строка: трек широкий специально — клипуем в её рамке, чтобы он не инфлейтил страницу. */ .wins, .wins__viewport { max-width: 100%; min-width: 0; overflow: hidden; } } /* ========================================================================= M4 — Touch-система (глобально, не только мобила) ========================================================================= */ /* hover-эффекты только там, где есть точный указатель (мышь) */ @media (hover: none) { .game-card:hover { transform: none; box-shadow: none; border-color: var(--color-border); } .carousel__nav { display: none; } }