/* style.css (ФИНАЛЬНАЯ ВЕРСИЯ - Адаптивная доска с единым логотипом, без вертикального скролла на веб, без дубликатов) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Убедимся, что box-sizing применяется */
}

body {
    font-family: 'Montserrat', sans-serif; /* Используем Montserrat */
    background-color: rgb(30, 25, 36); /* Dark theme */
    color: white;
    display: flex; /* Центрируем контент body */
    flex-direction: column;
    align-items: center; /* Центрируем по горизонтали */
    /* === ИЗМЕНЕНО: Отступы для учета фиксированной шапки и нижнего пространства === */
    padding: 132px 0 32px; /* Отступ сверху (шапка) и снизу */
    min-height: 100vh; /* Занимаем всю высоту экрана */
    overflow-y: auto; /* Добавляем прокрутку по вертикали, если контент все равно не помещается (крайний случай) */
}

.square {
    display: flex; /* Flex для центрирования содержимого */
    justify-content: center;
    align-items: center;
    color: rgb(222, 210, 235); /* Цвет для цифр и бомб */
    border-radius: 8px;
    transition: background-color 0.1s;
    border: 1px solid rgba(0, 0, 0, 0.1); /* Граница клетки */

    background-color: rgb(96, 72, 122); /* Цвет закрытой клетки */

    position: relative; /* Для правильного отображения контента внутри */
    /* === ИСПРАВЛЕНО: overflow: visible для предотвращения обрезки контента (Удален дубликат) === */
    overflow: visible; /* Позволяем содержимому выходить за границы */

    /* === УДАЛЕН ДУБЛИКАТ background-image: none !important; === */
    /* background-image: none !important; */
    background-repeat: initial;
    background-size: initial;
    background-position: initial;

    width: 100%; /* Клетка занимает 100% места в своей ячейке Grid */
    height: 100%;
    user-select: none; /* Убираем выделение текста */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    /* === ДОБАВЛЕНО: Указываем браузеру, как обрабатывать касания === */
    touch-action: manipulation; /* Браузер обрабатывает панорамирование и щипок для масштабирования, но не стандартные жесты одного касания */
    /* Можете также попробовать touch-action: none;, но это может отключить скролл */
    /* touch-action: none; */

    /* === УДАЛЕН ДУБЛИКАТ background-image: none !important; === */
    background-image: none !important; /* Убираем любые фоны с клетки */
    /* ... остальные существующие стили ... */
}

main {
    /* === ИЗМЕНЕНО: Удалены вертикальные margin, т.к. отступы теперь на body === */
    margin: 0 auto; /* Центрируем по горизонтали */
    width: 100%; /* Позволяем main занимать доступную ширину */
    max-width: 1258px; /* Максимальная ширина контейнера main */
    padding: 0 16px; /* Отступ по бокам внутри main */
    position: relative;
    display: flex; /* Для центрирования доски внутри main */
    justify-content: center;
    align-items: center; /* Центрируем доску по вертикали внутри main, если main больше */
    flex-grow: 1; /* Позволяем main занимать оставшееся вертикальное пространство */
}

/* Стили для контейнера доски - Grid */
#board {
    display: grid; /* Используем Grid */
    /* grid-template-columns и grid-template-rows будут заданы в JS */
     gap: 2px; /* Зазор фиксированный */

    width: 100%; /* Доска будет пытаться занять всю доступную ширину контейнера main */
    /* === ИЗМЕНЕНО: Ограничиваем max-width с учетом padding main === */
    max-width: calc(1258px - 2 * 16px); /* Максимальная ширина доски внутри main */

    /* Фоновое изображение (единый логотип) - Применяем к #board */
    background-size: 100% 100%; /* Растягиваем на всю доску */
    background-repeat: no-repeat; /* Не повторяем */
    background-position: 0 0; /* Начинаем с верхнего левого угла */

    padding: 0 !important; /* Удаляем любой padding */

    min-height: 100px; /* Минимальная высота для Grid */
    aspect-ratio: 1 / 1; /* Гарантируем квадратную форму */

    /* === ДОБАВЛЕНО/ИЗМЕНЕНО: Ограничиваем max-height, чтобы доска не вылезала за пределы видимой области === */
    /* Высота = 100vh - отступ сверху (шапка + padding body top) - отступ снизу (padding body bottom) */
    /* 132px (padding body top) + 32px (padding body bottom) = 164px */
    /* Добавим небольшой буфер, чтобы доска не прилипала к краям */
     max-height: calc(100vh - 132px - 32px - 16px); /* 16px буфер */
     /* Примечание: 16px - это примерный буфер, может потребоваться небольшая подстройка */

    box-shadow: 0 0 15px rgba(0,0,0,0.5); /* Тень доски */

    /* Объявление CSS переменных для масштабирования контента (значения из JS) */
    --number-font-coeff: 3;
    --icon-font-coeff: 3.2;
}

/* Когда клетка открыта - делаем ее фон прозрачным */
.clicked {
    font-weight: bold;
    background-color: transparent; /* Фон прозрачный */
    color: rgb(222, 210, 235); /* Цвет текста по умолчанию */
    background-image: none !important;
    border-color: rgba(0,0,0,0.2); /* Меняем цвет границы */

    /* Использование CSS переменной для адаптивного размера шрифта */
    font-size: calc(var(--number-font-coeff, 3) * 1vmin); /* Масштабируем относительно vmin */

    font-family: 'Montserrat', sans-serif;
    text-align: center;
    line-height: 1; /* Убираем лишний вертикальный интервал */
}

/* Стили для конкретных чисел */
.square.clicked[data-number="1"] { color: #4FC3F7; text-shadow: 0 0 3px #03A9F4, 2px 0 0 black, -2px 0 0 white; }
.square.clicked[data-number="2"] { color: #66BB6A; text-shadow: 0 0 3px #4CAF50, 2px 0 0 black, -2px 0 0 white; }
.square.clicked[data-number="3"] { color: #EF5350; text-shadow: 0 0 3px #F44366, 2px 0 0 black, -2px 0 0 white; }
.square.clicked[data-number="4"] { color: #AB47BC; text-shadow: 0 0 3px #9C27B0, 2px 0 0 black, -2px 0 0 white; }
.square.clicked[data-number="5"] { color: #FF7043; text-shadow: 0 0 3px #FF5722, 2px 0 0 black, -2px 0 0 white; }
.square.clicked[data-number="6"] { color: #8D6E63; text-shadow: 0 0 3px #6D4C41, 2px 0 0 black, -2px 0 0 white; }
.square.clicked[data-number="7"] { color: #BDBDBD; text-shadow: 0 0 3px #616161, 2px 0 0 black, -2px 0 0 white; }
.square.clicked[data-number="8"] { color: #FFEE58; text-shadow: 0 0 3px #FBC02D, 2px 0 0 black, -2px 0 0 white; }


/* Стили для бомб и флагов */
.bomb {
    background-color: rgb(97, 42, 42) !important;
    color: rgb(41, 0, 0) !important; /* Цвет иконки */
    background-image: none !important;
    border-color: rgba(0,0,0,0.2);
}

.bomb-clicked {
  background-color: rgb(177, 38, 38) !important;
  color: rgb(65, 0, 0) !important;
  background-image: none !important;
  border-color: rgba(0,0,0,0.2);
}

.flagged {
    background-image: none !important;
    border-color: rgba(0,0,0,0.2);
}

/* Адаптивный размер и центрирование иконок */
.bomb i,
.bomb-clicked i,
.flagged i {
    /* Использование CSS переменной для адаптивного размера иконки */
    font-size: calc(var(--icon-font-coeff, 3.2) * 1vmin) !important;

    position: relative;
    z-index: 2;
    line-height: 1;

    display: inline-flex; /* Используем inline-flex для центрирования глифа */
    justify-content: center;
    align-items: center;
    /* margin-top: -0.05em; */ /* Опционально, если нужно скорректировать вертикальное положение иконки */
}

/* Цвет иконки флага */
.flagged i {
    color: gold;
}


/* --- Остальные секции CSS без изменений --- */
#game-header {
  background-color: rgb(30, 25, 36);
  display: flex;
  font-size: 1.4rem;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
  padding: 12px 32px;
  width: 100%;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  /* height: 132px; */ /* Опционально: задать фиксированную высоту, чтобы точно знать padding body */
}

#game-header h1 {
  font-size: 1.8rem;
  font-family: 'Press Start 2P', cursive;
}

#game-header div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
#game-header div.header-items {
  display: flex;
  gap: 16px;
  align-items: center;
}

#new-game {
  text-align: center;
  margin-top: 16px; /* Оставляем небольшой отступ между доской и кнопкой "Новая игра" */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.btn {
  background-color: rgb(40, 40, 40);
  border: 1px solid rgb(222, 210, 235);
  color: white;
  text-transform: uppercase;
  border-radius: 8px;
  transition: 0.2s;
  padding: 16px;
}

.btn:hover {
  cursor: pointer;
  border: 1px solid rgb(96, 72, 122);
  background-color: rgb(96, 72, 122);
}

#new-game-btn {
  background-color: rgb(30,25,36);
  border: 1px solid rgb(222, 210, 235);
  color: white;
  text-transform: uppercase;
  border-radius: 8px;
  transition: 0.2s;
  padding: 16px;
}

#new-game-btn:hover {
  cursor: pointer;
  border: 1px solid rgb(96, 72, 122);
  background-color: rgb(96, 72, 122);
}


#game-header .fa-question-circle { order: 3; }
#game-header .fa-cog { order: 4; }
#game-header .bomb-number { order: 1; }
#game-header .timer { order: 2; }

@media screen and (max-width: 768px) {
  #game-header {
    gap: 0;
    row-gap: 16px;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 32px; /* Увеличиваем верхний padding при обтекании шапки */
  }

   body {
       /* === ИЗМЕНЕНО: Скорректирован padding-top для мобильной версии === */
       padding-top: 170px; /* Визуально подобранное значение для мобильной шапки */
       padding-bottom: 32px; /* Оставляем нижний отступ */
   }

   main {
      padding: 0 8px; /* Уменьшаем горизонтальные отступы */
      flex-grow: 0; /* Убираем flex-grow: 1 для мобильных */
   }

  #board {
    /* === ИЗМЕНЕНО: Скорректирован max-height для мобильной версии === */
     max-height: calc(100vh - 170px - 32px - 8px); /* 8px буфер */
  }

  #game-header h1 {
    flex: 1 100%; /* Заголовок занимает всю строку */
    text-align: center;
    font-size: 1.4rem; /* Уменьшим шрифт заголовка на мобильных */
  }

  #game-header div.header-items {
    gap: 0;
    flex: 1 100%; /* Элементы статистики занимают всю строку */
    justify-content: space-around; /* Распределим их по ширине */
    align-items: center;
  }
   #game-header div {
      align-items: center; /* Убираем align-items: baseline; для лучшего выравнивания */
   }
   #game-header .fa-question-circle { order: unset; } /* Сбрасываем порядок */
   #game-header .fa-cog { order: unset; }
   #game-header .bomb-number { order: unset; }
   #game-header .timer { order: unset; }

    /* Центрируем элементы статистики, если они не заполняют всю строку */
   #game-header div.header-items > * {
        flex-basis: auto; /* Элементы не растягиваются */
   }

}

.modal {
  display: none;
  position: fixed;
  background-color: rgb(40, 40, 40);
  border-radius: 8px;
  text-align: center;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  max-width: calc(100% - 32px); /* Ограничиваем ширину модалки на узких экранах */
  transform: translate(0,-50%);
  padding: 16px;
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

/* Добавьте это новое правило в ваш style.css */
.modal-container {
    display: flex; /* Включаем Flexbox */
    flex-direction: column; /* Элементы в столбец */
    align-items: center; /* Центрируем содержимое по горизонтали */
    gap: 16px; /* <-- НАСТРАИВАЙТЕ ЭТОТ ЗНАЧЕНИЕ! Это расстояние между h2, p, div.difficulties-container */
    /* gap: 12px; */ /* Например, попробуйте 12px или 8px, если хотите уменьшить отступ */
}

/* Добавьте это новое правило в ваш style.css */
/* Сбрасываем стандартные отступы у заголовка и текста в модальном окне */
.modal-container .modal-header,
.modal-container .modal-text {
    margin: 0;
}

.difficulties-container {
  display: none;
  flex-direction: column;
  gap: 10px;
}

#info-modal {
  display: none;
}

#info-modal .modal-container {
  display: flex; /* Используем flex для элементов внутри контейнера модалки */
  flex-direction: column;
  gap: 12px;
}

#info-modal a {
  color:rgb(238, 221, 255);
  text-decoration: none;
}

#info-modal a:hover {
  color:rgb(200, 152, 255);
}

.fa-question-circle {
  cursor: pointer;
}

/* Стили для неправильно помеченных мин (оционально) */
/* Добавьте этот класс в JS handleGameLose если хотите показывать такие мины */
/* .wrong-flag {
  background-color: rgb(255, 150, 0) !important;
  color: rgb(50, 30, 0) !important;
  border-color: rgba(0,0,0,0.2);
} */

/* Добавьте этот блок или измените существующий для #reset-btn */
#reset-btn {
    /* Можете скопировать базовые стили из .btn или #new-game-btn, если нужно */
    background-color: rgb(30,25,36); /* Или другой цвет, если хотите */
    border: 1px solid rgb(222, 210, 235);
    color: white;
    text-transform: uppercase;
    border-radius: 8px;
    transition: 0.2s;

    /* === Измените или добавьте Padding для увеличения размера === */
    padding: 20px 30px; /* Пример: Увеличиваем вертикальный и горизонтальный padding */
    /* padding: 24px 40px; */ /* Или сделайте его еще больше */
    /* Можете использовать только один параметр, если хотите сохранить пропорции: */
    /* padding: 20px; */

    font-size: 1.2rem; /* Опционально: увеличьте размер шрифта внутри кнопки */

    /* Убедимся, что она отображается как блок для занятия доступной ширины, если нужно */
    /* display: block; */
    /* width: 100%; */ /* Сделать кнопку максимально широкой в контейнере модалки */
    /* max-width: 300px; */ /* Ограничить максимальную ширину */

    /* Если вы хотите, чтобы она занимала всю ширину, убедитесь, что у modal-container
       align-items: stretch (вместо center) или удалите align-items: center из modal-container
       и добавьте width: 100% кнопке. Но align-items: center + width: 100% обычно работает.
    */

}

/* Можете также скопировать и настроить стили :hover для #reset-btn */
#reset-btn:hover {
    cursor: pointer;
    border: 1px solid rgb(96, 72, 122);
    background-color: rgb(96, 72, 122);
}