body {
  margin: 0;
  padding: 0;
  background: black;
  color: #00ff00;
  font-family: 'Courier New', Courier, monospace;
  overflow: hidden;
  /* Use dynamic viewport height that adjusts for mobile keyboards */
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height for modern browsers */
  /* Improve scrolling performance */
  -webkit-overflow-scrolling: touch;
}
#output {
  box-sizing: border-box;
  padding: 2rem;
  width: 100%;
  max-width: 100%;
  /* Use dynamic viewport height that adjusts for mobile keyboards */
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height for modern browsers */
  overflow: auto;
  scroll-behavior: smooth;
  white-space: pre-wrap;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  /* Enhanced scrolling for mobile */
  -webkit-overflow-scrolling: touch;
  /* Improve performance during animations */
  will-change: scroll-position;
  /* Ensure smooth scrolling on all browsers */
  scrollbar-width: thin;
  scrollbar-color: #00ff00 #001100;
}
/* Custom scrollbar for webkit browsers */
#output::-webkit-scrollbar {
  width: 8px;
}
#output::-webkit-scrollbar-track {
  background: #001100;
}
#output::-webkit-scrollbar-thumb {
  background: #00ff00;
  border-radius: 4px;
}
#output::-webkit-scrollbar-thumb:hover {
  background: #00cc00;
}
.line {
  width: 100%;
  word-wrap: break-word;
  line-height: 1.6;
  font-size: 16px;
  /* Improve rendering performance */
  transform: translateZ(0);
}
.cursor {
  display: inline-block;
  width: 0.6ch;
  animation: blink 1s step-end infinite;
  /* Optimize animation performance */
  will-change: opacity;
  transform: translateZ(0);
}
.prompt-label {
  color: #00bb00;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
/* Mobile adjustments */
@media (max-width: 768px) {
  body {
    font-size: 36px !important;
    /* Force iOS to respect font size */
    -webkit-text-size-adjust: none !important;
    text-size-adjust: none !important;
    /* Fallback for browsers that don't support dvh */
    height: 100vh;
    height: 100dvh;
  }
  .line {
    font-size: 36px !important;
    /* Additional iOS font forcing */
    -webkit-text-size-adjust: none !important;
    text-size-adjust: none !important;
  }
  #output {
    padding: 1rem 1rem 2rem 1rem;
    /* Fallback for browsers that don't support dvh */
    height: 100vh;
    height: 100dvh;
    /* Ensure the terminal adjusts when keyboard appears */
    min-height: 0;
    /* Force font size on container too */
    font-size: 36px !important;
    -webkit-text-size-adjust: none !important;
    text-size-adjust: none !important;
  }
  .cursor {
    width: 0.7ch;
  }
  .prompt-label {
    font-size: 36px !important;
    -webkit-text-size-adjust: none !important;
  }
}
/* Additional mobile optimizations */
@media (max-width: 480px) {
  body {
    font-size: 38px !important;
    -webkit-text-size-adjust: none !important;
  }
  .line {
    font-size: 38px !important;
    -webkit-text-size-adjust: none !important;
  }
  #output {
    padding: 0.5rem 0.5rem 1.5rem 0.5rem;
    font-size: 38px !important;
    -webkit-text-size-adjust: none !important;
  }
  .prompt-label {
    font-size: 38px !important;
  }
}
/* Specific handling for mobile keyboards */
@media (max-width: 768px) and (max-height: 500px) {
  /* When keyboard is likely open (short viewport) */
  #output {
    padding-bottom: 1rem;
    height: 100vh;
    height: 100dvh;
  }
}
/* iOS specific targeting */
@supports (-webkit-appearance: none) {
  @media (max-width: 768px) {
    body, .line, #output, .prompt-label {
      font-size: 36px !important;
      -webkit-text-size-adjust: none !important;
    }
  }
  @media (max-width: 480px) {
    body, .line, #output, .prompt-label {
      font-size: 38px !important;
      -webkit-text-size-adjust: none !important;
    }
  }
}
/* Smooth scrolling fallback for older browsers */
@supports not (scroll-behavior: smooth) {
  #output {
    /* JavaScript will handle smooth scrolling for these browsers */
    scroll-behavior: auto;
  }
}

.matrix-rain-1 { color: #00ff41; opacity: 0.2; }
.matrix-rain-2 { color: #00ff41; opacity: 0.4; }
.matrix-rain-3 { color: #00ff41; opacity: 0.6; }
.matrix-rain-4 { color: #00ff41; opacity: 0.8; }
.matrix-rain-5 { color: #00ff41; opacity: 1.0; }