.game-btn {
    border: none;
    color: white;
    cursor: pointer;
    font-weight: 600;
    font-family: var(--game-font-main);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    clip-path: var(--game-clip-path-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    min-height: 32px;
}

.game-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    filter: grayscale(0.8);
}

.game-btn:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.game-btn:not(:disabled):active {
    transform: translateY(0);
}

/* Sizes */
.game-btn.sm {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
}

.game-btn.md {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

.game-btn.lg {
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
}

/* Variants */

/* Primary - Blue (Default) */
.game-btn.primary {
    background: linear-gradient(135deg, #2980b9, #3498db);
    box-shadow: 0 2px 8px rgba(41, 128, 185, 0.3);
}

.game-btn.primary:not(:disabled):hover {
    background: linear-gradient(135deg, #3498db, #2980b9);
    box-shadow: 0 4px 12px rgba(41, 128, 185, 0.5);
}

/* Secondary - Grey/Dark */
.game-btn.secondary {
    background: linear-gradient(135deg, #4a5568, #718096);
    box-shadow: 0 2px 8px rgba(74, 85, 104, 0.3);
    color: #e2e8f0;
}

.game-btn.secondary:not(:disabled):hover {
    background: linear-gradient(135deg, #718096, #4a5568);
    box-shadow: 0 4px 12px rgba(74, 85, 104, 0.5);
}

/* Success - Green */
.game-btn.success {
    background: linear-gradient(135deg, #4caf50, #66bb6a);
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.game-btn.success:not(:disabled):hover {
    background: linear-gradient(135deg, #66bb6a, #4caf50);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.5);
}

/* Danger - Red */
.game-btn.danger {
    background: linear-gradient(135deg, #f44336, #ef5350);
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.3);
}

.game-btn.danger:not(:disabled):hover {
    background: linear-gradient(135deg, #ef5350, #f44336);
    box-shadow: 0 4px 12px rgba(244, 67, 54, 0.5);
}

/* Info - Cyan/Teal (Equip/Unequip often uses this) */
.game-btn.info {
    background: linear-gradient(135deg, #00bcd4, #26c6da);
    box-shadow: 0 2px 8px rgba(0, 188, 212, 0.3);
}

.game-btn.info:not(:disabled):hover {
    background: linear-gradient(135deg, #26c6da, #00bcd4);
    box-shadow: 0 4px 12px rgba(0, 188, 212, 0.5);
}

/* Warning - Orange/Yellow */
.game-btn.warning {
    background: linear-gradient(135deg, #ff9800, #ffa726);
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
}

.game-btn.warning:not(:disabled):hover {
    background: linear-gradient(135deg, #ffa726, #ff9800);
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.5);
}