/*  */
/* #scan-lines { */

#scan-lines {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) perspective(2000px) rotateX(1deg);
  border-radius: 8px;
  width: 80ch;
  height: 35em;
  line-height: 1;
  pointer-events: none;
  overflow: hidden;
  box-shadow: 
    inset 0 0 100px rgba(0, 0, 0, 0.15),
    inset 0 0 40px rgba(0, 0, 0, 0.15),
    inset 0 0 20px rgba(0, 0, 0, 0.2),
    0 0 2px rgba(74, 237, 202, 0.09),
    0 0 15px rgba(0, 0, 0, 0.1);
  z-index: 2005;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: 
    radial-gradient(
      circle at center,
      transparent 0%,
      rgba(0, 0, 0, 0.03) 50%,
      rgba(0, 0, 0, 0.05) 100%
    );
}

#scan-lines::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 4px;
  width: 80ch;
  height: 35em;
  background: linear-gradient(
    to bottom,
    rgba(30, 30, 46, 0) 50%,
    rgba(30, 30, 46, 0.15) 50%
  );
  background-size: 100% 4px;
  animation: scanlines 0.75s linear infinite;
  pointer-events: none;
}

@keyframes scanlines {
  0% { transform: translateY(0); }
  100% { transform: translateY(4px); }
}

#scan-lines::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(
      circle at center,
      transparent 100%,
      rgba(0, 0, 0, .02) 100%
    ),
    linear-gradient(90deg, 
      rgba(255, 0, 0, 0.08), 
      rgba(0, 255, 0, 0.04), 
      rgba(0, 0, 255, 0.08)
    );
  background-size: 100% 100%, 3px 100%;
  pointer-events: none;
  animation: flicker 0.3s infinite;
}

@keyframes flicker {
  0% { opacity: 0.98; }
  5% { opacity: 0.97; }
  10% { opacity: 0.96; }
  15% { opacity: 0.98; }
  20% { opacity: 0.95; }
  25% { opacity: 0.97; }
  30% { opacity: 0.98; }
  35% { opacity: 0.96; }
  40% { opacity: 0.97; }
  45% { opacity: 0.96; }
  50% { opacity: 0.98; }
  55% { opacity: 0.96; }
  60% { opacity: 0.97; }
  65% { opacity: 0.96; }
  70% { opacity: 0.98; }
  75% { opacity: 0.96; }
  80% { opacity: 0.97; }
  85% { opacity: 0.96; }
  90% { opacity: 0.98; }
  95% { opacity: 0.96; }
  100% { opacity: 0.97; }
}

html { 
  animation-duration: 0.05s;
  animation-name: textflicker;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes textflicker {
  from { text-shadow: 1px 0 0 #ea36af, -1.5px 0 0 #75fa69, 0 0 3px currentColor, 0 0 6px rgba(205, 214, 244, 0.3); }
  to { text-shadow: 1.5px 0.3px 2px #ea36af, -1px -0.3px 2px #75fa69, 0 0 3px currentColor, 0 0 6px rgba(205, 214, 244, 0.3); }
}

@keyframes scanlines {
  0% { transform: translate(-50%, -50%) translateY(0); }
  100% { transform: translate(-50%, -50%) translateY(4px); }
}


/* ==========================================================================
   Variables - Catppuccin Mocha Color Scheme
   ========================================================================== */
   
:root {
  /* Base Theme Colors */
  --ctp-base: #1e1e2e;
  --ctp-bg: #1e1e2e;
  --ctp-text: #cdd6f4;

  /* Game Entity Colors */
  --ctp-stalker: #ff6b6b;  /* Special enemy type */
  --ctp-player: #89b4fa;   /* Player character */
  --ctp-enemy1: #f38ba8;   /* First enemy type */
  --ctp-enemy2: #fab387;   /* Second enemy type */
  --ctp-enemy3: #a6e3a1;   /* Third enemy type */
  --ctp-bullet: #f5e0dc;   /* Projectiles */

  /* Extended Catppuccin Palette */
  --ctp-rosewater: #f5e0dc;
  --ctp-flamingo: #f2cdcd;
  --ctp-pink: #f5c2e7;
  --ctp-mauve: #cba6f7;
  --ctp-red: #f38ba8;
  --ctp-maroon: #eba0ac;
  --ctp-peach: #fab387;
  --ctp-yellow: #f9e2af;
  --ctp-green: #a6e3a1;
  --ctp-teal: #94e2d5;
  --ctp-blue: #89b4fa;
  --ctp-sapphire: #74c7ec;
  --ctp-lavender: #b4befe;
}

/* ==========================================================================
   Global Styles
   ========================================================================== */
body {
  margin: 0;
  padding: 0;
  background-color: var(--ctp-bg);
  color: var(--ctp-text);
  font-family: "Courier New", monospace;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* ==========================================================================
   Game Screens
   ========================================================================== */

/* Common screen properties */
#start-screen,
#game-screen,
#end-screen {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #2a2a3e;
  border-radius: 4px;
  width: 80ch;
  line-height: 1;
}

/* Start Screen */
#start-screen {
  text-align: center;
  font-size: 16px;
  opacity: 1;
  height: 34em;
  margin-top: 9px;
  transition: opacity 0.5s ease;
}

/* Game Screen */
#game-screen {
  display: none;
  white-space: pre;
  font-size: 16px;
  height: 35em;
  padding: 0px;
}

#game-screen.playing {
  cursor: none;
}

/* End Screen */
#end-screen {
  white-space: pre;
  display: none;
  text-align: center;
  height: 34em;
  margin-top: 9px;
  box-sizing: border-box;
}


/* ==========================================================================
   Score Display Components
   ========================================================================== */

/* Champ */
#high-score-display {
  display: none;
  position: static;
  margin-top: -540px;
  margin-left: 520px;
  font-size: 16px;
  color: var(--ctp-text);
  z-index: 1000;
}

#display-high-score {
  color: var(--ctp-mauve);
  display: table;
}

#display-high-score > * {
  display: table-cell;
  position: static;
  padding: 0px 10px;
  text-align: left;
  white-space: nowrap;
}

#leaderboard {
  display: none;
  position: absolute;
  text-align: left;
  top: 10%;
  left: 40%;
}

#scores {
  font-family: monospace;
  white-space: pre;
}

#score-hider {
  display: none;
}

/* ==========================================================================
   Animations
   ========================================================================== */
.blink {
  animation: blink 1s infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.4; }
  100% { opacity: 1; }
}

/* Start Screen Animations */
.title-animation {
  text-align: center;
  font-size: 10px;
  margin-left: -60px;
  font-family: "Courier New", monospace;
  animation: titleFadeIn 2s ease-in-out;
  margin-bottom: 15px;
  padding-top: 30px;
}

@keyframes titleFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.graphics-animation {
  text-align: center;
  font-size: 10px;
  font-family: "Courier New", monospace;
  animation: graphicsSlideIn 2s ease-in-out, hover 4s ease-in-out infinite;
  animation-delay: 0s, 2s;
  margin-bottom: 45px;
}

@keyframes graphicsSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hover {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ==========================================================================
   Menu and UI Components
   ========================================================================== */
.menu-options {
  text-align: center;
  font-size: 20px;
  margin-bottom: 39px;
  animation: fadeIn 2s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.menu-options span.key {
  color: var(--ctp-mauve);
}

.menu-options span.label {
  color: var(--ctp-lavender);
}

.play-prompt {
  display: block;
  position: absolute;
  text-align: center;
  font-size: 20px;
  left: 37%;
}

/* ==========================================================================
   Form Elements
   ========================================================================== */
#player-credentials {
  outline: none;
  border: none;
  background: transparent;
  color: var(--ctp-text);
}

#end-screen h2 {
  font-size: 14px;
  font-weight: normal;
  margin-top: -30px;
  animation: blink 1s infinite;
  text-align: center;
  color: var(--ctp-red);
}

#end-screen input {
  padding: 5px;
  margin: 10px 0;
  border: 2px solid var(--ctp-mauve);
  border-radius: 3px;
  background: transparent;
  font-family: "Courier New", monospace;
  font-size: 32px;
  font-weight: 900;
  text-align: left;
  width: 300px;
  color: var(--ctp-yellow);
  text-transform: uppercase;
  text-shadow: 0 0 10px var(--ctp-mauve);
  animation: textflicker 0.05s infinite alternate;
  caret-color: var(--ctp-yellow);
  caret-shape: block;
}

#end-screen input:focus {
  outline: none;
  border-color: var(--ctp-sapphire);
}



/* ==========================================================================
   Modal and Popup Components
   ========================================================================== */
.modal {
  display: none;
  text-align: center;
  background-color: #2a2a3e;
  color: var(--ctp-text);
  font-family: "Courier New", monospace;
  padding: 0;
  position: absolute;
  height: 240px;
  width: 350px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -20%);
  border-radius: 5px;
  z-index: 1001;
}

#modal-scores-content {
  max-height: 60vh;
  overflow-y: auto;
  text-align: left;
  font-size: 16px;
  padding-right: 10px;
}

#scores-popup {
  display: none;
  position: absolute;
  margin-top: -20px;
  top: 50%;
  left: 50%;
  transform: translate(30%, -10%);
  font-size: 20px;
  text-align: left;
}

#notification {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ctp-bg);
  padding: 10px 20px;
  color: var(--ctp-text);
  font-family: "Courier New", monospace;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1000;
}

/* ==========================================================================
   Status and Stats Display
   ========================================================================== */
.status-text {
  color: var(--ctp-yellow);
  position: absolute;
  margin-left: 10px;
  background-color: var(--ctp-bg);
  width: 100%;
}

.modal h2 {
  color: var(--ctp-mauve);
}

#modal-stats .stat-label {
  color: var(--ctp-sapphire);
}

#modal-stats .stat-value {
  color: var(--ctp-peach);
}

/* Your Score: */
#end-screen .score-display {
  color: var(--ctp-green);
  font-size: 28px;
  margin-top: -10px;
}

#end-screen .key-prompt {
  color: var(--ctp-mauve);
  font-size: 18px;
  display: inline-block;
  margin-right: 30px;
  margin-top: 30px;
}

#save-score-section {
  text-align: left;
  margin-top: 30px;
  margin-left: -20px;
}

/* END SCREEN CREDENTIALS */
#enter-user {
  margin-left: 100px;
}