/* --- VARIABLES --- */
:root {
    /* Palette Rareté */
    --color-common: #A88C68;    
    --color-uncommon: #6BC644;  
    --color-rare: #4A69FF;      
    --color-epic: #9c27b0;      
    --color-legendary: #FFAC38; 
    --color-mythic: #64E0F4;    
    --color-titan: #F4D855;     
    --color-angel: #E84E54;     

    /* Couleurs Classe */
    --class-rage: #e74c3c;   
    --class-energy: #f1c40f; 
    --class-mana: #3498db;   
}

/* --- GLOBAL --- */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #1e1e1e;
    color: #eee;
    margin: 0;
    padding-top: 100px;
}

/* --- HEADER --- */
.sticky-header {
    position: fixed; top: 0; left: 0; right: 0;
    background-color: #141414; padding: 10px 20px;
    border-bottom: 3px solid #d35400; z-index: 100;
    display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6); height: 80px;
}
.controls { display: flex; gap: 15px; align-items: center; }
#header-actions { display: flex; gap: 10px; align-items: center; }

/* --- BOUTONS --- */
button { font-family: inherit; transition: all 0.2s; cursor: pointer; }

.btn-primary {
    padding: 0 20px; height: 50px; font-size: 1.1em;
    background: linear-gradient(135deg, #d35400, #e67e22);
    color: white; border: none; border-radius: 6px; font-weight: bold;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.4); }

.btn-sec { 
    padding: 8px 15px; background-color: #333; color: #ccc;
    border: 1px solid #444; border-radius: 5px; font-size: 0.9em;
    display: flex; align-items: center; justify-content: center; gap: 5px;
}
.btn-sec:hover { background-color: #444; color: white; border-color: #666; }

.btn-action { 
    background-color: #2a2a2a; color: #bbb; border: 1px solid #444;
    border-radius: 6px; padding: 5px; font-size: 0.75em;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 60px; height: 50px; cursor: pointer; transition: 0.2s;
}
.btn-action:hover { background-color: #383838; color: white; border-color: #777; }
.btn-action i { font-size: 1.4em; margin-bottom: 3px; }

.btn-calc-main {
    background: linear-gradient(135deg, #2980b9, #3498db); color: white;
    border: none; border-radius: 6px; padding: 0 20px; height: 50px;
    font-size: 1em; font-weight: bold; display: flex; align-items: center; gap: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.btn-calc-main:hover { background: linear-gradient(135deg, #3498db, #5dade2); box-shadow: 0 4px 8px rgba(0,0,0,0.4); }

.btn-share {
    background: linear-gradient(135deg, #8e44ad, #9b59b6); color: white;
    border: none; border-radius: 6px; padding: 0 20px; height: 50px;
    font-size: 1em; font-weight: bold; display: flex; align-items: center; gap: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); margin-left: 10px;
    animation: pulse-share 2s infinite;
}
.btn-share:hover { background: linear-gradient(135deg, #9b59b6, #af7ac5); transform: translateY(-1px); }
@keyframes pulse-share {
    0% { box-shadow: 0 0 0 0 rgba(142, 68, 173, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(142, 68, 173, 0); }
    100% { box-shadow: 0 0 0 0 rgba(142, 68, 173, 0); }
}
.share-info { font-size: 0.8em; color: #9b59b6; margin-top: 5px; text-align: right; display: none; }

.btn-toggle {
    background-color: #2c3e50; color: #fff; border: 1px solid #34495e;
    padding: 8px 12px; cursor: pointer; font-size: 0.9em;
    border-radius: 4px; font-weight: 500; display: flex; align-items: center; gap: 8px;
}
.btn-toggle:hover { background-color: #34495e; border-color: #5dade2; }

/* Petit bouton pour modale cloud */
.btn-sm {
    padding: 8px 10px;
    font-size: 0.9em;
    height: auto;
}

/* --- HERO GRID --- */
.hero-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 15px; padding: 20px; }
.hero-card { background-color: #252525; padding: 12px 15px; border-radius: 8px; border: 1px solid #333; box-shadow: 0 4px 6px rgba(0,0,0,0.2); }
.hero-title {
    font-size: 1.2em; font-weight: 800; margin-bottom: 12px;
    border-bottom: 2px solid; padding-bottom: 8px;
    display: flex; justify-content: space-between; align-items: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}
.hero-rage { color: var(--class-rage); border-color: var(--class-rage) !important; }
.hero-energy { color: var(--class-energy); border-color: var(--class-energy) !important; }
.hero-mana { color: var(--class-mana); border-color: var(--class-mana) !important; }
.hero-select-cb { width: 20px; height: 20px; cursor: pointer; accent-color: #d35400; }

.gear-row-single {
    display: flex; align-items: center; background-color: #2f2f2f;
    margin-bottom: 6px; padding: 6px 10px; border-radius: 6px;
    border: 1px solid #3a3a3a; gap: 10px; height: 40px;
}
.gear-name { width: 60px; font-weight: 600; font-size: 0.9em; color: #ddd; }

.rarity-select {
    appearance: none; -webkit-appearance: none; border: none; border-radius: 4px;
    padding: 4px 10px; font-weight: bold; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    cursor: pointer; font-size: 0.85em; width: 100px; text-align: center; transition: filter 0.2s;
}
.rarity-select:hover { filter: brightness(1.1); }
.rarity-select option { background-color: #222; color: #fff; text-shadow: none; }

.seals-wrapper { display: flex; align-items: center; gap: 4px; background: #222; padding: 3px 6px; border-radius: 20px; border: 1px solid #444; }
.seal-btn { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7em; font-weight: bold; cursor: pointer; color: #444; background: #1a1a1a; border: 1px solid #333; transition: all 0.2s; user-select: none; }
.seal-btn:hover { border-color: #666; color: #666; }
.seal-active-l { background: var(--color-legendary); color: #000; box-shadow: 0 0 8px var(--color-legendary); border: none; }
.seal-active-m { background: var(--color-mythic); color: #000; box-shadow: 0 0 8px var(--color-mythic); border: none; }
.seal-active-t { background: var(--color-titan); color: #000; box-shadow: 0 0 8px var(--color-titan); border: none; }
.seal-active-a { background: var(--color-angel); color: #fff; box-shadow: 0 0 8px var(--color-angel); border: none; }

.level-wrapper { display: flex; align-items: center; margin-left: auto; gap: 5px; font-size: 0.85em; color: #aaa; }
.level-select { background-color: #444; color: white; border: 1px solid #555; border-radius: 4px; padding: 2px 5px; font-weight: bold; width: 50px; text-align: center; }
.maxed-level { background-color: #27ae60 !important; border-color: #2ecc71 !important; color: white !important; }

/* --- BULK ACTIONS PANEL --- */
.bulk-panel {
    background-color: #2c3e50; border: 1px solid #34495e; padding: 15px; margin: 20px;
    border-radius: 8px; display: flex; flex-direction: column; gap: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}
.bulk-panel h4 { margin: 0; color: #ecf0f1; margin-right: 10px; font-size: 1em; text-transform: uppercase; letter-spacing: 1px; }
.bulk-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bulk-select { background-color: #1a1a1a; color: #eee; border: 1px solid #444; padding: 8px; border-radius: 4px; font-weight: bold; flex-grow: 1; }
.btn-bulk-apply { background-color: #27ae60; color: white; border: none; padding: 8px 20px; border-radius: 4px; font-weight: bold; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.2); width: 100%; }
@media (min-width: 768px) { .btn-bulk-apply { width: auto; } }
.btn-bulk-apply:hover { background-color: #2ecc71; }
.btn-bulk-select-all { background-color: #7f8c8d; color: white; border: none; padding: 8px 15px; border-radius: 4px; font-weight: bold; cursor: pointer; font-size: 0.85em; }
.btn-bulk-select-all:hover { background-color: #95a5a6; }

/* MODAL LIST STYLES */
.selector-item { background: #333; padding: 10px; border-radius: 5px; border: 1px solid #444; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.selector-item:hover { background: #444; border-color: #666; }
.selector-item input { accent-color: #d35400; width: 18px; height: 18px; }

/* --- TOGGLE SWITCH --- */
.switch { position: relative; display: inline-block; width: 40px; height: 20px; vertical-align: middle; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 20px; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #2196F3; }
input:focus + .slider { box-shadow: 0 0 1px #2196F3; }
input:checked + .slider:before { transform: translateX(20px); }
.toggle-label { font-size: 0.8em; color: #ccc; margin-left: 8px; vertical-align: middle; cursor: pointer; }

/* --- RESULTS & MODALS --- */
#strategy-block { background-color: #333; padding: 15px; border-radius: 8px; border: 1px solid #555; margin-bottom: 20px; text-align: center; }
.strategy-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: left; max-width: 600px; margin: 10px auto 0 auto; }
.result-card { background: #2c2c2c; border-radius: 8px; border: 1px solid #444; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
.card-header { background: #222; padding: 15px; border-bottom: 1px solid #444; }
.card-header h3 { margin: 0; color: white; }
.card-header .subtitle { margin: 5px 0 0 0; font-size: 0.85em; color: #aaa; font-style: italic; }
.card-body { padding: 20px; flex-grow: 1; }
.btn-toggle-details { width: 100%; padding: 10px; background: #333; color: #ccc; border: none; border-top: 1px solid #444; cursor: pointer; font-weight: bold; }
.details-panel { background: #1a1a1a; padding: 10px; max-height: 300px; overflow-y: auto; border-top: 1px solid #444; display: none; }
.status-reached { color: #2ecc71; font-weight: bold; display: flex; align-items: center; gap: 5px; }
.status-miss { color: #e74c3c; font-weight: bold; }
.card-success { border-color: #2ecc71; box-shadow: 0 0 15px rgba(46, 204, 113, 0.2); }
.card-header-success { background: rgba(46, 204, 113, 0.1); }
.overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); z-index: 999; display: none; backdrop-filter: blur(2px); }
.results-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #222; padding: 25px; border-radius: 10px; border: 1px solid #555; box-shadow: 0 0 30px rgba(0, 0, 0, 0.9); z-index: 1000; width: 400px; display: none; flex-direction: column; }
/* Augmentation z-index pour les sélecteurs afin qu'ils passent au-dessus du guide (z-index 1000) */
#selector-modal { z-index: 1100; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #222; }
::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .header-title { display: none !important; }
    .hide-mobile-text { display: none; }
    .sticky-header { padding: 10px 10px; height: auto; flex-direction: column; gap: 10px; }
    .controls { width: 100%; justify-content: space-between; margin: 0; }
    #header-actions { width: 100%; justify-content: space-between; }
    .btn-action { width: 45px; height: 45px; font-size: 0.7em; }
    .btn-calc-main { padding: 0 10px; font-size: 0.9em; height: 45px; }
    .btn-share { padding: 0 10px; font-size: 0.9em; height: 45px; }
    #player-stage { width: 50px; }
}

/* --- NOTIFICATION BAR --- */
.notification-bar {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #222;
    border-left: 5px solid #e67e22; /* Default: Orange (Unsaved) */
    padding: 15px 20px;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 2000;
    animation: slideIn 0.3s ease-out;
}

/* Variante Cloud Saved (Point 3) */
.notif-cloud {
    border-left-color: #2ecc71 !important; /* Green */
}

@keyframes slideIn {
    from { transform: translateY(100px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.notif-content {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    color: #eee;
}

.btn-notif-action {
    background: #e67e22;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background 0.2s;
}
.btn-notif-action:hover {
    background: #d35400;
}

@media (max-width: 600px) {
    .notification-bar {
        left: 10px; 
        right: 10px;
        bottom: 10px;
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .notif-content {
        justify-content: center;
    }
}