/* ============================================================================
   MINIJUEGO DE CAPTURA · hoja mínima.

   Todo el arte se pinta en el canvas; esto solo coloca el lienzo y mata los
   gestos del navegador (scroll, zoom, doble-toque, resaltado).

   REGLA DURA: esta hoja se carga TAMBIÉN dentro de index.html, así que no
   puede tocar html/body ni declarar variables en :root. La app ya define
   --gold, --muted, --border y --fondo en su propia paleta (ui/anim.css): si
   esta hoja las redefiniera, repintaría las animaciones del juego entero.
   Por eso aquí los colores van literales y todo va prefijado con .mjc-.
   ========================================================================= */

/* La capa que se levanta sobre la app cuando arranca la captura. */
.mjc-capa{
  position:absolute; inset:0; z-index:95;
  background:#0f172a;
  animation: mjc-entrar 0.3s ease both;
}
@keyframes mjc-entrar{ from{ opacity:0 } to{ opacity:1 } }

.mjc-capa--fuera{
  animation: mjc-salir 0.32s ease both;
  pointer-events:none;
}
@keyframes mjc-salir{ from{ opacity:1 } to{ opacity:0 } }

/* El anfitrión del lienzo. */
.mjc-host{
  position:absolute; inset:0;
  background:#0f172a;
  overflow:hidden;
}

.mjc-host canvas{
  display:block; width:100%; height:100%;
  touch-action:none;                 /* sin scroll ni pinch sobre el lienzo */
  user-select:none; -webkit-user-select:none;
  -webkit-touch-callout:none;
  cursor:default;
}

/* Rótulo para lectores de pantalla: el canvas no cuenta nada por sí solo. */
.mjc-sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

@media (prefers-reduced-motion: reduce){
  .mjc-capa, .mjc-capa--fuera{ animation:none }
}