*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html,body{
    width:100%;
    min-height:100%;
}


body{

    font-family:
    Tahoma,Arial,sans-serif;

    color:#fff;

    background:
    linear-gradient(
        135deg,
        #050510,
        #11153a,
        #250044,
        #061b35
    );

    background-size:400% 400%;

    animation:
    bgMove 18s ease infinite;

    display:flex;

    flex-direction:column;

    overflow-x:hidden;

}



@keyframes bgMove{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }

}



/* خلفية متحركة */

body:before{

    content:"";

    position:fixed;

    inset:0;

    z-index:-1;

    pointer-events:none;


    background:


    radial-gradient(
        circle at 20% 20%,
        #00ffff55,
        transparent 35%
    ),


    radial-gradient(
        circle at 80% 30%,
        #ff00cc55,
        transparent 35%
    ),


    radial-gradient(
        circle at 50% 90%,
        #0066ff55,
        transparent 40%
    );


    animation:

    backgroundMove 12s infinite alternate;

}



@keyframes backgroundMove{


    0%{

        transform:
        translate(0,0)
        scale(1);

    }


    50%{

        transform:
        translate(-40px,30px)
        scale(1.1);

    }


    100%{

        transform:
        translate(40px,-20px)
        scale(1);

    }

}





a{

    text-decoration:none;

    color:inherit;

}



img{

    max-width:100%;

    display:block;

}





/* ================= HEADER ================= */


.topbar{


    position:sticky;

    top:0;

    z-index:999;


    height:75px;


    padding:0 30px;


    display:flex;

    align-items:center;

    justify-content:space-between;



    background:

    rgba(0,0,0,.45);



    backdrop-filter:

    blur(20px);



    border-bottom:

    1px solid rgba(255,255,255,.2);



    box-shadow:

    0 10px 40px #000;


}





.logo a{


    font-size:26px;


    font-weight:bold;


    color:#00ffff;


    text-shadow:


    0 0 15px #00ffff;


}





.search-form{


    display:flex;

    gap:10px;


}



.search-form input{


    width:260px;


    height:45px;


    border:none;


    outline:none;


    border-radius:30px;


    padding:0 20px;


    background:

    rgba(255,255,255,.9);


    color:#111;


    font-size:15px;


}





.search-form button{


    height:45px;


    padding:0 30px;


    border:none;


    border-radius:30px;


    cursor:pointer;


    font-weight:bold;


    color:#000;


    background:


    linear-gradient(
        135deg,
        #00ffff,
        #0066ff
    );


    transition:.3s;


    box-shadow:

    0 0 20px #00ffff88;


}



.search-form button:hover{


    transform:

    scale(1.08);


    box-shadow:

    0 0 35px #00ffff;


}





/* ================= MAIN ================= */


main{


    flex:1;


    width:100%;


    max-width:1400px;


    margin:auto;


    padding:25px;


}





/* ================= HERO ================= */


.hero{


    padding:50px 20px;


    text-align:center;


    border-radius:35px;


    background:


    rgba(255,255,255,.08);



    backdrop-filter:

    blur(20px);



    border:

    1px solid #ffffff22;



    box-shadow:


    0 20px 60px #000;



    margin-bottom:40px;


}



.hero h1{


    font-size:42px;


    text-shadow:


    0 0 20px #00ffff;


}



.hero p{


    font-size:20px;


    color:#ddd;


    margin-top:10px;


}





/* ================= CATEGORIES ================= */


.categories,
.games-section{

    margin-bottom:45px;

}



.categories h2,
.games-section h2{

    font-size:28px;

    color:#fff;

    text-align:center;

    margin-bottom:25px;


    text-shadow:

    0 0 15px #00ffff;

}





.category-list{


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(170px,1fr));


    gap:20px;


}





.category-card{


    position:relative;


    overflow:hidden;


    padding:22px;


    border-radius:25px;


    background:


    linear-gradient(
        135deg,
        rgba(0,255,255,.15),
        rgba(255,0,200,.15)
    );



    border:

    1px solid rgba(255,255,255,.2);



    backdrop-filter:

    blur(15px);



    box-shadow:

    0 15px 35px rgba(0,0,0,.5);



    display:flex;


    justify-content:space-between;


    align-items:center;



    transition:.4s;


}




.category-card:before{


    content:"";


    position:absolute;


    width:100%;


    height:100%;


    left:-100%;


    top:0;



    background:


    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.4),
        transparent
    );



    transition:.5s;


}




.category-card:hover:before{


    left:100%;


}



.category-card:hover{


    transform:

    translateY(-10px)
    scale(1.03);



    box-shadow:


    0 20px 50px #00ffff55;


}





.category-card span{


    font-size:18px;


    font-weight:bold;


}




.category-card b{


    background:


    linear-gradient(
        135deg,
        #00ffff,
        #0066ff
    );



    color:#000;


    padding:7px 15px;


    border-radius:30px;


}





/* ================= GAMES ================= */


.games-grid{


    display:grid;


    grid-template-columns:


    repeat(auto-fill,minmax(210px,1fr));


    gap:25px;


}





.game-card{


    background:


    rgba(255,255,255,.08);



    border-radius:25px;



    overflow:hidden;



    border:


    1px solid rgba(255,255,255,.2);



    backdrop-filter:


    blur(15px);



    box-shadow:


    0 20px 50px rgba(0,0,0,.5);



    transition:.4s;


}





.game-card:hover{


    transform:


    translateY(-12px);



    box-shadow:


    0 30px 70px rgba(0,255,255,.35);


}





.thumb{


    height:170px;


    overflow:hidden;


    background:


    linear-gradient(
        135deg,
        #111,
        #222
    );


}




.thumb img{


    width:100%;


    height:100%;


    object-fit:cover;


    transition:.5s;


}




.game-card:hover .thumb img{


    transform:


    scale(1.15)
    rotate(2deg);


}





.game-info{


    padding:18px;


    background:


    linear-gradient(
        180deg,
        rgba(0,0,0,.2),
        rgba(0,0,0,.6)
    );


}




.game-info h3{


    font-size:17px;


    color:#fff;



    white-space:nowrap;


    overflow:hidden;


    text-overflow:ellipsis;



    text-shadow:


    0 0 10px #00ffff;


}





.game-info p,
.game-info span{


    margin-top:10px;


    color:#aaa;


    font-size:13px;


}





/* ================= PLAYER ================= */


.game-header{


    background:


    linear-gradient(
        135deg,
        rgba(0,255,255,.15),
        rgba(255,0,200,.15)
    );



    border-radius:30px;



    padding:35px;



    text-align:center;



    backdrop-filter:


    blur(20px);



    border:


    1px solid rgba(255,255,255,.25);



    box-shadow:


    0 20px 50px #0008;


}





.game-header h1{


    font-size:35px;


    text-shadow:


    0 0 20px #00ffff;


}




.player-box{


    padding:20px;


    border-radius:30px;



    background:


    rgba(0,0,0,.45);



    backdrop-filter:


    blur(15px);



    box-shadow:


    0 20px 60px #000;


}





#flash-container{


    width:100%;


    aspect-ratio:16/9;


    min-height:300px;


    background:#000;


    border-radius:25px;


    overflow:hidden;



    box-shadow:


    0 0 40px #00ffff55;


}





ruffle-player{


    width:100%;


    height:100%;


    display:block;


}





/* ================= BUTTONS ================= */


.player-buttons a{


    background:


    linear-gradient(
        135deg,
        #00ffff,
        #0066ff
    );


    color:#000;


    padding:13px 30px;


    border-radius:30px;


    font-weight:bold;



    box-shadow:


    0 10px 30px #00ffff55;


}



.player-buttons a:hover{


    transform:


    translateY(-5px);



    box-shadow:


    0 15px 40px #00ffffaa;


}

/* ================= PLAYER ================= */

.game-header{

background:
linear-gradient(
135deg,
rgba(0,255,255,.15),
rgba(255,0,200,.15)
);

border-radius:30px;

padding:35px;

text-align:center;

backdrop-filter:blur(20px);

border:
1px solid rgba(255,255,255,.25);

box-shadow:
0 20px 50px #0008;

}


.game-header h1{

font-size:35px;

color:#fff;

text-shadow:
0 0 20px #00ffff;

}



.player-box{

padding:20px;

border-radius:30px;

background:
rgba(0,0,0,.45);

backdrop-filter:blur(15px);

box-shadow:
0 20px 60px #000;

}



#flash-container{

width:100%;

aspect-ratio:16/9;

min-height:300px;

background:#000;

border-radius:25px;

overflow:hidden;

box-shadow:
0 0 40px #00ffff55;

}


ruffle-player{

width:100%;

height:100%;

display:block;

}



/* ================= BUTTONS ================= */


.player-buttons{

display:flex;

justify-content:center;

gap:15px;

margin-top:20px;

}


.player-buttons a{

background:
linear-gradient(
135deg,
#00ffff,
#0066ff
);

color:#000;

padding:13px 30px;

border-radius:30px;

font-weight:bold;

box-shadow:
0 10px 30px #00ffff55;

transition:.3s;

}



.player-buttons a:hover{

transform:translateY(-5px);

box-shadow:
0 15px 40px #00ffffaa;

}



#fullscreen-btn{

padding:14px 30px;

border:none;

border-radius:30px;

cursor:pointer;

font-size:16px;

font-weight:bold;

background:
linear-gradient(
135deg,
#00ffff,
#0066ff
);

color:#000;

box-shadow:
0 0 30px #00ffff88;

}



/* ================= FOOTER ================= */


.footer{

margin-top:50px;

padding:30px;

text-align:center;

background:
rgba(0,0,0,.55);

backdrop-filter:blur(20px);

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

}


.footer p{

color:#aaa;

}



/* ================= TABLET ================= */


@media(max-width:900px){


.topbar{

height:auto;

padding:15px;

gap:15px;

flex-direction:column;

}



.search-form{

width:100%;

}



.search-form input{

width:100%;

}


.games-grid{

grid-template-columns:
repeat(3,1fr);

}


}



/* ================= MOBILE ================= */


@media(max-width:600px){


main{

padding:12px;

}



.topbar{

padding:12px;

}


.logo a{

font-size:22px;

}



.hero{

padding:30px 15px;

}


.hero h1{

font-size:24px;

}



.hero p{

font-size:15px;

}



.games-grid{

grid-template-columns:
repeat(2,1fr);

gap:12px;

}



.game-card{

border-radius:15px;

}



.thumb{

height:100px;

}



.game-info{

padding:10px;

}



.game-info h3{

font-size:13px;

}



.game-info span{

font-size:11px;

}



.game-header{

padding:20px 15px;

}



.game-header h1{

font-size:22px;

}



#flash-container{

aspect-ratio:4/3;

min-height:220px;

}



.player-buttons{

flex-direction:column;

}



.player-buttons a,
#fullscreen-btn{

width:100%;

text-align:center;

}



.category-list{

grid-template-columns:
repeat(2,1fr);

gap:10px;

}



.category-card{

padding:15px;

border-radius:18px;

}



.category-card span{

font-size:14px;

}


}



/* ================= SMALL MOBILE ================= */


@media(max-width:360px){


.games-grid{

grid-template-columns:
repeat(2,1fr);

gap:8px;

}


.thumb{

height:85px;

}


}

/* ================= PAGINATION ================= */

.pagination{

display:flex;

justify-content:center;

align-items:center;

gap:10px;

margin:35px 0;

flex-wrap:wrap;

}



.pagination a{

padding:12px 18px;

border-radius:20px;

background:

rgba(255,255,255,.12);

border:

1px solid rgba(255,255,255,.2);

color:#fff;

backdrop-filter:blur(10px);

transition:.3s;

}



.pagination a:hover{

background:

linear-gradient(
135deg,
#00ffff,
#0066ff
);

color:#000;

transform:translateY(-5px);

}



.pagination a.active{

background:

linear-gradient(
135deg,
#ff00cc,
#6600ff
);

color:#fff;

box-shadow:

0 0 25px #ff00cc;

}