.firstadventurerform input[readonly] {
    background: #3c3c4c;
    color: #bbb;
}

.firstadventurerform button[type="submit"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Inicia fuera del botón a la izquierda */
    width: 100%;
    height: 100%;
    /* Gradiente para el efecto de brillo (transparente -> blanco semi-transparente -> transparente) */
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: all 0.7s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transición más lenta para el brillo */
    transform: skewX(-20deg); /* Inclina el brillo para un efecto dinámico */
}

.firstadventurerform button[type="submit"] 
{
    background-color: var(--ui_7);
    color: var(--ui_3); /* Texto blanco */
    border: none;
    border-radius: 8px; /* Bordes ligeramente redondeados */
    padding: 0.5rem 1.5rem;
    font-size: 18px;
    font-weight: 600; /* Peso de fuente semi-negrita */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px; /* Espacio entre el icono y el texto */
    position: relative; /* Necesario para los pseudo-elementos (brillo) */
    overflow: hidden; /* Asegura que el efecto de brillo no se desborde */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transición global suave */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sombra sutil */
    min-width: 200px;
    margin-right: auto !important;
    margin-left: auto !important;
}

.firstadventurerform button[type="submit"]:hover {
    background-color: var(--ui_8);
    transform: translateY(-3px); /* Levanta el botón ligeramente */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada */
    color: var(--ui_6);
}

.firstadventurerform button[type="submit"]:hover::before {
    left: 100%; /* Mueve el brillo a través del botón */
}

.firstadventurerform a {
    background-color: var(--ui_4);
    color: var(--ui_6); /* Texto blanco */
    border: none;
    border-radius: 8px; /* Bordes ligeramente redondeados */
    padding: 0.5rem 1.5rem;
    font-size: 18px;
    font-weight: 600; /* Peso de fuente semi-negrita */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px; /* Espacio entre el icono y el texto */
    position: relative; /* Necesario para los pseudo-elementos (brillo) */
    overflow: hidden; /* Asegura que el efecto de brillo no se desborde */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transición global suave */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sombra sutil */
    margin-right: auto !important;
    margin-left: auto !important;
}

/* Efectos al pasar el ratón sobre el botón */
.firstadventurerform a:hover {
    background: var(--ui_7);
    transform: translateY(-3px); /* Levanta el botón ligeramente */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada */
}

/* Animación de brillo deslizante (pseudo-elemento) */
.firstadventurerform a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Inicia fuera del botón a la izquierda */
    width: 100%;
    height: 100%;
    /* Gradiente para el efecto de brillo (transparente -> blanco semi-transparente -> transparente) */
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: all 0.7s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transición más lenta para el brillo */
    transform: skewX(-20deg); /* Inclina el brillo para un efecto dinámico */
}

.firstadventurerform a:hover::before {
    left: 100%; /* Mueve el brillo a través del botón */
}

/* Estilos del icono SVG de Discord */
.formLink-icon svg {
    width: 24px; /* Ancho del SVG */
    height: 24px; /* Alto del SVG */
    fill: #FFFFFF; /* Color del SVG (blanco) */
    transition: transform 0.3s ease-out; /* Transición para la animación del icono */
}

/* Animación del icono al pasar el ratón */
.firstadventurerform a button:hover .formLink-icon svg {
    transform: scale(1.1) rotate(5deg); /* Aumenta tamaño y rota ligeramente el icono */
}

/* Estilos del texto del botón */
.button-text {
    transition: opacity 0.3s ease-out, transform 0.3s ease-out; /* Transiciones para el texto */
}

/* Clases para animaciones de entrada y salida del texto */
.text-fade-out {
    opacity: 0;
    transform: translateY(-10px); /* Desplaza el texto hacia arriba al desaparecer */
}

.text-fade-in {
    opacity: 1;
    transform: translateY(0); /* Restaura el texto a su posición original al aparecer */
}

/* Estilo para el estado de fallo del botón */
.formLink-button.failed {
    background-color: #E74C3C; /* Rojo para indicar un error */
}

/* Efecto al pasar el ratón en el estado de fallo */
.formLink-button.failed:hover {
    background-color: #C0392B; /* Rojo más oscuro para el hover en estado de fallo */
}

/* Animación de "sacudida" para el botón en caso de fallo */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } /* Desplaza a la izquierda */
    20%, 40%, 60%, 80% { transform: translateX(5px); } /* Desplaza a la derecha */
}

.formLink-button.shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; /* Aplica la animación de sacudida */
    transform: translate3d(0, 0, 0); /* Optimización para animaciones 3D */
    backface-visibility: hidden; /* Optimización para animaciones 3D */
    perspective: 1000px; /* Optimización para animaciones 3D */
}


/** mobile version **/
@media only screen and (max-width: 768px)
{
    .firstadventurerform input[type="text"] {width: 90%;}
    .firstadventurerform button[type="submit"] {width: 70%;}
    .firstadventurerform a {width:65%;}
    .firstadventurerform .subcontainer {
        margin-top: 2rem;
        width: 90%; 
        margin-right: auto !important;
        margin-left: auto !important;
    }
}

/** tablet version **/
@media only screen and (max-width: 991px) and (min-width: 769px)
{
    .firstadventurerform input[type="text"] {width: 60%;}
    .firstadventurerform button[type="submit"] {width: 50%;}
    .firstadventurerform a {width:50%;}
    .firstadventurerform .subcontainer {
        margin-top: 1rem;
        width: 75%; 
        margin-right: auto !important;
        margin-left: auto !important;
    }
}

/** tablet version **/
@media only screen and (max-width: 1365px) and (min-width: 992px)
{
    .firstadventurerform input[type="text"] {width: 60%;}
    .firstadventurerform button[type="submit"] {width: 70%;}
    .firstadventurerform a {width:50%;}
    .firstadventurerform .subcontainer {
        margin-top: 2rem;
        width: 60%; 
        margin-right: auto !important;
        margin-left: auto !important;
    }
}

/** desktop version **/
@media only screen and (min-width: 1366px)
{
    .firstadventurerform button[type="submit"] {min-width: 300px;}
    .firstadventurerform a {min-width: 250px;}
    .firstadventurerform .subcontainer {
        margin-top: 2rem;
        width: 40%; 
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .firstadventurerform a { width: 250px; }
}