html, body {
    overflow: hidden;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #090b14;
    font-family: ui-sans-serif, system-ui, sans-serif;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

#canvas {
    background: radial-gradient(circle at center, #10192e 0%, #060810 75%, #020306 100%);
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
}

#canvas.playing {
    cursor: crosshair !important;
}

@media (max-width: 768px), (pointer: coarse) {
    body {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #canvas {
        width: min(360px, 92vw);
        height: auto;
        aspect-ratio: 360 / 540;
        max-height: 72vh;
        border-radius: 10px;
        box-shadow: 0 6px 28px rgba(0, 0, 0, 0.5);
    }
}