#nav-levels {
  margin-bottom: 20px;
}

#levels-list {
  list-style-type: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 3 columns */
  gap: 10px;
}

#levels-list li {
  cursor: pointer;
  padding: 5px 10px;
  color: #fff;

  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
  transition: transform 0.2s, border-color 0.2s;
}
#levels-list .A1 {
  background: var(--bg-A1);
}

#levels-list .A2 {
  background: var(--bg-A2);
}

#levels-list .B1 {
  background: var(--bg-B1);
}

#levels-list .B2 {
  background: var(--bg-B2);
}

#levels-list .C1 {
  background: var(--bg-C1);
}

#levels-list .C2 {
  background: var(--bg-C2);
}
#levels-list li:hover {
  transform: scale(1.03);
  transition: transform 0.2s, border-color 0.2s;
}