:root {
  --color-arcade-black: #08080C;
  --color-arcade-surface: #131317;
  --color-arcade-gray: #181824;
  --color-arcade-border: #3A3A50;
  --color-arcade-yellow: #FFE600;
  --color-arcade-cyan: #00F0FF;
  --color-arcade-magenta: #FF0055;
  --color-arcade-text: #E4E1E8;
  --color-arcade-muted: #CDC7AA;
  --shadow-arcade: 4px 4px 0px #000000;
  --shadow-arcade-sm: 2px 2px 0px #000000;
}

* {
  border-radius: 0px !important;
  box-sizing: border-box;
}

body {
  font-family: 'JetBrains Mono', monospace;
  background-color: var(--color-arcade-black);
  color: var(--color-arcade-text);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

/* CRT Scanlines Overlay */
.scanlines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(
    to bottom,
    rgba(18, 18, 24, 0) 50%,
    rgba(0, 0, 0, 0.35) 50%
  ),
  linear-gradient(
    90deg,
    rgba(255, 0, 0, 0.04),
    rgba(0, 255, 0, 0.02),
    rgba(0, 0, 255, 0.04)
  );
  background-size: 100% 3px, 4px 100%;
  pointer-events: none;
  z-index: 9999;
}

/* Arcade Interactive Button */
.arcade-btn {
  box-shadow: var(--shadow-arcade);
  transition: transform 0.06s ease, box-shadow 0.06s ease;
  cursor: pointer;
  user-select: none;
}

.arcade-btn:active {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-arcade-sm);
}

.arcade-btn:hover {
  filter: brightness(1.1);
}

/* Custom Scrollbar for Arcade HUD */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #08080C;
}

::-webkit-scrollbar-thumb {
  background: #3A3A50;
  border: 1px solid #181824;
}

::-webkit-scrollbar-thumb:hover {
  background: #FFE600;
}