h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

p:last-child {
  margin-bottom: 0;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}


a {
  color: currentColor;
  text-decoration: none;
}

button {
  cursor: pointer;
}



body {
  font-family: sans-serif;
  text-align: center;
  background-color: #e3f0b7;
}

.container {
  display: flex;
  justify-content: center;
  gap: 50px;
  margin-top: 30px;
}

.images img {
  width: 200px;
  height: 200px;
  cursor: pointer;
  border: 2px solid transparent;
}

.words div {
  padding: 15px;
  margin: 5px;
  background-color: #ffffff;
  cursor: pointer;
  border: 2px solid transparent;
}

.selected {
  border-color: blue;
}

#result {
  margin-top: 20px;
  font-weight: bold;
}

/* Выделение выбранной картинки */
.images img.selected {
  border: 3px solid blue;
  transform: scale(1.05);
}

/* Выделение выбранного слова */
.words div.selected {
  border: 3px solid blue;
  background-color: rgba(185, 147, 214, 0.9);
}

/* Стили для зоны и счёта*/
.score-board {
  font-size: 20px;
  margin-top: 20px;
}

.matched-container {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 10px;
  border-top: 2px solid #ccc;
}

.matched-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.matched-pair img {
  width: 80px;
  height: 80px;
}

/* Ошибочный выбор (красное выделение) */
.selected.wrong {
  border-color: red !important;
  background-color: #ffcccc !important;
}

/*#resetBtn {
  margin-top: 10px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}*/

#resetBtn {
  background: linear-gradient(45deg, #b993d6, #8ca6db);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(185, 147, 214, 0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#resetBtn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 16px rgba(185, 147, 214, 0.9);
}


/* ===== Адаптивность ===== */

/* Крупные ноутбуки/десктопы (≥1200px): можно показать 2 колонки картинок/слов, если нужно */
@media (min-width: 1200px) {
  .images {
    display: grid;
    grid-template-columns: repeat(2, 200px);
    gap: 16px;
    object-fit: cover;
  }

  .words {
    display: grid;
    grid-template-columns: repeat(2, minmax(200px, 260px));
    gap: 12px;
    
  }
 .words div {
   display: flex;
   /* выравнивание текста по центру */
   align-items: center;
   justify-content: center;
   padding: 12px 16px;
   background-color: #ffffff;
   cursor: pointer;
   border: 2px solid transparent;
   border-radius: 8px;
   /* красиво закруглим */
   font-size: 18px;
   font-weight: 600;
   min-height: 60px;
   /* единая высота для всех */
   transition: background-color 0.2s ease, border-color 0.2s ease;
 }

 .words div.selected {
   border: 3px solid blue;
   background-color: rgba(185, 147, 214, 0.9);
   /* теперь выделение заполняет всю карточку */
 }

  .container {
    gap: 60px;
  }
}

/* Планшеты (601px–1024px): компактнее, по 2 в ряд */
@media (min-width: 601px) and (max-width: 1024px) {
  .container {
    gap: 32px;
  }

  .images {
    display: grid;
    grid-template-columns: repeat(2, 180px);
    gap: 12px;
    object-fit: cover;
  }

  .images img {
    width: 180px;
    height: 180px;
    object-fit: cover;
  }

  .words {
    display: grid;
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: 10px;
    align-content: start;
  }

  .words div {
    padding: 12px;
  }

  .matched-pair img {
    width: 90px;
    height: 90px;
    object-fit: cover;
  }
}

/* Мобильные (≤600px): в одну колонку, кнопка на всю ширину, крупные тач-таргеты */
@media (max-width: 600px) {
  body {
    padding: 12px;
  }

  .score-board {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    justify-items: center;
  }

  .score-board p {
    font-size: 18px;
  }

  #resetBtn {
    grid-column: 1 / -1;
    width: 100%;
    padding: 12px 16px;
    font-size: 18px;
  }

  /* Игровое поле — в столбик */
  .container {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
  }

  /* Картинки сеткой 2×N, поменьше */
  .images {
    display: grid;
    grid-template-columns: repeat(2, 140px);
    gap: 10px;
    object-fit: cover;
  }

  .images img {
    width: 140px;
    height: 140px;
    object-fit: cover;
  }

  /* Слова на всю ширину, по одному в строке */
  .words {
    width: 100%;
    max-width: 420px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .words div {
    padding: 14px;
    font-size: 18px;
  }

  /* Пары внизу — гибко ужимаем */
  .matched-container {
    gap: 12px;
  }

  .matched-pair {
    width: 44vw;
    max-width: 180px;
  }

  .matched-pair img {
    width: 32vw;
    height: 32vw;
    max-width: 140px;
    max-height: 140px;
    object-fit: cover;
  }
}