/* ═══════════════════════════════════════════════════════════════════════
   Рекламная подсистема — 12 форматов igromania-style
   Подключается в base.html после style.min.css
   ═══════════════════════════════════════════════════════════════════════ */

/* Базовый контейнер слота */
.ad-slot {
    position: relative;
    box-sizing: border-box;
    max-width: 100%;
    margin: 12px auto;
    overflow: hidden;
}

.ad-slot-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Загрузка — мигающий плейсхолдер до получения креатива */
.ad-slot-inner[aria-busy="true"]::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        rgba(255,255,255,0.02) 0%,
        rgba(255,255,255,0.05) 50%,
        rgba(255,255,255,0.02) 100%);
    background-size: 200% 100%;
    animation: ad-skeleton 1.4s infinite linear;
    min-height: 60px;
}
@keyframes ad-skeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.ad-slot.ad-loaded .ad-slot-inner::before { display: none; }

/* ОРД-плашка «Реклама. erid: ...» */
.ad-disclosure {
    position: absolute;
    bottom: 4px;
    right: 6px;
    font-size: 10px;
    line-height: 1.2;
    color: #ddd;
    background: rgba(0, 0, 0, 0.55);
    padding: 2px 7px;
    border-radius: 3px;
    pointer-events: none;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 2;
}

/* Кнопка закрытия (overlay, catfish) */
.ad-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 3;
    transition: background 0.15s;
}
.ad-close:hover, .ad-close:focus { background: rgba(0, 0, 0, 0.9); outline: none; }

/* Кнопка VIP «скрыть на 48 ч» — маленькая, в углу */
.ad-vip-dismiss {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 4px 8px;
    border-radius: 12px;
    background: rgba(108, 92, 231, 0.85);
    color: #fff;
    border: 0;
    cursor: pointer;
    font-size: 11px;
    line-height: 1.2;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 4px;
}
.ad-vip-dismiss::before {
    content: '\f521'; /* fa-crown */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}
.ad-vip-dismiss:hover { background: rgba(108, 92, 231, 1); }

/* ═══════════════════════════════════════════════════════════════════════
   1. brand_bg — Брендирование фона (только десктоп)
   ═══════════════════════════════════════════════════════════════════════ */
.ad-slot-brand_bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 230px;
    margin: 0;
    z-index: -1;
    pointer-events: none;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}
.ad-slot-brand_bg .ad-disclosure { pointer-events: auto; }

/* ═══════════════════════════════════════════════════════════════════════
   2. billboard_top / billboard_mobile — Перетяжка (sticky-top)
   ═══════════════════════════════════════════════════════════════════════ */
.ad-slot-billboard_top {
    position: sticky;
    top: var(--navbar-h, 60px);
    z-index: 900;
    max-width: 100%;
    margin: 0 auto;
    height: 250px;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ad-slot-billboard_top .ad-slot-inner {
    max-width: 940px;
    height: 250px;
}
.ad-slot-billboard_mobile {
    position: sticky;
    top: var(--navbar-h, 56px);
    z-index: 900;
    height: 250px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   3. sidebar_300x600
   ═══════════════════════════════════════════════════════════════════════ */
.ad-slot-sidebar_300x600 {
    width: 300px;
    height: 600px;
    margin: 0 0 16px;
    position: sticky;
    top: 90px;
}

/* ═══════════════════════════════════════════════════════════════════════
   4. catfish_desktop / catfish_mobile — Sticky-bottom
   ═══════════════════════════════════════════════════════════════════════ */
.ad-slot-catfish_desktop,
.ad-slot-catfish_mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 4500;
    margin: 0;
    height: 120px;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: env(safe-area-inset-bottom, 0);
    backdrop-filter: blur(8px);
}
.ad-slot-catfish_desktop .ad-slot-inner { max-width: 1000px; height: 120px; }
.ad-slot-catfish_mobile { height: 100px; }
.ad-slot-catfish_mobile .ad-slot-inner { max-width: 600px; height: 100px; }

/* ═══════════════════════════════════════════════════════════════════════
   5. fullscreen / fullscreen_mobile — Overlay
   ═══════════════════════════════════════════════════════════════════════ */
.ad-slot-fullscreen,
.ad-slot-fullscreen_mobile {
    position: fixed;
    inset: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 5500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: ad-fullscreen-in 0.3s ease-out;
}
.ad-slot-fullscreen .ad-slot-inner {
    max-width: 900px;
    max-height: 600px;
    width: 100%;
    height: 100%;
    background: #111;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}
.ad-slot-fullscreen_mobile .ad-slot-inner {
    max-width: 320px;
    max-height: 480px;
    width: 100%;
    height: 100%;
    background: #111;
    border-radius: 8px;
    overflow: hidden;
}
@keyframes ad-fullscreen-in {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════════
   6. mobile_300x250_top / mobile_300x250_bottom
   ═══════════════════════════════════════════════════════════════════════ */
.ad-slot-mobile_300x250_top,
.ad-slot-mobile_300x250_bottom {
    width: 300px;
    height: 250px;
    margin: 12px auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   7. interscroller (мобильный с параллакс-эффектом)
   ═══════════════════════════════════════════════════════════════════════ */
.ad-slot-interscroller {
    width: 100%;
    max-width: 320px;
    height: 440px;
    margin: 16px auto;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.4);
    position: relative;
}
.ad-slot-interscroller .ad-slot-inner {
    width: 100%;
    height: 120%;
    background-size: cover;
    background-position: center;
    will-change: transform;
}

/* ═══════════════════════════════════════════════════════════════════════
   8. inpage_video
   ═══════════════════════════════════════════════════════════════════════ */
.ad-slot-inpage_video {
    width: 100%;
    max-width: 720px;
    aspect-ratio: 16 / 9;
    margin: 16px auto;
    background: #000;
    border-radius: 6px;
    overflow: hidden;
}
.ad-slot-inpage_video video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ═══════════════════════════════════════════════════════════════════════
   Универсальный рендер контента — image/html
   ═══════════════════════════════════════════════════════════════════════ */
.ad-slot-inner > a,
.ad-slot-inner > img,
.ad-slot-inner > video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.ad-slot-inner > a > img { display: block; max-width: 100%; max-height: 100%; }

/* ═══════════════════════════════════════════════════════════════════════
   Адаптивные правила
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .ad-slot-sidebar_300x600 { display: none; }
}

@media (max-width: 768px) {
    /* Скрываем десктоп-форматы */
    .ad-slot-brand_bg,
    .ad-slot-billboard_top,
    .ad-slot-sidebar_300x600,
    .ad-slot-catfish_desktop,
    .ad-slot-fullscreen { display: none !important; }
}

@media (min-width: 769px) {
    /* Скрываем мобильные форматы */
    .ad-slot-mobile_300x250_top,
    .ad-slot-mobile_300x250_bottom,
    .ad-slot-catfish_mobile,
    .ad-slot-billboard_mobile,
    .ad-slot-fullscreen_mobile,
    .ad-slot-interscroller { display: none !important; }
}

@media (max-width: 390px) {
    .ad-slot-catfish_mobile { height: 90px; }
    .ad-slot-catfish_mobile .ad-slot-inner { height: 90px; }
    .ad-slot-billboard_mobile { height: 200px; }
    .ad-slot-mobile_300x250_top,
    .ad-slot-mobile_300x250_bottom { transform: scale(0.95); transform-origin: top center; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Адаптация под верхний sticky-billboard: дать main-content отступ
   ═══════════════════════════════════════════════════════════════════════ */
body.has-billboard-top .main-content { padding-top: 270px; }
@media (max-width: 768px) {
    body.has-billboard-top .main-content { padding-top: 0; }
    body.has-billboard-mobile .main-content { padding-top: 270px; }
}

/* Если есть catfish — резервируем место в low padding */
body.has-catfish { padding-bottom: 130px; }
@media (max-width: 768px) {
    body.has-catfish { padding-bottom: 110px; }
}