/* Tema Halloween para Realm571 usando Tailwind CSS */

/* Animaciones personalizadas para Halloween */
@keyframes pumpkinGlow {
    from { filter: drop-shadow(0 0 5px #ff6b35); }
    to { filter: drop-shadow(0 0 20px #ff6b35); }
}

@keyframes ghostFloat {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-60%) translateX(-10px); }
}

@keyframes halloweenFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes fogFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(20px, -20px) scale(1.1); }
    66% { transform: translate(-20px, 10px) scale(0.9); }
}

@keyframes flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
    51% { opacity: 1; }
    52% { opacity: 0.8; }
    53% { opacity: 1; }
}

@keyframes batFly {
    0% { transform: translate(-100px, 20px); }
    25% { transform: translate(25vw, 100px); }
    50% { transform: translate(50vw, 50px); }
    75% { transform: translate(75vw, 150px); }
    100% { transform: translate(calc(100vw + 100px), 80px); }
}

/* Efectos de texto Halloween - TEXTO BLANCO SIN BLURR */
.halloween-title {
    color: #ffffff !important;
    text-shadow: none !important;
    animation: none !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #ffffff !important;
    filter: none !important;
}

/* Sobreescribir cualquier otro estilo */
.halloween-title * {
    color: inherit !important;
}

/* Clases de utilidad Halloween */
.bg-halloween-dark {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

.bg-halloween-card {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.95), rgba(45, 45, 45, 0.95));
    backdrop-filter: blur(10px);
}

.border-halloween-orange {
    border-color: #ff6b35 !important;
}

.text-halloween-orange {
    color: #ff6b35 !important;
}

.text-halloween-light {
    color: #fbbf24 !important; /* Amarillo más brillante para mejor contraste */
}

.text-halloween-lighter {
    color: #fde68a !important; /* Aún más brillante para elementos importantes */
}

/* Botones con forma de calabaza Halloween */
.btn-halloween-pumpkin {
    background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 50%, #ffa500 100%);
    color: #ffffff;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    position: relative;
    transition: all 0.3s ease;
    box-shadow:
        0 4px 12px rgba(255, 107, 53, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        0 0 15px rgba(255, 165, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
}

.btn-halloween-pumpkin:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 6px 20px rgba(255, 107, 53, 0.5),
        inset 0 1px 3px rgba(255, 255, 255, 0.3),
        0 0 20px rgba(255, 165, 0, 0.3);
    background: linear-gradient(135deg, #ff8c42 0%, #ffa500 50%, #ffb347 100%);
}

.btn-halloween-pumpkin:active {
    transform: translateY(0px) scale(0.98);
}

@keyframes pumpkinEyes {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* Efecto de luz que pasa */
.btn-halloween-pumpkin:hover .pumpkin-light {
    opacity: 1;
    transform: translateX(0);
}

.pumpkin-light {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s ease;
    opacity: 0;
    border-radius: 30px 30px 60px 60px;
}

/* Botón púrpura mejorado */
.btn-halloween-purple-pumpkin {
    background: linear-gradient(135deg, #7b1fa2 0%, #8e24aa 50%, #9c27b0 100%);
    color: #ffffff;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    position: relative;
    transition: all 0.3s ease;
    box-shadow:
        0 4px 12px rgba(123, 31, 162, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        0 0 15px rgba(123, 31, 162, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
}

.btn-halloween-purple-pumpkin:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 6px 20px rgba(123, 31, 162, 0.5),
        inset 0 1px 3px rgba(255, 255, 255, 0.3),
        0 0 20px rgba(123, 31, 162, 0.3);
    background: linear-gradient(135deg, #8e24aa 0%, #9c27b0 50%, #ab47bc 100%);
}


/* Botones secundarios y de peligro mejorados */
.btn-halloween-secondary {
    background: linear-gradient(135deg, #6b7280 0%, #9ca3af 50%, #d1d5db 100%);
    color: #1f2937;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    position: relative;
    transition: all 0.3s ease;
    box-shadow:
        0 4px 12px rgba(107, 114, 128, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.3),
        0 0 15px rgba(107, 114, 128, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
}

.btn-halloween-secondary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 6px 20px rgba(107, 114, 128, 0.4),
        inset 0 1px 3px rgba(255, 255, 255, 0.4),
        0 0 20px rgba(107, 114, 128, 0.3);
    background: linear-gradient(135deg, #9ca3af 0%, #d1d5db 50%, #e5e7eb 100%);
    color: #111827;
}

.btn-halloween-danger {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 50%, #f87171 100%);
    color: #ffffff;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    position: relative;
    transition: all 0.3s ease;
    box-shadow:
        0 4px 12px rgba(220, 38, 38, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        0 0 15px rgba(220, 38, 38, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
}

.btn-halloween-danger:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 6px 20px rgba(220, 38, 38, 0.5),
        inset 0 1px 3px rgba(255, 255, 255, 0.3),
        0 0 20px rgba(220, 38, 38, 0.3);
    background: linear-gradient(135deg, #ef4444 0%, #f87171 50%, #fca5a5 100%);
}


.card-halloween {
    @apply bg-gradient-to-br from-gray-900/95 to-gray-800/95 border border-orange-500/40 rounded-xl p-6 shadow-xl backdrop-blur-sm transition-all duration-300 hover:border-orange-500/60 hover:shadow-orange-500/30 hover:-translate-y-1;
}

.card-white {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95));
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 107, 53, 0.3);
    border-radius: 12px;
    padding: 24px;
    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.1),
        0 0 20px rgba(255, 107, 53, 0.1),
        inset 0 1px 2px rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

.card-white:hover {
    border-color: rgba(255, 107, 53, 0.5);
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.15),
        0 0 30px rgba(255, 107, 53, 0.2),
        inset 0 1px 3px rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

/* Ajustes de texto para card blanca */
.card-white .halloween-title {
    color: #1f2937 !important;
}

.card-white .text-halloween-light {
    color: #6b7280 !important;
}

.card-white .text-halloween-lighter {
    color: #374151 !important;
}

.card-white a {
    color: #ea580c !important;
}

.card-white a:hover {
    color: #dc2626 !important;
}

/* Estilos para contenido de noticias en card blanca */
.prose {
    color: #1f2937 !important;
    font-weight: 500 !important;
    line-height: 1.7 !important;
}

.prose p {
    color: #1f2937 !important;
    font-weight: 500 !important;
    margin-bottom: 1.2rem !important;
    font-size: 1.1rem !important;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    color: #111827 !important;
    font-weight: 700 !important;
}

.prose strong, .prose b {
    color: #111827 !important;
    font-weight: 700 !important;
}

.prose ul, .prose ol {
    color: #1f2937 !important;
    font-weight: 500 !important;
}

.prose li {
    color: #1f2937 !important;
    font-weight: 500 !important;
}

.prose blockquote {
    color: #374151 !important;
    font-weight: 500 !important;
    border-left-color: #ea580c !important;
}

.prose code {
    color: #1f2937 !important;
    background-color: #f3f4f6 !important;
    padding: 0.125rem 0.25rem !important;
    border-radius: 0.25rem !important;
}

.prose pre {
    color: #1f2937 !important;
    background-color: #f9fafb !important;
}

.prose table {
    color: #1f2937 !important;
}

.prose th, .prose td {
    color: #1f2937 !important;
    font-weight: 500 !important;
}

.prose a {
    color: #ea580c !important;
    font-weight: 600 !important;
}

.prose a:hover {
    color: #dc2626 !important;
}

.input-halloween {
    @apply bg-gray-900/80 border border-orange-500/30 text-orange-100 placeholder:text-orange-300/50 rounded-lg px-4 py-2 transition-all duration-300 focus:border-orange-400 focus:ring-2 focus:ring-orange-400/20 focus:bg-gray-900/95;
}

/* Efectos especiales */
.flicker-effect {
    animation: flicker 3s ease-in-out infinite;
}

.float-effect {
    animation: halloweenFloat 3s ease-in-out infinite;
}

.pumpkin-glow {
    animation: pumpkinGlow 2s ease-in-out infinite alternate;
}

.ghost-float {
    animation: ghostFloat 3s ease-in-out infinite;
}

/* Efectos decorativos */
.bat-decoration {
    position: fixed;
    color: #fed7aa;
    font-size: 1.5rem;
    animation: batFly 15s linear infinite;
    pointer-events: none;
    z-index: 5;
}

.spiderweb-decoration {
    position: fixed;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, transparent 30%, rgba(255, 255, 255, 0.1) 30%, transparent 31%);
    pointer-events: none;
    z-index: 1;
}

/* Estilos mejorados para contenido dinámico */
.news-item {
    @apply bg-gray-800/50 rounded-lg p-4 border border-orange-500/20 hover:border-orange-500/40 transition-all duration-300;
}

.news-item h3 {
    @apply text-halloween-light font-semibold text-base sm:text-lg mb-2;
}

.news-item h3 a {
    @apply hover:text-halloween-lighter transition-colors duration-200;
}

.news-item .date-badge {
    @apply inline-block px-2 py-1 text-xs font-semibold rounded-full bg-orange-600/30 text-orange-200 mb-2;
}

.news-item p {
    @apply text-gray-300 text-sm sm:text-base leading-relaxed;
}

.sponsorship-item {
    @apply bg-gray-800/50 rounded-lg p-4 border border-orange-500/20 hover:border-orange-500/40 transition-all duration-300 cursor-pointer hover:bg-gray-800/70;
}

.sponsorship-item .sponsor-name {
    @apply text-halloween-light font-semibold text-base sm:text-lg;
}

.sponsorship-item .prize-amount {
    @apply text-halloween-lighter font-bold text-lg sm:text-xl;
}

.sponsorship-item .event-date {
    @apply text-gray-400 text-sm sm:text-base;
}

.sponsorship-item .participant-count {
    @apply text-gray-500 text-xs sm:text-sm mt-1;
}

/* Scrollbar Halloween */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1f2937;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ff6b35, #d84315);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #fdd835, #ff6b35);
}

/* Responsive Halloween */
@media (max-width: 768px) {
    .nav-brand {
        font-size: 1.25rem;
    }

    header::before, header::after {
        font-size: 1.5rem;
    }

    .halloween-card {
        padding: 1rem;
    }

    .btn-halloween-primary,
    .btn-halloween-secondary,
    .btn-halloween-danger {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    /* Ocultar algunos elementos decorativos en móvil para mejor rendimiento */
    .bat, .spiderweb {
        display: none;
    }

    /* Reducir efectos animados en móvil */
    body::before {
        animation-duration: 30s; /* Más lento en móvil */
    }

    /* Ajustar calabazas flotantes para móvil */
    .fixed {
        position: absolute !important;
    }

    .halloween-title {
        font-size: 1.5rem;
    }

    /* === ARREGLOS PARA SLIDER Y LOGO FLOTANTE EN MÓVIL === */

    /* Slider responsive para móvil */
    #slides-carousel {
        height: 300px !important; /* Altura reducida para móvil */
        min-height: 250px;
    }

    /* Contenedor de slides en móvil */
    .slide-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* Asegura que la imagen cubra todo el contenedor */
    }

    /* Contenido del slide en móvil */
    .slide-item .absolute.inset-0 .text-center {
        padding: 1rem !important;
    }

    .slide-item h1 {
        font-size: 2rem !important; /* Reducido de 4-7rem */
        margin-bottom: 0.5rem !important;
        line-height: 1.2 !important;
    }

    .slide-item p {
        font-size: 1rem !important; /* Reducido de 2-3rem */
        margin-bottom: 1rem !important;
        line-height: 1.3 !important;
    }

    /* Botones del slider en móvil */
    .slide-item a {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
        margin: 0.25rem !important;
        min-height: 36px !important;
    }

    /* Controles del carrusel en móvil */
    #prev-slide, #next-slide {
        padding: 0.5rem !important;
        top: 40% !important; /* Ajustado para altura reducida */
    }

    #prev-slide {
        left: 0.5rem !important;
    }

    #next-slide {
        right: 0.5rem !important;
    }

    /* Indicadores del slider en móvil */
    #slide-indicators {
        bottom: 1rem !important;
    }

    .slide-indicator {
        width: 8px !important;
        height: 8px !important;
    }

    /* Logo flotante optimizado para móvil */
    #floating-logo-container {
        top: 0.75rem !important;
        left: 0.75rem !important;
        z-index: 30 !important; /* Asegurar que esté por encima de todo */
    }

    #floating-logo-container .relative .bg-gradient-to-br {
        padding: 0.5rem !important;
        background: rgba(0, 0, 0, 0.8) !important; /* Más oscuro para mejor contraste */
        backdrop-filter: blur(8px) !important;
        border: 1px solid rgba(255, 140, 0, 0.6) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    }

    /* Logo flotante - imágenes en móvil */
    #floating-logo-img {
        height: 24px !important;
        width: 24px !important;
    }

    #floating-logo-fallback {
        font-size: 1.5rem !important;
    }

    /* Ocultar texto del logo en móvil */
    #floating-logo .text-white.hidden.sm\\:block {
        display: none !important;
    }

    /* Ocultar partículas decorativas en móvil */
    #floating-logo-container .absolute.-top-2,
    #floating-logo-container .absolute.-bottom-1,
    #floating-logo-container .absolute.top-0 {
        display: none !important;
    }

    /* Reducir efectos hover en móvil para mejor rendimiento */
    #floating-logo-container .group:hover .group-hover\\:rotate-6 {
        transform: rotate(0deg) !important;
    }

    #floating-logo-container .hover\\:scale-105:hover {
        transform: scale(1) !important;
    }

    /* Asegurar que el logo flotante sea clicable en móvil */
    #floating-logo-container .cursor-pointer {
        min-height: 44px !important;
        min-width: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

@media (max-width: 480px) {
    .nav-brand {
        font-size: 1rem;
    }

    header::before, header::after {
        font-size: 1.2rem;
    }

    .halloween-card {
        padding: 0.75rem;
        margin: 0.5rem 0;
    }

    .btn-halloween-primary,
    .btn-halloween-secondary,
    .btn-halloween-danger {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .halloween-title {
        font-size: 1.25rem;
    }

    /* === ARREGLOS ADICIONALES PARA PANTALLAS MUY PEQUEÑAS === */

    /* Slider aún más optimizado para móviles pequeños */
    #slides-carousel {
        height: 250px !important;
        min-height: 200px;
    }

    /* Texto del slider en móviles muy pequeños */
    .slide-item h1 {
        font-size: 1.5rem !important;
        line-height: 1.1 !important;
        margin-bottom: 0.25rem !important;
    }

    .slide-item p {
        font-size: 0.875rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.75rem !important;
    }

    /* Botones del slider más pequeños */
    .slide-item a {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.75rem !important;
        margin: 0.125rem !important;
        min-height: 32px !important;
    }

    /* Controles del slider más pequeños */
    #prev-slide, #next-slide {
        padding: 0.375rem !important;
        top: 35% !important;
    }

    /* Logo flotante ultra optimizado */
    #floating-logo-container {
        top: 0.5rem !important;
        left: 0.5rem !important;
    }

    #floating-logo-container .relative .bg-gradient-to-br {
        padding: 0.375rem !important;
        background: rgba(0, 0, 0, 0.9) !important;
        border: 1px solid rgba(255, 140, 0, 0.8) !important;
    }

    /* Logo más pequeño en pantallas muy pequeñas */
    #floating-logo-img {
        height: 20px !important;
        width: 20px !important;
    }

    #floating-logo-fallback {
        font-size: 1.25rem !important;
    }

    /* Asegurar área táctil suficiente */
    #floating-logo-container .cursor-pointer {
        min-height: 40px !important;
        min-width: 40px !important;
        padding: 0.25rem !important;
    }

    /* Fondo del logo más visible */
    #floating-logo-container .absolute.inset-0 {
        background: rgba(0, 0, 0, 0.85) !important;
        border: 1px solid rgba(255, 140, 0, 0.7) !important;
    }

    /* Ocultar completamente todas las decoraciones en móviles muy pequeños */
    #floating-logo-container .absolute.-top-2,
    #floating-logo-container .absolute.-bottom-1,
    #floating-logo-container .absolute.top-0,
    #floating-logo-container .group-hover\\:rotate-6 {
        display: none !important;
        visibility: hidden !important;
    }

    /* Reducir padding del contenido principal */
    .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Optimizar animaciones para móviles lentos */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* Animación de texto temático */
.halloween-title {
    background: linear-gradient(45deg, var(--halloween-orange), var(--halloween-yellow), var(--halloween-orange));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: halloweenTextShimmer 3s ease-in-out infinite;
}

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

/* Efecto de sangre goteando */
.blood-drip {
    position: relative;
}

.blood-drip::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    width: 2px;
    height: 10px;
    background: linear-gradient(180deg, var(--halloween-blood), transparent);
    animation: drip 2s ease-in-out infinite;
}

@keyframes drip {
    0%, 100% { height: 10px; opacity: 1; }
    50% { height: 20px; opacity: 0.7; }
}