@font-face {
font-family: BreeSerif;
src: url("/fonts/BreeSerif-Regular.ttf")
  format("truetype");
}

@view-transition {
navigation: auto;
}

@font-face {
font-family: Roboto;
src: url("/fonts/RobotoSlab-Regular.ttf")
  format("truetype");
}

:root {
  --blue: #1e90ff;
  --red2: #780618;
  --red: #e92a41;
  --yellow: #ffa218;
  --orange: #f86d31;
  --green: #66a329;

  --prehistoria: #f86d31;
  --antigua: #30a5e8;
  --medieval: #f8b229;
  --moderna: #f11c35; 
  --contemporanea: #2e8b57; 

  --paleolitico-inferior: #e86b35;
  --paleolitico-medio: #d95922;
  --paleolitico-superior: #c45222;
}

.etiqueta-periodo {
  background-color: var(--periodopagina);
}

.etiqueta-prehistoria {
  background-color: var(--prehistoria);
}

.etiqueta-antigua {
  background-color: var(--antigua);
}

.etiqueta-medieval {
  background-color: var(--medieval);
}

.etiqueta-moderna {
  background-color: var(--moderna);
}

.etiqueta-precolombino {
  background-color: #475936;
}

.etiqueta-contemporanea {
  background-color: var(--contemporanea);
}

body {
    font-family: 'Roboto', serif;
    background: radial-gradient(ellipse at center, #565656 0%, #0d0d0d 100%);
    color: #f8f4e3;
    margin: 0;
    padding: 0;
    text-align: center;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

#turno-indicador {
  width: 200px;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  margin: 1rem;
  font-size: 18px;
  font-weight: 700;
  padding: 12px;
  margin-bottom: 15px;
  border-radius: 8px;
  transition: background .4s ease, color .4s ease, transform .3s ease;
}

/* Turno jugador */
#turno-indicador.jugador {
  background: #2ecc71;
  color: #fff;
  box-shadow: 0 0 10px rgba(46, 204, 113, 0.6);
  animation: pulsoJugador 1.2s infinite ease-in-out;
}

@keyframes pulsoJugador {
  0% { transform: scale(1);}
  50% { transform: scale(1.03);}
  100% { transform: scale(1);}
}

/* Turno IA */
#turno-indicador.ia {
  background: #3498db;
  color: #fff;
  box-shadow: 0 0 10px rgba(52, 152, 219, .6);
  animation: thinkingIA 1s infinite alternate;
}

@keyframes thinkingIA {
  0% { filter: brightness(1);}
  100% { filter: brightness(1.3);}
}

/* Turno de combate */
#turno-indicador.combate {
  background: linear-gradient(45deg, #e74c3c, #c0392b);
  color: #fff;
  box-shadow: 0 0 20px rgba(231, 76, 60, 0.8);
  animation: pulsoCombate 0.6s infinite ease-in-out;
}

@keyframes pulsoCombate {
  0% { transform: scale(1); box-shadow: 0 0 20px rgba(231, 76, 60, 0.8); }
  50% { transform: scale(1.08); box-shadow: 0 0 30px rgba(231, 76, 60, 1); }
  100% { transform: scale(1); box-shadow: 0 0 20px rgba(231, 76, 60, 0.8); }
}

/* Animación de carta atacando */
.atacando {
  animation: ataquePulso 0.4s ease-in-out;
  z-index: 999 !important;
}

@keyframes ataquePulso {
  0% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.15); filter: brightness(1.5) drop-shadow(0 0 15px rgba(255, 0, 0, 0.8)); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* Turno de curación */
#turno-indicador.curacion {
  background: linear-gradient(45deg, #27ae60, #229954);
  color: #fff;
  box-shadow: 0 0 20px rgba(39, 174, 96, 0.8);
  animation: pulsoCuracion 0.8s infinite ease-in-out;
}

@keyframes pulsoCuracion {
  0% { transform: scale(1); box-shadow: 0 0 20px rgba(39, 174, 96, 0.8); }
  50% { transform: scale(1.05); box-shadow: 0 0 25px rgba(39, 174, 96, 1); }
  100% { transform: scale(1); box-shadow: 0 0 20px rgba(39, 174, 96, 0.8); }
}

/* Animación de carta curando */
.curando {
  animation: curacionPulso 0.5s ease-in-out;
  z-index: 999 !important;
}

@keyframes curacionPulso {
  0% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.12); filter: brightness(1.4) drop-shadow(0 0 15px rgba(39, 174, 96, 0.9)); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* Efecto de brillo al ser curado */
.brillo-curacion {
  animation: brilloCurado 0.6s ease;
}

@keyframes brilloCurado {
  0% { 
    filter: brightness(1) drop-shadow(0 0 5px rgba(39, 174, 96, 0));
  }
  50% { 
    filter: brightness(1.5) drop-shadow(0 0 20px rgba(39, 174, 96, 1));
  }
  100% { 
    filter: brightness(1) drop-shadow(0 0 5px rgba(39, 174, 96, 0));
  }
}

/* Animación de bloqueo defensivo */
.bloqueando {
  animation: bloqueoPulso 0.5s ease-out;
  z-index: 998 !important;
}

@keyframes bloqueoPulso {
  0% { 
    transform: scale(1); 
    filter: brightness(1) drop-shadow(0 0 0 rgba(52, 152, 219, 0));
  }
  50% { 
    transform: scale(1.15); 
    filter: brightness(1.6) drop-shadow(0 0 20px rgba(52, 152, 219, 1));
  }
  100% { 
    transform: scale(1); 
    filter: brightness(1) drop-shadow(0 0 0 rgba(52, 152, 219, 0));
  }
}

@keyframes escudoPulso {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
  }
}

.tablero {
  display: flex;
  height: 70vh;
}

.mano, .jugadas {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px;
  min-height: 150px;
}

#mano-jugador {
  border: 1px solid red;
  flex: 1;
}

.carta {
  width: 150px;
  height: 200px;
  border-radius: 1rem;
  user-select: none;
  border: 1px solid red;
  opacity: 1;
  transform-style: preserve-3d;
  transform: perspective(1000px);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .2s ease;
  cursor: pointer;
  
}

.carta:hover {
  scale: 1.1;
  transform: translateZ(50px);
  z-index: 9999999999;
}

.carta:hover .personaje {
  scale: 1.1;
}

.carta .fondo {
  width: 100%;
  object-fit: cover;
  overflow: hidden;
  height: 100%;
  position: absolute;
  border-radius: 1rem;
}

.carta .fondo h1 {
  font-size: 1em;
  margin: 0;
  color: #0d0d0d;
  opacity: .5;
  font-family: BreeSerif;
  font-weight: 900;
  text-transform: uppercase;
}

.carta .fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
}

.carta .puntaje {
  margin: 0.5rem;
  font: 600 1rem Roboto;
  z-index: 9;
  color: white;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  transform: translateZ(15px);
  z-index: 98;
  background-color: #2e2e2e;
  border: 2px solid #efb810;
  border-radius: 100%;
  box-shadow: inset 0rem 0rem 0.5rem rgba(0, 0, 0, 0.5);
  transition: 0.2s ease;
  cursor: pointer;
  position: absolute;
  left: 0;
  top: 10%;
}

.carta .personaje {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  z-index: 9;
  filter: drop-shadow(0 0 10px rgba(0 0 0 / 75%));
  transition: 0.2s ease;
}

.carta .contenedor-habilidades {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 5px;
  position: absolute;
  z-index: 9999;
  left: 8%;
}

.carta .contenedor-habilidades div {
  font-size: 16px;
  font-weight: bold;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  position: relative;
  overflow: hidden;
  text-shadow: 0 0 2px rgba(0 0 0 / 75%);
}

.carta .contenedor-habilidades .fuerza {
  background-color: rgb(202, 44, 44);
}

.carta .contenedor-habilidades .fuerza::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.2;
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("/icons/arma.svg");
}

.carta .contenedor-habilidades .defensa {
  background-color: rgb(38, 150, 51);
}

.carta .contenedor-habilidades .defensa::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.2;
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("/icons/health.svg");
}

.carta .contenedor-habilidades .recoleccion {
  background-color: rgb(235, 175, 22);
}

.carta .contenedor-habilidades .recoleccion::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.2;
  background-size: 80% cover;
  background-position: center;
  background-image: url("/icons/moneda.svg");
}

.carta .titulo {
  font-size: 1em;
  color: white;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  z-index: 99999;
  margin-bottom: 10px;

}

.carta .titulo h4 {
  margin: 0;
  font-family: BreeSerif;
  line-height: 1;
  text-shadow: 0 0 5px rgba(0 0 0 / 75%);
}

.carta .titulo span {
  font: 400 10px Roboto;
  color: white;
  text-shadow: 0 0 5px rgba(0 0 0 / 75%);
}

.carta p {
  font-weight: bold;
  margin: 2px 0;
  color: lightyellow;
}

.carta .especialidad {
  z-index: 9999;
  position: absolute;
  display: flex;
  align-items: center;
  flex-direction: column;
  top: 8%;
  right: 0;
  width: 30px;
  margin: 0.5rem;
}

.carta .especialidad img {
  height: 30px;
  background: radial-gradient(ellipse at center, #7b7b7b 0%, #0d0d0d 100%);
  width: 30px;
  padding: 5px;
  border-radius: 100%;
  user-select: none;
}



.carta .especialidad span {
  opacity: 0;
  pointer-events: none;
}


#resultado {
  font-size: 1.5em;
  margin: 20px 0;
  color: white;
  text-shadow: 1px 1px black;
}

@keyframes entrar {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.targetable::before {
  outline: 5px solid var(--red) !important;
}

@keyframes temblor {
0% { transform: translateX(0); }
20% { transform: translateX(-5px); }
40% { transform: translateX(5px); }
60% { transform: translateX(-5px); }
80% { transform: translateX(5px); }
100% { transform: translateX(0); }
}

.temblor-daño {
animation: temblor 0.8s ease;
}

.temblor-daño::after {
  content: "";
  background-color: var(--red);
  width: 100%;
  height: 100%;
  opacity: 0.5;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.2s;
  z-index: 999999;
  scale: 1.05;
  border-radius: 1rem;
}

.recolecta-efecto {
  scale: 1.2;
  transition: 0.2s ease;
}

.recolecta-efecto::before {
  outline: 5px solid green !important;
}

.mano-ia {
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
margin-bottom: 10px;
}


.carta.ia {
width: 120px;
height: 80px;
background: url('/ruta/al/reverso.png') center/cover no-repeat;
border: 1px solid #ccc;
border-radius: 8px;

}

.campo {
  display: flex;
  flex: 1;
}

#jugadas-ia {
  display: flex;
  flex-direction: column;
}


.campo.jugador.over {
border-color: green;
}

.zona {
  border: 2px dashed white;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra horizontalmente */
  justify-content: center;
  gap: 0; /* Sin separación natural */
  flex: 1;
}

.zona .carta {
  margin-top: -100px; /* Superposición (ajusta el valor) */
  transition: transform .25s ease, margin-top .25s ease;
}

.zona .carta:first-child {
  margin-top: 0;
}

.menos-puntos {
  color: var(--red) !important;
  transition: 0.5s ease;
  transition-delay: 0.2s;
}

.sumar-puntos {
color: green !important;
transition: 0.5s ease;
transition-delay: 0.2s;
}

.carta-muerta {
  opacity: 0;
  transform: scale(0.5);
  transition: 0.4s ease-out;
}

.carta-nueva {
  animation: cartaAparece 0.4s ease-out;
}

@keyframes cartaAparece {
  0% { transform: scale(5); opacity: 0; }
  60% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}



.brillo-bonus {
animation: brillo 1s ease;
animation-delay: 0.2s ;
}

@keyframes brillo {
0% { 
  background-color: gold;
  box-shadow: 0 0 10px gold; 
}
100% { 
  background-color: "";
  box-shadow: none; 
}
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

.legendario::before {
  content: "";
  width: 100%;
  height: 100%;
  bottom: 0;
  scale: 1.035;
  background: linear-gradient(133deg,#603512,#c89629,#faf290,#c89629,#603512, #603512,#c89629,#faf290,#c89629,#603512, #603512,#c89629,#faf290,#c89629,#603512);
  background-size: 400% 400%;
  animation: gradient-animation 5s linear infinite;
  filter: blur(0px) saturate(1.2) brightness(1.2);
  position: absolute;
  border-radius: 1rem;
  z-index: 0;
  border: 1px solid rgb(163 163 163 / 50%);
  outline: 5px solid transparent;
  transition: outline 0.2s ease;
}

.epico::before {
  content: "";
  width: 100%;
  height: 100%;
  bottom: 0;
  scale: 1.02;
  background: linear-gradient(
  133deg,
  #3e0066,
  #7e3ff2,
  #d1a4ff,
  #7e3ff2,
  #3e0066,
  #3e0066,
  #7e3ff2,
  #d1a4ff,
  #7e3ff2,
  #3e0066,
  #3e0066,
  #7e3ff2,
  #d1a4ff,
  #7e3ff2,
  #3e0066
);
  background-size: 400% 400%;
  animation: gradient-animation 5s linear infinite;
  filter: blur(5px);
  position: absolute;
  border-radius: 1rem;
  z-index: 0;
  outline: 5px solid transparent;
  transition: outline 0.2s ease;
}

.raro::before {
  content: "";
  width: 100%;
  height: 100%;
  bottom: 0;
  scale: 1.02;
  background: linear-gradient(133deg, #1e3a8a, #3b82f6, #93c5fd, #3b82f6, #1e3a8a);
  background-size: 400% 400%;
  animation: gradient-animation 5s linear infinite;
  filter: blur(10px) saturate(1);
  position: absolute;
  border-radius: 1rem;
  z-index: 0;
}

.bronce::before {
  content: "";
  width: 100%;
  height: 100%;
  bottom: 0;
  scale: 1.035;
  background: linear-gradient(133deg, #603512,#603512, #603512, #603512, #d37528,  #603512, #603512, #603512, #603512);
  background-size: 400% 400%;
  animation: gradient-animation 5s linear infinite;
  filter: blur(0px) saturate(1);
  position: absolute;
  border-radius: 1rem;
  z-index: 0;
  border: 1px solid rgb(163 163 163 / 50%);
  outline: 5px solid transparent;
  transition: outline 0.2s ease;
}

.comun::before {
  content: "";
  width: 100%;
  height: 100%;
  bottom: 0;
  scale: 1.035;
  background: linear-gradient(
  133deg,
  #707070,
  #dcdcdc,
  #f5f5f5,
  #dcdcdc,
  #707070,
  #707070,
  #dcdcdc,
  #f5f5f5,
  #dcdcdc,
  #707070,
  #707070,
  #dcdcdc,
  #f5f5f5,
  #dcdcdc,
  #707070
);
  background-size: 400% 400%;
  animation: gradient-animation 5s linear infinite;
  filter: blur(0px) saturate(1);
  position: absolute;
  border-radius: 1rem;
  z-index: 0;
  border: 1px solid rgb(163 163 163 / 50%);
  outline: 5px solid transparent;
  transition: outline 0.2s ease;
}

.basico::before {
  content: "";
  width: 100%;
  height: 100%;
  bottom: 0;
  scale: 1.035;
  background: #343434;
  filter: blur(0px) saturate(1);
  position: absolute;
  border-radius: 1rem;
  z-index: 0;
  border: 1px solid rgb(163 163 163 / 50%);
  outline: 5px solid transparent;
  transition: outline 0.2s ease;
}

/* Fondo oscuro */
#visor-carta {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

#visor-carta.activo {
  opacity: 1;
  pointer-events: auto;
}

/* Carta ampliada */
#visor-carta-contenido .carta {
  transform: scale(2.3);     /* tamaño aumentado */
  transform-origin: center;
  pointer-events: none;      /* evita clicks sobre la carta */
}

/* Cerrar al hacer clic fuera */
#visor-carta-contenido {
  position: relative;
}