/*
  pantalla.css — sólo métrica.

  Aquí no se decora nada: no hay bordes redondeados, ni sombras suaves, ni
  degradados. Todo lo que se ve lo dibuja el canvas, celda por celda.
  Esta hoja existe para cargar las fuentes, para que el lienzo no mienta
  sobre su tamaño, y para la impresión.
*/

/* Las CP437 viven en ../psfx/. Se toman prestadas por ruta relativa,
   con la misma economía que usa vent/. Cada una trae su métrica de celda. */
@font-face { font-family: "mtVGA";     src: url("../assets/fonts/Px437_IBM_VGA_9x8-2x.ttf")   format("truetype"); font-display: block; }
@font-face { font-family: "mtXGA";     src: url("../assets/fonts/Px437_IBM_XGA-AI_12x20.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "mtNEC";     src: url("../assets/fonts/Px437_NEC_APC3_8x16-2x.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "mtToshiba"; src: url("../assets/fonts/Px437_ToshibaTxL2_8x16.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "mtWang";    src: url("../assets/fonts/Px437_Wang_Pro_Mono.ttf")    format("truetype"); font-display: block; }
@font-face { font-family: "mtHP100";   src: url("../assets/fonts/PxPlus_HP_100LX_6x8.ttf")    format("truetype"); font-display: block; }
@font-face { font-family: "mtHP150";   src: url("../assets/fonts/PxPlus_HP_150_re.ttf")       format("truetype"); font-display: block; }
@font-face { font-family: "mtRainbow"; src: url("../assets/fonts/PxPlus_Rainbow100_re_80.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "mtTseng";   src: url("../assets/fonts/Ac437_TsengEVA_132_6x14.ttf") format("truetype"); font-display: block; }

/* alfabetos que nadie lee: sólo para inscripciones */
@font-face { font-family: "mtPhags";   src: url("../assets/fonts/phagspa.ttf")                 format("truetype"); font-display: swap; }
@font-face { font-family: "mtEgipcio"; src: url("../assets/fonts/NotoSansEgyptianHieroglyphs-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "mtSign";    src: url("../assets/fonts/SuttonSignWritingLine.ttf")   format("truetype"); font-display: swap; }
@font-face { font-family: "mtLinearB"; src: url("../assets/fonts/NOTOSANSLINEARB-REGULAR.TTF") format("truetype"); font-display: swap; }
@font-face { font-family: "mtUnscii";  src: url("../assets/fonts/unscii-16-full.woff")   format("woff"); font-display: block; }
@font-face { font-family: "mtSymbola"; src: url("../assets/fonts/Symbola.otf")        format("opentype"); font-display: swap; }
@font-face { font-family: "mtAnatolio"; src: url("../assets/fonts/NOTOSANSANATOLIANHIEROGLYPHS-REGULAR.TTF") format("truetype"); font-display: swap; }

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: #000;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}

#marco {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

#pantalla {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  outline: none;
  touch-action: none;
  cursor: crosshair;
  max-width: 100%;
  max-height: 100%;
}

/* el espejo accesible existe para los lectores de pantalla, no para la vista */
#espejo {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

#constancia { display: none; }

#singuion {
  color: #c8c8c8;
  font: 14px/1.35 "mtVGA", monospace;
  padding: 2rem;
  white-space: pre;
}

/*
  Impresión: la obra sale como constancia del recorrido.
  Papel blanco, tinta negra, monoespaciada, sin fondos. El volcado de núcleo
  se imprime con esta misma hoja: es un poema, no una captura de pantalla.
*/
@media print {
  html, body { height: auto; overflow: visible; background: #fff; }
  #marco, #singuion { display: none !important; }
  #constancia {
    display: block;
    color: #000;
    background: #fff;
    font: 9pt/1.2 "mtVGA", ui-monospace, "Courier New", monospace;
    white-space: pre;
    padding: 0;
  }
  @page { margin: 14mm; }
}

/* alto contraste: la paleta la cambia el motor; aquí sólo el fondo del marco */
@media (prefers-contrast: more) {
  html, body, #marco { background: #000; }
}

/* movimiento reducido: sin transiciones. La obra sigue completa así. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}