@font-face {
  font-family: MystikLogo;
  src: url("/assets/fonts/Exo2-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: MystikSans;
  src: url("/assets/fonts/SpaceGrotesk-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: MystikSans;
  src: url("/assets/fonts/SpaceGrotesk-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: #0a090d;
  color: #f3eef8;
  font: 500 16px/1.4 MystikSans, "Segoe UI", sans-serif;
}

.grain {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 2;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.split {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.pane {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px 80px 80px;
  background:
    radial-gradient(800px 420px at 0% 100%, rgba(168, 85, 247, 0.14), transparent 60%),
    #0c0b10;
}

.mark {
  position: absolute;
  top: 36px;
  left: 80px;
  font-family: MystikLogo, sans-serif;
  font-size: 13px;
  letter-spacing: 0.46em;
  color: rgba(243, 238, 248, 0.72);
}

.block { max-width: 360px; }

.game {
  font-family: MystikLogo, MystikSans, sans-serif;
  font-size: clamp(48px, 6vw, 72px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin-bottom: 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 22px;
  border-radius: 4px;
  background: #a855f7;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.btn:hover { background: #9333ea; }

.art {
  min-height: 100vh;
  background:
    linear-gradient(90deg, #0c0b10 0%, transparent 18%),
    url("/assets/games/deadlock-v.jpg") center / cover no-repeat;
}

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .art { min-height: 46vh; order: -1; background-image: url("/assets/games/deadlock.jpg"); }
  .pane { padding: 40px 28px 56px; min-height: 54vh; }
  .mark { position: static; margin-bottom: 36px; left: auto; top: auto; }
}