@font-face {
  font-family: "GothamProMedium";
  src: url("fonts/Gotham Pro Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: "GothamProRegular";
  src: url("fonts/GothamProRegular.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

.skin-selector .game-interface {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.skin-selector .content {
    box-sizing: border-box;
    position: relative;
    width: 90vw;
    max-width: 100vw;
    height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 2vh;
    display: none;
    opacity: 0;
}

.skin-selector .category-selector {
  position: relative;
  width: 60vh;
  max-width: 60vh;
  height: 8vh;
  bottom: 5vh;
}

.skin-selector .category-info {
  position: absolute;
  top: 62%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  pointer-events: none;
}

.skin-selector .category-title {
    font-size: 3vh;
    margin-bottom: 0.5vh;
    text-shadow: 0 0 0.6vh rgba(0, 0, 0, 0.2);
    font-family: "GothamProRegular";
}

.skin-selector .category-price {
  font-size: 2vh;
  font-weight: bolder;
  color:#e29858;
  font-family: "GothamProRegular", "Arial";
}

.skin-selector .nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 4vh;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* opacity: 0.5; */
}

.skin-selector .nav-arrow img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;

}

#categoryPrev {
  left: 0;
}

#categoryNext {
  right: 0;
}

.skin-selector .preview-section {
  margin: 1.25vh 0;
}

.skin-selector .bottom-controls {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 1.25vh;
}

.skin-selector .left-section {
  display: flex;
  align-items: flex-end;
  gap: 3.5vh;
  position: relative;
  left: -8vh;
  top: 4vh;
}

.skin-selector .instructions-section {
  display: flex;
  align-items: center;
  gap: 1vh;
  font-family: "GothamProRegular";
}

.skin-selector .close-button {
  width: 5vh;
  height: 5vh;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  border: none;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2vh;
  font-weight: bold;
}

.skin-selector .instructions {
  color: rgb(200, 200, 200);
  font-size: 1.5vh;
  line-height: 1.4;
  text-shadow:  0 0 0.6vh rgba(0, 0, 0, 0.1);
  font-weight: 500;
}

.skin-selector .navigation-controls {
  display: flex;
  align-items: center;
  gap: 1vh;
}

.skin-selector .nav-button {
  width: 5vh;
  height: 5vh;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  border: none;
  color: white;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.skin-selector .nav-hint {
  color: rgb(200, 200, 200);
  text-shadow: 0 0 0.6vh rgba(0, 0, 0, 0.1);
  font-size: 1.5vh;
  margin-left: 1vh;
  font-family: "GothamProRegular";
}
.skin-selector .instructions p
{
  margin: 0.3vh 0; /* верх и низ по 0.3vh, можно сделать и меньше */
  line-height: 1.3; /* дополнительно управляет вертикальным расстоянием между строками */
}
.skin-selector .nav-hint p {
  margin: 0.3vh 0; /* верх и низ по 0.3vh, можно сделать и меньше */
  line-height: 1.3; /* дополнительно управляет вертикальным расстоянием между строками */
}
.skin-selector .buy-button {
  background: #7bbd39;
  border: none;
  color: #1f2937;
  padding: 2vh 5vh;
  font-size: 1.8vh;
  font-weight: bold;
  border-radius: 0.3vh;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: "GothamProRegular";
  letter-spacing: 0.1vh;
  box-shadow: 0 0 0.6vh rgba(0, 0, 0, 0.15); 
  position: relative;
  top: 3vh; 
  width: 25vh;
  height: 5.5vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 
.buy-button:hover {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  border-color: #6ee7b7;
  transform: translateY(-0.4vh);
  box-shadow: 0 0.6vh 2vh rgba(0, 0, 0, 0.7);
}

.buy-button:active {
  transform: translateY(0);
  box-shadow: 0 0.2vh 1vh rgba(0, 0, 0, 0.5);
} */
 
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(2vh);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.skin-selector .content > * {
  animation: fadeIn 0.8s ease-out;
}

.skin-selector .content > *:nth-child(2) {
  animation-delay: 0.2s;
}

.skin-selector .content > *:nth-child(3) {
  animation-delay: 0.4s;
}

@media (max-width: 768px) {
  .skin-selector .category-selector {
    gap: 2vh;
  }

  .skin-selector .category-title {
    font-size: 3vh;
  }

  .skin-selector .nav-arrow {
    width: 5vh;
    height: 5vh;
  }

  .skin-selector .bottom-controls {
    flex-direction: column;
    gap: 2vh;
    align-items: center;
  }

  .skin-selector .left-section {
    flex-direction: column;
    gap: 2vh;
    align-items: center;
  }

  .skin-selector .buy-button {
    padding: 1.5vh 3.75vh;
    font-size: 2vh;
  }
}