/* NMC — modern, framework‑free design */
:root{
  --bg: #0b0d10;
  --bg-2:#111418;
  --text:#ecf0f1;
  --muted:#9aa4ad;
  --accent:#7c5cff;
  --accent-2:#43d1ff;
  --card:#11161e;
  --glass: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.08);
  --ring: rgba(124,92,255,0.35);
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:22px;
  --gap: 20px;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f7fb; --bg-2:#ffffff; --text:#0b0d10; --muted:#4b5563;
    --card:#ffffff; --glass: rgba(0,0,0,0.03); --border: rgba(0,0,0,0.08);
    --ring: rgba(124,92,255,0.45);
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font: 16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:radial-gradient(1200px 600px at 80% -10%, rgba(124,92,255,0.22), transparent 60%),
             radial-gradient(800px 500px at -10% 20%, rgba(67,209,255,0.15), transparent 60%),
             var(--bg);
  background-attachment: fixed;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.row{display:flex;gap:var(--gap)}
.row.gap{gap:12px}
.row.wrap{flex-wrap:wrap}
.row.center{align-items:center}
.row.start{align-items:flex-start}
.row.between{justify-content:space-between}
.grid{display:grid;gap:var(--gap)}
.grid.two{grid-template-columns:1.1fr 0.9fr}
.grid.three{grid-template-columns:repeat(3,1fr)}
.grid.cards > *{min-height:160px}
@media (max-width:920px){
  .grid.two,.grid.three{grid-template-columns:1fr}
  .stack-on-mobile{grid-template-columns:1fr !important}
}

.site-header{
  position:sticky; top:0; z-index:10; backdrop-filter:saturate(130%) blur(14px);
  background:linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
  border-bottom:1px solid var(--border);
}
.brand{display:flex;align-items:center;gap:12px;padding:14px 0;font-weight:700;letter-spacing:0.2px}
.brand-text{font-size:18px}
.logo{filter: drop-shadow(0 6px 14px rgba(124,92,255,0.45));}
.mainnav{display:flex}
.nav-list{list-style:none;display:flex;gap:4px;margin:0;padding:0}
.nav-link{display:block;padding:12px 14px;border-radius:10px;color:var(--muted)}
.nav-link:hover{color:var(--text); background:var(--glass)}
.nav-link.active{color:var(--text); background:var(--glass); outline:1px solid var(--border)}
.nav-toggle{display:none;background:none;border:0;padding:8px;border-radius:10px}
.nav-toggle .bar{display:block;width:24px;height:2px;background:var(--text);margin:5px 0;border-radius:2px}
@media (max-width:760px){
  .nav-toggle{display:block}
  .mainnav{display:none;position:absolute;right:10px;top:58px;background:var(--bg-2);
           border:1px solid var(--border); border-radius:12px;box-shadow:var(--shadow)}
  .mainnav.open{display:block}
  .nav-list{flex-direction:column;padding:10px}
}

.section{padding:50px 0}
.section-head{margin-bottom:18px}
.display{font-size: clamp(36px, 6vw, 64px); line-height:1.05; margin:10px 0 12px}
.lead{font-size:18px;color:var(--muted);max-width:55ch}
.muted{color:var(--muted)}
.small{font-size:14px}
.accent{color:var(--accent)}

.hero{position:relative;padding:70px 0 60px}
.hero .backdrop{
  position:absolute;inset:0;z-index:-1;
  background: radial-gradient(700px 280px at 30% 0%, rgba(124,92,255,0.25), transparent 60%);
  pointer-events:none;
}
.hero-card .card{margin-top:8px}

.card{
  background:linear-gradient(180deg, var(--glass), transparent 60%), var(--card);
  border:1px solid var(--border); border-radius:var(--radius); padding:18px 18px 16px;
  box-shadow: var(--shadow);
}
.card-title{margin:6px 0 12px;font-size:20px}
.glass{backdrop-filter: blur(8px) saturate(130%)}

.ticks{padding:0 0 0 18px; margin:0 0 12px}
.ticks li{margin:6px 0}
.ticks.big li{margin:10px 0; font-size:16px}
.badge{border:1px solid var(--border); border-radius:999px; padding:6px 10px; font-size:12px; color:var(--muted)}
.chip{border:1px solid var(--border); border-radius:8px; padding:4px 8px; font-size:12px; color:var(--muted)}

.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;border:1px solid var(--border);cursor:pointer;transition:transform .08s ease, box-shadow .2s ease, background .2s ease}
.btn.small{padding:8px 12px}
.btn-primary{background:linear-gradient(180deg, rgba(124,92,255,.15), rgba(124,92,255,.08)); border-color:transparent; box-shadow:0 8px 24px var(--ring)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 14px 32px var(--ring)}
.btn-ghost{background:transparent}
.btn-ghost:hover{background:var(--glass)}

.input{
  background:var(--bg-2); color:var(--text); border:1px solid var(--border); border-radius:12px; padding:10px 12px;
  min-width:220px; outline: none;
}
.input:focus{box-shadow:0 0 0 6px var(--ring)}

.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--bg-2);text-align:center}
.stat-val{font-size:22px;font-weight:700}
.stat-label{font-size:12px;color:var(--muted)}

.site-footer{padding:30px 0;border-top:1px solid var(--border); margin-top:20px}

/* Live page specifics */
.members{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.member{
  display:grid; grid-template-columns:56px 1fr; gap:10px; align-items:center;
  border:1px solid var(--border); border-radius:12px; padding:10px; background:var(--bg-2)
}
.avatar{width:56px;height:56px;border-radius:12px;object-fit:cover;border:1px solid var(--border)}
.m-name{font-weight:600}
.m-sub{font-size:12px;color:var(--muted)}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.badge.bot{color:#8b5cf6}
.status{display:inline-flex;align-items:center;gap:6px}
.dot{width:8px;height:8px;border-radius:999px;display:inline-block}
.dot.online{background:#34d399}
.dot.idle{background:#f59e0b}
.dot.dnd{background:#ef4444}
.dot.offline{background:#6b7280}

.vc-list{display:flex;flex-direction:column;gap:12px}
.vc{border:1px solid var(--border); border-radius:12px; overflow:hidden;background:var(--bg-2)}
.vc-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:linear-gradient(180deg,rgba(124,92,255,.12),transparent);font-weight:600}
.vc-body{padding:10px;display:flex;flex-wrap:wrap;gap:10px}
.vc .member{grid-template-columns:40px 1fr;padding:8px}
.vc .avatar{width:40px;height:40px;border-radius:10px}

.skeleton-list,.skeleton-grid{display:grid;gap:10px}
.skeleton-list .skeleton-item{height:54px;border-radius:12px;background:linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.12), rgba(255,255,255,0.08)); background-size:200% 100%; animation:shimmer 1.2s infinite}
.skeleton-grid{grid-template-columns:repeat(2,1fr)}
.skeleton-grid .skeleton-item{height:88px;border-radius:12px;background:linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.12), rgba(255,255,255,0.08)); background-size:200% 100%; animation:shimmer 1.2s infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

/* --- Added: Announcement banner & creators section --- */
.banner{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:center;
  padding:16px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(124,92,255,.12), transparent 60%), var(--bg-2);
  box-shadow: var(--shadow);
}
.banner-emoji{font-size:28px; filter: drop-shadow(0 6px 14px rgba(124,92,255,0.45));}
.banner-title{margin:0 0 4px}
.banner-text{margin:0; color:var(--text)}

/* --- Added: Media card layout for Previous Tournaments --- */
.media{display:grid; grid-template-columns: 0.9fr 1.1fr; gap:16px; align-items:center}
.media-img img{width:100%; height:auto; border-radius:12px; border:1px solid var(--border); background:var(--bg-2)}
.media-body h2{margin:6px 0 8px}
@media (max-width:920px){ .media{grid-template-columns:1fr} }