/* ==========================================================================
   ASTROFAGO.COM - ESTILOS DEL MOTOR DE CANVAS ASCII
   ========================================================================== */

:root {
  --terminal-cyan: #00f0ff;
  --terminal-dark: #000000;
  --font-mono: 'Geist Mono', SFMono-Regular, Consolas, monospace;
}

/* Reset general */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body, html {
  background-color: var(--terminal-dark);
  color: var(--terminal-cyan);
  font-family: var(--font-mono);
  overflow-x: hidden;
  height: 100%;
  width: 100%;
}

/* Scrollable Container - 400dvh para conducir el scroll natural */
.scroll-container {
  height: 400dvh;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

/* Contenedor del lienzo fixed a pantalla completa */
.canvas-wrapper {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--terminal-dark);
  z-index: 10;
  overflow: hidden;
}

#ascii-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--terminal-dark);
}

/* Filtro CRT analógico (Scanlines retro y curva de tubo de vidrio) */
.crt-overlay {
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.22) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.015), rgba(0, 255, 0, 0.008), rgba(0, 0, 255, 0.015));
  background-size: 100% 3px, 6px 100%;
  pointer-events: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
}

/* Efecto de viñeta radial sobre el terminal */
body::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  background: radial-gradient(circle, rgba(18, 16, 16, 0) 65%, rgba(0, 0, 0, 0.45) 120%);
  opacity: 1;
  z-index: 98;
  pointer-events: none;
}

/* Ocultar barra de scroll para estética pura, manteniendo el scroll de la ventana */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--terminal-dark);
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.15);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 240, 255, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .crt-overlay {
    background: none;
  }
}