@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Open+Sans:wght@400;700&display=swap');

body {
    font-family: 'Open Sans', sans-serif; /* Более читаемый шрифт */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Используем height: 100vh, чтобы body всегда занимал всю высоту viewport */
    margin: 0;
    background: linear-gradient(135deg, #87CEEB 0%, #ADD8E6 100%); /* Голубой градиент */
    overflow: hidden; /* Чтобы предотвратить скролл body и конфетти */
    box-sizing: border-box; /* Важно для корректного расчета высоты */
}

/* Custom container for the game to avoid conflict with Bootstrap's .container */
.game-container {
    background-color: #ffffff; /* Чистый белый фон */
    padding: 20px; /* Уменьшаем padding, чтобы дать больше места контенту */
    border-radius: 25px; /* Сильнее скругленные углы */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Более выраженная тень */
    max-width: 800px; /* Увеличиваем максимальную ширину контейнера для большего поля */
    width: 100%;
    height: 100%; /* Позволяем контейнеру занимать всю высоту body */
    max-height: calc(100vh - 40px); /* Ограничиваем максимальную высоту, учитывая возможные внешние отступы body */
    display: flex; /* Делаем flex-контейнером */
    flex-direction: column; /* Элементы внутри располагаются по вертикали */
    justify-content: space-between; /* Распределяем пространство между элементами */
    position: relative;
    z-index: 1;
    border: 3px solid #FFD700; /* Золотая рамка */
    box-sizing: border-box; /* Важно для корректного расчета высоты с padding */
}

h1 {
    font-family: 'Fredoka One', cursive; /* Игривый детский шрифт */
    color: #FF69B4; /* Розовый */
    margin-bottom: 15px;
    font-size: 2.8em;
    text-shadow: 2px 2px #FFD700; /* Желтая тень */
}

.game-instruction {
    font-size: 1.1em; /* Меньший размер для инструкции */
    color: #4CAF50; /* Зеленый текст */
}

#schulte-grid {
    display: grid;
    max-width: 100%; /* Ограничиваем максимальную ширину */
    max-height: 100%; /* Ограничиваем максимальную высоту */
    aspect-ratio: 1; /* Сохраняет квадратную форму */
    margin: auto; /* Центрируем по горизонтали и вертикали */
    flex-grow: 1; /* Позволяем сетке занимать доступное вертикальное пространство */
    flex-shrink: 1; /* Позволяем сетке сжиматься, если не хватает места */ 
    border: 4px dashed #9370DB; /* Фиолетовая пунктирная рамка */
    border-radius: 15px; /* Скругленные углы сетки */
    overflow: hidden; /* Для скругления углов ячеек */
    pointer-events: none;
    opacity: 0.7; /* Немного прозрачности, когда неактивна */
    transition: opacity 0.3s;
    background-color: #FFFAF0; /* Светлый фон сетки */
}

/* Динамические классы для разных размеров */
.grid-3x3 { grid-template-columns: repeat(3, 1fr); }
.grid-4x4 { grid-template-columns: repeat(4, 1fr); }
.grid-5x5 { grid-template-columns: repeat(5, 1fr); }
.grid-6x6 { grid-template-columns: repeat(6, 1fr); }
.grid-10x10 { grid-template-columns: repeat(10, 1fr); }


#schulte-grid.active {
    pointer-events: all;
    opacity: 1;
}

/* Размеры шрифтов для ячеек, масштабируемые с размером сетки */
/* Используем calc() для адаптивного масштабирования относительно размера ячейки */
/* Используем vmin, чтобы размер шрифта зависел от меньшей стороны окна (ширины или высоты).
   Это гарантирует, что цифры поместятся в ячейки даже в полноэкранном режиме на вытянутых экранах. */
.grid-3x3 .cell { font-size: min(7.5vmin, 75px); } /* Увеличиваем vmin и px */
.grid-4x4 .cell { font-size: min(6vmin, 60px); } /* Увеличиваем vmin и px */
.grid-5x5 .cell { font-size: min(5vmin, 50px); } /* Увеличиваем vmin и px */
.grid-6x6 .cell { font-size: min(4vmin, 40px); } /* Увеличиваем vmin и px */
.grid-10x10 .cell { font-size: min(2.5vmin, 25px); } /* Увеличиваем vmin и px */

.cell {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    border: 1px solid #E0FFFF; /* Светлая тонкая рамка */
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s, transform 0.05s, box-shadow 0.15s;
    color: #483D8B; /* Темно-синий текст */
    background-color: #f8f8f8;
}

.cell:hover:not(.correct):not(.incorrect) {
    background-color: #FFE4E1; /* Светло-розовый при наведении */
    transform: scale(1.05); /* Легкий эффект увеличения */
    box-shadow: 0 0 8px rgba(255, 105, 180, 0.5); /* Розовая тень */
}

/* Стили для обратной связи */
.correct {
    background-color: #90EE90; /* Светло-зеленый */
    color: white;
    box-shadow: 0 0 10px rgba(144, 238, 144, 0.8);
}

.incorrect {
    background-color: #FFA07A; /* Светло-красный (лососевый) */
    color: white;
    animation: shake 0.5s;
    box-shadow: 0 0 10px rgba(255, 160, 122, 0.8);
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px) rotate(-2deg); }
    40%, 80% { transform: translateX(8px) rotate(2deg); }
}

/* Стили для кнопок и информации */
/* Customizing Bootstrap button */
#start-button.btn-primary {
    font-family: 'Fredoka One', cursive;
    --bs-btn-bg: #00BFFF;
    --bs-btn-border-color: #00BFFF;
    --bs-btn-hover-bg: #1E90FF;
    --bs-btn-hover-border-color: #1E90FF;
}
#game-info {
    font-size: 1.2em;
    color: #8B4513; /* Коричневый для информации */
    font-weight: bold;
}

#current-number, #timer, #total-numbers {
    color: #FF69B4; /* Розовые акценты */
}

#message {
    visibility: hidden; /* Скрываем, но сохраняем место в макете */
    transition: visibility 0s, opacity 0.3s linear; /* Плавное появление/исчезновение */
}

/* Анимация звездочек (конфетти) */
#confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

.confetti {
    position: absolute;
    width: 15px; /* Чуть крупнее */
    height: 15px;
    background-color: var(--confetti-color, #ffd700); /* Золотой по умолчанию */
    border-radius: 50%;
    opacity: 0;
    animation: confetti-fall 3s linear forwards;
    transform: rotate(var(--initial-rotation, 0deg));
}

/* Добавляем случайные цвета для конфетти */
.confetti:nth-child(4n) { --confetti-color: #FF69B4; } /* Розовый */
.confetti:nth-child(4n+1) { --confetti-color: #90EE90; } /* Светло-зеленый */
.confetti:nth-child(4n+2) { --confetti-color: #87CEEB; } /* Светло-голубой */
.confetti:nth-child(4n+3) { --confetti-color: #f5d12f; } /* Светло-голубой */


@keyframes confetti-fall {
    0% { 
        transform: translate(var(--initial-x), -100px) rotate(0deg); 
        opacity: 1; 
    }
    100% { 
        transform: translate(var(--end-x), 100vh) rotate(720deg); 
        opacity: 0; 
    }
}