body {
  width: 100vw;
  min-height: 100vh;
  padding: 6px;
  margin: 0;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  overflow-x: hidden;
  background-image: url("/images/ui/bg10.png");
}

.list {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px;
}

.listItem {
  width: 100px;
  height: 140px;
  position: relative;
  box-sizing: border-box;
  border: var(--border-solid);

  background-color: var(--bg-color);
  padding: 4px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4px;
  overflow: hidden;
  font-size: 14px;
  text-decoration: none;
  color: inherit;

  img {
    position: absolute;
    bottom: 4px;
    right: 4px;
    max-width: 50px;
    max-height: 50px;
  }
}

.listItemSquig {
  border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAB7klEQVR4AezZgW7CMAxF0bD//+etIISQlcizdQuU3oluNHEe7alVUe1n+IMKCIpyjiGooLAAHGeHCgoLwHF2qKCwABxnhwoKC8BxdqigsAAc1+lQ+BC+K05Q+HoKKigsAMfZoYLCAnCcHSooLADHvaJDf7djrmxbeelVyb7WlsKrxa8ArR7ToesFhS+foAcAvd6nnrfLGKOyPa/9z/tK9rU2ZqKkdijKOfy/POwp6BlAL9tJVrat/HNe3kPhayGooLAAHGeHCgoLwHF2qKCwABy3R4fG75DdZ2fqVOPnx+OjPueWswfoLfisvwSFr7yggsICcJwdKigsAMfZoYLCAnCcHSooLADH2aEHAH3ps3PwmO3GZ/d4fLM17TE7tE03Xyjo3KU9Kmibbr5Q0LlLe1TQNt18oaBzl/aooG26+cJPBI3fE7P9+Zm9afQTQd9EwXysoIzjI0XQBwXzZg/Q7Nk5uyfG9dl+lhfnYx4jeU/ZA/Qefc4/gsLXXdADgsZ7VrZfPcUsL85X80v1dmiJKy8WNDcqVQha4sqLBc2NShWClrjyYkFzo1KFoCWuvFjQ3GhWsRwTdEnTmxC057ZcJeiSpjchaM9tuUrQJU1vQtCe23KVoEua3oSgPbflKkGXNL0JQXtuy1WCLml6E38AAAD//6lueggAAAAGSURBVAMAmv5gqREyRJ8AAAAASUVORK5CYII=")
    28 / 6px / 4px round;
}

.listItem:hover {
  cursor: var(--pointer);
  background-color: var(--dark-color);
  color: var(--bg-color);
}

.listText {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px;

  p {
    margin: 0;
    writing-mode: vertical-rl;
    text-orientation: upright;
  }
}

.listNumber {
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--dark-color);
  color: var(--bg-color);
  border-radius: 50%;
}

.home {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 50;
  padding: 10px;
  color: inherit;
  text-decoration: none;
}

.homeBubble {
  position: absolute;
  bottom: 50px;
  right: -25px;
  display: none;
}

.homeText {
  position: absolute;
  top: -43px;
  left: 22px;
  width: 60px;
  display: none;
}

.home:hover .homeText {
  display: block;
}

.home:hover .homeBubble {
  display: block;
}