/**
 * Commodore 64 Theme
 * Updated for 3-layer architecture (Background/Screen/Terminal)
 */

@font-face {
  font-family: 'C64';
  src: url('../../../fonts/C64_Pro_Mono-STYLE.woff') format('woff');
}

:root {
  /* Pepto C64 Color Palette - Official VIC-II colors */
  --c64-black: #000000;
  --c64-white: #FFFFFF;
  --c64-red: #68372B;
  --c64-cyan: #70A4B2;
  --c64-purple: #6F3D86;
  --c64-green: #588D43;
  --c64-blue: #352879;
  --c64-yellow: #B8C76F;
  --c64-orange: #6F4F25;
  --c64-brown: #433900;
  --c64-light-red: #9A6759;
  --c64-dark-grey: #444444;
  --c64-grey: #6C6C6C;
  --c64-light-green: #9AD284;
  --c64-light-blue: #6C5EB5;
  --c64-light-grey: #959595;

  /* Authentic C64 screen dimensions: 40 columns × 25 rows */
  --c64-columns: 40;
  --c64-padding: 40px;
}

body {
  font-family: 'C64', 'Courier New', monospace;
  /* Calculate font size to fit exactly 40 characters across width */
  /* Monospace characters are typically 0.6em wide */
  font-size: calc((100vw - var(--c64-padding)) / (var(--c64-columns) * 0.6));
  line-height: 1.2;
  color: var(--c64-light-blue);
}

/* ==========================================
   C64: Fullscreen terminal only
   ========================================== */
.terminal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--c64-blue);
  color: var(--c64-light-blue);
  padding: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ==========================================
   TERMINAL CONTENT
   ========================================== */
.output {
  overflow-y: auto;
  overflow-x: hidden;
  word-wrap: break-word;
}

.output-line {
  min-height: 0;
  line-height: 1.2;
}

.prompt-line {
  /* Appears naturally after output content */
}

#command-input {
  color: var(--c64-light-blue);
}

.cursor {
  width: 0.6em;
  height: 1em;
  background: var(--c64-light-blue);
}

/* Colors */
.color-white { color: var(--c64-white); }
.color-cyan { color: var(--c64-cyan); }
.color-green { color: var(--c64-green); }
.color-yellow { color: var(--c64-yellow); }
.color-red { color: var(--c64-red); }
.color-purple { color: var(--c64-purple); }

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 500px) {
  :root {
    --c64-padding: 24px;
  }
  body {
    font-size: calc((100vw - var(--c64-padding)) / (var(--c64-columns) * 0.6));
  }
  .terminal { padding: 12px; }
}

@media (max-width: 380px) {
  :root {
    --c64-padding: 20px;
  }
  body {
    font-size: calc((100vw - var(--c64-padding)) / (var(--c64-columns) * 0.6));
  }
  .terminal { padding: 10px; }
}