@import url('https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css');

*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: Arial;
}

body {
  background-color: #333;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  font-size: 7.5vmin;
  height: 100vh;
  width: min-content;
  margin: 0 auto;
  overflow: hidden;
}

#game-board {
  display: grid;
  grid-template-columns: repeat(var(--grid-size), var(--cell-size));
  grid-template-rows: repeat(var(--grid-size), var(--cell-size));
  background-color: #ccc;
  gap: var(--cell-gap);
  border-radius: 1vmin;
  padding: var(--cell-gap);
  position: relative;
}

.cell {
  background-color: #aaa;
  border-radius: 1vmin;
}

.tile {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--cell-size);
  height: var(--cell-size);
  background-color: red;
  border-radius: 1vmin;

  top: calc(var(--y) * (var(--cell-size) + var(--cell-gap)) + var(--cell-gap));
  left: calc(var(--x) * (var(--cell-size) + var(--cell-gap)) + var(--cell-gap));
  font-weight: bold;
  background-color: hsl(200, 50%, var(--background-lightness));
  color: hsl(200, 25%, var(--text-lightness));

  animation: show 200ms ease-in-out;
  transition: 100ms ease-in-out;
}

@keyframes show {
  0% {
    opacity: 0.5;
    transform: scale(0);
  }
}

.head {
  display: flex;
  border-bottom: 1px solid #ccc;
  width: 100%;

  align-items: center;

  margin-bottom: 10px;
  height: 80px;

  /* padding-bottom: 15px; */
  /* margin-top: 15px; */
  /* margin-bottom: 15px; */
}

.title {
  text-align: center;

  font-size: max(5vmin, 20px);
  flex-grow: 1;
  color: #ccc;
}
.icon-btn {
  width: 5vmin;
  /* height: 5vmin; */
  min-width: 35px;
  /* min-height: 35px; */
  background-color: aqua;

  height: 35px;
  background: none;
  border: none;
  cursor: pointer;
  transition: fill 150ms ease-in-out;
  outline-color: var(--text-color-light);
  flex-shrink: 0;
}
.question-mark {
  color: #ccc;
}
.size-icon {
  font-size: 30px;
  cursor: pointer;
}
div[data-total-result] {
  font-size: max(3vmin, 15px);
  color: #ccc;
}
.styleScore {
  font-size: max(2vmin, 10px);
  color: #ccc;
  text-align: center;
  line-height: 1.2;
}

/* ! Стили для модального окна */
/* .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000bf;
  display: grid;
  place-items: center;

  visibility: hidden;
  z-index: -10;
}

.open-modal {
  visibility: visible;
  z-index: 10;
}
.modal-container {
  background-color: #111;
  border-radius: 0.5rem;
  width: 90vw;
  min-height: 30vh;
  max-width: 620px;
  text-align: center;
  display: grid;
  place-items: center;
  position: relative;
}
.close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 2rem;
  background: transparent;
  border-color: transparent;
  color: var(--clr-red-dark);
  cursor: pointer;
  transition: var(--transition);
}
.close-btn:hover {
  color: var(--clr-red-light);
  transform: scale(1.3);
}

.text-pr {
  font-size: max(2vmin, 16px);
  color: #ccc;
}

.common {
  color: #ccc;
  padding: 15px;
} */

/*! Стили для нового варианта модального окна  */
.list-header {
  font-weight: 700;
}
.text-pr {
  font-size: max(2vmin, 16px);
  color: #ccc;
}

.close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 2rem;
  background: transparent;
  border-color: transparent;
  color: var(--clr-red-dark);
  cursor: pointer;
  transition: var(--transition);
}
.list-content {
  background-color: rgb(216, 246, 239);
}

.fade-block {
  /* position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(8, 112, 32, 0.69); */

  /* ========================= */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000bf;
  display: grid;
  place-items: center;

  /* visibility: hidden; */
  z-index: 10;
}

.modal-window {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.content-hidden {
  display: none;
}

.hidden {
  display: none;
}

[data-name],
[data-tab] {
  cursor: pointer;
}
.card {
  background-color: #111;
  color: #ccc;
  border-radius: 0.5rem;
  width: 90vw;
  min-height: 30vh;
  max-width: 620px;
  text-align: center;
  display: grid;
  place-items: center;
  position: relative;
  padding: 15px;
}

.wrapperScore {
  display: flex;
  align-items: center;
}

.styleScore {
  margin-right: 15px;
}
.sad-cat {
  border-radius: 50%;
}