.btn.btn-sm {
    --bs-btn-padding-x: 12px;
    --bs-btn-padding-y: 6px;
}

.btn:not(.btn-sm) {
    --bs-btn-padding-x: 16px;
    --bs-btn-padding-y: 8px;
}

.btn-gradient-blue-to-purple {
    background: linear-gradient(
                    90deg,
                    var(--lorcana-spelen-light-blue) 0%,
                    color-mix(in srgb, var(--lorcana-spelen-light-blue) 50%, var(--lorcana-spelen-purple) 50%) 50%,
                    var(--lorcana-spelen-purple) 100%
                );
    --bs-btn-border-width: 0;
    --bs-btn-color: white;
    --bs-btn-hover-color: white;
    --bs-btn-active-color: white;
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.5rem;
    transition: background 0.3s ease, transform 0.2s ease; /* Smooth transitions */
}

.btn-gradient-blue-to-purple:focus {
    outline: 2px solid var(--lorcana-spelen-light-blue-active);
}

.btn-gradient-blue-to-purple:hover {
    background: linear-gradient(
                    90deg,
                    var(--lorcana-spelen-light-blue-hover) 0%,
                    color-mix(in srgb, var(--lorcana-spelen-light-blue-hover) 50%, var(--lorcana-spelen-purple-hover) 50%) 50%,
                    var(--lorcana-spelen-purple-hover) 100%
                );
}

.btn-gradient-blue-to-purple:active {
    background: linear-gradient(
                    90deg,
                    var(--lorcana-spelen-light-blue-active) 0%,
                    color-mix(in srgb, var(--lorcana-spelen-light-blue-active) 50%, var(--lorcana-spelen-purple-active) 50%) 50%,
                    var(--lorcana-spelen-purple-active) 100%
                );
}

.btn-gradient-yellow-to-grey {
    background: linear-gradient(
                    90deg,
                    var(--lorcana-spelen-yellow) 0%,
                    color-mix(in srgb, var(--lorcana-spelen-yellow) 50%, var(--lorcana-spelen-grey) 50%) 50%,
                    var(--lorcana-spelen-grey) 100%
                );
    --bs-btn-border-width: 0;
    --bs-btn-color: black;
    --bs-btn-hover-color: black;
    --bs-btn-active-color: black;
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.5rem;
    transition: background 0.3s ease, transform 0.2s ease; /* Smooth transitions */
}

.btn-gradient-yellow-to-grey:focus {
    outline: 2px solid var(--lorcana-spelen-yellow-active);
}

.btn-gradient-yellow-to-grey:hover {
    background: linear-gradient(
                    90deg,
                    var(--lorcana-spelen-yellow-hover) 0%,
                    color-mix(in srgb, var(--lorcana-spelen-yellow-hover) 50%, var(--lorcana-spelen-grey-hover) 50%) 50%,
                    var(--lorcana-spelen-grey-hover) 100%
                );
}

.btn-gradient-yellow-to-grey:active {
    background: linear-gradient(
                    90deg,
                    var(--lorcana-spelen-yellow-active) 0%,
                    color-mix(in srgb, var(--lorcana-spelen-yellow-active) 50%, var(--lorcana-spelen-grey-active) 50%) 50%,
                    var(--lorcana-spelen-grey-active) 100%
                );
}