@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Share+Tech+Mono&display=swap');

:root {
  --neon-cyan: #00f3ff;
  --neon-green: #39ff14;
  --neon-red: #ff3131;
  --neon-pink: #ff007f;
  --dark-bg: #0a0e17;
  --panel-bg: rgba(16, 24, 48, 0.85);
}

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

body {
  margin: 0;
  padding: 0;
  background: linear-gradient(-45deg, #050b1a, #1a0826, #2d0b2f, #081a24);
  background-size: 400% 400%;
  animation: meshGradient 15s ease infinite;
  color: #e2e8f0;
  font-family: 'Share Tech Mono', monospace;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Retro arcade titles */
.retro-font {
  font-family: 'Press Start 2P', monospace;
}

/* Sharp pixel rendering for our procedurally generated pixel art */
canvas {
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
  box-shadow: 0 0 30px rgba(0, 243, 255, 0.25);
  border: 4px solid var(--neon-cyan);
  border-radius: 4px;
}

/* CRT Screen Effect Overlay */
.crt-overlay {
  position: relative;
  overflow: hidden;
}

.crt-overlay::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 10;
  background-size: 100% 4px, 6px 100%;
  pointer-events: none;
}

/* Vignette Shadow */
.crt-vignette {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  z-index: 11;
}

/* Scanning line animation */
@keyframes scanline {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

.crt-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.1);
  opacity: 0.8;
  z-index: 12;
  pointer-events: none;
  animation: scanline 8s linear infinite;
}

/* Flickering animations for medical terminals */
@keyframes flicker {
  0% { opacity: 0.98; }
  50% { opacity: 1; }
  100% { opacity: 0.99; }
}

.flicker {
  animation: flicker 0.15s infinite;
}

/* Pulse Glows */
@keyframes pulse-glow-cyan {
  0%, 100% { box-shadow: 0 0 10px rgba(0, 243, 255, 0.3), inset 0 0 5px rgba(0, 243, 255, 0.2); }
  50% { box-shadow: 0 0 20px rgba(0, 243, 255, 0.6), inset 0 0 10px rgba(0, 243, 255, 0.4); }
}

.glow-cyan {
  animation: pulse-glow-cyan 3s infinite alternate;
}

/* Keyboard controls layout style */
.key-cap {
  background: linear-gradient(135deg, #2c3e50, #1a252f);
  border: 2px solid #455a64;
  border-bottom-width: 5px;
  border-radius: 4px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.3);
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}

.key-cap:active {
  border-bottom-width: 2px;
  transform: translateY(3px);
}

/* Medical Heartrate pulse line animation for backgrounds */
.heartbeat-line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw-heartbeat 4s linear infinite;
}

@keyframes draw-heartbeat {
  to {
    stroke-dashoffset: 0;
  }
}