/* ==========================================================================
   Effet 3D boutons (ombre portée sans flou)
   --btn-3d-shadow : couleur de l’ombre (plus foncée que le fond du bouton)
   Tailles : sm (menu) | md (shop, compte, discord…) | lg (cartes accueil)
   ========================================================================== */

:root {
    --btn-3d-sm-depth: 3px;
    --btn-3d-sm-depth-hover: 4.5px;
    --btn-3d-sm-depth-active: 1.5px;
    --btn-3d-sm-lift-hover: -1.5px;
    --btn-3d-sm-lift-active: 1.5px;

    --btn-3d-md-depth: 4px;
    --btn-3d-md-depth-hover: 6px;
    --btn-3d-md-depth-active: 2px;
    --btn-3d-md-lift-hover: -2px;
    --btn-3d-md-lift-active: 2px;

    --btn-3d-lg-depth: 6px;
    --btn-3d-lg-depth-hover: 9px;
    --btn-3d-lg-depth-active: 3px;
    --btn-3d-lg-lift-hover: -3px;
    --btn-3d-lg-lift-active: 3px;
}

/* --- Tailles --- */

.btn-3d--sm,
.login-button,
.privacy-consent-button--accept {
    --btn-3d-depth: var(--btn-3d-sm-depth);
    --btn-3d-depth-hover: var(--btn-3d-sm-depth-hover);
    --btn-3d-depth-active: var(--btn-3d-sm-depth-active);
    --btn-3d-lift-hover: var(--btn-3d-sm-lift-hover);
    --btn-3d-lift-active: var(--btn-3d-sm-lift-active);
}

.btn-3d--md,
.save-settings-btn,
.community_shop_boutton,
.shop-referral__copy,
.discord_cta_button,
.account_reward_button,
.desktop_app_cta_button:not(.desktop_app_cta_button--unavailable),
.open-case-btn,
.privacy-consent-button--reject {
    --btn-3d-depth: var(--btn-3d-md-depth);
    --btn-3d-depth-hover: var(--btn-3d-md-depth-hover);
    --btn-3d-depth-active: var(--btn-3d-md-depth-active);
    --btn-3d-lift-hover: var(--btn-3d-md-lift-hover);
    --btn-3d-lift-active: var(--btn-3d-md-lift-active);
}

.btn-3d--lg,
#community_exttrainfo_viewer_button,
#community_exttrainfo_streamer_button {
    --btn-3d-depth: var(--btn-3d-lg-depth);
    --btn-3d-depth-hover: var(--btn-3d-lg-depth-hover);
    --btn-3d-depth-active: var(--btn-3d-lg-depth-active);
    --btn-3d-lift-hover: var(--btn-3d-lg-lift-hover);
    --btn-3d-lift-active: var(--btn-3d-lg-lift-active);
}

/* --- Ombres par palette (boutons colorés boutique / récompenses) --- */

.color_orange_halloween { --btn-3d-shadow: color-mix(in srgb, #ffa914 76%, black); }
.color_red_ocre { --btn-3d-shadow: color-mix(in srgb, #FF0368 76%, black); }
.color_red_basic { --btn-3d-shadow: color-mix(in srgb, #C45C5C 76%, black); }
.color_feufolet { --btn-3d-shadow: color-mix(in srgb, #FC7683 76%, black); }
.color_green_light { --btn-3d-shadow: color-mix(in srgb, #7AB95D 76%, black); }
.color_brown_wood { --btn-3d-shadow: color-mix(in srgb, #aa6223 76%, black); }
.color_light_pink { --btn-3d-shadow: color-mix(in srgb, #FF8599 76%, black); }
.color_pale_pink { --btn-3d-shadow: color-mix(in srgb, #FF8ABF 76%, black); }
.color_light_purple { --btn-3d-shadow: color-mix(in srgb, #BF91FF 76%, black); }
.color_light_blue { --btn-3d-shadow: color-mix(in srgb, #64BBF2 76%, black); }
.color_wizzzard { --btn-3d-shadow: color-mix(in srgb, #6E51C8 76%, black); }
.color_llama { --btn-3d-shadow: color-mix(in srgb, #A7C9FF 76%, black); }
.color_legendary_special { --btn-3d-shadow: color-mix(in srgb, #FFD700 76%, black); }
.color_fighter_special { --btn-3d-shadow: color-mix(in srgb, #D32F2F 76%, black); }
.color_light_brown { --btn-3d-shadow: color-mix(in srgb, #F0BC87 76%, black); }
.color_discord_blurple { --btn-3d-shadow: color-mix(in srgb, #5865F2 76%, black); }
.color_bird { --btn-3d-shadow: color-mix(in srgb, #F380F0 76%, black); }
.color_fenris { --btn-3d-shadow: color-mix(in srgb, #3A3F5C 76%, black); }
.color_ancient_mystic { --btn-3d-shadow: color-mix(in srgb, #685C8F 76%, black); }
.color_lime_green { --btn-3d-shadow: color-mix(in srgb, #B2DE63 76%, black); }
.color_space_squad { --btn-3d-shadow: color-mix(in srgb, #254A74 76%, black); }

.color_extra_angry,
.color_extra_pat,
.color_extra_power,
.color_extra_shadow,
.color_extra_heal {
    --btn-3d-shadow: color-mix(in srgb, var(--reward-main-color) 76%, black);
}

/* Bouton angry récompense (override fond custom) */
.account_reward_button.color_extra_angry {
    --btn-3d-shadow: color-mix(in srgb, #ffa614 76%, black);
}

/* --- Ombres fixes (boutons sans classe color_*) --- */

.login-button,
.save-settings-btn,
.privacy-consent-button--accept,
#community_exttrainfo_viewer_button {
    /* Plus foncé que --accent-active pour un contraste visible au repos */
    --btn-3d-shadow: color-mix(in srgb, var(--accent) 76%, black);
}

.login-button:active,
.save-settings-btn:not(:disabled):not(.loading):active,
.privacy-consent-button--accept:active,
#community_exttrainfo_viewer_button:active {
    --btn-3d-shadow: color-mix(in srgb, var(--accent-active) 82%, black);
}

#community_exttrainfo_streamer_button {
    --btn-3d-shadow: #2B8FD4;
}

#community_exttrainfo_streamer_button:active {
    --btn-3d-shadow: #1E7ABF;
}

.discord_cta_button {
    --btn-3d-shadow: #4752C4;
}

.privacy-consent-button--reject {
    --btn-3d-shadow: #b0b5c7;
}

.open-case-btn {
    --btn-3d-shadow: #000000;
}

.desktop_app_cta_button:not(.desktop_app_cta_button--unavailable) {
    --btn-3d-shadow: color-mix(in srgb, #E12478 76%, black);
}

/* --- États 3D communs --- */

.login-button,
.save-settings-btn,
.community_shop_boutton,
.discord_cta_button,
.account_reward_button,
.privacy-consent-button--accept,
.privacy-consent-button--reject,
#community_exttrainfo_viewer_button,
#community_exttrainfo_streamer_button,
.desktop_app_cta_button:not(.desktop_app_cta_button--unavailable),
.open-case-btn {
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, filter 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.login-button:not(:disabled),
.save-settings-btn:not(:disabled):not(.loading),
.community_shop_boutton,
.discord_cta_button,
.account_reward_button,
.privacy-consent-button--accept,
.privacy-consent-button--reject,
#community_exttrainfo_viewer_button,
#community_exttrainfo_streamer_button,
.desktop_app_cta_button:not(.desktop_app_cta_button--unavailable),
.open-case-btn:not(.disabled) {
    box-shadow: 0 var(--btn-3d-depth) 0 var(--btn-3d-shadow);
}

.login-button:not(:disabled):hover,
.save-settings-btn:not(:disabled):not(.loading):hover,
.community_shop_boutton:hover,
.discord_cta_bubble:hover .discord_cta_button,
.account_reward_button:hover,
.privacy-consent-button--accept:hover,
.privacy-consent-button--reject:hover,
#community_exttrainfo_viewer_button:hover,
#community_exttrainfo_streamer_button:hover,
.desktop_app_cta_button:not(.desktop_app_cta_button--unavailable):hover,
.open-case-btn:not(.disabled):hover {
    transform: translateY(var(--btn-3d-lift-hover));
    box-shadow: 0 var(--btn-3d-depth-hover) 0 var(--btn-3d-shadow);
    --btn-3d-shadow: #1a0f24;
}

.login-button:not(:disabled):active,
.save-settings-btn:not(:disabled):not(.loading):active,
.community_shop_boutton:active,
.discord_cta_bubble:active .discord_cta_button,
.account_reward_button:active,
.privacy-consent-button--accept:active,
.privacy-consent-button--reject:active,
#community_exttrainfo_viewer_button:active,
#community_exttrainfo_streamer_button:active,
.desktop_app_cta_button:not(.desktop_app_cta_button--unavailable):active,
.open-case-btn:not(.disabled):active {
    transform: translateY(var(--btn-3d-lift-active));
    box-shadow: 0 var(--btn-3d-depth-active) 0 var(--btn-3d-shadow);
    --btn-3d-shadow: #0d0818;
}

/* Désactivé / possédé */
.save-settings-btn:disabled,
.save-settings-btn.loading,
.community_shop_product.owned .community_shop_boutton,
.open-case-btn.disabled {
    box-shadow: none !important;
    transform: none !important;
}

.community_shop_product.owned .community_shop_boutton:hover,
.community_shop_product.owned .community_shop_boutton:active {
    box-shadow: none !important;
    transform: none !important;
}

/* Remplacer l’ancienne ombre douce sur les boutons shop */
.community_shop_boutton.shadow2 {
    box-shadow: 0 var(--btn-3d-md-depth) 0 var(--btn-3d-shadow);
}