body {
  margin: 0;
  padding: 0;
  background: #1a0a0a;
  font-family: "Courier New", monospace;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
  user-select: none; /* Prevent text selection on mobile */
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

#gameContainer {
  position: relative;
  border: 2px solid #ff6b6b;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(255, 107, 107, 0.3);
  touch-action: none; /* Prevent default touch behaviors */
}

#gameCanvas {
  display: block;
  background: radial-gradient(circle at 30% 30%, #2d1b1b, #1a0f0f);
  touch-action: none;
}

#startScreen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 30;
}

#startScreenContent {
  text-align: center;
  color: white;
  max-width: 500px;
  padding: 20px;
}

#startScreenContent h1 {
  font-size: 48px;
  color: #ff6b6b;
  margin-bottom: 20px;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

#startScreenContent p {
  font-size: 18px;
  margin-bottom: 20px;
  color: #cccccc;
}

#instructions {
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid #ff6b6b;
  border-radius: 10px;
  padding: 20px;
  margin: 20px 0;
  text-align: left;
}

#instructions p {
  margin: 8px 0;
  font-size: 14px;
}

#playBtn,
#musicToggleStart {
  background: #ff6b6b;
  border: none;
  color: white;
  padding: 15px 30px;
  margin: 10px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 18px;
  font-weight: bold;
  transition: background 0.3s;
}

#playBtn:hover,
#musicToggleStart:hover {
  background: #ff5252;
}

#musicToggleStart {
  font-size: 14px;
  padding: 10px 20px;
}

#ui {
  position: absolute;
  top: 10px;
  left: 10px;
  color: white;
  font-size: 14px;
  z-index: 10;
  display: none;
}

#comboDisplay {
  position: absolute;
  top: 10px;
  right: 10px;
  color: white;
  font-size: 16px;
  z-index: 10;
  text-align: right;
  display: none;
}

#comboCounter {
  font-size: 22px;
  font-weight: bold;
  color: #ffd700;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

#comboMultiplier {
  font-size: 18px;
  color: #ff6b6b;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

#comboTimer {
  width: 100px;
  height: 6px;
  background: #333;
  border-radius: 3px;
  margin-top: 5px;
  overflow: hidden;
}

#comboTimerBar {
  height: 100%;
  background: linear-gradient(90deg, #ff6b6b, #ffd700);
  transition: width 0.1s ease;
}

#levelUpScreen {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.9);
  border: 2px solid #ff6b6b;
  border-radius: 10px;
  padding: 20px;
  color: white;
  text-align: center;
  display: none;
  z-index: 20;
}

.upgrade-option {
  background: #2d1b1b;
  border: 1px solid #ff6b6b;
  color: white;
  padding: 10px 15px;
  margin: 5px;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.2s;
}

.upgrade-option:hover {
  background: #ff6b6b;
}

#gameOverScreen {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.9);
  border: 2px solid #ff6b6b;
  border-radius: 10px;
  padding: 30px;
  color: white;
  text-align: center;
  display: none;
  z-index: 20;
}

#restartBtn,
#menuBtn {
  background: #ff6b6b;
  border: none;
  color: white;
  padding: 10px 20px;
  margin: 10px 5px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 16px;
}

#controls {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: white;
  font-size: 12px;
  opacity: 0.7;
  display: none;
}

#musicControls {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: white;
  font-size: 12px;
  opacity: 0.7;
  z-index: 10;
  display: none;
}

#musicToggle {
  background: none;
  border: 1px solid #ff6b6b;
  color: white;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 3px;
  font-size: 10px;
}

#musicToggle:hover {
  background: #ff6b6b;
}

#bossWarning {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(139, 0, 0, 0.8);
  display: none;
  z-index: 15;
  animation: pulseRed 0.5s infinite alternate;
}

@keyframes pulseRed {
  0% {
    background: rgba(139, 0, 0, 0.6);
  }
  100% {
    background: rgba(139, 0, 0, 0.9);
  }
}

#bossWarningContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  font-family: "Courier New", monospace;
}

#bossWarningTitle {
  font-size: 48px;
  font-weight: bold;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
  margin-bottom: 20px;
  animation: shake 0.5s infinite;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

#bossCountdown {
  font-size: 72px;
  font-weight: bold;
  color: #ff0000;
  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.9);
  margin: 20px 0;
  animation: countdownPulse 1s infinite;
}

@keyframes countdownPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

#bossDescription {
  font-size: 18px;
  margin-top: 20px;
  opacity: 0.9;
  max-width: 400px;
  line-height: 1.4;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
}

@keyframes comboGlow {
  0% {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  }
  50% {
    text-shadow: 2px 2px 6px rgba(255, 215, 0, 0.7), 0 0 8px rgba(255, 215, 0, 0.5);
  }
  100% {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  }
}

.combo-glow {
  animation: comboGlow 0.5s ease-in-out;
}

/* Mobile-specific improvements */
@media (max-width: 768px) {
  body {
    padding: 0;
    margin: 0;
    /* Prevent iOS Safari bounce */
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }

  #gameContainer {
    width: 100vw;
    height: 100vh;
    /* Use viewport height that accounts for browser UI */
    height: 100dvh; /* Dynamic viewport height for modern browsers */
    border: none;
    border-radius: 0;
    box-shadow: none;
    position: relative;
  }

  #gameCanvas {
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height */
    /* Prevent canvas from being affected by browser UI */
    position: absolute;
    top: 0;
    left: 0;
  }

  /* Rest of mobile styles remain the same... */
  #startScreenContent h1 {
    font-size: 28px;
  }

  #startScreenContent p {
    font-size: 14px;
  }

  #instructions {
    padding: 15px;
    margin: 15px 0;
  }

  #instructions p {
    font-size: 12px;
    margin: 6px 0;
  }

  #playBtn,
  #musicToggleStart {
    padding: 12px 24px;
    font-size: 16px;
    margin: 8px;
    min-height: 44px;
    min-width: 120px;
  }

  #ui {
    font-size: 12px;
    top: 5px;
    left: 5px;
    /* Ensure UI stays above browser UI */
    z-index: 15;
  }

  #comboDisplay {
    font-size: 14px;
    top: 5px;
    right: 5px;
    z-index: 15;
  }

  #comboCounter {
    font-size: 18px;
  }

  #comboMultiplier {
    font-size: 14px;
  }

  #controls {
    display: none;
  }

  #musicControls {
    bottom: 15px; /* Moved up to avoid browser UI */
    right: 5px;
    z-index: 15;
  }

  #musicToggle {
    padding: 8px 12px;
    font-size: 12px;
    min-height: 36px;
    min-width: 80px;
  }

  /* Level up screen mobile improvements */
  #levelUpScreen {
    width: 90%;
    max-width: 400px;
    padding: 15px;
    /* Ensure it's centered properly on mobile */
    max-height: 80vh;
    overflow-y: auto;
  }

  .upgrade-option {
    padding: 12px 15px;
    margin: 8px 0;
    font-size: 14px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  /* Game over screen mobile improvements */
  #gameOverScreen {
    width: 90%;
    max-width: 400px;
    padding: 20px;
    max-height: 80vh;
    overflow-y: auto;
  }

  #restartBtn,
  #menuBtn {
    padding: 12px 20px;
    margin: 8px;
    font-size: 16px;
    min-height: 44px;
    min-width: 120px;
  }

  /* Boss warning mobile improvements */
  #bossWarningTitle {
    font-size: 28px;
  }

  #bossCountdown {
    font-size: 48px;
  }

  #bossDescription {
    font-size: 14px;
    max-width: 280px;
  }
}

/* Landscape mobile adjustments */
@media (max-width: 768px) and (orientation: landscape) {
  #startScreenContent h1 {
    font-size: 24px;
  }

  #instructions {
    padding: 10px;
    margin: 10px 0;
  }

  #ui {
    font-size: 11px;
  }

  #comboDisplay {
    font-size: 12px;
  }

  /* Adjust music controls for landscape */
  #musicControls {
    bottom: 10px;
  }
}

/* Specific adjustments for iOS Safari */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    body {
      /* iOS Safari specific fixes */
      -webkit-overflow-scrolling: touch;
    }

    #gameContainer {
      /* Use safe area insets for notched devices */
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
      height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }

    #gameCanvas {
      height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  #gameCanvas {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}