/* =========================
BODY
========================= */
body{
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    background:linear-gradient(
        135deg,
        #633cd6,
        #f71138,
        #16a9f2,
        rgba(80,140,255,0.35) 75%,
        rgba(40,100,255,0.55) 100%
    );

    margin:0;
    padding:0;
    line-height:1.6;
    color:#333;
}

/* =========================
HEADER
========================= */
header{
    background:linear-gradient(
        135deg,
        #6f28d9,
        #8b3dff,
        #00ff88
    );

    padding:20px;
    text-align:center;
    color:white;

    border-bottom:2px solid rgba(255,255,255,0.4);

    box-shadow:
    0 4px 10px rgba(0,0,0,0.25),
    0 0 15px rgba(0,255,120,0.35);
}

header h2{
    margin:0;
    font-size:2em;

    text-shadow:
    0 2px 6px rgba(0,0,0,0.4),
    0 0 10px rgba(0,255,120,0.5);
}

/* =========================
CONTENT
========================= */
.content{
    display:flex;
    flex-wrap:wrap;
    gap:15px;

    max-width:840px;
    margin:10px auto;
    padding:10px;

    background:#ffffff;
    border-radius:8px;
}

/* =========================
VIDEO
========================= */
.video-container{
    flex:1 1 520px;

    background:#ffffff;
    padding:10px;

    border-radius:6px;

    box-shadow:0 3px 10px rgba(0,0,0,0.15);
}

.video-wrapper{
    position:relative;
    width:100%;
    padding-bottom:56.25%; /* 16:9 */

    border:2px solid rgba(204,255,0,0.6);

    box-shadow:
    0 0 10px rgba(204,255,0,0.5),
    0 0 20px rgba(204,255,0,0.4),
    0 0 40px rgba(204,255,0,0.2);
}

.video-wrapper iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

/* =========================
CHAT
========================= */
.chat-box{
    flex:1 1 260px;

    background:#ffffff;
    padding:10px;

    border-radius:6px;

    box-shadow:0 3px 10px rgba(0,0,0,0.15);
}

.chat-box h4{
    margin-top:0;
    text-align:center;
}

/* =========================
INPUT
========================= */
.input-field{
    width:100%;
    padding:10px;
    margin-bottom:8px;

    border-radius:3px;
    border:1px solid #ddd;

    font-size:1em;
}

/* =========================
BUTTON
========================= */
.primary-btn{
    width:100%;
    padding:10px;

    background:linear-gradient(45deg,#b7ff00,#e6ff66);

    color:black;
    border:none;
    border-radius:6px;

    font-weight:bold;
    cursor:pointer;

    box-shadow:0 0 10px rgba(204,255,0,0.6);

    transition:all .25s ease;
}

.primary-btn:hover{
    transform:scale(1.05);
    box-shadow:
    0 0 15px rgba(204,255,0,0.9),
    0 0 30px rgba(204,255,0,0.6);
}

/* =========================
CHAT MESSAGE
========================= */
.messages{
    margin-top:10px;
    max-height:150px;
    overflow-y:auto;

    border:1px solid #ddd;
    padding:8px;

    background:#ffffff;
    border-radius:5px;
}

.message{
    background:#f5f5f5;
    padding:6px;
    border-radius:4px;
    margin-bottom:5px;
}

/* =========================
ADS
========================= */
.ad-container{
    margin:20px auto;
    text-align:center;

    padding:10px;
    background:#ffffff;

    border:1px solid #ddd;
    border-radius:6px;

    box-shadow:0 2px 6px rgba(0,0,0,0.12);
}

.ad-container.fixed{
    position:fixed;
    bottom:10px;
    right:10px;
    width:300px;
    z-index:1000;
}

/* =========================
RESPONSIVE
========================= */
*{
    box-sizing:border-box;
}

img,iframe{
    max-width:100%;
}

@media (max-width:1024px){

.content{
max-width:95%;
}

}

@media (max-width:768px){

.content{
flex-direction:column;
}

.video-container,
.chat-box{
width:100%;
}

}

/* =========================
FOOTER
========================= */
footer{
    position:relative;
    text-align:center;
    padding:13px;

    background:linear-gradient(
        135deg,
        #fc0851 25%,
        #0abef5 50%,
        #fc0851 75%
    );

    color:white;
    width:100%;

    border-top:1px solid rgba(255,255,255,0.4);

    box-shadow:0 -3px 12px rgba(0,0,0,0.25);

    text-shadow:0 1px 3px rgba(0,0,0,0.3);

    overflow:hidden;
}

footer::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.35),
        transparent
    );

    animation:footerShine 6s infinite;
}

@keyframes footerShine{
    0%{left:-100%;}
    100%{left:100%;}
}