/* --- GAMOFILE POP THEME --- */
:root {
    /* Base Colors */
    --primary: #1b1c1d;
    --accent: #00d2ff;
    --accent-alt: #9d50bb;
    --bg-light: #f4f7f6;
    --bg-white: #ffffff;
    --bg-card: #ffffff;
    --bg-glass: rgba(255, 255, 255, 0.8);
    --bg-glass-heavy: rgba(255, 255, 255, 0.95);

    /* Text Colors */
    --text-primary: #333333;
    --text-secondary: #555555;
    --text-muted: #666666;
    --text-light: #999999;
    --text-xlight: #bbbbbb;
    --text-dark: #222222;
    --text-on-accent: #ffffff;

    /* Semantic Colors */
    --color-primary: #6366f1;
    --color-secondary: #a855f7;
    --color-success: #21ba45;
    --color-info: #2185d0;
    --color-warning: #f2711c;
    --color-danger: #db2828;
    --color-violet: #6435c9;
    --color-purple: #a333c8;
    --color-teal: #00b5ad;
    --color-brown: #a5673f;
    --color-gold: #fbbd08;
    --color-indigo: #4338ca;

    /* Message Boxes (Info) */
    --msg-info-bg: rgba(59, 130, 246, 0.1);
    --msg-info-border: rgba(59, 130, 246, 0.2);
    --msg-info-text: #1e40af;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #6a11cb, #2575fc);
    --gradient-secondary: linear-gradient(135deg, #232526, #414345);
    --gradient-success: linear-gradient(135deg, #00b09b, #96c93d);
    --gradient-blue: linear-gradient(135deg, #00d2ff, #3a7bd5);
    --gradient-teal: linear-gradient(135deg, #00d2ff, #34e89e);
    --gradient-orange: linear-gradient(135deg, #f37335, #fdc830);
    --gradient-red: linear-gradient(135deg, #cb2d3e, #ef473a);
    --gradient-yellow: linear-gradient(135deg, #f8d800, #fdeb71);
    --gradient-olive: linear-gradient(135deg, #b1d433, #96c93d);
    --gradient-violet: linear-gradient(135deg, #7f00ff, #e100ff);
    --gradient-purple: linear-gradient(135deg, #834d9b, #d04ed6);
    --gradient-pink: linear-gradient(135deg, #ec008c, #fc6767);
    --gradient-brown: linear-gradient(135deg, #a5673f, #804e32);
    --gradient-grey: linear-gradient(135deg, #767676, #333333);
    --gradient-black: linear-gradient(135deg, #1b1c1d, #000000);
    --gradient-default: linear-gradient(135deg, #e0e0e0, #bdbdbd);
    --gradient-forum-header: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    --gradient-profile-header: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    /* Shadows & Borders */
    --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-small: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-pop: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-card: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
    --shadow-card-hover: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3);
    --shadow-text: 0 2px 10px rgba(0, 0, 0, 0.3);
    --shadow-tiny: 0 -5px 10px rgba(0, 0, 0, 0.05);
    --shadow-menu: var(--shadow);
    --border-light: 1px solid rgba(0, 0, 0, 0.05);
    --border-xlight: 1px solid #eeeeee;
    --border-input: 1px solid #dddddd;
    --border-menu: none;

    /* Overlays & Specific Gradients */
    --overlay-dark: rgba(0, 0, 0, 0.75);
    --overlay-light: rgba(255, 255, 255, 0.15);
    --bg-hover-light: rgba(0, 0, 0, 0.03);
    --gradient-event: linear-gradient(135deg, #e0f2f1 0%, #ffffff 100%);
    --gradient-welcome: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
    --color-primary-rgb: 99, 102, 241;
    --color-violet-rgb: 100, 53, 201;
    --color-accent-rgb: 0, 210, 255;
}

body {
    font-family: 'Poppins', sans-serif !important;
    background-color: var(--bg-light);
    background-image:
        radial-gradient(at 0% 0%, hsla(197, 100%, 82%, 0.2) 0, transparent 50%),
        radial-gradient(at 50% 0%, hsla(282, 100%, 82%, 0.2) 0, transparent 50%),
        radial-gradient(at 100% 0%, hsla(160, 100%, 82%, 0.2) 0, transparent 50%);
    background-attachment: fixed;
    color: var(--text-primary);
    min-height: 100vh;
}

/* --- HEADER / MENU --- */
#mainMenu {
    border-radius: 0 0 20px 20px !important;
    box-shadow: var(--shadow-menu) !important;
    border: var(--border-menu) !important;
    padding: 0 10px;
}

#mainMenu > .item,
#mainMenu > .menu > .item {
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    position: relative;
    color: #ffffff !important;
    opacity: 0.9;
}

#mainMenu > .item:hover,
#mainMenu > .menu > .item:hover {
    background: var(--overlay-light) !important;
    color: var(--accent) !important;
    opacity: 1 !important;
}

#mainMenu > .active.item,
#mainMenu > .active-page.item {
    background: var(--overlay-light) !important;
    color: var(--accent) !important;
    opacity: 1 !important;
}

#mainMenu .item:hover::after,
#mainMenu .active.item::after,
#mainMenu .active-page.item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 15%;
    width: 70%;
    height: 4px;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
    border-radius: 10px 10px 0 0;
}

/* --- MOBILE MENU RESPONSIVE --- */
@media only screen and (max-width: 767px) {
    #mainMenu .item:not(#menuHeader) {
        display: none !important;
    }

    #mainMenu.mobile-open .item:not(#menuHeader) {
        display: flex !important;
    }

    #menuHeader {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        padding: 1em !important;
    }

    #mobileToggle {
        display: block !important;
    }
}

@media only screen and (min-width: 768px) {
    #mobileToggle {
        display: none !important;
    }
}

/* --- DROPDOWNS POP --- */
#mainMenu .dropdown .menu {
    border-radius: 15px !important;
    border: none !important;
    box-shadow: var(--shadow-pop) !important;
    background: var(--bg-white) !important;
    padding: 10px 0 !important;
    margin-top: 5px !important;
    transition: all 0.3s ease !important;
}

#mainMenu .dropdown .menu .item {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    padding: 12px 20px !important;
    color: var(--text-dark) !important;
    /* Force le texte en sombre */
    background: transparent !important;
}

#mainMenu .dropdown .menu .item i.icon {
    color: var(--text-muted) !important;
}

#mainMenu .dropdown .menu .item:hover {
    background: var(--bg-light) !important;
    color: var(--accent) !important;
}

#mainMenu .dropdown .menu .item:hover i.icon {
    color: var(--accent) !important;
}

/* Indicateur de dropdown permanent */
#mainMenu .item>.dropdown.icon {
    margin-left: 8px !important;
    color: var(--accent) !important;
    opacity: 1 !important;
}

/* --- CARDS & SEGMENTS --- */
.ui.card,
.ui.segment {
    border-radius: 15px !important;
    border: var(--border-light) !important;
    box-shadow: var(--shadow-card) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    background: var(--bg-card) !important;
    color: var(--text-primary);
}

/* En mode sombre (inverted), on utilise le fond de carte qui devrait être sombre */
.ui.inverted.segment,
.ui.inverted.card {
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

.ui.card:hover {
    transform: translateY(-10px) scale(1.02) !important;
    box-shadow: var(--shadow-card-hover) !important;
    z-index: 10;
}

.ui.card .image {
    border-radius: 15px 15px 0 0 !important;
}

/* --- BUTTONS POP --- */
.ui.button {
    border-radius: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}

/* Boutons classiques (pleins) */
.ui.button:not(.basic) {
    color: var(--text-on-accent) !important;
    text-shadow: var(--shadow-text) !important;
}

/* Gradients Pop pour toutes les couleurs */
.ui.primary.button:not(.basic) {
    background: var(--gradient-primary) !important;
}

.ui.secondary.button:not(.basic) {
    background: var(--gradient-secondary) !important;
}

.ui.green.button:not(.basic) {
    background: var(--gradient-success) !important;
}

.ui.blue.button:not(.basic) {
    background: var(--gradient-blue) !important;
}

.ui.teal.button:not(.basic) {
    background: var(--gradient-teal) !important;
}

.ui.orange.button:not(.basic) {
    background: var(--gradient-orange) !important;
}

.ui.red.button:not(.basic) {
    background: var(--gradient-red) !important;
}

.ui.yellow.button:not(.basic) {
    background: var(--gradient-yellow) !important;
    color: var(--text-primary) !important;
    text-shadow: none !important;
}

.ui.olive.button:not(.basic) {
    background: var(--gradient-olive) !important;
}

.ui.violet.button:not(.basic) {
    background: var(--gradient-violet) !important;
}

.ui.purple.button:not(.basic) {
    background: var(--gradient-purple) !important;
}

.ui.pink.button:not(.basic) {
    background: var(--gradient-pink) !important;
}

.ui.brown.button:not(.basic) {
    background: var(--gradient-brown) !important;
}

.ui.grey.button:not(.basic) {
    background: var(--gradient-grey) !important;
}

.ui.black.button:not(.basic) {
    background: var(--gradient-black) !important;
}

/* Bouton Standard (par défaut) */
.ui.button:not(.primary):not(.secondary):not(.red):not(.orange):not(.yellow):not(.olive):not(.green):not(.teal):not(.blue):not(.violet):not(.purple):not(.pink):not(.brown):not(.grey):not(.black):not(.basic) {
    background: var(--gradient-default) !important;
    color: var(--text-primary) !important;
    text-shadow: none !important;
}

/* Boutons BASIC (Creux ou dans menus) */
.ui.basic.button {
    background: var(--bg-white) !important;
    color: var(--text-primary) !important;
    border: var(--border-input) !important;
    box-shadow: none !important;
}

.ui.basic.button:hover,
.ui.inverted.basic.button:hover {
    transform: scale(1.05) !important;
    color: var(--text-primary) !important;
    text-shadow: none !important;
    border: none !important;
    background: var(--gradient-default) !important;
}

.ui.basic.primary.button:hover,
.ui.inverted.basic.primary.button:hover {
    background: var(--gradient-primary) !important;
    color: var(--text-on-accent) !important;
}

.ui.basic.secondary.button:hover,
.ui.inverted.basic.secondary.button:hover {
    background: var(--gradient-secondary) !important;
    color: var(--text-on-accent) !important;
}

.ui.basic.green.button:hover,
.ui.inverted.basic.green.button:hover {
    background: var(--gradient-success) !important;
    color: var(--text-on-accent) !important;
}

.ui.basic.blue.button:hover,
.ui.inverted.basic.blue.button:hover {
    background: var(--gradient-blue) !important;
    color: var(--text-on-accent) !important;
}

.ui.basic.teal.button:hover,
.ui.inverted.basic.teal.button:hover {
    background: var(--gradient-teal) !important;
    color: var(--text-on-accent) !important;
}

.ui.basic.orange.button:hover,
.ui.inverted.basic.orange.button:hover {
    background: var(--gradient-orange) !important;
    color: var(--text-on-accent) !important;
}

.ui.basic.red.button:hover,
.ui.inverted.basic.red.button:hover {
    background: var(--gradient-red) !important;
    color: var(--text-on-accent) !important;
}

.ui.basic.yellow.button:hover,
.ui.inverted.basic.yellow.button:hover {
    background: var(--gradient-yellow) !important;
    color: var(--text-primary) !important;
    text-shadow: none !important;
}

.ui.basic.olive.button:hover,
.ui.inverted.basic.olive.button:hover {
    background: var(--gradient-olive) !important;
    color: var(--text-on-accent) !important;
}

.ui.basic.violet.button:hover,
.ui.inverted.basic.violet.button:hover {
    background: var(--gradient-violet) !important;
    color: var(--text-on-accent) !important;
}

.ui.basic.purple.button:hover,
.ui.inverted.basic.purple.button:hover {
    background: var(--gradient-purple) !important;
    color: var(--text-on-accent) !important;
}

.ui.basic.pink.button:hover,
.ui.inverted.basic.pink.button:hover {
    background: var(--gradient-pink) !important;
    color: var(--text-on-accent) !important;
}

.ui.basic.brown.button:hover,
.ui.inverted.basic.brown.button:hover {
    background: var(--gradient-brown) !important;
    color: var(--text-on-accent) !important;
}

.ui.basic.grey.button:hover,
.ui.inverted.basic.grey.button:hover {
    background: var(--gradient-grey) !important;
    color: var(--text-on-accent) !important;
}

.ui.basic.black.button:hover,
.ui.inverted.basic.black.button:hover {
    background: var(--gradient-black) !important;
    color: var(--text-on-accent) !important;
}

/* --- TABS --- */
.ui.tabular.menu {
    border-bottom: none !important;
}

.ui.tabular.menu .item {
    border-radius: 12px 12px 0 0 !important;
    border: none !important;
    margin-right: 5px !important;
}

.ui.tabular.menu .active.item {
    background-color: var(--bg-white) !important;
    box-shadow: var(--shadow-tiny) !important;
}

/* --- FORMS --- */
.ui.form input:not([type]),
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="time"],
.ui.form input[type="text"],
.ui.form input[type="url"] {
    border-radius: 8px !important;
    border: var(--border-input) !important;
    transition: border-color 0.2s ease !important;
}

.ui.form input:focus {
    border-color: var(--accent) !important;
}

.ui.buttons .or:before {
    content: "ou";
}

/* --- GAMOTHEQUE MENU POP --- */
#gamothequeMenu {
    background: var(--bg-white) !important;
    border: none !important;
    border-radius: 15px !important;
    box-shadow: var(--shadow) !important;
    margin-top: 20px !important;
    margin-bottom: 30px !important;
}

#gamothequeMenu .item {
    font-weight: 600 !important;
    padding: 15px 20px !important;
    transition: all 0.2s ease !important;
    border-bottom: 4px solid transparent !important;
    color: var(--text-secondary) !important;
}

#gamothequeMenu .item:first-child {
    border-radius: 15px 0 0 15px !important;
}

#gamothequeMenu .item:last-child {
    border-radius: 0 15px 15px 0 !important;
}

#gamothequeMenu .item::after {
    display: none !important;
}

#gamothequeMenu .item:hover {
    background: var(--bg-hover-light) !important;
}

/* Couleurs de la barre du bas pour l'état actif/hover */
#gamothequeMenu .item.brown:hover,
#gamothequeMenu .item.brown.active,
#gamothequeMenu .item.brown.active-page {
    border-bottom-color: var(--color-brown) !important;
    color: var(--color-brown) !important;
}

#gamothequeMenu .item.green:hover,
#gamothequeMenu .item.green.active,
#gamothequeMenu .item.green.active-page {
    border-bottom-color: var(--color-success) !important;
    color: var(--color-success) !important;
}

#gamothequeMenu .item.teal:hover,
#gamothequeMenu .item.teal.active,
#gamothequeMenu .item.teal.active-page {
    border-bottom-color: var(--color-teal) !important;
    color: var(--color-teal) !important;
}

#gamothequeMenu .item.blue:hover,
#gamothequeMenu .item.blue.active,
#gamothequeMenu .item.blue.active-page {
    border-bottom-color: var(--color-info) !important;
    color: var(--color-info) !important;
}

#gamothequeMenu .item.violet:hover,
#gamothequeMenu .item.violet.active,
#gamothequeMenu .item.violet.active-page {
    border-bottom-color: var(--color-violet) !important;
    color: var(--color-violet) !important;
}

#gamothequeMenu .item.purple:hover,
#gamothequeMenu .item.purple.active,
#gamothequeMenu .item.purple.active-page {
    border-bottom-color: var(--color-purple) !important;
    color: var(--color-purple) !important;
}

#gamothequeMenu .item.orange:hover,
#gamothequeMenu .item.orange.active,
#gamothequeMenu .item.orange.active-page {
    border-bottom-color: var(--color-warning) !important;
    color: var(--color-warning) !important;
}

#gamothequeMenu .item.red:hover,
#gamothequeMenu .item.red.active,
#gamothequeMenu .item.red.active-page {
    border-bottom-color: var(--color-danger) !important;
    color: var(--color-danger) !important;
}

/* Cas particulier du dropdown Ajouter */
#gamothequeMenu .dropdown.item .menu {
    border-radius: 15px !important;
    margin-top: 10px !important;
}

/* Custom hover for modification button */
.ui.basic.inverted.purple.button:hover {
    background-color: var(--color-warning) !important;
    /* Orange */
    color: var(--bg-white) !important;
    box-shadow: var(--shadow-pop) !important;
}

/* --- LIGHTBOX / GALLERY --- */
.ui.dimmer.blurring.active {
    backdrop-filter: blur(10px) !important;
    background-color: var(--overlay-dark) !important;
}

#gamoGalleryModal {
    background: transparent !important;
}

#gamoGalleryModal .content {
    background: transparent !important;
}

/* --- SHARED POP CLASSES (Extracted from HTML) --- */
.info-message-pop {
    border-radius: 15px !important;
    background: var(--msg-info-bg) !important;
    border: 1px solid var(--msg-info-border) !important;
    color: var(--msg-info-text) !important;
}

.segment-glass-pop {
    border-radius: 20px !important;
    border: none !important;
    box-shadow: var(--shadow) !important;
    background: var(--bg-glass) !important;
    backdrop-filter: blur(10px) !important;
}

.forum-header-gradient {
    background: var(--gradient-forum-header) !important;
    padding: 1.5em !important;
    border-radius: 20px 20px 0 0 !important;
}

.forum-main-header {
    font-family: 'Poppins', sans-serif !important;
    font-size: 2.8em !important;
    font-weight: 800 !important;
    color: var(--color-indigo) !important;
    letter-spacing: -1px !important;
    text-shadow: none !important;
    margin-bottom: 1rem !important;
}

.forum-item-row {
    padding: 1.5em 1em !important;
    border-bottom: var(--border-light) !important;
}

.forum-link-header {
    font-size: 1.3em !important;
    font-family: 'Poppins', sans-serif !important;
    color: var(--color-indigo) !important;
}

.text-indigo {
    color: var(--color-primary) !important;
}

.text-muted-pop {
    color: var(--text-muted) !important;
}

.text-light-pop {
    color: var(--text-light) !important;
}

.text-xlight-pop {
    color: var(--text-xlight) !important;
}

.bg-white-pop {
    background: var(--bg-white) !important;
}

.rounded-xl {
    border-radius: 15px !important;
}

.rounded-2xl {
    border-radius: 20px !important;
}

.pill-label {
    border-radius: 50px !important;
    padding: 10px 20px !important;
}

.shadow-pop-avg {
    box-shadow: var(--shadow) !important;
}

.profile-header-bg {
    height: 300px;
    width: 100%;
    position: relative;
    background: var(--gradient-profile-header);
}

.avatar-profile {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border: 5px solid var(--bg-white);
    box-shadow: var(--shadow);
}

.vitrine-segment {
    border-radius: 20px !important;
    background: var(--overlay-light) !important;
    border: none !important;
    box-shadow: var(--shadow) !important;
    padding: 2em !important;
}

/* --- HOME PAGE CLASSES --- */
.segment-home-welcome {
    border-radius: 20px !important;
    background: var(--gradient-welcome) !important;
    padding: 3em !important;
    text-align: center !important;
    margin-bottom: 3em !important;
}

.home-section-header {
    border-bottom: 2px solid var(--accent) !important;
    padding-bottom: 5px !important;
    margin-bottom: 1em !important;
}

.feed-item-actu {
    padding: 8px 0 !important;
    border-bottom: var(--border-light) !important;
}

.card-mini-pop {
    box-shadow: none !important;
    border: var(--border-xlight) !important;
    background: var(--bg-white) !important;
}

.event-card-home {
    border-radius: 20px !important;
    margin-bottom: 1.5em !important;
    background: var(--gradient-event) !important;
    border-left: 5px solid var(--color-teal) !important;
    padding: 1em !important;
}

/* --- UTILITY CLASSES FOR MIGRATION --- */
.bg-glass {
    background: var(--bg-glass) !important;
}

.bg-glass-heavy {
    background: var(--bg-glass-heavy) !important;
}

.bg-white {
    background: var(--bg-white) !important;
}

.text-indigo {
    color: var(--color-indigo) !important;
}

.text-primary-color {
    color: var(--color-primary) !important;
}

.text-accent {
    color: var(--accent) !important;
}

.text-accent-alt {
    color: var(--accent-alt) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-light {
    color: var(--text-light) !important;
}

.text-white {
    color: var(--bg-white) !important;
}

.border-none {
    border: none !important;
}

.shadow-none {
    box-shadow: none !important;
}

.rounded-20 {
    border-radius: 20px !important;
}

.rounded-15 {
    border-radius: 15px !important;
}

.shadow-medium {
    box-shadow: var(--shadow) !important;
}

.shadow-pop {
    box-shadow: var(--shadow-pop) !important;
}

.gradient-forum {
    background: var(--gradient-forum-header) !important;
}

.gradient-profile {
    background: var(--gradient-profile-header) !important;
}

/* --- STATS KPI CARDS --- */
.stats-kpi-card {
    border-radius: 18px !important;
    padding: 1.5em !important;
    color: var(--text-on-accent) !important;
    text-align: center !important;
    transition: transform 0.3s !important;
}

.stats-kpi-card:hover {
    transform: translateY(-6px) !important;
}

.kpi-purple {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important;
}

.kpi-orange {
    background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%) !important;
    box-shadow: 0 8px 25px rgba(247, 151, 30, 0.4) !important;
}

.kpi-blue {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
    box-shadow: 0 8px 25px rgba(79, 172, 254, 0.4) !important;
}

.kpi-green {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%) !important;
    box-shadow: 0 8px 25px rgba(67, 233, 123, 0.4) !important;
}

.kpi-red {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
    box-shadow: 0 8px 25px rgba(245, 87, 108, 0.4) !important;
}

.kpi-indigo {
    background: linear-gradient(135deg, #30cfd0 0%, #330867 100%) !important;
    box-shadow: 0 8px 25px rgba(48, 207, 208, 0.4) !important;
}

.kpi-yellow {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
    box-shadow: 0 8px 25px rgba(250, 112, 154, 0.35) !important;
}

.kpi-teal {
    background: linear-gradient(135deg, #21ba45 0%, #00d2ff 100%) !important;
    box-shadow: 0 8px 25px rgba(33, 186, 69, 0.4) !important;
}

.stats-chart-card {
    background: var(--bg-white) !important;
    border-radius: 18px !important;
    padding: 1.8em !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07) !important;
    border: 1px solid rgba(92, 107, 192, 0.1) !important;
    transition: transform 0.3s, box-shadow 0.3s !important;
}

.stats-chart-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) !important;
}

/* --- DARK MODE FIXES & REFINEMENTS --- */
.ui.inverted.segment .ui.header,
.ui.inverted.card .header {
    color: var(--text-dark) !important;
}

.ui.card .meta,
.ui.segment .meta {
    color: var(--text-secondary) !important;
}

.ui.inverted.segment .meta,
.ui.inverted.card .meta {
    color: var(--text-muted) !important;
}

.ui.card .description,
.ui.segment .description {
    color: var(--text-primary);
}

.ui.inverted.form label {
    color: var(--text-primary) !important;
}

/* Custom Buttons for Welcome Segment */
.btn-join-pop {
    background: var(--gradient-primary) !important;
    color: var(--text-on-accent) !important;
    padding: 1.2em 3em !important;
    border-radius: 50px !important;
    box-shadow: 0 10px 25px rgba(var(--color-primary-rgb), 0.4) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    border: none !important;
    display: inline-block;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-join-pop:hover {
    transform: translateY(-5px) scale(1.05) !important;
    box-shadow: 0 20px 40px rgba(var(--color-primary-rgb), 0.6) !important;
    filter: brightness(1.1);
    color: var(--text-on-accent) !important;
}

.btn-login-pop {
    background: transparent !important;
    color: var(--text-primary) !important;
    padding: 1.2em 2.5em !important;
    border-radius: 50px !important;
    border: 2px solid var(--accent) !important;
    transition: all 0.3s ease !important;
    display: inline-block;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-login-pop:hover {
    background: var(--gradient-blue) !important;
    color: var(--text-on-accent) !important;
    border-color: transparent !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 20px rgba(var(--color-accent-rgb), 0.3) !important;
}

/* --- ACHIEVEMENTS POP --- */
.achievement-badge-container {
    perspective: 1000px;
}

.achievement-badge {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: help;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Hybrid Badge Style */
.achievement-badge.hybrid {
    background-size: cover;
    background-position: center;
    border: none;
    /* The image already has the border effect */
    background-color: transparent;
    backdrop-filter: none;
    box-shadow: none;
    /* The image has its own shadow */
}

.achievement-icon-svg {
    width: 35px !important;
    height: 35px !important;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    transition: transform 0.3s ease;
    z-index: 2;
}

.achievement-badge.hybrid:hover .achievement-icon-svg {
    transform: scale(1.15);
}

.achievement-badge img {
    width: 90%;
    height: 90%;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
    transition: transform 0.4s ease;
}

/* Hover effects */
.achievement-badge:hover {
    transform: translateY(-8px) rotateY(10deg);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(var(--color-primary-rgb), 0.3);
    border-color: var(--accent);
}

.achievement-badge:hover img {
    transform: scale(1.1);
}

/* Specific glows based on common colors */
.achievement-badge.gold:hover {
    box-shadow: 0 15px 30px rgba(251, 189, 8, 0.4), 0 0 25px rgba(251, 189, 8, 0.2);
    border-color: #fbbd08;
}

.achievement-badge.teal:hover {
    box-shadow: 0 15px 30px rgba(0, 181, 173, 0.4), 0 0 25px rgba(0, 181, 173, 0.2);
    border-color: #00b5ad;
}

.achievement-badge.purple:hover {
    box-shadow: 0 15px 30px rgba(163, 51, 200, 0.4), 0 0 25px rgba(163, 51, 200, 0.2);
    border-color: #a333c8;
}

.achievement-badge.indigo:hover {
    box-shadow: 0 15px 30px rgba(67, 56, 202, 0.4), 0 0 25px rgba(67, 56, 202, 0.2);
    border-color: #4338ca;
}

.achievement-badge.blue:hover {
    box-shadow: 0 15px 30px rgba(33, 133, 208, 0.4), 0 0 25px rgba(33, 133, 208, 0.2);
    border-color: #2185d0;
}

.achievement-badge.orange:hover {
    box-shadow: 0 15px 30px rgba(242, 113, 28, 0.4), 0 0 25px rgba(242, 113, 28, 0.2);
    border-color: #f2711c;
}

.achievement-badge.cyan:hover {
    box-shadow: 0 15px 30px rgba(0, 210, 255, 0.4), 0 0 25px rgba(0, 210, 255, 0.2);
    border-color: #00d2ff;
}

.achievement-badge.red:hover {
    box-shadow: 0 15px 30px rgba(219, 40, 40, 0.4), 0 0 25px rgba(219, 40, 40, 0.2);
    border-color: #db2828;
}

.achievement-badge.green:hover {
    box-shadow: 0 15px 30px rgba(33, 186, 69, 0.4), 0 0 25px rgba(33, 186, 69, 0.2);
    border-color: #21ba45;
}

.achievement-badge.yellow:hover {
    box-shadow: 0 15px 30px rgba(248, 216, 0, 0.4), 0 0 25px rgba(248, 216, 0, 0.2);
    border-color: #f8d800;
}

.achievement-badge.pink:hover {
    box-shadow: 0 15px 30px rgba(236, 0, 140, 0.4), 0 0 25px rgba(236, 0, 140, 0.2);
    border-color: #ec008c;
}

.achievement-badge.grey:hover {
    box-shadow: 0 15px 30px rgba(118, 118, 118, 0.4), 0 0 25px rgba(118, 118, 118, 0.2);
    border-color: #767676;
}

/* Levitation animation for unlocked achievements */
@keyframes levitate {
    0% {
        transform: translateY(0);
    }

    10% {
        transform: translateY(-3px);
    }

    20% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(0);
    }
}

.achievement-badge.unlocked {
    animation: levitate 3s ease-in-out infinite;
}