/* ========================================================
   RESET & GLOBAL
======================================================== */
* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #f1f1f1;
    line-height:1.5;
    background: url('../images/hima.png') no-repeat center center fixed;
    background-size: cover;
    text-align: center; /* خلي كل النصوص في المنتصف */
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: -1;
}

/* ========================================================
   MAIN MENU / NAVIGATION
======================================================== */
#main_menu {
    background:#111;
    padding:10px 0;
    border-radius:8px;
    margin-bottom:20px;
    display: flex;
    justify-content: center; /* مركز الـ menu */
    flex-wrap: wrap;
}

#navigation {
    list-style:none;
    display: flex;
    justify-content: center; /* مركز العناصر */
    gap:10px;
    padding:0;
    margin:0;
}

#navigation a {
    text-decoration:none;
}

#navigation a li {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:90px;
    height:40px;
    background:#222;
    border-radius:5px;
    color:#fff;
    font-weight:bold;
    cursor:pointer;
    transition:0.3s;
    text-align:center;
}

#navigation a li:hover {
    background: linear-gradient(135deg,#d4af37,#8b6508);
}

/* ========================================================
   FULL PAGE CONTAINERS
======================================================== */
#full_page { 
    width:100%;
    max-width:1000px; 
    margin:auto;
    padding:20px;
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    justify-content:center; /* مركز الـ containers */
}

#leftcontainer { flex:2; min-width:280px; }
#rightcontainer { flex:1; min-width:220px; }

/* ========================================================
   LEFTBOX & HOME PAGE SPECIFIC
======================================================== */
.leftbox {
    max-width:800px;
    margin:50px auto 40px auto;
    background: rgba(0,0,0,0.7);
    border: 2px solid #d4af37;
    border-radius: 15px;
    padding: 25px;
    text-align:center;
    box-shadow: 0 0 25px rgba(212,175,55,.7);
}

.leftheadtitle{
    font-size:32px;
    color:#ffd700;
    text-shadow: 0 0 15px rgba(212,175,55,.7);
    margin-bottom:20px;
    font-weight:bold;
}

/* SERVER STATS CIRCLES */
.server-stats-circles {
    display:flex;
    justify-content:center; /* مركز الدوائر */
    gap:25px;
    margin:25px 0;
    flex-wrap:wrap;
}
.stat-circle {
    background: rgba(0,0,0,.6);
    border: 2px solid #d4af37;
    border-radius: 50%;
    width:110px;
    height:110px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-weight:bold;
    box-shadow: 0 0 15px rgba(212,175,55,.6);
    transition: transform 0.3s, box-shadow 0.3s;
}
.stat-circle:hover{
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(212,175,55,.8);
}
.stat-title { font-size:13px; margin-bottom:5px;text-transform:uppercase;color:#ffd700;text-align:center; }
.stat-number { font-size:24px;font-weight:bold; }

/

.fb-btn {background:#1877f2;}
.vote-btn {background:#ff9800;}
.discord-btn {background:#5865F2;}
.home-links a:hover {transform:scale(1.05);}
/* ========================================================
   MAIN MENU / NAVIGATION
======================================================== */
#main_menu {
    background:#111;
    padding:10px 0;
    border-radius:8px;
    margin-bottom:20px;
}
#navigation {
    list-style:none;
    display:flex;
    justify-content:center;
    gap:10px;
    padding:0;
    margin:0;
}
#navigation a li {
    width:100px;
    height:40px;
    background:#222;
    border-radius:5px;
    color:#fff;
    font-weight:bold;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition: 0.3s;
}
#navigation a li:hover {
    background: linear-gradient(135deg,#d4af37,#8b6508);
    transform: scale(1.05);
}


/* RIGHT BOXES */
.rightbox {
    background: rgba(0,0,0,.65);
    border:1px solid rgba(212,175,55,.3);
    border-radius:12px;
    margin-bottom:20px;
    overflow:hidden;
    box-shadow: 0 0 10px rgba(0,0,0,.5);
}
.rightboxhead {
    background: linear-gradient(135deg,#d4af37,#8b6508);
    padding:10px;
    border-radius:12px 12px 0 0;
    color:#000;
    font-weight:bold;
    text-align:center;
}
.rightheadtitle { font-size:16px; }
.righttext { padding:15px; font-size:14px; text-align:center; }
.rightboxfooter { height:10px; background:#111; border-radius:0 0 12px 12px; }


/* ========================================================
   RESPONSIVE
======================================================== */
@media (max-width:768px){
    #full_page { flex-direction:column; padding:10px; align-items:center; }
    #navigation a li { width:70px; height:35px; font-size:12px; line-height:35px; margin:3px; }
    .server-stats-circles { flex-direction:column; align-items:center; gap:15px; }
    .stat-circle { width:90px; height:90px; }
    .stat-number { font-size:20px; }
    .stat-title { font-size:12px; }
    .home-links a { width:90%; max-width:250px; padding:10px 0; font-size:16px; margin:5px auto; }
}