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

:root {
  /* Futuristic color palette */
  --primary-cyan: #00ffff;
  --primary-blue: #0080ff;
  --primary-purple: #8000ff;
  --secondary-pink: #ff00aa;
  --accent-yellow: #ffff00;

  /* Background colors */
  --bg-dark: #0a0a0f;
  --bg-medium: #1a1a2e;
  --bg-light: #16213e;

  /* Text colors */
  --text-primary: #ffffff;
  --text-secondary: #ccccff;
  --text-accent: var(--primary-cyan);

  /* UI colors */
  --success: #00ff88;
  --warning: #ffaa00;
  --error: #ff3366;
  --info: var(--primary-blue);

  /* Glows */
  --glow-cyan: 0 0 10px rgba(0, 255, 255, 0.5);
  --glow-purple: 0 0 15px rgba(128, 0, 255, 0.6);
  --glow-pink: 0 0 12px rgba(255, 0, 170, 0.5);
  --glow-blue: 0 0 8px rgba(0, 128, 255, 0.4);
}

body {
  font-family: "Consolas", "Monaco", "Courier New", monospace;
  background: radial-gradient(
    ellipse at center,
    var(--bg-medium) 0%,
    var(--bg-light) 50%,
    var(--bg-dark) 100%
  );
  color: var(--text-primary);
  overflow: hidden;
  height: 100vh;
  position: relative;
}

/* Animated starfield background */
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(2px 2px at 73px 47px, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 184px 123px, #dddddd, transparent),
    radial-gradient(2px 2px at 311px 28px, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 89px 156px, #dddddd, transparent),
    radial-gradient(2px 2px at 267px 201px, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 152px 78px, #dddddd, transparent),
    radial-gradient(2px 2px at 398px 142px, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 45px 214px, #dddddd, transparent);
  background-repeat: repeat;
  background-size: 450px 250px;
  animation: starfield 15s linear infinite;
  pointer-events: none;
  opacity: 0.8;
}

@keyframes starfield {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(250px);
  }
}

.game-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
}

/* Fullscreen mode styles */
body.fullscreen,
html:fullscreen body,
html:-webkit-full-screen body,
html:-moz-full-screen body {
  overflow: hidden;
}

.game-container:fullscreen,
.game-container:-webkit-full-screen,
.game-container:-moz-full-screen {
  width: 100vw;
  height: 100vh;
  max-width: 1000px;
  margin: 0 auto;
}

/* Screen flash effect */
.screen-flash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  opacity: 0.8;
  transition: opacity 0.2s ease-out;
  pointer-events: none;
}

.flash-fade {
  opacity: 0;
}

/* Responsive design */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 12px;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --primary-cyan: #ffffff;
    --primary-blue: #ffffff;
    --text-primary: #ffffff;
    --bg-dark: #000000;
    --bg-medium: #000000;
    --bg-light: #333333;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
  }

  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Touch device optimizations */
@media (pointer: coarse) {
  body {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
}