/* Megabyte.world — landing page.
 *
 * Layout follows one metaphor and does not stray from it: the network is a
 * rack, each game is a numbered unit in it, and empty units are for sale. The
 * unit numbers are not decoration — they are the only ordering the page has,
 * and new games take the next free number.
 */

/* ── Topbar ─────────────────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(10, 13, 22, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rail);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 56px;
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--text);
}

/* The M on its own. The full lockup carries the wordmark, which at 56px of
   topbar would be a smear — so the topbar sets the name in type beside the
   mark instead. Same crop as the favicon, so the tab and the header agree. */
.brand-mark {
  width: 26px;
  height: 26px;
  flex: none;
  display: block;
}

@keyframes lamp {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.topbar__nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.topbar__link {
  padding: 7px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--dim);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.topbar__link:hover { color: var(--text); background: var(--rack); }

.topbar__link--cta {
  color: var(--brand);
  border: 1px solid var(--brand-dim);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.topbar__link--cta:hover { background: rgba(46, 155, 255, 0.12); color: var(--brand); }

@media (max-width: 640px) {
  .topbar__link--nav { display: none; }
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

/* No hero image and no lede: the page opens on the eyebrow and the live
   readout, then goes straight into the rack. The brand is already stated in the
   topbar, and repeating it at 240px only pushed the servers below the fold —
   which are the reason anyone opened this page. */
.hero {
  padding: 44px 0 32px;
  position: relative;
}

.hero__eyebrow {
  margin: 0 0 26px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero__eyebrow::after {
  content: '';
  height: 1px;
  flex: 1;
  background: var(--rail);
}

/* The live readout. One line, and every number in it is fetched — the page
   never claims a count it did not measure. */
.readout {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 28px;
  padding: 14px 18px;
  border: 1px solid var(--rail);
  border-left: 2px solid var(--brand);
  border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(46, 155, 255, 0.07), transparent 40%);
  font-size: 14px;
  color: var(--dim);
}

.readout__item { display: flex; align-items: baseline; gap: 9px; padding: 3px 0; }
.readout__value {
  font-family: var(--mono);
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--live);
}
.readout__value--muted { color: var(--chrome); }

.readout__stamp {
  margin-left: auto;
  font-size: 12px;
  color: var(--chrome);
}
.readout__stamp time { font-family: var(--mono); }

/* ── Rack ───────────────────────────────────────────────────────────────── */

.section {
  padding: 16px 0 54px;
}

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--rail);
}

.section__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

.section__note { font-size: 13px; color: var(--dim); }
.section__note--code {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}

.rack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.unit {
  --accent: var(--brand);
  display: grid;
  grid-template-columns: 62px 210px minmax(0, 1fr) 264px;
  align-items: stretch;
  background: var(--rack);
  border: 1px solid var(--rail);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s, transform 0.18s, background 0.18s;
  animation: unit-in 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: calc(180ms + var(--i, 0) * 90ms);
}

@keyframes unit-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.unit:hover {
  border-color: var(--accent);
  background: var(--rack-hi);
  transform: translateY(-2px);
}

/* Unit number + status lamp. The left rail of every unit is the accent colour,
   which is the only place a game's own colour appears in the chrome. */
.unit__bay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-right: 1px solid var(--rail);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent);
  box-shadow: inset 2px 0 0 var(--accent);
}

.unit__no {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
}

.unit__led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--chrome);
  transition: background 0.3s, box-shadow 0.3s;
}
.unit[data-state='up'] .unit__led {
  background: var(--live);
  box-shadow: 0 0 10px var(--live);
  animation: lamp 2.4s ease-in-out infinite;
}
.unit[data-state='down'] .unit__led { background: var(--down); box-shadow: 0 0 10px var(--down); }
.unit[data-state='degraded'] .unit__led { background: var(--wait); box-shadow: 0 0 10px var(--wait); }

/* The survey drawing as texture, with a pool of the unit's accent colour over
   it. The logo sits on top as a real element rather than a third background
   layer, so it can carry its own glow — background layers cannot be filtered
   separately, and the FiveM mark's navy half vanishes into the panel without
   one. */
/* The logo gets the panel to itself, on a plain ground.
 *
 * Two earlier versions put something behind it — a pool of the unit's accent
 * colour, then a faint survey drawing (contour map for the island, street plan
 * for the city). Both competed with artwork that already carries the game's
 * identity, and the logos read as washed out. Nothing goes back here. */
.unit__art {
  display: grid;
  place-items: center;
  padding: 12px;
  border-right: 1px solid var(--rail);
  background-color: #0d1120;
  min-height: 150px;
  overflow: hidden;
}

.unit__logo {
  max-width: 84%;
  max-height: 112px;
  width: auto;
  height: auto;
  transition: transform 0.3s;
}
.unit:hover .unit__logo { transform: scale(1.05); }

.unit__body {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.unit__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.unit__name {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.unit__kind {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 999px;
  padding: 3px 9px;
}

.unit__desc {
  margin: 0;
  font-size: 14px;
  color: var(--dim);
  max-width: 52ch;
}

.unit__host {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text);
}
.unit__host svg { transition: transform 0.2s; }
.unit:hover .unit__host { color: var(--accent); }
.unit:hover .unit__host svg { transform: translateX(4px); }

/* Telemetry column: three readings, always in the same order, so a returning
   visitor reads position instead of labels. */
.unit__tele {
  margin: 0;
  min-width: 0;
  padding: 18px 22px;
  border-left: 1px solid var(--rail);
  background: rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.tele { display: grid; grid-template-columns: 74px 1fr; align-items: baseline; gap: 10px; }

.tele__key {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}

.tele__val {
  margin: 0;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--text);
}
.tele__val .live { color: var(--live); }
.tele__val .of { color: var(--chrome); margin: 0 2px; }

.bar {
  grid-column: 2;
  height: 3px;
  border-radius: 2px;
  background: var(--rail);
  overflow: hidden;
}
.bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--live);
  transition: width 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.unit__state {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}
.unit[data-state='up'] .unit__state { color: var(--live); }
.unit[data-state='down'] .unit__state { color: var(--down); }
.unit[data-state='degraded'] .unit__state { color: var(--wait); }

/* Empty bay — a real thing in a rack, and the honest way to say "more coming"
   without inventing a game that does not exist yet. */
.unit--empty {
  grid-template-columns: 62px minmax(0, 1fr);
  background: transparent;
  border-style: dashed;
  border-color: var(--rail);
  cursor: default;
}
.unit--empty:hover { transform: none; border-color: var(--chrome); background: transparent; }
.unit--empty .unit__bay {
  background: none;
  box-shadow: inset 2px 0 0 var(--rail);
  border-right-style: dashed;
}
.unit--empty .unit__no { color: var(--chrome); }
.unit--empty .unit__body { padding: 22px; gap: 6px; }
.unit--empty .unit__name { font-size: 17px; color: var(--dim); font-weight: 600; }
.unit--empty .unit__slot { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--chrome); }
.unit--empty .unit__desc { font-size: 13px; }

/* ── Specs ──────────────────────────────────────────────────────────────── */

.specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--rail);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--rack);
}

.spec {
  padding: 20px 22px;
  border-right: 1px solid var(--rail);
}
.spec:last-child { border-right: 0; }

.spec__key {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}
.spec__val { margin: 8px 0 0; font-size: 15px; font-weight: 500; }
.spec__note { margin: 4px 0 0; font-size: 13px; color: var(--dim); }

@media (max-width: 900px) {
  .specs { grid-template-columns: repeat(2, 1fr); }
  .spec:nth-child(2n) { border-right: 0; }
  .spec:nth-child(-n + 2) { border-bottom: 1px solid var(--rail); }
}
@media (max-width: 520px) {
  .specs { grid-template-columns: 1fr; }
  .spec { border-right: 0; border-bottom: 1px solid var(--rail); }
  .spec:last-child { border-bottom: 0; }
}

/* ── Discord ────────────────────────────────────────────────────────────── */

.join {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 26px 28px;
  border: 1px solid var(--rail);
  border-left: 2px solid #5865f2;
  border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(88, 101, 242, 0.1), transparent 55%);
}

.join__title { margin: 0 0 4px; font-size: 20px; font-weight: 600; }
.join__text { margin: 0; font-size: 14px; color: var(--dim); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: var(--radius);
  background: #5865f2;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: filter 0.15s, transform 0.15s;
}
.btn:hover { filter: brightness(1.12); transform: translateY(-1px); }

/* ── Footer ─────────────────────────────────────────────────────────────── */

/* Equal padding top and bottom: the signature sits in the middle of the band,
   not near its top edge. */
.foot {
  border-top: 1px solid var(--rail);
  padding: 34px 0;
}

/* The hostname list that used to sit here is gone: every one of those links is
   already a rack unit above, and the Discord invite has its own panel. The
   footer's only job now is to sign the page. */
.foot__inner {
  display: flex;
  justify-content: center;
}

.foot__meta { margin: 0; font-size: 13px; color: var(--dim); text-align: center; }
.foot__meta span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--chrome); }

/* ── Narrow layouts ─────────────────────────────────────────────────────── */

@media (max-width: 1020px) {
  .unit { grid-template-columns: 54px 150px minmax(0, 1fr); }
  .unit__tele {
    grid-column: 2 / -1;
    border-left: 0;
    border-top: 1px solid var(--rail);
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 28px;
  }
  .tele { grid-template-columns: auto auto; align-items: center; }
  .bar { display: none; }
  .unit--empty { grid-template-columns: 54px minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .hero { padding: 56px 0 44px; }
  .unit { grid-template-columns: 46px minmax(0, 1fr); }
  .unit__art { grid-column: 2; min-height: 96px; border-right: 0; border-bottom: 1px solid var(--rail); }
  .unit__body { grid-column: 2; padding: 16px 18px; }
  .unit__tele { grid-column: 2; padding: 14px 18px; gap: 8px 18px; }
  .unit__name { font-size: 22px; }
  .unit--empty { grid-template-columns: 46px minmax(0, 1fr); }
  .readout { gap: 0 20px; }
}