@media (min-width: 768px) {
    #headerButtons {
        display: flex !important;
    }
    
    .md\\:hidden.flex.items-center.gap-2 {
        display: none !important;
    }
}
/* Tablets - ajustes intermediários */
@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}
/* Desktop */
@media (min-width: 768px) {
    #action-buttons-container {
        flex-direction: row !important;
    }
    
    #action-buttons-container > button {
        width: 220px !important;
        flex-shrink: 0 !important;
        min-width: 220px !important;
        max-width: 220px !important;
    }
    
    /* Mostrar texto dos botões de compartilhamento no desktop */
    .share-button-text {
        display: inline !important;
    }
}

/* Garantir que apareçam apenas em telas grandes (desktop) */
@media (min-width: 1024px) {
    #decorative-circle-yellow,
    #decorative-circle-red,
    #decorative-circle-blue,
    #decorative-circle-green,
    #decorative-circle-purple,
    #decorative-circle-orange {
        display: block !important;
        visibility: visible !important;
        /* Mantém a opacidade original (opacity-30 = 30%) definida nas classes */
        /* Garante que as animações funcionem */
        animation-play-state: running !important;
    }
}

/* ========================================
   CORRIGIR CANTOS ARREDONDADOS DA ANIMAÇÃO SHIMMER NO DESKTOP
   ======================================== */
@media (min-width: 768px) {
    /* Aplicar border-radius na div animate-shimmer para herdar os cantos arredondados do elemento pai */
    .rounded-xl .absolute.inset-0.animate-shimmer,
    [class*="rounded-xl"] .absolute.inset-0.animate-shimmer,
    .rounded-lg .absolute.inset-0.animate-shimmer,
    [class*="rounded-lg"] .absolute.inset-0.animate-shimmer {
        border-radius: inherit !important;
    }
    
    /* Se o elemento pai tiver rounded-xl (0.75rem = 12px) */
    .rounded-xl .absolute.inset-0.animate-shimmer,
    [class*="rounded-xl"] .absolute.inset-0.animate-shimmer {
        border-radius: 0.75rem !important; /* rounded-xl = 12px */
    }
    
    /* Se o elemento pai tiver rounded-lg (0.5rem = 8px) */
    .rounded-lg .absolute.inset-0.animate-shimmer,
    [class*="rounded-lg"] .absolute.inset-0.animate-shimmer {
        border-radius: 0.5rem !important; /* rounded-lg = 8px */
    }
}

/* ========================================
   OTIMIZAÇÃO DE IMAGENS RESPONSIVAS - DESKTOP
   Ajustes para diferentes resoluções: 768w, 1024w, 1920w
   ======================================== */

/* Tablet (768px - 1023px) - usar plataforma_new_768w.webp (768x432px) */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Picture element da plataforma desktop */
    .relative.overflow-hidden.rounded-xl.hidden.md\\:block picture {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    /* Imagem plataforma_new_768w.webp */
    .relative.overflow-hidden.rounded-xl.hidden.md\\:block picture img,
    .relative.overflow-hidden.rounded-xl.hidden.md\\:block img[src*="plataforma_new"] {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        /* Renderização otimizada para tablet */
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Desktop padrão (1024px - 1919px) - usar plataforma_new.webp (1200x675px) */
@media (min-width: 1024px) and (max-width: 1919px) {
    /* Picture element da plataforma desktop */
    .relative.overflow-hidden.rounded-xl.hidden.md\\:block picture {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    /* Imagem plataforma_new.webp */
    .relative.overflow-hidden.rounded-xl.hidden.md\\:block picture img,
    .relative.overflow-hidden.rounded-xl.hidden.md\\:block img[src*="plataforma_new"] {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        /* Renderização otimizada para desktop */
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Desktop Retina (1920px+) - usar plataforma_new_2x.webp (1920x1080px) */
@media (min-width: 1920px) {
    /* Picture element da plataforma desktop */
    .relative.overflow-hidden.rounded-xl.hidden.md\\:block picture {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    /* Imagem plataforma_new_2x.webp */
    .relative.overflow-hidden.rounded-xl.hidden.md\\:block picture img,
    .relative.overflow-hidden.rounded-xl.hidden.md\\:block img[src*="plataforma_new"] {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        /* Renderização otimizada para Retina */
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ========================================
   OTIMIZAÇÃO DE LOGOS COM SRCSET
   ======================================== */

/* Logo do header - otimização para diferentes densidades */
@media (min-width: 768px) {
    /* Logo com srcset - garantir renderização nítida */
    header img[srcset*="logo_full"],
    header img[src*="logo_full"] {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Logo do footer - otimização para diferentes densidades */
footer img[srcset*="pokerfilogo"],
footer img[src*="pokerfilogo"] {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}