/* c64.css - CRT shell and 40x25 character grid for the C64 screen emulator.
   Every cell is a fixed 16x16 box, so grid alignment never depends on the
   font's advance width. Solid-colour art is done with cell backgrounds
   rather than block glyphs, which keeps it pixel-exact everywhere. */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: #070709;
  overflow: hidden;
}

body {
  display: flex; align-items: center; justify-content: center;
  font-family: 'C64 Pro Mono', 'Commodore 64 Pixelized', ui-monospace,
               'DejaVu Sans Mono', Menlo, Consolas, monospace;
  -webkit-font-smoothing: none;
}

#c64-stage {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}

/* 640x400 screen + 32px border on each side. */
#c64-crt {
  position: relative;
  width: 704px; height: 464px;
  background: #6C5EB5;
  border-radius: 16px;
  transform-origin: center center;
  overflow: hidden;
  box-shadow:
    0 0 0 12px #16161b,
    0 0 70px rgba(108, 94, 181, 0.40),
    inset 0 0 140px rgba(0, 0, 0, 0.85);
  animation: c64-flicker 6s infinite;
}

@keyframes c64-flicker {
  0%, 96%   { opacity: 1; }
  97%       { opacity: 0.94; }
  98%       { opacity: 1; }
  99%       { opacity: 0.97; }
  100%      { opacity: 1; }
}

/* Raster bars live behind the screen, so they only show in the border ring. */
#c64-raster { position: absolute; inset: 0; z-index: 1; }

#c64-screen {
  position: absolute; left: 32px; top: 32px;
  width: 640px; height: 400px;
  z-index: 2;
  background: #352879;
  display: grid;
  grid-template-columns: repeat(40, 16px);
  grid-auto-rows: 16px;
}

.c64-cell {
  width: 16px; height: 16px;
  line-height: 16px; font-size: 14px;
  text-align: center; white-space: pre;
  color: #6C5EB5;
  text-shadow: 0 0 5px currentColor;
}

/* Sprites draw over the character layer, same as the real VIC-II default. */
#c64-sprites { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

#c64-scan {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.32) 2px, rgba(0,0,0,0.32) 4px);
}

#c64-vig {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0) 45%, rgba(0,0,0,0.30) 78%, rgba(0,0,0,0.70) 100%);
}

@media (prefers-reduced-motion: reduce) {
  #c64-crt { animation: none; }
}