body {
    margin: 0;
    overflow: hidden;
    background-color: #000;
    touch-action: none; /* Prevent scroll on mobile */
    -webkit-user-select: none; /* Prevent text selection on mobile */
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

canvas {
    display: block;
    touch-action: none; /* Critical for touch events */
}

/* Desktop/landscape: fill viewport */
@media (min-aspect-ratio: 1/1) {
    canvas {
        width: 100vw;
        height: 100vh;
    }
}

/* Mobile portrait: square canvas, centered vertically */
@media (max-aspect-ratio: 1/1) {
    canvas {
        width: 100vw;
        height: 100vw; /* Square */
    }
}

.controls {
    position: absolute;
    top: 10px;
    left: 10px;
}