/* La pantalla manda: todo lo demas se aparta. */

:root {
  --fondo: #0a0a0c;
  --tinta: #8a8a92;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--fondo);
  color: var(--tinta);
  font: 500 13px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  -webkit-font-smoothing: antialiased;
}

body {
  display: grid;
  place-items: center;
  padding: clamp(8px, 2vw, 24px);
  overflow: hidden;
}

#tele {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  /* Manda el alto de la ventana: la pantalla es 4:3 y ademas hay que dejar sitio
     para el mando y la linea de ayuda, o se sale por abajo. */
  max-width: min(96vw, calc((100dvh - 128px) * 4 / 3));
}

/* --- la pantalla --------------------------------------------------------- */

#marco {
  position: relative;
  width: 100%;
  /* El teletexto se veia en 4:3, no en la proporcion del buffer de pixeles. */
  aspect-ratio: 4 / 3;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 0 0 2px #16161a,
    0 0 0 10px #0e0e11,
    0 18px 50px -12px rgba(0, 0, 0, .9);
}

#pantalla {
  display: block;
  width: 100%;
  height: 100%;
  /* Sin interpolar: cada pixel tiene que verse como un ladrillo. */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Lineas de barrido. Se escalan con la pantalla para que no hagan muare. */
#scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, .22) 0,
    rgba(0, 0, 0, .22) 1px,
    transparent 1px,
    transparent 4px
  );
  mix-blend-mode: multiply;
}

/* Vinneta y reflejo del tubo. */
#brillo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, .07), transparent 45%),
    radial-gradient(140% 120% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55) 100%);
}

body.sin-crt #scanlines,
body.sin-crt #brillo { display: none; }

body.sin-crt #marco { box-shadow: 0 0 0 2px #16161a; }

/* --- el mando ------------------------------------------------------------ */

#mando {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}

#marcador {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #d8d8de;
  min-width: 4.5em;
}

#marcador.tecleando { color: #ffd400; }

#botones {
  display: flex;
  gap: 8px;
  margin-inline-start: auto;
}

#botones button {
  width: 40px;
  height: 16px;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  opacity: .82;
  transition: opacity .12s, transform .12s;
}

#botones button:hover { opacity: 1; transform: translateY(-1px); }

.c-rojo     { background: #d81f1f; }
.c-verde    { background: #22b04a; }
.c-amarillo { background: #e4c018; }
.c-cian     { background: #1eb6c8; }

#crt-toggle {
  background: none;
  border: 1px solid #2a2a30;
  color: var(--tinta);
  border-radius: 4px;
  padding: 3px 9px;
  font: inherit;
  font-size: 11px;
  letter-spacing: .06em;
  cursor: pointer;
}

#crt-toggle:hover { color: #d8d8de; border-color: #3a3a44; }

/* --- el teclado ----------------------------------------------------------- */

/* En pantalla grande no hace falta: se teclea y punto. En movil es lo unico
   que permite cambiar de pagina, asi que ahi manda. */
#teclado { display: none; }

#teclado button {
  appearance: none;
  border: 1px solid #2b2b33;
  background: #17171b;
  color: #c9c9d2;
  border-radius: 8px;
  font: inherit;
  font-size: 19px;
  font-weight: 600;
  padding: 12px 0;
  cursor: pointer;
  /* Sin retardo de 300 ms ni zoom al tocar dos veces. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#teclado button:active {
  background: #26262e;
  color: #fff;
}

#teclado button.aux {
  font-size: 16px;
  color: #7a7a86;
}

#ayuda {
  margin: 0;
  font-size: 11.5px;
  color: #5a5a64;
  text-align: center;
}

#ayuda b { color: #86868f; font-weight: 700; }

/* --- movil ---------------------------------------------------------------- */

/* Sin teclado fisico no se puede navegar, asi que sale el mando. Se activa por
   puntero grueso, no solo por ancho: una tablet tambien lo necesita. */
@media (max-width: 820px), (pointer: coarse) {
  body {
    /* En movil la pantalla se pega arriba y el mando queda a mano abajo. */
    place-items: start center;
    padding: 8px;
  }

  #tele {
    max-width: 100%;
    gap: 10px;
  }

  #marco { border-radius: 8px; }

  #teclado {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 340px;
  }

  #ayuda { display: none; }

  /* Los botones de color, mas grandes para el dedo. */
  #botones button { width: 52px; height: 26px; }
}