* { padding: 0; border: 0; margin: 0; box-sizing: border-box; }

body {
  background: #111;
  background: linear-gradient(320deg, black, #2b2b2b);
  color: #eee;
  min-height: 100vh;
}

header {
  margin: 30px 0;
}

main {
  display: none;
  gap: 2rem;
  padding: 3rem 0;
}

button {
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 6px;
  background: linear-gradient(171deg, white, #a1a1a1);
}

button:hover {
  background: white;
}

/* How to play section */

.intro {
  display: grid;
  justify-items: center;
  font-size: 1.3rem;
  margin: 0 auto;
  padding: 2rem;
  transition: opacity 400ms ease-in;
  opacity: 1;
  width: 100%;
  max-width: 900px;
}

.intro img {
  width: 100%;
  max-width: 400px;
  min-width: 300px;
  margin-bottom: 2rem;
}

.hide-intro {
  opacity: 0;
  display: none;
}

.intro ul li {
  text-align: left;
  list-style: none;
  margin: 20px 0;
}

.difficulty {
  display: grid;
  gap: 1rem;
  text-align: center;
}

.difficulty-wrap {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.selected-image {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}

.difficulty-item {
  display: grid;
  gap: 1rem;
  justify-items: center;
}
.difficulty-item img { 
  transition: all 150ms ease-in-out; 
  cursor: pointer;
}
.difficulty-item img:hover {
  filter: grayscale();
}

.game-wrap {
  display: none;
  justify-items: center;
  opacity: 0;
  gap: 1rem;
  pointer-events: none;
  transition: 400ms opacity 300ms ease;
}

.game-wrap.show {
  display: grid;
  opacity: 1;
  pointer-events: all;
}

.timer {
  display: flex;
  align-items: center;
  gap:10px;
}

.highscore-wrap {
  display: grid;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
}

.highscores {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 2rem;
  background-color: #333;
  border-radius: 10px;
  padding-block: 2rem;
  height: fit-content;
  max-height: 90vh;
  overflow: auto;
  text-align: center;
  width: 100%;
  max-width: 750px;
  margin: 2rem auto;
}

.hide-btn {
  width: 200px;
  margin: 0 auto;
}

.highscore-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, 250px);
  gap: 1.5rem;
  justify-content: center;
  font-size: 1.4rem;
  list-style: none;
}

.highscore-list li {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  height: fit-content;
}

.hide {
 display: none;
}

#canvas {
  display: none;
}

#board {
  display: grid;
  grid-template-columns: repeat(4, auto);
  cursor: pointer;
  border:20px solid #fff;
  transition: border 50ms ease;
}

#board img {
  transition: all 40ms ease;
}

@media screen and (max-width: 600px) {
  #board img {
    width: 70px;
    height: 70px;
  }
}

.winMessage {
  position: absolute;
  font-size: 2rem;
  background-color: white;
  color: #111;
  box-shadow: 4px 4px 6px #111;
  padding: 2rem;
  z-index: 9999;
  top: 50%;
  left: 50%;
  transform: translate(-50% , 0);
  border-radius: 5px;
}

.animate {
  --x: 0;
  --y: 0;
  transform: translate(var(--x), var(--y));
}

#easy-sm, #medium-sm, #hard-sm {
  display: none;
}

@media screen and (max-width: 600px) {

  main {
    padding: 0;
    text-align: center;
  }

  div, img, a, ul, li {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
   }

  #board img {
    width: 70px;
    height: 70px;
  }

  .intro {
    font-size: 1rem;
    padding: 2rem;
    border: unset;
    background-color: unset;
  }

  .intro img {
    width: 250px;
    height: auto;
  }

  .input-wrap {
    display: grid;
  }

  .difficulty {
    margin-top: 2rem;
  }

  .difficulty-wrap {
    display: flex;
    flex-direction: column;
  }
}