.btn:hover {
    transform: scale(1.02);
    transition: 0.2 ease-in-out;
}

.btn.disabled {
    filter: grayscale(60%) brightness(80%);
}

.btn-primary {
    background: var(--game-primary-gradient);
    border: 2px solid var(--game-primary-dark) !important;
    border-radius: 8px;
    padding: 10px 20px;
    color: white;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.6), 3px 3px 5px rgba(0,0,0,0.5);
    transition: 0.2s;
}

.btn-primary:hover {
    background: var(--game-primary-gradient-dark);
}

.btn-primary:active {
    background: var(--game-primary-gradient-subtle);
}

.btn-secondary {
    background: var(--game-secondary-gradient);
    border: 2px solid var(--game-secondary-dark) !important;
    border-radius: 8px;
    padding: 10px 20px;
    color: white;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.6), 3px 3px 5px rgba(0,0,0,0.5);
    transition: 0.2s;
}

.btn-secondary:hover {
    background: var(--game-secondary-gradient-dark);
}

.btn-secondary:active {
    background: var(--game-secondary-gradient-subtle);
}

.btn-success {
    background: var(--game-success-gradient);
    border: 2px solid var(--game-success-dark) !important;
    border-radius: 8px;
    padding: 10px 20px;
    color: white;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.6), 3px 3px 5px rgba(0,0,0,0.5);
    transition: 0.2s;
}

.btn-success:hover {
    background: var(--game-success-gradient-dark);
}

.btn-success:active {
    background: var(--game-success-gradient-subtle);
}

.btn-check:checked+.btn {
    background-color: var(--game-success-subtle) !important;
    border: 2px solid var(--game-success) !important;
}

.btn-danger {
    background: var(--game-danger-gradient);
    border: 2px solid var(--game-danger-dark) !important;
    border-radius: 8px;
    padding: 10px 20px;
    color: white;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.6), 3px 3px 5px rgba(0,0,0,0.5);
    transition: 0.2s;
}

.btn-danger:hover {
    background: var(--game-danger-gradient-dark);
}

.btn-danger:active {
    background: var(--game-danger-gradient-subtle);
}

.btn-warning {
    background: var(--game-warning-gradient);
    border: 2px solid var(--game-warning-dark) !important;
    border-radius: 8px;
    padding: 10px 20px;
    color: white;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.6), 3px 3px 5px rgba(0,0,0,0.5);
    transition: 0.2s;
}

.btn-warning:hover {
    background: var(--game-warning-gradient-dark);
}

.btn-warning:active {
    background: var(--game-warning-gradient-subtle);
}

.btn-info {
    background: var(--game-info-gradient);
    border: 2px solid var(--game-info-dark) !important;
    border-radius: 8px;
    padding: 10px 20px;
    color: white;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.6), 3px 3px 5px rgba(0,0,0,0.5);
    transition: 0.2s;
}

.btn-info:hover {
    background: var(--game-info-gradient-dark);
}

.btn-info:active {
    background: var(--game-info-gradient-subtle);
}

.btn-no-purchase {
    background: var(--game-no-purchase-gradient);
    border-color: #111;
    color: #777;
    cursor: not-allowed;
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.8), 2px 2px 4px rgba(0,0,0,0.4);
    filter: grayscale(60%) brightness(80%);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.btn-no-purchase:hover {
    background: var(--game-no-purchase-gradient-dark);
}

.btn-no-purchase:active {
    background: var(--game-no-purchase-gradient-subtle);
}

.btn-plank {
    background-image: url('../images/Game/Plank_Button.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    border: none;
}

.btn-upgrade {
    background: var(--game-main);
    border: 5px solid var(--game-warning-dark);
    width: 74px;
    height: 74px;
    padding: 0;
    margin: 1px;
}

.btn-upgrade:hover {
    background: var(--game-main-dark);
    border: 5px solid var(--game-warning-dark);
    padding: 0;
    transform: scale(1);
}

.btn-upgrade.btn-no-purchase {
    cursor: not-allowed;
    filter: grayscale(60%) brightness(80%);
}

.btn-prestige {
    background: var(--game-secondary-gradient);
    border: 5px solid white;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.6), 3px 3px 5px rgba(0,0,0,0.5);
    width: 100px;
    height: 100px;
}

.btn-prestige:hover {
    background: var(--game-secondary-gradient-dark);
    border: 5px solid lightgray;
}

.btn-prestige:active {
    background: var(--game-secondary-gradient-subtle);
}

.btn-prestige-bought {
    border: 5px solid burlywood;
}

.btn-prestige-bought:hover {
    border: 5px solid rgb(175, 145, 106);
}

.btn-prestige-disabled {
    background: color-mix(var(--game-secondary-gradient), rgba(255, 255, 255, 0.5), 50%);
    border: 5px solid white;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.6), 3px 3px 5px rgba(0,0,0,0.5);
    width: 100px;
    height: 100px;
}

.btn-prestige-disabled:hover {
    background: color-mix(var(--game-secondary-gradient-dark), rgba(255, 255, 255, 0.5), 50%);
    border: 5px solid lightgray;
}

.btn-prestige-disabled:active {
    background: color-mix(var(--game-secondary-gradient-subtle), rgba(255, 255, 255, 0.5), 50%);
}

#moneyButton {
    width: 50%;

    transition: width 0.5s ease;
}

#moneyButton:hover {
    width: 52%;
    cursor: pointer;
}

#moneyButton:active {
    animation: bounce 0.2s ease;
    width: 48%;
}

.btn-main {
    background: var(--game-main-gradient);
    border: 2px solid var(--game-main-dark);
    border-radius: 8px;
    padding: 10px 20px;
    color: white;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.6), 3px 3px 5px rgba(0,0,0,0.5);
    transition: 0.2s;
}

.btn-main:hover {
    background: var(--game-main-gradient-dark);
}

.btn-main:active {
    box-shadow: inset -2px -2px 4px rgba(0,0,0,0.6);
    transform: scale(0.98);
}

.btn-hard-mode {
    background: var(--game-hard-mode-gradient);
    border: 2px solid var(--game-hard-mode-dark);
    border-radius: 8px;
    padding: 10px 20px;
    color: white;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.6), 3px 3px 5px rgba(0,0,0,0.5);
    transition: 0.2s;
}

.btn-hard-mode:hover {
    background: var(--game-hard-mode-gradient-dark);
}
.btn-hard-mode:active {
    box-shadow: inset -2px -2px 4px rgba(0,0,0,0.6);
    transform: scale(0.98);
}

.btn-violet {
    background: var(--game-violet-gradient);
    border: 2px solid var(--game-violet-dark) !important;
    border-radius: 8px;
    padding: 10px 20px;
    color: white;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.6), 3px 3px 5px rgba(0,0,0,0.5);
    transition: 0.2s;
}

.btn-violet:hover {
    background: var(--game-violet-gradient-dark);
}

.btn-violet:active {
    background: var(--game-violet-gradient-subtle);
}

.btn-gold {
    background: var(--game-gold-gradient);
    border: 2px solid var(--game-gold-dark);
    border-radius: 8px;
    padding: 10px 20px;
    color: white;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.6), 3px 3px 5px rgba(0,0,0,0.5);
    transition: 0.2s;
}

.btn-gold:hover {
    background: var(--game-gold-gradient-dark);
}
.btn-gold:active {
    box-shadow: inset -2px -2px 4px rgba(0,0,0,0.6);
    transform: scale(0.98);
}

.btn-blue {
    background: var(--game-blue-gradient);
    border: 2px solid var(--game-blue-dark);
    border-radius: 8px;
    padding: 10px 20px;
    color: white;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.6), 3px 3px 5px rgba(0,0,0,0.5);
    transition: 0.2s;
}

.btn-blue:hover {
    background: var(--game-blue-gradient-dark);
}
.btn-blue:active {
    box-shadow: inset -2px -2px 4px rgba(0,0,0,0.6);
    transform: scale(0.98);
}

.btn-transcend {
    background: var(--game-indigo-gradient);
    border: 2px solid var(--game-indigo-dark) !important;
    border-radius: 8px;
    padding: 10px 20px;
    color: white;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.6), 3px 3px 5px rgba(0,0,0,0.5);
    transition: 0.2s;
}

.btn-transcend:hover {
    background: var(--game-indigo-gradient-dark);
}

.btn-transcend:active {
    background: var(--game-indigo-gradient-subtle);
}