/* ===========================================================================
   MNGAMES — the public page.

   Same palette as the launcher, deliberately: someone who sees this page and
   then opens the launcher should not wonder whether they downloaded the right
   thing. One orange, used only where the visitor is meant to act — everything
   else greyscale with a warm cast.

   The page breathes more than the launcher does. A tool earns density; a page
   that is trying to explain something has to be read by a stranger in eight
   seconds.
   ========================================================================= */

/* Latin subsets only — the site is English, so the cyrillic cuts would be
   132KB of nothing. `swap` so the words are readable before the font lands;
   a blank hero for 400ms is worse than one frame of the fallback. */
@font-face {
  font-family: 'Unbounded'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('Unbounded-700-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Golos Text'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('GolosText-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Golos Text'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('GolosText-600-latin.woff2') format('woff2');
}

:root {
  --black: #0a0807;
  --deep: #100d0b;
  --panel: #17130f;
  --panel-2: #1e1813;
  --raise: #271f18;
  --line: #2c241d;
  --line-2: #3b3025;

  --text: #f0e9e3;
  --text-2: #a89a8d;
  --text-3: #7a6d61;

  --hot: #ec6a1e;
  --hot-2: #ff8438;
  --hot-dim: rgba(236, 106, 30, 0.14);
  --live: #3fbf62;
  --warn: #e8a33c;
  --bad: #e8544e;

  --ui: 'Golos Text', 'Segoe UI Variable Text', 'Segoe UI', system-ui, Roboto, Arial, sans-serif;
  /* Unbounded is the whole personality. It is geometric and wide, so it is
     confined to headings and the wordmark — set as body text it is unreadable. */
  --disp: 'Unbounded', 'Segoe UI Variable Display', 'Segoe UI Semibold', system-ui, sans-serif;
  --mono: 'Cascadia Mono', Consolas, ui-monospace, monospace;

  --wide: 1180px;
  --nav-h: 62px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 18px); }

body {
  font-family: var(--ui); font-size: 15px; line-height: 1.55;
  color: var(--text); background: var(--black);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
svg { width: 16px; height: 16px; fill: none; stroke: currentColor;
      stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
img { max-width: 100%; display: block; }

h1, h2, h3 { font-family: var(--disp); font-weight: 700; letter-spacing: -0.01em; }

/* --------------------------------------------------------------- nav ----- */

.nav {
  position: sticky; top: 0; z-index: 40;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 26px;
  padding: 0 28px;
  background: rgba(10, 8, 7, 0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.brand img { width: 30px; height: 30px; object-fit: contain; }
.brand span { display: flex; flex-direction: column; line-height: 1.15; }
.brand b {
  font-family: var(--disp); font-size: 13px; letter-spacing: 0.04em;
}
.brand i { font-style: normal; font-size: 10.5px; color: var(--text-3);
           letter-spacing: 0.05em; text-transform: uppercase; }

.links { display: flex; gap: 24px; }
.links a {
  font-size: 13.5px; color: var(--text-2); padding: 6px 0;
  border-bottom: 1.5px solid transparent;
}
.links a:hover { color: var(--text); border-bottom-color: var(--hot); }

/* --------------------------------------------------------- buttons ------- */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px;
  font-family: var(--ui); font-size: 13px; font-weight: 600;
  color: var(--text); background: var(--panel-2);
  border: 1px solid var(--line-2); border-radius: 3px;
  transition: background .12s, border-color .12s, transform .12s;
}
.btn:hover { background: var(--raise); border-color: var(--text-3); }
.btn:active { transform: translateY(1px); }

.btn.go {
  color: #1a0d04; background: var(--hot); border-color: var(--hot);
}
.btn.go:hover { background: var(--hot-2); border-color: var(--hot-2); }

.btn.big { padding: 13px 20px; }
.btn.big svg { width: 19px; height: 19px; }
.ba { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.ba b { font-size: 14px; }
.ba i { font-style: normal; font-size: 11px; font-weight: 500; opacity: .72; }

/* ------------------------------------------------------------- hero ------ */

.hero {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero-art {
  position: absolute; inset: 0;
  background: url('hero-wide.jpg') center / cover no-repeat;
  opacity: .5;
}
/* Two washes: one to hold the left column readable at any image, one to sink
   the bottom edge into the stats bar so there is no visible seam. */
.hero::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, var(--black) 4%, rgba(10,8,7,.92) 34%, rgba(10,8,7,.35) 66%, rgba(10,8,7,.6) 100%),
    linear-gradient(to top, var(--black) 1%, transparent 34%);
}

.hero-in {
  position: relative; z-index: 1;
  max-width: var(--wide); margin: 0 auto;
  padding: 96px 28px 88px;
}
/* Unbounded runs much wider than a UI face at the same size, so every display
   size below is smaller and tighter than it would be for Segoe. Dropping the
   font in without retuning these is what makes headings wrap badly. */
.hero h1 {
  font-size: clamp(30px, 4.1vw, 50px); line-height: 1.06;
  max-width: 15ch; text-transform: uppercase; letter-spacing: -0.03em;
}
.hero h1 b { color: var(--hot); font-weight: 700; }
.hero-in > p {
  margin-top: 20px; max-width: 52ch;
  font-size: 16.5px; color: var(--text-2);
}
.hero-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* ------------------------------------------------------------ stats ------ */

.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: var(--wide); margin: 0 auto;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--deep);
}
.stat {
  padding: 20px 24px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px;
}
.stat:last-child { border-right: 0; }
.stat b {
  font-family: var(--disp); font-size: 24px; line-height: 1.1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat i {
  font-style: normal; font-size: 11px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.07em;
}
.stat.warmed b { color: var(--hot); }

/* When every figure is zero the row stops being a boast and becomes a caption.
   The numbers are unchanged — only their volume is. */
.stats.quiet .stat b { color: var(--text-2); font-size: 19px; }
/* Container-width block so it lines up with every other left edge on the page;
   the inner span is what caps the measure. */
.stats-quiet {
  max-width: var(--wide); margin: 14px auto 0; padding: 0 28px;
  font-size: 13.5px; color: var(--text-3);
}
.stats-quiet span { display: block; max-width: 74ch; }

/* ------------------------------------------------------------ bands ------ */

.band { max-width: var(--wide); margin: 0 auto; padding: 74px 28px 0; }
.band:last-of-type { padding-bottom: 74px; }

.band-h { margin-bottom: 28px; }
.band-h h2 {
  font-size: 22px; text-transform: uppercase; letter-spacing: -0.02em;
}
.band-h h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .02em;
             color: var(--text-2); }
.band-h > p { margin-top: 10px; max-width: 62ch; color: var(--text-2); font-size: 15px; }
.band-h.sub { margin-top: 42px; margin-bottom: 16px; }

/* Small orange rule above every section heading — the one repeated ornament,
   which is what keeps a long page feeling like one page. */
.band-h h2::before {
  content: ''; display: block; width: 34px; height: 3px;
  background: var(--hot); margin-bottom: 14px;
}

.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card {
  padding: 24px 22px 26px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
}
.card .ci {
  display: grid; place-items: center; width: 40px; height: 40px;
  background: var(--hot-dim); border: 1px solid rgba(236,106,30,.3);
  border-radius: 4px; color: var(--hot); margin-bottom: 16px;
}
.card .ci svg { width: 21px; height: 21px; }
.card b { font-family: var(--disp); font-size: 14px; display: block; line-height: 1.3; }
.card p { margin-top: 8px; color: var(--text-2); font-size: 14px; }

/* --------------------------------------------------------- showcase ------ */

.showcase {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 20px; align-items: start;
}

.shot {
  border: 1px solid var(--line-2); border-radius: 5px; overflow: hidden;
  background: var(--deep);
  /* Lifted off the page so it reads as a window, not a flat illustration. */
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
}
.shot img { width: 100%; height: auto; display: block; }

/* ------------------------------------------------------------ steps ------ */

.steps {
  display: flex; flex-direction: column; gap: 12px;
  list-style: none;
}
.step {
  padding: 18px 20px 20px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  position: relative;
}
.step .sn {
  font-family: var(--disp); font-size: 11px; font-weight: 700;
  display: grid; place-items: center; width: 25px; height: 25px;
  color: #1a0d04; background: var(--hot); border-radius: 3px; margin-bottom: 12px;
}
.step b { font-family: var(--disp); font-size: 13.5px; display: block; line-height: 1.3; }
.step p { margin-top: 7px; color: var(--text-2); font-size: 13.5px; }

/* ------------------------------------------------------------ rooms ------ */

.rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.room {
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  padding: 16px 18px 17px;
  display: flex; flex-direction: column; gap: 10px;
}
.room-top { display: flex; align-items: baseline; gap: 9px; }
.room-top b { font-family: var(--disp); font-size: 13px; letter-spacing: -0.01em; }
.tag {
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 2px;
  color: var(--hot); background: var(--hot-dim); border: 1px solid rgba(236,106,30,.3);
}
.tag.free { color: var(--text-2); background: var(--raise); border-color: var(--line-2); }
.room-note { font-size: 12.5px; color: var(--text-3); }

.bar { height: 4px; background: var(--raise); border-radius: 2px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--hot); }
.room-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums;
}
.room-foot em { font-style: normal; color: var(--text); font-weight: 600; }

/* ------------------------------------------------------------ games ------ */

.games { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.game {
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  overflow: hidden;
}
.game .cov {
  height: 104px; background: var(--raise) center / cover no-repeat;
  border-bottom: 1px solid var(--line); position: relative;
}
.game .cov::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,8,7,.85), transparent 62%);
}
.game .gi { padding: 12px 14px 14px; }
.game .gi b {
  font-family: var(--disp); font-size: 12.5px; display: block; letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.game .gi span { display: block; font-size: 12px; color: var(--text-3);
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* An empty list is a normal state on a young platform, not an error. It gets
   the same panel treatment as content so the page does not look broken. */
.empty {
  grid-column: 1 / -1;
  padding: 30px 24px; text-align: center;
  background: var(--panel); border: 1px dashed var(--line-2); border-radius: 4px;
  color: var(--text-3); font-size: 14px;
}
.empty b { display: block; color: var(--text-2); font-family: var(--disp);
           font-size: 15px; margin-bottom: 4px; }

/* -------------------------------------------------------------- cta ------ */

.cta {
  max-width: var(--wide); margin: 74px auto 0;
  padding: 34px 32px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 20px;
  background:
    linear-gradient(100deg, rgba(236,106,30,.13), rgba(236,106,30,.03) 62%),
    var(--panel);
  border: 1px solid rgba(236,106,30,.28); border-radius: 4px;
}
.cta h2 { font-size: 19px; text-transform: uppercase; letter-spacing: -0.02em; }
.cta p { margin-top: 6px; color: var(--text-2); font-size: 14px; }

/* ------------------------------------------------------------- foot ------ */

.foot {
  margin-top: 74px;
  border-top: 1px solid var(--line); background: var(--deep);
}
.foot > * { max-width: var(--wide); margin: 0 auto; padding-left: 28px; padding-right: 28px; }

.f-brand { display: flex; align-items: center; gap: 11px; padding-top: 40px; }
.f-brand img { width: 28px; height: 28px; object-fit: contain; }
.f-brand span { display: flex; flex-direction: column; line-height: 1.15; }
.f-brand b { font-family: var(--disp); font-size: 12.5px; letter-spacing: .04em; }
.f-brand i { font-style: normal; font-size: 10.5px; color: var(--text-3);
             letter-spacing: .05em; text-transform: uppercase; }

.f-cols { display: flex; gap: 72px; padding-top: 24px; padding-bottom: 34px; }
.f-cols > div { display: flex; flex-direction: column; gap: 8px; }
.f-cols b { font-family: var(--disp); font-size: 12px; text-transform: uppercase;
            letter-spacing: .08em; color: var(--text-3); margin-bottom: 2px; }
.f-cols a { font-size: 14px; color: var(--text-2); }
.f-cols a:hover { color: var(--hot); }

.f-end {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  padding-top: 16px; padding-bottom: 30px;
  border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-3);
}
.dot-line { display: inline-flex; align-items: center; gap: 7px; }
.dot-line > i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-3); font-style: normal;
}
.dot-line.up > i { background: var(--live); box-shadow: 0 0 0 3px rgba(63,191,98,.16); }
.dot-line.down > i { background: var(--bad); }

/* ----------------------------------------------------------- motion ------ */

@keyframes rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .26s ease-out both; }

/* Scroll reveal. The initial state is applied by script, not by the sheet, so
   that a visitor with JavaScript off still sees every section — a CSS-only
   `opacity: 0` would leave them a blank page. */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .5s ease-out, transform .5s ease-out; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------- narrow -------- */

@media (max-width: 980px) {
  .cards3, .rooms { grid-template-columns: 1fr 1fr; }
  .games { grid-template-columns: 1fr 1fr; }
  .showcase { grid-template-columns: 1fr; }
  .hero-in { padding: 68px 24px 62px; }
}
@media (max-width: 680px) {
  .links { display: none; }
  .cards3, .rooms, .games { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line); }
  .f-cols { gap: 40px; }
}