/* modals_equipment.css - Specialized Styling for Equipment Management Overlay */

#equip-overlay { z-index: 2000; }
#equip-content {
    width: 95%; max-width: 800px; max-height: 90%; padding: 20px;
    background: linear-gradient(145deg, #050a1a, #000000);
    border: 3px solid #00e5ff; border-radius: 20px 20px 10px 10px;
    display: flex; flex-direction: column; gap: 10px;
    position: relative; border-top: 6px solid #00e5ff;
}
#equip-header { display: flex; justify-content: space-between; align-items: center; }
#equip-header h2 { color: #00e5ff; margin: 0; font-size: 24px; text-transform: uppercase; letter-spacing: 4px; text-shadow: 0 0 15px rgba(0, 229, 255, 0.6); }
#close-equip { background: none; border: none; color: #888; font-size: 24px; cursor: pointer; }

#equip-grid {
    flex: 1; overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px; padding: 10px;
    background: rgba(0,0,0,0.4); border-radius: 8px;
}

.equip-slot {
    aspect-ratio: 1/1; background: #111; border: 1px solid #333;
    border-radius: 6px; display: flex; flex-direction: column; justify-content: center; align-items: center;
    cursor: pointer; transition: all 0.2s; position: relative;
    padding: 5px;
}
.equip-slot.empty { opacity: 0.2; cursor: default; }
.equip-slot.selected { border-color: #00e5ff; box-shadow: 0 0 10px #00e5ff; background: #001a1a; }
.equip-icon { font-size: 32px; z-index: 2; transition: transform 0.2s; }
.equip-slot:hover .equip-icon { transform: scale(1.1); }
.equip-tier-label {
    position: absolute; bottom: 2px; left: 0; width: 100%;
    font-size: 8px; font-weight: bold; text-align: center;
    text-transform: uppercase; letter-spacing: 1px; z-index: 3;
}

/* Tier Colors */
.equip-slot.tier-1 { border-color: #aaa; }
.equip-slot.tier-2 { border-color: #00ff88; box-shadow: inset 0 0 5px #00ff8844; }
.equip-slot.tier-3 { border-color: #ff00ff; box-shadow: inset 0 0 8px #ff00ff44; }
.equip-slot.tier-4 { border-color: #ffd700; box-shadow: inset 0 0 12px #ffd70044; }
.equip-tier-label.tier-1 { color: #aaa; }
.equip-tier-label.tier-2 { color: #00ff88; text-shadow: 0 0 5px #00ff8888; }
.equip-tier-label.tier-3 { color: #ff00ff; text-shadow: 0 0 5px #ff00ff88; }
.equip-tier-label.tier-4 { color: #ffd700; text-shadow: 0 0 8px #ffd70088; }

#equip-details { margin-top: 10px; height: 110px; display: flex; gap: 8px; }
#equip-info-pane { flex: 1.6; background: rgba(0,0,0,0.5); padding: 8px; border-radius: 8px; border: 1px solid #444; display: flex; flex-direction: column; justify-content: center; }
#equip-bonus-pane { flex: 1; background: rgba(0,0,0,0.4); padding: 8px; border-radius: 8px; border: 1px solid #333; overflow-y: auto; }
.equip-bonus-title { color: #00e5ff; font-size: 11px; font-weight: bold; text-align: center; margin-bottom: 6px; border-bottom: 1px solid #444; padding-bottom: 4px; text-transform: uppercase; letter-spacing: 1px; }