/* Mindustry @ Everlyce Research — server page.
   Reuses the Everlyce product theme (light surface, #3563b8 accent). */

:root {
  color-scheme: light;

  --bg:          #f7f8fa;
  --surface:     #ffffff;
  --surface-2:   #f2f4f8;
  --surface-3:   #e8ecf2;
  --border:      #e3e8ef;
  --border-2:    #cfd6e0;

  --text:        #10151d;
  --text-2:      #48566b;
  --muted:       #657184;

  --accent:      #3563b8;
  --accent-2:    #294f98;
  --accent-soft: #edf2fa;
  --on-accent:   #ffffff;
  --ok:          #1a8f5c;
  --ok-soft:     #e8f6ef;
  --bad:         #c0392b;
  --bad-soft:    #fdecea;

  --radius:    10px;
  --radius-sm: 8px;
  --radius-lg: 14px;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --shadow: 0 1px 2px rgba(16, 21, 29, 0.04), 0 12px 32px -18px rgba(16, 21, 29, 0.28);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--mono); font-size: 0.92em; }

.wrap { width: min(1080px, 100% - 40px); margin-inline: auto; }

/* ------------------------------------------------------------------ header */
.bar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.bar__inner {
  display: flex; align-items: center; gap: 24px;
  height: 60px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text); font-weight: 650; letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }
.brand img { display: block; }
.brand em { font-style: normal; color: var(--muted); font-weight: 500; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.nav a { color: var(--text-2); font-size: 14px; }
.nav a:hover { color: var(--text); text-decoration: none; }

/* ------------------------------------------------------------------- hero */
.hero { padding: 56px 0 12px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--accent);
  background: var(--accent-soft); border-radius: 999px;
  padding: 5px 12px;
}
.hero h1 {
  margin: 18px 0 12px;
  font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.08; letter-spacing: -0.025em; font-weight: 700;
}
.hero .lead { margin: 0; max-width: 62ch; color: var(--text-2); font-size: 17px; }

/* ------------------------------------------------------------------- grid */
.layout {
  display: grid; gap: 20px;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  padding: 34px 0 8px;
}
@media (max-width: 880px) { .layout { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 22px;
}
.card h2 {
  margin: 0 0 4px; font-size: 15px; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.card p.sub { margin: 0 0 18px; color: var(--text-2); font-size: 14px; }

/* ----------------------------------------------------------------- status */
.state { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.state--on { color: var(--ok); }
.state--on .dot { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.state--off { color: var(--bad); }
.state--off .dot { background: var(--bad); box-shadow: 0 0 0 4px var(--bad-soft); }

.stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; margin: 18px 0 0;
}
.stat {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.stat dt { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.stat dd { margin: 3px 0 0; font-size: 19px; font-weight: 650; letter-spacing: -0.01em; }
.stat dd small { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 3px; }

.players { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.players li {
  font-family: var(--mono); font-size: 12.5px;
  background: var(--accent-soft); color: var(--accent-2);
  border-radius: 999px; padding: 4px 11px;
}

/* ------------------------------------------------------------------ connect */
.addr {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: var(--radius); padding: 12px 14px;
  font-family: var(--mono); font-size: 16px; font-weight: 600;
}
.addr span { overflow-x: auto; white-space: nowrap; }
.addr button {
  margin-left: auto; flex: none;
  font: inherit; font-size: 12.5px; font-weight: 600;
  background: var(--surface); color: var(--accent);
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  padding: 6px 12px; cursor: pointer;
}
.addr button:hover { background: var(--accent-soft); }

.steps { margin: 18px 0 0; padding-left: 20px; color: var(--text-2); font-size: 14px; }
.steps li { margin-bottom: 8px; }
.steps li::marker { color: var(--muted); }

.note {
  margin: 18px 0 0; padding: 12px 14px;
  background: var(--accent-soft); border: 1px solid #d8e3f5;
  border-radius: var(--radius-sm); color: var(--text-2); font-size: 13.5px;
}

/* ------------------------------------------------------------------- rules */
.section { padding: 34px 0 60px; }
.section h2 { font-size: 22px; letter-spacing: -0.02em; margin: 0 0 16px; }
.cols { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 880px) { .cols { grid-template-columns: 1fr; } }
.cols .card h3 { margin: 0 0 6px; font-size: 15px; }
.cols .card p { margin: 0; color: var(--text-2); font-size: 14px; }

footer {
  border-top: 1px solid var(--border);
  padding: 22px 0 34px; color: var(--muted); font-size: 13.5px;
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
footer a { color: var(--muted); }
footer .spacer { margin-left: auto; }