/* Elbe Labs: the brand shell (header, footer, type, buttons) and the studio's own pages
   (home, support, legal). A game page loads this first and then its own theme on top, so
   the header and footer are always the studio's and everything between them is the game's.

   Fonts are self-hosted on purpose: no request leaves elbelabs.com, so there is no third
   party to name in the privacy policy and nothing for a filter to block. */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Michroma";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/michroma-latin.woff2") format("woff2");
}

:root {
  /* The logo's own colours: white print, electric blue and signal red on near-black. */
  --el-black: #030409;
  --el-ink: #06080e;
  --el-panel: #0c1019;
  --el-panel-2: #121826;
  --el-line: rgba(255, 255, 255, 0.08);
  --el-line-2: rgba(255, 255, 255, 0.14);
  --el-text: #eef1f7;
  --el-dim: #aab2c2;
  --el-mute: #7b8497;
  --el-blue: #2c6bff;
  --el-blue-hi: #7aa2ff;
  --el-red: #ff2f3d;
  --el-red-hi: #ff6b74;
  --el-grad: linear-gradient(90deg, #2c6bff 0%, #7b5cff 50%, #ff2f3d 100%);
  --el-wrap: 1160px;
  --el-gutter: clamp(16px, 4vw, 40px);
  --el-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --el-display: "Michroma", "Manrope", system-ui, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--el-ink);
  color: var(--el-text);
  font: 400 17px/1.65 var(--el-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
main { flex: 1 0 auto; display: block; }
img, svg, video, iframe { max-width: 100%; }
img { height: auto; }
a { color: var(--el-blue-hi); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--el-blue-hi); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(44, 107, 255, 0.45); color: #fff; }

.el-wrap { width: min(100% - 2 * var(--el-gutter), var(--el-wrap)); margin-inline: auto; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.el-skip {
  position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px;
  background: #fff; color: #000; font-weight: 700; text-decoration: none;
}
.el-skip:focus { top: 8px; color: #000; }

/* ---------------------------------------------------------------- header */

.el-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(3, 4, 9, 0.88);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
}
/* The logo's two-colour rule, run under the whole bar. */
.el-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--el-grad); opacity: 0.6;
}
.el-header__row { position: relative; display: flex; align-items: center; gap: 20px; min-height: 66px; }
.el-brand { display: flex; align-items: center; gap: 11px; margin-right: auto; text-decoration: none; }
.el-brand img { display: block; }
.el-brand__mark { width: 40px; height: 40px; }
.el-brand__word { width: 122px; }

.el-nav ul { list-style: none; margin: 0; padding: 0; }
.el-nav > ul { display: flex; align-items: center; gap: 2px; }
.el-nav a, .el-nav summary {
  display: flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 10px;
  color: var(--el-dim); font-size: 15px; font-weight: 650; text-decoration: none; cursor: pointer;
}
.el-nav a:hover, .el-nav summary:hover, .el-nav details[open] > summary { color: #fff; background: rgba(255, 255, 255, 0.06); }
.el-nav a[aria-current="page"] { color: #fff; }
.el-nav summary { list-style: none; }
.el-nav summary::-webkit-details-marker { display: none; }
.el-nav summary::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); opacity: 0.7; transition: transform 0.2s ease;
}
.el-nav details[open] > summary::after { transform: rotate(225deg); margin-top: 3px; }
.el-nav details { position: relative; }
.el-nav details ul {
  position: absolute; top: calc(100% + 10px); left: -8px; min-width: 290px; padding: 8px;
  background: var(--el-panel); border: 1px solid var(--el-line-2); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.el-nav details li a { display: block; padding: 11px 13px; color: var(--el-text); }
.el-nav details li a small { display: block; margin-top: 2px; color: var(--el-mute); font-size: 13px; font-weight: 500; }
.el-nav details li a:hover small { color: var(--el-dim); }

.el-menu-btn {
  display: none; align-items: center; gap: 10px; padding: 9px 14px;
  border: 1px solid var(--el-line-2); border-radius: 10px; background: transparent;
  color: var(--el-text); font: 650 15px/1 var(--el-font); cursor: pointer;
}
.el-menu-btn i { position: relative; width: 16px; height: 2px; background: currentColor; border-radius: 2px; }
.el-menu-btn i::before, .el-menu-btn i::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; border-radius: 2px; }
.el-menu-btn i::before { top: -5px; }
.el-menu-btn i::after { top: 5px; }

@media (max-width: 780px) {
  .el-header__row { flex-wrap: wrap; }
  .el-nav { flex-basis: 100%; padding-bottom: 10px; }
  .el-nav > ul { flex-direction: column; align-items: stretch; }
  .el-nav a, .el-nav summary { padding: 13px 12px; font-size: 17px; }
  .el-nav details ul { position: static; min-width: 0; padding: 0 0 4px 14px; background: none; border: 0; box-shadow: none; }
  /* With script, the list folds behind the Menu button; without it, it simply shows. */
  .js .el-menu-btn { display: inline-flex; }
  .js .el-nav {
    display: none; position: absolute; top: 100%; left: calc(-1 * var(--el-gutter)); right: calc(-1 * var(--el-gutter));
    padding: 8px var(--el-gutter) 18px; background: var(--el-black); border-bottom: 1px solid var(--el-line-2);
  }
  .js .el-nav.is-open { display: block; }
}

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

.el-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px; border: 1px solid var(--el-line-2);
  background: rgba(255, 255, 255, 0.05); color: #fff;
  font: 700 15px/1 var(--el-font); letter-spacing: 0.01em; text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.el-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.3); transform: translateY(-1px); }
.el-btn--primary {
  border-color: transparent;
  background: linear-gradient(90deg, #2c6bff, #6a4dff 55%, #ff2f3d);
  box-shadow: 0 10px 30px -8px rgba(44, 107, 255, 0.55), 0 10px 30px -10px rgba(255, 47, 61, 0.45);
}
.el-btn--primary:hover { background: linear-gradient(90deg, #3a77ff, #7a5cff 55%, #ff4550); }
.el-btn svg { width: 16px; height: 16px; flex: none; }

/* ---------------------------------------------------------------- footer */

.el-footer { position: relative; background: var(--el-black); color: var(--el-dim); font-size: 15px; }
.el-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--el-grad); opacity: 0.5;
}
.el-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding: 60px 0 44px; }
.el-footer__brand img { display: block; width: 210px; margin: -6px 0 16px -6px; }
.el-footer__brand p { margin: 0 0 10px; max-width: 36ch; }
.el-footer h2 {
  margin: 0 0 16px; color: var(--el-mute);
  font: 400 11px/1.4 var(--el-display); letter-spacing: 0.24em; text-transform: uppercase;
}
.el-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.el-footer a { color: var(--el-dim); text-decoration: none; }
.el-footer a:hover { color: #fff; text-decoration: underline; }
.el-footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 28px;
  padding: 22px 0 30px; border-top: 1px solid var(--el-line); color: var(--el-mute); font-size: 13px;
}
.el-footer__base p { margin: 0; }
@media (max-width: 880px) {
  .el-footer__grid { grid-template-columns: repeat(3, 1fr); }
  .el-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .el-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
}

/* ---------------------------------------------------------------- shared type for studio pages */

.el-kicker {
  margin: 0 0 14px; color: var(--el-blue-hi);
  font: 400 12px/1.4 var(--el-display); letter-spacing: 0.28em; text-transform: uppercase;
}
.el-kicker--red { color: var(--el-red-hi); }
.el-h2 { margin: 0 0 16px; font-size: clamp(30px, 4.2vw, 46px); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; }
.el-lead { max-width: 62ch; margin: 0 0 40px; color: var(--el-dim); font-size: clamp(17px, 1.6vw, 19px); }
.el-section { padding: clamp(64px, 9vw, 112px) 0; }
.el-section + .el-section { padding-top: 0; }

/* ---------------------------------------------------------------- home */

.home-hero {
  position: relative; isolation: isolate; overflow: hidden; text-align: center;
  padding: clamp(28px, 5vw, 56px) 0 clamp(64px, 9vw, 104px);
  background:
    radial-gradient(ellipse 55% 45% at 30% 42%, rgba(44, 107, 255, 0.14), transparent 70%),
    radial-gradient(ellipse 55% 45% at 70% 42%, rgba(255, 47, 61, 0.12), transparent 70%),
    var(--el-black);
}
/* Mark on the left, name on the right, the way the social card sets them. */
.home-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(8px, 3vw, 40px); text-align: left; }
.home-hero__art {
  display: block; width: 100%; max-width: 620px; height: auto; margin: 0 auto;
  /* the light-wave runs to the art's edges; fade it out rather than cut it off */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.home-hero h1 { margin: 0; }
.home-hero__word { display: block; width: min(100%, 470px); }
.home-hero__tag { max-width: 30em; margin: 26px 0 34px; color: var(--el-dim); font-size: clamp(17px, 1.9vw, 20px); }
.home-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 900px) {
  .home-hero__grid { grid-template-columns: 1fr; text-align: center; }
  .home-hero__art { width: min(92vw, 520px); margin-bottom: -4%; }
  .home-hero__word { width: min(82vw, 420px); margin: 0 auto; }
  .home-hero__tag { margin: 22px auto 30px; }
  .home-hero__cta { justify-content: center; }
}

.game-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
/* Picture on top, words below on solid ground: nothing in either game's art is hidden
   under text, and the text never depends on what the picture behind it happens to be. */
.game-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 22px; border: 1px solid var(--el-line); background: var(--el-panel);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.game-card:hover { transform: translateY(-4px); border-color: var(--el-line-2); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.8); }
.game-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.game-card__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 35%; background: linear-gradient(to top, var(--el-panel), rgba(12, 16, 25, 0)); }
.game-card__bg { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.game-card:hover .game-card__bg { transform: scale(1.03); }
.game-card--hf .game-card__bg { object-position: 50% 72%; }
.game-card--mk .game-card__bg { object-position: 50% 45%; image-rendering: pixelated; }
.game-card__body { display: flex; flex-direction: column; flex: 1; padding: 6px clamp(22px, 3vw, 30px) clamp(24px, 3vw, 30px); }
.game-card__body .game-card__links { margin-top: auto; }
.game-card__logo { margin: 0 0 14px; }
.game-card__logo img { display: block; width: min(100%, 300px); height: auto; margin-left: -3px; }
.game-card__title-mk {
  margin: 0 0 12px; color: #d4a94e; font: 700 clamp(24px, 3vw, 30px)/1.05 Georgia, "Times New Roman", serif;
  letter-spacing: 0.1em; text-transform: uppercase; text-shadow: 0 3px 0 #2a1c0d;
}
.game-card__title-mk span { display: block; margin-top: 4px; color: #ece2cc; font-size: 0.62em; letter-spacing: 0.34em; }
.game-card h3 { margin: 0 0 8px; font-size: 22px; font-weight: 800; line-height: 1.25; }
.game-card p { margin: 0 0 18px; color: var(--el-dim); max-width: 46ch; }
.game-card__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.game-card__chips li { padding: 5px 11px; border: 1px solid var(--el-line-2); border-radius: 999px; color: var(--el-dim); font-size: 13px; font-weight: 600; }
.game-card__links { display: flex; flex-wrap: wrap; gap: 10px; }
/* The main link covers the card; the demo link sits above it. */
.game-card__main::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.game-card__links a { position: relative; }
.game-card__links a:not(.game-card__main) { z-index: 2; }
@media (max-width: 860px) {
  .game-cards { grid-template-columns: 1fr; }

}

.studio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.studio-panel {
  position: relative; overflow: hidden; padding: clamp(26px, 3.4vw, 40px); border-radius: 22px;
  border: 1px solid var(--el-line); background: linear-gradient(160deg, var(--el-panel-2), var(--el-panel) 60%);
}
.studio-panel::after {
  content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(44, 107, 255, 0.22), transparent 70%);
}
.studio-panel--red::after { background: radial-gradient(circle, rgba(255, 47, 61, 0.2), transparent 70%); }
.studio-panel h3 { margin: 0 0 10px; font-size: 26px; font-weight: 800; letter-spacing: -0.01em; }
.studio-panel p { position: relative; z-index: 1; margin: 0 0 14px; color: var(--el-dim); }
.studio-panel__icon { width: 44px; height: 44px; margin-bottom: 22px; }
.el-soon {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 12px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--el-text);
  font: 400 10.5px/1.4 var(--el-display); letter-spacing: 0.18em; text-transform: uppercase;
}
.el-soon::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--el-grad); }
@media (max-width: 760px) { .studio-grid { grid-template-columns: 1fr; } }

.home-about { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.home-about p { color: var(--el-dim); }
.home-about__card {
  padding: clamp(24px, 3vw, 36px); border-radius: 22px; border: 1px solid var(--el-line);
  background: var(--el-panel);
}
.home-about__card dl { display: grid; grid-template-columns: auto 1fr; gap: 12px 24px; margin: 0; }
.home-about__card dt { color: var(--el-mute); font: 400 11px/2 var(--el-display); letter-spacing: 0.18em; text-transform: uppercase; }
.home-about__card dd { margin: 0; }
@media (max-width: 760px) { .home-about { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- support and legal pages */

.doc-hero { padding: clamp(48px, 7vw, 88px) 0 clamp(28px, 4vw, 40px); border-bottom: 1px solid var(--el-line); }
.doc-hero h1 { margin: 0 0 12px; font-size: clamp(34px, 5vw, 54px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.doc-hero p { max-width: 62ch; margin: 0; color: var(--el-dim); font-size: 18px; }
.doc-hero .doc-date { margin-top: 14px; color: var(--el-mute); font-size: 14px; }
.doc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); padding: clamp(40px, 6vw, 72px) 0 clamp(64px, 9vw, 110px); }
.doc-toc { position: sticky; top: 96px; align-self: start; font-size: 14px; }
.doc-toc h2 { margin: 0 0 12px; color: var(--el-mute); font: 400 11px/1.4 var(--el-display); letter-spacing: 0.22em; text-transform: uppercase; }
.doc-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.doc-toc a { display: block; padding: 5px 0 5px 12px; border-left: 2px solid var(--el-line); color: var(--el-dim); text-decoration: none; }
.doc-toc a:hover { border-left-color: var(--el-blue); color: #fff; }
.doc-body { max-width: 72ch; }
.doc-body h2 { margin: 48px 0 12px; font-size: 24px; font-weight: 800; letter-spacing: -0.01em; scroll-margin-top: 96px; }
.doc-body h2:first-child { margin-top: 0; }
.doc-body h3 { margin: 28px 0 8px; font-size: 18px; font-weight: 750; }
.doc-body p, .doc-body li { color: #d3d8e2; }
.doc-body ul, .doc-body ol { padding-left: 22px; }
.doc-body li { margin: 6px 0; }
.doc-body strong { color: #fff; }
.doc-body table { width: 100%; margin: 16px 0 24px; border-collapse: collapse; font-size: 15px; }
.doc-body th, .doc-body td { padding: 11px 12px; border-bottom: 1px solid var(--el-line-2); text-align: left; vertical-align: top; }
.doc-body th { color: var(--el-mute); font: 400 11px/1.6 var(--el-display); letter-spacing: 0.14em; text-transform: uppercase; }
.doc-summary {
  margin: 0 0 40px; padding: 22px 24px; border-radius: 16px; border: 1px solid rgba(44, 107, 255, 0.35);
  background: linear-gradient(135deg, rgba(44, 107, 255, 0.1), rgba(255, 47, 61, 0.06));
}
.doc-summary h2 { margin: 0 0 10px; font-size: 18px; }
.doc-summary ul { margin: 0; }
.doc-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 20px 0 8px; }
.doc-card { padding: 20px 22px; border-radius: 16px; border: 1px solid var(--el-line); background: var(--el-panel); }
.doc-card h3 { margin: 0 0 6px; }
.doc-card p { margin: 0; color: var(--el-dim); font-size: 15px; }
.doc-contact {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
  margin: 0 0 40px; padding: 24px 26px; border-radius: 18px; border: 1px solid var(--el-line-2); background: var(--el-panel);
}
.doc-contact p { margin: 0; color: var(--el-dim); }
.doc-contact strong { display: block; color: #fff; font-size: 20px; }
@media (max-width: 860px) {
  .doc { grid-template-columns: 1fr; }
  .doc-toc { position: static; }
  .doc-card-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- 404 */

.el-404 { display: grid; place-items: center; min-height: 60vh; padding: 80px 0; text-align: center; }
.el-404 h1 { margin: 0 0 10px; font: 400 clamp(56px, 12vw, 120px)/1 var(--el-display); background: var(--el-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.el-404 p { margin: 0 auto 28px; color: var(--el-dim); max-width: 40ch; }

/* ---------------------------------------------------------------- screenshot lightbox (elbe.js) */

.el-lightbox {
  width: min(96vw, 1400px); max-width: none; max-height: 94vh; padding: 0; overflow: visible;
  border: 0; background: transparent; color: var(--el-text);
}
.el-lightbox::backdrop { background: rgba(2, 3, 6, 0.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.el-lightbox figure { margin: 0; }
.el-lightbox img { display: block; width: auto; max-width: 100%; max-height: 84vh; margin: 0 auto; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7); }
.el-lightbox figcaption { margin-top: 14px; text-align: center; color: var(--el-dim); font: 500 15px/1.5 var(--el-font); }
.el-lightbox button {
  position: fixed; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--el-line-2); background: rgba(12, 16, 25, 0.8); color: #fff;
  font: 400 30px/1 var(--el-font); cursor: pointer;
}
.el-lightbox button:hover { background: rgba(44, 107, 255, 0.35); }
.el-lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.el-lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }
.el-lightbox__close { right: 16px; top: 16px; font-size: 26px !important; }