body{
    background-color: #0F0F1B;
    margin: 3;
    height: 100vh;
    place-content: center;
    align-items: center;

}

h1{
    color:#fafbf6;
    text-align: center;
    font-size: 48px;
}


.holo-card img{
    width: 100%;
    height: 100%;

}
.holo-card {
  width: 260px;
  height: 380px;
  border-radius: 8px;
  background: #0f0f1b;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.1s;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  border-color: #ffffff;
  border-style: solid;
}

/* Overlay holographique */
.holo-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    125deg,
    #ff0080, #ffd900, #40e0d0, #7b68ee,
    #ff0080, #ff8c00, #40e0d0, #7b68ee,
    #ff0080, #ff8c00, #40e0d0
  );
  background-size: 200% 200%;
  opacity: 0;
  mix-blend-mode: color-dodge;
  transition: opacity 0.3s;
  animation: holoGradient 5s ease infinite;
  pointer-events: none;
}



/* Holographic grid */
.holo-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent, transparent 2px,
      rgba(255,255,255,0.03) 2px,
      rgba(255,255,255,0.03) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent, transparent 2px,
      rgba(255,255,255,0.03) 2px,
      rgba(255,255,255,0.03) 4px
    );
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

/* Activation on hover */
.holo-card:hover::before { opacity: 0.7; }
.holo-card:hover::after { opacity: 1; }

@keyframes holoGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.holo-card-title {
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   text-align: center;
   font-size: large;
   color: #f1f1f1;

}

.holo-card-subtitle {
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   margin-left: 3px;
   margin-right: 3px;
   font-size: large;
   color: #ffffff;
   text-align: center;

}

/* card pŕoprio*/
/* card pŕoprio*/
/* card pŕoprio*/
.commum-card img{
    width: 100%;
    height: 100%;

}
.commum-card {
  width: 260px;
  height: 380px;
  border-radius: 8px;
  background: #565a75;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.1s;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    border-color: #ffffff;
  border-style: solid;
}


.commum-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    125deg,
    #ff0080, #fc2e95, #9ee4ff, #ffffff,
    #ff0080, #fc2e95, #9ee4ff, #ffffff,
    #ff0080, #fc2e95, #9ee4ff
  );
  background-size: 200% 200%;
  opacity: 0;
  mix-blend-mode: color-dodge;
  transition: opacity 0.3s;
  animation: holoGradient 5s ease infinite;
  pointer-events: none;
}




.commum-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent, transparent 2px,
      rgba(255,255,255,0.03) 2px,
      rgba(255,255,255,0.03) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent, transparent 2px,
      rgba(255,255,255,0.03) 2px,
      rgba(255,255,255,0.03) 4px
    );
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}


.commum-card:hover::before { opacity: 0.1; }
.commum-card:hover::after { opacity: 0.2; }

@keyframes holoGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.commum-card-title {
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   text-align: center;
   font-size: large;
   color: #fafbf6;

}

.commum-card-subtitle {
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   text-align: center;
   font-size: large;
   color: #fafbf6;

}





/* ==========================================
   CARD LENDÁRIO / DOURADO
========================================== */
.legendary-card img {
  width: 100%;
  height: 100%;
}

.legendary-card {
  width: 260px;
  height: 380px;
  border-radius: 8px;
  background: linear-gradient(135deg, #1f1700, #3d2d00, #1f1700);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.1s, box-shadow 0.3s;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 15px rgba(255, 215, 0, 0.3);
  border: 2px solid #ffd700;
}

/* Brilho Metálico Dourado */
.legendary-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    125deg,
    #ffd700, #fff8dc, #ff8c00, #ffffff, #ffd700, #ffae00
  );
  background-size: 200% 200%;
  opacity: 0;
  mix-blend-mode: color-dodge;
  transition: opacity 0.3s;
  animation: holoGradient 4s ease infinite;
  pointer-events: none;
}

/* Textura Diagional em Diamante */
.legendary-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 215, 0, 0.08),
    rgba(255, 215, 0, 0.08) 2px,
    transparent 2px,
    transparent 8px
  );
  opacity: 0.5;
  transition: opacity 0.3s;
  pointer-events: none;
}

/* Ativação no Hover */
.legendary-card:hover::before { 
  opacity: 0.8; 
}

.legendary-card:hover {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 215, 0, 0.6);
}

.legendary-card-title {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  text-align: center;
  font-size: large;
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.legendary-card-subtitle {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  text-align: center;
  font-size: large;
  color: #fff8dc;
}

/* serio */




#album {
  background-color: #565a75 ;
  width: 80%;
  margin: 80px auto 0;
  padding: 20px; 
  display: flex;
  flex-wrap: wrap;
  justify-content: center; 
  gap: 16px; /* O flex devia ter margin */
}

a {
    font-style: normal;
     text-decoration: none;
}



/* seguirei o copilot, unificarei isso */
.holo-card-title,
.commum-card-title,
.legendary-card-title {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  text-align: center;
  font-size: 18px;            
  line-height: 1.2;          
  height: 2.4em;              
  

  display: flex;
  align-items: center;
  justify-content: center;


  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;


  margin-top: 8px;
  margin-bottom: 8px;
}


.holo-card-title {
  color: #f1f1f1;
}

.commum-card-title {
  color: #fafbf6;
}

.legendary-card-title {
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}