/* ===================================================================
   SnowDice II / poster styles (перенесено из poster.html)
   =================================================================== */

:root {
    --color-bg-dark: #1c1920;
    --color-bg-darker: #151318;
    --color-text: #fff;
    --color-accent: #222026;
    --color-primary: #49434C;
    --color-secondary: #ff4b6a;
    --color-light-gray: #e0e0e0;
    --nav-color: #CAAE81;
    --gap-small: 10px;
    --gap-medium: 20px;
    --gap-large: 30px;
    --border-radius: 8px;
    --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--color-bg-darker);
    color: var(--color-text);
    font-family: "Fira Sans";
    font-style: normal;
    /*line-height: 1.6;*/
}

main {
    min-height: calc(100vh - 150px);
    /* footer height approx */
}

.poster {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
    padding: 0 var(--gap-medium);
    color: var(--color-text);
}

.root-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    width: 100%;
}

.poster-content {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: flex-start;
    gap: 60px;
}

.title-poster {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;  /* Убираем прозрачность */
    background: none;  /* Убираем фон для текста */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);  /* Сохраняем тень для выделения */
    background-clip: unset;  /* Убираем background-clip, если оно мешает */
}


.description-poster {
    font-size: 18px;
    font-weight: 500;
    max-width: 540px;
    line-height: normal;
}

.info-group {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 70px;
    flex-wrap: wrap;
    padding: var(--gap-large) 0;
}

.slider-with-frame {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

/* Слайдер займёт всю ширину контейнера */
image-slider {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.content-game-cards::after {
    content: '';
    position: absolute;
    z-index: 2;
    background: url('../images/line.png') repeat-x;
    width: 100%;
    height: 2px;
    top: 0;
    left: 0;
}

/* Рамка поверх слайдера */
.photo-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    box-sizing: border-box;
}

.social-media {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-accent);
    min-width: 92px;
    height: 50px;
    border-radius: var(--border-radius);
    gap: 8px;
    transition: var(--transition);
}

.social-media-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-left: 50px;
}

.sm-tg,
.sm-vk {
    cursor: pointer;
    height: 32px;
    width: 32px;
    /* адаптация под проект */
    background: url('../images/buttons/kingSprite3.png') no-repeat;
}

.sm-tg {
    background-position: -227px -129px;
}

.sm-vk {
    background-position: -784px -95px;
}

.sm-tg:hover {
    background-position: -261px -129px;
}

.sm-vk:hover {
    background-position: -750px -95px;
}

.description-poster-info {
    font-size: 18px;
    font-weight: 500;
    margin-left: -11px;
}

.content-game-cards {
    position: relative;
    width: 100%;
    background-color: #222026;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 100px;
}

.container-game-card {
    position: relative;
    top: 30px;
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
    margin-top: 16px;
}

.cards-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 21px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 12px;
    box-sizing: border-box;
    margin-top: 33px;
}

/* на твоей странице карточки — это .dicefest-card, а не .col-3 */
.cards-container > .dicefest-card {
    width: 100%;
}

.game_card_block {
    display: block !important;
    margin-top: 5px;
    padding: 0;
}

.poster-info-text {
    max-width: 600px;
}

.fest-logo {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.9;
}

.advertisement-filters {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 44px;
    width: 100%;
    flex-wrap: wrap;
    margin-left: 2px;
}

.advertisement {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    font-weight: 500;
    color: var(--color-text);
    min-width: 200px;
}

.advertisement-time {
    background-color: var(--color-light-gray);
    color: var(--color-bg-darker);
    padding: 8px 20px;
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: url(../images/cursors/3.png) 2 2, auto;
    width: 248px;
}

.advertisement-time--active {
    background-color: var(--color-primary);
    color: white;
    border-color: white;
}

.advertisement-time:hover {
    cursor: url(../images/cursors/3.png) 2 2, auto;
    background-color: var(--color-primary);
}

.advertisement-time--light {
    background-color: transparent;
    border: 1px solid #49434C;
    color: var(--color-text);
}

.advertisement-nums {
    display: flex;
    flex-direction: row;
    font-weight: 500;
    font-size: 14px;
    gap: 8px;
    color: #ffffff;
}

.advertisement-nums span {
    color: #c1ac82;
}

/* Адаптивность для мобильных устройств */
@media screen and (max-width: 768px) {
    * {
        box-sizing: border-box !important;
    }

    .cards-container {
        grid-template-columns: repeat(2, 1fr);
        /* уменьшаем минимальную ширину */
        gap: 20px;
        padding: 0 0px;
        width: unset !important;
       /* scale: 0.8;*/
        /* убираем scale, он ломает макет */
        transform: none;
        margin-top: 30px;
    }

    body {
        width: 100% !important;
    }

    main,
    footer,
    header {
        width: 100% !important;
        overflow-x: hidden !important;
    }

    .root-cards-container {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .poster-content {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .info-group {
        justify-content: center;
        gap: 1.5rem;
        margin-top: 15px;
    }

    .title-poster {
       /* font-size: 2.1rem;*/
    }

    .advertisement-filters {
        gap: 15px;
    }

    .poster-info-text {
        max-width: 600px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    :root {
        --gap-small: 8px;
        --gap-medium: 12px;
        --gap-large: 16px;
    }

    .root-container {
        padding: 0 10px;
    }

    .advertisement-filters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
    }

    .advertisement {
        width: 100%;
        min-width: 0;
    }

    .advertisement-time,
    .advertisement-nums {
        width: 100%;
        box-sizing: border-box;
        font-size: 12px;
        text-align: center;
        display: flex;
        justify-content: center;
    }

    .advertisement-timer,
    .adventure-timer {
        font-size: 13px;
    }
}

/* удобный фикс (в постере custom-button как web-component) */
custom-button { display: inline-block; }
/* ===============================
   FIX: page is inside layout.html
   =============================== */

/* main.css держит #all-cont overflow:hidden -> режет full-width блоки */
#all-cont { overflow: visible !important; }

/* main.css сужает main_board_container до 1140px — на SnowDice надо 1200 как в poster */
#main_board .container > .main_board_container {
    width: 1200px;
    max-width: 1200px;
}

/* делаем секцию карточек на всю ширину viewport (как в poster.html standalone) */
.content-game-cards {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* чтобы правая колонка текста не “съедалась” flex-алгоритмом */
.poster-content { align-items: flex-start; }

.slider-with-frame {
    flex: 0 0 540px;
    width: 540px;
}

.poster-info-text {
    flex: 1 1 0;
    min-width: 0;
    max-width: 600px;
}

/* мобилка — возвращаем всё назад, чтобы не ломать адаптив из main.css */
@media (max-width: 601px) {
    #main_board .container > .main_board_container {
        width: 576px;
        max-width: 576px;
    }

    .content-game-cards {
        width: 100%;
        margin-left: 0;
    }

    .slider-with-frame {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* Grid управляет шириной сам — убираем влияние bootstrap колонок */
.cards-container > .col-3.game_card_block {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}


/* ==========================================================
   SnowDice Fest — фиксы конфликтов с /games/css/main.css
   (оставь ниже в самом КОНЦЕ dicefest.css)
   ========================================================== */


/* 1) Фон/вёрстка страницы: растягиваем страницу до низа, чтобы «тёмный блок»
      визуально продолжался до футера, как в poster.html */
#all-cont {
    min-width: 0 !important;
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
#main_board {
    flex: 1 0 auto;
}

/* 2) main.css фиксирует .container / .main_board_container (1200/600/576px).
      Для SnowDice делаем «жидко» + max-width 1200px. */
#top > .container,
#main_board > .container,
#footer > .container {
    width: 100% !important;
    max-width: 1200px !important;
    min-width: 0 !important;
}

#main_board .main_board_container {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    margin-top: 0 !important; /* сбивает -45px из main.css на мобилке */
}

/* 3) На сайте .col-3 переопределён под футер и лезет в карточки.
      Внутри сетки SnowDice нейтрализуем. */
#dicefest-cards > .col-3.game_card_block,
.cards-container > .col-3.game_card_block {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    text-align: initial !important;
}


/* 6) Мобилка как в poster.html: контейнеры 100%, карточки в 1 колонку */
@media (max-width: 768px) {
    #top > .container,
    #main_board > .container,
    #footer > .container {
        max-width: 100% !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    #main_board .main_board_container {
        max-width: 100% !important;
    }

    .cards-container {
       /* grid-template-columns: 1fr !important;*/
    }
}
/* 3) Рамка у слайдера: web-component ограничивает себя max-width:540 и фикс. высотой.
      Делаем, чтобы слайдер занимал 100% контейнера (600px) и совпадал с рамкой. */
.slider-with-frame {
    position: relative;
}

.slider-with-frame image-slider.image-slider-component {
    max-width: 100% !important;  /* отменяем 540px */
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.slider-with-frame image-slider.image-slider-component .slider {
    height: 100%;
}

.slider-with-frame .photo-frame {
    z-index: 2;
    border-radius:8px;
}
.content-game-cards .dice_card_front::before {
    content: '';
    width: 100%;
    height: 100%;
    background: url('../images/diceTimeLogo.png') no-repeat, url('../images/new_gradient.png') no-repeat;
    background-size: auto, contain;
    background-position: center, top left;
}
.advertisement-text {
    color: #fff;
    display: block !important;
}
.dice_fest_footer #footer {
    margin-top: -10px !important;
}
.dice_card_front .game_card_border.beta_test::before {
    content: '';
    position: absolute;
    width: 269px;
    height: 191px;
    top: 0;
    left: 0;
    z-index: 3; /* Увеличьте z-index, чтобы было поверх других элементов */
    background: url(../images/sample.png) no-repeat top center;
    pointer-events: none; /* Чтобы не блокировал клики */
}