/* ==========================================
   CANVAS DE FONDO ANIMADO GLOBAL
   ========================================== */
#bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; /* Se mantiene detrás de las tarjetas y controles */
    pointer-events: none;
    background-color: var(--bg-dark);
}

/* Oculta el cursor nativo del sistema */
        body, a, button, input, .btn-control, .ability-card {
            cursor: none !important;
        }

        /* Canvas de Fondo 3D */
        #warp-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -1;
            pointer-events: none;
            background-color: #050505;
        }

        /* Cursor flotante con la imagen del personaje */
        .custom-cursor {
            position: fixed;
            top: 0;
            left: 0;
            width: 45px;
            height: 45px;
            pointer-events: none;
            z-index: 9999;
            transform: translate(-50%, -50%);
            transition: transform 0.08s ease-out;
        }

        .custom-cursor img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            filter: drop-shadow(0 0 10px rgba(255, 0, 51, 0.9));
        }