:root {
  --bg: #080b0d;
  --surface: #0f1418;
  --surface-2: #151c21;

  --text: #f6f1e7;
  --muted: #9aa4a9;

  --line: rgba(255,255,255,.11);

  --amber: #ffb52e;
  --amber-soft: #ffd47b;

  --violet: #9b7cff;
  --violet-soft: #c9bcff;

  --lime: #9fe870;
  --lime-soft: #c8f6ad;

  --content: 1160px;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;

  min-width: 320px;

  color: var(--text);

  background:
    radial-gradient(
      circle at 8% 12%,
      rgba(255,181,46,.06),
      transparent 23%
    ),
    radial-gradient(
      circle at 92% 78%,
      rgba(155,124,255,.06),
      transparent 26%
    ),
    #080b0d;

  font-family:
    "Segoe UI",
    Arial,
    sans-serif;

  font-size: 15px;

  -webkit-font-smoothing: antialiased;
}

body::after {
  content: "";

  position: fixed;
  inset: 0;

  pointer-events: none;

  opacity: .10;

  background-image:
    radial-gradient(
      rgba(255,255,255,.25) .6px,
      transparent .6px
    );

  background-size: 13px 13px;
}

a {
  color: inherit;
  text-decoration: none;
}

.page-frame {
  position: relative;

  z-index: 1;

  width:
    min(var(--content), calc(100% - 40px));

  min-height: 100vh;

  margin: 0 auto;

  display: flex;
  flex-direction: column;
}

/* HEADER */

.arcade-header {
  height: 74px;

  display: flex;
  align-items: center;
  justify-content: space-between;

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

.arcade-logo {
  display: flex;
  align-items: center;

  gap: 11px;
}

.logo-box {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

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

  color: var(--amber);

  font-size: 13px;
  font-weight: 900;
}

.arcade-logo > span:last-child {
  display: flex;
  flex-direction: column;

  line-height: 1.15;
}

.arcade-logo strong {
  font-family:
    "Courier New",
    monospace;

  font-size: 13px;
  letter-spacing: .07em;
}

.arcade-logo small {
  margin-top: 3px;

  color: var(--muted);

  font-size: 9px;
}

.arcade-nav {
  display: flex;

  gap: 6px;
}

.arcade-nav a {
  padding: 8px 11px;

  border:
    1px solid transparent;

  color: var(--muted);

  font-family:
    "Courier New",
    monospace;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: .08em;
}

.arcade-nav a:hover {
  color: var(--text);

  border-color:
    var(--line);
}

.arcade-nav a.active {
  color: var(--amber);

  border-color:
    rgba(255,181,46,.30);

  background:
    rgba(255,181,46,.05);
}

/* HOME */

.home-screen {
  flex: 1;

  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(320px, .72fr);

  grid-template-rows:
    1fr auto;

  align-items: center;

  gap:
    20px 55px;

  padding:
    34px 0 22px;
}

.marquee {
  max-width: 650px;
}

.marquee-tag {
  margin-bottom: 14px;

  color: var(--amber);

  font-family:
    "Courier New",
    monospace;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: .14em;
}

.marquee h1 {
  margin:
    0 0 14px;

  font-family:
    "Arial Black",
    "Segoe UI",
    sans-serif;

  font-size:
    clamp(3.3rem, 6vw, 5.5rem);

  line-height: .95;

  letter-spacing: -.05em;
}

.marquee p {
  max-width: 520px;

  margin:
    0 0 23px;

  color: var(--muted);

  font-size: 16px;
  line-height: 1.55;
}

.marquee-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;
}

.arcade-button {
  min-height: 47px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 11px;

  padding:
    0 17px;

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

  color: var(--text);

  background:
    var(--surface);

  font-family:
    "Courier New",
    monospace;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: .07em;

  transition:
    .15s ease;
}

.arcade-button:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(255,255,255,.25);
}

.arcade-button--main {
  border-color:
    var(--amber);

  color: #0a0b0b;

  background:
    var(--amber);

  box-shadow:
    0 0 18px rgba(255,181,46,.14);
}

.arcade-button--main:hover {
  background:
    var(--amber-soft);

  box-shadow:
    0 0 24px rgba(255,181,46,.22);
}

/* FEATURED MACHINE */

.featured-machine {
  overflow: hidden;

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

  background:
    var(--surface);
}

.machine-top {
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding:
    0 14px;

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

  color: var(--muted);

  font-family:
    "Courier New",
    monospace;

  font-size: 9px;
  font-weight: 700;
}

.machine-live {
  color: var(--lime);
}

.machine-screen {
  padding: 11px;

  background:
    #040607;
}

.machine-art {
  position: relative;

  height: 150px;

  overflow: hidden;

  border:
    1px solid rgba(255,255,255,.06);

  background:
    radial-gradient(
      circle at center,
      rgba(155,124,255,.08),
      transparent 38%
    ),
    #06090b;
}

.machine-hole {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 65px;
  height: 65px;

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

  border:
    2px solid var(--violet);

  border-radius: 50%;

  background: #000;

  box-shadow:
    0 0 20px rgba(155,124,255,.18);
}

.machine-ring {
  position: absolute;

  top: 50%;
  left: 50%;

  border-radius: 50%;
}

.ring-a {
  width: 145px;
  height: 50px;

  transform:
    translate(-50%,-50%)
    rotate(-15deg);

  border:
    1px solid rgba(159,232,112,.45);
}

.ring-b {
  width: 100px;
  height: 100px;

  transform:
    translate(-50%,-50%)
    rotate(38deg);

  border:
    1px solid rgba(155,124,255,.28);
}

.machine-star {
  position: absolute;

  width: 4px;
  height: 4px;

  background:
    var(--amber);
}

.star-a {
  top: 25%;
  left: 20%;
}

.star-b {
  bottom: 22%;
  right: 22%;

  background:
    var(--lime);
}

.star-c {
  top: 18%;
  right: 30%;

  background:
    var(--violet);
}

.machine-info {
  padding:
    14px 16px 16px;
}

.machine-info small {
  color: var(--muted);

  font-family:
    "Courier New",
    monospace;

  font-size: 8px;
}

.machine-info h2 {
  margin:
    3px 0 5px;

  font-family:
    "Arial Black",
    sans-serif;

  font-size: 25px;
}

.machine-info p {
  margin: 0;

  color: var(--muted);

  font-size: 10px;
}

/* HOME LAUNCHERS */

.launcher-row {
  grid-column:
    1 / -1;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 10px;
}

.launcher-card {
  min-height: 73px;

  display: grid;

  grid-template-columns:
    auto 1fr;

  grid-template-rows:
    auto auto;

  column-gap: 12px;

  padding:
    12px 14px;

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

  background:
    rgba(15,20,24,.75);
}

.launcher-index {
  grid-row:
    1 / 3;

  align-self: center;

  font-family:
    "Courier New",
    monospace;

  font-size: 9px;
  font-weight: 800;
}

.launcher-card strong {
  font-family:
    "Courier New",
    monospace;

  font-size: 12px;
  letter-spacing: .08em;
}

.launcher-card small {
  color: var(--muted);

  font-size: 9px;
}

.launcher-card--amber {
  border-left:
    3px solid var(--amber);
}

.launcher-card--amber .launcher-index {
  color: var(--amber);
}

.launcher-card--violet {
  border-left:
    3px solid var(--violet);
}

.launcher-card--violet .launcher-index {
  color: var(--violet);
}

.launcher-card--lime {
  border-left:
    3px solid var(--lime);
}

.launcher-card--lime .launcher-index {
  color: var(--lime);
}

/* SECTION PAGES */

.section-screen {
  flex: 1;

  display: flex;
  flex-direction: column;

  justify-content: center;

  padding:
    28px 0 24px;
}

.section-title {
  margin-bottom: 22px;
}

.section-title > span {
  display: block;

  margin-bottom: 7px;

  color: var(--amber);

  font-family:
    "Courier New",
    monospace;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: .13em;
}

.section-title h1 {
  margin:
    0 0 6px;

  font-family:
    "Arial Black",
    sans-serif;

  font-size:
    clamp(2.7rem, 4.8vw, 4.4rem);

  letter-spacing: -.045em;
}

.section-title p {
  margin: 0;

  color: var(--muted);

  font-size: 13px;
}

/* GAMES */

.game-shelf {
  display: grid;

  grid-template-columns:
    1.5fr .55fr;

  gap: 11px;
}

.game-entry {
  border:
    1px solid var(--line);

  background:
    var(--surface);
}

.game-entry--live {
  min-height: 365px;

  display: grid;

  grid-template-columns:
    .9fr 1.1fr;
}

.game-entry-art {
  position: relative;

  overflow: hidden;

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

  background:
    radial-gradient(
      circle at center,
      rgba(155,124,255,.09),
      transparent 32%
    ),
    #050708;
}

.game-entry-art .machine-hole {
  width: 84px;
  height: 84px;
}

.game-entry-art .ring-a {
  width: 200px;
  height: 66px;
}

.game-entry-art .ring-b {
  width: 140px;
  height: 140px;
}

.game-entry-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding:
    29px 32px;
}

.entry-status {
  margin-bottom: 7px;

  color: var(--lime);

  font-family:
    "Courier New",
    monospace;

  font-size: 9px;
  font-weight: 700;
}

.game-entry-copy h2 {
  margin:
    0 0 10px;

  font-family:
    "Arial Black",
    sans-serif;

  font-size:
    clamp(2.3rem, 4vw, 3.7rem);
}

.game-entry-copy p {
  max-width: 430px;

  margin:
    0 0 16px;

  color: var(--muted);

  font-size: 12px;
  line-height: 1.5;
}

.entry-tags {
  display: flex;
  flex-wrap: wrap;

  gap: 5px;

  margin-bottom: 19px;
}

.entry-tags span {
  padding:
    4px 7px;

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

  color: var(--muted);

  font-family:
    "Courier New",
    monospace;

  font-size: 8px;
}

.arcade-button--large {
  align-self: flex-start;

  min-width: 205px;
  min-height: 52px;
}

.game-entry--empty {
  min-height: 365px;

  display: flex;
  flex-direction: column;

  justify-content: center;

  padding:
    24px;

  border-style: dashed;

  background:
    rgba(15,20,24,.50);
}

.game-entry--empty > span {
  color: var(--violet);

  font-family:
    "Courier New",
    monospace;

  font-size: 9px;
}

.game-entry--empty h2 {
  margin:
    7px 0 9px;

  font-family:
    "Arial Black",
    sans-serif;

  font-size: 24px;
}

.game-entry--empty p {
  color: var(--muted);

  font-size: 11px;
}

.game-entry--empty a {
  margin-top: 10px;

  color: var(--lime);

  font-family:
    "Courier New",
    monospace;

  font-size: 9px;
  font-weight: 700;
}

/* LABS */

.labs-board {
  display: grid;

  grid-template-columns:
    1.4fr repeat(3, .55fr);

  gap: 10px;
}

.lab-status,
.lab-tile {
  min-height: 285px;

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

  background:
    var(--surface);
}

.lab-status {
  padding:
    24px;
}

.lab-status-head {
  display: flex;
  justify-content: space-between;

  color: var(--muted);

  font-family:
    "Courier New",
    monospace;

  font-size: 8px;
}

.lab-status-head b {
  color: var(--violet-soft);
}

.lab-status h2 {
  margin:
    48px 0 9px;

  font-family:
    "Arial Black",
    sans-serif;

  font-size:
    32px;
}

.lab-status p {
  max-width: 520px;

  color: var(--muted);

  font-size: 11px;
}

.lab-status a {
  display: inline-block;

  margin-top: 17px;

  color: var(--amber);

  font-family:
    "Courier New",
    monospace;

  font-size: 9px;
  font-weight: 700;
}

.lab-tile {
  display: flex;
  flex-direction: column;

  justify-content: flex-end;

  padding:
    18px;
}

.lab-tile > span {
  margin-bottom: auto;

  color: var(--violet);

  font-family:
    "Courier New",
    monospace;

  font-size: 9px;
}

.lab-tile strong {
  font-family:
    "Courier New",
    monospace;

  font-size: 13px;
}

.lab-tile small {
  margin-top: 5px;

  color: var(--muted);

  font-size: 9px;
}

/* ABOUT */

.about-board {
  display: grid;

  grid-template-columns:
    1.2fr .8fr;

  gap: 11px;
}

.about-block {
  min-height: 315px;

  padding:
    28px;

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

  background:
    var(--surface);
}

.block-label {
  color: var(--amber);

  font-family:
    "Courier New",
    monospace;

  font-size: 9px;
  font-weight: 700;
}

.about-block h2 {
  margin:
    42px 0 11px;

  font-family:
    "Arial Black",
    sans-serif;

  font-size:
    clamp(2.2rem, 3.6vw, 3.4rem);
}

.about-block p {
  max-width: 560px;

  color: var(--muted);

  font-size: 12px;
  line-height: 1.55;
}

.about-block--creator {
  border-top:
    3px solid var(--violet);
}

.about-stats {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 5px;

  margin-top: 22px;
}

.about-stats div {
  padding:
    9px 6px;

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

  text-align: center;
}

.about-stats strong {
  display: block;

  color: var(--lime);

  font-size: 18px;
}

.about-stats span {
  color: var(--muted);

  font-family:
    "Courier New",
    monospace;

  font-size: 7px;
}

/* FOOTER */

.arcade-footer {
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: space-between;

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

  color: #677177;

  font-family:
    "Courier New",
    monospace;

  font-size: 8px;

  letter-spacing: .08em;
}

/* RESPONSIVE */

@media (max-width: 900px) {
  .home-screen {
    grid-template-columns: 1fr;
    grid-template-rows: auto;

    align-items: start;
  }

  .featured-machine {
    max-width: 500px;
  }

  .game-shelf,
  .about-board {
    grid-template-columns: 1fr;
  }

  .game-entry--empty {
    min-height: 160px;
  }

  .labs-board {
    grid-template-columns:
      repeat(3, 1fr);
  }

  .lab-status {
    grid-column:
      1 / -1;
  }
}

@media (max-width: 650px) {
  .page-frame {
    width:
      calc(100% - 22px);
  }

  .arcade-header {
    height: 64px;
  }

  .arcade-logo small {
    display: none;
  }

  .arcade-nav a {
    padding:
      7px 6px;

    font-size: 9px;
  }

  .home-screen {
    padding-top: 25px;
  }

  .marquee h1 {
    font-size:
      3rem;
  }

  .marquee-actions {
    flex-direction: column;
  }

  .arcade-button {
    width: 100%;
  }

  .launcher-row,
  .labs-board {
    grid-template-columns: 1fr;
  }

  .game-entry--live {
    grid-template-columns: 1fr;
  }

  .game-entry-art {
    min-height: 220px;

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

  .lab-status {
    grid-column: auto;
  }

  .lab-status,
  .lab-tile {
    min-height: 150px;
  }

  .about-stats {
    grid-template-columns: 1fr;
  }
}

/* ARCADE MOTION POLISH V5 */

/* =========================================================
   MORE READABLE / MORE OBVIOUS NAVIGATION
   ========================================================= */

.arcade-header {
  height: 86px;
}

.arcade-logo {
  gap: 14px;
}

.logo-box {
  width: 44px;
  height: 44px;

  font-size: 15px;

  box-shadow:
    0 0 18px rgba(255,181,46,.12);
}

.arcade-logo strong {
  font-size: 14px;
}

.arcade-logo small {
  font-size: 10px;
}

.arcade-nav {
  gap: 9px;
}

.arcade-nav a {
  min-width: 102px;
  min-height: 46px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 18px;

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

  background:
    rgba(15,20,24,.58);

  color: #c4cbd0;

  font-size: 12px;

  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease,
    color .16s ease;
}

.arcade-nav a:hover {
  transform: translateY(-2px);

  border-color:
    rgba(255,181,46,.36);

  background:
    rgba(255,181,46,.055);

  color: white;

  box-shadow:
    0 0 18px rgba(255,181,46,.07);
}

.arcade-nav a.active {
  border-color:
    rgba(255,181,46,.72);

  color: var(--amber);

  background:
    rgba(255,181,46,.09);

  box-shadow:
    inset 0 -2px 0 var(--amber),
    0 0 16px rgba(255,181,46,.07);
}


/* =========================================================
   STRONG PRIMARY PLAY BUTTON
   ========================================================= */

.arcade-button {
  min-height: 52px;

  padding-left: 23px;
  padding-right: 23px;
}

.arcade-button--main {
  min-height: 62px;

  padding-left: 30px;
  padding-right: 30px;

  font-size: 13px;
  letter-spacing: .09em;

  box-shadow:
    0 0 20px rgba(255,181,46,.18),
    0 8px 24px rgba(0,0,0,.18);

  animation:
    playButtonGlow 3.2s ease-in-out infinite;
}

.marquee-actions .arcade-button--main {
  min-width: 245px;
}

.arcade-button--large {
  min-width: 270px;
  min-height: 65px;

  font-size: 13px;
}

.arcade-button--main span {
  font-size: 15px;
}

@keyframes playButtonGlow {
  0%,
  100% {
    box-shadow:
      0 0 18px rgba(255,181,46,.14),
      0 8px 24px rgba(0,0,0,.18);
  }

  50% {
    box-shadow:
      0 0 29px rgba(255,181,46,.28),
      0 8px 26px rgba(0,0,0,.20);
  }
}


/* =========================================================
   PAGE ATMOSPHERE
   ========================================================= */

body {
  overflow-x: hidden;
}

/* slowly moving dotted layer */
body::after {
  opacity: .14;

  animation:
    arcadeStars 30s linear infinite;
}

@keyframes arcadeStars {
  from {
    background-position:
      0 0;
  }

  to {
    background-position:
      130px 78px;
  }
}


/* large soft floating ambient lights */
.page-frame::before,
.page-frame::after {
  content: "";

  position: fixed;

  z-index: -1;

  width: 320px;
  height: 320px;

  pointer-events: none;

  border-radius: 50%;

  filter: blur(75px);

  opacity: .075;
}

.page-frame::before {
  top: 18%;
  left: -120px;

  background:
    var(--amber);

  animation:
    ambientFloatA 17s ease-in-out infinite;
}

.page-frame::after {
  right: -120px;
  bottom: 10%;

  background:
    var(--violet);

  animation:
    ambientFloatB 21s ease-in-out infinite;
}

@keyframes ambientFloatA {
  0%,
  100% {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  50% {
    transform:
      translate3d(85px, 55px, 0)
      scale(1.12);
  }
}

@keyframes ambientFloatB {
  0%,
  100% {
    transform:
      translate3d(0, 0, 0)
      scale(1.05);
  }

  50% {
    transform:
      translate3d(-90px, -45px, 0)
      scale(.92);
  }
}


/* =========================================================
   HOME: CLEARER LAYOUT
   ========================================================= */

.home-screen {
  gap:
    27px 70px;

  padding-top: 38px;
  padding-bottom: 27px;
}

.marquee {
  position: relative;

  padding-left: 21px;

  border-left:
    3px solid rgba(255,181,46,.78);
}

.marquee-tag {
  margin-bottom: 17px;
}

.marquee p {
  max-width: 560px;

  font-size: 17px;
}

.marquee-actions {
  gap: 13px;
}


/* =========================================================
   FEATURE CABINET LIFE
   ========================================================= */

.featured-machine {
  position: relative;

  box-shadow:
    0 20px 55px rgba(0,0,0,.26),
    0 0 0 1px rgba(255,255,255,.015);
}

.featured-machine::before {
  content: "";

  position: absolute;

  z-index: 4;

  top: 0;
  left: -40%;

  width: 30%;
  height: 100%;

  pointer-events: none;

  background:
    linear-gradient(
      110deg,
      transparent,
      rgba(255,255,255,.035),
      transparent
    );

  animation:
    cabinetSweep 8s ease-in-out infinite;
}

@keyframes cabinetSweep {
  0%,
  72% {
    transform:
      translateX(0);
  }

  100% {
    transform:
      translateX(520%);
  }
}

.machine-art {
  animation:
    machineBreath 6s ease-in-out infinite;
}

@keyframes machineBreath {
  0%,
  100% {
    background-color:
      #06090b;
  }

  50% {
    background-color:
      #090b12;
  }
}

.ring-a {
  animation:
    orbitA 15s linear infinite;
}

.ring-b {
  animation:
    orbitB 20s linear infinite reverse;
}

@keyframes orbitA {
  from {
    transform:
      translate(-50%,-50%)
      rotate(-15deg);
  }

  to {
    transform:
      translate(-50%,-50%)
      rotate(345deg);
  }
}

@keyframes orbitB {
  from {
    transform:
      translate(-50%,-50%)
      rotate(38deg);
  }

  to {
    transform:
      translate(-50%,-50%)
      rotate(398deg);
  }
}

.machine-hole {
  animation:
    blackHolePulse 4.4s ease-in-out infinite;
}

@keyframes blackHolePulse {
  0%,
  100% {
    box-shadow:
      0 0 16px rgba(155,124,255,.14);
  }

  50% {
    box-shadow:
      0 0 30px rgba(155,124,255,.30);
  }
}

.machine-star {
  animation:
    starPulse 2.8s ease-in-out infinite;
}

.star-b {
  animation-delay:
    .8s;
}

.star-c {
  animation-delay:
    1.5s;
}

@keyframes starPulse {
  0%,
  100% {
    opacity: .35;

    transform:
      scale(.75);
  }

  50% {
    opacity: 1;

    transform:
      scale(1.5);
  }
}


/* =========================================================
   LAUNCHER CARDS
   ========================================================= */

.launcher-row {
  gap: 13px;
}

.launcher-card {
  min-height: 82px;

  padding:
    14px 17px;

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.launcher-card:hover {
  transform:
    translateY(-4px);

  background:
    rgba(21,28,33,.94);
}

.launcher-card--amber:hover {
  box-shadow:
    0 0 20px rgba(255,181,46,.08);
}

.launcher-card--violet:hover {
  box-shadow:
    0 0 20px rgba(155,124,255,.10);
}

.launcher-card--lime:hover {
  box-shadow:
    0 0 20px rgba(159,232,112,.08);
}

.launcher-card strong {
  font-size: 13px;
}

.launcher-card small {
  font-size: 10px;
}


/* =========================================================
   INNER PAGE CLARITY
   ========================================================= */

.section-screen {
  padding-top: 34px;
  padding-bottom: 28px;
}

.section-title {
  padding-left: 17px;

  border-left:
    3px solid var(--amber);
}

.section-title h1 {
  font-size:
    clamp(2.5rem, 4.25vw, 3.9rem);
}


/* =========================================================
   GAMES PAGE
   ========================================================= */

.game-entry--live {
  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}

.game-entry--live:hover {
  border-color:
    rgba(159,232,112,.28);

  box-shadow:
    0 18px 45px rgba(0,0,0,.18);
}

.game-entry-art {
  animation:
    gameArtDrift 8s ease-in-out infinite;
}

@keyframes gameArtDrift {
  0%,
  100% {
    background-position:
      center center;
  }

  50% {
    background-position:
      54% 47%;
  }
}


/* =========================================================
   LABS / ABOUT CARDS
   ========================================================= */

.lab-status,
.lab-tile,
.about-block {
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.lab-status:hover,
.lab-tile:hover,
.about-block:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(255,255,255,.18);

  box-shadow:
    0 15px 35px rgba(0,0,0,.14);
}

.lab-tile:nth-child(2) {
  border-top:
    2px solid var(--amber);
}

.lab-tile:nth-child(3) {
  border-top:
    2px solid var(--violet);
}

.lab-tile:nth-child(4) {
  border-top:
    2px solid var(--lime);
}


/* =========================================================
   VERY SUBTLE LIVING HEADER
   ========================================================= */

.logo-box {
  animation:
    logoPulse 5s ease-in-out infinite;
}

@keyframes logoPulse {
  0%,
  100% {
    box-shadow:
      0 0 12px rgba(255,181,46,.07);
  }

  50% {
    box-shadow:
      0 0 20px rgba(255,181,46,.20);
  }
}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation:
      none !important;

    transition:
      none !important;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {
  .arcade-header {
    height: 70px;
  }

  .logo-box {
    width: 38px;
    height: 38px;
  }

  .arcade-nav {
    gap: 3px;
  }

  .arcade-nav a {
    min-width: auto;
    min-height: 40px;

    padding-left: 9px;
    padding-right: 9px;

    font-size: 9px;
  }

  .marquee {
    padding-left: 13px;
  }

  .marquee-actions .arcade-button--main {
    width: 100%;
  }

  .launcher-card {
    min-height: 70px;
  }
}

/* END ARCADE MOTION POLISH V5 */

/* ARCADE EXPERIENCE V6 */

/* =========================================================
   BIGGER, MORE READABLE SMALL TEXT
   ========================================================= */

.marquee-tag {
  font-size: 13px;
  letter-spacing: .15em;
}

.marquee p {
  font-size: 18px;
  line-height: 1.6;
}

.machine-top {
  height: 46px;
  font-size: 11px;
  letter-spacing: .08em;
}

.machine-live {
  font-size: 11px;
}

.machine-info {
  padding: 17px 18px 19px;
}

.machine-info small {
  font-size: 10.5px;
  letter-spacing: .05em;
}

.machine-info h2 {
  font-size: 28px;
}

.machine-info p {
  font-size: 12.5px;
  line-height: 1.5;
}

.launcher-card {
  min-height: 88px;
}

.launcher-index {
  font-size: 11px;
}

.launcher-card strong {
  font-size: 15px;
}

.launcher-card small {
  font-size: 11px;
  line-height: 1.4;
}

.arcade-footer {
  font-size: 10px;
}


/* =========================================================
   BIGGER TOP NAVIGATION
   ========================================================= */

.arcade-nav {
  gap: 10px;
}

.arcade-nav a {
  min-width: 118px;
  min-height: 50px;

  font-size: 13px;
  letter-spacing: .09em;
}

.arcade-logo strong {
  font-size: 15px;
}

.arcade-logo small {
  font-size: 10.5px;
}


/* =========================================================
   INNER PAGE READABILITY
   ========================================================= */

.section-title > span {
  font-size: 12px;
}

.section-title p {
  font-size: 15px;
  line-height: 1.55;
}

.entry-status {
  font-size: 10.5px;
}

.game-entry-copy p {
  font-size: 13.5px;
  line-height: 1.6;
}

.entry-tags span {
  font-size: 9.5px;
}

.game-entry--empty > span {
  font-size: 10.5px;
}

.game-entry--empty p {
  font-size: 12px;
}

.game-entry--empty a {
  font-size: 10.5px;
}

.lab-status-head {
  font-size: 10px;
}

.lab-status p {
  font-size: 12.5px;
  line-height: 1.55;
}

.lab-status a {
  font-size: 10.5px;
}

.lab-tile > span {
  font-size: 10.5px;
}

.lab-tile strong {
  font-size: 15px;
}

.lab-tile small {
  font-size: 10.5px;
}

.block-label {
  font-size: 10.5px;
}

.about-block p {
  font-size: 13px;
  line-height: 1.65;
}

.about-stats span {
  font-size: 8.5px;
}


/* =========================================================
   STRONGER PLAY BUTTON
   ========================================================= */

.arcade-button--main {
  min-height: 66px;

  padding-left: 34px;
  padding-right: 34px;

  font-size: 14px;

  border-width: 2px;

  animation:
    mainPlayPulse 3.4s ease-in-out infinite;
}

.marquee-actions .arcade-button--main {
  min-width: 270px;
}

.arcade-button--large {
  min-width: 285px;
  min-height: 68px;

  font-size: 14px;
}

@keyframes mainPlayPulse {
  0%,
  100% {
    box-shadow:
      0 0 16px rgba(255,181,46,.12),
      0 9px 24px rgba(0,0,0,.22);
  }

  50% {
    box-shadow:
      0 0 33px rgba(255,181,46,.30),
      0 10px 30px rgba(0,0,0,.24);
  }
}


/* =========================================================
   GLOBAL MOVING BACKGROUND
   ========================================================= */

body {
  position: relative;
  overflow-x: hidden;

  background:
    radial-gradient(
      circle at 8% 15%,
      rgba(255,181,46,.08),
      transparent 25%
    ),
    radial-gradient(
      circle at 90% 74%,
      rgba(155,124,255,.09),
      transparent 28%
    ),
    radial-gradient(
      circle at 55% 110%,
      rgba(159,232,112,.05),
      transparent 30%
    ),
    #080b0d;

  background-size:
    130% 130%,
    140% 140%,
    120% 120%,
    auto;

  animation:
    backgroundDrift 26s ease-in-out infinite alternate;
}

@keyframes backgroundDrift {
  0% {
    background-position:
      0% 0%,
      100% 100%,
      50% 100%;
  }

  100% {
    background-position:
      8% 7%,
      91% 90%,
      42% 88%;
  }
}


/* moving star/data field */
body::after {
  opacity: .18;

  background-image:
    radial-gradient(
      rgba(255,255,255,.32) .7px,
      transparent .7px
    ),
    radial-gradient(
      rgba(159,232,112,.20) .7px,
      transparent .7px
    );

  background-size:
    18px 18px,
    51px 51px;

  background-position:
    0 0,
    10px 17px;

  animation:
    dataFieldMove 34s linear infinite;
}

@keyframes dataFieldMove {
  from {
    background-position:
      0 0,
      10px 17px;
  }

  to {
    background-position:
      180px 100px,
      -120px 210px;
  }
}


/* scanlines / atmospheric sweep */
body::before {
  content: "";

  position: fixed;
  inset: 0;

  z-index: 0;

  pointer-events: none;

  opacity: .07;

  background:
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 5px,
      rgba(255,255,255,.04) 6px
    );

  animation:
    scanMove 18s linear infinite;
}

@keyframes scanMove {
  from {
    transform: translateY(-24px);
  }

  to {
    transform: translateY(24px);
  }
}


/* =========================================================
   FLOATING BACKGROUND OBJECTS
   Every main page gets its own two geometric objects.
   ========================================================= */

.home-screen,
.section-screen {
  position: relative;
  isolation: isolate;
}

.home-screen > *,
.section-screen > * {
  position: relative;
  z-index: 3;
}

.home-screen::before,
.section-screen::before {
  content: "";

  position: absolute;

  z-index: 1;

  width: 125px;
  height: 125px;

  top: 11%;
  right: 7%;

  pointer-events: none;

  border:
    1px solid rgba(155,124,255,.20);

  transform: rotate(45deg);

  box-shadow:
    inset 0 0 25px rgba(155,124,255,.025);

  animation:
    floatingDiamond 19s ease-in-out infinite;
}

.home-screen::after,
.section-screen::after {
  content: "";

  position: absolute;

  z-index: 1;

  width: 82px;
  height: 82px;

  left: -3%;
  bottom: 11%;

  pointer-events: none;

  border:
    1px solid rgba(159,232,112,.16);

  border-radius: 50%;

  box-shadow:
    0 0 30px rgba(159,232,112,.025);

  animation:
    floatingCircle 15s ease-in-out infinite;
}

@keyframes floatingDiamond {
  0%,
  100% {
    transform:
      translate3d(0,0,0)
      rotate(45deg);

    opacity: .42;
  }

  50% {
    transform:
      translate3d(-42px,55px,0)
      rotate(115deg);

    opacity: .75;
  }
}

@keyframes floatingCircle {
  0%,
  100% {
    transform:
      translate3d(0,0,0)
      scale(.9);

    opacity: .32;
  }

  50% {
    transform:
      translate3d(68px,-50px,0)
      scale(1.15);

    opacity: .66;
  }
}


/* =========================================================
   AMBIENT LIGHT BLOBS
   ========================================================= */

.page-frame::before,
.page-frame::after {
  width: 420px;
  height: 420px;

  filter: blur(95px);

  opacity: .07;
}

.page-frame::before {
  background:
    var(--amber);

  animation:
    warmLightTravel 21s ease-in-out infinite;
}

.page-frame::after {
  background:
    var(--violet);

  animation:
    purpleLightTravel 25s ease-in-out infinite;
}

@keyframes warmLightTravel {
  0%,
  100% {
    transform:
      translate3d(-30px,0,0)
      scale(.9);
  }

  50% {
    transform:
      translate3d(155px,100px,0)
      scale(1.14);
  }
}

@keyframes purpleLightTravel {
  0%,
  100% {
    transform:
      translate3d(0,0,0)
      scale(1);
  }

  50% {
    transform:
      translate3d(-150px,-80px,0)
      scale(.88);
  }
}


/* =========================================================
   MACHINE / FEATURE ANIMATION
   ========================================================= */

.machine-hole {
  animation:
    machineCorePulse 3.2s ease-in-out infinite;
}

@keyframes machineCorePulse {
  0%,
  100% {
    box-shadow:
      0 0 12px rgba(155,124,255,.15);

    transform:
      translate(-50%,-50%)
      scale(.96);
  }

  50% {
    box-shadow:
      0 0 32px rgba(155,124,255,.38);

    transform:
      translate(-50%,-50%)
      scale(1.04);
  }
}

.machine-live {
  position: relative;
}

.machine-live::before {
  content: "";

  display: inline-block;

  width: 6px;
  height: 6px;

  margin-right: 6px;

  border-radius: 50%;

  background:
    var(--lime);

  animation:
    liveBlink 1.7s ease-in-out infinite;
}

@keyframes liveBlink {
  0%,
  100% {
    opacity: .45;

    box-shadow:
      0 0 0 rgba(159,232,112,0);
  }

  50% {
    opacity: 1;

    box-shadow:
      0 0 12px rgba(159,232,112,.75);
  }
}


/* =========================================================
   CARDS FEEL ALIVE
   ========================================================= */

.launcher-card,
.lab-tile,
.about-block,
.game-entry,
.lab-status {
  position: relative;
  overflow: hidden;
}

.launcher-card::after,
.lab-tile::after,
.about-block::after,
.game-entry::after,
.lab-status::after {
  content: "";

  position: absolute;

  top: -30%;
  left: -80%;

  width: 45%;
  height: 160%;

  pointer-events: none;

  opacity: 0;

  transform: rotate(16deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.035),
      transparent
    );

  transition:
    opacity .2s ease;
}

.launcher-card:hover::after,
.lab-tile:hover::after,
.about-block:hover::after,
.game-entry:hover::after,
.lab-status:hover::after {
  opacity: 1;

  animation:
    cardSweep .75s ease-out forwards;
}

@keyframes cardSweep {
  from {
    left: -80%;
  }

  to {
    left: 140%;
  }
}


/* tiny passive movement on selected panels */

.launcher-card:nth-child(1) {
  animation:
    cardIdleA 9s ease-in-out infinite;
}

.launcher-card:nth-child(2) {
  animation:
    cardIdleB 11s ease-in-out infinite;
}

.launcher-card:nth-child(3) {
  animation:
    cardIdleA 13s ease-in-out infinite reverse;
}

@keyframes cardIdleA {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }
}

@keyframes cardIdleB {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(2px);
  }
}


/* =========================================================
   LABS
   ========================================================= */

.lab-tile:nth-child(2) {
  animation:
    labGlowAmber 6s ease-in-out infinite;
}

.lab-tile:nth-child(3) {
  animation:
    labGlowViolet 7s ease-in-out infinite;
}

.lab-tile:nth-child(4) {
  animation:
    labGlowLime 8s ease-in-out infinite;
}

@keyframes labGlowAmber {
  50% {
    box-shadow:
      inset 0 3px 0 rgba(255,181,46,.55),
      0 0 22px rgba(255,181,46,.04);
  }
}

@keyframes labGlowViolet {
  50% {
    box-shadow:
      inset 0 3px 0 rgba(155,124,255,.65),
      0 0 22px rgba(155,124,255,.05);
  }
}

@keyframes labGlowLime {
  50% {
    box-shadow:
      inset 0 3px 0 rgba(159,232,112,.55),
      0 0 22px rgba(159,232,112,.04);
  }
}


/* =========================================================
   ABOUT
   ========================================================= */

.about-block--main {
  background:
    radial-gradient(
      circle at 9% 15%,
      rgba(255,181,46,.05),
      transparent 32%
    ),
    var(--surface);
}

.about-block--creator {
  background:
    radial-gradient(
      circle at 88% 15%,
      rgba(155,124,255,.07),
      transparent 34%
    ),
    var(--surface);
}

.about-stats strong {
  animation:
    statPulse 4.5s ease-in-out infinite;
}

.about-stats div:nth-child(2) strong {
  animation-delay: .7s;
}

.about-stats div:nth-child(3) strong {
  animation-delay: 1.4s;
}

@keyframes statPulse {
  0%,
  100% {
    opacity: .75;
  }

  50% {
    opacity: 1;

    text-shadow:
      0 0 12px rgba(159,232,112,.30);
  }
}


/* =========================================================
   ACTIVE NAV PULSE
   ========================================================= */

.arcade-nav a.active {
  position: relative;
}

.arcade-nav a.active::after {
  content: "";

  position: absolute;

  right: 12px;
  bottom: 6px;
  left: 12px;

  height: 1px;

  background:
    var(--amber);

  animation:
    activeNavPulse 2.6s ease-in-out infinite;
}

@keyframes activeNavPulse {
  0%,
  100% {
    opacity: .25;
  }

  50% {
    opacity: 1;

    box-shadow:
      0 0 10px rgba(255,181,46,.65);
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation:
      none !important;

    transition:
      none !important;
  }
}


/* =========================================================
   MOBILE SAFETY
   ========================================================= */

@media (max-width: 650px) {
  .arcade-nav {
    gap: 3px;
  }

  .arcade-nav a {
    min-width: auto;
    min-height: 42px;

    padding:
      0 9px;

    font-size: 10px;
  }

  .marquee-tag {
    font-size: 11px;
  }

  .machine-top,
  .machine-live {
    font-size: 9px;
  }

  .launcher-card strong {
    font-size: 13px;
  }

  .home-screen::before,
  .section-screen::before {
    width: 80px;
    height: 80px;
  }

  .page-frame::before,
  .page-frame::after {
    width: 240px;
    height: 240px;
  }
}

/* END ARCADE EXPERIENCE V6 */

/* ARCADE EXPERIENCE V7 */

/* =========================================================
   PRIMARY NAVIGATION
   One clear navigation system everywhere.
   ========================================================= */

.arcade-header {
  position: relative;
  z-index: 50;

  height: 96px;

  overflow: visible;
}

.arcade-nav {
  margin-left: auto;

  display: flex;
  gap: 14px;
}

.arcade-nav a {
  position: relative;

  min-width: 138px;
  min-height: 58px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 24px;

  border: 1px solid rgba(255,255,255,.15);

  color: #e8ecef;
  background: rgba(10,14,17,.78);

  font-size: 14px;
  font-weight: 800;
  letter-spacing: .10em;

  box-shadow:
    inset 0 0 20px rgba(255,255,255,.015),
    0 7px 20px rgba(0,0,0,.16);

  transition:
    transform .16s ease,
    border-color .16s ease,
    color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.arcade-nav a:nth-child(1) {
  --nav-accent: var(--amber);
  --nav-glow: rgba(255,181,46,.30);
}

.arcade-nav a:nth-child(2) {
  --nav-accent: var(--violet);
  --nav-glow: rgba(155,124,255,.30);
}

.arcade-nav a:nth-child(3) {
  --nav-accent: var(--lime);
  --nav-glow: rgba(159,232,112,.27);
}

.arcade-nav a:hover,
.arcade-nav a.active {
  transform: translateY(-2px);

  color: var(--nav-accent);

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

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--nav-accent) 8%, transparent),
      rgba(10,14,17,.90)
    );

  box-shadow:
    inset 0 -2px 0 var(--nav-accent),
    0 0 20px var(--nav-glow),
    0 10px 25px rgba(0,0,0,.20);
}

.arcade-nav a::before {
  content: "";

  position: absolute;

  top: -1px;
  left: 18%;

  width: 64%;
  height: 1px;

  opacity: .5;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--nav-accent),
      transparent
    );
}

.arcade-nav a.active::after {
  right: 18px;
  bottom: 7px;
  left: 18px;

  background: var(--nav-accent);

  box-shadow:
    0 0 12px var(--nav-glow);
}


/* =========================================================
   LOGO
   ========================================================= */

.logo-box {
  width: 46px;
  height: 46px;

  font-size: 15px;

  border-color: var(--amber);

  box-shadow:
    0 0 18px rgba(255,181,46,.22),
    inset 0 0 12px rgba(255,181,46,.08);
}

.arcade-logo strong {
  font-size: 15px;
}

.arcade-logo small {
  margin-top: 4px;

  font-size: 11px;
}


/* =========================================================
   HOME TYPOGRAPHY
   ========================================================= */

.marquee-tag {
  margin-bottom: 18px;

  color: var(--amber);

  font-size: 17px;
  font-weight: 900;

  letter-spacing: .16em;

  text-shadow:
    0 0 11px rgba(255,181,46,.34);
}

.marquee {
  border-left:
    3px solid var(--amber);

  box-shadow:
    -10px 0 30px -20px rgba(255,181,46,.55);
}

.marquee h1 {
  text-shadow:
    0 0 26px rgba(255,255,255,.035);
}

.marquee p {
  color: #b5bec4;

  font-size: 18px;
}


/* =========================================================
   HOME LAYOUT AFTER REMOVING DUPLICATE TABS
   ========================================================= */

.home-screen {
  flex: 1;

  grid-template-columns:
    minmax(0, 1.17fr)
    minmax(350px, .73fr);

  grid-template-rows: 1fr;

  min-height: calc(100vh - 138px);

  gap: 75px;

  padding-top: 40px;
  padding-bottom: 35px;
}


/* =========================================================
   FEATURED MACHINE
   ========================================================= */

.featured-machine {
  border-color:
    rgba(155,124,255,.30);

  box-shadow:
    0 24px 65px rgba(0,0,0,.27),
    0 0 27px rgba(155,124,255,.07),
    inset 0 0 25px rgba(155,124,255,.025);

  animation:
    cabinetFloat 7s ease-in-out infinite;
}

@keyframes cabinetFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

.machine-top {
  height: 48px;

  font-size: 12px;
}

.machine-live {
  color: var(--lime);

  font-size: 12px;

  text-shadow:
    0 0 9px rgba(159,232,112,.55);
}

.machine-info small {
  color: var(--violet-soft);

  font-size: 11px;
}

.machine-info h2 {
  font-size: 29px;

  text-shadow:
    0 0 14px rgba(155,124,255,.16);
}

.machine-info p {
  font-size: 13px;
}


/* =========================================================
   MAIN PLAY BUTTON
   ========================================================= */

.arcade-button--main {
  min-height: 68px;

  border:
    2px solid #ffc85a;

  font-size: 14px;

  box-shadow:
    0 0 24px rgba(255,181,46,.28),
    0 9px 28px rgba(0,0,0,.22);

  animation:
    heroPlayGlow 2.8s ease-in-out infinite;
}

.marquee-actions .arcade-button--main {
  min-width: 285px;
}

@keyframes heroPlayGlow {
  0%,
  100% {
    box-shadow:
      0 0 18px rgba(255,181,46,.19),
      0 9px 25px rgba(0,0,0,.22);
  }

  50% {
    box-shadow:
      0 0 39px rgba(255,181,46,.42),
      0 10px 29px rgba(0,0,0,.25);
  }
}


/* =========================================================
   INTERNAL PAGE LABELS
   ========================================================= */

.section-title > span {
  font-size: 13px;

  text-shadow:
    0 0 9px rgba(255,181,46,.25);
}

.section-title p {
  color: #aeb8be;

  font-size: 15px;
}


/* =========================================================
   AMBIENT BACKGROUND OBJECTS
   ========================================================= */

.ambient-layer {
  position: fixed;
  inset: 0;

  z-index: 0;

  overflow: hidden;

  pointer-events: none;
}

.ambient-object {
  position: absolute;

  display: block;

  opacity: .22;
}


/* amber ring */
.ambient-object--one {
  width: 190px;
  height: 190px;

  top: 14%;
  left: -55px;

  border:
    1px solid rgba(255,181,46,.44);

  border-radius: 50%;

  box-shadow:
    0 0 35px rgba(255,181,46,.08),
    inset 0 0 35px rgba(255,181,46,.03);

  animation:
    ambientOrbitOne 19s ease-in-out infinite;
}


/* violet rotating square */
.ambient-object--two {
  width: 140px;
  height: 140px;

  top: 22%;
  right: 7%;

  border:
    1px solid rgba(155,124,255,.48);

  box-shadow:
    0 0 30px rgba(155,124,255,.07);

  transform: rotate(45deg);

  animation:
    ambientRotateSquare 23s linear infinite;
}


/* lime double ring */
.ambient-object--three {
  width: 105px;
  height: 105px;

  left: 8%;
  bottom: 12%;

  border:
    1px solid rgba(159,232,112,.42);

  border-radius: 50%;

  box-shadow:
    0 0 28px rgba(159,232,112,.07);

  animation:
    ambientFloatThree 14s ease-in-out infinite;
}

.ambient-object--three::after {
  content: "";

  position: absolute;
  inset: 15px;

  border:
    1px solid rgba(159,232,112,.19);

  border-radius: 50%;
}


/* violet neon rail */
.ambient-object--four {
  width: 210px;
  height: 1px;

  right: 13%;
  bottom: 17%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(155,124,255,.72),
      transparent
    );

  box-shadow:
    0 0 13px rgba(155,124,255,.30);

  animation:
    ambientRail 11s ease-in-out infinite;
}


/* amber diagonal */
.ambient-object--five {
  width: 150px;
  height: 1px;

  left: 25%;
  top: 19%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,181,46,.62),
      transparent
    );

  transform: rotate(-28deg);

  box-shadow:
    0 0 11px rgba(255,181,46,.22);

  animation:
    ambientDiagonal 16s ease-in-out infinite;
}


/* tiny lime beacon */
.ambient-object--six {
  width: 12px;
  height: 12px;

  right: 25%;
  top: 18%;

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

  border-radius: 50%;

  background:
    rgba(159,232,112,.08);

  box-shadow:
    0 0 20px rgba(159,232,112,.55);

  animation:
    ambientBeacon 2.5s ease-in-out infinite;
}


@keyframes ambientOrbitOne {
  0%,
  100% {
    transform:
      translate3d(0,0,0)
      scale(.88);
  }

  50% {
    transform:
      translate3d(95px,75px,0)
      scale(1.14);
  }
}

@keyframes ambientRotateSquare {
  from {
    transform:
      translate3d(0,0,0)
      rotate(45deg);
  }

  to {
    transform:
      translate3d(-55px,45px,0)
      rotate(405deg);
  }
}

@keyframes ambientFloatThree {
  0%,
  100% {
    transform:
      translate3d(0,0,0);
  }

  50% {
    transform:
      translate3d(65px,-70px,0);
  }
}

@keyframes ambientRail {
  0%,
  100% {
    transform:
      translateX(0)
      scaleX(.75);

    opacity: .14;
  }

  50% {
    transform:
      translateX(-100px)
      scaleX(1.2);

    opacity: .55;
  }
}

@keyframes ambientDiagonal {
  0%,
  100% {
    transform:
      translate3d(0,0,0)
      rotate(-28deg);

    opacity: .15;
  }

  50% {
    transform:
      translate3d(90px,45px,0)
      rotate(-18deg);

    opacity: .50;
  }
}

@keyframes ambientBeacon {
  0%,
  100% {
    opacity: .25;

    transform: scale(.75);
  }

  50% {
    opacity: 1;

    transform: scale(1.25);

    box-shadow:
      0 0 30px rgba(159,232,112,.80);
  }
}


/* =========================================================
   MOVING LIGHT BEAMS
   ========================================================= */

.ambient-layer::before {
  content: "";

  position: absolute;

  top: -20%;
  left: 25%;

  width: 1px;
  height: 150%;

  opacity: .18;

  background:
    linear-gradient(
      transparent,
      var(--amber),
      transparent
    );

  box-shadow:
    0 0 18px rgba(255,181,46,.35);

  transform: rotate(27deg);

  animation:
    lightBeamOne 17s ease-in-out infinite;
}

.ambient-layer::after {
  content: "";

  position: absolute;

  top: -20%;
  right: 21%;

  width: 1px;
  height: 145%;

  opacity: .15;

  background:
    linear-gradient(
      transparent,
      var(--violet),
      transparent
    );

  box-shadow:
    0 0 18px rgba(155,124,255,.30);

  transform: rotate(-22deg);

  animation:
    lightBeamTwo 21s ease-in-out infinite;
}

@keyframes lightBeamOne {
  0%,
  100% {
    transform:
      translateX(-80px)
      rotate(27deg);

    opacity: .08;
  }

  50% {
    transform:
      translateX(160px)
      rotate(27deg);

    opacity: .25;
  }
}

@keyframes lightBeamTwo {
  0%,
  100% {
    transform:
      translateX(80px)
      rotate(-22deg);

    opacity: .07;
  }

  50% {
    transform:
      translateX(-160px)
      rotate(-22deg);

    opacity: .22;
  }
}


/* =========================================================
   STRONGER GLOBAL NEON ATMOSPHERE
   ========================================================= */

body {
  background:
    radial-gradient(
      circle at 6% 20%,
      rgba(255,181,46,.12),
      transparent 27%
    ),
    radial-gradient(
      circle at 92% 70%,
      rgba(155,124,255,.12),
      transparent 30%
    ),
    radial-gradient(
      circle at 48% 110%,
      rgba(159,232,112,.055),
      transparent 35%
    ),
    #080b0d;

  animation:
    neonBackgroundDrift 24s ease-in-out infinite alternate;
}

@keyframes neonBackgroundDrift {
  from {
    background-position:
      0 0,
      100% 100%,
      50% 100%;
  }

  to {
    background-position:
      6% 5%,
      92% 88%,
      42% 92%;
  }
}


/* brighter moving data field */
body::after {
  opacity: .20;

  animation:
    dataFieldV7 32s linear infinite;
}

@keyframes dataFieldV7 {
  from {
    background-position:
      0 0,
      10px 17px;
  }

  to {
    background-position:
      240px 130px,
      -160px 230px;
  }
}


/* =========================================================
   GAME PAGE
   ========================================================= */

.game-entry--live {
  border-color:
    rgba(155,124,255,.20);

  box-shadow:
    0 0 28px rgba(155,124,255,.045);
}

.game-entry--live:hover {
  border-color:
    rgba(155,124,255,.58);

  box-shadow:
    0 0 36px rgba(155,124,255,.14),
    0 22px 50px rgba(0,0,0,.18);
}

.entry-status {
  color: var(--lime);

  text-shadow:
    0 0 9px rgba(159,232,112,.40);
}


/* =========================================================
   LABS PAGE
   ========================================================= */

.lab-status {
  border-left:
    2px solid var(--amber);

  box-shadow:
    -8px 0 25px -20px rgba(255,181,46,.7);
}

.lab-tile:nth-child(2) {
  box-shadow:
    inset 0 2px 0 var(--amber);
}

.lab-tile:nth-child(3) {
  box-shadow:
    inset 0 2px 0 var(--violet);
}

.lab-tile:nth-child(4) {
  box-shadow:
    inset 0 2px 0 var(--lime);
}


/* =========================================================
   ABOUT PAGE
   ========================================================= */

.about-block--main {
  border-left:
    2px solid var(--amber);

  box-shadow:
    -8px 0 25px -20px rgba(255,181,46,.7);
}

.about-block--creator {
  border-top:
    2px solid var(--violet);

  box-shadow:
    0 -8px 25px -20px rgba(155,124,255,.7);
}


/* =========================================================
   CARD HOVER
   ========================================================= */

.game-entry,
.lab-status,
.lab-tile,
.about-block {
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.game-entry:hover,
.lab-status:hover,
.lab-tile:hover,
.about-block:hover {
  transform: translateY(-4px);
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {
  .arcade-header {
    height: 74px;
  }

  .arcade-nav {
    gap: 4px;
  }

  .arcade-nav a {
    min-width: auto;
    min-height: 44px;

    padding: 0 9px;

    font-size: 10px;
  }

  .logo-box {
    width: 39px;
    height: 39px;
  }

  .marquee-tag {
    font-size: 13px;
  }

  .home-screen {
    display: block;

    min-height: auto;
  }

  .featured-machine {
    margin-top: 35px;
  }

  .ambient-object--four,
  .ambient-object--five {
    display: none;
  }
}

/* END ARCADE EXPERIENCE V7 */

/* ARCADE READABILITY NEON V8 */

/* =========================================================
   STRONGER NEON TITLES
   ========================================================= */

.marquee h1,
.section-title h1,
.game-entry-copy h2,
.game-entry--empty h2,
.lab-status h2,
.about-block h2,
.machine-info h2 {
  color: #fff8e9;

  text-shadow:
    0 0 4px rgba(255,255,255,.30),
    0 0 12px rgba(255,181,46,.20),
    0 0 24px rgba(155,124,255,.13);
}

.marquee h1 {
  text-shadow:
    0 0 5px rgba(255,255,255,.30),
    0 0 15px rgba(255,181,46,.26),
    0 0 34px rgba(255,181,46,.12);
}

.section-title h1 {
  text-shadow:
    0 0 5px rgba(255,255,255,.24),
    0 0 15px rgba(155,124,255,.22),
    0 0 30px rgba(155,124,255,.10);
}

.machine-info h2 {
  color: #f7f1ff;

  text-shadow:
    0 0 8px rgba(155,124,255,.32),
    0 0 20px rgba(155,124,255,.15);
}

.game-entry-copy h2 {
  text-shadow:
    0 0 6px rgba(255,255,255,.22),
    0 0 17px rgba(159,232,112,.17),
    0 0 29px rgba(155,124,255,.12);
}


/* =========================================================
   ABOUT: MUCH BIGGER AND EASIER TO READ
   ========================================================= */

.about-board {
  gap: 18px;
}

.about-block {
  padding: 36px 38px;
}

.about-block .block-label {
  display: inline-block;

  margin-bottom: 24px;

  color: var(--amber);

  font-size: 16px;
  font-weight: 900;

  letter-spacing: .13em;

  text-shadow:
    0 0 9px rgba(255,181,46,.45),
    0 0 18px rgba(255,181,46,.18);
}

.about-block--creator .block-label {
  color: var(--amber);
}

.about-block h2 {
  margin-top: 0;
  margin-bottom: 20px;

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

  line-height: 1.08;
}

.about-block p {
  max-width: 650px;

  margin-bottom: 0;

  color: #c8d0d5;

  font-size: 16.5px;
  line-height: 1.75;
}

.about-block--creator p {
  font-size: 16px;
}

.about-stats {
  margin-top: 30px;

  gap: 10px;
}

.about-stats div {
  padding: 14px 10px;
}

.about-stats strong {
  font-size: 22px;
}

.about-stats span {
  margin-top: 3px;

  font-size: 10px;
  letter-spacing: .08em;
}


/* About intro also easier to read */

.section-screen .section-title p {
  max-width: 720px;

  color: #c1c9ce;

  font-size: 16px;
  line-height: 1.65;
}

.section-title > span {
  font-size: 14px;
  font-weight: 900;

  letter-spacing: .14em;

  text-shadow:
    0 0 10px rgba(255,181,46,.36);
}


/* =========================================================
   MORE VISIBLE NEON EDGES
   ========================================================= */

.about-block--main {
  border-left:
    3px solid var(--amber);

  box-shadow:
    -10px 0 32px -22px rgba(255,181,46,.95),
    0 0 30px rgba(255,181,46,.025);
}

.about-block--creator {
  border-top:
    3px solid var(--violet);

  box-shadow:
    0 -10px 32px -22px rgba(155,124,255,.95),
    0 0 32px rgba(155,124,255,.035);
}

.lab-status {
  box-shadow:
    -8px 0 30px -21px rgba(255,181,46,.75),
    0 0 24px rgba(255,181,46,.025);
}

.game-entry--live {
  box-shadow:
    0 0 32px rgba(155,124,255,.065);
}


/* =========================================================
   MORE ALIVE BACKGROUND OBJECTS
   Still slow and non-distracting.
   ========================================================= */

.ambient-object {
  opacity: .34;

  will-change: transform, opacity;
}


/* amber circle */

.ambient-object--one {
  animation:
    circleTravelV8 15s ease-in-out infinite,
    circleGlowV8 5s ease-in-out infinite;
}

@keyframes circleTravelV8 {
  0%,
  100% {
    transform:
      translate3d(0,0,0)
      scale(.88)
      rotate(0deg);
  }

  50% {
    transform:
      translate3d(125px,82px,0)
      scale(1.16)
      rotate(30deg);
  }
}

@keyframes circleGlowV8 {
  0%,
  100% {
    opacity: .22;

    box-shadow:
      0 0 22px rgba(255,181,46,.05),
      inset 0 0 18px rgba(255,181,46,.025);
  }

  50% {
    opacity: .50;

    box-shadow:
      0 0 38px rgba(255,181,46,.14),
      inset 0 0 26px rgba(255,181,46,.05);
  }
}


/* violet square */

.ambient-object--two {
  animation:
    squareTravelV8 18s ease-in-out infinite;
}

@keyframes squareTravelV8 {
  0% {
    transform:
      translate3d(0,0,0)
      rotate(45deg)
      scale(.90);

    opacity: .22;
  }

  50% {
    transform:
      translate3d(-85px,72px,0)
      rotate(145deg)
      scale(1.13);

    opacity: .48;
  }

  100% {
    transform:
      translate3d(0,0,0)
      rotate(405deg)
      scale(.90);

    opacity: .22;
  }
}


/* lime circle */

.ambient-object--three {
  animation:
    limeFloatV8 13s ease-in-out infinite;
}

@keyframes limeFloatV8 {
  0%,
  100% {
    transform:
      translate3d(0,0,0)
      scale(.88);

    opacity: .20;
  }

  50% {
    transform:
      translate3d(92px,-78px,0)
      scale(1.18);

    opacity: .46;
  }
}


/* moving neon rail */

.ambient-object--four {
  opacity: .30;

  animation:
    railTravelV8 9s ease-in-out infinite;
}

@keyframes railTravelV8 {
  0%,
  100% {
    transform:
      translateX(30px)
      scaleX(.65);

    opacity: .12;
  }

  50% {
    transform:
      translateX(-145px)
      scaleX(1.35);

    opacity: .58;
  }
}


/* diagonal amber beam */

.ambient-object--five {
  opacity: .28;

  animation:
    diagonalTravelV8 14s ease-in-out infinite;
}

@keyframes diagonalTravelV8 {
  0%,
  100% {
    transform:
      translate3d(-30px,0,0)
      rotate(-28deg);

    opacity: .12;
  }

  50% {
    transform:
      translate3d(120px,70px,0)
      rotate(-15deg);

    opacity: .55;
  }
}


/* small beacon */

.ambient-object--six {
  animation:
    beaconV8 2.1s ease-in-out infinite;
}

@keyframes beaconV8 {
  0%,
  100% {
    opacity: .28;

    transform: scale(.7);

    box-shadow:
      0 0 8px rgba(159,232,112,.22);
  }

  50% {
    opacity: 1;

    transform: scale(1.35);

    box-shadow:
      0 0 30px rgba(159,232,112,.85);
  }
}


/* =========================================================
   SUBTLE TITLE BREATHING
   ========================================================= */

.marquee h1,
.section-title h1 {
  animation:
    titleGlowV8 4.8s ease-in-out infinite;
}

@keyframes titleGlowV8 {
  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.08);
  }
}


/* =========================================================
   NAVIGATION MORE READABLE
   ========================================================= */

.arcade-nav a {
  min-width: 145px;
  min-height: 60px;

  font-size: 14px;
  font-weight: 900;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {
  .about-block {
    padding: 26px 22px;
  }

  .about-block .block-label {
    font-size: 13px;
  }

  .about-block h2 {
    font-size: 2.35rem;
  }

  .about-block p {
    font-size: 15px;
  }

  .arcade-nav a {
    min-width: auto;
    min-height: 44px;

    font-size: 10px;
  }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
  }
}

/* END ARCADE READABILITY NEON V8 */

/* ARCADE CENTER NAV + MOTION V9 */

/* =========================================================
   PERFECTLY CENTERED MAIN NAVIGATION
   Same position on Home / Games / Labs / About
   ========================================================= */

.arcade-header {
  position: relative;

  height: 108px;

  display: flex;
  align-items: center;

  overflow: visible;
}

.arcade-logo {
  position: relative;
  z-index: 4;

  margin-right: auto;
}

.arcade-nav {
  position: absolute;

  z-index: 6;

  top: 50%;
  left: 50%;

  margin: 0;

  display: flex;
  align-items: center;

  gap: 16px;

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

.arcade-nav a {
  position: relative;

  min-width: 165px;
  min-height: 66px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 28px;

  border: 1px solid rgba(255,255,255,.18);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      rgba(5,9,12,.88)
    );

  color: #f3f0ea;

  font-size: 15px;
  font-weight: 900;

  letter-spacing: .12em;

  box-shadow:
    inset 0 0 22px rgba(255,255,255,.018),
    0 9px 25px rgba(0,0,0,.22);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    color .18s ease,
    background .18s ease;
}

.arcade-nav a:nth-child(1) {
  --tab-color: var(--amber);
  --tab-glow: rgba(255,181,46,.45);
}

.arcade-nav a:nth-child(2) {
  --tab-color: var(--violet);
  --tab-glow: rgba(155,124,255,.45);
}

.arcade-nav a:nth-child(3) {
  --tab-color: var(--lime);
  --tab-glow: rgba(159,232,112,.40);
}

.arcade-nav a:hover,
.arcade-nav a.active {
  transform: translateY(-3px);

  color: var(--tab-color);

  border-color: var(--tab-color);

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--tab-color) 10%, #101416),
      rgba(5,9,12,.92)
    );

  box-shadow:
    inset 0 -3px 0 var(--tab-color),
    inset 0 0 25px color-mix(in srgb, var(--tab-color) 6%, transparent),
    0 0 21px var(--tab-glow),
    0 12px 28px rgba(0,0,0,.25);
}

.arcade-nav a::before {
  content: "";

  position: absolute;

  top: -1px;
  left: 15%;

  width: 70%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--tab-color),
      transparent
    );

  opacity: .65;
}

.arcade-nav a.active::after {
  right: 20px;
  bottom: 8px;
  left: 20px;

  height: 2px;

  background: var(--tab-color);

  box-shadow:
    0 0 13px var(--tab-glow);

  animation:
    centeredNavPulseV9 2s ease-in-out infinite;
}

@keyframes centeredNavPulseV9 {
  0%,
  100% {
    opacity: .45;
  }

  50% {
    opacity: 1;

    box-shadow:
      0 0 20px var(--tab-glow);
  }
}


/* =========================================================
   AMBIENT OBJECTS - MUCH MORE VISIBLE MOVEMENT
   ========================================================= */

.ambient-object {
  opacity: .42;

  will-change: transform, opacity;
}


/* LEFT AMBER CIRCLE - travels diagonally */

.ambient-object--one {
  animation:
    ambientOneV9 10s ease-in-out infinite;
}

@keyframes ambientOneV9 {
  0% {
    transform:
      translate3d(-20px, -15px, 0)
      scale(.82);

    opacity: .22;
  }

  25% {
    transform:
      translate3d(75px, 35px, 0)
      scale(1.02);

    opacity: .48;
  }

  50% {
    transform:
      translate3d(150px, 95px, 0)
      scale(1.18);

    opacity: .62;
  }

  75% {
    transform:
      translate3d(80px, 145px, 0)
      scale(.98);

    opacity: .45;
  }

  100% {
    transform:
      translate3d(-20px, -15px, 0)
      scale(.82);

    opacity: .22;
  }
}


/* TOP-RIGHT VIOLET SQUARE */

.ambient-object--two {
  animation:
    ambientTwoV9 13s linear infinite;
}

@keyframes ambientTwoV9 {
  0% {
    transform:
      translate3d(0, 0, 0)
      rotate(45deg)
      scale(.82);

    opacity: .26;
  }

  25% {
    transform:
      translate3d(-55px, 45px, 0)
      rotate(135deg)
      scale(1);
  }

  50% {
    transform:
      translate3d(-110px, 100px, 0)
      rotate(225deg)
      scale(1.13);

    opacity: .58;
  }

  75% {
    transform:
      translate3d(-45px, 145px, 0)
      rotate(315deg)
      scale(.94);
  }

  100% {
    transform:
      translate3d(0, 0, 0)
      rotate(405deg)
      scale(.82);

    opacity: .26;
  }
}


/* LOWER LEFT LIME CIRCLE */

.ambient-object--three {
  animation:
    ambientThreeV9 9s ease-in-out infinite;
}

@keyframes ambientThreeV9 {
  0%,
  100% {
    transform:
      translate3d(-20px, 25px, 0)
      scale(.78);

    opacity: .20;
  }

  35% {
    transform:
      translate3d(70px, -35px, 0)
      scale(1.04);

    opacity: .44;
  }

  70% {
    transform:
      translate3d(135px, -105px, 0)
      scale(1.22);

    opacity: .62;
  }
}


/* VIOLET HORIZONTAL LIGHT */

.ambient-object--four {
  animation:
    ambientFourV9 7s ease-in-out infinite;
}

@keyframes ambientFourV9 {
  0% {
    transform:
      translateX(90px)
      scaleX(.50);

    opacity: .10;
  }

  50% {
    transform:
      translateX(-190px)
      scaleX(1.55);

    opacity: .70;
  }

  100% {
    transform:
      translateX(90px)
      scaleX(.50);

    opacity: .10;
  }
}


/* AMBER DIAGONAL LINE */

.ambient-object--five {
  animation:
    ambientFiveV9 11s ease-in-out infinite;
}

@keyframes ambientFiveV9 {
  0% {
    transform:
      translate3d(-70px, -25px, 0)
      rotate(-32deg)
      scaleX(.65);

    opacity: .12;
  }

  50% {
    transform:
      translate3d(150px, 110px, 0)
      rotate(-10deg)
      scaleX(1.4);

    opacity: .65;
  }

  100% {
    transform:
      translate3d(-70px, -25px, 0)
      rotate(-32deg)
      scaleX(.65);

    opacity: .12;
  }
}


/* SMALL GREEN BEACON */

.ambient-object--six {
  animation:
    ambientSixV9 2s ease-in-out infinite;
}

@keyframes ambientSixV9 {
  0%,
  100% {
    opacity: .20;

    transform:
      translate3d(0,0,0)
      scale(.65);

    box-shadow:
      0 0 5px rgba(159,232,112,.18);
  }

  50% {
    opacity: 1;

    transform:
      translate3d(-18px,20px,0)
      scale(1.5);

    box-shadow:
      0 0 34px rgba(159,232,112,.95);
  }
}


/* =========================================================
   MOVING LIGHT BEAMS - FASTER / CLEARER
   ========================================================= */

.ambient-layer::before {
  opacity: .25;

  animation:
    beamOneV9 10s ease-in-out infinite;
}

.ambient-layer::after {
  opacity: .22;

  animation:
    beamTwoV9 13s ease-in-out infinite;
}

@keyframes beamOneV9 {
  0%,
  100% {
    transform:
      translateX(-190px)
      rotate(27deg);

    opacity: .07;
  }

  50% {
    transform:
      translateX(230px)
      rotate(27deg);

    opacity: .32;
  }
}

@keyframes beamTwoV9 {
  0%,
  100% {
    transform:
      translateX(190px)
      rotate(-22deg);

    opacity: .06;
  }

  50% {
    transform:
      translateX(-240px)
      rotate(-22deg);

    opacity: .30;
  }
}


/* =========================================================
   BACKGROUND DATA FIELD
   ========================================================= */

body::after {
  opacity: .24;

  animation:
    movingDataV9 18s linear infinite;
}

@keyframes movingDataV9 {
  0% {
    background-position:
      0 0,
      10px 17px;
  }

  100% {
    background-position:
      330px 190px,
      -260px 330px;
  }
}


/* =========================================================
   MORE NEON LIFE ON HEADINGS
   ========================================================= */

.marquee h1 {
  animation:
    homeTitleGlowV9 3.8s ease-in-out infinite;
}

@keyframes homeTitleGlowV9 {
  0%,
  100% {
    text-shadow:
      0 0 4px rgba(255,255,255,.15),
      0 0 12px rgba(255,181,46,.12);

    filter: brightness(1);
  }

  50% {
    text-shadow:
      0 0 7px rgba(255,255,255,.28),
      0 0 20px rgba(255,181,46,.30),
      0 0 38px rgba(255,181,46,.12);

    filter: brightness(1.08);
  }
}

.section-title h1 {
  animation:
    sectionGlowV9 4.5s ease-in-out infinite;
}

@keyframes sectionGlowV9 {
  0%,
  100% {
    text-shadow:
      0 0 5px rgba(255,255,255,.15),
      0 0 14px rgba(155,124,255,.12);
  }

  50% {
    text-shadow:
      0 0 8px rgba(255,255,255,.26),
      0 0 24px rgba(155,124,255,.28),
      0 0 38px rgba(155,124,255,.10);
  }
}


/* =========================================================
   MOBILE FALLBACK
   ========================================================= */

@media (max-width: 850px) {
  .arcade-header {
    height: auto;

    padding: 16px 0;

    flex-wrap: wrap;

    gap: 14px;
  }

  .arcade-nav {
    position: static;

    width: 100%;

    transform: none;

    justify-content: center;
  }

  .arcade-nav a {
    min-width: 120px;
    min-height: 52px;

    font-size: 12px;
  }
}

@media (max-width: 520px) {
  .arcade-nav {
    gap: 4px;
  }

  .arcade-nav a {
    min-width: 0;
    flex: 1;

    padding: 0 7px;

    font-size: 9px;
  }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
  }
}

/* END ARCADE CENTER NAV + MOTION V9 */

/* ARCADE POLISH V10 */


/* =========================================================
   HEADER
   Logo near viewport edge.
   Navigation identical everywhere.
   ========================================================= */

.arcade-header {
  position: relative;

  height: 112px;

  display: flex;
  align-items: center;

  overflow: visible;

  border-bottom:
    1px solid rgba(255,255,255,.10);
}

.arcade-logo {
  position: absolute;

  z-index: 20;

  top: 50%;

  /*
     Put the logo close to the LEFT SIDE OF THE VIEWPORT,
     independent of the centered content width.
  */
  left: calc(50% - 50vw + 32px);

  transform:
    translateY(-50%);

  gap: 14px;
}

.logo-box {
  width: 50px;
  height: 50px;

  font-size: 16px;

  border:
    1px solid #ffb52e;

  color: #ffbf43;

  background:
    rgba(255,181,46,.025);

  box-shadow:
    0 0 18px rgba(255,181,46,.30),
    inset 0 0 16px rgba(255,181,46,.08);

  animation:
    logoGlowV10 3.2s ease-in-out infinite;
}

.arcade-logo strong {
  font-size: 16px;

  letter-spacing: .08em;
}

.arcade-logo small {
  margin-top: 5px;

  font-size: 11px;

  color: #b2bbc0;
}

@keyframes logoGlowV10 {
  0%,
  100% {
    box-shadow:
      0 0 12px rgba(255,181,46,.18),
      inset 0 0 13px rgba(255,181,46,.05);
  }

  50% {
    box-shadow:
      0 0 27px rgba(255,181,46,.40),
      inset 0 0 19px rgba(255,181,46,.10);
  }
}


/* =========================================================
   HUGE CONSISTENT NAV
   Slightly right of absolute center.
   ========================================================= */

.arcade-nav {
  position: absolute;

  z-index: 30;

  top: 50%;
  left: calc(50% + 85px);

  margin: 0;

  display: flex;
  align-items: center;

  gap: 18px;

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

.arcade-nav a {
  position: relative;

  min-width: 190px;
  min-height: 72px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding:
    0 32px;

  border:
    1px solid rgba(255,255,255,.18);

  background:
    linear-gradient(
      180deg,
      rgba(17,22,28,.88),
      rgba(6,9,12,.94)
    );

  color: #f4f1e9;

  font-size: 17px;
  font-weight: 900;

  letter-spacing: .13em;

  box-shadow:
    inset 0 0 24px rgba(255,255,255,.018),
    0 10px 26px rgba(0,0,0,.24);

  transition:
    transform .17s ease,
    border-color .17s ease,
    color .17s ease,
    box-shadow .17s ease,
    background .17s ease;
}

.arcade-nav a:nth-child(1) {
  --nav-color: #ffb52e;
  --nav-glow: rgba(255,181,46,.52);
}

.arcade-nav a:nth-child(2) {
  --nav-color: #9b7cff;
  --nav-glow: rgba(155,124,255,.52);
}

.arcade-nav a:nth-child(3) {
  --nav-color: #9fe870;
  --nav-glow: rgba(159,232,112,.46);
}

.arcade-nav a:hover,
.arcade-nav a.active {
  transform:
    translateY(-4px);

  color:
    var(--nav-color);

  border-color:
    var(--nav-color);

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--nav-color) 11%, #101419),
      rgba(5,8,11,.96)
    );

  box-shadow:
    inset 0 -3px 0 var(--nav-color),
    inset 0 0 28px color-mix(in srgb, var(--nav-color) 7%, transparent),
    0 0 28px var(--nav-glow),
    0 14px 32px rgba(0,0,0,.27);
}

.arcade-nav a::before {
  content: "";

  position: absolute;

  top: -1px;
  left: 14%;

  width: 72%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--nav-color),
      transparent
    );

  opacity: .72;
}

.arcade-nav a.active::after {
  content: "";

  position: absolute;

  right: 20px;
  bottom: 9px;
  left: 20px;

  height: 2px;

  background:
    var(--nav-color);

  box-shadow:
    0 0 16px var(--nav-glow);

  animation:
    navActiveV10 1.8s ease-in-out infinite;
}

@keyframes navActiveV10 {
  0%,
  100% {
    opacity: .45;
  }

  50% {
    opacity: 1;

    box-shadow:
      0 0 24px var(--nav-glow);
  }
}


/* =========================================================
   ALL YELLOW SMALL HEADINGS:
   SAME SIZE AS WELCOME PLAYER
   ========================================================= */

.marquee-tag,
.section-title > span,
.block-label,
.lab-status-head > span:first-child {
  display: inline-block;

  color: #ffb52e !important;

  font-family:
    "Courier New",
    monospace;

  font-size: 17px !important;
  font-weight: 900 !important;

  line-height: 1.2;

  letter-spacing: .15em;

  text-transform: uppercase;

  text-shadow:
    0 0 10px rgba(255,181,46,.52),
    0 0 21px rgba(255,181,46,.16);
}


/* =========================================================
   HOMEPAGE
   ========================================================= */

.home-screen {
  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(390px, .78fr);

  min-height:
    calc(100vh - 154px);

  gap:
    80px;

  padding-top:
    45px;

  padding-bottom:
    35px;
}

.marquee {
  padding-left:
    24px;

  border-left:
    3px solid #ffb52e;

  box-shadow:
    -9px 0 32px -20px rgba(255,181,46,.92);
}

.marquee h1 {
  margin-top:
    18px;

  text-shadow:
    0 0 6px rgba(255,255,255,.20),
    0 0 17px rgba(255,181,46,.30),
    0 0 40px rgba(255,181,46,.10);
}

.marquee p {
  max-width:
    650px;

  margin-bottom:
    22px;

  color:
    #c2cacf;

  font-size:
    18px;
}

.marquee-actions {
  margin-top:
    14px;
}

.marquee-actions .arcade-button {
  min-height:
    58px;

  font-size:
    12px;
}


/* =========================================================
   NOW PLAYING:
   mini Neon Arena environment
   ========================================================= */

.featured-machine {
  position: relative;

  overflow: visible;

  border:
    1px solid rgba(0,235,255,.38);

  background:
    linear-gradient(
      180deg,
      rgba(2,9,17,.98),
      rgba(7,5,15,.98)
    );

  box-shadow:
    0 0 27px rgba(0,225,255,.10),
    0 0 40px rgba(255,33,183,.055),
    0 24px 60px rgba(0,0,0,.28);

  animation:
    neonMachineFloatV10 6s ease-in-out infinite;
}


/* cyan / magenta corner glow */

.featured-machine::after {
  content: "";

  position: absolute;
  inset: -1px;

  z-index: -1;

  pointer-events: none;

  background:
    linear-gradient(
      135deg,
      rgba(0,235,255,.18),
      transparent 34%,
      transparent 68%,
      rgba(255,32,185,.15)
    );

  filter:
    blur(14px);

  opacity:
    .72;
}

@keyframes neonMachineFloatV10 {
  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-6px);
  }
}


.machine-top {
  height:
    52px;

  padding:
    0 17px;

  border-bottom:
    1px solid rgba(0,235,255,.20);

  color:
    #bceef4;

  font-size:
    12px;

  background:
    linear-gradient(
      90deg,
      rgba(0,225,255,.035),
      rgba(255,32,185,.025)
    );
}

.machine-live {
  color:
    #9cff69;

  font-size:
    12px;

  text-shadow:
    0 0 10px rgba(156,255,105,.72);
}


.machine-screen {
  position: relative;

  padding:
    12px;

  background:
    #020409;
}


/* subtle grid like Neon Arena */

.machine-screen::before {
  content: "";

  position: absolute;
  inset: 12px;

  z-index: 0;

  pointer-events: none;

  opacity:
    .16;

  background-image:
    linear-gradient(
      rgba(0,235,255,.20) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,32,185,.14) 1px,
      transparent 1px
    );

  background-size:
    28px 28px;

  animation:
    gameGridMoveV10 8s linear infinite;
}

@keyframes gameGridMoveV10 {
  from {
    background-position:
      0 0;
  }

  to {
    background-position:
      28px 28px;
  }
}

.machine-art {
  position: relative;
  z-index: 1;

  height:
    175px;

  border:
    1px solid rgba(0,235,255,.09);

  background:
    radial-gradient(
      circle at center,
      rgba(255,32,185,.06),
      transparent 36%
    ),
    radial-gradient(
      circle at 35% 40%,
      rgba(0,235,255,.04),
      transparent 28%
    ),
    #03050b;
}


.machine-hole {
  border-color:
    #ff32be;

  box-shadow:
    0 0 16px rgba(255,50,190,.52),
    0 0 30px rgba(0,235,255,.17);
}

.machine-art .ring-a {
  border-color:
    rgba(0,235,255,.73);
}

.machine-art .ring-b {
  border-color:
    rgba(255,50,190,.48);
}

.machine-star.star-a {
  background:
    #fff36a;
}

.machine-star.star-b {
  background:
    #00efff;
}

.machine-star.star-c {
  background:
    #ff32be;
}


.machine-info {
  padding:
    19px 20px 22px;

  border-top:
    1px solid rgba(255,32,185,.15);

  background:
    linear-gradient(
      135deg,
      rgba(0,225,255,.025),
      rgba(255,32,185,.035)
    );
}

.machine-info small {
  color:
    #82f7ff;

  font-size:
    11px;

  text-shadow:
    0 0 9px rgba(0,235,255,.35);
}

.machine-info h2 {
  margin:
    6px 0 8px;

  color:
    #f8f4ff;

  font-size:
    31px;

  text-shadow:
    -2px 0 12px rgba(0,235,255,.22),
    2px 0 14px rgba(255,32,185,.25);
}

.machine-info p {
  margin-bottom:
    18px;

  font-size:
    13px;
}


/* play button IN the machine */

.machine-play-btn {
  min-height:
    62px;

  width:
    100%;

  display:
    flex;
  align-items:
    center;
  justify-content:
    center;

  gap:
    15px;

  padding:
    0 20px;

  border:
    1px solid #00efff;

  color:
    #ecffff;

  background:
    linear-gradient(
      110deg,
      rgba(0,225,255,.18),
      rgba(255,32,185,.22)
    );

  font-family:
    "Courier New",
    monospace;

  font-size:
    13px;
  font-weight:
    900;

  letter-spacing:
    .10em;

  box-shadow:
    inset 0 0 25px rgba(0,225,255,.07),
    0 0 20px rgba(0,225,255,.12),
    0 0 25px rgba(255,32,185,.07);

  transition:
    transform .17s ease,
    box-shadow .17s ease,
    background .17s ease;
}

.machine-play-btn:hover {
  transform:
    translateY(-2px);

  background:
    linear-gradient(
      110deg,
      rgba(0,225,255,.28),
      rgba(255,32,185,.32)
    );

  box-shadow:
    inset 0 0 30px rgba(0,225,255,.10),
    0 0 29px rgba(0,225,255,.23),
    0 0 35px rgba(255,32,185,.15);
}

.machine-play-btn b {
  color:
    #ff46c6;

  font-size:
    16px;

  text-shadow:
    0 0 10px rgba(255,70,198,.70);
}


/* =========================================================
   GENERAL PAGE TITLES / READABILITY
   ========================================================= */

.section-title {
  margin-bottom:
    28px;

  padding-left:
    22px;

  border-left:
    3px solid #ffb52e;
}

.section-title h1 {
  margin-top:
    14px;

  color:
    #fff8e8;

  text-shadow:
    0 0 6px rgba(255,255,255,.16),
    0 0 18px rgba(255,181,46,.20),
    0 0 34px rgba(155,124,255,.08);
}

.section-title p {
  max-width:
    740px;

  color:
    #c1c9cf;

  font-size:
    16px;

  line-height:
    1.65;
}


/* =========================================================
   LABS - reorganized and readable
   ========================================================= */

.labs-board {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(330px, .75fr);

  grid-template-rows:
    repeat(3, 1fr);

  gap:
    13px;

  align-items:
    stretch;
}


.lab-status {
  grid-column:
    1;

  grid-row:
    1 / 4;

  min-height:
    400px;

  padding:
    34px;

  display:
    flex;
  flex-direction:
    column;

  justify-content:
    center;

  border:
    1px solid rgba(255,181,46,.30);

  border-left:
    3px solid #ffb52e;

  background:
    radial-gradient(
      circle at 6% 10%,
      rgba(255,181,46,.055),
      transparent 34%
    ),
    rgba(12,17,22,.88);

  box-shadow:
    -10px 0 30px -22px rgba(255,181,46,.92);
}


.lab-status-head {
  position:
    absolute;

  top:
    23px;
  right:
    27px;
  left:
    31px;

  display:
    flex;

  justify-content:
    space-between;
  align-items:
    center;

  gap:
    16px;
}

.lab-status-head b {
  color:
    #b89cff;

  font-size:
    11px;

  letter-spacing:
    .10em;

  text-shadow:
    0 0 10px rgba(155,124,255,.35);
}


.lab-status h2 {
  margin:
    42px 0 18px;

  font-size:
    clamp(2.8rem, 4vw, 4.1rem);

  line-height:
    1;

  text-shadow:
    0 0 15px rgba(255,181,46,.16);
}


.lab-status p {
  max-width:
    620px;

  margin:
    0 0 22px;

  color:
    #c7cfd4;

  font-size:
    16px;

  line-height:
    1.72;
}


.lab-status a {
  align-self:
    flex-start;

  margin-top:
    15px;

  padding:
    15px 18px;

  border:
    1px solid rgba(255,181,46,.45);

  color:
    #ffbd43;

  background:
    rgba(255,181,46,.045);

  font-size:
    12px;

  box-shadow:
    0 0 16px rgba(255,181,46,.07);
}


.lab-tile {
  min-height:
    0;

  display:
    grid;

  grid-template-columns:
    60px 1fr;

  grid-template-rows:
    auto auto;

  align-content:
    center;

  gap:
    6px 15px;

  padding:
    22px;

  border:
    1px solid rgba(255,255,255,.11);

  background:
    rgba(12,17,22,.82);
}


.lab-tile > span {
  grid-column:
    1;

  grid-row:
    1 / 3;

  align-self:
    center;

  color:
    #a990ff;

  font-size:
    17px;

  font-weight:
    900;
}


.lab-tile strong {
  grid-column:
    2;

  font-size:
    20px;

  letter-spacing:
    .06em;
}


.lab-tile small {
  grid-column:
    2;

  color:
    #aeb8be;

  font-size:
    12px;

  line-height:
    1.5;
}


/* =========================================================
   ABOUT readability
   ========================================================= */

.about-block .block-label {
  margin-bottom:
    25px;
}

.about-block p {
  color:
    #cbd3d7;

  font-size:
    16.5px;

  line-height:
    1.75;
}


/* =========================================================
   BACKGROUND OBJECTS:
   much more visible movement
   ========================================================= */

.ambient-object {
  filter:
    drop-shadow(0 0 10px currentColor);

  opacity:
    .46;
}


/* amber circle */
.ambient-object--one {
  animation:
    ambientOneV10 8s ease-in-out infinite;
}

@keyframes ambientOneV10 {
  0% {
    transform:
      translate3d(-30px,-35px,0)
      scale(.72);

    opacity:
      .22;
  }

  25% {
    transform:
      translate3d(75px,20px,0)
      scale(.98);

    opacity:
      .48;
  }

  50% {
    transform:
      translate3d(175px,110px,0)
      scale(1.18);

    opacity:
      .68;
  }

  75% {
    transform:
      translate3d(95px,175px,0)
      scale(.92);

    opacity:
      .48;
  }

  100% {
    transform:
      translate3d(-30px,-35px,0)
      scale(.72);

    opacity:
      .22;
  }
}


/* purple square */
.ambient-object--two {
  animation:
    ambientTwoV10 10s linear infinite;
}

@keyframes ambientTwoV10 {
  0% {
    transform:
      translate3d(20px,-25px,0)
      rotate(45deg)
      scale(.72);
  }

  25% {
    transform:
      translate3d(-65px,35px,0)
      rotate(140deg)
      scale(.95);
  }

  50% {
    transform:
      translate3d(-155px,125px,0)
      rotate(230deg)
      scale(1.2);
  }

  75% {
    transform:
      translate3d(-70px,190px,0)
      rotate(320deg)
      scale(.92);
  }

  100% {
    transform:
      translate3d(20px,-25px,0)
      rotate(405deg)
      scale(.72);
  }
}


/* green circle */
.ambient-object--three {
  animation:
    ambientThreeV10 7s ease-in-out infinite;
}

@keyframes ambientThreeV10 {
  0%,
  100% {
    transform:
      translate3d(-25px,40px,0)
      scale(.72);

    opacity:
      .20;
  }

  50% {
    transform:
      translate3d(155px,-120px,0)
      scale(1.25);

    opacity:
      .65;
  }
}


/* purple rail */
.ambient-object--four {
  animation:
    ambientFourV10 5.8s ease-in-out infinite;
}

@keyframes ambientFourV10 {
  0%,
  100% {
    transform:
      translateX(130px)
      scaleX(.42);

    opacity:
      .08;
  }

  50% {
    transform:
      translateX(-245px)
      scaleX(1.7);

    opacity:
      .75;
  }
}


/* amber diagonal */
.ambient-object--five {
  animation:
    ambientFiveV10 8s ease-in-out infinite;
}

@keyframes ambientFiveV10 {
  0%,
  100% {
    transform:
      translate3d(-110px,-50px,0)
      rotate(-32deg)
      scaleX(.55);

    opacity:
      .10;
  }

  50% {
    transform:
      translate3d(185px,125px,0)
      rotate(-8deg)
      scaleX(1.5);

    opacity:
      .70;
  }
}


/* green beacon */
.ambient-object--six {
  animation:
    ambientSixV10 1.8s ease-in-out infinite;
}

@keyframes ambientSixV10 {
  0%,
  100% {
    transform:
      translate3d(0,0,0)
      scale(.6);

    opacity:
      .18;
  }

  50% {
    transform:
      translate3d(-28px,28px,0)
      scale(1.65);

    opacity:
      1;

    box-shadow:
      0 0 38px rgba(159,232,112,.95);
  }
}


/* moving beams */

.ambient-layer::before {
  animation:
    ambientBeamOneV10 8s ease-in-out infinite;
}

.ambient-layer::after {
  animation:
    ambientBeamTwoV10 10s ease-in-out infinite;
}

@keyframes ambientBeamOneV10 {
  0%,
  100% {
    transform:
      translateX(-260px)
      rotate(27deg);

    opacity:
      .05;
  }

  50% {
    transform:
      translateX(330px)
      rotate(27deg);

    opacity:
      .30;
  }
}

@keyframes ambientBeamTwoV10 {
  0%,
  100% {
    transform:
      translateX(260px)
      rotate(-22deg);

    opacity:
      .05;
  }

  50% {
    transform:
      translateX(-340px)
      rotate(-22deg);

    opacity:
      .27;
  }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {
  .arcade-header {
    height:
      auto;

    min-height:
      110px;

    padding:
      18px 0;

    flex-direction:
      column;

    gap:
      18px;
  }

  .arcade-logo {
    position:
      static;

    align-self:
      flex-start;

    transform:
      none;
  }

  .arcade-nav {
    position:
      static;

    width:
      100%;

    transform:
      none;

    justify-content:
      center;

    flex-wrap:
      wrap;
  }

  .arcade-nav a {
    min-width:
      160px;

    min-height:
      58px;

    font-size:
      14px;
  }

  .home-screen {
    grid-template-columns:
      1fr;

    min-height:
      auto;
  }

  .labs-board {
    grid-template-columns:
      1fr;

    grid-template-rows:
      auto;
  }

  .lab-status {
    grid-column:
      1;

    grid-row:
      auto;
  }

  .lab-tile {
    min-height:
      105px;
  }
}


@media (max-width: 560px) {
  .arcade-nav {
    gap:
      5px;
  }

  .arcade-nav a {
    flex:
      1;

    min-width:
      0;

    min-height:
      48px;

    padding:
      0 7px;

    font-size:
      10px;
  }

  .marquee-tag,
  .section-title > span,
  .block-label,
  .lab-status-head > span:first-child {
    font-size:
      13px !important;
  }

  .machine-play-btn {
    font-size:
      11px;
  }

  .lab-status {
    padding:
      25px 20px;
  }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation:
      none !important;
  }
}

/* END ARCADE POLISH V10 */

/* ARCADE POLISH V11 */


/* =========================================================
   HOME HERO CLEANUP
   Remove ugly white block / panel glow around welcome area
   ========================================================= */

.marquee {
  position: relative;

  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.marquee::before,
.marquee::after {
  content: none !important;
  display: none !important;
}

.home-screen .marquee,
.home-screen .marquee * {
  isolation: auto;
}

.marquee h1 {
  position: relative;
  z-index: 2;
}

.marquee-tag {
  margin-bottom: 10px;
}

.marquee p {
  position: relative;
  z-index: 2;
}


/* Remove extra bottom/outer glow under the welcome block */
.home-screen .marquee {
  border-bottom: none !important;
  outline: none !important;
}

.home-screen .marquee-actions,
.home-screen .marquee-actions::before,
.home-screen .marquee-actions::after {
  box-shadow: none !important;
  filter: none !important;
}


/* =========================================================
   TITLE TYPOGRAPHY REWORK
   Better font for all main page titles
   ========================================================= */

.marquee h1,
.section-title h1,
.about-block h2,
.lab-status h2,
.machine-info h2 {
  font-family:
    "Arial Black",
    "Segoe UI",
    "Trebuchet MS",
    sans-serif !important;

  font-weight: 900 !important;

  letter-spacing: -0.03em;
  line-height: .93;

  color: #fff8ea;

  text-transform: none;

  text-shadow:
    0 0 8px rgba(255,255,255,.18),
    0 0 18px rgba(255,181,46,.18),
    0 0 34px rgba(0,238,255,.10),
    0 0 44px rgba(255,50,190,.09);
}


/* Homepage title slightly warmer */
.marquee h1 {
  text-shadow:
    0 0 10px rgba(255,255,255,.20),
    0 0 18px rgba(255,181,46,.24),
    0 0 32px rgba(255,181,46,.14),
    0 0 50px rgba(255,181,46,.08);
}


/* =========================================================
   NEON UNDERLINES UNDER BIG TITLES
   ========================================================= */

.section-title h1,
.marquee h1,
.about-block h2,
.lab-status h2 {
  position: relative;
  display: inline-block;
}

.section-title h1::after,
.marquee h1::after,
.about-block h2::after,
.lab-status h2::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: -14px;

  width: 100%;
  height: 3px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      rgba(255,181,46,.92),
      rgba(0,238,255,.86),
      rgba(255,50,190,.86)
    );

  box-shadow:
    0 0 10px rgba(255,181,46,.28),
    0 0 16px rgba(0,238,255,.22),
    0 0 22px rgba(255,50,190,.18);

  opacity: .88;
}

.section-title p,
.about-block p,
.lab-status p {
  margin-top: 24px;
}


/* =========================================================
   SMALL YELLOW LABELS
   Keep same size everywhere
   ========================================================= */

.marquee-tag,
.section-title > span,
.block-label,
.lab-status-head > span:first-child {
  font-size: 17px !important;
  line-height: 1.2;
  letter-spacing: .15em;

  color: #ffb52e !important;

  text-shadow:
    0 0 10px rgba(255,181,46,.42),
    0 0 18px rgba(255,181,46,.14);
}


/* =========================================================
   GAMES / LABS / ABOUT PAGE TITLES
   Stronger neon feeling per section
   ========================================================= */

body:has(.arcade-nav a.active[href="/arcade/games/"]) .section-title h1,
body:has(.arcade-nav a.active[href="/arcade/games"]) .section-title h1 {
  text-shadow:
    0 0 8px rgba(255,255,255,.18),
    0 0 16px rgba(255,181,46,.22),
    0 0 30px rgba(255,181,46,.14);
}

body:has(.arcade-nav a.active[href="/arcade/labs/"]) .section-title h1,
body:has(.arcade-nav a.active[href="/arcade/labs"]) .section-title h1 {
  text-shadow:
    0 0 8px rgba(255,255,255,.18),
    0 0 16px rgba(155,124,255,.24),
    0 0 30px rgba(155,124,255,.15);
}

body:has(.arcade-nav a.active[href="/arcade/about/"]) .section-title h1,
body:has(.arcade-nav a.active[href="/arcade/about"]) .section-title h1 {
  text-shadow:
    0 0 8px rgba(255,255,255,.18),
    0 0 16px rgba(159,232,112,.22),
    0 0 30px rgba(159,232,112,.14);
}


/* =========================================================
   MACHINE TITLE: slightly more game-like
   ========================================================= */

.machine-info h2 {
  margin-bottom: 14px;

  letter-spacing: -.02em;

  text-shadow:
    0 0 8px rgba(255,255,255,.18),
    0 0 15px rgba(0,238,255,.18),
    0 0 20px rgba(255,50,190,.18);
}


/* =========================================================
   ABOUT CONTENT READABILITY
   ========================================================= */

.about-block p {
  font-size: 17px !important;
  line-height: 1.78;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {
  .section-title h1::after,
  .marquee h1::after,
  .about-block h2::after,
  .lab-status h2::after {
    bottom: -10px;
    height: 2px;
  }

  .section-title p,
  .about-block p,
  .lab-status p {
    margin-top: 18px;
  }
}

/* END ARCADE POLISH V11 */

/* ARCADE CLEAN RESET V12 */

/* =========================================================
   OVERALL ATMOSPHERE
   Cleaner, premium neon look
   ========================================================= */

html, body {
  background:
    radial-gradient(circle at 0% 26%, rgba(255, 179, 0, 0.10), transparent 30%),
    radial-gradient(circle at 100% 54%, rgba(90, 84, 255, 0.11), transparent 34%),
    linear-gradient(180deg, #06080f 0%, #05070d 100%);
  color: #eef3ff;
}

body {
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.18;
}

body > * {
  position: relative;
  z-index: 1;
}

/* =========================================================
   HEADER / BRAND / NAV
   ========================================================= */

.arcade-brand,
.brand,
.site-brand {
  margin-left: -18px !important;
}

.arcade-nav {
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
}

.arcade-nav a {
  min-width: 170px;
  min-height: 74px;
  padding: 18px 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  border: 1px solid rgba(145, 158, 190, 0.22);
  background: linear-gradient(180deg, rgba(10,15,24,0.92), rgba(8,12,20,0.92));
  color: #f4f6ff;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 0 0 rgba(0,0,0,0);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.arcade-nav a:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 190, 70, 0.55);
  box-shadow:
    0 0 18px rgba(255, 185, 60, 0.10),
    0 0 42px rgba(85, 140, 255, 0.08);
}

.arcade-nav a.active,
.arcade-nav a[aria-current="page"] {
  border-color: rgba(255, 190, 70, 0.80);
  box-shadow:
    0 0 14px rgba(255, 190, 70, 0.12),
    inset 0 -3px 0 rgba(255, 190, 70, 0.95);
}

/* =========================================================
   REMOVE UGLY TITLE LINES / BLOCKS
   ========================================================= */

.marquee::before,
.marquee::after,
.section-title h1::after,
.marquee h1::after,
.about-block h2::after,
.lab-status h2::after,
.machine-info h2::after {
  content: none !important;
  display: none !important;
}

.marquee,
.marquee-actions,
.section-title,
.about-block,
.lab-status {
  box-shadow: none !important;
  filter: none !important;
}

/* =========================================================
   SMALL YELLOW LABELS
   Same size across all pages
   ========================================================= */

.marquee-tag,
.section-title > span,
.block-label,
.lab-status-head > span:first-child,
.machine-copy > span:first-child,
.machine-info > span:first-child {
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffbf47 !important;
  text-shadow: 0 0 10px rgba(255,191,71,0.22);
}

/* =========================================================
   HERO / PAGE TITLES
   Cleaner typography, better glow
   ========================================================= */

.marquee h1,
.section-title h1,
.about-block h2,
.lab-status h2,
.machine-info h2 {
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.05em;
  line-height: 0.94;
  color: #fff8ec;
  text-transform: none;

  text-shadow:
    0 0 14px rgba(255,255,255,0.10),
    0 0 28px rgba(255,189,84,0.08),
    0 0 44px rgba(90,190,255,0.05);
}

.marquee h1 {
  font-size: clamp(88px, 9vw, 138px) !important;
  margin: 8px 0 18px;
}

.section-title h1 {
  font-size: clamp(58px, 6vw, 92px) !important;
  margin: 4px 0 12px;
}

.about-block h2,
.lab-status h2 {
  font-size: clamp(44px, 4.4vw, 72px) !important;
  margin: 0 0 18px;
}

.machine-info h2 {
  font-size: clamp(40px, 4vw, 62px) !important;
  margin: 10px 0 12px;
}

/* =========================================================
   PARAGRAPHS / READABILITY
   ========================================================= */

.marquee p,
.section-title p,
.about-block p,
.lab-status p,
.machine-info p {
  font-size: 18px !important;
  line-height: 1.75 !important;
  color: rgba(236, 241, 255, 0.88) !important;
  max-width: 66ch;
}

/* =========================================================
   HOMEPAGE HERO CLEANUP
   ========================================================= */

.home-screen .marquee,
.marquee {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  position: relative;
}

.home-screen .marquee {
  padding-right: 0 !important;
}

.home-screen .marquee::before,
.home-screen .marquee::after {
  content: none !important;
}

.home-screen .marquee h1,
.home-screen .marquee p,
.home-screen .marquee-tag {
  position: relative;
  z-index: 2;
}

.home-screen .marquee-actions {
  margin-top: 28px;
}

.home-screen .marquee-actions a,
.home-screen .marquee-actions button {
  min-width: 168px;
  min-height: 56px;
  padding: 14px 20px;
  font-size: 16px;
}

/* =========================================================
   NOW PLAYING CARD
   Keep a subtle Neon Arena feel
   ========================================================= */

.machine,
.now-playing,
.machine-card {
  border: 1px solid rgba(0, 224, 255, 0.30);
  background:
    linear-gradient(180deg, rgba(6, 11, 20, 0.98), rgba(8, 10, 18, 0.98));
  box-shadow:
    0 0 22px rgba(0, 220, 255, 0.06),
    0 0 36px rgba(255, 40, 180, 0.05);
}

.machine-info,
.machine-copy {
  background:
    linear-gradient(180deg, rgba(16, 10, 28, 0.96), rgba(10, 10, 18, 0.96));
}

.machine .primary-btn,
.machine a.primary-btn,
.machine button.primary-btn {
  background:
    linear-gradient(90deg, rgba(0, 196, 255, 0.20), rgba(255, 45, 190, 0.22));
  border: 1px solid rgba(0, 228, 255, 0.70);
  color: #fff7f9;
  box-shadow:
    0 0 18px rgba(0, 228, 255, 0.12),
    inset 0 0 18px rgba(255, 40, 180, 0.08);
}

/* =========================================================
   CONTENT CARDS
   ========================================================= */

.about-block,
.lab-status,
.panel,
.machine,
.card {
  border-radius: 0 !important;
}

.about-block,
.lab-status,
.panel,
.card {
  border: 1px solid rgba(145, 158, 190, 0.16);
  background: rgba(8, 12, 20, 0.74);
  box-shadow: 0 0 0 transparent !important;
}

/* =========================================================
   LABS PAGE
   Cleaner and more readable
   ========================================================= */

.lab-status {
  padding: 30px 30px 32px !important;
}

.lab-status-head {
  margin-bottom: 20px !important;
}

.lab-status p {
  max-width: 58ch;
}

.lab-status .primary-btn,
.lab-status a.primary-btn {
  margin-top: 18px;
}

.step-card,
.lab-step,
.process-card {
  padding: 24px !important;
  min-height: 120px !important;
}

.step-card h3,
.lab-step h3,
.process-card h3 {
  font-size: 26px !important;
  line-height: 1.15 !important;
  margin-bottom: 10px !important;
}

/* =========================================================
   ABOUT PAGE
   Better hierarchy
   ========================================================= */

.about-block {
  padding: 30px 34px !important;
}

.about-block p {
  font-size: 18px !important;
  line-height: 1.78 !important;
}

.about-block .stats,
.about-block .about-stats {
  margin-top: 24px;
}

/* =========================================================
   FOOTER
   ========================================================= */

footer,
.arcade-footer {
  color: rgba(214, 223, 245, 0.72);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
  .arcade-nav a {
    min-width: 146px;
    min-height: 66px;
    font-size: 22px !important;
  }

  .marquee h1 {
    font-size: clamp(72px, 11vw, 112px) !important;
  }

  .section-title h1 {
    font-size: clamp(48px, 8vw, 76px) !important;
  }
}

@media (max-width: 760px) {
  .arcade-brand,
  .brand,
  .site-brand {
    margin-left: 0 !important;
  }

  .arcade-nav {
    flex-wrap: wrap;
    gap: 12px;
  }

  .arcade-nav a {
    min-width: 132px;
    min-height: 58px;
    font-size: 18px !important;
  }

  .marquee h1 {
    font-size: clamp(56px, 14vw, 88px) !important;
  }

  .section-title h1,
  .about-block h2,
  .lab-status h2,
  .machine-info h2 {
    font-size: clamp(38px, 10vw, 58px) !important;
  }

  .marquee p,
  .section-title p,
  .about-block p,
  .lab-status p,
  .machine-info p {
    font-size: 16px !important;
  }
}

/* END ARCADE CLEAN RESET V12 */

/* ARCADE POLISH V13 */

/* =========================================================
   TOP NAV: same size, less bold
   ========================================================= */

.arcade-nav a {
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 25px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}

/* =========================================================
   PAGE TITLES: slightly smaller
   ========================================================= */

.marquee h1,
.section-title h1,
.about-block h2,
.lab-status h2,
.machine-info h2 {
  position: relative;
  display: inline-block;
  padding-bottom: 18px;
  color: #fff8ee !important;
  line-height: 0.96 !important;
  letter-spacing: -0.045em !important;

  text-shadow:
    0 0 8px rgba(255,255,255,0.16),
    0 0 22px rgba(255,232,168,0.10),
    0 0 38px rgba(116, 214, 255, 0.07),
    0 0 52px rgba(255, 73, 192, 0.05) !important;
}

/* homepage title */
.marquee h1 {
  font-size: clamp(72px, 7.5vw, 108px) !important;
  font-weight: 820 !important;
  margin: 10px 0 16px !important;
}

/* games / labs / about main page titles */
.section-title h1 {
  font-size: clamp(48px, 5.4vw, 76px) !important;
  font-weight: 800 !important;
  margin: 2px 0 12px !important;
}

/* content block titles */
.about-block h2,
.lab-status h2,
.machine-info h2 {
  font-size: clamp(34px, 3.4vw, 54px) !important;
  font-weight: 780 !important;
  margin: 0 0 16px !important;
}

/* =========================================================
   NEON GLOW LINE UNDER TITLES
   ========================================================= */

.marquee h1::after,
.section-title h1::after,
.about-block h2::after,
.lab-status h2::after,
.machine-info h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: min(72%, 420px);
  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      rgba(255, 191, 71, 0.95) 0%,
      rgba(255, 191, 71, 0.95) 16%,
      rgba(0, 232, 255, 0.95) 54%,
      rgba(255, 62, 186, 0.95) 100%
    );

  box-shadow:
    0 0 10px rgba(255, 191, 71, 0.35),
    0 0 18px rgba(0, 232, 255, 0.22),
    0 0 26px rgba(255, 62, 186, 0.24);
}

/* slightly shorter underline for smaller block headings */
.about-block h2::after,
.lab-status h2::after,
.machine-info h2::after {
  width: min(66%, 340px);
}

/* =========================================================
   SMALL LABELS ABOVE TITLES
   ========================================================= */

.marquee-tag,
.section-title > span,
.block-label,
.lab-status-head > span:first-child,
.machine-copy > span:first-child,
.machine-info > span:first-child {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  color: #ffc54d !important;
  text-shadow:
    0 0 10px rgba(255, 197, 77, 0.18),
    0 0 18px rgba(255, 197, 77, 0.08) !important;
}

/* =========================================================
   READABILITY
   ========================================================= */

.marquee p,
.section-title p,
.about-block p,
.lab-status p,
.machine-info p {
  font-size: 18px !important;
  line-height: 1.72 !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
  .arcade-nav a {
    font-size: 22px !important;
    font-weight: 500 !important;
  }

  .marquee h1 {
    font-size: clamp(62px, 8.2vw, 92px) !important;
  }

  .section-title h1 {
    font-size: clamp(42px, 6vw, 64px) !important;
  }

  .about-block h2,
  .lab-status h2,
  .machine-info h2 {
    font-size: clamp(30px, 4vw, 46px) !important;
  }
}

@media (max-width: 760px) {
  .arcade-nav a {
    font-size: 18px !important;
    font-weight: 500 !important;
  }

  .marquee h1 {
    font-size: clamp(48px, 12vw, 74px) !important;
  }

  .section-title h1 {
    font-size: clamp(34px, 9vw, 52px) !important;
  }

  .about-block h2,
  .lab-status h2,
  .machine-info h2 {
    font-size: clamp(28px, 8vw, 42px) !important;
  }

  .marquee h1::after,
  .section-title h1::after,
  .about-block h2::after,
  .lab-status h2::after,
  .machine-info h2::after {
    width: min(82%, 260px);
  }
}

/* END ARCADE POLISH V13 */

/* ARCADE POLISH V14 */


/* =========================================================
   LOGO SUBTEXT
   ========================================================= */

.arcade-logo small {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;

  margin-top: 5px !important;

  color: rgba(226, 234, 242, 0.86) !important;

  letter-spacing: 0.035em !important;

  text-shadow:
    0 0 8px rgba(255,255,255,0.08);
}


/* =========================================================
   BACKGROUND: LESS CLUTTER
   ========================================================= */

/*
   Keep the interesting shapes,
   but remove two decorative objects.
*/

.ambient-object--four,
.ambient-object--six {
  display: none !important;
}


/* Remaining shapes slightly quieter */

.ambient-object {
  opacity: 0.30 !important;

  filter:
    drop-shadow(0 0 8px currentColor);
}


/* =========================================================
   BACKGROUND: CLEAR, SLOW MOVEMENT
   ========================================================= */

/* Large amber circle */
.ambient-object--one {
  animation:
    arcadeDriftOneV14 13s ease-in-out infinite !important;
}

@keyframes arcadeDriftOneV14 {
  0%,
  100% {
    transform:
      translate3d(-18px, -10px, 0)
      scale(.90);

    opacity: .20;
  }

  50% {
    transform:
      translate3d(42px, 32px, 0)
      scale(1.02);

    opacity: .34;
  }
}


/* Purple diamond / square */
.ambient-object--two {
  animation:
    arcadeDriftTwoV14 16s ease-in-out infinite !important;
}

@keyframes arcadeDriftTwoV14 {
  0%,
  100% {
    transform:
      translate3d(0, 0, 0)
      rotate(45deg);

    opacity: .24;
  }

  50% {
    transform:
      translate3d(-52px, 38px, 0)
      rotate(62deg);

    opacity: .38;
  }
}


/* Green circle */
.ambient-object--three {
  animation:
    arcadeDriftThreeV14 11s ease-in-out infinite !important;
}

@keyframes arcadeDriftThreeV14 {
  0%,
  100% {
    transform:
      translate3d(0, 0, 0)
      scale(.92);

    opacity: .20;
  }

  50% {
    transform:
      translate3d(46px, -34px, 0)
      scale(1.08);

    opacity: .40;
  }
}


/* Diagonal amber line */
.ambient-object--five {
  animation:
    arcadeDriftFiveV14 15s ease-in-out infinite !important;
}

@keyframes arcadeDriftFiveV14 {
  0%,
  100% {
    transform:
      translate3d(-40px, -20px, 0)
      rotate(-27deg);

    opacity: .10;
  }

  50% {
    transform:
      translate3d(75px, 45px, 0)
      rotate(-20deg);

    opacity: .26;
  }
}


/* =========================================================
   BACKGROUND LIGHT BEAMS
   Keep them moving, but subtle.
   ========================================================= */

.ambient-layer::before {
  opacity: .10 !important;

  animation:
    arcadeBeamOneV14 17s ease-in-out infinite !important;
}

.ambient-layer::after {
  opacity: .08 !important;

  animation:
    arcadeBeamTwoV14 20s ease-in-out infinite !important;
}

@keyframes arcadeBeamOneV14 {
  0%,
  100% {
    transform:
      translateX(-130px)
      rotate(27deg);
  }

  50% {
    transform:
      translateX(145px)
      rotate(27deg);
  }
}

@keyframes arcadeBeamTwoV14 {
  0%,
  100% {
    transform:
      translateX(115px)
      rotate(-22deg);
  }

  50% {
    transform:
      translateX(-140px)
      rotate(-22deg);
  }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .ambient-object,
  .ambient-layer::before,
  .ambient-layer::after {
    animation: none !important;
  }
}

/* END ARCADE POLISH V14 */

/* ARCADE POLISH V15 */


/* =========================================================
   REMOVE THE VERTICAL HOME HERO BLOCK
   ========================================================= */

.home-screen::before,
.home-screen::after,
.home-screen .marquee::before,
.home-screen .marquee::after {
  content: none !important;
  display: none !important;

  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

.home-screen .marquee {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  outline: none !important;
}


/* =========================================================
   NOW PLAYING CARD
   Smaller card, SAME text sizes
   ========================================================= */

.featured-machine {
  width: min(350px, 100%) !important;
  max-width: 350px !important;

  justify-self: center;

  margin-left: auto;
  margin-right: auto;
}


/* Smaller top area, typography unchanged */

.featured-machine .machine-top {
  height: 44px !important;

  padding-left: 14px !important;
  padding-right: 14px !important;
}


/* Game preview becomes shorter */

.featured-machine .machine-screen {
  padding: 10px !important;
}

.featured-machine .machine-art {
  height: 138px !important;
}


/* Compact info area */

.featured-machine .machine-info {
  padding:
    14px 16px 16px !important;
}


/* Keep ALL text sizes readable */

.featured-machine .machine-top,
.featured-machine .machine-live {
  font-size: 12px !important;
}

.featured-machine .machine-info small {
  font-size: 11px !important;
}

.featured-machine .machine-info h2 {
  font-size: 31px !important;
  line-height: 1 !important;

  margin:
    7px 0 9px !important;
}

.featured-machine .machine-info p {
  font-size: 13px !important;
  line-height: 1.5 !important;

  margin-bottom: 14px !important;
}


/* Play button smaller physically, text stays same */

.featured-machine .machine-play-btn {
  min-height: 52px !important;

  padding:
    0 16px !important;

  font-size: 13px !important;
}


/* Don't scale the card or its contents */

.featured-machine {
  transform-origin: center center;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {
  .featured-machine {
    width: min(100%, 350px) !important;
  }
}

/* END ARCADE POLISH V15 */

/* ARCADE FIX V16 - CABINET OVERFLOW */

/*
  The animated ::before effect belongs INSIDE the cabinet.
  overflow: visible caused it to appear as a tall rectangle
  beside the NOW PLAYING card.
*/
.featured-machine {
  overflow: hidden !important;
  isolation: isolate;
}

/* Keep the animated decoration safely inside the cabinet. */
.featured-machine::before {
  pointer-events: none !important;
}

/* END ARCADE FIX V16 */

/* NAV TAB COLORS V17 */

/* ---------------------------------------------------------
   GAMES = AMBER / YELLOW
   --------------------------------------------------------- */
.arcade-nav > a:nth-child(1):hover,
.arcade-nav > a:nth-child(1):focus-visible,
.arcade-nav > a:nth-child(1)[aria-current="page"],
.arcade-nav > a:nth-child(1).active {
  color: #ffb52e !important;
  border-color: #ffb52e !important;

  background:
    linear-gradient(
      180deg,
      rgba(255, 181, 46, 0.10),
      rgba(255, 181, 46, 0.025)
    ) !important;

  box-shadow:
    0 0 10px rgba(255, 181, 46, 0.45),
    0 0 24px rgba(255, 181, 46, 0.18),
    inset 0 0 20px rgba(255, 181, 46, 0.06) !important;
}

.arcade-nav > a:nth-child(1):hover::after,
.arcade-nav > a:nth-child(1):focus-visible::after,
.arcade-nav > a:nth-child(1)[aria-current="page"]::after,
.arcade-nav > a:nth-child(1).active::after {
  background: #ffb52e !important;
  box-shadow:
    0 0 8px #ffb52e,
    0 0 18px rgba(255, 181, 46, 0.70) !important;
}


/* ---------------------------------------------------------
   LABS = VIOLET / PURPLE
   --------------------------------------------------------- */
.arcade-nav > a:nth-child(2):hover,
.arcade-nav > a:nth-child(2):focus-visible,
.arcade-nav > a:nth-child(2)[aria-current="page"],
.arcade-nav > a:nth-child(2).active {
  color: #a77cff !important;
  border-color: #a77cff !important;

  background:
    linear-gradient(
      180deg,
      rgba(167, 124, 255, 0.12),
      rgba(167, 124, 255, 0.025)
    ) !important;

  box-shadow:
    0 0 10px rgba(167, 124, 255, 0.55),
    0 0 26px rgba(167, 124, 255, 0.22),
    inset 0 0 20px rgba(167, 124, 255, 0.07) !important;
}

.arcade-nav > a:nth-child(2):hover::after,
.arcade-nav > a:nth-child(2):focus-visible::after,
.arcade-nav > a:nth-child(2)[aria-current="page"]::after,
.arcade-nav > a:nth-child(2).active::after {
  background: #a77cff !important;
  box-shadow:
    0 0 8px #a77cff,
    0 0 20px rgba(167, 124, 255, 0.78) !important;
}


/* ---------------------------------------------------------
   ABOUT = LIME / GREEN
   --------------------------------------------------------- */
.arcade-nav > a:nth-child(3):hover,
.arcade-nav > a:nth-child(3):focus-visible,
.arcade-nav > a:nth-child(3)[aria-current="page"],
.arcade-nav > a:nth-child(3).active {
  color: #9fe870 !important;
  border-color: #9fe870 !important;

  background:
    linear-gradient(
      180deg,
      rgba(159, 232, 112, 0.11),
      rgba(159, 232, 112, 0.025)
    ) !important;

  box-shadow:
    0 0 10px rgba(159, 232, 112, 0.50),
    0 0 25px rgba(159, 232, 112, 0.20),
    inset 0 0 20px rgba(159, 232, 112, 0.06) !important;
}

.arcade-nav > a:nth-child(3):hover::after,
.arcade-nav > a:nth-child(3):focus-visible::after,
.arcade-nav > a:nth-child(3)[aria-current="page"]::after,
.arcade-nav > a:nth-child(3).active::after {
  background: #9fe870 !important;
  box-shadow:
    0 0 8px #9fe870,
    0 0 20px rgba(159, 232, 112, 0.75) !important;
}

/* END NAV TAB COLORS V17 */

/* HEADER CENTER FIX V18 */

/*
  Keep the logo at the left side,
  but center GAMES / LABS / ABOUT on the actual viewport.
*/
.arcade-header {
  position: relative !important;
  border-bottom: none !important;
}

/* True horizontal center on every desktop page. */
.arcade-nav {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;

  margin: 0 !important;

  transform: translate(-50%, -50%) !important;
}

/*
  Clean centered divider.
  Independent from the logo and navigation width.
*/
.arcade-header::after {
  content: "" !important;

  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;

  width: min(100%, 1020px) !important;
  height: 1px !important;

  transform: translateX(-50%) !important;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,.10) 10%,
      rgba(255,255,255,.10) 90%,
      transparent 100%
    ) !important;

  pointer-events: none !important;
}

/* Tablet/mobile keeps the existing stacked navigation. */
@media (max-width: 1050px) {
  .arcade-nav {
    position: static !important;
    width: 100% !important;
    transform: none !important;
    justify-content: center !important;
  }

  .arcade-header::after {
    width: 100% !important;
  }
}

/* END HEADER CENTER FIX V18 */

/* HOMEPAGE POLISH V19 */

/* =========================================================
   SECOND CONCEPT — FULL PAGE ATMOSPHERE
   No rectangular hero background.
   ========================================================= */

.home-screen {
  position: relative !important;
  isolation: isolate !important;

  background: transparent !important;
  background-image: none !important;
  animation: none !important;
}


/* Full viewport colour atmosphere */
.home-screen::before {
  content: "" !important;
  display: block !important;

  position: fixed !important;
  inset: 0 !important;

  z-index: 0 !important;
  pointer-events: none !important;

  background:
    radial-gradient(
      circle at -4% 48%,
      rgba(255, 178, 36, 0.17) 0%,
      rgba(255, 178, 36, 0.075) 22%,
      transparent 43%
    ),

    radial-gradient(
      circle at 52% 38%,
      rgba(154, 105, 255, 0.075) 0%,
      rgba(154, 105, 255, 0.035) 23%,
      transparent 46%
    ),

    radial-gradient(
      circle at 105% 47%,
      rgba(142, 231, 92, 0.105) 0%,
      rgba(142, 231, 92, 0.04) 23%,
      transparent 44%
    ) !important;

  background-size:
    118% 118%,
    126% 126%,
    118% 118% !important;

  background-position:
    -8% 50%,
    50% 43%,
    108% 49% !important;

  opacity: 1 !important;

  animation:
    arcadeAtmosphereV20 22s ease-in-out infinite alternate !important;
}


/* Keep every real homepage element above the atmosphere */
.home-screen > * {
  position: relative;
  z-index: 1;
}


/* Gentle movement — no screensaver effect */
@keyframes arcadeAtmosphereV20 {
  0% {
    background-position:
      -10% 47%,
      47% 39%,
      110% 52%;
  }

  50% {
    background-position:
      -3% 53%,
      52% 45%,
      103% 45%;
  }

  100% {
    background-position:
      1% 48%,
      56% 41%,
      98% 51%;
  }
}


/* =========================================================
   WELCOME ALIEN
   ========================================================= */

.home-screen .marquee-tag {
  color: #ffbf2f !important;

  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;

  text-shadow:
    0 0 7px rgba(255, 191, 47, 0.64),
    0 0 18px rgba(255, 177, 28, 0.22) !important;
}


/* =========================================================
   NEON ARCADE — YELLOW, SHARP AND BRIGHT
   ========================================================= */

.home-screen .marquee h1 {
  color: #ffe477 !important;

  text-shadow:
    0 0 2px rgba(255, 247, 206, 1),
    0 0 7px rgba(255, 215, 86, 0.92),
    0 0 16px rgba(255, 185, 39, 0.62),
    0 0 30px rgba(255, 166, 18, 0.34),
    0 0 50px rgba(255, 166, 18, 0.14) !important;

  filter:
    drop-shadow(0 0 7px rgba(255, 190, 45, 0.18)) !important;

  animation:
    homeTitleGlowV20 5s ease-in-out infinite !important;
}


@keyframes homeTitleGlowV20 {
  0%,
  100% {
    text-shadow:
      0 0 2px rgba(255, 247, 206, 1),
      0 0 7px rgba(255, 215, 86, 0.88),
      0 0 16px rgba(255, 185, 39, 0.56),
      0 0 28px rgba(255, 166, 18, 0.28),
      0 0 45px rgba(255, 166, 18, 0.12);
  }

  50% {
    text-shadow:
      0 0 3px rgba(255, 249, 218, 1),
      0 0 9px rgba(255, 219, 95, 1),
      0 0 20px rgba(255, 187, 38, 0.72),
      0 0 36px rgba(255, 164, 15, 0.40),
      0 0 58px rgba(255, 164, 15, 0.17);
  }
}


/* =========================================================
   GAME LIBRARY BUTTON
   ========================================================= */

.home-screen .marquee-actions a[href*="/arcade/games"] {
  border-color: rgba(255, 187, 55, 0.38) !important;

  background:
    rgba(8, 12, 20, 0.72) !important;

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease !important;
}


.home-screen .marquee-actions a[href*="/arcade/games"]:hover {
  transform: translateY(-2px);

  border-color:
    rgba(255, 187, 55, 0.92) !important;

  box-shadow:
    0 0 10px rgba(255, 181, 46, 0.26),
    0 0 25px rgba(255, 181, 46, 0.11) !important;
}


/* =========================================================
   NOW PLAYING CARD
   Dimensions remain untouched.
   ========================================================= */

.home-screen .featured-machine {
  transition:
    transform .22s ease,
    box-shadow .22s ease !important;
}


.home-screen .featured-machine:hover {
  transform: translateY(-3px);

  box-shadow:
    0 0 15px rgba(0, 225, 255, 0.14),
    0 0 34px rgba(255, 43, 185, 0.10) !important;
}


/* Existing geometric decorations stay understated */
.home-screen .ambient-object {
  opacity: 0.20 !important;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .home-screen::before,
  .home-screen .marquee h1 {
    animation: none !important;
  }
}

/* END HOMEPAGE POLISH V19 */

/* ARCADE FOOTER BAR V2 */

.arcade-footer-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  width: 100%;
}

.arcade-footer-left,
.arcade-footer-center,
.arcade-footer-right {
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(220, 228, 240, 0.72);
  white-space: nowrap;
}

.arcade-footer-left {
  justify-self: start;
  font-size: 10px;
}

.arcade-footer-center {
  justify-self: center;
  font-size: 12px;
  color: rgba(240, 245, 255, 0.92);
  text-shadow:
    0 0 6px rgba(255, 196, 64, 0.10),
    0 0 10px rgba(167, 124, 255, 0.10);
}

.arcade-footer-right {
  justify-self: end;
  font-size: 10px;
}

@media (max-width: 900px) {
  .arcade-footer-bar {
    grid-template-columns: 1fr;
    gap: 6px;
    text-align: center;
  }

  .arcade-footer-left,
  .arcade-footer-center,
  .arcade-footer-right {
    justify-self: center;
    white-space: normal;
  }
}

/* END ARCADE FOOTER BAR V2 */

/* ARCADE FOOTER V21 */

.arcade-footer {
  position: relative;

  width: min(calc(100% - 40px), 1020px);
  margin: 0 auto;

  padding: 16px 0 12px;

  border: 0 !important;
}


/* Exact dezelfde rustige lijnstijl als boven bij de tabs */
.arcade-footer::before {
  content: "";

  position: absolute;
  left: 50%;
  top: 0;

  width: 100%;
  height: 1px;

  transform: translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.10) 10%,
      rgba(255, 255, 255, 0.10) 90%,
      transparent 100%
    );

  pointer-events: none;
}


.arcade-footer-bar {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 18px;

  width: 100%;

  text-align: center;
}


/* Alle footerteksten exact gelijk */
.arcade-footer-bar span {
  font-size: 12px !important;
  line-height: 1.4;

  font-weight: 500 !important;

  letter-spacing: 0.16em;

  color: rgba(225, 232, 242, 0.82);

  white-space: nowrap;
}


/* Scheidingstekens blijven duidelijk zichtbaar */
.arcade-footer-bar .arcade-footer-separator {
  color: rgba(255, 190, 55, 0.82);

  text-shadow:
    0 0 7px rgba(255, 181, 46, 0.20);
}


@media (max-width: 760px) {
  .arcade-footer {
    width: calc(100% - 28px);
  }

  .arcade-footer-bar {
    flex-wrap: wrap;
    gap: 7px 10px;
  }

  .arcade-footer-bar span {
    white-space: normal;
  }
}

/* END ARCADE FOOTER V21 */

/* FOOTER SEPARATOR POLISH V22 */

.arcade-footer-bar .arcade-footer-separator {
  display: inline-block;

  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  letter-spacing: 0.10em !important;

  color: #ffbd32 !important;

  transform:
    scaleX(1.12)
    scaleY(1.08);

  text-shadow:
    0 0 5px rgba(255, 196, 63, 0.72),
    0 0 12px rgba(255, 177, 33, 0.34) !important;
}

/* END FOOTER SEPARATOR POLISH V22 */

/* FOOTER BAR POLISH V23 */

.arcade-footer-bar {
  width: min(100%, 1080px);
  margin: 0 auto;
  padding-top: 14px;

  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;

  column-gap: 22px;
}

.arcade-footer-item,
.arcade-footer-separator {
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #8dff8a;
  text-shadow:
    0 0 6px rgba(141, 255, 138, 0.42),
    0 0 14px rgba(141, 255, 138, 0.18);
}

.arcade-footer-item--left {
  text-align: left;
}

.arcade-footer-item--center {
  text-align: center;
}

.arcade-footer-item--right {
  text-align: right;
}

.arcade-footer-separator {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.10em;
  opacity: 0.95;
}

@media (max-width: 900px) {
  .arcade-footer-bar {
    grid-template-columns: 1fr;
    row-gap: 10px;
    text-align: center;
  }

  .arcade-footer-item--left,
  .arcade-footer-item--center,
  .arcade-footer-item--right {
    text-align: center;
  }

  .arcade-footer-separator {
    display: none;
  }
}

/* END FOOTER BAR POLISH V23 */

/* FOOTER POSITION POLISH V24 */
.arcade-footer-bar {
  width: min(100%, 880px) !important;
  column-gap: 16px !important;
  transform: translateY(-8px);
}
/* END FOOTER POSITION POLISH V24 */

/* SECTION TITLE STACK V25 */

/*
  Inner pages:
  small yellow label
  ↓
  main title
  ↓
  description
*/

.section-title {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  gap: 0 !important;
}

/* GAME LIBRARY / LABS / ABOUT NEON ARCADE */
.section-title > span {
  display: block !important;

  width: auto !important;

  margin: 0 0 12px 0 !important;
  padding: 0 !important;

  order: 1 !important;
}

/* Main page title */
.section-title h1 {
  display: inline-block !important;

  margin: 0 !important;

  order: 2 !important;
}

/* Description underneath */
.section-title > p {
  display: block !important;

  width: 100% !important;

  margin: 16px 0 0 0 !important;

  order: 3 !important;
}


/* Keep the yellow side line clean */
.section-title::before {
  align-self: stretch;
}


/* Mobile */
@media (max-width: 760px) {
  .section-title > span {
    margin-bottom: 8px !important;
  }

  .section-title > p {
    margin-top: 12px !important;
  }
}

/* END SECTION TITLE STACK V25 */

/* GAMES MACHINE + FOOTER ALIGN V26 */


/* =========================================================
   GAMES PAGE
   Use EXACTLY the homepage featured machine
   ========================================================= */

.games-machine-zone {
  width: 100%;

  display: grid;
  grid-template-columns:
    350px
    minmax(240px, 280px);

  justify-content: start;
  align-items: stretch;

  gap: 20px;

  margin-top: 22px;
}


/*
  Do not redesign this card here.
  It must retain the exact homepage dimensions/style.
*/
.games-machine-zone > .featured-machine {
  width: min(100%, 350px) !important;
  max-width: 350px !important;

  margin: 0 !important;

  justify-self: start !important;
  align-self: start !important;
}


/* Keep the coming-soon panel neat beside it */
.games-machine-zone > article {
  min-width: 0;
  height: 100%;
}


/* =========================================================
   FOOTER QUOTE
   Three phrases visually balanced around the center
   ========================================================= */

.arcade-quote-footer {
  position: relative;

  width: 100%;

  margin-left: auto;
  margin-right: auto;

  padding-top: 14px;
  padding-bottom: 9px;
}


/*
  Keep the existing full footer line,
  but pull the actual text group inward.
*/
.arcade-quote-footer__inner {
  width: min(820px, 100%);

  margin-left: auto;
  margin-right: auto;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);

  align-items: center;

  column-gap: 22px;
}


.arcade-quote-copy {
  display: block;

  text-align: center;

  white-space: nowrap;
}


.arcade-quote-separator {
  display: block;

  min-width: 38px;

  color: #ffb52e;

  font-size: 18px;
  font-weight: 900;

  letter-spacing: 3px;

  text-align: center;

  text-shadow:
    0 0 5px rgba(255,181,46,.85),
    0 0 12px rgba(255,181,46,.45);
}


.arcade-quote-separator--back {
  letter-spacing: 2px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 760px) {

  .games-machine-zone {
    grid-template-columns: 1fr;

    justify-items: center;
  }

  .games-machine-zone > .featured-machine {
    justify-self: center !important;
  }


  .arcade-quote-footer__inner {
    width: 100%;

    display: flex;
    flex-wrap: wrap;

    justify-content: center;

    gap: 8px 14px;
  }

  .arcade-quote-copy {
    white-space: normal;
  }
}


/* END GAMES MACHINE + FOOTER ALIGN V26 */

/* ARCADE HEADER FOOTER POLISH V27 */


/* =========================================================
   HEADER
   ========================================================= */

/*
   Logo blijft waar hij staat.
   Alleen de drie grote tabs zakken iets naar beneden.
*/
.arcade-nav {
  top: 56% !important;
}


/*
   Oude border verbergen zodat we de lijn onafhankelijk
   van logo en navigatie iets lager kunnen plaatsen.
*/
.arcade-header {
  border-bottom: 0 !important;
}

.arcade-header::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  bottom: -13px;

  height: 1px;

  background:
    rgba(255, 255, 255, 0.13);

  pointer-events: none;
}


/* =========================================================
   FOOTER / QUOTE BAR
   ========================================================= */

.arcade-quote-footer {
  position: relative;

  /* hele onderste balk iets omhoog */
  transform: translateY(-18px);

  /* witte lijn terug */
  border-top:
    1px solid rgba(255, 255, 255, 0.14) !important;

  padding-top: 15px !important;
}


/*
   Iets compacter gecentreerd zodat de drie stukken
   mooi bij elkaar horen.
*/
.arcade-quote-footer__inner {
  width: min(760px, calc(100% - 40px)) !important;

  column-gap: 24px !important;

  margin-left: auto !important;
  margin-right: auto !important;
}


/* =========================================================
   FOOTER TEXT COLORS
   ========================================================= */

/* PETER HAD THE IDEA */
.arcade-quote-footer__inner > .arcade-quote-copy:first-child {
  color: #ffc238 !important;

  text-shadow:
    0 0 4px rgba(255, 194, 56, 0.95),
    0 0 10px rgba(255, 177, 30, 0.72),
    0 0 20px rgba(255, 150, 0, 0.32) !important;
}


/* AI FED THE MACHINE */
.arcade-quote-footer__inner > .arcade-quote-copy:nth-child(3) {
  color: #b784ff !important;

  text-shadow:
    0 0 4px rgba(183, 132, 255, 0.95),
    0 0 10px rgba(153, 91, 255, 0.68),
    0 0 20px rgba(127, 65, 255, 0.30) !important;
}


/* INSERT COFFEE TO CONTINUE */
.arcade-quote-footer__inner > .arcade-quote-copy:last-child {
  color: #8dff69 !important;

  text-shadow:
    0 0 4px rgba(141, 255, 105, 0.95),
    0 0 10px rgba(100, 255, 70, 0.67),
    0 0 20px rgba(77, 255, 61, 0.28) !important;
}


/* De schuine verdelers blijven warm geel */
.arcade-quote-separator {
  color: #ffb52e !important;

  text-shadow:
    0 0 5px rgba(255, 181, 46, 1),
    0 0 12px rgba(255, 181, 46, 0.7),
    0 0 20px rgba(255, 150, 0, 0.3) !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {
  .arcade-nav {
    top: 54% !important;
  }

  .arcade-header::after {
    bottom: -8px;
  }

  .arcade-quote-footer {
    transform: translateY(-8px);
  }
}


/* END ARCADE HEADER FOOTER POLISH V27 */

/* ARCADE DIVIDERS AND SOFT FOOTER V28 */
/* Both dividers share the header's existing centered, fading line. */
.arcade-header::after,
.arcade-quote-footer::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  width: min(100%, 1020px) !important;
  height: 1px !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, .10) 10%,
    rgba(255, 255, 255, .10) 90%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
}

.arcade-header::after {
  bottom: -18px !important;
}

/* Retain the border's space so the text position does not change. */
.arcade-quote-footer {
  border-top-color: transparent !important;
}

.arcade-quote-footer::before {
  top: -1px;
}

.arcade-quote-footer__inner > .arcade-quote-copy:first-child {
  color: #d3a43d !important;
  text-shadow: 0 0 5px rgba(255, 194, 56, .35),
    0 0 12px rgba(255, 177, 30, .16) !important;
}

.arcade-quote-footer__inner > .arcade-quote-copy:nth-child(3) {
  color: #a080ce !important;
  text-shadow: 0 0 5px rgba(183, 132, 255, .35),
    0 0 12px rgba(153, 91, 255, .16) !important;
}

.arcade-quote-footer__inner > .arcade-quote-copy:last-child {
  color: #85bf6b !important;
  text-shadow: 0 0 5px rgba(141, 255, 105, .35),
    0 0 12px rgba(100, 255, 70, .16) !important;
}

.arcade-quote-separator {
  color: #ff861f !important;
  /* Shorten the strokes without shifting the footer grid. */
  transform: scale(.82);
  transform-origin: center;
  text-shadow: 0 0 5px rgba(255, 139, 40, .40),
    0 0 12px rgba(255, 120, 25, .18) !important;
}

@media (max-width: 1050px) {
  .arcade-header::after,
  .arcade-quote-footer::before {
    width: 100% !important;
  }
}

@media (max-width: 760px) {
  .arcade-header::after {
    bottom: -12px !important;
  }
}
/* END ARCADE DIVIDERS AND SOFT FOOTER V28 */

/* QUIETER FOOTER AND BRIGHTER IDLE TAB TOP EDGES V29 */
.arcade-quote-footer__inner > .arcade-quote-copy {
  opacity: .58;
}

/* Thicken only the idle top edge, retaining its color and glow. */
.arcade-nav > a:not(.active):not([aria-current="page"]):not(:hover):not(:focus-visible)::before {
  height: 2px;
  opacity: 1;
  background: linear-gradient(
    90deg,
    transparent,
    var(--nav-color) 25%,
    var(--nav-color) 75%,
    transparent
  );
  filter: drop-shadow(0 0 3px var(--nav-color));
}
/* END QUIETER FOOTER AND BRIGHTER IDLE TAB TOP EDGES V29 */

/* SHARED ARCADE VIEWPORT FIT */
/* Allocate the viewport between the existing header, content and footer. */
@media (min-width: 1051px) {
  .page-frame {
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto minmax(min-content, 1fr) auto;
  }

  .page-frame > .home-screen,
  .page-frame > .section-screen {
    min-height: 0;
  }
}
/* END SHARED ARCADE VIEWPORT FIT */

/* BALANCED FOOTER TEXT SPACING V32 */
@media (min-width: 761px) {
  .arcade-quote-footer__inner {
    column-gap: 32px !important;
    grid-template-columns: minmax(0, 1fr) auto max-content auto minmax(0, 1fr);
  }

  .arcade-quote-footer__inner > .arcade-quote-copy:first-child {
    text-align: right;
  }

  .arcade-quote-footer__inner > .arcade-quote-copy:last-child {
    text-align: left;
  }
}
/* END BALANCED FOOTER TEXT SPACING V32 */

/* Identical footer size and placement on Home, Games, Labs and About. */
.page-frame > .arcade-quote-footer {
  translate: 0 5px;
}

.page-frame > .arcade-quote-footer::before {
  top: 5px;
}

.page-frame > .arcade-quote-footer > .arcade-quote-footer__inner {
  transform: scale(.92);
  transform-origin: center;
}

/* A quieter Games library; keep the playable cabinet unchanged. */
.section-screen:has(> .games-machine-zone) > .section-title {
  border: 0;
  padding: 0;
  margin-bottom: 28px;
  box-shadow: none;
}

.section-screen:has(> .games-machine-zone) > .section-title > span {
  font-size: 12px !important;
  margin-bottom: 10px !important;
}

.section-screen:has(> .games-machine-zone) > .section-title h1 {
  font-size: clamp(30px, 3.2vw, 44px) !important;
  padding-bottom: 0;
  line-height: 1.08 !important;
  text-shadow: 0 0 16px rgba(255, 232, 168, .08) !important;
}

.section-screen:has(> .games-machine-zone) > .section-title > p {
  font-size: 15px !important;
  margin-top: 12px !important;
}

.section-screen:has(> .games-machine-zone)::before {
  content: none;
}

.section-screen > .games-machine-zone {
  grid-template-columns: 350px minmax(200px, 250px);
  gap: 44px;
  align-items: center;
  margin-top: 0;
}

.games-machine-zone > .game-entry--empty {
  height: auto;
  min-height: 0;
  align-self: center;
  padding: 20px 0 0;
  border: 0;
  border-top: 1px solid rgba(167, 124, 255, .28);
  background: transparent;
  box-shadow: none;
}

.games-machine-zone > .game-entry--empty h2 {
  font-size: 20px !important;
  margin: 10px 0 12px;
  text-shadow: none;
}

.games-machine-zone > .game-entry--empty p {
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 16px;
}

.games-machine-zone > .game-entry--empty a {
  align-self: flex-start;
  font-size: 11px;
  margin-top: 0;
  padding-block: 8px;
}

@media (max-width: 760px) {
  .section-screen > .games-machine-zone {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .games-machine-zone > .game-entry--empty {
    width: min(100%, 350px);
    justify-self: center;
  }
}

/* Match the homepage NEON ARCADE lettering at a quieter page scale. */
.section-title h1,
.about-block h2,
.lab-status h2,
.game-entry--empty h2,
.lab-tile strong {
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-weight: 820 !important;
  letter-spacing: -.045em !important;
  line-height: .96 !important;
}

.arcade-nav > a {
  font-family: "Segoe UI", Arial, sans-serif !important;
}

.section-screen .section-title h1 {
  font-size: clamp(42px, 4.75vw, 67px) !important;
}

.section-screen .about-block h2,
.section-screen .lab-status h2 {
  font-size: clamp(30px, 3vw, 47px) !important;
}

.section-screen .section-title p,
.section-screen .about-block p,
.section-screen .lab-status p {
  font-size: 17px !important;
  line-height: 1.65 !important;
}

@media (max-width: 1100px) {
  .section-screen .section-title h1 {
    font-size: clamp(37px, 5.3vw, 56px) !important;
  }

  .section-screen .about-block h2,
  .section-screen .lab-status h2 {
    font-size: clamp(28px, 3.5vw, 40px) !important;
  }
}

@media (max-width: 760px) {
  .section-screen .section-title h1 {
    font-size: clamp(30px, 8vw, 46px) !important;
  }

  .section-screen .about-block h2,
  .section-screen .lab-status h2 {
    font-size: clamp(26px, 7vw, 37px) !important;
  }

  .section-screen .section-title p,
  .section-screen .about-block p,
  .section-screen .lab-status p {
    font-size: 16px !important;
  }
}

/* SHARED ARCADE BACKGROUND V39 */

/* =========================================================
   STRONGER 3-COLOR ARCADE ATMOSPHERE
   More visible glow, especially purple in the centre.
   ========================================================= */

html,
body {
  min-width: 100%;
  min-height: 100%;
  background: #05070d !important;
}

body {
  position: relative !important;
  isolation: isolate !important;
}

body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 0 !important;

  background:
    /* LEFT — GAMES YELLOW */
    radial-gradient(
      ellipse 62% 112% at 4% 50%,
      rgba(255, 183, 35, 0.30) 0%,
      rgba(255, 183, 35, 0.18) 20%,
      rgba(255, 183, 35, 0.09) 36%,
      rgba(255, 183, 35, 0.035) 52%,
      transparent 70%
    ),

    /* CENTER — LABS PURPLE MAIN */
    radial-gradient(
      ellipse 56% 108% at 50% 48%,
      rgba(162, 102, 255, 0.34) 0%,
      rgba(162, 102, 255, 0.20) 20%,
      rgba(162, 102, 255, 0.10) 38%,
      rgba(162, 102, 255, 0.040) 56%,
      transparent 72%
    ),

    /* CENTER — EXTRA PURPLE BOOST */
    radial-gradient(
      ellipse 34% 84% at 50% 46%,
      rgba(173, 118, 255, 0.18) 0%,
      rgba(173, 118, 255, 0.10) 35%,
      rgba(173, 118, 255, 0.035) 58%,
      transparent 76%
    ),

    /* RIGHT — ABOUT GREEN */
    radial-gradient(
      ellipse 62% 112% at 96% 50%,
      rgba(145, 239, 102, 0.26) 0%,
      rgba(145, 239, 102, 0.15) 20%,
      rgba(145, 239, 102, 0.075) 36%,
      rgba(145, 239, 102, 0.028) 52%,
      transparent 70%
    ) !important;

  background-repeat: no-repeat !important;

  animation: arcadeAtmosphereV39 20s ease-in-out infinite alternate !important;
}

body::after {
  content: none !important;
  display: none !important;
}

.home-screen::before,
.home-screen::after,
.section-screen::before,
.section-screen::after {
  content: none !important;
  display: none !important;
}

.page-frame,
.home-screen,
.section-screen {
  background: transparent !important;
  background-image: none !important;
}

.page-frame {
  position: relative !important;
  z-index: 1 !important;
}

.arcade-header,
.home-screen,
.section-screen,
.arcade-quote-footer {
  position: relative !important;
  z-index: 2 !important;
}

@keyframes arcadeAtmosphereV39 {
  0% {
    background-position:
      -1vw 0,
      0 -1vh,
      0.8vw 0.4vh,
      1vw 0;
  }

  50% {
    background-position:
      1vw 0.8vh,
      1vw 0.6vh,
      -0.6vw -0.4vh,
      -0.8vw -0.5vh;
  }

  100% {
    background-position:
      2vw -0.6vh,
      -1vw 0.8vh,
      0.4vw -0.8vh,
      -2vw 0.6vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none !important;
  }
}

/* Keep the current Games heading position */
.section-screen:has(> .games-machine-zone) > .section-title {
  transform: translateY(-10px);
}

.section-screen:has(> .games-machine-zone) > .section-title h1 {
  margin-bottom: 0 !important;
}

/* END SHARED ARCADE BACKGROUND V39 */

/* HEADER FOOTER POSITION V40 */

/*
  Small vertical alignment adjustment.
  Keep all existing sizes, colors and spacing.
*/

/* Move the three main tabs slightly down. */
.arcade-nav {
  translate: 0 8px !important;
}

/*
  Move the header divider by exactly the same amount.
  Therefore the gap between tabs and divider does not change.
*/
.arcade-header::after {
  translate: 0 8px !important;
}

/*
  Move the complete bottom quote/footer down slightly.
  Its divider belongs to the footer, so both move together
  and their internal spacing remains unchanged.
*/
.page-frame > .arcade-quote-footer {
  translate: 0 12px !important;
}

/* Keep the existing divider-to-text distance. */
.page-frame > .arcade-quote-footer::before {
  top: 5px !important;
}

/* END HEADER FOOTER POSITION V40 */

/* HOMEPAGE INTRO + GAME LIBRARY COLOR V41 */

/* Subtitle under NEON ARCADE */
.home-screen h1 + p {
  color: #c9d8ff !important;
  text-shadow:
    0 0 8px rgba(167, 124, 255, 0.20),
    0 0 18px rgba(0, 220, 255, 0.08) !important;
}

/* GAME LIBRARY button */
.home-screen a[href="/arcade/games/"],
.home-screen a[href="games/"],
.home-screen a[href="./games/"] {
  color: #eeeaff !important;

  border-color: rgba(167, 124, 255, 0.72) !important;

  background:
    linear-gradient(
      135deg,
      rgba(18, 46, 68, 0.88),
      rgba(70, 35, 105, 0.82)
    ) !important;

  box-shadow:
    inset 0 0 18px rgba(0, 220, 255, 0.035),
    0 0 12px rgba(167, 124, 255, 0.10) !important;

  text-shadow:
    0 0 8px rgba(220, 210, 255, 0.22) !important;

  transition:
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease,
    background .22s ease !important;
}

.home-screen a[href="/arcade/games/"]:hover,
.home-screen a[href="games/"]:hover,
.home-screen a[href="./games/"]:hover {
  color: #ffffff !important;

  border-color: #a77cff !important;

  background:
    linear-gradient(
      135deg,
      rgba(13, 77, 96, 0.96),
      rgba(104, 42, 132, 0.94)
    ) !important;

  box-shadow:
    0 0 10px rgba(0, 225, 255, 0.18),
    0 0 22px rgba(167, 124, 255, 0.26),
    inset 0 0 20px rgba(255,255,255,0.025) !important;

  transform: translateY(-2px);
}

/* END HOMEPAGE INTRO + GAME LIBRARY COLOR V41 */

/* HOMEPAGE SECONDARY CONTENT V42 */

/* Subtitle below NEON ARCADE */
.home-screen h1 + p {
  color: #cbd3e6 !important;

  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.025em !important;

  text-shadow:
    0 0 12px rgba(141, 112, 255, 0.12),
    0 0 22px rgba(70, 210, 255, 0.06) !important;
}


/* GAME LIBRARY */
.home-screen a[href="/arcade/games/"],
.home-screen a[href="games/"],
.home-screen a[href="./games/"] {
  position: relative !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;

  min-width: 176px !important;
  min-height: 52px !important;
  padding: 0 24px !important;

  color: #dcd8ff !important;

  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;

  border: 1px solid rgba(145, 123, 255, 0.58) !important;

  background:
    linear-gradient(
      135deg,
      rgba(20, 32, 48, 0.76),
      rgba(39, 27, 61, 0.82)
    ) !important;

  box-shadow:
    inset 0 0 22px rgba(95, 190, 255, 0.025),
    0 0 14px rgba(145, 123, 255, 0.08) !important;

  text-shadow:
    0 0 8px rgba(173, 151, 255, 0.24) !important;

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    color .2s ease,
    background .2s ease !important;
}


/* Small arcade arrow */
.home-screen a[href="/arcade/games/"]::after,
.home-screen a[href="games/"]::after,
.home-screen a[href="./games/"]::after {
  content: "›";
  color: #62e8ff;
  font-size: 20px;
  line-height: 1;
  font-weight: 400;

  text-shadow:
    0 0 8px rgba(98, 232, 255, 0.55);
}


/* Hover */
.home-screen a[href="/arcade/games/"]:hover,
.home-screen a[href="games/"]:hover,
.home-screen a[href="./games/"]:hover {
  color: #ffffff !important;

  border-color: #8eeaff !important;

  background:
    linear-gradient(
      135deg,
      rgba(17, 58, 76, 0.90),
      rgba(71, 38, 100, 0.90)
    ) !important;

  box-shadow:
    0 0 12px rgba(94, 226, 255, 0.16),
    0 0 24px rgba(157, 112, 255, 0.18),
    inset 0 0 18px rgba(255,255,255,0.025) !important;

  transform: translateY(-2px);
}

/* END HOMEPAGE SECONDARY CONTENT V42 */

/* UNIFIED PAGE DESIGN V45 */

/* =========================================================
   GAMES TITLE STYLE = MASTER STYLE
   Games / Labs / About krijgen exact dezelfde hiërarchie.
   ========================================================= */

.section-screen > .section-title {
  max-width: 900px !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.section-screen > .section-title > span {
  display: block !important;

  margin: 0 0 10px !important;

  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .15em !important;

  color: #ffbd31 !important;

  text-shadow:
    0 0 8px rgba(255, 181, 46, .28) !important;
}

/* Alle hoofdtitels gelijk aan Choose your game */
.section-screen > .section-title h1 {
  margin: 0 !important;
  padding: 0 !important;

  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: clamp(30px, 3.2vw, 44px) !important;
  font-weight: 820 !important;
  line-height: 1.04 !important;
  letter-spacing: -.045em !important;

  color: #fff7e9 !important;

  text-shadow:
    0 0 10px rgba(255, 245, 225, .13),
    0 0 22px rgba(167, 124, 255, .055) !important;
}

.section-screen > .section-title h1::after {
  content: none !important;
  display: none !important;
}

.section-screen > .section-title p {
  margin: 14px 0 0 !important;

  max-width: 720px !important;

  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;

  color: rgba(220, 226, 237, .80) !important;
}


/* =========================================================
   GAMES
   Laat de Neon Arena machine met rust.
   Alleen positionering / titel consequent houden.
   ========================================================= */

.section-screen:has(> .games-machine-zone) > .section-title {
  margin-bottom: 26px !important;
}

.section-screen:has(> .games-machine-zone) > .games-machine-zone {
  margin-top: 0 !important;
}


/* =========================================================
   LABS — volledig opnieuw uitlijnen
   ========================================================= */

/*
   De bestaande wrapper met .lab-status en .lab-tile wordt
   een nette 2-koloms layout.
*/
.section-screen:has(.lab-status) > :has(> .lab-status):has(> .lab-tile) {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1.42fr)
    minmax(320px, .82fr) !important;

  grid-template-rows: repeat(3, auto) !important;

  column-gap: 24px !important;
  row-gap: 12px !important;

  align-items: stretch !important;

  margin: 0 !important;
}


/* Hoofdkaart links */
.section-screen:has(.lab-status) .lab-status {
  grid-column: 1 !important;
  grid-row: 1 / 4 !important;

  min-height: 0 !important;
  height: auto !important;

  padding: 26px 28px 28px !important;

  border: 1px solid rgba(128, 142, 169, .18) !important;
  border-top: 2px solid rgba(255, 181, 46, .72) !important;

  background:
    linear-gradient(
      145deg,
      rgba(9, 13, 22, .72),
      rgba(7, 10, 18, .55)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018),
    0 16px 42px rgba(0,0,0,.08) !important;
}


/* PROJECT STATUS + IN DEVELOPMENT op één rustige regel */
.section-screen:has(.lab-status) .lab-status > :first-child {
  margin: 0 0 28px !important;
}


/* NEXT EXPERIMENT */
.section-screen:has(.lab-status) .lab-status h2 {
  margin: 0 0 30px !important;

  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: clamp(28px, 2.7vw, 39px) !important;
  font-weight: 820 !important;
  line-height: 1.04 !important;
  letter-spacing: -.04em !important;

  color: #fff7e9 !important;

  text-shadow:
    0 0 10px rgba(255,245,225,.10) !important;
}


/* Beschrijving */
.section-screen:has(.lab-status) .lab-status p {
  max-width: 610px !important;

  margin: 0 0 30px !important;

  font-size: 15px !important;
  line-height: 1.7 !important;

  color: rgba(220, 226, 237, .80) !important;
}


/* Button */
.section-screen:has(.lab-status) .lab-status a {
  display: inline-flex !important;
  align-items: center !important;

  width: fit-content !important;
  min-height: 44px !important;

  padding: 0 18px !important;

  font-size: 11px !important;

  border-color: rgba(255,181,46,.50) !important;

  background:
    rgba(255,181,46,.018) !important;

  box-shadow:
    0 0 11px rgba(255,181,46,.05) !important;
}


/* =========================================================
   LABS RIGHT SIDE
   Drie compacte, exact gelijk uitgelijnde stappen
   ========================================================= */

.section-screen:has(.lab-status) .lab-tile {
  grid-column: 2 !important;

  display: grid !important;
  grid-template-columns: 44px 1fr !important;
  grid-template-rows: auto auto !important;

  align-content: center !important;

  min-height: 94px !important;
  height: auto !important;

  padding: 18px 22px !important;

  margin: 0 !important;

  border: 1px solid rgba(128,142,169,.16) !important;

  background:
    linear-gradient(
      145deg,
      rgba(9,13,22,.70),
      rgba(7,10,18,.54)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.015) !important;
}


/* 01 / 02 / 03 */
.section-screen:has(.lab-status) .lab-tile > :first-child {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;

  align-self: start !important;

  margin: 2px 0 0 !important;

  font-size: 13px !important;
  font-weight: 600 !important;

  color: #b894ff !important;
}


/* BUILD / TEST / RELEASE */
.section-screen:has(.lab-status) .lab-tile strong {
  grid-column: 2 !important;

  margin: 0 !important;

  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 720 !important;
  letter-spacing: -.01em !important;

  color: #fff7e9 !important;
}


/* Kleine uitleg */
.section-screen:has(.lab-status) .lab-tile p {
  grid-column: 2 !important;

  margin: 7px 0 0 !important;

  font-size: 12px !important;
  line-height: 1.5 !important;

  color: rgba(205,214,229,.68) !important;
}


/* De drie accentkleuren */
.section-screen:has(.lab-status) .lab-tile:nth-of-type(1) {
  border-top: 2px solid #ffb52e !important;
}

.section-screen:has(.lab-status) .lab-tile:nth-of-type(2) {
  border-top: 2px solid #a77cff !important;
}

.section-screen:has(.lab-status) .lab-tile:nth-of-type(3) {
  border-top: 2px solid #9fe870 !important;
}


/* =========================================================
   ABOUT
   Zelfde titelstijl als Games.
   Inhoud rustiger en labels netjes boven hun titel.
   ========================================================= */

.section-screen:has(.about-block) > .section-title {
  margin-bottom: 28px !important;
}

.section-screen:has(.about-block) > :has(> .about-block) {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(320px, .88fr) !important;

  gap: 24px !important;

  align-items: stretch !important;

  margin: 0 !important;
}


.section-screen:has(.about-block) .about-block {
  min-height: 0 !important;
  height: auto !important;

  padding: 26px 28px 28px !important;

  background:
    linear-gradient(
      145deg,
      rgba(9,13,22,.70),
      rgba(7,10,18,.54)
    ) !important;

  border: 1px solid rgba(128,142,169,.17) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.015) !important;
}


/* THE ARCADE / BEHIND THE SCREEN */
.section-screen:has(.about-block) .about-block > :first-child {
  display: block !important;

  margin: 0 0 20px !important;

  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .15em !important;

  color: #ffbd31 !important;
}


/* Kaarttitels */
.section-screen:has(.about-block) .about-block h2 {
  margin: 0 0 24px !important;

  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: clamp(28px, 2.7vw, 39px) !important;
  font-weight: 820 !important;
  line-height: 1.04 !important;
  letter-spacing: -.04em !important;

  color: #fff7e9 !important;

  text-shadow:
    0 0 10px rgba(255,245,225,.10) !important;
}


/* About tekst */
.section-screen:has(.about-block) .about-block p {
  margin: 0 !important;

  font-size: 15px !important;
  line-height: 1.7 !important;

  color: rgba(220,226,237,.80) !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

  .section-screen:has(.lab-status) > :has(> .lab-status):has(> .lab-tile),
  .section-screen:has(.about-block) > :has(> .about-block) {
    grid-template-columns: 1fr !important;
  }

  .section-screen:has(.lab-status) .lab-status,
  .section-screen:has(.lab-status) .lab-tile {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* END UNIFIED PAGE DESIGN V45 */







/* =========================================================
   EXACT SHARED PAGE HEADERS V49
   GAMES = MASTER FOR GAMES / LABS / ABOUT
   ========================================================= */

/* Alle drie pagina's beginnen hun titel op exact dezelfde plek */
.section-screen {
  padding-top: 58px !important;
}


/* Exact hetzelfde titelvak op iedere pagina */
.section-screen > .section-title {
  position: relative !important;

  width: 100% !important;
  max-width: 900px !important;

  margin: 0 0 48px 0 !important;
  padding: 0 !important;

  border: 0 !important;
  box-shadow: none !important;

  transform: none !important;
  translate: none !important;

  text-align: left !important;
}


/* GELE TITEL
   GAME LIBRARY / LABS / ABOUT NEON ARCADE
*/
.section-screen > .section-title > span {
  display: block !important;

  margin: 0 0 12px 0 !important;
  padding: 0 !important;

  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-style: normal !important;

  line-height: 14px !important;
  letter-spacing: 0.15em !important;

  color: #ffbd31 !important;

  text-shadow:
    0 0 6px rgba(255, 181, 46, 0.38),
    0 0 14px rgba(255, 181, 46, 0.16) !important;
}


/* WITTE TITEL
   Choose your game / Experiments / Small arcade. Bright ideas.
*/
.section-screen > .section-title > h1 {
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 42px !important;
  font-weight: 820 !important;
  font-style: normal !important;

  line-height: 1 !important;
  letter-spacing: -0.045em !important;

  color: #fff7e9 !important;

  text-shadow:
    0 0 9px rgba(255, 247, 233, 0.16),
    0 0 20px rgba(255, 247, 233, 0.06) !important;
}


/* Oude decoratieve titelstrepen definitief uit */
.section-screen > .section-title > h1::before,
.section-screen > .section-title > h1::after {
  content: none !important;
  display: none !important;
}


/* Eventuele ondertekst mag de positie van geel/wit niet beïnvloeden */
.section-screen > .section-title > p {
  margin: 16px 0 0 0 !important;
  padding: 0 !important;

  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;

  line-height: 1.6 !important;
  letter-spacing: 0 !important;
}


/* Games had nog losse positie-overrides: uitschakelen */
.section-screen:has(> .games-machine-zone) > .section-title {
  margin-top: 0 !important;
  margin-bottom: 48px !important;

  transform: none !important;
  translate: none !important;
}


/* Zelfde titelpositie voor Labs */
.section-screen:has(.lab-status) > .section-title {
  margin-top: 0 !important;
  margin-bottom: 48px !important;

  transform: none !important;
  translate: none !important;
}


/* Zelfde titelpositie voor About */
.section-screen:has(.about-block) > .section-title {
  margin-top: 0 !important;
  margin-bottom: 48px !important;

  transform: none !important;
  translate: none !important;
}


/* Mobiel mag kleiner, maar blijft onderling exact gelijk */
@media (max-width: 760px) {
  .section-screen {
    padding-top: 34px !important;
  }

  .section-screen > .section-title > h1 {
    font-size: 34px !important;
  }

  .section-screen > .section-title > span {
    font-size: 13px !important;
    line-height: 13px !important;
  }
}

/* END EXACT SHARED PAGE HEADERS V49 */

/* EXACT SHARED PAGE HEADERS V50
   GAMES is de vaste master voor GAMES / LABS / ABOUT.
*/

@media (min-width: 901px) {

  /*
     Reserveer op iedere pagina exact dezelfde ruimte bovenin.
     Het titelblok krijgt daarna een vaste positie.
  */
  .section-screen {
    position: relative !important;
    padding-top: 172px !important;
  }


  /*
     GAME LIBRARY / LABS / ABOUT NEON ARCADE
     + de witte titel staan op ALLE pagina's exact op dezelfde plek.
  */
  .section-screen:has(> .games-machine-zone) > .section-title,
  .section-screen:has(.lab-status) > .section-title,
  .section-screen:has(.about-block) > .section-title {
    position: absolute !important;

    top: 38px !important;
    left: 0 !important;
    right: auto !important;

    width: 900px !important;
    max-width: 900px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
    translate: none !important;

    border: 0 !important;
    box-shadow: none !important;

    text-align: left !important;
  }


  /* ---------------------------------------------------------
     GELE KOP
     GAME LIBRARY / LABS / ABOUT NEON ARCADE
     --------------------------------------------------------- */

  .section-screen:has(> .games-machine-zone) > .section-title > span,
  .section-screen:has(.lab-status) > .section-title > span,
  .section-screen:has(.about-block) > .section-title > span {
    display: block !important;

    margin: 0 0 13px 0 !important;
    padding: 0 !important;

    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-style: normal !important;

    line-height: 1 !important;
    letter-spacing: .15em !important;

    color: #ffbd31 !important;

    text-shadow:
      0 0 6px rgba(255, 181, 46, .42),
      0 0 14px rgba(255, 181, 46, .17) !important;
  }


  /* ---------------------------------------------------------
     WITTE TITEL
     Choose your game / Experiments /
     Small arcade. Bright ideas.
     --------------------------------------------------------- */

  .section-screen:has(> .games-machine-zone) > .section-title > h1,
  .section-screen:has(.lab-status) > .section-title > h1,
  .section-screen:has(.about-block) > .section-title > h1 {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family: "Segoe UI", Arial, sans-serif !important;

    font-size: 42px !important;
    font-weight: 820 !important;
    font-style: normal !important;

    line-height: 1 !important;
    letter-spacing: -.045em !important;

    color: #fff7e9 !important;

    text-shadow:
      0 0 9px rgba(255, 247, 233, .16),
      0 0 20px rgba(255, 247, 233, .06) !important;
  }


  /* Oude decoratieve titelregels uitzetten */
  .section-screen > .section-title > h1::before,
  .section-screen > .section-title > h1::after {
    content: none !important;
    display: none !important;
  }


  /*
     LABS en ABOUT hebben nog een ondertekst.
     Die mag NIET de positie van geel/wit beïnvloeden.
  */
  .section-screen:has(.lab-status) > .section-title > p,
  .section-screen:has(.about-block) > .section-title > p {
    margin: 16px 0 0 0 !important;
    padding: 0 !important;

    max-width: 720px !important;

    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;

    color: rgba(220, 226, 237, .78) !important;
  }
}


/* Mobiel: onderling ook identiek, maar niet absoluut positioneren */
@media (max-width: 900px) {

  .section-screen > .section-title {
    position: relative !important;
    top: auto !important;
    left: auto !important;

    margin: 0 0 36px !important;
  }

  .section-screen > .section-title > span {
    font-size: 14px !important;
  }

  .section-screen > .section-title > h1 {
    font-size: 34px !important;
  }
}

/* END EXACT SHARED PAGE HEADERS V50 */

/* SHARED PAGE HEADER POSITION V51
   Games / Labs / About exact evenveel naar beneden.
*/

@media (min-width: 901px) {

  .section-screen:has(> .games-machine-zone) > .section-title,
  .section-screen:has(.lab-status) > .section-title,
  .section-screen:has(.about-block) > .section-title {
    top: 64px !important;
  }

}

/* END SHARED PAGE HEADER POSITION V51 */

/* REMOVE LABS + ABOUT HEADER SUBTEXT V52 */

/* Verberg alleen de tekst onder Experiments en Small arcade. Bright ideas. */
.section-screen:has(.lab-status) > .section-title > p,
.section-screen:has(.about-block) > .section-title > p {
  display: none !important;
}

/* END REMOVE LABS + ABOUT HEADER SUBTEXT V52 */


/* PLAYER DETECTED STATUS DOT */
.home-screen .marquee-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.home-screen .detected-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  top: -1px;

  background: #9cff57;
  box-shadow:
    0 0 4px rgba(156, 255, 87, 0.95),
    0 0 10px rgba(156, 255, 87, 0.85),
    0 0 18px rgba(156, 255, 87, 0.55);

  animation: detectedPulse 1.2s ease-in-out infinite;
}

@keyframes detectedPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow:
      0 0 4px rgba(156, 255, 87, 0.95),
      0 0 10px rgba(156, 255, 87, 0.85),
      0 0 18px rgba(156, 255, 87, 0.55);
  }

  50% {
    opacity: 0.45;
    transform: scale(0.86);
    box-shadow:
      0 0 2px rgba(156, 255, 87, 0.75),
      0 0 6px rgba(156, 255, 87, 0.55),
      0 0 10px rgba(156, 255, 87, 0.35);
  }
}
/* END PLAYER DETECTED STATUS DOT */

/* PLAYER DETECTED POLISH V53 */

/* Hele regel iets kleiner, iets naar links en iets omhoog */
.home-screen .marquee-tag {
  font-size: 14px !important;
  letter-spacing: 0.16em !important;

  gap: 7px !important;

  transform: translate(-18px, -10px) !important;
  width: max-content !important;
}


/* Klein maar ZEER duidelijk knipperend groen detectielampje */
.home-screen .detected-status-dot {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;

  border-radius: 50% !important;

  background: #9cff57 !important;

  /* Hard aan/uit knipperen i.p.v. langzaam pulseren */
  animation: playerDetectedBlink 0.9s steps(1, end) infinite !important;

  will-change: opacity, box-shadow, transform;
}


/* Duidelijk twee standen: FEL AAN en bijna UIT */
@keyframes playerDetectedBlink {

  0%,
  44% {
    opacity: 1;

    transform: scale(1.08);

    background: #a6ff62;

    box-shadow:
      0 0 4px #9cff57,
      0 0 9px #9cff57,
      0 0 17px rgba(156, 255, 87, 0.95),
      0 0 28px rgba(156, 255, 87, 0.50);
  }

  45%,
  100% {
    opacity: 0.12;

    transform: scale(0.80);

    background: #397326;

    box-shadow:
      0 0 2px rgba(156, 255, 87, 0.18);
  }
}

/* END PLAYER DETECTED POLISH V53 */

/* PLAYER DETECTED ALIGNMENT V54 */

/* Exact uitlijnen met de linkerkant van NEON ARCADE */
.home-screen .marquee-tag {
  transform: translate(0, -10px) !important;

  /* Zelf bepalen hoeveel ruimte rond het lampje zit */
  gap: 0 !important;
}

/* Lampje dicht tegen DETECTED, meer ruimte richting WELCOME */
.home-screen .detected-status-dot {
  margin-left: 5px !important;
  margin-right: 11px !important;

  flex: 0 0 auto !important;
}

/* END PLAYER DETECTED ALIGNMENT V54 */

/* PLAYER DETECTED SIZE + GLOW V55 */

/* Hele systeemmelding duidelijker en iets groter */
.home-screen .marquee-tag {
  font-size: 16px !important;
  font-weight: 750 !important;
  letter-spacing: 0.15em !important;
  line-height: 1 !important;

  color: #ffc132 !important;

  text-shadow:
    0 0 5px rgba(255, 193, 50, 0.80),
    0 0 11px rgba(255, 181, 46, 0.48),
    0 0 20px rgba(255, 181, 46, 0.18) !important;

  /* huidige perfecte positie behouden */
  transform: translate(0, -10px) !important;
}


/* Groen detectielampje iets groter laten meegroeien */
.home-screen .detected-status-dot {
  width: 9px !important;
  height: 9px !important;
  min-width: 9px !important;

  margin-left: 5px !important;
  margin-right: 11px !important;
}

/* END PLAYER DETECTED SIZE + GLOW V55 */

/* SHARPER NEON TEXT + DETECTION LIGHT V56 */

/* ---------------------------------------------------------
   PLAYER DETECTED — scherpere letters, compacte neon-gloed
   --------------------------------------------------------- */
.home-screen .marquee-tag {
  color: #ffc43d !important;

  text-shadow:
    0 0 1px #ffd86a,
    0 0 3px rgba(255, 196, 61, 0.90),
    0 0 7px rgba(255, 181, 46, 0.45),
    0 0 12px rgba(255, 181, 46, 0.18) !important;

  -webkit-font-smoothing: antialiased;
}


/* ---------------------------------------------------------
   GROEN DETECTIELAMPJE — scherpe kern + duidelijke blink
   --------------------------------------------------------- */
.home-screen .detected-status-dot {
  width: 9px !important;
  height: 9px !important;
  min-width: 9px !important;

  border: 1px solid rgba(215, 255, 190, 0.95) !important;

  animation: playerDetectedSharpBlink 0.9s steps(1, end) infinite !important;
}


@keyframes playerDetectedSharpBlink {

  0%,
  44% {
    opacity: 1 !important;
    transform: scale(1) !important;

    background: #91ff4f !important;

    box-shadow:
      0 0 1px #e8ffd8,
      0 0 3px #91ff4f,
      0 0 7px rgba(145, 255, 79, 0.85),
      0 0 12px rgba(145, 255, 79, 0.40) !important;
  }

  45%,
  100% {
    opacity: 0.20 !important;
    transform: scale(0.88) !important;

    background: #315c22 !important;
    border-color: rgba(120, 190, 90, 0.35) !important;

    box-shadow:
      0 0 1px rgba(145, 255, 79, 0.22) !important;
  }
}


/* ---------------------------------------------------------
   GROTE NEON ARCADE — scherpe letterkern + gecontroleerde glow
   --------------------------------------------------------- */
.home-screen h1 {
  color: #ffd45c !important;

  text-shadow:
    0 0 1px #fff1ae,
    0 0 3px rgba(255, 220, 105, 0.95),
    0 0 7px rgba(255, 193, 48, 0.72),
    0 0 14px rgba(255, 181, 46, 0.38),
    0 0 24px rgba(255, 181, 46, 0.16) !important;

  -webkit-font-smoothing: antialiased;
}

/* END SHARPER NEON TEXT + DETECTION LIGHT V56 */

/* =========================================================
   HARD SHARP NEON V57
   Duidelijk grotere stap dan V56
   ========================================================= */


/* PLAYER DETECTED / WELCOME TO */
.home-screen .marquee-tag {
  color: #ffd34f !important;

  /* scherpe gele letterkern */
  -webkit-text-stroke: 0.35px rgba(255, 245, 190, 0.95) !important;

  text-shadow:
    0 0 1px #fff4ba,
    0 0 2px #ffc83d,
    0 0 4px rgba(255, 185, 35, 0.70),
    0 0 8px rgba(255, 170, 20, 0.30) !important;

  filter: none !important;
}


/* GROENE STATUS LED */
.home-screen .detected-status-dot {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;

  border: 2px solid #d8ffc0 !important;
  background: #7dff3b !important;

  box-shadow:
    0 0 1px #ffffff,
    0 0 3px #7dff3b,
    0 0 7px rgba(125, 255, 59, 0.90) !important;

  animation: detectedHardBlink 0.72s steps(1, end) infinite !important;
}


/* ECHT zichtbaar knipperen */
@keyframes detectedHardBlink {

  0%,
  47% {
    opacity: 1 !important;

    background: #8dff47 !important;
    border-color: #e4ffd2 !important;

    box-shadow:
      0 0 1px #ffffff,
      0 0 3px #9cff57,
      0 0 7px #75ff2d,
      0 0 13px rgba(117, 255, 45, 0.72) !important;
  }

  48%,
  100% {
    opacity: 0.08 !important;

    background: #18380e !important;
    border-color: #315c25 !important;

    box-shadow: none !important;
  }
}


/* GROTE NEON ARCADE */
.home-screen h1 {
  color: #ffd55c !important;

  /* duidelijk scherpere letterrand */
  -webkit-text-stroke: 0.65px rgba(255, 242, 170, 0.95) !important;

  text-shadow:
    0 0 1px #fff6c4,
    0 0 2px #ffd35b,
    0 0 4px rgba(255, 190, 35, 0.88),
    0 0 8px rgba(255, 174, 20, 0.58),
    0 0 14px rgba(255, 160, 10, 0.25) !important;

  filter: none !important;
}


/* END HARD SHARP NEON V57 */

/* =========================================================
   SHARP PLAYER DETECTED + CLEAR BLINK V58
   Alleen de bovenste gele regel en het groene lampje
   ========================================================= */

.home-screen .marquee-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;

  color: #ffd24a !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.1 !important;

  /* scherper maken */
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: geometricPrecision !important;
  filter: none !important;

  /* veel minder wazige glow, meer scherpe kern */
  text-shadow:
    0 0 0 rgba(0,0,0,0),
    0 0 1px rgba(255, 242, 186, 0.95),
    0 0 2px rgba(255, 210, 74, 0.65),
    0 0 4px rgba(255, 190, 40, 0.28) !important;
}

.home-screen .detected-status-dot {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  border-radius: 50% !important;

  margin-left: -2px !important;
  margin-right: 2px !important;
  vertical-align: middle !important;

  background: #8dff45 !important;
  border: 1px solid #dffff0 !important;
  filter: none !important;

  box-shadow:
    0 0 2px rgba(141, 255, 69, 0.95),
    0 0 6px rgba(141, 255, 69, 0.75),
    0 0 10px rgba(141, 255, 69, 0.45) !important;

  /* heel duidelijk knipperen */
  animation: detectedBlinkV58 0.8s steps(1, end) infinite !important;
}

@keyframes detectedBlinkV58 {
  0%, 44% {
    opacity: 1;
    background: #8dff45;
    box-shadow:
      0 0 2px rgba(141, 255, 69, 1),
      0 0 6px rgba(141, 255, 69, 0.85),
      0 0 10px rgba(141, 255, 69, 0.55);
    transform: scale(1);
  }

  45%, 100% {
    opacity: 0.12;
    background: #27451c;
    box-shadow:
      0 0 1px rgba(141, 255, 69, 0.15);
    transform: scale(0.92);
  }
}

/* extra zekerheid dat alleen de home-topline wordt aangesproken */
.home-screen .marquee-tag,
.home-screen .marquee-tag * {
  backface-visibility: hidden;
}

/* END SHARP PLAYER DETECTED + CLEAR BLINK V58 */

/* =========================================================
   PLAYER DETECTED TUNE V59
   - grotere groene statusdot
   - oude warmere arcade-geel terug
   ========================================================= */

.home-screen .marquee-tag {
  color: #ffbf2f !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.1 !important;

  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: geometricPrecision !important;

  text-shadow:
    0 0 1px rgba(255, 244, 201, 0.95),
    0 0 3px rgba(255, 191, 47, 0.60),
    0 0 6px rgba(255, 166, 0, 0.24) !important;
}

.home-screen .detected-status-dot {
  width: 11px !important;
  height: 11px !important;
  min-width: 11px !important;
  border-radius: 50% !important;

  margin-left: -1px !important;
  margin-right: 4px !important;
  vertical-align: middle !important;

  background: #8fff45 !important;
  border: 1px solid rgba(232, 255, 238, 0.95) !important;

  box-shadow:
    0 0 3px rgba(143, 255, 69, 1),
    0 0 8px rgba(143, 255, 69, 0.90),
    0 0 14px rgba(143, 255, 69, 0.55) !important;

  animation: detectedBlinkV59 0.85s steps(1, end) infinite !important;
}

@keyframes detectedBlinkV59 {
  0%, 48% {
    opacity: 1;
    background: #8fff45;
    box-shadow:
      0 0 3px rgba(143, 255, 69, 1),
      0 0 8px rgba(143, 255, 69, 0.90),
      0 0 14px rgba(143, 255, 69, 0.55);
    transform: scale(1);
  }

  49%, 100% {
    opacity: 0.18;
    background: #365726;
    box-shadow:
      0 0 2px rgba(143, 255, 69, 0.20);
    transform: scale(0.92);
  }
}

/* END PLAYER DETECTED TUNE V59 */

/* Extra ruimte tussen groen lampje en "WELCOME TO..." */
.home-screen .detected-status-dot {
  margin-right: 10px !important;
}


/* =========================================================
   HOMEPAGE HERO ALIGNMENT + SPACING V60
   ========================================================= */

/* PLAYER DETECTED iets naar rechts zodat hij optisch
   mooier uitlijnt met NEON ARCADE */
.home-screen .marquee-tag {
  margin-left: 10px !important;
  margin-bottom: 26px !important;
}


/* Meer ademruimte onder de grote NEON ARCADE titel */
.home-screen .marquee-tag ~ h1 {
  margin-bottom: 36px !important;
}


/* Meer ruimte onder de beschrijvende tekst */
.home-screen .marquee-tag ~ p {
  margin-top: 0 !important;
  margin-bottom: 36px !important;
}


/* GAME LIBRARY knop netjes los van de tekst erboven */
.home-screen .marquee-tag ~ a {
  margin-top: 0 !important;
}


/* END HOMEPAGE HERO ALIGNMENT + SPACING V60 */

/* =========================================================
   HOMEPAGE LUXURY DETAILS V61
   ========================================================= */

/* PLAYER DETECTED heel klein beetje terug naar links */
.home-screen .marquee-tag {
  margin-left: 2px !important;
}


/* ---------------------------------------------------------
   Tagline — rustiger, scherper en luxer
   --------------------------------------------------------- */

.home-screen .home-luxury-tagline {
  width: max-content;
  max-width: 100%;

  color: #c9d2e7 !important;

  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  letter-spacing: 0.025em !important;

  text-shadow:
    0 0 8px rgba(151, 124, 255, 0.12),
    0 0 13px rgba(55, 218, 255, 0.06) !important;

  opacity: 0.94;

  position: relative;
}


/* klein subtiel lichtaccent links onder de zin */
.home-screen .home-luxury-tagline::after {
  content: "";
  display: block;

  width: 72px;
  height: 1px;

  margin-top: 12px;

  background: linear-gradient(
    90deg,
    rgba(255, 181, 46, 0.75),
    rgba(167, 124, 255, 0.55),
    rgba(46, 218, 255, 0)
  );

  box-shadow:
    0 0 6px rgba(255, 181, 46, 0.16),
    0 0 8px rgba(167, 124, 255, 0.10);
}


/* ---------------------------------------------------------
   GAME LIBRARY — luxe dark-glass arcade button
   --------------------------------------------------------- */

.home-screen .home-library-button {
  position: relative !important;
  isolation: isolate;
  overflow: hidden;

  min-width: 190px;

  padding: 17px 22px !important;

  border: 1px solid rgba(255, 187, 46, 0.50) !important;
  border-radius: 1px !important;

  background:
    linear-gradient(
      115deg,
      rgba(255, 183, 42, 0.045) 0%,
      rgba(121, 91, 205, 0.055) 52%,
      rgba(23, 192, 226, 0.075) 100%
    ),
    rgba(6, 10, 18, 0.80) !important;

  color: #e9e8ff !important;

  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 650 !important;

  letter-spacing: 0.15em !important;

  box-shadow:
    inset 0 0 18px rgba(75, 118, 180, 0.025),
    0 0 12px rgba(255, 181, 46, 0.035) !important;

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease,
    background 180ms ease !important;
}


/* subtiele glans over de knop */
.home-screen .home-library-button::before {
  content: "";
  position: absolute;
  inset: 0;

  z-index: -1;
  pointer-events: none;

  background: linear-gradient(
    105deg,
    transparent 25%,
    rgba(255, 255, 255, 0.055) 48%,
    transparent 70%
  );

  transform: translateX(-75%);
  transition: transform 500ms ease;
}


/* hover: luxe maar niet overdreven */
.home-screen .home-library-button:hover {
  transform: translateY(-2px);

  border-color: rgba(71, 220, 255, 0.72) !important;

  background:
    linear-gradient(
      115deg,
      rgba(255, 183, 42, 0.065) 0%,
      rgba(136, 87, 224, 0.10) 55%,
      rgba(22, 208, 242, 0.12) 100%
    ),
    rgba(7, 11, 20, 0.88) !important;

  box-shadow:
    0 0 8px rgba(255, 181, 46, 0.11),
    0 0 15px rgba(51, 211, 255, 0.12),
    inset 0 0 20px rgba(151, 124, 255, 0.035) !important;
}

.home-screen .home-library-button:hover::before {
  transform: translateX(75%);
}


/* END HOMEPAGE LUXURY DETAILS V61 */

/* =========================================================
   SHARED PAGE TITLES SLIGHTLY LOWER V62
   Games / Labs / About exact gelijk
   ========================================================= */

@media (min-width: 901px) {
  .section-screen > .section-title {
    transform: translateY(10px) !important;
  }
}

/* END SHARED PAGE TITLES SLIGHTLY LOWER V62 */

/* SHARED PAGE TITLES LOWER V63 */
@media (min-width: 901px) {
  .section-screen > .section-title {
    transform: translateY(18px) !important;
  }
}
/* END SHARED PAGE TITLES LOWER V63 */