/* Container for all cards */
#playing-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;                
  justify-content: center;   
  align-items: flex-start;
  font-family: Arial, sans-serif;
}

/* Individual card */
.card {
  position: relative;         
  width: 75px;
  height: 100px;
  perspective: 600px;         /* Needed for 3D flip effect */
}

/* Inner card for flipping */
.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  cursor: pointer;
}

/* Flip the card on hover */
.card:hover .card-inner,
.card:focus-within .card-inner {
  transform: rotateY(180deg);
}

/* Card faces */
.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid black;
  border-radius: 5%;
  background-color: #ffffff;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

/* Back of the card */
.card-back {
  background-color: teal;
  color: white;
  transform: rotateY(180deg);
}

/* Top-left symbol */
.left {
  position: absolute;
  top: 5px;
  left: 5px;
  font-weight: bold;
  font-size: 0.8em;
}

/* Bottom-right symbol */
.right {
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-weight: bold;
  font-size: 0.8em;
  transform: rotate(180deg); 
}

/* Middle suit symbol */
.middle {
  font-size: 35px;
  color: teal;
  aria-hidden: true; 
}

/* =========================================================================
   Responsive Breakpoints
   ========================================================================= */

/* Tablet screens */
@media (max-width: 1200px) {
  .card {
    width: 60px;
    height: 80px;
  }

  .middle {
    font-size: 28px;
  }

  .left,
  .right {
    font-size: 0.7em;
  }
}

/* Mobile screens */
@media (max-width: 576px) {
  #playing-cards {
    gap: 12px;
  }

  .card {
    width: 50px;
    height: 70px;
  }

  .middle {
    font-size: 22px;
  }

  .left,
  .right {
    font-size: 0.6em;
  }
}