@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700;900&display=swap');
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Vazirmatn',sans-serif; background:linear-gradient(135deg,#0f0f1a,#1a0026); color:#e0e0e0; min-height:100vh; }

header { position:fixed; top:0; left:0; width:100%; z-index:1000; background:rgba(15,0,35,0.95); backdrop-filter:blur(12px); padding:15px 40px; display:flex; justify-content:space-between; align-items:center; border-bottom:2px solid #ff0066; box-shadow:0 5px 30px rgba(255,0,102,0.3); }
.logo { font-size:2.3rem; font-weight:900; color:#fff; text-shadow:0 0 25px #ff0066; }
.x10 { color:#ff0066; font-size:2.6rem; text-shadow:0 0 30px #ff0066, 0 0 50px #cc0055; }
nav a { color:#ccc; text-decoration:none; margin:0 22px; font-weight:600; padding:10px 18px; border-radius:25px; transition:0.4s; }
nav a:hover { background:rgba(255,0,102,0.2); color:#ff0066; text-shadow:0 0 15px #ff0066; }

.banner { min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; background:radial-gradient(circle at center, rgba(255,0,102,0.15), transparent 70%), linear-gradient(135deg,#0f0f1a,#1a0026); }
.main-title { font-size:5rem; font-weight:900; background:linear-gradient(45deg,#fff,#ff0066,#ff33cc); -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:glow 3s infinite alternate; }
.subtitle { display:block; font-size:1.8rem; color:#ff99cc; margin-top:15px; }
@keyframes glow { from { filter:drop-shadow(0 0 20px #ff0066); } to { filter:drop-shadow(0 0 40px #ff33cc); } }
.hero-text { font-size:1.4rem; margin:30px 0; color:#ff99cc; }

.ip-container { display:flex; gap:25px; justify-content:center; flex-wrap:wrap; margin:50px 0; }
.ip-box { background:rgba(0,0,0,0.8); border:3px solid #ff0066; padding:25px 50px; border-radius:18px; cursor:pointer; transition:0.5s; box-shadow:0 0 30px rgba(255,0,102,0.6); }
.ip-box:hover { border-color:#ff33cc; transform:scale(1.05); box-shadow:0 0 50px rgba(255,51,204,0.8); }
.ip-text { font-size:1.8rem; font-weight:900; color:#ff0066; font-family:monospace; }
.ip-label { display:block; font-size:1rem; color:#ff99cc; margin-top:10px; }

.connect-btn { background:linear-gradient(45deg,#ff0066,#cc0055); color:white; padding:20px 60px; border-radius:50px; text-decoration:none; font-weight:900; font-size:1.4rem; box-shadow:0 15px 40px rgba(255,0,102,0.6); transition:0.4s; }
.connect-btn:hover { transform:translateY(-8px); box-shadow:0 20px 50px rgba(255,0,102,0.8); background:linear-gradient(45deg,#cc0055,#ff0066); }

.container { max-width:1300px; margin:0 auto; padding:0 20px; }
.section-title { font-size:2.8rem; text-align:center; margin:90px 0 60px; color:#ff0066; position:relative; }
.section-title::after { content:''; position:absolute; bottom:-20px; left:50%; transform:translateX(-50%); width:120px; height:5px; background:linear-gradient(90deg,#ff0066,#ff33cc); border-radius:3px; }

.status-section,.killfeed-section,.shop-section,.discord-section { padding:80px 0; }
.status-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:40px; }
.status-card { background:rgba(255,255,255,0.05); border:2px solid #ff0066; border-radius:20px; padding:40px; text-align:center; transition:0.5s; }
.status-card:hover { transform:translateY(-20px); box-shadow:0 25px 50px rgba(255,0,102,0.3); }
.status-icon { font-size:4rem; color:#ff0066; margin-bottom:20px; }
.status-card.active .status-icon { color:#ff33cc; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }
.status-label { font-size:1.1rem; color:#ff99cc; margin-bottom:15px; }
.status-card strong { font-size:2.5rem; color:#fff; }

.killfeed-container { background:rgba(0,0,0,0.7); border-radius:20px; padding:40px; border:2px solid #ff0066; }
.kill-item { padding:18px; background:rgba(255,0,102,0.1); border-radius:12px; margin:12px 0; border-right:6px solid #ff0066; display:flex; justify-content:space-between; align-items:center; font-size:1.1rem; }
.killer { color:#ff0066; font-weight:900; }
.victim { color:#fff; }

.shop-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:40px; }
.shop-card { background:rgba(0,0,0,0.7); border-radius:25px; padding:45px 30px; text-align:center; border:3px solid #ff0066; transition:0.5s; position:relative; overflow:hidden; }
.shop-card::before { content:''; position:absolute; top:0; left:0; right:0; height:6px; background:#ff0066; }
.legendary:hover { border-color:#ff33cc; box-shadow:0 0 40px rgba(255,51,204,0.5); }
.elite:hover { border-color:#cc00ff; }
.commander:hover { border-color:#00ffff; }
.gamemaster:hover { border-color:#00ff88; }
.shop-card:hover { transform:translateY(-25px); }
.price { font-size:2.4rem; font-weight:900; color:#ff0066; margin:25px 0; }
.price span { font-size:1rem; color:#ff99cc; }
.buy-btn { background:linear-gradient(45deg,#ff0066,#cc0055); color:white; border:none; padding:18px 50px; border-radius:50px; font-weight:900; cursor:pointer; width:100%; font-size:1.2rem; transition:0.4s; }
.buy-btn:hover { transform:scale(1.05); box-shadow:0 15px 40px rgba(255,0,102,0.7); }

.discord-section { background:rgba(0,0,0,0.5); padding:120px 0; text-align:center; }
.discord-btn { background:#5865F2; color:white; padding:25px 80px; border-radius:50px; font-size:1.8rem; text-decoration:none; display:inline-block; box-shadow:0 15px 40px rgba(88,101,242,0.5); transition:0.4s; }
.discord-btn:hover { transform:translateY(-10px); box-shadow:0 25px 60px rgba(88,101,242,0.7); }
.discord-text { margin-top:25px; font-size:1.2rem; color:#bb88ff; }

footer { background:rgba(0,0,0,0.9); padding:40px; text-align:center; color:#ff99cc; border-top:3px solid #ff0066; }

@media (max-width:768px) {
    .main-title { font-size:3rem; }
    .ip-container { flex-direction:column; align-items:center; }
    header { padding:15px 20px; flex-direction:column; gap:15px; }
    nav a { margin:8px 15px; }
}