/* 
 * ESTILOS PERSONALIZADOS - Antigravity Math
 * Animaciones CSS, Glassmorphism y detalles finos.
 */

/* =========================================
   SCROLLBAR PERSONALIZADO (Para los récords)
   ========================================= */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02); 
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15); 
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3); 
}

/* =========================================
   RESETEOS DE INPUT NUMÉRICO
   ========================================= */
/* Ocultar las flechas arriba/abajo nativas de los inputs type="number" */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield; /* Para Firefox */
}

/* =========================================
   LÓGICA BASE DE PANTALLAS (Transiciones)
   ========================================= */
.screen {
    display: none;
    opacity: 0;
    transform: translateY(15px);
    animation: fadeInScreen 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.screen.active {
    display: flex; /* Tailwind maneja las clases flex-col, esto solo activa el bloque */
}

@keyframes fadeInScreen {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   EFECTOS VISUALES: GLASSMORPHISM
   ========================================= */
.glass-panel {
    background: rgba(15, 23, 42, 0.65); /* dark brand / translucido */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* =========================================
   ANIMACIONES DE ANTIGRAVEDAD (Burbujas flotantes)
   ========================================= */
@keyframes float {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-25px) rotate(3deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes float-slow {
    0% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-35px) scale(1.05); }
    100% { transform: translateY(0px) scale(1); }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float 8s ease-in-out infinite;
    animation-delay: -3.5s; /* Desfase para que no se muevan al mismo tiempo */
}

.animate-float-slow {
    animation: float-slow 12s ease-in-out infinite;
}

/* =========================================
   FEEDBACK ANIMATIONS (Para el input al responder)
   ========================================= */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* Flash rojo y vibración para respuesta incorrecta */
.feedback-wrong {
    animation: shake 0.4s ease-in-out !important;
    border-color: rgba(239, 68, 68, 0.8) !important;      /* brand-error */
    background-color: rgba(239, 68, 68, 0.15) !important;
    box-shadow: inset 0 0 15px rgba(239, 68, 68, 0.3) !important;
    color: #fca5a5 !important;
}

/* Flash verde y leve escala para respuesta correcta */
.feedback-correct {
    transform: scale(1.03) !important;
    border-color: rgba(16, 185, 129, 0.8) !important;     /* brand-success */
    background-color: rgba(16, 185, 129, 0.15) !important;
    box-shadow: inset 0 0 15px rgba(16, 185, 129, 0.3) !important;
    color: #6ee7b7 !important;
}