/* Рекламная карусель мобильной главной: на всю ширину экрана, полоски-индикаторы
   снизу (по одной на баннер), свайп и автопрокрутка — как в Playerok. */
.pn-promo { display: none; }

@media all { /* phones and, since V2.7.22, computers */
    /* Без разделительной линии под шапкой с логотипом — как у Playerok. */
    .pn-home-page .pn-header { border-bottom-color: transparent; }

    /* Заголовок «Больше игры. Меньше пауз.» на телефоне не показываем, но оставляем для поисковиков. */
    .pn-home-page .pn-hero { padding-block: 0; gap: 0; }
    .pn-home-page .pn-hero-copy h1 {
        position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
    }

    .pn-promo {
        display: block;
        position: relative;
        /* по ширине каталога и со скруглёнными углами, как карточки сайта */
        margin: 12px 0 0;
        border-radius: var(--pn-radius, 14px);
        /* 2:1 на телефоне; на широком экране картинка раскрывается почти целиком (2000×756) */
        aspect-ratio: 2 / 1;
        max-height: 290px;
        overflow: hidden;
        overflow: clip; /* не скролл-контейнер: фокус не сдвигает ленту */
        /* Safari иначе не обрезает углы у движущейся ленты */
        isolation: isolate;
        -webkit-mask-image: -webkit-radial-gradient(white, black);
        background: var(--pn-line);
        touch-action: pan-y;
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
    .pn-promo-track {
        display: flex;
        width: 100%;
        height: 100%;
        transition: transform .42s cubic-bezier(.25, .8, .25, 1);
        will-change: transform;
    }
    .pn-promo-slide {
        flex: 0 0 100%;
        width: 100%;
        height: 100%;
        display: block;
        position: relative;
        overflow: hidden;
        -webkit-touch-callout: none;
    }
    .pn-promo-slide picture { display: block; width: 100%; height: 100%; }
    .pn-promo-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        pointer-events: none;
        -webkit-user-drag: none;
    }
    /* Кнопка остановки автопрокрутки: невидима, появляется только при навигации клавиатурой/диктором. */
    .pn-promo-stop {
        position: absolute; top: 8px; left: 8px; z-index: 3;
        padding: 7px 11px; border: 0; border-radius: 999px;
        background: rgba(20, 23, 18, .82); color: #fff; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.2;
        clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap;
    }
    .pn-promo-stop:focus-visible { clip-path: none; width: auto; height: auto; overflow: visible; }
    .pn-store .pn-promo .pn-promo-slide:focus-visible { outline: 3px solid var(--pn-lime) !important; outline-offset: -3px !important; }

    .pn-promo-progress {
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 12px;
        z-index: 2;
        display: flex;
        gap: 2px;
        pointer-events: none;
    }
    .pn-promo-bar {
        flex: 1 1 0;
        height: 2px;
        overflow: hidden;
        border-radius: 2px;
        background: rgba(255, 255, 255, .5);
        box-shadow: 0 0 2px rgba(0, 0, 0, .2);
    }
    .pn-promo-bar i {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: inherit;
        background: #fff;
        transform: scaleX(0);
        transform-origin: left center;
    }
    .pn-promo-bar.is-done i { transform: scaleX(1); }
}

/* ===== Computers (since V2.7.22): the home page is laid out like the phone one =====
   Banners and quick-buy side by side; the long hero and info blocks are not shown. */
@media (min-width: 768px) {
    .pn-home-page .pn-desktop-detail, .pn-home-page .pn-stage { display: none !important; }
    .pn-home-page .pn-hero { display: block; padding: 0 !important; gap: 0; }
    .pn-home-page .pn-home-top {
        display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(360px, 1fr); gap: 20px;
        align-items: start; margin-top: 24px;
    }
    .pn-home-page .pn-home-top > .pn-promo:only-child, .pn-home-page .pn-home-top > .pn-qb:only-child { grid-column: 1 / -1; }
    .pn-home-page .pn-promo { margin: 0; aspect-ratio: 2000 / 900; max-height: none; }
    .pn-home-page .pn-qb {
        margin: 0; padding: 16px 18px 18px; border: 1px solid var(--pn-line); border-radius: 18px; background: var(--pn-white);
    }
    .pn-home-page .pn-qb .pn-qb-head { margin-top: 14px; }
    #catalog { padding-top: 40px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .pn-home-page .pn-home-top { grid-template-columns: 1fr; }
}