body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f2f5;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center content vertically */
    min-height: 100vh;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}



#background-tiles-container {
    /* ... все твои существующие стили ... */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    /* По умолчанию контейнер ВИДЕН (это состояние для меню) */
    display: block; /* Или можно не указывать, block по умолчанию для div */
    /*transition: opacity 0.5s ease-out; /* Плавное исчезновение/появление (опционально) */
    opacity: 1; /* По умолчанию полностью видим */
}

/* --- СКРЫВАЕМ ФОН В ИГРЕ --- */
body.game-active #background-tiles-container {
    /* display: none; */ /* Резкое скрытие/показ */
    opacity: 0; /* Плавное исчезновение */
    pointer-events: none; /* Отключаем взаимодействие, если используем opacity */
}

.bg-tile {
    position: absolute; /* Позиционируем абсолютно внутри контейнера */
    border-radius: 8px; /* Скругление как у игровых плиток */
    /* --- Настраиваем внешний вид --- */
    opacity: 0.5;       /* Прозрачность (поиграйтесь со значением 0.1 - 0.4) */
    filter: blur(4px);   /* Размытие (поиграйтесь со значением 2px - 6px) */
    /* --- Анимация (опционально, но круто!) --- */
    animation: float 25s ease-in-out infinite alternate; /* Плавное движение */
    will-change: transform, opacity; /* Подсказка браузеру для оптимизации анимации */
}

/* Анимация плавного "плавания" */
@keyframes float {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    25% {
        transform: translate(15px, -10px) rotate(5deg);
    }
    50% {
        transform: translate(-5px, 20px) rotate(-3deg);
    }
    75% {
        transform: translate(10px, 5px) rotate(2deg);
    }
    100% {
        transform: translate(0px, 0px) rotate(0deg);
    }
}




/* Removed h1 styling as there is no h1 */

.controls {
    margin: 1vh 0 0.5vh 0;
    display: flex;
    gap: 1vw;
    align-items: center;
    justify-content: center; /* Center buttons */
    width: 100%;
    padding: 0 1vh;
    box-sizing: border-box; /* Include padding in width */
}

button {
    padding: 8px 16px;
    background-color: #000000;
    color: white;
    border: none;
    border-radius: 1vw;
    cursor: pointer;
    font-size: clamp(12px, 3vw, 16px);
}

button:hover {
    background-color: #2b2b2b;
}

.status {
    font-size: 2.5vh;
    margin: 0.5vh 0 1vh 0;
    display: flex;
    gap: 2vh;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    padding: 0 1vh;
    box-sizing: border-box; /* Include padding in width */
}

.game-container {
    width: 90vw;
    /* height will be set by JS (adjustLayout) */
    max-width: 90vw; /* Keep max-width constraint */
    max-height: 85vh; /* Let JS handle height primarily */
    /*background: #e9ecef;*/
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    /*box-shadow: 0 4px 8px rgba(0,0,0,0.1);*/
    margin-bottom: 10px; /* Add some space below game */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: none; /* Запрещает панорамирование, масштабирование и другие стандартные действия */
    -ms-touch-action: none; /* Для IE/Edge старых версий */
}


.tile-content {
    /* --- Обязательно для заполнения родителя --- */
    width: 100%;
    height: 100%;
    display: flex; /* Для центрирования текста */
    justify-content: center;
    align-items: center;
    box-sizing: border-box; /* Учитывать padding/border, если будут */

    /* --- Визуальные стили, которые ДОЛЖНЫ быть здесь --- */
    border-radius: 6px; /* Скругление фона */
    font-weight: bold; /* Жирность текста */
    transition: transform 0.2s, background 0.3s ease-out; /* Переходы для hover и help */
    /* background-color, color, font-size устанавливаются через JS */

    /* --- Убедись, что здесь НЕТ position, left, top, width, height (кроме 100%) --- */
    /* --- Убедись, что здесь НЕТ transform (кроме анимаций pulse/shake/help) --- */
}

.tile {
    position: absolute;
    /* display: flex; УБЕРИ ЭТО, если было, flex нужен на .tile-content */
    /* justify-content: center; УБЕРИ ЭТО */
    /* align-items: center; УБЕРИ ЭТО */
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    /* Убери transition отсюда, он на .tile-content */
    /* transition: transform 0.2s, opacity 0.3s, background 0.3s ease-out; */
    transition: opacity 0.3s; /* Оставим только для .found */

    /* Важно для анимации движения */
    will-change: transform, opacity;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* БЫЛО */
/*
.tile:hover {
    transform: scale(1.05);
    z-index: 10;
}
*/

/* СТАЛО */
.tile:hover .tile-content { /* Применяем scale к внутреннему */
    transform: scale(1.05);
}
.tile:hover { /* z-index оставляем на внешнем */
    z-index: 10;
}


.found {
    opacity: 0.3;
    pointer-events: none;
    /* Не нужно менять transform или цвет фона здесь, opacity достаточно */
     border: none; /* Убираем рамку, если была (например, от highlight) */
}

/* Убедись, что @keyframes shake определен где-то в CSS: */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* БЫЛО (неявно применялось к .tile через класс .highlight) */
/*
.highlight {
    animation: pulse 0.5s;
    border: 3px solid gold;
    box-sizing: border-box;
}
*/

/* СТАЛО */
.tile.highlight .tile-content {
    animation: pulse 0.5s;
}
/* Рамка на внешнем элементе */
.tile.highlight {
    border: 3px solid gold;
    box-sizing: border-box; /* Чтобы рамка не увеличивала размер */
    z-index: 15; /* Выше чем hover */
}

/* --- Shake (Неправильный клик) --- */
/* Анимация тряски на внутреннем контенте */
.tile.shake .tile-content {
    animation: shake 0.5s; /* Убедись, что @keyframes shake определен */
}
/* Можно добавить z-index, если нужно поднять трясущуюся плитку */
.tile.shake {
    z-index: 15;
}


.next-target {
    font-size: 2.5vh;
    font-weight: bold;
    color: #007bff; /* Make target number stand out */
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.timer {
    font-size: 2.5vh;
    font-weight: bold;
}


/*
.help-pulse {
    animation: helpPulse 1s infinite;
    z-index: 20; /* Ensure help pulse is visible */
/* } */

/* @keyframes helpPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
} */


/* БЫЛО */
/*
.help-effect {
    animation: helpGradientPulse 1.2s infinite;
    z-index: 20;
}
*/

/* СТАЛО */
.tile.help-effect .tile-content {
    animation: helpGradientPulse 1.2s infinite;
    color: #ffffff !important; /* Можно задать цвет текста во время подсказки */
    /* Текст может плохо читаться на градиенте, белый часто лучше */
}
/* z-index на внешнем */
.tile.help-effect {
    z-index: 20; /* Выше всего */
    border: none; /* Убираем рамку highlight, если она была */
}

@keyframes helpGradientPulse {
    0% {
        transform: scale(1);
        /* Начальный градиент или цвет */
        background: linear-gradient(45deg, #FFEB3B, #FFC107); /* Яркий желто-оранжевый */
        /* Можно попробовать и сплошной цвет, если градиент кажется перегруженным: */
        /* background-color: #FFEB3B; */
    }
    50% {
        transform: scale(1.5); /* Максимальное увеличение */
        /* Конечный градиент или цвет */
        background: linear-gradient(45deg, #FF4081, #E040FB); /* Яркий розово-фиолетовый */
        /* background-color: #FF4081; */
    }
    100% {
        transform: scale(1);
        /* Возврат к начальному градиенту/цвету */
        background: linear-gradient(45deg, #FFEB3B, #FFC107);
        /* background-color: #FFEB3B; */
    }
}

/* Медиа-запросы для экстремальных случаев */
@media (max-width: 480px) {
    .status {
        gap: 4vw;
        align-items: center;
    }
    .controls {
        gap: 5px; /* Reduce gap */
    }
}




/* --- Стили для иконки замка --- */
.lock-icon {
    display: none; /* Скрываем по умолчанию */
   /* margin-left: 10px; /* Отступ от счета */
    font-size: 1em; /* Размер иконки */
    /* Можно добавить цвет, если стандартный эмодзи не нравится */
    /* color: #aaa; */
}

/* --- Стили для заблокированной кнопки --- */
.level-select button.locked {
    background-image: none; /* Убираем градиент */
    background-color: #3d3d3d; /* Серый фон */
    color: #888888; /* Серый текст */
    border-bottom-color: #aaaaaa; /* Серая граница */
    cursor: not-allowed; /* Курсор запрета */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Минимальная тень */
    /* Убираем эффекты наведения/нажатия */
    transform: none !important;
    filter: none !important;
}

.level-select button.locked:hover,
.level-select button.locked:active {
    background-color: #1d1d1d; /* Без изменений */
    border-bottom-color: #1d1d1d;
    transform: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Показываем иконку замка только на заблокированных кнопках */
.level-select button.locked .lock-icon {
    display: inline; /* Показываем иконку */
}

/* (Опционально) Можно скрыть счет на заблокированных кнопках, если хотите */
/* .level-select button.locked .level-score {
    display: none;
} */

/* (Опционально) Стилизуем текст на заблокированных кнопках */
.level-select button.locked .level-text,
.level-select button.locked .level-score { /* Если счет не скрыт */
    color: #888888;
    text-shadow: none;
}





/* Стили для меню выбора уровней */
.level-select {
    background-color: #ffffffc9;
    border-radius: 8px;
    padding: 3vh;
    /*margin-bottom: 20px;*/
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    width: 60%; /* Control width */
    /*max-width: 400px; /* Max width */
    box-sizing: border-box;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: pan-y; /* Разрешить только вертикальную прокрутку, если меню длинное, но запретить зум */
    -ms-touch-action: pan-y;
}

.level-select .level-text {
    /* Стили для текста "Уровень X" */
}

.level-select .level-score {
    /* Стили для счета */
    font-weight: bold; /* Жирный шрифт для очков */
    background-color: rgba(0, 0, 0, 0.1); /* Легкий фон для выделения */
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em; /* Чуть меньше основного текста кнопки */
    min-width: 30px; /* Минимальная ширина для выравнивания */
    /*text-align: right;*/
}



.level-select h2 {
    margin-top: 0; /* Remove default top margin */
    margin-bottom: 15px;
    color: #333;
    font-size: 3vw; /* Responsive font size */
    font-weight: 600;
    width: 100%;
}

/* NEW: Styles for the last result display */
.last-result {
    background-color: #e7f3fe; /* Light blue background */
    color: #0c5460; /* Darker blue text */
    border: 1px solid #b8daff; /* Blue border */
    border-radius: 4px;
    padding: 10px 15px;
    margin-bottom: 15px; /* Space below result */
    width: 90%; /* Match button width */
    box-sizing: border-box;
}
.last-result p {
    margin: 0;
    font-size: 1.5vw;
}
#last-result-time {
    font-weight: bold;
}
/* END NEW Styles */


.level-select button {
    margin: 0.9vh; /* Vertical margin only */
    padding: 1vh 2vh;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 2vw; /* Responsive font size */
    transition: background-color 0.3s;
    width: 47%; /* Make buttons take more width */
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    /*padding: 10px 15px; /* Немного изменим падинг для пространства */
    touch-action: manipulation; /* Разрешает только нажатия, отключает двойное нажатие для зума */
    -ms-touch-action: manipulation;
}
.controls button {
    /* ... твои существующие стили ... */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
    -ms-touch-action: manipulation;
}

.level-select button:hover {
    background-color: #3e8e41;
}

/* Hide game elements initially, show level select */
.controls, .status, .game-container {
    display: none;
}
/* level-select is shown by default (now controlled by showLevelSelectScreen) */

/* Показываем элементы, когда игра активна */
.game-active .controls,
.game-active .status {
    display: flex; /* Use flex for these */
}
.game-active .game-container {
    display: block; /* Game container is a block */
}


/* Стили для кнопки "Домой" */
#home-btn {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex; /* Align image nicely */
    align-items: center;
    justify-content: center;

}

#home-btn img {
    /*width: 4vh; /* Adjust icon size */
    height: 5vh;
    /* vertical-align: middle; */ /* Not needed with flex */
}

#help-btn {
    background-color: transparent; /* Убираем фон */
    border: none;                  /* Убираем рамку */
    cursor: pointer;
    padding: 0;                    /* Убираем внутренние отступы */
    display: flex;                 /* Для выравнивания иконки */
    align-items: center;
    justify-content: center;

}

/* Убираем стандартный темный фон при наведении для кнопки помощи */
#help-btn:hover {
    background-color: rgba(0, 0, 0, 0.1); /* Легкий фон при наведении */
    /* или оставьте полностью прозрачным: */
    /* background-color: transparent; */
}

#help-btn img {
    /*width: 15.1vh;;                   /* Размер иконки как у "Домой" */
    height: 5vh;
}



/* Ad Warning Styles */
#ad-warning {
    position: fixed; /* Fixed position to overlay everything */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */
    color: white;
    padding: 20px 30px;
    border-radius: 10px;
    text-align: center;
    z-index: 1000; /* Ensure it's on top */
    font-size: 5vw;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 50vw;
}

#ad-warning p {
    margin: 0 0 10px 0; /* Space below text */
}

/* Optional Spinner */
.spinner {
    margin: 0 auto;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Ensure game container is below warning */
.game-container {
    /* ... existing styles ... */
    z-index: 1; /* Lower than warning */
}

/* Make sure tiles are also below */
.tile {
    /* ... existing styles ... */
    z-index: 2; /* Below warning but above container bg */
}



@media (orientation: portrait) {
    .level-select {
        background-color: #ffffffc9;
        border-radius: 8px;
        padding: 20px;
        /* margin-bottom: 20px; */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 85%;
        box-sizing: border-box;
    }

    .level-select button {
        margin: 0.8vh 0;
        padding: 1vh 2vh;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 5vw;
        transition: background-color 0.3s;
        width: 90%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 600;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        touch-action: manipulation; /* РАЗРЕШИТЬ тапы, но ОТКЛЮЧИТЬ зум по двойному тапу/удержанию */
        -ms-touch-action: manipulation;
    }
    .level-select h2 {
        font-size: 5vw;
    }

    .last-result p {
        margin: 0;
        font-size: 2.5vw;
    }

}


@media (min-aspect-ratio: 4/5) and (max-aspect-ratio: 5/4) {
    .level-select {
        /* Стили для почти квадратных экранов */
        /* Например, другая максимальная ширина или отступы */
        width: 77%;
    }

    .level-select button {
        margin: 0.8vh 0;
        padding: 1vh 2vh;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 4vh;
        transition: background-color 0.3s;
        width: 90%;
        box-sizing: border-box;
        display: flex
    ;
        justify-content: space-between;
        align-items: center;
        font-weight: 600;
    }

    .level-select h2 {

        font-size: 5vw;

    }

    .last-result p {
        margin: 0;
        font-size: 2.5vw;
    }

    /* ... другие стили ... */
}