/* The 3D Canvas Base */
body, html { margin: 0; padding: 0; overflow: hidden; background-color: #050505; }
#nexus-canvas { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1; }

/* The UI Overlay Container */
#mobile-ui-overlay {
    position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 9999; 
    pointer-events: none; /* Lets you touch the 3D canvas behind the UI */
}

/* Joystick Zone */
#joystick-zone {
    position: absolute; bottom: 50px; left: 50px; width: 120px; height: 120px;
    pointer-events: auto; /* Catches the thumb for movement */
}

/* Action Button */
#action-button {
    position: absolute; bottom: 50px; right: 50px;
    padding: 15px 30px; 
    background: rgba(0, 255, 255, 0.1);
    border: 2px solid cyan; color: cyan; 
    font-family: monospace; font-size: 16px; font-weight: bold; 
    border-radius: 8px; text-transform: uppercase;
    pointer-events: auto;
    user-select: none;
}
#action-button:active { background: cyan; color: black; }