/* Один файл, без сборки и без зависимостей — сайт статический и должен
   открываться просто с диска. Тёмная тема одна: страница про игру. */

:root {
  --bg: #0e1013;
  --card: #171a20;
  --line: #262b34;
  --text: #e6e8ec;
  --muted: #8b93a1;
  --accent: #6ee7a8;
  --accent-dim: #2b7a53;
  --bad: #ef6b6b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 4rem;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.wrap { max-width: 44rem; margin: 0 auto; padding: 0 1.25rem; }

header.wrap { padding-top: 3rem; }
h1 { margin: 0 0 .5rem; font-size: 2.5rem; letter-spacing: -.02em; }
h2 { margin: 2.5rem 0 .75rem; font-size: 1.15rem; text-transform: uppercase;
     letter-spacing: .08em; color: var(--muted); }
.lead { margin: 0; color: var(--muted); max-width: 34rem; }

.muted { color: var(--muted); font-size: .9rem; }
code { background: var(--card); border: 1px solid var(--line); border-radius: 4px;
       padding: .1rem .35rem; font-size: .9em; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem 1.15rem;
}

/* ---- статус ---- */

.status-head { display: flex; align-items: center; gap: .6rem; font-weight: 600; }

.dot {
  width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--muted); flex: none;
}
.status--up   .dot { background: var(--accent); box-shadow: 0 0 0 4px rgba(110,231,168,.15); }
.status--down .dot { background: var(--bad); }
.status--loading .dot { background: var(--muted); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }

.facts {
  display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem;
  margin: .9rem 0 0; font-size: .95rem;
}
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

.players { margin: .8rem 0 0; font-size: .95rem; }
.players b { color: var(--accent); font-weight: 600; }

/* ---- сборки ---- */

.builds { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }

.builds li {
  display: flex; align-items: center; gap: 1rem;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: .9rem 1.15rem;
}
.builds .os { font-weight: 600; }
.builds .note { color: var(--muted); font-size: .85rem; }
.builds .grow { flex: 1; min-width: 0; }

.builds a.dl {
  flex: none; text-decoration: none;
  color: #0e1013; background: var(--accent);
  border-radius: 6px; padding: .45rem .9rem; font-weight: 600; font-size: .9rem;
}
.builds a.dl:hover { background: #8bf0bd; }

.keys { margin: 0; padding-left: 1.1rem; color: var(--muted); }
.keys b { color: var(--text); }

@media (max-width: 30rem) {
  .builds li { flex-wrap: wrap; }
  h1 { font-size: 2rem; }
}