.joystick-icon {
    filter: drop-shadow(0 2px 4px rgba(var(--black-rgb), var(--opacity-20)));
}

.joystick-icon.joystick-btn {
    height: 48px;
    width: auto;
}

.joystick-body-stick { fill: var(--magenta-500); }
.joystick-body-chuck { fill: var(--cyan-500); }

.joystick-top.pulse,
.joystick-trigger.pulse {
    --pulse-color: var(--green);
    animation: pulse-button 1.5s ease-in-out infinite;
}

@keyframes pulse-button {
    0%, 100% { fill: var(--surface-alt); }
    50% { fill: var(--pulse-color); }
}

.start-hint-bimanual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-4);
}

.joystick-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-8);
}