/* Reset local: como no usamos el "preflight" de Tailwind (para no
           chocar con el theme de WordPress), fijamos box-sizing solo dentro
           del contenedor del plugin. */
        #cdb-app, #cdb-app *, #cdb-app *::before, #cdb-app *::after {
            box-sizing: border-box;
        }

        #cdb-app {
            background: radial-gradient(circle at top, #ffffff 0%, #ffffff 100%);
            -webkit-tap-highlight-color: transparent;
            color: #f1f5f9;
            border-radius: 12px;
            overflow: hidden;
        }
        
        /* Estilos de bordes de cartas Clash Royale */
        .card-common { border-color: #64748b; box-shadow: 0 0 8px rgba(100, 116, 139, 0.15); }
        .card-especial { border-color: #f97316; box-shadow: 0 0 8px rgba(249, 115, 22, 0.15); }
        .card-épica { border-color: #a855f7; box-shadow: 0 0 8px rgba(168, 85, 247, 0.15); }
        .card-legendaria { border-color: #e11d48; box-shadow: 0 0 10px rgba(225, 29, 72, 0.2); }
        .card-campeón { 
            border-color: #fbbf24; 
            box-shadow: 0 0 14px rgba(251, 191, 36, 0.35); 
            background: linear-gradient(135deg, rgba(69, 26, 3, 0.7) 0%, rgba(9, 9, 11, 0.95) 100%);
        }

        /* Marcos Especiales de Ranuras de Evolución Activas */
        .slot-evo-active {
            border-color: #d946ef !important;
            box-shadow: 0 0 18px rgba(217, 70, 239, 0.5), inset 0 0 8px rgba(217, 70, 239, 0.3);
            background: linear-gradient(135deg, #2e1065 0%, #090514 100%) !important;
            animation: evoGlow 2.5s infinite alternate;
        }

        /* Ranura enfocada / seleccionada para asignación */
        .slot-focused {
            ring: 4px solid #3b82f6 !important;
            transform: scale(1.03);
            z-index: 40;
        }

        /* Ranura activa para intercambio o movimiento */
        .slot-swapping {
            animation: swapPulse 1.2s infinite alternate;
            border-color: #f59e0b !important;
            ring: 4px dashed #f59e0b !important;
            z-index: 45;
        }

        @keyframes evoGlow {
            0% { box-shadow: 0 0 10px rgba(217, 70, 239, 0.25), inset 0 0 5px rgba(217, 70, 239, 0.15); }
            100% { box-shadow: 0 0 22px rgba(217, 70, 239, 0.7), inset 0 0 12px rgba(217, 70, 239, 0.4); }
        }
        @keyframes swapPulse {
            0% { box-shadow: 0 0 6px rgba(245, 158, 11, 0.3); transform: scale(1.01); }
            100% { box-shadow: 0 0 18px rgba(245, 158, 11, 0.8); transform: scale(1.04); }
        }

        .scroll-custom::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        .scroll-custom::-webkit-scrollbar-track {
            background: #020617;
        }
        .scroll-custom::-webkit-scrollbar-thumb {
            background: #1e293b;
            border-radius: 9999px;
        }
        .scroll-custom::-webkit-scrollbar-thumb:hover {
            background: #334155;
        }

        .card-shine {
            position: relative;
            overflow: hidden;
        }
        .card-shine::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                to bottom right,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.05) 40%,
                rgba(255, 255, 255, 0.2) 50%,
                rgba(255, 255, 255, 0.05) 60%,
                rgba(255, 255, 255, 0) 100%
            );
            transform: rotate(30deg);
            transition: transform 0.6s ease;
            pointer-events: none;
            opacity: 0;
        }
        .card-shine:hover::after {
            opacity: 1;
            transform: rotate(30deg) translate(25%, 25%);
        }