/* style.css */

/* Базовые стили для предотвращения выделения и улучшения UX */
body {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
    -webkit-tap-highlight-color: transparent; /* Убрать синюю подсветку при тапе */
    -webkit-touch-callout: none; /* Отключить контекстное меню по долгому тапу на iOS */
    touch-action: manipulation; /* Отключить жесты типа pinch-to-zoom */
    margin: 0; /* Убрать отступы по умолчанию */
    padding: 0; /* Убрать отступы по умолчанию */
    display: flex; /* Центрирование контейнера */
    justify-content: center; /* Центрирование контейнера */
    align-items: center; /* Центрирование контейнера */
    min-height: 100vh; /* Занять всю высоту */
    min-height: 100dvh; /* Для мобильных браузеров */
    background: linear-gradient(135deg, #f0f8ff 0%, #d4e4ff 100%); /* Фон */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; /* Системный шрифт */
    overflow: hidden; /* Скрыть прокрутку страницы */
}

/* --- Оверлей загрузки --- */
.loading-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 30, 60, 0.9); display: flex; flex-direction: column;
    justify-content: center; align-items: center; z-index: 100; color: white;
    opacity: 1; transition: opacity 0.5s ease;
}
.loading-overlay.hidden { opacity: 0; pointer-events: none; }
.spinner {
    border: 4px solid rgba(255, 255, 255, 0.3); border-radius: 50%;
    border-top: 4px solid #fff; width: 40px; height: 40px;
    animation: spin 1s linear infinite; margin-bottom: 15px;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
/* --- Конец Оверлея загрузки --- */


/* Контейнер игры */
.game-container {
    position: relative; border: 1px solid #b0c4de;
    box-shadow: 0 8px 25px rgba(0, 50, 100, 0.2); background-color: #ffffff;
    width: 375px; height: 667px; max-width: 100%; max-height: 100dvh;
    overflow: hidden; border-radius: 10px; display: flex; flex-direction: column;
    box-sizing: border-box;
}

/* Холст игры */
#gameCanvas {
    display: block; width: 100%; flex-grow: 1; background-color: #e6f7ff;
    cursor: pointer; transition: opacity 0.4s ease-out;
}
#gameCanvas.canvas-fade-out { opacity: 0.5; }

/* Верхняя панель */
.top-panel {
    display: flex; justify-content: space-between; align-items: center;
    padding: 5px 10px; background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    border-bottom: 1px solid #d0e0f0; z-index: 10; height: 45px;
    box-sizing: border-box; flex-shrink: 0;
}
.score-area { display: flex; align-items: center; gap: 8px; }
.score-display {
    font-size: 16px; font-weight: 600; color: #334;
    background-color: rgba(230, 240, 255, 0.7); padding: 4px 8px;
    border-radius: 6px; white-space: nowrap; transition: transform 0.15s ease-out, background-color 0.15s, color 0.15s;
}
.score-perfect-flash { transform: scale(1.15); color: #1a6a1f; background-color: rgba(200, 255, 200, 0.8); }
.perfect-streak-display {
    font-size: 14px; font-weight: bold; color: #ff6f00;
    background-color: rgba(255, 224, 180, 0.7); padding: 3px 6px;
    border-radius: 5px; display: flex; align-items: center; gap: 3px;
    animation: fade-in 0.3s ease;
}
@keyframes fade-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
.perfect-streak-display span { min-width: 12px; text-align: center; }
.highscore-display {
    font-size: 13px; color: #556; background-color: rgba(230, 240, 255, 0.7);
    padding: 4px 8px; border-radius: 6px; white-space: nowrap;
    margin-right: auto; margin-left: 10px;
}
.sound-button, .icon-button {
    background: none; border: none; padding: 5px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    margin-left: 6px; line-height: 0;
}
.sound-button img, .icon-button img { width: 22px; height: 22px; opacity: 0.7; transition: opacity 0.2s, transform 0.1s ease; }
.sound-button:hover img, .icon-button:hover img { opacity: 1; }
.sound-button:active img, .icon-button:active img { transform: scale(0.9); }

/* Оверлеи */
.overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: none; flex-direction: column; justify-content: center; align-items: center;
    background-color: rgba(0, 30, 60, 0.85); color: white; text-align: center;
    z-index: 20; padding: 20px; box-sizing: border-box; opacity: 0;
    transition: opacity 0.3s ease-in-out; overflow-y: auto;
}
.overlay.active { display: flex; opacity: 1; }
.overlay h2 { margin-top: 0; margin-bottom: 15px; font-size: 2.5em; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.overlay p { margin-bottom: 20px; font-size: 1.2em; line-height: 1.5; color: #e0f0ff; }
.best-score-start, .best-score-gameover, .final-score { display: block; margin-bottom: 25px; font-size: 1.1em; color: #c0d0e0; }
.best-score-start span:first-child, .best-score-gameover span:first-child, .final-score span:first-child { margin-right: 8px; color: #c0d0e0; }
#bestScoreStart, #bestScoreEnd, #finalScore { font-weight: bold; color: #ffffff; font-size: 1.2em; }
.button-group { display: flex; flex-direction: column; align-items: center; gap: 15px; margin-top: 20px; width: 100%; max-width: 250px; }
.button-primary, .button-secondary {
    padding: 14px 30px; font-size: 1.1em; font-weight: bold; cursor: pointer;
    border: none; border-radius: 10px; color: white;
    transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); width: 100%; text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.button-primary { background: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%); }
.button-primary:hover { background: linear-gradient(135deg, #4a9a27 0%, #97c955 100%); }
.button-secondary { background: linear-gradient(135deg, #ff8c00 0%, #ffaf50 100%); }
.button-secondary:hover { background: linear-gradient(135deg, #e07b00 0%, #f09e40 100%); }
.button-primary:active, .button-secondary:active { transform: translateY(2px); box-shadow: 0 2px 4px rgba(0,0,0,0.2); }

/* --- Контейнер для доп. кнопок на стартовом экране --- */
.start-screen-extra-buttons {
    display: flex;
    flex-direction: column; /* Группа иконок НАД группой флагов */
    align-items: center;
    gap: 25px; /* Расстояние между группой иконок и группой флагов */
    margin-top: 25px; /* Отступ от кнопки "Начать" */
    width: 100%;
}

/* === Контейнер для кнопок-иконок (Лидерборд и Звук) === */
.start-screen-icon-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px; /* Расстояние между иконками лидерборда и звука */
}

/* === Общий стиль для кнопок-иконок в стартовом меню === */
.leaderboard-button-start,
.sound-button-start {
    /* Наследует .icon-button (display: flex, cursor...) */
    padding: 8px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    line-height: 0; /* Убрать лишнюю высоту */
}
.leaderboard-button-start img,
.sound-button-start img {
    width: 28px;
    height: 28px;
    opacity: 0.8;
    transition: opacity 0.2s, transform 0.1s ease, background-color 0.2s;
}
.leaderboard-button-start:hover,
.sound-button-start:hover {
     background-color: rgba(255, 255, 255, 0.2);
}
.leaderboard-button-start:hover img,
.sound-button-start:hover img {
    opacity: 1;
    transform: scale(1.1);
}
.leaderboard-button-start:active img,
.sound-button-start:active img {
    transform: scale(0.95);
}

/* --- Стили кнопок языка --- */
.language-selector {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

/* Базовые стили кнопки языка */
.lang-button {
    background: none;
    border: 2px solid transparent; /* Всегда есть рамка, но прозрачная */
    padding: 3px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 0;
    transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
    /* Базовое состояние трансформации */
    transform: scale(1);
}

/* Стили для НЕАКТИВНОЙ кнопки языка (по умолчанию и когда класс .active снят) */
.lang-button:not(.active) {
    opacity: 0.6;
    border-color: transparent; /* Убедимся, что рамка прозрачная */
    transform: scale(1); /* Убедимся, что размер обычный */
}

/* Стили для картинки внутри кнопки */
.lang-button img {
    display: block;
    width: 32px;
    height: 24px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Стили для наведения на НЕАКТИВНУЮ кнопку */
.lang-button:hover:not(.active) {
    opacity: 0.8; /* Делаем чуть ярче при наведении */
}

/* Стили для АКТИВНОЙ кнопки языка (когда есть класс .active) */
.lang-button.active {
    opacity: 1.0; /* Полная непрозрачность */
    border-color: #60a5fa; /* Голубая рамка */
    transform: scale(1.05); /* Чуть увеличить */
    cursor: default; /* Курсор по умолчанию, так как она disabled */
}

/* Стили для эффекта нажатия (:active) ТОЛЬКО на НЕАКТИВНЫХ кнопках */
.lang-button:active:not(.active) {
    transform: scale(0.95); /* Немного уменьшить при нажатии */
}

/* Убираем отдельное правило :disabled, так как активная кнопка всегда disabled и стилизуется через .active */
/* .lang-button:disabled { ... } */

/* --- Конец стилей кнопок языка --- */


/* Анимация тряски экрана */
@keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); } 20%, 40%, 60%, 80% { transform: translateX(4px); } }
.shake-effect { animation: shake 0.3s ease-in-out; }

/* Место для баннера Яндекса */
#yandexBannerPlaceholder {
    width: 100%; min-height: 50px; /* Минимальная высота, SDK может изменить */
    background-color: #f0f0f0; /* Фоновый цвет, если баннер не загрузился */
    position: relative; /* Или absolute, если нужно поверх */
    bottom: 0; left: 0; z-index: 15; box-sizing: border-box;
    flex-shrink: 0; border-top: 1px solid #ccc; display: flex;
    justify-content: center; align-items: center; font-size: 10px; color: #999;
    /* Скрываем текст-плейсхолдер, когда внутри появляется iframe баннера */
    &:has(iframe) {
        font-size: 0;
        color: transparent;
        background-color: transparent; /* Убираем фон, когда баннер есть */
        border-top: none; /* Убираем границу, когда баннер есть */
        /* Высота будет управляться SDK */
    }
}

/* --- Стили Оверлея Лидерборда --- */
.leaderboard-overlay { background-color: rgba(0, 20, 40, 0.92); justify-content: flex-start; padding-top: 55px; /* Оставляем место для кнопки закрытия */ padding-bottom: 20px; }
.leaderboard-overlay h2 { margin-bottom: 20px; font-size: 1.8em; }
.close-button {
    position: absolute; top: 8px; right: 8px; background: rgba(255, 255, 255, 0.1);
    border: none; color: rgba(255, 255, 255, 0.7); font-size: 24px; font-weight: bold;
    line-height: 1; padding: 0; width: 32px; height: 32px; border-radius: 50%;
    cursor: pointer; transition: background-color 0.2s, color 0.2s, transform 0.1s ease;
    display: flex; align-items: center; justify-content: center; z-index: 25;
}
.close-button:hover { background-color: rgba(255, 255, 255, 0.2); color: white; }
.close-button:active { transform: scale(0.9); }
.leaderboard-entries-list { width: 100%; max-width: 330px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; }
.leaderboard-entry { display: flex; align-items: center; background-color: rgba(255, 255, 255, 0.06); padding: 6px 10px; border-radius: 6px; font-size: 0.95em; transition: background-color 0.2s; border: 1px solid transparent; }
.leaderboard-entry:hover { background-color: rgba(255, 255, 255, 0.12); }
.leaderboard-entry .rank { font-weight: bold; color: #a0c0e0; min-width: 28px; text-align: right; margin-right: 8px; font-size: 0.9em; }
.leaderboard-entry .name { flex-grow: 1; margin-right: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; color: #ddeeff; }
.leaderboard-entry .name .avatar { width: 20px; height: 20px; border-radius: 50%; margin-right: 6px; background-color: rgba(255, 255, 255, 0.1); flex-shrink: 0; object-fit: cover; visibility: visible; }
/* Скрываем контейнер img, если он пустой или ошибка */
.leaderboard-entry .name .avatar:where([src=""], :not([src])) { display: none; }
.leaderboard-entry .name .avatar[style*="visibility: hidden"] { display: none; } /* Совместимость со старым JS */

.leaderboard-entry .score { font-weight: bold; color: #f0e0a0; min-width: 45px; text-align: right; font-size: 1em; }
.leaderboard-entry.current-player { background-color: rgba(96, 165, 250, 0.25); border: 1px solid rgba(96, 165, 250, 0.4); }
.leaderboard-entry.current-player .rank { color: #ffffff; }
.leaderboard-entry.current-player .name { color: #ffffff; font-weight: 500; }
.leaderboard-entry.current-player .score { color: #fffacd; }
#leaderboardLoading, #leaderboardError, #leaderboardLoginNote { margin-top: 30px; font-size: 1em; color: #c0d0e0; }
#leaderboardError, #leaderboardLoginNote { color: #ffdddd; }
#leaderboardLoginNote { margin-top: 10px; font-size: 0.9em; }