body {
    margin: 0;
    background-color: #0b0b1a;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;
    /* Orden 9: evita selección de texto y el menú contextual por pulsación larga en móvil. */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
/* --- TAREA B (Orden 9): escalado por CSS manteniendo la proporción 2:1 ---
   La resolución INTERNA del canvas sigue siendo 800x400 (atributos width/height en el
   HTML); aquí solo se ajusta el TAMAÑO DE PRESENTACIÓN. Con aspect-ratio: 2/1 y height
   automática, el ancho manda y la altura se deriva sin deformar.
   width = el menor de:
     - 96vw                  -> no superar el ancho de la ventana
     - (100vh - 130px) * 2   -> que la altura (=ancho/2) deje sitio al título y la ayuda
   max-width: 800px -> en escritorio NO se amplía más allá del tamaño nativo (se mantiene
   idéntico a antes); en ventanas pequeñas se reduce para que no se recorte. */
canvas {
    display: block;
    aspect-ratio: 2 / 1;
    width: min(96vw, (100vh - 130px) * 2);
    height: auto;
    max-width: 800px;
    background-color: #16092e;
    border: 4px solid #ff2bd6;            /* magenta neon */
    box-shadow: 0 0 30px #ff2bd6, 0 0 60px #9d4edd;  /* glow rosa + violeta */
    border-radius: 5px;
    touch-action: none;                   /* el canvas no hace scroll/zoom: es superficie de juego */
}
/* Móvil en apaisado (poca altura): compacta título/ayuda y deja que el canvas se amplíe
   para llenar la pantalla lo máximo posible sin deformarse ni recortarse. */
@media (max-height: 500px) {
    h1 { font-size: 1.1rem; margin: 2px 0 4px; }
    #ui { margin-top: 4px; }
    #ui p { font-size: 0.8em; }
    canvas {
        max-width: none;                       /* permite ampliar por encima de 800px en móvil */
        width: min(99vw, (100vh - 52px) * 2);  /* reserva mínima para el título/ayuda compactos */
    }
}
#ui {
    margin-top: 15px;
    text-align: center;
}
h1 {
    margin: 0 0 10px 0;
    color: #00f0ff;                        /* cían neon */
    text-shadow: 0 0 10px #00f0ff, 0 0 20px #9d4edd;
    letter-spacing: 1px;
}
p { margin: 0; font-size: 1.1em; color: #c77dff; }  /* violeta claro */