:root{
    --bg: #15161c;
    --bg-panel: #1c1e27;
    --bg-panel-raised: #22242f;
    --line: #33364420;
    --line-strong: #3a3d4d;
    --amber: #e8a33d;
    --violet: #8b6fff;
    --text: #f3f1ea;
    --text-dim: #9a9cab;
    --text-faint: #63657a;
    --good: #6fbf8b;
    --lol: #4a90c2;
    --samp: #d1495b;
  }
  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin:0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  h1,h2,h3, .display{
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin: 0;
  }
  .mono{ font-family: 'JetBrains Mono', monospace; }
  a{ color: inherit; }
  .wrap{
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 28px;
  }
  ::selection{ background: var(--amber); color: #15161c; }

  /* ---------- Nav ---------- */
  .nav{
    position: sticky; top:0; z-index: 20;
    background: rgba(21,22,28,0.88);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line-strong);
  }
  .nav-inner{
    max-width: 1080px; margin: 0 auto; padding: 16px 28px;
    display:flex; align-items:center; justify-content: space-between;
  }
  .nav-mark{
    font-family:'Rajdhani',sans-serif; font-weight:700; font-size: 20px;
    display:flex; align-items:center; gap:10px;
  }
  .nav-mark .dot{
    width:9px; height:9px; border-radius:50%; background: var(--good);
    box-shadow: 0 0 8px var(--good);
    animation: pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:0.35} }
  .nav-links{ display:flex; gap: 26px; font-size: 14px; color: var(--text-dim); }
  .nav-links a{ text-decoration:none; transition: color .15s; }
  .nav-links a:hover{ color: var(--text); }
  @media (max-width: 620px){ .nav-links{ display:none; } }

  /* ---------- Hero ---------- */
  .hero{
    padding: 96px 0 72px;
    border-bottom: 1px solid var(--line-strong);
    position: relative;
    overflow: hidden;
  }
  .hero::before{
    content:"";
    position:absolute; top:-140px; right:-160px;
    width: 420px; height: 420px; border-radius: 50%;
    background: radial-gradient(circle at center, rgba(139,111,255,0.16), transparent 70%);
    pointer-events:none;
  }
  .hero-top{
    display:flex; align-items:center; gap:12px; margin-bottom: 28px;
    font-family:'JetBrains Mono',monospace; font-size: 12.5px; color: var(--text-faint);
  }
  .hero-top .sep{ color: var(--line-strong); }
  .hero h1{
    font-size: clamp(48px, 9vw, 96px);
    line-height: 0.95;
    color: var(--text);
  }
  .hero h1 span{ color: var(--violet); }
  .hero-sub{
    max-width: 560px;
    margin-top: 22px;
    font-size: 17px;
    color: var(--text-dim);
  }
  .hero-stats{
    display:flex; gap: 40px; margin-top: 48px; flex-wrap: wrap;
  }
  .stat .num{
    font-family:'Rajdhani',sans-serif; font-weight:700; font-size: 34px; color: var(--text);
  }
  .stat .label{
    font-size: 13px; color: var(--text-faint); margin-top: 2px;
  }

  /* ---------- Section heading ---------- */
  .section{ padding: 72px 0; border-bottom: 1px solid var(--line-strong); }
  .section-head{
    display:flex; align-items:baseline; justify-content:space-between;
    margin-bottom: 36px; gap: 20px; flex-wrap: wrap;
  }
  .section-head h2{ font-size: 32px; }
  .section-head p{ color: var(--text-dim); font-size: 14.5px; max-width: 360px; margin:0; }

  /* ---------- Games ---------- */
  .games{
    display:grid; grid-template-columns: repeat(6, 1fr); gap: 1px;
    background: var(--line-strong);
    border: 1px solid var(--line-strong);
  }
  @media (max-width: 1080px){ .games{ grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 640px){ .games{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 420px){ .games{ grid-template-columns: 1fr; } }
  .game{
    background: var(--bg-panel);
    padding: 30px 26px;
    display:flex; flex-direction:column; gap: 14px;
    min-height: 230px;
    position: relative;
  }
  .game .bar{
    position:absolute; top:0; left:0; right:0; height: 3px;
  }
  .game.cs2 .bar{ background: var(--amber); }
  .game.cs16 .bar{ background: var(--text-faint); }
  .game.samp .bar{ background: var(--samp); }
  .game.ragemp .bar{ background: var(--violet); }
  .game.fivem .bar{ background: var(--good); }
  .game.lol .bar{ background: var(--lol); }
  .game .tag{
    font-family:'JetBrains Mono',monospace; font-size: 12px; color: var(--text-faint);
  }
  .game h3{ font-size: 26px; }
  .game p{ color: var(--text-dim); font-size: 14.5px; margin:0; }
  .game .status{
    margin-top: auto; font-size: 12.5px; font-family:'JetBrains Mono',monospace;
    display:flex; align-items:center; gap:7px; color: var(--text-faint);
  }
  .game.samp .status{ color: var(--samp); }
  .game.ragemp .status{ color: var(--violet); }
  .game.fivem .status{ color: var(--good); }
  .game.cs16 .status{ color: var(--good); }
  .game.cs2 .status{ color: var(--good); }
  .game.lol .status{ color: var(--good); }
  .game .status .sdot{ width:6px; height:6px; border-radius:50%; background: currentColor; }

  /* ---------- Roster ---------- */
  .roster-scroll{
    max-height: 520px;
    overflow-y: auto;
    border: 1px solid var(--line-strong);
    border-bottom: none;
  }
  .roster-scroll::-webkit-scrollbar{ width: 8px; }
  .roster-scroll::-webkit-scrollbar-track{ background: var(--bg-panel); }
  .roster-scroll::-webkit-scrollbar-thumb{ background: var(--line-strong); border-radius: 4px; }
  .roster-scroll::-webkit-scrollbar-thumb:hover{ background: var(--text-faint); }
  .roster{ width:100%; border-collapse: collapse; }
  .roster thead th{
    position: sticky; top: 0; z-index: 1;
    text-align:left; font-family:'JetBrains Mono',monospace; font-weight:400;
    font-size: 12px; color: var(--text-faint); padding: 14px;
    background: var(--bg-panel); border-bottom: 1px solid var(--line-strong);
  }
  .roster tbody td{
    padding: 16px 14px; border-bottom: 1px solid #292b36;
    font-size: 15px; background: var(--bg);
  }
  .roster tbody tr:hover td{ background: var(--bg-panel); }
  .roster .name{ font-weight: 600; }
  .roster .handle{ color: var(--text-faint); font-family:'JetBrains Mono',monospace; font-size: 13px; margin-top: 2px; }
  .roster .description{ color: var(--text-dim); font-size: 13px; margin-top: 6px; max-width: 260px; }
  .roster .game-tags{
    display:flex; flex-wrap: wrap; gap: 8px;
  }
  .roster .game-tag{
    font-size: 12px; color: var(--text-dim);
    display:inline-flex; align-items:center; gap:6px;
    border: 1px solid var(--line-strong); border-radius: 4px; padding: 4px 9px;
  }
  .roster .game-tag .chip{
    width:7px; height:7px; border-radius: 2px; flex-shrink:0;
  }
  .chip.cs2{ background: var(--amber); }
  .chip.cs16{ background: var(--text-faint); }
  .chip.gta{ background: var(--violet); }
  .chip.fivem{ background: var(--good); }
  .chip.lol{ background: var(--lol); }
  .roster .social-links{ display:flex; gap: 8px; }
  .social-link{
    display:inline-flex; align-items:center; justify-content:center;
    width: 32px; height: 32px; border-radius: 4px;
    color: var(--text-dim); text-decoration:none;
    border: 1px solid var(--line-strong);
    transition: border-color .15s, color .15s;
  }
  .social-link:hover{ border-color: var(--amber); color: var(--text); }
  .social-link svg{ width:15px; height:15px; }
  .empty-note{
    color: var(--text-faint); font-size: 13.5px; padding: 14px;
    border: 1px solid var(--line-strong); border-top: none;
    font-family:'JetBrains Mono',monospace;
  }

  /* ---------- Videos ---------- */
  .videos{
    display:grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
  }
  @media (max-width: 700px){ .videos{ grid-template-columns: 1fr; } }
  .video-card{ display:flex; flex-direction:column; gap: 10px; }
  .video-frame{
    position:relative; width:100%; padding-top: 56.25%;
    background: var(--bg-panel); border: 1px solid var(--line-strong); overflow:hidden;
  }
  .video-frame iframe{
    position:absolute; top:0; left:0; width:100%; height:100%; border:0;
  }
  .video-card .caption{ font-size: 14px; color: var(--text-dim); }
  .video-card .caption strong{ color: var(--text); font-weight: 600; }

  /* ---------- Footer ---------- */
  .servers{
    padding: 56px 0 40px;
    display:flex; gap: 20px; flex-wrap: wrap;
  }
  .server-card{
    flex: 1; min-width: 220px;
    background: var(--bg-panel);
    border: 1px solid var(--line-strong);
    padding: 22px 24px;
    display:flex; align-items:center; gap: 16px;
  }
  .server-icon{
    width: 42px; height: 42px; border-radius: 6px; flex-shrink:0;
    background: var(--bg-panel-raised); border: 1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center; color: var(--amber);
  }
  .server-card.discord .server-icon{ color: var(--violet); }
  .server-icon svg{ width: 20px; height: 20px; }
  .server-info .label{ font-size: 13px; color: var(--text-dim); font-weight: 600; }
  .server-info .value{
    font-family:'JetBrains Mono',monospace; font-size: 13px; color: var(--text-faint); margin-top: 2px;
  }
  .server-info a{ text-decoration:none; }
  .server-info a:hover .value{ color: var(--text); }

  footer{
    padding: 30px 0 50px;
    display:flex; justify-content:space-between; align-items:center;
    color: var(--text-faint); font-size: 13px; flex-wrap: wrap; gap: 10px;
  }