:root {
  --cabinet-main: #3f0066;
  --cabinet-accent: #3f0066;
  --marquee-bg: #3f0066;
  --screen-bg: #000;
  --button-red: #d32f2f;
  --button-blue: #1976d2;
  --button-yellow: #fbc02d;
  --crt-scanline: rgba(255,255,255,0.08);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  background: var(--cabinet-main);
  font-family: 'Press Start 2P', cursive;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  position: relative;
}

.cabinet-side {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100px;
  background: var(--cabinet-accent);
  z-index: -1;
}
.cabinet-side.left { left: 0; }
.cabinet-side.right { right: 0; }

.marquee {
  width: 100%;
  text-align: center;
  padding: 20px 0;
  background: var(--marquee-bg);
  color: #fff;
  font-size: clamp(16px, 4vw, 28px);
}
.marquee h1 {
  margin: 0;
}

.crt {
  position: relative;
  width: min(900px, 90vw);
  aspect-ratio: 16 / 9;
  background: var(--screen-bg);
  border: 8px solid #333;
  border-radius: 8px;
  overflow: hidden;
}

.scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0,
    rgba(255,255,255,0) 2px,
    var(--crt-scanline) 3px,
    var(--crt-scanline) 4px
  );
  pointer-events: none;
}

.screen-content {
  padding: 20px;
  text-align: center;
}
.screen-content h2 {
  margin-bottom: 20px;
  font-size: 18px;
}
.game-list {
  list-style: none;
  text-align: left;
  max-width: 600px;
  margin: 0 auto 20px;
}
.game-list li {
  padding: 10px;
  margin: 4px 0;
  background: #111;
  border-left: 4px solid transparent;
  cursor: pointer;
  transition: 0.2s;
}
.game-list li:hover,
.game-list li.active {
  background: #222;
  border-left: 4px solid #fff;
}
.hint {
  font-size: 10px;
  opacity: 0.7;
  margin-top: 10px;
}

.controls {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 20px;
}

.stick {
  width: 60px;
  height: 60px;
  background: #222;
  border-radius: 50%;
  position: relative;
}
.stick::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 20px; height: 80px;
  background: #444;
  border-radius: 10px;
}

.buttons {
  display: flex;
  gap: 20px;
}
.button {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #555;
}
.button.red { background: var(--button-red); }
.button.blue { background: var(--button-blue); }
.button.yellow { background: var(--button-yellow); }

.header-link {
  text-decoration: none;
  color: inherit;
}

.header-link:visited,
.header-link:hover,
.header-link:active {
  color: inherit;
}

.crt {
  position: relative;
  width: min(900px, 90vw);
  aspect-ratio: 16 / 9;
  background: var(--screen-bg);
  border: 8px solid #333;
  border-radius: 8px;
  overflow: hidden;
}

#game-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  z-index: 0;
  opacity: 0.2;
  pointer-events: none;
}

.screen-content {
  position: relative;
  z-index: 1;
  padding: 20px;
  text-align: center;
  color: #fff;
}

.marquee h1 {
  text-shadow: 0 0 8px #ff00ff, 0 0 16px #00ffff;
}