/* ==========================================================================
   Old Servers — shared site chrome (portal)
   Enjin-2017 module anatomy, rebuilt. Tokens come from theme.css.
   ========================================================================== */
@font-face{font-family:"Monocraft";src:url("../fonts/monocraft.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Monocraft";src:url("../fonts/monocraft-bold.ttf") format("truetype");font-weight:700;font-display:swap}

:root{
  --bg-0:#070b08; --bg-1:#0d1510;
  --ink:#e9f3e5; --ink-dim:rgba(233,243,229,.62); --ink-faint:rgba(233,243,229,.40);
  --accent:#7ec850; --accent-bright:#a6e86f;
  --accent-soft:rgba(126,200,80,.14); --accent-line:rgba(126,200,80,.28);
  --glow:rgba(126,200,80,.30); --shadow-block:#1b2917; --art:none; --art-opacity:0;
  --panel:#0e1613; --panel-2:#111b17; --line:rgba(255,255,255,.09);
  --font-pixel:"Monocraft","Press Start 2P",ui-monospace,monospace;
  --font-ui:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg-0); color:var(--ink);
  font-family:var(--font-ui); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-bright); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- top bar ------------------------------------------------------------- */
.topbar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:18px;
  padding:0 20px; height:44px;
  background:rgba(6,10,8,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  font-size:12.5px;
}
.topbar .brand{
  font-family:var(--font-pixel); font-size:12px; letter-spacing:.18em;
  color:var(--ink); text-transform:uppercase; white-space:nowrap;
}
.topbar .brand span{color:var(--accent)}
.topbar .spacer{flex:1}
.topbar nav{display:flex; gap:2px; flex-wrap:wrap}
.topbar nav a{
  color:var(--ink-dim); padding:6px 10px; border-radius:5px;
  letter-spacing:.06em; text-transform:uppercase; font-size:11px;
}
.topbar nav a:hover{color:var(--ink); background:rgba(255,255,255,.05); text-decoration:none}
.topbar nav a.is-active{color:var(--accent-bright)}
.topbar .account{display:flex; gap:8px; color:var(--ink-faint); font-size:11px; white-space:nowrap}
.topbar .account b{color:var(--ink-dim); font-weight:500}

/* ---- hero ---------------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(5,9,7,.25) 0%, rgba(5,9,7,.72) 62%, var(--bg-0) 100%),
    var(--art) center 32%/cover no-repeat,
    radial-gradient(120% 90% at 50% 0%, var(--bg-1), var(--bg-0) 70%);
  min-height:min(74vh,620px);
  display:flex; align-items:center; justify-content:center;
  padding:64px 20px 40px;
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 60% at 50% 40%, transparent, rgba(0,0,0,.55));
}
.hero-inner{position:relative; z-index:2; text-align:center; width:100%; max-width:900px}

.hero .wordmark{width:min(520px,72vw); height:auto; margin:0 auto 22px; display:block;
  filter:drop-shadow(0 14px 40px rgba(0,0,0,.8))}
.hero .wordmark[hidden]{display:none}
.hero .emblem{width:104px; margin:0 auto 20px; display:block;
  filter:drop-shadow(0 0 28px var(--glow))}
.hero .eyebrow{
  margin:0 0 14px; font-family:var(--font-pixel); font-size:11px;
  letter-spacing:.4em; text-indent:.4em; text-transform:uppercase; color:var(--accent);
}
.hero h1{
  margin:0; font-family:var(--font-pixel); font-weight:400;
  font-size:clamp(26px,5.2vw,48px); line-height:1.12; letter-spacing:.01em;
  text-shadow:2px 2px 0 var(--shadow-block), 5px 5px 0 rgba(0,0,0,.4), 0 0 40px var(--glow);
}
.hero .tagline{margin:14px 0 0; color:var(--ink-dim); font-size:15px}

/* ip + players */
.join{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:26px 0 0}
.ipbtn{
  display:inline-flex; align-items:center; gap:10px; min-height:46px;
  padding:10px 20px; border:1px solid var(--accent-line); border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  color:var(--ink); font-family:var(--font-pixel); font-size:14px; letter-spacing:.05em;
  cursor:pointer; transition:border-color .18s, box-shadow .18s;
}
.ipbtn:hover,.ipbtn:focus-visible{border-color:var(--accent); box-shadow:0 0 26px -6px var(--glow); outline:none}
.ipbtn .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px 1px var(--glow)}
.ipbtn .copied{display:none;color:var(--accent-bright);letter-spacing:.16em}
.ipbtn .copyicon{color:var(--ink-faint)}
.ipbtn.is-copied .copyicon{display:none}
.ipbtn.is-copied .copied{display:inline}
.pill{
  display:inline-flex; align-items:center; gap:8px; min-height:46px; padding:10px 18px;
  border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.03);
  font-size:13px; color:var(--ink-dim);
}
.pill b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
.pill .led{width:8px;height:8px;border-radius:50%;background:#666;box-shadow:0 0 8px #666}
.pill.is-online .led{background:var(--accent);box-shadow:0 0 10px var(--glow)}
.pill.is-offline .led{background:#c2452f;box-shadow:0 0 10px rgba(194,69,47,.6)}

/* nav tiles */
.tiles{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,2.4vw,30px);
  max-width:720px; margin:36px auto 0;
}
.tile{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--ink); text-decoration:none; transition:transform .18s ease;
}
.tile:hover{transform:translateY(-3px); text-decoration:none}
.tile img{width:100%; max-width:132px; height:auto; aspect-ratio:1; border-radius:50%;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.65)); transition:filter .18s}
.tile:hover img{filter:drop-shadow(0 8px 26px var(--glow)) brightness(1.08)}
.tile span{
  font-family:var(--font-pixel); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-dim);
}
.tile:hover span{color:var(--accent-bright)}
/* fallback tile when a site has no icons */
.tile .fallback{
  width:100%; max-width:132px; aspect-ratio:1; border-radius:50%;
  border:1px solid var(--accent-line); background:var(--accent-soft);
  display:none; place-items:center; font-family:var(--font-pixel); font-size:26px; color:var(--accent);
}
.tile.no-icon img{display:none}
.tile.no-icon .fallback{display:grid}

/* ---- layout -------------------------------------------------------------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:46px 20px 80px}
.cols{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:26px; align-items:start}
@media (max-width:900px){ .cols{grid-template-columns:1fr} }

/* ---- Enjin-style module -------------------------------------------------- */
.module{
  border:1px solid var(--line); border-radius:8px; overflow:hidden;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  box-shadow:0 18px 40px -28px #000;
  margin-bottom:22px;
}
.module > header{
  display:flex; align-items:center; gap:12px;
  padding:0 14px; height:42px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
    var(--panel-2);
  border-bottom:1px solid var(--line);
}
.module > header::before{
  content:""; width:3px; height:18px; border-radius:2px;
  background:var(--accent); box-shadow:0 0 12px var(--glow); flex:none;
}
.module > header h2{
  margin:0; font-family:var(--font-pixel); font-weight:400;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
}
.module > header .meta{margin-left:auto; font-size:11px; color:var(--ink-faint); letter-spacing:.08em}
.module .body{padding:18px}

/* news list */
.news-item{padding:0 0 18px; margin:0 0 18px; border-bottom:1px solid var(--line)}
.news-item:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
.news-item h3{margin:0 0 6px; font-size:17px; font-weight:600; letter-spacing:.01em}
.news-item .when{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint)}
.news-item p{margin:8px 0 0; color:var(--ink-dim)}

/* status list */
.status-row{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); font-size:13px}
.status-row:last-child{border-bottom:0}
.status-row .name{color:var(--ink-dim)}
.status-row .val{margin-left:auto; font-family:var(--font-pixel); font-size:12px; color:var(--ink)}
.status-row .led{width:7px;height:7px;border-radius:50%;background:#666;flex:none}
.status-row.is-online .led{background:var(--accent);box-shadow:0 0 9px var(--glow)}
.status-row.is-offline .led{background:#c2452f}

/* thread list */
.thread-row{display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--line)}
.thread-row:last-child{border-bottom:0}
.thread-row .ti{width:16px;height:16px;margin-top:3px;flex:none}
.thread-row .t{min-width:0}
.thread-row a{color:var(--ink); font-size:14px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.thread-row a:hover{color:var(--accent-bright); text-decoration:none}
.thread-row .sub{font-size:11px; color:var(--ink-faint); margin-top:2px}
.thread-row .by{margin-left:auto; font-size:11px; color:var(--ink-faint); white-space:nowrap}

/* donate / top list */
.toplist{list-style:none;margin:0;padding:0;counter-reset:t}
.toplist li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.toplist li:last-child{border-bottom:0}
.toplist li::before{
  counter-increment:t; content:counter(t);
  width:20px;height:20px;display:grid;place-items:center;flex:none;
  font-family:var(--font-pixel);font-size:10px;color:var(--accent);
  border:1px solid var(--accent-line);border-radius:4px;background:var(--accent-soft);
}
.toplist .amt{margin-left:auto;color:var(--ink-faint);font-size:12px;font-variant-numeric:tabular-nums}

/* cta row */
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;padding:9px 18px;border-radius:7px;border:1px solid var(--accent-line);
  background:var(--accent-soft);color:var(--ink);font-size:13px;font-weight:600;letter-spacing:.04em;
  cursor:pointer;transition:background .16s,border-color .16s,transform .12s;
}
.btn:hover{background:rgba(126,200,80,.22);border-color:var(--accent);text-decoration:none;color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--ink-dim);font-weight:500}
.btn--ghost:hover{background:rgba(255,255,255,.05);border-color:var(--line);color:var(--ink)}

/* footer */
.sitefoot{
  border-top:1px solid var(--line); padding:28px 20px 40px; text-align:center;
  color:var(--ink-faint); font-size:12px; letter-spacing:.06em;
}
.sitefoot .row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.sitefoot a{color:var(--ink-dim)}
.sitefoot .fine{font-size:11px;opacity:.7}

/* utilities */
.muted{color:var(--ink-dim)}
.tiny{font-size:12px;color:var(--ink-faint)}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px}