.crt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    .scanlines {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:
            linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
            linear-gradient(
                90deg,
                rgba(255, 0, 0, 0.06),
                rgba(0, 255, 0, 0.02),
                rgba(0, 0, 255, 0.06)
            );
        background-size:
            100% 1px,
            0.75px 100%; /* Les lignes horizontales */
        pointer-events: none;
        z-index: 2;
        transform: scale(4);
    }

    canvas {
        transform: scale(4);
    }

    &::before {
        content: " ";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(18, 16, 16, 0.1);
        opacity: 0;
        z-index: 2;
        pointer-events: none;
        animation: crt-glitch 0.15s infinite;
    }
}

@keyframes crt-glitch {
    0% {
        opacity: 0.1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 0.1;
    }
}
