/* =========================================================
   ИГРА «УГАДАЙ ЦВЕТ»
   Полный CSS для Elementor
   ========================================================= */


/* =========================================================
   ОСНОВНОЙ КОНТЕЙНЕР
   ========================================================= */

#guess-the-color-game {
    width: 100% !important;
    max-width: 900px !important;

    margin: 0 auto !important;
    padding: 20px !important;

    box-sizing: border-box !important;

    text-align: center !important;

    font-family: Arial, sans-serif !important;

    position: relative !important;
}


/* =========================================================
   КАРТИНКА
   ========================================================= */

#guess-the-color-game .game-picture {
    width: 100% !important;
    max-width: 420px !important;

    height: 320px !important;

    margin: 0 auto 20px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
}


#guess-the-color-game .game-picture img {
    display: block !important;

    width: 100% !important;
    max-width: 420px !important;

    height: 320px !important;

    object-fit: contain !important;

    margin: 0 auto !important;

    border: 0 !important;
    border-radius: 20px !important;

    box-shadow: none !important;
}


/* =========================================================
   КНОПКА «ПОВТОРИТЬ ВОПРОС»
   ========================================================= */

#guess-the-color-game #questionButton {
    display: block !important;

    width: max-content !important;
    max-width: 100% !important;

    margin: 20px auto 30px !important;

    padding: 12px 24px !important;

    background: #ffffff !important;

    color: #333333 !important;

    border: 2px solid #dddddd !important;

    border-radius: 14px !important;

    font-family: Arial, sans-serif !important;

    font-size: 18px !important;

    font-weight: 600 !important;

    line-height: 1.2 !important;

    text-align: center !important;

    text-decoration: none !important;

    cursor: pointer !important;

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12) !important;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease !important;
}


/* Наведение */

#guess-the-color-game #questionButton:hover {
    background: #f5f5f5 !important;

    color: #333333 !important;

    border-color: #cccccc !important;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16) !important;

    transform: translateY(-1px) !important;
}


/* Нажатие */

#guess-the-color-game #questionButton:active {
    background: #eeeeee !important;

    color: #333333 !important;

    border-color: #cccccc !important;

    transform: translateY(1px) !important;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12) !important;
}


/* Убираем стандартный focus Elementor */

#guess-the-color-game #questionButton:focus {
    outline: none !important;

    color: #333333 !important;
}


/* =========================================================
   БЛОК ЦВЕТОВ
   ========================================================= */

#guess-the-color-game #answers {
    width: 100% !important;

    display: flex !important;

    flex-wrap: wrap !important;

    justify-content: center !important;

    align-items: center !important;

    gap: 10px !important;

    margin: 0 auto 25px !important;

    padding: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   КНОПКИ ЦВЕТОВ
   ========================================================= */

#guess-the-color-game .answer {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-width: 125px !important;
    min-height: 62px !important;

    padding: 12px 18px !important;

    margin: 0 !important;

    border: none !important;

    border-radius: 15px !important;

    font-family: Arial, sans-serif !important;

    font-size: 20px !important;

    font-weight: 700 !important;

    line-height: 1.1 !important;

    text-align: center !important;

    cursor: pointer !important;

    text-decoration: none !important;

    box-sizing: border-box !important;

    box-shadow:
        0 5px 0 rgba(0, 0, 0, 0.12) !important;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        filter 0.15s ease !important;
}


/* =========================================================
   РОЗОВЫЙ
   ========================================================= */

#guess-the-color-game .answer.pink {
    background: #f5a6c8 !important;
    color: #c52f6b !important;
}


/* =========================================================
   СИНИЙ
   ========================================================= */

#guess-the-color-game .answer.blue {
    background: #79c5ef !important;
    color: #1675b5 !important;
}


/* =========================================================
   ЖЁЛТЫЙ
   ========================================================= */

#guess-the-color-game .answer.yellow {
    background: #ffdc69 !important;
    color: #c89500 !important;
}


/* =========================================================
   ЗЕЛЁНЫЙ
   ========================================================= */

#guess-the-color-game .answer.green {
    background: #9be3a5 !important;
    color: #24a74c !important;
}


/* =========================================================
   НАВЕДЕНИЕ НА ЦВЕТ
   ========================================================= */

#guess-the-color-game .answer:hover {
    filter: brightness(1.05) !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 7px 0 rgba(0, 0, 0, 0.12) !important;
}


/* =========================================================
   НАЖАТИЕ НА ЦВЕТ
   ========================================================= */

#guess-the-color-game .answer:active {
    transform: translateY(3px) !important;

    box-shadow:
        0 2px 0 rgba(0, 0, 0, 0.12) !important;
}


/* =========================================================
   ОТКЛЮЧЕННЫЕ КНОПКИ ЦВЕТА
   ========================================================= */

#guess-the-color-game .answer.disabled {
    cursor: default !important;

    opacity: 0.65 !important;

    transform: none !important;

    box-shadow:
        0 3px 0 rgba(0, 0, 0, 0.08) !important;
}


/* =========================================================
   РЕЗУЛЬТАТ
   ========================================================= */

#guess-the-color-game #result {
    min-height: 35px !important;

    margin: 10px auto 15px !important;

    padding: 0 !important;

    font-family: Arial, sans-serif !important;

    font-size: 26px !important;

    font-weight: 700 !important;

    line-height: 1.3 !important;

    text-align: center !important;
}


/* =========================================================
   БЛОК СЛОВОМ
   ========================================================= */

#guess-the-color-game #word {
    width: 100% !important;

    display: flex !important;

    flex-wrap: wrap !important;

    justify-content: center !important;

    align-items: center !important;

    gap: 10px !important;

    margin: 20px auto 25px !important;

    padding: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   КВАДРАТИКИ БУКВ
   ========================================================= */

#guess-the-color-game .letter {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 65px !important;
    height: 65px !important;

    padding: 0 !important;

    margin: 0 !important;

    background: #ffffff !important;

    color: #333333 !important;

    border: 3px solid #dddddd !important;

    border-radius: 14px !important;

    font-family: Arial, sans-serif !important;

    font-size: 32px !important;

    font-weight: 700 !important;

    line-height: 1 !important;

    cursor: pointer !important;

    box-sizing: border-box !important;

    box-shadow:
        0 4px 0 rgba(0, 0, 0, 0.10) !important;

    transition:
        transform 0.15s ease,
        background 0.15s ease,
        border-color 0.15s ease,
        opacity 0.15s ease !important;
}


/* =========================================================
   ПЕРВАЯ ДОСТУПНАЯ БУКВА
   ========================================================= */

#guess-the-color-game .letter:not(.letter-locked) {
    cursor: pointer !important;
}


/* =========================================================
   НАВЕДЕНИЕ НА ДОСТУПНУЮ БУКВУ
   ========================================================= */

#guess-the-color-game .letter:not(.letter-locked):hover {
    background: #fff8d8 !important;

    border-color: #f2c94c !important;

    transform: translateY(-2px) !important;
}


/* =========================================================
   ЗАБЛОКИРОВАННЫЕ БУКВЫ
   ========================================================= */

#guess-the-color-game .letter.letter-locked {
    background: #eeeeee !important;

    color: #aaaaaa !important;

    border-color: #dddddd !important;

    opacity: 0.55 !important;

    cursor: default !important;

    transform: none !important;

    box-shadow:
        0 2px 0 rgba(0, 0, 0, 0.06) !important;
}


/* =========================================================
   УЖЕ НАЖАТАЯ БУКВА
   ========================================================= */

#guess-the-color-game .letter.clicked {
    background: #b8efc2 !important;

    color: #168b32 !important;

    border-color: #65c978 !important;

    opacity: 1 !important;

    cursor: default !important;

    transform: scale(1.05) !important;

    box-shadow:
        0 4px 0 rgba(0, 0, 0, 0.10) !important;
}


/* =========================================================
   КНОПКА «ДАЛЬШЕ»
   ========================================================= */

#guess-the-color-game #nextButton {
    display: block !important;

    width: max-content !important;

    margin: 20px auto !important;

    padding: 13px 30px !important;

    background: #7bcf8a !important;

    color: #ffffff !important;

    border: none !important;

    border-radius: 14px !important;

    font-family: Arial, sans-serif !important;

    font-size: 20px !important;

    font-weight: 700 !important;

    line-height: 1.2 !important;

    text-align: center !important;

    text-decoration: none !important;

    cursor: pointer !important;

    box-shadow:
        0 5px 0 rgba(0, 0, 0, 0.12) !important;

    transition:
        transform 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease !important;
}


/* Наведение ДАЛЬШЕ */

#guess-the-color-game #nextButton:hover {
    background: #68bf78 !important;

    color: #ffffff !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 7px 0 rgba(0, 0, 0, 0.12) !important;
}


/* Нажатие ДАЛЬШЕ */

#guess-the-color-game #nextButton:active {
    background: #5bad69 !important;

    color: #ffffff !important;

    transform: translateY(2px) !important;

    box-shadow:
        0 3px 0 rgba(0, 0, 0, 0.12) !important;
}


/* =========================================================
   УБИРАЕМ СТИЛИ ТЕМЫ / ELEMENTOR
   ========================================================= */

#guess-the-color-game button::before,
#guess-the-color-game button::after {
    display: none !important;
}


#guess-the-color-game button {
    text-transform: none !important;
    letter-spacing: normal !important;
}


/* =========================================================
   АДАПТАЦИЯ ДЛЯ ПЛАНШЕТА
   ========================================================= */

@media (max-width: 768px) {

    #guess-the-color-game {
        padding: 15px !important;
    }


    #guess-the-color-game .game-picture {
        max-width: 360px !important;
        height: 280px !important;
    }


    #guess-the-color-game .game-picture img {
        max-width: 360px !important;
        height: 280px !important;
    }


    #guess-the-color-game .answer {
        min-width: 120px !important;
        min-height: 58px !important;

        font-size: 18px !important;
    }


    #guess-the-color-game .letter {
        width: 60px !important;
        height: 60px !important;

        font-size: 29px !important;
    }

}


/* =========================================================
   АДАПТАЦИЯ ДЛЯ ТЕЛЕФОНА
   ========================================================= */

@media (max-width: 480px) {

    #guess-the-color-game {
        padding: 10px !important;
    }


    #guess-the-color-game .game-picture {
        max-width: 300px !important;
        height: 240px !important;

        margin-bottom: 15px !important;
    }


    #guess-the-color-game .game-picture img {
        max-width: 300px !important;
        height: 240px !important;
    }


    #guess-the-color-game #questionButton {
        margin: 15px auto 20px !important;

        padding: 10px 18px !important;

        font-size: 16px !important;
    }


    #guess-the-color-game #answers {
        gap: 8px !important;
    }


    #guess-the-color-game .answer {
        min-width: calc(50% - 8px) !important;

        min-height: 55px !important;

        padding: 10px !important;

        font-size: 16px !important;
    }


    #guess-the-color-game #result {
        font-size: 22px !important;
    }


    #guess-the-color-game #word {
        gap: 7px !important;
    }


    #guess-the-color-game .letter {
        width: 54px !important;
        height: 54px !important;

        border-radius: 12px !important;

        font-size: 26px !important;
    }


    #guess-the-color-game #nextButton {
        padding: 11px 25px !important;

        font-size: 18px !important;
    }

}