.dvd-container {
  position: relative;
  width: 243px;
  height: 445px; 
  margin: 0 auto;
  overflow: visible;
  perspective: 900px;
  perspective-origin: 50% 50%;
  -webkit-filter: drop-shadow(10px 10px 7px rgba(0,0,0,.3));
  filter: drop-shadow(10px 10px 7px rgba(0,0,0,.3));
}

.dvd-container .dvd {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: translateZ(-14px);
  transition: all 1s ease-in-out;
  transform: rotateY( 10deg ) rotateX( 0deg );
}

.dvd-container .dvd{
  transition: transform 0.5s ease-out; /* Isso faz o reset ser suave */
}

@-webkit-keyframes rotation-3d {
		from {
				-webkit-transform: rotateY( 0deg ) rotateX( 0deg );
		}
		to {
				-webkit-transform: rotateY( 360deg ) rotateX( 0deg );
		}
}

@keyframes rotation-3d {
    from {
            transform: rotateY( 0deg ) rotateX( 0deg );
    }
    to {
            transform: rotateY( 360deg ) rotateX( 0deg );
    }
}

.dvd-container .dvd div {
  position: absolute;
  background-color: black;
  color:white;
  background-size: 510px 345px;
  backface-visibility: visible;
  background-image: url('https://webisora.com/wp-content/uploads/2018/07/ubuntu.png');
}

.dvd-container .dvd div.front {
  width: 243px;
  height: 345px;
  background-color:yellow;
  background-image: var(--capa); /* Usa a imagem definida no HTML */
  background-size: cover;
  background-position: 243px 0px;
  border-top: solid 5px #000;
  border-right: solid 5px #000;
  border-bottom: solid 5px #000;
  z-index: 10;
  transform: rotateY( 0deg ) translateZ( 14px );
}

.dvd-container .dvd div.back {
  width: 243px;
  height: 345px;
    background-color:blue;
  
  background-position: 0px 0px;
  border-top: solid 5px #000;
  border-left: solid 5px #000;
  border-bottom: solid 5px #000;
  transform: rotateY( 180deg ) translateZ( 14px );
}

.dvd-container .dvd div.left {
  width: 28px;
  height: 345px;
  background-color:black;
  background-position: 268px 0px;
  border-top: solid 5px #000;
  border-bottom: solid 5px #000;
  transform: rotateY( -90deg ) translateZ( 14px );
}

.dvd-container .dvd div.right  {
  width: 28px;
  height: 345px;
  transform: rotateY( 90deg ) translateZ( 230px );
  background-image: none;
  background-color: rgba(0,0,0,1);
}

.dvd-container .dvd div.top {
  width: 243px;
  height: 28px;
  transform: rotateX( 90deg ) translateZ( 14px );
  background-image: none;
  background-color: rgba(0,0,0,0.7);
}

.dvd-container .dvd div.bottom {
  width: 243px;
  height: 28px;
  transform: rotateX( -90deg ) translateZ( 331px );
  background-image: none;
  background-color: rgba(0,0,0,0.7);
}

/* Garante que o grid saiba o tamanho dos itens */
#game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); /* Ajustado para caber a largura do DVD */
    gap: 40px;
    padding: 50px;
    justify-items: center; /* Centraliza o DVD dentro da coluna do grid */
    align-items: start;
}

/* O link pai (game-card) agora define o espaço ocupado */
.game-card.dvd-case {
    width: 243px; 
    height: 445px; /* Altura total do container 3D */
    text-decoration: none;
    display: block;
}

/* Ajuste no container que você encontrou */
.dvd-container {
    position: relative;
    width: 100%; /* Ocupa a largura total da .game-card */
    height: 100%;
    margin: 0; /* Remove o margin: 0 auto para não conflitar com o grid */
    overflow: visible;
    perspective: 900px;
}
.game-card.dvd-case:hover {
    z-index: 100; /* Traz o DVD para frente de tudo ao interagir */
}