@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Mono:wght\@400;500&display=swap");

/* =========================================================

   ROOT

========================================================= */

:root {
  --black: #050004;
  --black-soft: #0b0308;
  --panel: #10070d;
  --panel-light: #180b13;
  --blood: #bb0a27;
  --blood-bright: #ff2348;
  --blood-dark: #650014;
  --rose: #ff5877;
  --bone: #f1e7df;
  --muted: #a9959d;
  --terminal: #6bd6c8;
  --warning: #e5b83c;
  --border: rgba(255, 35, 72, .32);
  --shadow-red:
    0 0 18px rgba(255, 35, 72, .18);
  --font-display:
    "Archivo Black",
    Impact,
    sans-serif;
  --font-mono:
    "DM Mono",
    "Courier New",
    monospace;
}

/* =========================================================

   RESET

========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {

  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(

      circle at 50% 0%,

      #270513 0,

      #090005 34%,

      #030002 72%

    );

  color: var(--bone);
  font-family: var(--font-mono);
  overflow-x: hidden;
}

button,
a {
  font: inherit;
}

button {
  color: inherit;
}

a {
  color: inherit;
}

/* =========================================================

   GLOBAL OVERLAYS

========================================================= */

.page-noise,
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
}

.page-noise {
  opacity: .045;
  background-image:
    radial-gradient(

      rgba(255,255,255,.7) .5px,

      transparent .5px

    );
  background-size:
    4px 4px;
}

.scanlines {
  opacity: .09;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.07) 0,
      rgba(255,255,255,.07) 1px,
      transparent 1px,
      transparent 4px
    );
  mix-blend-mode: soft-light;
}

/* =========================================================

   HEADER

========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  min-height: 72px;
  padding:
    12px
    clamp(18px, 5vw, 70px);
  border-bottom:
    1px solid var(--border);
  background:
    rgba(5, 0, 4, .88);
  backdrop-filter:
    blur(14px);
}

.brand-lockup {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-decoration: none;
}

.brand-kicker {
  font-size: 10px;
  letter-spacing: .25em;
  color: var(--rose);
}

.brand-name {
  font-family:
    var(--font-display);
  font-size: 18px;
  letter-spacing: .08em;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 11px;
  letter-spacing: .12em;
}

.header-nav a {
  text-decoration: none;
  color: var(--muted);
}

.header-nav a:hover {
  color: var(--blood-bright);
}

.sound-toggle {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  padding: 8px 11px;
  cursor: pointer;
}

/* =========================================================

   HERO

========================================================= */

.arcade-hero {
  position: relative;
  min-height: calc(100vh - 72px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .75fr);
  align-items: center;
  gap: clamp(30px, 7vw, 110px);
  padding:
    clamp(70px, 9vw, 130px)
    clamp(20px, 7vw, 100px);
  overflow: hidden;
}

.hero-grid {
  position: absolute;
  inset: 47% -10% -30%;
  z-index: -1;
  opacity: .2;
  transform:
    perspective(600px)
    rotateX(62deg);
  transform-origin:
    center top;
  background-image:
    linear-gradient(
      rgba(255,35,72,.4) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,35,72,.4) 1px,
      transparent 1px
    );

  background-size: 42px 42px;
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--rose);
  font-size: 10px;
  letter-spacing: .28em;
}

.arcade-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(68px, 10vw, 158px);
  line-height: .77;
  letter-spacing: -.06em;
}

.arcade-hero h1 span {
  display: block;
}

.arcade-hero h1 span:first-child {
  color: var(--bone); 
  text-shadow: 5px 5px 0
  var(--blood-dark),

    0 0 25px

    rgba(255,35,72,.18);

}

.arcade-hero h1 span:last-child {

  color:

    var(--blood-bright);

  text-shadow:

    5px 5px 0

    #260008,

    0 0 35px

    rgba(255,35,72,.34);

}

.hero-tagline {

  margin:

    30px 0 8px;

  color:

    var(--terminal);

  font-size:

    15px;

  letter-spacing:

    .18em;

}

.hero-description {

  max-width:

    590px;

  margin:

    0 0 30px;

  color:

    var(--muted);

  font-size:

    14px;

  line-height:

    1.8;

}



/* =========================================================

   BUTTONS

========================================================= */

.arcade-button {

  display:

    inline-flex;

  align-items:

    center;

  justify-content:

    center;

  gap:

    16px;

  min-height:

    50px;

  padding:

    0 22px;

  border:

    1px solid

    var(--border);

  text-decoration:

    none;

  letter-spacing:

    .1em;

  font-size:

    12px;

  cursor:

    pointer;

  transition:

    transform

    .15s ease,

*background*

    .15s ease,

    border-color

    .15s ease;

}

.arcade-button:hover {

  transform:

    translateY(-2px);

}

.arcade-button--primary {

  background:

    var(--blood);

  border-color:

    var(--blood-bright);

  color:

    white;

  box-shadow:

    var(--shadow-red);

}

.arcade-button--primary:hover {

  background:

    var(--blood-bright);

}

.arcade-button--secondary {

  background:

    transparent;

  color:

    var(--bone);

}



/* =========================================================

   HERO MACHINE

========================================================= */

.hero-machine {

  display: flex;

  justify-content:

    center;

  align-items:

    center;

}

.machine-shell {

  width:

    min(390px, 90vw);

  padding:

    20px;

  border:

    2px solid

    var(--blood);

  border-radius:

    14px 14px 28px 28px;

  background:

    linear-gradient(

      145deg,

      #1b0b13,

      #080306

    );

  box-shadow:

    0 0 0 8px

    #030002,

    0 0 0 9px

    rgba(255,35,72,.2),

    0 0 50px

    rgba(255,35,72,.16);

}

.machine-marquee {

  margin-bottom:

    15px;

  padding:

    14px 10px;

  border:

    1px solid

    rgba(255,255,255,.12);

  background:

    var(--blood);

  color:

    white;

  font-family:

    var(--font-display);

  text-align:

    center;

  letter-spacing:

    .06em;

  box-shadow:

    inset 0 0 25px

    rgba(0,0,0,.35);

}

.machine-screen {

  aspect-ratio:

    4 / 3;

  display:

    grid;

  place-items:

    center;

  padding:

    15px;

  border:

    10px solid

    #020102;

  border-radius:

    14px;

  background:

    radial-gradient(

      circle at center,

      #092b29 0,

      #020607 70%

    );

  box-shadow:

    inset 0 0 40px

    rgba(107,214,200,.12),

    0 0 20px

    rgba(107,214,200,.08);

}

.boot-screen {

  display:

    grid;

  place-items:

    center;

  gap:

    10px;

  color:

    var(--terminal);

  font-size:

    12px;

  letter-spacing:

    .13em;

}

.boot-heart {

  color:

    var(--blood-bright);

  font-size:

    58px;

  animation:

    heartPulse

    1.1s

    infinite;

}

.boot-status {

  padding:

    5px 9px;

  border:

    1px solid

    rgba(107,214,200,.35);

}

.machine-controls {

  display:

    flex;

  justify-content:

    space-around;

  align-items:

    center;

  padding:

    25px 15px 5px;

}

.joystick {

  position:

    relative;

  width:

    56px;

  height:

    56px;

  border-radius:

    50%;

  background:

    #050505;

  box-shadow:

    inset 0 0 12px

    rgba(255,255,255,.04);

}

.joystick::before {

  content: "";

  position:

    absolute;

  left: 50%;

  bottom:

    22px;

  width:

    8px;

  height:

    50px;

  transform:

    translateX(-50%);

  background:

    #292929;

}

.joystick span {

  position:

    absolute;

  left:

    50%;

  top:

    -30px;

  width:

    34px;

  height:

    34px;

  transform:

    translateX(-50%);

  border-radius:

    50%;

  background:

    var(--blood-bright);

  box-shadow:

    0 0 14px

    rgba(255,35,72,.3);

}

.machine-buttons {

  display:

    flex;

  gap:

    16px;

}

.machine-buttons span {

  width:

    34px;

  height:

    34px;

  border-radius:

    50%;

  background:

    var(--blood);

  box-shadow:

    inset -3px -4px 0

    rgba(0,0,0,.35),

    0 0 10px

    rgba(255,35,72,.2);

}

.machine-buttons span:last-child {

  background:

    var(--terminal);

}

.scroll-indicator {

  position:

    absolute;

  left:

    50%;

  bottom:

    26px;

  transform:

    translateX(-50%);

  display:

    flex;

  flex-direction:

    column;

  align-items:

    center;

  gap:

    5px;

  color:

    var(--muted);

  text-decoration:

    none;

  font-size:

    9px;

  letter-spacing:

    .16em;

}



/* =========================================================

   SECTIONS

========================================================= */

.section {

  width:

    min(1240px, 90%);

  margin:

    0 auto;

  padding:

    clamp(90px, 10vw, 150px)

    0;

}

.section-heading {

  display:

    flex;

  justify-content:

    space-between;

  align-items:

    flex-end;

  gap:

    30px;

  margin-bottom:

    38px;

  padding-bottom:

    18px;

  border-bottom:

    1px solid

    var(--border);

}

.section-heading h2 {

  margin: 0;

  font-family:

    var(--font-display);

  font-size:

    clamp(36px, 6vw, 75px);

  letter-spacing:

    -.04em;

}

.section-code {

  color:

    var(--muted);

  font-size:

    10px;

  letter-spacing:

    .18em;

}



/* =========================================================

   FEATURED GAME

========================================================= */

.featured-game {

  display:

    grid;

  grid-template-columns:

    minmax(320px, .9fr)

    minmax(0, 1.1fr);

  gap:

    clamp(30px, 5vw, 70px);

  padding:

    clamp(20px, 4vw, 45px);

  border:

    1px solid

    var(--border);

  background:

    radial-gradient(

      circle at 15% 10%,

      rgba(255,35,72,.08),

      transparent 35%

    ),

    rgba(12,3,8,.72);

  box-shadow:

    0 20px 60px

    rgba(0,0,0,.35);

}

.featured-game__art {

  position: relative;

}

.featured-game__image {

  position: relative;

  aspect-ratio:

    4 / 5;

  overflow:

    hidden;

  border:

    1px solid

    rgba(255,255,255,.1);

  background:

    radial-gradient(

      circle,

      rgba(255,35,72,.15),

      transparent 45%

    ),

    #050004;

}

.featured-game__image img {

  position: absolute;

  inset: 0;

  width:

    100%;

  height:

    100%;

  object-fit:

    cover;

  z-index: 2;

}

.featured-game__image img.asset-missing {

  display:

    none;

}

.art-fallback {

  position:

    absolute;

  inset: 0;

  display:

    flex;

  flex-direction:

    column;

  align-items:

    center;

  justify-content:

    center;

  gap:

    3px;

  padding:

    25px;

  text-align:

    center;

}

.art-fallback span {

  color:

    var(--rose);

  font-size:

    clamp(22px, 4vw, 48px);

  font-family:

    var(--font-display);

}

.art-fallback strong {

  color:

    var(--blood-bright);

  font-size:

    clamp(36px, 6vw, 80px);

  line-height:

    .85;

  font-family:

    var(--font-display);

}

.art-fallback small {

  margin-top:

    25px;

  color:

    var(--muted);

}

.featured-game__badge {

  position:

    absolute;

  left:

    -10px;

  bottom:

    18px;

  z-index:

    3;

  padding:

    10px 14px;

  background:

    var(--blood);

  color:

    white;

  font-size:

    10px;

  letter-spacing:

    .12em;

}

.featured-game__info {

  align-self:

    center;

}

.game-series {

  color:

    var(--terminal);

  font-size:

    10px;

  letter-spacing:

    .23em;

}

.featured-game__info h3 {

  max-width:

    700px;

  margin:

    12px 0 20px;

  font-family:

    var(--font-display);

  font-size:

    clamp(44px, 7vw, 92px);

  line-height:

    .9;

  letter-spacing:

    -.05em;

  color:

    var(--bone);

}

.game-copy {

  max-width:

    680px;

  color:

    var(--muted);

  line-height:

    1.85;

}

.game-stats {

  display:

    grid;

  grid-template-columns:

    repeat(3, 1fr);

  margin:

    32px 0;

  border-top:

    1px solid

    rgba(255,255,255,.08);

  border-bottom:

    1px solid

    rgba(255,255,255,.08);

}

.game-stats div {

  padding:

    18px 12px;

}

.game-stats div + div {

  border-left:

    1px solid

    rgba(255,255,255,.08);

}

.stat-label {

  display:

    block;

  margin-bottom:

    7px;

  color:

    var(--muted);

  font-size:

    9px;

  letter-spacing:

    .15em;

}

.game-stats strong {

  color:

    var(--blood-bright);

  font-family:

    var(--font-display);

  font-size:

    24px;

}

.fragment-strip {

  display:

    grid;

  grid-template-columns:

    repeat(6, 1fr);

  gap:

    8px;

  margin-bottom:

    30px;

}

.fragment-strip span {

  min-width:

    0;

  padding:

    10px 5px;

  border:

    1px solid

    rgba(255,255,255,.08);

  text-align:

    center;

  color:

    var(--muted);

  font-size:

    8px;

  letter-spacing:

    .05em;

}

.fragment-strip b {

  display:

    block;

  margin-bottom:

    5px;

  color:

    var(--blood-bright);

  font-size:

    17px;

}

.featured-actions {

  display:

    flex;

  flex-wrap:

    wrap;

  gap:

    12px;

}



/* =========================================================

   CABINETS

========================================================= */

.cabinet-grid {

  display:

    grid;

  grid-template-columns:

    repeat(3, minmax(0, 1fr));

  gap:

    22px;

}

.cabinet {

  position:

    relative;

  min-height:

    480px;

  display:

    flex;

  flex-direction:

    column;

  padding:

    26px;

  overflow:

    hidden;

  border:

    1px solid

    rgba(255,255,255,.10);

  background:

    var(--panel);

  transition:

    transform

    .2s ease,

    border-color

    .2s ease,

    box-shadow

    .2s ease;

}

.cabinet::after {

  content: "";

  position:

    absolute;

  inset:

    auto -20% -40%;

  height:

    55%;

  opacity:

    .18;

  filter:

    blur(40px);

  pointer-events:

    none;

}

.cabinet:hover {

  transform:

    translateY(-5px);

  border-color:

    rgba(255,35,72,.4);

  box-shadow:

    0 20px 50px

    rgba(0,0,0,.35);

}

.cabinet--files::after {

  background:

    var(--terminal);

}

.cabinet--lab::after {

  background:

    var(--rose);

}

.cabinet--archive::after {

  background:

    var(--warning);

}

.cabinet-status {

  display:

    flex;

  align-items:

    center;

  gap:

    8px;

  margin-bottom:

    28px;

  color:

    var(--muted);

  font-size:

    9px;

  letter-spacing:

    .12em;

}

.status-light {

  width:

    7px;

  height:

    7px;

  border-radius:

    50%;

  background:

    #665b60;

}

.status-light--online {

  background:

    var(--terminal);

  box-shadow:

    0 0 10px

    rgba(107,214,200,.6);

}

.status-light--warning {

  background:

    var(--warning);

  box-shadow:

    0 0 10px

    rgba(229,184,60,.45);

}

.cabinet-icon {

  margin-bottom:

    10px;

  color:

    var(--blood-bright);

  font-family:

    var(--font-display);

  font-size:

    28px;

}

.cabinet--files .cabinet-icon {

  color:

    var(--terminal);

}

.cabinet--lab .cabinet-icon {

  color:

    var(--rose);

}

.cabinet--archive .cabinet-icon {

  color:

    var(--warning);

}

.cabinet-number {

  margin:

    0 0 9px;

  color:

    var(--muted);

  font-size:

    9px;

  letter-spacing:

    .15em;

}

.cabinet h3 {

  margin:

    0 0 16px;

  font-family:

    var(--font-display);

  font-size:

    clamp(27px, 3vw, 42px);

  line-height:

    .95;

}

.cabinet > p:not(.cabinet-number) {

  color:

    var(--muted);

  font-size:

    13px;

  line-height:

    1.75;

}

.cabinet-meta {

  display:

    flex;

  flex-wrap:

    wrap;

  gap:

    7px;

  margin:

    14px 0 24px;

}

.cabinet-meta span {

  padding:

    6px 8px;

  border:

    1px solid

    rgba(107,214,200,.24);

  color:

    var(--terminal);

  font-size:

    8px;

  letter-spacing:

    .06em;

}

.cabinet-link {

  position:

    relative;

  z-index:

    2;

  margin-top:

    auto;

  display:

    flex;

  align-items:

    center;

  justify-content:

    space-between;

  width:

    100%;

  min-height:

    48px;

  padding:

    0 14px;

  border:

    1px solid

    rgba(255,255,255,.12);

  background:

    rgba(255,255,255,.025);

  color:

    var(--bone);

  text-decoration:

    none;

  cursor:

    pointer;

}

.cabinet-link:hover {

  border-color:

    var(--blood-bright);

  color:

    var(--blood-bright);

}

.cabinet-link--disabled {

  opacity:

    .46;

  cursor:

    not-allowed;

}

.builder-preview {

  display:

    grid;

  grid-template-columns:

    80px 1fr;

  gap:

    12px;

  margin:

    15px 0 24px;

}

.builder-avatar {

  display:

    grid;

  place-items:

    center;

  aspect-ratio:

    1;

  border:

    1px solid

    rgba(255,88,119,.25);

  color:

    var(--rose);

  font-family:

    var(--font-display);

  font-size:

    34px;

}

.builder-options {

  display:

    grid;

  align-content:

    center;

  gap:

    7px;

  color:

    var(--muted);

  font-size:

    9px;

}

.archive-slots {

  display:

    grid;

  grid-template-columns:

    repeat(3, 1fr);

  gap:

    7px;

  margin:

    20px 0 26px;

}

.archive-slots span {

  padding:

    18px 5px;

  border:

    1px dashed

    rgba(229,184,60,.23);

  color:

    rgba(229,184,60,.6);

  text-align:

    center;

  font-size:

    8px;

}



/* =========================================================

   SYSTEM MESSAGE

========================================================= */

.system-message {

  width:

    min(900px, 88%);

  margin:

    0 auto

    120px;

  padding:

    24px;

  border-left:

    3px solid

    var(--blood-bright);

  background:

    rgba(12,3,8,.6);

}

.system-label {

  margin:

    0 0 7px;

  color:

    var(--rose);

  font-size:

    9px;

  letter-spacing:

    .2em;

}

.system-message > p:last-of-type {

  display:

    inline;

  color:

    var(--muted);

}

.system-cursor {

  color:

    var(--terminal);

  animation:

    blink

    .7s

    infinite;

}



/* =========================================================

   MODAL

========================================================= */

.modal {

  position:

    fixed;

  inset: 0;

  z-index:

    150;

  display:

    grid;

  place-items:

    center;

  padding:

    20px;

}

.modal[hidden] {

  display:

    none;

}

.modal-backdrop {

  position:

    absolute;

  inset: 0;

  background:

    rgba(0,0,0,.82);

  backdrop-filter:

    blur(8px);

}

.modal-window {

  position:

    relative;

  z-index:

    2;

  width:

    min(620px, 100%);

  border:

    1px solid

    var(--border);

  background:

    #080306;

  box-shadow:

    0 0 70px

    rgba(255,35,72,.18);

}

.modal-bar {

  display:

    flex;

  justify-content:

    space-between;

  align-items:

    center;

  min-height:

    44px;

  padding-left:

    14px;

  border-bottom:

    1px solid

    var(--border);

  color:

    var(--rose);

  font-size:

    9px;

  letter-spacing:

    .12em;

}

.modal-close {

  width:

    44px;

  height:

    44px;

  border:

    0;

  border-left:

    1px solid

    var(--border);

  background:

    transparent;

  color:

    var(--bone);

  cursor:

    pointer;

  font-size:

    22px;

}

.modal-content {

  padding:

    clamp(25px, 6vw, 50px);

}

.modal-content h2 {

  margin:

    8px 0 22px;

  font-family:

    var(--font-display);

  font-size:

    clamp(38px, 7vw, 70px);

  line-height:

    .9;

}

.modal-content p {

  color:

    var(--muted);

  line-height:

    1.75;

}

.modal-fragments {

  margin:

    26px 0;

  padding:

    14px;

  border:

    1px solid

    rgba(255,255,255,.08);

  color:

    var(--terminal);

  font-size:

    10px;

  line-height:

    1.7;

}



/* =========================================================

   FOOTER

========================================================= */

.site-footer {

  min-height:

    95px;

  display:

    flex;

  justify-content:

    space-between;

  align-items:

    center;

  gap:

    25px;

  padding:

    25px

    clamp(18px, 5vw, 70px);

  border-top:

    1px solid

    var(--border);

  color:

    var(--muted);

  font-size:

    9px;

  letter-spacing:

    .1em;

}

.site-footer a {

  color:

    var(--rose);

  text-decoration:

    none;

}



/* =========================================================

   ANIMATIONS

========================================================= */

@keyframes heartPulse {

  0%,

  100% {

    transform:

      scale(1);

    opacity:

      .72;

  }

  50% {

    transform:

      scale(1.08);

    opacity:

      1;

  }

}

@keyframes blink {

  0%,

  49% {

    opacity:

      1;

  }

  50%,

  100% {

    opacity:

      0;

  }

}



/* =========================================================

   MOBILE

========================================================= */

@media (max-width: 920px) {

  .arcade-hero {

    grid-template-columns:

      1fr;

    min-height:

      auto;

    padding-bottom:

      110px;

  }

  .hero-machine {

    margin-top:

      10px;

  }

  .featured-game {

    grid-template-columns:

      1fr;

  }

  .featured-game__image {

    aspect-ratio:

      16 / 10;

  }

  .cabinet-grid {

    grid-template-columns:

      1fr;

  }

}



@media (max-width: 650px) {

  .site-header {

    align-items:

      flex-start;

  }

  .header-nav a {

    display:

      none;

  }

  .arcade-hero h1 {

    font-size:

      clamp(58px, 20vw, 94px);

  }

  .section {

    width:

      min(92%, 1240px);

    padding:

      80px 0;

  }

  .section-heading {

    align-items:

      flex-start;

    flex-direction:

      column;

  }

  .section-code {

    display:

      none;

  }

  .fragment-strip {

    grid-template-columns:

      repeat(3, 1fr);

  }

  .game-stats {

    grid-template-columns:

      1fr;

  }

  .game-stats div + div {

    border-left:

      0;

    border-top:

      1px solid

      rgba(255,255,255,.08);

  }

  .featured-actions {

    display:

      grid;

    grid-template-columns:

      1fr;

  }

  .arcade-button {
    width: 100%;
  }

  .site-footer {
    align-items: flex-start;
    flex-direction: column;

  }

}