/* Canvas, pantalla de carga y avisos de tamaño. Sin transiciones sobre el juego:
   los fundidos los dibuja el motor con dithering, no el CSS [03 §3.6]. */

body[data-listo="0"] canvas#juego,
body:not([data-listo]) canvas#juego {
  opacity: 0;
}

canvas#juego {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Aviso de tamaño mínimo: no se falsea soporte móvil ni se reescala a fracciones. */
@media (max-width: 479px), (max-height: 269px) {
  body::after {
    content: "La ventana es demasiado pequeña. Necesitas al menos 480×270.";
    position: fixed;
    inset: auto 0 2rem 0;
    text-align: center;
    color: #e0b356;
    font-size: 0.8rem;
    padding: 0 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* El fondo del menú pasa a estático en lugar de fundirse a otro escenario
     [06 §5-ter]; aquí solo se evita cualquier transición de CSS. */
  * {
    transition: none !important;
    animation: none !important;
  }
}