/* Rocket Games Video System v2.0 */

.rgs-video-card{
    position:relative;
    width:100%;
    max-width:520px;
    margin:30px auto;
    cursor:pointer;
    overflow:hidden;
    border-radius:18px;
    background:#000;
    box-shadow:0 14px 35px rgba(0,0,0,.18);
    transition:.25s;
}

.rgs-video-card:hover{
    transform:translateY(-3px);
    box-shadow:0 22px 45px rgba(157,44,255,.28);
}

.rgs-video-card::before{
    content:"";
    display:block;
    background-image:var(--rgs-image);
    background-size:cover;
    background-position:center;
    aspect-ratio:16/9;
}

.rgs-video-short{
    max-width:520px;
}

.rgs-video-wide{
    max-width:760px;
}

/* SVG PLAY */

.rgs-video-play{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:82px;
    height:82px;
    border-radius:50%;
    background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(245,230,255,.86));
    box-shadow:
        0 0 24px rgba(157,44,255,.55),
        0 10px 30px rgba(0,0,0,.25);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.25s;
}

.rgs-video-card:hover .rgs-video-play{
    transform:translate(-50%,-50%) scale(1.08);
}

.rgs-video-play svg{
    width:34px;
    height:34px;
    margin-left:5px;
    fill:url(#rgs-play-gradient);
}

/* overlay */

.rgs-video-overlay{
    position:fixed;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgba(12,9,18,.84);
    z-index:2147483647;
    padding:95px 20px 30px;

    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .25s ease, visibility .25s ease;
}

.rgs-video-overlay.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

/* window */

.rgs-video-window{
    position:relative;
    overflow:hidden;
    border-radius:20px;
    background:#000;
    border:3px solid #9d2cff;
    isolation:isolate;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.18),
        0 0 35px rgba(157,44,255,.45),
        0 30px 80px rgba(0,0,0,.65);

    transform:scale(.92) translateY(18px);
    opacity:0;
    transition:transform .28s ease, opacity .28s ease;
}

.rgs-video-overlay.is-open .rgs-video-window{
    transform:scale(1) translateY(0);
    opacity:1;
}

.rgs-video-window.is-short{
    width:min(82vw,360px);
    aspect-ratio:9/16;
}

.rgs-video-window.is-wide{
    width:min(92vw,920px);
    aspect-ratio:16/9;
}

.rgs-video-window video,
.rgs-video-window iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    background:#000;
    display:block;
    object-fit:contain;
}

/* buttons */

.rgs-video-close{

    position:absolute;
    top:12px;
    right:12px;

    width:44px;
    height:44px;

    min-width:44px;
    min-height:44px;

    max-width:44px;
    max-height:44px;

    padding:0;
    margin:0;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;
    border:2px solid rgba(255,255,255,.92);

    background:linear-gradient(135deg,#7b00ff,#c000ff);

    color:#fff;
    font-size:28px;
    line-height:1;

    cursor:pointer;
    z-index:100;

    box-shadow:0 0 18px rgba(192,0,255,.55);

    appearance:none;
    -webkit-appearance:none;
}

.rgs-video-close:hover{
    transform:scale(1.08);
}

body.rgs-video-lock{
    overflow:hidden;
}

/* mobile */

@media(max-width:768px){

    .rgs-video-card{
        max-width:100%;
    }

    .rgs-video-play{
        width:64px;
        height:64px;
    }

    .rgs-video-play svg{
        width:28px;
        height:28px;
    }

    .rgs-video-window.is-short{
        width:84vw;
        max-height:82vh;
    }

    .rgs-video-window.is-wide{
        width:96vw;
    }

    .rgs-video-fullscreen{
        right:56px;
    }
}
.rgs-video-card::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);

    width:78px;
    height:78px;
    border-radius:50%;

    background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(245,230,255,.88));

    box-shadow:
        0 0 26px rgba(157,44,255,.55),
        0 10px 30px rgba(0,0,0,.28);

    z-index:5;
}

.rgs-video-card::before{
    z-index:1;
}

.rgs-video-card .rgs-play-icon{
    display:none;
}

.rgs-video-card::marker{
    display:none;
}

.rgs-video-card::after{
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='48' fill='rgba(255,255,255,0.92)'/%3E%3Cpath d='M39 28 L74 50 L39 72 Z' fill='%23E53935'/%3E%3C/svg%3E");
    background-size:100% 100%;
    background-repeat:no-repeat;
    background-position:center;
}

@media(max-width:768px){
    .rgs-video-card::after{
        width:62px;
        height:62px;
    }
}