body { 
        font-family: 'Plus Jakarta Sans', sans-serif; background-color: #0B101B; 
    }
    .pixelated { 
        image-rendering: pixelated; 
    }
    .bg-pattern {
        background-image: radial-gradient(#00A3FF 0.5px, transparent 0.5px);
        background-size: 24px 24px;
        opacity: 0.1;
    }

    /* Animación del fondo */
    @keyframes gradientMovement {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
    }

    .bg-animated-gradient {
        background: linear-gradient(
            115deg, 
            #0B101B 0%, 
            #0f172a 35%, 
            #0B101B 70%, 
            #0f172a 100%
        );
        background-size: 200% 200%;
        animation: gradientMovement 12s ease infinite;
    }

    /* Animaciones de modal */
    @keyframes modalIn {
        0% { opacity: 0; transform: scale(0.9) translateY(20px); }
        100% { opacity: 1; transform: scale(1) translateY(0); }
    }

    @keyframes modalOut {
        0% { opacity: 1; transform: scale(1) translateY(0); }
        100% { opacity: 0; transform: scale(0.9) translateY(10px); }
    }

    .modal-show { animation: modalIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
    .modal-hide { animation: modalOut 0.2s ease-in forwards; }

    .overlay-show { animation: fadeIn 0.3s ease forwards; }
    .overlay-hide { animation: fadeOut 0.2s ease forwards; }

    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

    .scanlines::before {
        content: " ";
        display: block;
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), 
                    linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
        z-index: 10;
        background-size: 100% 3px, 3px 100%;
        pointer-events: none;
        opacity: 0.4;
    }

    /* Animación del overlay */
    @keyframes jump {
        0%, 100% {
            transform: translateY(0) scale(1);
        }
        25% {
            transform: translateY(-10px) scale(1.05); /* Salta un poco hacia arriba */
        }
        50% {
            transform: translateY(0) scale(1);
        }
        75% {
            transform: translateY(-5px) scale(1.02); /* Un salto más corto */
        }
    }

    .logo-jump {
        animation: jump 1.8s ease-in-out infinite;
    }

    /* Animación del texto "Cargando..." */
    .loading-text span {
        opacity: 0;
        animation: dot-fade 1.5s infinite steps(1, end);
    }

    .loading-text span:nth-child(1) { animation-delay: 0s; }
    .loading-text span:nth-child(2) { animation-delay: 0.5s; }
    .loading-text span:nth-child(3) { animation-delay: 1s; }

    @keyframes dot-fade {
        0% { opacity: 0; }
        33% { opacity: 1; }
        66% { opacity: 1; }
        100% { opacity: 0; }
    }

    /* Estilos de TomSelect */
    .ts-wrapper.single .ts-control {
        background-color: #ffffff !important;
        border: 1px solid #d1d5db !important;
        border-radius: 14px !important;
        padding: 5px 15px !important;
        min-height: 56px !important;
        display: flex !important;
        align-items: center !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
        transition: all 0.2s ease;
    }

    /* Cuando el select está activo */
    .ts-wrapper.single.focus .ts-control {
        border-color: #3b82f6 !important;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
    }

    /* Estilo del ítem seleccionado dentro del input */
    .pokedex-selected-item {
        display: flex;
        align-items: center;
        width: 100%;
    }

    .pokedex-selected-item img {
        width: 42px;
        height: 42px;
        margin-right: 12px;
    }

    .pokedex-selected-item .name {
        font-weight: 700;
        color: #111827;
        text-transform: capitalize;
        font-size: 16px;
    }

    .pokedex-selected-item .number {
        margin-left: auto;
        font-family: monospace;
        color: #9ca3af;
        background: #f3f4f6;
        padding: 2px 8px;
        border-radius: 6px;
        font-size: 12px;
    }

    /* Quitar la flecha fea por defecto y el cursor parpadeante */
    .ts-wrapper.single .ts-control::after {
        display: none !important;
    }

    .ts-control input {
        opacity: 0.5 !important;
        caret-color: #3b82f6 !important;
    }

    /* Estilo del Dropdown (La lista que baja) */
    .ts-dropdown {
        margin-top: 8px !important;
        border: none !important;
        border-radius: 16px !important;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    }

    .ts-dropdown .option {
        padding: 12px 16px !important;
        transition: background 0.2s;
    }

    .ts-dropdown .active {
        background-color: #f8fafc !important;
    }

    /* Contenedor de los tipos que aparecerá debajo del select */
    #pokemon-types-container {
        gap: 8px;
        margin-top: 10px;
        justify-content: center;
    }

    /* Estilo base de la píldora de tipo */
    .type-badge {
        padding: 4px 12px;
        border-radius: 20px;
        color: white;
        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    /* Colores por Tipo */
    .bg-grass    { background-color: #7AC74C; }
    .bg-fire     { background-color: #EE8130; }
    .bg-water    { background-color: #6390F0; }
    .bg-bug      { background-color: #A6B91A; }
    .bg-normal   { background-color: #A8A77A; }
    .bg-poison   { background-color: #A33EA1; }
    .bg-electric { background-color: #F7D02C; }
    .bg-ground   { background-color: #E2BF65; }
    .bg-fairy    { background-color: #D685AD; }
    .bg-fighting { background-color: #C22E28; }
    .bg-psychic  { background-color: #F95587; }
    .bg-rock     { background-color: #B6A136; }
    .bg-ghost    { background-color: #735797; }
    .bg-ice      { background-color: #96D9D6; }
    .bg-dragon   { background-color: #6F35FC; }
    .bg-dark     { background-color: #705746; }
    .bg-steel    { background-color: #B7B7CE; }
    .bg-flying   { background-color: #A98FF3; }

    /* CONFIGURACIÓN Y RESET DE TOM SELECT */
    .ts-wrapper .ts-control {
        background-color: #f1f5f9 !important;
        border: none !important;
        border-radius: 1rem !important;
        min-height: 60px !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 1rem !important;
        transition: all 0.2s ease;
    }
    .ts-wrapper.focus .ts-control {
        background-color: #ffffff !important;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
    }
    .ts-wrapper .ts-control .item {
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
        font-weight: 700 !important;
        color: #1e293b !important;
        font-size: 1rem !important;
        text-transform: capitalize !important;
    }
    .ts-wrapper .ts-control .item img { width: 36px !important; height: 36px !important; }
    .ts-dropdown { border-radius: 1rem !important; margin-top: 0.5rem !important; border: none !important; overflow: hidden !important; }
    .ts-wrapper.single .ts-control::after { display: none !important; }

    @keyframes slideInUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
    .animate-slide-up { animation: slideInUp 0.3s ease-out; }
    .pixelated { image-rendering: pixelated; }

    .pokemon-log{
        width: 4.5rem;
        border-radius: 0.3rem;
    }

    #turno-indicator {
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
        background-size: 200% 100%;
        animation: scan 3s infinite linear;
    }

    @keyframes scan {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }



    @keyframes fusion-out {
        0% { transform: rotate(0deg) scale(1); filter: blur(0) brightness(1); opacity: 1; }
        100% { transform: rotate(720deg) scale(0); filter: blur(20px) brightness(5); opacity: 0; }
    }

    @keyframes fusion-in {
        0% { transform: rotate(-720deg) scale(0); filter: blur(20px) brightness(5); opacity: 0; }
        100% { transform: rotate(0deg) scale(1); filter: blur(0) brightness(1); opacity: 1; }
    }

    .animate-fusion-out {
        animation: fusion-out 0.3s cubic-bezier(0.7, 0, 0.3, 1) forwards;
    }

    .animate-fusion-in {
        animation: fusion-in 0.2s cubic-bezier(0.7, 0, 0.3, 1) forwards;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .animacion-pista {
        animation: slideDown 0.4s ease-out forwards;
    }

    @keyframes shimmer {
        0% {
            transform: translateX(-150%) skewX(-45deg);
        }
        100% {
            transform: translateX(150%) skewX(-45deg);
        }
    }

    .shimmer-card {
        position: relative;
        overflow: hidden; /* Importante para que el brillo no se salga del recuadro */
    }

    .shimmer-card::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* El gradiente a 45 grados */
        background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent
        );
        /* Ejecuta la animación */
        animation: shimmer 5s infinite;
    }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-8px); }
      50% { transform: translateX(8px); }
      75% { transform: translateX(-4px); }
    }

    .shake-error {
      animation: shake 0.4s ease-in-out;
      /* Opcional: un tono rojizo sutil para reforzar el error */
      border-color: #ef4444 !important; 
    }

    @keyframes success-pulse {
        0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 163, 255, 0.4); }
        50% { transform: scale(1.03); box-shadow: 0 0 20px 10px rgba(0, 163, 255, 0); }
        100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 163, 255, 0); }
    }

    .pista-acertada {
        animation: success-pulse 0.6s ease-out;
        border-color: #22c55e !important; /* Cambia a verde esmeralda */
        background-color: rgba(34, 197, 94, 0.2) !important; /* Fondo verde traslúcido */
    }

    .ease-elastic {
        transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }

    @keyframes heartFloat {
        0% {
            transform: translateY(0) scale(1) rotate(0deg);
            opacity: 1;
        }
        100% {
            transform: translateY(-100px) scale(1.5) rotate(20deg);
            opacity: 0;
        }
    }

    .heart-particle {
        position: absolute;
        pointer-events: none;
        color: white;
        animation: heartFloat 1s ease-out forwards;
        z-index: 50;
    }