.viewport::after {
  position: absolute;
  inset: 0;
  z-index: 4;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 45%, rgba(67,56,202,.12)),
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(103,232,249,.025) 5px 6px);
  mix-blend-mode: screen;
}
@media (hover: hover) and (pointer: fine) {
  .touch-controls { display: none; }
  .viewport { cursor: crosshair; }
  footer span::after {
    content: " · CLICK DISPARA · CLICK DERECHO DASH";
    color: #67e8f9;
  }
}


/* mobile-override-v8: el ancho móvil manda aunque el navegador anuncie un puntero fino. */
@media (max-width: 760px) {
  .touch-controls { display: flex !important; }
}