/* RESET */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI', Arial, sans-serif; background:#0d0d0d; color:#fff; line-height:1.6; }
a { color:#ffccff; text-decoration:none; transition:0.3s; }
a:hover { color:#ff00ff; }

/* HEADER */
header {
  background:#1a0033; color:#fff;
  display:flex; justify-content:space-between; align-items:center;
  padding:15px 20px; position:sticky; top:0; z-index:1000;
}
.logo { font-size:22px; font-weight:bold; color:#ffccff; }
nav { display:flex; gap:15px; }
nav a { color:#fff; padding:8px 12px; border-radius:6px; font-weight:500; }
nav a:hover { background:#800080; }
.menu-toggle { display:none; font-size:28px; cursor:pointer; }

/* ✅ Mobile nav hidden by default */
@media(max-width:768px){
  nav {
    max-height: 0; 
    overflow: hidden;
    flex-direction: column;
    width: 100%;
    background: #1a0033;
    position: absolute;
    top: 60px;
    left: 0;
    transition: max-height 0.4s ease;  /* ✅ smooth slide */
  }

  nav.active {
    max-height: 400px;   /* adjust depending on number of menu items */
  }

  nav a {
    padding: 15px;
    border-top: 1px solid #333;
    text-align: center;
  }

  .menu-toggle {
    display: block;
    cursor: pointer;
  }
}


/* HERO */
.hero {
  background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);
  text-align:center; padding:100px 20px; margin-bottom:50px;
}
.hero h1 { font-size:3rem; color:#ffccff; text-shadow:0 0 20px #800080; }
.hero p { font-size:1.2rem; color:#ccc; margin:15px 0; }
.hero a { background:#800080; color:#fff; padding:12px 25px; border-radius:8px; font-weight:bold; }
.hero a:hover { background:#a64ca6; box-shadow:0 0 20px #ff00ff; }

/* CONTAINERS */
.container { width:90%; max-width:1200px; margin:0 auto 50px auto; }
section { margin-bottom:50px; }
section h2 { margin-bottom:20px; color:#ffccff; font-size:1.6rem; border-left:5px solid #ff00ff; padding-left:10px; }

/* HEADLINES */
.headlines ul { list-style:none; padding:0; }
.headlines li {
  background:#1a1a1a; padding:20px; margin:10px 0;
  border-radius:12px; box-shadow:0 4px 10px rgba(0,0,0,0.2);
}
.headlines li a { color:#fff; font-weight:bold; font-size:18px; }
.headlines li a:hover { color:#ff00ff; }
.headlines small { display:block; color:#bbb; margin-top:5px; }

/* LEADERBOARD */
.leaderboard {
  background:#1a0033; padding:25px; border-radius:15px;
  box-shadow:0 0 25px rgba(128,0,128,0.5);
}
.leaderboard table { width:100%; border-collapse:collapse; }
.leaderboard th, .leaderboard td { padding:14px; border-bottom:1px solid #333; text-align:left; }
.leaderboard th { background:#4b0082; font-size:1rem; }

/* CAMPAIGNS */
.card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:25px; }
.card {
  background:#1a1a1a; padding:20px; border-radius:12px;
  box-shadow:0 0 15px rgba(255,0,255,0.2); transition:0.3s;
}
.card:hover { transform:translateY(-5px); box-shadow:0 0 25px rgba(255,0,255,0.3); }
.card h3 { color:#ffccff; margin-bottom:10px; }
.card p { color:#ccc; margin-bottom:8px; }
.card a { background:#800080; color:#fff; padding:8px 15px; border-radius:6px; display:inline-block; }
.card a:hover { background:#a64ca6; }

/* QUICK LINKS */
.quick-links {
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:25px; margin-top:30px;
}
.quick-links a {
  flex:1 1 200px; text-align:center; padding:25px; background:#4b0082;
  border-radius:12px; color:white; font-size:18px; font-weight:bold;
  box-shadow:0 0 20px rgba(255,0,255,0.3); transition:0.3s;
}
.quick-links a:hover { background:#800080; transform:scale(1.05); box-shadow:0 0 30px #ff00ff; }

/* FOOTER */
footer { background:#1a0033; padding:25px; text-align:center; color:#bbb; margin-top:50px; font-size:0.9rem; }
footer a { margin:0 8px; color:#ffccff; }
footer a:hover { color:#ff00ff; }

/* Auth Card */
.auth-card {
  background:#1a1a1a;
  max-width:400px;
  margin:60px auto;
  padding:30px;
  border-radius:12px;
  box-shadow:0 0 20px rgba(255,0,255,0.2);
  text-align:center;
}
.auth-card h2 {
  margin-bottom:20px;
  color:#ffccff;
}
.auth-card .error {
  background:#330000; color:#ff8080;
  padding:10px; border-radius:6px; margin-bottom:15px;
}
.form-group { margin-bottom:15px; }
.auth-card input {
  width:100%; padding:12px; border:none; border-radius:8px;
  background:#2b2b2b; color:white; font-size:1rem;
  outline:none; transition:0.3s;
}
.auth-card input:focus {
  box-shadow:0 0 10px #ff00ff;
}
.auth-card button.btn {
  width:100%; padding:12px;
  background:#800080; border:none;
  border-radius:8px; font-size:1.1rem;
  cursor:pointer; color:white; font-weight:bold;
  transition:0.3s;
}
.auth-card button.btn:hover {
  background:#a64ca6; box-shadow:0 0 20px #ff00ff;
}
.auth-card .alt-link {
  margin-top:15px; font-size:0.9rem; color:#bbb;
}
.auth-card .alt-link a { color:#ffccff; }
.auth-card .alt-link a:hover { color:#ff00ff; }

.auth-card .success {
  background:#003300; color:#80ff80;
  padding:10px; border-radius:6px; margin-bottom:15px;
}

.success {
  background:#003300; color:#80ff80;
  padding:12px; border-radius:8px; margin:15px 0;
  box-shadow:0 0 10px rgba(0,255,0,0.3);
}
.card-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap:20px;
}
.card {
  background:#1a1a1a; padding:20px; border-radius:12px;
  box-shadow:0 0 15px rgba(255,0,255,0.2); transition:0.3s;
}
.card:hover { transform:translateY(-5px); box-shadow:0 0 25px rgba(255,0,255,0.3); }
.card h3 { color:#ffccff; margin-bottom:10px; }
.card p { color:#ccc; margin-bottom:8px; }
.card .btn {
  background:#800080; color:#fff; padding:8px 15px; border-radius:6px; 
  display:inline-block; text-decoration:none; font-weight:bold;
}
.card .btn:hover { background:#a64ca6; box-shadow:0 0 15px #ff00ff; }

/* Leaderboard Page */
.leaderboard-page { margin-top:40px; }
.tabs { display:flex; justify-content:center; gap:15px; margin-bottom:20px; }
.tab-btn {
  background:#4b0082; color:#fff; padding:10px 20px;
  border:none; border-radius:6px; cursor:pointer; font-weight:bold;
  transition:0.3s;
}
.tab-btn:hover { background:#800080; }
.tab-btn.active { background:#ff00ff; box-shadow:0 0 10px #ff00ff; }

.tab-content { display:none; }
.tab-content.active { display:block; }

.lb-table {
  width:100%; border-collapse:collapse; background:#1a1a1a;
  border-radius:10px; overflow:hidden; box-shadow:0 0 15px rgba(255,0,255,0.2);
}
.lb-table th, .lb-table td {
  padding:12px; border-bottom:1px solid #333; text-align:left;
}
.lb-table th { background:#2b004d; color:#ffccff; }
.lb-table tr:hover { background:#2b004d; }

/* Special ranks */
.lb-table tr.first td { background:#ffd70033; font-weight:bold; }
.lb-table tr.second td { background:#c0c0c033; font-weight:bold; }
.lb-table tr.third td { background:#cd7f3233; font-weight:bold; }

/* Tournament Cards */
.tournaments h3 {
  margin:25px 0 15px;
  color:#ffccff;
}
.card-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap:20px;
  margin-bottom:30px;
}
.card {
  background:#1a1a1a;
  padding:20px;
  border-radius:12px;
  box-shadow:0 0 15px rgba(255,0,255,0.2);
  transition:0.3s;
}
.card:hover {
  transform:translateY(-5px);
  box-shadow:0 0 25px rgba(255,0,255,0.3);
}
.card h3 { color:#ffccff; margin-bottom:10px; }
.card p { color:#ccc; margin-bottom:6px; }
.card .btn {
  background:#800080; color:#fff; padding:8px 15px;
  border-radius:6px; display:inline-block; text-decoration:none;
  margin-top:10px; font-weight:bold; transition:0.3s;
}
.card .btn:hover { background:#a64ca6; box-shadow:0 0 15px #ff00ff; }

/* Tournament Status Tags */
.status {
  display:inline-block;
  padding:4px 10px;
  border-radius:6px;
  font-size:0.85rem;
  margin-top:5px;
  font-weight:bold;
}
.status.upcoming { background:#004400; color:#80ff80; }
.status.live { background:#660000; color:#ff6666; }
.status.past { background:#333333; color:#bbb; }

.tournament-detail {
  background:#1a1a1a; padding:25px;
  border-radius:12px; box-shadow:0 0 20px rgba(255,0,255,0.2);
  margin-top:40px;
}
.tournament-detail h2 { color:#ffccff; margin-bottom:10px; }
.tournament-detail h3 { color:#ffccff; margin-top:20px; }
.participants {
  list-style:none; padding:0; margin-top:10px;
}
.participants li {
  background:#2b2b2b; margin:5px 0; padding:8px 12px; border-radius:6px;
}

.no-data {
  color:#bbb;
  background:#1a1a1a;
  padding:15px;
  border-radius:8px;
  text-align:center;
  width:100%;
  box-shadow:0 0 10px rgba(255,0,255,0.1);
  margin:10px 0;
}

.news-page h2 { color:#ffccff; margin-bottom:20px; }
.news-detail h2 { color:#ffccff; margin-bottom:10px; }
.news-detail { background:#1a1a1a; padding:20px; border-radius:12px; }

.clips-page h2 {
  color:#ffccff;
  margin-bottom:15px;
}

.card-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:20px;
}

.clip-card {
  background:#1a1a1a;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 0 15px rgba(255,0,255,0.2);
  transition:0.3s;
}

.clip-card:hover {
  transform:translateY(-5px);
  box-shadow:0 0 25px rgba(255,0,255,0.4);
}

.clip-info {
  padding:15px;
}

.clip-info h3 {
  color:#ffccff;
  font-size:18px;
  margin-bottom:8px;
}

.clip-info .uploader {
  font-size:0.9rem;
  color:#bbb;
}

.clip-info .votes {
  font-size:0.95rem;
  margin:8px 0;
  color:#ccc;
}

.actions {
  display:flex;
  gap:10px;
  margin-top:10px;
}

.actions .btn {
  background:#800080;
  color:#fff;
  padding:8px 12px;
  border-radius:6px;
  text-decoration:none;
  font-size:0.9rem;
  flex:1;
  text-align:center;
  transition:0.3s;
}

.actions .btn:hover {
  background:#a64ca6;
  box-shadow:0 0 10px #ff00ff;
}

.upload-clip {
  background:#1a1a1a;
  padding:20px;
  border-radius:12px;
  box-shadow:0 0 15px rgba(255,0,255,0.2);
  max-width:500px;
  margin:30px auto;
}
.upload-clip h2 { color:#ffccff; margin-bottom:10px; }
.upload-clip form { display:flex; flex-direction:column; gap:15px; }
.upload-clip input {
  padding:10px; border-radius:6px; border:none;
  background:#2b2b2b; color:#fff;
}
.upload-clip input:focus { outline:2px solid #a64ca6; }
.success {
  background:#003300; color:#80ff80;
  padding:10px; border-radius:6px; margin:10px 0;
}

/* Wallet */
.wallet-section h2 { color:#ffccff; margin-bottom:20px; text-align:center; }
.wallet-card {
  display:flex;
  justify-content:center;
  gap:30px;
  background:#1a1a1a;
  padding:20px;
  border-radius:12px;
  box-shadow:0 0 20px rgba(255,0,255,0.2);
  margin-bottom:20px;
}
.wallet-item {
  text-align:center;
  flex:1;
}
.wallet-item h3 { color:#ffccff; margin-bottom:10px; }
.wallet-item p { font-size:24px; font-weight:bold; color:#fff; }
.wallet-actions {
  text-align:center;
  margin-top:20px;
}
.wallet-actions .btn { margin:5px; }

/* Store */
.store-page h2 { color:#ffccff; margin-bottom:15px; text-align:center; }
.reward-card {
  background:#1a1a1a;
  padding:20px;
  border-radius:12px;
  box-shadow:0 0 15px rgba(255,0,255,0.2);
  transition:0.3s;
}
.reward-card:hover { transform:translateY(-5px); box-shadow:0 0 25px rgba(255,0,255,0.4); }
.reward-card h3 { color:#ffccff; margin-bottom:10px; }
.reward-card p { color:#ddd; margin-bottom:8px; }
.reward-card .cost { font-weight:bold; color:#ffccff; margin-bottom:10px; }

.wallet-section h2 {
  color:#ffccff; 
  margin-bottom:20px; 
  text-align:center;
}
.wallet-card {
  display:flex;
  justify-content:center;
  gap:30px;
  background:#1a1a1a;
  padding:20px;
  border-radius:12px;
  box-shadow:0 0 20px rgba(255,0,255,0.2);
  margin-bottom:20px;
}
.wallet-item {
  text-align:center;
  flex:1;
}
.wallet-item h3 { color:#ffccff; margin-bottom:10px; }
.wallet-item p { font-size:24px; font-weight:bold; color:#fff; }
.success {
  background:#002b00;
  color:#80ff80;
  padding:12px;
  border-radius:8px;
  text-align:center;
  margin-bottom:20px;
  box-shadow:0 0 10px rgba(0,255,0,0.4);
}
.wallet-actions {
  text-align:center;
  margin-top:10px;
}
.wallet-actions .btn { margin:5px; }

.store-page h2 {
  color:#ffccff;
  margin-bottom:15px;
  text-align:center;
}

.wallet-badge {
  background:#1a1a1a;
  padding:15px;
  text-align:center;
  border-radius:10px;
  margin-bottom:20px;
  box-shadow:0 0 15px rgba(255,0,255,0.2);
}
.wallet-badge span {
  font-weight:bold;
  color:#ffccff;
}

.coming-soon {
  color:orange;
  text-align:center;
  margin-bottom:20px;
  font-size:1.1rem;
}

.reward-card {
  background:#1a1a1a;
  padding:20px;
  border-radius:12px;
  box-shadow:0 0 15px rgba(255,0,255,0.2);
  transition:0.3s;
  text-align:center;
}
.reward-card:hover {
  transform:translateY(-5px);
  box-shadow:0 0 25px rgba(255,0,255,0.4);
}
.reward-card h3 {
  color:#ffccff;
  margin-bottom:10px;
}
.reward-card .cost {
  font-weight:bold;
  color:#ddd;
  margin-bottom:8px;
}
.reward-card .status {
  color:red;
  font-weight:bold;
}

/* Profile Page */
.profile-page h2 {
  color:#ffccff;
  text-align:center;
  margin-bottom:20px;
}
.profile-card {
  background:#1a1a1a;
  padding:20px;
  border-radius:12px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  box-shadow:0 0 20px rgba(255,0,255,0.2);
  margin-bottom:20px;
}
.profile-info, .profile-wallet {
  flex:1;
  color:#ddd;
}
.profile-info strong, .profile-wallet strong {
  color:#ffccff;
}
.profile-actions {
  text-align:center;
  margin-top:15px;
}
.profile-actions .btn { margin:0 10px; }

/* Edit Profile */
.edit-profile {
  max-width:500px;
  margin:0 auto;
  background:#1a1a1a;
  padding:20px;
  border-radius:12px;
  box-shadow:0 0 20px rgba(255,0,255,0.2);
}
.edit-profile h2 { color:#ffccff; margin-bottom:15px; }
.edit-profile form { display:flex; flex-direction:column; gap:15px; }
.edit-profile input {
  padding:10px;
  border:none;
  border-radius:6px;
  background:#2b2b2b;
  color:#fff;
}
.edit-profile input:focus { outline:2px solid #a64ca6; }
.success {
  background:#002b00;
  color:#80ff80;
  padding:10px;
  border-radius:6px;
  margin-bottom:15px;
  text-align:center;
}

.badge-heading {
  color:#ffccff;
  margin:20px 0 10px;
  text-align:center;
}
.badge-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap:15px;
  margin-bottom:20px;
}
.badge-item {
  background:#1a1a1a;
  padding:15px;
  border-radius:10px;
  text-align:center;
  box-shadow:0 0 10px rgba(255,0,255,0.2);
  transition:0.3s;
}
.badge-item:hover {
  transform:translateY(-3px);
  box-shadow:0 0 15px rgba(255,0,255,0.4);
}
.badge-icon {
  font-size:24px;
  display:block;
  margin-bottom:5px;
}
.badge-name {
  color:#ddd;
  font-size:0.9rem;
}
.upload-clip {
  background:#1a1a1a;
  padding:20px;
  border-radius:12px;
  box-shadow:0 0 15px rgba(255,0,255,0.2);
  max-width:500px;
  margin:30px auto;
}
.upload-clip h2 { color:#ffccff; margin-bottom:10px; text-align:center; }
.upload-clip form { display:flex; flex-direction:column; gap:15px; }
.upload-clip input {
  padding:10px;
  border-radius:6px;
  border:none;
  background:#2b2b2b;
  color:#fff;
}
.upload-clip input:focus { outline:2px solid #a64ca6; }
.success {
  background:#002b00; color:#80ff80; padding:10px;
  border-radius:6px; margin:10px 0; text-align:center;
}
.error {
  background:#330000; color:#ff8080; padding:10px;
  border-radius:6px; margin:10px 0; text-align:center;
}

/* Leaderboard */
.leaderboard-page h2 { color:#ffccff; text-align:center; margin-bottom:20px; }
.tabs { text-align:center; margin-bottom:20px; }
.tab-btn {
  background:#1a1a1a; color:#fff; padding:10px 20px; margin:0 5px;
  border:none; border-radius:6px; cursor:pointer;
  transition:0.3s;
}
.tab-btn.active, .tab-btn:hover { background:#800080; }
.tab-content { display:none; }
.tab-content.active { display:block; }

.lb-table { width:100%; border-collapse:collapse; margin-top:15px; color:#fff; }
.lb-table th, .lb-table td { padding:10px; border-bottom:1px solid #333; text-align:center; }
.lb-table tr.first { background:#331144; font-weight:bold; }
.lb-table tr.second { background:#2b0d3a; }
.lb-table tr.third { background:#22092f; }

.badge {
  display:inline-block;
  background:#800080;
  color:#fff;
  padding:3px 8px;
  border-radius:6px;
  margin:2px;
  font-size:0.8rem;
}

.crown.gold   { color: gold; font-weight:bold; text-shadow:0 0 15px gold; }
.crown.silver { color: #c0c0c0; font-weight:bold; text-shadow:0 0 15px #c0c0c0; }
.crown.bronze { color: #cd7f32; font-weight:bold; text-shadow:0 0 15px #cd7f32; }

.profile-card {
  display:flex; justify-content:space-between; 
  background:#1a1a1a; padding:20px; border-radius:12px; margin-bottom:20px;
}
.profile-info, .profile-wallet { color:#fff; }
.profile-wallet p { margin:5px 0; }

.badge-grid {
  display:flex; flex-wrap:wrap; gap:15px; margin:15px 0;
}
.badge-item {
  background:#2a0033; padding:10px 15px; border-radius:8px;
  display:flex; flex-direction:column; align-items:center;
  box-shadow:0 0 8px rgba(128,0,128,0.5);
}
.badge-icon { font-size:24px; margin-bottom:5px; }
.badge-name { font-size:14px; color:#fff; }

.activity-list {
  list-style:none; padding:0; margin:15px 0;
}
.activity-list li {
  background:#1f1f1f; padding:10px; border-radius:6px; margin-bottom:8px;
  display:flex; justify-content:space-between; align-items:center;
  color:#ddd;
}
.activity-list li .points { color:#0f0; margin-left:10px; font-weight:bold; }
.activity-list li small { color:#888; margin-left:auto; }

.create-team, .team-card {
  background:#1a1a1a; padding:15px; margin:15px 0; border-radius:10px;
  box-shadow:0 0 8px rgba(128,0,128,0.5);
}
.team-card h4 { color:#ffccff; margin:0 0 5px; }
.team-card p { color:#ddd; }
.team-card small { color:#aaa; }