/* skins/racing.css - CSS-модуль скина racing (Palm Ride, донор PALM-RIDE, Figma 88:178).
   Окна (шапка, ставка, Live Bets, кнопки) - общий хром donor PALM-RIDE: skins/palm-chrome.css.
   Здесь только отличия Palm Ride: дорога под полем (racingBackground.js), клетки - сетка мира
   nearmiss со скином стекла (components/racingGlassTiles.js), лого, нет таймера раунда. */

/* Клетки - сетка мира nearmiss в PIXI (скин racingGlassTiles, вид - RACING.mode.glass): DOM-клеток в поле нет.
   Игра без раундов: таймер раунда и полоса приёма ставок не показываются. */
:root[data-skin="racing"] .luckyway-host :is(.lw-clock, .lw-progress, .lw-bet-count) { visibility: hidden; }

/* Мир виден от верха карточки (racingCard), а .lw-board начинается ниже шапки: клики по верхним
   клеткам попадали в .lw-v2-header/.lw-round-head и терялись. Зона клика доски продлена вверх
   (обрезает overflow хоста = верх карточки), шапка прозрачна для клика, кроме баланса и кнопок. */
:root[data-skin="racing"] .luckyway-host .lw-board::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 200vh; }
:root[data-skin="racing"] .luckyway-host :is(.lw-v2-header, .lw-round-head) { pointer-events: none; }
:root[data-skin="racing"] .luckyway-host .lw-v2-header { z-index: 2; }
:root[data-skin="racing"] .luckyway-host .lw-v2-header :is(.lw-balance, .lw-tools-right) { pointer-events: auto; }

/* Дорога заходит под шапку Live Bets и гаснет (донор .race-scene::after, mobileFadeLead 22,
   mobileDockFade 104, roadFade): градиент от 22px выше низа шапки, за 104px в цвет поля #090909. */
:root[data-skin="racing"] .luckyway-host.lw-v2.lw-mobile::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none;
    top: calc(var(--lw-feedTop, 100vh) + 48px - 22px);
    background: linear-gradient(transparent, rgba(9,9,9,.09) 18.72px, rgba(9,9,9,.50) 52px, rgba(9,9,9,.91) 85.28px, #090909 104px);
}

/* Шапка донора (PALM-RIDE styles/racing.css + themes/racingTheme.js css): логотип слева
   над блоком ставки, ширина 150, зазор 12 до шапки и до блока ставки; 958x291 - размер svg. */
:root[data-skin="racing"] .luckyway-host.lw-v4:not(.lw-mobile) .lw-logo-area {
    left: calc(var(--lw-v2-leftInset) + 10px); transform: none; margin: 0; overflow: visible; pointer-events: none;
    top: max(calc(var(--lw-v2-headerTop) + var(--lw-v2-headerControlHeight) + 12px), calc(var(--lw-v2-controlsTop) - 12px - 150px * 291 / 958));
    width: 150px; height: auto; display: block;
}
:root[data-skin="racing"] .luckyway-host.lw-v4:not(.lw-mobile) .lw-logo { width: 100%; height: auto; }

/* Фокус донора: мятный контур 2px с отступом 3px. */
:root[data-skin="racing"] .luckyway-host button:focus-visible { outline: 2px solid rgba(112,236,153,.85); outline-offset: 3px; }

/* Затемнение дороги под плашкой Live Bets (донор PALM-RIDE .race-scene::after, roadFade): дорога
   идёт на 24px ниже первого экрана (низ плашки DOCK_PEEK), затем за 132px уходит в цвет поля
   #090909 и дальше сплошной. Видно при прокрутке к истории: дорога по бокам дока гаснет.
   --lw-dockTop - верх плашки (LuckywayView._placeDesktop). */
:root[data-skin="racing"] .luckyway-host:not(.lw-mobile)::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none;
    top: calc(var(--lw-dockTop, 100vh) + 48px + 24px);
    background: linear-gradient(transparent, rgba(9,9,9,.09) 24px, rgba(9,9,9,.50) 66px, rgba(9,9,9,.91) 108px, #090909 132px);
}