/* ========================================
   BUTTON STYLES
   All button styles across the game
   
   Uses CSS variables from base.css for responsive scaling
   ======================================== */

/* ===== BASE BUTTON ===== */
.btn {
    padding: clamp(6px, 1.5vw, 12px) clamp(12px, 3vw, 24px);
    border: none;
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    transition: transform var(--transition-fast, 0.1s), filter var(--transition-fast, 0.1s), box-shadow var(--transition-fast, 0.1s);
    font-size: clamp(9px, 2.5vw, 14px);
    font-family: inherit;
    letter-spacing: 0.5px;
}

.btn:active {
    transform: scale(0.95);
}

/* Spirit Magicka shop buttons - larger font */
[id^="spirit-magicka-btn"] {
    font-size: clamp(12px, 3.5vw, 18px);
    padding: clamp(10px, 2vw, 16px) clamp(16px, 4vw, 28px);
}

.btn:focus {
    outline: 2px solid rgba(255, 221, 0, 0.5);
    outline-offset: 2px;
}

/* ===== CLOSE BUTTON (Main) ===== */
.btn-close {
    background: linear-gradient(180deg, #8866aa, #6644aa);
    color: white;
    box-shadow: 0 5px 0 #4a2d6b;
    font-size: clamp(14px, 4vw, 18px);
    padding: clamp(12px, 3vw, 18px) clamp(32px, 8vw, 64px);
    min-width: clamp(140px, 35vw, 220px);
    font-weight: bold;
    letter-spacing: 1px;
}

.btn-close:hover { 
    filter: brightness(1.15);
    transform: translateY(-2px);
    box-shadow: 0 7px 0 #4a2d6b, 0 10px 20px rgba(100, 70, 150, 0.3);
}

.btn-close:active {
    transform: translateY(5px);
    box-shadow: 0 0 0 #4a2d6b;
}

/* ===== ACTION BUTTON (Green) ===== */
.btn-action {
    background: linear-gradient(180deg, #44ff44, #22cc22);
    color: #000;
    box-shadow: 0 4px 0 #006600;
    font-weight: bold;
}

.btn-action:hover { 
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #006600, 0 8px 15px rgba(0, 200, 0, 0.3);
}

.btn-action:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #006600;
}

.btn-action:disabled {
    background: linear-gradient(180deg, #666, #444);
    color: #999;
    box-shadow: 0 4px 0 #333;
    cursor: not-allowed;
    opacity: 0.6;
}

/* ===== SECONDARY BUTTON ===== */
.btn-secondary {
    background: linear-gradient(180deg, #5a4a6a, #3a2a4a);
    color: #ccc;
    border: 2px solid #6a5a7a;
    box-shadow: 0 3px 0 #2a1a3a;
}

.btn-secondary:hover {
    background: linear-gradient(180deg, #6a5a7a, #4a3a5a);
    color: #fff;
    border-color: #8a7a9a;
}

.btn-secondary:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 #2a1a3a;
}

/* ===== DANGER BUTTON (Red) ===== */
.btn-danger {
    background: linear-gradient(180deg, #cc4444, #aa2222);
    color: white;
    box-shadow: 0 4px 0 #771111;
}

.btn-danger:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #771111, 0 8px 15px rgba(200, 50, 50, 0.3);
}

.btn-danger:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #771111;
}

/* ===== GOLD BUTTON (Premium) ===== */
.btn-gold {
    background: linear-gradient(180deg, #ffd700, #daa520);
    color: #2a1a0a;
    box-shadow: 0 4px 0 #8b6914;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-gold:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #8b6914, 0 8px 15px rgba(255, 215, 0, 0.4);
}

.btn-gold:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #8b6914;
}

/* ===== DEVELOPER BUTTON ===== */
.btn-dev {
    background: #002200;
    color: #00ff00;
    font-size: var(--font-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    border: 1px solid #00ff00;
    border-radius: var(--radius-sm);
}

.btn-dev:hover {
    background: #003300;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
}

/* ===== DEV SCREENSHOT BUTTON VARIANTS (NO INLINE STYLES) ===== */
.btn-dev-screenshot {
    color: #ff69b4;
    border-color: #ff69b4;
}

.btn-dev-apple {
    color: #ff9500;
    border-color: #ff9500;
}

.btn-dev-google {
    color: #3ddc84;
    border-color: #3ddc84;
}

/* ===== ICON BUTTON ===== */
.btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(45, 27, 61, 0.9);
    border: 2px solid #7d5a8f;
}

.btn-icon:hover {
    background: rgba(60, 40, 80, 0.95);
    border-color: #a080c0;
}

.btn-icon img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

/* ===== USE POWER BUTTON (Stash) ===== */
/* USE POWER button - Green style */
.btn-use-power {
    background: linear-gradient(180deg, #44dd44, #22aa22);
    color: #003300;
    box-shadow: 0 4px 0 #116611;
    border: 2px solid #55ff55;
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-md);
    font-weight: bold;
}

.btn-use-power:hover {
    filter: brightness(1.15);
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #116611, 0 0 20px rgba(68, 221, 68, 0.4);
}

.btn-use-power:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #116611;
}

.btn-use-power:disabled,
.btn-use-power.btn-use-power-disabled {
    background: linear-gradient(180deg, #555, #333);
    color: #888;
    border-color: #666;
    box-shadow: 0 4px 0 #222;
    cursor: not-allowed;
    opacity: 0.5;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
/* NOTE: Most responsive sizing now handled via CSS variables in responsive.css */
/* These are for component-specific adjustments only */