/* C64 Font Definition */
@font-face {
  font-family: 'C64 Pro Mono';
  src: url('../fonts/C64_Pro_Mono-STYLE.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #352879; /* C64 Blue */
  color: #6C5EB5; /* C64 Light Blue */
  font-family: 'C64 Pro Mono', monospace;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  overflow: hidden;
  /* Disable font smoothing for authentic pixelated look */
  font-smooth: never;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
}

/* Main Container */
.c64-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000000; /* Black for space */
  position: relative;
  overflow: hidden;
}

/* Screen Border (TV-like effect) */
.c64-screen {
  width: calc(100% - 80px);
  height: calc(100% - 80px);
  max-width: calc((100vh - 80px) * 1.33); /* 4:3 aspect ratio */
  max-height: calc((100vw - 80px) * 0.75); /* 4:3 aspect ratio */
  background-color: #352879;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 40px solid #6C5EB5;
  box-sizing: border-box;
}

/* Terminal Display Area */
.c64-display {
  width: 100%;
  height: 100%;
  padding: 5%;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  font-size: calc(100vw / 40); /* Scale font to fit ~40 chars */
  max-font-size: calc(100vh / 25); /* But don't exceed ~25 lines */
}

/* Terminal Output */
.c64-output {
  white-space: pre-wrap;
  word-wrap: break-word;
  margin-bottom: 0;
}

/* Input Line */
.c64-input-line {
  display: flex;
  align-items: center;
}

/* Input display - preserve spaces */
#input-display {
  white-space: pre;
}

/* Cursor */
.c64-cursor {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: #6C5EB5;
  animation: cursor-blink 1s step-start infinite;
  vertical-align: text-bottom;
}

@keyframes cursor-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Input Field (Hidden) */
.c64-input {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

/* Text Styles */
.c64-text {
  text-transform: uppercase;
}

/* Ready Prompt */
.ready {
  margin-top: 16px;
}

/* Scrollbar Styling */
.c64-display::-webkit-scrollbar {
  width: 0;
  display: none;
}

.c64-display {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Responsive font sizing */
@media (min-aspect-ratio: 4/3) {
  /* Wider than 4:3 - constrain by height */
  .c64-display {
    font-size: calc((100vh - 160px) / 30);
  }
}

@media (max-aspect-ratio: 4/3) {
  /* Taller than 4:3 - constrain by width */
  .c64-display {
    font-size: calc((100vw - 160px) / 45);
  }
}

/* Minimum font size for readability */
.c64-display {
  min-font-size: 12px;
}

/* Starfield Background */
.stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.star {
  position: absolute;
  border-radius: 50%;
}

/* Star color classes for variation */
.star-white {
  background-color: #FFFFFF;
}

.star-blue {
  background-color: #B8D4FF;
}

.star-yellow {
  background-color: #FFFACD;
}

.star-red {
  background-color: #FFB8B8;
}