@font-face {
  font-family: "Pixelify Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/pixelify-regular.ttf") format("truetype");
}

@font-face {
  font-family: "Pixelify Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/pixelify-bold.ttf") format("truetype");
}

@font-face {
  font-family: "Silkscreen";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/silkscreen-regular.ttf") format("truetype");
}

@font-face {
  font-family: "Silkscreen";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/silkscreen-bold.ttf") format("truetype");
}

:root {
  color-scheme: dark;
  --arcade-ratio: calc(1672 / 941);
  --arcade-unit: min(calc(100vw / 1672), calc(100svh / 941));
  --arcade-pan-x: 0px;
  --arcade-pan-y: 0px;
  --arcade-backdrop-pan-x: 0px;
  --arcade-backdrop-pan-y: 0px;
  --arcade-edge-fade: 5%;
  --amber: #ffb13b;
  --amber-soft: #ffd080;
  --amber-dark: #7b3b12;
  --lime: #b9ff35;
  --cyan: #28dfea;
  --ink: #050403;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  margin: 0;
}

body {
  position: relative;
  display: grid;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  place-items: center;
  background: #030201;
  font-family: "Silkscreen", "Pixelify Sans", "Courier New", monospace;
}

body::before,
body::after {
  position: fixed;
  content: "";
  pointer-events: none;
}

body::before {
  inset: -12vmax;
  z-index: 0;
  background: url("/assets/workspace-arcade/workspace-arcade-room-empty-v1.png") center / cover no-repeat;
  filter: blur(clamp(28px, 4.5vw, 72px)) brightness(0.42) saturate(0.64);
  opacity: 0.92;
  transform: translate3d(var(--arcade-backdrop-pan-x), var(--arcade-backdrop-pan-y), 0) scale(1.1);
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}

body::after {
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      #030201 0%,
      rgba(3, 2, 1, 0.92) 11%,
      rgba(3, 2, 1, 0.5) 27%,
      rgba(3, 2, 1, 0.5) 73%,
      rgba(3, 2, 1, 0.92) 89%,
      #030201 100%
    ),
    radial-gradient(circle at center, transparent 38%, rgba(0, 0, 0, 0.3) 100%);
}

button,
a {
  font: inherit;
}

button {
  border: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.arcade-stage {
  position: relative;
  z-index: 2;
  width: min(100vw, calc(100svh * var(--arcade-ratio)));
  height: min(100svh, calc(100vw / var(--arcade-ratio)));
  flex: none;
  overflow: hidden;
  isolation: isolate;
  background: #050302;
  box-shadow: 0 0 clamp(28px, 8vmin, 104px) rgba(0, 0, 0, 0.96);
  color: #fff3db;
  transform: translate3d(var(--arcade-pan-x), var(--arcade-pan-y), 0);
  transition: transform 240ms cubic-bezier(0.18, 0.72, 0.2, 1);
  will-change: transform;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0,
    #000 var(--arcade-edge-fade),
    #000 calc(100% - var(--arcade-edge-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0,
    #000 var(--arcade-edge-fade),
    #000 calc(100% - var(--arcade-edge-fade)),
    transparent 100%
  );
}

.arcade-stage.is-recentering {
  transition-duration: 520ms;
  transition-timing-function: cubic-bezier(0.2, 0.82, 0.24, 1);
}

.arcade-stage::after {
  position: absolute;
  inset: 0;
  z-index: 8;
  background:
    radial-gradient(circle at center, transparent 56%, rgba(0, 0, 0, 0.26) 82%, rgba(0, 0, 0, 0.58) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.34), transparent 8%, transparent 90%, rgba(0, 0, 0, 0.34));
  content: "";
  pointer-events: none;
}

.arcade-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
}

.arcade-lamp-lighting {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.arcade-lamp {
  --lamp-intensity: 0.22;
  position: absolute;
  width: calc(1 * var(--arcade-unit));
  height: calc(1 * var(--arcade-unit));
  opacity: var(--lamp-intensity);
  pointer-events: none;
  transition: opacity 190ms ease-out;
  will-change: opacity;
}

.arcade-lamp--left {
  top: 14.2%;
  left: 4.35%;
}

.arcade-lamp--right {
  top: 14.2%;
  left: 95.65%;
}

.arcade-lamp::before,
.arcade-lamp::after {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  content: "";
  mix-blend-mode: screen;
  pointer-events: none;
}

.arcade-lamp::before {
  width: calc(245 * var(--arcade-unit));
  height: calc(285 * var(--arcade-unit));
  background: radial-gradient(
    ellipse at center,
    rgba(255, 205, 125, 0.3) 0%,
    rgba(255, 145, 42, 0.2) 24%,
    rgba(185, 75, 12, 0.1) 48%,
    transparent 73%
  );
  filter: blur(calc(4 * var(--arcade-unit)));
  transform: translate(-50%, -42%);
}

.arcade-lamp::after {
  width: calc(82 * var(--arcade-unit));
  height: calc(106 * var(--arcade-unit));
  background: radial-gradient(
    ellipse at center,
    rgba(255, 250, 214, 0.88) 0%,
    rgba(255, 194, 91, 0.56) 18%,
    rgba(255, 124, 22, 0.25) 45%,
    transparent 72%
  );
  filter: blur(calc(1.4 * var(--arcade-unit)));
  transform: translate(-50%, -48%);
}

.arcade-lamp-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(17 * var(--arcade-unit));
  height: calc(34 * var(--arcade-unit));
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 239, 0.98) 0%,
    rgba(255, 229, 161, 0.88) 24%,
    rgba(255, 157, 44, 0.48) 58%,
    transparent 78%
  );
  filter: blur(calc(0.35 * var(--arcade-unit)));
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
}

.arcade-machines {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.arcade-machine {
  position: absolute;
  top: 3.75%;
  height: 95.1%;
  margin: 0;
  padding: 0;
  border: 0;
  appearance: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.arcade-machine--left {
  left: 6.2%;
  z-index: 1;
  width: 29.85%;
}

.arcade-machine--center {
  left: 35.7%;
  z-index: 2;
  width: 28.6%;
}

.arcade-machine--right {
  left: 63.95%;
  z-index: 1;
  width: 29.85%;
}

.arcade-machine:hover,
.arcade-machine:focus-visible {
  z-index: 4;
}

.arcade-machine.is-coming-soon {
  cursor: not-allowed;
}

.arcade-cabinet-shell,
.arcade-marquee,
.arcade-screen {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
  transition:
    filter 220ms ease,
    opacity 220ms ease,
    transform 220ms ease;
  -webkit-user-drag: none;
}

.arcade-cabinet-shell {
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: brightness(0.94) saturate(0.9) contrast(1.03);
  transition: filter 240ms ease;
}

.arcade-cabinet-shell--mirrored {
  transform: scaleX(-1);
}

.arcade-marquee {
  top: -0.15%;
  left: -1%;
  z-index: 2;
  width: 102%;
  height: 18.85%;
  object-fit: fill;
  transform-origin: 50% 55%;
}

.arcade-machine--left .arcade-marquee {
  left: -0.6%;
  width: 101.2%;
}

.arcade-machine--center .arcade-marquee {
  left: -1%;
  width: 102%;
}

.arcade-machine--right .arcade-marquee {
  left: -0.6%;
  width: 101.2%;
}

.arcade-machine--watch .arcade-marquee {
  clip-path: inset(16% 6.5% 17% 6.5% round 1%);
  filter: brightness(0.9) saturate(0.92) contrast(1.02);
  animation: watch-marquee-idle-pulse 1.6s ease-in-out infinite;
}

.arcade-machine--assets .arcade-marquee {
  clip-path: inset(18% 6.5% 17% 6.5% round 1%);
  filter: brightness(0.78) saturate(0.78) contrast(1.05);
  animation: unavailable-marquee-failed-ignition 6.6s linear infinite;
}

.arcade-machine--custom .arcade-marquee {
  clip-path: inset(18% 7% 16% 7% round 1%);
  filter: brightness(0.78) saturate(0.78) contrast(1.05);
  animation: unavailable-marquee-failed-ignition 6.6s linear -3.3s infinite;
}

.arcade-machine.is-coming-soon::before,
.arcade-machine.is-coming-soon::after {
  position: absolute;
  top: 4.3%;
  z-index: 3;
  width: 19%;
  height: 8.2%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 202, 116, 0.25) 0%,
    rgba(255, 151, 51, 0.13) 24%,
    rgba(205, 76, 13, 0.045) 48%,
    transparent 76%
  );
  content: "";
  filter: blur(calc(7 * var(--arcade-unit)));
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}

.arcade-machine.is-coming-soon::before {
  left: 7%;
  animation: unavailable-bulb-left 6.6s ease-in-out infinite;
}

.arcade-machine.is-coming-soon::after {
  right: 7%;
  animation: unavailable-bulb-right 6.6s ease-in-out infinite;
}

.arcade-machine--custom.is-coming-soon::before,
.arcade-machine--custom.is-coming-soon::after {
  animation-delay: -3.3s;
}

.arcade-screen {
  top: 22.65%;
  z-index: 2;
  height: 29.75%;
  overflow: hidden;
  border-radius: 9% / 12%;
  background: #020201;
  clip-path: polygon(5% 0, 95% 0, 99% 5%, 100% 92%, 95% 100%, 5% 100%, 0 92%, 1% 6%);
  box-shadow:
    inset 0 0 calc(20 * var(--arcade-unit)) rgba(0, 0, 0, 0.88),
    0 0 calc(5 * var(--arcade-unit)) rgba(255, 133, 38, 0.1);
}

.arcade-screen::before,
.arcade-screen::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  pointer-events: none;
}

.arcade-screen::before {
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.018) 0,
    rgba(255, 255, 255, 0.018) calc(1 * var(--arcade-unit)),
    rgba(0, 0, 0, 0.13) calc(2 * var(--arcade-unit)),
    rgba(0, 0, 0, 0.13) calc(3 * var(--arcade-unit))
  );
  mix-blend-mode: overlay;
}

.arcade-screen::after {
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.35) 100%),
    linear-gradient(110deg, rgba(255, 255, 255, 0.1), transparent 19%, transparent 80%);
  opacity: 0.62;
}

.arcade-screen > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  animation: crt-breathe 5.8s steps(2, end) infinite;
  transform-origin: center;
  transition:
    filter 260ms ease,
    transform 260ms cubic-bezier(0.18, 0.72, 0.2, 1);
}

.arcade-machine.is-coming-soon .arcade-screen > img {
  filter: brightness(0.58) saturate(0.6) contrast(1.04);
}

.arcade-machine--left .arcade-screen {
  left: 12.7%;
  width: 74.8%;
}

.arcade-machine--center .arcade-screen {
  left: 13.7%;
  width: 72.6%;
}

.arcade-machine--right .arcade-screen {
  left: 12.7%;
  width: 74.8%;
}

.arcade-machine-status {
  position: absolute;
  top: 46.25%;
  left: 50%;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--arcade-unit));
  min-width: 60%;
  padding: calc(9 * var(--arcade-unit)) calc(15 * var(--arcade-unit));
  border: calc(1 * var(--arcade-unit)) solid rgba(255, 177, 59, 0.56);
  border-radius: calc(3 * var(--arcade-unit));
  background: rgba(4, 3, 2, 0.87);
  box-shadow:
    inset 0 0 calc(9 * var(--arcade-unit)) rgba(255, 159, 43, 0.08),
    0 0 calc(8 * var(--arcade-unit)) rgba(0, 0, 0, 0.72);
  color: var(--amber-soft);
  font-size: calc(15 * var(--arcade-unit));
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transform: translate(-50%, 0);
  transition:
    color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
  white-space: nowrap;
}

.arcade-machine-status > img {
  display: block;
  width: calc(17 * var(--arcade-unit));
  height: calc(17 * var(--arcade-unit));
  object-fit: contain;
  image-rendering: pixelated;
}

.arcade-machine--assets .arcade-machine-status {
  left: 50.1%;
}

.arcade-machine--custom .arcade-machine-status {
  left: 49.9%;
}

.arcade-machine-status--ready {
  animation: press-start-idle-pulse 3s ease-in-out infinite;
  border-color: rgba(185, 255, 53, 0.52);
  background: rgba(4, 7, 2, 0.88);
  box-shadow:
    inset 0 0 calc(9 * var(--arcade-unit)) rgba(185, 255, 53, 0.07),
    0 0 calc(7 * var(--arcade-unit)) rgba(185, 255, 53, 0.1),
    0 0 calc(8 * var(--arcade-unit)) rgba(0, 0, 0, 0.72);
  color: var(--lime);
  transform-origin: center;
}

.arcade-machine:hover .arcade-marquee,
.arcade-machine:focus-visible .arcade-marquee {
  filter: brightness(1.1) saturate(1.06) contrast(1.03);
  transform: none;
}

.arcade-machine--watch:hover .arcade-marquee,
.arcade-machine--watch:focus-visible .arcade-marquee {
  animation: none;
  filter: brightness(1.52) saturate(1.2) contrast(1.08);
}

.arcade-machine.is-coming-soon:hover .arcade-marquee,
.arcade-machine.is-coming-soon:focus-visible .arcade-marquee {
  animation: none;
  filter: brightness(0.56) saturate(0.58) contrast(1.06);
}

.arcade-machine.is-coming-soon:hover::before,
.arcade-machine.is-coming-soon:hover::after,
.arcade-machine.is-coming-soon:focus-visible::before,
.arcade-machine.is-coming-soon:focus-visible::after {
  animation: none;
  opacity: 0;
}

.arcade-machine:hover .arcade-screen,
.arcade-machine:focus-visible .arcade-screen {
  filter: none;
  transform: none;
}

.arcade-machine:hover .arcade-screen > img,
.arcade-machine:focus-visible .arcade-screen > img {
  filter: brightness(1.24) saturate(1.16) contrast(1.04);
  transform: scale(1.035);
}

.arcade-machine.is-coming-soon:hover .arcade-screen > img,
.arcade-machine.is-coming-soon:focus-visible .arcade-screen > img {
  filter: brightness(0.76) saturate(0.74) contrast(1.06);
  transform: scale(1.025);
}

.arcade-machine:hover .arcade-machine-status,
.arcade-machine:focus-visible .arcade-machine-status {
  border-color: var(--amber-soft);
  box-shadow:
    inset 0 0 calc(12 * var(--arcade-unit)) rgba(255, 162, 46, 0.2),
    0 0 calc(14 * var(--arcade-unit)) rgba(255, 105, 18, 0.34);
  color: #fff2c9;
  transform: translate(-50%, calc(-2 * var(--arcade-unit)));
}

.arcade-machine--watch:hover .arcade-machine-status,
.arcade-machine--watch:focus-visible .arcade-machine-status {
  animation: none;
  border-color: var(--lime);
  color: #e7ff9f;
  box-shadow:
    inset 0 0 calc(12 * var(--arcade-unit)) rgba(185, 255, 53, 0.2),
    0 0 calc(14 * var(--arcade-unit)) rgba(185, 255, 53, 0.28);
}

.arcade-machine:active .arcade-screen {
  filter: brightness(1.38) saturate(1.2);
  transform: translateY(0) scale(0.995);
}

.arcade-machine:focus-visible {
  outline: none;
}

.arcade-machine:focus-visible .arcade-marquee,
.arcade-machine:focus-visible .arcade-screen {
  outline: calc(2 * var(--arcade-unit)) solid rgba(255, 223, 150, 0.95);
  outline-offset: calc(3 * var(--arcade-unit));
}

.arcade-easter-eggs {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.arcade-easter-egg {
  position: absolute;
  top: auto;
  bottom: 3.8%;
  width: 9%;
  height: auto;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.arcade-easter-egg--left {
  left: 16.65%;
}

.arcade-easter-egg--right {
  right: 16.65%;
}

.arcade-easter-egg::before {
  position: absolute;
  right: -18%;
  bottom: -9%;
  left: -18%;
  z-index: 0;
  height: 36%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 149, 48, 0.13) 0%,
    rgba(137, 58, 12, 0.08) 42%,
    transparent 74%
  );
  content: "";
  filter: blur(calc(5 * var(--arcade-unit)));
  mix-blend-mode: screen;
  pointer-events: none;
}

.arcade-easter-egg-shadow {
  position: absolute;
  right: 12%;
  bottom: 6%;
  left: 12%;
  z-index: 1;
  height: 13%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.82);
  filter: blur(calc(8 * var(--arcade-unit)));
  opacity: 0.82;
  pointer-events: none;
  transform: scaleX(0.86);
  transition: opacity 220ms ease, transform 220ms ease;
}

.arcade-easter-egg-collectible {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter:
    brightness(0.88)
    saturate(0.84)
    sepia(0.06)
    drop-shadow(0 calc(8 * var(--arcade-unit)) calc(8 * var(--arcade-unit)) rgba(0, 0, 0, 0.84));
  transform: translateY(0) scale(0.9);
  transform-origin: 50% 82%;
  transition:
    filter 240ms ease,
    transform 240ms cubic-bezier(0.18, 0.72, 0.2, 1);
}

.arcade-easter-egg:focus-visible {
  border-radius: 46%;
  outline: calc(2 * var(--arcade-unit)) solid rgba(255, 209, 138, 0.86);
  outline-offset: calc(3 * var(--arcade-unit));
}

.arcade-easter-egg:hover .arcade-easter-egg-collectible,
.arcade-easter-egg:focus-visible .arcade-easter-egg-collectible,
.arcade-easter-egg[aria-pressed="true"] .arcade-easter-egg-collectible {
  filter:
    brightness(1.03)
    saturate(1.02)
    sepia(0)
    drop-shadow(0 calc(10 * var(--arcade-unit)) calc(10 * var(--arcade-unit)) rgba(0, 0, 0, 0.82))
    drop-shadow(0 0 calc(6 * var(--arcade-unit)) rgba(255, 160, 52, 0.2));
  transform: translateY(calc(-4 * var(--arcade-unit))) scale(0.99) rotate(-0.6deg);
}

.arcade-easter-egg--right:hover .arcade-easter-egg-collectible,
.arcade-easter-egg--right:focus-visible .arcade-easter-egg-collectible,
.arcade-easter-egg--right[aria-pressed="true"] .arcade-easter-egg-collectible {
  filter:
    brightness(1.02)
    saturate(1.08)
    drop-shadow(0 calc(10 * var(--arcade-unit)) calc(10 * var(--arcade-unit)) rgba(0, 0, 0, 0.84))
    drop-shadow(0 0 calc(7 * var(--arcade-unit)) rgba(45, 132, 255, 0.28));
  transform: translateY(calc(-4 * var(--arcade-unit))) scale(0.99) rotate(0.6deg);
}

.arcade-easter-egg:hover .arcade-easter-egg-shadow,
.arcade-easter-egg:focus-visible .arcade-easter-egg-shadow,
.arcade-easter-egg[aria-pressed="true"] .arcade-easter-egg-shadow {
  opacity: 0.62;
  transform: scaleX(0.98);
}

.arcade-toast {
  position: absolute;
  bottom: 3.2%;
  left: 50%;
  z-index: 7;
  max-width: 60%;
  margin: 0;
  padding: calc(9 * var(--arcade-unit)) calc(16 * var(--arcade-unit));
  border: calc(1 * var(--arcade-unit)) solid rgba(255, 176, 59, 0.68);
  border-radius: calc(3 * var(--arcade-unit));
  background: rgba(5, 3, 2, 0.91);
  box-shadow: 0 0 calc(18 * var(--arcade-unit)) rgba(255, 111, 20, 0.22);
  color: #ffd28d;
  font-size: calc(11 * var(--arcade-unit));
  line-height: 1.3;
  letter-spacing: 0.03em;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transform: translate(-50%, calc(10 * var(--arcade-unit)));
  transition: opacity 180ms ease, transform 180ms ease;
}

.arcade-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.arcade-secret-mode .arcade-screen {
  filter: brightness(1.2) saturate(1.18) drop-shadow(0 0 calc(12 * var(--arcade-unit)) rgba(40, 223, 234, 0.55));
}

.arcade-secret-mode .arcade-easter-egg--right {
  filter: drop-shadow(0 0 calc(12 * var(--arcade-unit)) rgba(40, 223, 234, 0.34));
}

@keyframes crt-breathe {
  0%,
  100% {
    opacity: 0.975;
  }

  48% {
    opacity: 1;
  }

  49% {
    opacity: 0.94;
  }

  50% {
    opacity: 1;
  }
}

@keyframes watch-marquee-idle-pulse {
  0%,
  100% {
    filter: brightness(0.9) saturate(0.92) contrast(1.02);
  }

  50% {
    filter: brightness(1.22) saturate(1.08) contrast(1.05);
  }
}

/* The unavailable signs rest for roughly five seconds, then briefly behave
   like separate aging bulbs are trying—and failing—to ignite the marquee. */
@keyframes unavailable-marquee-failed-ignition {
  0%,
  76%,
  100% {
    filter: brightness(0.78) saturate(0.78) contrast(1.05);
    transform: translate3d(0, 0, 0);
  }

  79% {
    filter: brightness(0.8) saturate(0.79) contrast(1.055);
    transform: translate3d(calc(-0.25 * var(--arcade-unit)), 0, 0);
  }

  81.5% {
    filter: brightness(0.84) saturate(0.81) contrast(1.06);
    transform: translate3d(calc(0.5 * var(--arcade-unit)), calc(-0.2 * var(--arcade-unit)), 0);
  }

  83.5% {
    filter: brightness(0.81) saturate(0.79) contrast(1.055);
    transform: translate3d(calc(-0.4 * var(--arcade-unit)), calc(0.15 * var(--arcade-unit)), 0);
  }

  85% {
    filter: brightness(0.86) saturate(0.82) contrast(1.065);
    transform: translate3d(calc(0.35 * var(--arcade-unit)), 0, 0);
  }

  87.5% {
    filter: brightness(0.77) saturate(0.76) contrast(1.05);
    transform: translate3d(calc(-0.2 * var(--arcade-unit)), calc(0.2 * var(--arcade-unit)), 0);
  }

  90% {
    filter: brightness(0.8) saturate(0.78) contrast(1.055);
    transform: translate3d(calc(0.25 * var(--arcade-unit)), 0, 0);
  }

  92.5% {
    filter: brightness(0.83) saturate(0.8) contrast(1.06);
    transform: translate3d(calc(-0.35 * var(--arcade-unit)), calc(-0.1 * var(--arcade-unit)), 0);
  }

  95% {
    filter: brightness(0.795) saturate(0.78) contrast(1.055);
    transform: translate3d(calc(0.15 * var(--arcade-unit)), 0, 0);
  }
}

@keyframes unavailable-bulb-left {
  0%,
  76%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.9);
  }

  79% {
    opacity: 0.08;
    transform: translate3d(calc(-1 * var(--arcade-unit)), 0, 0) scale(0.94);
  }

  81.5% {
    opacity: 0.27;
    transform: translate3d(calc(1.2 * var(--arcade-unit)), calc(-0.5 * var(--arcade-unit)), 0) scale(1.04);
  }

  84% {
    opacity: 0.14;
    transform: translate3d(calc(-0.8 * var(--arcade-unit)), calc(0.4 * var(--arcade-unit)), 0) scale(0.98);
  }

  86% {
    opacity: 0.31;
    transform: translate3d(calc(0.7 * var(--arcade-unit)), 0, 0) scale(1.06);
  }

  89% {
    opacity: 0.045;
    transform: translate3d(calc(-0.5 * var(--arcade-unit)), 0, 0) scale(0.92);
  }

  92% {
    opacity: 0.19;
    transform: translate3d(calc(0.4 * var(--arcade-unit)), calc(-0.3 * var(--arcade-unit)), 0) scale(1.01);
  }

  96% {
    opacity: 0.06;
    transform: translate3d(0, 0, 0) scale(0.95);
  }
}

@keyframes unavailable-bulb-right {
  0%,
  78%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.9);
  }

  80.5% {
    opacity: 0.04;
    transform: translate3d(calc(0.5 * var(--arcade-unit)), 0, 0) scale(0.94);
  }

  83% {
    opacity: 0.17;
    transform: translate3d(calc(-0.7 * var(--arcade-unit)), calc(0.2 * var(--arcade-unit)), 0) scale(1.01);
  }

  85% {
    opacity: 0.07;
    transform: translate3d(calc(0.6 * var(--arcade-unit)), 0, 0) scale(0.96);
  }

  88% {
    opacity: 0.25;
    transform: translate3d(calc(-0.9 * var(--arcade-unit)), calc(-0.4 * var(--arcade-unit)), 0) scale(1.05);
  }

  91% {
    opacity: 0.1;
    transform: translate3d(calc(0.4 * var(--arcade-unit)), calc(0.2 * var(--arcade-unit)), 0) scale(0.98);
  }

  94% {
    opacity: 0.2;
    transform: translate3d(calc(-0.4 * var(--arcade-unit)), 0, 0) scale(1.02);
  }

  97% {
    opacity: 0.035;
    transform: translate3d(0, 0, 0) scale(0.94);
  }
}

@keyframes press-start-idle-pulse {
  0%,
  100% {
    border-color: rgba(185, 255, 53, 0.52);
    box-shadow:
      inset 0 0 calc(9 * var(--arcade-unit)) rgba(185, 255, 53, 0.07),
      0 0 calc(7 * var(--arcade-unit)) rgba(185, 255, 53, 0.1),
      0 0 calc(8 * var(--arcade-unit)) rgba(0, 0, 0, 0.72);
    filter: brightness(0.98);
    transform: translate(-50%, 0) scale(1);
  }

  50% {
    border-color: rgba(185, 255, 53, 0.66);
    box-shadow:
      inset 0 0 calc(11 * var(--arcade-unit)) rgba(185, 255, 53, 0.11),
      0 0 calc(10 * var(--arcade-unit)) rgba(185, 255, 53, 0.16),
      0 0 calc(8 * var(--arcade-unit)) rgba(0, 0, 0, 0.72);
    filter: brightness(1.045);
    transform: translate(-50%, 0) scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  .arcade-stage {
    transform: none;
  }

  .arcade-marquee,
  .arcade-cabinet-shell,
  .arcade-screen,
  .arcade-screen > img,
  .arcade-machine-status,
  .arcade-machine.is-coming-soon::before,
  .arcade-machine.is-coming-soon::after,
  .arcade-lamp,
  .arcade-easter-egg,
  .arcade-easter-egg-collectible,
  .arcade-easter-egg-shadow,
  .arcade-toast {
    animation: none;
    transition: none;
  }

  .arcade-machine.is-coming-soon::before,
  .arcade-machine.is-coming-soon::after {
    opacity: 0;
  }
}