*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{min-height:100vh;display:flex;flex-direction:column;background-color:#1e0033;background-image:url(/images/bg.jpg);background-size:cover;background-repeat:no-repeat;font-family:Rajdhani,sans-serif;color:#fff;padding:0}
.content-wrapper{flex:1;display:flex;flex-direction:column}
.top-bar{display:flex;justify-content:space-between;align-items:center;background-color:#000000d9;padding:10px 30px;color:gold}
.top-bar .top-left a,.top-bar .top-right a{color:gold;text-decoration:none;font-weight:700;margin-left:12px;transition:color .3s}
.top-bar a:hover{color:#fc0}
.top-right{display:flex;gap:12px}
.main-menu{display:flex;justify-content:space-between;background-color:#000000e6;padding:12px 30px;font-size:12px;text-align:center;text-transform:uppercase;margin-bottom:40px}
.main-menu ul{display:flex;gap:25px;list-style:none}
.main-menu a{color:gold;text-decoration:none;font-weight:700;display:block;line-height:1.2}
.main-menu a:hover{color:#fc0}
.main-menu span{font-size:16px;color:#fff;display:block;font-weight:400}
.main-menu li a{transition:all .3s ease}
.main-menu li:hover a{color:#7e00ff;transform:scale(1.05)}
.main-menu li:hover span{color:#7e00ff}
.top-left a{color:gold;font-weight:700;text-decoration:none;transition:color .3s ease,transform .3s ease}
.top-left a:hover{color:#7e00ff;transform:scale(1.05)}
.news-area{max-width:800px;margin:0 auto;background-color:#000000bf;padding:30px;border-radius:12px;flex:1}
.news-area h2{text-align:center;color:gold;font-size:28px;margin-bottom:30px;display:flex;align-items:center;justify-content:center;gap:10px}
.ranking-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.ranking-list li{display:flex;align-items:center;gap:15px;background-color:#ffffff0d;padding:10px 20px;border-radius:6px;font-size:16px}
.ranking-list li:hover{background-color:#ffffff14}
.ranking-index{color:gold;font-weight:700;width:30px;text-align:right}
.ranking-list img{width:22px;height:auto}
.ranking-name{color:#fff;font-weight:700;flex:1}
.ranking-level{color:#0cf;font-weight:700}
.pagination-wrapper{margin-top:30px;display:flex;justify-content:center}
.pagination,.pagination li{list-style:none;display:inline-block;margin:0 5px}
.pagination a,.pagination span{padding:8px 16px;background:#3e007f;color:#fff;border-radius:6px;font-weight:700;text-decoration:none;transition:background .3s}
.pagination a:hover{background:#7e00ff}
.pagination .active span{background:#7e00ff;color:#fff}
.site-footer{background-color:#000000e6;padding:20px 30px;color:gold;font-size:14px;margin-top:auto;border-top:1px solid rgba(255,255,255,.1)}
.footer-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
.footer-left p{margin:0;font-weight:700}
.footer-right{display:flex;gap:15px}
.footer-right a{color:gold;font-size:18px;text-decoration:none;transition:color .3s ease,transform .3s ease}
.footer-right a:hover{color:#fc0;transform:scale(1.15)}
@media (max-width:768px){
.top-bar,.main-menu{flex-direction:column;text-align:center}
.top-bar a{margin:8px 0}
.main-menu ul{flex-direction:column;gap:12px}
.ranking-list li{flex-direction:column;align-items:flex-start}
.ranking-name,.ranking-level{width:100%}}
@media (max-width:600px){
.footer-content{flex-direction:column;text-align:center;gap:12px}}