/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

 body {
   background-color: #1E1E1E;
    
} 

.hello {
  font-family: "Athiti", sans-serif;
  font-weight: 600;
  font-style: normal;
  color: #FFB4D5;
  opacity: 0.5;
}

h1 {
   font-weight: 600;
}

/*test*/

  /* Открытая ячейка (плоская, светлая) */
.cell.open {
    background-color: #eee;
    border: 1px solid #ddd;
    cursor: default;
}

/* Стили для цветов цифр (как в оригинальном Сапере) */
.color-1 { color: blue; }
.color-2 { color: green; }
.color-3 { color: red; }
.color-4 { color: darkblue; }

/* Стиль для флажка */
.cell.flag {
    font-size: 14px;
}


/* Главный контейнер сетки */
#board {
    display: grid;
    grid-template-columns: repeat(10, 40px); /* 10 колонок по 40px */
    grid-template-rows: repeat(10, 40px);    /* 10 строк по 40px */
    gap: 2px;                                /* Отступы между ячейками */
    background-color: #2590EE;                  /* Цвет линий сетки */
    width: max-content;                      /* Чтобы рамка не растягивалась */
    margin: 20px auto;                       /* Центрируем игру на странице */
    padding: 5px;
    border-radius: 5px;
}

/* Сами ячейки (пока закрытые) */
.cell {
    background-color: #888;                  /* Серый цвет закрытых клеток */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
    user-select: none;                       /* Чтобы текст не выделялся при кликах */
    border: 2px solid #aaa;
    border-right-color: #555;
    border-bottom-color: #555;
}

/* Эффект наведения на закрытую ячейку */
.cell:hover {
    background-color: #999;
}

/* Открытая ячейка */
.cell.open {
    background-color: #bbb;
    border: 1px solid #999;
    cursor: default;
}

/* Цвета для цифр */
.color-1 { color: #0000ff; }
.color-2 { color: #008000; }
.color-3 { color: #ff0000; }
.color-4 { color: #000080; }

/* Анимация или стиль для флажка */
.cell.flag {
    background-color: #777;
}
    /*test!!!*/