Scriptocalypse/style.css

/* Base styles */
body {
  margin: 0;
  padding: 0;
  text-align: center;
  box-sizing: border-box;
  font-family: 'Verdana', sans-serif;
}

/* Game Area */
#gameArea {
  position: relative;
  height: 100vh;
  background: radial-gradient(rgb(230, 231, 230), rgb(223, 226, 223));
  padding: 20px 0px;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

/* Intro Screen */
#game-intro {
  position: relative;
  min-height: 100vh;
  padding: 20px;
}

#game-intro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(./images/apocalypse-bg.png);
  background-size: cover;
  background-position: center;
  opacity: 0.7;
  z-index: -1;
}

.game-intro p {
  font-size: 18px;
}

/* Buttons */
body button {
  font-size: 30px;
  background-color: #870007;
  color: #fff;
  padding: 20px 40px;
  border: 0;
  box-shadow: 0;
  border-radius: 5px;
  margin-bottom: 20px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
}

body button:hover {
  background-color: #a50009;
  transform: scale(1.02);
}

body button:active {
  transform: scale(0.98);
}

.button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

#hardcore-button {
  background-color: #2a0003;
  font-size: 24px;
  padding: 15px 30px;
}

#hardcore-button:hover {
  background-color: #4a0005;
}

/* High Score Display */
#high-score-display {
  font-size: 18px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 10px 20px;
  border-radius: 5px;
  display: inline-block;
  margin: 10px 0;
}

.controls-hint {
  font-size: 14px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 5px 15px;
  border-radius: 3px;
  display: inline-block;
}

/* Player */
.player {
  position: absolute;
  left: 20px;
  bottom: 50%;
  width: 75px;
  height: auto;
  transition: bottom 0.05s ease-out;
}

/* Player hit animation */
.player-hit {
  animation: playerHitFlash 0.3s ease-out;
}

@keyframes playerHitFlash {
  0%, 100% { filter: none; }
  25% { filter: brightness(0.5) sepia(1) hue-rotate(-50deg) saturate(5); }
  50% { filter: brightness(2); }
  75% { filter: brightness(0.5) sepia(1) hue-rotate(-50deg) saturate(5); }
}

/* Player shield effect */
.player-shield {
  animation: shieldGlow 0.5s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 10px #00bfff);
}

@keyframes shieldGlow {
  0% { filter: drop-shadow(0 0 5px #00bfff); }
  100% { filter: drop-shadow(0 0 15px #00bfff) brightness(1.2); }
}

/* Bullet */
.bullet {
  position: absolute;
  width: 10px;
  height: 5px;
  background-color: black;
}

/* Enemy Base Styles */
.enemy {
  position: absolute;
  width: 75px;
  height: auto;
  right: 0;
  bottom: 50%;
  transform: scaleX(-1);
}

/* Enemy Types */
.enemy-normal {
  /* Default zombie appearance */
}

.enemy-fast {
  filter: hue-rotate(90deg) brightness(1.2);
  width: 65px;
}

.enemy-tank {
  filter: hue-rotate(-30deg) saturate(1.5);
  width: 90px;
}

/* Enemy death animation */
.enemy-death {
  animation: enemyDeath 0.2s ease-out forwards;
}

@keyframes enemyDeath {
  0% {
    opacity: 1;
    transform: scaleX(-1) scale(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(-1) scale(1.5);
  }
}

/* Boss */
.boss {
  position: absolute;
  width: 150px;
  height: auto;
  right: 0;
  transform: scaleX(-1);
  filter: hue-rotate(180deg) saturate(2) brightness(0.8);
  z-index: 10;
}

/* Boss Health Bar */
.boss-health-bar {
  position: absolute;
  width: 120px;
  height: 12px;
  background-color: #333;
  border: 2px solid #000;
  border-radius: 6px;
  overflow: hidden;
  z-index: 11;
}

.boss-health-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #ff4444, #aa0000);
  transition: width 0.2s ease-out;
}

/* Power-ups */
.power-up {
  position: absolute;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  animation: powerUpPulse 0.5s ease-in-out infinite alternate;
  z-index: 5;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}

@keyframes powerUpPulse {
  0% { transform: scale(1); box-shadow: 0 0 10px currentColor; }
  100% { transform: scale(1.1); box-shadow: 0 0 20px currentColor; }
}

.power-up-extraLife {
  background: linear-gradient(135deg, #00ff00, #008800);
  border: 3px solid #00cc00;
}

.power-up-tripleShot {
  background: linear-gradient(135deg, #ffff00, #ccaa00);
  border: 3px solid #ffcc00;
  color: #000;
}

.power-up-shield {
  background: linear-gradient(135deg, #00bfff, #0066cc);
  border: 3px solid #00aaff;
}

/* Pause Overlay */
#pause-overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.pause-content {
  text-align: center;
  color: #fff;
}

.pause-content h1 {
  font-size: 48px;
  margin-bottom: 30px;
  text-shadow: 2px 2px 4px #000;
}

.pause-content button {
  display: block;
  margin: 10px auto;
  min-width: 200px;
}

/* Game End Screen */
#game-end {
  display: none;
  padding: 50px;
  min-height: 100vh;
  background: linear-gradient(to bottom, #1a0000, #4a0000);
  color: #fff;
}

#game-end h1 {
  font-size: 48px;
  color: #ff4444;
  text-shadow: 2px 2px 4px #000;
}

#game-end p {
  font-size: 24px;
  margin: 15px 0;
}

#final-high-score {
  color: #ffcc00;
  font-weight: bold;
}

/* Victory Screen */
#game-victory {
  display: none;
  padding: 50px;
  min-height: 100vh;
  background: linear-gradient(to bottom, #001a00, #004a00);
  color: #fff;
}

#game-victory h1 {
  font-size: 64px;
  color: #44ff44;
  text-shadow: 2px 2px 4px #000;
  animation: victoryPulse 1s ease-in-out infinite alternate;
}

@keyframes victoryPulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); text-shadow: 0 0 30px #44ff44; }
}

#game-victory p {
  font-size: 24px;
  margin: 15px 0;
}

#victory-high-score {
  color: #ffcc00;
  font-weight: bold;
}

/* Volume Control */
#volume-control {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 50;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px 10px;
  border-radius: 5px;
  color: #fff;
}

#volume-control label {
  margin-right: 5px;
}

/* Stats */
#stats {
  position: absolute;
  top: 10px;
  left: 10px;
  text-align: left;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
  border-radius: 5px;
  color: #fff;
  z-index: 50;
}

#stats h2 {
  margin: 5px 0;
  font-size: 16px;
}

/* Touch Controls */
#touch-controls {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 200;
  pointer-events: none;
}

.touch-move {
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: auto;
}

.touch-btn {
  width: 70px;
  height: 70px;
  font-size: 16px;
  padding: 10px;
  background-color: rgba(135, 0, 7, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  pointer-events: auto;
  touch-action: manipulation;
}

.touch-btn:active {
  background-color: rgba(200, 0, 10, 0.9);
  transform: scale(0.95);
}

.touch-shoot-btn {
  width: 100px;
  height: 100px;
  font-size: 20px;
  border-radius: 50%;
  align-self: center;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  body button {
    font-size: 24px;
    padding: 15px 30px;
  }

  #hardcore-button {
    font-size: 18px;
    padding: 12px 24px;
  }

  .player {
    width: 60px;
  }

  .enemy {
    width: 60px;
  }

  .enemy-fast {
    width: 50px;
  }

  .enemy-tank {
    width: 75px;
  }

  .boss {
    width: 120px;
  }

  #stats h2 {
    font-size: 14px;
  }

  #game-end h1,
  #game-victory h1 {
    font-size: 36px;
  }

  #game-end p,
  #game-victory p {
    font-size: 18px;
  }

  .pause-content h1 {
    font-size: 36px;
  }
}