* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #161f27;
  font-family: "FiraCode Nerd Font", monospace;
  color: #fff;
  /* Prevent horizontal scrollbars triggered by wide content */
  overflow-x: hidden;
}

.terminal {
  padding: 0.75rem 1.25rem 1.25rem;
  min-height: 100vh;
}

/* Terminal input line */
.line {
  display: flex;
  align-items: center;
  line-height: 1.4;
  margin-bottom: 0.25em;
}

.prompt {
  flex-shrink: 0;
  margin-right: 0.7ch; /* Space between prompt and input */
}

.line input {
  flex: 1;
  min-width: 0; /* Prevent flex item overflow */
  background: transparent;
  border: none;
  outline: none;
  color: inherit;
  font: inherit;
  caret-shape: block;
  padding: 1px 0; /* Minor vertical alignment tweak */
}

/* Static text shown after a command is entered */
.echoed-command {
  flex: 1;
  word-break: break-all;
}

/* Command output container */
.output {
  margin-top: 0.25em;
  margin-bottom: 1em;
}

.output-line {
  white-space: pre-wrap; /* Allow wrapping for normal output */
  word-break: break-word;
  line-height: 1.3;
}

.ascii-art {
  display: block;
  white-space: pre; /* Preserve whitespace exactly for ASCII */
  overflow-x: auto; /* Add scrollbar if art line is too wide */
  color: greenyellow;
  line-height: 1.1;
}

/* Mobile screen adjustments */
@media (max-width: 600px) {
  body {
      font-size: 0.9rem;
  }

  .terminal {
      padding: 0.75rem 1rem 1rem;
  }

  .prompt {
      /* Reduce space next to prompt on mobile */
      margin-right: 0.75ch;
  }

  .output-line {
      /* Ensure wrapping works correctly on mobile */
      white-space: pre-wrap;
      word-break: break-word;
  }

  .ascii-art {
      /* Force wrap ASCII art on mobile, hide overflow */
      /* Note: This might visually break the intended art layout */
      white-space: pre-wrap !important;
      word-break: break-word !important;
      overflow-x: hidden;
      font-size: 10px; /* Specific size adjustment for mobile art */
  }
}

/* General link styling */
a {
  color: orange;
}
a:hover {
  text-decoration: underline;
}

/* Input cursor color */
.line input:focus {
  caret-color: #fff;
}