/* ============================================================ BetaCore
   Black + cyan, with Minecraft material colours as accents. Blocky where it
   earns it (panels, badges, the wordmark), clean everywhere else.
   ==================================================================== */
:root{
  --bg:#05070a; --bg-2:#080b11;
  --panel:#0b111a; --panel-2:#0e1622; --raise:#121c2b;
  --line:rgba(120,180,210,.14); --line-2:rgba(120,180,210,.26);

  --cyan:#22d3ee; --cyan-hi:#67e8f9; --cyan-dim:#0e7490;
  --emerald:#3ddc84; --gold:#ffb949; --redstone:#ff5566;
  --amethyst:#b98cff; --diamond:#4dd6ff;

  --ink:#e9f3fa; --muted:#8ba3ba; --faint:#5d7near;
  --faint:#5d7288;

  --pixel:"Silkscreen",ui-monospace,monospace;
  --sans:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;

  --r:14px; --maxw:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:104px}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{line-height:1.15; margin:0}
a{color:inherit}
button{font-family:inherit; cursor:pointer}
.muted{color:var(--muted)}
.small{font-size:13px}
[hidden]{display:none !important}

/* ---------------------------------------------------------- atmosphere */
.grid-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:
    linear-gradient(rgba(120,190,220,.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,190,220,.030) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse 120% 80% at 50% 0%, #000 30%, transparent 78%);
}
.glow{position:fixed; border-radius:50%; filter:blur(120px); pointer-events:none; z-index:0}
.glow-a{width:640px; height:640px; top:-260px; left:50%; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(34,211,238,.20), transparent 68%)}
.glow-b{width:520px; height:520px; top:44vh; right:-200px;
  background:radial-gradient(circle, rgba(185,140,255,.11), transparent 70%)}

/* --------------------------------------------------------------- cube */
.cube{
  display:inline-grid; grid-template-columns:1fr 1fr; width:26px; height:26px;
  gap:2px; flex:none;
}
.cube i{background:var(--cyan-dim); border-radius:2px}
.cube i:nth-child(1),.cube i:nth-child(4){background:var(--cyan)}
.cube.small{width:18px; height:18px; gap:1.5px; vertical-align:-3px}

/* ---------------------------------------------------------------- nav */
.nav{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:28px;
  padding:14px 26px; max-width:var(--maxw); margin:0 auto;
  backdrop-filter:blur(14px);
}
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(5,7,10,.92), rgba(5,7,10,.55));
  border-bottom:1px solid var(--line);
}
.nav-brand{display:flex; align-items:center; gap:11px; text-decoration:none}
.nav-name{font-family:var(--pixel); font-size:17px; letter-spacing:.5px; color:var(--ink)}
.nav-links{display:flex; gap:6px; margin-left:auto}
.nav-links a{
  text-decoration:none; color:var(--muted); font-size:14.5px; font-weight:500;
  padding:7px 13px; border-radius:8px; transition:.16s;
}
.nav-links a:hover{color:var(--ink); background:rgba(34,211,238,.09)}
.nav-live{
  display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted);
  padding:7px 13px; border:1px solid var(--line); border-radius:999px;
  background:rgba(11,17,26,.7); white-space:nowrap;
}
.dot{width:8px; height:8px; border-radius:50%; background:var(--muted); flex:none}
.is-up .dot{background:var(--emerald); box-shadow:0 0 0 4px rgba(61,220,132,.16); animation:pulse 2.4s infinite}
.is-down .dot{background:var(--redstone); box-shadow:0 0 0 4px rgba(255,85,102,.16)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* --------------------------------------------------------------- hero */
.hero{position:relative; padding:74px 26px 64px; max-width:var(--maxw); margin:0 auto; z-index:1}
.hero-inner{position:relative; z-index:2; text-align:center}
.eyebrow{
  font-family:var(--pixel); font-size:11px; letter-spacing:1.6px; color:var(--cyan);
  text-transform:uppercase; margin:0 0 20px;
}
.wordmark{
  font-family:var(--pixel); font-weight:700; font-size:clamp(44px,9vw,86px);
  letter-spacing:1px; color:#fff; margin-bottom:18px;
  text-shadow:0 4px 0 #0b3d4a, 0 0 44px rgba(34,211,238,.5);
}
.wordmark span{color:var(--cyan)}
.tagline{
  font-size:clamp(16px,2.1vw,19px); color:var(--muted); max-width:600px;
  margin:0 auto 36px;
}

/* floating blocks */
.blocks{position:absolute; inset:0; z-index:1; pointer-events:none}
.blocks span{
  position:absolute; display:block; border-radius:3px;
  border:1px solid rgba(34,211,238,.30); background:rgba(34,211,238,.055);
  animation:drift linear infinite;
}
@keyframes drift{
  from{transform:translateY(18px) rotate(0deg); opacity:0}
  10%,90%{opacity:1}
  to{transform:translateY(-70px) rotate(180deg); opacity:0}
}

/* address */
.address-row{
  display:flex; gap:14px; justify-content:center; align-items:center;
  flex-wrap:wrap; margin-bottom:44px;
}
.address{
  display:flex; align-items:center; gap:16px; padding:13px 18px;
  background:linear-gradient(160deg, var(--raise), var(--panel));
  border:1px solid var(--line-2); border-radius:12px; color:var(--ink);
  box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 18px 40px -22px rgba(34,211,238,.7),
             inset 0 1px 0 rgba(255,255,255,.06);
  transition:.18s;
}
.address:hover{border-color:var(--cyan); transform:translateY(-1px)}
.address-label{
  font-family:var(--pixel); font-size:9.5px; letter-spacing:1px; color:var(--faint);
  text-transform:uppercase; border-right:1px solid var(--line); padding-right:15px;
}
.address-value{font-family:var(--mono); font-size:17px; font-weight:600; color:var(--cyan-hi)}
.address-copy{
  font-size:12px; font-weight:600; color:var(--bg); background:var(--cyan);
  padding:4px 11px; border-radius:6px; min-width:52px;
}
.address.copied .address-copy{background:var(--emerald)}
.status-pill{
  display:flex; align-items:center; gap:9px; padding:12px 18px; font-size:14px;
  border:1px solid var(--line); border-radius:12px; background:rgba(11,17,26,.65);
  color:var(--muted);
}

.hero-stats{
  display:flex; justify-content:center; gap:14px; flex-wrap:wrap;
  list-style:none; padding:0; margin:0;
}
.hero-stats li{
  min-width:150px; padding:18px 22px; border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(165deg, rgba(18,28,43,.8), rgba(11,17,26,.6));
}
.hero-stats b{display:block; font-family:var(--pixel); font-size:27px; color:var(--cyan-hi)}
.hero-stats span{font-size:12.5px; color:var(--muted)}

/* ------------------------------------------------------------ sections */
.section{max-width:var(--maxw); margin:0 auto; padding:56px 26px; position:relative; z-index:1}
.section-head{margin-bottom:30px}
.section-head h2{font-size:clamp(22px,3vw,29px); font-weight:700; letter-spacing:-.4px}
.hash{color:var(--cyan); font-family:var(--pixel); font-size:.72em; margin-right:8px}
.section-sub{color:var(--muted); margin:10px 0 0; max-width:640px; font-size:15px}

/* -------------------------------------------------------- server cards */
.server-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.server{
  position:relative; padding:22px; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(165deg, var(--panel-2), var(--panel));
  transition:.2s;
}
.server:hover{transform:translateY(-3px); border-color:var(--line-2)}
.server::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent)}
.server::after{
  content:""; position:absolute; top:-40%; right:-30%; width:220px; height:220px;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 68%);
  pointer-events:none;
}
.server.survival{--accent:var(--emerald)}
.server.creative{--accent:var(--amethyst)}
.server.lobby{--accent:var(--gold)}
.server.off{opacity:.62}
.server.off::before{background:var(--redstone)}
.srv-top{display:flex; align-items:center; gap:10px; margin-bottom:4px}
.srv-icon{
  width:30px; height:30px; border-radius:7px; flex:none; display:grid; place-items:center;
  background:color-mix(in srgb, var(--accent) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  font-size:15px;
}
.srv-name{font-size:17px; font-weight:600; text-transform:capitalize}
.srv-state{
  margin-left:auto; font-size:11px; font-family:var(--pixel); letter-spacing:.5px;
  padding:4px 9px; border-radius:6px;
  background:color-mix(in srgb, var(--accent) 15%, transparent); color:var(--accent);
}
.server.off .srv-state{background:rgba(255,85,102,.14); color:var(--redstone)}
.srv-desc{font-size:13.5px; color:var(--muted); margin:0 0 18px; min-height:40px}
.srv-players{display:flex; align-items:baseline; gap:8px; margin-bottom:9px}
.srv-players b{font-family:var(--pixel); font-size:24px; color:var(--ink)}
.srv-players span{font-size:13px; color:var(--muted)}
.bar{height:7px; border-radius:4px; background:rgba(255,255,255,.07); overflow:hidden; margin-bottom:16px}
.bar i{display:block; height:100%; background:linear-gradient(90deg, var(--accent), color-mix(in srgb,var(--accent) 45%, #fff)); border-radius:4px; transition:width .6s}
.srv-next{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-top:14px; border-top:1px solid var(--line); font-size:13px; color:var(--muted);
}
.srv-next b{font-family:var(--mono); color:var(--ink); font-size:13.5px}
.srv-next.soon b{color:var(--gold)}
.offline-note{
  margin:22px 0 0; padding:15px 18px; border-radius:11px; font-size:14px;
  border:1px solid rgba(255,185,73,.28); background:rgba(255,185,73,.07); color:#f2d9a8;
}

/* --------------------------------------------------------- schedule */
.schedule-wrap{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.sched{
  padding:20px 22px; border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(165deg, var(--panel-2), var(--panel));
}
.sched h3{font-size:15px; margin-bottom:4px; text-transform:capitalize}
.sched .who{font-size:13px; color:var(--muted); margin-bottom:16px}
.slots{display:flex; gap:8px; flex-wrap:wrap}
.slot{
  font-family:var(--mono); font-size:14px; font-weight:600; padding:8px 12px;
  border-radius:8px; background:rgba(34,211,238,.08);
  border:1px solid rgba(34,211,238,.20); color:var(--cyan-hi);
}
.slot.next{background:var(--cyan); color:var(--bg); border-color:var(--cyan)}
.clock-card{
  margin-top:16px; padding:18px 22px; border-radius:var(--r); font-size:14px;
  border:1px solid var(--line); background:rgba(11,17,26,.5); color:var(--muted);
}
.clock-card b{color:var(--ink); font-family:var(--mono)}

/* ------------------------------------------------------------- links */
.link-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.link{
  display:block; text-decoration:none; padding:22px; border-radius:var(--r);
  border:1px solid var(--line); background:linear-gradient(165deg,var(--panel-2),var(--panel));
  transition:.2s; position:relative; overflow:hidden;
}
.link:hover{transform:translateY(-3px); border-color:var(--cyan); box-shadow:0 20px 44px -26px rgba(34,211,238,.75)}
.link-kind{
  display:inline-block; font-family:var(--pixel); font-size:9.5px; letter-spacing:1px;
  text-transform:uppercase; padding:4px 9px; border-radius:5px; margin-bottom:14px;
  background:rgba(34,211,238,.13); color:var(--cyan); border:1px solid rgba(34,211,238,.25);
}
.link-kind.modrinth{background:rgba(61,220,132,.13); color:var(--emerald); border-color:rgba(61,220,132,.28)}
.link-kind.curseforge{background:rgba(255,185,73,.13); color:var(--gold); border-color:rgba(255,185,73,.28)}
.link-kind.guide{background:rgba(185,140,255,.13); color:var(--amethyst); border-color:rgba(185,140,255,.28)}
.link h3{font-size:17px; margin-bottom:7px}
.link p{margin:0; font-size:13.5px; color:var(--muted)}
.link .go{margin-top:15px; font-size:13px; color:var(--cyan); font-weight:600}
.link-empty{
  grid-column:1/-1; padding:34px; text-align:center; color:var(--muted); font-size:14.5px;
  border:1px dashed var(--line-2); border-radius:var(--r);
}
/* Deliberately the one warm block on the page: it carries the "read this before you
   join" message, so it should not read as another neutral panel. */
.notes{
  margin:20px 0 0; padding:16px 20px; border-radius:11px; font-size:14px;
  border:1px solid rgba(255,185,73,.30); border-left:3px solid var(--gold);
  background:rgba(255,185,73,.075); color:#f6dcaf; white-space:pre-wrap;
}

/* -------------------------------------------------------------- mods */
.mods-controls{display:flex; gap:12px; margin-bottom:22px; flex-wrap:wrap; align-items:center}
.search{position:relative; flex:1; min-width:210px}
.search svg{
  position:absolute; left:14px; top:50%; transform:translateY(-50%); width:17px; height:17px;
  fill:none; stroke:var(--faint); stroke-width:1.9; stroke-linecap:round; pointer-events:none;
}
.search input{
  width:100%; padding:12px 15px 12px 41px; border-radius:10px; font-size:14.5px;
  background:var(--panel); border:1px solid var(--line); color:var(--ink); font-family:inherit;
}
.search input:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(34,211,238,.13)}
.filters{display:flex; gap:7px; flex-wrap:wrap}
.chip{
  padding:10px 15px; border-radius:9px; font-size:13.5px; font-weight:500;
  background:var(--panel); border:1px solid var(--line); color:var(--muted); transition:.16s;
}
.chip:hover{color:var(--ink); border-color:var(--line-2)}
.chip.active{background:var(--cyan); border-color:var(--cyan); color:var(--bg); font-weight:600}

.mod-grid{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.mod{
  display:flex; align-items:center; gap:11px; padding:12px 14px; border-radius:10px;
  border:1px solid var(--line); background:var(--panel); transition:.16s;
  text-decoration:none; color:inherit; min-width:0;
}
.mod:hover{border-color:var(--line-2); background:var(--panel-2)}
a.mod:hover{border-color:var(--cyan)}
.mod-sq{width:9px; height:9px; border-radius:2px; flex:none; background:var(--emerald)}
/* Namespaced: a bare `.client`/`.server` here would collide with the server-card
   rules above and turn a 9px dot into a padded card. */
.mod-sq.side-client{background:var(--diamond)}
.mod-sq.side-server{background:var(--gold)}
.mod-name{font-size:13.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mod-ext{margin-left:auto; font-size:11px; color:var(--faint); flex:none}
.mod-empty{grid-column:1/-1; padding:34px; text-align:center; color:var(--muted)}
.more{
  display:block; margin:22px auto 0; padding:12px 26px; border-radius:10px; font-size:14px;
  font-weight:600; background:var(--panel-2); border:1px solid var(--line-2); color:var(--ink);
}
.more:hover{border-color:var(--cyan); color:var(--cyan)}

/* ------------------------------------------------------------ footer */
.footer{border-top:1px solid var(--line); margin-top:40px; padding:34px 26px; position:relative; z-index:1}
.footer-inner{
  max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between;
  align-items:center; gap:16px; flex-wrap:wrap; font-size:14px;
}
.footer-inner b{margin:0 4px 0 9px}

/* ------------------------------------------------------------ motion */
.reveal{opacity:0; transform:translateY(16px)}
.reveal.in{opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
}
@media (max-width:760px){
  .nav{gap:14px; padding:12px 18px}
  .nav-links{display:none}
  .hero{padding:48px 18px 44px}
  .section{padding:42px 18px}
  .address-label{display:none}
}