/* =============================================
   COMMODORE 64 SCREEN COMPONENT
   C64 default palette:
     Blue (color 6)       #3535CC  — screen background
     Light Blue (color 14) #7070E8 — border
     Foreground            #7979FB — text (light blue)
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

/* Outer TV-style border — the C64's distinctive colored frame */
.c64-outer-border {
  background: #6A6AE0;          /* C64 light-blue border color */
  padding: 28px 36px;
  display: inline-block;
  width: 100%;
  box-shadow:
    inset 0 0 0 4px #4848C8,    /* inner shadow gives depth to border */
    0 0 40px rgba(106,106,224,0.4),
    0 0 80px rgba(53,53,204,0.2);
  position: relative;
}

/* The actual screen area */
.c64-screen {
  background: #3535CC;
  padding: 20px 24px 20px 24px;
  width: 100%;
  min-height: 320px;
  position: relative;
  overflow: hidden;
  /* Subtle inner glow to simulate phosphor */
  box-shadow: inset 0 0 30px rgba(0,0,60,0.5);
}

/* Scanline overlay specific to the C64 screen */
.c64-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 40, 0.18) 3px,
    rgba(0, 0, 40, 0.18) 4px
  );
  pointer-events: none;
  z-index: 2;
}

/* C64 BASIC text — VT323 at large size mimics the chunky PETSCII look.
   scaleX(2) + width:50% makes each glyph twice as wide while still filling
   the full screen area (2 × 50% layout width = 100% visual width). */
.c64-text {
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 22px;
  line-height: 1.35;
  color: #7979FB;               /* C64 light blue foreground */
  text-shadow:
    0 0 4px rgba(121,121,251,0.7),
    0 0 10px rgba(121,121,251,0.3);
  white-space: pre;
  overflow: visible;
  margin: 0;
  letter-spacing: 0;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
  width: 50%;
  transform: scaleX(2);
  transform-origin: top left;
}

/* Block cursor — blinks at ~1Hz like the real C64 */
.c64-cursor {
  display: inline-block;
  color: #7979FB;
  text-shadow: 0 0 6px rgba(121,121,251,0.9);
  animation: c64blink 1.0s step-end infinite;
  vertical-align: bottom;
}

@keyframes c64blink {
  0%, 49%  { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Responsive: reduce font so the 2× scaled text stays readable without
   the screen becoming too tall on narrow viewports */
@media (max-width: 600px) {
  .c64-text { font-size: 14px; }
  .c64-outer-border { padding: 16px 18px; }
  .c64-screen { padding: 12px 14px; }
}