/* Home: opening transmission */
.hero {
  position: relative;
  display: grid;
  min-block-size: max(45rem, calc(100svh - var(--header-height)));
  overflow: hidden;
  border-block-end: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgb(3 6 10 / 93%) 0%, rgb(3 6 10 / 70%) 48%, rgb(3 6 10 / 38%)),
    url("../images/backgrounds/hero-grid.svg") center / cover no-repeat;
}

.hero::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(circle at 68% 48%, rgb(113 236 242 / 13%), transparent 28%),
    linear-gradient(to bottom, transparent 58%, var(--ink-950));
  content: "";
  pointer-events: none;
}

.hero__grid {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 49.95%, rgb(113 236 242 / 8%) 50%, transparent 50.05%),
    linear-gradient(transparent 49.95%, rgb(113 236 242 / 7%) 50%, transparent 50.05%);
  background-size: 12rem 12rem;
  opacity: 0.36;
  pointer-events: none;
  transform: perspective(40rem) rotateX(55deg) scale(1.4) translateY(26%);
  transform-origin: center bottom;
}

.particle-field {
  position: absolute;
  z-index: 1;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0.72;
  pointer-events: none;
}

.hero__layout {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(25rem, 0.86fr);
  gap: clamp(var(--space-12), 7vw, var(--space-32));
  align-items: center;
  padding-block: clamp(var(--space-16), 8vh, var(--space-24));
}

.hero__copy {
  max-inline-size: 49rem;
}

.hero h1 em,
.page-hero h1 em,
.contact-hero h1 em {
  display: block;
  color: var(--cyan-bright);
  font-style: normal;
  font-weight: 320;
  text-shadow: 0 0 2.2rem rgb(113 236 242 / 18%);
}

.hero__lede {
  max-inline-size: 58ch;
  margin-block-start: var(--space-6);
  color: var(--muted-strong);
  font-size: var(--text-lg);
}

.hero__actions {
  --cluster-space: var(--space-4);
  margin-block-start: var(--space-8);
}

.hero__telemetry {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  border-block-start: 1px solid var(--line-faint);
  margin-block-start: clamp(var(--space-10), 6vh, var(--space-16));
  padding-block-start: var(--space-4);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero__telemetry span {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
}

.hero__telemetry i {
  inline-size: 0.4rem;
  block-size: 0.4rem;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0.65rem var(--green);
}

.hero__scroll-cue {
  position: absolute;
  z-index: 3;
  inset: auto auto var(--space-6) 50%;
  display: flex;
  gap: var(--space-4);
  align-items: center;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.hero__scroll-cue:hover {
  color: var(--paper);
}

.featured-stage {
  position: relative;
  align-self: center;
  min-inline-size: 0;
  border: 1px solid var(--line-strong);
  background: rgb(5 11 17 / 76%);
  box-shadow:
    var(--shadow-panel),
    0 0 5rem rgb(72 216 228 / 10%);
  clip-path: polygon(0 var(--cut-lg), var(--cut-lg) 0, 100% 0, 100% calc(100% - var(--cut-lg)), calc(100% - var(--cut-lg)) 100%, 0 100%);
}

.featured-stage::before,
.featured-stage::after {
  position: absolute;
  z-index: 5;
  inline-size: 4rem;
  block-size: 4rem;
  content: "";
  pointer-events: none;
}

.featured-stage::before {
  inset: 0 auto auto 0;
  border-block-start: 2px solid var(--cyan);
  border-inline-start: 2px solid var(--cyan);
}

.featured-stage::after {
  inset: auto 0 0 auto;
  border-inline-end: 2px solid var(--amber);
  border-block-end: 2px solid var(--amber);
}

.featured-stage__rail {
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  border-block-end: 1px solid var(--line);
  padding: var(--space-3) var(--space-5);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.featured-stage__rail span:first-child {
  color: var(--cyan-bright);
}

.featured-stage__viewport {
  position: relative;
  min-block-size: 32rem;
  overflow: hidden;
}

.featured-stage__viewport > .signal-loader {
  justify-content: center;
  min-block-size: inherit;
}

.featured-stage__controls {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: var(--space-2);
  align-items: center;
  border-block-start: 1px solid var(--line);
  padding: var(--space-3);
}

.featured-stage__position {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-align: center;
}

/* Runtime featured records support both richer and reduced compositions. */
.featured-game {
  --game-accent: var(--cyan);
  --game-secondary: var(--magenta);
  position: relative;
  display: grid;
  min-block-size: 32rem;
  isolation: isolate;
}

.featured-game__art,
.featured-game__image {
  position: absolute;
  z-index: -2;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.featured-game::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(to top, rgb(3 7 11 / 98%) 3%, rgb(3 7 11 / 74%) 48%, transparent 82%),
    linear-gradient(90deg, rgb(3 7 11 / 56%), transparent);
  content: "";
}

.featured-game__content {
  align-self: end;
  padding: clamp(var(--space-6), 5vw, var(--space-10));
}

.featured-game__title {
  font-size: clamp(2rem, 1.4rem + 2.3vw, 3.8rem);
}

.featured-game__description,
.featured-game__tagline {
  max-inline-size: 50ch;
  margin-block-start: var(--space-3);
  color: var(--paper-soft);
}

.featured-game__meta,
.featured-game__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-block-start: var(--space-5);
}

.signal-meter {
  border-block-end: 1px solid var(--line);
  background: linear-gradient(90deg, rgb(113 236 242 / 5%), transparent 45%);
}

.signal-meter .shell {
  display: grid;
  grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 2fr);
  gap: var(--space-12);
  align-items: end;
}

.signal-meter__intro h2 {
  font-size: var(--text-xl);
}

.signal-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.signal-stats > div {
  position: relative;
  border-inline-start: 1px solid var(--line);
  padding-inline: clamp(var(--space-4), 2.4vw, var(--space-8));
}

.signal-stats dt {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.signal-stats dd {
  margin-block-start: var(--space-2);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 1.4vw, 3rem);
  font-weight: 750;
  letter-spacing: -0.04em;
  line-height: 1;
}

.archive-preview {
  background: radial-gradient(circle at 5% 50%, rgb(113 236 242 / 5%), transparent 30rem);
}

.game-grid--preview {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.publishing {
  border-block: 1px solid var(--line);
  background:
    linear-gradient(115deg, rgb(7 16 24 / 92%), rgb(3 7 11 / 70%)),
    radial-gradient(circle at 20% 30%, rgb(223 104 170 / 9%), transparent 25rem);
}

.publishing__layout {
  display: grid;
  grid-template-columns: minmax(18rem, 0.9fr) minmax(28rem, 1.2fr);
  gap: clamp(var(--space-12), 8vw, var(--space-32));
  align-items: start;
}

.publishing__manifesto {
  position: sticky;
  inset-block-start: calc(var(--header-height) + var(--space-8));
}

.publishing__manifesto p:not(.eyebrow) {
  max-inline-size: 56ch;
  margin-block: var(--space-6) var(--space-8);
  color: var(--muted-strong);
  font-size: var(--text-lg);
}

.principle-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.principle-list li {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--space-6);
  border-block-start: 1px solid var(--line);
  padding-block: var(--space-8);
}

.principle-list li:last-child {
  border-block-end: 1px solid var(--line);
}

.principle-list__index {
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.principle-list h3 {
  margin-block-end: var(--space-3);
}

.principle-list p {
  max-inline-size: 55ch;
  color: var(--muted-strong);
}

.genre-sector {
  overflow: hidden;
}

.genre-explorer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.5fr);
  gap: clamp(var(--space-8), 7vw, var(--space-20));
  align-items: center;
  min-block-size: 30rem;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 22% 50%, rgb(113 236 242 / 12%), transparent 22rem),
    rgb(5 12 19 / 62%);
  padding: clamp(var(--space-6), 5vw, var(--space-16));
  clip-path: polygon(var(--cut-lg) 0, 100% 0, 100% calc(100% - var(--cut-lg)), calc(100% - var(--cut-lg)) 100%, 0 100%, 0 var(--cut-lg));
}

.genre-explorer__orbit {
  position: relative;
  aspect-ratio: 1;
  max-inline-size: 23rem;
  margin-inline: auto;
  border: 1px solid rgb(113 236 242 / 28%);
  border-radius: 50%;
  box-shadow:
    inset 0 0 4rem rgb(113 236 242 / 5%),
    0 0 3rem rgb(113 236 242 / 6%);
}

.genre-explorer__orbit::before,
.genre-explorer__orbit::after,
.genre-explorer__orbit span {
  position: absolute;
  border: 1px solid var(--line);
  border-radius: 50%;
  content: "";
}

.genre-explorer__orbit::before {
  inset: 18%;
}

.genre-explorer__orbit::after {
  inset: 41%;
  border: 0;
  background: var(--cyan);
  box-shadow: 0 0 2.8rem 0.5rem var(--cyan);
  opacity: 0.8;
}

.genre-explorer__orbit span:nth-child(1) {
  inset: 8% 31%;
  transform: rotate(62deg);
}

.genre-explorer__orbit span:nth-child(2) {
  inset: 22% 5%;
  transform: rotate(-18deg);
}

.genre-explorer__orbit span:nth-child(3) {
  inset: 34% 12%;
  transform: rotate(28deg);
}

.genre-explorer__orbit i {
  position: absolute;
  inline-size: 0.55rem;
  block-size: 0.55rem;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0.8rem var(--amber);
}

.genre-explorer__orbit i:nth-of-type(1) { inset: 12% auto auto 55%; }
.genre-explorer__orbit i:nth-of-type(2) { inset: 31% 8% auto auto; }
.genre-explorer__orbit i:nth-of-type(3) { inset: auto 18% 18% auto; }
.genre-explorer__orbit i:nth-of-type(4) { inset: auto auto 8% 38%; }
.genre-explorer__orbit i:nth-of-type(5) { inset: 42% auto auto 4%; }

.genre-explorer__list {
  position: relative;
  z-index: 2;
}

.genre-explorer__list > .signal-loader {
  min-block-size: 12rem;
}

.genre-links,
.genre-constellation__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.genre-link {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgb(3 8 13 / 55%);
  padding: 0.55rem 0.85rem;
  color: var(--paper-soft);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-decoration: none;
}

.genre-link:hover {
  border-color: var(--cyan);
  background: rgb(113 236 242 / 10%);
  color: var(--paper);
  box-shadow: var(--shadow-cyan);
}

.genre-link__count {
  color: var(--cyan);
}

.upcoming-sector {
  border-block-start: 1px solid var(--line-faint);
  background: linear-gradient(180deg, rgb(244 186 87 / 3%), transparent 45%);
}

.upcoming-list {
  display: grid;
  gap: 0;
  border-block-start: 1px solid var(--line);
}

.upcoming-item {
  --game-accent: var(--amber);
  position: relative;
  display: grid;
  grid-template-columns: minmax(8rem, 0.55fr) minmax(12rem, 1fr) minmax(12rem, 1.2fr) auto;
  gap: var(--space-6);
  align-items: center;
  border-block-end: 1px solid var(--line);
  padding-block: var(--space-5);
  text-decoration: none;
  transition:
    background-color var(--duration) ease,
    padding-inline var(--duration) var(--ease-out);
}

.upcoming-item:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--game-accent) 8%, transparent), transparent);
  padding-inline: var(--space-4);
}

.upcoming-item__status,
.upcoming-item__date {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.upcoming-item__title {
  font-size: var(--text-xl);
}

.upcoming-item__tagline {
  color: var(--muted-strong);
}

.upcoming-item__arrow {
  color: var(--game-accent);
  font-size: var(--text-xl);
}

.contact-beacon {
  padding-block: var(--space-24);
}

.contact-beacon__frame {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) auto;
  gap: clamp(var(--space-8), 7vw, var(--space-20));
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(115deg, rgb(113 236 242 / 10%), transparent 55%),
    var(--surface);
  padding: clamp(var(--space-8), 6vw, var(--space-16));
  box-shadow: var(--shadow-panel);
  clip-path: polygon(0 var(--cut-lg), var(--cut-lg) 0, 100% 0, 100% calc(100% - var(--cut-lg)), calc(100% - var(--cut-lg)) 100%, 0 100%);
}

.contact-beacon__frame::after {
  position: absolute;
  inset: -50% -10% -50% auto;
  inline-size: 36%;
  background: linear-gradient(90deg, transparent, rgb(113 236 242 / 9%), transparent);
  content: "";
  pointer-events: none;
  transform: rotate(18deg);
}

.contact-beacon__copy {
  position: relative;
  z-index: 1;
}

.contact-beacon__copy p:not(.eyebrow) {
  max-inline-size: 62ch;
  margin-block-start: var(--space-5);
  color: var(--muted-strong);
}

.contact-beacon__action {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
}

/* Shared interior-page opening */
.page-hero {
  position: relative;
  overflow: hidden;
  border-block-end: 1px solid var(--line);
  background:
    radial-gradient(circle at 76% 28%, rgb(113 236 242 / 9%), transparent 25rem),
    linear-gradient(180deg, var(--ink-850), var(--ink-950));
  padding-block: clamp(var(--space-16), 8vw, var(--space-24));
}

.page-hero::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--line-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-faint) 1px, transparent 1px);
  background-size: 5rem 5rem;
  content: "";
  opacity: 0.22;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 10%, black 65%);
  mask-image: linear-gradient(90deg, transparent 10%, black 65%);
}

.page-hero__layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(20rem, 0.65fr);
  gap: var(--space-12);
  align-items: end;
}

.page-hero__side {
  border-inline-start: 1px solid var(--line);
  padding-inline-start: var(--space-8);
}

.page-hero__side > p:first-child {
  color: var(--muted-strong);
  font-size: var(--text-lg);
}

.page-hero__side .concept-note {
  margin-block-start: var(--space-5);
  font-size: var(--text-xs);
}

.page-hero--legal .shell {
  position: relative;
}

.page-hero--legal p:last-child {
  max-inline-size: 60ch;
  margin-block-start: var(--space-6);
  color: var(--muted-strong);
  font-size: var(--text-lg);
}

.page-hero--validator {
  padding-block: var(--space-16);
}

/* Games archive */
.catalog-section {
  padding-block-end: var(--space-24);
}

.catalog-console {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(17rem, 1.25fr) minmax(24rem, 1.6fr) minmax(15rem, 0.8fr);
  gap: var(--space-6);
  align-items: end;
  border: 1px solid var(--line-strong);
  margin-block-start: calc(var(--space-8) * -1);
  background:
    linear-gradient(100deg, rgb(113 236 242 / 5%), transparent 45%),
    rgb(7 15 23 / 94%);
  padding: var(--space-6);
  box-shadow: var(--shadow-panel);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}

.catalog-console__filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  min-inline-size: 0;
  border: 0;
  margin: 0;
  padding: 0;
}

.catalog-console__utility {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.5rem;
  gap: var(--space-3);
}

.search-field {
  position: relative;
  display: flex;
  align-items: center;
}

.search-field input {
  padding-inline: 2.5rem 2.8rem;
}

.search-field__glyph {
  position: absolute;
  z-index: 2;
  inset-inline-start: 0.9rem;
  inline-size: 0.85rem;
  block-size: 0.85rem;
  border: 1px solid var(--cyan);
  border-radius: 50%;
  pointer-events: none;
}

.search-field__glyph::after {
  position: absolute;
  inset: auto -0.3rem -0.2rem auto;
  inline-size: 0.4rem;
  block-size: 1px;
  background: var(--cyan);
  content: "";
  transform: rotate(45deg);
  transform-origin: left center;
}

.search-field kbd {
  position: absolute;
  inset-inline-end: 0.65rem;
  pointer-events: none;
}

.catalog-console__search .field-hint {
  margin-block-start: var(--space-2);
}

.catalog-statusbar {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
  justify-content: space-between;
  min-block-size: 7rem;
  padding-block: var(--space-8);
}

.results-summary {
  color: var(--paper-soft);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.catalog-statusbar__actions {
  flex: 0 0 auto;
}

/* Game detail runtime */
.game-detail-page__utility {
  display: flex;
  gap: var(--space-6);
  align-items: center;
  justify-content: space-between;
  min-block-size: 5.5rem;
}

.game-detail {
  --game-accent: var(--cyan);
  --game-secondary: var(--magenta);
}

.game-detail__hero {
  position: relative;
  display: grid;
  align-items: end;
  min-block-size: clamp(35rem, 76svh, 54rem);
  overflow: hidden;
  border-block: 1px solid var(--line);
  isolation: isolate;
}

.game-hero__media,
.game-hero__veil {
  position: absolute;
  inset: 0;
}

.game-hero__media {
  z-index: -2;
}

.game-hero__veil {
  z-index: -1;
  background:
    linear-gradient(to top, var(--ink-950) 1%, rgb(3 6 10 / 68%) 46%, transparent 78%),
    linear-gradient(90deg, rgb(3 6 10 / 70%), transparent 70%);
  pointer-events: none;
}

.game-detail__hero-image,
.game-hero__image {
  position: absolute;
  z-index: -2;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.game-detail__hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(to top, var(--ink-950) 1%, rgb(3 6 10 / 72%) 44%, rgb(3 6 10 / 12%) 75%),
    linear-gradient(90deg, rgb(3 6 10 / 78%), transparent 68%);
  content: "";
}

.game-detail__hero-content {
  padding-block: var(--space-16);
}

.game-hero__copy {
  max-inline-size: 58rem;
}

.game-hero__signal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-block-end: var(--space-5);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.game-detail__hero-content h1 {
  max-inline-size: 14ch;
}

.game-detail__tagline {
  max-inline-size: 56ch;
  margin-block-start: var(--space-5);
  color: var(--paper-soft);
  font-size: var(--text-xl);
}

.game-hero__summary {
  max-inline-size: 62ch;
  margin-block-start: var(--space-4);
  color: var(--muted-strong);
}

.game-detail__meta,
.game-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-block-start: var(--space-6);
}

.game-detail__body {
  display: grid;
  grid-template-columns: minmax(15rem, 0.48fr) minmax(0, 1.3fr);
  gap: clamp(var(--space-10), 8vw, var(--space-24));
  padding-block: var(--space-20);
}

.game-detail__cover {
  position: sticky;
  inset-block-start: calc(var(--header-height) + var(--space-6));
  align-self: start;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--game-accent) 50%, var(--line));
  background: var(--surface);
  box-shadow: var(--shadow-panel);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}

.game-detail__cover img {
  inline-size: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

.game-detail__copy > section + section {
  border-block-start: 1px solid var(--line);
  margin-block-start: var(--space-10);
  padding-block-start: var(--space-10);
}

.game-detail__copy h2 {
  margin-block-end: var(--space-5);
  font-size: var(--text-xl);
}

.game-detail__description {
  color: var(--paper-soft);
  font-size: var(--text-lg);
}

.detail-facts,
.game-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0;
}

.detail-facts > div,
.game-facts > div {
  border-block-start: 1px solid var(--line);
  padding-block-start: var(--space-3);
}

.detail-facts dt,
.game-facts dt {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.detail-facts dd,
.game-facts dd {
  margin-block-start: var(--space-1);
  color: var(--paper);
}

.game-dossier__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  border-block-start: 1px solid var(--line);
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-5);
}

.requirements-list {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.requirements-list__row {
  border-inline-start: 1px solid var(--cyan);
  background: rgb(113 236 242 / 4%);
  padding: var(--space-4) var(--space-5);
}

.requirements-list__row h3 {
  margin-block-end: var(--space-3);
  font-size: var(--text-lg);
}

.requirements-list__row :where(p, li, dd) {
  color: var(--muted-strong);
}

.store-links__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.feature-list,
.accessibility-list,
.check-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-list li,
.accessibility-list li,
.check-list li {
  position: relative;
  border-block-end: 1px solid var(--line-faint);
  padding: var(--space-3) var(--space-3) var(--space-3) 1.8rem;
  color: var(--paper-soft);
}

.feature-list li::before,
.accessibility-list li::before,
.check-list li::before {
  position: absolute;
  inset: 1.16rem auto auto 0;
  inline-size: 0.65rem;
  block-size: 0.65rem;
  border: 1px solid var(--cyan);
  content: "";
  transform: rotate(45deg);
}

.game-gallery,
.game-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.game-gallery__item {
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}

.game-gallery img,
.game-gallery__grid img {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.game-gallery__caption {
  padding: var(--space-3) var(--space-4);
  border-block-start: 1px solid var(--line-faint);
  color: var(--paper-soft);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.related-sector {
  border-block-start: 1px solid var(--line);
}

.game-grid--related {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Contact transmission terminal */
.contact-hero {
  position: relative;
  min-block-size: 26rem;
  overflow: hidden;
  border-block-end: 1px solid var(--line);
  background:
    linear-gradient(90deg, var(--ink-950), rgb(3 6 10 / 68%)),
    url("../images/backgrounds/contact-terminal.svg") center / cover no-repeat;
}

.contact-hero::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--ink-950), transparent 55%);
  content: "";
  pointer-events: none;
}

.contact-hero__art {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 78% 40%, rgb(113 236 242 / 15%), transparent 24rem);
}

.contact-hero__layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-12);
  align-items: end;
  min-block-size: inherit;
  padding-block: var(--space-16);
}

.contact-hero__status {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  border: 1px solid var(--line);
  background: rgb(3 8 13 / 74%);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-cyan);
}

.contact-hero__status strong,
.contact-hero__status span {
  display: block;
}

.contact-hero__status strong {
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-hero__status span {
  color: var(--muted);
  font-size: var(--text-sm);
}

.contact-terminal {
  background: radial-gradient(circle at 100% 30%, rgb(223 104 170 / 6%), transparent 30rem);
}

.contact-terminal__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.72fr);
  gap: clamp(var(--space-8), 6vw, var(--space-16));
  align-items: start;
}

.terminal-frame {
  border: 1px solid var(--line-strong);
  background: rgb(7 15 23 / 90%);
  box-shadow: var(--shadow-panel);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}

.terminal-frame__bar {
  display: flex;
  gap: var(--space-6);
  align-items: center;
  justify-content: space-between;
  border-block-end: 1px solid var(--line);
  padding: var(--space-3) var(--space-5);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.terminal-frame__bar p {
  color: var(--cyan-bright);
}

.terminal-frame__bar p span {
  color: var(--green);
}

.terminal-frame__body {
  padding: clamp(var(--space-6), 5vw, var(--space-12));
}

.terminal-frame__intro {
  max-inline-size: 62ch;
  margin-block-start: var(--space-4);
  color: var(--muted-strong);
}

.contact-form {
  display: grid;
  gap: var(--space-6);
  margin-block-start: var(--space-10);
}

.contact-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.mailto-preview {
  display: grid;
  gap: var(--space-1);
  border-inline-start: 2px solid var(--cyan);
  background: rgb(113 236 242 / 5%);
  padding: var(--space-3) var(--space-4);
}

.mailto-preview > span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mailto-preview strong {
  font-size: var(--text-sm);
}

.contact-form__submit {
  display: flex;
  gap: var(--space-5);
  align-items: center;
}

.contact-form__submit p {
  max-inline-size: 32rem;
  color: var(--muted);
  font-size: var(--text-xs);
}

.form-status {
  min-block-size: 1.5rem;
  color: var(--paper-soft);
  font-size: var(--text-sm);
}

.form-status[data-state="error"] {
  color: var(--red);
}

.channel-guide {
  position: sticky;
  inset-block-start: calc(var(--header-height) + var(--space-8));
}

.channel-guide > p:not(.eyebrow) {
  margin-block-start: var(--space-4);
  color: var(--muted-strong);
}

.direct-email {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgb(113 236 242 / 42%);
  margin-block: var(--space-8);
  background: rgb(113 236 242 / 7%);
  padding: var(--space-5);
  text-decoration: none;
}

.direct-email small,
.direct-email strong {
  display: block;
}

.direct-email small {
  margin-block-end: var(--space-1);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.direct-email strong {
  color: var(--paper);
  font-size: var(--text-base);
}

.channel-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.channel-list a {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  border-block-start: 1px solid var(--line);
  padding-block: var(--space-4);
  color: var(--paper-soft);
  text-decoration: none;
}

.channel-list li:last-child a {
  border-block-end: 1px solid var(--line);
}

.channel-list a > span:first-child {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.channel-list b {
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.channel-list a:hover {
  color: var(--cyan-bright);
}

.response-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  margin-block-start: var(--space-8);
  background: rgb(244 186 87 / 6%);
  padding: var(--space-5);
}

.response-note__icon {
  color: var(--amber);
  font-size: var(--text-xl);
}

.response-note h3 {
  margin-block-end: var(--space-2);
  font-size: var(--text-lg);
}

.response-note p {
  color: var(--muted-strong);
  font-size: var(--text-sm);
}

/* Privacy */
.legal-copy {
  padding-block: var(--space-16) var(--space-24);
}

.legal-copy__meta {
  display: flex;
  gap: var(--space-6);
  justify-content: space-between;
  border-block-end: 1px solid var(--line);
  margin-block: var(--space-10) var(--space-16);
  padding-block-end: var(--space-4);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.legal-copy > section {
  display: grid;
  grid-template-columns: minmax(8rem, 0.36fr) minmax(0, 1fr);
  column-gap: var(--space-8);
  border-block-start: 1px solid var(--line);
  padding-block: var(--space-10);
}

.legal-copy > section .eyebrow {
  grid-row: 1 / span 4;
  align-self: start;
}

.legal-copy > section h2,
.legal-copy > section p {
  grid-column: 2;
}

.legal-copy > section h2 {
  margin-block-end: var(--space-5);
  font-size: var(--text-xl);
}

.legal-copy > section p {
  color: var(--muted-strong);
}

/* 404 */
.not-found {
  position: relative;
  display: grid;
  min-block-size: calc(100svh - var(--header-height));
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 48%, rgb(113 236 242 / 9%), transparent 26rem),
    var(--ink-950);
}

.not-found__layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(24rem, 1.15fr);
  gap: var(--space-8);
  align-items: center;
  padding-block: var(--space-12);
}

.not-found__copy {
  position: relative;
  z-index: 2;
}

.not-found__code {
  color: transparent;
  font-family: var(--font-display);
  font-size: clamp(5rem, 10vw, 10rem);
  font-weight: 800;
  letter-spacing: -0.08em;
  line-height: 0.72;
  -webkit-text-stroke: 1px rgb(113 236 242 / 38%);
}

.not-found h1 {
  margin-block-start: var(--space-4);
  font-size: clamp(2.5rem, 2rem + 3vw, 5rem);
}

.not-found__copy > p:not(.eyebrow, .not-found__code) {
  max-inline-size: 55ch;
  margin-block-start: var(--space-6);
  color: var(--muted-strong);
  font-size: var(--text-lg);
}

.not-found__actions {
  margin-block-start: var(--space-8);
}

.not-found__telemetry {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  border-block-start: 1px solid var(--line);
  margin-block-start: var(--space-12);
  padding-block-start: var(--space-4);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.not-found__art {
  position: relative;
}

.not-found__art::after {
  position: absolute;
  inset: 10%;
  border: 1px solid rgb(113 236 242 / 16%);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 4rem rgb(113 236 242 / 8%);
  pointer-events: none;
}

.not-found__art img {
  inline-size: 100%;
  filter: drop-shadow(0 0 3rem rgb(113 236 242 / 12%));
}

.not-found__art figcaption {
  position: absolute;
  inset: auto var(--space-6) var(--space-6) auto;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Catalog validator */
.validator-layout {
  display: grid;
  grid-template-columns: minmax(18rem, 0.65fr) minmax(0, 1.35fr);
  gap: clamp(var(--space-8), 6vw, var(--space-16));
  align-items: start;
}

.validator-checklist {
  position: sticky;
  inset-block-start: calc(var(--header-height) + var(--space-6));
}

.validator-checklist h2 {
  margin-block-end: var(--space-6);
}

.validator-checklist .button {
  margin-block: var(--space-8) var(--space-4);
}

.validator-console {
  min-block-size: 32rem;
  border: 1px solid var(--line-strong);
  background: rgb(3 9 14 / 84%);
  box-shadow: var(--shadow-panel);
}

.validator-console__bar {
  display: flex;
  gap: var(--space-5);
  justify-content: space-between;
  border-block-end: 1px solid var(--line);
  background: rgb(113 236 242 / 4%);
  padding: var(--space-3) var(--space-5);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.validator-console__summary {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  border-block-end: 1px solid var(--line);
  padding: var(--space-6);
}

.validator-console__summary strong {
  display: block;
  color: var(--paper);
}

.validator-console__summary p {
  color: var(--muted);
  font-size: var(--text-sm);
}

.validator-console__summary[data-state="success"] {
  background: rgb(114 228 160 / 7%);
}

.validator-console__summary[data-state="error"] {
  background: rgb(255 125 137 / 7%);
}

.validator-results {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-5);
  list-style: none;
}

.validator-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  border-block-end: 1px solid var(--line-faint);
  padding: var(--space-3);
  color: var(--paper-soft);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.validator-result__icon {
  display: grid;
  place-items: center;
  inline-size: 1.6rem;
  block-size: 1.6rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-weight: 800;
}

.validator-result[data-state="pass"] .validator-result__icon,
.validator-result--success .validator-result__icon {
  color: var(--green);
}

.validator-result[data-state="warning"] .validator-result__icon,
.validator-result--warning .validator-result__icon {
  color: var(--amber);
}

.validator-result[data-state="error"] .validator-result__icon,
.validator-result--error .validator-result__icon {
  color: var(--red);
}

.validator-summary__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  inline-size: 2.3rem;
  block-size: 2.3rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--green);
  font-weight: 800;
}

.validator-console__summary[data-state="error"] .validator-summary__icon {
  color: var(--red);
}