*, *::before, *::after {
    box-sizing: border-box;
  }
  body {
    font-family: 'Roboto', sans-serif;
    text-align: center;
    background: linear-gradient(135deg, #000, #1a1a1a);
    color: #f0e8ff;
    padding: 2rem;
  }
    /* Звезды */
    .star {
      position: fixed;
      width: 2px;
      height: 2px;
      background: #ffffff;
      border-radius: 50%;
      animation: twinkle 2s infinite ease-in-out;
      opacity: 0.7;
      z-index: 1;
    }

    @keyframes twinkle {
      0%, 100% { opacity: 0.2; transform: scale(1); }
      50% { opacity: 0.8; transform: scale(1.5); }
    }

  h1 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: #f2eaff;
  }
#cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 10px;
  padding: 10px;
}

.card {
  position: relative;
  width: 22vw;
  max-width: 110px;
  aspect-ratio: 2 / 3;
  perspective: 1000px;
  background: none;
}
.card-inner {
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  border-radius: 12px;

  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
  /* при наличии класса is-flipped, переворачиваем карту */
  .card.is-flipped .card-inner {
    transform: rotateY(180deg);
  }
.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
    background-color: transparent !important;

  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
  .card-back {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #222; /* задний фон */
  }
  .card-front {
    transform: rotateY(180deg);
  }
  /* убираем рамки у изображений и фон */
img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: none !important;
  outline: none !important;
  background-color: transparent ;
}
#copy-cards {
  margin-top: 2rem;
  padding: 12px 20px;
  background-color: #ad007f;
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
}
@media (max-width: 600px) {
  .card {
    flex: 1 1 calc(50% - 20px); /* 2 карты в ряд на узких экранах */
  }
}

@media (max-width: 400px) {
  .card {
    flex: 1 1 calc(100% - 20px); /* 1 карта в ряд на очень маленьких экранах */
  }
}