*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Segoe UI',Tahoma,sans-serif;background:#0d0d1f;color:#e6e6f0;line-height:1.7;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.container{max-width:1200px;margin:0 auto;padding:0 16px;}

/* Header */
header{background:#13132a;border-bottom:2px solid #ff2e63;position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(255,46,99,0.2);}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;max-width:1200px;margin:0 auto;flex-wrap:wrap;gap:10px;}
.logo{font-size:28px;font-weight:900;color:#ff2e63;letter-spacing:1px;text-shadow:0 0 10px rgba(255,46,99,0.5);}
nav ul{display:flex;list-style:none;gap:6px;flex-wrap:wrap;}
nav ul li a{padding:8px 14px;border-radius:6px;font-weight:600;font-size:14px;transition:.3s;color:#cfcfe6;}
nav ul li a:hover,nav ul li a.active{background:#ff2e63;color:#fff;}
.auth-btns{display:flex;gap:8px;}
.btn{padding:8px 18px;border-radius:6px;font-weight:700;font-size:14px;transition:.3s;cursor:pointer;border:none;}
.btn-login{background:transparent;color:#ff2e63;border:2px solid #ff2e63;}
.btn-login:hover{background:#ff2e63;color:#fff;}
.btn-reg{background:linear-gradient(135deg,#ff2e63,#ff7e3e);color:#fff;}
.btn-reg:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(255,46,99,0.5);}

/* Hero */
.hero{position:relative;min-height:420px;background:linear-gradient(135deg,#1a1a3e 0%,#0d0d1f 100%);display:flex;align-items:center;overflow:hidden;}
.hero::before{content:"";position:absolute;inset:0;background:url('picture/xuupts7.jpg') center/cover no-repeat;opacity:0.25;}
.hero-content{position:relative;z-index:2;padding:60px 16px;max-width:1200px;margin:0 auto;width:100%;}
.hero h1{font-size:42px;color:#fff;margin-bottom:16px;line-height:1.2;text-shadow:0 2px 12px rgba(0,0,0,0.6);}
.hero h1 span{color:#ff2e63;}
.hero p{font-size:17px;color:#d8d8f0;max-width:680px;margin-bottom:24px;}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;}

/* Promo Banner */
.promo-bar{background:linear-gradient(90deg,#ff2e63,#ff7e3e);padding:14px;text-align:center;color:#fff;font-weight:700;font-size:15px;letter-spacing:0.5px;}

/* Sections */
section{padding:50px 0;}
.sec-title{font-size:28px;color:#ff2e63;margin-bottom:8px;border-left:5px solid #ff2e63;padding-left:14px;}
.sec-sub{color:#a0a0c0;margin-bottom:28px;font-size:15px;padding-left:19px;}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;}
.stat-box{background:#1a1a3e;padding:24px;border-radius:10px;text-align:center;border:1px solid #2a2a55;transition:.3s;}
.stat-box:hover{transform:translateY(-4px);border-color:#ff2e63;}
.stat-num{font-size:32px;color:#ff2e63;font-weight:900;}
.stat-label{font-size:14px;color:#b8b8d4;margin-top:6px;}

/* Game Grid */
.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;}
.game-card{background:#1a1a3e;border-radius:10px;overflow:hidden;border:1px solid #2a2a55;transition:.3s;position:relative;}
.game-card:hover{transform:translateY(-4px);border-color:#ff2e63;box-shadow:0 6px 20px rgba(255,46,99,0.3);}
.game-card img{width:100%;height:auto;}
.game-card .info{padding:10px;}
.game-card h3{font-size:14px;color:#fff;margin-bottom:4px;}
.game-card .tag{font-size:11px;color:#ff7e3e;}

/* Featured banners */
.feat-banners{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;}
.feat-card{background:#1a1a3e;border-radius:12px;overflow:hidden;border:1px solid #2a2a55;}
.feat-card img{width:100%;height:auto;}
.feat-card .body{padding:16px;}
.feat-card h3{color:#ff2e63;font-size:18px;margin-bottom:8px;}
.feat-card p{color:#c8c8e0;font-size:14px;}

/* Article */
.article-block{background:#13132a;padding:30px;border-radius:12px;border:1px solid #2a2a55;}
.article-block h2{color:#ff2e63;margin-bottom:14px;font-size:24px;}
.article-block h3{color:#ff7e3e;margin:20px 0 10px;font-size:19px;}
.article-block p{margin-bottom:14px;color:#d0d0e8;font-size:15px;}
.article-block ul{margin:10px 0 16px 20px;color:#d0d0e8;}
.article-block li{margin-bottom:6px;}
.article-img{float:right;margin:0 0 14px 18px;width:300px;max-width:100%;border-radius:10px;}

/* Quote */
.user-quote{background:linear-gradient(135deg,#2a1a3e,#1a1a3e);border-left:4px solid #ff2e63;padding:18px 22px;margin:22px 0;border-radius:8px;font-style:italic;color:#e0e0f0;}
.user-quote strong{display:block;color:#ff7e3e;font-style:normal;margin-bottom:6px;font-size:14px;}

/* FAQ */
.faq-item{background:#1a1a3e;margin-bottom:12px;padding:18px 20px;border-radius:8px;border-left:4px solid #ff2e63;}
.faq-item h4{color:#ff2e63;font-size:17px;margin-bottom:8px;}
.faq-item p{color:#d0d0e8;font-size:15px;}
.faq-item ul{margin:8px 0 0 22px;color:#c8c8e0;}

/* Compare */
.compare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;}
.compare-col{background:#1a1a3e;padding:20px;border-radius:10px;border:1px solid #2a2a55;}
.compare-col h4{color:#ff2e63;margin-bottom:10px;font-size:17px;}
.compare-col p{color:#c8c8e0;font-size:14px;}

/* Footer */
footer{background:#0a0a18;padding:40px 16px 20px;border-top:2px solid #ff2e63;margin-top:40px;}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;max-width:1200px;margin:0 auto 24px;}
.foot-col h4{color:#ff2e63;margin-bottom:12px;font-size:16px;}
.foot-col p,.foot-col a{color:#a0a0c0;font-size:14px;display:block;margin-bottom:6px;}
.foot-col a:hover{color:#ff2e63;}
.copyright{text-align:center;color:#777;border-top:1px solid #2a2a55;padding-top:18px;font-size:13px;}

@media(max-width:768px){
  .hero h1{font-size:28px;}
  .hero p{font-size:15px;}
  .sec-title{font-size:22px;}
  .article-img{float:none;width:100%;margin:10px 0;}
  nav ul{order:3;width:100%;justify-content:center;}
  .auth-btns{order:2;}
}