:root{
--green:#00ff99;
--green2:#00ffaa;
--cyan:#00fff0;
--danger:#ff3b3b;
--bg:#000;
--card:#001400cc;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0; background:var(--bg); color:var(--green);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
overflow-x:hidden;
}


/* Matrix rain canvas */
#matrixBg{position:fixed; inset:0; z-index:-1}


/* Navbar */
.navbar{
position:sticky; top:0; z-index:999; display:flex; gap:16px; align-items:center; justify-content:space-between;
padding:12px 20px; background:rgba(0,0,0,.85); border-bottom:2px solid var(--green); box-shadow:0 0 16px #00ff9944
}
.brand{font-weight:900; letter-spacing:.5px; color:var(--green); text-shadow:0 0 10px var(--green)}
.nav a{color:var(--green); text-decoration:none; margin-left:16px; font-weight:700}
.nav a:hover{color:#fff; text-shadow:0 0 8px var(--green)}


/* Layout */
.container{max-width:1100px; margin:0 auto; padding:6rem 2rem 2rem 2rem; z-index: 2}
.hero{margin:10px 0 18px}
.hero h1{margin:.2rem 0 .4rem; text-shadow:0 0 14px var(--green)}
.cards{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.placeholder{opacity:.9}


/* Server card */
.card{position:relative; background:var(--card); border:1px solid var(--green); border-radius:12px; padding:16px; box-shadow:0 0 24px #00ff9940, inset 0 0 12px #00ff991a}
.card:hover{transform:translateY(-2px); transition:.2s ease; box-shadow:0 0 34px #00ff9966}
.card .head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.title{font-weight:900; color:var(--cyan); text-shadow:0 0 8px var(--cyan)}
.badges{display:flex; gap:8px}
.badge{font-size:12px; padding:4px 8px; border:1px solid var(--green); border-radius:999px; color:#001b00; background:linear-gradient(#baffc9,#53ff94); font-weight:800}
.badge.mod{background:linear-gradient(#c0fff7,#59ffe9); border-color:var(--cyan)}
.status{font-weight:900}
.online{color:var(--green)}
.offline{color:var(--danger)}
.meta{display:flex; flex-wrap:wrap; gap:10px 16px; margin:8px 0}
.kv{opacity:.9}
.motd{margin:8px 0; padding:10px; background:#00000066; border:1px dashed #00ff9950; border-radius:10px}
.players{margin-top:8px}
.avatars{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.avatar{display:flex; align-items:center; gap:6px; padding:6px 8px; border:1px solid #00ff9940; border-radius:10px; background:#00140099}
.avatar img{width:28px; height:28px; border-radius:6px; image-rendering:pixelated; box-shadow:0 0 8px #00ff9940}
.avatar .name{font-size:13px; color:#caffdf}


/* Utilities */
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.copy{cursor:pointer; padding:6px 10px; border:1px solid var(--green); border-radius:8px; background:#001a00; color:var(--green); font-weight:800}
.copy:hover{filter:brightness(1.2)}
.small{font-size:12px; opacity:.8}


/* Footer */
.footer{padding:20px; text-align:center; opacity:.8}


@media (max-width:600px){
.nav a{margin-left:10px}
}


/* Dim overlay so matrix doesn’t overpower */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1;
  pointer-events: none;
}

/* Navbar, footer, and content above matrix + overlay */
.navbar, .container, .footer {
  position: relative;
  z-index: 2;
}

/* Card grid for multiple servers */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

/* Card styling */
.card {
  background: rgba(20, 20, 20, 0.9);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  color: #fff;
}