@font-face {
  font-family: "Space Grotesk";
  src: url("assets/space-grotesk.ttf") format("truetype");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Bebas Neue";
  src: url("assets/bebas-neue.ttf") format("truetype");
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #100a16;
  --paper: #fff3f9;
  --muted: #ded0df;
  --pink: #ff75aa;
  --gutter: clamp(1.25rem, 5vw, 5.5rem);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 1rem/1.5 "Space Grotesk", system-ui, sans-serif;
}

.opening {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.backdrop, .backdrop::after, video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.backdrop {
  z-index: -1;
  background: var(--ink) url("assets/teaser.jpg") center 22% / cover no-repeat;
}

video { object-fit: cover; object-position: center 22%; }
.backdrop::after {
  content: "";
  background:
    linear-gradient(0deg, #100a16dc, transparent 23%, transparent 78%, #100a16c9),
    linear-gradient(90deg, #100a1612 14%, #100a1670 40%, #100a16ed 64%, #100a16 100%);
}

.masthead, .hero-rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: var(--gutter);
}

.masthead { padding-block: .9rem; }
.logo { width: clamp(7.25rem, 12vw, 10rem); height: auto; }
.edition, .hero-rail, .eyebrow, label {
  font-size: .71rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.edition, .hero-rail { color: var(--muted); }
.hero {
  display: grid;
  place-items: center end;
  padding: clamp(1.5rem, 4vh, 4rem) var(--gutter);
}

.pitch { width: min(55vw, 31rem); }
.eyebrow {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: .18em;
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 1.2rem;
  color: var(--pink);
}

.eyebrow span {
  width: .46rem;
  height: .46rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 .8rem currentColor;
}

h1 {
  margin: 0;
  font: 400 clamp(5.3rem, 11vw, 10rem)/.92 "Bebas Neue", Impact, sans-serif;
}
h1 em { color: var(--pink); font-style: normal; }
.intro { max-width: 37ch; margin: 1.3rem 0 1.7rem; color: var(--muted); }
label { display: block; margin-bottom: .45rem; }
.signup-row { display: flex; gap: .5rem; }

input, button {
  border: 1px solid transparent;
  border-radius: .3rem;
  min-height: 3.25rem;
  padding: .6rem .9rem;
  font: inherit;
}

input {
  flex: 1;
  min-width: 0;
  background: #1f1427;
  border-color: #8d688e;
  color: var(--paper);
}

input::placeholder { color: #c3aeca; }
button { background: var(--pink); color: #1d0a17; font-weight: 750; cursor: pointer; }
button:hover { background: #ff9fc3; }
button:disabled { opacity: .75; cursor: wait; }
button span { margin-left: .2em; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.note, .status { font-size: .78rem; margin: .6rem 0 0; }
.note { color: var(--muted); }
a { color: inherit; text-underline-offset: .18em; }
.status:empty { margin: 0; }
.status { color: #ffb0cb; }
.hero-rail { min-height: 4rem; padding-block: .55rem; border-top: 1px solid #ffffff25; }
.hero-rail b { color: var(--pink); }
.video-toggle {
  padding: .25rem .7rem;
  min-height: 2rem;
  background: #100a169c;
  border-color: #ffffff50;
  color: var(--paper);
  font-size: .7rem;
}
.video-toggle:hover { background: #37203d; }

@media (max-width: 760px) {
  .backdrop { background-position: 30% top; }
  video { object-position: 30% top; }
  .backdrop::after {
    background: linear-gradient(180deg, #100a16c9 0%, #100a1610 20%, #100a16d9 48%, var(--ink) 88%);
  }
  .hero { place-items: end start; padding-top: clamp(7rem, 27svh, 16rem); }
  .pitch { width: min(100%, 31rem); }
  .masthead { padding-block: .35rem; }
  .edition { max-width: 14ch; text-align: right; }
  .intro { margin-bottom: 1.25rem; }
}

@media (max-width: 380px) {
  .signup-row { flex-direction: column; }
}

.hero-rail a { text-decoration: none; }
.hero-rail a:hover { color: var(--paper); }

.showcase {
  padding: clamp(3.5rem, 8vw, 7rem) var(--gutter);
  background: radial-gradient(ellipse at top left, #2d162e, var(--ink) 65%);
  border-top: 1px solid #ffffff25;
}

.showcase-inner { max-width: 76rem; margin-inline: auto; }
.showcase-header { margin-bottom: 2rem; }
.showcase h2, .showcase h3 {
  margin: 0;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-weight: 400;
}

.showcase h2 { font-size: clamp(3rem, 7vw, 5.25rem); line-height: 1; }
.showcase-header > p:last-child { color: var(--muted); }
.card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.8rem, 2vw, 1.5rem);
}

.game-card {
  --accent: var(--pink);
  overflow: hidden;
  background: #1f1427;
  border: 1px solid #ffffff26;
  border-top: 2px solid var(--accent);
  border-radius: .6rem;
}

.legendary { --accent: #c4a7ff; }
.instant { --accent: #88e1f4; }
.boost { --accent: #ffc68c; }

.game-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 14;
  object-fit: cover;
  object-position: center 38%;
  border-bottom: 1px solid #ffffff26;
}

.card-details { padding: clamp(.8rem, 2vw, 1.3rem); }
.card-details p { margin: .5rem 0 0; font-size: .88rem; color: var(--muted); }
.card-details .card-type {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  column-gap: .5rem;
  margin: 0 0 .55rem;
  color: var(--accent);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.card-type span { color: var(--muted); }
.showcase h3 { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1; }
.card-details .card-stats { color: var(--paper); font-weight: 650; }
.back-to-signup { display: inline-block; margin-top: 2rem; color: var(--pink); font-weight: 700; }

@media (max-width: 900px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-card img { aspect-ratio: 4 / 5; }
}

@media (max-width: 390px) {
  .card-grid { grid-template-columns: minmax(0, 1fr); }
}