@keyframes cambio-color {
  0% {
    background-color: rgba(255, 255, 0, 0.05); /* Alfa bajo */
  }
  50% {
    background-color: rgba(255, 255, 0, 0.25); /* Alfa más alto */
  }
  100% {
    background-color: rgba(255, 255, 0, 0.05); /* Vuelve al alfa bajo */
  }
}

/* Secuencia de Travesia */
.zona_secuencia_travesia {
  position: absolute;
  width: 5%;
  height: 6%;
  background-color: rgba(255, 255, 0, 0.2);
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: background-color 0.3s ease, transform 0.3s ease; /* Suaviza el cambio */
  /*transform: scale(1); */
  animation: cambio-color 3s infinite; /* Aplica la animación */
}

.zona_secuencia_travesia:hover {
  background-color: rgba(255, 255, 0, 0.5);
  transform: scale(1.03); /* Aumenta ligeramente el tamaño */

}

.zona_secuencia_travesia[data-size="cuadrado_secuencia_travesia_singladura"] {
  width: 40%;
  height: 18%;
  border-radius: 10px;
}

.zona_secuencia_travesia[data-size="cuadrado_secuencia_travesia_tripulacion"] {
  width: 40%;
  height: 12.5%;
  border-radius: 10px;
}

.zona_secuencia_travesia[data-size="cuadrado_secuencia_travesia_eventos"] {
  width: 33%;
  height: 5%;
  border-radius: 10px;
}

.zona_secuencia_travesia[data-size="cuadrado_secuencia_travesia_enemigos"] {
  width: 30%;
  height: 8%;
  border-radius: 10px;
}

.zona_secuencia_travesia[data-size="cuadrado_secuencia_travesia_singladura_eng"] {
  width: 27%;
  height: 16%;
  border-radius: 10px;
}

.zona_secuencia_travesia[data-size="cuadrado_secuencia_travesia_tripulacion_eng"] {
  width: 23%;
  height: 12.5%;
  border-radius: 10px;
}

.zona_secuencia_travesia[data-size="cuadrado_secuencia_travesia_eventos_eng"] {
  width: 25%;
  height: 8%;
  border-radius: 10px;
}

.zona_secuencia_travesia[data-size="cuadrado_secuencia_travesia_enemigos_eng"] {
  width: 27%;
  height: 8%;
  border-radius: 10px;
}


/* Tablero de Barco */

.zona_tablero_barco {
  position: absolute;
  width: 5%;
  height: 6%;
  background-color: rgba(255, 255, 0, 0.352);
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.2s ease, background-color 0.2s ease;
  /*transform: scale(1); */
  animation: cambio-color 3s infinite; /* Aplica la animación */
}

.zona_tablero_barco:hover {
  background-color: rgba(255, 255, 0, 0.5);
}

.zona_tablero_barco[data-size="circulo_grande"] {
  width: 10%;
  height: 12%;
}

.zona_tablero_barco[data-size="cuadrado_bodega"] {
  width: 81%;
  height: 21%;
  border-radius: 0;
}


/* Tablero de Abordaje */

.zona_tablero_abordaje {
  position: absolute;
  width: 5%;
  height: 6%;
  background-color: rgba(255, 255, 0, 0.352);
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.2s ease, background-color 0.2s ease;
  /*transform: scale(1); */
  animation: cambio-color 3s infinite; /* Aplica la animación */
}

.zona_tablero_abordaje:hover {
  background-color: rgba(255, 255, 0, 0.5);
}

.zona_tablero_abordaje[data-size="circulo_grande"] {
  width: 10%;
  height: 12%;
}

.zona_tablero_abordaje[data-size="cuadrado-abordaje"] {
  width: 79%;
  height: 10%;
  border-radius: 0;
}


/* Tablero de Bitacora Moral Confianza */

.zona_tablero_bitacora {
  position: absolute;
  width: 5%;
  height: 6%;
  background-color: rgba(255, 255, 0, 0.352);
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.2s ease, background-color 0.2s ease;
  /*transform: scale(1); */
  animation: cambio-color 3s infinite; /* Aplica la animación */
}

.zona_tablero_bitacora:hover {
  background-color: rgba(255, 255, 0, 0.5);
}

.zona_tablero_bitacora[data-size="cuadrado_tablero_moral"] {
  width: 40%;
  height: 70%;
  border-radius: 0;
}

.zona_tablero_bitacora[data-size="circulo_gigante"] {
  width: 20%;
  height: 18%;
}

/* Tablero de Navegacion */

.zona_tablero_navegacion {
  position: absolute;
  width: 5%;
  height: 6%;
  background-color: rgba(255, 255, 0, 0.352);
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.2s ease, background-color 0.2s ease;
  /*transform: scale(1); */
  animation: cambio-color 3s infinite; /* Aplica la animación */
}

.zona_tablero_navegacion:hover {
  background-color: rgba(255, 255, 0, 0.5);
}

.zona_tablero_navegacion[data-size="hexagono"] {
  position: absolute;
  width: 14%;
  height: 25%; /* ≈ 100 * sin(60°) */
  background-color: rgba(255, 255, 0, 0.352);
  clip-path: polygon(
    25% 5%, 
    75% 5%, 
    100% 50%, 
    75% 95%, 
    25% 95%, 
    0% 50%
  );
  cursor: pointer;
  z-index: 2;
  transition: transform 0.2s ease, background-color 0.2s ease;
  transform: scale(1);
}

.zona_tablero_navegacion[data-size="hexagono"]:hover {
  background-color: rgba(255, 255, 0, 0.5);
}

/* Enemigos de Mar */

.zona_enemy_card {
  position: absolute;
  width: 5%;
  height: 7%;
  background-color: rgba(255, 255, 0, 0.352);
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.2s ease, background-color 0.2s ease;
  /*transform: scale(1); */
  animation: cambio-color 3s infinite; /* Aplica la animación */
}

.zona_enemy_card:hover {
  background-color: rgba(255, 255, 0, 0.5);
}


.zona_enemy_card[data-size="circulo_mediano"] {
  width: 6%;
  height: 10%;
}

.zona_enemy_card[data-size="circulo_grande"] {
  width: 11%;
  height: 16%;
}

.zona_enemy_card[data-size="cuadrado_bandera_ficha_enemigo"] {
  width: 10%;
  height: 27%;
  border-radius: 10px;
}

.zona_enemy_card[data-size="cuadrado_velas_ficha_enemigo"] {
  width: 35%;
  height: 13%;
  border-radius: 10px;
}

.zona_enemy_card[data-size="cuadrado_cubierta_ficha_enemigo"] {
  width: 87%;
  height: 13%;
  border-radius: 10px;
}

/* Marcadores */

.zona_marcadores {
  position: absolute;
  width: 5%;
  height: 6%;
  background-color: rgba(255, 255, 0, 0.352);
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.2s ease, background-color 0.2s ease;
  /*transform: scale(1); */
  animation: cambio-color 3s infinite; /* Aplica la animación */
}

.zona_marcadores:hover {
  background-color: rgba(255, 255, 0, 0.5);
}

.zona_marcadores[data-size="circulo_grande"] {
  width: 8%;
  height: 11%;
}

.zona_marcadores[data-size="cuadrado_marcador"] {
  width: 8%;
  height: 12.5%;
  border-radius: 0;
}

.zona_marcadores[data-size="cuadrado_small"] {
  width: 8%;
  height: 12%;
  border-radius: 0;
}

.zona_marcadores[data-size="cuadrado"] {
  width: 50%;
  height: 20%;
  border-radius: 0;
}

.zona_marcadores[data-size="cuadrado_oculto"] {
  width: 8%;
  height: 16%;
  border-radius: 0;
}

.zona_marcadores[data-size="hexagono"] {
  position: absolute;
  width: 13%;
  height: 15%; /* ≈ 100 * sin(60°) */
  background-color: rgba(255, 255, 0, 0.352);
  clip-path: polygon(
    25% 5%, 
    75% 5%, 
    100% 50%, 
    75% 95%, 
    25% 95%, 
    0% 50%
  );
  cursor: pointer;
  z-index: 2;
  transition: transform 0.2s ease, background-color 0.2s ease;
  /*transform: scale(1); */
  animation: cambio-color 3s infinite; /* Aplica la animación */
}

.zona_marcadores[data-size="hexagono"]:hover {
  background-color: rgba(255, 255, 0, 0.5);
}

/* Combate Naval */
.zona_combate_naval {
  position: absolute;
  width: 5%;
  height: 6%;
  background-color: rgba(255, 255, 0, 0.2);
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: background-color 0.3s ease, transform 0.3s ease; /* Suaviza el cambio */
  /*transform: scale(1); */
  animation: cambio-color 3s infinite; /* Aplica la animación */
}

.zona_combate_naval:hover {
  background-color: rgba(255, 255, 0, 0.5);
  transform: scale(1.03); /* Aumenta ligeramente el tamaño */
}

.zona_combate_naval[data-size="cuadrado_barco_pirata"] {
  width: 26%;
  height: 10%;
  border-radius: 10px;
}

.zona_combate_naval[data-size="cuadrado_barco_enemigo"] {
  width: 29%;
  height: 10%;
  border-radius: 10px;
}

.zona_combate_naval[data-size="cuadrado_barco_enemigo_eng"] {
  width: 38%;
  height: 10%;
  border-radius: 10px;
}

.zona_combate_naval[data-size="cuadrado_isla"] {
  width: 15%;
  height: 15%;
  border-radius: 10px;
}

/* Abordaje */
.zona_abordaje {
  position: absolute;
  width: 5%;
  height: 6%;
  background-color: rgba(255, 255, 0, 0);
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: background-color 0.3s ease, transform 0.3s ease; /* Suaviza el cambio */
  /*transform: scale(1); */
  /*animation: cambio-color 3s infinite; /* Aplica la animación */
}

.zona_abordaje:hover {
  background-color: rgba(255, 255, 0, 0);
  transform: scale(1.03); /* Aumenta ligeramente el tamaño */
}

.zona_abordaje[data-size="boton_inicio_abordaje_interactivo"] {
  width: 10%;
  height: 14%;
  border-radius: 10px;
}


/* Atracar en Islas */
.zona_atracar_islas {
  position: absolute;
  width: 5%;
  height: 6%;
  background-color: rgba(255, 255, 0, 0.2);
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: background-color 0.3s ease, transform 0.3s ease; /* Suaviza el cambio */
  /*transform: scale(1); */
  animation: cambio-color 3s infinite; /* Aplica la animación */
}

.zona_atracar_islas:hover {
  background-color: rgba(255, 255, 0, 0.5);
  transform: scale(1.03); /* Aumenta ligeramente el tamaño */
}

.zona_atracar_islas[data-size="cuadrado_enterrar_botin"] {
  width: 25%;
  height: 7%;
  border-radius: 10px;
}

.zona_atracar_islas[data-size="cuadrado_explorar_isla"] {
  width: 25%;
  height: 7%;
  border-radius: 10px;
}

.zona_atracar_islas[data-size="cuadrado_realizar_encargo"] {
  width: 25%;
  height: 7%;
  border-radius: 10px;
}

.zona_atracar_islas[data-size="cuadrado_terminar_fase_travesia"] {
  width: 25%;
  height: 7%;
  border-radius: 10px;
}

.zona_atracar_islas[data-size="cuadrado_contrabando"] {
  width: 25%;
  height: 7%;
  border-radius: 10px;
}

.zona_atracar_islas[data-size="cuadrado_pasajeros"] {
  width: 25%;
  height: 7%;
  border-radius: 10px;
}

/* Finalizar Travesia */
.zona_finalizar_travesia {
  position: absolute;
  width: 5%;
  height: 6%;
  background-color: rgba(255, 255, 0, 0.2);
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: background-color 0.3s ease, transform 0.3s ease; /* Suaviza el cambio */
  /*transform: scale(1); */
  animation: cambio-color 3s infinite; /* Aplica la animación */
}

.zona_finalizar_travesia:hover {
  background-color: rgba(255, 255, 0, 0.5);
  transform: scale(1.03); /* Aumenta ligeramente el tamaño */
}

.zona_finalizar_travesia[data-size="cuadrado"] {
  width: 46%;
  height: 45%;
  border-radius: 10px;
}

/* Modo Grumete y Almirante */
.zona_modos_juego {
  position: absolute;
  width: 5%;
  height: 6%;
  background-color: rgba(255, 255, 0, 0.2);
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: background-color 0.3s ease, transform 0.3s ease; /* Suaviza el cambio */
  /*transform: scale(1); */
  animation: cambio-color 3s infinite; /* Aplica la animación */
}

.zona_modos_juego:hover {
  background-color: rgba(255, 255, 0, 0.5);
  transform: scale(1.03); /* Aumenta ligeramente el tamaño */
}

.zona_modos_juego[data-size="cuadrado_grumete"] {
  width: 38%;
  height: 8%;
  border-radius: 10px;
}
.zona_modos_juego[data-size="cuadrado_almirante"] {
  width: 42%;
  height: 8%;
  border-radius: 10px;
}

.zona_modos_juego[data-size="cuadrado_grumete_eng"] {
  width: 33%;
  height: 34%;
  border-radius: 10px;
}
.zona_modos_juego[data-size="cuadrado_almirante_eng"] {
  width: 42%;
  height: 24%;
  border-radius: 10px;
}

/* Cartas */
.zona_cartas {
  position: absolute;
  width: 5%;
  height: 6%;
  background-color: rgba(255, 255, 0, 0.2);
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: background-color 0.3s ease, transform 0.3s ease; /* Suaviza el cambio */
  /*transform: scale(1); */
  animation: cambio-color 3s infinite; /* Aplica la animación */
}

.zona_cartas:hover {
  background-color: rgba(255, 255, 0, 0.5);
  transform: scale(1.03); /* Aumenta ligeramente el tamaño */
}

.zona_cartas[data-size="cuadrado_encargos"] {
  width: 14%;
  height: 9%;
  border-radius: 10px;
}
.zona_cartas[data-size="cuadrado_eventos"] {
  width: 14%;
  height: 9%;
  border-radius: 10px;
}
.zona_cartas[data-size="cuadrado_cargos"] {
  width: 12%;
  height: 8%;
  border-radius: 10px;
}
.zona_cartas[data-size="cuadrado_contrabando"] {
  width: 20.5%;
  height: 12%;
  border-radius: 10px;
}

/* zona Ejemplos Prácticos  */
.zona_ejemplos {
  position: absolute;
  width: 5%;
  height: 6%;
  background-color: rgba(255, 255, 0, 0.2);
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: background-color 0.3s ease, transform 0.3s ease; /* Suaviza el cambio */
  /*transform: scale(1); */
  animation: cambio-color 3s infinite; /* Aplica la animación */
}

.zona_ejemplos:hover {
  background-color: rgba(255, 255, 0, 0.5);
  transform: scale(1.03); /* Aumenta ligeramente el tamaño */
}

.zona_ejemplos[data-size="cuadrado_ejem_1"] {
  width: 39%;
  height: 7%;
  border-radius: 10px;
}
.zona_ejemplos[data-size="cuadrado_ejem_1_eng"] {
  width: 35%;
  height: 7%;
  border-radius: 10px;
}
.zona_ejemplos[data-size="cuadrado_ejem_2"] {
  width: 32%;
  height: 7%;
  border-radius: 10px;
}
.zona_ejemplos[data-size="cuadrado_ejem_2_eng"] {
  width: 30%;
  height: 7%;
  border-radius: 10px;
}
.zona_ejemplos[data-size="cuadrado_ejem_3"] {
  width: 32%;
  height: 7%;
  border-radius: 10px;
}
.zona_ejemplos[data-size="cuadrado_ejem_3_eng"] {
  width: 32%;
  height: 7%;
  border-radius: 10px;
}
.zona_ejemplos[data-size="cuadrado_ejem_4"] {
  width: 38%;
  height: 7%;
  border-radius: 10px;
}
.zona_ejemplos[data-size="cuadrado_ejem_4_eng"] {
  width: 42%;
  height: 7%;
  border-radius: 10px;
}

/* Textos para botones de Abordaje Virtual */
.zone-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

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

  color: #fdf6d3;
  font-size: clamp(10px, 1.5vw, 16px);
  font-family: 'Cinzel', serif;
  font-weight: normal;

  padding: 4px 10px;
  background: rgba(60, 40, 10, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;

  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.6),
    inset 0 0 4px rgba(255, 255, 200, 0.2);

  text-shadow:
    1px 1px 0 #000,
    0 0 3px #c9a760;

  pointer-events: none;
  transition: transform 0.3s ease; 
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.05);
  }
}

/* 📱 Ajustes para móviles (pantallas pequeñas) */
@media (max-width: 600px) {
  .zone-text {
    font-size: 12px;
    padding: 3px 8px;
    max-width: 80vw;
    white-space: normal; /* permite que el texto se parta en varias líneas */
  }
}