:root {

  --bg: #070a12;

  --bg-2: #0c111f;

  --surface: rgba(16, 22, 35, 0.72);

  --surface-strong: rgba(18, 25, 40, 0.92);

  --line: rgba(255, 255, 255, 0.08);

  --text: #f7f7f2;

  --muted: #98a0b3;

  --accent: #ffb703;

  --accent-2: #6ae4ff;

  --accent-3: #ff4d8d;

  --shadow: 0 28px 80px rgba(4, 7, 14, 0.45);

  --radius: 22px;

  --font-title: "Syne", sans-serif;

  --font-body: "Space Grotesk", sans-serif;

}


* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}


body {

  font-family: var(--font-body);

  background: var(--bg);

  color: var(--text);

  min-height: 100vh;

  line-height: 1.6;

  overflow-x: hidden;

}


.backdrop {

  position: fixed;

  inset: 0;

  z-index: -2;

  background:

    radial-gradient(1200px 900px at 15% 10%, rgba(255, 183, 3, 0.18), transparent 70%),

    radial-gradient(900px 700px at 85% 20%, rgba(106, 228, 255, 0.16), transparent 60%),

    radial-gradient(1000px 900px at 60% 90%, rgba(255, 77, 141, 0.12), transparent 70%),

    linear-gradient(180deg, #05060b 0%, #0c111f 50%, #05060b 100%);

}


.backdrop__grid {

  position: absolute;

  inset: -10% 0;

  background-image:

    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);

  background-size: 80px 80px;

  opacity: 0.2;

  transform: perspective(800px) rotateX(45deg) translateY(-120px);

  transform-origin: top;

}


.backdrop__glow {

  position: absolute;

  width: 420px;

  height: 420px;

  border-radius: 50%;

  filter: blur(80px);

  opacity: 0.7;

}


.glow--one {

  background: rgba(255, 183, 3, 0.35);

  top: -140px;

  left: -120px;

}


.glow--two {

  background: rgba(106, 228, 255, 0.35);

  bottom: -120px;

  right: -140px;

}


.glow--three {

  background: rgba(255, 77, 141, 0.3);

  top: 40%;

  left: 50%;

  transform: translate(-50%, -50%);

}


.backdrop__grain {

  position: absolute;

  inset: 0;

  opacity: 0.18;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

  mix-blend-mode: soft-light;

}


.topbar {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 28px 8vw 0;

  gap: 20px;

}


.brand {

  display: flex;

  align-items: center;

  gap: 14px;

}


.brand__mark {

  width: 44px;

  height: 44px;

  border-radius: 14px;

  display: grid;

  place-items: center;

  background: linear-gradient(140deg, var(--accent), var(--accent-3));

  color: #0b0e14;

  font-weight: 700;

  font-family: var(--font-title);

  font-size: 1.2rem;

  box-shadow: var(--shadow);

}


.brand__text {

  display: grid;

}


.brand__name {

  font-family: var(--font-title);

  font-weight: 700;

  letter-spacing: 0.02em;

}


.brand__url {

  color: var(--muted);

  font-size: 0.85rem;

}


.topbar__actions {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

}


.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 12px 22px;

  border-radius: 999px;

  text-decoration: none;

  font-weight: 600;

  font-size: 0.95rem;

  border: 1px solid transparent;

  transition: transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;

}


.btn--solid {

  background: linear-gradient(120deg, var(--accent), var(--accent-2));

  color: #0b0d10;

  box-shadow: var(--shadow);

}


.btn--ghost {

  background: rgba(12, 16, 24, 0.5);

  border-color: var(--line);

  color: var(--text);

}


.btn:hover {

  transform: translateY(-2px);

}


.hero {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

  align-items: center;

  gap: 30px;

  padding: 54px 8vw 10px;

}


.hero__copy {

  max-width: 580px;

}


.eyebrow {

  text-transform: uppercase;

  letter-spacing: 0.2em;

  font-size: 0.7rem;

  color: var(--muted);

  margin-bottom: 16px;

}


h1 {

  font-family: var(--font-title);

  font-size: clamp(2.6rem, 4vw, 4.8rem);

  line-height: 1.05;

  margin-bottom: 18px;

}


.tagline {

  font-size: 1.1rem;

  color: var(--muted);

  margin-bottom: 22px;

}


.hero__stats {

  display: grid;

  gap: 14px;

  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

}


.stat {

  padding: 16px 18px;

  border-radius: 16px;

  background: rgba(12, 16, 26, 0.65);

  border: 1px solid var(--line);

  box-shadow: var(--shadow);

  display: grid;

  gap: 6px;

}


.stat span:first-child {

  font-size: 1.5rem;

  font-weight: 700;

}


.hero__art {

  position: relative;

  min-height: 280px;

  display: grid;

  place-items: center;

}


.orb {

  width: 240px;

  height: 240px;

  border-radius: 50%;

  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.5), transparent 55%),

    radial-gradient(circle at 60% 20%, rgba(255, 183, 3, 0.8), transparent 60%),

    radial-gradient(circle at 60% 70%, rgba(106, 228, 255, 0.6), transparent 65%),

    rgba(12, 16, 26, 0.8);

  filter: blur(1px);

  box-shadow: var(--shadow);

  animation: orbPulse 10s ease-in-out infinite;

}


.showcase {

  position: absolute;

  inset: 0;

  display: grid;

  place-items: center;

}


.showcase__tile {

  position: absolute;

  width: 220px;

  height: 140px;

  border-radius: 18px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  background: linear-gradient(140deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02));

  box-shadow: var(--shadow);

  backdrop-filter: blur(14px);

  animation: float 8s ease-in-out infinite;

  --x: 0px;

  --y: 0px;

  --r: 0deg;

}


.tile--a {

  --x: -80px;

  --y: -40px;

  --r: -6deg;

  background: linear-gradient(140deg, rgba(255, 183, 3, 0.2), rgba(12, 16, 26, 0.2));

}


.tile--b {

  --x: 90px;

  --y: -20px;

  --r: 8deg;

  animation-delay: 1.6s;

}


.tile--c {

  --x: -40px;

  --y: 80px;

  --r: 4deg;

  background: linear-gradient(140deg, rgba(106, 228, 255, 0.18), rgba(12, 16, 26, 0.2));

  animation-delay: 2.4s;

}


.tile--d {

  --x: 70px;

  --y: 90px;

  --r: -10deg;

  background: linear-gradient(140deg, rgba(255, 77, 141, 0.2), rgba(12, 16, 26, 0.2));

  animation-delay: 0.8s;

}


.ticker {

  margin: 16px 0 40px;

  overflow: hidden;

  border-top: 1px solid var(--line);

  border-bottom: 1px solid var(--line);

  background: rgba(9, 12, 20, 0.6);

}


.ticker__track {

  display: flex;

  gap: 28px;

  padding: 12px 0;

  white-space: nowrap;

  animation: ticker 20s linear infinite;

  font-size: 0.95rem;

  color: var(--muted);

}


.ticker__item {

  display: inline-flex;

  align-items: center;

  gap: 10px;

}


.ticker__dot {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: var(--accent);

  box-shadow: 0 0 10px rgba(255, 183, 3, 0.6);

}


.container {

  padding: 0 8vw 80px;

}


.section-head {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 18px;

  margin-bottom: 20px;

}


.section-eyebrow {

  text-transform: uppercase;

  letter-spacing: 0.22em;

  font-size: 0.65rem;

  color: var(--muted);

  margin-bottom: 10px;

}


h2 {

  font-family: var(--font-title);

  font-size: clamp(1.6rem, 3vw, 2.4rem);

}


.ghost-link {

  color: var(--text);

  text-decoration: none;

  font-weight: 600;

  border-bottom: 1px solid transparent;

  transition: border 0.2s ease;

}


.ghost-link:hover {

  border-color: var(--text);

}


.spotlight {

  margin-bottom: 40px;

}


.spotlight__grid {

  display: grid;

  gap: 20px;

  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

}


.library {

  margin-top: 20px;

}


.search {

  position: relative;

  min-width: 220px;

}


.search input {

  width: 100%;

  padding: 12px 18px 12px 40px;

  border-radius: 999px;

  border: 1px solid var(--line);

  background: rgba(10, 14, 22, 0.7);

  color: var(--text);

  font-size: 0.95rem;

}


.search::before {

  content: "";

  position: absolute;

  width: 16px;

  height: 16px;

  left: 16px;

  top: 50%;

  transform: translateY(-50%);

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398a0b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");

  background-size: contain;

  background-repeat: no-repeat;

}


.filters {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-bottom: 20px;

}


.filter-btn {

  padding: 8px 16px;

  border-radius: 999px;

  border: 1px solid transparent;

  background: rgba(20, 26, 36, 0.8);

  color: var(--muted);

  font-size: 0.82rem;

  cursor: pointer;

  transition: all 0.2s ease;

  position: relative;

}


.filter-btn::after {

  content: attr(data-count);

  margin-left: 8px;

  color: rgba(255, 255, 255, 0.6);

  font-weight: 600;

}


.filter-btn[data-active="true"] {

  border-color: var(--accent-2);

  color: var(--text);

  background: rgba(106, 228, 255, 0.16);

}


.grid {

  display: grid;

  gap: 22px;

  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

}


.game-card {

  position: relative;

  border-radius: var(--radius);

  overflow: hidden;

  background: var(--surface);

  border: 1px solid var(--line);

  box-shadow: var(--shadow);

  display: grid;

  grid-template-rows: auto 1fr auto;

  min-height: 280px;

  transform: translateY(14px) scale(0.98);

  opacity: 0;

  animation: cardRise 0.7s ease forwards;

  animation-delay: var(--delay, 0ms);

}


.game-card::before {

  content: "";

  position: absolute;

  inset: 0;

  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.12), transparent 45%);

  opacity: 0.6;

  pointer-events: none;

}


.game-card:hover {

  transform: translateY(-6px) scale(1.01);

  transition: transform 0.25s ease;

}


.game-card--spotlight {

  min-height: 320px;

}


.game-card__media {

  position: relative;

  min-height: 150px;

  background:

    radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.2), transparent 45%),

    linear-gradient(120deg, var(--accent, #ffb703), var(--accent-2, #6ae4ff));

  display: grid;

  place-items: center;

  overflow: hidden;

}


.game-card__media.has-cover {

  background-size: cover;

  background-position: center;

}


.game-card__media img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}


.game-card__media::after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(180deg, transparent, rgba(7, 10, 18, 0.5));

}


.game-card__badge {

  position: absolute;

  top: 14px;

  left: 14px;

  padding: 6px 12px;

  border-radius: 999px;

  background: rgba(7, 10, 18, 0.8);

  color: var(--text);

  font-size: 0.7rem;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  z-index: 2;

  border: 1px solid rgba(255, 255, 255, 0.2);

}


.game-card__glyph {

  font-family: var(--font-title);

  font-size: 2.8rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  color: rgba(6, 9, 16, 0.75);

  z-index: 2;

  text-shadow: 0 12px 40px rgba(5, 7, 12, 0.4);

}


.game-card__body {

  padding: 18px;

  display: grid;

  gap: 10px;

}


.game-card__title {

  font-size: 1.1rem;

  font-weight: 700;

}


.game-card__desc {

  color: var(--muted);

  font-size: 0.95rem;

}


.game-card__tags {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

}


.tag {

  padding: 4px 10px;

  border-radius: 999px;

  background: rgba(106, 228, 255, 0.16);

  color: var(--text);

  font-size: 0.7rem;

}


.game-card__footer {

  padding: 0 18px 18px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

}


.game-card__link {

  color: var(--text);

  text-decoration: none;

  font-weight: 600;

  border-bottom: 1px solid transparent;

  transition: border 0.2s ease;

}


.game-card__link:hover {

  border-color: var(--text);

}


.game-card__meta {

  font-size: 0.78rem;

  color: var(--muted);

}


.empty {

  text-align: center;

  padding: 60px 20px;

}


.footer {

  padding: 20px 8vw 50px;

  color: var(--muted);

  font-size: 0.9rem;

}


.footer code {

  color: var(--text);

}


@keyframes float {

  0%,

  100% {

    transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg));

  }

  50% {

    transform: translate(calc(var(--x, 0) + 10px), calc(var(--y, 0) - 10px)) rotate(var(--r, 0deg));

  }

}


@keyframes orbPulse {

  0%,

  100% {

    transform: scale(1);

  }

  50% {

    transform: scale(1.04);

  }

}


@keyframes ticker {

  0% {

    transform: translateX(0);

  }

  100% {

    transform: translateX(-50%);

  }

}


@keyframes cardRise {

  from {

    opacity: 0;

    transform: translateY(18px) scale(0.98);

  }

  to {

    opacity: 1;

    transform: translateY(0) scale(1);

  }

}


@media (max-width: 900px) {

  .topbar {

    flex-direction: column;

    align-items: flex-start;

  }


  .topbar__actions {

    width: 100%;

    justify-content: flex-start;

  }


  .hero {

    padding-top: 30px;

  }

}


@media (max-width: 700px) {

  .container {

    padding: 0 6vw 70px;

  }


  .hero {

    padding: 40px 6vw 10px;

  }


  .section-head {

    flex-direction: column;

    align-items: flex-start;

  }

}


@media (prefers-reduced-motion: reduce) {

  * {

    animation: none !important;

    transition: none !important;

  }

}